From ace15c58f748fcdbf141d835e9eb49f0d84cdefc Mon Sep 17 00:00:00 2001
From: x_ying <2438792676@qq.com>
Date: Fri, 16 Sep 2022 20:03:41 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A4=A7=E5=B1=8F=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/styles/font-some.css         |  46 ++++++++
 src/views/environmentalScreen/index.vue | 151 +++++++++++++++++++++++-
 2 files changed, 195 insertions(+), 2 deletions(-)
 create mode 100644 src/assets/styles/font-some.css

diff --git a/src/assets/styles/font-some.css b/src/assets/styles/font-some.css
new file mode 100644
index 0000000..336f426
--- /dev/null
+++ b/src/assets/styles/font-some.css
@@ -0,0 +1,46 @@
+.chartNum{
+    display: flex;
+    justify-content: center;
+    margin-top: 0.25rem;
+}
+.box-items {
+    position: relative;
+    display: flex;
+    height: 0.6rem;
+    text-align: center;
+}
+/*滚动数字设置*/
+.number-item {
+  display: flex;
+  justify-content: center;
+  text-align: center;
+  width: 0.45rem;
+  height: 0.6rem;
+  line-height: 0.6rem;
+  margin-right: 0.125rem;
+  border: 1px solid #2C75E0;
+}
+.number-item span{
+    position: relative;
+    display: inline-block;
+    width: 100%;
+    height: 100%;
+    writing-mode: vertical-rl;
+    text-orientation: upright;
+    overflow: hidden;
+}
+.number-item span i{
+    font-style: normal;
+    position: absolute;
+    top: 0.1rem;
+    left: 50%;
+    font-size: 0.325rem;
+    font-weight: bold;
+    color: #1AC9FF;
+    transform: translate(-50%,0);
+    transition: transform 1s ease-in-out;
+    letter-spacing: 10px;
+}
+.number-item:last-child {
+    margin-right: 0;
+}
diff --git a/src/views/environmentalScreen/index.vue b/src/views/environmentalScreen/index.vue
index 5f33a47..e5805ed 100644
--- a/src/views/environmentalScreen/index.vue
+++ b/src/views/environmentalScreen/index.vue
@@ -108,7 +108,7 @@
             </li>
           </ul>
         </div>
-        <div class="env-item container-wrap  device-container">
+        <!-- <div class="env-item container-wrap  device-container">
           <span class="right-top-line" />
           <span class="left-bottom-line" />
           <h3><i class="iconfont icon-shebeizhuangtai" />设备状态</h3>
@@ -172,6 +172,90 @@
               </div>
             </li>
           </ul>
+        </div> -->
+        <div class="middle-bottom">
+          <!-- <span class="right-top-line" />
+          <span class="left-bottom-line" /> -->
+          <div class="container-wrap middle-bottom-l">
+            <span class="right-top-line" />
+            <span class="left-bottom-line" />
+            <ul>
+              <li>
+                <div class="row-item">
+                  <div class="svg-box">
+                    <svg-icon icon-class="danganzongliang" class-name="card-panel-icon" />
+                  </div>
+                  <span>馆藏总量</span>
+                </div>
+                <span class="row-num">12345</span>
+              </li>
+              <li>
+                <div class="row-item">
+                  <div class="svg-box">
+                    <svg-icon icon-class="danganzongliang" class-name="card-panel-icon" />
+                  </div>
+                  <span>在借数量</span>
+                </div>
+                <span class="row-num">12345</span>
+              </li>
+              <li>
+                <div class="row-item">
+                  <div class="svg-box">
+                    <svg-icon icon-class="danganhezongliang" class-name="card-panel-icon" />
+                  </div>
+                  <span>在库数量</span>
+                </div>
+                <span class="row-num">12345</span>
+              </li>
+            </ul>
+            <ul>
+              <li>
+                <div class="row-item">
+                  <div class="svg-box">
+                    <svg-icon icon-class="quanbushebei" class-name="card-panel-icon" />
+                  </div>
+                  <span>全部设备</span>
+                </div>
+                <span class="row-num">12345</span>
+              </li>
+              <li>
+                <div class="row-item">
+                  <div class="svg-box">
+                    <svg-icon icon-class="zaixianshebei" class-name="card-panel-icon" />
+                  </div>
+                  <span>在线设备</span>
+                </div>
+                <span class="row-num">12345</span>
+              </li>
+              <li>
+                <div class="row-item">
+                  <div class="svg-box">
+                    <svg-icon icon-class="lixianshebei" class-name="card-panel-icon" />
+                  </div>
+                  <span>离线设备</span>
+                </div>
+                <span class="row-num">12345</span>
+              </li>
+            </ul>
+          </div>
+          <div class="container-wrap middle-bottom-r">
+            <span class="right-top-line" />
+            <span class="left-bottom-line" />
+            <ul>
+              <li>
+                <span>日借阅量</span>
+                <div class="chartNum">
+                  <div id="TNum" class="box-items">
+                    <li class="number-item"><span><i ref="numberItem" class="item">0123456789</i></span></li>
+                  </div>
+                </div>
+              </li>
+              <li><span>日归还量</span></li>
+              <li><span>月借阅量</span></li>
+              <li><span>月归还量</span></li>
+            </ul>
+
+          </div>
         </div>
       </div>
       <div class="env-main-right">
@@ -471,6 +555,8 @@ export default {
 
 <style rel="stylesheet/scss" lang="scss" scoped>
 @import "~@/assets/styles/lend-manage.scss";
+@import "~@/assets/styles/font-some.css";
+
 .env-container {
   width: 100%;
   height: calc(100vh);
@@ -749,7 +835,7 @@ export default {
     .env-3d {
       position: relative;
       width: 100%;
-      height: calc(100% - (100% / 3) - 8px);
+      height: calc(100% - (100% / 4) - 8px);
       margin-bottom: 20px;
       background: url("~@/assets/images/largeScreen/bg.png") no-repeat center -130px;
       // background-size: 100% 100%;
@@ -777,4 +863,65 @@ export default {
     }
   }
 }
+.middle-bottom{
+  display: flex;
+  color: #339CFF ;
+  font-size: 14px;
+  justify-content: space-between;
+    height: calc(100%  - 198px);
+  .middle-bottom-l{
+    display: flex;
+    justify-content: space-between;
+    width: 60%;
+    ul{
+      width: 59%;
+      padding: 25px 20px;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      li{
+        height: calc(100% / 3 - 14px);
+        background: linear-gradient(360deg, rgba(51,156,255,0.24) 0%, rgba(56,158,225,0) 70%, rgba(56,158,225,0) 100%);
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        .row-item{
+          display: flex;
+          align-items: center;
+          .svg-box{
+          margin-right: 10px;
+            .card-panel-icon{
+                font-size: 24px;
+            }
+          }
+        }
+        .row-num{
+            font-size: 18px;
+            color: #fff;
+        }
+
+        // padding: 10px 0;
+      }
+    }
+  }
+  .middle-bottom-r{
+    width: 38%;
+    ul{
+      width: 100%;
+      height: 100%;
+      padding: 20px;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+       li{
+        height: 20%;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        // padding: 10px 0;
+      }
+    }
+  }
+
+}
 </style>