feat(页面): 布局

src/assets/styles/element-ui.scss

@@ -116,3 +116,6 @@ $base-font-size: 16px;
 .el-select__wrapper{
   min-height:36px;
 }
+.el-date-editor .el-range-input{
+  font-size: 14px;
+}

src/assets/styles/index.scss

@@ -124,6 +124,8 @@ aside {
 //main-container全局样式
 .app-container {
   padding: 20px;
+  background: #FAFAFB;
+  min-height: calc(100vh - 100px);
 }
 
 .components-container {

src/assets/styles/sidebar.scss

@@ -44,7 +44,8 @@
 
     &.has-logo {
       .el-scrollbar {
-        height: calc(100% - 50px);
+        height: calc(100% - 300px);
+        margin-top:80px;
       }
     }
 
@@ -82,7 +83,7 @@
     .sub-menu-title-noDropdown,
     .el-sub-menu__title {
       &:hover {
-        background-color: rgba(0, 0, 0, 0.06) !important;
+        background-color: #1B51B4 !important;
       }
     }
 
@@ -95,7 +96,7 @@
       min-width: $base-sidebar-width !important;
 
       &:hover {
-        background-color: rgba(0, 0, 0, 0.06) !important;
+        background-color: #1B51B4 !important;
       }
     }
 
@@ -211,7 +212,7 @@
   .el-menu-item {
     &:hover {
       // you can use $sub-menuHover
-      background-color: rgba(0, 0, 0, 0.06) !important;
+      background-color: #1B51B4 !important;
     }
   }
 

src/assets/styles/variables.module.scss

@@ -10,9 +10,9 @@ $panGreen: #30B08F;
 
 // 默认主题变量
 $menuText: #bfcbd9;
-$menuActiveText: #409eff;
-$menuBg: #304156;
-$menuHover: #263445;
+$menuActiveText: #FFFFFF;
+$menuBg: #143468;
+$menuHover: #1B51B4;
 
 // 浅色主题theme-light
 $menuLightBg: #ffffff;
@@ -27,9 +27,9 @@ $sideBarWidth: 200px;
 // 菜单暗色变量
 $base-menu-color: #bfcbd9;
 $base-menu-color-active: #f4f4f5;
-$base-menu-background: #304156;
-$base-sub-menu-background: #1f2d3d;
-$base-sub-menu-hover: #001528;
+$base-menu-background: #143468;
+$base-sub-menu-background: #143468;
+$base-sub-menu-hover: #1B51B4;
 
 // 组件变量
 $--color-primary: #409EFF;

src/components/Breadcrumb/index.vue

@@ -95,4 +95,4 @@ getBreadcrumb()
     cursor: text;
   }
 }
-</style>
+</style>
\ No newline at end of file

src/layout/components/AppMain.vue

