You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
486 lines
9.7 KiB
486 lines
9.7 KiB
<template>
|
|
<view class="page1">
|
|
<!-- 固定顶部导航栏（悬浮在背景图之上） -->
|
|
<view class="nav-bar" :style="{'padding-top': menuButtonInfo.top +'px'}">
|
|
<view class="back-btn" @tap="back">
|
|
<uni-icons type="left" size="28"></uni-icons>
|
|
</view>
|
|
<view class="title-search">
|
|
<uni-icons type="search" size="18" style="margin: 9rpx;"></uni-icons>
|
|
<input type="text" placeholder="搜索" />
|
|
</view>
|
|
</view>
|
|
<!-- 背景头图（随页面滚动） -->
|
|
<view class="title">
|
|
<view class="hero-spark spark-a"></view>
|
|
<view class="hero-spark spark-b"></view>
|
|
<view class="hero-spark spark-c"></view>
|
|
</view>
|
|
<view class="content">
|
|
<view class="title1">
|
|
<view class="c-1">
|
|
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/801c569079da4540990c1cc634186fdd.png"
|
|
alt="">
|
|
</view>
|
|
<view class="c-2">
|
|
AAA二手数码
|
|
</view>
|
|
<view class="c-3">
|
|
10分钟前来过
|
|
</view>
|
|
<view class="c-4">
|
|
关注
|
|
</view>
|
|
</view>
|
|
<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="true" :interval="interval"
|
|
:duration="duration">
|
|
<swiper-item v-for="(item,index) in adList" :key="index">
|
|
<img class="hero-bg-img" :src="item" alt="" />
|
|
</swiper-item>
|
|
</swiper>
|
|
<view class="c-5">
|
|
给钱就出，二手电竞桌（电脑桌）快速发货，标价就是实价#桌类 #办公桌 #电竞电脑装备都是全新的，包邮！！！
|
|
</view>
|
|
<view class="p-1">
|
|
<view class="p-2">
|
|
评论 <text>（14）</text>
|
|
<view class="line"></view>
|
|
</view>
|
|
<view class="p-3">
|
|
<view class="left">
|
|
<view class="p-4">
|
|
<view class="p-5">
|
|
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/801c569079da4540990c1cc634186fdd.png"
|
|
alt="" />
|
|
</view>
|
|
<view class="p-6">
|
|
魔法理发师
|
|
</view>
|
|
<view class="p-7">
|
|
4天前.广东
|
|
</view>
|
|
</view>
|
|
<view class="p-8">
|
|
活动有效时间到2025年5月25日哦，感兴趣的朋友快来参与吧～
|
|
</view>
|
|
</view>
|
|
<view class="right">
|
|
<view class="p-9">
|
|
<uni-icons type="heart" size="15"></uni-icons>
|
|
<!-- <uni-icons type="heart-filled" color="red" size="12"></uni-icons> -->
|
|
</view>
|
|
<view class="p-10">
|
|
20
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="p-3">
|
|
<view class="left">
|
|
<view class="p-4">
|
|
<view class="p-5">
|
|
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/801c569079da4540990c1cc634186fdd.png"
|
|
alt="" />
|
|
</view>
|
|
<view class="p-6">
|
|
魔法理发师
|
|
</view>
|
|
<view class="p-7">
|
|
4天前.广东
|
|
</view>
|
|
</view>
|
|
<view class="p-8">
|
|
活动有效时间到2025年5月25日哦，感兴趣的朋友快来参与吧～
|
|
</view>
|
|
</view>
|
|
<view class="right">
|
|
<view class="p-9">
|
|
<uni-icons type="heart" size="15"></uni-icons>
|
|
<!-- <uni-icons type="heart-filled" color="red" size="12"></uni-icons> -->
|
|
</view>
|
|
<view class="p-10">
|
|
20
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="p-3">
|
|
<view class="left">
|
|
<view class="p-4">
|
|
<view class="p-5">
|
|
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/801c569079da4540990c1cc634186fdd.png"
|
|
alt="" />
|
|
</view>
|
|
<view class="p-6">
|
|
魔法理发师
|
|
</view>
|
|
<view class="p-7">
|
|
4天前.广东
|
|
</view>
|
|
</view>
|
|
<view class="p-8">
|
|
活动有效时间到2025年5月25日哦，感兴趣的朋友快来参与吧～
|
|
</view>
|
|
</view>
|
|
<view class="right">
|
|
<view class="p-9">
|
|
<uni-icons type="heart" size="15"></uni-icons>
|
|
<!-- <uni-icons type="heart-filled" color="red" size="12"></uni-icons> -->
|
|
</view>
|
|
<view class="p-10">
|
|
20
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="b-1"></view>
|
|
</view>
|
|
</view>
|
|
<view class="bottom">
|
|
<view class="b-2">
|
|
<view class="b-3">
|
|
<uni-icons type="chat" size="25"></uni-icons>
|
|
<!-- <uni-icons type="chat-filled" color="red"></uni-icons> -->
|
|
</view>
|
|
<view>
|
|
留言
|
|
</view>
|
|
</view>
|
|
<view class="b-2">
|
|
<view class="b-3">
|
|
<uni-icons type="star" size="25"></uni-icons>
|
|
<!-- <uni-icons type="star-filled" color="red"></uni-icons> -->
|
|
</view>
|
|
<view>
|
|
20
|
|
</view>
|
|
</view>
|
|
<view class="b-3">
|
|
<view class="b-4" style="color: rgba(166, 255, 234, 1);">
|
|
立即购买
|
|
</view>
|
|
<view class="b-4" style="background: linear-gradient(90deg, #e3ff96, #a6ffea);">
|
|
<uni-icons type="chatboxes"></uni-icons>聊一聊
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
adList: ['https://jewel-shop.oss-cn-beijing.aliyuncs.com/62c9aa038b2541ad9c400a76ddae7ef8.png',
|
|
'https://jewel-shop.oss-cn-beijing.aliyuncs.com/62c9aa038b2541ad9c400a76ddae7ef8.png'
|
|
],
|
|
interval: 4000,
|
|
duration: 1000,
|
|
indicatorDots: true,
|
|
menuButtonInfo: {},
|
|
}
|
|
},
|
|
onLoad(option) {
|
|
|
|
},
|
|
onShow() {
|
|
this.menuButtonInfo = uni.getMenuButtonBoundingClientRect();
|
|
},
|
|
onPullDownRefresh() {
|
|
this.menuList = [{
|
|
categoryName: '推荐',
|
|
id: 'tuijian',
|
|
checked: true
|
|
}]
|
|
this.productItem = []
|
|
this.getCategory(this.shopItem.id);
|
|
this.getProduct('');
|
|
},
|
|
onPageScroll(e) {
|
|
this.lastScrollTop = e.scrollTop;
|
|
// 节流：80ms 内不重复检测，避免频繁的 selectorQuery
|
|
const now = Date.now();
|
|
if (now - this._lastDetectTs < 80) return;
|
|
this._lastDetectTs = now;
|
|
this.detectCurrentCategory();
|
|
},
|
|
methods: {
|
|
back() {
|
|
const pages = getCurrentPages();
|
|
if (pages.length > 1) {
|
|
uni.navigateBack();
|
|
} else {
|
|
uni.switchTab({
|
|
url: '/pages/index/index'
|
|
});
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
width: 100%;
|
|
height: 100%;
|
|
font-size: 24rpx;
|
|
background: #F5F8F5;
|
|
color: #00231C;
|
|
}
|
|
|
|
.page1 {
|
|
width: 100%;
|
|
height: 100%;
|
|
font-size: 24rpx;
|
|
position: relative;
|
|
}
|
|
|
|
.title {
|
|
background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/25cad6ddbfb44230abf0c4d1a6259e16.png') no-repeat;
|
|
width: 100%;
|
|
height: 340rpx;
|
|
background-size: 100%;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.nav-bar {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
z-index: 100;
|
|
padding: 16rpx 24rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.radio-check {
|
|
background: linear-gradient(90deg, #e3ff96, #a6ffea);
|
|
width: 42rpx;
|
|
height: 42rpx;
|
|
border-radius: 42rpx;
|
|
text-align: center;
|
|
line-height: 42rpx;
|
|
margin: 0 18rpx 0 0;
|
|
box-shadow: 0 6rpx 16rpx rgba(49, 224, 183, 0.22);
|
|
}
|
|
|
|
.radio-no-check {
|
|
width: 42rpx;
|
|
height: 42rpx;
|
|
border-radius: 42rpx;
|
|
border: 2rpx solid #e8eeee;
|
|
margin: 0 18rpx 0 0;
|
|
background: #fff;
|
|
}
|
|
|
|
.pack-options {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 22rpx;
|
|
}
|
|
|
|
.pack-option {
|
|
display: flex;
|
|
align-items: center;
|
|
color: #00231C;
|
|
font-size: 28rpx;
|
|
font-weight: 800;
|
|
margin-right: 40rpx;
|
|
}
|
|
|
|
.title-search {
|
|
display: flex;
|
|
flex: 1;
|
|
background: rgba(255, 255, 255, 0.9);
|
|
height: 54rpx;
|
|
margin-left: 20rpx;
|
|
border-radius: 54rpx;
|
|
|
|
input {
|
|
height: 54rpx;
|
|
line-height: 54rpx;
|
|
}
|
|
}
|
|
|
|
.content {
|
|
margin-top: -70px;
|
|
}
|
|
|
|
.back-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.swiper {
|
|
width: 100%;
|
|
height: 750rpx;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.swiper img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.title1 {
|
|
display: flex;
|
|
width: 100%;
|
|
padding: 0 12px;
|
|
height: 40px;
|
|
line-height: 40px;
|
|
}
|
|
|
|
.c-1 {
|
|
width: 34px;
|
|
height: 34px;
|
|
margin-top: 2.5px;
|
|
}
|
|
|
|
.c-1 img {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-size: 100%;
|
|
border-radius: 34px;
|
|
}
|
|
|
|
.c-2 {
|
|
margin: 0 8px;
|
|
font-size: 15px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.c-3 {
|
|
flex: 1;
|
|
color: rgba(0, 35, 28, 0.7);
|
|
}
|
|
|
|
.c-4 {
|
|
width: 50px;
|
|
height: 30px;
|
|
background: rgba(0, 35, 28, 1);
|
|
color: rgba(166, 255, 234, 1);
|
|
text-align: center;
|
|
line-height: 30px;
|
|
border-radius: 10px;
|
|
margin-top: 2.5px;
|
|
}
|
|
|
|
.c-5 {
|
|
height: auto;
|
|
font-size: 15px;
|
|
font-weight: 700;
|
|
border-bottom: 7px solid #eee;
|
|
padding: 10px;
|
|
background: #fff;
|
|
}
|
|
|
|
.p-1 {
|
|
background: #fff;
|
|
}
|
|
|
|
.p-2 {
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
height: 40px;
|
|
line-height: 40px;
|
|
padding: 0 10px;
|
|
}
|
|
|
|
.line {
|
|
width: 70px;
|
|
height: 10px;
|
|
background: linear-gradient(135deg, rgba(2, 251, 221, 1) 0%, rgba(166, 255, 234, 0) 100%);
|
|
margin-top: -16px;
|
|
}
|
|
|
|
.p-3 {
|
|
display: flex;
|
|
padding: 10px 0;
|
|
}
|
|
|
|
.p-4 {
|
|
display: flex;
|
|
height: 25px;
|
|
color: rgba(0, 35, 28, 0.6);
|
|
padding: 0 10px;
|
|
}
|
|
|
|
.p-5 {
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
.p-5 img{
|
|
width:100%;
|
|
height: 100%;
|
|
background-size: 100%;
|
|
border-radius: 24px;
|
|
}
|
|
|
|
.p-6 {
|
|
margin-left: 10px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.p-7 {
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.p-8 {
|
|
width: 75%;
|
|
margin-left: 43px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.p-9 {}
|
|
|
|
.p-10 {
|
|
color: rgba(191, 200, 198, 1);
|
|
}
|
|
|
|
.left {
|
|
flex: 1;
|
|
}
|
|
|
|
.right {
|
|
width: 35px;
|
|
text-align: center;
|
|
}
|
|
.b-1{
|
|
width: 100%;
|
|
height: 100px;
|
|
}
|
|
.bottom{
|
|
position: fixed;
|
|
bottom: 0;
|
|
background: #fff;
|
|
width: 100%;
|
|
height: 80px;
|
|
display: flex;
|
|
padding: 10px;
|
|
border-top: 1px solid #eee;
|
|
}
|
|
.b-2{
|
|
width: 25px;
|
|
height: 40px;
|
|
margin-right: 30px;
|
|
text-align: center;
|
|
}
|
|
.b-3{
|
|
flex: 1;
|
|
display: flex;
|
|
}
|
|
.b-4{
|
|
flex: 1;
|
|
text-align: center;
|
|
width: 90px;
|
|
height: 35px;
|
|
background: rgba(0, 35, 28, 1);
|
|
line-height: 35px;
|
|
border-radius: 35px;
|
|
margin: 0 5px;
|
|
}
|
|
</style>
|