83 lines
1.8 KiB
Vue
83 lines
1.8 KiB
Vue
<template>
|
||
<div id="commodity-detail">
|
||
<header class="h-70 bg-black">
|
||
轮播图
|
||
</header>
|
||
<main>
|
||
<div class="detail-info wrap">
|
||
<h2 class="text-2xl color-[#000]">陕西珍珠首饰项链</h2>
|
||
<h4 class="mt-2 text-sm">副标题</h4>
|
||
<ul class="detail-wrap">
|
||
<li><span>配送</span> <em>立即下单，预计最快今天23:00发货</em></li>
|
||
<li><span>服务</span> <button>7天无理由退款</button></li>
|
||
</ul>
|
||
</div>
|
||
<div class="review-info wrap">
|
||
<h3 class="wrap-title"><b>用户评价(45.6万+)</b><span>全部评价</span></h3>
|
||
<div class="mt-5">
|
||
<review-single />
|
||
</div>
|
||
</div>
|
||
<div class="wrap">
|
||
<h3 class="wrap-title"><b>商品详情</b><span>查看全部信息</span></h3>
|
||
<info-table />
|
||
</div>
|
||
</main>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import reviewSingle from './components/review-single.vue'
|
||
import infoTable from './components/info-table.vue'
|
||
</script>
|
||
|
||
<style scope lang="scss">
|
||
#commodity-detail{
|
||
background: #f2f2f2;
|
||
.wrap{
|
||
margin: .08rem .12rem;
|
||
border-radius: .12rem;
|
||
padding: .16rem;
|
||
background: #fff;
|
||
.wrap-title{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
b{
|
||
font-size: .16rem;
|
||
color: #000;
|
||
}
|
||
span{
|
||
font-size: .12rem;
|
||
color: #777;
|
||
}
|
||
}
|
||
}
|
||
.detail-info{
|
||
li{
|
||
margin-top: .12rem;
|
||
span{
|
||
margin-right: .1rem;
|
||
color: #888;
|
||
}
|
||
em{
|
||
color: #000;
|
||
font-style: normal;
|
||
}
|
||
button{
|
||
border: 1px solid #aaa;
|
||
border-radius: .02rem;
|
||
background: #fff;
|
||
padding: .02rem .04rem;
|
||
}
|
||
}
|
||
}
|
||
.review-info{
|
||
h3{
|
||
span{
|
||
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |