优化页面

licp

2024-04-16 8aaf0180a50a92c1876c35ff53336a1a46532baa

 src/components/view/index-index.vue

@@ -1,16 +1,186 @@
<style scoped>
   .index {
      width: 100%;
      height: calc(100% - 50px);
      overflow-y: auto;
      padding: 25px 0;
   }

   .left-1 {
      background-image: url("../../../static/img/首页图片1.png");
      background-size: 100% 100%;
      height: 118px;
      margin-bottom: 10px;
   }

   .left-1 .say {
      height: 100%;
      display: flex;
      align-items: center;
      margin-left: 15%;
      width: 45%;
   }

   .left-1 .say div {
      color: #fff;
      margin: 4px 0;
   }

   .left-1 .say-1 {
      font-size: 18px;
   }

   .left-1 .say-2 {
      font-size: 17px;
   }

   ::-webkit-scrollbar {
      width: 0px;
   }

   ::-webkit-scrollbar-thumb {
      background-color: transparent;
      border-radius: 3px;
   }

  .card{
    background: #FFFFFF;
    border-radius: 16px;
    width: 100%;
    box-sizing: border-box;
  }

  .right-1{
    padding: 14px 10px 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .right-1-item{
    width: 25%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .right-1-item .mun{
    margin-left: 6px;
    color: #0166E2;
  }

</style>

<template>
  <div class="index">首页</div>
   <div class="index">
    <el-row :gutter="25">
      <el-col :xs="24" :sm="24" :md="14" :lg="14" :xl="14">
        <div class="left-1">
               <div class="say">
                  <div style="display: flex;align-items: center;flex-wrap: wrap;">
                     <div class="say-1">{{user.name}} 您好！祝您开心每一天</div>
                     <div class="say-2">当前时间： {{now}}</div>
                  </div>
               </div>
            </div>
        <div class="left-2 card"></div>
      </el-col>
      <el-col :xs="24" :sm="24" :md="10" :lg="10" :xl="10">
        <div class="right-1 card">
          <div class="right-1-item">
            <div class="img">
              <img src="../../../static/img/index-0.svg" alt="">
            </div>
            <div class="mun">
              <p style="font-size: 20px;">254</p>
              <p style="font-size: 14px;margin-bottom: 10px;">我的代办</p>
            </div>
          </div>
          <div class="right-1-item">
            <div class="img">
              <img src="../../../static/img/index-1.svg" alt="">
            </div>
            <div class="mun">
              <p style="font-size: 20px;">254</p>
              <p style="font-size: 14px;margin-bottom: 10px;">已办事宜</p>
            </div>
          </div>
          <div class="right-1-item">
            <div class="img">
              <img src="../../../static/img/index-2.svg" alt="">
            </div>
            <div class="mun">
              <p style="font-size: 20px;">254</p>
              <p style="font-size: 14px;margin-bottom: 10px;">剩余待办</p>
            </div>
          </div>
          <div class="right-1-item">
            <div class="img">
              <img src="../../../static/img/index-3.svg" alt="">
            </div>
            <div class="mun">
              <p style="font-size: 20px;">254</p>
              <p style="font-size: 14px;margin-bottom: 10px;">近期事宜</p>
            </div>
          </div>
        </div>
        <div class="right-2 card">
        </div>
        <div class="right-3 card">
        </div>
      </el-col>
    </el-row>
   </div>
</template>

<script>
   export default{
   export default {
      data() {
         return{}
         return {
            user: {},
            now: null,
         }
      },
      mounted() {
         this.user = JSON.parse(localStorage.getItem('user'))
         this.nowTime()
         this.getDataList()
         setInterval(() => {
            this.nowTime()
         }, 1000)
      },
      methods: {
         nowTime() {
            var date = new Date();
            var y = date.getFullYear();
            var m = date.getMonth() + 1;
            var d = date.getDate();
            var h = date.getHours();
            this.timeH = h
            var min = date.getMinutes();
            var s = date.getSeconds();
            if (s < 10) {
               s = "0" + s;
            }
            if (min < 10) {
               min = "0" + min;
            }
            if (h < 10) {
               h = "0" + h;
            }
            if (d < 10) {
               d = "0" + d;
            }
            if (m < 10) {
               m = "0" + m;
            }
            this.now = y + "-" + m + "-" + d + "  " + h + ":" + min + ":" + s;
         },
         getDataList() {
            this.$axios.get(this.$api.dataReporting.getDataList).then(res => {
               this.data = res.data
            })
         }
      }
   }
</script>
</script>