From 4d2b340a9f2e9a52895ecc9e335a4c4bac677e6f Mon Sep 17 00:00:00 2001 From: zyronon Date: Thu, 14 Mar 2024 03:05:18 +0800 Subject: [PATCH] =?UTF-8?q?=E5=95=86=E5=93=81=E8=AF=A6=E6=83=85=E9=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/less/custom.less | 9 + src/assets/less/index.less | 1 - src/assets/less/utils.less | 2 +- src/components/Footer.vue | 9 +- src/pages/home/Attention.vue | 4 +- src/pages/home/index.vue | 2 +- src/pages/shop/GoodsDetail.vue | 373 ++++++++++++++++++++++++++------- 7 files changed, 315 insertions(+), 85 deletions(-) diff --git a/src/assets/less/custom.less b/src/assets/less/custom.less index 528bdc8..938aade 100644 --- a/src/assets/less/custom.less +++ b/src/assets/less/custom.less @@ -247,3 +247,12 @@ p { font-size: 14rem; } +.flex { + display: flex; + justify-content: space-between; +} + +.space-between { + justify-content: space-between; +} + diff --git a/src/assets/less/index.less b/src/assets/less/index.less index e508358..0b0ff68 100644 --- a/src/assets/less/index.less +++ b/src/assets/less/index.less @@ -8,7 +8,6 @@ //颜色 @import "layout"; //布局 - @import "anim"; diff --git a/src/assets/less/utils.less b/src/assets/less/utils.less index 010c108..192a252 100644 --- a/src/assets/less/utils.less +++ b/src/assets/less/utils.less @@ -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; } diff --git a/src/components/Footer.vue b/src/components/Footer.vue index 09bec13..44f72eb 100644 --- a/src/components/Footer.vue +++ b/src/components/Footer.vue @@ -1,5 +1,5 @@ diff --git a/src/pages/home/index.vue b/src/pages/home/index.vue index 56715c1..0299057 100644 --- a/src/pages/home/index.vue +++ b/src/pages/home/index.vue @@ -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: [ diff --git a/src/pages/shop/GoodsDetail.vue b/src/pages/shop/GoodsDetail.vue index 5029d33..e418bb6 100644 --- a/src/pages/shop/GoodsDetail.vue +++ b/src/pages/shop/GoodsDetail.vue @@ -1,21 +1,58 @@ @@ -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; - - svg { - font-size: 22rem; - background: rgba(176, 176, 176, 0.5); - padding: 5rem; - border-radius: 50%; - } - - .right { - margin-left: 10rem; - flex: 1; + position: fixed; + left: 0; + top: 0; + width: 100vw; + z-index: 9; + + .top { + height: @header-height; display: flex; align-items: center; - justify-content: space-between; + padding: 0 10rem; + + svg { + font-size: 22rem; + background: rgba(176, 176, 176, 0.4); + padding: 5rem; + color: white; + border-radius: 50%; + } - .search { - font-size: 12rem; - border-radius: 20rem; - padding: 5rem 10rem; + .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; } } + } - .option { - margin-left: 20rem; + .bottom { + display: flex; + display: none; + + .tab { + flex: 1; display: flex; + justify-content: center; align-items: center; - gap: 20rem; + color: #646464; + + .text { + padding: 10rem 0; + padding-bottom: 15rem; + } + } + + .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); + } + } + + } + + } } \ No newline at end of file