pref:修改空状态显示

sample-form-client-ui/admin/src/App.vue

@@ -118,10 +118,14 @@ export default {
 <style lang="less">
 .app {
   width: 100%;
-  min-height: 100%;
+  height: 100%;
   background-color: #f5f5f5;
   font-family: Source Han Sans CN;
-  display: flex;
+  // display: flex;
+  // overflow: auto;
+  // &::-webkit-scrollbar {
+  //   display: none;
+  // }
 }
 :root {
   // 标题颜色

sample-form-client-ui/admin/src/components/MateralsList.vue

@@ -40,13 +40,15 @@
           :key="'list' + item"
         ></div>
       </div>
-      <el-empty class="empty" :image-size="200" v-else></el-empty>
+      <!-- <el-empty class="empty" :image-size="200" v-else></el-empty> -->
+      <YEmpty v-else width="400"></YEmpty>
     </el-drawer>
   </div>
 </template>
 
 <script>
 import local from "@/utils/local";
+import YEmpty from "@/components/YEmpty.vue";
 export default {
   props: {
     visible: {
@@ -62,11 +64,12 @@ export default {
       },
     },
   },
+  components: {
+    YEmpty,
+  },
   data() {
     return {
-      api: local.getLocal("baseUrl")
-        ? local.getLocal("baseUrl") + "/"
-        : "http://192.168.0.98:11078/",
+      api: local.getLocal("baseUrl") + "/",
       row: 4,
     };
   },
@@ -218,4 +221,4 @@ export default {
     cursor: pointer;
   }
 }
-</style>
\ No newline at end of file
+</style>

sample-form-client-ui/admin/src/components/YEmpty.vue

+<template>
+  <div class="empty">
+    <div :style="{ width: width.includes('px') ? width : width + 'px' }">
+      <img v-if="img" :src="img" />
+      <span v-if="text">{{ text }}</span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    width: {
+      type: [String, Number],
+      default: "200",
+    },
+    img: {
+      type: String,
+      default: require("../assets/img/暂无信息／暂无列表@3x.png"),
+    },
+    text: {
+      type: String,
+      default: "",
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  img {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>

sample-form-client-ui/admin/src/pages/home/Home.vue

@@ -540,22 +540,22 @@ export default {
       box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
       position: relative;
       overflow: hidden;
-      &::before {
-        content: "";
-        position: absolute;
-        width: 200px;
-        height: 300%;
-        left: -200px;
-        transform: rotateZ(-45deg);
-        background: linear-gradient(
-          to right,
-          transparent 1%,
-          rgba(255, 255, 255, 0.2) 30%,
-          rgba(255, 255, 255, 0.5) 60%,
-          transparent 100%
-        );
-        animation: shadow 6s infinite;
-      }
+      // &::before {
+      //   content: "";
+      //   position: absolute;
+      //   width: 200px;
+      //   height: 300%;
+      //   left: -200px;
+      //   transform: rotateZ(-45deg);
+      //   background: linear-gradient(
+      //     to right,
+      //     transparent 1%,
+      //     rgba(255, 255, 255, 0.2) 30%,
+      //     rgba(255, 255, 255, 0.5) 60%,
+      //     transparent 100%
+      //   );
+      //   animation: shadow 6s infinite;
+      // }
 
       // .fill-btn-text1 {
       //   animation: ring 6s 20ms infinite;

sample-form-client-ui/admin/src/pages/layouts/Layouts.vue

@@ -48,6 +48,6 @@ export default {
 <style lang="less">
 .layouts {
   width: 100%;
-  height: auto;
+  height: 100%;
 }
 </style>

sample-form-client-ui/admin/src/pages/showpage/MatterList.vue

@@ -48,7 +48,8 @@
               </div>
             </div>
           </div>
-          <el-empty class="empty" :image-size="200" v-else></el-empty>
+          <!-- <el-empty class="empty" :image-size="200" v-else></el-empty> -->
+          <YEmpty v-else width="400"></YEmpty>
           <!-- 分页 -->
           <div class="tac">
             <el-pagination
@@ -80,6 +81,7 @@ import LeftMenus from "./components/LeftMenus.vue";
 import PageTop from "@/components/PageTop.vue";
 import SearchBox from "@/components/SearchBox.vue";
 import MateralsList from "../../components/MateralsList.vue";
+import YEmpty from "@/components/YEmpty.vue";
 import { getWriteMatterList } from "@/api";
 
 export default {
@@ -89,6 +91,7 @@ export default {
     PageTop,
     SearchBox,
     MateralsList,
+    YEmpty,
   },
   data() {
     return {
@@ -172,7 +175,10 @@ export default {
     height: 100%;
     padding: 0px 40px;
     padding-bottom: 20px;
-
+    overflow-y: auto;
+    &::-webkit-scrollbar {
+      display: none;
+    }
     .data-count {
       color: var(--main-assist-color3);
     }

sample-form-client-ui/admin/src/pages/showpage/components/LeftMenus.vue

 <template>
-  <div class="left-menus">
-    <div class="dept-list scroll3">
+  <div class="left-menus scroll3">
+    <div class="dept-list">
       <div
         class="dept-item"
         :class="{ active: isActive === i }"
@@ -57,13 +57,14 @@ export default {
 .left-menus {
   width: 300px;
   height: 100%;
+  padding-bottom: 15px;
   background: #ffffff;
   box-shadow: 0px 5px 15px 3px rgba(0, 0, 0, 0.07);
 }
 .dept-list {
   width: 100%;
-  height: calc(100vh - 110px);
-  padding-bottom: 15px;
+  // height: calc(100vh - 110px);
+  // padding-bottom: 15px;
 }
 .dept-item {
   text-align: center;
@@ -92,4 +93,4 @@ export default {
   font-family: Source Han Sans CN;
   color: #ffffff;
 }
-</style>
\ No newline at end of file
+</style>