|
|
@@ -11,9 +11,8 @@
|
|
|
<!-- 用户信息 -->
|
|
|
<view class="user-info-section">
|
|
|
<view class="avatar-wrapper">
|
|
|
- <image class="avatar" :src="cardInfo.avatar || '/static/image/public/avatar-default.png'"
|
|
|
- mode="aspectFill" />
|
|
|
- <image class="avatar-badge" src="/static/image/public/badge-icon.png" />
|
|
|
+ <UserAvatar :src="cardInfo.avatar" :name="cardInfo.nickName" :size="120"
|
|
|
+ :badge-src="'/static/image/public/badge-icon.png'" :badge-size="40" />
|
|
|
</view>
|
|
|
<view class="user-details">
|
|
|
<view class="name-row">
|
|
|
@@ -65,8 +64,8 @@
|
|
|
<text class="data-label">客户总数</text>
|
|
|
</view>
|
|
|
<view class="data-item highlight">
|
|
|
- <text
|
|
|
- class="data-value orange">{{ statisticsData.customerNewThisMonth.toLocaleString() }}</text>
|
|
|
+ <text class="data-value orange">{{ statisticsData.customerNewThisMonth.toLocaleString()
|
|
|
+ }}</text>
|
|
|
<text class="data-label">本月新增</text>
|
|
|
</view>
|
|
|
<view class="data-item">
|
|
|
@@ -88,8 +87,8 @@
|
|
|
<text class="data-label">商机总数</text>
|
|
|
</view>
|
|
|
<view class="data-item highlight">
|
|
|
- <text
|
|
|
- class="data-value orange">{{ statisticsData.opportunityNewThisMonth.toLocaleString() }}</text>
|
|
|
+ <text class="data-value orange">{{ statisticsData.opportunityNewThisMonth.toLocaleString()
|
|
|
+ }}</text>
|
|
|
<text class="data-label">本月新增</text>
|
|
|
</view>
|
|
|
<view class="data-item">
|
|
|
@@ -141,390 +140,374 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
- import {
|
|
|
- ref,
|
|
|
- onMounted
|
|
|
- } from 'vue'
|
|
|
- import NavBar from '@/components/nav-bar/index.vue'
|
|
|
- import {
|
|
|
- useUserStore
|
|
|
- } from '@/store/modules/user.js'
|
|
|
- import {
|
|
|
- storeToRefs
|
|
|
- } from 'pinia'
|
|
|
-
|
|
|
- // 使用 Pinia 管理用户状态
|
|
|
- const userStore = useUserStore()
|
|
|
- const {
|
|
|
- cardInfo,
|
|
|
- companyInfo
|
|
|
- } = storeToRefs(userStore)
|
|
|
-
|
|
|
- // 统计数据
|
|
|
- const statisticsData = ref({
|
|
|
- clueTotal: 0,
|
|
|
- clueNewThisMonth: 0,
|
|
|
- clueMine: 0,
|
|
|
- customerTotal: 0,
|
|
|
- customerNewThisMonth: 0,
|
|
|
- customerMine: 0,
|
|
|
- opportunityTotal: 0,
|
|
|
- opportunityNewThisMonth: 0,
|
|
|
- opportunityMine: 0
|
|
|
- })
|
|
|
-
|
|
|
- onMounted(async () => {
|
|
|
- // 如果没有数据，重新获取
|
|
|
- if (!cardInfo.value.nickName) {
|
|
|
- await userStore.queryCardInfo()
|
|
|
- }
|
|
|
- if (!companyInfo.value.name) {
|
|
|
- await userStore.queryCompanyInfo()
|
|
|
- }
|
|
|
-
|
|
|
- // 加载统计数据
|
|
|
- loadStatisticsData()
|
|
|
- })
|
|
|
-
|
|
|
- // 加载统计数据（后续对接真实 API）
|
|
|
- const loadStatisticsData = () => {
|
|
|
- // TODO: 调用统计 API 获取真实数据
|
|
|
- statisticsData.value = {
|
|
|
- clueTotal: 1266,
|
|
|
- clueNewThisMonth: 65,
|
|
|
- clueMine: 126,
|
|
|
- customerTotal: 1088,
|
|
|
- customerNewThisMonth: 123,
|
|
|
- customerMine: 235,
|
|
|
- opportunityTotal: 1366,
|
|
|
- opportunityNewThisMonth: 63,
|
|
|
- opportunityMine: 86
|
|
|
- }
|
|
|
+import {
|
|
|
+ ref,
|
|
|
+ onMounted
|
|
|
+} from 'vue'
|
|
|
+import NavBar from '@/components/nav-bar/index.vue'
|
|
|
+import UserAvatar from '@/components/user-avatar/index.vue'
|
|
|
+import {
|
|
|
+ useUserStore
|
|
|
+} from '@/store/modules/user.js'
|
|
|
+import {
|
|
|
+ storeToRefs
|
|
|
+} from 'pinia'
|
|
|
+
|
|
|
+// 使用 Pinia 管理用户状态
|
|
|
+const userStore = useUserStore()
|
|
|
+const {
|
|
|
+ cardInfo,
|
|
|
+ companyInfo
|
|
|
+} = storeToRefs(userStore)
|
|
|
+
|
|
|
+// 统计数据
|
|
|
+const statisticsData = ref({
|
|
|
+ clueTotal: 0,
|
|
|
+ clueNewThisMonth: 0,
|
|
|
+ clueMine: 0,
|
|
|
+ customerTotal: 0,
|
|
|
+ customerNewThisMonth: 0,
|
|
|
+ customerMine: 0,
|
|
|
+ opportunityTotal: 0,
|
|
|
+ opportunityNewThisMonth: 0,
|
|
|
+ opportunityMine: 0
|
|
|
+})
|
|
|
+
|
|
|
+onMounted(async () => {
|
|
|
+ // 如果没有数据，重新获取
|
|
|
+ if (!cardInfo.value.nickName) {
|
|
|
+ await userStore.queryCardInfo()
|
|
|
}
|
|
|
-
|
|
|
- const navigateTo = (page) => {
|
|
|
- uni.showToast({
|
|
|
- title: `功能开发中：${page}`,
|
|
|
- icon: 'none'
|
|
|
- })
|
|
|
+ if (!companyInfo.value.name) {
|
|
|
+ await userStore.queryCompanyInfo()
|
|
|
}
|
|
|
|
|
|
- // 显示名片
|
|
|
- const showCard = () => {
|
|
|
- uni.navigateTo({
|
|
|
- url: '/pages/mine/card'
|
|
|
- })
|
|
|
+ // 加载统计数据
|
|
|
+ loadStatisticsData()
|
|
|
+})
|
|
|
+
|
|
|
+// 加载统计数据（后续对接真实 API）
|
|
|
+const loadStatisticsData = () => {
|
|
|
+ // TODO: 调用统计 API 获取真实数据
|
|
|
+ statisticsData.value = {
|
|
|
+ clueTotal: 1266,
|
|
|
+ clueNewThisMonth: 65,
|
|
|
+ clueMine: 126,
|
|
|
+ customerTotal: 1088,
|
|
|
+ customerNewThisMonth: 123,
|
|
|
+ customerMine: 235,
|
|
|
+ opportunityTotal: 1366,
|
|
|
+ opportunityNewThisMonth: 63,
|
|
|
+ opportunityMine: 86
|
|
|
}
|
|
|
+}
|
|
|
|
|
|
- // 退出登录
|
|
|
- const logout = () => {
|
|
|
- uni.showModal({
|
|
|
- title: '提示',
|
|
|
- content: '确定要退出登录吗？',
|
|
|
- success: (res) => {
|
|
|
- if (res.confirm) {
|
|
|
- console.log('用户确认退出登录')
|
|
|
-
|
|
|
- // 1. 清除 token
|
|
|
- uni.removeStorageSync('token')
|
|
|
-
|
|
|
- // 2. 清除 store 中的用户数据
|
|
|
- userStore.$reset()
|
|
|
-
|
|
|
- // 3. 清除其他可能存储的数据
|
|
|
- uni.removeStorageSync('userInfo')
|
|
|
- uni.removeStorageSync('companyInfo')
|
|
|
-
|
|
|
- console.log('已清除所有登录数据')
|
|
|
-
|
|
|
- // 4. 跳转到登录页
|
|
|
- uni.reLaunch({
|
|
|
- url: '/pages/login/login'
|
|
|
- })
|
|
|
+const navigateTo = (page) => {
|
|
|
+ uni.showToast({
|
|
|
+ title: `功能开发中：${page}`,
|
|
|
+ icon: 'none'
|
|
|
+ })
|
|
|
+}
|
|
|
|
|
|
- uni.showToast({
|
|
|
- title: '已退出登录',
|
|
|
- icon: 'success'
|
|
|
- })
|
|
|
- }
|
|
|
+// 显示名片
|
|
|
+const showCard = () => {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages/mine/card'
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+// 退出登录
|
|
|
+const logout = () => {
|
|
|
+ uni.showModal({
|
|
|
+ title: '提示',
|
|
|
+ content: '确定要退出登录吗？',
|
|
|
+ success: (res) => {
|
|
|
+ if (res.confirm) {
|
|
|
+ console.log('用户确认退出登录')
|
|
|
+
|
|
|
+ // 1. 清除 token
|
|
|
+ uni.removeStorageSync('token')
|
|
|
+
|
|
|
+ // 2. 清除 store 中的用户数据
|
|
|
+ userStore.$reset()
|
|
|
+
|
|
|
+ // 3. 清除其他可能存储的数据
|
|
|
+ uni.removeStorageSync('userInfo')
|
|
|
+ uni.removeStorageSync('companyInfo')
|
|
|
+
|
|
|
+ console.log('已清除所有登录数据')
|
|
|
+
|
|
|
+ // 4. 跳转到登录页
|
|
|
+ uni.reLaunch({
|
|
|
+ url: '/pages/login/login'
|
|
|
+ })
|
|
|
+
|
|
|
+ uni.showToast({
|
|
|
+ title: '已退出登录',
|
|
|
+ icon: 'success'
|
|
|
+ })
|
|
|
}
|
|
|
- })
|
|
|
- }
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
- .mine-container {
|
|
|
- background: #f5f6f8;
|
|
|
+.mine-container {
|
|
|
+ background: #f5f6f8;
|
|
|
+}
|
|
|
+
|
|
|
+.top-bg {
|
|
|
+ width: 750rpx;
|
|
|
+ height: 634rpx;
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ z-index: 1;
|
|
|
+}
|
|
|
+
|
|
|
+// 顶部背景区域
|
|
|
+.header-bg {
|
|
|
+ padding: 0 40rpx;
|
|
|
+ padding-bottom: 200rpx;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ // 背景光效
|
|
|
+ .bg-light {
|
|
|
+ position: absolute;
|
|
|
+ border-radius: 50%;
|
|
|
+ background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
|
|
|
}
|
|
|
|
|
|
- .top-bg {
|
|
|
- width: 750rpx;
|
|
|
- height: 634rpx;
|
|
|
- position: fixed;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- z-index: 1;
|
|
|
+ .bg-light-1 {
|
|
|
+ top: -150rpx;
|
|
|
+ right: -100rpx;
|
|
|
+ width: 500rpx;
|
|
|
+ height: 500rpx;
|
|
|
}
|
|
|
|
|
|
- // 顶部背景区域
|
|
|
- .header-bg {
|
|
|
- padding: 0 40rpx;
|
|
|
- padding-bottom: 200rpx;
|
|
|
+ .bg-light-2 {
|
|
|
+ top: 200rpx;
|
|
|
+ left: -200rpx;
|
|
|
+ width: 400rpx;
|
|
|
+ height: 400rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 顶部状态栏
|
|
|
+ .header-top {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 60rpx;
|
|
|
position: relative;
|
|
|
- overflow: hidden;
|
|
|
+ z-index: 10;
|
|
|
|
|
|
- // 背景光效
|
|
|
- .bg-light {
|
|
|
- position: absolute;
|
|
|
- border-radius: 50%;
|
|
|
- background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
|
|
|
+ .header-left {
|
|
|
+ width: 100rpx;
|
|
|
}
|
|
|
|
|
|
- .bg-light-1 {
|
|
|
- top: -150rpx;
|
|
|
- right: -100rpx;
|
|
|
- width: 500rpx;
|
|
|
- height: 500rpx;
|
|
|
- }
|
|
|
+ .header-right {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
|
|
|
- .bg-light-2 {
|
|
|
- top: 200rpx;
|
|
|
- left: -200rpx;
|
|
|
- width: 400rpx;
|
|
|
- height: 400rpx;
|
|
|
+ .more-btn,
|
|
|
+ .refresh-btn {
|
|
|
+ width: 64rpx;
|
|
|
+ height: 64rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ background: rgba(255, 255, 255, 0.15);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin-left: 16rpx;
|
|
|
+ }
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- // 顶部状态栏
|
|
|
- .header-top {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- margin-bottom: 60rpx;
|
|
|
+ // 用户信息区域
|
|
|
+ .user-info-section {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ position: relative;
|
|
|
+ z-index: 10;
|
|
|
+
|
|
|
+ .avatar-wrapper {
|
|
|
position: relative;
|
|
|
- z-index: 10;
|
|
|
+ margin-right: 24rpx;
|
|
|
+ flex-shrink: 0;
|
|
|
+ }
|
|
|
|
|
|
- .header-left {
|
|
|
- width: 100rpx;
|
|
|
- }
|
|
|
+ .user-details {
|
|
|
+ flex: 1;
|
|
|
|
|
|
- .header-right {
|
|
|
+ .name-row {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
+ margin-bottom: 12rpx;
|
|
|
|
|
|
- .more-btn,
|
|
|
- .refresh-btn {
|
|
|
- width: 64rpx;
|
|
|
- height: 64rpx;
|
|
|
- border-radius: 50%;
|
|
|
- background: rgba(255, 255, 255, 0.15);
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
+ .user-name {
|
|
|
+ font-size: 36rpx;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #ffffff;
|
|
|
+ text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
|
|
|
+ }
|
|
|
+
|
|
|
+ .user-role {
|
|
|
+ font-size: 22rpx;
|
|
|
+ color: #ffffff;
|
|
|
+ background: rgba(255, 255, 255, 0.25);
|
|
|
+ padding: 4rpx 16rpx;
|
|
|
+ border-radius: 20rpx;
|
|
|
margin-left: 16rpx;
|
|
|
+ font-weight: 500;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ .company-name {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: rgba(255, 255, 255, 0.85);
|
|
|
+ display: block;
|
|
|
+ text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- // 用户信息区域
|
|
|
- .user-info-section {
|
|
|
+ .qr-btn {
|
|
|
display: flex;
|
|
|
+ flex-direction: column;
|
|
|
align-items: center;
|
|
|
- position: relative;
|
|
|
- z-index: 10;
|
|
|
-
|
|
|
- .avatar-wrapper {
|
|
|
- position: relative;
|
|
|
- margin-right: 24rpx;
|
|
|
-
|
|
|
- .avatar {
|
|
|
- width: 140rpx;
|
|
|
- height: 140rpx;
|
|
|
- border-radius: 50%;
|
|
|
- border: 4rpx solid rgba(255, 255, 255, 0.4);
|
|
|
- background: #ffffff;
|
|
|
- }
|
|
|
-
|
|
|
- .avatar-badge {
|
|
|
- width: 64rpx;
|
|
|
- height: 64rpx;
|
|
|
- position: absolute;
|
|
|
- bottom: 0;
|
|
|
- right: 0;
|
|
|
- transform: translate(50% 50%);
|
|
|
- z-index: 1;
|
|
|
- }
|
|
|
- }
|
|
|
+ justify-content: center;
|
|
|
|
|
|
- .user-details {
|
|
|
- flex: 1;
|
|
|
-
|
|
|
- .name-row {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- margin-bottom: 12rpx;
|
|
|
-
|
|
|
- .user-name {
|
|
|
- font-size: 36rpx;
|
|
|
- font-weight: 600;
|
|
|
- color: #ffffff;
|
|
|
- text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
|
|
|
- }
|
|
|
-
|
|
|
- .user-role {
|
|
|
- font-size: 22rpx;
|
|
|
- color: #ffffff;
|
|
|
- background: rgba(255, 255, 255, 0.25);
|
|
|
- padding: 4rpx 16rpx;
|
|
|
- border-radius: 20rpx;
|
|
|
- margin-left: 16rpx;
|
|
|
- font-weight: 500;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .company-name {
|
|
|
- font-size: 24rpx;
|
|
|
- color: rgba(255, 255, 255, 0.85);
|
|
|
- display: block;
|
|
|
- text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
|
|
|
- }
|
|
|
+ .qr-icon {
|
|
|
+ width: 48rpx;
|
|
|
+ height: 48rpx;
|
|
|
}
|
|
|
|
|
|
- .qr-btn {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
-
|
|
|
- .qr-icon {
|
|
|
- width: 48rpx;
|
|
|
- height: 48rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .qr-text {
|
|
|
- font-size: 20rpx;
|
|
|
- color: #ffffff;
|
|
|
- margin-top: 4rpx;
|
|
|
- }
|
|
|
+ .qr-text {
|
|
|
+ font-size: 20rpx;
|
|
|
+ color: #ffffff;
|
|
|
+ margin-top: 4rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+}
|
|
|
+
|
|
|
+// 内容区域
|
|
|
+.content-section {
|
|
|
+ margin-top: -160rpx;
|
|
|
+ position: relative;
|
|
|
+ z-index: 20;
|
|
|
+ padding: 0 40rpx;
|
|
|
+}
|
|
|
+
|
|
|
+// 数据卡片
|
|
|
+.data-card {
|
|
|
+ background: #ffffff;
|
|
|
+ margin-bottom: 24rpx;
|
|
|
+ padding: 32rpx;
|
|
|
+ border-radius: 24rpx;
|
|
|
+ box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
|
|
|
+
|
|
|
+ .card-header {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 24rpx;
|
|
|
+ }
|
|
|
|
|
|
- // 内容区域
|
|
|
- .content-section {
|
|
|
- margin-top: -160rpx;
|
|
|
- position: relative;
|
|
|
- z-index: 20;
|
|
|
- padding: 0 40rpx;
|
|
|
+ .card-title {
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #333333;
|
|
|
}
|
|
|
|
|
|
- // 数据卡片
|
|
|
- .data-card {
|
|
|
- background: #ffffff;
|
|
|
- margin-bottom: 24rpx;
|
|
|
- padding: 32rpx;
|
|
|
- border-radius: 24rpx;
|
|
|
- box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
|
|
|
+ .data-row {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
|
|
|
- .card-header {
|
|
|
+ .data-item {
|
|
|
display: flex;
|
|
|
- justify-content: space-between;
|
|
|
+ flex-direction: column;
|
|
|
align-items: center;
|
|
|
- margin-bottom: 24rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .card-title {
|
|
|
- font-size: 28rpx;
|
|
|
- font-weight: 600;
|
|
|
- color: #333333;
|
|
|
- }
|
|
|
-
|
|
|
- .data-row {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
-
|
|
|
- .data-item {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- flex: 1;
|
|
|
- position: relative;
|
|
|
+ flex: 1;
|
|
|
+ position: relative;
|
|
|
|
|
|
- .data-value {
|
|
|
- font-size: 40rpx;
|
|
|
- font-weight: 600;
|
|
|
- color: #333333;
|
|
|
- margin-bottom: 12rpx;
|
|
|
- font-family: DIN, 'DIN Alternate', sans-serif;
|
|
|
- }
|
|
|
+ .data-value {
|
|
|
+ font-size: 40rpx;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #333333;
|
|
|
+ margin-bottom: 12rpx;
|
|
|
+ font-family: DIN, 'DIN Alternate', sans-serif;
|
|
|
+ }
|
|
|
|
|
|
- .data-label {
|
|
|
- font-size: 24rpx;
|
|
|
- color: #999999;
|
|
|
- }
|
|
|
+ .data-label {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
|
|
|
- &.highlight .data-value {
|
|
|
- color: #ff6b35;
|
|
|
- }
|
|
|
+ &.highlight .data-value {
|
|
|
+ color: #ff6b35;
|
|
|
+ }
|
|
|
|
|
|
- &:not(:last-child)::after {
|
|
|
- content: '';
|
|
|
- position: absolute;
|
|
|
- right: 0;
|
|
|
- top: 50%;
|
|
|
- transform: translateY(-50%);
|
|
|
- width: 1rpx;
|
|
|
- height: 60rpx;
|
|
|
- background: #f0f0f0;
|
|
|
- }
|
|
|
+ &:not(:last-child)::after {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: 50%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ width: 1rpx;
|
|
|
+ height: 60rpx;
|
|
|
+ background: #f0f0f0;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- // 功能菜单卡片
|
|
|
- .menu-card {
|
|
|
- background: #ffffff;
|
|
|
- padding: 0 32rpx;
|
|
|
- border-radius: 24rpx;
|
|
|
- box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
|
|
|
-
|
|
|
- .menu-item {
|
|
|
+}
|
|
|
+
|
|
|
+// 功能菜单卡片
|
|
|
+.menu-card {
|
|
|
+ background: #ffffff;
|
|
|
+ padding: 0 32rpx;
|
|
|
+ border-radius: 24rpx;
|
|
|
+ box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
|
|
|
+
|
|
|
+ .menu-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 32rpx 0;
|
|
|
+
|
|
|
+ .menu-icon-wrapper {
|
|
|
+ width: 64rpx;
|
|
|
+ height: 64rpx;
|
|
|
+ border-radius: 16rpx;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- padding: 32rpx 0;
|
|
|
+ justify-content: center;
|
|
|
+ margin-right: 20rpx;
|
|
|
|
|
|
- .menu-icon-wrapper {
|
|
|
- width: 64rpx;
|
|
|
- height: 64rpx;
|
|
|
- border-radius: 16rpx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- margin-right: 20rpx;
|
|
|
-
|
|
|
- &.icon-blue {
|
|
|
- background: rgba(74, 144, 226, 0.1);
|
|
|
- }
|
|
|
-
|
|
|
- &.icon-red {
|
|
|
- background: rgba(255, 77, 79, 0.1);
|
|
|
- }
|
|
|
+ &.icon-blue {
|
|
|
+ background: rgba(74, 144, 226, 0.1);
|
|
|
}
|
|
|
|
|
|
- .menu-text {
|
|
|
- flex: 1;
|
|
|
- font-size: 28rpx;
|
|
|
- color: #333333;
|
|
|
+ &.icon-red {
|
|
|
+ background: rgba(255, 77, 79, 0.1);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .menu-divider {
|
|
|
- height: 1rpx;
|
|
|
- background: #f0f0f0;
|
|
|
+ .menu-text {
|
|
|
+ flex: 1;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #333333;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- // 底部占位
|
|
|
- .bottom-spacer {
|
|
|
- height: 40rpx;
|
|
|
+ .menu-divider {
|
|
|
+ height: 1rpx;
|
|
|
+ background: #f0f0f0;
|
|
|
}
|
|
|
+}
|
|
|
+
|
|
|
+// 底部占位
|
|
|
+.bottom-spacer {
|
|
|
+ height: 40rpx;
|
|
|
+}
|
|
|
</style>
|
