更新
This commit is contained in:
xuyuncong
parent
f0cde52cf0
commit
ff935b560e
@ -4,148 +4,114 @@
|
|||||||
<u-icon name="arrow-left" color="#fff" size="18"></u-icon>
|
<u-icon name="arrow-left" color="#fff" size="18"></u-icon>
|
||||||
</headersVue>
|
</headersVue>
|
||||||
<view class="ail">
|
<view class="ail">
|
||||||
<view class="ahhh">
|
<view class="time-selector">
|
||||||
<common-time-select v-model="range" @subsection-change="maskClick"></common-time-select>
|
<common-time-select v-model="range" @subsection-change="maskClick"></common-time-select>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- ↓ 新增 -->
|
<!-- 空状态 -->
|
||||||
|
<view class="empty-state" v-if="datas.length == 0 && id !== 6">
|
||||||
|
<image src="http://www.nuoyunr.com/lananRsc/detection/qs.png" mode="aspectFit"></image>
|
||||||
|
<text class="empty-text">暂无数据</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 客户来源统计 -->
|
||||||
<!-- <view class="ping-bottom">
|
<view v-if="id == 1" class="statistics-container">
|
||||||
<view class="dinga">客户来源统计</view>
|
<view class="statistics-grid" v-for="(item,index) in datas" :key="index">
|
||||||
<view class="dinga">更多<uni-icons type="right" size="12"></uni-icons></view>
|
<view class="statistic-item">
|
||||||
</view> -->
|
<view class="statistic-label">客户来源</view>
|
||||||
<view v-if="id == 1">
|
<view class="statistic-value">{{ item.customerSource || '' }}</view>
|
||||||
<view class="jsy" v-if="datas.length == 0">
|
</view>
|
||||||
<image src="http://www.nuoyunr.com/lananRsc/detection/qs.png" mode=""></image>
|
<view class="statistic-item">
|
||||||
</view>
|
<view class="statistic-label">车型</view>
|
||||||
<view class="top-box" v-for="(item,index) in datas" :key="index">
|
<view class="statistic-value">{{ item.goodsTitle || '' }}</view>
|
||||||
<view class="t-top">
|
</view>
|
||||||
<view class="sys">
|
<view class="statistic-item">
|
||||||
<view class="t-title">客户来源</view>
|
<view class="statistic-label">数量</view>
|
||||||
<view class="t-num">{{ item.customerSource || '' }}</view>
|
<view class="statistic-value">{{ item.theNum || '' }}</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="sys">
|
<view class="statistic-item">
|
||||||
<view class="t-title">车型</view>
|
<view class="statistic-label">公示金额</view>
|
||||||
<view class="t-num">{{ item.goodsTitle || '' }}</view>
|
<view class="statistic-value">{{ item.theAmount || '' }}</view>
|
||||||
</view>
|
|
||||||
<view class="sys">
|
|
||||||
<view class="t-title">数量</view>
|
|
||||||
<view class="t-num">{{ item.theNum || '' }}</view>
|
|
||||||
</view>
|
|
||||||
<view class="sys">
|
|
||||||
<view class="t-title">公示金额</view>
|
|
||||||
<view class="t-num">{{ item.theAmount || '' }}</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view v-if="id == 2">
|
<!-- 检测车型统计 -->
|
||||||
<view class="jsy" v-if="datas.length == 0">
|
<view v-if="id == 2" class="statistics-container">
|
||||||
<image src="http://www.nuoyunr.com/lananRsc/detection/qs.png" mode=""></image>
|
<view class="statistics-grid compact">
|
||||||
</view>
|
<view class="statistic-card" v-for="(item,index) in datas" :key="index">
|
||||||
<view class="waigg">
|
<view class="statistic-label">{{ item.goodsTitle || '' }}</view>
|
||||||
<view class="top-boxx" v-for="(item,index) in datas" :key="index">
|
<view class="statistic-value">{{ item.theNum || '' }}</view>
|
||||||
<view class="t-top">
|
|
||||||
<view class="t-title">{{ item.goodsTitle || '' }}</view>
|
|
||||||
<view class="t-num">{{ item.theNum || '' }}</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
|
<!-- 代收款 -->
|
||||||
<view v-if="id == 3">
|
<view v-if="id == 3" class="statistics-container">
|
||||||
<view class="jsy" v-if="datas.length == 0">
|
<view class="statistics-grid compact">
|
||||||
<image src="http://www.nuoyunr.com/lananRsc/detection/qs.png" mode=""></image>
|
<view class="statistic-card" v-for="(item,index) in datas" :key="index">
|
||||||
|
<view class="statistic-label">{{ item.theName || '' }}</view>
|
||||||
|
<view class="statistic-value">{{ item.theAmount || '' }}</view>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="waigg">
|
</view>
|
||||||
<view class="top-boxx" v-for="(item,index) in datas" :key="index">
|
|
||||||
<view class="t-top">
|
|
||||||
|
|
||||||
<view class="t-title" style="display: flex; align-items: center; ">{{ item.theName || '' }}:
|
<!-- 检测类型统计 -->
|
||||||
|
<view v-if="id == 4" class="statistics-container">
|
||||||
|
<view class="statistics-grid compact">
|
||||||
|
<view class="statistic-card" v-for="(item,index) in datas" :key="index">
|
||||||
|
<view class="statistic-label">{{ item.skuName || '' }}</view>
|
||||||
|
<view class="statistic-value">{{ item.orderCount || 0 }}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 客户来源统计(可点击) -->
|
||||||
|
<view v-if="id == 5" class="statistics-container">
|
||||||
|
<view class="statistics-grid compact">
|
||||||
|
<view class="statistic-card clickable" v-for="(item,index) in datas" :key="index"
|
||||||
|
@click="goProjectList(item)">
|
||||||
|
<view class="statistic-label">{{ item.name || '' }}</view>
|
||||||
|
<view class="statistic-value">{{ item.theNum || 0 }}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 资料统计 -->
|
||||||
|
<view v-if="id == 6" class="statistics-container">
|
||||||
|
<view class="empty-state" v-if="datas.length == 0">
|
||||||
|
<image src="http://www.nuoyunr.com/lananRsc/detection/qs.png" mode="aspectFit"></image>
|
||||||
|
<text class="empty-text">暂无数据</text>
|
||||||
|
</view>
|
||||||
|
<view class="file-list" v-else>
|
||||||
|
<view class="file-item" v-for="(item,index) in datas" :key="index">
|
||||||
|
<view class="file-info">
|
||||||
|
<view class="file-name">资料名称：{{ item.fileName || '' }}</view>
|
||||||
|
<view class="file-time">{{ type=='add' ? '新增时间' : '修改时间' }} {{formatDate(item.createTime)}}
|
||||||
</view>
|
</view>
|
||||||
<view class="t-num">{{ item.theAmount || '' }}</view>
|
<view class="file-type">类型：{{ item.type == 2 ?'文件' :'文件夹' }}</view>
|
||||||
</view>
|
</view>
|
||||||
|
<view v-if="item.type=='2'" class="file-action" @click="viewFile(item.filePath)">查看文件</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view v-if="id == 4">
|
<!-- 来源-待收款 -->
|
||||||
<view class="jsy" v-if="datas.length == 0">
|
<view v-if="id == 7" class="statistics-container">
|
||||||
<image src="http://www.nuoyunr.com/lananRsc/detection/qs.png" mode=""></image>
|
<view class="statistics-grid compact">
|
||||||
</view>
|
<view class="statistic-card clickable" v-for="(item,index) in datas" :key="index"
|
||||||
<view class="waigg">
|
|
||||||
<view class="top-boxx" v-for="(item,index) in datas" :key="index">
|
|
||||||
<view class="t-top">
|
|
||||||
|
|
||||||
<view class="t-title" style="display: flex; align-items: center; ">{{ item.skuName || '' }}:
|
|
||||||
</view>
|
|
||||||
<view class="t-num">{{ item.orderCount || 0 }}</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<view v-if="id == 5">
|
|
||||||
<view class="jsy" v-if="datas.length == 0">
|
|
||||||
<image src="http://www.nuoyunr.com/lananRsc/detection/qs.png" mode=""></image>
|
|
||||||
</view>
|
|
||||||
<view class="waigg">
|
|
||||||
<view class="top-boxx" v-for="(item,index) in datas" :key="index" @click="goProjectList(item)">
|
|
||||||
<view class="t-top">
|
|
||||||
|
|
||||||
<view class="t-title" style="display: flex; align-items: center; ">{{ item.name || '' }}:
|
|
||||||
</view>
|
|
||||||
<view class="t-num">{{ item.theNum || 0 }}</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<view v-if="id == 6">
|
|
||||||
<view class="jsy" v-if="datas.length == 0">
|
|
||||||
<image src="http://www.nuoyunr.com/lananRsc/detection/qs.png" mode=""></image>
|
|
||||||
</view>
|
|
||||||
<view class="">
|
|
||||||
<view class="top-boxx2" v-for="(item,index) in datas" :key="index"
|
|
||||||
style="display: flex;padding: 15rpx;justify-content: space-between;">
|
|
||||||
<view class="" style="">
|
|
||||||
<view class="" style=" ">
|
|
||||||
资料名称：{{ item.fileName || '' }}
|
|
||||||
</view>
|
|
||||||
<view style="margin-top: 20rpx;">{{ type=='add' ? '新增时间' : '修改时间' }}
|
|
||||||
{{formatDate(item.createTime)}}
|
|
||||||
</view>
|
|
||||||
<view class="" style="margin-top: 20rpx;">类型： {{ item.type == 2 ?'文件' :'文件夹' }}</view>
|
|
||||||
</view>
|
|
||||||
<view v-if="item.type=='2'" style="color: #3D89FC;" @click="viewFile(item.filePath)">查看文件</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<view class="jsy" v-if="datas.length == 0">
|
|
||||||
<image src="http://www.nuoyunr.com/lananRsc/detection/qs.png" mode=""></image>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<view v-if="id == 7">
|
|
||||||
<view class="waigg">
|
|
||||||
<view class="top-boxx" v-for="(item,index) in datas" :key="index"
|
|
||||||
@click="goProjectListByType(item)">
|
@click="goProjectListByType(item)">
|
||||||
<view class="t-top">
|
<view class="statistic-row">
|
||||||
|
<view class="statistic-label">来源</view>
|
||||||
<view class="t-title" style="display: flex; align-items: center; ">
|
<view class="statistic-value">{{ item.sourceName || '' }}</view>
|
||||||
{{ item.sourceName || '' }}:
|
|
||||||
</view>
|
|
||||||
<view class="t-num">{{ item.pendingAmountYuan || 0 }}</view>
|
|
||||||
</view>
|
</view>
|
||||||
<view class="t-top">
|
<view class="statistic-row">
|
||||||
|
<view class="statistic-label">金额</view>
|
||||||
<view class="t-title" style="display: flex; align-items: center; ">
|
<view class="statistic-value">{{ item.pendingAmountYuan || 0 }}</view>
|
||||||
台次
|
</view>
|
||||||
</view>
|
<view class="statistic-row">
|
||||||
<view class="t-num">{{ item.pendingCount || 0 }}</view>
|
<view class="statistic-label">台次</view>
|
||||||
|
<view class="statistic-value">{{ item.pendingCount || 0 }}</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@ -455,364 +421,180 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.jsy {
|
|
||||||
width: 90%;
|
|
||||||
margin: 40px auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: calc(100vh);
|
height: calc(100vh);
|
||||||
background-color: #F7F8FC;
|
background-color: #F7F8FC;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
// padding-top: 45px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ping-bottom {
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
box-sizing: border-box;
|
|
||||||
padding: 0px 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c-top {
|
|
||||||
width: 100%;
|
|
||||||
box-sizing: border-box;
|
|
||||||
padding: 15px;
|
|
||||||
padding-top: 55px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
background-color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c-title {
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: bold
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.ail {
|
.ail {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background-color: #F6F6F6;
|
background-color: #F7F8FC;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
padding-bottom: 20px;
|
padding-bottom: 20px;
|
||||||
|
min-height: calc(100vh - 100px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.top-box {
|
.time-selector {
|
||||||
width: 95%;
|
|
||||||
border-radius: 5px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
// padding: 18px;
|
|
||||||
background-color: white;
|
|
||||||
margin: 10px auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.top-boxx {
|
|
||||||
width: 47%;
|
|
||||||
border-radius: 5px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
// padding: 18px;
|
|
||||||
background-color: white;
|
|
||||||
margin-top: 10px;
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.top-boxx2 {
|
|
||||||
border-radius: 5px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
// padding: 18px;
|
|
||||||
background-color: white;
|
|
||||||
margin-top: 10px;
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.cont-box {
|
|
||||||
width: 100%;
|
|
||||||
border-radius: 5px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
padding: 18px;
|
|
||||||
background-color: white;
|
|
||||||
margin: 10px auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.charts-box {
|
|
||||||
width: 100%;
|
|
||||||
height: 300px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.t-bottom {
|
|
||||||
width: 100%;
|
|
||||||
height: 130px;
|
|
||||||
border-top: 1px solid #EEEEEE;
|
|
||||||
box-sizing: border-box;
|
|
||||||
// padding: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.t-top {
|
|
||||||
width: 100%;
|
|
||||||
// height: 130px;
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
justify-content: center;
|
|
||||||
box-sizing: border-box;
|
|
||||||
padding: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sis {
|
|
||||||
width: 33%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dinga {
|
|
||||||
// margin-left: 25px;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sys {
|
|
||||||
width: 25%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.t-title {
|
|
||||||
width: 100%;
|
|
||||||
text-align: center;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 400;
|
|
||||||
color: #333333;
|
|
||||||
line-height: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.t-num {
|
|
||||||
width: 100%;
|
|
||||||
text-align: center;
|
|
||||||
font-size: 22px;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #0D2E8D;
|
|
||||||
line-height: 26px;
|
|
||||||
margin: 5px auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cont-title {
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 500;
|
|
||||||
color: #333333;
|
|
||||||
}
|
|
||||||
|
|
||||||
.charts-box {
|
|
||||||
width: 100%;
|
|
||||||
height: 300px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wrap-box {
|
|
||||||
width: 100%;
|
|
||||||
box-sizing: border-box;
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
margin: 10px auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.w-box {
|
|
||||||
width: 33%;
|
|
||||||
box-sizing: border-box;
|
|
||||||
text-align: center;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.imgicon {
|
|
||||||
width: 33px;
|
|
||||||
height: 28px;
|
|
||||||
margin: 0 auto;
|
|
||||||
|
|
||||||
image {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.t-zhong {
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 400;
|
|
||||||
color: #333333;
|
|
||||||
margin: 3px auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.lanbnum {
|
|
||||||
font-size: 26px;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #0D2E8D;
|
|
||||||
}
|
|
||||||
|
|
||||||
.b-title {
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 400;
|
|
||||||
color: #666666;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.b-zuo {
|
|
||||||
width: 20%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.b-zhong {
|
|
||||||
text-align: left;
|
|
||||||
width: 60%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.b-you {
|
|
||||||
width: 20%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.touxiang {
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
border-radius: 50%;
|
|
||||||
background-color: salmon;
|
|
||||||
overflow: hidden;
|
|
||||||
margin-right: 10px;
|
|
||||||
|
|
||||||
image {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.one {
|
|
||||||
width: 24px;
|
|
||||||
height: 24px;
|
|
||||||
border-radius: 50%;
|
|
||||||
background: #FEB947;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
color: white;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.dis-t {
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
margin: 10px auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.lank {
|
|
||||||
width: 102px;
|
|
||||||
height: 27px;
|
|
||||||
border-radius: 14px;
|
|
||||||
border: 1px solid #0D2E8D;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
font-size: 15px;
|
|
||||||
font-weight: 400;
|
|
||||||
color: #0D2E8D;
|
|
||||||
}
|
|
||||||
|
|
||||||
.lan-you {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.yi {
|
|
||||||
font-size: 15px;
|
|
||||||
font-weight: 400;
|
|
||||||
color: #666666;
|
|
||||||
line-height: 15px;
|
|
||||||
margin-right: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.er {
|
|
||||||
width: 25px;
|
|
||||||
height: 25px;
|
|
||||||
background: #0D2E8D;
|
|
||||||
border-radius: 3px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
color: white !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
// ----------------------
|
|
||||||
.popup-box {
|
|
||||||
overflow: hidden;
|
|
||||||
border-radius: 8px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
padding: 15px;
|
|
||||||
width: 100%;
|
|
||||||
background-color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sousuo {
|
|
||||||
width: 95%;
|
|
||||||
margin: 0 auto;
|
|
||||||
margin-left: 0px;
|
|
||||||
height: 30px;
|
|
||||||
background: #F0F0F0;
|
|
||||||
border-radius: 50px;
|
|
||||||
color: #999999;
|
|
||||||
box-sizing: border-box;
|
|
||||||
padding: 0 10px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
|
|
||||||
input {
|
|
||||||
width: 80%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.list-box {
|
|
||||||
width: 100%;
|
|
||||||
height: 300px;
|
|
||||||
overflow: hidden;
|
|
||||||
box-sizing: border-box;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.list_scroll {
|
|
||||||
height: 100%; // 需设置高度
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.list-qiu {
|
|
||||||
width: 95%;
|
|
||||||
border-bottom: 1px solid #EEEEEE;
|
|
||||||
box-sizing: border-box;
|
|
||||||
padding: 10px 5px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tel {
|
|
||||||
margin-left: 5px;
|
|
||||||
font-size: 15px;
|
|
||||||
font-weight: 400;
|
|
||||||
color: #666666;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ahhh {
|
|
||||||
width: 90%;
|
width: 90%;
|
||||||
margin: 10px auto;
|
margin: 10px auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.waigg {
|
/* 空状态样式 */
|
||||||
|
.empty-state {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 60rpx 0;
|
||||||
|
|
||||||
|
image {
|
||||||
|
width: 200rpx;
|
||||||
|
height: 200rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-text {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 统计容器 */
|
||||||
|
.statistics-container {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 0 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 统计网格布局 */
|
||||||
|
.statistics-grid {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
&.compact {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 20rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 统计项样式 */
|
||||||
|
.statistic-item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
padding: 30rpx 0;
|
||||||
|
border-bottom: 1rpx solid #f0f0f0;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 统计卡片样式 */
|
||||||
|
.statistic-card {
|
||||||
|
width: calc(50% - 10rpx);
|
||||||
|
background-color: white;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
padding: 30rpx;
|
||||||
|
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
&.clickable {
|
||||||
|
transition: all 0.2s;
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
transform: scale(0.98);
|
||||||
|
background-color: #f8f9fa;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.statistic-row {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
flex-wrap: wrap;
|
align-items: center;
|
||||||
box-sizing: border-box;
|
margin-bottom: 15rpx;
|
||||||
padding: 10px;
|
|
||||||
|
&:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.statistic-label {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #666;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.statistic-value {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #0D2E8D;
|
||||||
|
line-height: 1.2;
|
||||||
|
margin-top: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 文件列表样式 */
|
||||||
|
.file-list {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-item {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: flex-start;
|
||||||
|
background-color: white;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
padding: 30rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-info {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-name {
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: #333;
|
||||||
|
font-weight: 500;
|
||||||
|
margin-bottom: 15rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-time,
|
||||||
|
.file-type {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #666;
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-action {
|
||||||
|
color: #3D89FC;
|
||||||
|
font-size: 26rpx;
|
||||||
|
padding: 10rpx 20rpx;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
background-color: rgba(61, 137, 252, 0.1);
|
||||||
|
white-space: nowrap;
|
||||||
|
margin-left: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 响应式调整 */
|
||||||
|
@media (max-width: 750px) {
|
||||||
|
.statistic-card {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-item {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-action {
|
||||||
|
margin-left: 0;
|
||||||
|
margin-top: 20rpx;
|
||||||
|
align-self: flex-end;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
Loading…
Reference in New Issue
Block a user