From d4bf5d995b79bf2d79c6e5be0d420f2cbb4a846c Mon Sep 17 00:00:00 2001
From: lancer <1905818361@qq.com>
Date: Wed, 3 Nov 2021 19:28:35 +0800
Subject: [PATCH] init

---
 src/api/modules/api.js                |  16 +
 src/views/Statistics/dataScreeSys.vue | 806 ++++++++++++++++++++++++++
 2 files changed, 822 insertions(+)
 create mode 100644 src/views/Statistics/dataScreeSys.vue

diff --git a/src/api/modules/api.js b/src/api/modules/api.js
index 6f1b61d..e232bda 100644
--- a/src/api/modules/api.js
+++ b/src/api/modules/api.js
@@ -837,3 +837,19 @@ export function editRoleAndDept(data) {
     data
   })
 }
+// 获取数据总览统计数据
+export function dataOverViewWithSystem(data) {
+  return request({
+    url: 'autoSR/cusStageStatistics/dataOverViewWithSystem',
+    method:'post',
+    data
+  })
+}
+// 获取数据总览统计数据
+export function dataOverviewWithSystemWithDay(data) {
+  return request({
+    url: 'autoSR/cusStageStatistics/dataOverviewWithSystemWithDay',
+    method:'post',
+    data
+  })
+}
diff --git a/src/views/Statistics/dataScreeSys.vue b/src/views/Statistics/dataScreeSys.vue
new file mode 100644
index 0000000..5d834c0
--- /dev/null
+++ b/src/views/Statistics/dataScreeSys.vue
@@ -0,0 +1,806 @@
+<template>
+  <div class="box-center">
+    <!-- 头 -->
+    <div class="app-top">
+      <div class="app-titel" style="margin-left: 15px">
+        <el-select
+          v-model="selValue"
+          @change="selChange"
+          style="width: 100px"
+          placeholder="请选择"
+        >
+          <el-option
+            v-for="item in options"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          >
+          </el-option>
+        </el-select>
+        <div style="margin-left: 26px" v-if="selValue == 1">
+          <el-select
+            v-model="choicValue"
+            @change="valuechange"
+            placeholder="默认为全部"
+            clearable
+          >
+            <el-option
+              v-for="item in houseList"
+              :key="item.id"
+              :label="item.propertyName"
+              :value="item.id"
+            >
+            </el-option>
+          </el-select>
+        </div>
+        <div style="margin-left: 26px" v-else>
+          <el-select
+            v-model="choicValue"
+            @change="valuechange"
+            clearable
+            placeholder="默认为全部"
+          >
+            <el-option
+              v-for="item in houseList"
+              :key="item.id"
+              :label="item.agentName"
+              :value="item.id"
+            >
+            </el-option>
+          </el-select>
+        </div>
+      </div>
+      <!-- <div class="app-titel">
+        <div class="titel-text">接待时间</div>
+        <div class="toptimeqhuan">
+          <div :class="{ tophove: timeType == 4 }" @click="tabtimetap(4)">近7天</div>
+          <div :class="{ tophove: timeType == 5 }" @click="tabtimetap(5)"> 近15天 </div>
+          <div :class="{ tophove: timeType == 6 }" @click="tabtimetap(6)">  近30天 </div>
+        </div>
+        <div style="margin-left: 26px">
+          <el-date-picker
+            @change="confirmtime()"
+            v-model="customtime"
+            type="daterange"
+            range-separator="-"
+            :default-time="['00:00:00', '23:59:59']"
+            value-format="yyyy-MM-dd"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            :picker-options="pickerOptions"
+          >
+          </el-date-picker>
+        </div>
+      </div> -->
+    </div>
+
+    <!-- 二 -->
+    <div class="app-box-er">
+      <div class="container">
+        <div class="grid-content">
+          <div class="text1">代理商数</div>
+          <div class="text2">{{ firstTab.agentQuantity || 0 }}</div>
+        </div>
+        <div class="grid-content">
+          <div class="text1">服务器内代理商数</div>
+          <div class="text2">{{ firstTab.agentQofEnough || 0 }}</div>
+        </div>
+        <div class="grid-content">
+          <div class="text1">过期代理商数</div>
+          <div class="text2">
+            {{ firstTab.agentQofUnenough || 0 }}
+          </div>
+        </div>
+        <div class="grid-content">
+          <div class="text1">楼盘总数</div>
+          <div class="text2">{{ firstTab.houseQuantity || 0 }}</div>
+        </div>
+        <div class="grid-content">
+          <div class="text1">服务器内楼盘总数</div>
+          <div class="text2">{{ firstTab.houseQofEnough || 0 }}</div>
+        </div>
+        <div class="grid-content">
+          <div class="text1">过期楼盘数</div>
+          <div class="text2">{{ firstTab.houseQofUnenough || 0 }}</div>
+        </div>
+        <div class="grid-content">
+          <div class="text1">设备总数</div>
+          <div class="text2">{{ firstTab.equipmentQuantity || 0 }}</div>
+        </div>
+        <div class="grid-content">
+          <div class="text1">已售设备数</div>
+          <div class="text2">{{ firstTab.equipmentQuantityWithSold || 0 }}</div>
+        </div>
+        <div class="grid-content">
+          <div class="text1">待售设备数</div>
+          <div class="text2">
+            {{ firstTab.equipmentQuantityWithNotSold || 0 }}
+          </div>
+        </div>
+        <div class="grid-content">
+          <div class="text1">待验收设备数</div>
+          <div class="text2">
+            {{ firstTab.equipmentQuantityWithNotAccept || 0 }}
+          </div>
+        </div>
+        <div class="grid-content">
+          <div class="text1">已报废设备数</div>
+          <div class="text2">{{ firstTab.damageEquipmentQuantity || 0 }}</div>
+        </div>
+        <div class="grid-content">
+          <div class="text1">正常设备数</div>
+          <div class="text2">{{ firstTab.normalequipmentQuantity || 0 }}</div>
+        </div>
+        <div class="grid-content">
+          <div class="text1">用户数</div>
+          <div class="text2">{{ firstTab.userQuantity || 0 }}</div>
+        </div>
+        <div class="grid-content">
+          <div class="text1">顾问数</div>
+          <div class="text2">{{ firstTab.accountQuantity || 0 }}</div>
+        </div>
+        <div class="grid-content">
+          <div class="text1">接待量</div>
+          <div class="text2">{{ firstTab.receptionQuantity || 0 }}</div>
+        </div>
+        <div class="grid-content">
+          <div class="text1">接待客户</div>
+          <div class="text2">
+            {{ firstTab.customerQuantity || 0 }}
+          </div>
+        </div>
+        <div class="grid-content">
+          <div class="text1">接待时长(小时)</div>
+          <div class="text2">
+            {{ Math.floor(firstTab.receptionTime / 60) || 0 }}
+          </div>
+        </div>
+        <div class="grid-content">
+          <div class="text1">平均接待时长(分钟)</div>
+          <div class="text2">{{ firstTab.receptionTimeWithAvg || 0 }}</div>
+        </div>
+      </div>
+      <!-- <div id="main"></div> -->
+    </div>
+
+    <div class="app-box-er">
+      <div style="line-height: 40px; font-weight: bold">今日实时状况</div>
+      <div class="container">
+        <div class="grid-content" @click="secondChange('1')">
+          <div class="text1" :class="{ tophovese: secindex == 1 }">接待量</div>
+          <div class="text2" :class="{ tophovese: secindex == 1 }">
+            {{ secondTab.receptionQuantity || 0 }}
+          </div>
+        </div>
+        <div class="grid-content" @click="secondChange('2')">
+          <div class="text1" :class="{ tophovese: secindex == 2 }">
+            活跃用户
+          </div>
+          <div class="text2" :class="{ tophovese: secindex == 2 }">
+            {{ secondTab.activeUserQuantity || 0 }}
+          </div>
+        </div>
+        <div class="grid-content" @click="secondChange('3')">
+          <div class="text1" :class="{ tophovese: secindex == 3 }">
+            活跃设备
+          </div>
+          <div class="text2" :class="{ tophovese: secindex == 3 }">
+            {{ secondTab.activeEquipmentQuantity || 0 }}
+          </div>
+        </div>
+      </div>
+      <!-- <div id="main"></div> -->
+    </div>
+
+    <div class="app-box-er">
+      <div class="app_titile" style="margin-bottom: 10px">
+        <div style="line-height: 30px; font-weight: bold">整体看板</div>
+        <div>
+          <div class="app-titel">
+            <div class="toptimeqhuan">
+              <div :class="{ tophove: timeType == 4 }" @click="tabtimetap(4)">
+                近7天
+              </div>
+              <div :class="{ tophove: timeType == 5 }" @click="tabtimetap(5)">
+                近15天
+              </div>
+              <div :class="{ tophove: timeType == 6 }" @click="tabtimetap(6)">
+                近30天
+              </div>
+            </div>
+            <div style="margin-left: 26px">
+              <el-date-picker
+                @change="confirmtime()"
+                v-model="customtime"
+                type="daterange"
+                range-separator="-"
+                :default-time="['00:00:00', '23:59:59']"
+                value-format="yyyy-MM-dd"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+                :picker-options="pickerOptions"
+              >
+              </el-date-picker>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="container">
+        <div class="grid-content" @click="Overviewxlick('1')">
+          <div class="text1" :class="{ tophovese: cardindex == 1 }">
+            购买服务楼盘数
+          </div>
+          <div class="text2" :class="{ tophovese: cardindex == 1 }">
+            {{ thirdTab.receptionCount || 0 }}
+          </div>
+        </div>
+        <div class="grid-content" @click="Overviewxlick('2')">
+          <div class="text1" :class="{ tophovese: cardindex == 2 }">
+            服务期内楼盘数
+          </div>
+          <div class="text2" :class="{ tophovese: cardindex == 2 }">
+            {{ thirdTab.activeCustomer || 0 }}
+          </div>
+        </div>
+        <div class="grid-content" @click="Overviewxlick('3')">
+          <div class="text1" :class="{ tophovese: cardindex == 3 }">
+            销售设备数
+          </div>
+          <div class="text2" :class="{ tophovese: cardindex == 3 }">
+            {{ thirdTab.avgDuration || 0 }}
+          </div>
+        </div>
+        <div class="grid-content" @click="Overviewxlick('4')">
+          <div class="text1" :class="{ tophovese: cardindex == 4 }">
+            活跃设备数
+          </div>
+          <div class="text2" :class="{ tophovese: cardindex == 4 }">
+            {{ thirdTab.fraction || 0 }}
+          </div>
+        </div>
+        <div class="grid-content" @click="Overviewxlick('5')">
+          <div class="text1" :class="{ tophovese: cardindex == 5 }">
+            新增用户数
+          </div>
+          <div class="text2" :class="{ tophovese: cardindex == 5 }">
+            {{ thirdTab.prohibitedCustomer || 0 }}
+          </div>
+        </div>
+        <div class="grid-content" @click="Overviewxlick('5')">
+          <div class="text1" :class="{ tophovese: cardindex == 6 }">接待量</div>
+          <div class="text2" :class="{ tophovese: cardindex == 6 }">
+            {{ thirdTab.prohibitedCustomer || 0 }}
+          </div>
+        </div>
+        <div class="grid-content" @click="Overviewxlick('5')">
+          <div class="text1" :class="{ tophovese: cardindex == 7 }">
+            平均接待时长
+          </div>
+          <div class="text2" :class="{ tophovese: cardindex == 7 }">
+            {{ thirdTab.prohibitedCustomer || 0 }}
+          </div>
+        </div>
+        <div class="grid-content" @click="Overviewxlick('5')">
+          <div class="text1" :class="{ tophovese: cardindex == 8 }">
+            活跃设备数
+          </div>
+          <div class="text2" :class="{ tophovese: cardindex == 8 }">
+            {{ thirdTab.prohibitedCustomer || 0 }}
+          </div>
+        </div>
+      </div>
+
+      <div id="main"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+export default {
+  data() {
+    return {
+      pickerOptions: {
+        disabledDate(time) {
+          //根据当前日期 --- 禁止选中之后的日期
+          return time.getTime() > Date.now();
+        },
+      },
+      firstTab: {},
+      secondTab: {},
+      thirdTab: {},
+      selValue: "0",
+      choicValue: "",
+      houseList: [],
+      secindex: "1",
+      timeType: 4,
+      customtime: [],
+      cardindex: "1",
+      options: [
+        {
+          label: "代理商",
+          value: "0",
+        },
+        {
+          label: "公司",
+          value: "1",
+        },
+      ],
+    };
+  },
+  mounted() {
+    this.getList();
+    this.tabtimetap(4);
+  },
+  methods: {
+    valuechange() {
+      // console.log(this.choicValue);
+      this.dataOverViewWithSystem();
+      this.dataOverviewWithSystemWithDay()
+    },
+    // 当选择的代理商或者楼盘切换时
+    selChange() {
+      this.choicValue = "";
+      this.getList();
+    },
+    // 获取下拉框数据
+    getList() {
+      console.log(this.selValue);
+      // 当为楼盘选择时
+      if (this.selValue == 1) {
+        this.$api.api
+          .findHouseByUser({
+            orgType: localStorage.getItem("orgType"),
+          })
+          .then((res) => {
+            this.houseList = res.data;
+            this.dataOverViewWithSystem();
+            this.dataOverviewWithSystemWithDay()
+          });
+      } else {
+        this.$api.api
+          .findMyAgent({
+            orgType: localStorage.getItem("orgType"),
+          })
+          .then((res) => {
+            this.houseList = res.data;
+            this.dataOverViewWithSystem();
+            this.dataOverviewWithSystemWithDay()
+          });
+      }
+    },
+    dataOverviewWithSystemWithDay() {
+      this.$api.api
+        .dataOverviewWithSystemWithDay({
+          agentId: this.selValue == 0 ? this.choicValue : null,
+          orgCode: this.selValue == 1 ? this.choicValue : null,
+        })
+        .then((res) => {
+          console.log(res);
+          // this.firstTab = res.data;
+          // 对数据进行处理
+          // 将数据给一个指定值然后设置一个方法还进行tab切换的时候调用
+          this.secondTab=res.data
+          // 调用方法
+          this.getChars1(1)
+        });
+    },
+    // echars生成
+    getChars1(idx){
+      console.log(idx);
+      let arr=[]
+      let arr1=[]
+      let Strname=['昨日','今日']
+      let timeDate=[]
+      // 判断是第几个然后对数据进行渲染
+      // 先处理时间
+      // let str=''
+      // str.substring
+      this.secondTab.yesterdayReceptionList.map(item=>{
+        timeDate.push(item.time.substring(11,16))
+              // console.log(timeDate);
+            if(idx==1){
+              // 接待量
+
+            }
+            if(idx==2){
+              // 活跃用户
+            }
+            if(idx==3){
+              // 活跃设备
+            }
+      })
+      // this.SwitchCARDS(arr,arr1, timeDate, Strname) 
+    },
+    // 获取总览数据
+    dataOverViewWithSystem() {
+      this.$api.api
+        .dataOverViewWithSystem({
+          agentId: this.selValue == 0 ? this.choicValue : null,
+          orgCode: this.selValue == 1 ? this.choicValue : null,
+        })
+        .then((res) => {
+          // console.log(res);
+          this.firstTab = res.data;
+        });
+    },
+    Overviewxlick(i) {
+      this.cardindex = i;
+    },
+    secondChange(i) {
+      this.secindex = i;
+    },
+    confirmtime(e) {
+      this.timeType = "-1";
+      if (!e) return;
+      console.log(e);
+    },
+    tabtimetap(i) {
+      this.timeType = i;
+      // this.getTableList()
+      this.checked = false;
+      this.selectTime = "";
+      this.selectTime1 = "";
+      //给时间选择器赋值
+      let num = 24 * 3600 * 1000;
+      //	获取当前时间戳转换为日期格式
+      if (this.timeType == 4) {
+        num = 24 * 3600 * 1000 * 6;
+      }
+      if (this.timeType == 5) {
+        num = 24 * 3600 * 1000 * 14;
+      }
+      if (this.timeType == 6) {
+        num = 24 * 3600 * 1000 * 29;
+      }
+
+      this.customtime = [
+        this.timestampToTime(new Date().getTime() - num),
+        this.timestampToTime(new Date().getTime()),
+      ];
+
+      // this.getTableList();
+      // this.getdetail();
+    },
+    timestampToTime(timestamp) {
+      var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
+      // var  date = new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
+
+      var yyyy = date.getFullYear() + "-";
+
+      var MM =
+        (date.getMonth() + 1 < 10
+          ? "0" + (date.getMonth() + 1)
+          : date.getMonth() + 1) + "-";
+
+      // var dd = date.getDate() + ' ';
+      var dd =
+        (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
+
+      // var HH = date.getHours() + ':';
+      // var HH = (date.getHours() < 10 ? '0'+(date.getHours()) : date.getHours()) + ':';
+      //
+      // // var mm = date.getMinutes() + ':';
+      // var mm = (date.getMinutes() < 10 ? '0'+(date.getMinutes()) : date.getMinutes()) + ':';
+      //
+      // // var ss = date.getSeconds();
+      // var ss = (date.getSeconds() < 10 ? '0'+(date.getSeconds()) : date.getSeconds());
+
+      // return yyyy+MM+dd+HH+mm+ss;
+      return yyyy + MM + dd;
+    },
+    //卡片下折线图
+    SwitchCARDS(arr,arr1, timeDate, Strname) {
+      var chartDom = document.getElementById("main");
+      var myChart = echarts.init(chartDom);
+      var option;
+
+      option = {
+        tooltip: {
+          trigger: "axis",
+        },
+        legend: {
+          data: Strname,
+          bottom: "10",
+        },
+        grid: {
+          left: 10,
+          right: 10,
+
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: timeDate,
+          axisLabel: {
+            //重点在这一块，其余可以忽略
+            textStyle: {
+              color: "#212121", //更改坐标轴文字颜色
+            },
+          },
+          axisLine: {
+            lineStyle: {
+              type: "solid",
+              color: "#DDE1EE", //x线的颜色
+              width: "1", //坐标线的宽度
+            },
+          },
+        },
+        yAxis: {
+          type: "value",
+          splitNumber: 4,
+          axisLabel: {
+            //重点在这一块，其余可以忽略
+            textStyle: {
+              color: "#212121", //更改坐标轴文字颜色
+            },
+          },
+          axisLine: {
+            lineStyle: {
+              ype: "solid",
+              color: "#DDE1EE", //x线的颜色
+              width: "1", //坐标线的宽度
+            },
+          },
+          splitLine: {
+            lineStyle: {
+              type: "dashed", // y轴分割线类型
+            },
+          },
+          axisTick: {
+            //y轴刻度线
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: Strname[0],
+            data: arr,
+            type: "line",
+            smooth: true,
+          },
+          {
+            name: Strname[1],
+            data: arr1,
+            type: "line",
+            smooth: true,
+          },
+        ],
+      };
+      option && myChart.setOption(option);
+      window.addEventListener("resize", () => {
+        myChart.resize();
+      });
+    },
+  },
+};
+</script>
+
+<style scoped="scoped" lang="scss" >
+.box-center {
+  width: 100%;
+  padding: 15px;
+  min-width: 1200px;
+  padding-bottom: 100px;
+}
+
+.container {
+  display: grid;
+  grid-template-columns: repeat(6, 16%);
+  grid-column-gap: 12px;
+  grid-row-gap: 18px;
+}
+
+// 进度条
+.jinbox {
+  width: 100%;
+  height: 18px;
+  line-height: 18px;
+  display: flex;
+  font-size: 16px;
+  color: #2c3542;
+  margin-top: 20px;
+  .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: 20px;
+  }
+}
+
+#main {
+  width: 100%;
+  height: 380px;
+}
+#Brokenline1 {
+  width: 100%;
+  height: 350px;
+}
+#Brokenline2 {
+  width: 100%;
+  height: 350px;
+}
+#Pinspeak1 {
+  width: 100%;
+  height: 350px;
+}
+#Pinspeak2 {
+  width: 100%;
+  height: 350px;
+}
+.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;
+      }
+    }
+  }
+}
+
+.app-box-er {
+  width: 100%;
+  background: #ffffff;
+  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04);
+  border-radius: 4px;
+  margin-top: 15px;
+  padding: 15px;
+}
+.grid-content {
+  background: #ffffff;
+  height: 90px;
+  border: 1px solid #e0e0e0;
+  .text1 {
+    height: 16px;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 16px;
+    text-indent: 20px;
+    margin-top: 20px;
+  }
+  .text2 {
+    height: 32px;
+    font-size: 32px;
+    font-weight: normal;
+    line-height: 32px;
+    text-indent: 20px;
+    margin-top: 10px;
+  }
+}
+
+.tophove {
+  color: #ffffff;
+  background: #2671e2;
+}
+.tophovese {
+  color: #2671e2;
+}
+.app-top {
+  width: 100%;
+  background: #ffffff;
+  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04);
+  border-radius: 4px;
+  padding-top: 15px;
+  padding-bottom: 15px;
+}
+.app-titel {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  .titel-text {
+    height: 100%;
+    font-size: 16px;
+    font-weight: 600;
+    color: #32363d;
+    text-indent: 30px;
+  }
+  .toptimeqhuan {
+    width: 190px;
+    height: 32px;
+    background: #ffffff;
+    border-radius: 4px;
+    border: 1px solid #e0e0e0;
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+    margin-left: 20px;
+    cursor: pointer;
+  }
+  .toptimeqhuan div {
+    flex: 1;
+    text-align: center;
+    line-height: 32px;
+    font-size: 14px;
+  }
+}
+.hejisan {
+  width: 92%;
+  margin: 0 auto;
+  display: flex;
+  margin-top: 15px;
+  .text1-1 {
+    color: #666666;
+  }
+  .text1-2 {
+    color: #333333;
+    margin-top: 10px;
+  }
+}
+.app_titile {
+  display: flex;
+  justify-content: space-between;
+}
+</style>