首页功能研发

src/assets/styles/variables.scss

@@ -24,7 +24,7 @@ $sidebarLightTitle: #001529;
 $subMenuBg:#1f2d3d;
 $subMenuHover:#001528;
 
-$sideBarWidth: 280px;
+$sideBarWidth: 260px;
 
 $logoBackgroundColor: #DE0010;
 

src/views/index.vue

@@ -2,31 +2,27 @@
   <div class="app-container home">
     <div class="home-head">
       <el-row :gutter="20">
-        <el-col :span="12">
+        <el-col :xs="12" :sm="24" :md="24" :lg="12" :xl="12" class="mb20">
           <div class="home-head-left">
             <div class="head-left-top">
               <div class="head-left-top-title">渔安街道党组织</div>
               <div class="head-left-top-subtitle">上次登录时间：2021-11-04 10:23</div>
             </div>
             <div class="head-left-middle">
-              <div class="head-left-middle_forward">
-                <div class="head-left-middle_forward-avatar">
-                  <img
-                    :src="require('@/assets/images/head-left-middle-avatar.jpg')"
-                    @error="imgViewerOnerror"
-                  />
-                </div>
-                <div class="head-left-middle_forward-name">张旭光</div>
-              </div>
-              <div class="head-left-middle_afterward">
-                <img :src="require('@/assets/images/home-head-img.png')" @error="imgViewerOnerror" />
+              <div class="head-left-middle-avatar">
+                <img
+                  :src="require('@/assets/images/head-left-middle-avatar.jpg')"
+                  @error="imgViewerOnerror"
+                />
               </div>
+              <div class="head-left-middle-name">张旭光</div>
+              <div class="head-left-middle-role">管理员</div>
             </div>
           </div>
         </el-col>
-        <el-col :span="12">
+        <el-col :xs="12" :sm="24" :md="24" :lg="12" :xl="12" class="mb20">
           <div class="home-head-right">
-            <el-row :gutter="10">
+            <el-row :gutter="10" type="flex" class="row-bg" justify="center">
               <el-col :span="6">
                 <div class="home-head-right_item">
                   <div class="home-head-right_item-title">正式党员数</div>
@@ -69,7 +65,71 @@
       </el-row>
     </div>
 
-    <div class="home-main"></div>
+    <div class="home-main">
+      <el-row :gutter="10">
+        <el-col :span="24">
+          <div class="home-main-title">
+            <div>
+              <img
+                :src="require('@/assets/logo/home-main-title-logo.png')"
+                @error="imgViewerOnerror"
+              />
+            </div>
+            <div>急需处理</div>
+          </div>
+        </el-col>
+        <el-col :span="24">
+          <div class="home-main-list">
+            <el-row :gutter="10" type="flex" class="row-bg" justify="space-between">
+              <template v-if="list.length > 0">
+                <el-col :span="5">
+                  <div class="home-main-list_card">
+                    <div class="home-main-list_card-basic">
+                      <img
+                        :src="require('@/assets/images/home-main-list-card-img.png')"
+                        @error="imgViewerOnerror"
+                      />
+
+                      <div class="list_card-basic-info">
+                        <div class="list_card-basic-info-name">郝爱党</div>
+                        <div class="list_card-basic-info-idcard">520103199512123412</div>
+                        <div class="list_card-basic-info-sex">男</div>
+                      </div>
+                    </div>
+                    <div class="home-main-list_card-stage">
+                      <div>所处阶段：</div>
+                      <div>发展对象的确认和考察</div>
+                    </div>
+                    <div class="home-main-list_card-node">
+                      <div>待更新节点：</div>
+                      <div>确认为发展对象的支委会会议记录</div>
+                    </div>
+                    <div class="home-main-list_card-status">已逾期2天</div>
+                    <div class="home-main-list_card-btn">
+                      <el-button type="danger">立即处理</el-button>
+                    </div>
+                  </div>
+                </el-col>
+              </template>
+              <template v-else>
+                <el-col :span="24">
+                  <div class="home-main-list-nodata">暂无数据</div>
+                </el-col>
+              </template>
+            </el-row>
+          </div>
+        </el-col>
+        <el-col :span="24">
+          <pagination
+            v-show="total>0"
+            :total="total"
+            :page.sync="queryParams.pageNum"
+            :limit.sync="queryParams.pageSize"
+            @pagination="initData"
+          />
+        </el-col>
+      </el-row>
+    </div>
   </div>
 </template>
 
@@ -78,9 +138,21 @@ export default {
   name: "index",
   data() {
     return {
+      total: 10,
+      queryParams: {
+        pageNum: 0,
+        pageSize: 10
+      },
+      list: [1]
     };
   },
+  created() {
+    this.initData();
+  },
   methods: {
+    /** 初始化数据 */
+    initData() {
+    }
   }
 };
 </script>
