php
/
zhjwxt
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

修改 bug

master
王泽彦 9 months ago
parent
12f65aaada
commit
69fc81439a
3 changed files with 0 additions and 1232 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 495
      uniapp/pages/market/my/campus_data.vue
  2. 445
      uniapp/pages/market/my/dept_data.vue
  3. 292
      uniapp/pages/market/my/my_data.vue

495
uniapp/pages/market/my/campus_data.vue
View File

@ -1,495 +0,0 @@
<!--校区数据-->
<template>
<view class="main_box">
<!--自定义导航栏-->
<view class="navbar_section">
<view class="navbar_content">
<view class="back_btn" @click="goBack">
<fui-icon name="arrowleft" size="32" color="#fff"></fui-icon>
</view>
<view class="title">校区数据</view>
<view class="placeholder"></view>
</view>
</view>
<view class="content_section">
<!-- 校区选择器 -->
<view class="campus_selector">
<view class="selector_label">选择校区：</view>
<view class="selector_box">
<view class="selected_campus">请选择校区</view>
<fui-icon name="dropdown" size="24" color="#999"></fui-icon>
</view>
</view>
<!-- 数据概览卡片 -->
<view class="overview_cards">
<view class="card_item">
<view class="card_icon">
<fui-icon name="home" size="40" color="#29D3B4"></fui-icon>
</view>
<view class="card_content">
<view class="card_title">部门数量</view>
<view class="card_value">--</view>
</view>
</view>
<view class="card_item">
<view class="card_icon">
<fui-icon name="addressbook" size="40" color="#29D3B4"></fui-icon>
</view>
<view class="card_content">
<view class="card_title">员工总数</view>
<view class="card_value">--</view>
</view>
</view>
<view class="card_item">
<view class="card_icon">
<fui-icon name="star" size="40" color="#29D3B4"></fui-icon>
</view>
<view class="card_content">
<view class="card_title">客户总数</view>
<view class="card_value">--</view>
</view>
</view>
<view class="card_item">
<view class="card_icon">
<fui-icon name="wallet" size="40" color="#29D3B4"></fui-icon>
</view>
<view class="card_content">
<view class="card_title">校区业绩</view>
<view class="card_value">--</view>
</view>
</view>
</view>
<!-- 部门对比 -->
<view class="dept_comparison">
<view class="section_title">部门业绩对比</view>
<view class="comparison_list">
<view class="comparison_item">
<view class="dept_info">
<view class="dept_name">销售部</view>
<view class="dept_score">￥120000</view>
</view>
<view class="progress_bar">
<view class="progress_fill" style="width: 80%"></view>
</view>
<view class="dept_percent">80%</view>
</view>
<view class="comparison_item">
<view class="dept_info">
<view class="dept_name">市场部</view>
<view class="dept_score">￥100000</view>
</view>
<view class="progress_bar">
<view class="progress_fill" style="width: 67%"></view>
</view>
<view class="dept_percent">67%</view>
</view>
<view class="comparison_item">
<view class="dept_info">
<view class="dept_name">运营部</view>
<view class="dept_score">￥80000</view>
</view>
<view class="progress_bar">
<view class="progress_fill" style="width: 53%"></view>
</view>
<view class="dept_percent">53%</view>
</view>
<view class="comparison_item">
<view class="dept_info">
<view class="dept_name">客服部</view>
<view class="dept_score">￥60000</view>
</view>
<view class="progress_bar">
<view class="progress_fill" style="width: 40%"></view>
</view>
<view class="dept_percent">40%</view>
</view>
</view>
</view>
<!-- 月度趋势 -->
<view class="trend_section">
<view class="section_title">月度趋势</view>
<view class="trend_chart">
<view class="chart_placeholder">
<fui-icon name="linechart" size="80" color="#ddd"></fui-icon>
<view class="placeholder_text">图表功能待开发</view>
</view>
</view>
</view>
<!-- 功能按钮区域 -->
<view class="function_section">
<view class="section_title">数据分析</view>
<view class="function_grid">
<view class="function_item">
<view class="function_icon">
<fui-icon name="barchart" size="32" color="#29D3B4"></fui-icon>
</view>
<view class="function_text">校区对比</view>
</view>
<view class="function_item">
<view class="function_icon">
<fui-icon name="piechart" size="32" color="#29D3B4"></fui-icon>
</view>
<view class="function_text">部门分析</view>
</view>
<view class="function_item">
<view class="function_icon">
<fui-icon name="linechart" size="32" color="#29D3B4"></fui-icon>
</view>
<view class="function_text">趋势分析</view>
</view>
<view class="function_item">
<view class="function_icon">
<fui-icon name="list" size="32" color="#29D3B4"></fui-icon>
</view>
<view class="function_text">详细报表</view>
</view>
</view>
</view>
<!-- 提示信息 -->
<view class="tips_section">
<view class="tips_title">功能说明</view>
<view class="tips_content">
这里将显示校区的各项数据统计，包括部门数量、员工总数、客户数量、校区业绩等。
具体功能待后续开发实现。
</view>
</view>
</view>
</view>
</template>
<script>
import fuiIcon from "@/components/firstui/fui-icon/fui-icon.vue"
export default {
components: {
fuiIcon,
},
data() {
return {
}
},
onLoad() {
},
methods: {
// 返回上一页
goBack() {
uni.navigateBack()
},
}
}
</script>
<style lang="less" scoped>
.main_box {
background: #f5f5f5;
min-height: 100vh;
}
// 自定义导航栏
.navbar_section {
background: #29D3B4;
padding-top: 20rpx;
// 小程序端样式
// #ifdef MP-WEIXIN
padding-top: 90rpx;
// #endif
.navbar_content {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20rpx 24rpx 40rpx 24rpx;
.back_btn {
width: 60rpx;
height: 60rpx;
display: flex;
align-items: center;
justify-content: center;
}
.title {
font-size: 32rpx;
color: #fff;
font-weight: 500;
}
.placeholder {
width: 60rpx;
}
}
}
// 内容区域
.content_section {
padding: 40rpx 24rpx;
// 校区选择器
.campus_selector {
background: #fff;
border-radius: 16rpx;
padding: 32rpx 24rpx;
margin-bottom: 32rpx;
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
.selector_label {
font-size: 28rpx;
color: #333;
margin-bottom: 16rpx;
font-weight: 500;
}
.selector_box {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20rpx 24rpx;
background: #f8f8f8;
border-radius: 12rpx;
.selected_campus {
font-size: 26rpx;
color: #666;
}
}
}
// 概览卡片
.overview_cards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24rpx;
margin-bottom: 40rpx;
.card_item {
background: #fff;
border-radius: 16rpx;
padding: 32rpx 24rpx;
display: flex;
align-items: center;
gap: 20rpx;
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
.card_icon {
width: 64rpx;
height: 64rpx;
background: rgba(41, 211, 180, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.card_content {
flex: 1;
.card_title {
font-size: 24rpx;
color: #999;
margin-bottom: 8rpx;
}
.card_value {
font-size: 32rpx;
color: #333;
font-weight: 600;
}
}
}
}
// 部门对比
.dept_comparison {
margin-bottom: 40rpx;
.section_title {
font-size: 28rpx;
color: #333;
font-weight: 600;
margin-bottom: 24rpx;
}
.comparison_list {
background: #fff;
border-radius: 16rpx;
padding: 32rpx 24rpx;
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
.comparison_item {
display: flex;
align-items: center;
margin-bottom: 32rpx;
&:last-child {
margin-bottom: 0;
}
.dept_info {
width: 150rpx;
.dept_name {
font-size: 26rpx;
color: #333;
margin-bottom: 8rpx;
font-weight: 500;
}
.dept_score {
font-size: 22rpx;
color: #29D3B4;
font-weight: 600;
}
}
.progress_bar {
flex: 1;
height: 16rpx;
background: #f0f0f0;
border-radius: 8rpx;
margin: 0 20rpx;
overflow: hidden;
.progress_fill {
height: 100%;
background: linear-gradient(90deg, #29D3B4, #5CE1E6);
border-radius: 8rpx;
transition: width 0.3s ease;
}
}
.dept_percent {
width: 60rpx;
text-align: right;
font-size: 24rpx;
color: #29D3B4;
font-weight: 600;
}
}
}
}
// 月度趋势
.trend_section {
margin-bottom: 40rpx;
.section_title {
font-size: 28rpx;
color: #333;
font-weight: 600;
margin-bottom: 24rpx;
}
.trend_chart {
background: #fff;
border-radius: 16rpx;
padding: 40rpx 24rpx;
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
.chart_placeholder {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 200rpx;
.placeholder_text {
font-size: 24rpx;
color: #999;
margin-top: 16rpx;
}
}
}
}
// 功能区域
.function_section {
margin-bottom: 40rpx;
.section_title {
font-size: 28rpx;
color: #333;
font-weight: 600;
margin-bottom: 24rpx;
}
.function_grid {
background: #fff;
border-radius: 16rpx;
padding: 32rpx 24rpx;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 32rpx;
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
.function_item {
display: flex;
flex-direction: column;
align-items: center;
padding: 24rpx 16rpx;
border-radius: 12rpx;
transition: all 0.3s ease;
&:active {
background-color: #f5f5f5;
transform: scale(0.95);
}
.function_icon {
width: 64rpx;
height: 64rpx;
background: rgba(41, 211, 180, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16rpx;
}
.function_text {
font-size: 24rpx;
color: #333;
}
}
}
}
// 提示信息
.tips_section {
background: #fff;
border-radius: 16rpx;
padding: 32rpx 24rpx;
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
.tips_title {
font-size: 28rpx;
color: #333;
font-weight: 600;
margin-bottom: 16rpx;
}
.tips_content {
font-size: 24rpx;
color: #666;
line-height: 1.6;
}
}
}
</style>

445
uniapp/pages/market/my/dept_data.vue
View File

@ -1,445 +0,0 @@
<!--部门数据-->
<template>
<view class="main_box">
<!--自定义导航栏-->
<view class="navbar_section">
<view class="navbar_content">
<view class="back_btn" @click="goBack">
<fui-icon name="arrowleft" size="32" color="#fff"></fui-icon>
</view>
<view class="title">部门数据</view>
<view class="placeholder"></view>
</view>
</view>
<view class="content_section">
<!-- 部门选择器 -->
<view class="dept_selector">
<view class="selector_label">选择部门：</view>
<view class="selector_box">
<view class="selected_dept">请选择部门</view>
<fui-icon name="dropdown" size="24" color="#999"></fui-icon>
</view>
</view>
<!-- 数据概览卡片 -->
<view class="overview_cards">
<view class="card_item">
<view class="card_icon">
<fui-icon name="addressbook" size="40" color="#29D3B4"></fui-icon>
</view>
<view class="card_content">
<view class="card_title">部门人数</view>
<view class="card_value">--</view>
</view>
</view>
<view class="card_item">
<view class="card_icon">
<fui-icon name="star" size="40" color="#29D3B4"></fui-icon>
</view>
<view class="card_content">
<view class="card_title">总客户数</view>
<view class="card_value">--</view>
</view>
</view>
<view class="card_item">
<view class="card_icon">
<fui-icon name="wallet" size="40" color="#29D3B4"></fui-icon>
</view>
<view class="card_content">
<view class="card_title">部门业绩</view>
<view class="card_value">--</view>
</view>
</view>
<view class="card_item">
<view class="card_icon">
<fui-icon name="check" size="40" color="#29D3B4"></fui-icon>
</view>
<view class="card_content">
<view class="card_title">完成率</view>
<view class="card_value">--</view>
</view>
</view>
</view>
<!-- 排行榜 -->
<view class="ranking_section">
<view class="section_title">部门排行榜</view>
<view class="ranking_list">
<view class="ranking_item">
<view class="rank_number first">1</view>
<view class="member_info">
<view class="member_name">张三</view>
<view class="member_score">业绩：￥50000</view>
</view>
<view class="medal">
<fui-icon name="star-fill" size="24" color="#FFD700"></fui-icon>
</view>
</view>
<view class="ranking_item">
<view class="rank_number second">2</view>
<view class="member_info">
<view class="member_name">李四</view>
<view class="member_score">业绩：￥45000</view>
</view>
<view class="medal">
<fui-icon name="star-fill" size="24" color="#C0C0C0"></fui-icon>
</view>
</view>
<view class="ranking_item">
<view class="rank_number third">3</view>
<view class="member_info">
<view class="member_name">王五</view>
<view class="member_score">业绩：￥40000</view>
</view>
<view class="medal">
<fui-icon name="star-fill" size="24" color="#CD7F32"></fui-icon>
</view>
</view>
</view>
</view>
<!-- 功能按钮区域 -->
<view class="function_section">
<view class="section_title">数据分析</view>
<view class="function_grid">
<view class="function_item">
<view class="function_icon">
<fui-icon name="barchart" size="32" color="#29D3B4"></fui-icon>
</view>
<view class="function_text">业绩对比</view>
</view>
<view class="function_item">
<view class="function_icon">
<fui-icon name="piechart" size="32" color="#29D3B4"></fui-icon>
</view>
<view class="function_text">人员分布</view>
</view>
<view class="function_item">
<view class="function_icon">
<fui-icon name="linechart" size="32" color="#29D3B4"></fui-icon>
</view>
<view class="function_text">趋势分析</view>
</view>
<view class="function_item">
<view class="function_icon">
<fui-icon name="list" size="32" color="#29D3B4"></fui-icon>
</view>
<view class="function_text">详细报表</view>
</view>
</view>
</view>
<!-- 提示信息 -->
<view class="tips_section">
<view class="tips_title">功能说明</view>
<view class="tips_content">
这里将显示部门的各项数据统计，包括部门人员、客户数量、销售业绩、排行榜等。
具体功能待后续开发实现。
</view>
</view>
</view>
</view>
</template>
<script>
import fuiIcon from "@/components/firstui/fui-icon/fui-icon.vue"
export default {
components: {
fuiIcon,
},
data() {
return {
}
},
onLoad() {
},
methods: {
// 返回上一页
goBack() {
uni.navigateBack()
},
}
}
</script>
<style lang="less" scoped>
.main_box {
background: #f5f5f5;
min-height: 100vh;
}
// 自定义导航栏
.navbar_section {
background: #29D3B4;
padding-top: 20rpx;
// 小程序端样式
// #ifdef MP-WEIXIN
padding-top: 90rpx;
// #endif
.navbar_content {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20rpx 24rpx 40rpx 24rpx;
.back_btn {
width: 60rpx;
height: 60rpx;
display: flex;
align-items: center;
justify-content: center;
}
.title {
font-size: 32rpx;
color: #fff;
font-weight: 500;
}
.placeholder {
width: 60rpx;
}
}
}
// 内容区域
.content_section {
padding: 40rpx 24rpx;
// 部门选择器
.dept_selector {
background: #fff;
border-radius: 16rpx;
padding: 32rpx 24rpx;
margin-bottom: 32rpx;
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
.selector_label {
font-size: 28rpx;
color: #333;
margin-bottom: 16rpx;
font-weight: 500;
}
.selector_box {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20rpx 24rpx;
background: #f8f8f8;
border-radius: 12rpx;
.selected_dept {
font-size: 26rpx;
color: #666;
}
}
}
// 概览卡片
.overview_cards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24rpx;
margin-bottom: 40rpx;
.card_item {
background: #fff;
border-radius: 16rpx;
padding: 32rpx 24rpx;
display: flex;
align-items: center;
gap: 20rpx;
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
.card_icon {
width: 64rpx;
height: 64rpx;
background: rgba(41, 211, 180, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.card_content {
flex: 1;
.card_title {
font-size: 24rpx;
color: #999;
margin-bottom: 8rpx;
}
.card_value {
font-size: 32rpx;
color: #333;
font-weight: 600;
}
}
}
}
// 排行榜
.ranking_section {
margin-bottom: 40rpx;
.section_title {
font-size: 28rpx;
color: #333;
font-weight: 600;
margin-bottom: 24rpx;
}
.ranking_list {
background: #fff;
border-radius: 16rpx;
padding: 24rpx;
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
.ranking_item {
display: flex;
align-items: center;
padding: 20rpx 16rpx;
border-bottom: 1px solid #f0f0f0;
&:last-child {
border-bottom: none;
}
.rank_number {
width: 48rpx;
height: 48rpx;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 24rpx;
font-weight: 600;
color: #fff;
margin-right: 24rpx;
&.first {
background: #FFD700;
}
&.second {
background: #C0C0C0;
}
&.third {
background: #CD7F32;
}
}
.member_info {
flex: 1;
.member_name {
font-size: 28rpx;
color: #333;
margin-bottom: 8rpx;
font-weight: 500;
}
.member_score {
font-size: 24rpx;
color: #666;
}
}
.medal {
margin-left: 16rpx;
}
}
}
}
// 功能区域
.function_section {
margin-bottom: 40rpx;
.section_title {
font-size: 28rpx;
color: #333;
font-weight: 600;
margin-bottom: 24rpx;
}
.function_grid {
background: #fff;
border-radius: 16rpx;
padding: 32rpx 24rpx;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 32rpx;
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
.function_item {
display: flex;
flex-direction: column;
align-items: center;
padding: 24rpx 16rpx;
border-radius: 12rpx;
transition: all 0.3s ease;
&:active {
background-color: #f5f5f5;
transform: scale(0.95);
}
.function_icon {
width: 64rpx;
height: 64rpx;
background: rgba(41, 211, 180, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16rpx;
}
.function_text {
font-size: 24rpx;
color: #333;
}
}
}
}
// 提示信息
.tips_section {
background: #fff;
border-radius: 16rpx;
padding: 32rpx 24rpx;
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
.tips_title {
font-size: 28rpx;
color: #333;
font-weight: 600;
margin-bottom: 16rpx;
}
.tips_content {
font-size: 24rpx;
color: #666;
line-height: 1.6;
}
}
}
</style>

292
uniapp/pages/market/my/my_data.vue
View File

@ -1,292 +0,0 @@
<!--我的数据-->
<template>
<view class="main_box">
<!--自定义导航栏-->
<view class="navbar_section">
<view class="navbar_content">
<view class="back_btn" @click="goBack">
<fui-icon name="arrowleft" size="32" color="#fff"></fui-icon>
</view>
<view class="title">我的数据</view>
<view class="placeholder"></view>
</view>
</view>
<view class="content_section">
<!-- 数据概览卡片 -->
<view class="overview_cards">
<view class="card_item">
<view class="card_icon">
<fui-icon name="star" size="40" color="#29D3B4"></fui-icon>
</view>
<view class="card_content">
<view class="card_title">总客户数</view>
<view class="card_value">--</view>
</view>
</view>
<view class="card_item">
<view class="card_icon">
<fui-icon name="check" size="40" color="#29D3B4"></fui-icon>
</view>
<view class="card_content">
<view class="card_title">已签客户</view>
<view class="card_value">--</view>
</view>
</view>
<view class="card_item">
<view class="card_icon">
<fui-icon name="wallet" size="40" color="#29D3B4"></fui-icon>
</view>
<view class="card_content">
<view class="card_title">销售业绩</view>
<view class="card_value">--</view>
</view>
</view>
<view class="card_item">
<view class="card_icon">
<fui-icon name="calendar" size="40" color="#29D3B4"></fui-icon>
</view>
<view class="card_content">
<view class="card_title">本月任务</view>
<view class="card_value">--</view>
</view>
</view>
</view>
<!-- 功能按钮区域 -->
<view class="function_section">
<view class="section_title">数据统计</view>
<view class="function_grid">
<view class="function_item">
<view class="function_icon">
<fui-icon name="barchart" size="32" color="#29D3B4"></fui-icon>
</view>
<view class="function_text">客户统计</view>
</view>
<view class="function_item">
<view class="function_icon">
<fui-icon name="piechart" size="32" color="#29D3B4"></fui-icon>
</view>
<view class="function_text">业绩统计</view>
</view>
<view class="function_item">
<view class="function_icon">
<fui-icon name="linechart" size="32" color="#29D3B4"></fui-icon>
</view>
<view class="function_text">趋势分析</view>
</view>
<view class="function_item">
<view class="function_icon">
<fui-icon name="list" size="32" color="#29D3B4"></fui-icon>
</view>
<view class="function_text">详细报表</view>
</view>
</view>
</view>
<!-- 提示信息 -->
<view class="tips_section">
<view class="tips_title">功能说明</view>
<view class="tips_content">
这里将显示您个人的各项数据统计，包括客户数量、销售业绩、任务完成情况等。
具体功能待后续开发实现。
</view>
</view>
</view>
</view>
</template>
<script>
import fuiIcon from "@/components/firstui/fui-icon/fui-icon.vue"
export default {
components: {
fuiIcon,
},
data() {
return {
}
},
onLoad() {
},
methods: {
// 返回上一页
goBack() {
uni.navigateBack()
},
}
}
</script>
<style lang="less" scoped>
.main_box {
background: #f5f5f5;
min-height: 100vh;
}
// 自定义导航栏
.navbar_section {
background: #29D3B4;
padding-top: 20rpx;
// 小程序端样式
// #ifdef MP-WEIXIN
padding-top: 90rpx;
// #endif
.navbar_content {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20rpx 24rpx 40rpx 24rpx;
.back_btn {
width: 60rpx;
height: 60rpx;
display: flex;
align-items: center;
justify-content: center;
}
.title {
font-size: 32rpx;
color: #fff;
font-weight: 500;
}
.placeholder {
width: 60rpx;
}
}
}
// 内容区域
.content_section {
padding: 40rpx 24rpx;
// 概览卡片
.overview_cards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24rpx;
margin-bottom: 40rpx;
.card_item {
background: #fff;
border-radius: 16rpx;
padding: 32rpx 24rpx;
display: flex;
align-items: center;
gap: 20rpx;
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
.card_icon {
width: 64rpx;
height: 64rpx;
background: rgba(41, 211, 180, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.card_content {
flex: 1;
.card_title {
font-size: 24rpx;
color: #999;
margin-bottom: 8rpx;
}
.card_value {
font-size: 32rpx;
color: #333;
font-weight: 600;
}
}
}
}
// 功能区域
.function_section {
margin-bottom: 40rpx;
.section_title {
font-size: 28rpx;
color: #333;
font-weight: 600;
margin-bottom: 24rpx;
}
.function_grid {
background: #fff;
border-radius: 16rpx;
padding: 32rpx 24rpx;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 32rpx;
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
.function_item {
display: flex;
flex-direction: column;
align-items: center;
padding: 24rpx 16rpx;
border-radius: 12rpx;
transition: all 0.3s ease;
&:active {
background-color: #f5f5f5;
transform: scale(0.95);
}
.function_icon {
width: 64rpx;
height: 64rpx;
background: rgba(41, 211, 180, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16rpx;
}
.function_text {
font-size: 24rpx;
color: #333;
}
}
}
}
// 提示信息
.tips_section {
background: #fff;
border-radius: 16rpx;
padding: 32rpx 24rpx;
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
.tips_title {
font-size: 28rpx;
color: #333;
font-weight: 600;
margin-bottom: 16rpx;
}
.tips_content {
font-size: 24rpx;
color: #666;
line-height: 1.6;
}
}
}
</style>
Write Preview
Loading…
Cancel
Save