微信小程序实习day03-商城布局参考代码

<view>
  <view class="top">
    <view class="top-left">
      <image src="../../images/ai3.png"></image>
    </view>
    <view class="top-center">
      <image src="../../images/ath.png"></image>
      <input type="text" placeholder="检索" />
    </view>
    <view>
      <image src="../../images/ahv.png"></image>
    </view>
  </view>
  <view class="jd">
    <swiper autoplay="true" indicator-dots="true" interval="3000">
      <block wx:for="{{jds}}">
        <swiper-item>
          <image src="{{item.image}}"></image>
        </swiper-item>
      </block>
    </swiper>
  </view>
  <view class="section">
    <block wx:for="{{logs}}">
      <view class="logo-view">
        <image src="{{item.image}}" class="logo-image"></image>
        <text>{{item.title}}</text>
      </view>
    </block>
  </view>
  <view class="ms-section">
    <view class="zsms">
      <image src="../../images/bej.png"></image>
    </view>
<!--     <view style="width:50%"></view> -->
    <view class="arrowright">
      <text>更多秒杀</text>
      <image src="../../images/arrowright.png"></image>
    </view>
  </view>
  <scroll-view scroll-x="true" class="scroll-quick">
    <block wx:for="{{quicks}}">
      <view class="quick-view">
        <view>
          <image src="{{item.image}}"></image>
        </view>
        <view>
          <text>{{item.price}}</text>
        </view>
      </view>
    </block>
  </scroll-view>
  <view class="foot">
    <view style="width:33%">
      <image src="../../images/ad-0.jpg" class="ad1"></image>
    </view>
    <view style="width:34%">
      <image src="../../images/ad-big.jpg" class="ad2"></image>
    </view>
    <view style="width:33%">
      <image src="../../images/ad-1.jpg" class="ad3"></image>
    </view>
  </view>
</view>

.top {
  display: flex;
}

.top image {
  width: 50rpx;
  height: 50rpx;
}

.top-left {
  width: 20%;
  margin-left: 10rpx;
}

.top-center {
  display: flex;
  width: 60%;
}

.jd {
  width: 100%;
  height: 350rpx;
}

.jd swiper{
  height: 100%;
}

.section {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10rpx;
}

.logo-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 20%;
  /* margin: 20rpx; */
  margin-top: 10rpx;
  margin-bottom: 10rpx;
}

.logo-image {
  width: 80rpx;
  height: 80rpx;
}

.logo-view text {
  font-size: 24rpx;
}

.jd image{
  width: 100%;
  height: 350rpx;
}

.zsms image{
  width: 180rpx;
  height: 40rpx;
}

.arrowright image{
  width: 40rpx;
  height: 40rpx;
}

.ms-section{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.scroll-quick{
  width: 100%;
  white-space: nowrap;
}

.quick-view{
  display: inline-block;
  width: 220rpx;
  text-align: center;
}

.quick-view image{
  width: 220rpx;
  height: 220rpx;
}

.foot{
  display: flex;
  flex-direction: row;
}

.foot .ad1{
  width: 100%;
  height: 292rpx;
}

.foot .ad2{
  width: 100%;
  height: 292rpx;
}

.foot .ad3{
  width: 100%;
  height: 292rpx;
}

  data: {
    jds:[
      {image:"../../images/jd1.jpg"},
      {image:"../../images/jd2.jpg"},
      {image:"../../images/jd3.jpg"},
      {image:"../../images/jd4.jpg"},
      {image:"../../images/jd5.jpg"}
    ],
    logs:[
      {image:"../../images/logo1.png",title:"极客商城"},
      {image:"../../images/logo2.png",title:"极客商城"},
      {image:"../../images/logo3.png",title:"极客商城"},
      {image:"../../images/logo4.png",title:"极客商城"},
      {image:"../../images/logo5.png",title:"极客商城"},
      {image:"../../images/logo6.png",title:"极客商城"},
      {image:"../../images/logo7.png",title:"极客商城"},
      {image:"../../images/logo8.png",title:"极客商城"},
      {image:"../../images/logo9.png",title:"极客商城"},
      {image:"../../images/logo10.png",title:"极客商城"}
    ],
    quicks:[
      {image:"../../images/quick1.jpg",price:10},
      {image:"../../images/quick2.jpg",price:20},
      {image:"../../images/quick3.jpg",price:30},
      {image:"../../images/quick4.jpg",price:40},
      {image:"../../images/quick5.jpg",price:50},
      {image:"../../images/quick6.jpg",price:60}
    ]
  },