3 changed files with 1232 additions and 0 deletions
@ -0,0 +1,495 @@ |
|||||
|
<!--校区数据--> |
||||
|
<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> |
||||
@ -0,0 +1,445 @@ |
|||||
|
<!--部门数据--> |
||||
|
<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> |
||||
@ -0,0 +1,292 @@ |
|||||
|
<!--我的数据--> |
||||
|
<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> |
||||
Loading…
Reference in new issue