feat: cache

src/views/commodity-detail/components/info-table.vue

@@ -1,8 +1,8 @@
 <template>
   <div id="info-table">
     <ul class="rounded-[.08rem]" style="border: 1px solid #ddd;">
-      <li class="h-8 leading-8 pl-2" style="border-bottom: 1px solid #ddd;"><span class="">规格</span><b>约6-00g</b></li>
+      <li class="h-8 flex items-center" style="border-bottom: 1px solid #ddd;"><span class="block h-full w-16 pl-2 bg-[#f1f1f1] leading-8 color-[#666]">规格</span><b class="pl-2">约6-00g</b></li>
-      <li><span>规格</span><b>约6-00g</b></li>
+      <li class="h-8 flex items-center" style="border-bottom: 1px solid #ddd;"><span class="block h-full w-16 pl-2 bg-[#f1f1f1] leading-8 color-[#666]">规格</span><b class="pl-2">约6-00g</b></li>
     </ul>
   </div>
 </template>
@@ -13,6 +13,8 @@
 
 <style lang="scss" scoped>
 #info-table{
-  
+  ul li:last-child{
+    border-bottom: none !important;
+  }
 }
 </style>

src/views/commodity-detail/components/instruction-info.vue

@@ -0,0 +1,19 @@
+<template>
+  <div id="instructions-info" class="bg-[#f2f2f2] rounded-[.08rem] p-3">
+    <h4 class="mb-3 text-sm color-[#333]">价格说明</h4>
+    <p class="mb-3 leading-4 text-[.11rem]">是否水电费水电费水电费是都发啥打法是打发四大四大盛世嫡妃水电费是的手动阀是的</p>
+    <p class="mb-3 leading-4 text-[.11rem]">是否水电费水电费水电费是都发啥打法是打发四大四大盛世嫡妃水电费是的手动阀是的水电费水电费水电费手动阀四大分三大发啥打法是都发啥打法</p>
+  </div>
+</template>
+
+<script lang="ts" setup>
+
+</script>
+
+<style lang="scss" scoped>
+ #instructions-info{
+  p:last-child{
+    margin-bottom: 0;
+  }
+ }
+</style>

src/views/commodity-detail/components/​​shopping-cart​.vue

@@ -0,0 +1,73 @@
+<template>
+  <div id="shopping-cart" class="p-2 relative">
+    <div class="mb-8">
+      <div class="cart-wrap">
+        <p class="flex justify-between"><span class="max-w-12 mr-1">张四</span> <b class="font- flex-1">我的详细地址是什么东西的地方的好的么</b></p>
+      </div>
+      <div class="cart-wrap mt-2">
+        <div class="flex">
+          <img class="w-16 h-16 mr-4" style="border-radius: .04rem" src="" alt="">
+          <p>¥<span>29.9</span></p>
+        </div>
+        <div class="cart-cagetory-wrap">
+          <h4>更多系列</h4>
+          <div class="cagetory">
+            <p>手表系列</p>
+            <p>手表系列水</p>
+            <p>手表</p>
+            <p>手表123</p>
+            <p>手表12</p>
+          </div>
+          <h4>颜色</h4>
+          <div class="cagetory">
+            <p>手表系列</p>
+            <p>手表系列水</p>
+            <p>手表</p>
+            <p>手表123</p>
+            <p>手表12</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="absolute w-full h-8 left-0 bottom-0 px-2 box-border">
+      <button class="block w-full h-full border-none bg-red color-white rounded-[.04rem]">确定</button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+
+</script>
+
+<style lang="scss" scoped>
+#shopping-cart{
+  .cart-wrap{
+    padding: .12rem .08rem;
+    background: #fff;
+    border-radius: .04rem;
+    overflow: hidden;
+  }
+  .cart-cagetory-wrap{
+    h4{
+      font-weight: bold;
+      margin-top: .16rem;
+      margin-bottom: .12rem;
+    }
+    .cagetory {
+      display: flex;
+      flex-wrap: wrap;
+      & >p{
+       flex-shrink: 0;
+        height: .28rem;
+        line-height: .28rem;
+        background: #f2f2f2;
+        padding: 0 .2rem;
+        color: #666;
+        border-radius: .04rem;
+        margin-right: .08rem;
+        margin-bottom: .08rem;
+      }
+    }
+  }
+}
+</style>

src/views/commodity-detail/index.vue

@@ -20,15 +20,48 @@
       </div>
       <div class="wrap">
         <h3 class="wrap-title"><b>商品详情</b><span>查看全部信息</span></h3>
-        <info-table />
+        <info-table class="mt-3" />
+        <div class="imgs">
+          <img class="w-full h-40" src="" alt="" />
+          <img class="w-full h-40" src="" alt="" />
+        </div>
+      </div>
+      <div class="wrap">
+        <h3 class="wrap-title"><b>质量达标</b></h3>
+        <h4 class="mt-2 color-[#666]">客服的满意，是我们最大的信任</h4>
+        <instruction-info class="mt3" />
       </div>
     </main>
+    <shopping-cart class="mb-10"></shopping-cart>
+    <footer class="flex fixed bottom-0 left-0 w-full h-10 justify-between items-center pr-2 box-border bg-white">
+      <div class="flex items-center w-[1.6rem] justify-around">
+        <p class="icon-wrap">
+          <img src="" alt="">
+          <span>首页</span>
+        </p>
+        <p class="icon-wrap">
+          <img src="" alt="">
+          <span>客服</span>
+        </p>
+        <p class="icon-wrap">
+          <img src="" alt="">
+          <span>购物车</span>
+        </p>
+      </div>
+      <div class="flex-1 button-wrap">
+
+        <button class="bg-orange">加入购物车</button>
+        <button class="bg-red color-white">立即购买</button>
+      </div>
+    </footer>
   </div>
 </template>
 
 <script lang="ts" setup>
 import reviewSingle from './components/review-single.vue'
 import infoTable from './components/info-table.vue'
+import instructionInfo from './components/instruction-info.vue'
+import shoppingCart from './components/​​shopping-cart​.vue'
 </script>
 
 <style scope lang="scss">
@@ -72,10 +105,32 @@ import infoTable from './components/info-table.vue'
       }
     }
   }
-  .review-info{
+  footer{
-    h3{
+    .icon-wrap{
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      img{
+        width: .1rem;
+        height: .1rem;
+      }
       span{
-
+        font-size: .11rem;
+      }
+    }
+    .button-wrap{
+      display: flex;
+      align-items: center;
+      border-radius: .04rem;
+      overflow: hidden;
+      height: .32rem;
+      button{
+        display: block;
+        height: 100% !important;
+        width: 50%;
+        font-size: .14rem;
+        border: none;
+        height: .28rem;
       }
     }
   }