feat: 页面style

src/assets/svg/layers (1).svg

@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="design-iconfont">
-  <g opacity=".5" fill="#FFF" fill-rule="nonzero">
+  <g opacity=".5" fill="white" fill-rule="nonzero">
     <path d="M12.4583333,13 C12.7574876,13 13,12.7574876 13,12.4583333 L13,0.541666671 C13,0.242512429 12.7574876,0 12.4583333,0 L0.541666671,0 C0.242512429,0 0,0.242512429 0,0.541666671 L0,12.4583333 C0,12.7574876 0.242512429,13 0.541666671,13 L12.4583333,13 Z M11.9166667,11.9166667 L1.08333333,11.9166667 L1.08333333,1.08333333 L11.9166667,1.08333333 L11.9166667,11.9166667 Z" transform="translate(1.5 1.5)"/>
     <path d="M10.1595,7.635875 C10.0297127,7.5741153 9.8807004,7.56647178 9.74527507,7.61462753 C9.60984975,7.66278327 9.49911645,7.76278945 9.43745833,7.892625 C8.82390524,9.18469979 7.43773303,9.92375052 6.02298037,9.71308599 C4.6082277,9.50242147 3.49751607,8.39157087 3.28702853,6.97679186 C3.076541,5.56201285 3.81576514,4.17593311 5.10791667,3.56254167 C5.28276097,3.47952208 5.40003334,3.3095305 5.41555841,3.1166011 C5.43108348,2.9236717 5.34250263,2.73711506 5.18318341,2.62720525 C5.02386418,2.51729545 4.81801096,2.5007304 4.64316667,2.58375 C2.92074223,3.4018847 1.93554589,5.24981661 2.21626125,7.13589434 C2.49697661,9.02197207 3.97762534,10.5028986 5.86365036,10.7839679 C7.74967539,11.0650372 9.59779212,10.0801876 10.41625,8.35791667 C10.5444983,8.08777588 10.4295702,7.7648135 10.1595,7.63641667 L10.1595,7.635875 Z" transform="translate(1.5 1.5)"/>
     <path d="M10.674625,6.88295833 C10.7762142,6.78139977 10.8333334,6.64364719 10.8333334,6.5 C10.833477,5.3506845 10.3769769,4.24840073 9.56428806,3.43571194 C8.75159927,2.62302315 7.6493155,2.16652298 6.5,2.16666664 C6.20084576,2.16666664 5.95833333,2.40917909 5.95833333,2.70833333 L5.95833333,6.5 C5.95833333,6.79915424 6.20084576,7.04166667 6.5,7.04166667 L10.2916667,7.04166667 C10.4353139,7.04166667 10.5730664,6.98454758 10.674625,6.88295833 Z M9.70504167,5.95833333 L7.04166667,5.95833333 L7.04166667,3.2955 C8.40548082,3.52604285 9.47395715,4.59451918 9.7045,5.95833333 L9.70504167,5.95833333 Z" transform="translate(1.5 1.5)"/>

src/assets/svg/layers (2).svg

