Home Explore Help
Sign In
kingdee_large_screen
/
pc_kingdee_large_screen
2
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

Merge branch 'main' of https://git.sxidc.com/kingdee_large_screen/pc_kingdee_large_screen

l1448442195@163.com 1 year ago
parent
f6a2c844da 32af9475f1
commit
88fd07ca66
36 changed files with 4066 additions and 153 deletions
Split View Show Diff Stats
  1. 137 0
      cokingCoal/cokingCoalA.html
  2. 155 0
      cokingCoal/cokingCoalB.html
  3. BIN
      cokingCoal/images/c1Back.png
  4. BIN
      cokingCoal/images/c2Back.png
  5. BIN
      cokingCoal/images/c3Back.png
  6. BIN
      cokingCoal/images/loop.png
  7. BIN
      cokingCoal/images/man.png
  8. BIN
      cokingCoal/images/right-top-img1.png
  9. BIN
      cokingCoal/images/right-top-img2.png
  10. BIN
      cokingCoal/images/right-top-img3.png
  11. BIN
      cokingCoal/images/right-top-img4.png
  12. BIN
      cokingCoal/images/right-top1.png
  13. BIN
      cokingCoal/images/right-top2.png
  14. BIN
      cokingCoal/images/top-back2.png
  15. BIN
      cokingCoal/images/woman.png
  16. 138 0
      cokingCoal/js/cokingCoalA.js
  17. 138 0
      cokingCoal/js/cokingCoalB.js
  18. 12 25
      cokingCoal/js/cokingCoalD.js
  19. 21 10
      cokingCoal/js/request.js
  20. 614 0
      cokingCoal/styles/cokingCoalA.css
  21. 622 0
      cokingCoal/styles/cokingCoalB.css
  22. 25 5
      cokingCoal/styles/cokingCoalD.css
  23. BIN
      investment/images3/dinn1.png
  24. BIN
      investment/images3/dinn2.png
  25. BIN
      investment/images3/dinn3.png
  26. BIN
      investment/images3/dinn4.png
  27. BIN
      investment/images3/green.png
  28. BIN
      investment/images3/red.png
  29. 139 109
      investment/investHome3.html
  30. 192 0
      investment/investHome3compound.html
  31. 39 0
      investment/investHomeChild.html
  32. 1 1
      investment/js/investHome.js
  33. 211 1
      investment/js/investHome3.js
  34. 777 0
      investment/js/investHome3compound.js
  35. 68 2
      investment/styles/investHome3.css
  36. 777 0
      investment/styles/investHome3compound.css

+ 137 - 0
cokingCoal/cokingCoalA.html
View File 

@@ -0,0 +1,137 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+  <meta charset="utf-8" />
 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
 
+  <!-- 引入样式 -->
 
+  <link rel="stylesheet" href="./styles/element-ui@2.15.9.css" />
 
+  <link rel="stylesheet" href="./styles/cokingCoalA.css" />
 
+  <!-- 引入js -->
 
+  <script src="./libs/vue@2.7.10.js"></script>
 
+  <script src="./libs/datav.min.js"></script>
 
+  <script src="./libs/echarts.min.js"></script>
 
+  <script src="./libs/element-ui@2.15.9.js"></script>
 
+  <script src="./libs/axios.min.js"></script>
 
+  <script src="./js/request.js"></script>
 
+  <script src="./libs/echarts-tooltip-carousel.js"></script>
 
+</head>
 
+
 
+<body>
 
+  <div id="app">
 
+    <dv-full-screen-container>
 
+      <header class="my-header relative">
 
+        <span>焦煤集团驾驶舱数字看板</span>
 
+        <span class="rightTime">{{time}}</span>
 
+      </header>
 
+      <div class="main">
 
+        <div class="left">
 
+          <dv-border-box-8>
 
+            <div class="left-top">
 
+              <div class="commonTitle w-full" style="height: 50px;">
 
+                <div class="flex items-center">
 
+                  <img style="width:17px;height:34px;margin-right: 10px;" src="./images/arrow.png" alt="">
 
+                  <span>三序列人员</span>
 
+                </div>
 
+                <img class="w-full block" style="margin-top: 2px;" src="./images/line.png" alt="">
 
+              </div>
 
+              <div class="left-top-content">
 
+                <div id="aiQuality" class="mx-auto" style="width: 100%; height: 100%"></div>
 
+              </div>
 
+            </div>
 
+          </dv-border-box-8>
 
+          <dv-border-box-8>
 
+            <div class="left-bottom">
 
+              <div class="commonTitle w-full" style="height: 50px;">
 
+                <div class="flex items-center">
 
+                  <img style="width:17px;height:34px;margin-right: 10px;" src="./images/arrow.png" alt="">
 
+                  <span>技术昵称</span>
 
+                </div>
 
+                <img class="w-full block" style="margin-top: 2px;" src="./images/line.png" alt="">
 
+              </div>
 
+              <div class="left-bottom-content">
 
+                <div ref="echartR1" class="loopBack" style="height:100%;width:100%;"></div>
 
+              </div>
 
+            </div>
 
+          </dv-border-box-8>
 
+        </div>
 
+        <div class="center">
 
+          <div class="center-top">
 
+            <div class="flex items-center flex-col justify-center top-text" style="padding-left:60px">
 
+              <p><span>3200</span>人</p>
 
+              <p>员工总数</p>
 
+            </div>
 
+            <div class="flex items-center flex-col justify-center top-text" style="padding-left:60px">
 
+              <p><span>1900</span>人</p>
 
+              <p>在岗总数</p>
 
+            </div>
 
+            <div class="flex items-center flex-col justify-center top-text" style="padding-left:60px">
 
+              <p><span>1300</span>人</p>
 
+              <p>离职总数</p>
 
+            </div>
 
+          </div>
 
+          <div ref="echarts-map" style="height: 90%;width: 100%;"></div>
 
+        </div>
 
+        <div class="right">
 
+          <dv-border-box-8>
 
+            <div class="right-top">
 
+              <div class="commonTitle w-full relative" style="height: 50px;">
 
+                <div class="flex items-center">
 
+                  <img style="width:17px;height:34px;margin-right: 10px;" src="./images/arrow.png" alt="">
 
+                  <span>在岗人员类别</span>
 
+                  <div class="absolute pull-down flex justify-center items-center">
 
+                    <span>原煤</span>
 
+                    <img style="margin-left:10px" src="./images/down.png" alt="">
 
+                  </div>
 
+                </div>
 
+                <img class="w-full block" style="margin-top: 2px;" src="./images/line.png" alt="">
 
+              </div>
 
+              <div class="right-top-content">
 
+                <div class="right-top-content-top">
 
+                  <div class="flex align-items justify-center" style="padding:10px">
 
+                    <img src="./images/right-top1.png" alt="" style="margin-right:20px">
 
+                    <div class="flex flex-col justify-center" style="font-size: 16px;">
 
+                      <span style="margin-bottom: 10px;">原煤生产人数总数</span>
 
+                      <span style="font-weight: bold;">60281</span>
 
+                    </div>
 
+                  </div>
 
+                  <div class="flex align-items justify-center" style="padding:10px">
 
+                    <img src="./images/right-top2.png" alt="" style="margin-right:20px">
 
+                    <div class="flex flex-col justify-center" style="font-size: 16px;">
 
+                      <span style="margin-bottom: 10px;">非原煤生产人员</span>
 
+                      <span style="font-weight: bold;">26840</span>
 
+                    </div>
 
+                  </div>
 
+                </div>
 
+                <div class="right-top-content-bottom">
 
+                  <div id="aiQuality2" class="mx-auto" style="width: 100%; height: 100%"></div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+          </dv-border-box-8>
 
+          <dv-border-box-8>
 
+            <div class="right-bottom">
 
+              <div class="commonTitle w-full" style="height: 50px;">
 
+                <div class="flex items-center">
 
+                  <img style="width:17px;height:34px;margin-right: 10px;" src="./images/arrow.png" alt="">
 
+                  <span>技能等级</span>
 
+                </div>
 
+                <img class="w-full block" style="margin-top: 2px;" src="./images/line.png" alt="">
 
+              </div>
 
+              <div class="right-bottom-content">
 
+                <div id="budget" style="width: 100%; height: 100%;"></div>
 
+              </div>
 
+            </div>
 
+          </dv-border-box-8>
 
+        </div>
 
+      </div>
 
+      <div class="footer justify-center">
 
+        <a class="item" v-for="(item,index) in companyList" :key="index">{{item.name}}</a>
 
+      </div>
 
+    </dv-full-screen-container>
 
+  </div>
 
+  <script src="./js/cokingCoalA.js"></script>
 
+</body>
 
+
 
+</html>

+ 155 - 0
cokingCoal/cokingCoalB.html
View File 

@@ -0,0 +1,155 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+  <meta charset="utf-8" />
 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
 
+  <!-- 引入样式 -->
 
+  <link rel="stylesheet" href="./styles/element-ui@2.15.9.css" />
 
+  <link rel="stylesheet" href="./styles/cokingCoalB.css" />
 
+  <!-- 引入js -->
 
+  <script src="./libs/vue@2.7.10.js"></script>
 
+  <script src="./libs/datav.min.js"></script>
 
+  <script src="./libs/echarts.min.js"></script>
 
+  <script src="./libs/element-ui@2.15.9.js"></script>
 
+  <script src="./libs/axios.min.js"></script>
 
+  <script src="./js/request.js"></script>
 
+  <script src="./libs/echarts-tooltip-carousel.js"></script>
 
+</head>
 
+
 
+<body>
 
+  <div id="app">
 
+    <dv-full-screen-container>
 
+      <header class="my-header relative">
 
+        <span>焦煤集团驾驶舱数字看板</span>
 
+        <span class="rightTime">{{time}}</span>
 
+      </header>
 
+      <div class="main">
 
+        <div class="left">
 
+          <dv-border-box-8>
 
+            <div class="left-top">
 
+              <div class="commonTitle w-full" style="height: 50px;">
 
+                <div class="flex items-center">
 
+                  <img style="width:17px;height:34px;margin-right: 10px;" src="./images/arrow.png" alt="">
 
+                  <span>年龄分布</span>
 
+                </div>
 
+                <img class="w-full block" style="margin-top: 2px;" src="./images/line.png" alt="">
 
+              </div>
 
+              <div class="left-top-content">
 
+                <div id="aiQuality" class="mx-auto" style="width: 100%; height: 100%"></div>
 
+              </div>
 
+            </div>
 
+          </dv-border-box-8>
 
+          <dv-border-box-8>
 
+            <div class="left-bottom">
 
+              <div class="commonTitle w-full" style="height: 50px;">
 
+                <div class="flex items-center">
 
+                  <img style="width:17px;height:34px;margin-right: 10px;" src="./images/arrow.png" alt="">
 
+                  <span>人员变动情况</span>
 
+                </div>
 
+                <img class="w-full block" style="margin-top: 2px;" src="./images/line.png" alt="">
 
+              </div>
 
+              <div class="left-bottom-content">
 
+                <div ref="echartR1" class="loopBack" style="height:100%;width:100%;"></div>
 
+              </div>
 
+            </div>
 
+          </dv-border-box-8>
 
+        </div>
 
+        <div class="center">
 
+          <div class="center-top">
 
+            <div class="flex items-center flex-col justify-center top-text" style="padding-left:60px">
 
+              <p><span>3200</span>人</p>
 
+              <p>男性员工</p>
 
+            </div>
 
+            <div class="flex items-center flex-col justify-center top-text" style="padding-left:60px">
 
+              <p><span>1900</span>人</p>
 
+              <p>女性员工</p>
 
+            </div>
 
+          </div>
 
+          <div ref="echarts-map" style="height: 90%;width: 100%;"></div>
 
+        </div>
 
+        <div class="right">
 
+          <dv-border-box-8>
 
+            <div class="right-top">
 
+              <div class="commonTitle w-full relative" style="height: 50px;">
 
+                <div class="flex items-center">
 
+                  <img style="width:17px;height:34px;margin-right: 10px;" src="./images/arrow.png" alt="">
 
+                  <span>劳动合同变化情况</span>
 
+                </div>
 
+                <img class="w-full block" style="margin-top: 2px;" src="./images/line.png" alt="">
 
+              </div>
 
+              <div class="right-top-content">
 
+                <div class="right-top-content-top">
 
+                  <div class="flex align-items justify-center">
 
+                    <div class="flex flex-col justify-center">
 
+                      <span style="margin-bottom: 5px;"><span
 
+                          style="color: #69C0FF;font-size: 20px;font-weight: bold;margin-right: 5px;">2115</span>份</span>
 
+                      <span>新签</span>
 
+                    </div>
 
+                  </div>
 
+                  <div class="flex align-items justify-center">
 
+                    <div class="flex flex-col justify-center">
 
+                      <span style="margin-bottom: 5px;"><span
 
+                          style="color: #69C0FF;font-size: 20px;font-weight: bold;margin-right: 5px;">1208</span>份</span>
 
+                      <span>续签</span>
 
+                    </div>
 
+                  </div>
 
+                  <div class="flex align-items justify-center">
 
+                    <div class="flex flex-col justify-center">
 
+                      <span style="margin-bottom: 5px;"><span
 
+                          style="color: #69C0FF;font-size: 20px;font-weight: bold;margin-right: 5px;">9523</span>份</span>
 
+                      <span>改签</span>
 
+                    </div>
 
+                  </div>
 
+                  <div class="flex align-items justify-center">
 
+                    <div class="flex flex-col justify-center">
 
+                      <span style="margin-bottom: 5px;"><span
 
+                          style="color: #69C0FF;font-size: 20px;font-weight: bold;margin-right: 5px;">1126</span>份</span>
 
+                      <span>解除或终止</span>
 
+                    </div>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+          </dv-border-box-8>
 
+          <dv-border-box-8>
 
+            <div class="right-bottom">
 
+              <div class="commonTitle w-full" style="height: 50px;">
 
+                <div class="flex items-center">
 
+                  <img style="width:17px;height:34px;margin-right: 10px;" src="./images/arrow.png" alt="">
 
+                  <span>工龄分布</span>
 
+                </div>
 
+                <img class="w-full block" style="margin-top: 2px;" src="./images/line.png" alt="">
 
+              </div>
 
+              <div class="right-bottom-content">
 
+                <div id="budget" style="width: 100%; height: 100%;"></div>
 
+              </div>
 
+            </div>
 
+          </dv-border-box-8>
 
+          <dv-border-box-8>
 
+            <div class="right-bottom">
 
+              <div class="commonTitle w-full" style="height: 50px;">
 
+                <div class="flex items-center">
 
+                  <img style="width:17px;height:34px;margin-right: 10px;" src="./images/arrow.png" alt="">
 
+                  <span>学历分布</span>
 
+                </div>
 
+                <img class="w-full block" style="margin-top: 2px;" src="./images/line.png" alt="">
 
+              </div>
 
+              <div class="right-bottom-content">
 
+                <!-- <div id="budget" style="width: 100%; height: 100%;"></div> -->
 
+                <div id="aiQuality2" class="mx-auto" style="width: 100%; height: 100%"></div>
 
+              </div>
 
+            </div>
 
+          </dv-border-box-8>
 
+        </div>
 
+      </div>
 
+      <div class="footer justify-center">
 
+        <a class="item" v-for="(item,index) in companyList" :key="index">{{item.name}}</a>
 
+      </div>
 
+    </dv-full-screen-container>
 
+  </div>
 
+  <script src="./js/cokingCoalB.js"></script>
 
+</body>
 
+
 
+</html>

BIN
cokingCoal/images/c1Back.png
View File


BIN
cokingCoal/images/c2Back.png
View File


BIN
cokingCoal/images/c3Back.png
View File


BIN
cokingCoal/images/loop.png
View File


BIN
cokingCoal/images/man.png
View File


BIN
cokingCoal/images/right-top-img1.png
View File


BIN
cokingCoal/images/right-top-img2.png
View File


BIN
cokingCoal/images/right-top-img3.png
View File


BIN
cokingCoal/images/right-top-img4.png
View File


BIN
cokingCoal/images/right-top1.png
View File


BIN
cokingCoal/images/right-top2.png
View File


BIN
cokingCoal/images/top-back2.png
View File


BIN
cokingCoal/images/woman.png
View File


File diff suppressed because it is too large
+ 138 - 0
cokingCoal/js/cokingCoalA.js


File diff suppressed because it is too large
+ 138 - 0
cokingCoal/js/cokingCoalB.js


+ 12 - 25
cokingCoal/js/cokingCoalD.js
View File 

