3 changed files with 0 additions and 1232 deletions
@ -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> |
|
||||
@ -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> |
|
||||
@ -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> |
|
||||
Loading…
Reference in new issue