@@ -1,3 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="design-iconfont">
-  <path d="M9.26598063,6.34730851 L5.58467911,10.1684598 L3.73098327,8.13009892 C3.55958123,7.9415988 3.26782442,7.92771115 3.07930977,8.09918583 C2.89082419,8.27060239 2.87698012,8.56234467 3.04839669,8.75083026 L5.13941732,11.0501801 C5.23047147,11.1502845 5.35540219,11.2011284 5.48084135,11.2011284 C5.52013642,11.2011284 5.55947507,11.196015 5.59782589,11.1859914 C5.62554975,11.1911199 5.65368391,11.1937067 5.68187812,11.1937197 C5.80281396,11.1937197 5.92360453,11.1464349 6.01415025,11.0524754 L9.93040867,6.98741865 C10.1071856,6.80395934 10.1017381,6.511912 9.91824972,6.33514956 C9.73476136,6.15838712 9.44271401,6.16382015 9.26598063,6.34730851 L9.26598063,6.34730851 Z M12.0427111,1.86334166 L10.2013485,1.86334166 L10.2013485,0.46131394 C10.2013485,0.206542436 9.9948061,0 9.7400346,0 C9.48526309,0 9.27872066,0.206527909 9.27872066,0.46131394 L9.27872066,1.86335619 L3.69122334,1.86335619 L3.69122334,0.468562827 C3.69122334,0.213791323 3.48469543,0.00724888702 3.2299094,0.00724888702 C2.97513789,0.00724888702 2.76859546,0.213776796 2.76859546,0.468562827 L2.76859546,1.86334166 L0.96132735,1.86334166 C0.431243407,1.86334166 0,2.29531141 0,2.82628149 L0,12.0370602 C0,12.5680157 0.431243407,13 0.96132735,13 L12.0427111,13 C12.5728096,13 13.004082,12.5680157 13.004082,12.0370602 L13.004082,2.82628149 C13.004082,2.29532594 12.5728096,1.86334166 12.0427111,1.86334166 Z M0.96132735,2.78445875 L12.0427111,2.78445875 C12.0649081,2.78445875 12.0829359,2.80324194 12.0829359,2.82628149 L12.0829359,4.64560686 L0.921131618,4.64560686 L0.921131618,2.82628149 C0.921131618,2.80324194 0.939159411,2.78445875 0.96132735,2.78445875 Z M12.0427111,12.0788684 L0.96132735,12.0788684 C0.939144884,12.0788684 0.921117091,12.0601142 0.921117091,12.0370602 L0.921117091,5.56823474 L12.0829359,5.56823474 L12.0829359,12.0370747 C12.0829359,12.0601288 12.0649081,12.0788684 12.0427111,12.0788684 Z" transform="translate(1.5 1.5)" opacity=".5" fill="#FFF" fill-rule="nonzero"/>
+  <path d="M9.26598063,6.34730851 L5.58467911,10.1684598 L3.73098327,8.13009892 C3.55958123,7.9415988 3.26782442,7.92771115 3.07930977,8.09918583 C2.89082419,8.27060239 2.87698012,8.56234467 3.04839669,8.75083026 L5.13941732,11.0501801 C5.23047147,11.1502845 5.35540219,11.2011284 5.48084135,11.2011284 C5.52013642,11.2011284 5.55947507,11.196015 5.59782589,11.1859914 C5.62554975,11.1911199 5.65368391,11.1937067 5.68187812,11.1937197 C5.80281396,11.1937197 5.92360453,11.1464349 6.01415025,11.0524754 L9.93040867,6.98741865 C10.1071856,6.80395934 10.1017381,6.511912 9.91824972,6.33514956 C9.73476136,6.15838712 9.44271401,6.16382015 9.26598063,6.34730851 L9.26598063,6.34730851 Z M12.0427111,1.86334166 L10.2013485,1.86334166 L10.2013485,0.46131394 C10.2013485,0.206542436 9.9948061,0 9.7400346,0 C9.48526309,0 9.27872066,0.206527909 9.27872066,0.46131394 L9.27872066,1.86335619 L3.69122334,1.86335619 L3.69122334,0.468562827 C3.69122334,0.213791323 3.48469543,0.00724888702 3.2299094,0.00724888702 C2.97513789,0.00724888702 2.76859546,0.213776796 2.76859546,0.468562827 L2.76859546,1.86334166 L0.96132735,1.86334166 C0.431243407,1.86334166 0,2.29531141 0,2.82628149 L0,12.0370602 C0,12.5680157 0.431243407,13 0.96132735,13 L12.0427111,13 C12.5728096,13 13.004082,12.5680157 13.004082,12.0370602 L13.004082,2.82628149 C13.004082,2.29532594 12.5728096,1.86334166 12.0427111,1.86334166 Z M0.96132735,2.78445875 L12.0427111,2.78445875 C12.0649081,2.78445875 12.0829359,2.80324194 12.0829359,2.82628149 L12.0829359,4.64560686 L0.921131618,4.64560686 L0.921131618,2.82628149 C0.921131618,2.80324194 0.939159411,2.78445875 0.96132735,2.78445875 Z M12.0427111,12.0788684 L0.96132735,12.0788684 C0.939144884,12.0788684 0.921117091,12.0601142 0.921117091,12.0370602 L0.921117091,5.56823474 L12.0829359,5.56823474 L12.0829359,12.0370747 C12.0829359,12.0601288 12.0649081,12.0788684 12.0427111,12.0788684 Z" transform="translate(1.5 1.5)" opacity=".5" fill="white" fill-rule="nonzero"/>
 </svg>

src/assets/svg/layers.svg