@@ -90,8 +162,14 @@ export default {
   &-head {
     &-left {
       padding: 15px 20px;
+      width: 100%;
+      min-height: 145px;
       background: #ffffff;
       border-radius: 10px;
+      background: url("../assets/images/home-head-img.png"), #ffffff;
+      background-size: 67px 67px, cover;
+      background-position: right 20px bottom 15px, center;
+      background-repeat: no-repeat, no-repeat;
 
       .head-left-top {
         display: flex;
@@ -126,48 +204,54 @@ export default {
 
       .head-left-middle {
         display: flex;
-        justify-content: space-between;
         align-items: center;
-        margin-top: 12px;
+        margin-top: 5px;
         width: 100%;
 
-        &_forward {
-          display: flex;
-          align-items: center;
-
-          &-avatar {
-            img {
-              width: 58px;
-              height: 58px;
-            }
-          }
-
-          &-name {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            margin-left: 15px;
+        &-avatar {
+          img {
+            width: 58px;
             height: 58px;
-            font-size: 20px;
-            font-weight: 400;
-            color: #363636;
-            line-height: 28px;
           }
         }
 
-        &_afterward {
-          margin-top: 10px;
+        &-name {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          margin-left: 15px;
+          height: 58px;
+          font-size: 20px;
+          font-weight: 400;
+          color: #363636;
+          line-height: 28px;
+        }
 
-          img {
-            width: 67px;
-            height: 67px;
-          }
+        &-role {
+          margin-left: 10px;
+          height: 20px;
+          font-size: 14px;
+          font-weight: 400;
+          color: #737373;
+          line-height: 20px;
+          opacity: 0.9;
         }
       }
     }
 
     &-right {
+      padding: 24px 20px;
+      width: 100%;
+      min-height: 145px;
+      background: #ffffff;
+      border-radius: 10px;
+      background: url("../assets/images/home-head-img.png"), #ffffff;
+      background-size: 67px 67px, cover;
+      background-position: right 20px bottom 15px, center;
+      background-repeat: no-repeat, no-repeat;
+
       &_item {
+        z-index: 10;
         width: 100%;
 
         &-title {
@@ -187,6 +271,7 @@ export default {
           display: flex;
           justify-content: center;
           align-items: center;
+          margin-top: 12px;
           width: 100%;
 
           div {
@@ -245,9 +330,171 @@ export default {
 
   &-main {
     padding: 20px 20px;
-    background: #ffffff;
+    min-height: 660px;
+    background: url("../assets/images/home-head-img.png"), #ffffff;
+    background-size: 67px 67px, cover;
+    background-position: right 20px bottom 30px, center;
+    background-repeat: no-repeat, no-repeat;
     border-radius: 10px;
+
+    &-title {
+      display: flex;
+      align-items: center;
+
+      div {
+        &:first-child {
+          height: 37px;
+          line-height: 37px;
+        }
+
+        &:last-child {
+          margin-left: 15px;
+          height: 37px;
+          font-size: 26px;
+          font-weight: 400;
+          color: #4f4f4f;
+          line-height: 37px;
+          letter-spacing: 1px;
+        }
+
+        img {
+          width: 34px;
+          height: 34px;
+        }
+      }
+    }
+
+    &-list {
+      margin-top: 20px;
+
+      &_card {
+        padding: 20px 10px;
+        width: 100%;
+        border: 1px solid #b5b5b5;
+        border-radius: 5px;
+
+        &-basic {
+          display: flex;
+          align-items: center;
+
+          img {
+            width: 73px;
+            height: 91px;
+          }
+
+          .list_card-basic-info {
+            margin-left: 16px;
+
+            &-name {
+              height: 25px;
+              font-size: 18px;
+              font-weight: 400;
+              color: #363636;
+              line-height: 25px;
+            }
+
+            &-idcard {
+              margin-top: 5px;
+              height: 22px;
+              font-size: 16px;
+              font-weight: 400;
+              color: #747474;
+              line-height: 22px;
+            }
+
+            &-sex {
+              margin-top: 5px;
+              height: 22px;
+              font-size: 16px;
+              font-weight: 400;
+              color: #363636;
+              line-height: 22px;
+              opacity: 0.9;
+            }
+          }
+        }
+
+        &-stage {
+          margin-top: 26px;
+          width: 100%;
+
+          div {
+            &:first-child {
+              height: 22px;
+              font-size: 16px;
+              font-weight: 400;
+              color: #363636;
+              line-height: 22px;
+              opacity: 0.9;
+            }
+
+            &:last-child {
+              margin-top: 4px;
+              height: 20px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #747474;
+              line-height: 20px;
+            }
+          }
+        }
+
+        &-node {
+          margin-top: 21px;
+          width: 100%;
+
+          div {
+            &:first-child {
+              height: 22px;
+              font-size: 16px;
+              font-weight: 400;
+              color: #363636;
+              line-height: 22px;
+              opacity: 0.9;
+            }
+
+            &:last-child {
+              margin-top: 4px;
+              height: 20px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #747474;
+              line-height: 20px;
+            }
+          }
+        }
+
+        &-status {
+          margin-top: 16px;
+          height: 20px;
+          font-size: 14px;
+          font-weight: 400;
+          color: #de0010;
+          line-height: 20px;
+        }
+
+        &-btn {
+          margin: 35px auto 15px;
+          text-align: center;
+
+          .el-button {
+            width: 70%;
+          }
+        }
+      }
+
+      &-nodata {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+        height: 386px;
+        border: 1px solid #b5b5b5;
+        border-radius: 5px;
+        color: #747474;
+        opacity: 0.8;
+      }
+    }
   }
 }
-</style>
-
+</style>