@@ -12,20 +12,20 @@ let app = new Vue({
 
       ],
 
       config5: {
 
         waitTime: 2000,
 
-        header: ["单位名称", "平均工资涨幅"],
 
+        header: ["单位名称", "平均工资涨幅", ''],
 
         data: [
 
-          ["山焦财务", "-1%"],
 
-          ["山焦担保", "4%"],
 
-          ["山焦股份", "6%"],
 
-          ["山焦国华", "-20%"],
 
-          ["山焦国华", "9%"],
 
-          ["山焦财务", "-1%"],
 
-          ["山焦担保", "4%"],
 
-          ["山焦股份", "6%"],
 
-          ["山焦国华", "-20%"],
 
-          ["山焦国华", "9%"]
 
+          ["山焦财务", '<span class="red"><span class="listText">-12%</span><span class="redImg"></span></span>'],
 
+          ["山焦担保", '<span class="green"><span class="listText">4%</span><span class="greedImg"></span></span>'],
 
+          ["山焦股份", '<span class="green"><span class="listText">6%</span><span class="greedImg"></span></span>'],
 
+          ["山焦国华", '<span class="green"><span class="listText">20%</span><span class="greedImg"></span></span>'],
 
+          ["山焦国华", '<span class="green"><span class="listText">9%</span><span class="greedImg"></span></span>'],
 
+          ["山焦财务", '<span class="red"><span class="listText">-1%</span><span class="redImg"></span></span>'],
 
+          ["山焦担保", '<span class="green"><span class="listText">4%</span><span class="greedImg"></span></span>'],
 
+          ["山焦股份", '<span class="green"><span class="listText">6%</span><span class="greedImg"></span></span>'],
 
+          ["山焦国华", '<span class="green"><span class="listText">20%</span><span class="greedImg"></span></span>'],
 
+          ["山焦国华", '<span class="green"><span class="listText">9%</span><span class="greedImg"></span></span>']
 
         ],
 
-        align: ["center", "center", "center", "center"],
 
+        align: ["center", "center"],
 
         headerBGC: "#153A62",
 
         oddRowBGC: "#061F42",
 
         evenRowBGC: "#0C284A",
 
@@ -34,9 +34,6 @@ let app = new Vue({
 
   },
 
   mounted () {
 
     setTimeout(() => {
 
-      setInterval(() => {
 
-        this.changedColor()
 
-      }, 20)
 
       this.budgetECharts();
 
       this.salaryECharts();
 
       this.aiQualityECharts1();
 
@@ -44,16 +41,6 @@ let app = new Vue({
 
     })
 
   },
 
   methods: {
 
-    changedColor () {
 
-      this.list = document.getElementsByClassName('row-item')
 
-      for (var i = 0; i < this.list.length; i++) {
 
-        if (this.list[i].children[1].innerHTML.slice(0, 1) === '-') {
 
-          this.list[i].children[1].classList.add('green')
 
-        } else {
 
-          this.list[i].children[1].classList.add('red')
 
-        }
 
-      }
 
-    },
 
     aiQualityECharts1 () {
 
       let chart = echarts.init(document.getElementById("aiQuality1"));
 
       let option = {

+ 21 - 10
cokingCoal/js/request.js
View File 

@@ -3,7 +3,7 @@
 
 // getCookie(cookie_name)
 
 
 // 是否本地环境
 
-function isLocalEnv() {
 
+function isLocalEnv () {
 
   let domain = window.location.origin
 
   if (['http://127.0.0.1:5500', 'file://'].includes(domain)) {
 
     return true
 
@@ -13,7 +13,7 @@ function isLocalEnv() {
 
 }
 
 
 // api 前缀
 
-function getApiUrl() {
 
+function getApiUrl () {
 
   // 为线上时
 
   if (!isLocalEnv()) {
 
     return window.location.origin
 
@@ -27,11 +27,11 @@ function getApiUrl() {
 
     // return 'http://10.0.0.22:8080'     // 闫敏的环境
 
     // return 'http://10.0.0.8:8080' // 祥慧的环境
 
     // return 'http://10.0.0.115:8080'    // 王蒙的环境
 
-	return 'http://10.0.0.82:8080'
 
+    return 'http://10.0.0.82:8080'
 
   }
 
 }
 
 // websocket 前缀
 
-function getWsUrl() {
 
+function getWsUrl () {
 
   let prefix = location.protocol === 'https:' ? 'wss://' : 'ws://'
 
   // 为线上时
 
   if (!isLocalEnv()) {
 
@@ -43,7 +43,7 @@ function getWsUrl() {
 
 }
 
 
 // minio 前缀
 
-function getMinioUrl() {
 
+function getMinioUrl () {
 
   let isProduction = location.origin.indexOf('1.71.170.214') != -1
 
   if (isProduction) {
 
     return 'http://1.71.170.214:19000/constr-documents/'
 
@@ -106,7 +106,7 @@ httpRequest.interceptors.response.use(
 
   }
 
 )
 
 
-function get(url, params) {
 
+function get (url, params) {
 
   return new Promise((resolve, reject) => {
 
     httpRequest
 
       .get(url, { params: params })
 
@@ -119,7 +119,7 @@ function get(url, params) {
 
   })
 
 }
 
 // qs.stringify(data)
 
-function post(url, data, config) {
 
+function post (url, data, config) {
 
   return new Promise((resolve, reject) => {
 
     httpRequest
 
       .post(url, data, config)
 
@@ -132,7 +132,7 @@ function post(url, data, config) {
 
   })
 
 }
 
 
-function postFile(url, blob) {
 
+function postFile (url, blob) {
 
   return new Promise((resolve, reject) => {
 
     let formdata = new FormData()
 
     formdata.append('multipartFile', blob)
 
@@ -147,7 +147,7 @@ function postFile(url, blob) {
 
   })
 
 }
 
 
-function localEnvLogin() {
 
+function localEnvLogin () {
 
   post(
 
     '/apiSys/login',
 
     {
 
@@ -169,7 +169,7 @@ function localEnvLogin() {
 
 }
 
 
 // 将参数转换成功 formdata 接收格式
 
-function stringify(data) {
 
+function stringify (data) {
 
   let ret = ''
 
   for (const it in data) {
 
     ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
 
@@ -177,3 +177,14 @@ function stringify(data) {
 
   ret = ret.substring(0, ret.lastIndexOf('&'))
 
   return ret
 
 }
 
+// 格式化日期
 
+function formatDate (time) {
 
+  let date = time ? new Date(Number(time)) : new Date();
 
+  let Y = date.getFullYear() + '-';
 
+  let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
 
+  let D = date.getDate() < 10 ? '0' + date.getDate() + ' ' : date.getDate() + ' ';
 
+  let h = date.getHours() < 10 ? '0' + date.getHours() + ':' : date.getHours() + ':';
 
+  let m = date.getMinutes() < 10 ? '0' + date.getMinutes() + ':' : date.getMinutes() + ':';
 
+  let s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
 
+  return Y + M + D + h + m + s;
 
+}

+ 614 - 0
cokingCoal/styles/cokingCoalA.css
View File 

@@ -0,0 +1,614 @@
 
+*,
 
+*:before,
 
+*:after {
 
+  padding: 0;
 
+  margin: 0;
 
+  box-sizing: border-box;
 
+}
 
+html,
 
+body {
 
+  height: 100%;
 
+  font-size: 14px;
 
+  background-color: #ecffff;
 
+  font-family: 'Microsoft YaHei', 'Helvetica Neue', Helvetica, 'PingFang SC',
 
+    'Hiragino Sans GB', Arial, sans-serif;
 
+}
 
+
 
+.flex {
 
+  display: flex;
 
+}
 
+.flex1 {
 
+  flex: 1;
 
+}
 
+.flex2 {
 
+  flex: 2;
 
+}
 
+.flex-around {
 
+  display: flex;
 
+  justify-content: space-around;
 
+}
 
+.flex-between {
 
+  display: flex;
 
+  justify-content: space-between;
 
+  align-items: center;
 
+}
 
+.flex-end {
 
+  display: flex;
 
+  justify-content: flex-end;
 
+}
 
+.flex-align-center {
 
+  display: flex;
 
+  align-items: center;
 
+}
 
+.text-center {
 
+  text-align: center;
 
+}
 
+.font12 {
 
+  font-size: 12px;
 
+}
 
+.main-color {
 
+  color: #0bf1ff;
 
+}
 
+.danger-color {
 
+  color: #f15450 !important;
 
+}
 
+.error-color {
 
+  color: #ffc704 !important;
 
+}
 
+.btm10 {
 
+  margin-bottom: 10px;
 
+}
 
+.btm20 {
 
+  margin-bottom: 20px;
 
+}
 
+a {
 
+  text-decoration: none;
 
+  cursor: pointer;
 
+}
 
+
 
+[v-cloak] {
 
+  display: none;
 
+}
 
+#app {
 
+  background: url('../images/top-back2.png') center center no-repeat;
 
+  background-size: 100% 103%;
 
+  padding-top: 10px;
 
+  height: 100vh;
 
+  overflow: hidden;
 
+  color: #fff;
 
+}
 
+.my-header {
 
+  height: 70px;
 
+  line-height: 70px;
 
+  background: url('../images/title-back.png') center center no-repeat;
 
+  background-size: 100% 100%;
 
+  color: #0bf1ff;
 
+  text-align: center;
 
+  font-size: 25px;
 
+  font-weight: 600;
 
+}
 
+.my-header span {
 
+  background-image: -webkit-linear-gradient(top, #fff, #99eeff);
 
+  -webkit-background-clip: text;
 
+  -webkit-text-fill-color: transparent;
 
+}
 
+.main {
 
+  padding: 15px;
 
+  height: calc(100% - 70px);
 
+  /* background: url('../images/content-bg.png') no-repeat center bottom; */
 
+  background-size: 80%;
 
+  display: grid;
 
+  grid-template-columns: 30% 40% 30%;
 
+  padding-bottom: 65px;
 
+}
 
+.footer {
 
+  position: fixed;
 
+  bottom: 0;
 
+  padding: 10px;
 
+  display: flex;
 
+  background-color: rgba(0, 0, 0, 0.5);
 
+  width: 100%;
 
+  background: url('../images/foot-back.png') no-repeat center bottom;
 
+  background-size: 100% 100%;
 
+}
 
+.footer a {
 
+  height: 40px;
 
+  line-height: 40px;
 
+  text-align: center;
 
+  color: #fff;
 
+  background: url('../images/footer-item.png') no-repeat;
 
+  background-size: 100% 100%;
 
+  width: 200px;
 
+}
 
+.footer a:hover {
 
+  background: url('../images/footer-item-checked.png') no-repeat;
 
+  background-size: 100% 100%;
 
+}
 
+.my-header span.rightTime {
 
+  position: absolute;
 
+  right: 100px;
 
+  bottom: 10px;
 
+  font-size: 14px;
 
+}
 
+.left,
 
+.right {
 
+  display: grid;
 
+  grid-template-rows: repeat(2, minmax(0, 1fr));
 
+  gap: 10px;
 
+}
 
+.left-top,
 
+.left-bottom,
 
+.right-bottom,
 
+.right-top {
 
+  width: 100%;
 
+  height: 100%;
 
+  padding: 10px;
 
+  background: url('../images/rb-back.png') no-repeat;
 
+  background-size: 100% 100%;
 
+}
 
+.left-top-content,
 
+.left-bottom-content,
 
+.right-top-content,
 
+.right-bottom-content {
 
+  height: calc(100% - 50px);
 
+}
 
+.loopBack {
 
+  background: url('../images/loop.png') no-repeat center;
 
+  background-size: 60% auto;
 
+}
 
+.center {
 
+  padding: 10px;
 
+}
 
+.center-top {
 
+  height: 80px;
 
+  display: grid;
 
+  grid-template-columns: repeat(3, minmax(0, 1fr));
 
+  gap: 10px;
 
+}
 
+.center-top > div {
 
+  height: 100%;
 
+  background-size: 100% 100%;
 
+}
 
+.center-top > div:nth-child(1) {
 
+  background: url('../images/c1Back.png') no-repeat center;
 
+}
 
+.center-top > div:nth-child(2) {
 
+  background: url('../images/c2Back.png') no-repeat center;
 
+}
 
+.center-top > div:nth-child(3) {
 
+  background: url('../images/c3Back.png') no-repeat center;
 
+}
 
+.top-text span {
 
+  color: #69c0ff;
 
+  font-size: 18px;
 
+  font-weight: bold;
 
+  font-style: italic;
 
+  margin-right: 5px;
 
+}
 
+.right-top-content-top {
 
+  display: grid;
 
+  grid-template-columns: repeat(2, minmax(0, 1fr));
 
+  width: 100%;
 
+  height: 80px;
 
+  gap: 10px;
 
+}
 
+.right-top-content-top > div:nth-child(1) {
 
+  background-color: #022347;
 
+}
 
+.right-top-content-top > div:nth-child(2) {
 
+  background-color: #072844;
 
+}
 
+.right-top-content-bottom {
 
+  height: calc(100% - 80px);
 
+}
 
+.right-top .pull-down {
 
+  right: 0px;
 
+  background: url('../images/down-back.png') no-repeat center;
 
+  background-size: 100% 100%;
 
+  padding: 5px 8px;
 
+}
 
+/* zhb */
 
+/* 宽高纵横比 */
 
+.aspect-auto {
 
+  aspect-ratio: auto;
 
+}
 
+.aspect-square {
 
+  aspect-ratio: 1 / 1;
 
+}
 
+.aspect-video {
 
+  aspect-ratio: 16 / 9;
 
+}
 
+/* aspect-[4/3] */
 
+
 
+/* 居中 */
 
+.mx-auto {
 
+  margin: 0 auto;
 
+}
 
+
 
+/* 设置容器内的列数/每列距离 */
 
+.columns-1 {
 
+  columns: 1;
 
+}
 
+/* columns-[20px] */
 
+
 
+/* 盒子模型 */
 
+.box-border {
 
+  box-sizing: border-box;
 
+}
 
+.box-content {
 
+  box-sizing: content-box;
 
+}
 
+/* 消失 */
 
+.hidden {
 
+  display: none;
 
+}
 
+
 
+/* 块级元素 */
 
+.block {
 
+  display: block;
 
+}
 
+/* 行内块 */
 
+.inline-block {
 
+  display: inline-block;
 
+}
 
+/* 行内元素 */
 
+.inline {
 
+  display: inline;
 
+}
 
+
 
+/* 弹性布局 */
 
+.flex {
 
+  display: flex;
 
+}
 
+/* 主轴起点在左边 */
 
+.flex-row {
 
+  flex-direction: row;
 
+}
 
+/* 主轴起点在右边 */
 
+.flex-row-reverse {
 
+  flex-direction: row-reverse;
 
+}
 
+/* 主轴竖向排列，在上面 */
 
+.flex-col {
 
+  flex-direction: column;
 
+}
 
+/* 主轴竖向排列，在下面 */
 
+.flex-col-reverse {
 
+  flex-direction: column-reverse;
 
+}
 
+/* 自动换行 */
 
+.flex-wrap {
 
+  flex-wrap: wrap;
 
+}
 
+/* 自动换行下起点 */
 
+.flex-wrap-reverse {
 
+  flex-wrap: wrap-reverse;
 
+}
 
+/* 不换行 */
 
+.flex-nowrap {
 
+  flex-wrap: nowrap;
 
+}
 
+/* 弹性成长 */
 
+.grow {
 
+  flex-grow: 1;
 
+}
 
+/* 不允许弹性成长 */
 
+.grow-0 {
 
+  flex-grow: 0;
 
+}
 
+/* 主轴从左开始 */
 
+.justify-start {
 
+  justify-content: flex-start;
 
+}
 
+/* 主轴从右开始 */
 
+.justify-end {
 
+  justify-content: flex-end;
 
+}
 
+/* 主轴剧中 */
 
+.justify-center {
 
+  justify-content: center;
 
+}
 
+/* 主轴两端无间隔 */
 
+.justify-between {
 
+  justify-content: space-between;
 
+}
 
+/* 主轴两端有间隔 */
 
+.justify-around {
 
+  justify-content: space-around;
 
+}
 
+/* 所有间隔相等 */
 
+.justify-evenly {
 
+  justify-content: space-evenly;
 
+}
 
+/* 纵向起点最上方 */
 
+.items-start {
 
+  align-items: flex-start;
 
+}
 
+/* 纵向起点最下方 */
 
+.items-end {
 
+  align-items: flex-end;
 
+}
 
+.items-center {
 
+  align-items: center;
 
+}
 
+/* 网格布局 */
 
+.grid {
 
+  display: grid;
 
+}
 
+/* 有几列 */
 
+.grid-cols-4 {
 
+  grid-template-columns: repeat(4, minmax(0, 1fr));
 
+}
 
+/* 有几行 */
 
+.grid-rows-3 {
 
+  grid-template-rows: repeat(3, minmax(0, 1fr));
 
+}
 
+
 
+/* 间距 */
 
+.gap-7 {
 
+  gap: 1.75rem;
 
+}
 
+/* 允许弹性成长 */
 
+.shrink {
 
+  flex-shrink: 1;
 
+}
 
+/* 不允许弹性成长 */
 
+.shrink-0 {
 
+  flex-shrink: 0;
 
+}
 
+/* 不允许成长也不允许收缩 */
 
+.flex-none {
 
+  flex: none;
 
+}
 
+/* 浮动布局 */
 
+.float-right {
 
+  float: right;
 
+}
 
+.float-left {
 
+  float: left;
 
+}
 
+.clear-both {
 
+  clear: both;
 
+}
 
+
 
+/* 溢出 */
 
+.overflow-auto {
 
+  overflow: auto;
 
+}
 
+.overflow-hidden {
 
+  overflow: hidden;
 
+}
 
+.overflow-scroll {
 
+  overflow: scroll;
 
+}
 
+.overflow-x-auto {
 
+  overflow-x: auto;
 
+}
 
+.overflow-y-auto {
 
+  overflow-y: auto;
 
+}
 
+
 
+/* 定位 */
 
+.fixed {
 
+  position: fixed;
 
+}
 
+.absolute {
 
+  position: absolute;
 
+}
 
+.relative {
 
+  position: relative;
 
+}
 
+.top-0 {
 
+  top: 0px;
 
+}
 
+.right-0 {
 
+  right: 0px;
 
+}
 
+.bottom-0 {
 
+  bottom: 0px;
 
+}
 
+.left-0 {
 
+  left: 0px;
 
+}
 
+/* top-[3px] */
 
+/* z-[100] */
 
+
 
+/* 显示隐藏未脱离文档流 */
 
+.visible {
 
+  visibility: visible;
 
+}
 
+.invisible {
 
+  visibility: hidden;
 
+}
 
+
 
+/* 内边距 */
 
+.p-0 {
 
+  padding: 0px;
 
+}
 
+.px-0 {
 
+  padding-left: 0px;
 
+  padding-right: 0px;
 
+}
 
+.py-0 {
 
+  padding-top: 0px;
 
+  padding-bottom: 0px;
 
+}
 
+.pt-0 {
 
+  padding-top: 0px;
 
+}
 
+.pr-0 {
 
+  padding-right: 0px;
 
+}
 
+.pb-0 {
 
+  padding-bottom: 0px;
 
+}
 
+.pl-0 {
 
+  padding-left: 0px;
 
+}
 
+/* p-[5px] */
 
+
 
+/* 外边距 */
 
+.m-0 {
 
+  margin: 0px;
 
+}
 
+.mx-0 {
 
+  margin-left: 0px;
 
+  margin-right: 0px;
 
+}
 
+.my-0 {
 
+  margin-top: 0px;
 
+  margin-bottom: 0px;
 
+}
 
+.mt-0 {
 
+  margin-top: 0px;
 
+}
 
+.mr-0 {
 
+  margin-right: 0px;
 
+}
 
+.mb-0 {
 
+  margin-bottom: 0px;
 
+}
 
+.ml-0 {
 
+  margin-left: 0px;
 
+}
 
+/* m-[5px] */
 
+
 
+/* 宽度 */
 
+.w-full {
 
+  width: 100%;
 
+}
 
+.w-screen {
 
+  width: 100vw;
 
+}
 
+/* w-[32rem] */
 
+/* min-w-[50%] */
 
+/* max-w-[50%] */
 
+
 
+/* 高度 */
 
+.h-full {
 
+  height: 100%;
 
+}
 
+.h-screen {
 
+  height: 100vh;
 
+}
 
+/* h-[32rem] */
 
+/* min-h-[50%] */
 
+/* max-h-[32rem] */
 
+
 
+/* 字体 */
 
+.text-xs {
 
+  font-size: 0.75rem; /* 12px */
 
+  line-height: 1rem; /* 16px */
 
+}
 
+.text-sm {
 
+  font-size: 0.875rem; /* 14px */
 
+  line-height: 1.25rem; /* 20px */
 
+}
 
+.text-base {
 
+  font-size: 1rem; /* 16px */
 
+  line-height: 1.5rem; /* 24px */
 
+}
 
+.text-lg {
 
+  font-size: 1.125rem; /* 18px */
 
+  line-height: 1.75rem; /* 28px */
 
+}
 
+.text-xl {
 
+  font-size: 1.25rem; /* 20px */
 
+  line-height: 1.75rem; /* 28px */
 
+}
 
+.text-2xl {
 
+  font-size: 1.5rem; /* 24px */
 
+  line-height: 2rem; /* 32px */
 
+}
 
+.text-3xl {
 
+  font-size: 1.875rem; /* 30px */
 
+  line-height: 2.25rem; /* 36px */
 
+}
 
+.text-4xl {
 
+  font-size: 2.25rem; /* 36px */
 
+  line-height: 2.5rem; /* 40px */
 
+}
 
+.text-5xl {
 
+  font-size: 3rem; /* 48px */
 
+  line-height: 1;
 
+}
 
+.text-6xl {
 
+  font-size: 3.75rem; /* 60px */
 
+  line-height: 1;
 
+}
 
+.text-7xl {
 
+  font-size: 4.5rem; /* 72px */
 
+  line-height: 1;
 
+}
 
+.text-8xl {
 
+  font-size: 6rem; /* 96px */
 
+  line-height: 1;
 
+}
 
+.text-9xl {
 
+  font-size: 8rem; /* 128px */
 
+  line-height: 1;
 
+}
 
+/* text-[14px] */
 
+/* 字体粗细font-weight */
 
+/* font-[1100] */
 
+/* https://tailwindcss.com/docs/font-weight */
 
+/* 字体间距letter-spacing */
 
+/* tracking-[.25em] */
 
+/* 行高line-height */
 
+/* leading-[3rem] */
 
+/* 无列表样式 */
 
+.list-none {
 
+  list-style-type: none;
 
+}
 
+/* 小圆点 */
 
+.list-disc {
 
+  list-style-type: disc;
 
+}
 
+/* 数字列表 */
 
+.list-decimal {
 
+  list-style-type: decimal;
 
+}
 
+.text-left {
 
+  text-align: left;
 
+}
 
+.text-center {
 
+  text-align: center;
 
+}
 
+.text-right {
 
+  text-align: right;
 
+}
 
+/* 所有文本头尾对齐 */
 
+.text-justify {
 
+  text-align: justify;
 
+}
 
+/* 文本颜色 */
 
+/* text-[#50d71e] */
 
+/* https://tailwindcss.com/docs/text-color */
 
+/* 下划线 */
 
+.underline {
 
+  text-decoration-line: underline;
 
+}
 
+/* 上划线 */
 
+.overline {
 
+  text-decoration-line: overline;
 
+}
 
+/* 中划线 */
 
+.line-through {
 
+  text-decoration-line: line-through;
 
+}
 
+/* 无划线 */
 
+.no-underline {
 
+  text-decoration-line: none;
 
+}
 
+/* 全小写 */
 
+.lowercase {
 
+  text-transform: lowercase;
 
+}
 
+/* 全大写 */
 
+.uppercase {
 
+  text-transform: uppercase;
 
+}
 
+/* 首字母大写 */
 
+.capitalize {
 
+  text-transform: capitalize;
 
+}

+ 622 - 0
cokingCoal/styles/cokingCoalB.css
View File 

@@ -0,0 +1,622 @@
 
+*,
 
+*:before,
 
+*:after {
 
+  padding: 0;
 
+  margin: 0;
 
+  box-sizing: border-box;
 
+}
 
+html,
 
+body {
 
+  height: 100%;
 
+  font-size: 14px;
 
+  background-color: #ecffff;
 
+  font-family: 'Microsoft YaHei', 'Helvetica Neue', Helvetica, 'PingFang SC',
 
+    'Hiragino Sans GB', Arial, sans-serif;
 
+}
 
+
 
+.flex {
 
+  display: flex;
 
+}
 
+.flex1 {
 
+  flex: 1;
 
+}
 
+.flex2 {
 
+  flex: 2;
 
+}
 
+.flex-around {
 
+  display: flex;
 
+  justify-content: space-around;
 
+}
 
+.flex-between {
 
+  display: flex;
 
+  justify-content: space-between;
 
+  align-items: center;
 
+}
 
+.flex-end {
 
+  display: flex;
 
+  justify-content: flex-end;
 
+}
 
+.flex-align-center {
 
+  display: flex;
 
+  align-items: center;
 
+}
 
+.text-center {
 
+  text-align: center;
 
+}
 
+.font12 {
 
+  font-size: 12px;
 
+}
 
+.main-color {
 
+  color: #0bf1ff;
 
+}
 
+.danger-color {
 
+  color: #f15450 !important;
 
+}
 
+.error-color {
 
+  color: #ffc704 !important;
 
+}
 
+.btm10 {
 
+  margin-bottom: 10px;
 
+}
 
+.btm20 {
 
+  margin-bottom: 20px;
 
+}
 
+a {
 
+  text-decoration: none;
 
+  cursor: pointer;
 
+}
 
+
 
+[v-cloak] {
 
+  display: none;
 
+}
 
+#app {
 
+  background: url('../images/top-back2.png') center center no-repeat;
 
+  background-size: 100% 103%;
 
+  padding-top: 10px;
 
+  height: 100vh;
 
+  overflow: hidden;
 
+  color: #fff;
 
+}
 
+.my-header {
 
+  height: 70px;
 
+  line-height: 70px;
 
+  background: url('../images/title-back.png') center center no-repeat;
 
+  background-size: 100% 100%;
 
+  color: #0bf1ff;
 
+  text-align: center;
 
+  font-size: 25px;
 
+  font-weight: 600;
 
+}
 
+.my-header span {
 
+  background-image: -webkit-linear-gradient(top, #fff, #99eeff);
 
+  -webkit-background-clip: text;
 
+  -webkit-text-fill-color: transparent;
 
+}
 
+.main {
 
+  padding: 15px;
 
+  height: calc(100% - 70px);
 
+  /* background: url('../images/content-bg.png') no-repeat center bottom; */
 
+  background-size: 80%;
 
+  display: grid;
 
+  grid-template-columns: 30% 40% 30%;
 
+  padding-bottom: 65px;
 
+}
 
+.footer {
 
+  position: fixed;
 
+  bottom: 0;
 
+  padding: 10px;
 
+  display: flex;
 
+  background-color: rgba(0, 0, 0, 0.5);
 
+  width: 100%;
 
+  background: url('../images/foot-back.png') no-repeat center bottom;
 
+  background-size: 100% 100%;
 
+}
 
+.footer a {
 
+  height: 40px;
 
+  line-height: 40px;
 
+  text-align: center;
 
+  color: #fff;
 
+  background: url('../images/footer-item.png') no-repeat;
 
+  background-size: 100% 100%;
 
+  width: 200px;
 
+}
 
+.footer a:hover {
 
+  background: url('../images/footer-item-checked.png') no-repeat;
 
+  background-size: 100% 100%;
 
+}
 
+.my-header span.rightTime {
 
+  position: absolute;
 
+  right: 100px;
 
+  bottom: 10px;
 
+  font-size: 14px;
 
+}
 
+.left,
 
+.right {
 
+  display: grid;
 
+  grid-template-rows: repeat(2, minmax(0, 1fr));
 
+  gap: 10px;
 
+}
 
+.right {
 
+  grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
 
+}
 
+.left-top,
 
+.left-bottom,
 
+.right-bottom,
 
+.right-top {
 
+  width: 100%;
 
+  height: 100%;
 
+  padding: 10px;
 
+  background: url('../images/rb-back.png') no-repeat;
 
+  background-size: 100% 100%;
 
+}
 
+.left-top-content,
 
+.left-bottom-content,
 
+.right-top-content,
 
+.right-bottom-content {
 
+  height: calc(100% - 50px);
 
+}
 
+.loopBack {
 
+  background: url('../images/loop.png') no-repeat center;
 
+  background-size: 60% auto;
 
+}
 
+.center {
 
+  padding: 10px;
 
+}
 
+.center-top {
 
+  height: 80px;
 
+  display: grid;
 
+  grid-template-columns: repeat(2, minmax(0, 1fr));
 
+  gap: 10px;
 
+}
 
+.center-top > div {
 
+  height: 100%;
 
+  background-size: 100% 100%;
 
+}
 
+.center-top > div:nth-child(1) {
 
+  background: url('../images/man.png') no-repeat center;
 
+}
 
+.center-top > div:nth-child(2) {
 
+  background: url('../images/woman.png') no-repeat center;
 
+}
 
+.top-text span {
 
+  color: #69c0ff;
 
+  font-size: 18px;
 
+  font-weight: bold;
 
+  font-style: italic;
 
+  margin-right: 5px;
 
+}
 
+.right-top-content-top {
 
+  display: grid;
 
+  grid-template-columns: repeat(2, minmax(0, 1fr));
 
+  grid-template-rows: repeat(2, minmax(0, 1fr));
 
+  width: 100%;
 
+  height: 100%;
 
+  gap: 10px;
 
+}
 
+.right-top-content-top > div {
 
+  padding-left: 70px;
 
+}
 
+.right-top-content-top > div:nth-child(1) {
 
+  background: url('../images/right-top-img1.png') no-repeat center;
 
+  background-size: 100% auto;
 
+}
 
+.right-top-content-top > div:nth-child(2) {
 
+  background: url('../images/right-top-img2.png') no-repeat center;
 
+  background-size: 100% auto;
 
+}
 
+.right-top-content-top > div:nth-child(3) {
 
+  background: url('../images/right-top-img3.png') no-repeat center;
 
+  background-size: 100% auto;
 
+}
 
+.right-top-content-top > div:nth-child(4) {
 
+  background: url('../images/right-top-img4.png') no-repeat center;
 
+  background-size: 100% auto;
 
+}
 
+.right-top-content-bottom {
 
+  height: calc(100% - 80px);
 
+}
 
+/* zhb */
 
+/* 宽高纵横比 */
 
+.aspect-auto {
 
+  aspect-ratio: auto;
 
+}
 
+.aspect-square {
 
+  aspect-ratio: 1 / 1;
 
+}
 
+.aspect-video {
 
+  aspect-ratio: 16 / 9;
 
+}
 
+/* aspect-[4/3] */
 
+
 
+/* 居中 */
 
+.mx-auto {
 
+  margin: 0 auto;
 
+}
 
+
 
+/* 设置容器内的列数/每列距离 */
 
+.columns-1 {
 
+  columns: 1;
 
+}
 
+/* columns-[20px] */
 
+
 
+/* 盒子模型 */
 
+.box-border {
 
+  box-sizing: border-box;
 
+}
 
+.box-content {
 
+  box-sizing: content-box;
 
+}
 
+/* 消失 */
 
+.hidden {
 
+  display: none;
 
+}
 
+
 
+/* 块级元素 */
 
+.block {
 
+  display: block;
 
+}
 
+/* 行内块 */
 
+.inline-block {
 
+  display: inline-block;
 
+}
 
+/* 行内元素 */
 
+.inline {
 
+  display: inline;
 
+}
 
+
 
+/* 弹性布局 */
 
+.flex {
 
+  display: flex;
 
+}
 
+/* 主轴起点在左边 */
 
+.flex-row {
 
+  flex-direction: row;
 
+}
 
+/* 主轴起点在右边 */
 
+.flex-row-reverse {
 
+  flex-direction: row-reverse;
 
+}
 
+/* 主轴竖向排列，在上面 */
 
+.flex-col {
 
+  flex-direction: column;
 
+}
 
+/* 主轴竖向排列，在下面 */
 
+.flex-col-reverse {
 
+  flex-direction: column-reverse;
 
+}
 
+/* 自动换行 */
 
+.flex-wrap {
 
+  flex-wrap: wrap;
 
+}
 
+/* 自动换行下起点 */
 
+.flex-wrap-reverse {
 
+  flex-wrap: wrap-reverse;
 
+}
 
+/* 不换行 */
 
+.flex-nowrap {
 
+  flex-wrap: nowrap;
 
+}
 
+/* 弹性成长 */
 
+.grow {
 
+  flex-grow: 1;
 
+}
 
+/* 不允许弹性成长 */
 
+.grow-0 {
 
+  flex-grow: 0;
 
+}
 
+/* 主轴从左开始 */
 
+.justify-start {
 
+  justify-content: flex-start;
 
+}
 
+/* 主轴从右开始 */
 
+.justify-end {
 
+  justify-content: flex-end;
 
+}
 
+/* 主轴剧中 */
 
+.justify-center {
 
+  justify-content: center;
 
+}
 
+/* 主轴两端无间隔 */
 
+.justify-between {
 
+  justify-content: space-between;
 
+}
 
+/* 主轴两端有间隔 */
 
+.justify-around {
 
+  justify-content: space-around;
 
+}
 
+/* 所有间隔相等 */
 
+.justify-evenly {
 
+  justify-content: space-evenly;
 
+}
 
+/* 纵向起点最上方 */
 
+.items-start {
 
+  align-items: flex-start;
 
+}
 
+/* 纵向起点最下方 */
 
+.items-end {
 
+  align-items: flex-end;
 
+}
 
+.items-center {
 
+  align-items: center;
 
+}
 
+/* 网格布局 */
 
+.grid {
 
+  display: grid;
 
+}
 
+/* 有几列 */
 
+.grid-cols-4 {
 
+  grid-template-columns: repeat(4, minmax(0, 1fr));
 
+}
 
+/* 有几行 */
 
+.grid-rows-3 {
 
+  grid-template-rows: repeat(3, minmax(0, 1fr));
 
+}
 
+
 
+/* 间距 */
 
+.gap-7 {
 
+  gap: 1.75rem;
 
+}
 
+/* 允许弹性成长 */
 
+.shrink {
 
+  flex-shrink: 1;
 
+}
 
+/* 不允许弹性成长 */
 
+.shrink-0 {
 
+  flex-shrink: 0;
 
+}
 
+/* 不允许成长也不允许收缩 */
 
+.flex-none {
 
+  flex: none;
 
+}
 
+/* 浮动布局 */
 
+.float-right {
 
+  float: right;
 
+}
 
+.float-left {
 
+  float: left;
 
+}
 
+.clear-both {
 
+  clear: both;
 
+}
 
+
 
+/* 溢出 */
 
+.overflow-auto {
 
+  overflow: auto;
 
+}
 
+.overflow-hidden {
 
+  overflow: hidden;
 
+}
 
+.overflow-scroll {
 
+  overflow: scroll;
 
+}
 
+.overflow-x-auto {
 
+  overflow-x: auto;
 
+}
 
+.overflow-y-auto {
 
+  overflow-y: auto;
 
+}
 
+
 
+/* 定位 */
 
+.fixed {
 
+  position: fixed;
 
+}
 
+.absolute {
 
+  position: absolute;
 
+}
 
+.relative {
 
+  position: relative;
 
+}
 
+.top-0 {
 
+  top: 0px;
 
+}
 
+.right-0 {
 
+  right: 0px;
 
+}
 
+.bottom-0 {
 
+  bottom: 0px;
 
+}
 
+.left-0 {
 
+  left: 0px;
 
+}
 
+/* top-[3px] */
 
+/* z-[100] */
 
+
 
+/* 显示隐藏未脱离文档流 */
 
+.visible {
 
+  visibility: visible;
 
+}
 
+.invisible {
 
+  visibility: hidden;
 
+}
 
+
 
+/* 内边距 */
 
+.p-0 {
 
+  padding: 0px;
 
+}
 
+.px-0 {
 
+  padding-left: 0px;
 
+  padding-right: 0px;
 
+}
 
+.py-0 {
 
+  padding-top: 0px;
 
+  padding-bottom: 0px;
 
+}
 
+.pt-0 {
 
+  padding-top: 0px;
 
+}
 
+.pr-0 {
 
+  padding-right: 0px;
 
+}
 
+.pb-0 {
 
+  padding-bottom: 0px;
 
+}
 
+.pl-0 {
 
+  padding-left: 0px;
 
+}
 
+/* p-[5px] */
 
+
 
+/* 外边距 */
 
+.m-0 {
 
+  margin: 0px;
 
+}
 
+.mx-0 {
 
+  margin-left: 0px;
 
+  margin-right: 0px;
 
+}
 
+.my-0 {
 
+  margin-top: 0px;
 
+  margin-bottom: 0px;
 
+}
 
+.mt-0 {
 
+  margin-top: 0px;
 
+}
 
+.mr-0 {
 
+  margin-right: 0px;
 
+}
 
+.mb-0 {
 
+  margin-bottom: 0px;
 
+}
 
+.ml-0 {
 
+  margin-left: 0px;
 
+}
 
+/* m-[5px] */
 
+
 
+/* 宽度 */
 
+.w-full {
 
+  width: 100%;
 
+}
 
+.w-screen {
 
+  width: 100vw;
 
+}
 
+/* w-[32rem] */
 
+/* min-w-[50%] */
 
+/* max-w-[50%] */
 
+
 
+/* 高度 */
 
+.h-full {
 
+  height: 100%;
 
+}
 
+.h-screen {
 
+  height: 100vh;
 
+}
 
+/* h-[32rem] */
 
+/* min-h-[50%] */
 
+/* max-h-[32rem] */
 
+
 
+/* 字体 */
 
+.text-xs {
 
+  font-size: 0.75rem; /* 12px */
 
+  line-height: 1rem; /* 16px */
 
+}
 
+.text-sm {
 
+  font-size: 0.875rem; /* 14px */
 
+  line-height: 1.25rem; /* 20px */
 
+}
 
+.text-base {
 
+  font-size: 1rem; /* 16px */
 
+  line-height: 1.5rem; /* 24px */
 
+}
 
+.text-lg {
 
+  font-size: 1.125rem; /* 18px */
 
+  line-height: 1.75rem; /* 28px */
 
+}
 
+.text-xl {
 
+  font-size: 1.25rem; /* 20px */
 
+  line-height: 1.75rem; /* 28px */
 
+}
 
+.text-2xl {
 
+  font-size: 1.5rem; /* 24px */
 
+  line-height: 2rem; /* 32px */
 
+}
 
+.text-3xl {
 
+  font-size: 1.875rem; /* 30px */
 
+  line-height: 2.25rem; /* 36px */
 
+}
 
+.text-4xl {
 
+  font-size: 2.25rem; /* 36px */
 
+  line-height: 2.5rem; /* 40px */
 
+}
 
+.text-5xl {
 
+  font-size: 3rem; /* 48px */
 
+  line-height: 1;
 
+}
 
+.text-6xl {
 
+  font-size: 3.75rem; /* 60px */
 
+  line-height: 1;
 
+}
 
+.text-7xl {
 
+  font-size: 4.5rem; /* 72px */
 
+  line-height: 1;
 
+}
 
+.text-8xl {
 
+  font-size: 6rem; /* 96px */
 
+  line-height: 1;
 
+}
 
+.text-9xl {
 
+  font-size: 8rem; /* 128px */
 
+  line-height: 1;
 
+}
 
+/* text-[14px] */
 
+/* 字体粗细font-weight */
 
+/* font-[1100] */
 
+/* https://tailwindcss.com/docs/font-weight */
 
+/* 字体间距letter-spacing */
 
+/* tracking-[.25em] */
 
+/* 行高line-height */
 
+/* leading-[3rem] */
 
+/* 无列表样式 */
 
+.list-none {
 
+  list-style-type: none;
 
+}
 
+/* 小圆点 */
 
+.list-disc {
 
+  list-style-type: disc;
 
+}
 
+/* 数字列表 */
 
+.list-decimal {
 
+  list-style-type: decimal;
 
+}
 
+.text-left {
 
+  text-align: left;
 
+}
 
+.text-center {
 
+  text-align: center;
 
+}
 
+.text-right {
 
+  text-align: right;
 
+}
 
+/* 所有文本头尾对齐 */
 
+.text-justify {
 
+  text-align: justify;
 
+}
 
+/* 文本颜色 */
 
+/* text-[#50d71e] */
 
+/* https://tailwindcss.com/docs/text-color */
 
+/* 下划线 */
 
+.underline {
 
+  text-decoration-line: underline;
 
+}
 
+/* 上划线 */
 
+.overline {
 
+  text-decoration-line: overline;
 
+}
 
+/* 中划线 */
 
+.line-through {
 
+  text-decoration-line: line-through;
 
+}
 
+/* 无划线 */
 
+.no-underline {
 
+  text-decoration-line: none;
 
+}
 
+/* 全小写 */
 
+.lowercase {
 
+  text-transform: lowercase;
 
+}
 
+/* 全大写 */
 
+.uppercase {
 
+  text-transform: uppercase;
 
+}
 
+/* 首字母大写 */
 
+.capitalize {
 
+  text-transform: capitalize;
 
+}

+ 25 - 5
cokingCoal/styles/cokingCoalD.css
View File 

@@ -155,15 +155,31 @@ a {
 
 }
 
 .red {
 
   color: #ed3248;
 
-}
 
-.red:after {
 
-  background: url('../images/up.png') no-repeat;
 
+  display: flex;
 
+  align-items: center;
 
 }
 
 .green {
 
   color: #39f6b2;
 
+  display: flex;
 
+  align-items: center;
 
+}
 
+.redImg {
 
+  display: inline-block;
 
+  background: url('../images/up.png') no-repeat;
 
+  background-size: 100% 100%;
 
+  width: 15px;
 
+  height: 14px;
 
+  flex-shrink: 0;
 
+  margin-left: 10px;
 
 }
 
-.green:after {
 
-  background: url('../images/down2.png') no-repeat;
 
+.greedImg {
 
+  display: inline-block;
 
+  background: url('../images/down2.png') no-repeat center;
 
+  background-size: 100% 100%;
 
+  width: 15px;
 
+  height: 14px;
 
+  flex-shrink: 0;
 
+  margin-left: 10px;
 
 }
 
 .row-item .ceil:nth-child(2):after {
 
   content: '';
 
@@ -175,6 +191,10 @@ a {
 
   position: relative;
 
   display: inline-block;
 
 }
 
+.listText {
 
+  width: 50px;
 
+  flex-shrink: 0;
 
+}
 
 .el-progress-bar__outer {
 
   background-color: #102f53;
 
   overflow: visible;

BIN
investment/images3/dinn1.png
View File


BIN
investment/images3/dinn2.png
View File


BIN
investment/images3/dinn3.png
View File


BIN
investment/images3/dinn4.png
View File


BIN
investment/images3/green.png
View File


BIN
investment/images3/red.png
View File


+ 139 - 109
investment/investHome3.html
View File 

@@ -62,125 +62,155 @@
 
             </dv-border-box-8>
 
           </div>
 
         </div>
 
-        <div class="center">
 
-          <div class="center-right">
 
-            <dv-border-box-8>
 
-              <div class="panel-title">
 
-                <span class="text">两个转型</span>
 
-              </div>
 
-              <div class="center-right-bottom">
 
-                <div ref="cl1" style="height:100%;width: 100%;"></div>
 
-                <div class="center-right-bottom-right flex items-center justify-center flex-col">
 
-                  <img src="./images3/group.png" alt="">
 
-                  <div class="center-right-bottom-right-text">24.12<span style="font-size: 14px;">亿</span></div>
 
-                  <div style="height:20px;line-height: 20px">数字转型实际投资</div>
 
-                </div>
 
-              </div>
 
-            </dv-border-box-8>
 
-          </div>
 
-          <div class="center-center">
 
-            <dv-border-box-8>
 
+        <div class="bottom-right">
 
+          <div class="bottom-right-left">
 
+            <div class="center-center">
 
               <div class="panel-title">
 
-                <span class="text">重点项目进度</span>
 
-              </div>
 
-              <div class="center-center-bottom">
 
-                <div>
 
-                  <div><span style="color:#3AF7FE;margin-right: 10px;">按进度排序</span><span
 
-                      style="color:#B889EA">偏差率排序</span></div>
 
-                  <div class="center-center-bottom-list">
 
-                    <p>煤焦化矿井升级改造项目</p>
 
-                    <el-progress percentage="80" color="#FBE139" :show-text="true"></el-progress>
 
-                    <p>煤焦化矿井升级改造项目</p>
 
-                    <el-progress percentage="30" color="#FBE139" :show-text="true"></el-progress>
 
-                    <p>煤焦化矿井升级改造项目</p>
 
-                    <el-progress percentage="60" color="#FBE139" :show-text="true"></el-progress>
 
+                <span class="text">煤炭增产保供</span>
 
+              </div>
 
+              <div class="bottom-right-left-content">
 
+                <div class="bottom-right-left-content-top">
 
+                  <div id="aiQuality5" class="mx-auto" style="width: 100%; height: 100%"></div>
 
+                  <div class="bottom-right-left-content-top-right">
 
+                    <div class="flex items-center">
 
+                      <img style="width:50px;height:50px;margin-right: 10px;" src="./images3/dinn1.png" alt="">
 
+                      <div class="flex flex-col">
 
+                        <span style="color:#69C0FF"><span
 
+                            style="font-size: 18px;font-weight: bold;">13.07</span>亿吨</span>
 
+                        <span>全年产量</span>
 
+                      </div>
 
+                    </div>
 
+                    <div class="flex items-center">
 
+                      <img style="width:50px;height:50px;margin-right: 10px;" src="./images3/dinn2.png" alt="">
 
+                      <div class="flex flex-col">
 
+                        <span style="color:#69C0FF"><span
 
+                            style="font-size: 18px;font-weight: bold;">13.07</span>亿吨</span>
 
+                        <span>全年产量</span>
 
+                      </div>
 
+                    </div>
 
+                    <div class="flex items-center">
 
+                      <img style="width:50px;height:50px;margin-right: 10px;" src="./images3/dinn3.png" alt="">
 
+                      <div class="flex flex-col">
 
+                        <span style="color:#69C0FF"><span
 
+                            style="font-size: 18px;font-weight: bold;">13.07</span>亿吨</span>
 
+                        <span>全年产量</span>
 
+                      </div>
 
+                    </div>
 
+                    <div class="flex items-center">
 
+                      <img style="width:50px;height:50px;margin-right: 10px;" src="./images3/dinn4.png" alt="">
 
+                      <div class="flex flex-col">
 
+                        <span style="color:#69C0FF"><span
 
+                            style="font-size: 18px;font-weight: bold;">13.07</span>亿吨</span>
 
+                        <span>全年产量</span>
 
+                      </div>
 
+                    </div>
 
                   </div>
 
                 </div>
 
-                <div class="center-center-bottom-right" style="margin-right: 10px;">
 
-                  <div></div>
 
-                  <div>总体偏离度</div>
 
-                  <div>+12%</div>
 
-                  <div>-5%</div>
 
-                  <div>+18%</div>
 
-                </div>
 
-              </div>
 
-            </dv-border-box-8>
 
-          </div>
 
-          <div class="center-left">
 
-            <dv-border-box-8>
 
-              <div class="panel-title">
 
-                <span class="text">项目风险画像</span>
 
-              </div>
 
-              <div class="center-left-bottom">
 
-                <div ref="cr1" style="height:100%;width: 100%;"></div>
 
-                <div class="flex justify-center items-center">
 
-                  <div class="center-left-bottom-list flex justify-center items-center flex-col">
 
-                    <span>维度</span>
 
-                    <span>进度</span>
 
-                    <span>质量</span>
 
-                    <span>预算</span>
 
-                    <span>证照</span>
 
-                    <span>合同</span>
 
+                <div class="bottom-right-left-content-bottom">
 
+                  <div>
 
+                    <div ref="tl7" style="height:100%;width: 100%;"></div>
 
+                  </div>
 
+                  <div class="bottom-right-left-content-bottom-bottom">
 
+                    <div class="flex items-center bottom-right-back relative">
 
+                      <img style="width:50px;height:50px;margin-right: 10px;" src="./images3/dinn4.png" alt="">
 
+                      <div class="flex flex-col justify-center items-center  ">
 
+                        <span style="color:#69C0FF"><span style="font-size: 18px;font-weight: bold;">37</span>座</span>
 
+                        <span>智能化煤矿累计值</span>
 
+                      </div>
 
+                      <div class="absolute flex items-center arrow">
 
+                        <img src="./images3/green.png" alt="" style="wdith:15px;height:15px">
 
+                        <span style="color:green">5.8%</span>
 
+                      </div>
 
+                    </div>
 
+                    <div class="flex items-center bottom-right-back relative">
 
+                      <img style="width:50px;height:50px;margin-right: 10px;" src="./images3/dinn4.png" alt="">
 
+                      <div class="flex flex-col justify-center items-center relative ">
 
+                        <span style="color:#69C0FF"><span style="font-size: 18px;font-weight: bold;">993</span>处</span>
 
+                        <span>智能化采掘工作面</span>
 
+                      </div>
 
+                      <div class="absolute flex items-center arrow">
 
+                        <img src="./images3/red.png" alt="" style="wdith:15px;height:15px">
 
+                        <span style="color:red">5.8%</span>
 
+                      </div>
 
+                    </div>
 
                   </div>
 
                 </div>
 
               </div>
 
-            </dv-border-box-8>
 
-          </div>
 
-        </div>
 
-        <div class="footer">
 
-          <div class="footer-right">
 
-            <dv-border-box-8>
 
-              <div class="panel-title">
 
-                <span class="text">五个一体化</span>
 
-              </div>
 
-              <div class="footer-right-bottom flex justify-around flex-col">
 
-                <p>煤焦化矿井升级改造项目</p>
 
-                <div class="flex items-center">
 
-                  <el-progress percentage="80" color="#FBE139" :show-text="false"></el-progress>
 
-                  <span style="margin-left: 20px;">230.10亿</span>
 
-                </div>
 
-                <p>煤炭和新能源一体化</p>
 
-                <div class="flex items-center">
 
-                  <el-progress percentage="50" color="#FBE139" :show-text="false"></el-progress>
 
-                  <span style="margin-left: 20px;">200.1亿</span>
 
-                </div>
 
-                <p>煤炭和新能源一体化</p>
 
-                <div class="flex items-center">
 
-                  <el-progress percentage="20" color="#FBE139" :show-text="false"></el-progress>
 
-                  <span style="margin-left: 20px;">160亿</span>
 
-                </div>
 
-                <p>煤炭和数字技术一体化</p>
 
-                <div class="flex items-center">
 
-                  <el-progress percentage="40" color="#FBE139" :show-text="false"></el-progress>
 
-                  <span style="margin-left: 20px;">143亿</span>
 
-                </div>
 
-                <p>煤炭和降碳一体化</p>
 
-                <div class="flex items-center">
 
-                  <el-progress percentage="10" color="#FBE139" :show-text="false"></el-progress>
 
-                  <span style="margin-left: 20px;">140亿</span>
 
-                </div>
 
-              </div>
 
-            </dv-border-box-8>
 
+            </div>
 
           </div>
 
-          <div class="footer-center">
 
-            <dv-border-box-8>
 
-              <div class="panel-title">
 
-                <span class="text">项目成本分析</span>
 
-              </div>
 
-              <div class="footer-center-bottom">
 
-                <div id="aiQuality2" class="mx-auto" style="width: 100%; height: 100%"></div>
 
+          <div class="bottom-right-right">
 
+            <div class="center">
 
+              <div class="center-center">
 
+                <dv-border-box-8>
 
+                  <div class="panel-title">
 
+                    <span class="text">重点项目进度</span>
 
+                  </div>
 
+                  <div class="center-center-bottom">
 
+                    <div>
 
+                      <div><span style="color:#3AF7FE;margin-right: 10px;">按进度排序</span><span
 
+                          style="color:#B889EA">偏差率排序</span></div>
 
+                      <div class="center-center-bottom-list">
 
+                        <p>煤焦化矿井升级改造项目</p>
 
+                        <el-progress percentage="80" color="#FBE139" :show-text="true"></el-progress>
 
+                        <p>煤焦化矿井升级改造项目</p>
 
+                        <el-progress percentage="30" color="#FBE139" :show-text="true"></el-progress>
 
+                        <p>煤焦化矿井升级改造项目</p>
 
+                        <el-progress percentage="60" color="#FBE139" :show-text="true"></el-progress>
 
+                      </div>
 
+                    </div>
 
+                    <div class="center-center-bottom-right" style="margin-right: 10px;">
 
+                      <div></div>
 
+                      <div>总体偏离度</div>
 
+                      <div>+12%</div>
 
+                      <div>-5%</div>
 
+                      <div>+18%</div>
 
+                    </div>
 
+                  </div>
 
+                </dv-border-box-8>
 
               </div>
 
-            </dv-border-box-8>
 
-          </div>
 
-          <div class="footer-left">
 
-            <dv-border-box-8>
 
-              <div class="panel-title">
 
-                <span class="text">风险事项列表</span>
 
+              <div class="center-left">
 
+                <dv-border-box-8>
 
+                  <div class="panel-title">
 
+                    <span class="text">项目风险画像</span>
 
+                  </div>
 
+                  <div class="center-left-bottom">
 
+                    <div ref="cr1" style="height:100%;width: 100%;"></div>
 
+                    <div class="flex justify-center items-center">
 
+                      <div class="center-left-bottom-list flex justify-center items-center flex-col">
 
+                        <span>维度</span>
 
+                        <span>进度</span>
 
+                        <span>质量</span>
 
+                        <span>预算</span>
 
+                        <span>证照</span>
 
+                        <span>合同</span>
 
+                      </div>
 
+                    </div>
 
+                  </div>
 
+                </dv-border-box-8>
 
+              </div>
 
+            </div>
 
+            <div class="footer">
 
+              <div class="footer-center">
 
+                <dv-border-box-8>
 
+                  <div class="panel-title">
 
+                    <span class="text">项目成本分析</span>
 
+                  </div>
 
+                  <div class="footer-center-bottom">
 
+                    <div id="aiQuality2" class="mx-auto" style="width: 100%; height: 100%"></div>
 
+                  </div>
 
+                </dv-border-box-8>
 
               </div>
 
-              <div class="footer-left-bottom">
 
-                <dv-scroll-board :config="config5" style="width: 100%; height: 80%" />
 
+              <div class="footer-left">
 
+                <dv-border-box-8>
 
+                  <div class="panel-title">
 
+                    <span class="text">风险事项列表</span>
 
+                  </div>
 
+                  <div class="footer-left-bottom">
 
+                    <dv-scroll-board :config="config5" style="width: 100%; height: 80%" />
 
+                  </div>
 
+                </dv-border-box-8>
 
               </div>
 
-            </dv-border-box-8>
 
+            </div>
 
           </div>
 
         </div>
 
       </div>

+ 192 - 0
investment/investHome3compound.html
View File 

@@ -0,0 +1,192 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+  <meta charset="utf-8" />
 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
 
+  <!-- 引入样式 -->
 
+  <link rel="stylesheet" href="./styles/element-ui@2.15.9.css" />
 
+  <!-- <link rel="stylesheet" href="./styles/normalize.css" /> -->
 
+  <link rel="stylesheet" href="./styles/investHome3compound.css" />
 
+  <!-- 引入js -->
 
+  <script src="./libs/vue@2.7.10.js"></script>
 
+  <script src="./libs/datav.min2.js"></script>
 
+  <script src="./libs/echarts.min.js"></script>
 
+  <script src="./libs/element-ui@2.15.9.js"></script>
 
+  <script src="./libs/axios.min.js"></script>
 
+  <script src="./js/request.js"></script>
 
+  <script src="./libs/echarts-tooltip-carousel.js"></script>
 
+</head>
 
+
 
+<body>
 
+  <div id="app">
 
+    <dv-full-screen-container>
 
+      <header class="my-header">
 
+        <span>投资管理数智中心</span>
 
+        <span class="right">{{time}}</span>
 
+      </header>
 
+      <div class="main">
 
+        <div class="top">
 
+          <div class="top-left">
 
+            <dv-border-box-8>
 
+              <div class="panel-title">
 
+                <span class="text">投资关键指标</span>
 
+              </div>
 
+              <div class="top-left-bottom flex items-center justify-between">
 
+                <div class="top-left-bottom-left flex items-center justify-center">
 
+                  <img src="./images3/light.png" alt="">
 
+                  <div class="num">651<span style="font-size: 14px;font-weight: normal;">个</span></div>
 
+                </div>
 
+                <div class="top-left-bottom-right flex items-center">
 
+                  <div ref="tl1" style="height:100%;width: 25%;"></div>
 
+                  <div ref="tl2" style="height:100%;width: 25%;"></div>
 
+                  <div ref="tl3" style="height:100%;width: 25%;"></div>
 
+                  <div ref="tl4" style="height:100%;width: 25%;"></div>
 
+                </div>
 
+              </div>
 
+            </dv-border-box-8>
 
+          </div>
 
+          <div class="top-right">
 
+            <dv-border-box-8>
 
+              <div class="panel-title">
 
+                <span class="text">投资额完成分析</span>
 
+              </div>
 
+              <div class="top-right-bottom">
 
+                <div id="aiQuality" class="mx-auto" style="width: 100%; height: 100%"></div>
 
+              </div>
 
+              <div class="downList  flex items-center justify-center">
 
+                <span>2023</span>
 
+                <img src="./images3/down.png" alt="">
 
+              </div>
 
+            </dv-border-box-8>
 
+          </div>
 
+        </div>
 
+        <div class="center">
 
+          <div class="center-right">
 
+            <dv-border-box-8>
 
+              <div class="panel-title">
 
+                <span class="text">两个转型</span>
 
+              </div>
 
+              <div class="center-right-bottom">
 
+                <div ref="cl1" style="height:100%;width: 100%;"></div>
 
+                <div class="center-right-bottom-right flex items-center justify-center flex-col">
 
+                  <img src="./images3/group.png" alt="">
 
+                  <div class="center-right-bottom-right-text">24.12<span style="font-size: 14px;">亿</span></div>
 
+                  <div style="height:20px;line-height: 20px">数字转型实际投资</div>
 
+                </div>
 
+              </div>
 
+            </dv-border-box-8>
 
+          </div>
 
+          <div class="center-center">
 
+            <dv-border-box-8>
 
+              <div class="panel-title">
 
+                <span class="text">重点项目进度</span>
 
+              </div>
 
+              <div class="center-center-bottom">
 
+                <div>
 
+                  <div><span style="color:#3AF7FE;margin-right: 10px;">按进度排序</span><span
 
+                      style="color:#B889EA">偏差率排序</span></div>
 
+                  <div class="center-center-bottom-list">
 
+                    <p>煤焦化矿井升级改造项目</p>
 
+                    <el-progress percentage="80" color="#FBE139" :show-text="true"></el-progress>
 
+                    <p>煤焦化矿井升级改造项目</p>
 
+                    <el-progress percentage="30" color="#FBE139" :show-text="true"></el-progress>
 
+                    <p>煤焦化矿井升级改造项目</p>
 
+                    <el-progress percentage="60" color="#FBE139" :show-text="true"></el-progress>
 
+                  </div>
 
+                </div>
 
+                <div class="center-center-bottom-right" style="margin-right: 10px;">
 
+                  <div></div>
 
+                  <div>总体偏离度</div>
 
+                  <div>+12%</div>
 
+                  <div>-5%</div>
 
+                  <div>+18%</div>
 
+                </div>
 
+              </div>
 
+            </dv-border-box-8>
 
+          </div>
 
+          <div class="center-left">
 
+            <dv-border-box-8>
 
+              <div class="panel-title">
 
+                <span class="text">项目风险画像</span>
 
+              </div>
 
+              <div class="center-left-bottom">
 
+                <div ref="cr1" style="height:100%;width: 100%;"></div>
 
+                <div class="flex justify-center items-center">
 
+                  <div class="center-left-bottom-list flex justify-center items-center flex-col">
 
+                    <span>维度</span>
 
+                    <span>进度</span>
 
+                    <span>质量</span>
 
+                    <span>预算</span>
 
+                    <span>证照</span>
 
+                    <span>合同</span>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+            </dv-border-box-8>
 
+          </div>
 
+        </div>
 
+        <div class="footer">
 
+          <div class="footer-right">
 
+            <dv-border-box-8>
 
+              <div class="panel-title">
 
+                <span class="text">五个一体化</span>
 
+              </div>
 
+              <div class="footer-right-bottom flex justify-around flex-col">
 
+                <p>煤焦化矿井升级改造项目</p>
 
+                <div class="flex items-center">
 
+                  <el-progress percentage="80" color="#FBE139" :show-text="false"></el-progress>
 
+                  <span style="margin-left: 20px;">230.10亿</span>
 
+                </div>
 
+                <p>煤炭和新能源一体化</p>
 
+                <div class="flex items-center">
 
+                  <el-progress percentage="50" color="#FBE139" :show-text="false"></el-progress>
 
+                  <span style="margin-left: 20px;">200.1亿</span>
 
+                </div>
 
+                <p>煤炭和新能源一体化</p>
 
+                <div class="flex items-center">
 
+                  <el-progress percentage="20" color="#FBE139" :show-text="false"></el-progress>
 
+                  <span style="margin-left: 20px;">160亿</span>
 
+                </div>
 
+                <p>煤炭和数字技术一体化</p>
 
+                <div class="flex items-center">
 
+                  <el-progress percentage="40" color="#FBE139" :show-text="false"></el-progress>
 
+                  <span style="margin-left: 20px;">143亿</span>
 
+                </div>
 
+                <p>煤炭和降碳一体化</p>
 
+                <div class="flex items-center">
 
+                  <el-progress percentage="10" color="#FBE139" :show-text="false"></el-progress>
 
+                  <span style="margin-left: 20px;">140亿</span>
 
+                </div>
 
+              </div>
 
+            </dv-border-box-8>
 
+          </div>
 
+          <div class="footer-center">
 
+            <dv-border-box-8>
 
+              <div class="panel-title">
 
+                <span class="text">项目成本分析</span>
 
+              </div>
 
+              <div class="footer-center-bottom">
 
+                <div id="aiQuality2" class="mx-auto" style="width: 100%; height: 100%"></div>
 
+              </div>
 
+            </dv-border-box-8>
 
+          </div>
 
+          <div class="footer-left">
 
+            <dv-border-box-8>
 
+              <div class="panel-title">
 
+                <span class="text">风险事项列表</span>
 
+              </div>
 
+              <div class="footer-left-bottom">
 
+                <dv-scroll-board :config="config5" style="width: 100%; height: 80%" />
 
+              </div>
 
+            </dv-border-box-8>
 
+          </div>
 
+        </div>
 
+      </div>
 
+    </dv-full-screen-container>
 
+  </div>
 
+  <script src="./js/investHome3compound.js"></script>
 
+</body>
 
+
 
+</html>

+ 39 - 0
investment/investHomeChild.html
View File 

@@ -0,0 +1,39 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+  <meta charset="utf-8" />
 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
 
+  <!-- 引入样式 -->
 
+  <link rel="stylesheet" href="./styles/element-ui@2.15.9.css" />
 
+  <link rel="stylesheet" href="./styles/normalize.css" />
 
+  <link rel="stylesheet" href="./styles/investHome.css" />
 
+  <!-- 引入js -->
 
+  <script src="./libs/vue@2.7.10.js"></script>
 
+  <script src="./libs/datav.min.js"></script>
 
+  <script src="./libs/echarts.min.js"></script>
 
+  <script src="./libs/element-ui@2.15.9.js"></script>
 
+  <script src="./libs/axios.min.js"></script>
 
+  <script src="./js/request.js"></script>
 
+  <script src="./libs/vue-seamless-scroll.min.js"></script>
 
+  <script src="./libs/echarts-tooltip-carousel.js"></script>
 
+</head>
 
+
 
+<body>
 
+  <div id="app">
 
+    <!-- <dv-full-screen-container> -->
 
+    <header class="my-header">
 
+      <span>投资管理数智中心</span>
 
+      <span class="right">{{time}}</span>
 
+    </header>
 
+    <div class="main"></div>
 
+    <!-- <div class="footer">
 
+          <a class="item" v-for="(item,index) in companyList" :key="index">{{item.name}}</a>
 
+        </div> -->
 
+    <!-- </dv-full-screen-container> -->
 
+  </div>
 
+  <script src="./js/investHome.js"></script>
 
+</body>
 
+
 
+</html>

+ 1 - 1
investment/js/investHome.js
View File 

@@ -41,7 +41,7 @@ let app = new Vue({
 
     }
 
   },
 
   created () {
 
-    this.amountList.map(item=> {
 
+    this.amountList.map(item => {
 
       this.amountTotal += Number(item.value)
 
     })
 
     this.time = formatDate()

+ 211 - 1
investment/js/investHome3.js
View File 

@@ -38,13 +38,223 @@ let app = new Vue({
 
       this.initChartL2()
 
       this.initChartL3()
 
       this.initChartL4()
 
-      this.initChartL5()
 
+      // this.initChartL5()
 
       this.initChartL6()
 
+      this.initChartL7()
 
       this.aiQualityECharts();
 
       this.aiQualityECharts2();
 
+      this.aiQualityECharts5();
 
     })
 
   },
 
   methods: {
 
+    aiQualityECharts5 () {
 
+      let chart = echarts.init(document.getElementById("aiQuality5"));
 
+      let option = {
 
+        grid: {
 
+          top: 35,
 
+          right: 40,
 
+          left: 60,
 
+          bottom: 20,
 
+        },
 
+        tooltip: {
 
+          show: true,
 
+          trigger: "axis",
 
+          axisPointer: {
 
+            // 坐标轴指示器，坐标轴触发有效
 
+            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
 
+          },
 
+        },
 
+        xAxis: {
 
+          data: ["集团本部", "晋能控股", "潞安化工"],
 
+          axisTick: {
 
+            show: false,
 
+          },
 
+          // x轴的字体颜色
 
+          axisLabel: {
 
+            textStyle: {
 
+              color: "white",
 
+            },
 
+          },
 
+          //y轴线的颜色以及宽度
 
+          axisLine: {
 
+            show: true,
 
+            lineStyle: {
 
+              color: "#1E5389",
 
+              width: 1,
 
+              type: "solid",
 
+            },
 
+          },
 
+        },
 
+        yAxis: {
 
+          name: '亿元',
 
+          nameTextStyle: {//y轴上方单位的颜色
 
+            color: '#fff',
 
+          },
 
+          axisTick: {
 
+            lineStyle: {
 
+              color: "#18416F",
 
+            },
 
+          },
 
+          // y轴的字体颜色
 
+          axisLabel: {
 
+            textStyle: {
 
+              color: "white",
 
+            },
 
+          },
 
+          splitLine: {
 
+            show: false,
 
+            lineStyle: {
 
+              color: "#204561",
 
+              width: 1,
 
+              type: "dotted",
 
+            },
 
+          },
 
+          //y轴线的颜色以及宽度
 
+          axisLine: {
 
+            show: true,
 
+            lineStyle: {
 
+              color: "#1E5389",
 
+              width: 1,
 
+              type: "solid",
 
+            },
 
+          },
 
+        },
 
+        series: [
 
+          {
 
+            name: "计划投资额",
 
+            type: "bar",
 
+            data: [1200, 680, 562, 268, 717, 843, 987, 126, 723, 569],
 
+            showBackground: false,
 
+            backgroundStyle: {
 
+              color: "#18416F",
 
+            },
 
+            barWidth: "10%",
 
+            itemStyle: {
 
+              barBorderRadius: [10, 10, 0, 0],
 
+              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
 
+                {
 
+                  offset: 0,
 
+                  color: "#132543",
 
+                }, //柱图渐变色
 
+                {
 
+                  offset: 1,
 
+                  color: "#897DFF",
 
+                },
 
+              ]),
 
+            },
 
+          },
 
+          {
 
+            name: "实际投资额",
 
+            type: "bar",
 
+            data: [658, 1125, 658, 999, 643, 675, 743, 724, 733, 725],
 
+            showBackground: false,
 
+            backgroundStyle: {
 
+              color: "#18416F",
 
+            },
 
+            barWidth: "10%",
 
+            itemStyle: {
 
+              barBorderRadius: [10, 10, 0, 0],
 
+              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
 
+                {
 
+                  offset: 0,
 
+                  color: "#132543",
 
+                }, //柱图渐变色
 
+                {
 
+                  offset: 1,
 
+                  color: "#FED95B",
 
+                },
 
+              ]),
 
+            },
 
+          },
 
+        ],
 
+        legend: {
 
+          data: ["计划投资额", "实际投资额"],
 
+          textStyle: {
 
+            // 图列内容样式
 
+            color: "#fff", // 字体颜色
 
+            // fontSize: "10",
 
+          },
 
+          right: 30,
 
+          icon: "roundRect",
 
+          // 小图标的宽高
 
+          itemHeight: 5,
 
+        },
 
+      };
 
+      chart.setOption(option);
 
+      tools.loopShowTooltip(chart, option, {
 
+        interval: 2000,
 
+        loopSeries: true,
 
+      });
 
+    },
 
+    initChartL7 () {
 
+      let myChart = echarts.init(this.$refs['tl7'])
 
+      let option = {
 
+        grid: {
 
+          top: 0,
 
+          right: 0,
 
+          left: 0,
 
+          bottom: 0,
 
+        },
 
+        tooltip: {
 
+          trigger: 'item',
 
+          position: [10, 10]
 
+        },
 
+        extraCssText: 'width:160px;height:40px;background:red;',
 
+        color: ['#6682f5', '#40A9FF'],
 
+        legend: {
 
+          // icon: 'circle',
 
+          bottom: 0,
 
+          left: 'center',
 
+          // itemHeight: 10,
 
+          // itemWidth: 10,
 
+          textStyle: {
 
+            color: '#9DB9EB',
 
+          },
 
+        },
 
+        graphic: {
 
+          elements: [{
 
+            type: "text",
 
+            left: "center",
 
+            top: "77%",
 
+            style: {
 
+              text: "投资类别",
 
+              textAlign: "center",
 
+              fill: "#fff",
 
+              fontSize: 15,
 
+              fontWeight: 500
 
+            }
 
+          }]
 
+        },
 
+        series: [
 
+          {
 
+            center: ['50%', '40%'],
 
+            radius: ['45%', '60%'],
 
+            name: '',
 
+            type: 'pie',
 
+            labelLine: {
 
+              normal: {
 
+                lineStyle: {
 
+                  width: 1,
 
+                },
 
+              },
 
+            },
 
+            label: {
 
+              show: false,
 
+              position: 'center'
 
+            },
 
+            data: [
 
+              { value: 1048, name: '数据1' },
 
+              { value: 735, name: '数据2' }
 
+            ],
 
+          },
 
+        ],
 
+      }
 
+      tools.loopShowTooltip(myChart, option, {
 
+        interval: 2000,
 
+        loopSeries: true,
 
+      });
 
+      myChart.setOption(option)
 
+    },
 
     initChartL1 () {
 
       let myChart = echarts.init(this.$refs['tl1'])
 
       let option = {

+ 777 - 0
investment/js/investHome3compound.js
View File 

@@ -0,0 +1,777 @@
 
+let app = new Vue({
 
+  el: '#app',
 
+  data () {
 
+    return {
 
+      time: '',
 
+      timer: '',
 
+      config5: {
 
+        waitTime: 2000,
 
+        header: ["风险类型", "风险说明", '提出人', '时间', '风险等级'],
 
+        data: [
 
+          ["风险等级", "WBS:012工程", "杨志宇", "2022.9.12", '<span class="lightOut"><span class="blue">一级</span></span>'],
 
+          ["风险等级", "WBS:012工程", "杨志宇", "2022.9.12", '<span class="lightOut"><span class="yellow">二级</span></span>'],
 
+          ["风险等级", "WBS:012工程", "杨志宇", "2022.9.12", '<span class="lightOut"><span class="pink">三级</span></span>'],
 
+          ["风险等级", "WBS:012工程", "杨志宇", "2022.9.12", '<span class="lightOut"><span class="blue">一级</span></span>'],
 
+          ["风险等级", "WBS:012工程", "杨志宇", "2022.9.12", '<span class="lightOut"><span class="yellow">二级</span></span>'],
 
+          ["风险等级", "WBS:012工程", "杨志宇", "2022.9.12", '<span class="lightOut"><span class="pink">三级</span></span>']
 
+        ],
 
+        align: ["center", "center", "center", "center", "center"],
 
+        headerBGC: "#1C537D",
 
+        oddRowBGC: "#09335C"
 
+      },
 
+    }
 
+  },
 
+  created () {
 
+    this.time = formatDate()
 
+    this.timer = setInterval(() => {
 
+      this.time = formatDate()
 
+    }, 1000)
 
+  },
 
+  beforeDestroy () {
 
+    if (this.timer) {
 
+      clearInterval(this.timer);
 
+    }
 
+  },
 
+  mounted () {
 
+    setTimeout(() => {
 
+      this.initChartL1()
 
+      this.initChartL2()
 
+      this.initChartL3()
 
+      this.initChartL4()
 
+      this.initChartL5()
 
+      this.initChartL6()
 
+      this.aiQualityECharts();
 
+      this.aiQualityECharts2();
 
+    })
 
+  },
 
+  methods: {
 
+    initChartL1 () {
 
+      let myChart = echarts.init(this.$refs['tl1'])
 
+      let option = {
 
+        grid: {
 
+          top: 0,
 
+          right: 0,
 
+          left: 0,
 
+          bottom: 0,
 
+        },
 
+        tooltip: {
 
+          trigger: 'item',
 
+        },
 
+        color: ['#6682f5', '#40A9FF'],
 
+        legend: {
 
+          // icon: 'circle',
 
+          bottom: 0,
 
+          left: 'center',
 
+          // itemHeight: 10,
 
+          // itemWidth: 10,
 
+          textStyle: {
 
+            color: '#9DB9EB',
 
+          },
 
+        },
 
+        graphic: {
 
+          elements: [{
 
+            type: "text",
 
+            left: "center",
 
+            top: "77%",
 
+            style: {
 
+              text: "投资类别",
 
+              textAlign: "center",
 
+              fill: "#fff",
 
+              fontSize: 15,
 
+              fontWeight: 500
 
+            }
 
+          }]
 
+        },
 
+        series: [
 
+          {
 
+            center: ['50%', '40%'],
 
+            radius: ['45%', '60%'],
 
+            name: '',
 
+            type: 'pie',
 
+            labelLine: {
 
+              normal: {
 
+                lineStyle: {
 
+                  width: 1,
 
+                },
 
+              },
 
+            },
 
+            label: {
 
+              show: false,
 
+              position: 'center'
 
+            },
 
+            data: [
 
+              { value: 1048, name: '数据1' },
 
+              { value: 735, name: '数据2' }
 
+            ],
 
+          },
 
+        ],
 
+      }
 
+      tools.loopShowTooltip(myChart, option, {
 
+        interval: 2000,
 
+        loopSeries: true,
 
+      });
 
+      myChart.setOption(option)
 
+    },
 
+    initChartL2 () {
 
+      let myChart = echarts.init(this.$refs['tl2'])
 
+      let option = {
 
+        grid: {
 
+          top: 0,
 
+          right: 0,
 
+          left: 0,
 
+          bottom: 0,
 
+        },
 
+        tooltip: {
 
+          trigger: 'item',
 
+        },
 
+        color: ['#40A9FF', '#45DAD1'],
 
+        legend: {
 
+          bottom: 0,
 
+          left: 'center',
 
+          textStyle: {
 
+            color: '#9DB9EB',
 
+          },
 
+        },
 
+        graphic: {
 
+          elements: [{
 
+            type: "text",
 
+            left: "center",
 
+            top: "77%",
 
+            style: {
 
+              text: "投资阶段",
 
+              textAlign: "center",
 
+              fill: "#fff",
 
+              fontSize: 15,
 
+              fontWeight: 500
 
+            }
 
+          }]
 
+        },
 
+        series: [
 
+          {
 
+            center: ['50%', '40%'],
 
+            radius: ['45%', '60%'],
 
+            name: '',
 
+            type: 'pie',
 
+            labelLine: {
 
+              normal: {
 
+                lineStyle: {
 
+                  width: 1,
 
+                },
 
+              },
 
+            },
 
+            label: {
 
+              show: false,
 
+              position: 'center'
 
+            },
 
+            data: [
 
+              { value: 1048, name: '数据1' },
 
+              { value: 735, name: '数据2' }
 
+            ],
 
+          },
 
+        ],
 
+      }
 
+      tools.loopShowTooltip(myChart, option, {
 
+        interval: 2500,
 
+        loopSeries: true,
 
+      });
 
+      myChart.setOption(option)
 
+    },
 
+    initChartL3 () {
 
+      let myChart = echarts.init(this.$refs['tl3'])
 
+      let option = {
 
+        grid: {
 
+          top: 0,
 
+          right: 0,
 
+          left: 0,
 
+          bottom: 0,
 
+        },
 
+        tooltip: {
 
+          trigger: 'item',
 
+        },
 
+        color: ['#40A9FF', '#8BA2FF'],
 
+        legend: {
 
+          bottom: 0,
 
+          left: 'center',
 
+          textStyle: {
 
+            color: '#9DB9EB',
 
+          },
 
+        },
 
+        graphic: {
 
+          elements: [{
 
+            type: "text",
 
+            left: "center",
 
+            top: "77%",
 
+            style: {
 
+              text: "管理类别",
 
+              textAlign: "center",
 
+              fill: "#fff",
 
+              fontSize: 15,
 
+              fontWeight: 500
 
+            }
 
+          }]
 
+        },
 
+        series: [
 
+          {
 
+            center: ['50%', '40%'],
 
+            radius: ['45%', '60%'],
 
+            name: '',
 
+            type: 'pie',
 
+            labelLine: {
 
+              normal: {
 
+                lineStyle: {
 
+                  width: 1,
 
+                },
 
+              },
 
+            },
 
+            label: {
 
+              show: false,
 
+              position: 'center'
 
+            },
 
+            data: [
 
+              { value: 1048, name: '数据1' },
 
+              { value: 735, name: '数据2' }
 
+            ],
 
+          },
 
+        ],
 
+      }
 
+      tools.loopShowTooltip(myChart, option, {
 
+        interval: 3000,
 
+        loopSeries: true,
 
+      });
 
+      myChart.setOption(option)
 
+    },
 
+    initChartL4 () {
 
+      let myChart = echarts.init(this.$refs['tl4'])
 
+      let option = {
 
+        grid: {
 
+          top: 0,
 
+          right: 0,
 
+          left: 0,
 
+          bottom: 0,
 
+        },
 
+        tooltip: {
 
+          trigger: 'item',
 
+        },
 
+        color: ['#45DAD1', '#40A9FF'],
 
+        legend: {
 
+          bottom: 0,
 
+          left: 'center',
 
+          textStyle: {
 
+            color: '#9DB9EB',
 
+          },
 
+        },
 
+        graphic: {
 
+          elements: [{
 
+            type: "text",
 
+            left: "center",
 
+            top: "77%",
 
+            style: {
 
+              text: "投资领域",
 
+              textAlign: "center",
 
+              fill: "#fff",
 
+              fontSize: 15,
 
+              fontWeight: 500
 
+            }
 
+          }]
 
+        },
 
+        series: [
 
+          {
 
+            center: ['50%', '40%'],
 
+            radius: ['45%', '60%'],
 
+            name: '',
 
+            type: 'pie',
 
+            labelLine: {
 
+              normal: {
 
+                lineStyle: {
 
+                  width: 1,
 
+                },
 
+              },
 
+            },
 
+            label: {
 
+              show: false,
 
+              position: 'center'
 
+            },
 
+            data: [
 
+              { value: 1048, name: '数据1' },
 
+              { value: 735, name: '数据2' }
 
+            ],
 
+          },
 
+        ],
 
+      }
 
+      tools.loopShowTooltip(myChart, option, {
 
+        interval: 3500,
 
+        loopSeries: true,
 
+      });
 
+      myChart.setOption(option)
 
+    },
 
+    initChartL5 () {
 
+      let myChart = echarts.init(this.$refs['cl1'])
 
+      let option = {
 
+        grid: {
 
+          top: 0,
 
+          right: 0,
 
+          left: 0,
 
+          bottom: 0,
 
+        },
 
+        tooltip: {
 
+          trigger: 'item',
 
+        },
 
+        color: ['#45DAD1', '#40A9FF'],
 
+        legend: {
 
+          bottom: 0,
 
+          left: 'center',
 
+          textStyle: {
 
+            color: '#9DB9EB',
 
+          },
 
+        },
 
+        graphic: {
 
+          elements: [{
 
+            type: "text",
 
+            left: "center",
 
+            top: "77%",
 
+            style: {
 
+              text: "投资情况",
 
+              textAlign: "center",
 
+              fill: "#fff",
 
+              fontSize: 15,
 
+              fontWeight: 500
 
+            }
 
+          }]
 
+        },
 
+        series: [
 
+          {
 
+            center: ['50%', '40%'],
 
+            radius: ['45%', '60%'],
 
+            name: '',
 
+            type: 'pie',
 
+            labelLine: {
 
+              normal: {
 
+                lineStyle: {
 
+                  width: 1,
 
+                },
 
+              },
 
+            },
 
+            label: {
 
+              show: false,
 
+              position: 'center'
 
+            },
 
+            data: [
 
+              { value: 1048, name: '数据1' },
 
+              { value: 735, name: '数据2' }
 
+            ],
 
+          },
 
+        ],
 
+      }
 
+      tools.loopShowTooltip(myChart, option, {
 
+        interval: 4000,
 
+        loopSeries: true,
 
+      });
 
+      myChart.setOption(option)
 
+    },
 
+    initChartL6 () {
 
+      let myChart = echarts.init(this.$refs['cr1'])
 
+      option = {
 
+        title: {
 
+          text: ''
 
+        },
 
+        legend: {
 
+          data: ['类型1', '类型2', '类型3', '类型4', '类型5'],
 
+          bottom: 0,
 
+          left: 'center',
 
+          textStyle: {
 
+            color: '#9DB9EB',
 
+          },
 
+        },
 
+        splitArea: { // 坐标轴在 grid 区域中的分隔区域，默认不显示。
 
+          show: true,
 
+          areaStyle: { // 分隔区域的样式设置。
 
+            color: ['yellow'],
 
+            // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
 
+          }
 
+        },
 
+        radar: {
 
+          // shape: 'circle',
 
+          center: ['50%', '50%'],
 
+          radius: 60,
 
+          indicator: [
 
+            { name: '类型1', max: 100000 },
 
+            { name: '类型2', max: 100000 },
 
+            { name: '类型3', max: 100000 },
 
+            { name: '类型4', max: 100000 },
 
+            { name: '类型5', max: 100000 },
 
+          ],
 
+          axisLine: {  // 设置雷达图中间射线的颜色
 
+            lineStyle: {
 
+              color: '#c0c0c0',
 
+            },
 
+          },
 
+          splitLine: { //网格颜色设置
 
+            show: true,
 
+            lineStyle: {
 
+              width: 1,
 
+              color: '#1e83e4',
 
+            },
 
+          },
 
+          splitArea: {  //设置图表颜色，show的值为true
 
+            show: false,
 
+            areaStyle: {
 
+              // color:"#c1ddf8", //一般设置方式
 
+              //设置渐变背景色 new echarts.graphic.LinearGradient(a,b,c,d,arr)
 
+              //a ,b,c,d值可为0，1 a:1表示arr中的颜色右到左；c:1 arr中的颜色左到右
 
+              //b:1表示arr中的颜色下到上；d:1表示arr中的颜色上到下
 
+              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
 
+                { offset: 0, color: '#c1ddf8' }, // 0% 处的颜色 
+                { offset: 1, color: '#1e83e4' }// 100% 处的颜色
 
+              ], false)
 
+            }
 
+          }
 
+        },
 
+        series: [
 
+          {
 
+            name: '',
 
+            type: 'radar',
 
+            symbol: 'circle', // 单个数值点的样式，还可以取值'rect','angle'等
 
+            symbolSize: 0, // 数值点的大小
 
+            data: [
 
+              {
 
+                value: [4200, 3000, 20000, 35000, 50000, 18000],
 
+                name: '类型1',
 
+                itemStyle: { //该数值区域样式设置
 
+                  normal: {
 
+                    color: '#2CC6FF', //背景颜色，还需设置areaStyle
 
+                    lineStyle: {
 
+                      color: '#2CC6FF', //边框颜色
 
+                    },
 
+                  },
 
+                },
 
+                label: {  //显示value中具体的数值
 
+                  normal: {
 
+                    show: false,
 
+                    textStyle: {  //更改数值样式
 
+                      color: '#43EDE3'
 
+                    }
 
+                  },
 
+                },
 
+                areaStyle: { //设置区域背景颜色透明度
 
+                  normal: {
 
+                    width: 1,
 
+                    opacity: 0.8,
 
+                  },
 
+                },
 
+              },
 
+              {
 
+                value: [8000, 3000, 38000, 76000, 32000, 71000],
 
+                name: '类型2',
 
+                itemStyle: { //该数值区域样式设置
 
+                  normal: {
 
+                    color: '#D87AFF', //背景颜色，还需设置areaStyle
 
+                    lineStyle: {
 
+                      color: '#2CC6FF', //边框颜色
 
+                    },
 
+                  },
 
+                },
 
+                label: {  //显示value中具体的数值
 
+                  normal: {
 
+                    show: false,
 
+                    textStyle: {  //更改数值样式
 
+                      color: '#43EDE3'
 
+                    }
 
+                  },
 
+                },
 
+                areaStyle: { //设置区域背景颜色透明度
 
+                  normal: {
 
+                    width: 1,
 
+                    opacity: 0.8,
 
+                  },
 
+                },
 
+              }
 
+            ]
 
+          }
 
+        ]
 
+      };
 
+      tools.loopShowTooltip(myChart, option, {
 
+        interval: 2000,
 
+        loopSeries: true,
 
+      });
 
+      myChart.setOption(option)
 
+    },
 
+    aiQualityECharts () {
 
+      let chart = echarts.init(document.getElementById("aiQuality"));
 
+      let option = {
 
+        grid: {
 
+          top: 35,
 
+          right: 40,
 
+          left: 60,
 
+          bottom: 20,
 
+        },
 
+        tooltip: {
 
+          show: true,
 
+          trigger: "axis",
 
+          axisPointer: {
 
+            // 坐标轴指示器，坐标轴触发有效
 
+            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
 
+          },
 
+        },
 
+        xAxis: {
 
+          data: ["集团本部", "晋能控股", "潞安化工", "华阳新材", "山西文旅", "太重集团", "山焦人力", "华远陆港", "汾酒集团", "云时代"],
 
+          axisTick: {
 
+            show: false,
 
+          },
 
+          // x轴的字体颜色
 
+          axisLabel: {
 
+            textStyle: {
 
+              color: "white",
 
+            },
 
+          },
 
+          //y轴线的颜色以及宽度
 
+          axisLine: {
 
+            show: true,
 
+            lineStyle: {
 
+              color: "#1E5389",
 
+              width: 1,
 
+              type: "solid",
 
+            },
 
+          },
 
+        },
 
+        yAxis: {
 
+          name: '亿元',
 
+          nameTextStyle: {//y轴上方单位的颜色
 
+            color: '#fff',
 
+          },
 
+          axisTick: {
 
+            lineStyle: {
 
+              color: "#18416F",
 
+            },
 
+          },
 
+          // y轴的字体颜色
 
+          axisLabel: {
 
+            textStyle: {
 
+              color: "white",
 
+            },
 
+          },
 
+          splitLine: {
 
+            show: false,
 
+            lineStyle: {
 
+              color: "#204561",
 
+              width: 1,
 
+              type: "dotted",
 
+            },
 
+          },
 
+          //y轴线的颜色以及宽度
 
+          axisLine: {
 
+            show: true,
 
+            lineStyle: {
 
+              color: "#1E5389",
 
+              width: 1,
 
+              type: "solid",
 
+            },
 
+          },
 
+        },
 
+        series: [
 
+          {
 
+            name: "计划投资额",
 
+            type: "bar",
 
+            data: [1200, 680, 562, 268, 717, 843, 987, 126, 723, 569],
 
+            showBackground: false,
 
+            backgroundStyle: {
 
+              color: "#18416F",
 
+            },
 
+            barWidth: "10%",
 
+            itemStyle: {
 
+              barBorderRadius: [10, 10, 0, 0],
 
+              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
 
+                {
 
+                  offset: 0,
 
+                  color: "#132543",
 
+                }, //柱图渐变色
 
+                {
 
+                  offset: 1,
 
+                  color: "#897DFF",
 
+                },
 
+              ]),
 
+            },
 
+          },
 
+          {
 
+            name: "实际投资额",
 
+            type: "bar",
 
+            data: [658, 1125, 658, 999, 643, 675, 743, 724, 733, 725],
 
+            showBackground: false,
 
+            backgroundStyle: {
 
+              color: "#18416F",
 
+            },
 
+            barWidth: "10%",
 
+            itemStyle: {
 
+              barBorderRadius: [10, 10, 0, 0],
 
+              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
 
+                {
 
+                  offset: 0,
 
+                  color: "#132543",
 
+                }, //柱图渐变色
 
+                {
 
+                  offset: 1,
 
+                  color: "#FED95B",
 
+                },
 
+              ]),
 
+            },
 
+          },
 
+        ],
 
+        legend: {
 
+          data: ["计划投资额", "实际投资额"],
 
+          textStyle: {
 
+            // 图列内容样式
 
+            color: "#fff", // 字体颜色
 
+            // fontSize: "10",
 
+          },
 
+          right: 30,
 
+          icon: "roundRect",
 
+          // 小图标的宽高
 
+          itemHeight: 5,
 
+        },
 
+      };
 
+      chart.setOption(option);
 
+      tools.loopShowTooltip(chart, option, {
 
+        interval: 2000,
 
+        loopSeries: true,
 
+      });
 
+    },
 
+    aiQualityECharts2 () {
 
+      let chart = echarts.init(document.getElementById("aiQuality2"));
 
+      let option = {
 
+        grid: {
 
+          top: 35,
 
+          right: 40,
 
+          left: 60,
 
+          bottom: 20,
 
+        },
 
+        tooltip: {
 
+          show: true,
 
+          trigger: "axis",
 
+          axisPointer: {
 
+            // 坐标轴指示器，坐标轴触发有效
 
+            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
 
+          },
 
+        },
 
+        xAxis: {
 
+          data: ["工程费用", "设备费用", "人员费用", "材料费用", "管理费用"],
 
+          axisTick: {
 
+            show: false,
 
+          },
 
+          // x轴的字体颜色
 
+          axisLabel: {
 
+            textStyle: {
 
+              color: "white",
 
+            },
 
+          },
 
+          //y轴线的颜色以及宽度
 
+          axisLine: {
 
+            show: true,
 
+            lineStyle: {
 
+              color: "#1E5389",
 
+              width: 1,
 
+              type: "solid",
 
+            },
 
+          },
 
+        },
 
+        yAxis: {
 
+          name: '亿元',
 
+          nameTextStyle: {//y轴上方单位的颜色
 
+            color: '#fff',
 
+          },
 
+          axisTick: {
 
+            lineStyle: {
 
+              color: "#18416F",
 
+            },
 
+          },
 
+          // y轴的字体颜色
 
+          axisLabel: {
 
+            textStyle: {
 
+              color: "white",
 
+            },
 
+          },
 
+          splitLine: {
 
+            show: false,
 
+            lineStyle: {
 
+              color: "#204561",
 
+              width: 1,
 
+              type: "dotted",
 
+            },
 
+          },
 
+          //y轴线的颜色以及宽度
 
+          axisLine: {
 
+            show: true,
 
+            lineStyle: {
 
+              color: "#1E5389",
 
+              width: 1,
 
+              type: "solid",
 
+            },
 
+          },
 
+        },
 
+        series: [
 
+          {
 
+            name: "预算金额",
 
+            type: "bar",
 
+            data: [843, 987, 126, 723, 569],
 
+            showBackground: false,
 
+            backgroundStyle: {
 
+              color: "#18416F",
 
+            },
 
+            barWidth: "10%",
 
+            itemStyle: {
 
+              barBorderRadius: [10, 10, 0, 0],
 
+              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
 
+                {
 
+                  offset: 0,
 
+                  color: "#132543",
 
+                }, //柱图渐变色
 
+                {
 
+                  offset: 1,
 
+                  color: "#40A9FF",
 
+                },
 
+              ]),
 
+            },
 
+          },
 
+          {
 
+            name: "实际金额",
 
+            type: "bar",
 
+            data: [675, 743, 724, 733, 725],
 
+            showBackground: false,
 
+            backgroundStyle: {
 
+              color: "#18416F",
 
+            },
 
+            barWidth: "10%",
 
+            itemStyle: {
 
+              barBorderRadius: [10, 10, 0, 0],
 
+              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
 
+                {
 
+                  offset: 0,
 
+                  color: "#132543",
 
+                }, //柱图渐变色
 
+                {
 
+                  offset: 1,
 
+                  color: "#45DAD1",
 
+                },
 
+              ]),
 
+            },
 
+          },
 
+        ],
 
+        legend: {
 
+          data: ["预算金额", "实际金额"],
 
+          textStyle: {
 
+            // 图列内容样式
 
+            color: "#fff", // 字体颜色
 
+            // fontSize: "10",
 
+          },
 
+          right: 30,
 
+          icon: "roundRect",
 
+          // 小图标的宽高
 
+          itemHeight: 5,
 
+        },
 
+      };
 
+      chart.setOption(option);
 
+      tools.loopShowTooltip(chart, option, {
 
+        interval: 2000,
 
+        loopSeries: true,
 
+      });
 
+    }
 
+  },
 
+})

+ 68 - 2
investment/styles/investHome3.css
View File 

@@ -105,7 +105,7 @@ a {
 
   background: url('../images/back-big.png') no-repeat center bottom;
 
   padding-bottom: 65px;
 
   display: grid;
 
-  grid-template-rows: repeat(3, minmax(0, 1fr));
 
+  grid-template-rows: 1fr 2fr;
 
   gap: 10px;
 
 }
 
 .top {
 
@@ -116,7 +116,7 @@ a {
 
 .center,
 
 .footer {
 
   display: grid;
 
-  grid-template-columns: repeat(3, minmax(0, 1fr));
 
+  grid-template-columns: repeat(2, minmax(0, 1fr));
 
   gap: 10px;
 
 }
 
 .top-left,
 
@@ -370,6 +370,72 @@ a {
 
   padding: 10px;
 
   font-size: 14px;
 
 }
 
+.bottom-right {
 
+  height: 100%;
 
+  display: grid;
 
+  grid-template-columns: 1fr 2fr;
 
+  gap: 10px;
 
+}
 
+.bottom-right-right {
 
+  height: 100%;
 
+  display: grid;
 
+  grid-template-rows: repeat(2, minmax(0, 1fr));
 
+  gap: 10px;
 
+}
 
+.bottom-right-left {
 
+  width: 100%;
 
+  height: 100%;
 
+}
 
+.bottom-right-left-content {
 
+  width: 100%;
 
+  height: calc(100% - 50px);
 
+  display: grid;
 
+  grid-template-rows: repeat(2, minmax(0, 1fr));
 
+  gap: 10px;
 
+}
 
+.center-center {
 
+  height: 100%;
 
+  grid-template-rows: repeat(2, minmax(0, 1fr));
 
+  gap: 10px;
 
+}
 
+.bottom-right-left-content-top,
 
+.bottom-right-left-content-bottom {
 
+  width: 100%;
 
+  height: 100%;
 
+  display: grid;
 
+  grid-template-columns: repeat(2, minmax(0, 1fr));
 
+  gap: 10px;
 
+}
 
+.bottom-right-left-content-top-right {
 
+  width: 100%;
 
+  height: 100%;
 
+  display: grid;
 
+  gap: 10px;
 
+  grid-template-rows: repeat(2, minmax(0, 1fr));
 
+  grid-template-columns: repeat(2, minmax(0, 1fr));
 
+}
 
+.bottom-right-left-content-bottom {
 
+  padding: 10px;
 
+}
 
+.bottom-right-left-content-bottom div {
 
+  width: 100%;
 
+  height: 100%;
 
+}
 
+.bottom-right-left-content-bottom-bottom {
 
+  display: grid;
 
+  grid-template-rows: repeat(2, minmax(0, 1fr));
 
+  gap: 10px;
 
+}
 
+.bottom-right-back {
 
+  background-color: #0e3b63;
 
+  padding: 10px;
 
+}
 
+.arrow {
 
+  top: 10px;
 
+  right: 30px;
 
+  width: 30px !important;
 
+  height: 30px !important;
 
+}
 
 /* zhb */
 
 /* 宽高纵横比 */
 
 .aspect-auto {

+ 777 - 0
investment/styles/investHome3compound.css
View File 

@@ -0,0 +1,777 @@
 
+*,
 
+*:before,
 
+*:after {
 
+  padding: 0;
 
+  margin: 0;
 
+  box-sizing: border-box;
 
+}
 
+html,
 
+body {
 
+  height: 100%;
 
+  font-size: 14px;
 
+  background-color: #ecffff;
 
+  font-family: 'Microsoft YaHei', 'Helvetica Neue', Helvetica, 'PingFang SC',
 
+    'Hiragino Sans GB', Arial, sans-serif;
 
+}
 
+
 
+.flex {
 
+  display: flex;
 
+}
 
+.flex1 {
 
+  flex: 1;
 
+}
 
+.flex2 {
 
+  flex: 2;
 
+}
 
+.flex-around {
 
+  display: flex;
 
+  justify-content: space-around;
 
+}
 
+.flex-between {
 
+  display: flex;
 
+  justify-content: space-between;
 
+  align-items: center;
 
+}
 
+.flex-end {
 
+  display: flex;
 
+  justify-content: flex-end;
 
+}
 
+.flex-align-center {
 
+  display: flex;
 
+  align-items: center;
 
+}
 
+.text-center {
 
+  text-align: center;
 
+}
 
+.font12 {
 
+  font-size: 12px;
 
+}
 
+.main-color {
 
+  color: #0bf1ff;
 
+}
 
+.danger-color {
 
+  color: #f15450 !important;
 
+}
 
+.error-color {
 
+  color: #ffc704 !important;
 
+}
 
+.btm10 {
 
+  margin-bottom: 10px;
 
+}
 
+.btm20 {
 
+  margin-bottom: 20px;
 
+}
 
+a {
 
+  text-decoration: none;
 
+  cursor: pointer;
 
+}
 
+
 
+[v-cloak] {
 
+  display: none;
 
+}
 
+#app {
 
+  background: url('../images/page-bg.png') center center no-repeat;
 
+  background-size: 100% 100%;
 
+  padding-top: 10px;
 
+  height: 100vh;
 
+  overflow: hidden;
 
+  color: #fff;
 
+}
 
+.my-header {
 
+  position: relative;
 
+  height: 70px;
 
+  line-height: 70px;
 
+  background: url('../images/header-bg.png') center center no-repeat;
 
+  background-size: 100% 100%;
 
+  text-align: center;
 
+  font-weight: bold;
 
+  font-size: 32px;
 
+  font-weight: 600;
 
+}
 
+.my-header span {
 
+  background: linear-gradient(-3deg, #99eeff 0%, #99eeff 30%, #ffffff 91%);
 
+  -webkit-background-clip: text;
 
+  -webkit-text-fill-color: transparent;
 
+}
 
+.my-header span.right {
 
+  position: absolute;
 
+  right: 60px;
 
+  top: 0px;
 
+  font-size: 16px;
 
+}
 
+.main {
 
+  padding: 15px;
 
+  height: calc(100vh - 25px);
 
+  background: url('../images/back-big.png') no-repeat center bottom;
 
+  padding-bottom: 65px;
 
+  display: grid;
 
+  grid-template-rows: repeat(3, minmax(0, 1fr));
 
+  gap: 10px;
 
+}
 
+.top {
 
+  display: grid;
 
+  grid-template-columns: repeat(2, minmax(0, 1fr));
 
+  gap: 10px;
 
+}
 
+.center,
 
+.footer {
 
+  display: grid;
 
+  grid-template-columns: repeat(3, minmax(0, 1fr));
 
+  gap: 10px;
 
+}
 
+.top-left,
 
+.top-right {
 
+  height: 100%;
 
+  background: url('../images3/big.png') no-repeat;
 
+  background-size: 100% 100%;
 
+  position: relative;
 
+}
 
+.panel-title {
 
+  position: relative;
 
+  text-align: center;
 
+  height: 50px;
 
+  line-height: 50px;
 
+}
 
+.panel-title .text {
 
+  font-size: 20px;
 
+  font-weight: 600;
 
+  color: #05fbfe;
 
+  text-shadow: 0px 2px 10px rgba(10, 30, 52, 0.48);
 
+  background: linear-gradient(0deg, #ffffff 0%, #63dcff 0%, #e0f3ff 100%);
 
+  -webkit-background-clip: text;
 
+  -webkit-text-fill-color: transparent;
 
+  position: relative;
 
+}
 
+.panel-title .text::before {
 
+  position: absolute;
 
+  content: ' ';
 
+  top: 10px;
 
+  left: -40px;
 
+  width: 30px;
 
+  height: 10px;
 
+  background: url('../images/title-left.png') no-repeat;
 
+}
 
+.panel-title .text::after {
 
+  position: absolute;
 
+  content: ' ';
 
+  top: 10px;
 
+  right: -40px;
 
+  width: 30px;
 
+  height: 10px;
 
+  background: url('../images/title-right.png') no-repeat;
 
+}
 
+.top-left-bottom,
 
+.top-right-bottom,
 
+.center-right-bottom,
 
+.center-center-bottom,
 
+.center-left-bottom,
 
+.footer-right-bottom,
 
+.footer-center-bottom {
 
+  height: calc(100% - 50px);
 
+  width: 100%;
 
+  padding: 10px;
 
+}
 
+.top-left-bottom-left {
 
+  height: 100%;
 
+  width: 20%;
 
+  background: url('../images3/big.png') no-repeat;
 
+  background-size: 100% 100%;
 
+  position: relative;
 
+}
 
+.top-left-bottom-right {
 
+  height: 100%;
 
+  width: calc(80% - 10px);
 
+  background: url('../images3/big.png') no-repeat;
 
+  background-size: 100% 100%;
 
+}
 
+.light {
 
+  width: 120px;
 
+  height: 100px;
 
+}
 
+.top-left-bottom-left > .num {
 
+  color: #69c0ff;
 
+  font-size: 20px;
 
+  font-weight: bold;
 
+  position: absolute;
 
+  top: 50px;
 
+}
 
+.downList {
 
+  background: url('../images3/down-back.png') no-repeat;
 
+  background-size: 100% 100%;
 
+  width: 85px;
 
+  height: 30px;
 
+  position: absolute;
 
+  right: 10px;
 
+  top: 10px;
 
+}
 
+.downList > img {
 
+  width: 11px;
 
+  height: 7px;
 
+  margin-left: 10px;
 
+}
 
+.center-right,
 
+.center-center,
 
+.center-left,
 
+.footer-right,
 
+.footer-center,
 
+.footer-left {
 
+  background: url('../images3/small.png') no-repeat;
 
+  background-size: 100% 100%;
 
+}
 
+.center-right-bottom {
 
+  display: grid;
 
+  grid-template-columns: repeat(2, minmax(0, 1fr));
 
+  gap: 10px;
 
+}
 
+.center-right-bottom > div,
 
+.center-center-bottom > div {
 
+  background: url('../images3/small.png') no-repeat;
 
+  background-size: 100% 100%;
 
+}
 
+.center-right-bottom-right {
 
+  width: 100%;
 
+  height: 100%;
 
+  position: relative;
 
+}
 
+.center-right-bottom-right-text {
 
+  color: #40a9ff;
 
+  font-size: 18px;
 
+  font-weight: bold;
 
+  position: absolute;
 
+  width: 100px;
 
+  height: 40px;
 
+  line-height: 40px;
 
+  text-align: center;
 
+  left: calc(50% - 50px);
 
+  top: calc(50% - 30px);
 
+}
 
+.center-center-bottom,
 
+.center-left-bottom {
 
+  width: 100%;
 
+  display: grid;
 
+  grid-template-columns: 60% 40%;
 
+  gap: 10px;
 
+}
 
+.center-center-bottom > div:nth-child(1) > div:nth-child(1) {
 
+  height: 20%;
 
+  padding-bottom: 10px;
 
+}
 
+.center-center-bottom-list {
 
+  height: 80%;
 
+  display: flex;
 
+  flex-direction: column;
 
+  justify-content: space-between;
 
+}
 
+.center-center-bottom-list .el-progress-bar__inner {
 
+  background: linear-gradient(to right, #092854, #00aeff);
 
+}
 
+.center-center-bottom-list .el-progress__text {
 
+  color: #fff;
 
+}
 
+.el-progress {
 
+  border: 1px solid #115079;
 
+}
 
+.center-center-bottom > div {
 
+  padding: 10px;
 
+}
 
+.center-center-bottom-right {
 
+  display: flex;
 
+  justify-content: center;
 
+  align-items: center;
 
+  position: relative;
 
+}
 
+.center-center-bottom-right > div:nth-child(1) {
 
+  border: 1px dashed #00ffff;
 
+  width: 1px;
 
+  height: 80%;
 
+}
 
+.center-center-bottom-right > div:nth-child(2) {
 
+  position: absolute;
 
+  top: calc(20% - 30px);
 
+  left: calc(50% - 95px);
 
+  background-color: #166592;
 
+  color: #2cc6ff;
 
+  width: 190px;
 
+  height: 20px;
 
+  line-height: 20px;
 
+  text-align: center;
 
+}
 
+.center-center-bottom-right > div:nth-child(3) {
 
+  position: absolute;
 
+  top: 60px;
 
+  left: 117px;
 
+  background-color: #166592;
 
+  color: #2cc6ff;
 
+  width: 60px;
 
+  height: 20px;
 
+  line-height: 20px;
 
+  text-align: center;
 
+}
 
+.center-center-bottom-right > div:nth-child(4) {
 
+  position: absolute;
 
+  top: 100px;
 
+  left: 55px;
 
+  background-color: #416d63;
 
+  color: #ffd802;
 
+  width: 60px;
 
+  height: 20px;
 
+  line-height: 20px;
 
+  text-align: center;
 
+}
 
+.center-center-bottom-right > div:nth-child(5) {
 
+  position: absolute;
 
+  top: 140px;
 
+  left: 117px;
 
+  background-color: #166592;
 
+  color: #2cc6ff;
 
+  width: 60px;
 
+  height: 20px;
 
+  line-height: 20px;
 
+  text-align: center;
 
+}
 
+.center-left-bottom-list {
 
+  border: 1px solid #06345e;
 
+}
 
+.center-left-bottom-list > span {
 
+  display: inline-block;
 
+  padding: 5px 30px;
 
+  cursor: pointer;
 
+}
 
+.center-left-bottom-list > span:hover {
 
+  color: #2abbff;
 
+}
 
+.center-left-bottom-list > span:nth-child(odd) {
 
+  background-color: #1a426c;
 
+}
 
+.footer-right-bottom {
 
+  padding: 0 50px !important;
 
+  padding-bottom: 20px !important;
 
+}
 
+.footer-right-bottom .el-progress-bar__inner {
 
+  background: linear-gradient(to right, #092854, #00aeff);
 
+}
 
+.footer-right-bottom .el-progress {
 
+  width: 85%;
 
+}
 
+.el-progress-bar__outer {
 
+  background-color: #6fa0ce;
 
+}
 
+.blue {
 
+  color: #3af7fe;
 
+}
 
+.yellow {
 
+  color: #ffd200;
 
+}
 
+.pink {
 
+  color: #d87aff;
 
+}
 
+.footer-left-bottom {
 
+  height: 100%;
 
+  padding: 10px;
 
+  font-size: 14px;
 
+}
 
+/* zhb */
 
+/* 宽高纵横比 */
 
+.aspect-auto {
 
+  aspect-ratio: auto;
 
+}
 
+.aspect-square {
 
+  aspect-ratio: 1 / 1;
 
+}
 
+.aspect-video {
 
+  aspect-ratio: 16 / 9;
 
+}
 
+/* aspect-[4/3] */
 
+
 
+/* 居中 */
 
+.mx-auto {
 
+  margin: 0 auto;
 
+}
 
+
 
+/* 设置容器内的列数/每列距离 */
 
+.columns-1 {
 
+  columns: 1;
 
+}
 
+/* columns-[20px] */
 
+
 
+/* 盒子模型 */
 
+.box-border {
 
+  box-sizing: border-box;
 
+}
 
+.box-content {
 
+  box-sizing: content-box;
 
+}
 
+/* 消失 */
 
+.hidden {
 
+  display: none;
 
+}
 
+
 
+/* 块级元素 */
 
+.block {
 
+  display: block;
 
+}
 
+/* 行内块 */
 
+.inline-block {
 
+  display: inline-block;
 
+}
 
+/* 行内元素 */
 
+.inline {
 
+  display: inline;
 
+}
 
+
 
+/* 弹性布局 */
 
+.flex {
 
+  display: flex;
 
+}
 
+/* 主轴起点在左边 */
 
+.flex-row {
 
+  flex-direction: row;
 
+}
 
+/* 主轴起点在右边 */
 
+.flex-row-reverse {
 
+  flex-direction: row-reverse;
 
+}
 
+/* 主轴竖向排列，在上面 */
 
+.flex-col {
 
+  flex-direction: column;
 
+}
 
+/* 主轴竖向排列，在下面 */
 
+.flex-col-reverse {
 
+  flex-direction: column-reverse;
 
+}
 
+/* 自动换行 */
 
+.flex-wrap {
 
+  flex-wrap: wrap;
 
+}
 
+/* 自动换行下起点 */
 
+.flex-wrap-reverse {
 
+  flex-wrap: wrap-reverse;
 
+}
 
+/* 不换行 */
 
+.flex-nowrap {
 
+  flex-wrap: nowrap;
 
+}
 
+/* 弹性成长 */
 
+.grow {
 
+  flex-grow: 1;
 
+}
 
+/* 不允许弹性成长 */
 
+.grow-0 {
 
+  flex-grow: 0;
 
+}
 
+/* 主轴从左开始 */
 
+.justify-start {
 
+  justify-content: flex-start;
 
+}
 
+/* 主轴从右开始 */
 
+.justify-end {
 
+  justify-content: flex-end;
 
+}
 
+/* 主轴剧中 */
 
+.justify-center {
 
+  justify-content: center;
 
+}
 
+/* 主轴两端无间隔 */
 
+.justify-between {
 
+  justify-content: space-between;
 
+}
 
+/* 主轴两端有间隔 */
 
+.justify-around {
 
+  justify-content: space-around;
 
+}
 
+/* 所有间隔相等 */
 
+.justify-evenly {
 
+  justify-content: space-evenly;
 
+}
 
+/* 纵向起点最上方 */
 
+.items-start {
 
+  align-items: flex-start;
 
+}
 
+/* 纵向起点最下方 */
 
+.items-end {
 
+  align-items: flex-end;
 
+}
 
+.items-center {
 
+  align-items: center;
 
+}
 
+/* 网格布局 */
 
+.grid {
 
+  display: grid;
 
+}
 
+/* 有几列 */
 
+.grid-cols-4 {
 
+  grid-template-columns: repeat(4, minmax(0, 1fr));
 
+}
 
+/* 有几行 */
 
+.grid-rows-3 {
 
+  grid-template-rows: repeat(3, minmax(0, 1fr));
 
+}
 
+
 
+/* 间距 */
 
+.gap-7 {
 
+  gap: 1.75rem;
 
+}
 
+/* 允许弹性成长 */
 
+.shrink {
 
+  flex-shrink: 1;
 
+}
 
+/* 不允许弹性成长 */
 
+.shrink-0 {
 
+  flex-shrink: 0;
 
+}
 
+/* 不允许成长也不允许收缩 */
 
+.flex-none {
 
+  flex: none;
 
+}
 
+/* 浮动布局 */
 
+.float-right {
 
+  float: right;
 
+}
 
+.float-left {
 
+  float: left;
 
+}
 
+.clear-both {
 
+  clear: both;
 
+}
 
+
 
+/* 溢出 */
 
+.overflow-auto {
 
+  overflow: auto;
 
+}
 
+.overflow-hidden {
 
+  overflow: hidden;
 
+}
 
+.overflow-scroll {
 
+  overflow: scroll;
 
+}
 
+.overflow-x-auto {
 
+  overflow-x: auto;
 
+}
 
+.overflow-y-auto {
 
+  overflow-y: auto;
 
+}
 
+
 
+/* 定位 */
 
+.fixed {
 
+  position: fixed;
 
+}
 
+.absolute {
 
+  position: absolute;
 
+}
 
+.relative {
 
+  position: relative;
 
+}
 
+.top-0 {
 
+  top: 0px;
 
+}
 
+.right-0 {
 
+  right: 0px;
 
+}
 
+.bottom-0 {
 
+  bottom: 0px;
 
+}
 
+.left-0 {
 
+  left: 0px;
 
+}
 
+/* top-[3px] */
 
+/* z-[100] */
 
+
 
+/* 显示隐藏未脱离文档流 */
 
+.visible {
 
+  visibility: visible;
 
+}
 
+.invisible {
 
+  visibility: hidden;
 
+}
 
+
 
+/* 内边距 */
 
+.p-0 {
 
+  padding: 0px;
 
+}
 
+.px-0 {
 
+  padding-left: 0px;
 
+  padding-right: 0px;
 
+}
 
+.py-0 {
 
+  padding-top: 0px;
 
+  padding-bottom: 0px;
 
+}
 
+.pt-0 {
 
+  padding-top: 0px;
 
+}
 
+.pr-0 {
 
+  padding-right: 0px;
 
+}
 
+.pb-0 {
 
+  padding-bottom: 0px;
 
+}
 
+.pl-0 {
 
+  padding-left: 0px;
 
+}
 
+/* p-[5px] */
 
+
 
+/* 外边距 */
 
+.m-0 {
 
+  margin: 0px;
 
+}
 
+.mx-0 {
 
+  margin-left: 0px;
 
+  margin-right: 0px;
 
+}
 
+.my-0 {
 
+  margin-top: 0px;
 
+  margin-bottom: 0px;
 
+}
 
+.mt-0 {
 
+  margin-top: 0px;
 
+}
 
+.mr-0 {
 
+  margin-right: 0px;
 
+}
 
+.mb-0 {
 
+  margin-bottom: 0px;
 
+}
 
+.ml-0 {
 
+  margin-left: 0px;
 
+}
 
+/* m-[5px] */
 
+
 
+/* 宽度 */
 
+.w-full {
 
+  width: 100%;
 
+}
 
+.w-screen {
 
+  width: 100vw;
 
+}
 
+/* w-[32rem] */
 
+/* min-w-[50%] */
 
+/* max-w-[50%] */
 
+
 
+/* 高度 */
 
+.h-full {
 
+  height: 100%;
 
+}
 
+.h-screen {
 
+  height: 100vh;
 
+}
 
+/* h-[32rem] */
 
+/* min-h-[50%] */
 
+/* max-h-[32rem] */
 
+
 
+/* 字体 */
 
+.text-xs {
 
+  font-size: 0.75rem; /* 12px */
 
+  line-height: 1rem; /* 16px */
 
+}
 
+.text-sm {
 
+  font-size: 0.875rem; /* 14px */
 
+  line-height: 1.25rem; /* 20px */
 
+}
 
+.text-base {
 
+  font-size: 1rem; /* 16px */
 
+  line-height: 1.5rem; /* 24px */
 
+}
 
+.text-lg {
 
+  font-size: 1.125rem; /* 18px */
 
+  line-height: 1.75rem; /* 28px */
 
+}
 
+.text-xl {
 
+  font-size: 1.25rem; /* 20px */
 
+  line-height: 1.75rem; /* 28px */
 
+}
 
+.text-2xl {
 
+  font-size: 1.5rem; /* 24px */
 
+  line-height: 2rem; /* 32px */
 
+}
 
+.text-3xl {
 
+  font-size: 1.875rem; /* 30px */
 
+  line-height: 2.25rem; /* 36px */
 
+}
 
+.text-4xl {
 
+  font-size: 2.25rem; /* 36px */
 
+  line-height: 2.5rem; /* 40px */
 
+}
 
+.text-5xl {
 
+  font-size: 3rem; /* 48px */
 
+  line-height: 1;
 
+}
 
+.text-6xl {
 
+  font-size: 3.75rem; /* 60px */
 
+  line-height: 1;
 
+}
 
+.text-7xl {
 
+  font-size: 4.5rem; /* 72px */
 
+  line-height: 1;
 
+}
 
+.text-8xl {
 
+  font-size: 6rem; /* 96px */
 
+  line-height: 1;
 
+}
 
+.text-9xl {
 
+  font-size: 8rem; /* 128px */
 
+  line-height: 1;
 
+}
 
+/* text-[14px] */
 
+/* 字体粗细font-weight */
 
+/* font-[1100] */
 
+/* https://tailwindcss.com/docs/font-weight */
 
+/* 字体间距letter-spacing */
 
+/* tracking-[.25em] */
 
+/* 行高line-height */
 
+/* leading-[3rem] */
 
+/* 无列表样式 */
 
+.list-none {
 
+  list-style-type: none;
 
+}
 
+/* 小圆点 */
 
+.list-disc {
 
+  list-style-type: disc;
 
+}
 
+/* 数字列表 */
 
+.list-decimal {
 
+  list-style-type: decimal;
 
+}
 
+.text-left {
 
+  text-align: left;
 
+}
 
+.text-center {
 
+  text-align: center;
 
+}
 
+.text-right {
 
+  text-align: right;
 
+}
 
+/* 所有文本头尾对齐 */
 
+.text-justify {
 
+  text-align: justify;
 
+}
 
+/* 文本颜色 */
 
+/* text-[#50d71e] */
 
+/* https://tailwindcss.com/docs/text-color */
 
+/* 下划线 */
 
+.underline {
 
+  text-decoration-line: underline;
 
+}
 
+/* 上划线 */
 
+.overline {
 
+  text-decoration-line: overline;
 
+}
 
+/* 中划线 */
 
+.line-through {
 
+  text-decoration-line: line-through;
 
+}
 
+/* 无划线 */
 
+.no-underline {
 
+  text-decoration-line: none;
 
+}
 
+/* 全小写 */
 
+.lowercase {
 
+  text-transform: lowercase;
 
+}
 
+/* 全大写 */
 
+.uppercase {
 
+  text-transform: uppercase;
 
+}
 
+/* 首字母大写 */
 
+.capitalize {
 
+  text-transform: capitalize;
 
+}

Some files were not shown because too many files changed in this diff