普通员工页面开发

ruoyi-ui/src/views/home2.vue

@@ -1,14 +1,144 @@
 <template>
-  <div class="fontElec1">0123456789普通员工页面</div>
+  <div class="generalstaff">
+    <div class="generalstaff_title">
+      <i class="dots" />XX装置RC总览
+    </div>
+    <div class="card">
+      <div class="card_left">
+        <div class="card_title"><img src="../assets/images/index/yushen.png" alt=""></div>
+        <div class="card_timeBg">
+          <div class="day"><div class="fontElec1">321</div><div class="dayword">天</div></div>
+          <div class="hourglass"><img src="../assets/images/index/hourglass.png" alt=""></div>
+        </div>
+        <div class="time">
+          <div class="time1">2019年01月14日</div>
+          <div class="time2">星期一 20时59分32秒</div>
+        </div>
+      </div>
+      <div class="card_right">
+        <div class="card_title"><img src="../assets/images/index/shenji.png" alt=""></div>
+        <div class="card_timeBg">
+          <div class="day"><div class="fontElec1">321</div><div class="dayword">天</div></div>
+          <div class="hourglass"><img src="../assets/images/index/hourglass.png" alt=""></div>
+        </div>
+        <div class="time">
+          <div class="time1">2019年01月14日</div>
+          <div class="time2">星期一 20时59分32秒</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 图表区域 -->
+    <div class="echartsBox">
+      <!-- 柱状图 -->
+      <div class="echartsBox_Barchart">
+        这是柱状图
+      </div>
+      <!-- 饼图 -->
+      <div class="echartsBox_Piechart">
+        这是饼图
+      </div>
+    </div>
+  </div>
+
 </template>
 
 <script>
-  export default {
-  };
+export default {
+}
 </script>
 
 <style scoped>
   .fontElec1 {
     font:30px/15px 'ds-digitalbold';
+    /* background: url(../assets/images/index/888.png) no-repeat; */
+    width: 215px;
+    height: 82px;
+    background-size: 100% 100%;
+    font-size: 120px;
+    color: #fff;
+    padding-top: 35px;
+    padding-left: 0;
+    letter-spacing: 21px;
+  }
+
+.generalstaff{
+  padding: 20px 50px 90px 49px;
+}
+
+  .generalstaff_title{
+    /* width: 289px;
+    height: 43px; */
+    font-family: Alibaba PuHuiTi 3.0;
+    font-weight: normal;
+    font-size: 46px;
+    color: #333333;
+    margin-left: 16px;
+  }
+  .dots{
+    width: 25px;
+    height: 25px;
+    /* background: #4d86ff; */
+    /* 背景色渐变 */
+    background: linear-gradient(45deg, #4d86ff, #5489f9);
+    display: inline-block;
+    border-radius: 100%;
+    margin-right: 10px;
+  }
+
+  .card{
+    display: flex;
+    justify-content: space-between;
+  }
+  .card_left ,.card_right{
+    background: url(../assets/images/index/cardBg.png) no-repeat ;
+    background-size: 100% 100%;
+    width: 672px;
+    height: 334px;
+    padding: 40px 30px 30px 50px;
+  }
+
+  .card_title{
+    width: 268px;
+    height: 49px;
+  }
+
+  .card_timeBg{
+    width: 550px;
+    height: 208px;
+    background: url(../assets/images/index/cardBg-2.png) no-repeat;
+    background-size: 100% 100%;
+    margin-left: -45px;
+    margin-top: -25px;
+    padding-top: 0px;
+    padding-left: 60px;
+    display: flex;
+    align-items: center;
+  }
+
+  .day{
+    display: flex;
+    font-size: 50px;
+    color: #fff;
+    font-weight: bold;
+  }
+  .dayword{
+    margin: 16px 0 0 10px;
+  }
+  .hourglass{
+    margin-left: 75px;
+  }
+  .time{
+    font-family: MiSans;
+    font-weight: 400;
+    font-size: 21px;
+    color: #FFFFFF;
+    margin-top: -30px;
+  }
+
+  .echartsBox{
+    display: flex;
+    justify-content: space-around;
+    margin-top: 90px;
   }
 </style>