@@ -1,3 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="design-iconfont">
-  <path d="M7.99975586,7.5084095 L1.92640564,4.97791052 C1.5159767,4.80690241 1.51597583,4.20040798 1.92640558,4.02939963 L7.99975586,1.49890137 L14.0731058,4.02939963 C14.4835348,4.20040751 14.4835358,4.80690193 14.0731068,4.97791028 L7.99975586,7.5084095 Z M7.99975586,2.59850323 L12.572237,4.50365543 L7.99975538,6.40880775 L3.42727458,4.50365567 L7.99975586,2.59850323 Z M1.49902344,8.25379086 L8.00001335,11.1119394 L14.4990234,8.25466061 L14.4990234,7.02751637 L8.00001335,9.88479519 L1.49902344,7.02664614 L1.49902344,8.25379086 Z M1.49902344,11.6465769 L8.00010777,14.5047674 L14.4990234,11.6475306 L14.4990234,10.4203844 L8.00010777,13.2776222 L1.49902344,10.4194317 L1.49902344,11.6465769 Z" fill="#FFF" opacity=".5" fill-rule="evenodd"/>
+  <path d="M7.99975586,7.5084095 L1.92640564,4.97791052 C1.5159767,4.80690241 1.51597583,4.20040798 1.92640558,4.02939963 L7.99975586,1.49890137 L14.0731058,4.02939963 C14.4835348,4.20040751 14.4835358,4.80690193 14.0731068,4.97791028 L7.99975586,7.5084095 Z M7.99975586,2.59850323 L12.572237,4.50365543 L7.99975538,6.40880775 L3.42727458,4.50365567 L7.99975586,2.59850323 Z M1.49902344,8.25379086 L8.00001335,11.1119394 L14.4990234,8.25466061 L14.4990234,7.02751637 L8.00001335,9.88479519 L1.49902344,7.02664614 L1.49902344,8.25379086 Z M1.49902344,11.6465769 L8.00010777,14.5047674 L14.4990234,11.6475306 L14.4990234,10.4203844 L8.00010777,13.2776222 L1.49902344,10.4194317 L1.49902344,11.6465769 Z" fill="white" opacity=".5" fill-rule="evenodd"/>
 </svg>

src/layout/components/footer/index.vue

@@ -33,6 +33,6 @@ const TITLE = getConfig("Title");
   font-size: 14px;
   // background: #d5e8fb !important;
   // background: #d5e8fb00 !important;
