feat: 提交代码

src/router/admin.js

@@ -16,7 +16,7 @@ export default [
         path: 'overdueFile',
         name: 'overdueFile',
         component: () => import('../view/admin/12345/overdueFile/index'),
-      },{
+      }, {
         path: 'dissatisfiedStatistics',
         name: 'dissatisfiedStatistics',
         component: () => import('../view/admin/12345/dissatisfiedStatistics/index'),
@@ -54,7 +54,7 @@ export default [
         path: 'consultMap',
         name: 'consultMap',
         component: () => import('../view/admin/serviceCenter/consultMap.vue'),
-      },{
+      }, {
         path: 'realTimeMonitoring',
         name: 'realTimeMonitoring',
         component: () => import('../view/admin/publicOversight/realTimeMonitoring'),
@@ -62,7 +62,7 @@ export default [
         path: 'transactionClassification',
         name: 'transactionClassification',
         component: () => import('../view/admin/publicOversight/transactionClassification'),
-      },{
+      }, {
         path: 'turnoverAmountPieChart',
         name: 'turnoverAmountPieChart',
         component: () => import('../view/admin/publicOversight/turnoverAmountPieChart'),
@@ -71,7 +71,7 @@ export default [
         path: 'turnoverAmountPieTotalAmount',
         name: 'turnoverAmountPieTotalAmount',
         component: () => import('../view/admin/publicOversight/turnoverAmountPieTotalAmount'),
-      } ,{
+      }, {
         path: 'cityResourcesTurnover',
         name: 'cityResourcesTurnover',
         component: () => import('../view/admin/publicOversight/CityResourcesTurnover'),
@@ -89,11 +89,11 @@ export default [
         path: 'publicMainIndex',
         name: 'publicMainIndex',
         component: () => import('../view/admin/publicOversight/mainIndex'),
-      },{
+      }, {
         path: 'serviceMainIndex',
         name: 'serviceMainIndex',
         component: () => import('../view/admin/serviceCenter/mainIndex'),
-      },{
+      }, {
         path: 'districHandle',
         name: 'districHandle',
         component: () => import('../view/admin/serviceCenter/DistricHandle'),

src/router/client.js

@@ -12,7 +12,7 @@ export default [
   {
     path: '/publicOverSight',
     name: 'publicOverSight',
-    component: () => import('../view/client/publicOversight/index'),
+    component: () => import('../view/client/publicOversight/index.vue'),
   },
   {
     path:'/12345',

src/tools/servers.js

@@ -63,6 +63,26 @@ export class BaseApi {
   }
 
 
+  connectionPost(method = 'POST', url, body, fileList) {
+    this.getStatusToken();
+    if (typeof body !== 'object') body = {};
+    method = method.toLocaleLowerCase();
+    if (fileList && (fileList instanceof Array)) {
+      let headers = {'Content-Type': 'multipart/form-data'};
+      const param = new window.FormData();
+      for (const key in body) {
+        if (Object.prototype.hasOwnProperty.call(body, key)) param.append(key, body[key]);
+      }
+      fileList.forEach(file => param.append('files', file));
+      return Promise.resolve(this.servers[method](url, param, {headers}))
+    }
+    if (method === 'post'){
+      url = `${url}?${qs.stringify(body)}`;
+      body = {}
+    }
+    return Promise.resolve(this.servers[method](url, body))
+  }
+
   //登录连接后台
   // connectionPost(method = 'POST', url, body) {
   //   method = method.toLocaleLowerCase();

src/view/client/publicOversight/index.js

@@ -0,0 +1,11 @@
+import {server} from '../../../tools/servers';
+
+export class publicResourceApi {
+  static getYearData(data) {
+    return server.connection('GET', '/api/resource/selectYear')
+  }
+
+  static getTotalData(data) {
+    return server.connectionPost('POST', '/api/resource/selectResourceByYear', data)
+  }
+}

src/view/client/publicOversight/index.vue

@@ -4,64 +4,36 @@
     <div class="header">
       <div class="title">巴中市公共资源交易可视化分析系统</div>
     </div>
-    <div class="back" @click="back"></div>
-    <div class="time">{{date}}</div>
+    <button class="back" @click="back"></button>
+    <div class="year">
+      交易年度选择:
+      <el-select v-model="selectedValue" placeholder="请选择" change="change">
+        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+        </el-option>
+      </el-select>
+    </div>
+    <div class="time">{{ date }}</div>
     <div class="main">
-      <div style="width: 26.6%; height: 100%; float: left;display: inline; margin-right: 1.3%">
-        <div style="width: 100%; height: 100%">
-          <div class="one" @click="cityResourcesTurnoverFunction" id="one">
-            <city-resources-turnover @click="cityResourcesTurnoverFunction" ref="cityResourcesTurnover"
-                                     style=""></city-resources-turnover>
-          </div>
-          <div class="two" @click="transactionClassification" id="two">
-            <transactionClassification style="width: 100%;height: 100%" @click="transactionClassification"
-                                       ref="transactionClassification"></transactionClassification>
-          </div>
-          <div class="three" @click="majorProjectFunction" id="three">
-            <major-project @click="majorProjectFunction" ref="majorProject"></major-project>
-          </div>
+      <div style="display: flex;">
+        <div class="countAll">
+          <span>积累交易金额</span>
+          <span class="count">{{ totalAmount }}</span>
+          <span>2019-2024</span>
         </div>
-      </div>
-      <div style="width: 44.2%; height: 100%; float: left; display: inline;">
-        <div style="width: 100%; height: 100%; float: left;display: inline; margin-right: 1.3%">
-          <div class="center1">
-            <div
-              style="padding-left: 2%; padding-top: 1.2%;padding-bottom: 1.2%; font-size: 15px;
-              white-space:nowrap;font-weight:600; color: white;background-color: rgba(29, 77, 111,0.74);">
-              公共资源交易累计成交金额
-            </div>
-            <div style="height: 50%;width: 100%">
-<!--              <img src="../../../assets/images/公共资源背景图.jpg" style="width: 43.26vw; height: 25.9vw;">-->
-            </div>
-            <div class="rectangle" style="position: absolute; top: 44.6%;right: 70.3%;"></div>
-            <span style="color: white;position: absolute; top: 44.3%;right: 67.7%;">月度</span>
-            <div style="width: 50%; height: 44%; display: inline; float: left;z-index:-1;">
-              <topCenter></topCenter>
-            </div>
-            <div class="rectangle" style="position: absolute; top: 44.8%;right: 48.6%;"></div>
-            <span style="color: white;position: absolute; top: 44.6%;right: 46%;">年度</span>
-            <div style="width: 50%; height: 44%; display: inline; float: right">
-              <topCenterRight></topCenterRight>
-            </div>
-          </div>
-          <div class="center2" @click="purchaseListFunction" id="five">
-            <purchase-list @click="purchaseListFunction" ref="purchaseList"></purchase-list>
-          </div>
+        <div class="countAll">
+          <span>积累交易宗数</span>
+          <span class="count">{{ totalAmount }}</span>
+          <span>2019-2024</span>
         </div>
-      </div>
-      <div style="width: 27.2%; height: 100%; float: right;display: inline; ">
-        <div class="right" style="position: absolute; top: 12%;width: 26.6%; height: 27%;" @click="realTimeMonitoring"
-             id="right">
-          <realTimeMonitoring style="width: 100%;height: 100%" @click="realTimeMonitoring"
-                              ref="realTimeMonitoring"></realTimeMonitoring>
+        <div class="countAll">
+          <span>积累节约金额</span>
+          <span class="count">{{ totalAmount }}</span>
+          <span>2019-2024</span>
         </div>
-        <div class="rightTwo " @click="turnoverAmountPieChartScreenFunction" id="seven">
-          <turnoverAmountPieChartScreen ref="turnoverAmountPieChartScreen"></turnoverAmountPieChartScreen>
-        </div>
-        <div class="right" style="height: 22.9%; width:26.6%;position: absolute;top:76.1%;"
-             @click="publicResourcesTrends" id="right2">
-          <public-resources-trends style="width: 100%;height: 100%" @click="publicResourcesTrends"
-                                   ref="publicResourcesTrends"></public-resources-trends>
+        <div class="countAll">
+          <span>积累预算金额</span>
+          <span class="count">{{ totalAmount }}</span>
+          <span>2019-2024</span>
         </div>
       </div>
     </div>
@@ -69,440 +41,175 @@
 </template>
 
 <script>
-
-  import topCenter from './topCenter'
-  import topCenterRight from './topCenterRight'
-  import realTimeMonitoring from './realTimeMonitoring'
-  import transactionClassification from './transactionClassification'
-  import turnoverAmountPieChartScreen from './turnoverAmountPieChartScreen.vue'
-  import cityResourcesTrade from './CityResourcesTradeBudget'
-  import cityResourcesTurnover from './CityResourcesTurnover'
-  import majorProject from './majorProject'
-  import PublicResourcesTrends from './publicResourcesTrends';
-  import purchaseList from './purchaseList'
-
-  export default {
-    name: "index",
-    data() {
-      return {
-        date: '',
-        interval: '',
-        judge: '',
-        count: 2,
-        realTime: 0,
-        trans: 0,
-        trends: 0,
-        turnoverAmountPieChartScreenFunctionCount: 0,
-        turnoverAmountPieChartScreenFunctionCount2:0,
-        majorCount: 0,
-        purchaseCount: 0,
-        turnOverCount: 0,
-        background: false,
-        realTimeRCount: 1
-      }
-    },
-    created() {
-      window['realTimeResize'] = (item) => {
-        console.log('this.realTime',this.realTime);
-        this.$refs.realTimeMonitoring.draw(this.realTime); //调用子组件的重新渲染图表函数
-      };
-      window['cityResourcesTurnoverResize'] = (item) => {
-        this.$refs.cityResourcesTurnover.change(this.turnOverCount);
-        this.$refs.cityResourcesTurnover.getResourceTranChart();
-      };
+import { publicResourceApi } from './index.js'
+
+export default {
+  name: "index",
+  data() {
+    return {
+      date: '',
+      selectedValue: 'default-value',
+      year: '',
+      options: [
+        { value: 'default-value', label: '2024' },
+      ],
+      totalAmount: []
+    }
+  },
+  mounted() {
+    this.getCycleTime()
+    this.getYearDataFunction()
+    this.getTotalFunction()
+  },
+  methods: {
+    getYearDataFunction() {
+      publicResourceApi.getYearData().then(res => {
+        const processedData = res.data.data.map(item => ({
+          value: item,
+          label: item
+        }));
+        console.log(processedData); // 现在这里将打印处理后的数据
+        this.options = processedData; // 现在这里将设置 options 为处理后的数据
+      }).catch(error => {
+        console.error('Error fetching year data:', error);
+        // 可以在这里处理错误，比如将 options 设置为空数组等
+        this.options = [];
+      });
     },
-    mounted() {
-      this.getCycleTime()
+    change(value) {
+      this.year = value;
+      this.getTotalFunction(); // 获取该年度的数据并更新 totalAmount 值
     },
-    destroyed() {
-      clearInterval(this.interval);
+    getTotalFunction() {      
+      const yearData = this.year === '' ? 2024 : this.year;
+      console.log(yearData);
+      
+      publicResourceApi.getTotalData(yearData).then(res => {
+        const totalAmount = res.data.data;
+        console.log(totalAmount); // 现在这里将打印处理后的数据
+        this.totalAmount = totalAmount; // 现在这里将设置 options 为处理后的数据
+      }).catch(error => {
+        console.error('Error fetching year data:', error);
+        // 可以在这里处理错误，比如将 options 设置为空数组等
+        this.totalAmount = [];
+      });
     },
-    methods: {
-      turnoverAmountPieChartScreenFunction() {
-        let flag = sessionStorage.getItem('turnoverAmountPieChartScreen');
-        if (flag !== JSON.stringify(1)) {
-          this.turnoverAmountPieChartScreenFunctionCount = this.turnoverAmountPieChartScreenFunctionCount + 1;
-          document.getElementById("seven").classList.toggle("rightTwoClick1"); //改变样式
-          this.$elementQueries.ResizeSensor(document.getElementById("seven"), () => {
-            this.$refs.turnoverAmountPieChartScreen.change(this.turnoverAmountPieChartScreenFunctionCount); //调用子组件的重新渲染图表函数
-          })
-          if (this.turnoverAmountPieChartScreenFunctionCount % 2 !== 0) {
-            this.background = true;
-          } else {
-            this.background = false;
-          }
-        } else {
-          sessionStorage.removeItem('turnoverAmountPieChartScreen')
-        }
-      },
-
-      cityResourcesTurnoverFunction() {
-        this.turnOverCount++;
-        document.getElementById("one").classList.toggle("rightOneClick"); //改变样式
-        this.$elementQueries.ResizeSensor(document.getElementById("one"), () => {
-          window.cityResourcesTurnoverResize();
-        })
 
-        if (this.turnOverCount % 2 !== 0) {
-          this.background = true;
-        } else {
-          this.background = false;
-        }
-      },
-      transactionClassification() {
-        let flag = sessionStorage.getItem('transactionClassificationDateChange');
-        if (flag !== JSON.stringify(1)) {
-          document.getElementById("two").classList.toggle("rightTwoClick");
-          this.$elementQueries.ResizeSensor(document.getElementById("two"), () => {
-            this.$refs.transactionClassification.getCycle2(this.trans);
-            this.$refs.transactionClassification.getCycle(this.trans);
-            this.$refs.transactionClassification.change(this.trans);
-          });
-          this.trans++;
-          if (this.trans % 2 !== 0) {
-            this.background = true;
-          } else {
-            this.background = false;
-          }
-        } else {
-          sessionStorage.removeItem('transactionClassificationDateChange')
-        }
-      },
-      majorProjectFunction() {
-        this.majorCount++;
-        document.getElementById("three").classList.toggle("rightThreeClick"); //改变样式
-        this.$elementQueries.ResizeSensor(document.getElementById("three"), () => {
-          this.$refs.majorProject.change(this.majorCount);
-        })
-
-        if (this.majorCount % 2 !== 0) {
-          this.background = true;
-        } else {
-          this.background = false;
-        }
-      },
-      purchaseListFunction() {
-        this.purchaseCount++;
-        document.getElementById("five").classList.toggle("rightFiveClick"); //改变样式
-        this.$elementQueries.ResizeSensor(document.getElementById("five"), () => {
-          this.$refs.purchaseList.change(this.purchaseCount); //调用子组件的重新渲染图表函数
-        })
-        // for (let i = 1; i <= 10; i++)
-        //   setTimeout(() => {
-        //   }, i * 100)
-        if (this.purchaseCount % 2 !== 0) {
-          this.background = true;
-        } else {
-          this.background = false;
-        }
-      },
-      publicResourcesTrends() {
-        document.getElementById("right2").classList.toggle("rightRight2Click"); //改变样式
-        this.$elementQueries.ResizeSensor(document.getElementById("right2"), () => {
-          this.$refs.publicResourcesTrends.getChartData(this.trends); //调用子组件的重新渲染图表函数
-          this.$refs.publicResourcesTrends.change(this.trends);
-        });
-        this.trends++;
-        if (this.trends % 2 !== 0) {
-          this.background = true;
-        } else {
-          this.background = false;
-        }
-      },
-      realTimeMonitoring() {
-        // document.getElementById("right").classList.toggle("rightRightClick"); //改变样式
-        // this.$elementQueries.ResizeSensor(document.getElementById("right"), function () {
-        //   window.realTimeResize();
-        // });
-        // for (let i = 1; i <= 10; i++)
-        //   setTimeout(() => {
-        //     this.$refs.realTimeMonitoring.change(this.realTime, i);
-        //   }, i * 100)
-        // this.realTime++;
-        // if (this.realTime % 2 !== 0) {
-        //   this.background = true;
-        // } else {
-        //   this.background = false;
-        // }
-      },
-      back() {
-        this.$router.push({name: 'index'})
-      },
-      getCycleTime() {
-        this.getTime();
-        document.addEventListener('visibilitychange', this.cycleDisplay);
-        this.cycleDisplay();
-      },
-      cycleDisplay() {
-        if (document.visibilityState === 'visible') {
-          this.interval = setInterval(() => {
-            this.getTime()
-          }, 1000)
-        } else {
-          clearInterval(this.interval);
-        }
-      },
-      getTime() {
-        let data = new Date();
-        let month = data.getMonth() + 1;
-        let day = '';
-        if (data.getDay() === 1) day = '星期一';
-        else if (data.getDay() === 2) day = '星期二';
-        else if (data.getDay() === 3) day = '星期三';
-        else if (data.getDay() === 4) day = '星期四';
-        else if (data.getDay() === 5) day = '星期五';
-        else if (data.getDay() === 6) day = '星期六';
-        else day = '星期日';
-        this.date = data.getFullYear() + '年' + month + '月' + data.getDate() + '日\t\t\t' + (data.getHours() < 10 ? ('0' + data.getHours()) : data.getHours()) + ':' + (data.getMinutes() < 10 ? ('0' + data.getMinutes()) : data.getMinutes()) + ':' + (data.getSeconds() < 10 ? ('0' + data.getSeconds()) : data.getSeconds()) + '\t\t\t' + day;
+    back() {
+      this.$router.push({ name: 'index' })
+    },
+    getCycleTime() {
+      this.getTime();
+      document.addEventListener('visibilitychange', this.cycleDisplay);
+      this.cycleDisplay();
+    },
+    cycleDisplay() {
+      if (document.visibilityState === 'visible') {
+        this.interval = setInterval(() => {
+          this.getTime()
+        }, 1000)
+      } else {
+        clearInterval(this.interval);
       }
     },
-    components: {
-      PublicResourcesTrends,
-      topCenter,
-      realTimeMonitoring,
-      transactionClassification,
-      turnoverAmountPieChartScreen,
-      cityResourcesTrade,
-      cityResourcesTurnover,
-      majorProject,
-      topCenterRight,
-      purchaseList
+    getTime() {
+      let data = new Date();
+      let month = data.getMonth() + 1;
+      let day = '';
+      if (data.getDay() === 1) day = '星期一';
+      else if (data.getDay() === 2) day = '星期二';
+      else if (data.getDay() === 3) day = '星期三';
+      else if (data.getDay() === 4) day = '星期四';
+      else if (data.getDay() === 5) day = '星期五';
+      else if (data.getDay() === 6) day = '星期六';
+      else day = '星期日';
+      this.date = data.getFullYear() + '年' + month + '月' + data.getDate() + '日\t\t\t' + (data.getHours() < 10 ? ('0' + data.getHours()) : data.getHours()) + ':' + (data.getMinutes() < 10 ? ('0' + data.getMinutes()) : data.getMinutes()) + ':' + (data.getSeconds() < 10 ? ('0' + data.getSeconds()) : data.getSeconds()) + '\t\t\t' + day;
     }
-  }
+  },
+}
 </script>
 
 <style scoped>
-  .totalDiv {
-    width: 100%;
-    height: 100%;
-    background-color: black;
-    position: relative;
-  }
-
-  .background2 {
-    width: 100%;
-    height: 100%;
-    opacity: 0.6;
-    filter: alpha(opacity=40);
-    background-color: black;
-    /*background-image: url("../../../assets/images/background.png");*/
-    background-size: cover;
-    position: absolute;
-    z-index: 100
-  }
-
-  .title {
-    font-size: 200%;
-    letter-spacing: 5px;
-    width: 50%;
-    padding-top: 1%;
-    text-align: center;
-    margin: 0 auto;
-    color: #3dc7ff;
-    text-shadow: 0 0 8px #379a96, 0 0 42px #00fff6, 0 0 72px #577886, 0 0 150px #89bfd6;
-  }
-
-  .header {
-    height: 9.7%;
-    width: 100%;
-    margin-bottom: 1%;
-    background-color: rgba(32, 65, 213, 0.2);
-  }
-
-  .main {
-    height: 87.3%;
-    width: 97.9%;
-    margin-left: 1%;
-    background: url(../../../assets/images/background.png);
-    background-size: 100% auto;
-  }
-
-  .center1 {
-    width: 100%;
-    height: 64.8%;
-    margin-bottom: 2%;
-    background-color: rgba(53, 131, 255, 0.2);
-    background-image: url("../../../assets/images/公共资源背景图.jpg");
-    background-size: 100% 100%;
-  }
-
-  .one {
-    position: absolute;
-    width: 26.6%;
-    margin-bottom: 3%;
-    height: 27.6%;
-    background-color: rgba(53, 131, 255, 0.2);
-    transition: width 1s, height 1s, margin-left 1s, margin-top 1s;
-    -webkit-transition: width 1s, height 1s, margin-top 1s, margin-left 1s;
-  }
-
-  .two {
-    position: absolute;
-    width: 26.6%;
-    margin-bottom: 3%;
-    height: 28%;
-    background-color: rgba(53, 131, 255, 0.2);
-    /* width: 100%; */
-    top: 40.5%;
-    transition: width 1s, height 1s, margin-left 1s, margin-top 1s;
-    -webkit-transition: width 1s, height 1s, margin-top 1s, margin-left 1s;
-  }
-
-  .three {
-    position: absolute;
-    width: 26.6%;
-    height: 29.2%;
-    background-color: rgba(53, 131, 255, 0.2);
-    /*width: 100%;*/
-    top: 69.8%;
-    transition: width 1s, height 1s, margin-left 1s, margin-top 1s;
-    -webkit-transition: width 1s, height 1s, margin-top 1s, margin-left 1s;
-  }
-
-  .center2 {
-    position: absolute;
-    width: 43.2%;
-    height: 29.1%;
-    /*width: 100%;*/
-    /*height: 33.1%;*/
-    /*float: bottom;*/
-    background-color: rgba(53, 131, 255, 0.2);
-    transition: width 1s, height 1s, margin-left 1s, margin-top 1s;
-    -webkit-transition: width 1s, height 1s, margin-top 1s, margin-left 1s;
-  }
-
-  .right {
-
-    width: 100%;
-    background-color: rgba(53, 131, 255, 0.2);
-    transition: width 1s, height 1s, margin-left 1s, margin-top 1s;
-    -webkit-transition: width 1s, height 1s, margin-top 1s, margin-left 1s;
-  }
-
-  .rightTwo {
-    position: absolute;
-    width: 26.6%;
-    top: 40.4%;
-    /*margin-left: 20%;*/
-    background-color: rgba(53, 131, 255, 0.2);
-    height: 34.3%;
-    transition: width 1s, height 1s, margin-left 1s, margin-top 1s;
-    -webkit-transition: width 1s, height 1s, margin-top 1s, margin-left 1s;
-    z-index: 1;
-  }
-
-  .rightTwoClick {
-    background-color: rgba(0, 0, 40, 1);
-    width: 80%;
-    height: 60%;
-    position: absolute;
-    float: top;
-    z-index: 999;
-    margin-left: 10%;
-    margin-top: -7.5%;
-  }
-
-  .rightTwoClick1 {
-    background-color: rgba(0, 0, 40, 1);
-    width: 80%;
-    height: 60%;
-    position: absolute;
-    float: top;
-    z-index: 999;
-    margin-left: -62.5%;
-    margin-top: -11%;
-  }
-
-  .rightOneClick {
-    background-color: rgba(0, 0, 40, 1);
-    width: 80%;
-    height: 60%;
-    position: absolute;
-    float: top;
-    z-index: 999;
-    margin-left: 10%;
-    margin-top: 6%;
-  }
-
-  /*.rightTwoClick {*/
-  /*background-color: rgba(0, 110, 105, 0.9);*/
-  /*width: 80%;*/
-  /*height: 60%;*/
-  /*position: absolute;*/
-  /*float: top;*/
-  /*z-index: 999;*/
-  /*margin-left: 10.7%;*/
-  /*margin-top: -9%;*/
-
-  /*}*/
-  .rightThreeClick {
-    background-color: rgba(0, 0, 40, 1);
-    width: 80%;
-    height: 60%;
-    position: absolute;
-    float: top;
-    z-index: 999;
-    margin-left: 10%;
-    margin-top: -22%;
-  }
-
-  .rightFiveClick {
-    background-color: rgba(0, 0, 40, 1);
-    width: 80% !important;
-    height: 60% !important;
-    position: absolute;
-    float: top;
-    z-index: 999;
-    margin-left: -17.3% !important;
-    margin-top: -22% !important;
-
-  }
-
-  .rightRightClick {
-    background-color: rgba(0, 0, 40, 1);
-    width: 80% !important;
-    height: 60% !important;
-    position: absolute;
-    float: top;
-    z-index: 999;
-    margin-left: -62.3%;
-    margin-top: 6% !important;
-  }
-
-  .rightRight2Click {
-    background-color: rgba(0, 0, 40, 1);
-    width: 80% !important;
-    height: 60% !important;
-    position: absolute;
-    float: top;
-    z-index: 999;
-    margin-left: -63.3%;
-    margin-top: -26% !important;
-  }
-
-  .rectangle {
-    width: 5px;
-    height: 16px;
-    display: inline-block;
-    background: #0febff;
-  }
-
-  .time {
-    position: absolute;
-    right: 7%;
-    top: 4.1%;
-    color: #55c6ff;
-    font-size: 120%;
-    /*text-shadow: 0 0 8px #379a96, 0 0 42px #00fff6, 0 0 72px #577886, 0 0 150px #89bfd6;*/
-  }
-
-  .back {
-    width: 1.1%;
-    height: 3.5%;
-    position: absolute;
-    top: 2.5%;
-    left: 1.4%;
-    background: url("../../../assets/images/back.png") no-repeat;
-    background-size: 100% 100%;
-  }
+.totalDiv {
+  width: 100%;
+  height: 100%;
+  background-color: black;
+  position: relative;
+}
+
+.background2 {
+  width: 100%;
+  height: 100%;
+  opacity: 0.6;
+  filter: alpha(opacity=40);
+  background-color: black;
+  /*background-image: url("../../../assets/images/background.png");*/
+  background-size: cover;
+  position: absolute;
+  z-index: 100
+}
+
+.title {
+  font-size: 200%;
+  letter-spacing: 5px;
+  width: 50%;
+  padding-top: 1%;
+  text-align: center;
+  margin: 0 auto;
+  color: #3dc7ff;
+  text-shadow: 0 0 8px #379a96, 0 0 42px #00fff6, 0 0 72px #577886, 0 0 150px #89bfd6;
+}
+
+.header {
+  height: 9.7%;
+  width: 100%;
+  margin-bottom: 1%;
+  background-color: rgba(32, 65, 213, 0.2);
+}
+
+.main {
+  height: 87.3%;
+  width: 97.9%;
+  margin-left: 1%;
+  background: url(../../../assets/images/background.png);
+  background-size: 100% auto;
+}
+
+.time {
+  position: absolute;
+  right: 7%;
+  top: 4.1%;
+  color: #55c6ff;
+  font-size: 120%;
+  /*text-shadow: 0 0 8px #379a96, 0 0 42px #00fff6, 0 0 72px #577886, 0 0 150px #89bfd6;*/
+}
+
+.back {
+  width: 1.1%;
+  height: 3.5%;
+  position: absolute;
+  top: 2.5%;
+  left: 1.4%;
+  background: url("../../../assets/images/back.png") no-repeat;
+  background-size: 100% 100%;
+}
+
+.year {
+  display: flex;
+  top: 2.5%;
+  left: 8%;
+  width: 18%;
+  height: 3.5%;
+  position: absolute;
+  color: #55c6ff;
+  font-size: 120%;
+}
+
+.countAll {
+  margin-right: 10%;
+  width: 12%;
+  height: 10%;
+  color: #55c6ff;
+  font-size: 120%;
+}
 </style>