优化页面

licp

2024-04-16 8aaf0180a50a92c1876c35ff53336a1a46532baa

 src/components/view/index-index.vue

@@ -6,32 +6,10 @@
      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;
      height: 118px;
      margin-bottom: 10px;
   }

@@ -56,13 +34,6 @@
      font-size: 17px;
   }

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

   ::-webkit-scrollbar {
      width: 0px;
   }
@@ -72,17 +43,39 @@
      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">
    <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">
    <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>
@@ -90,10 +83,53 @@
                  </div>
               </div>
            </div>
         </div>
         <div class="right card">
         </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>