MoeJue/douyin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

商品详情頁

Browse Source
This commit is contained in:
zyronon 2024-03-12 00:27:38 +08:00
parent 2f2919d91f
commit c1847f4055
2 changed files with 188 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/assets/less/custom.less
View File

@ -74,7 +74,6 @@
}
}
.not-read {
@width: 7rem;
width: @width;
@ -237,3 +236,14 @@ p {
}
}
.base-page {
position: fixed;
left: 0;
right: 0;
bottom: 0;
top: 0;
overflow: auto;
color: white;
font-size: 14rem;
}

273
src/pages/shop/GoodsDetail.vue
View File

@ -1,15 +1,18 @@
<template>
<div class="goods-detail">
<div class="goods-detail base-page">
<header>
<dy-back @click="history.back()"/>
<Icon
@click="$back()"
icon="material-symbols-light:arrow-back-ios-new"/>
<div class="right">
<div class="search">
<img src="@/assets/img/icon/share-white-full.png" alt="">
<Icon icon="jam:search"/>
<div class="placeholder">多功能电源插座</div>
</div>
<div class="option">
<img src="@/assets/img/icon/components/dark-close.png" alt="">
<img src="@/assets/img/icon/components/dark-close.png" alt="">
<Icon icon="jam:search"/>
<Icon icon="mynaui:star"/>
<Icon icon="ph:share-fat"/>
</div>
</div>
</header>
@ -29,32 +32,24 @@
<span class="int">8</span>
<span class="decimal">.8</span>
</div>
<div class="discount">
<span class="text">热销款券后</span>
<div class="price">
<span class="symbol">￥</span>
<span class="int">5</span>
<span class="decimal">.9</span>
</div>
</div>
</div>
<div class="name">{{ state.detail.name }}</div>
<div class="num">已售20/100</div>
</div>
<div class="card">
<div class="price-item">
<div class="price">
￥
<div class="big">{{ state.detail.price }}</div>
</div>
<div class="right">
<div class="discount">券后￥
<div class="big">0.01</div>
起
</div>
<div class="num">已售{{ state.detail.sold }}</div>
</div>
</div>
<div class="title">{{ state.detail.name }}</div>
</div>
<div class="card">
<div class="card desc-wrapper">
<div class="item">
<div class="label">保障</div>
<div class="desc">
假一赔四·运费险·极速退款
<dy-back direction="right" scale=".8"/>
<Icon class="right-arrow" icon="mingcute:right-line"/>
</div>
</div>
<div class="item">
@ -71,21 +66,55 @@
<div class="count">共3种规格可选</div>
</div>
</div>
<dy-back direction="right" scale=".8"/>
<Icon class="right-arrow" icon="mingcute:right-line"/>
</div>
</div>
<div class="item">
<div class="label">活动</div>
<div class="desc">
<span>优惠</span>
<span>新人券 立减4</span>
<dy-back direction="right" scale=".8"/>
<div class="ellipsis">优惠新人券 立减4新人券立减4新人券立减4新人券 立减4新人券 立减4</div>
<Icon class="right-arrow" icon="mingcute:right-line"/>
</div>
</div>
<div class="item">
<div class="label">物流</div>
<div class="desc">
48小时内从浙江省发货，包邮
<div class="desc" style="display:block;">
<div style="display:flex;gap: 5rem">
<span>发货 四川成都</span>
<span style="color: #dedede">|</span>
<span>免运费</span>
</div>
<div>48小时内发货</div>
</div>
</div>
</div>
<div class="card comments">
<header>
<span>商品评论(507)</span>
<Icon class="right-arrow" icon="mingcute:right-line"/>
</header>
<div class="tags">
<div class="tag">物美价廉 <span class="gray">29</span></div>
<div class="tag">物流很好 <span class="gray">26</span></div>
<div class="tag">推荐 <span class="gray">18</span></div>
<div class="tag">商用服务好 <span class="gray">15</span></div>
</div>
<div class="comment" v-for="i in 2">
<header>
<img src="https://cdn.seovx.com/ha/?mom=302" alt="" class="avatar">
<span class="gray">花***栽</span>
</header>
<div class="w">
<div class="left">
<div class="d">
东西不错质量也很好 性价比很高 良心商家就冲这图必须给好评
</div>
<div class="gray">
china款/超值【买る双+送2双】共5双
</div>
</div>
<img src="https://cdn.seovx.com/ha/?mom=302" alt="" class="avatar">
</div>
</div>
</div>
@ -118,14 +147,22 @@ const state = reactive({
@import "@/assets/less/index.less";
.goods-detail {
color: black;
font-size: 14rem;
header {
& > header {
background: white;
height: @header-height;
display: flex;
align-items: center;
padding: 0 20rem;
padding: 0 10rem;
svg {
font-size: 22rem;
background: rgba(176, 176, 176, 0.5);
padding: 5rem;
border-radius: 50%;
}
.right {
margin-left: 10rem;
@ -144,27 +181,19 @@ const state = reactive({
align-items: center;
color: gray;
img {
margin-right: 10rem;
height: 15rem;
svg {
padding: 0;
background: unset;
}
}
.option {
margin-left: 10rem;
margin-left: 20rem;
display: flex;
align-items: center;
img {
margin-left: 15rem;
}
}
img {
width: 20rem;
gap: 20rem;
}
}
}
.imgs {
@ -185,23 +214,27 @@ const state = reactive({
border-radius: 15rem;
background: rgba(91, 89, 89, 0.5);
right: 10rem;
bottom: 10rem;
bottom: 30rem;
color: white;
}
}
.content {
//background: rgb(247, 247, 249);
background: #f1f1f1;
background: #f5f5f5;
padding: 8rem;
border-radius: 16rem 16rem 0 0;
transform: translateY(-20rem);
.info {
padding: 0 8rem;
margin-bottom: 20rem;
.price-wrap {
margin-bottom: 10rem;
margin-bottom: 20rem;
display: flex;
align-items: flex-end;
.price {
color: red;
font-weight: bold;
@ -219,15 +252,33 @@ const state = reactive({
font-size: 20rem;
}
}
.discount {
margin-left: 10rem;
color: rgb(248, 38, 74);
display: flex;
align-items: flex-end;
padding: 2rem 15rem;
padding-bottom: 4rem;
background: rgb(255 167 183 / 25%);
border-radius: 20rem;
.text {
font-size: 13rem;
}
.price {
margin-top: -6rem;
transform: translateY(4rem);
}
}
}
.name {
color: black;
font-size: 16rem;
margin-bottom: 8rem;
@lh: 18rem;
line-height: @lh;
height: @lh * 2;
overflow: hidden;
font-weight: bold;
letter-spacing: 1rem;
@ -243,16 +294,30 @@ const state = reactive({
margin: 5rem;
margin-bottom: 10rem;
background: white;
border-radius: 6rem;
border-radius: 10rem;
padding: 10rem 15rem;
}
@c: #a2a2a2;
.gray {
color: @c;
}
.right-arrow {
font-size: 18rem;
color: @c;
}
.desc-wrapper {
.item {
display: flex;
align-items: center;
align-items: flex-start;
padding: 5rem 0;
margin-bottom: 22rem;
.label {
color: gray;
color: @c;
}
.desc {
@ -272,6 +337,13 @@ const state = reactive({
}
}
.ellipsis {
max-width: 70vw;
overflow: hidden; //超出的文本隐藏
text-overflow: ellipsis; //溢出用省略号显示
white-space: nowrap; //溢出不换行
}
.options {
display: flex;
overflow: hidden;
@ -291,6 +363,7 @@ const state = reactive({
display: flex;
align-items: center;
position: absolute;
color: @c;
.bg {
width: 60rem;
@ -307,60 +380,68 @@ const state = reactive({
}
}
}
}
.price-item {
.comments {
& > header {
margin-bottom: 20rem;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10rem;
.big {
font-size: 20rem;
span {
font-size: 18rem;
font-weight: bold;
transform: translateY(2rem);
}
.price {
color: rgb(248, 38, 74);
display: flex;
align-items: flex-end;
font-size: 14rem;
margin-right: 5rem;
}
.right {
flex: 1;
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 2rem;
.discount {
font-size: 10rem;
color: rgb(248, 38, 74);
display: flex;
align-items: flex-end;
padding: 2rem 15rem;
padding-bottom: 4rem;
background: rgb(255 167 183 / 25%);
border-radius: 20rem;
.big {
line-height: 20rem;
font-size: 18rem;
}
}
.num {
font-size: 12rem;
color: darkgray;
}
}
}
.tags {
display: flex;
gap: 10rem;
margin-bottom: 20rem;
.tag {
display: flex;
gap: 5rem;
background: rgb(255 167 183 / 15%);
padding: 6rem 8rem;
border-radius: 8rem;
font-size: 11rem;
}
}
.comment {
margin-bottom: 20rem;
& > header {
margin-bottom: 10rem;
display: flex;
align-items: center;
gap: 5rem;
img {
border-radius: 50%;
width: 25rem;
height: 25rem;
}
}
.w {
display: flex;
gap: 10rem;
.d{
margin-bottom: 10rem;
}
img {
border-radius: 8rem;
height: 50rem;
width: 50rem;
}
}
}
}
}
}
</style>