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.
1078 lines
22 KiB
1078 lines
22 KiB
<template>
|
|
<view class="profile-container">
|
|
<view class="user-top" :style="{
|
|
backgroundImage: `url(${showImg(
|
|
'/uploads/20250728/4ad18fba010760a527d0cf5e24bcf467.png'
|
|
)})`,
|
|
}">
|
|
<!-- 状态栏占位 -->
|
|
<view class="status-bar-placeholder"></view>
|
|
<!-- 顶部导航 -->
|
|
<view class="header">
|
|
<!-- <view class="back-btn" @click="goBack">
|
|
<text class="iconfont">‹</text>
|
|
</view>
|
|
<view class="more-btn">
|
|
<text class="dots">⋯</text>
|
|
</view> -->
|
|
</view>
|
|
<!-- 用户信息区域 -->
|
|
<view class="user-section" @click="gotoProfile">
|
|
<view class="user-avatar">
|
|
<image :src="userInfo.avatar ? showImg(userInfo.avatar) : defaultAvatar" mode="aspectFill"
|
|
class="avatar-img"></image>
|
|
</view>
|
|
<view class="user-info">
|
|
<view class="username">{{ userInfo.nickname || "去登录" }}</view>
|
|
<view class="user-id" v-if="userInfo.redBookId">ID：{{ userInfo.redBookId || "123456" }}</view>
|
|
<!-- <view class="location">
|
|
<text class="location-icon">📍</text>
|
|
<text>IP属地：{{ userInfo.location || "上海" }}</text>
|
|
<text class="info-icon">ⓘ</text>
|
|
</view> -->
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 城市艺术漫游 -->
|
|
<view class="city-art">
|
|
<view class="city-title">
|
|
<!-- <text class="pin-icon">📍</text> -->
|
|
<text>城市艺术漫游</text>
|
|
</view>
|
|
<!-- <view class="city-name">上海</view>
|
|
<view class="gender-icon">♀</view> -->
|
|
</view>
|
|
|
|
<!-- 统计数据 -->
|
|
<view class="stats-section">
|
|
<view class="stats-left">
|
|
<view class="stat-item">
|
|
<view class="stat-number">{{ userStats.following || "140" }}</view>
|
|
<view class="stat-label">关注</view>
|
|
</view>
|
|
<view class="stat-item">
|
|
<view class="stat-number">{{ userStats.followers || "2462" }}</view>
|
|
<view class="stat-label">粉丝</view>
|
|
</view>
|
|
<view class="stat-item">
|
|
<view class="stat-number">{{ userStats.likes || "5.4万" }}</view>
|
|
<view class="stat-label">获赞与收藏</view>
|
|
</view>
|
|
</view>
|
|
<!-- 权益兑换入口 -->
|
|
<view class="exchange-entry" @click="showExchangePopup">
|
|
<view class="exchange-icon">🎁</view>
|
|
<view class="exchange-text">权益兑换</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 待激活的Agent -->
|
|
<view class="agent-section">
|
|
<view class="agent-header">
|
|
<view class="agent-title">待激活的Agent</view>
|
|
</view>
|
|
<view class="agent-content">
|
|
<scroll-view class="agent-scroll" scroll-x="true" :show-scrollbar="false" :enhanced="true">
|
|
<view class="agent-avatars">
|
|
<view class="agent-avatar" v-for="(agent, index) in agentList" :key="index">
|
|
<image :src="agent.avatar" mode="aspectFill" class="agent-img"></image>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
<!-- 操作按钮 -->
|
|
<!-- <view class="action-buttons">
|
|
<view class="follow-btn" @click="followUser">
|
|
<text>关注</text>
|
|
</view>
|
|
<view class="message-btn" @click="sendMessage">
|
|
<text>私信</text>
|
|
</view>
|
|
</view> -->
|
|
|
|
<!-- 数字资产权益 -->
|
|
<view class="digital-assets">
|
|
<view class="asset-card">
|
|
<image @click="handleAssetAction()" :src="
|
|
|
|
showImg('/uploads/20250729/42598a2dcf4c9a6f8c6e122e54b65c4f.png')
|
|
" mode="aspectFill" class="digital-img"></image>
|
|
<view class="asset-actions">
|
|
<view class="asset-action active" @click="handleAssetAction('待使用')">
|
|
<view class="action-icon red"></view>
|
|
<text>待使用</text>
|
|
</view>
|
|
<view class="asset-action" @click="handleAssetAction('待收货')">
|
|
<view class="action-icon gray"></view>
|
|
<text>待收货</text>
|
|
</view>
|
|
<view class="asset-action" @click="handleAssetAction('已完成')">
|
|
<view class="action-icon gray"></view>
|
|
<text>已完成</text>
|
|
</view>
|
|
<view class="asset-action" @click="handleAssetAction('售后/退款')">
|
|
<view class="action-icon gray"></view>
|
|
<text>售后/退款</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 有感商品 -->
|
|
<view class="feeling-goods">
|
|
<view class="goods-card">
|
|
<image :src="
|
|
showImg('/uploads/20250729/a010feb51e3f195563fb440f9235cc8b.png')
|
|
" mode="aspectFill" class="digital-img"></image>
|
|
<view class="goods-actions">
|
|
<view class="goods-action active" @click="handleGoodsAction('购物车')">
|
|
<view class="action-icon red"></view>
|
|
<text>购物车</text>
|
|
</view>
|
|
<view class="goods-action" @click="handleGoodsAction('待发货')">
|
|
<view class="action-icon gray"></view>
|
|
<text>待发货</text>
|
|
</view>
|
|
<view class="goods-action" @click="handleGoodsAction('退货/退款')">
|
|
<view class="action-icon gray"></view>
|
|
<text>退货/退款</text>
|
|
</view>
|
|
<view class="goods-action" @click="handleGoodsAction('评价')">
|
|
<view class="action-icon gray"></view>
|
|
<text>评价</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 数字资产纪念册 -->
|
|
<view class="memorial-section">
|
|
<view class="memorial-divider">
|
|
<view class="divider-line"></view>
|
|
<view class="divider-text">数字资产纪念册</view>
|
|
<view class="divider-line"></view>
|
|
</view>
|
|
<view class="memorial-cards">
|
|
<view class="memorial-card" @click="handleMemorialClick(0)">
|
|
<image :src="
|
|
showImg('/uploads/20250729/105755e9b2e570e46b96d54ed61abe51.png')
|
|
" mode="aspectFill" class="memorial-img"></image>
|
|
<view class="memorial-info">
|
|
<text class="memorial-title">世界花园｜凤景里的苏州</text>
|
|
<text class="memorial-more">MORE</text>
|
|
</view>
|
|
</view>
|
|
<view class="memorial-card" @click="handleMemorialClick(1)">
|
|
<image :src="
|
|
showImg('/uploads/20250729/42fe2364167c2342076c4e094df3d288.png')
|
|
" mode="aspectFill" class="memorial-img"></image>
|
|
<view class="memorial-info">
|
|
<text class="memorial-title">男神女神罗曼史</text>
|
|
<text class="memorial-more">MORE</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 底部菜单 -->
|
|
<view class="bottom-menu">
|
|
<view class="menu-item" v-for="(item, index) in menuItems" :key="index" @click="handleMenuClick(item)">
|
|
<text>{{ item.icon }}{{ item.title }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<CustomTabBar :currentTab="4" />
|
|
<MusicControl />
|
|
|
|
<!-- 权益兑换弹窗 -->
|
|
<uni-popup ref="exchangePopup" type="center">
|
|
<view class="exchange-popup">
|
|
<view class="popup-header">
|
|
<text class="popup-title">权益兑换</text>
|
|
<text class="popup-close" @click="closeExchangePopup">×</text>
|
|
</view>
|
|
<view class="popup-content">
|
|
<view class="input-section">
|
|
<text class="input-label">请输入兑换码</text>
|
|
<input class="exchange-input" v-model="exchangeCode" placeholder="请输入兑换码" />
|
|
</view>
|
|
<view class="popup-actions">
|
|
<button class="cancel-btn" @click="closeExchangePopup">取消</button>
|
|
<button class="confirm-btn" @click="confirmExchange">
|
|
确认兑换
|
|
</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import moment from "moment";
|
|
import CustomTabBar from "@/components/CustomTabBar.vue";
|
|
import MusicControl from "@/components/MusicControl.vue";
|
|
export default {
|
|
components: {
|
|
CustomTabBar,
|
|
MusicControl,
|
|
},
|
|
data() {
|
|
return {
|
|
userInfo: {},
|
|
defaultAvatar: "https://changshu.js-dyyj.com/uploads/20250326/516242619f0772bee371a60684618c01.png",
|
|
userStats: {
|
|
following: "140",
|
|
followers: "2462",
|
|
likes: "5.4万",
|
|
},
|
|
agentList: [{
|
|
avatar: "https://epic.js-dyyj.com/uploads/20250728/d27ef6e6c26877da7775664fed376c6f.png",
|
|
},
|
|
{
|
|
avatar: "https://epic.js-dyyj.com/uploads/20250728/d7bf0dd2f3f272afba687b525a7c575c.png",
|
|
},
|
|
{
|
|
avatar: "https://epic.js-dyyj.com/uploads/20250728/d27ef6e6c26877da7775664fed376c6f.png",
|
|
},
|
|
{
|
|
avatar: "https://epic.js-dyyj.com/uploads/20250728/d7bf0dd2f3f272afba687b525a7c575c.png",
|
|
},
|
|
],
|
|
menuItems: [{
|
|
title: "账号与安全",
|
|
icon: "🔒",
|
|
},
|
|
{
|
|
title: "购物车",
|
|
icon: "🛒",
|
|
},
|
|
{
|
|
title: "我的收藏",
|
|
icon: "💬",
|
|
},
|
|
{
|
|
title: "地址管理",
|
|
icon: "📍",
|
|
},
|
|
{
|
|
title: "卡券中心",
|
|
icon: "🎫",
|
|
},
|
|
{
|
|
title: "帮助与客服",
|
|
icon: "💬",
|
|
},
|
|
|
|
],
|
|
exchangeCode: "", // 兑换码
|
|
};
|
|
},
|
|
onLoad() {
|
|
// 页面加载时的初始化逻辑
|
|
console.log("iSoul页面加载完成");
|
|
},
|
|
onShow() {
|
|
this.userInfo =
|
|
(uni.getStorageSync("userInfo") &&
|
|
JSON.parse(uni.getStorageSync("userInfo"))) ||
|
|
this.$store.state.user.userInfo || {};
|
|
console.log(this.userInfo);
|
|
},
|
|
methods: {
|
|
// 返回上一页
|
|
goBack() {
|
|
uni.navigateBack();
|
|
},
|
|
// 关注用户
|
|
followUser() {
|
|
uni.showToast({
|
|
title: "关注成功",
|
|
icon: "success",
|
|
});
|
|
},
|
|
// 发送私信
|
|
sendMessage() {
|
|
uni.navigateTo({
|
|
url: "/pages/chat/chat",
|
|
});
|
|
},
|
|
// 处理菜单点击
|
|
handleMenuClick(item) {
|
|
switch (item.title) {
|
|
case "账号与安全":
|
|
uni.navigateTo({
|
|
url: "/subPackages/user/privacy",
|
|
});
|
|
break;
|
|
case "购物车":
|
|
uni.navigateTo({
|
|
url: "/subPackages/user/gwc",
|
|
});
|
|
break;
|
|
case "地址管理":
|
|
uni.navigateTo({
|
|
url: "/subPackages/user/travelerList",
|
|
});
|
|
break;
|
|
case "卡券中心":
|
|
uni.navigateTo({
|
|
url: "/subPackages/user/coupon",
|
|
});
|
|
break;
|
|
case "我的收藏":
|
|
uni.navigateTo({
|
|
url: "/subPackages/user/collection",
|
|
});
|
|
break;
|
|
case "帮助与客服":
|
|
uni.showModal({
|
|
title: "客服电话",
|
|
content: "0515-69186109\n服务时间：周一至周五\n9:00-12:00，13:00-18:00",
|
|
confirmText: "拨打",
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
uni.makePhoneCall({
|
|
phoneNumber: "0515-69186109",
|
|
});
|
|
}
|
|
},
|
|
});
|
|
break;
|
|
default:
|
|
uni.showToast({
|
|
title: item.title,
|
|
icon: "none",
|
|
});
|
|
}
|
|
},
|
|
// 个人信息或登录
|
|
gotoProfile() {
|
|
// 有token去个人信息，没有去登录
|
|
if (this.userInfo.token) {
|
|
uni.navigateTo({
|
|
url: "/subPackages/user/profile",
|
|
});
|
|
} else {
|
|
uni.navigateTo({
|
|
url: "/pages/login/login",
|
|
});
|
|
}
|
|
},
|
|
|
|
// 数字资产权益点击
|
|
handleAssetAction(action) {
|
|
switch (action) {
|
|
case "待使用":
|
|
uni.navigateTo({
|
|
url: "/subPackages/orderQy/list?status=1",
|
|
});
|
|
break;
|
|
case "待收货":
|
|
uni.navigateTo({
|
|
url: "/subPackages/orderQy/list?status=2",
|
|
});
|
|
break;
|
|
case "已完成":
|
|
uni.navigateTo({
|
|
url: "/subPackages/orderQy/list?status=3",
|
|
});
|
|
break;
|
|
case "售后/退款":
|
|
uni.navigateTo({
|
|
url: "/subPackages/orderQy/list?status=4",
|
|
});
|
|
break;
|
|
default:
|
|
uni.navigateTo({
|
|
url: "/subPackages/orderQy/list",
|
|
});
|
|
break;
|
|
|
|
}
|
|
},
|
|
// 有感商品点击
|
|
handleGoodsAction(action) {
|
|
switch (action) {
|
|
case "购物车":
|
|
uni.navigateTo({
|
|
url: "/subPackages/user/gwc",
|
|
});
|
|
break;
|
|
case "待发货":
|
|
uni.navigateTo({
|
|
url: "/subPackages/order/trades?status=POST",
|
|
});
|
|
break;
|
|
case "退货/退款":
|
|
uni.navigateTo({
|
|
url: "/subPackages/order/trades?status=WAIT_REFUND",
|
|
});
|
|
break;
|
|
case "评价":
|
|
uni.navigateTo({
|
|
url: "/subPackages/order/trades?status=WAIT_COMMENT",
|
|
});
|
|
break;
|
|
}
|
|
},
|
|
// 纪念册卡片点击
|
|
handleMemorialClick(index) {
|
|
// 点击任何纪念册卡片都跳转到数字资产纪念册页面
|
|
uni.navigateTo({
|
|
url: "/subPackages/memorialAlbum/index",
|
|
});
|
|
},
|
|
|
|
// 显示权益兑换弹窗
|
|
showExchangePopup() {
|
|
this.exchangeCode = ""; // 清空输入框
|
|
this.$refs.exchangePopup.open();
|
|
},
|
|
|
|
// 关闭权益兑换弹窗
|
|
closeExchangePopup() {
|
|
this.$refs.exchangePopup.close();
|
|
},
|
|
|
|
// 确认兑换
|
|
async confirmExchange() {
|
|
if (!this.exchangeCode.trim()) {
|
|
uni.showToast({
|
|
title: "请输入兑换码",
|
|
icon: "none",
|
|
});
|
|
return;
|
|
}
|
|
|
|
|
|
|
|
this.Post({
|
|
activeCode: this.exchangeCode.trim(),
|
|
},
|
|
"/framework/order/active",
|
|
"DES"
|
|
).then((res) => {
|
|
if (res.code == 200) {
|
|
uni.showToast({
|
|
title: "兑换成功，为您跳转订单页~",
|
|
icon: "none",
|
|
|
|
});
|
|
this.closeExchangePopup()
|
|
setTimeout(() => {
|
|
uni.navigateTo({
|
|
url: "/subPackages/orderQy/list"
|
|
})
|
|
}, 2000)
|
|
|
|
} else {
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: "none",
|
|
});
|
|
}
|
|
});
|
|
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
view {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.profile-container {
|
|
background: white;
|
|
min-height: 100vh;
|
|
padding-bottom: 200rpx;
|
|
color: white;
|
|
}
|
|
|
|
/* 状态栏占位 */
|
|
.status-bar-placeholder {
|
|
height: var(--status-bar-height);
|
|
width: 100%;
|
|
}
|
|
|
|
/* 顶部导航 */
|
|
.header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
height: 48px;
|
|
}
|
|
|
|
.back-btn,
|
|
.more-btn {
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 40rpx;
|
|
color: white;
|
|
}
|
|
|
|
.dots {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* 用户信息区域 */
|
|
.user-section {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 40rpx 30rpx;
|
|
}
|
|
|
|
.user-avatar {
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
border-radius: 50%;
|
|
overflow: hidden;
|
|
margin-right: 30rpx;
|
|
}
|
|
|
|
.avatar-img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.user-info {
|
|
flex: 1;
|
|
}
|
|
|
|
.username {
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
color: white;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
.user-id {
|
|
font-size: 24rpx;
|
|
color: rgba(255, 255, 255, 0.8);
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
.location {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 24rpx;
|
|
color: rgba(255, 255, 255, 0.8);
|
|
}
|
|
|
|
.location-icon,
|
|
.info-icon {
|
|
margin-right: 8rpx;
|
|
}
|
|
|
|
/* 城市艺术漫游 */
|
|
.city-art {
|
|
padding: 0 40rpx 20rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.city-title {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 28rpx;
|
|
color: rgba(255, 255, 255, 0.9);
|
|
}
|
|
|
|
.pin-icon {
|
|
margin-right: 8rpx;
|
|
}
|
|
|
|
.city-name {
|
|
font-size: 28rpx;
|
|
color: white;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.gender-icon {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
background: rgba(255, 255, 255, 0.2);
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
/* 统计数据 */
|
|
.stats-section {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-top: 80rpx;
|
|
padding-bottom: 50rpx;
|
|
padding: 0 40rpx;
|
|
}
|
|
|
|
.stats-left {
|
|
display: flex;
|
|
gap: 60rpx;
|
|
}
|
|
|
|
.stat-item {
|
|
text-align: center;
|
|
min-width: 80rpx;
|
|
}
|
|
|
|
.stat-number {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
color: white;
|
|
margin-bottom: 8rpx;
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: 24rpx;
|
|
color: rgba(255, 255, 255, 0.8);
|
|
}
|
|
|
|
/* 权益兑换入口 */
|
|
.exchange-entry {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 16rpx;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border-radius: 20rpx;
|
|
min-width: 120rpx;
|
|
transition: all 0.3s ease;
|
|
|
|
&:active {
|
|
transform: scale(0.95);
|
|
background: rgba(255, 255, 255, 0.2);
|
|
}
|
|
}
|
|
|
|
.exchange-icon {
|
|
font-size: 32rpx;
|
|
margin-bottom: 8rpx;
|
|
}
|
|
|
|
.exchange-text {
|
|
font-size: 22rpx;
|
|
color: rgba(255, 255, 255, 0.9);
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* 操作按钮 */
|
|
.action-buttons {
|
|
display: flex;
|
|
padding: 0 40rpx 40rpx;
|
|
gap: 20rpx;
|
|
}
|
|
|
|
.follow-btn {
|
|
flex: 1;
|
|
background: #ff4757;
|
|
border-radius: 50rpx;
|
|
padding: 20rpx;
|
|
text-align: center;
|
|
color: white;
|
|
font-size: 28rpx;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.message-btn {
|
|
flex: 1;
|
|
background: rgba(255, 255, 255, 0.2);
|
|
border-radius: 50rpx;
|
|
padding: 20rpx;
|
|
text-align: center;
|
|
color: white;
|
|
font-size: 28rpx;
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* 待激活的Agent */
|
|
.agent-section {
|
|
margin: 0 47rpx;
|
|
border-radius: 20rpx;
|
|
margin-bottom: 30rpx;
|
|
overflow: hidden;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 30rpx 0;
|
|
}
|
|
|
|
.agent-header {
|
|
margin-right: 30rpx;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.agent-title {
|
|
font-size: 28rpx;
|
|
color: #000000;
|
|
}
|
|
|
|
.agent-content {
|
|
flex: 1;
|
|
}
|
|
|
|
.agent-scroll {
|
|
width: 430rpx;
|
|
white-space: nowrap;
|
|
/* 微信小程序隐藏横向滚动条 */
|
|
overflow: hidden;
|
|
|
|
/* Webkit浏览器 */
|
|
&::-webkit-scrollbar {
|
|
display: none !important;
|
|
width: 0 !important;
|
|
height: 0 !important;
|
|
}
|
|
|
|
/* Firefox */
|
|
scrollbar-width: none;
|
|
/* IE和Edge */
|
|
-ms-overflow-style: none;
|
|
}
|
|
|
|
.agent-avatars {
|
|
display: inline-flex;
|
|
gap: 20rpx;
|
|
}
|
|
|
|
.agent-avatar {
|
|
width: 104rpx;
|
|
height: 104rpx;
|
|
border-radius: 50%;
|
|
overflow: hidden;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.agent-img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
/* 数字资产权益 */
|
|
.digital-assets {
|
|
margin: 0 30rpx 0rpx;
|
|
}
|
|
|
|
.asset-card {
|
|
border-radius: 20rpx;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.asset-bg {
|
|
padding: 40rpx 30rpx 30rpx;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.asset-bg::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="85" cy="15" r="8" fill="rgba(255,255,255,0.1)"/><circle cx="15" cy="85" r="6" fill="rgba(255,255,255,0.08)"/><circle cx="70" cy="70" r="4" fill="rgba(255,255,255,0.06)"/></svg>');
|
|
pointer-events: none;
|
|
}
|
|
|
|
.asset-title {
|
|
font-size: 32rpx;
|
|
color: white;
|
|
font-weight: 600;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.asset-actions {
|
|
display: flex;
|
|
padding: 20rpx 0;
|
|
|
|
background: white;
|
|
font-size: 25rpx;
|
|
}
|
|
|
|
.asset-action {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 0 10rpx;
|
|
font-size: 24rpx;
|
|
color: #666;
|
|
position: relative;
|
|
}
|
|
|
|
.asset-action.active {
|
|
color: #ff4757;
|
|
}
|
|
|
|
.action-icon {
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
border-radius: 50%;
|
|
margin-bottom: 12rpx;
|
|
}
|
|
|
|
.action-icon.red {
|
|
background: #ff4757;
|
|
}
|
|
|
|
.action-icon.gray {
|
|
background: #ccc;
|
|
}
|
|
|
|
/* 有感商品 */
|
|
.feeling-goods {
|
|
margin: 20rpx 30rpx 30rpx;
|
|
}
|
|
|
|
.goods-card {
|
|
border-radius: 20rpx;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.goods-bg {
|
|
padding: 40rpx 30rpx 20rpx;
|
|
position: relative;
|
|
}
|
|
|
|
.goods-title {
|
|
font-size: 32rpx;
|
|
color: white;
|
|
font-weight: bold;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
.goods-brand {
|
|
font-size: 36rpx;
|
|
color: white;
|
|
font-weight: bold;
|
|
margin-bottom: 5rpx;
|
|
}
|
|
|
|
.goods-subtitle {
|
|
font-size: 24rpx;
|
|
color: rgba(255, 255, 255, 0.8);
|
|
}
|
|
|
|
.goods-actions {
|
|
display: flex;
|
|
background: white;
|
|
}
|
|
|
|
.goods-action {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 20rpx 10rpx;
|
|
font-size: 24rpx;
|
|
color: #666;
|
|
}
|
|
|
|
.goods-action.active {
|
|
color: #ff4757;
|
|
}
|
|
|
|
/* 数字资产纪念册 */
|
|
.memorial-section {
|
|
margin: 0 47rpx;
|
|
margin-bottom: 30rpx;
|
|
}
|
|
|
|
.memorial-divider {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 30rpx 0;
|
|
margin-bottom: 30rpx;
|
|
}
|
|
|
|
.divider-line {
|
|
flex: 1;
|
|
height: 2rpx;
|
|
background: #e0e0e0;
|
|
}
|
|
|
|
.divider-text {
|
|
padding: 0 30rpx;
|
|
font-size: 28rpx;
|
|
color: #000000;
|
|
font-weight: 500;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.memorial-cards {
|
|
display: flex;
|
|
gap: 20rpx;
|
|
}
|
|
|
|
.memorial-card {
|
|
flex: 1;
|
|
border-radius: 10rpx;
|
|
overflow: hidden;
|
|
background: white;
|
|
}
|
|
|
|
.memorial-img {
|
|
width: 100%;
|
|
height: 425rpx;
|
|
}
|
|
|
|
.memorial-info {
|
|
padding: 20rpx 10rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.memorial-title {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
font-size: 22rpx;
|
|
color: #000000;
|
|
flex: 1;
|
|
}
|
|
|
|
.memorial-more {
|
|
font-size: 14rpx;
|
|
color: #999;
|
|
}
|
|
|
|
/* 底部菜单 */
|
|
.bottom-menu {
|
|
padding: 40rpx 30rpx;
|
|
background: white;
|
|
margin: 0 30rpx;
|
|
border-radius: 20rpx;
|
|
margin-bottom: 30rpx;
|
|
}
|
|
|
|
.menu-item {
|
|
padding: 30rpx 0;
|
|
border-bottom: 1rpx solid #f5f5f5;
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
}
|
|
|
|
.menu-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
// 用户顶部背景区域
|
|
.user-top {
|
|
background-size: cover;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
padding-bottom: 20rpx;
|
|
}
|
|
|
|
.digital-img {
|
|
height: 265rpx;
|
|
width: 100%;
|
|
border-radius: 20rpx;
|
|
}
|
|
|
|
/* 权益兑换弹窗 */
|
|
.exchange-popup {
|
|
width: 600rpx;
|
|
background-color: #ffffff;
|
|
border-radius: 16rpx;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.popup-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 30rpx;
|
|
border-bottom: 1px solid #f0f0f0;
|
|
}
|
|
|
|
.popup-title {
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
color: #333;
|
|
}
|
|
|
|
.popup-close {
|
|
font-size: 40rpx;
|
|
color: #999;
|
|
padding: 0 10rpx;
|
|
}
|
|
|
|
.popup-content {
|
|
padding: 40rpx 30rpx 30rpx;
|
|
}
|
|
|
|
.input-section {
|
|
margin-bottom: 40rpx;
|
|
}
|
|
|
|
.input-label {
|
|
display: block;
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
margin-bottom: 20rpx;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.exchange-input {
|
|
width: 100%;
|
|
height: 88rpx;
|
|
border: 2rpx solid #e0e0e0;
|
|
border-radius: 12rpx;
|
|
padding: 0 20rpx;
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
box-sizing: border-box;
|
|
|
|
&:focus {
|
|
border-color: #667eea;
|
|
}
|
|
}
|
|
|
|
.popup-actions {
|
|
display: flex;
|
|
gap: 20rpx;
|
|
}
|
|
|
|
.cancel-btn,
|
|
.confirm-btn {
|
|
flex: 1;
|
|
height: 80rpx;
|
|
border-radius: 12rpx;
|
|
font-size: 28rpx;
|
|
font-weight: 600;
|
|
border: none;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: all 0.3s ease;
|
|
|
|
&:active {
|
|
transform: scale(0.98);
|
|
}
|
|
}
|
|
|
|
.cancel-btn {
|
|
background: #f5f5f5;
|
|
color: #666;
|
|
}
|
|
|
|
.confirm-btn {
|
|
background: #667eea;
|
|
color: #ffffff;
|
|
}
|
|
</style>
|