shop

pages/shop/detail.vue

 <template>
-    <div class="shop__detail">
-11
+<div class="shop__detail">
+    <div class="top__swiper">
+        <u-swiper radius='0' :list="list6" @change="e => currentNum = e.current" :autoplay="false" height='358' indicatorStyle="right: 20px">
+            <view slot="indicator" class="indicator-num">
+                <text class="indicator-num__text">{{ currentNum + 1 }}/{{ list6.length }}</text>
+            </view>
+        </u-swiper>
+        <div class="shop__title">
+            <div>防晒布罩 加厚防风 大款 商务风</div>
+            <div>
+                <span>￥48.00</span>
+                <span>销量500笔</span>
             </div>
+        </div>
+        <div class="shop__title__2">规格 <span>儿童数学思维训练游戏(套装共5册)</span></div>
+    </div>
+</div>
 </template>
 
 <script>
-    export default {
+export default {
     data() {
         return {
-                
+            currentNum: 0,
+            list6: [require('../../static/shop/item.png'),
+                require('../../static/shop/item.png'),
+                require('../../static/shop/item.png'),
+            ],
         }
     },
-    }
+}
 </script>
 
 <style lang="scss" scoped>
+.shop__detail {
+
+    .indicator-num {
+        padding: 2px 0;
+        background-color: rgba(0, 0, 0, 0.35);
+        border-radius: 100px;
+        width: 35px;
+        margin-bottom: 40rpx;
+        @include flex;
+        justify-content: center;
+
+        &__text {
+            color: #FFFFFF;
+            font-size: 12px;
+        }
+    }
+
+    .shop__title {
+        background: #FFFFFF;
+        box-shadow: 0rpx 0rpx 28rpx 1rpx rgba(232, 232, 232, 0.2);
+        border-radius: 0rpx 0rpx 20rpx 20rpx;
+        padding: 10rpx 40rpx 30rpx 40rpx;
+        border-radius: 20rpx;
+
+        >div:nth-of-type(1) {
+            font-size: 36rpx;
+            font-family: PingFang SC;
+            font-weight: 500;
+            color: #333333;
+            margin-bottom: 20rpx;
+        }
+
+        >div:nth-of-type(2) {
+            display: flex;
+            justify-content: space-between;
+
+            >span:nth-of-type(1) {
+                font-size: 24rpx;
+                font-family: PingFang SC;
+                font-weight: 500;
+                color: #F1251B;
+            }
+
+            >span:nth-of-type(2) {
+                font-size: 28rpx;
+                font-family: PingFang SC;
+                font-weight: 500;
+                color: #999999;
+            }
+        }
+    }
 
+    .shop__title__2 {
+        background: #FFFFFF;
+        box-shadow: 0rpx 0rpx 28rpx 1rpx rgba(232, 232, 232, 0.2);
+        border-radius: 20rpx;
+        padding: 30rpx 40rpx;
+        font-size: 30rpx;
+        font-family: PingFang SC;
+        font-weight: 500;
+        color: #333333;
+        margin: 30rpx 0;
+        span {
+            font-size: 30rpx;
+            font-family: PingFang SC;
+            font-weight: 500;
+            color: #666666;
+            padding-left: 30rpx;
+        }
+    }
+}
 </style>