admin

12_vuecli/mediaapp/src/components/NavComp.vue

@@ -111,6 +111,7 @@ export default {
         position: fixed;
         top: 0;
         left: 0;
+        z-index: 10;
         width: 100vw;
         height: 1rem;
         background-color: #367962;
@@ -137,6 +138,7 @@ export default {
         position: fixed;
         bottom: 0;
         left: 0;
+        z-index: 10;
         width: 100vw;
         height: 1rem;
         background-color: #367962;

12_vuecli/mediaapp/src/components/ProductItem.vue

@@ -0,0 +1,66 @@
+<template>
+    <div class="product-item">
+        <div class="img-content"></div>
+        <div class="product-title">
+            豆瓣电影日历2025 套装礼盒 年底圣诞元旦跨年新年电影礼物
+        </div>
+        <div class="product-info">
+            圣诞元旦跨年新年电影礼物                  
+        </div>
+        <div class="product-tag">
+            <van-tag type="danger">立减70元</van-tag>
+        </div>
+        <div class="product-price">
+            <span class="new-price">¥69</span>
+            <span class="old-price">¥79</span>
+        </div>
+    </div>
+</template>
+<style scoped>
+    .product-item{
+        margin:.1rem 0;
+    }
+    .img-content{
+        width: 100%;
+        padding-top: 100%;
+        background-image: url("https://img01.yzcdn.cn/vant/cat.jpeg");
+        background-size: cover;
+        margin-bottom: .1rem;
+    }
+    .product-title{
+        font-size: .3rem;
+        font-weight: 700;
+        color: #111;
+        width: 100%;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        margin-bottom: .1rem;
+    }
+    .product-info{
+        font-size: .25rem;
+        color: #999;
+        margin-bottom: .1rem;
+        width: 100%;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
+    .product-tag{
+        line-height: 0;
+        margin-bottom: .1rem;
+    }
+    .product-price{
+        font-size: 0;
+    }
+    .product-price .new-price{
+        font-size: .3rem;
+        color:#dd1944;
+        font-weight: 700;
+    }
+    .product-price .old-price{
+        font-size: .22rem;
+        color: #999;
+        text-decoration: line-through;
+    }
+</style>

12_vuecli/mediaapp/src/views/book/BookPage.vue

@@ -38,9 +38,7 @@
               <div class="product-name">
                 豆瓣好东西系列 有阅读量斜纹布包 《好东西》官方授权周边
               </div>
-              <div class="product-info">
-                《好东西》官方授权周边商品                  
-              </div>
+              <div class="product-info">《好东西》官方授权周边商品</div>
               <div class="product-tag">
                 <van-tag type="danger">最高减138元</van-tag>
               </div>
@@ -51,57 +49,89 @@
                 <span class="old-price">¥79</span>
               </div>
               <div class="btn-content">
-                <van-button size="small" round type="danger">立即购买</van-button>
+                <van-button size="small" round type="danger"
+                  >立即购买</van-button
+                >
               </div>
             </van-col>
           </van-row>
         </div>
       </div>
     </div>
-    <div class="type-product"></div>
+    <div class="type-product">
+      <van-tabs swipe-threshold="4" color="#191919" >
+        <van-tab title="全部商品">
+          <van-row gutter="10">
+            <van-col span="12">
+              <ProductItem></ProductItem>
+            </van-col>
+            <van-col span="12">
+              <ProductItem></ProductItem>
+            </van-col>
+            <van-col span="12">
+              <ProductItem></ProductItem>
+            </van-col>
+            <van-col span="12">
+              <ProductItem></ProductItem>
+            </van-col>
+          </van-row>
+          
+        </van-tab>
+        <van-tab title="豆瓣经典">内容 2</van-tab>
+        <van-tab title="家居生活">内容 3</van-tab>
+        <van-tab title="外出旅行">内容 4</van-tab>
+        <van-tab title="文具小物">内容 4</van-tab>
+      </van-tabs>
+    </div>
   </div>
 </template>
 <style scoped>
+/* 商品分类 */
+.type-product{
+  margin-top: 1rem;
+  padding:0 .2rem;
+}
 /* 新品区域 */
-.new-product{
-  padding: .2rem;
+.new-product {
+  padding: 0.2rem;
 }
-.new-product .new-product-title{
-  font-size: .3rem;
+.new-product .new-product-title {
+  font-size: 0.3rem;
   font-weight: 700;
-  margin-bottom: .3rem;
+  margin-bottom: 0.3rem;
 }
-.new-product .product-name{
-  font-size: .3rem;
+.new-product .product-name {
+  font-size: 0.3rem;
   font-weight: 700;
   width: 100%;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  margin-bottom: .1rem;
+  margin-bottom: 0.1rem;
 }
-.new-product .product-info{
-  font-size: .25rem;
-  color:#999;
-  margin-bottom: .06rem;
+.new-product .product-info {
+  font-size: 0.25rem;
+  color: #999;
+  margin-bottom: 0.06rem;
 }
-.new-product .product-tag{
+.new-product .product-tag {
   line-height: 0;
 }
-.new-product .product-price{
-  margin-bottom: .3rem;
+.new-product .product-price {
+  margin-bottom: 0.3rem;
 }
-.new-product .product-price .new-price{
-  font-size: .3rem;
+.new-product .product-price .new-price {
+  font-size: 0.3rem;
   color: #dd1944;
   font-weight: 700;
 }
-.new-product .product-price .old-price{
-  font-size: .2rem;
+.new-product .product-price .old-price {
+  font-size: 0.2rem;
   color: #999;
   text-decoration: line-through;
 }
-.new-product .product-price,.new-product .btn-content{
+.new-product .product-price,
+.new-product .btn-content {
   line-height: 0;
 }
 /* 轮播图 */
@@ -113,9 +143,13 @@
 }
 </style>
 <script>
+import ProductItem from "@/components/ProductItem.vue"
 export default {
   mounted() {
     this.$emit("changePage", "1002");
   },
+  components:{
+    ProductItem
+  }
 };
 </script>