项目结构整合配置

src/assets/styles/variables.scss

@@ -24,7 +24,9 @@ $sidebarLightTitle: #001529;
 $subMenuBg:#1f2d3d;
 $subMenuHover:#001528;
 
-$sideBarWidth: 200px;
+$sideBarWidth: 280px;
+
+$logoBackgroundColor: #DE0010;
 
 // the :export directive is the magic sauce for webpack
 // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
@@ -40,5 +42,6 @@ $sideBarWidth: 200px;
   subMenuHover: $subMenuHover;
   sideBarWidth: $sideBarWidth;
   sidebarTitle: $sidebarTitle;
-  sidebarLightTitle: $sidebarLightTitle
+  sidebarLightTitle: $sidebarLightTitle;
+  logoBackgroundColor: $logoBackgroundColor;
 }

src/layout/components/Navbar.vue

@@ -10,9 +10,9 @@
         <search id="header-search" class="right-menu-item" />
         <screenfull id="screenfull" class="right-menu-item hover-effect" />
 
-        <el-tooltip content="布局大小" effect="dark" placement="bottom">
+        <!-- <el-tooltip content="布局大小" effect="dark" placement="bottom">
           <size-select id="size-select" class="right-menu-item hover-effect" />
-        </el-tooltip>
+        </el-tooltip> -->
 
       </template>
 
@@ -25,9 +25,9 @@
           <router-link to="/user/profile">
             <el-dropdown-item>个人中心</el-dropdown-item>
           </router-link>
-          <el-dropdown-item @click.native="setting = true">
+          <!-- <el-dropdown-item @click.native="setting = true">
             <span>布局设置</span>
-          </el-dropdown-item>
+          </el-dropdown-item> -->
           <el-dropdown-item divided @click.native="logout">
             <span>退出登录</span>
           </el-dropdown-item>

src/layout/components/Sidebar/Logo.vue

@@ -1,13 +1,29 @@
 <template>
-  <div class="sidebar-logo-container" :class="{'collapse':collapse}" :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBg : variables.menuLightBg }">
+  <!-- <div
+    class="sidebar-logo-container"
+    :class="{'collapse':collapse}"
+    :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBg : variables.menuLightBg }"
+  >-->
+  <div
+    class="sidebar-logo-container"
+    :class="{'collapse':collapse}"
+    :style="{ backgroundColor: variables.logoBackgroundColor }"
+  >
     <transition name="sidebarLogoFade">
       <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
-        <img v-if="logo" :src="logo" class="sidebar-logo">
-        <h1 v-else class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.sidebarTitle : variables.sidebarLightTitle }">{{ title }} </h1>
+        <img v-if="logo" :src="logo" class="sidebar-logo" />
+        <h1
+          v-else
+          class="sidebar-title"
+          :style="{ color: sideTheme === 'theme-dark' ? variables.sidebarTitle : variables.sidebarLightTitle }"
+        >{{ title }}</h1>
       </router-link>
       <router-link v-else key="expand" class="sidebar-logo-link" to="/">
-        <img v-if="logo" :src="logo" class="sidebar-logo">
-        <h1 class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.sidebarTitle : variables.sidebarLightTitle }">{{ title }} </h1>
+        <img v-if="logo" :src="logo" class="sidebar-logo" />
+        <h1
+          class="sidebar-title"
+          :style="{ color: sideTheme === 'theme-dark' ? variables.sidebarTitle : variables.sidebarLightTitle }"
+        >{{ title }}</h1>
       </router-link>
     </transition>
   </div>
