修改样式

licp

2024-04-16 c1e5dfb4c72a0ab2478d3b7295ab7deecd3f8c8c

 src/components/view/index-index.vue

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

   .no {
      width: 100%;
      display: flex;
      margin-bottom: 10px;
   }

   .card {
      border-radius: 6px;
      background-color: #fff;
      padding: 10px 20px;
   }

   .no1 {
      display: flex;
    justify-content: space-between;
   }

   .no1 .left {
      width: 65%;
   }

   .left-1 {
      background-image: url("../../../static/img/首页图片1.png");
      background-size: 100% 100%;
      width: calc(100% - 40px);
      height: 7.2vw;
      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;
   }

   .right {
      width: 32%;
      height: calc(7.2vw + 10px + 120px);
      display: flex;
      flex-wrap: wrap;
   }

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

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

</style>

<template>
  <div class="index">首页</div>
   <div class="index">
    <el-row :gutter="10">
      <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple"></div></el-col>
      <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple-light"></div></el-col>
    </el-row>
      <div class="no no1">
         <div class="left">
            <div class="left-1 card">
               <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>
         <div class="right card">
         </div>
      </div>
   </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>