From f5be5ec4b62f8f167d75fedcfd157b079b0ad379 Mon Sep 17 00:00:00 2001
From: lancer <1905818361@qq.com>
Date: Wed, 29 Sep 2021 18:06:13 +0800
Subject: [PATCH] init

---
 src/views/Equipment/equipmentDetailList.vue |   2 +-
 src/views/Statistics/ConsultantBrand.vue    | 530 ++++++++++++++++++++
 src/views/Statistics/MentoringAbility.vue   | 478 ++++++++++++++++++
 3 files changed, 1009 insertions(+), 1 deletion(-)
 create mode 100644 src/views/Statistics/ConsultantBrand.vue
 create mode 100644 src/views/Statistics/MentoringAbility.vue

diff --git a/src/views/Equipment/equipmentDetailList.vue b/src/views/Equipment/equipmentDetailList.vue
index 294fad9..1a280e2 100644
--- a/src/views/Equipment/equipmentDetailList.vue
+++ b/src/views/Equipment/equipmentDetailList.vue
@@ -656,7 +656,7 @@ export default {
         houseName: "",
         accountName: "",
         imei: "",
-        total: "",
+        total:10,
         recording: "",
       },
       details: {
diff --git a/src/views/Statistics/ConsultantBrand.vue b/src/views/Statistics/ConsultantBrand.vue
new file mode 100644
index 0000000..463f80a
--- /dev/null
+++ b/src/views/Statistics/ConsultantBrand.vue
@@ -0,0 +1,530 @@
+<template>
+  <div class="box-center">
+    <!-- 头 -->
+    <div class="app-titel">
+      <div class="titel-text">
+        楼盘选择：
+        <el-select v-model="houseId" placeholder="请选择">
+          <el-option
+            v-for="item in buildingoptions"
+            :key="item.value"
+            :label="item.propertyName"
+            :value="item.id"
+          >
+          </el-option>
+        </el-select>
+      </div>
+    </div>
+    <div class="app-titel">
+      <div class="toptimeqhuan">
+        <div :class="{ tophove: TimetoAhoose == 0 }" @click="tabtimetap(0)">
+          今日
+        </div>
+        <div :class="{ tophove: TimetoAhoose == 1 }" @click="tabtimetap(1)">
+          昨日
+        </div>
+        <div :class="{ tophove: TimetoAhoose == 2 }" @click="tabtimetap(2)">
+          近一周
+        </div>
+      </div>
+      <div style="margin-left: 26px">
+        <el-date-picker
+          v-model="customtime"
+          @change="confirmtime()"
+          type="daterange"
+          range-separator="-"
+          :default-time="['00:00:00', '23:59:59']"
+          value-format="yyyy-MM-dd"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+        >
+        </el-date-picker>
+      </div>
+      <div style="margin-left: 26px" class="div-lab">
+        <div class="label">员工</div>
+        <el-select v-model="value" placeholder="请选择" class="div-inp">
+          <el-option
+            v-for="item in options"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          >
+          </el-option>
+        </el-select>
+      </div>
+      <div style="margin-left: 26px" class="div-lab">
+        <div class="label">对比</div>
+        <el-select v-model="value" placeholder="请选择" class="div-inp">
+          <el-option
+            v-for="item in options"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          >
+          </el-option>
+        </el-select>
+      </div>
+    </div>
+
+    <!-- 表格 -->
+    <div class="cen-tab">
+      <div class="app-titel">
+        <div class="toptimeqhuan">
+          <div :class="{ tophove: tabFlag == 0 }" @click="tabFlagChange(0)">
+            销讲统计
+          </div>
+          <div :class="{ tophove: tabFlag == 1 }" @click="tabFlagChange(1)">
+            违禁统计
+          </div>
+        </div>
+      </div>
+      <el-table :data="tableData" stripe style="width: 100%">
+        <el-table-column prop="batchId" label="序号" align="center">
+        </el-table-column>
+        <el-table-column prop="name" label="顾问" align="center">
+        </el-table-column>
+        <el-table-column prop="name" label="归属团队" align="center">
+        </el-table-column>
+        <el-table-column
+          prop="name"
+          v-if="tabFlag == 0"
+          label="设备在线天数"
+          align="center"
+        >
+        </el-table-column>
+        <el-table-column prop="name" label="接待量" align="center">
+        </el-table-column>
+        <el-table-column
+          v-if="tabFlag == 1"
+          prop="realityEquipmentCount"
+          label="违禁次数"
+          align="center"
+        >
+        </el-table-column>
+        <el-table-column
+          v-if="tabFlag == 1"
+          prop="receivableEquipmentCount"
+          label="违禁占比"
+          align="center"
+        >
+        </el-table-column>
+        <el-table-column
+          v-if="tabFlag == 0"
+          prop="realityEquipmentCount"
+          label="接待时长"
+          align="center"
+        >
+        </el-table-column>
+        <el-table-column
+          v-if="tabFlag == 1"
+          prop="acceptanceNum"
+          label="返现执行率"
+          align="center"
+        >
+        </el-table-column>
+        <el-table-column
+          v-if="tabFlag == 1"
+          prop="acceptanceNum"
+          label="过度保证执行率"
+          align="center"
+        >
+        </el-table-column>
+        <el-table-column
+          prop="createTime"
+          v-if="tabFlag == 0"
+          label="品牌介绍执行率"
+          align="center"
+        >
+        </el-table-column>
+        <el-table-column
+          prop="createTime"
+          v-if="tabFlag == 0"
+          label="沙盘介绍执行率"
+          align="center"
+        >
+        </el-table-column>
+        <el-table-column prop="remark" label="...执行性率" align="center">
+        </el-table-column>
+        <el-table-column label="违禁执行率" align="center"> </el-table-column>
+      </el-table>
+      <div style="display: flex; justify-content: flex-end; margin-top: 10px">
+        <el-pagination
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page="currentPage4"
+          :page-sizes="[8, 16, 24, 32]"
+          :page-size="4"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="total"
+        >
+        </el-pagination>
+      </div>
+    </div>
+
+    <div class="app-box-san">
+      <div class="zuo">
+        <div class="title">
+          <div class="text1">接待量（TOP10）</div>
+        </div>
+        <div class="hejisan">
+          <div class="sanbox1" style="width: 35%">
+            <div class="text1-1">合计</div>
+            <div class="text1-2">1</div>
+          </div>
+          <div class="sanbox1" style="width: 40%">
+            <div class="text1-1">顾问</div>
+            <div class="text1-2">1</div>
+          </div>
+          <div class="sanbox1" style="width: 25%">
+            <div class="text1-1">人均接待量</div>
+            <div class="text1-2">1</div>
+          </div>
+        </div>
+        <div
+          style="overflow-y: auto; height: 350px; width: 94%; margin: 0 auto"
+        >
+          <div id="echar" style="height: 250px; width: 100%"></div>
+        </div>
+      </div>
+      <div class="you">
+        <div class="title">
+          <div class="text1">销讲执行率（TOP10）</div>
+          <div class="text2">
+            <el-select
+              style="width: 90%; margin: 0 auto"
+              v-model="value"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+        </div>
+        <div class="hejisan">
+          <div class="sanbox1" style="width: 35%">
+            <div class="text1-1">合计</div>
+            <div class="text1-2">1</div>
+          </div>
+          <div class="sanbox1" style="width: 40%">
+            <div class="text1-1">顾问</div>
+            <div class="text1-2">1</div>
+          </div>
+          <div class="sanbox1" style="width: 25%">
+            <div class="text1-1">人均接待量</div>
+            <div class="text1-2">1</div>
+          </div>
+        </div>
+        <div
+          style="overflow-y: auto; height: 350px; width: 94%; margin: 0 auto"
+        >
+          <div class="jinbox" v-for="(item, i) in ceratelist" :key="i">
+            <div class="jinboxtit">{{ item.name }}</div>
+            <div class="jinbox-box">
+              <div
+                class="boxbaifenbi"
+                :style="'width:' + item.avgZxl + '%;'"
+              ></div>
+            </div>
+            <div class="jinboxbott">{{ item.avgZxl }}%</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+export default {
+  data() {
+    return {
+      houseId: "",
+      buildingoptions: [],
+      TimetoAhoose: 2,
+      tabFlag: 1,
+      customtime: [],
+      tableData: [],
+      currentPage4: 1,
+      total: 20,
+      options: [
+        {
+          value: "1",
+          label: "排名",
+        },
+        {
+          value: "2",
+          label: "趋势",
+        },
+      ],
+      value: "1",
+      ceratelist: [
+        { name: "还是得", avgZxl: 80 },
+        { name: "大大奥德赛", avgZxl: 90 },
+        { name: "沙发和", avgZxl: 20 },
+        { name: "还是得", avgZxl: 10 },
+        { name: "还客户家客户是得", avgZxl: 80 },
+      ],
+    };
+  },
+  mounted() {
+    this.echarCreat();
+  },
+  methods: {
+    echarCreat() {
+      let myChart = echarts.init(document.getElementById("echar"));
+      let option = {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+        },
+        color: [
+          "#66AFF5",
+          "#FABD2B",
+          "#6F8EDC",
+          "#FFCF8F",
+          "#F98120",
+          "#1CC99E",
+          "#9474FB",
+          "#657292",
+          "#7A6A99",
+          "#BF5D52",
+          "#EE6666",
+          "#77B7E4",
+          "#E6A065",
+          "#9D5139",
+          "#C1AA88",
+          "#F87F7A",
+          "#F6CF74",
+          "#7F5506",
+          "#88BB9B",
+          "#6E99AA",
+          "#5789D0",
+        ],
+        legend: {},
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "value",
+          boundaryGap: [0, 0.01],
+        },
+        yAxis: {
+          type: "category",
+          data: ["Brazil", "Indonesia", "USA", "India", "China", "World"],
+        },
+        series: [
+          {
+            type: "bar",
+            data: [19325, 23438, 31000, 121594, 134141, 681807],
+          },
+        ],
+      };
+      myChart.setOption(option);
+    },
+    handleCurrentChange() {},
+    handleSizeChange() {},
+    //切换时间
+    tabtimetap(index) {
+      this.TimetoAhoose = index;
+    },
+    tabFlagChange(idx) {
+      this.tabFlag = idx;
+    },
+  },
+};
+</script>
+
+<style scoped="scoped" lang="scss" >
+.box-center {
+  width: 100%;
+  padding: 15px;
+  min-width: 1200px;
+  padding-bottom: 100px;
+}
+.cen-tab {
+  width: 100%;
+  padding: 15px;
+  background: #ffffff;
+  margin-top: 15px;
+}
+.tophove {
+  color: #ffffff;
+  background: #2671e2;
+}
+.app-titel {
+  width: 100%;
+  height: 70px;
+  background: #ffffff;
+  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04);
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  .titel-text {
+    height: 100%;
+    font-size: 18px;
+    font-weight: 600;
+    color: #32363d;
+    line-height: 70px;
+    margin-left: 30px;
+  }
+  .toptimeqhuan {
+    width: 190px;
+    height: 32px;
+    background: #ffffff;
+    border-radius: 4px;
+    border: 1px solid #e0e0e0;
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+    margin-left: 30px;
+    cursor: pointer;
+  }
+  .toptimeqhuan div {
+    flex: 1;
+    text-align: center;
+    line-height: 32px;
+    font-size: 16px;
+  }
+}
+
+.app-box-san {
+  width: 100%;
+  height: 400px;
+  display: flex;
+  margin-top: 15px;
+  .zuo {
+    flex: 1;
+    height: 100%;
+    margin-right: 15px;
+    background: #ffffff;
+    border-radius: 4px;
+    .title {
+      width: 100%;
+      height: 55px;
+      border-bottom: 1px solid #e0e0e0;
+      display: flex;
+      align-content: center;
+      .text1 {
+        flex: 2;
+        line-height: 55px;
+        text-indent: 20px;
+        font-weight: 500;
+        font-size: 16px;
+        color: #333333;
+      }
+      .text2 {
+        flex: 1;
+        height: 55px;
+        display: flex;
+        align-items: center;
+      }
+    }
+  }
+  .you {
+    height: 100%;
+    flex: 1;
+    background: #ffffff;
+    border-radius: 4px;
+    .title {
+      width: 100%;
+      height: 55px;
+      border-bottom: 1px solid #e0e0e0;
+      display: flex;
+      align-content: center;
+      .text1 {
+        flex: 2;
+        line-height: 55px;
+        text-indent: 20px;
+        font-weight: 500;
+        font-size: 16px;
+        color: #333333;
+      }
+      .text2 {
+        flex: 1;
+        height: 55px;
+        display: flex;
+        align-items: center;
+      }
+    }
+  }
+}
+
+.hejisan {
+  width: 92%;
+  margin: 0 auto;
+  display: flex;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  .text1-1 {
+    color: #666666;
+  }
+  .text1-2 {
+    color: #333333;
+    margin-top: 10px;
+  }
+}
+
+// 进度条
+.jinbox {
+  width: 100%;
+  height: 18px;
+  line-height: 18px;
+  display: flex;
+  font-size: 16px;
+  color: #2c3542;
+  margin-top: 10px;
+  .jinboxtit {
+    width: 14%;
+    height: 18px;
+    padding-right: 6px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+  .jinbox-box {
+    width: 75%;
+    height: 100%;
+    border-radius: 8px;
+    background: #f2f2f2;
+  }
+  .boxbaifenbi {
+    height: 100%;
+    background: #60d7a0;
+    border-radius: 8px;
+  }
+  .boxbaifenbi2 {
+    height: 100%;
+    background: #5b8ff9;
+  }
+  .jinboxbott {
+    width: 16%;
+    text-indent: 50px;
+  }
+}
+.div-lab {
+  display: flex;
+  margin: 5px;
+}
+.div-inp {
+  width: 200px;
+}
+.label {
+  font-size: 14px;
+  font-weight: 400;
+  color: #32363d;
+  line-height: 32px;
+  margin-left: 15px;
+  min-width: 40px;
+}
+</style>
diff --git a/src/views/Statistics/MentoringAbility.vue b/src/views/Statistics/MentoringAbility.vue
new file mode 100644
index 0000000..99bd8e0
--- /dev/null
+++ b/src/views/Statistics/MentoringAbility.vue
@@ -0,0 +1,478 @@
+<template>
+  <div class="box-center">
+    <!-- 头 -->
+    <div class="app-titel">
+      <div class="titel-text">
+        楼盘选择：
+        <el-select v-model="houseId" placeholder="请选择">
+          <el-option
+            v-for="item in buildingoptions"
+            :key="item.value"
+            :label="item.propertyName"
+            :value="item.id"
+          >
+          </el-option>
+        </el-select>
+      </div>
+    </div>
+    <div class="app-titel">
+      <div class="toptimeqhuan">
+        <div :class="{ tophove: TimetoAhoose == 0 }" @click="tabtimetap(0)">
+          今日
+        </div>
+        <div :class="{ tophove: TimetoAhoose == 1 }" @click="tabtimetap(1)">
+          昨日
+        </div>
+        <div :class="{ tophove: TimetoAhoose == 2 }" @click="tabtimetap(2)">
+          近一周
+        </div>
+      </div>
+      <div style="margin-left: 26px">
+        <el-date-picker
+          v-model="customtime"
+          @change="confirmtime()"
+          type="daterange"
+          range-separator="-"
+          :default-time="['00:00:00', '23:59:59']"
+          value-format="yyyy-MM-dd"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+        >
+        </el-date-picker>
+      </div>
+      <div style="margin-left: 26px" class="div-lab">
+        <div class="label">员工</div>
+        <el-select v-model="value" placeholder="请选择" class="div-inp">
+          <el-option
+            v-for="item in options"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          >
+          </el-option>
+        </el-select>
+      </div>
+      <div style="margin-left: 26px" class="div-lab">
+        <div class="label">对比</div>
+        <el-select v-model="value" placeholder="请选择" class="div-inp">
+          <el-option
+            v-for="item in options"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          >
+          </el-option>
+        </el-select>
+      </div>
+    </div>
+
+    <div class="app-box-san">
+      <div class="zuo">
+        <div class="title">
+          <div class="text1">接待量（TOP10）</div>
+        </div>
+        <div class="hejisan">
+          <div class="sanbox1" style="width: 35%">
+            <div class="text1-1">宋先锋</div>
+            <div class="text1-2">1</div>
+          </div>
+          <div class="sanbox1" style="width: 40%">
+            <div class="text1-1">案场平均</div>
+            <div class="text1-2">1</div>
+          </div>
+
+        </div>
+        <div
+          style="overflow-y: auto; height: 350px; width: 94%;  margin: 0 auto"
+        >
+        <div id="echar" style="height:300px;"></div>
+        </div>
+      </div>
+      <div class="zuo">
+        <div class="title">
+          <div class="text1">销讲能雷达图（TOP10）</div>
+        </div>
+        <div class="hejisan">
+          <div class="sanbox1" style="width: 35%">
+            <div class="text1-1">合计</div>
+            <div class="text1-2">1</div>
+          </div>
+          <div class="sanbox1" style="width: 40%">
+            <div class="text1-1">顾问</div>
+            <div class="text1-2">1</div>
+          </div>
+        </div>
+        <div
+          style="overflow-y: auto; height: 350px; width: 94%; margin: 0 auto"
+        >
+        <div id="echar1" style="height:250px;"></div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 表格 -->
+    <div class="cen-tab">
+      <div class="app-titel">
+        <div class="toptimeqhuan">
+          <div :class="{ tophove: tabFlag == 0 }" @click="tabFlagChange(0)">
+            销讲统计
+          </div>
+          <div :class="{ tophove: tabFlag == 1 }" @click="tabFlagChange(1)">
+            违禁统计
+          </div>
+        </div>
+      </div>
+      <el-table :data="tableData" stripe style="width: 100%">
+        <el-table-column prop="batchId" label="日期" align="center">
+        </el-table-column>
+        <el-table-column prop="name" label="接待量" align="center">
+        </el-table-column>
+        <el-table-column
+          v-if="tabFlag == 1"
+          prop="realityEquipmentCount"
+          label="违禁次数"
+          align="center"
+        >
+        </el-table-column>
+        <el-table-column
+          v-if="tabFlag == 1"
+          prop="receivableEquipmentCount"
+          label="违禁占比"
+          align="center"
+        >
+        </el-table-column>
+        <el-table-column
+          v-if="tabFlag == 0"
+          prop="realityEquipmentCount"
+          label="接待时长"
+          align="center"
+        >
+        </el-table-column>
+        <el-table-column prop="acceptanceNum" label="返现执行率" align="center">
+        </el-table-column>
+        <el-table-column
+          prop="createTime"
+          label="过度保证执行率"
+          align="center"
+        >
+        </el-table-column>
+
+        <el-table-column prop="remark" label="...执行性率" align="center">
+        </el-table-column>
+        <el-table-column label="违禁执行率" align="center"> </el-table-column>
+      </el-table>
+      <div style="display: flex; justify-content: flex-end; margin-top: 10px">
+        <el-pagination
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page="currentPage4"
+          :page-sizes="[8, 16, 24, 32]"
+          :page-size="4"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="total"
+        >
+        </el-pagination>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+export default {
+  data() {
+    return {
+      houseId: "",
+      buildingoptions: [],
+      TimetoAhoose: 2,
+      tabFlag: 1,
+      customtime: [],
+      tableData: [],
+      currentPage4: 1,
+      total: 20,
+      options: [
+        {
+          value: "1",
+          label: "排名",
+        },
+        {
+          value: "2",
+          label: "趋势",
+        },
+      ],
+      echarList: {},
+      value: "1",
+      ceratelist: [
+        { name: "还是得", avgZxl: 80 },
+        { name: "大大奥德赛", avgZxl: 90 },
+        { name: "沙发和", avgZxl: 20 },
+        { name: "还是得", avgZxl: 10 },
+        { name: "还客户家客户是得", avgZxl: 80 },
+      ],
+    };
+  },
+  mounted() {
+    this.echarCreat();
+    this.creatRadar();
+  },
+  methods: {
+    echarCreat() {
+      let myChart = echarts.init(document.getElementById("echar"));
+      let option = {
+        xAxis: {
+          type: "category",
+          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+        },
+        yAxis: {
+          type: "value",
+        },
+        legend: {
+          data: ["line", "line1"],
+        },
+        series: [
+          {
+            data: [150, 230, 224, 218, 135, 147, 260],
+            type: "line",
+            name: "line",
+          },
+          {
+            data: [10, 20, 24, 28, 13, 17, 20],
+            type: "line",
+            name: "line1",
+          },
+        ],
+      };
+       myChart.setOption(option);
+    },
+    creatRadar() {
+      let myChart = echarts.init(document.getElementById("echar1"));
+      let option = {
+        legend: {
+          data: ["Allocate", "Actua"],
+        },
+        radar: {
+          // shape: 'circle',
+          indicator: [
+            { name: "Sales", max: 6500 },
+            { name: "Administration", max: 16000 },
+            { name: "Information Technology", max: 30000 },
+            { name: "Customer Support", max: 38000 },
+            { name: "Development", max: 52000 },
+            { name: "Marketing", max: 25000 },
+          ],
+        },
+        series: [
+          {
+            name: "Budget vs spending",
+            type: "radar",
+            data: [
+              {
+                value: [4200, 3000, 20000, 35000, 50000, 18000],
+                name: "Allocate",
+              },
+              {
+                value: [5000, 14000, 28000, 26000, 42000, 21000],
+                name: "Actua",
+              },
+            ],
+          },
+        ],
+      };
+       myChart.setOption(option);
+    },
+    handleCurrentChange() {},
+    handleSizeChange() {},
+    //切换时间
+    tabtimetap(index) {
+      this.TimetoAhoose = index;
+    },
+    tabFlagChange(idx) {
+      this.tabFlag = idx;
+    },
+  },
+};
+</script>
+
+<style scoped="scoped" lang="scss" >
+.box-center {
+  width: 100%;
+  padding: 15px;
+  min-width: 1200px;
+  padding-bottom: 100px;
+}
+.cen-tab {
+  width: 100%;
+  padding: 15px;
+  background: #ffffff;
+  margin-top: 15px;
+}
+.tophove {
+  color: #ffffff;
+  background: #2671e2;
+}
+.app-titel {
+  width: 100%;
+  height: 70px;
+  background: #ffffff;
+  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04);
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  .titel-text {
+    height: 100%;
+    font-size: 18px;
+    font-weight: 600;
+    color: #32363d;
+    line-height: 70px;
+    margin-left: 30px;
+  }
+  .toptimeqhuan {
+    width: 190px;
+    height: 32px;
+    background: #ffffff;
+    border-radius: 4px;
+    border: 1px solid #e0e0e0;
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+    margin-left: 30px;
+    cursor: pointer;
+  }
+  .toptimeqhuan div {
+    flex: 1;
+    text-align: center;
+    line-height: 32px;
+    font-size: 16px;
+  }
+}
+
+.app-box-san {
+  width: 100%;
+  height: 400px;
+  display: flex;
+  margin-top: 15px;
+  .zuo {
+    flex: 1;
+    height: 100%;
+    margin-right: 15px;
+    background: #ffffff;
+    border-radius: 4px;
+    .title {
+      width: 100%;
+      height: 55px;
+      border-bottom: 1px solid #e0e0e0;
+      display: flex;
+      align-content: center;
+      .text1 {
+        flex: 2;
+        line-height: 55px;
+        text-indent: 20px;
+        font-weight: 500;
+        font-size: 16px;
+        color: #333333;
+      }
+      .text2 {
+        flex: 1;
+        height: 55px;
+        display: flex;
+        align-items: center;
+      }
+    }
+  }
+  .you {
+    height: 100%;
+    flex: 1;
+    background: #ffffff;
+    border-radius: 4px;
+    .title {
+      width: 100%;
+      height: 55px;
+      border-bottom: 1px solid #e0e0e0;
+      display: flex;
+      align-content: center;
+      .text1 {
+        flex: 2;
+        line-height: 55px;
+        text-indent: 20px;
+        font-weight: 500;
+        font-size: 16px;
+        color: #333333;
+      }
+      .text2 {
+        flex: 1;
+        height: 55px;
+        display: flex;
+        align-items: center;
+      }
+    }
+  }
+}
+
+.hejisan {
+  width: 92%;
+  margin: 0 auto;
+  display: flex;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  .text1-1 {
+    color: #666666;
+  }
+  .text1-2 {
+    color: #333333;
+    margin-top: 10px;
+  }
+}
+
+// 进度条
+.jinbox {
+  width: 100%;
+  height: 18px;
+  line-height: 18px;
+  display: flex;
+  font-size: 16px;
+  color: #2c3542;
+  margin-top: 10px;
+  .jinboxtit {
+    width: 14%;
+    height: 18px;
+    padding-right: 6px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+  .jinbox-box {
+    width: 75%;
+    height: 100%;
+    border-radius: 8px;
+    background: #f2f2f2;
+  }
+  .boxbaifenbi {
+    height: 100%;
+    background: #60d7a0;
+    border-radius: 8px;
+  }
+  .boxbaifenbi2 {
+    height: 100%;
+    background: #5b8ff9;
+  }
+  .jinboxbott {
+    width: 16%;
+    text-indent: 50px;
+  }
+}
+.div-lab {
+  display: flex;
+  margin: 5px;
+}
+.div-inp {
+  width: 200px;
+}
+.label {
+  font-size: 14px;
+  font-weight: 400;
+  color: #32363d;
+  line-height: 32px;
+  margin-left: 15px;
+  min-width: 40px;
+}
+</style>