Browse Source

Merge remote-tracking branch 'origin/master'

pull/40/head
zyronon 1 year ago
parent
commit
f5de4e067e
  1. 9
      src/assets/less/custom.less
  2. 1
      src/assets/less/index.less
  3. 2
      src/assets/less/utils.less
  4. 9
      src/components/Footer.vue
  5. 4
      src/pages/home/Attention.vue
  6. 5
      src/pages/home/index.vue
  7. 143
      src/pages/home/slide/LongVideo.vue
  8. 658
      src/pages/shop/GoodsDetail.vue
  9. 238
      src/pages/shop/Shop.vue

9
src/assets/less/custom.less

@ -247,3 +247,12 @@ p { @@ -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

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

2
src/assets/less/utils.less

@ -85,7 +85,7 @@ margin @@ -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

@ -1,5 +1,5 @@ @@ -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"; @@ -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 { @@ -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

@ -113,7 +113,9 @@ @@ -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>

5
src/pages/home/index.vue

@ -112,7 +112,7 @@ @@ -112,7 +112,7 @@
</SlideItem>
<Slide2 :active="state.navIndex === 2 && state.baseIndex === 1"/>
<SlideItem>
<Shop/>
<LongVideo/>
</SlideItem>
<Slide4 :active="state.navIndex === 4 && state.baseIndex === 1"/>
</SlideHorizontal>
@ -218,6 +218,7 @@ import Slide2 from "@/pages/home/slide/Slide2.vue"; @@ -218,6 +218,7 @@ import Slide2 from "@/pages/home/slide/Slide2.vue";
import Slide4 from "@/pages/home/slide/Slide4.vue";
import {DefaultUser} from "@/utils/const_var";
import {$no} from "@/utils";
import LongVideo from "@/pages/home/slide/LongVideo.vue";
const nav = useNav()
const store = useStore()
@ -227,7 +228,7 @@ const bodyHeight = computed(() => store.state.bodyHeight) @@ -227,7 +228,7 @@ const bodyHeight = computed(() => store.state.bodyHeight)
const bodyWidth = computed(() => store.state.bodyWidth)
const state = reactive({
baseIndex: 0,
baseIndex: 1,
navIndex: 4,
test: '',
recommendList: [

143
src/pages/home/slide/LongVideo.vue

@ -0,0 +1,143 @@ @@ -0,0 +1,143 @@
<script setup>
</script>
<template>
<div class="page">
<div class="item"
:class="[
i % 5 === 0 && 'big',
i % 5 === 0 ? '' : (i % 2 === 1 && 'l'),
i % 5 === 0 ? '' : (i % 2 === 0 && 'r'),
]"
v-for="(item,i) in 100">
<video
controls
src="@/assets/video/0.mp4"></video>
<img v-lazy="`https://cdn.seovx.com/ha/?mom=302&d=${i}`" alt="" class="poster">
<div class="title">
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
</div>
<div class="bottom">
<div class="l">
<img v-lazy="`https://cdn.seovx.com/ha/?mom=302&d=${i}`" alt="" class="avatar">
<div class="name">哈哈哈哈</div>
</div>
<div class="r">
<Icon icon="icon-park-outline:like"/>
<div class="num">9.2</div>
</div>
</div>
</div>
</div>
</template>
<style scoped lang="less">
@import "@/assets/less/index";
.page {
display: grid;
grid-template-columns: repeat(2, 1fr);
row-gap: 15rem;
height: calc(100vh - @header-height - @footer-height);
margin-top: @header-height;
overflow: auto;
box-sizing: border-box;
.item {
margin: 0 10rem;
display: flex;
flex-direction: column;
gap: 8rem;
.poster {
border-radius: 12rem;
width: 100%;
height: 140rem;
object-fit: cover;
}
video {
display: none;
height: 220rem;
object-fit: cover;
}
.title {
height: 36rem;
color: white;
font-size: 14rem;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box; //
-webkit-box-orient: vertical; //--
-webkit-line-clamp: 2; //
}
.f {
display: flex;
align-items: center;
justify-content: space-between;
gap: 5rem;
}
.bottom {
color: gray;
.f;
font-size: 13rem;
.l {
.f;
.avatar {
@w: 20rem;
width: @w;
height: @w;
object-fit: cover;
border-radius: 50%;
}
}
.r {
.f;
svg {
font-size: 16rem;
}
}
}
&.big {
grid-column-start: 1;
grid-column-end: 3;
margin: 0;
.poster {
display: none;
}
video {
display: block;
}
.title {
height: unset;
-webkit-line-clamp: 1;
}
.title, .bottom {
padding: 0 10rem;
}
}
&.l {
margin-right: 5rem;
}
&.r {
margin-left: 5rem;
}
}
}
</style>

658
src/pages/shop/GoodsDetail.vue

@ -1,22 +1,59 @@ @@ -1,22 +1,59 @@
<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 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 class="option">
<Icon icon="jam:search"/>
<Icon icon="mynaui:star"/>
<Icon icon="ph:share-fat"/>
</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="imgs">
<div class="slide-imgs">
<SlideHorizontal v-model:index="state.index">
<SlideItem v-for="item in state.detail.imgs">
<img :src="item" alt="">
@ -24,7 +61,7 @@ @@ -24,7 +61,7 @@
</SlideHorizontal>
<div class="index">{{ state.index + 1 }}/{{ state.detail.imgs.length }}</div>
</div>
<div class="content">
<div class="content p">
<div class="info">
<div class="price-wrap">
<div class="price">
@ -50,7 +87,7 @@ @@ -50,7 +87,7 @@
<div class="label">保障</div>
<div class="desc">
假一赔四·运费险·极速退款
<Icon class="right-arrow" icon="mingcute:right-line"/>
<Icon class="arrow" icon="mingcute:right-line"/>
</div>
</div>
<div class="item">
@ -67,14 +104,7 @@ @@ -67,14 +104,7 @@
<div class="count">共3种规格可选</div>
</div>
</div>
<Icon class="right-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="right-arrow" icon="mingcute:right-line"/>
<Icon class="arrow" icon="mingcute:right-line"/>
</div>
</div>
<div class="item">
@ -85,7 +115,21 @@ @@ -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>
@ -93,7 +137,7 @@ @@ -93,7 +137,7 @@
<div class="card comments">
<header>
<span>商品评论(507)</span>
<Icon class="right-arrow" icon="mingcute:right-line"/>
<Icon class="arrow" icon="mingcute:right-line"/>
</header>
<div class="tags">
<div class="tag">物美价廉 <span class="gray">29</span></div>
@ -111,7 +155,7 @@ @@ -111,7 +155,7 @@
<div class="d">
东西不错质量也很好 性价比很高 良心商家就冲这图必须给好评
</div>
<div class="gray">
<div class="c2">
china款/超值买る双+送2双共5双
</div>
</div>
@ -131,7 +175,7 @@ @@ -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 @@ @@ -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>
@ -159,13 +203,13 @@ @@ -159,13 +203,13 @@
<span class="left">店铺推荐</span>
<div class="right">
<span class="gray">查看全部</span>
<Icon class="right-arrow" icon="mingcute:right-line"/>
<Icon class="arrow" icon="mingcute:right-line"/>
</div>
</header>
<div class="wrap">
<div class="item" v-for="i in 4">
<img src="https://cdn.seovx.com/ha/?mom=302" alt="" class="avatar">
<div class="name"></div>
<div class="name">热销中袜子男潮流百搭中筒袜子袜子男潮流百搭中筒袜子</div>
<div class="price">
<span class="symbol"></span>
<span class="int">8</span>
@ -176,16 +220,104 @@ @@ -176,16 +220,104 @@
</div>
</div>
</div>
<div class="img-list" v-if="true">
<header>
<div class="l"></div>
<span class="gray">商品详情</span>
<div class="r"></div>
</header>
<div class="imgs">
<img v-lazy="`https://cdn.seovx.com/ha/?mom=302&d=${i}`" alt="" class="avatar" v-for="i in 5">
</div>
</div>
<div class="p">
<div class="card other-desc">
<div class="item"
:class="activeIndexs.includes(i) && 'active'"
@click="toggle(i)"
v-for="(item,i) in 3">
<header>
<div class="l">价格说明</div>
<Icon class="arrow" icon="mingcute:right-line"/>
</header>
<div class="text">
价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明
</div>
</div>
</div>
<div class="other-recommend">
<header>
你可以还会喜欢
</header>
<div v-masonry class="goods-list"
:class="{fixed:state.fixed}"
transition-duration="0s"
item-selector=".goods">
<div v-masonry-tile class="goods"
@click="nav('/shop/detail')"
v-for="(item, index) in state.list">
<div class="item">
<img class="poster" v-lazy="Utils.$imgPreview(item.cover)"/>
<div class="bottom">
<div class="desc">
{{ item.name }}
</div>
<div class="discounts" v-if="item.discount">{{ item.discount }}</div>
<div class="info">
<div class="price">
<div class="big">{{ item.price }}</div>
</div>
<div class="num">已售{{ item.sold }}</div>
</div>
<div class="low" v-if="item.isLowPrice">
近30天低价
</div>
</div>
</div>
</div>
</div>
</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>
<script setup>
import SlideHorizontal from "@/components/slide/SlideHorizontal.vue";
import SlideItem from "@/components/slide/SlideItem.vue";
import {reactive} from "vue";
import {reactive, ref} from "vue";
import goods from "@/assets/data/goods";
import {useNav} from "@/utils/hooks/useNav";
import Utils from "@/utils";
let activeIndexs = ref([])
const nav = useNav()
const props = defineProps({
id: {
@ -193,69 +325,156 @@ const props = defineProps({ @@ -193,69 +325,156 @@ 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],
index: 2
index: 2,
list: goods.list,
listEl: null,
fixed: false
})
function toggle(i) {
let rIndex = activeIndexs.value.findIndex(v => v === i)
if (rIndex > -1) {
activeIndexs.value.splice(rIndex, 1)
} else {
activeIndexs.value.push(i)
}
}
</script>
<style scoped lang="less">
@import "@/assets/less/index.less";
.goods-detail {
background: #f5f5f5;
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;
}
}
.imgs {
.slide-imgs {
position: relative;
height: 30vh;
height: 55vh;
img {
height: 100%;
@ -276,16 +495,42 @@ const state = reactive({ @@ -276,16 +495,42 @@ const state = reactive({
}
}
.p {
padding: 8rem;
}
.gray {
color: @c;
}
.c2 {
color: @c2;
font-size: 13rem;
}
.card {
margin: 5rem;
margin-bottom: 10rem;
background: white;
border-radius: 10rem;
padding: 10rem 15rem;
}
.arrow {
font-size: 18rem;
color: @c;
}
.content {
//background: rgb(247, 247, 249);
background: #f5f5f5;
padding: 8rem;
padding-bottom: 0;
border-radius: 16rem 16rem 0 0;
transform: translateY(-20rem);
.price {
color: red;
font-weight: bold;
font-weight: 900;
.symbol {
font-size: 16rem;
@ -312,12 +557,14 @@ const state = reactive({ @@ -312,12 +557,14 @@ const state = reactive({
.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 {
@ -325,6 +572,7 @@ const state = reactive({ @@ -325,6 +572,7 @@ const state = reactive({
}
.price {
color: white !important;
margin-top: -6rem;
transform: translateY(4rem);
}
@ -336,7 +584,7 @@ const state = reactive({ @@ -336,7 +584,7 @@ const state = reactive({
font-size: 16rem;
margin-bottom: 8rem;
overflow: hidden;
font-weight: bold;
font-weight: 900;
letter-spacing: 1rem;
}
@ -346,24 +594,6 @@ const state = reactive({ @@ -346,24 +594,6 @@ const state = reactive({
}
}
.card {
margin: 5rem;
margin-bottom: 10rem;
background: white;
border-radius: 10rem;
padding: 10rem 15rem;
}
@c: #a2a2a2;
.gray {
color: @c;
}
.right-arrow {
font-size: 18rem;
color: @c;
}
.desc-wrapper {
.item {
@ -446,8 +676,8 @@ const state = reactive({ @@ -446,8 +676,8 @@ const state = reactive({
align-items: center;
span {
font-size: 18rem;
font-weight: bold;
font-size: 16rem;
font-weight: 900;
}
}
@ -525,12 +755,13 @@ const state = reactive({ @@ -525,12 +755,13 @@ const state = reactive({
.name {
font-size: 16rem;
font-weight: bold;
font-weight: 900;
}
.tags {
display: flex;
font-size: 12rem;
font-size: 10rem;
font-weight: 900;
gap: 10rem;
.tag {
@ -548,7 +779,7 @@ const state = reactive({ @@ -548,7 +779,7 @@ const state = reactive({
.r {
border-radius: 4rem;
padding: 5rem 14rem;
font-weight: bold;
font-weight: 900;
background: @primary-btn-color;
color: white;
}
@ -564,10 +795,13 @@ const state = reactive({ @@ -564,10 +795,13 @@ const state = reactive({
.grid {
width: 33%;
text-align: center;
font-size: 13rem;
font-weight: bold;
.gray {
.c2 {
font-weight: normal;
font-size: 12rem;
margin-bottom: 3rem;
margin-bottom: 6rem;
}
}
@ -587,7 +821,7 @@ const state = reactive({ @@ -587,7 +821,7 @@ const state = reactive({
justify-content: space-between;
.left {
font-weight: bold;
font-weight: 900;
}
.right {
@ -611,6 +845,14 @@ const state = reactive({ @@ -611,6 +845,14 @@ const state = reactive({
width: 100%;
}
.name {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box; //
-webkit-box-orient: vertical; //--
-webkit-line-clamp: 2; //
}
.price {
.symbol {
font-size: 14rem;
@ -631,6 +873,228 @@ const state = reactive({ @@ -631,6 +873,228 @@ const state = reactive({
}
}
}
.img-list {
background: #f5f5f5;
& > header {
font-size: 16rem;
padding-bottom: 20rem;
display: flex;
justify-content: center;
gap: 10rem;
align-items: center;
.l {
width: 0;
height: 0;
border-right: 40px solid @c;
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
}
.r {
.l;
border-left: 40px solid @c;
border-right: unset;
}
}
.imgs {
img {
width: 100%;
display: block;
}
}
}
.other-desc {
.item {
& > header {
padding: 15rem 0;
display: flex;
justify-content: space-between;
align-items: center;
}
.text {
display: none;
}
&.active {
.text {
display: block;
}
}
&:last-child {
& > header {
padding-bottom: 10rem;
}
}
&:first-child {
& > header {
padding-top: 10rem;
}
}
}
}
.other-recommend {
margin-bottom: 60rem;
& > header {
padding: 15rem;
padding-bottom: 5rem;
font-weight: 900;
font-size: 15rem;
}
@fColor: #f1f1f1;
.fixed {
background: @fColor;
}
@p: 5rem;
.goods-list {
padding-bottom: 20rem;
}
.goods {
width: 50%;
box-sizing: border-box;
padding: 5rem;
.item {
border-radius: 8rem;
overflow: hidden;
background: white;
img {
width: 100%;
}
.bottom {
padding: 10rem;
.desc {
color: black;
font-size: 16rem;
margin-bottom: 8rem;
@lh: 18rem;
line-height: @lh;
height: @lh * 2;
overflow: hidden;
}
.discounts {
display: inline-block;
@c: rgb(199, 89, 106);
border: 1rem solid @c;
padding: 0 4rem;
color: @c;
font-size: 12rem;
margin-bottom: 4rem;
}
.info {
display: flex;
align-items: flex-end;
.price {
color: rgb(248, 38, 74);
display: flex;
align-items: flex-end;
font-size: 14rem;
margin-right: 5rem;
.big {
font-size: 22rem;
font-weight: 900;
transform: translateY(2rem);
}
}
.num {
color: darkgray;
font-size: 12rem;
}
}
.low {
margin-top: 2rem;
color: rgb(230, 153, 92);
}
}
}
}
}
.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>

238
src/pages/shop/Shop.vue

@ -1,40 +1,89 @@ @@ -1,40 +1,89 @@
<template>
<div id="Shop">
<div class="bg">
<div class="top"></div>
<div class="bottom"></div>
</div>
<div class="search">
<div class="search-input">
<img src="@/assets/img/icon/search-gray.png" alt="">
<div class="placeholder">50元话费充值</div>
<img src="@/assets/img/icon/scan-gray.png" alt="">
<div class="search-notice">搜索</div>
</div>
<div class="more">
<img src="@/assets/img/icon/category-gray.png" alt="">
<span>更多</span>
<div class="wrapper">
<div class="search">
<div class="search-input">
<Icon icon="tabler:search"/>
<div class="placeholder">50元话费充值</div>
<Icon color="gray" icon="lucide:camera"/>
<div class="search-notice">搜索</div>
</div>
<div class="more">
<Icon icon="ep:shopping-cart"/>
</div>
</div>
</div>
<Scroll class="Scroll"
fixedHeight="100"
@fixed="e=>state.fixed = e"
@pulldown="loadData">
<div class="options">
<div class="option">
<img src="@/assets/img/icon/scan-gray.png" alt="">
<span>我的订单 快捷查单</span>
</div>
<div class="option">
<img src="@/assets/img/icon/scan-gray.png" alt="">
<span>购物车 空空如也</span>
<div class="wrapper">
<div class="card">
<div class="options">
<div class="option" @click="$no">
<Icon icon="lets-icons:order-light"/>
<div>我的订单</div>
</div>
<div class="option" @click="$no">
<Icon icon="material-symbols-light:charging-station-outline"/>
<div>手机充值</div>
</div>
<div class="option" @click="$no">
<Icon icon="lucide:message-square-quote"/>
<div>购物消息</div>
</div>
<div class="option" @click="$no">
<Icon icon="fluent:location-16-regular"/>
<div>小时达</div>
</div>
<div class="option" @click="$no">
<Icon icon="ri:refund-2-fill"/>
<div>退款/售后</div>
</div>
<div class="option" @click="$no">
<Icon icon="icon-park-outline:clothes-turtleneck"/>
<div>潮流服饰</div>
</div>
</div>
</div>
</div>
<div class="navs">
<div class="wrapper">
<div class="nav" v-for="i in 20">推荐</div>
<div class="card" style="margin-bottom: 5rem;">
<div class="baiyibutie">
<div class="item">
<img src="@/assets/img/icon/shop/baiyibutie.png" alt="">
<span>38节补贴</span>
</div>
<div class="item">
<img src="@/assets/img/icon/shop/1.webp" alt="">
<span class="price">
<span class="m"></span>
<span>470</span>
</span>
</div>
<div class="item">
<img src="@/assets/img/icon/shop/2.webp" alt="">
<span class="price">
<span class="m"></span>
<span>699</span>
</span>
</div>
<div class="item">
<img src="@/assets/img/icon/shop/3.png" alt="">
<span class="price">
<span class="m"></span>
<span>8.8</span>
</span>
</div>
<div class="item">
<img src="@/assets/img/icon/shop/4.jpg" alt="">
<span class="price">
<span class="m"></span>
<span>2.99</span>
</span>
</div>
</div>
</div>
</div>
<div v-masonry class="goods-list"
:class="{fixed:state.fixed}"
transition-duration="0s"
@ -42,7 +91,7 @@ @@ -42,7 +91,7 @@
<div v-masonry-tile class="goods"
@click="nav('/shop/detail')"
v-for="(item, index) in state.list">
<div class="card">
<div class="item">
<img class="poster" :src="Utils.$imgPreview(item.cover)"/>
<div class="bottom">
<div class="desc">
@ -67,12 +116,15 @@ @@ -67,12 +116,15 @@
</div>
</template>
<script setup>
<script setup lang="jsx">
import {onMounted, reactive} from "vue";
import Utils from "@/utils";
import {useNav} from "@/utils/hooks/useNav";
import api from "@/api";
import SlideList from "@/pages/home/slide/SlideList.vue";
import Utils, {$no} from "@/utils";
import Scroll from "@/components/Scroll.vue";
import goods from "@/assets/data/goods";
import {useNav} from "@/utils/hooks/useNav";
const nav = useNav()
const state = reactive({
@ -110,31 +162,14 @@ onMounted(() => { @@ -110,31 +162,14 @@ onMounted(() => {
#Shop {
font-size: 14rem;
color: white;
padding-top: @header-height;
position: relative;
background: @fColor;
background: #f1f1f1;
padding: 10rem 5rem;
color: black;
.bg {
top: 0;
position: absolute;
width: 100vw;
height: 30vh;
//background: red;
@th: 70%;
@eColor: rgb(32, 28, 58);
.top {
height: @th;
background: linear-gradient(to bottom, rgb(56, 30, 77), @eColor);
}
.bottom {
height: 100% - @th;
background: red;
background: linear-gradient(to bottom, @eColor, @fColor);
}
.wrapper {
padding: 0 5rem;
}
.search {
@ -142,20 +177,22 @@ onMounted(() => { @@ -142,20 +177,22 @@ onMounted(() => {
z-index: 2;
display: flex;
align-items: center;
height: @header-height;
padding: 9rem 20rem;
height: 36rem;
box-sizing: border-box;
margin-bottom: 10rem;
img {
width: 20rem;
svg {
font-size: 22rem;
}
.search-input {
border: 3rem solid rgb(140, 48, 74);
border: 1rem solid rgb(140, 48, 74);
border-radius: 8rem;
height: 100%;
padding: 0 10rem;
padding-right: 3rem;
flex: 1;
gap: 10rem;
display: flex;
align-items: center;
@ -168,12 +205,19 @@ onMounted(() => { @@ -168,12 +205,19 @@ onMounted(() => {
}
.search-notice {
color: rgb(242, 62, 92);
background: rgb(242, 62, 92);
padding: 0 10rem;
height: 85%;
border-radius: 6rem;
display: flex;
justify-content: center;
align-items: center;
color: white;
}
}
.more {
margin-left: 20rem;
margin-left: 10rem;
display: flex;
flex-direction: column;
align-items: center;
@ -182,50 +226,66 @@ onMounted(() => { @@ -182,50 +226,66 @@ onMounted(() => {
}
}
.card {
background: white;
padding: 10rem 15rem;
margin-bottom: 10rem;
border-radius: 8rem;
}
.options {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20rem;
height: 40rem;
padding: 4rem 20rem;
display: flex;
overflow-x: auto;
box-sizing: border-box;
img {
width: 20rem;
margin-right: 10rem;
}
.option {
width: 17vw;
flex-shrink: 0;
font-size: 13rem;
flex: 1;
display: flex;
background: rgb(63, 58, 78);
padding: 6rem 8rem;
border-radius: 6rem;
flex-direction: column;
justify-content: center;
align-items: center;
svg {
font-size: 30rem;
margin-bottom: 3rem;
}
}
}
.navs {
overflow: auto;
padding: 0 10rem;
.baiyibutie {
display: flex;
.wrapper {
.item {
display: flex;
//flex-wrap: wrap;
}
flex-direction: column;
justify-content: center;
align-items: center;
width: 25%;
font-size: 12rem;
color: gray;
.nav {
margin: 10rem;
word-break: keep-all;
//border-bottom: 2rem solid white;
img {
width: 80%;
}
.price {
color: red;
font-size: 16rem;
font-weight: bold;
.m {
font-size: 10rem;
}
}
}
}
.Scroll {
position: relative;
z-index: 2;
//height: calc(100vh - @header-height) !important;
height: calc(100vh - @header-height * 2 - @footer-height) !important;
height: calc(100vh - @footer-height * 2) !important;
}
.fixed {
@ -235,15 +295,15 @@ onMounted(() => { @@ -235,15 +295,15 @@ onMounted(() => {
@p: 5rem;
.goods-list {
padding: @p;
padding-bottom: 20rem;
}
.goods {
width: calc(50% - @p);
width: 50%;
box-sizing: border-box;
padding: 5rem;
.card {
.item {
border-radius: 8rem;
overflow: hidden;
background: white;
@ -307,4 +367,4 @@ onMounted(() => { @@ -307,4 +367,4 @@ onMounted(() => {
}
}
}
</style>
</style>

Loading…
Cancel
Save