|
|
@@ -1,112 +1,342 @@
|
|
|
<template>
|
|
|
<view class="page">
|
|
|
- <uni-nav-bar title="首页" :border="false" fixed>
|
|
|
- <template #right>
|
|
|
- <view class="right">
|
|
|
- <view class="">
|
|
|
- <image src="@/static/images/index/ic_scan.png" mode=""></image>
|
|
|
+ <view class="home-header" :style="{ backgroundImage: `url(${homeBg})` }">
|
|
|
+ <view class="logo">
|
|
|
+ <image class="img" :src="logo"></image>
|
|
|
+ <image class="img-title" :src="homeTitle" />
|
|
|
+ </view>
|
|
|
+ <view class="home-options">
|
|
|
+ <view v-for="(item, index) in option" :key="index" class="option-item" @click="goLink(item.path)">
|
|
|
+ <image class="img" :src="item.icon" mode="scaleToFill" />
|
|
|
+ <view class="text">{{ item.title }}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="home-message">
|
|
|
+ <view v-for="(item, index) in messageInfo" :key="index" class="message-item">
|
|
|
+ <view class="item-title">{{ item.title }}</view>
|
|
|
+ <view class="item-content" :style="{ color: item.color ?? '#000' }">{{ item.content }}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="home-title">
|
|
|
+ <view class="title">营销数据</view>
|
|
|
+ <view class="custom-select">
|
|
|
+ <view class="select-item">归属<up-icon name="arrow-down"></up-icon></view>
|
|
|
+ <view class="select-item">周期<up-icon name="arrow-down"></up-icon></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="home-content">
|
|
|
+ <view class="content-card">
|
|
|
+ <view class="title">销售简报<view class="desc">(单位:万元)</view>
|
|
|
+ </view>
|
|
|
+ <view class="small-card">
|
|
|
+ <view class="progress">
|
|
|
+ <view class="text">完成率</view>
|
|
|
+ <up-line-progress :percentage="75" activeColor="#2B69F8" />
|
|
|
</view>
|
|
|
- <view class="">
|
|
|
- <image src="@/static/images/index/ic_search.png" mode=""></image>
|
|
|
+ <view class="small-card-content">
|
|
|
+ <view class="content-item">
|
|
|
+ <view class="title">目标金额</view>
|
|
|
+ <view class="number">12,345.52
|
|
|
+ <view class="unit">万</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="content-item">
|
|
|
+ <view class="title">已完成金额</view>
|
|
|
+ <view class="number">12,345.52
|
|
|
+ <view class="unit">万</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- </template>
|
|
|
- </uni-nav-bar>
|
|
|
-
|
|
|
- <!-- 数据表 -->
|
|
|
- <Statistics v-if="!showBannerFlag" />
|
|
|
-
|
|
|
- <!-- Banner -->
|
|
|
- <Banner v-if="showBannerFlag" />
|
|
|
-
|
|
|
- <!-- 功能菜单 -->
|
|
|
- <Menu @changeHome="changeHome" />
|
|
|
-
|
|
|
- <!-- 通知公告 -->
|
|
|
- <Notice />
|
|
|
-
|
|
|
- <!-- 商品 -->
|
|
|
- <Goods />
|
|
|
- <u-search placeholder="日照香炉生紫烟" v-model="keyword"></u-search>
|
|
|
- <u-button type="primary">主要按钮</u-button>
|
|
|
- <view class="charts-box">
|
|
|
- <qiun-data-charts type="demotype" :chartData="state.chartData"></qiun-data-charts>
|
|
|
+ <view class="card-data">
|
|
|
+ <view class="card-data-item">
|
|
|
+ <view class="title">客户总数</view>
|
|
|
+ <view class="number">52 <span class="unit">个</span></view>
|
|
|
+ <view class="tips">新增客户<span class="data">+4</span></view>
|
|
|
+ </view>
|
|
|
+ <view class="card-data-item">
|
|
|
+ <view class="title">服务商总数</view>
|
|
|
+ <view class="number">52 <span class="unit">个</span></view>
|
|
|
+ <view class="tips">新增服务商<span class="data">+4</span></view>
|
|
|
+ </view>
|
|
|
+ <view class="card-data-item">
|
|
|
+ <view class="title">线索总数</view>
|
|
|
+ <view class="number">52 <span class="unit">个</span></view>
|
|
|
+ <view class="tips">新增线索<span class="data">+4</span></view>
|
|
|
+ </view>
|
|
|
+ <view class="card-data-item">
|
|
|
+ <view class="title">立项总数</view>
|
|
|
+ <view class="number">52 <span class="unit">个</span></view>
|
|
|
+ <view class="tips">新增立项<span class="data">+4</span></view>
|
|
|
+ </view>
|
|
|
+ <view class="card-data-item">
|
|
|
+ <view class="title">投标总数</view>
|
|
|
+ <view class="number">52 <span class="unit">个</span></view>
|
|
|
+ <view class="tips">新增投标<span class="data">+4</span></view>
|
|
|
+ </view>
|
|
|
+ <view class="card-data-item">
|
|
|
+ <view class="title">中标总数</view>
|
|
|
+ <view class="number">52 <span class="unit">个</span></view>
|
|
|
+ <view class="tips">新增中标<span class="data">+4</span></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="card-bottom">
|
|
|
+ <view class="card-item">
|
|
|
+ <view class="title">待签约</view>
|
|
|
+ <view class="number">52<span class="unit">个</span></view>
|
|
|
+ </view>
|
|
|
+ <view class="card-item">
|
|
|
+ <view class="title">已签约</view>
|
|
|
+ <view class="number">52<span class="unit">个</span></view>
|
|
|
+ </view>
|
|
|
+ <view class="card-item">
|
|
|
+ <view class="title">待履约</view>
|
|
|
+ <view class="number">52<span class="unit">个</span></view>
|
|
|
+ </view>
|
|
|
+ <view class="card-item">
|
|
|
+ <view class="title">已履约</view>
|
|
|
+ <view class="number">52<span class="unit">个</span></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="customer-visit">
|
|
|
+ <view class="title">客户拜访</view>
|
|
|
+ <view class="customer-visit-content">
|
|
|
+ <view class="cusomer-visit-item">
|
|
|
+ <view class="tag-first">短期未联</view>
|
|
|
+ <view class="content">
|
|
|
+ <view class="content-item">
|
|
|
+ <view class="title">超7天</view>
|
|
|
+ <view class="number">12个</view>
|
|
|
+ </view>
|
|
|
+ <view class="content-item">
|
|
|
+ <view class="title">超15天</view>
|
|
|
+ <view class="number">52个</view>
|
|
|
+ </view>
|
|
|
+ <view class="content-item">
|
|
|
+ <view class="title">超30天</view>
|
|
|
+ <view class="number">52个</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="cusomer-visit-item">
|
|
|
+ <view class="tag-secondry">长期未联</view>
|
|
|
+ <view class="content">
|
|
|
+ <view class="content-item">
|
|
|
+ <view class="title">超3月</view>
|
|
|
+ <view class="number">12个</view>
|
|
|
+ </view>
|
|
|
+ <view class="content-item">
|
|
|
+ <view class="title">超6月</view>
|
|
|
+ <view class="number">52个</view>
|
|
|
+ </view>
|
|
|
+ <view class="content-item">
|
|
|
+ <view class="title">逾期未联系</view>
|
|
|
+ <view class="number">52个</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="customer-target">
|
|
|
+ <view class="title">目标及合同额</view>
|
|
|
+ <view class="charts-box">
|
|
|
+ <qiun-data-charts type="tarea" :opts="opts" :chartData="chartData" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-import Banner from './components/banner.vue';
|
|
|
-import Menu from './components/menu.vue';
|
|
|
-import Statistics from './components/statistics.vue';
|
|
|
-import Notice from './components/notice.vue';
|
|
|
-import Goods from './components/goods.vue';
|
|
|
import { ref, reactive, onMounted } from 'vue';
|
|
|
-import { onShow } from '@dcloudio/uni-app';
|
|
|
-const keyword = ref('')
|
|
|
-const showBannerFlag = ref(false);
|
|
|
-let state = reactive({
|
|
|
- chartData: {},
|
|
|
- opts: {}
|
|
|
+import { onShow, onLoad ,onReady} from '@dcloudio/uni-app';
|
|
|
+import logo from '@/static/images/home/home-logo.png';
|
|
|
+import homeBg from '@/static/images/home/home-bg.png'
|
|
|
+import homeTitle from '@/static/images/home/home-title.png'
|
|
|
+import user from '@/static/images/home/user.png'
|
|
|
+import clues from '@/static/images/home/clues.png'
|
|
|
+import serivces from '@/static/images/home/serivces.png'
|
|
|
+import note from '@/static/images/home/note.png'
|
|
|
+import packageImg from '@/static/images/home/package.png'
|
|
|
+/* 头部高度 */
|
|
|
+const statusBarHeight = ref(0)
|
|
|
+
|
|
|
+onLoad(() => {
|
|
|
+ uni.getSystemInfo({
|
|
|
+ success: (res) => {
|
|
|
+ const statusBar = res.statusBarHeight
|
|
|
+ // #ifdef MP-WEIXIN
|
|
|
+ const custom = wx.getMenuButtonBoundingClientRect()
|
|
|
+ statusBarHeight.value = (custom.bottom + custom.top - statusBar) + 'px'
|
|
|
+ // #endif
|
|
|
+ // #ifdef APP
|
|
|
+ statusBarHeight.value = statusBar + 'px'
|
|
|
+ // #endif
|
|
|
+ }
|
|
|
+ })
|
|
|
})
|
|
|
-state.opts = {
|
|
|
- color: ["#188df0", "#73C0DE"],
|
|
|
- padding: [15, 15, 0, 5],
|
|
|
+/* 下拉菜单条件 */
|
|
|
+const attach = ref(1)
|
|
|
+const cycle = ref(1)
|
|
|
+const attachList = ref([
|
|
|
+ {
|
|
|
+ label: '仅本人',
|
|
|
+ value: 1,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '仅本人及下属',
|
|
|
+ value: 2,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '仅本部门',
|
|
|
+ value: 3,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '仅本部门',
|
|
|
+ value: 3,
|
|
|
+ }
|
|
|
+])
|
|
|
+const cycleList = ref([
|
|
|
+ {
|
|
|
+ label: '全部',
|
|
|
+ value: 1,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '本周',
|
|
|
+ value: 1,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '本月',
|
|
|
+ value: 2,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '本季度',
|
|
|
+ value: 3,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '本年',
|
|
|
+ value: 3,
|
|
|
+ }
|
|
|
+])
|
|
|
+const messageInfo = ref([
|
|
|
+ {
|
|
|
+ title: '流程审批',
|
|
|
+ content: '34个',
|
|
|
+ color: ''
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '待办任务',
|
|
|
+ content: '34个',
|
|
|
+ color: '#FF9019'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '平台预警',
|
|
|
+ content: '34个',
|
|
|
+ color: '#F23947'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '消息提醒',
|
|
|
+ content: '34个',
|
|
|
+ color: ''
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '通知公告',
|
|
|
+ content: '34个',
|
|
|
+ color: ''
|
|
|
+ },
|
|
|
+])
|
|
|
+const option = [
|
|
|
+ {
|
|
|
+ icon: user,
|
|
|
+ title: '建客户',
|
|
|
+ path: ''
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon: clues,
|
|
|
+ title: '建线索',
|
|
|
+ path: ''
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon: serivces,
|
|
|
+ title: '建服务商',
|
|
|
+ path: ''
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon: note,
|
|
|
+ title: '写日志',
|
|
|
+ path: ''
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon: packageImg,
|
|
|
+ title: '建拜访',
|
|
|
+ path: ''
|
|
|
+ },
|
|
|
+]
|
|
|
+function goLink(path) {
|
|
|
+ if (path === '') {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ uni.navigateTo({
|
|
|
+ url: path
|
|
|
+ })
|
|
|
+}
|
|
|
+const chartData = ref({})
|
|
|
+const opts = ref({
|
|
|
+ color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
|
|
|
+ padding: [15, 10, 0, 15],
|
|
|
+ enableScroll: false,
|
|
|
legend: {
|
|
|
- positon: 'top'
|
|
|
+ show:false
|
|
|
},
|
|
|
xAxis: {
|
|
|
- disableGrid: true
|
|
|
+ disableGrid: true,
|
|
|
},
|
|
|
yAxis: {
|
|
|
+ gridType: "dash",
|
|
|
+ dashLength: 2,
|
|
|
data: [
|
|
|
{
|
|
|
- min: 0
|
|
|
- }
|
|
|
+ title: "金额(万元)",
|
|
|
+ min: 0,
|
|
|
+ max: 100,
|
|
|
+ },
|
|
|
]
|
|
|
},
|
|
|
extra: {
|
|
|
- column: {
|
|
|
- type: "group",
|
|
|
- width: 10,
|
|
|
- activeBgColor: "#000000",
|
|
|
- activeBgOpacity: 0.08,
|
|
|
- linearType: "opacity",
|
|
|
- seriesGap: 5,
|
|
|
- linearOpacity: 0.5,
|
|
|
- barBorderCircle: true,
|
|
|
- customColor: [
|
|
|
- "#188df0"
|
|
|
- ]
|
|
|
+ area: {
|
|
|
+ type: "curve",
|
|
|
+ opacity: 0.2,
|
|
|
+ addLine: true,
|
|
|
+ width: 2,
|
|
|
+ gradient: true,
|
|
|
+ activeType: "solid"
|
|
|
}
|
|
|
}
|
|
|
-}
|
|
|
-function getServerData(xData, yData, name) {
|
|
|
- let res = {
|
|
|
- categories: xData,
|
|
|
- series: [
|
|
|
- {
|
|
|
- name: name,
|
|
|
- data: yData
|
|
|
- }
|
|
|
- ]
|
|
|
- }
|
|
|
- state.chartData = JSON.parse(JSON.stringify(res));
|
|
|
-}
|
|
|
-function changeHome() {
|
|
|
- showBannerFlag.value = !showBannerFlag.value;
|
|
|
-}
|
|
|
-onMounted(() => {
|
|
|
- let xData = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24];
|
|
|
- let yData = [410, 425, 400, 580, 460, 458, 498, 488, 417, 506, 520, 538, 469, , , , , , , , , , ,];
|
|
|
- getServerData(xData, yData, "总功率");
|
|
|
})
|
|
|
-onShow(() => {
|
|
|
- uni.pageScrollTo({
|
|
|
- scrollTop: 0,
|
|
|
- duration: 300,
|
|
|
- });
|
|
|
-});
|
|
|
+onReady(() => {
|
|
|
+ getServerData()
|
|
|
+})
|
|
|
+function getServerData() {
|
|
|
+ setTimeout(() => {
|
|
|
+ //模拟服务器返回数据,如果数据格式和标准格式不同,需自行按下面的格式拼接
|
|
|
+ let res = {
|
|
|
+ categories: ["1月","2月","3月","4月","5月","6月",'7月','8月','9月','10月','11月','12月'],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: "1月",
|
|
|
+ data: [40,50,60,60,50,40,50,60,70,80,90,100]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "2月",
|
|
|
+ data: [48,58,68,68,58,48,58,68,78,88,98,108]
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ chartData.value = JSON.parse(JSON.stringify(res));
|
|
|
+ }, 500);
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
@@ -116,26 +346,357 @@ onShow(() => {
|
|
|
}
|
|
|
|
|
|
.page {
|
|
|
- background-color: #f5f5f5;
|
|
|
-}
|
|
|
-
|
|
|
-:deep(.uni-navbar__header-btns) {
|
|
|
- width: 150rpx !important;
|
|
|
-}
|
|
|
-
|
|
|
-.right {
|
|
|
- position: relative;
|
|
|
display: flex;
|
|
|
- z-index: 999;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 20rpx;
|
|
|
+ margin-top: v-bind(statusBarHeight);
|
|
|
|
|
|
- view {
|
|
|
- width: 56rpx;
|
|
|
- height: 56rpx;
|
|
|
- margin-left: 36rpx;
|
|
|
+ .home-header {
|
|
|
+ background: linear-gradient(0deg, #FFFFFF, #FFFFFF), linear-gradient(302.71deg, rgba(80, 133, 255, 0.7) 2.34%, #2B69F8 98.84%);
|
|
|
+ height: 226rpx;
|
|
|
+ background-size: cover;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ gap: 40rpx;
|
|
|
+ padding: 32rpx;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
|
|
|
- image {
|
|
|
+ .logo {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: space-between;
|
|
|
width: 100%;
|
|
|
- height: 100%;
|
|
|
+
|
|
|
+ .img {
|
|
|
+ width: 136rpx;
|
|
|
+ height: 52rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .img-title {
|
|
|
+ width: 400rpx;
|
|
|
+ height: 32rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .home-options {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ gap: 40rpx;
|
|
|
+ // margin-bottom: 40rpx;
|
|
|
+
|
|
|
+ .option-item {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8rpx;
|
|
|
+
|
|
|
+ .img {
|
|
|
+ width: 80rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text {
|
|
|
+ color: #FFFFFF;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ .home-message {
|
|
|
+ position: relative;
|
|
|
+ top: -32rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ padding: 32rpx;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ gap: 24rpx;
|
|
|
+
|
|
|
+ .message-item {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ gap: 16rpx;
|
|
|
+
|
|
|
+ .item-title {
|
|
|
+ font-size: 28rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-content {
|
|
|
+ font-size: 28rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .home-title {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ padding: 12rpx;
|
|
|
+ gap: 16rpx;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ color: #000;
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-family: 'PingFang SC';
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .custom-select {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ gap: 16rpx;
|
|
|
+
|
|
|
+ .select-item {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ padding: 4rpx 32rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .home-content {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 16rpx;
|
|
|
+ margin: 0 16rpx;
|
|
|
+
|
|
|
+ .content-card {
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ display: flex;
|
|
|
+ padding: 16rpx;
|
|
|
+ flex-direction: column;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-family: 'PingFang SC';
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .desc {
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-family: 'PingFang SC';
|
|
|
+ color: #797979;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .small-card {
|
|
|
+ border: 1px solid #F4F5F9;
|
|
|
+ border-radius: 16rpx;
|
|
|
+
|
|
|
+ .progress {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 16rpx;
|
|
|
+ padding: 16rpx;
|
|
|
+
|
|
|
+ .text {
|
|
|
+ color: #666666;
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-family: 'PingFang SC';
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .small-card-content {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 16rpx;
|
|
|
+ border-top: 1px solid #F6F8FF;
|
|
|
+
|
|
|
+ .content-item {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-family: 'PingFang SC';
|
|
|
+ color: #666666;
|
|
|
+ }
|
|
|
+
|
|
|
+ .number {
|
|
|
+ font-size: 36rpx;
|
|
|
+ font-family: 'PingFang SC';
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .unit {
|
|
|
+ color: #666666;
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-family: 'PingFang SC';
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .card-data {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(2, 1fr);
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ padding: 32rpx;
|
|
|
+
|
|
|
+ .card-data-item:nth-child(n) {
|
|
|
+ border-right: 1px solid #F6F9FF;
|
|
|
+ }
|
|
|
+
|
|
|
+ .card-data-item:nth-child(2n) {
|
|
|
+ border-right: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .card-data-item {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ padding: 32rpx;
|
|
|
+ border-bottom: 1px solid #F6F9FF;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ color: #666666;
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-family: 'PingFang SC';
|
|
|
+ }
|
|
|
+
|
|
|
+ .number {
|
|
|
+ font-size: 36rpx;
|
|
|
+ font-family: 'PingFang SC';
|
|
|
+
|
|
|
+ .unit {
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-family: 'PingFang SC';
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .tips {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #666666;
|
|
|
+ font-family: 'PingFang SC';
|
|
|
+
|
|
|
+ .data {
|
|
|
+ color: #2B69F8;
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-family: 'PingFang SC';
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .card-bottom {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: space-around;
|
|
|
+
|
|
|
+ .card-item {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #666666;
|
|
|
+ font-family: 'PingFang SC';
|
|
|
+ }
|
|
|
+
|
|
|
+ .number {
|
|
|
+ font-size: 36rpx;
|
|
|
+ font-family: 'PingFang SC';
|
|
|
+
|
|
|
+ .unit {
|
|
|
+ font-size: 28rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .customer-visit {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ padding: 32rpx;
|
|
|
+ gap: 32rpx;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #000000;
|
|
|
+ font-family: 'PingFang SC';
|
|
|
+ }
|
|
|
+
|
|
|
+ .customer-visit-content {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 8rpx;
|
|
|
+
|
|
|
+ .cusomer-visit-item {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ border: 1px solid #F4F5F9;
|
|
|
+ border-radius: 16rpx;
|
|
|
+
|
|
|
+ .tag-first {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ background: linear-gradient(90deg, #FFEBDC 0%, rgba(255, 235, 220, 0) 100%);
|
|
|
+ width: 100rpx;
|
|
|
+ height: 140rpx;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ writing-mode: vertical-lr;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tag-secondry {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ background: linear-gradient(90deg, #FFC8CC 0%, rgba(255, 200, 204, 0) 100%);
|
|
|
+ width: 100rpx;
|
|
|
+ height: 140rpx;
|
|
|
+ writing-mode: vertical-lr;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .content {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: space-around;
|
|
|
+ align-items: center;
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ .content-item {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ color: #666666;
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-family: 'PingFang SC';
|
|
|
+ }
|
|
|
+
|
|
|
+ .number {
|
|
|
+ font-size: 36rpx;
|
|
|
+ font-family: 'PingFang SC';
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ .customer-target{
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ padding: 32rpx;
|
|
|
+ .title{
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-family: 'PingFang SC';
|
|
|
+ color: #000;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|