Ver código fonte

前端样式修改

pixel 5 anos atrás
pai
commit
a3eacf5f80

+ 1 - 1
QMPlusServer/model/dbModel/api.go

@@ -54,7 +54,7 @@ func (a *Api) GetInfoList(info modelInterface.PageInfo) (err error, list interfa
 		return
 	} else {
 		var apiList []Api
-		err = db.Order("group").Find(&apiList).Error
+		err = db.Order("group",true).Find(&apiList).Error
 		return err, apiList, total
 	}
 }

+ 7 - 10
QMPlusVuePage/src/view/layout/aside/index.vue

@@ -1,9 +1,11 @@
 <template>
   <div>
-    <div class="menu-total">
-      <i class="el-icon-arrow-right"></i>
+    <div class="menu-total"  @click="isCollapse=!isCollapse">
+      <i class="el-icon-arrow-right" v-if="isCollapse"></i>
+      <i class="el-icon-arrow-left" v-else></i>
     </div>
-    <vue-scroll :ops="ops">
+    <transition name="el-zoom-in-top">
+      <el-scrollbar style="height:calc(100vh - 53px)">
       <el-menu
         :class="['el-menu-vertical',!isCollapse&&'noCollapse']"
         :collapse="isCollapse"
@@ -17,24 +19,20 @@
           v-for="item in asyncRouters[0].children"
         />
       </el-menu>
-    </vue-scroll>
+      </el-scrollbar>
+    </transition>
   </div>
 </template>
 
 <script>
 import { mapGetters } from 'vuex'
 import AsideComponent from '@/view/layout/aside/asideComponent'
-import vueScroll from 'vuescroll'
-import 'vuescroll/dist/vuescroll.css'
 export default {
   name: 'Aside',
   data() {
     return {
       active: '',
       isCollapse: false,
-      ops: {
-        bar: { disable: true }
-      }
     }
   },
   methods: {
@@ -47,7 +45,6 @@ export default {
     ...mapGetters('router', ['asyncRouters'])
   },
   components: {
-    vueScroll,
     AsideComponent
   },
   created() {

+ 32 - 21
QMPlusVuePage/src/view/layout/index.vue

@@ -1,39 +1,38 @@
 <template>
   <el-container class="layout-cont">
-    <el-header class="header-cont"></el-header>
+    <el-header class="header-cont">
+      <h1>
+        QMPlus gin-vue-admin
+      </h1>
+    </el-header>
     <el-container>
       <el-aside class="main-cont main-left">
         <Aside class="aside" />
       </el-aside>
       <!-- 分块滑动功能 -->
-      <vue-scroll>
-        <el-main class="main-cont main-right">
-          <!-- 当前面包屑用路由自动生成可根据需求修改 -->
-          <el-breadcrumb class="breadcrumb" separator-class="el-icon-arrow-right">
-            <el-breadcrumb-item
-              :key="item.path"
-              :to="{ path: item.path }"
-              v-for="item in matched.slice(1,matched.length)"
-            >{{item.meta.title}}</el-breadcrumb-item>
-          </el-breadcrumb>
-          <transition mode="out-in" name="el-fade-in-linear">
-            <router-view></router-view>
-          </transition>
-        </el-main>
-      </vue-scroll>
+      <el-main class="main-cont main-right">
+        <!-- 当前面包屑用路由自动生成可根据需求修改 -->
+        <el-breadcrumb class="breadcrumb" separator-class="el-icon-arrow-right">
+          <el-breadcrumb-item
+            :key="item.path"
+            :to="{ path: item.path }"
+            v-for="item in matched.slice(1,matched.length)"
+          >{{item.meta.title}}</el-breadcrumb-item>
+        </el-breadcrumb>
+        <transition mode="out-in" name="el-fade-in-linear">
+          <router-view></router-view>
+        </transition>
+      </el-main>
     </el-container>
   </el-container>
 </template>
 
 <script>
 import Aside from '@/view/layout/aside'
-import vueScroll from 'vuescroll'
-import 'vuescroll/dist/vuescroll.css'
 export default {
   name: 'Layout',
   components: {
-    Aside,
-    vueScroll
+    Aside
   },
   methods: {
     totalCollapse() {
@@ -52,8 +51,12 @@ export default {
 </script>
 
 <style lang="scss">
+
 $headerHigh: 52px;
 $mainHight: calc(100vh - 52px);
+.el-scrollbar__wrap{
+  padding-bottom: 17px;
+}
 .layout-cont {
   .menu-contorl {
     line-height: 52px;
@@ -64,7 +67,9 @@ $mainHight: calc(100vh - 52px);
   }
   .header-cont {
     height: $headerHigh !important;
-    background: palevioletred;
+    background: #fff;
+    border-bottom:1px solid #ccc; 
+    line-height: $headerHigh;
   }
   .main-cont {
     .breadcrumb {
@@ -74,6 +79,7 @@ $mainHight: calc(100vh - 52px);
       margin-bottom: 6px;
     }
     &.el-main {
+      overflow: auto;
       padding: 0px 10px;
       margin: 0px 0px 0px 12px;
       background: #fff;
@@ -94,8 +100,13 @@ $mainHight: calc(100vh - 52px);
       background: #fff;
     }
     .aside {
+      overflow: auto;
       background: #fff;
+      &::-webkit-scrollbar {
+      display: none;
+    }
     }
+    
     .el-menu-vertical {
       height: $mainHight !important;
       visibility: auto;

+ 3 - 0
QMPlusVuePage/src/view/superAdmin/mixins/infoList.js

@@ -19,6 +19,9 @@ export default {
         async getTableData(page = this.page, pageSize = this.pageSize) {
             const table = await this.listApi({ page, pageSize })
             this.tableData = table.data[this.listKey]
+            this.total = table.data.total
+            this.page = table.data.page
+            this.pageSize = table.data.pageSize
         }
     },
     created() {