zhuangcheng/xcx-shop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: cache

Browse Source
This commit is contained in:
zc 2025-08-28 23:04:32 +08:00
parent 8fd06e206a
commit bd203f2f22
4 changed files with 156 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/views/commodity-detail/components/info-table.vue
View File

@ -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><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>
<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>

19
src/views/commodity-detail/components/instruction-info.vue Normal file
View File

@ -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>

73
src/views/commodity-detail/components/​​shopping-cart​.vue Normal file
View File

@ -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>

63
src/views/commodity-detail/index.vue
View File

@ -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{
h3{
footer{
.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;
}
}
}