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-14 03:05:18 +08:00
parent afcd02f1ca
commit 4d2b340a9f
7 changed files with 317 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -247,3 +247,12 @@ p {
font-size: 14rem;
}
.flex {
display: flex;
justify-content: space-between;
}
.space-between {
justify-content: space-between;
}

1
src/assets/less/index.less
View File

@ -8,7 +8,6 @@
//颜色
@import "layout";
//布局
@import "anim";

2
src/assets/less/utils.less
View File

@ -85,7 +85,7 @@ margin
}
.mb(7);
.mb(@n, @i: 1) when (@i =< @n) {
.mb(@n, @i: 0) when (@i =< @n) {
.mb@{i}r {
margin-bottom: (10rem * @i) !important;
}

9
src/components/Footer.vue
View File

@ -1,5 +1,5 @@
<template>
<div v-if="visible" class="footer">
<div v-if="visible" class="footer" :class="{isWhite}">
<div class="l-button" @click="refresh(1)">
<span v-if="!isRefresh1" :class="{active:currentTab===1}">首页</span>
<img v-if="isRefresh1 " src="../assets/img/icon/refresh1.png" alt="" class="refresh">
@ -28,7 +28,7 @@ import bus, {EVENT_KEY} from "../utils/bus";
export default {
name: "Footer",
props: ['initTab'],
props: ['initTab', 'isWhite'],
data() {
return {
isRefresh1: false,
@ -99,6 +99,11 @@ export default {
display: flex;
//justify-content: space-between;
&.isWhite {
background: white!important;
color: #000!important;
}
.l-button {
width: 20%;
display: flex;

4
src/pages/home/Attention.vue
View File

@ -113,7 +113,9 @@
</div>
</div>
</Scroll>
<Footer v-bind:init-tab="2" style="position: fixed;left: 0;"/>
<Footer v-bind:init-tab="2"
:is-white="true"
style="position: fixed;left: 0;"/>
</div>
</template>

2
src/pages/home/index.vue
View File

@ -227,7 +227,7 @@ const bodyHeight = computed(() => store.state.bodyHeight)
const bodyWidth = computed(() => store.state.bodyWidth)
const state = reactive({
baseIndex: 0,
baseIndex: 1,
navIndex: 4,
test: '',
recommendList: [

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

@ -1,21 +1,58 @@
<template>
<div class="goods-detail base-page">
<header>
<Icon
@click="$back()"
icon="material-symbols-light:arrow-back-ios-new"/>
<div class="right">
<div class="search">
<Icon icon="jam:search"/>
<div class="placeholder">多功能电源插座</div>
</div>
<div class="option">
<Icon icon="jam:search"/>
<Icon icon="mynaui:star"/>
<Icon icon="ph:share-fat"/>
<div class="goods-detail base-page"
ref="page"
@scroll="scroll"
>
<header ref="header">
<div class="top">
<Icon
@click="$back()"
icon="material-symbols-light:arrow-back-ios-new"/>
<div class="right">
<div class="search">
<Icon icon="jam:search"/>
<div class="placeholder">多功能电源插座</div>
</div>
<div class="option">
<Icon icon="jam:search"/>
<Icon icon="mynaui:star"/>
<Icon icon="ph:share-fat"/>
</div>
</div>
</div>
</header>
<header class="shadow" ref="headerShadow">
<div class="top">
<Icon
@click="$back()"
icon="material-symbols-light:arrow-back-ios-new"/>
<div class="right">
<div class="search">
<Icon icon="jam:search"/>
<div class="placeholder">多功能电源插座</div>
</div>
<div class="option">
<Icon icon="mynaui:star"/>
<Icon icon="ph:share-fat"/>
</div>
</div>
</div>
<div class="bottom">
<div class="tab active">
<div class="text">商品</div>
</div>
<div class="tab">
<div class="text">评价</div>
</div>
<div class="tab">
<div class="text">详情</div>
</div>
<div class="tab">
<div class="text">推荐</div>
</div>
</div>
</header>
<div class="slide-imgs">
<SlideHorizontal v-model:index="state.index">
<SlideItem v-for="item in state.detail.imgs">
@ -70,13 +107,6 @@
<Icon class="arrow" icon="mingcute:right-line"/>
</div>
</div>
<div class="item">
<div class="label">活动</div>
<div class="desc">
<div class="ellipsis">优惠新人券 立减4新人券立减4新人券立减4新人券 立减4新人券 立减4</div>
<Icon class="arrow" icon="mingcute:right-line"/>
</div>
</div>
<div class="item">
<div class="label">物流</div>
<div class="desc" style="display:block;">
@ -85,7 +115,21 @@
<span style="color: #dedede">|</span>
<span>免运费</span>
</div>
<div>48小时内发货</div>
<div class="flex space-between mb1r mt1r">
<div>48小时内发货</div>
<Icon class="arrow" icon="mingcute:right-line"/>
</div>
<div class="flex space-between mt1r">
<div class="gray">送至 四川省成都市</div>
<Icon class="arrow" icon="mingcute:right-line"/>
</div>
</div>
</div>
<div class="item mb0r">
<div class="label">参数</div>
<div class="desc">
<div class="ellipsis">优惠新人券 立减4新人券立减4新人券立减4新人券 立减4新人券 立减4</div>
<Icon class="arrow" icon="mingcute:right-line"/>
</div>
</div>
</div>
@ -111,7 +155,7 @@
<div class="d">
东西不错质量也很好 性价比很高 良心商家就冲这图必须给好评
</div>
<div class="gray">
<div class="c2">
china款/超值【买る双+送2双】共5双
</div>
</div>
@ -131,7 +175,7 @@
<div class="tag">好评过千</div>
<div class="tag">销量超10万</div>
</div>
<div class="gray">店铺口碑4.90分</div>
<div class="c2">店铺口碑4.90分</div>
</div>
<div class="r">进店</div>
</div>
@ -139,17 +183,17 @@
<div class="desc">
<div class="grid">
<div class="gray">商品质量</div>
<div class="c2">商品质量</div>
<div>商品评价一般</div>
</div>
<div class="line"></div>
<div class="grid">
<div class="gray">物流速度</div>
<div class="c2">物流速度</div>
<div>平均24小时发货</div>
</div>
<div class="line"></div>
<div class="grid">
<div class="gray">商品质量</div>
<div class="c2">商品质量</div>
<div>商品评价一般</div>
</div>
</div>
@ -177,7 +221,7 @@
</div>
</div>
<div class="img-list" v-if="false">
<div class="img-list" v-if="true">
<header>
<div class="l"></div>
<span class="gray">商品详情</span>
@ -185,7 +229,7 @@
</header>
<div class="imgs">
<img src="https://cdn.seovx.com/ha/?mom=302" alt="" class="avatar" v-for="i in 5">
<img v-lazy="`https://cdn.seovx.com/ha/?mom=302&d=${i}`" alt="" class="avatar" v-for="i in 5">
</div>
</div>
@ -218,7 +262,7 @@
@click="nav('/shop/detail')"
v-for="(item, index) in state.list">
<div class="item">
<img class="poster" :src="Utils.$imgPreview(item.cover)"/>
<img class="poster" v-lazy="Utils.$imgPreview(item.cover)"/>
<div class="bottom">
<div class="desc">
{{ item.name }}
@ -241,6 +285,27 @@
</div>
</div>
<div class="toolbar">
<div class="options">
<div class="option">
<Icon icon="iconoir:shop-window"/>
<div class="text">进店</div>
</div>
<div class="option">
<Icon icon="icon-park-outline:message-emoji"/>
<div class="text">客服</div>
</div>
<div class="option">
<Icon icon="icon-park-outline:shopping"/>
<div class="text">购物车</div>
</div>
</div>
<div class="btns">
<div class="btn">加入购物车</div>
<div class="btn">领券购买</div>
</div>
</div>
</div>
</template>
@ -260,6 +325,20 @@ const props = defineProps({
default: () => ''
}
})
let page = ref()
let header = ref()
let headerShadow = ref()
function scroll() {
let d = page.value.scrollTop / 200
// console.log('s', d, header.value)
if (d > 0) {
header.value.style.opacity = 1 - d
} else {
header.value.style.opacity = 1 - d
}
headerShadow.value.style.opacity = d
}
const state = reactive({
detail: goods.list[1],
@ -287,56 +366,115 @@ function toggle(i) {
color: black;
font-size: 14rem;
@c: #a2a2a2;
@c2: #c0c0c0;
@red: rgb(248, 38, 74);
& > header {
background: white;
height: @header-height;
display: flex;
align-items: center;
padding: 0 10rem;
position: fixed;
left: 0;
top: 0;
width: 100vw;
z-index: 9;
svg {
font-size: 22rem;
background: rgba(176, 176, 176, 0.5);
padding: 5rem;
border-radius: 50%;
}
.right {
margin-left: 10rem;
flex: 1;
.top {
height: @header-height;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 10rem;
.search {
font-size: 12rem;
border-radius: 20rem;
padding: 5rem 10rem;
svg {
font-size: 22rem;
background: rgba(176, 176, 176, 0.4);
padding: 5rem;
color: white;
border-radius: 50%;
}
.right {
margin-left: 10rem;
flex: 1;
background: rgb(243, 243, 243);
display: flex;
align-items: center;
color: gray;
justify-content: space-between;
svg {
padding: 0;
background: unset;
.search {
font-size: 12rem;
border-radius: 20rem;
padding: 5rem 10rem;
flex: 1;
background: rgb(243, 243, 243);
display: flex;
align-items: center;
color: gray;
visibility: hidden;
svg {
padding: 0;
background: unset;
}
}
.option {
margin-left: 15rem;
display: flex;
align-items: center;
gap: 8rem;
}
}
}
.bottom {
display: flex;
display: none;
.tab {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
color: #646464;
.text {
padding: 10rem 0;
padding-bottom: 15rem;
}
}
.option {
margin-left: 20rem;
display: flex;
align-items: center;
gap: 20rem;
.active {
color: black;
.text {
border-bottom: 2.5rem solid black;
}
}
}
}
.shadow {
opacity: 0;
background: white;
svg {
background: unset !important;
color: black !important;
}
.search {
svg {
color: gray !important;
}
visibility: unset !important;
}
.bottom {
display: flex;
}
}
.slide-imgs {
position: relative;
height: 30vh;
height: 55vh;
img {
height: 100%;
@ -361,6 +499,15 @@ function toggle(i) {
padding: 8rem;
}
.gray {
color: @c;
}
.c2 {
color: @c2;
font-size: 13rem;
}
.card {
margin: 5rem;
margin-bottom: 10rem;
@ -383,7 +530,7 @@ function toggle(i) {
.price {
color: red;
font-weight: bold;
font-weight: 900;
.symbol {
font-size: 16rem;
@ -410,12 +557,14 @@ function toggle(i) {
.discount {
margin-left: 10rem;
color: rgb(248, 38, 74);
//color: rgb(248, 38, 74);
color: white !important;
display: flex;
align-items: flex-end;
padding: 2rem 15rem;
padding-bottom: 4rem;
background: rgb(255 167 183 / 25%);
//background: rgb(255 167 183 / 25%);
background: rgb(248, 38, 74);
border-radius: 20rem;
.text {
@ -423,6 +572,7 @@ function toggle(i) {
}
.price {
color: white !important;
margin-top: -6rem;
transform: translateY(4rem);
}
@ -434,7 +584,7 @@ function toggle(i) {
font-size: 16rem;
margin-bottom: 8rem;
overflow: hidden;
font-weight: bold;
font-weight: 900;
letter-spacing: 1rem;
}
@ -444,9 +594,6 @@ function toggle(i) {
}
}
.gray {
color: @c;
}
.desc-wrapper {
.item {
@ -529,8 +676,8 @@ function toggle(i) {
align-items: center;
span {
font-size: 18rem;
font-weight: bold;
font-size: 16rem;
font-weight: 900;
}
}
@ -608,13 +755,13 @@ function toggle(i) {
.name {
font-size: 16rem;
font-weight: bold;
font-weight: 900;
}
.tags {
display: flex;
font-size: 10rem;
font-weight: bold;
font-weight: 900;
gap: 10rem;
.tag {
@ -632,7 +779,7 @@ function toggle(i) {
.r {
border-radius: 4rem;
padding: 5rem 14rem;
font-weight: bold;
font-weight: 900;
background: @primary-btn-color;
color: white;
}
@ -648,13 +795,13 @@ function toggle(i) {
.grid {
width: 33%;
text-align: center;
font-weight: bold;
font-size: 13rem;
font-weight: bold;
.gray {
.c2 {
font-weight: normal;
font-size: 12rem;
margin-bottom: 3rem;
margin-bottom: 6rem;
}
}
@ -674,7 +821,7 @@ function toggle(i) {
justify-content: space-between;
.left {
font-weight: bold;
font-weight: 900;
}
.right {
@ -725,7 +872,6 @@ function toggle(i) {
}
}
}
}
.img-list {
@ -742,14 +888,14 @@ function toggle(i) {
.l {
width: 0;
height: 0;
border-right: 40px solid black;
border-right: 40px solid @c;
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
}
.r {
.l;
border-left: 40px solid black;
border-left: 40px solid @c;
border-right: unset;
}
}
@ -796,9 +942,15 @@ function toggle(i) {
}
.other-recommend {
margin-bottom: 60rem;
& > header {
padding: 15rem;
padding-bottom: 5rem;
font-weight: 900;
font-size: 15rem;
}
@fColor: #f1f1f1;
.fixed {
@ -861,7 +1013,7 @@ function toggle(i) {
.big {
font-size: 22rem;
font-weight: bold;
font-weight: 900;
transform: translateY(2rem);
}
}
@ -880,6 +1032,69 @@ function toggle(i) {
}
}
}
.toolbar {
position: fixed;
bottom: 0;
width: 100vw;
left: 0;
background: white;
display: flex;
padding: 10rem;
box-sizing: border-box;
gap: 6rem;
.options {
flex: 1;
display: flex;
.option {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
font-size: 11rem;
color: #646464;
svg {
font-size: 18rem;
}
&:first-child {
svg {
color: red;
}
}
}
}
.btns {
width: 60%;
display: flex;
font-size: 15rem;
font-weight: bold;
background: @red;
color: white;
border-radius: 12rem;
overflow: hidden;
height: 45rem;
.btn {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
&:first-child {
color: @red;
background: rgb(255, 233, 237);
}
}
}
}
}
</style>