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.
904 lines
19 KiB
904 lines
19 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">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="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>
|
|
<!-- 待激活的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
|
|
: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.title }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<CustomTabBar :currentTab="4" />
|
|
<MusicControl />
|
|
</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: "💬",
|
|
},
|
|
],
|
|
};
|
|
},
|
|
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.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/order/trades?status=PAYMENT_SUCCESSFULLY",
|
|
});
|
|
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",
|
|
});
|
|
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) {
|
|
if (index === 0) {
|
|
uni.navigateTo({
|
|
url: "/subPackages/readingBody/index",
|
|
});
|
|
} else {
|
|
uni.navigateTo({
|
|
url: "/subPackages/video/video",
|
|
});
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</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-around;
|
|
margin-top: 80rpx;
|
|
padding-bottom: 50rpx;
|
|
}
|
|
|
|
.stat-item {
|
|
text-align: center;
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
/* 操作按钮 */
|
|
.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 {
|
|
}
|
|
|
|
.digital-img {
|
|
height: 265rpx;
|
|
width: 100%;
|
|
border-radius: 20rpx;
|
|
}
|
|
</style>
|
|
|