|
|
@@ -0,0 +1,1187 @@
|
|
|
+<template>
|
|
|
+ <div class="dashboard-container">
|
|
|
+ <div class="background-wrapper" style="width: 2048px; height: 1152px; pointer-events: auto;z-index: 0;">
|
|
|
+ <img src="../../assets/imgs/bgimg.png" alt="" style="width: 2048px;height: 1152px;">
|
|
|
+ </div>
|
|
|
+ <div class="main-content">
|
|
|
+ <div class="header-background">
|
|
|
+ <div class="header-section">
|
|
|
+ <div class="main-title fontMF">电氢智运-物流集散调度中心</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="time-display fontFx">
|
|
|
+ <span class="margin-right-10 fontMF">{{ nowWeek }}</span>
|
|
|
+ <span class="margin-right-10">{{ nowDate }}</span>
|
|
|
+ {{ nowTime }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="content-body">
|
|
|
+ <div class="left-panel">
|
|
|
+ <div class="section-title fontMF">当前运力分析展示</div>
|
|
|
+ <div class="enterprise-statistics">
|
|
|
+ <img src="../../assets/enterprise.png" alt="" class="enterprise-icon">
|
|
|
+ <p class="enterprise-title">入驻企业</p>
|
|
|
+ <div class="enterprise-count">
|
|
|
+ <counts bg :startVal="0" :length="6" :endVal='EnterpriseStatistics' separator="" />
|
|
|
+ <span>家</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="vehicle-stats-row-1">
|
|
|
+ <div class="stat-number">
|
|
|
+ <count :startVal='0' :endVal='VehicleAnalysis.entryTruck' :decimals="0" />
|
|
|
+ <p>入驻车辆/辆</p>
|
|
|
+ </div>
|
|
|
+ <div class="stat-number">
|
|
|
+ <count :startVal='0' :endVal='VehicleAnalysis.entryUnmanned' :decimals="0" />
|
|
|
+ <p>入驻无人车辆</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="vehicle-stats-row-2">
|
|
|
+ <div class="stat-number">
|
|
|
+ <count :startVal='0' :endVal='VehicleAnalysis.entryDriver' :decimals="0" />
|
|
|
+ <p>入驻司机/人</p>
|
|
|
+ </div>
|
|
|
+ <div class="stat-number">
|
|
|
+ <count :startVal='0' :endVal='VehicleAnalysis.entryTotal' :decimals="0" />
|
|
|
+ <p>平台磅秤/座</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="section-title fontMF">客户列表展示</div>
|
|
|
+ <div class="customer-table">
|
|
|
+ <div class="table-header flex" style="padding-left: 28px;">
|
|
|
+ <div style="width: 20%;text-align: center;">客户类型</div>
|
|
|
+ <div style="width: 20%;text-align: center;">使用次数</div>
|
|
|
+ <div style="width: 20%;text-align: center;">货物运输量</div>
|
|
|
+ <div style="width: 20%;text-align: center;">服务车辆数</div>
|
|
|
+ <div style="width: 20%;text-align: center;">车辆运营时长</div>
|
|
|
+ </div>
|
|
|
+ <div class="table-body" style="height:480px; overflow: hidden; position: relative;">
|
|
|
+ <div class="scroll-content customer-scroll-content"
|
|
|
+ :style="{ transform: `translateY(-${scrollTop}px)` }" ref="scrollContentRef"
|
|
|
+ @mouseenter="pauseScroll" @mouseleave="resumeScroll">
|
|
|
+ <div v-for="(item, i) in customerList" :key="i" class="table-row flex"
|
|
|
+ style="height: 28px;display: flex;" id="customerListRowE">
|
|
|
+ <div class="row-rank">{{ item.rank }}</div>
|
|
|
+ <div class="row-content">
|
|
|
+ <div class="table-cell" style="width: 20%;text-align: center;">{{ item.name }}</div>
|
|
|
+ <div class="table-cell" style="width: 20%;text-align: center;">{{ item.usageCount }}次
|
|
|
+ </div>
|
|
|
+ <div class="table-cell" style="width: 20%;text-align: center;">
|
|
|
+ {{ item.transportationVolume }}</div>
|
|
|
+ <div class="table-cell" style="width: 20%;text-align: center;">{{ item.serveCarCount }}
|
|
|
+ </div>
|
|
|
+ <div class="table-cell" style="width: 20%;text-align: center;">{{ item.duration }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-for="(item, i) in customerList" :key="'copy-' + i" class="table-row flex"
|
|
|
+ style="height: 28px;">
|
|
|
+ <div class="row-rank">{{ item.rank }}</div>
|
|
|
+ <div class="row-content">
|
|
|
+ <div class="table-cell" style="width: 20%;text-align: center;">{{ item.name }}</div>
|
|
|
+ <div class="table-cell" style="width: 20%;text-align: center;">{{ item.usageCount }}次
|
|
|
+ </div>
|
|
|
+ <div class="table-cell" style="width: 20%;text-align: center;">
|
|
|
+ {{ item.transportationVolume }}</div>
|
|
|
+ <div class="table-cell" style="width: 20%;text-align: center;">{{ item.serveCarCount }}
|
|
|
+ </div>
|
|
|
+ <div class="table-cell" style="width: 20%;text-align: center;">{{ item.duration }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="center-panel">
|
|
|
+ <div class="statistics-top">
|
|
|
+ <div class="statistic-item">
|
|
|
+ <div class="statistic-header">
|
|
|
+ <img class="statistic-icon" src="../../assets/imgs/dot.png" alt="">
|
|
|
+ <div class="statistic-label fontMF">累计运单/车</div>
|
|
|
+ </div>
|
|
|
+ <counts bg :startVal="0" :length="6" :endVal='totalStatistics.totalOrders' separator="" />
|
|
|
+ </div>
|
|
|
+ <div class="statistic-item">
|
|
|
+ <div class="statistic-header">
|
|
|
+ <img class="statistic-icon" src="../../assets/imgs/dot.png" alt="">
|
|
|
+ <div class="statistic-label fontMF">累计运载/吨</div>
|
|
|
+ </div>
|
|
|
+ <counts bg :startVal="0" :length="6" :endVal='totalStatistics.totalWeight' separator="" />
|
|
|
+ </div>
|
|
|
+ <div class="statistic-item">
|
|
|
+ <div class="statistic-header">
|
|
|
+ <img class="statistic-icon" src="../../assets/imgs/dot.png" alt="">
|
|
|
+ <div class="statistic-label fontMF">配送中车辆数/辆</div>
|
|
|
+ </div>
|
|
|
+ <counts bg :startVal="0" :length="6" :endVal='totalStatistics.deliveringVehicles'
|
|
|
+ separator="" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="map-container">
|
|
|
+ <img src="../../assets/imgs/map_bg.png" alt="" class="map-background">
|
|
|
+ <div class="iframe-wrapper">
|
|
|
+ <iframe ref="iframe" id="iframe" src="https://saas.sckaiwu.cn/wyenuxmd4j.html"
|
|
|
+ frameborder="0"></iframe>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="right-panel">
|
|
|
+ <div class="section-title fontMF" style="margin-top: 0px;margin-left: 0 !important;">车辆入驻统计</div>
|
|
|
+ <div>
|
|
|
+ <Charts :eOption="vehicleStatsOption" v-if="vehicleStatsOption"
|
|
|
+ style="height: 424px; width: 450px;" />
|
|
|
+ </div>
|
|
|
+ <div class="section-title fontMF" style="margin-top: 30px;margin-left: 0 !important;">订单执行情况</div>
|
|
|
+ <div class="order-table">
|
|
|
+ <div class="table-header flex">
|
|
|
+ <div style="width: 28%;text-align: center;">订单号</div>
|
|
|
+ <div style="width: 18%;text-align: center;">计划量/吨</div>
|
|
|
+ <div style="width: 18%;text-align: center;">已装载/吨</div>
|
|
|
+ <div style="width: 18%;text-align: center;">车次</div>
|
|
|
+ <div style="width: 18%;text-align: center;">完成率</div>
|
|
|
+ </div>
|
|
|
+ <div class="table-body" style="height: 400px; overflow: hidden; position: relative;">
|
|
|
+ <div class="order-scroll-content" :style="{ transform: `translateY(-${scrollTop2}px)` }"
|
|
|
+ ref="scrollContentRef2" @mouseenter="pauseScroll2" @mouseleave="resumeScroll2">
|
|
|
+ <div v-for="(item, i) in orderList" :key="i" class="table-row flex" style="height: 40px;">
|
|
|
+ <div class="table-cell" style="width: 28%;text-align: center;">{{ item.orderId }}</div>
|
|
|
+ <div class="table-cell" style="width: 18%;text-align: center;">{{ item.totalWeight }}{{
|
|
|
+ item.unit }}</div>
|
|
|
+ <div class="table-cell" style="width: 18%;text-align: center;">{{ item.deliveredWeight }}{{
|
|
|
+ item.unit }}
|
|
|
+ </div>
|
|
|
+ <div class="table-cell" style="width: 18%;text-align: center;">{{ item.carNumber }}</div>
|
|
|
+ <div class="progress-cell" style="width: 18%;color: #fff;">
|
|
|
+ <div class="progress-bar" :style="{ width: getRadioWidth(item.progress.toFixed(0)) }">
|
|
|
+ <div class="progress-indicator"></div>
|
|
|
+ </div>
|
|
|
+ {{ item.progress.toFixed(0) }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-for="(item, i) in orderList" :key="'copy-' + i" class="table-row flex"
|
|
|
+ style="height: 40px;">
|
|
|
+ <div class="table-cell" style="width: 28%;text-align: center;">{{ item.orderId }}</div>
|
|
|
+ <div class="table-cell" style="width: 18%;text-align: center;">{{ item.totalWeight }}{{
|
|
|
+ item.unit }}</div>
|
|
|
+ <div class="table-cell" style="width: 18%;text-align: center;">{{ item.deliveredWeight }}{{
|
|
|
+ item.unit }}
|
|
|
+ </div>
|
|
|
+ <div class="table-cell" style="width: 18%;text-align: center;">{{ item.carNumber }}</div>
|
|
|
+ <div class="progress-cell" style="width: 18%;color: #fff;">
|
|
|
+ <div class="progress-bar" :style="{ width: getRadioWidth(item.progress.toFixed(0)) }">
|
|
|
+ <div class="progress-indicator"></div>
|
|
|
+ </div>
|
|
|
+ {{ item.progress.toFixed(0) }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { ref, reactive, computed, onMounted, onBeforeUnmount, defineComponent } from 'vue';
|
|
|
+import moment from 'moment';
|
|
|
+import Charts from '@/components/selfCP/charts.vue';
|
|
|
+import Chartsbar from '@/components/selfCP/chartsbar.vue';
|
|
|
+import count from './count.vue';
|
|
|
+import counts from './counts.vue';
|
|
|
+import { POST, GET } from '@/server/api/common';
|
|
|
+import * as echarts from "echarts";
|
|
|
+import { useRoute } from 'vue-router';
|
|
|
+import { getCurrentInstance } from 'vue';
|
|
|
+
|
|
|
+const { appContext } = getCurrentInstance();
|
|
|
+const $config = appContext.config.globalProperties.$config;
|
|
|
+
|
|
|
+// 注册组件
|
|
|
+const components = { Charts, Chartsbar, count, counts };
|
|
|
+
|
|
|
+// 响应式数据
|
|
|
+const nowWeek = ref('');
|
|
|
+const nowDate = ref('');
|
|
|
+const nowTime = ref('');
|
|
|
+
|
|
|
+const tabIndex = ref(1);
|
|
|
+
|
|
|
+let newTimer = null;
|
|
|
+let time1 = null;
|
|
|
+let time2 = null;
|
|
|
+let mineId = ref(null);
|
|
|
+
|
|
|
+const route = useRoute();
|
|
|
+
|
|
|
+
|
|
|
+function getNowTime() {
|
|
|
+ let date = new Date();
|
|
|
+ nowDate.value =
|
|
|
+ date.getFullYear() +
|
|
|
+ '.' +
|
|
|
+ (date.getMonth() + 1 >= 10 ? date.getMonth() + 1 : '0' + (date.getMonth() + 1)) +
|
|
|
+ '.' +
|
|
|
+ (date.getDate() >= 10 ? date.getDate() : '0' + date.getDate());
|
|
|
+ nowTime.value =
|
|
|
+ date.getHours() +
|
|
|
+ ':' +
|
|
|
+ (date.getMinutes() >= 10 ? date.getMinutes() : '0' + date.getMinutes()) +
|
|
|
+ ':' +
|
|
|
+ (date.getSeconds() >= 10 ? date.getSeconds() : '0' + date.getSeconds());
|
|
|
+ let weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
|
|
|
+ nowWeek.value = weeks[date.getDay()];
|
|
|
+}
|
|
|
+
|
|
|
+function getApiUrl() {
|
|
|
+ getEnterpriseStatistics()
|
|
|
+ getVehicleAnalysis()
|
|
|
+ getCustomerList()
|
|
|
+ getTotalStatistics()
|
|
|
+ getCarStatistics()
|
|
|
+ getOrders()
|
|
|
+}
|
|
|
+
|
|
|
+const EnterpriseStatistics = ref(0)
|
|
|
+const orderSituationList = ref([])
|
|
|
+function getEnterpriseStatistics() {
|
|
|
+ GET($config.enterpriseStatistics.url).then((res) => {
|
|
|
+ EnterpriseStatistics.value = res.data.data.total
|
|
|
+ })
|
|
|
+}
|
|
|
+const VehicleAnalysis = ref({
|
|
|
+ "entryTruck": 0,
|
|
|
+ "entryDriver": 0,
|
|
|
+ "entryUnmanned": 0,
|
|
|
+ "entryTotal": 0
|
|
|
+})
|
|
|
+function getVehicleAnalysis() {
|
|
|
+ GET($config.vehicleAnalysis.url).then((res) => {
|
|
|
+ VehicleAnalysis.value = res.data.data
|
|
|
+ })
|
|
|
+}
|
|
|
+const customerList = ref([])
|
|
|
+function getCustomerList() {
|
|
|
+ GET($config.customerList.url).then((res) => {
|
|
|
+ customerList.value = res.data.data.list
|
|
|
+ setTimeout(() => {
|
|
|
+ startScroll();
|
|
|
+ }, 500);
|
|
|
+
|
|
|
+ })
|
|
|
+}
|
|
|
+const orderList = ref([])
|
|
|
+function getOrders() {
|
|
|
+ GET($config.orders.url).then((res) => {
|
|
|
+ orderList.value = res.data.data.orders
|
|
|
+ startScroll2();
|
|
|
+ })
|
|
|
+}
|
|
|
+const totalStatistics = ref({
|
|
|
+ "totalOrders": 0,
|
|
|
+ "totalWeight": 0,
|
|
|
+ "deliveringVehicles": 0
|
|
|
+})
|
|
|
+function getTotalStatistics() {
|
|
|
+ GET($config.totalStatistics.url).then((res) => {
|
|
|
+ totalStatistics.value = res.data.data
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+function getCarStatistics() {
|
|
|
+ GET($config.carStatistics.url).then((res) => {
|
|
|
+ console.log(res);
|
|
|
+
|
|
|
+ vehicleStatsOption.value = {
|
|
|
+ backgroundColor: 'transparent',
|
|
|
+ title: {
|
|
|
+ text: '入驻数量',
|
|
|
+ left: '20px',
|
|
|
+ top: '20px',
|
|
|
+ textStyle: {
|
|
|
+ color: '#fff',
|
|
|
+ fontSize: 16,
|
|
|
+ fontWeight: 'normal'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ data: ['入驻司机', '登记车辆', '无人车辆'],
|
|
|
+ right: '20px',
|
|
|
+ top: '20px',
|
|
|
+ textStyle: {
|
|
|
+ color: '#fff',
|
|
|
+ fontSize: 12
|
|
|
+ },
|
|
|
+ itemWidth: 8,
|
|
|
+ itemHeight: 8,
|
|
|
+ icon: 'rect'
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: '3%',
|
|
|
+ right: '5%',
|
|
|
+ bottom: '5%',
|
|
|
+ top: '20%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data: res.data.data.categories,
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: '#2a4b7c'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ color: '#8892b0',
|
|
|
+ fontSize: 10
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value',
|
|
|
+ max: 800,
|
|
|
+ interval: 100,
|
|
|
+ axisLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ color: '#8892b0',
|
|
|
+ fontSize: 12
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: '#1e3a5f',
|
|
|
+ type: 'solid',
|
|
|
+ width: 1
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '入驻司机',
|
|
|
+ type: 'bar',
|
|
|
+ data: res.data.data.series[0].data,
|
|
|
+ barWidth: 9,
|
|
|
+ barGap: '0%',
|
|
|
+ itemStyle: {
|
|
|
+ color: '#1890ff',
|
|
|
+ borderRadius: [0, 0, 0, 0]
|
|
|
+ },
|
|
|
+ showBackground: true, // 开启背景
|
|
|
+ backgroundStyle: {
|
|
|
+ color: 'rgba(180, 180, 180, 0.2)', // 背景颜色
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '登记车辆',
|
|
|
+ type: 'bar',
|
|
|
+ data: res.data.data.series[1].data,
|
|
|
+ barWidth: 9,
|
|
|
+ itemStyle: {
|
|
|
+ color: '#52c41a',
|
|
|
+ borderRadius: [0, 0, 0, 0]
|
|
|
+ },
|
|
|
+ showBackground: true, // 开启背景
|
|
|
+ backgroundStyle: {
|
|
|
+ color: 'rgba(180, 180, 180, 0.2)', // 背景颜色
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '无人车辆',
|
|
|
+ type: 'bar',
|
|
|
+ data: res.data.data.series[2].data,
|
|
|
+ barWidth: 9,
|
|
|
+ itemStyle: {
|
|
|
+ color: '#13c2c2',
|
|
|
+ borderRadius: [0, 0, 0, 0]
|
|
|
+ },
|
|
|
+ showBackground: true, // 开启背景
|
|
|
+ backgroundStyle: {
|
|
|
+ color: 'rgba(180, 180, 180, 0.2)', // 背景颜色
|
|
|
+ },
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+function getRadioWidth(pct) {
|
|
|
+ let width = (76 / 100) * parseFloat(pct);
|
|
|
+ return width + 'px';
|
|
|
+}
|
|
|
+
|
|
|
+const scrollTop = ref(0);
|
|
|
+const scrollContentRef = ref(null);
|
|
|
+let scrollTimer = null;
|
|
|
+let rowHeight = 26; // 单行高度，和上面style一致
|
|
|
+let pause = false;
|
|
|
+
|
|
|
+function startScroll() {
|
|
|
+
|
|
|
+ if (scrollTimer) clearInterval(scrollTimer);
|
|
|
+ scrollTimer = setInterval(() => {
|
|
|
+ if (pause) return;
|
|
|
+ scrollTop.value += 1;
|
|
|
+ // 滚动到一半（即原始数据高度）后重置
|
|
|
+ if (customerList.value.length > 0 && scrollTop.value >= rowHeight * customerList.value.length) {
|
|
|
+ scrollTop.value = 0;
|
|
|
+ }
|
|
|
+ }, 30); // 速度可调
|
|
|
+}
|
|
|
+
|
|
|
+function pauseScroll() {
|
|
|
+ pause = true;
|
|
|
+}
|
|
|
+function resumeScroll() {
|
|
|
+ pause = false;
|
|
|
+}
|
|
|
+
|
|
|
+const scrollTop2 = ref(0);
|
|
|
+const scrollContentRef2 = ref(null);
|
|
|
+let scrollTimer2 = null;
|
|
|
+const rowHeight2 = 40;
|
|
|
+let pause2 = false;
|
|
|
+
|
|
|
+function startScroll2() {
|
|
|
+ if (scrollTimer2) clearInterval(scrollTimer2);
|
|
|
+ scrollTimer2 = setInterval(() => {
|
|
|
+ if (pause2) return;
|
|
|
+ scrollTop2.value += 1;
|
|
|
+ if (orderList.value.length > 0 && scrollTop2.value >= rowHeight2 * orderList.value.length) {
|
|
|
+ scrollTop2.value = 0;
|
|
|
+ }
|
|
|
+ }, 30);
|
|
|
+}
|
|
|
+
|
|
|
+function pauseScroll2() {
|
|
|
+ pause2 = true;
|
|
|
+}
|
|
|
+function resumeScroll2() {
|
|
|
+ pause2 = false;
|
|
|
+}
|
|
|
+
|
|
|
+// script setup 区域增加车辆统计图表配置
|
|
|
+// 重新配置车辆统计图表，为每个柱子组合添加背景
|
|
|
+const vehicleStatsOption = ref(null);
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ getNowTime();
|
|
|
+ newTimer = setInterval(getNowTime, 1000);
|
|
|
+ if (route.query && route.query.companyId) {
|
|
|
+ mineId.value = route.query.companyId;
|
|
|
+ }
|
|
|
+ getApiUrl();
|
|
|
+ moment.locale('zh-cn');
|
|
|
+ // clearInterval(time1);
|
|
|
+ // clearInterval(time2);
|
|
|
+ // time1 = setInterval(getdata, $config.time * 1000);
|
|
|
+ // time2 = setInterval(getdatas, $config.time1 * 1000);
|
|
|
+
|
|
|
+});
|
|
|
+
|
|
|
+onBeforeUnmount(() => {
|
|
|
+ clearInterval(newTimer);
|
|
|
+ newTimer = null;
|
|
|
+ if (scrollTimer) clearInterval(scrollTimer);
|
|
|
+ if (scrollTimer2) clearInterval(scrollTimer2);
|
|
|
+});
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+</script>
|
|
|
+<style lang="less" scoped>
|
|
|
+@font-face {
|
|
|
+ font-family: MFLiHei;
|
|
|
+ src: url('../../assets/font/MFLiHei_Noncommercial-Regular.otf') format('opentype');
|
|
|
+}
|
|
|
+
|
|
|
+@font-face {
|
|
|
+ font-family: FXLed;
|
|
|
+ src: url('../../assets/font/DSDIGI1.ttf');
|
|
|
+}
|
|
|
+
|
|
|
+.fontMF {
|
|
|
+ font-family: MFLiHei;
|
|
|
+}
|
|
|
+
|
|
|
+.fontFx {
|
|
|
+ font-family: FXLed;
|
|
|
+}
|
|
|
+
|
|
|
+.flex {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.MR40 {
|
|
|
+ margin-right: 40px;
|
|
|
+}
|
|
|
+
|
|
|
+.margin-right-10 {
|
|
|
+ margin-right: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.vehicle-stats-row-2 {
|
|
|
+ height: 98px;
|
|
|
+ width: 398px;
|
|
|
+ background: url(../../assets/zhibiao2.png) no-repeat;
|
|
|
+ background-size: 100%;
|
|
|
+ display: flex;
|
|
|
+ color: #fff;
|
|
|
+ padding-right: 98px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin: 0 auto;
|
|
|
+ padding-bottom: 4px;
|
|
|
+
|
|
|
+ .stat-number {
|
|
|
+ width: 50%;
|
|
|
+ text-align: center;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ font-family: FXLed;
|
|
|
+ font-weight: normal;
|
|
|
+ font-size: 23px;
|
|
|
+ color: #FFFFFF;
|
|
|
+ margin-bottom: 0;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ line-height: 23px;
|
|
|
+ }
|
|
|
+
|
|
|
+ p {
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 12px;
|
|
|
+ margin-top: 4px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.enterprise-statistics {
|
|
|
+ width: 314px;
|
|
|
+ height: 95px;
|
|
|
+ background: rgba(255, 255, 255, 0.1);
|
|
|
+ padding-top: 12px;
|
|
|
+ padding-left: 75px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ position: relative;
|
|
|
+ margin-left: 96px;
|
|
|
+ margin-top: 40px;
|
|
|
+
|
|
|
+ .enterprise-icon {
|
|
|
+ position: absolute;
|
|
|
+ width: 125px;
|
|
|
+ height: 125px;
|
|
|
+ left: -67.5px;
|
|
|
+ top: -20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .enterprise-title {
|
|
|
+ font-family: MFLiHei;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 19px;
|
|
|
+ color: #FFFFFF;
|
|
|
+ }
|
|
|
+
|
|
|
+ .enterprise-count {
|
|
|
+ span {
|
|
|
+ color: #fff;
|
|
|
+ margin-left: 4px;
|
|
|
+ line-height: 40px;
|
|
|
+ position: relative;
|
|
|
+ top: 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.vehicle-stats-row-1 {
|
|
|
+ margin-top: 10px;
|
|
|
+ height: 98px;
|
|
|
+ width: 398px;
|
|
|
+ background: url(../../assets/zhibiao1.png) no-repeat;
|
|
|
+ background-size: 100%;
|
|
|
+ display: flex;
|
|
|
+ color: #fff;
|
|
|
+ padding-left: 98px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin: 0 auto;
|
|
|
+ padding-bottom: 4px;
|
|
|
+ margin-top: 20px;
|
|
|
+
|
|
|
+ .stat-number {
|
|
|
+ width: 50%;
|
|
|
+ text-align: center;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ font-family: FXLed;
|
|
|
+ font-weight: normal;
|
|
|
+ font-size: 23px;
|
|
|
+ color: #FFFFFF;
|
|
|
+ margin-bottom: 0;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ line-height: 23px;
|
|
|
+ }
|
|
|
+
|
|
|
+ p {
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 12px;
|
|
|
+ margin-top: 4px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.dashboard-container {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .main-content {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ height: 100%;
|
|
|
+ z-index: 1;
|
|
|
+ width: 100%;
|
|
|
+ padding: 0px;
|
|
|
+
|
|
|
+ .header-background {
|
|
|
+ width: 2048px;
|
|
|
+ height: 113px;
|
|
|
+ z-index: 0;
|
|
|
+ transform: rotate(0deg);
|
|
|
+ opacity: 1;
|
|
|
+ // pointer-events: none;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ .header-section {
|
|
|
+ position: absolute !important;
|
|
|
+ margin: 0 !important;
|
|
|
+ width: 2048px;
|
|
|
+ height: 113px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ background-image: url(../../assets/imgs/title_bg.png);
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+
|
|
|
+ .main-title {
|
|
|
+ text-align: center;
|
|
|
+ line-height: 25px;
|
|
|
+ flex: 1;
|
|
|
+ padding: 25px 0;
|
|
|
+ pointer-events: auto;
|
|
|
+ color: rgb(255, 255, 255);
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 40px;
|
|
|
+ writing-mode: horizontal-tb;
|
|
|
+ letter-spacing: 0px;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .tab-button {
|
|
|
+ position: absolute;
|
|
|
+ width: 257px;
|
|
|
+ height: 39px;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ font-family: MF LiHei;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 18px;
|
|
|
+ color: #FFFFFF;
|
|
|
+ line-height: 39px;
|
|
|
+ text-align: center;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ .left-tab {
|
|
|
+ background-image: url(../../assets/imgs/tab_l.png);
|
|
|
+ left: 270px;
|
|
|
+ top: 15px;
|
|
|
+ text-indent: 40px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .left-tab-active {
|
|
|
+ background-image: url(../../assets/imgs/tab_led.png);
|
|
|
+ }
|
|
|
+
|
|
|
+ .right-tab {
|
|
|
+ background-image: url(../../assets/imgs/tab_r.png);
|
|
|
+ right: 270px;
|
|
|
+ top: 15px;
|
|
|
+ text-indent: -30px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .right-tab-active {
|
|
|
+ background-image: url(../../assets/imgs/tab_red.png);
|
|
|
+ }
|
|
|
+
|
|
|
+ .time-display {
|
|
|
+ position: fixed;
|
|
|
+ right: 50px;
|
|
|
+ height: 30px;
|
|
|
+ line-height: 30px;
|
|
|
+ font-size: 16px;
|
|
|
+ top: 8px;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .content-body {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ .left-panel {
|
|
|
+ width: 484px;
|
|
|
+ height: 1010px;
|
|
|
+ background-image: url(../../assets/imgs/left_bg.png);
|
|
|
+ background-size: 100% 100%;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ padding: 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .quantity-display {
|
|
|
+ color: #FFFFFF;
|
|
|
+ font-size: 28px;
|
|
|
+ font-weight: bold;
|
|
|
+ letter-spacing: 0;
|
|
|
+ display: flex;
|
|
|
+ align-items: baseline;
|
|
|
+
|
|
|
+ .quantity-prefix {
|
|
|
+ font-size: 16px;
|
|
|
+ margin-right: 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .quantity-unit {
|
|
|
+ margin-left: 8px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #FFFFFF;
|
|
|
+ font-weight: bolder;
|
|
|
+ vertical-align: super;
|
|
|
+ font-family: Microsoft Yahei;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .section-title {
|
|
|
+ width: 313px;
|
|
|
+ height: 24px;
|
|
|
+ background-image: url(../../assets/imgs/tits_bg.png);
|
|
|
+ background-size: 100% 100%;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 18px;
|
|
|
+ color: #FFFFFF;
|
|
|
+ text-indent: 25px;
|
|
|
+ margin-top: 10px;
|
|
|
+ line-height: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .carbox {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding-left: 40px;
|
|
|
+ margin-top: 30px;
|
|
|
+
|
|
|
+ .carimg {
|
|
|
+ width: 97px;
|
|
|
+ height: 88px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .cardes {
|
|
|
+ margin-left: 35px;
|
|
|
+
|
|
|
+ .cart {
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 18px;
|
|
|
+ color: #FFFFFF;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .z_box {
|
|
|
+ margin-top: 30px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .l_box {
|
|
|
+ width: 190px;
|
|
|
+ height: 160px;
|
|
|
+ background: rgba(255, 255, 255, 0.1);
|
|
|
+ display: flex;
|
|
|
+ flex-flow: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .l_img {
|
|
|
+ width: 156px;
|
|
|
+ height: 86px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .l_tit {
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #FFFFFF;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .r_box {
|
|
|
+ margin-left: 20px;
|
|
|
+
|
|
|
+ .b_item {
|
|
|
+ width: 200px;
|
|
|
+ height: 70px;
|
|
|
+ background: rgba(255, 255, 255, 0.1);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ // justify-content: center;
|
|
|
+ .l_img {
|
|
|
+ width: 108px;
|
|
|
+ height: 59px;
|
|
|
+ margin-left: -20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .b_des {
|
|
|
+ margin-left: 16px;
|
|
|
+
|
|
|
+ .b_tit {
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #FFFFFF;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .customer-table {
|
|
|
+ width: 420px;
|
|
|
+ margin: 0 auto;
|
|
|
+ margin-top: 20px;
|
|
|
+ height: 360px;
|
|
|
+
|
|
|
+ .table-header {
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: 12px;
|
|
|
+ padding: 9px 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .table-body {
|
|
|
+ .seamless-warp {
|
|
|
+ overflow: hidden;
|
|
|
+ height: 360px;
|
|
|
+ // height: 390px;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ th {
|
|
|
+ text-align: left;
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 30px;
|
|
|
+ // background-color: rgb(0, 80, 179);
|
|
|
+ }
|
|
|
+
|
|
|
+ .table-cell {
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 30px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .table-row:nth-child(2n+1) {
|
|
|
+ // background-color: #032255;
|
|
|
+ background-color: rgba(255, 255, 255, 0.1);
|
|
|
+ }
|
|
|
+
|
|
|
+ .progress-cell {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: 12px;
|
|
|
+
|
|
|
+ .progress-bar {
|
|
|
+ position: relative;
|
|
|
+ min-width: 6px;
|
|
|
+ height: 10px;
|
|
|
+ background: linear-gradient(90deg, #29abe3, #01ffff);
|
|
|
+ margin-right: 4px;
|
|
|
+
|
|
|
+ .progress-indicator {
|
|
|
+ width: 6px;
|
|
|
+ height: 16px;
|
|
|
+ background: #ffffff;
|
|
|
+ position: absolute;
|
|
|
+ top: -3px;
|
|
|
+ right: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .nitem {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .nimg {
|
|
|
+ width: 216px;
|
|
|
+ height: 122px;
|
|
|
+ position: relative;
|
|
|
+ z-index: 2;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ndes {
|
|
|
+ width: 220px;
|
|
|
+ height: 70px;
|
|
|
+ background: rgba(255, 255, 255, 0.1);
|
|
|
+ display: flex;
|
|
|
+ margin-left: -50px;
|
|
|
+ position: relative;
|
|
|
+ z-index: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .mc {
|
|
|
+ margin-left: 30px;
|
|
|
+ margin-top: 24px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .center-panel {
|
|
|
+ .statistics-top {
|
|
|
+ width: 1018px;
|
|
|
+ height: 138px;
|
|
|
+ background-image: url(../../assets/imgs/mid_tbg.png);
|
|
|
+ background-size: 100% 100%;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ .statistic-item {
|
|
|
+ display: flex;
|
|
|
+ flex-flow: column;
|
|
|
+ align-items: center;
|
|
|
+ flex: 1;
|
|
|
+
|
|
|
+ .statistic-header {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 12px;
|
|
|
+
|
|
|
+ .statistic-icon {
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .statistic-label {
|
|
|
+ margin-left: 8px;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 18px;
|
|
|
+ color: #FFFFFF;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .map-container {
|
|
|
+ margin-top: 14px;
|
|
|
+ width: 1018px;
|
|
|
+ height: 860px;
|
|
|
+ // width: 1018px;
|
|
|
+ // height: 658px;
|
|
|
+ // background-image: url(../../assets/imgs/map_bg.png);
|
|
|
+ // background-size: 100% 100%;
|
|
|
+ // background-repeat: no-repeat;
|
|
|
+ // margin-top: 14px;
|
|
|
+ position: relative;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .map-background {
|
|
|
+ width: 1018px;
|
|
|
+ height: 100%;
|
|
|
+ position: absolute;
|
|
|
+ z-index: 1;
|
|
|
+ pointer-events: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .iframe-wrapper {
|
|
|
+ position: absolute;
|
|
|
+ // background-image: url(../../assets/img/iframe_bg.png);
|
|
|
+ // background-repeat: no-repeat;
|
|
|
+ // background-size: 100% 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ height: 100%;
|
|
|
+ padding-bottom: 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ #iframe {
|
|
|
+ // margin: 10px 12px;
|
|
|
+ margin: 0 auto;
|
|
|
+ margin-left: 10px;
|
|
|
+ margin-top: 10px;
|
|
|
+ width: 998px;
|
|
|
+ height: 100%;
|
|
|
+ z-index: 0;
|
|
|
+ // border-radius: 30px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .mid_b {
|
|
|
+ padding: 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ width: 1018px;
|
|
|
+ height: 190px;
|
|
|
+ background-image: url(../../assets/imgs/mid_bbg.png);
|
|
|
+ background-size: 100% 100%;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ margin-top: 10px;
|
|
|
+
|
|
|
+ .tt {
|
|
|
+ width: 313px;
|
|
|
+ height: 24px;
|
|
|
+ background-image: url(../../assets/imgs/tits_bg.png);
|
|
|
+ background-size: 100% 100%;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 18px;
|
|
|
+ color: #FFFFFF;
|
|
|
+ text-indent: 25px;
|
|
|
+ line-height: 15px;
|
|
|
+ margin-top: 10px;
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .right-panel {
|
|
|
+ width: 484px;
|
|
|
+ height: 1010px;
|
|
|
+ background-image: url(../../assets/imgs/right_bg.png);
|
|
|
+ background-size: 100% 100%;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ padding: 30px;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .section-title {
|
|
|
+ width: 313px;
|
|
|
+ height: 24px;
|
|
|
+ background-image: url(../../assets/imgs/tits_bg.png);
|
|
|
+ background-size: 100% 100%;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 18px;
|
|
|
+ color: #FFFFFF;
|
|
|
+ text-indent: 25px;
|
|
|
+ line-height: 15px;
|
|
|
+ margin-top: 10px;
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .order-table {
|
|
|
+ width: 424px;
|
|
|
+ margin: 0 auto;
|
|
|
+
|
|
|
+ .table-header {
|
|
|
+ color: #fff;
|
|
|
+ padding: 9px 0;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .table-body {
|
|
|
+ .seamless-warp {
|
|
|
+ overflow: hidden;
|
|
|
+ height: 900px;
|
|
|
+ width: 424px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ th {
|
|
|
+ text-align: left;
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 30px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .table-cell {
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 30px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .table-row:nth-child(even) {
|
|
|
+ background-color: rgba(255, 255, 255, 0.1);
|
|
|
+ // background-color: rgba(255, 255, 255, 0.399);
|
|
|
+ }
|
|
|
+
|
|
|
+ .progress-cell {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 12px;
|
|
|
+
|
|
|
+ .progress-bar {
|
|
|
+ position: relative;
|
|
|
+ min-width: 6px;
|
|
|
+ height: 10px;
|
|
|
+ background: linear-gradient(90deg, #29abe3, #01ffff);
|
|
|
+ margin-right: 4px;
|
|
|
+
|
|
|
+ .progress-indicator {
|
|
|
+ width: 6px;
|
|
|
+ height: 16px;
|
|
|
+ background: #ffffff;
|
|
|
+ position: absolute;
|
|
|
+ top: -3px;
|
|
|
+ right: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.scroll-content {
|
|
|
+ transition: transform 0.1s linear;
|
|
|
+ will-change: transform;
|
|
|
+}
|
|
|
+
|
|
|
+.order-scroll-content {
|
|
|
+ transition: transform 0.1s linear;
|
|
|
+ will-change: transform;
|
|
|
+}
|
|
|
+
|
|
|
+.customer-scroll-content {
|
|
|
+
|
|
|
+ .row-rank {
|
|
|
+ width: 28px;
|
|
|
+ height: 28px;
|
|
|
+ background: linear-gradient(90deg, #0067FF, #3A93FF);
|
|
|
+ text-align: center;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .row-content {
|
|
|
+ display: flex;
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
15902849627
