root
/
school_uni
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

1

master
tianyi 3 weeks ago
parent
e446ebd9d9
commit
f3b28d3f9a
1 changed files with 486 additions and 0 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 486
      package2/IdleTrad/detail.vue

486
package2/IdleTrad/detail.vue
View File

@ -0,0 +1,486 @@
<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>
Write Preview
Loading…
Cancel
Save