@@ -29,7 +45,7 @@ export default {
     variables() {
       return variables;
     },
-	sideTheme() {
+    sideTheme() {
       return this.$store.state.settings.sideTheme
     }
   },
@@ -75,12 +91,13 @@ export default {
     & .sidebar-title {
       display: inline-block;
       margin: 0;
-      color: #fff;
-      font-weight: 600;
-      line-height: 50px;
-      font-size: 14px;
+      font-size: 24px;
       font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
       vertical-align: middle;
+      font-weight: 400;
+      color: #ffffff;
+      line-height: 50px;
+      opacity: 0.98;
     }
   }
 

src/main.js

@@ -20,7 +20,7 @@ import { getDicts } from "@/api/system/dict/data";
 import { getConfigKey } from "@/api/system/config";
 import { getToken } from "@/utils/auth";
 import { parseTime, resetForm, addDateRange, selectDictLabel, selectDictLabels, handleTree } from "@/utils/ruoyi";
-import { handleOpenLoading, handleCloseLoading } from "@/utils/rockeryutil";
+import { handleOpenLoading, handleCloseLoading, imgViewerOnerror } from "@/utils/rockeryutil";
 
 // 分页组件
 import Pagination from "@/components/Pagination";
@@ -41,6 +41,7 @@ Vue.prototype.getToken = getToken;
 Vue.prototype.baseApiUrl = process.env.VUE_APP_BASE_API;
 Vue.prototype.handleOpenLoading = handleOpenLoading;
 Vue.prototype.handleCloseLoading = handleCloseLoading;
+Vue.prototype.imgViewerOnerror = imgViewerOnerror;
 
 // 成功消息提示框
 Vue.prototype.msgSuccess = function (msg) {

src/utils/rockeryutil.js

@@ -3,8 +3,8 @@
  * @Author: Rockery
  * @Date: 2021-04-26 15:53:59
  * @LastEditors: Rockery
- * @LastEditTime: 2021-04-26 16:04:44
- * @FilePath: \pc_web\src\utils\rockeryutil.js
+ * @LastEditTime: 2021-12-09 10:42:00
+ * @FilePath: \party_construct_web\src\utils\rockeryutil.js
  * @Copyright: Copyright (c) 2016~2021 Rockery(1113269755@qq.com)
  */
 
@@ -40,3 +40,13 @@ export function handleOpenLoading(paramText, paramTarget) {
 export function handleCloseLoading(paramLoading) {
   (null !== paramLoading) && paramLoading.close();
 }
+
+/**
+ * 图片加载失败事件
+ * @param {Object} ele
+ */
+ export function imgViewerOnerror(ele) {
+  const img = ele.srcElement;
+  img.src = require('@/assets/images/empty_img.png');
+  img.onerror = null;
+}

src/views/index.vue

@@ -3,22 +3,73 @@
     <div class="home-head">
       <el-row :gutter="20">
         <el-col :span="12">
-          <div class="home-head-left">渔安街道党组织
-            <div></div>
+          <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>
+            </div>
           </div>
         </el-col>
         <el-col :span="12">
           <div class="home-head-right">
             <el-row :gutter="10">
-              <el-col :span="6">正式党员数</el-col>
-              <el-col :span="6">预备党员数</el-col>
-              <el-col :span="6">发展党员数</el-col>
-              <el-col :span="6">积极分子数</el-col>
+              <el-col :span="6">
+                <div class="home-head-right_item">
+                  <div class="home-head-right_item-title">正式党员数</div>
+                  <div class="home-head-right_item-content">
+                    <div class="formal">258</div>
+                    <div>人</div>
+                  </div>
+                </div>
+              </el-col>
+              <el-col :span="6">
+                <div class="home-head-right_item">
+                  <div class="home-head-right_item-title">预备党员数</div>
+                  <div class="home-head-right_item-content">
+                    <div class="prep">258</div>
+                    <div>人</div>
+                  </div>
+                </div>
+              </el-col>
+              <el-col :span="6">
+                <div class="home-head-right_item">
+                  <div class="home-head-right_item-title">发展党员数</div>
+                  <div class="home-head-right_item-content">
+                    <div class="develop">591</div>
+                    <div>人</div>
+                  </div>
+                </div>
+              </el-col>
+              <el-col :span="6">
+                <div class="home-head-right_item">
+                  <div class="home-head-right_item-title">积极分子数</div>
+                  <div class="home-head-right_item-content">
+                    <div class="positive">591</div>
+                    <div>人</div>
+                  </div>
+                </div>
+              </el-col>
             </el-row>
           </div>
         </el-col>
       </el-row>
     </div>
+
+    <div class="home-main"></div>
   </div>
 </template>
 
@@ -37,6 +88,165 @@ export default {
 <style scoped lang="scss">
 .home {
   &-head {
+    &-left {
+      padding: 15px 20px;
+      background: #ffffff;
+      border-radius: 10px;
+
+      .head-left-top {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        width: 100%;
+
+        &-title {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          height: 37px;
+          font-size: 26px;
+          font-weight: 400;
+          color: #de0010;
+          line-height: 37px;
+          letter-spacing: 1px;
+        }
+
+        &-subtitle {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          height: 37px;
+          font-size: 14px;
+          font-weight: 400;
+          color: #737373;
+          line-height: 20px;
+          opacity: 0.7;
+        }
+      }
+
+      .head-left-middle {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-top: 12px;
+        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;
+            height: 58px;
+            font-size: 20px;
+            font-weight: 400;
+            color: #363636;
+            line-height: 28px;
+          }
+        }
+
+        &_afterward {
+          margin-top: 10px;
+
+          img {
+            width: 67px;
+            height: 67px;
+          }
+        }
+      }
+    }
+
+    &-right {
+      &_item {
+        width: 100%;
+
+        &-title {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          width: 100%;
+          height: 20px;
+          font-size: 14px;
+          font-weight: 400;
+          color: #585858;
+          line-height: 20px;
+          opacity: 0.8;
+        }
+
+        &-content {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          width: 100%;
+
+          div {
+            &:last-child {
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              height: 59px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #939393;
+              line-height: 20px;
+              opacity: 0.8;
+            }
+          }
+
+          .formal {
+            height: 59px;
+            font-size: 42px;
+            font-weight: 500;
+            color: #f75d5d;
+            line-height: 59px;
+            letter-spacing: 1px;
+          }
+
+          .prep {
+            height: 59px;
+            font-size: 42px;
+            font-weight: 500;
+            color: #f7a25d;
+            line-height: 59px;
+            letter-spacing: 1px;
+          }
+
+          .develop {
+            height: 59px;
+            font-size: 42px;
+            font-weight: 500;
+            color: #3b98e0;
+            line-height: 59px;
+            letter-spacing: 1px;
+          }
+
+          .positive {
+            height: 59px;
+            font-size: 42px;
+            font-weight: 500;
+            color: #57ba4d;
+            line-height: 59px;
+            letter-spacing: 1px;
+          }
+        }
+      }
+    }
+  }
+
+  &-main {
+    padding: 20px 20px;
+    background: #ffffff;
+    border-radius: 10px;
   }
 }
 </style>

src/views/login.vue

@@ -1,7 +1,10 @@
 <template>
   <div class="login">
     <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
-      <h3 class="title">{{ loginTitle }}</h3>
+      <h3 class="title">
+        <img :src="require('@/assets/logo/login-logo.png')" />
+        {{ loginTitle }}
+      </h3>
       <el-form-item prop="username">
         <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="请输入账号">
           <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
@@ -49,7 +52,7 @@
     <!--  底部  -->
     <!-- <div class="el-login-footer">
       <span>Copyright © 2018-2021 ****** All Rights Reserved.</span>
-    </div> -->
+    </div>-->
   </div>
 </template>
 
@@ -158,21 +161,30 @@ export default {
   background-size: cover;
 }
 .title {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   margin: 0px auto 30px auto;
   text-align: center;
   font-weight: 700;
   font-style: normal;
   font-size: 30px;
-  color: #323232;
+  color: #414141;
+  letter-spacing: 11px;
+
+  img {
+    width: 60px;
+    height: 61px;
+    margin-right: 10px;
+  }
 }
 
 .login-form {
   margin-right: 16%;
   border-radius: 6px;
-  // background: #ffffff;
   width: 400px;
   padding: 25px 25px 5px 25px;
-  background: rgba(255, 255, 255, 0.501960784313725);
+  background: rgba(255, 255, 255, 0.6);
   border: none;
   border-radius: 14px;
   box-shadow: none;