-  background: linear-gradient(to right, #d5e8fb, white, #d5e8fb);
+  background: linear-gradient(to right, #d5e8fb, #d5e8fb, #d5e8fb);
 }
 </style>

src/layout/components/sidebar/breadCrumb.vue

@@ -122,6 +122,6 @@ watch(
 </template>
 <style scoped lang="scss">
 .bg {
-  background: linear-gradient(to right, #d5e8fb, white, #d5e8fb);
+  background: linear-gradient(to right, #d5e8fb, #d5e8fb, #d5e8fb);
 }
 </style>

src/layout/components/sidebar/mixNav.vue

@@ -10,7 +10,7 @@ import { ref, toRaw, watch, onMounted, nextTick } from "vue";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
 import { getParentPaths, findRouteByPath } from "@/router/utils";
 import { usePermissionStoreHook } from "@/store/modules/permission";
-
+import { useAppStoreHook } from "@/store/modules/app";
 import LogoutCircleRLine from "@iconify-icons/ri/logout-circle-r-line";
 import Setting from "@iconify-icons/ri/settings-3-line";
 const router = useRouter();
@@ -67,6 +67,9 @@ watch(
 const changePassword = () => {
   router.push("/password/change");
 };
+const open = () => {
+  useAppStoreHook().toggleSideBar(true, "打开");
+};
 </script>
 
 <template>
@@ -98,7 +101,7 @@ const changePassword = () => {
               :is="useRenderIcon(route.meta && toRaw(route.meta.icon))"
             />
           </div>
-          <div :style="getDivStyle">
+          <div :style="getDivStyle" @click="open">
             <span class="select-none">
               {{ route.meta.title }}
             </span>
@@ -208,6 +211,7 @@ const changePassword = () => {
   width: 80%;
   height: 30px;
   content: "";
-  background-color: #d5e8fb;
+  background: #fff;
+  opacity: 0.08;
 }
 </style>

src/layout/components/sidebar/vertical.vue

@@ -19,7 +19,6 @@ const showLogo = ref(
     `${responsiveStorageNameSpace()}configure`
   )?.showLogo ?? true
 );
-
 const {
   device,
   pureApp,
@@ -119,11 +118,13 @@ onBeforeUnmount(() => {
         />
       </el-menu>
     </el-scrollbar>
-    <CenterCollapse
-      v-if="device !== 'mobile' && (isShow || isCollapse)"
-      :is-active="pureApp.sidebar.opened"
-      @toggleClick="toggleSideBar"
-    />
+    <div v-if="route.name != 'Welcome' && route.name != 'evaluateNewAdd'">
+      <CenterCollapse
+        v-if="device !== 'mobile' && (isShow || isCollapse)"
+        :is-active="pureApp.sidebar.opened"
+        @toggleClick="toggleSideBar"
+      />
+    </div>
     <LeftCollapse
       v-if="device !== 'mobile'"
       :is-active="pureApp.sidebar.opened"

src/layout/hooks/useNav.ts

@@ -38,8 +38,6 @@ export function useNav() {
 
   /** 用户名 */
   const username = computed(() => {
-    // ;
-    console.log("username1111111", localStorage.getItem("username"));
     return useUserStoreHook()?.username;
   });
 

src/layout/index.vue

@@ -80,7 +80,7 @@ function setTheme(layoutModel: string) {
 
 function toggle(device: string, bool: boolean) {
   useAppStoreHook().toggleDevice(device);
-  useAppStoreHook().toggleSideBar(bool, "resize");
+  // useAppStoreHook().toggleSideBar(bool, "resize");
 }
 
 // 判断是否可自动关闭菜单栏

src/routerList/background.ts

@@ -1,10 +1,12 @@
 import server5 from "@/assets/icon-png/menuList/server (5).svg";
+import layer from "@/assets/svg/layers (3).svg";
 
 export default {
   path: "/background",
   meta: {
     title: "管理后台",
-    icon: "ri:settings-3-line",
+    // icon: "ri:settings-3-line",
+    icon: layer,
     rank: 6
   },
   children: [

src/routerList/draw.ts

@@ -1,11 +1,12 @@
 import server from "@/assets/icon-png/menuList/server (2).svg";
-
+import layer from "@/assets/svg/layers (1).svg";
 // 最简代码，也就是这些字段必须有
 export default {
   path: "/draw",
   meta: {
     title: "动态可视化",
-    icon: "ep:set-up",
+    // icon: "ep:set-up",
+    icon: layer,
     rank: 4
   },
   children: [

src/routerList/evaluate.ts

@@ -1,13 +1,15 @@
 // evaluateIndex;
 import server3 from "@/assets/icon-png/menuList/server (3).svg";
 import server4 from "@/assets/icon-png/menuList/server (4).svg";
+import layer from "@/assets/svg/layers (2).svg";
 
 // 最简代码，也就是这些字段必须有
 export default {
   path: "/evaluate",
   meta: {
     title: "考核评估",
-    icon: "ri:checkbox-circle-line",
+    // icon: "ri:checkbox-circle-line",
+    icon: layer,
     rank: 4
   },
   component: () => import("@/views/evaluate/children/change/manage.vue"),

src/store/modules/app.ts

@@ -46,6 +46,7 @@ export const useAppStore = defineStore({
       const layout = storageLocal().getItem<StorageConfigs>(
         `${responsiveStorageNameSpace()}layout`
       );
+      console.log("layout", opened, resize);
       if (opened && resize) {
         this.sidebar.withoutAnimation = true;
         this.sidebar.opened = true;

src/style/sidebar.scss

@@ -342,6 +342,7 @@
       transition: color 0.3s;
     }
 
+    // 子菜单选中状态
     .el-menu-item.is-active.nest-menu > * {
       z-index: 1;
 
@@ -426,6 +427,8 @@
       // color: $subMenuActiveText !important;
       color: $subMenuActiveText !important;
 
+      // border: 1px solid green;
+
       i {
         // color: $subMenuActiveText !important;
       }
@@ -433,13 +436,16 @@
 
     .nest-menu .el-sub-menu > .el-sub-menu__title,
     .el-menu-item {
+      // 鼠标悬停颜色
       &:hover {
-        color: $menuTitleHover !important;
+        // color: $menuTitleHover !important;
+        color: #fff !important;
       }
     }
 
     .el-menu-item.is-active {
-      color: $subMenuActiveText !important;
+      z-index: 10;
+      color: #ffffffe6 !important;
       transition: color 0.3s;
     }
 
@@ -566,15 +572,25 @@
       border: none;
     }
 
+    // 菜单未选中时的颜色
     .el-menu-item,
     .el-sub-menu__title {
+      // border: 1px solid red;
+
       padding-right: var(--el-menu-base-level-padding);
-      color: $menuText;
+      font-size: 14px;
+
+      // color: $menuText;
+      // opacity: 0.8;
+      font-weight: 500;
+      line-height: 22px;
+      color: #ffffffc5;
+      letter-spacing: 0;
 
       // color: black;
 
       &:hover {
-        color: $menuTitleHover !important;
+        // color: $menuTitleHover !important;
       }
     }
 
@@ -598,8 +614,15 @@
       }
     }
 
+    // 选中字体颜色
     .is-active {
-      color: $subMenuActiveText !important;
+      font-size: 14px;
+      font-weight: 500;
+      line-height: 22px;
+      color: #ffffffe6;
+      letter-spacing: 0;
+
+      // color: $subMenuActiveText !important;
       transition: color 0.3s;
     }
   }

src/views/evaluate/children/change/components/newAdd.vue

@@ -11,6 +11,7 @@ import { useRouter, useRoute } from "vue-router";
 import { Edit } from "@element-plus/icons-vue";
 import { ElMessageBox, ElMessage } from "element-plus";
 import { postAddRelationList } from "@/api/dimension";
+import { useAppStoreHook } from "@/store/modules/app";
 import {
   postAddDimension,
   getDimensionRemove,
@@ -21,8 +22,6 @@ import { delQuota } from "@/api/indexDefine";
 import settingIndexDrawer from "./settingIndexDrawer.vue";
 import { postAddTemplate, getInfo, getListBy } from "@/api/templateInfo";
 import importIndex from "./importIndex.vue";
-import { useNav } from "@/layout/hooks/useNav";
-const { toggleSideBar } = useNav();
 const router = useRouter();
 const route = useRoute();
 const formRef = ref();
@@ -146,12 +145,13 @@ const createAdd = () => {
   editDrawer.value.open(tepNameForm, "新建");
 };
 const backChange = () => {
-  toggleSideBar();
+  useAppStoreHook().toggleSideBar(true, "打开");
   router.back();
 };
 const save = () => {
   if (titleShow.value) {
     router.back();
+    useAppStoreHook().toggleSideBar(true, "打开");
   } else {
     formRef.value.validate(valid => {
       if (valid) {

src/views/evaluate/children/change/mould.vue

@@ -9,6 +9,7 @@ import { Search } from "@element-plus/icons-vue";
 import copyMould from "./mould/copyMould.vue";
 import { getTemplateInfoList, getDeleteTemplate } from "@/api/templateInfo";
 import { Delete, Check } from "@element-plus/icons-vue";
+import { useAppStoreHook } from "@/store/modules/app";
 import editExam from "./manage/addExam.vue";
 import { ElMessage, ElMessageBox } from "element-plus";
 import dayjs from "dayjs";
@@ -20,39 +21,13 @@ const addExamShow = ref(false);
 const copyMouldRef = ref();
 const copyMouldShow = ref(false);
 const router = useRouter();
-const tableData = [
-  {
-    date: "2016-05-03",
-    name: "Tom",
-    address: "No. 189, Grove St, Los Angeles",
-    show: false
-  },
-  {
-    date: "2016-05-02",
-    name: "Tom",
-    address: "No. 189, Grove St, Los Angeles",
-    show: false
-  },
-  {
-    date: "2016-05-04",
-    name: "Tom",
-    address: "No. 189, Grove St, Los Angeles",
-    show: false
-  },
-  {
-    date: "2016-05-01",
-    name: "Tom",
-    address: "No. 189, Grove St, Los Angeles",
-    show: false
-  }
-];
 const newAdd = () => {
   router.push("/evaluate/children/change/components/newAdd");
-  toggleSideBar();
+  useAppStoreHook().toggleSideBar(false, "关闭");
 };
 const setEdit = (row: any) => {
   router.push({ name: "evaluateNewAdd", query: { ...row } });
-  toggleSideBar();
+  useAppStoreHook().toggleSideBar(false, "关闭");
 };
 // 删除
 const setDelete = (row: any) => {

src/views/indexDefine/children/define.vue

@@ -283,13 +283,15 @@ const postUpdateDeptApi = async (row, state) => {
                   <span
                     class="el-dropdown-link navbar-bg-hover select-none pt-1"
                   >
-                    <el-text type="primary" @click="setEdit(row)">编辑</el-text>
+                    <!-- <el-text type="primary" @click="setEdit(row)">编辑</el-text>-->
+                    <el-icon @click="setEdit(row)"><Edit /></el-icon>
                   </span>
                 </el-dropdown>
               </Auth>
               <el-dropdown class="ml-2" trigger="click">
                 <span class="el-dropdown-link navbar-bg-hover select-none pt-1">
-                  <el-text type="primary">更多</el-text>
+                  <!--<el-text type="primary">更多</el-text>-->
+                  <el-icon><More /></el-icon>
                 </span>
                 <template #dropdown>
                   <el-dropdown-menu class="setting">
@@ -307,7 +309,6 @@ const postUpdateDeptApi = async (row, state) => {
                     <el-dropdown-item @click="logs(row)">
                       日志
                     </el-dropdown-item>
-                    <el-dropdown-item> 数据 </el-dropdown-item>
                   </el-dropdown-menu>
                 </template>
               </el-dropdown>

src/views/login/index.vue

@@ -12,6 +12,7 @@ import { useRenderIcon } from "@/components/ReIcon/src/hooks";
 import lockOn from "../../assets/icon-png/lock-on.svg";
 import userPng from "@/assets/icon-png/user.svg";
 import { useUserStoreHook } from "@/store/modules/user";
+import { useAppStoreHook } from "@/store/modules/app";
 import {
   ref,
   reactive,
@@ -38,7 +39,7 @@ initStorage();
 
 const { dataTheme, dataThemeChange } = useDataThemeChange();
 dataThemeChange();
-const { title } = useNav();
+const { title, toggleSideBar } = useNav();
 
 const ruleForm = reactive({
   // username: "",
@@ -76,6 +77,8 @@ const onLogin = async (formEl: FormInstance | undefined) => {
             initRouter().then(() => {
               // router.push(getTopMenu(true).path);
               router.push("/");
+              useAppStoreHook().toggleSideBar(false, "关闭");
+              // toggleSideBar(false);
               message("登录成功", { type: "success" });
             });
             // router.push("/");

src/views/welcome/index.vue

@@ -1,9 +1,96 @@
 <script setup lang="ts">
+import icon from "@/assets/login/one/icon.png";
+import icon1 from "@/assets/login/one/icon备份.png";
+import icon2 from "@/assets/login/one/icon备份 2.png";
+import icon3 from "@/assets/login/one/icon备份 3.png";
+import bg from "@/assets/login/one/bg.png";
+import bg1 from "@/assets/login/one/bg(1).png";
+import bianzhu from "@/assets/login/one/编组.png";
+import bianzhu1 from "@/assets/login/one/编组备份.png";
+import bianzhu2 from "@/assets/login/one/编组备份 2.png";
 defineOptions({
   name: "Welcome"
 });
 </script>
 
 <template>
-  <h1>欢迎使用医疗运营管理系统</h1>
+  <div class="box">
+    <img class="bg absolute bottom-0 left-0" :src="bg" alt="" />
+    <img class="bg absolute bottom-0 right-0" :src="bg1" alt="" />
+    <div class="zhuti">
+      <h1 class="text-center">简单、便捷的绩效流程，高效完成绩效考核</h1>
+      <div class="flex justify-center items-center">
+        <img :src="icon" alt="" />
+        <img :src="bianzhu" alt="" />
+        <img :src="icon1" alt="" />
+        <img :src="bianzhu1" alt="" />
+        <img :src="icon2" alt="" />
+        <img :src="bianzhu2" alt="" />
+        <img :src="icon3" alt="" />
+      </div>
+      <div class="flex justify-center items-center">
+        <div class="flex justify-center items-center title">
+          <div class="xuhao">1</div>
+          考核模板
+        </div>
+        <div class="flex justify-center items-center title">
+          <div class="xuhao">2</div>
+          发起考核
+        </div>
+        <div class="flex justify-center items-center title">
+          <div class="xuhao">3</div>
+          考核数据填写
+        </div>
+        <div class="flex justify-center items-center title">
+          <div class="xuhao">4</div>
+          考核结果分析
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
+
+<style lang="scss" scoped>
+.box {
+  position: relative;
+  z-index: 999;
+  width: 100%;
+  height: 100%;
+  margin: 0 !important;
+  background: #e5edfb;
+
+  .bg {
+    width: 40%;
+    height: 50%;
+  }
+
+  .zhuti {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+}
+
+.xuhao {
+  width: 24px;
+  height: 24px;
+  margin-right: 10px;
+  font-size: 14px;
+  line-height: 24px;
+  color: #fff;
+  text-align: center;
+  background: #004fd7;
+  border-radius: 50%;
+}
+
+.title {
+  width: 280px;
+  height: 33px;
+  font-size: 20px;
+  // border: 1px solid red;
+  font-weight: 400;
+  color: #000;
+  text-align: center;
+}
+</style>