@@ -36,7 +36,7 @@ function addIframe() {
 <style lang="scss" scoped>
 .app-main {
   /* 50= navbar  50  */
-  min-height: calc(100vh - 50px);
+  min-height: calc(100vh - 100px);
   width: 100%;
   position: relative;
   overflow: hidden;
@@ -49,7 +49,7 @@ function addIframe() {
 .hasTagsView {
   .app-main {
     /* 84 = navbar + tags-view = 50 + 34 */
-    min-height: calc(100vh - 84px);
+    min-height: calc(100vh - 134px);
   }
 
   .fixed-header + .app-main {

src/layout/components/Navbar.vue

@@ -5,44 +5,64 @@
     <top-nav id="topmenu-container" class="topmenu-container" v-if="settingsStore.topNav" />
 
     <div class="right-menu">
-      <template v-if="appStore.device !== 'mobile'">
-        <header-search id="header-search" class="right-menu-item" />
+<!--      <template v-if="appStore.device !== 'mobile'">-->
+<!--        <div class="todo">-->
+          <div class="todo hover-effect">
+            <div  class="todo-logo"><img :src="todo" class="img-logo"/></div>
+            <div class="todo-title">待办</div>
+          </div>
+          <div class="todo hover-effect">
+            <div  class="todo-logo"><img :src="send" class="todo-logo"/></div>
+            <div class="todo-title">发起</div>
+          </div>
+          <div class="todo hover-effect">
+            <div  class="todo-logo"><img :src="handle" class="todo-logo"/></div>
+            <div class="todo-title">处理</div>
+          </div>
+          <div class="todo hover-effect">
+            <div  class="todo-logo"><img :src="initiate" class="todo-logo"/></div>
+            <div class="todo-title">抄送</div>
+          </div>
+<!--        </div>-->
+<!--        <header-search id="header-search" class="right-menu-item" />-->
 
-        <el-tooltip content="源码地址" effect="dark" placement="bottom">
-          <ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" />
-        </el-tooltip>
+<!--        <el-tooltip content="源码地址" effect="dark" placement="bottom">-->
+<!--          <ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" />-->
+<!--        </el-tooltip>-->
 
-        <el-tooltip content="文档地址" effect="dark" placement="bottom">
-          <ruo-yi-doc id="ruoyi-doc" class="right-menu-item hover-effect" />
-        </el-tooltip>
+<!--        <el-tooltip content="文档地址" effect="dark" placement="bottom">-->
+<!--          <ruo-yi-doc id="ruoyi-doc" class="right-menu-item hover-effect" />-->
+<!--        </el-tooltip>-->
 
-        <screenfull id="screenfull" class="right-menu-item hover-effect" />
+<!--        <screenfull id="screenfull" class="right-menu-item hover-effect" />-->
 
-        <el-tooltip content="主题模式" effect="dark" placement="bottom">
-          <div class="right-menu-item hover-effect theme-switch-wrapper" @click="toggleTheme">
-            <svg-icon v-if="settingsStore.isDark" icon-class="sunny" />
-            <svg-icon v-if="!settingsStore.isDark" icon-class="moon" />
-          </div>
-        </el-tooltip>
+<!--        <el-tooltip content="主题模式" effect="dark" placement="bottom">-->
+<!--          <div class="right-menu-item hover-effect theme-switch-wrapper" @click="toggleTheme">-->
+<!--            <svg-icon v-if="settingsStore.isDark" icon-class="sunny" />-->
+<!--            <svg-icon v-if="!settingsStore.isDark" icon-class="moon" />-->
+<!--          </div>-->
+<!--        </el-tooltip>-->
 
-        <el-tooltip content="布局大小" effect="dark" placement="bottom">
-          <size-select id="size-select" class="right-menu-item hover-effect" />
-        </el-tooltip>
-      </template>
+<!--        <el-tooltip content="布局大小" effect="dark" placement="bottom">-->
+<!--          <size-select id="size-select" class="right-menu-item hover-effect" />-->
+<!--        </el-tooltip>-->
+<!--      </template>-->
+      <el-divider direction="vertical" style="height: 50px"/>
       <div class="avatar-container">
         <el-dropdown @command="handleCommand" class="right-menu-item hover-effect" trigger="click">
           <div class="avatar-wrapper">
-            <img :src="userStore.avatar" class="user-avatar" />
-            <el-icon><caret-bottom /></el-icon>
+            <img :src="exit" class="user-exit" />
+<!--            <img :src="userStore.avatar" class="user-avatar" />-->
+<!--            <el-icon><caret-bottom /></el-icon>-->
           </div>
           <template #dropdown>
             <el-dropdown-menu>
               <router-link to="/user/profile">
                 <el-dropdown-item>个人中心</el-dropdown-item>
               </router-link>
-              <el-dropdown-item command="setLayout" v-if="settingsStore.showSettings">
-                <span>布局设置</span>
-              </el-dropdown-item>
+<!--              <el-dropdown-item command="setLayout" v-if="settingsStore.showSettings">-->
+<!--                <span>布局设置</span>-->
+<!--              </el-dropdown-item>-->
               <el-dropdown-item divided command="logout">
                 <span>退出登录</span>
               </el-dropdown-item>
@@ -67,11 +87,14 @@ import RuoYiDoc from '@/components/RuoYi/Doc'
 import useAppStore from '@/store/modules/app'
 import useUserStore from '@/store/modules/user'
 import useSettingsStore from '@/store/modules/settings'
-
+import todo from '@/assets/icons/common/todo.png'
+import send from  '@/assets/icons/common/send2.png'
+import handle from  '@/assets/icons/common/handle.png'
+import initiate from  '@/assets/icons/common/initiate.png'
+import exit from '@/assets/icons/common/exit.png'
 const appStore = useAppStore()
 const userStore = useUserStore()
 const settingsStore = useSettingsStore()
-
 function toggleSideBar() {
   appStore.toggleSideBar()
 }
@@ -113,12 +136,11 @@ function toggleTheme() {
 
 <style lang='scss' scoped>
 .navbar {
-  height: 50px;
+  height: 100px;
   overflow: hidden;
   position: relative;
   background: var(--navbar-bg);
-  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
-
+  //box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
   .hamburger-container {
     line-height: 46px;
     height: 100%;
@@ -126,7 +148,8 @@ function toggleTheme() {
     cursor: pointer;
     transition: background 0.3s;
     -webkit-tap-highlight-color: transparent;
-
+    display: flex;
+    align-items: center;
     &:hover {
       background: rgba(0, 0, 0, 0.025);
     }
@@ -134,6 +157,8 @@ function toggleTheme() {
 
   .breadcrumb-container {
     float: left;
+    display: flex;
+    height: 100%;
   }
 
   .topmenu-container {
@@ -151,7 +176,32 @@ function toggleTheme() {
     height: 100%;
     line-height: 50px;
     display: flex;
+    align-items: center;
+    .todo{
+      margin-right: 30px;
+      .todo-logo{
+        height:28px;
+        width: 28px;
+        .img-logo{
+          height:28px;
+          width: 28px;
+        }
+      }
+      .todo-title{
+        height: 20px;
+        font-weight: 500;
+        font-size: 14px;
+        color: #282D35;
+      }
+      &.hover-effect {
+        cursor: pointer;
+        transition: background 0.3s;
 
+        &:hover {
+          background: rgba(0, 0, 0, 0.025);
+        }
+      }
+    }
     &:focus {
       outline: none;
     }
@@ -179,7 +229,7 @@ function toggleTheme() {
 
         svg {
           transition: transform 0.3s;
-          
+
           &:hover {
             transform: scale(1.15);
           }
@@ -188,12 +238,16 @@ function toggleTheme() {
     }
 
     .avatar-container {
+      margin-left: 22px;
       margin-right: 40px;
 
       .avatar-wrapper {
         margin-top: 5px;
         position: relative;
-
+        .user-exit{
+          width: 28px;
+          height: 28px;
+        }
         .user-avatar {
           cursor: pointer;
           width: 40px;

src/layout/components/Sidebar/index.vue

 <template>
   <div :class="{ 'has-logo': showLogo }" class="sidebar-container">
-    <logo v-if="showLogo" :collapse="isCollapse" />
+    <img :src="toplogo" class="toplogo">
+    <div class="avatar">
+      <img :src="userStore.avatar" class="user-avatar" />
+      <div style="color:#FFFFFF;font-size: 20px;font-weight: 600;">{{userStore.name}}</div>
+    </div>
+<!--    <logo v-if="showLogo" :collapse="isCollapse" />-->
     <el-scrollbar wrap-class="scrollbar-wrapper">
       <el-menu
         :default-active="activeMenu"
@@ -21,6 +26,9 @@
         />
       </el-menu>
     </el-scrollbar>
+    <div style="display: flex;justify-content: center">
+      <img :src="comlogo" class="comlogo">
+    </div>
   </div>
 </template>
 
@@ -31,12 +39,14 @@ import variables from '@/assets/styles/variables.module.scss'
 import useAppStore from '@/store/modules/app'
 import useSettingsStore from '@/store/modules/settings'
 import usePermissionStore from '@/store/modules/permission'
-
+import toplogo from '@/assets/icons/common/toplogo.png'
+import comlogo from '@/assets/icons/common/comlogo.png'
+import useUserStore from "@/store/modules/user.js";
 const route = useRoute();
 const appStore = useAppStore()
 const settingsStore = useSettingsStore()
 const permissionStore = usePermissionStore()
-
+const userStore = useUserStore()
 const sidebarRouters = computed(() => permissionStore.sidebarRouters);
 const showLogo = computed(() => settingsStore.sidebarLogo);
 const sideTheme = computed(() => settingsStore.sideTheme);
@@ -71,7 +81,24 @@ const activeMenu = computed(() => {
 <style lang="scss" scoped>
 .sidebar-container {
   background-color: v-bind(getMenuBackground);
-  
+  .avatar{
+    position: absolute;
+    top: 40px;
+    left: 90px;
+  }
+  .user-avatar{
+    width: 70px;
+    height: 70px;
+    border-radius: 50%;
+  }
+  .comlogo{
+    width: 170px;
+    height:50px;
+  }
+.toplogo{
+  height: 81px;
+  width: 100%;
+}
   .scrollbar-wrapper {
     background-color: v-bind(getMenuBackground);
   }
@@ -80,7 +107,7 @@ const activeMenu = computed(() => {
     border: none;
     height: 100%;
     width: 100% !important;
-    
+
     .el-menu-item, .el-sub-menu__title {
       &:hover {
         background-color: var(--menu-hover, rgba(0, 0, 0, 0.06)) !important;
@@ -89,7 +116,7 @@ const activeMenu = computed(() => {
 
     .el-menu-item {
       color: v-bind(getMenuTextColor);
-      
+
       &.is-active {
         color: var(--menu-active-text, #409eff);
         background-color: var(--menu-hover, rgba(0, 0, 0, 0.06)) !important;

src/layout/index.vue

@@ -5,7 +5,7 @@
     <div :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }" class="main-container">
       <div :class="{ 'fixed-header': fixedHeader }">
         <navbar @setLayout="setLayout" />
-        <tags-view v-if="needTagsView" />
+<!--        <tags-view v-if="needTagsView" />-->
       </div>
       <app-main />
       <settings ref="settingRef" />
@@ -111,4 +111,4 @@ function setLayout() {
 .mobile .fixed-header {
   width: 100%;
 }
-</style>
+</style>
\ No newline at end of file

src/views/attendance/application/overtimeApplication.vue

-<template >
+<template>
   <div id="app">
     <el-container>
       <el-container>

src/views/material/index.vue

@@ -14,22 +14,40 @@
       <el-row>
         <el-col :span="24">
           <label class="input-label">物品编号</label>
-          <el-input v-model="form.itemCode" disabled style="width: 20%;"></el-input>
+          <el-input
+            v-model="form.itemCode"
+            disabled
+            style="width: 20%"
+          ></el-input>
         </el-col>
       </el-row>
       <!-- 物品名称 -->
       <el-row>
         <el-col :span="24">
           <label class="input-label">物品名称</label>
-          <el-input v-model="form.itemName" placeholder="请输入物品名称" style="width: 20%;"></el-input>
+          <el-input
+            v-model="form.itemName"
+            placeholder="请输入物品名称"
+            style="width: 20%"
+          ></el-input>
         </el-col>
       </el-row>
       <!-- 物品类型 -->
       <el-row>
         <el-col :span="24">
           <label class="input-label">物品类型</label>
-          <el-select v-model="form.itemType" filterable placeholder="请选择或输入" style="width: 20%;">
-            <el-option v-for="item in itemTypes" :key="item" :label="item" :value="item"></el-option>
+          <el-select
+            v-model="form.itemType"
+            filterable
+            placeholder="请选择或输入"
+            style="width: 20%"
+          >
+            <el-option
+              v-for="item in itemTypes"
+              :key="item"
+              :label="item"
+              :value="item"
+            ></el-option>
           </el-select>
         </el-col>
       </el-row>
@@ -37,22 +55,28 @@
       <el-row>
         <el-col :span="24">
           <label class="input-label">单位</label>
-          <el-input v-model="form.unit" placeholder="请输入单位" style="width: 20%;"></el-input>
+          <el-input
+            v-model="form.unit"
+            placeholder="请输入单位"
+            style="width: 20%"
+          ></el-input>
         </el-col>
       </el-row>
     </el-form>
 
     <!-- 提交和保存草稿按钮 -->
     <div class="button-container">
-      <el-button type="primary" @click="handleSubmit" style="margin-right: 20px;">提交</el-button>
+      <el-button type="primary" style="margin-right: 20px" @click="handleSubmit"
+        >提交</el-button
+      >
       <el-button @click="saveDraft">保存草稿</el-button>
     </div>
   </div>
 </template>
 
 <script>
-import { addMaterial } from '@/api/material/material.js';
-import { ElMessage } from 'element-plus';
+import { addMaterial } from '@/api/material/material.js'
+import { ElMessage } from 'element-plus'
 
 export default {
   data() {
@@ -64,36 +88,52 @@ export default {
         unit: ''
       },
       itemTypes: ['办公家具', '办公设备', '日杂百货']
-    };
+    }
   },
+    created() {
+    // 加载草稿
+        const draft = localStorage.getItem('materialDraft')
+        if (draft) {
+            this.form = JSON.parse(draft)
+            ElMessage.info('已加载草稿')
+        }
+    },
+    mounted() {
+    // 页面加载时生成物品编号
+        if (!this.form.itemCode) {
+            this.form.itemCode = this.generateItemCode()
+        }
+    },
   methods: {
     generateItemCode() {
-      const now = new Date();
-      const year = now.getFullYear();
-      const month = String(now.getMonth() + 1).padStart(2, '0');
-      const day = String(now.getDate()).padStart(2, '0');
-      const hours = String(now.getHours()).padStart(2, '0');
-      const minutes = String(now.getMinutes()).padStart(2, '0');
-      const seconds = String(now.getSeconds()).padStart(2, '0');
-      return `WP${year}${month}${day}${hours}${minutes}${seconds}`;
+      const now = new Date()
+      const year = now.getFullYear()
+      const month = String(now.getMonth() + 1).padStart(2, '0')
+      const day = String(now.getDate()).padStart(2, '0')
+      const hours = String(now.getHours()).padStart(2, '0')
+      const minutes = String(now.getMinutes()).padStart(2, '0')
+      const seconds = String(now.getSeconds()).padStart(2, '0')
+      return `WP${year}${month}${day}${hours}${minutes}${seconds}`
     },
     handleSubmit() {
       if (this.form.itemName && this.form.itemType && this.form.unit) {
-        addMaterial(this.form).then(response => {
-          ElMessage.success('物品信息提交成功');
-          // 清空表单
-          this.resetForm();
-        }).catch(error => {
-          ElMessage.error('物品信息提交失败: ' + error.message);
-        });
+        addMaterial(this.form)
+                    .then(response => {
+                        ElMessage.success('物品信息提交成功')
+                        // 清空表单
+                        this.resetForm()
+                    })
+                    .catch(error => {
+                        ElMessage.error('物品信息提交失败: ' + error.message)
+                    })
       } else {
-        ElMessage.warning('请填写所有必填项');
+        ElMessage.warning('请填写所有必填项')
       }
     },
     saveDraft() {
       // 保存草稿到本地存储
-      localStorage.setItem('materialDraft', JSON.stringify(this.form));
-      ElMessage.info('草稿已保存');
+      localStorage.setItem('materialDraft', JSON.stringify(this.form))
+      ElMessage.info('草稿已保存')
     },
     resetForm() {
       this.form = {
@@ -101,26 +141,12 @@ export default {
         itemName: '',
         itemType: '',
         unit: ''
-      };
+      }
       // 清除草稿
-      localStorage.removeItem('materialDraft');
-    }
-  },
-  created() {
-    // 加载草稿
-    const draft = localStorage.getItem('materialDraft');
-    if (draft) {
-      this.form = JSON.parse(draft);
-      ElMessage.info('已加载草稿');
-    }
-  },
-  mounted() {
-    // 页面加载时生成物品编号
-    if (!this.form.itemCode) {
-      this.form.itemCode = this.generateItemCode();
+      localStorage.removeItem('materialDraft')
     }
   }
-};
+}
 </script>
 
 <style scoped>
@@ -149,7 +175,7 @@ export default {
   border-bottom: 4px solid;
   border-color: rgb(0, 137, 127);
   height: 2px;
-  opacity: .2;
+  opacity: 0.2;
   margin-top: 6px;
 }