home1组件开发

ruoyi-ui/src/views/home1.vue

@@ -1,8 +1,548 @@
 <template>
-  <div>上级领导页面</div>
+  <div>
+    <div class="top">
+      <div class="topItem itembg1">
+        <div class="icon">
+          <img src="../assets/images/index/index2-2-1.png" alt="">
+        </div>
+        <div class="word">
+          <div class="topItemTitle">设备总数</div>
+          <div class="topItemContent">1147</div>
+        </div>
+
+      </div>
+      <div class="topItem itembg2">
+        <div class="icon">
+          <img src="../assets/images/index/index2-2-2.png" alt="">
+        </div>
+        <div class="word">
+          <div class="topItemTitle">本月未完成计划</div>
+          <div class="topItemContent">16</div>
+        </div>
+      </div>
+      <div class="topItem itembg3">
+        <div class="icon">
+          <img src="../assets/images/index/index2-2-3.png" alt="">
+        </div>
+        <div class="word">
+          <div class="topItemTitle">本月已完成计划</div>
+          <div class="topItemContent">16</div>
+        </div>
+      </div>
+      <div class="topItem itembg4">
+        <div class="icon">
+          <img src="../assets/images/index/index2-2-4.png" alt="">
+        </div>
+        <div class="word">
+          <div class="topItemTitle">未处理问题数量</div>
+          <div class="topItemContent">0</div>
+        </div>
+      </div>
+    </div>
+
+    <div class="bottom">
+      <!-- 左边 -->
+      <div class="bot-left">
+        <div class="card cardleft1">
+          <div class="cardword">
+            <div class="cardleft1Title">电厂</div>
+            <div class="cardleft1Content">Power<br>Plant</div>
+          </div>
+        </div>
+
+        <div class="card cardleft2">
+          <div class="cardword">
+            <div class="cardleft1Title">合成气</div>
+            <div class="cardleft1Content">Syngas</div>
+          </div>
+        </div>
+
+        <div class="card cardleft3">
+          <div class="cardword">
+            <div class="cardleft1Title">D900</div>
+          </div>
+        </div>
+
+        <div class="card cardleft4">
+          <div class="cardword">
+            <div class="cardleft1Title">C900</div>
+          </div>
+        </div>
+
+        <div class="card cardleft5">
+          <div class="cardword">
+            <div class="cardleft1Title">B900</div>
+          </div>
+        </div>
+
+        <div class="card card2 cardleft6">
+          <div class="cardword">
+            <div class="cardleft1Title">聚苯乙烯包装库房</div>
+            <div class="cardleft1Content">LDPE/EVA Storage <br>A100/200</div>
+          </div>
+        </div>
+
+        <div class="card cardleft7">
+          <div class="cardword">
+            <div class="cardleft1Title">D800</div>
+          </div>
+        </div>
+
+        <div class="card cardleft8">
+          <div class="cardword">
+            <div class="cardleft1Title">C800</div>
+            <div class="cardleft1Content">乙苯/苯乙烯<br>EB/SM</div>
+          </div>
+        </div>
+
+        <div class="card cardleft9">
+          <div class="cardword">
+            <div class="cardleft1Title">聚苯乙烯</div>
+            <div class="cardleft1Content">PS<br>B800</div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 中间 -->
+      <div class="bot-center">
+        <div class="card card2 cardleft10">
+          <div class="cardword">
+            <div class="cardleft1Title">火炬BCC Flare</div>
+          </div>
+        </div>
+
+        <div class="card card2 cardleft11">
+          <div class="cardword">
+            <div class="cardleft1Title">裂解<br>罐区<br>SCTF</div>
+          </div>
+        </div>
+
+        <div class="card card2 cardleft12">
+          <div class="cardword">
+            <div class="cardleft1Title">蒸汽裂解</div>
+            <div class="cardleft1Content">EU<br>D100/200</div>
+          </div>
+        </div>
+
+        <div class="card card2 cardleft13">
+          <div class="cardword">
+            <div class="cardleft1Title">芳烃抽提<br>汽油加氢</div>
+            <div class="cardleft1Content">LDPE/EVA Storage <br>A100/200</div>
+          </div>
+        </div>
+
+        <div class="card card2 cardleft14">
+          <div class="cardword">
+            <div class="cardleft1Title">异丁烯/聚异丁烯/丁二烯</div>
+            <div class="cardleft1Content">IB/PIB/BD<br>C100/200</div>
+          </div>
+        </div>
+
+        <div class="card card2 cardleft15">
+          <div class="cardword">
+            <div class="cardleft1Title">公用工程</div>
+            <div class="cardleft1Content">U1<br>C300</div>
+          </div>
+        </div>
+
+        <div class="card card2 cardleft16">
+          <div class="cardword">
+            <div class="cardleft1Title">低密度聚乙烯醋<br>酸乙烯共聚物</div>
+            <div class="cardleft1Content">LDPE<br>B100/200</div>
+          </div>
+        </div>
+
+        <div class="card card2 cardleft17">
+          <div class="cardword">
+            <div class="cardleft1Title">醇类联合</div>
+            <div class="cardleft1Content">OXO<br>B300</div>
+          </div>
+        </div>
+
+        <div class="card card2 cardleft18">
+          <div class="cardword">
+            <div class="cardleft1Title">聚乙烯仓库</div>
+            <div class="cardleft1Content">LDPE/EVA<br>Storage A100/200</div>
+          </div>
+        </div>
+
+        <div class="card card2 cardleft19">
+          <div class="cardword">
+            <div class="cardleft1Title">危险品仓库</div>
+            <div class="cardleft1Content">Hazard Chemical<br>Storage A300</div>
+          </div>
+        </div>
+      </div>
+      <!-- 右边 -->
+      <div class="bot-right">
+        <div class="card cardleft20">
+          <div class="cardword">
+            <div class="cardleft1Title">氧化炉</div>
+            <div class="cardleft1Content">TO</div>
+          </div>
+        </div>
+        <div class="card card2 cardleft21">
+          <div class="cardword">
+            <div class="cardleft1Title">中央罐区</div>
+            <div class="cardleft1Content">CLTF</div>
+          </div>
+        </div>
+        <div class="card cardleft22">
+          <div class="cardword">
+            <div class="cardleft1Title">环氧乙烷/<br>乙二醇</div>
+            <div class="cardleft1Content"> EO/EG<br>D400</div>
+          </div>
+        </div>
+        <div class="card cardleft23">
+          <div class="cardword">
+            <div class="cardleft1Title">非离子表面<br>活性剂</div>
+            <div class="cardleft1Content">NIS<br>500</div>
+          </div>
+        </div>
+        <div class="card cardleft24">
+          <div class="cardword">
+            <div class="cardleft1Title">非离子表面<br>活性剂</div>
+            <div class="cardleft1Content">NIS<br>D500</div>
+          </div>
+        </div>
+        <div class="card cardleft25">
+          <div class="cardword">
+            <div class="cardleft1Title">非离子表面<br>活性剂</div>
+            <div class="cardleft1Content">NIS<br>D500</div>
+          </div>
+        </div>
+        <div class="card cardleft26">
+          <div class="cardword">
+            <div class="cardleft1Title">公用工程</div>
+            <div class="cardleft1Content">U2<br>C400</div>
+          </div>
+        </div>
+        <div class="card cardleft27">
+          <div class="cardword">
+            <div class="cardleft1Title">精丙烯酸</div>
+            <div class="cardleft1Content">GAA<br>C500</div>
+          </div>
+        </div>
+        <div class="card cardleft28">
+          <div class="cardword">
+            <div class="cardleft1Title">非离子表面<br>活性剂</div>
+            <div class="cardleft1Content">NIS<br>D500</div>
+          </div>
+        </div>
+        <div class="card cardleft29">
+          <div class="cardword">
+            <div class="cardleft1Title">非离子表面<br>活性剂</div>
+            <div class="cardleft1Content">NIS<br>D500</div>
+          </div>
+        </div>
+        <div class="card card2 cardleft30">
+          <div class="cardword">
+            <div class="cardleft1Title">低密度聚乙烯醋<br>酸乙烯共聚物</div>
+            <div class="cardleft1Content">LDPE<br>B100/200</div>
+          </div>
+        </div>
+        <div class="card cardleft31">
+          <div class="cardword">
+            <div class="cardleft1Title">碳一联合</div>
+            <div class="cardleft1Content">C1<br>B600</div>
+          </div>
+        </div>
+        <div class="card cardleft32">
+          <div class="cardword">
+            <div class="cardleft1Title">B700</div>
+          </div>
+        </div>
+        <div class="card card2 cardleft33">
+          <div class="cardword">
+            <div class="cardleft1Title">物流库房</div>
+            <div class="cardleft1Content">Logistical storage<br>A400/A500</div>
+          </div>
+        </div>
+        <div class="card cardleft34">
+          <div class="cardword">
+            <div class="cardleft1Title">碳一联合库房 </div>
+            <div class="cardleft1Content">C1 complex<br>Storage<br>A600</div>
+          </div>
+        </div>
+        <div class="card cardleft35">
+          <div class="cardword">
+            <div class="cardleft1Title">铁路控制室</div>
+            <div class="cardleft1Content">Rail Control<br>Room<br>A700</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
   export default {
   };
 </script>
