552 lines
15 KiB
Vue
552 lines
15 KiB
Vue
|
<template>
|
|||
|
|
<view class="content">
|
|||
|
|
<!-- 顶部渐变背景（作为固定区域的背景） -->
|
|||
|
|
<view class="fixed-top-bg"></view>
|
|||
|
|
|
|||
|
|
<!-- 固定在顶部的区域：导航栏 + 标签栏 -->
|
|||
|
|
<view class="fixed-top-container">
|
|||
|
|
<!-- 导航栏 -->
|
|||
|
|
<view class="nav-bar">
|
|||
|
|
<view class="nav-bar-l" @click="goBack">
|
|||
|
|
<image class="nav-bar-l-img"
|
|||
|
|
src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/a52cd5ad-a26f-4426-ad59-e2d481fe0e92.png"
|
|||
|
|
mode="widthFix"></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="nav-bar-c">
|
|||
|
|
<view class="nav-bar-c-text">我的优惠券</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="nav-bar-r">
|
|||
|
|
<view class="nav-bar-r-text" @click="gotoCouponHistory()">历史记录</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="coupon-title">
|
|||
|
|
<view class="coupon-tab" @click="selectd(0)">
|
|||
|
|
<view class="coupon-tab-text" :class="{ active: isselect === 0 }">全部优惠券</view>
|
|||
|
|
<image class="tab-line-img" v-if="isselect === 0"
|
|||
|
|
src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/b304a532-2c5d-467b-b7f7-f30f58cdc7ec.png">
|
|||
|
|
</image>
|
|||
|
|
</view>
|
|||
|
|
<view class="coupon-tab" @click="selectd(1)">
|
|||
|
|
<view class="coupon-tab-text" :class="{ active: isselect === 1 }">即将到期</view>
|
|||
|
|
<image class="tab-line-img" v-if="isselect === 1"
|
|||
|
|
src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/b304a532-2c5d-467b-b7f7-f30f58cdc7ec.png">
|
|||
|
|
</image>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="list-coupon-container">
|
|||
|
|
<!-- 已领取的优惠券 -->
|
|||
|
|
<view class="list-coupon" v-if="isselectd && !timesout">
|
|||
|
|
<!-- 已领取标题 -->
|
|||
|
|
<view class="collectd-title">
|
|||
|
|
<image class="collectd-title-icon"
|
|||
|
|
src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/71c747be-b80c-496e-aeab-821a7dddcfc2.png"
|
|||
|
|
mode="widthFix"></image>
|
|||
|
|
<view class="collectd-title-text">已领取的优惠券</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 空状态提示 -->
|
|||
|
|
<view v-if="filterCollectedList.length === 0" class="empty-tip">
|
|||
|
|
<view class="empty-text">暂无已领取的优惠券</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 已领取优惠券卡片列表（使用组件） -->
|
|||
|
|
<CouponCard v-for="(item, index) in showCollectedList" :key="'collected-' + index" :coupon="item"
|
|||
|
|
@action="(status) => handleAvailableAction(status, item)" />
|
|||
|
|
|
|||
|
|
<!-- 展开/收起按钮（仅已领取优惠券使用） -->
|
|||
|
|
<view v-if="filterCollectedList.length > 4" class="expand-btn" @click="toggleExpand">
|
|||
|
|
<view class="expand-text">{{ isExpanded ? '收起全部' : '展开全部' }}</view>
|
|||
|
|
<image class="expand-icon"
|
|||
|
|
:src="isExpanded ? 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/fe418cfb-99c5-43ca-8ffd-5c656fb1cd06.png' : 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/169e99f5-8181-43d9-b290-f0526690ff83.png'"
|
|||
|
|
mode="widthFix"></image>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 更多可领优惠券（无展开/收起） -->
|
|||
|
|
<view class="list-coupon" v-if="!timesout">
|
|||
|
|
<!-- 可领取标题 -->
|
|||
|
|
<view class="collectd-title">
|
|||
|
|
<image class="collectd-title-icon"
|
|||
|
|
src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/71c747be-b80c-496e-aeab-821a7dddcfc2.png"
|
|||
|
|
mode="widthFix"></image>
|
|||
|
|
<view class="collectd-title-text">更多可领优惠券</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 空状态提示 -->
|
|||
|
|
<view v-if="availableCouponList.length === 0" class="empty-tip">
|
|||
|
|
<view class="empty-text">暂无可领取的优惠券</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 可领取优惠券卡片列表（使用组件） -->
|
|||
|
|
<CouponCard v-for="(item, index) in formattedAvailableList" :key="'available-' + index" :coupon="item"
|
|||
|
|
@action="(status) => handleAvailableAction(status, item)" />
|
|||
|
|
</view>
|
|||
|
|
<view class="no-data" v-if="collectedCouponList.length<0">
|
|||
|
|
<image class="no-data-img"
|
|||
|
|
src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/035b7613-338b-4a71-9975-291cec794f89.png"
|
|||
|
|
mode="widthFix"></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="daoqi" v-if="isselect==1">
|
|||
|
|
<CouponCard class="daoqi-list" v-for="(item, index) in formattedAvailableLis"
|
|||
|
|
:key="'available-' + index" :coupon="item"
|
|||
|
|
@action="(status) => handleAvailableAction(status, item)" />
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import CouponCard from './components/couponCard.vue';
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
components: {
|
|||
|
|
CouponCard
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
timesout: false,
|
|||
|
|
statusBarHeight: 0,
|
|||
|
|
isselectd: true,
|
|||
|
|
isselect: 0, // 默认选中全部优惠券
|
|||
|
|
isExpanded: false, // 已领取优惠券是否展开
|
|||
|
|
// 已领取优惠券列表
|
|||
|
|
collectedCouponList: [{
|
|||
|
|
denomination: 20,
|
|||
|
|
condition: '满150元可用',
|
|||
|
|
name: '平台|新人专享券',
|
|||
|
|
expireTime: '有效期至2025.08.21 10:10',
|
|||
|
|
tagType: 'new',
|
|||
|
|
status: 'available'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
denomination: 45,
|
|||
|
|
condition: '满300元可用',
|
|||
|
|
name: '平台|新人专享券',
|
|||
|
|
expireTime: '有效期至2025.08.21 10:10',
|
|||
|
|
tagType: 'new',
|
|||
|
|
status: 'available'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
denomination: 330,
|
|||
|
|
condition: '满5650元可用',
|
|||
|
|
name: '平台|新人专享券',
|
|||
|
|
expireTime: '有效期至2025.08.21 10:10',
|
|||
|
|
tagType: 'soon',
|
|||
|
|
status: 'available'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
denomination: 20,
|
|||
|
|
condition: '满150元可用',
|
|||
|
|
name: '平台|新人专享券',
|
|||
|
|
expireTime: '有效期至2025.04.21 23:10',
|
|||
|
|
tagType: 'expire',
|
|||
|
|
status: 'available'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
denomination: 10,
|
|||
|
|
condition: '满99元可用',
|
|||
|
|
name: '平台|满减券',
|
|||
|
|
expireTime: '有效期至2025.09.10 23:59',
|
|||
|
|
tagType: 'new',
|
|||
|
|
status: 'available'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
denomination: 50,
|
|||
|
|
condition: '满500元可用',
|
|||
|
|
name: '平台|满减券',
|
|||
|
|
expireTime: '有效期至2025.08.30 12:00',
|
|||
|
|
tagType: 'new',
|
|||
|
|
status: 'available'
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
// 更多可领优惠券列表
|
|||
|
|
availableCouponList: [{
|
|||
|
|
denomination: 20,
|
|||
|
|
condition: '满150元可用',
|
|||
|
|
name: '平台|新人专享券',
|
|||
|
|
expireTime: '有效期至2025.08.21 10:10',
|
|||
|
|
tagType: 'new' // 用于图标
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
denomination: 330,
|
|||
|
|
condition: '满5650元可用',
|
|||
|
|
name: '平台|新人专享券',
|
|||
|
|
expireTime: '有效期至2025.08.21 10:10',
|
|||
|
|
tagType: 'new'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
denomination: 888,
|
|||
|
|
condition: '满9999元可用',
|
|||
|
|
name: '平台|新人专享券',
|
|||
|
|
expireTime: '有效期至2025.08.21 10:10',
|
|||
|
|
tagType: 'new'
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
timeoutdatalist: [{
|
|||
|
|
denomination: 20,
|
|||
|
|
condition: '满150元可用',
|
|||
|
|
name: '平台|新人专享券',
|
|||
|
|
expireTime: '还剩09:59:59过期',
|
|||
|
|
tagType: 'new' // 用于图标
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
denomination: 20,
|
|||
|
|
condition: '满150元可用',
|
|||
|
|
name: '平台|新人专享券',
|
|||
|
|
expireTime: '还剩09:59:59过期',
|
|||
|
|
tagType: 'new' // 用于图标
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
denomination: 20,
|
|||
|
|
condition: '满150元可用',
|
|||
|
|
name: '平台|新人专享券',
|
|||
|
|
expireTime: '还剩09:59:59过期',
|
|||
|
|
tagType: 'expired' // 用于图标
|
|||
|
|
},
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
// 已领取优惠券筛选后列表（根据标签）
|
|||
|
|
filterCollectedList() {
|
|||
|
|
if (this.isselect === 0) {
|
|||
|
|
return this.collectedCouponList
|
|||
|
|
} else {
|
|||
|
|
// 即将到期逻辑交由后端处理，这里暂时返回空（可根据后端返回字段调整）
|
|||
|
|
return []
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 已领取优惠券实际展示列表：默认前4个，展开后显示全部
|
|||
|
|
showCollectedList() {
|
|||
|
|
const list = this.filterCollectedList
|
|||
|
|
const rawList = this.isExpanded ? list : list.slice(0, 4)
|
|||
|
|
// 映射为组件所需格式
|
|||
|
|
return rawList.map(item => this.formatCollectedCoupon(item))
|
|||
|
|
},
|
|||
|
|
// 可领取列表映射为组件格式
|
|||
|
|
formattedAvailableList() {
|
|||
|
|
return this.availableCouponList.map(item => this.formatAvailableCoupon(item))
|
|||
|
|
},
|
|||
|
|
formattedAvailableLis() {
|
|||
|
|
return this.timeoutdatalist.map(item => this.formatAvailableCoupon(item))
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
// 将已领取优惠券原始数据转换为组件 coupon 对象
|
|||
|
|
formatCollectedCoupon(item) {
|
|||
|
|
const [platform, tag] = item.name.split('|')
|
|||
|
|
let status = ''
|
|||
|
|
if (item.status === 'available') status = 'use'
|
|||
|
|
else if (item.status === 'expired') status = 'expired'
|
|||
|
|
else if (item.status === 'used') status = 'used'
|
|||
|
|
else status = 'use' // 默认
|
|||
|
|
|
|||
|
|
return {
|
|||
|
|
amount: item.denomination,
|
|||
|
|
condition: item.condition,
|
|||
|
|
platform: platform || '平台',
|
|||
|
|
tag: tag || '优惠券',
|
|||
|
|
expiry: item.expireTime,
|
|||
|
|
status: status,
|
|||
|
|
isNew: item.tagType === 'new',
|
|||
|
|
isExpiringSoon: item.tagType === 'soon' || item.tagType === 'expire'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 将可领取优惠券原始数据转换为组件 coupon 对象
|
|||
|
|
formatAvailableCoupon(item) {
|
|||
|
|
const [platform, tag] = item.name.split('|')
|
|||
|
|
return {
|
|||
|
|
amount: item.denomination,
|
|||
|
|
condition: item.condition,
|
|||
|
|
platform: platform || '平台',
|
|||
|
|
tag: tag || '优惠券',
|
|||
|
|
expiry: item.expireTime,
|
|||
|
|
status: 'receive', // 可领取
|
|||
|
|
isNew: item.tagType === 'new', // 根据需要设置，默认 true 也可以
|
|||
|
|
isExpiringSoon: false
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 处理已领取卡片的点击（立即使用/已过期/已使用）
|
|||
|
|
handleAvailableAction(status, clickedItem) {
|
|||
|
|
if (status === 'receive') {
|
|||
|
|
console.log('领取优惠券', clickedItem);
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '领取成功',
|
|||
|
|
icon: 'success'
|
|||
|
|
});
|
|||
|
|
const originItem = this.availableCouponList.find(item =>
|
|||
|
|
item.denomination === clickedItem.amount &&
|
|||
|
|
item.condition === clickedItem.condition &&
|
|||
|
|
item.name === `${clickedItem.platform}|${clickedItem.tag}`
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
if (originItem) {
|
|||
|
|
const index = this.availableCouponList.indexOf(originItem);
|
|||
|
|
this.availableCouponList.splice(index, 1);
|
|||
|
|
this.collectedCouponList.unshift({
|
|||
|
|
...originItem,
|
|||
|
|
tagType: 'new', // 标记为新领取
|
|||
|
|
status: 'available'
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
} else if (status === 'use') {
|
|||
|
|
console.log('使用优惠券', clickedItem);
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: '/pages/coupon/couponDetail'
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
toggleExpand() {
|
|||
|
|
this.isExpanded = !this.isExpanded
|
|||
|
|
},
|
|||
|
|
selectd(i) {
|
|||
|
|
this.isselect = i
|
|||
|
|
console.log(this.isselect, '选中项');
|
|||
|
|
// 切换标签时重置为收起状态
|
|||
|
|
// this.isExpanded = false
|
|||
|
|
// this.isselectd=false
|
|||
|
|
if (i == 1) {
|
|||
|
|
this.timesout = true
|
|||
|
|
} else {
|
|||
|
|
this.timesout = false
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
gotoCouponHistory() {
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: '/pages/coupon/couponHistory',
|
|||
|
|
fail(err) {
|
|||
|
|
console.error('跳转失败', err)
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
goBack() {
|
|||
|
|
uni.navigateBack({
|
|||
|
|
delta: 1
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
onLoad() {
|
|||
|
|
// 移除定时器启动逻辑
|
|||
|
|
},
|
|||
|
|
onUnload() {},
|
|||
|
|
onHide() {
|
|||
|
|
// 移除定时器暂停逻辑
|
|||
|
|
},
|
|||
|
|
onShow() {
|
|||
|
|
const systemInfo = uni.getWindowInfo()
|
|||
|
|
const statusBarHeight = systemInfo.statusBarHeight;
|
|||
|
|
this.statusBarHeight = statusBarHeight
|
|||
|
|
console.log('刘海/状态栏高度：', statusBarHeight + 'px');
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
onPullDownRefresh() {
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.nav-bar-l {
|
|||
|
|
margin-top: 200rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 全局容器 */
|
|||
|
|
.content {
|
|||
|
|
position: relative;
|
|||
|
|
width: 750rpx;
|
|||
|
|
min-height: 100vh;
|
|||
|
|
background-color: #f5f5f5;
|
|||
|
|
/* 预留固定区域高度，避免内容被遮挡 */
|
|||
|
|
padding-top: 200rpx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 固定区域的渐变背景（和原背景样式一致） */
|
|||
|
|
.fixed-top-bg {
|
|||
|
|
position: fixed;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
z-index: 99;
|
|||
|
|
width: 750rpx;
|
|||
|
|
height: 260rpx;
|
|||
|
|
background: linear-gradient(180deg, #FFEAE6 0%, #FFFBF9 100%);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 固定在顶部的容器：导航栏+标签栏 */
|
|||
|
|
.fixed-top-container {
|
|||
|
|
position: fixed;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
z-index: 100;
|
|||
|
|
width: 750rpx;
|
|||
|
|
height: 200rpx;
|
|||
|
|
padding: 0 30rpx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 导航栏样式 */
|
|||
|
|
.nav-bar {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: flex-end;
|
|||
|
|
padding-top: 60rpx;
|
|||
|
|
/* 适配状态栏高度 */
|
|||
|
|
height: 140rpx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.nav-bar-l-img {
|
|||
|
|
width: 18rpx;
|
|||
|
|
height: 35.74rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.nav-bar-c {
|
|||
|
|
margin-left: 24rpx;
|
|||
|
|
margin-bottom: 5rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.nav-bar-c-text {
|
|||
|
|
font-family: AlimamaShuHeiTi, AlimamaShuHeiTi;
|
|||
|
|
font-weight: bold;
|
|||
|
|
font-size: 40rpx;
|
|||
|
|
color: #000000;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.nav-bar-r {
|
|||
|
|
margin-left: auto;
|
|||
|
|
margin-bottom: 8rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.nav-bar-r-text {
|
|||
|
|
font-family: PingFangSC, PingFang SC;
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
color: #666666;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.list-coupon .coupon-card {
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 标签栏样式 */
|
|||
|
|
.coupon-title {
|
|||
|
|
display: flex;
|
|||
|
|
height: 60rpx;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-top: 37rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.coupon-tab {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-right: 40rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.coupon-tab-text {
|
|||
|
|
font-family: PingFangSC, PingFang SC;
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
color: #666666;
|
|||
|
|
margin-bottom: 8rpx;
|
|||
|
|
width: 150rpx;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.coupon-tab-text.active {
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: #333333;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tab-line-img {
|
|||
|
|
width: 53rpx;
|
|||
|
|
height: 6rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 优惠券列表外层容器 */
|
|||
|
|
.list-coupon-container {
|
|||
|
|
position: relative;
|
|||
|
|
z-index: 2;
|
|||
|
|
margin-top: 50rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 优惠券列表容器（复用样式） */
|
|||
|
|
.list-coupon {
|
|||
|
|
width: 750rpx;
|
|||
|
|
background: #FFFFFF;
|
|||
|
|
border-radius: 40rpx;
|
|||
|
|
margin-bottom: 10rpx;
|
|||
|
|
margin-top: 10rpx;
|
|||
|
|
padding: 30rpx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 空状态样式 */
|
|||
|
|
.empty-tip {
|
|||
|
|
text-align: center;
|
|||
|
|
padding: 60rpx 0;
|
|||
|
|
color: #999;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.empty-text {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #999999;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 标题样式 */
|
|||
|
|
.collectd-title {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.collectd-title-icon {
|
|||
|
|
width: 41rpx;
|
|||
|
|
margin-right: 8rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.collectd-title-text {
|
|||
|
|
font-family: PingFangSC, PingFang SC;
|
|||
|
|
font-weight: 500;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #333333;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 展开/收起按钮 */
|
|||
|
|
.expand-btn {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
padding: 12rpx 45rpx 12rpx 20rpx;
|
|||
|
|
border: 1rpx solid #eee;
|
|||
|
|
border-radius: 40rpx;
|
|||
|
|
width: 161rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.expand-text {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #666;
|
|||
|
|
margin-right: 10rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.expand-icon {
|
|||
|
|
width: 30rpx;
|
|||
|
|
height: 30rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.no-data-img {
|
|||
|
|
width: 430rpx;
|
|||
|
|
margin: 299rpx 0 0 160rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.daoqi {
|
|||
|
|
margin: 80rpx 0 0rpx 30rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.daoqi-list {
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
}
|
|||
|
|
</style>
|