768 lines
22 KiB
Vue
768 lines
22 KiB
Vue
<template>
|
||
<view class="profile-page">
|
||
<!-- 自定义顶部导航栏 -->
|
||
<view class="custom-navbar">
|
||
<!-- 左侧返回按钮和标题 -->
|
||
<view class="navbar-left">
|
||
<image class="back-icon" src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/456f4e6c-e86a-42c9-a272-484db9af6c7c" mode="aspectFit" @click="handleBack"></image>
|
||
<text class="navbar-title">我的资料</text>
|
||
</view>
|
||
|
||
<!-- 右侧状态栏 -->
|
||
<view class="navbar-right">
|
||
<!-- <view class="nav-status-item" @click="handleShareWechat">
|
||
<image class="nav-status-icon" src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/8a412688-b794-4407-bba6-a6dc65d75f08" mode="aspectFit"></image>
|
||
<text class="nav-status-text">分享到微信</text>
|
||
</view>
|
||
<view class="nav-status-item" @click="handleViewShop">
|
||
<image class="nav-status-icon" :src="identity == '2' ? 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/2b5de852-2d35-4786-a643-d20cabb3eaee' : 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/85638da9-804e-4811-8378-d1bb6007f99d'" mode="aspectFit"></image>
|
||
<text class="nav-status-text">{{ identity == '2' ? '查看店铺' : '查看手艺人' }}</text>
|
||
</view> -->
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 内容区域 -->
|
||
<view class="content">
|
||
<!-- 基础资料部分 -->
|
||
<view class="section-card">
|
||
<view class="section-header">
|
||
<view class="title-bar"></view>
|
||
<text class="section-title">基础资料</text>
|
||
</view>
|
||
<text class="section-desc">店铺信息将影响顾客到店消费体验，请确保信息准确。</text>
|
||
|
||
<view class="subsection">
|
||
<view class="subsection-content">
|
||
<!-- 营业时间（商家） / 服务时间（手艺人） -->
|
||
<view class="info-item" @click="navigateToTimeSetting">
|
||
<view class="info-left">
|
||
<image class="item-icon" src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/21f1efaf-0c17-49b0-a2b2-e0fd573b92b3" mode="aspectFit"></image>
|
||
<text class="item-label">{{ identity == '2' ? '营业时间' : '服务时间' }}</text>
|
||
</view>
|
||
<image class="arrow-right" src="/static/images/arrow_right.png" mode="aspectFit"></image>
|
||
</view>
|
||
<!-- 服务技能 -->
|
||
<view class="info-item" @click="navigateToServiceSkill">
|
||
<view class="info-left">
|
||
<image class="item-icon" src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/b90e2322-a261-4c17-a581-85010c3bc112" mode="aspectFit"></image>
|
||
<text class="item-label">服务技能</text>
|
||
</view>
|
||
<image class="arrow-right" src="/static/images/arrow_right.png" mode="aspectFit"></image>
|
||
</view>
|
||
|
||
<!-- 门店信息 -->
|
||
<view class="info-item" v-if="identity == '2'" @click="navigateToShopInfo">
|
||
<view class="info-left">
|
||
<image class="item-icon" src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/e9618006-db69-446e-92e1-ba9dd81e79f9" mode="aspectFit"></image>
|
||
<text class="item-label">门店信息</text>
|
||
</view>
|
||
<image class="arrow-right" src="/static/images/arrow_right.png" mode="aspectFit"></image>
|
||
</view>
|
||
|
||
<!-- 服务区域（手艺人显示） -->
|
||
<view class="info-item" v-if="identity == '1'" @click="navigateToServiceArea">
|
||
<view class="info-left">
|
||
<image class="item-icon" src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/a35603b1-50fb-4248-9f2e-2dd4d5e249c0" mode="aspectFit"></image>
|
||
<text class="item-label">服务区域</text>
|
||
</view>
|
||
<image class="arrow-right" src="/static/images/arrow_right.png" mode="aspectFit"></image>
|
||
</view>
|
||
|
||
<!-- 个人信息（手艺人显示） -->
|
||
<view class="info-item" v-if="identity == '1'" @click="navigateToPersonalInfo">
|
||
<view class="info-left">
|
||
<image class="item-icon" src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/77dc7a16-3b86-44e5-8acc-5f3b85ffc137" mode="aspectFit"></image>
|
||
<text class="item-label">个人信息</text>
|
||
</view>
|
||
<image class="arrow-right" src="/static/images/arrow_right.png" mode="aspectFit"></image>
|
||
</view>
|
||
|
||
<!-- 个人信息（手艺人显示） -->
|
||
<view class="info-item" @click="navigateToimg">
|
||
<view class="info-left">
|
||
<image class="item-icon" src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/53a9d1e1-e2d2-4001-b599-82e0c0747f1a.png" mode="aspectFit"></image>
|
||
<text class="item-label">相册管理</text>
|
||
</view>
|
||
<image class="arrow-right" src="/static/images/arrow_right.png" mode="aspectFit"></image>
|
||
</view>
|
||
|
||
<!-- 个人信息（手艺人显示） -->
|
||
<view class="info-item" @click="navigateTovideo">
|
||
<view class="info-left">
|
||
<image class="item-icon" src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/6fc821cd-8dd1-41f1-8854-889fb5f76b78.png" mode="aspectFit"></image>
|
||
<text class="item-label">视频管理</text>
|
||
</view>
|
||
<image class="arrow-right" src="/static/images/arrow_right.png" mode="aspectFit"></image>
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 经营资质部分 -->
|
||
<view class="section-card">
|
||
<view class="section-header">
|
||
<view class="title-bar"></view>
|
||
<text class="section-title">经营资质</text>
|
||
</view>
|
||
|
||
<view class="subsection-content">
|
||
<!-- 资质信息 -->
|
||
<view class="info-item" @click="navigateToQualification">
|
||
<view class="info-left">
|
||
<image class="item-icon" src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/2677692c-5931-4ac7-846e-b6d321184789" mode="aspectFit"></image>
|
||
<text class="item-label">资质信息</text>
|
||
</view>
|
||
<image class="arrow-right" src="/static/images/arrow_right.png" mode="aspectFit"></image>
|
||
</view>
|
||
|
||
<!-- 所属门店（手艺人显示） -->
|
||
<view class="info-item" v-if="identity == '1'" @click="navigateToBelongShop">
|
||
<view class="info-left">
|
||
<image class="item-icon" src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/b5541cb5-58c1-4e72-b88f-5cf6450338a8" mode="aspectFit"></image>
|
||
<text class="item-label">所属门店</text>
|
||
</view>
|
||
<image class="arrow-right" src="/static/images/arrow_right.png" mode="aspectFit"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { handleImgSizeUni } from '@/utils/service.js'
|
||
import request from "../../utils/request";
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
identity: '',
|
||
currentUserId: '', // 当前用户ID
|
||
userInfo: {}, // 用户信息
|
||
sharing: false // 添加分享状态标记
|
||
}
|
||
},
|
||
onLoad() {
|
||
// 页面显示时重新加载身份信息，确保数据最新
|
||
this.loadIdentity()
|
||
console.log('当前身份:', this.identity)
|
||
// 加载用户信息
|
||
this.loadUserInfo()
|
||
},
|
||
onShow() {
|
||
// 页面显示时也重新加载，确保数据最新
|
||
this.loadIdentity()
|
||
this.loadUserInfo()
|
||
},
|
||
methods: {
|
||
// 返回按钮处理
|
||
handleBack() {
|
||
uni.navigateBack()
|
||
},
|
||
|
||
// 分享到微信
|
||
handleShareWechat() {
|
||
console.log('分享到微信')
|
||
|
||
this.handleShareProcess()
|
||
},
|
||
|
||
async handleShareProcess() {
|
||
// 如果正在分享中，防止重复点击
|
||
if (this.sharing) {
|
||
return;
|
||
}
|
||
|
||
// 设置分享状态
|
||
this.sharing = true;
|
||
|
||
try {
|
||
// 显示加载提示
|
||
uni.showLoading({
|
||
title: '正在准备分享...',
|
||
mask: true
|
||
});
|
||
|
||
// 确保用户信息已加载
|
||
if (!this.currentUserId) {
|
||
await this.loadUserInfo()
|
||
}
|
||
|
||
// 检查是否已加载用户信息
|
||
if (!this.currentUserId) {
|
||
uni.showToast({
|
||
title: '无法获取用户信息',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
|
||
// 根据环境处理
|
||
// #ifdef APP-PLUS
|
||
this.handleAppAutoShare()
|
||
// #endif
|
||
|
||
// #ifdef MP-WEIXIN
|
||
this.handleMpAutoShare()
|
||
// #endif
|
||
|
||
// #ifdef H5
|
||
this.handleH5Share()
|
||
// #endif
|
||
} catch (error) {
|
||
console.error('分享过程出错:', error);
|
||
uni.hideLoading();
|
||
this.sharing = false;
|
||
uni.showToast({
|
||
title: '分享失败，请重试',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
},
|
||
|
||
// H5环境分享
|
||
handleH5Share() {
|
||
// 在H5环境，通常使用浏览器的分享功能或复制链接
|
||
const shareUrl = window.location.href
|
||
uni.showModal({
|
||
title: '分享提示',
|
||
// content: `请复制链接分享给好友：${shareUrl}`,
|
||
content: `请在美融融Plus APP 环境下使用此功能`,
|
||
|
||
showCancel: false,
|
||
confirmText: '好的',
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
// // 复制链接到剪贴板
|
||
// uni.setClipboardData({
|
||
// data: shareUrl,
|
||
// success: () => {
|
||
// uni.showToast({
|
||
// title: '链接已复制',
|
||
// icon: 'success'
|
||
// })
|
||
// }
|
||
// })
|
||
}
|
||
}
|
||
})
|
||
},
|
||
|
||
// 小程序环境处理
|
||
handleMpAutoShare() {
|
||
// 小程序无法自动触发分享，跳转后提示用户手动操作
|
||
const url = this.identity == '2'
|
||
? `/pages/user/store-detail?id=${this.currentUserId}`
|
||
: `/pages/user/syr-detail?id=${this.currentUserId}`;
|
||
|
||
uni.navigateTo({
|
||
url: url,
|
||
success: () => {
|
||
setTimeout(() => {
|
||
uni.showToast({
|
||
title: '请点击右上角分享',
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
}, 500);
|
||
}
|
||
});
|
||
},
|
||
|
||
// APP环境自动分享
|
||
handleAppAutoShare() {
|
||
if (!this.currentUserId) {
|
||
uni.showToast({
|
||
title: '无法获取用户信息',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
|
||
// 清除旧的分享标记
|
||
uni.removeStorage({
|
||
key: 'share_success'
|
||
});
|
||
|
||
// 跳转到店铺主页并自动触发分享
|
||
const url = this.identity == '2'
|
||
? `/pages/user/store-detail?id=${this.currentUserId}&autoShare=1`
|
||
: `/pages/user/syr-detail?id=${this.currentUserId}&autoShare=1`;
|
||
|
||
uni.navigateTo({
|
||
url: url,
|
||
success: () => {
|
||
console.log('跳转成功，将自动触发分享');
|
||
// 跳转成功后立即隐藏loading，避免页面闪烁
|
||
setTimeout(() => {
|
||
uni.hideLoading();
|
||
this.sharing = false;
|
||
}, 200);
|
||
},
|
||
fail: () => {
|
||
console.log('跳转失败:', err);
|
||
uni.hideLoading();
|
||
this.sharing = false;
|
||
this.showManualShareOption();
|
||
}
|
||
});
|
||
},
|
||
|
||
// 执行APP分享
|
||
executeAppShare(imageUrl) {
|
||
// 备用图片地址
|
||
const backupImageUrl = "https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/yh/1756713709528-717.png?x-oss-process=image/resize,p_40"
|
||
|
||
// 根据身份设置不同的分享标题
|
||
const shareTitle = this.identity == '2'
|
||
? "好友刚推了个超赞商家！点开认识TA ~"
|
||
: "好友刚推了个超赞手艺人！点开认识TA ~"
|
||
|
||
// 生成分享配置
|
||
const shareConfig = {
|
||
provider: "weixin",
|
||
scene: "WXSceneSession",
|
||
type: 5,
|
||
title: shareTitle,
|
||
miniProgram: {
|
||
id: "gh_89c92e18b70b", // 小程序原始ID
|
||
path: this.getSharePath(), // 动态分享路径
|
||
type: 0, // 正式版
|
||
webUrl: "https://www.baidu.com/", // 降级网页地址
|
||
},
|
||
imageUrl: imageUrl,
|
||
success: (res) => {
|
||
console.log("分享成功:", JSON.stringify(res))
|
||
uni.showToast({
|
||
title: '分享成功',
|
||
icon: 'success'
|
||
})
|
||
},
|
||
fail: (err) => {
|
||
console.log("分享失败:", JSON.stringify(err))
|
||
// 尝试使用备用图片
|
||
if (imageUrl !== backupImageUrl) {
|
||
console.log("尝试使用备用图片分享...")
|
||
this.executeAppShare(backupImageUrl)
|
||
} else {
|
||
uni.showToast({
|
||
title: '分享失败',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
}
|
||
}
|
||
|
||
// 检查是否支持分享API
|
||
if (uni.share) {
|
||
uni.share(shareConfig)
|
||
} else {
|
||
uni.showToast({
|
||
title: '当前环境不支持分享',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
},
|
||
|
||
// 获取分享路径
|
||
getSharePath() {
|
||
// 根据身份生成不同的分享路径
|
||
if (this.identity == '2') {
|
||
// 商家分享店铺详情页
|
||
return `/pages/user/store-detail?id=${this.currentUserId || ''}`
|
||
} else {
|
||
// 手艺人分享个人主页
|
||
return `/pages/user/syr-detail?id=${this.currentUserId || ''}`
|
||
}
|
||
},
|
||
|
||
// 查看店铺
|
||
async handleViewShop() {
|
||
console.log('查看店铺')
|
||
|
||
// 确保用户信息已加载
|
||
if (!this.currentUserId) {
|
||
await this.loadUserInfo()
|
||
}
|
||
|
||
// 如果仍然没有用户ID，提示用户手动输入或联系客服
|
||
if (!this.currentUserId) {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '无法获取用户信息，请联系客服或稍后重试',
|
||
showCancel: false,
|
||
confirmText: '确定'
|
||
})
|
||
return
|
||
}
|
||
|
||
// 根据身份跳转到不同的页面
|
||
if (this.identity == '2') {
|
||
// 商家跳转到店铺主页
|
||
uni.navigateTo({
|
||
url: '/pages/user/store-detail?id=' + this.currentUserId
|
||
})
|
||
} else {
|
||
// 手艺人跳转到个人主页
|
||
uni.navigateTo({
|
||
url: '/pages/user/syr-detail?id=' + this.currentUserId
|
||
})
|
||
}
|
||
},
|
||
|
||
// 加载用户信息 - 主要使用接口获取
|
||
async loadUserInfo() {
|
||
try {
|
||
// 根据身份设置type参数（参考个人中心页面的逻辑）
|
||
let type = 1 // 默认值
|
||
if (this.identity == '1') {
|
||
type = 2 // 手艺人
|
||
} else if (this.identity == '2') {
|
||
type = 3 // 商家
|
||
}
|
||
|
||
console.log('调用接口获取用户信息，type:', type)
|
||
|
||
// 调用接口获取用户信息
|
||
const result = await request.post('/user/getuser', { type })
|
||
|
||
if (result.data && result.data.id) {
|
||
this.userInfo = result.data
|
||
this.currentUserId = result.data.id
|
||
|
||
// 存储到本地，避免重复调用
|
||
uni.setStorageSync('userInfo', result.data)
|
||
console.log('从接口获取用户信息成功:', this.userInfo)
|
||
} else {
|
||
console.log('接口返回数据异常:', result)
|
||
}
|
||
} catch (error) {
|
||
console.log('获取用户信息失败:', error)
|
||
|
||
// 降级方案：尝试从其他可能的位置获取用户ID
|
||
this.tryAlternativeUserInfo()
|
||
}
|
||
},
|
||
|
||
// 备用方案：从其他位置获取用户信息
|
||
tryAlternativeUserInfo() {
|
||
try {
|
||
const app = getApp()
|
||
|
||
// 方法1: 从全局数据获取用户ID
|
||
if (app.globalData.userInfo && app.globalData.userInfo.id) {
|
||
this.currentUserId = app.globalData.userInfo.id
|
||
this.userInfo = app.globalData.userInfo
|
||
console.log('从全局数据获取用户ID:', this.currentUserId)
|
||
return
|
||
}
|
||
|
||
// 方法2: 从本地存储获取完整的用户信息
|
||
const userInfo = uni.getStorageSync('userInfo')
|
||
if (userInfo && userInfo.id) {
|
||
this.currentUserId = userInfo.id
|
||
this.userInfo = userInfo
|
||
console.log('从存储获取用户ID:', this.currentUserId)
|
||
return
|
||
}
|
||
|
||
// 方法3: 直接获取用户ID
|
||
const userId = uni.getStorageSync('userId')
|
||
if (userId) {
|
||
this.currentUserId = userId
|
||
console.log('从存储获取用户ID:', userId)
|
||
return
|
||
}
|
||
|
||
console.log('所有获取用户信息的方法都失败了')
|
||
} catch (e) {
|
||
console.log('备用方案获取用户信息失败:', e)
|
||
}
|
||
},
|
||
|
||
loadIdentity() {
|
||
// 从全局数据获取身份
|
||
const app = getApp()
|
||
const globalIdentity = app.globalData.artisanType
|
||
console.log('从全局数据获取身份:', globalIdentity)
|
||
|
||
if (globalIdentity) {
|
||
this.identity = globalIdentity
|
||
uni.setStorageSync('user_identity', globalIdentity)
|
||
} else {
|
||
// 如果全局数据没有，尝试从本地存储获取
|
||
const localIdentity = uni.getStorageSync('user_identity')
|
||
if (localIdentity) {
|
||
this.identity = localIdentity
|
||
console.log('从本地存储获取身份:', localIdentity)
|
||
} else {
|
||
console.log('未获取到身份信息')
|
||
// 默认设为手艺人
|
||
this.identity = '1'
|
||
}
|
||
}
|
||
|
||
console.log('当前身份:', this.identity)
|
||
},
|
||
|
||
navigateToTimeSetting() {
|
||
if (this.identity == '2') {
|
||
// 商家跳转到营业时间页面
|
||
uni.navigateTo({
|
||
url: '/pages/shop/business-time'
|
||
})
|
||
} else {
|
||
// 手艺人跳转到服务时间页面
|
||
uni.navigateTo({
|
||
url: '/pages/artisan/service-time'
|
||
})
|
||
}
|
||
},
|
||
|
||
navigateToServiceSkill() {
|
||
if (this.identity == '2') {
|
||
// 商家跳转到商家服务技能页面
|
||
uni.navigateTo({
|
||
url: '/pages/shop/service-skills'
|
||
})
|
||
} else {
|
||
// 手艺人跳转到手艺人服务技能页面
|
||
uni.navigateTo({
|
||
url: '/pages/artisan/service-skills'
|
||
})
|
||
}
|
||
},
|
||
|
||
navigateToShopInfo() { // 商家：门店信息
|
||
uni.navigateTo({
|
||
url: '/pages/shop/sj-info-change'
|
||
})
|
||
},
|
||
|
||
navigateToServiceArea() { // 手艺人：服务区域
|
||
uni.navigateTo({
|
||
url: '/pages/artisan/service-area'
|
||
})
|
||
},
|
||
|
||
navigateToPersonalInfo() { // 手艺人：个人信息
|
||
uni.navigateTo({
|
||
url: '/pages/artisan/syr-info-change'
|
||
})
|
||
},
|
||
|
||
navigateToimg() { // 图片管理
|
||
uni.navigateTo({
|
||
url: '/pages/shop/photoAlbum/photoManage?type=1'
|
||
})
|
||
},
|
||
|
||
navigateTovideo() { // 视频管理
|
||
uni.navigateTo({
|
||
url: '/pages/shop/photoAlbum/photoManage?type=2'
|
||
})
|
||
},
|
||
|
||
navigateToQualification() { // 商家手艺人：资质信息
|
||
if (this.identity == '2') {
|
||
// 商家跳转到资质信息页面
|
||
uni.navigateTo({
|
||
url: '/pages/shop/qualification_sj_change'
|
||
})
|
||
} else {
|
||
// 手艺人跳转到资质信息页面
|
||
uni.navigateTo({
|
||
url: '/pages/artisan/qualification_syr_change'
|
||
})
|
||
}
|
||
},
|
||
|
||
navigateToBelongShop() { // 手艺人：所属门店
|
||
uni.navigateTo({
|
||
url: '/pages/artisan/belong_shop'
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.profile-page {
|
||
min-height: 100vh;
|
||
background-color: #f5f5f5;
|
||
}
|
||
|
||
/* 自定义导航栏样式 */
|
||
.custom-navbar {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 108rpx; /* 使用标准导航栏高度 */
|
||
background: white;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0 32rpx;
|
||
z-index: 999;
|
||
box-sizing: border-box;
|
||
/* 适配不同机型的顶部安全区域 */
|
||
padding-top: var(--status-bar-height);
|
||
height: calc(128rpx + var(--status-bar-height));
|
||
}
|
||
|
||
/* 导航栏左侧 */
|
||
.navbar-left {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.back-icon {
|
||
width: 16rpx;
|
||
height: 32rpx;
|
||
margin-right: 23rpx;
|
||
}
|
||
|
||
.navbar-title {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
color: #333333;
|
||
line-height: 45rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
/* 导航栏右侧状态栏 */
|
||
.navbar-right {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.nav-status-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
margin-left: 11rpx;
|
||
padding: 16rpx;
|
||
}
|
||
|
||
.nav-status-icon {
|
||
width: 44rpx;
|
||
height: 44rpx;
|
||
margin-bottom: 7rpx;
|
||
}
|
||
|
||
.nav-status-text {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 20rpx;
|
||
color: #333333;
|
||
line-height: 28rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
.content {
|
||
padding: 20rpx;
|
||
/* 动态计算内容区域的上边距 */
|
||
padding-top: calc(128rpx + var(--status-bar-height) + 20rpx);
|
||
}
|
||
|
||
/* 部分卡片 */
|
||
.section-card {
|
||
background: white;
|
||
border-radius: 20rpx;
|
||
padding: 20rpx 20rpx 0 20rpx;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.section-header {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
|
||
.section-title {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
color: #1D2129;
|
||
line-height: 48rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
.title-bar {
|
||
width: 6rpx;
|
||
height: 30rpx;
|
||
background-color: #E8101E;
|
||
margin-right: 10rpx;
|
||
border-radius: 5rpx;
|
||
}
|
||
|
||
.section-desc {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #666666;
|
||
line-height: 33rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
margin-left: 20rpx;
|
||
letter-spacing: 0.5rpx;
|
||
}
|
||
|
||
/* 子部分 */
|
||
.subsection {
|
||
/* margin-top: 10rpx; */
|
||
/* margin-left: 17rpx; */
|
||
}
|
||
|
||
.subsection-content {
|
||
border-radius: 12rpx;
|
||
overflow: hidden;
|
||
margin-left: 17rpx;
|
||
}
|
||
|
||
/* 信息项 */
|
||
.info-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 32rpx 0 ;
|
||
border-bottom: 1rpx solid #f0f0f0;
|
||
}
|
||
|
||
.info-item:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.info-left {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.item-icon {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
margin-right: 24rpx;
|
||
}
|
||
|
||
.item-label {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
.arrow-right {
|
||
margin-right: 19rpx;
|
||
width: 11rpx;
|
||
height: 22rpx;
|
||
}
|
||
</style> |