+<style scoped>
+ .top{
+    display: flex;
+    margin-left: 35px;
+    margin-top: 10px;
+    margin-right: 15px;
+    justify-content: space-between;
+ }
+  .topItem{
+    padding: 50px 20px 50px 60px;
+    display: flex;
+    align-items: center;
+  }
+  .topItem .icon{
+    width: 40px;
+    height: 40px;
+    margin-right: 34px;
+  }
+  .topItem .icon img{
+   width: 100%;
+    height: 100%;
+  }
+  .topItem .word{
+    font-size: 16px;
+    color: #fff;
+    font-weight: bold;
+  }
+ .topItem.itembg1{
+    background: url(../assets/images/index/index2-1-1.png) no-repeat;
+    background-size: 100% 100%;
+    width: 23.4%;
+    height: 161px;
+    margin-right: 10px;
+ }
+
+ .topItem.itembg2{
+    background: url(../assets/images/index/index2-1-2.png) no-repeat;
+    background-size: 100% 100%;
+    width: 23.4%;
+    height: 161px;
+    margin-right: 10px;
+ }
+
+ .topItem.itembg3{
+    background: url(../assets/images/index/index2-1-3.png) no-repeat;
+    background-size: 100% 100%;
+    width: 23.4%;
+    height: 161px;
+    margin-right: 10px;
+ }
+
+ .topItem.itembg4{
+    background: url(../assets/images/index/index2-1-4.png) no-repeat;
+    background-size: 100% 100%;
+    width: 23.4%;
+    height: 161px;
+    margin-left: 10px;
+ }
+
+ .bottom{
+    background: url(../assets/images/index/index2-bg.png) no-repeat;
+    width: 98%;
+    height: 698px;
+    background-size: 100% 100%;
+    margin-left: 25px;
+    margin-right: 10px;
+    display: flex;
+    position: relative;
+ }
+
+ .bottom .card{
+  background: url(../assets/images/index/index2-3-2.png) no-repeat;
+  width: 6.55%;
+  height: 14.6%;
+  background-size: 100% 100%;
+  /* padding: 20px; */
+  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+ }
+
+ .bottom .card.card2{
+  background: url(../assets/images/index/index2-3-1.png) no-repeat;
+  width: 14.5%;
+  height: 14.789%;
+  background-size: 100% 100%;
+ }
+
+ .cardword{
+  color: #1971FF;
+  font-size: 12px;
+ }
+
+ .cardleft1Title{
+  font-weight: bold;
+ }
+ .cardleft1Content{
+  font-size: 11px;
+ }
+
+ .cardleft1{
+    top: 27.556%;
+    left: 3.76%;
+ }
+
+ .cardleft2{
+    top: 47.11%;
+    left: 3.76%;
+ }
+
+ .cardleft3{
+    top: 26.8%;
+    left: 14.285%;
+ }
+
+ .cardleft4{
+    top: 44.6%;
+    left: 14.285%;
+ }
+
+ .cardleft5{
+    top: 61.4%;
+    left: 14.285%;
+ }
+
+ .cardleft6{
+    top: 78.6967%;
+    left: 14.285%;
+ }
+
+ .cardleft7{
+    top: 26.8%;
+    left: 23.07%;
+ }
+
+ .cardleft8{
+    top: 44.6%;
+    left: 23.07%;
+ }
+
+ .cardleft9{
+    top: 61.4%;
+    left: 23.07%;
+ }
+
+ .cardleft10{
+    top: 8.897%;
+    left: 33.05%;
+ }
+ .cardleft11{
+    top: 8.897%;
+    left: 49.05%;
+ }
+
+ .cardleft12{
+    top: 26.897%;
+    left: 33.05%;
+ }
+
+ .cardleft13{
+    top: 26.897%;
+    left: 49.05%;
+ }
+
+ .cardleft14{
+    top: 44.897%;
+    left: 33.05%;
+ }
+
+ .cardleft15{
+    top: 44.897%;
+    left: 49.05%;
+ }
+
+ .cardleft16{
+    top: 61.897%;
+    left: 33.05%;
+ }
+ .cardleft17{
+    top: 61.897%;
+    left: 49.05%;
+ }
+
+ .cardleft18{
+    top: 78.6967%;
+    left: 33.05%;
+ }
+ .cardleft19{
+    top: 78.6967%;
+    left: 49.05%;
+ }
+
+ .cardleft20{
+    top: 8.897%;
+    left: 75.05%;
+ }
+
+ .cardleft21{
+  top: 8.897%;
+  left: 83.05%;
+ }
+
+ .cardleft22{
+  top: 26.897%;
+  left: 67.05%;
+ }
+ .cardleft23{
+  top: 26.897%;
+  left: 75.05%;
+ }
+ .cardleft24{
+  top: 26.897%;
+  left: 83.05%;
+ }
+ .cardleft25{
+  top: 26.897%;
+  left: 91.05%;
+ }
+ .cardleft26{
+  top: 44.897%;
+  left: 67.05%;
+ }
+ .cardleft27{
+  top: 44.897%;
+  left: 75.05%;
+ }
+ .cardleft28{
+  top: 44.897%;
+  left: 83.05%;
+ }
+ .cardleft29{
+  top: 44.897%;
+  left: 91.05%;
+ }
+
+ .cardleft30{
+  top: 61.897%;
+  left: 67.05%;
+ }
+
+ .cardleft31{
+  top: 61.897%;
+  left: 83.05%;
+ }
+
+ .cardleft32{
+  top: 61.897%;
+  left: 91.05%;
+ }
+
+ .cardleft33{
+  top: 78.6967%;
+  left: 67.05%;
+ }
+
+ .cardleft34{
+  top: 78.6967%;
+  left: 83.05%;
+ }
+
+ .cardleft35{
+  top: 78.6967%;
+  left: 91.05%;
+ }
+</style>