fix ui

src/layout/index.vue

@@ -9,6 +9,9 @@
           <left />
         </el-aside>
         <el-main class="wt-main hide-scrollbar" @scroll="scroll">
+          <div class="wrapper mb-20">
+            <tips />
+          </div>
           <div class="wrapper">
             <router-view v-slot="{ Component, route }">
               <keep-alive :include="keepAlive.list">
@@ -33,12 +36,13 @@
 <script>
 import left from './left.vue'
 import top from './top.vue'
+import tips from './tips.vue'
 import keepAliveStore from '../store/keepAlive.js'
 import permissionStore from '@/store/permission.js'
 
 export default {
   name: 'index.vue',
-  components: { left, top },
+  components: { left, top, tips },
   setup() {
     const keepAlive = keepAliveStore()
     const permission = permissionStore()
@@ -51,9 +55,6 @@ export default {
     }
   },
   created() {
-    this.keepAlive.$subscribe(res => {
-      console.log(this.keepAlive.list)
-    })
     this.getPermission()
   },
   mounted() {
@@ -96,7 +97,7 @@ export default {
     // 设置缩放比例
     setScale() {
       const width = document.documentElement.clientWidth
-      if (width < 1620) {
+      if (width < 1690) {
         this.mini = true
       } else {
         this.mini = false

src/layout/tips.vue

@@ -0,0 +1,73 @@
+\
+<template>
+  <div class="full-width flex flex-col">
+    <div class="full-width flex flex-center flex-justify-between">
+      <span class="font-24">{{ nav.menus[nav.menus.length - 1].name }}</span>
+      <el-button
+        type="primary"
+        plain
+        icon="Back"
+        @click="$router.back()"
+        v-if="nav.menus[nav.menus.length - 1].meta.back !== undefined"
+        >返 回</el-button
+      >
+      <el-tooltip>
+        <template #content>
+          <div style="max-width: 400px">
+            {{ nav.menus[nav.menus.length - 1].meta.showTips }}
+          </div>
+        </template>
+        <div
+          class="flex flex-center flex-justify-end grey-6 pointer"
+          v-if="nav.menus[nav.menus.length - 1].meta.showTips !== undefined"
+        >
+          <el-icon>
+            <InfoFilled />
+          </el-icon>
+          <span class="padding-left">帮助说明</span>
+        </div>
+      </el-tooltip>
+    </div>
+    <div
+      class="full-width mt-20"
+      v-if="nav.menus[nav.menus.length - 1].meta.showMsg !== undefined"
+    >
+      <el-card shadow="hover" style="background-color: #e2eaf5">
+        <div class="flex flex-center flex-justify-start">
+          <el-icon color="#409eff" :size="30"><WarningFilled /></el-icon>
+          <span class="ml-10">{{
+            nav.menus[nav.menus.length - 1].meta.showMsg
+          }}</span>
+        </div>
+      </el-card>
+    </div>
+  </div>
+</template>
+
+<script>
+import navStore from '@/store/nav.js'
+import { useStore } from '@/store/user.js'
+
+export default {
+  setup() {
+    const nav = navStore()
+    const user = useStore()
+    return { nav, user }
+  },
+  props: {
+    showTips: {
+      type: Boolean,
+      default: false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.tips {
+  border-radius: 8px;
+  background-color: white;
+  padding: 10px 20px;
+  margin-top: 20px;
+}
+</style>

src/layout/top.vue

@@ -27,7 +27,7 @@
             :class="dataType === 'project' ? 'black' : 'white'"
             @click="show = true"
           >
-            <el-button icon="Search" circle />
+            <el-button icon="Search" circle color="#C1C4CB" />
           </div>
           <div class="padding flex flex-align-center pointer">
             <el-avatar
@@ -123,6 +123,10 @@ export default {
     if (tmp) {
       this.dataType = tmp
     }
+    this.$bus.on('navChange', res => {
+      console.log(res)
+      this.dataType = res
+    })
     this.$bus.on('sizeChange', res => {
       if (res < 1620) {
         this.mini = true

src/views/home/component/left_bar.vue

@@ -1,24 +1,37 @@
 <template>
   <div>
-    <div class="white-bg top full-height flex flex-col hide-scrollbar" style='overflow-y: auto;'>
+    <el-card
+      shadow="hover"
+      class="top full-height flex flex-col hide-scrollbar"
+      style="overflow-y: auto"
+    >
       <div class="flex flex-col flex-center mt-15 padding">
-        <span class='font-15 bold  mb-10'>{{ data.name }}</span>
-        <span class="font-15 bold mt-5" style="color:#787C90;">项目总投资额</span>
-        <span class="mt-5 font-15 bold main-color">{{
+        <span class="font-15 bold mb-10">{{ data.name }}</span>
+        <span class="font-15 bold mt-5" style="color: #787c90"
+          >项目总投资额</span
+        >
+        <span class="mt-5 font-15 bold main-color"
+          >{{
             data.totalAmount ? data.totalAmount.toLocaleString() : '-'
-          }}万元</span>
-        <main-button :width="200" type="0" @click="proInfo"/>
+          }}万元</span
+        >
+        <main-button :width="200" type="0" @click="proInfo" />
         <el-divider></el-divider>
         <div class="flex flex-center flex-justify-between full-width">
           <span class="title ml-20">项目阶段-文件管理</span>
           <span class="title mr-20 pointer" @click="record">授权记录</span>
         </div>
       </div>
-      <div style='margin-left: 30px'>
-        <el-empty v-if='stage && stage.length === 0 '></el-empty>
-        <basic-step v-else style='margin-top: 20px' :active="active" :steps='stage'/>
+      <div style="margin-left: 30px">
+        <el-empty v-if="stage && stage.length === 0"></el-empty>
+        <basic-step
+          v-else
+          style="margin-top: 20px"
+          :active="active"
+          :steps="stage"
+        />
       </div>
-    </div>
+    </el-card>
   </div>
 </template>
 
@@ -28,7 +41,7 @@ import basicStep from '@/components/basic-step/index.vue'
 
 export default {
   name: 'left_bar',
-  components: {mainButton, basicStep},
+  components: { mainButton, basicStep },
   props: {
     data: Object,
     stage: Array,
@@ -50,8 +63,7 @@ export default {
       height: 0
     }
   },
-  created() {
-  },
+  created() {},
   methods: {
     proInfo() {
       this.$emit('typeChange')
@@ -67,7 +79,8 @@ export default {
 .top {
   width: 300px;
   position: fixed;
-  background-color: #FAF9FA
+  background-color: white;
+  height: calc(100vh - 100px);
 }
 
 .down {
@@ -75,14 +88,14 @@ export default {
   position: fixed;
   bottom: 0;
   padding-bottom: 20px;
-  background-color: #FAF9FA
+  background-color: #faf9fa;
 }
 
 .tip {
   border-radius: 10px;
-  background-color: #F4F4F1;
+  background-color: #f4f4f1;
   height: 75px;
-  width: 240px
+  width: 240px;
 }
 
 .middle {
@@ -91,11 +104,11 @@ export default {
   bottom: 175px;
   top: 280px;
   padding-left: 30px;
-  background-color: #FAF9FA
+  background-color: #faf9fa;
 }
 
 .title {
-  color: #ECAB56;
+  color: #ecab56;
   font-size: 16px;
   font-weight: 500;
 }

src/views/home/component/pro_left.vue

@@ -94,11 +94,10 @@
 
 <script>
 import proRelation from '@/views/home/component/pro_relation.vue'
-import month from '@/views/home/component/month.vue'
 
 export default {
   name: 'pro_left',
-  components: { proRelation, month },
+  components: { proRelation },
   props: {
     data: Object,
     code: {
@@ -305,7 +304,7 @@ export default {
 .top {
   width: 300px;
   position: fixed;
-  height: calc(100vh - 100px);
+  height: calc(100vh - 155px);
   background-color: white;
 }
 

src/views/home/details.vue

@@ -12,7 +12,7 @@
     <el-card
       shadow="hover"
       class="full-height full-width white-bg padding-left padding-top"
-      style="margin-left: 300px"
+      style="margin-left: 315px"
     >
       <proinfo
         v-if="type === '0'"
@@ -35,7 +35,7 @@
 <route>
 {
 name: '资料管理',
-meta: { keepAlive: true }
+meta: { keepAlive: true,back: true }
 }
 </route>
 

src/views/home/pro_detail.vue

@@ -9,7 +9,7 @@
         @year="changeYear"
       />
     </div>
-    <div style="margin-left: 300px" class="full-width" ref="content">
+    <div style="margin-left: 305px" class="full-width" ref="content">
       <basic-container>
         <basic-tab :tabs="tabs" @change="change"></basic-tab>
       </basic-container>
@@ -50,6 +50,7 @@
 <route>
 {
 name: '项目详情',
+meta :{ back:true }
 }
 </route>