ソースを参照

Merge branch 'gin-vue-admin_v2_dev' of https://github.com/flipped-aurora/gin-vue-admin into gin-vue-admin_v2_dev

klausY 4 年 前
コミット
4954ff1de6

+ 63 - 62
web/package.json

@@ -1,65 +1,66 @@
 {
-    "name": "qm-plus-vue-page",
-    "version": "0.1.0",
-    "private": true,
-    "scripts": {
-        "serve": "vue-cli-service serve",
-        "build": "vue-cli-service build",
-        "lint": "vue-cli-service lint"
+  "name": "qm-plus-vue-page",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "@moefe/vue-aplayer": "^2.0.0-beta.5",
+    "axios": "^0.19.0",
+    "core-js": "^2.6.5",
+    "echarts": "^4.7.0",
+    "element-ui": "^2.12.0",
+    "mavon-editor": "^2.7.7",
+    "node-sass": "^4.12.0",
+    "path": "^0.12.7",
+    "qs": "^6.8.0",
+    "quill": "^1.3.7",
+    "sass-loader": "^8.0.0",
+    "screenfull": "^5.0.2",
+    "script-ext-html-webpack-plugin": "^2.1.4",
+    "spark-md5": "^3.0.1",
+    "timeline-vuejs": "1.1.1",
+    "vue": "^2.6.10",
+    "vue-particle-line": "^0.1.4",
+    "vue-quill-editor": "^3.0.6",
+    "vue-router": "^3.1.3",
+    "vuescroll": "^4.14.4",
+    "vuex": "^3.1.1",
+    "vuex-persist": "^2.1.0"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "^3.11.0",
+    "@vue/cli-plugin-eslint": "^3.11.0",
+    "@vue/cli-service": "^3.11.0",
+    "babel-eslint": "^10.0.1",
+    "eslint": "^5.16.0",
+    "eslint-plugin-vue": "^5.0.0",
+    "vue-template-compiler": "^2.6.10"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
     },
-    "dependencies": {
-        "@moefe/vue-aplayer": "^2.0.0-beta.5",
-        "axios": "^0.19.0",
-        "core-js": "^2.6.5",
-        "echarts": "^4.7.0",
-        "element-ui": "^2.12.0",
-        "mavon-editor": "^2.7.7",
-        "node-sass": "^4.12.0",
-        "path": "^0.12.7",
-        "qs": "^6.8.0",
-        "quill": "^1.3.7",
-        "sass-loader": "^8.0.0",
-        "script-ext-html-webpack-plugin": "^2.1.4",
-        "spark-md5": "^3.0.1",
-        "vue": "^2.6.10",
-        "vue-particle-line": "^0.1.4",
-        "vue-quill-editor": "^3.0.6",
-        "vue-router": "^3.1.3",
-        "vuescroll": "^4.14.4",
-        "vuex": "^3.1.1",
-        "vuex-persist": "^2.1.0",
-        "timeline-vuejs": "1.1.1"
-    },
-    "devDependencies": {
-        "@vue/cli-plugin-babel": "^3.11.0",
-        "@vue/cli-plugin-eslint": "^3.11.0",
-        "@vue/cli-service": "^3.11.0",
-        "babel-eslint": "^10.0.1",
-        "eslint": "^5.16.0",
-        "eslint-plugin-vue": "^5.0.0",
-        "vue-template-compiler": "^2.6.10"
-    },
-    "eslintConfig": {
-        "root": true,
-        "env": {
-            "node": true
-        },
-        "extends": [
-            "plugin:vue/essential",
-            "eslint:recommended"
-        ],
-        "rules": {},
-        "parserOptions": {
-            "parser": "babel-eslint"
-        }
-    },
-    "postcss": {
-        "plugins": {
-            "autoprefixer": {}
-        }
-    },
-    "browserslist": [
-        "> 1%",
-        "last 2 versions"
-    ]
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended"
+    ],
+    "rules": {},
+    "parserOptions": {
+      "parser": "babel-eslint"
+    }
+  },
+  "postcss": {
+    "plugins": {
+      "autoprefixer": {}
+    }
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions"
+  ]
 }

BIN
web/src/assets/nav_logo.png


+ 9 - 36
web/src/style/main.scss

@@ -884,33 +884,6 @@ li {
                 border-bottom: 1px solid #e8e8e8;
             }
         }
-        .el-table__body-wrapper {
-            tr {
-                td {
-                    padding: 5px 0;
-                    .cell {
-                        height: 34px;
-                        line-height: 34px;
-                        overflow: hidden;
-                    }
-                }
-            }
-            .el-cascader {
-                line-height: 34px;
-            }
-        }
-        .upload {
-            .el-table__body-wrapper {
-                tr {
-                    td {
-                        padding: 5px 0;
-                        .cell {
-                            height: auto;
-                        }
-                    }
-                }
-            }
-        }
         .search-term {
             border-left: none;
             border-right: none;
@@ -992,15 +965,15 @@ li {
     .el-button.el-button--text.el-button--small {
         position: relative;
     }
-    .el-button.el-button--text.el-button--small::after {
-        content: '';
-        position: absolute;
-        width: 1px;
-        height: 50%;
-        top: 5px;
-        margin-left: 15px;
-        background-color: #e8e8e8;
-    }
+    // .el-button.el-button--text.el-button--small::after {
+    //     content: '';
+    //     position: absolute;
+    //     width: 1px;
+    //     height: 50%;
+    //     top: 5px;
+    //     margin-left: 15px;
+    //     background-color: #e8e8e8;
+    // }
     .cell {
         button:last-child::after {
             content: ''!important;

+ 25 - 25
web/src/view/layout/aside/index.vue

@@ -1,26 +1,28 @@
 <template>
   <div>
-    <el-scrollbar style="height:calc(100vh)">
-      <el-menu
-        class="el-menu-vertical"
-        :collapse="isCollapse"
-        :collapse-transition="true"
-        :default-active="active"
-        @select="selectMenuItem"
-        active-text-color="#fff"
-        text-color="rgb(191, 203, 217)"
-        unique-opened
-      >
-        <template v-for="item in asyncRouters[0].children">
-          <aside-component :key="item.name" :routerInfo="item" v-if="!item.hidden" />
-        </template>
-      </el-menu>
+    <el-scrollbar style="height:calc(100vh - 64px)">
+      <transition :duration="{ enter: 800, leave: 100 }" mode="out-in" name="el-fade-in-linear">
+        <el-menu
+          :collapse="isCollapse"
+          :collapse-transition="true"
+          :default-active="active"
+          @select="selectMenuItem"
+          active-text-color="#fff"
+          class="el-menu-vertical"
+          text-color="rgb(191, 203, 217)"
+          unique-opened
+        >
+          <template v-for="item in asyncRouters[0].children">
+            <aside-component :key="item.name" :routerInfo="item" v-if="!item.hidden" />
+          </template>
+        </el-menu>
+      </transition>
     </el-scrollbar>
   </div>
 </template>
 
 <script>
-import { mapGetters,mapMutations } from 'vuex'
+import { mapGetters, mapMutations } from 'vuex'
 import AsideComponent from '@/view/layout/aside/asideComponent'
 export default {
   name: 'Aside',
@@ -31,7 +33,7 @@ export default {
     }
   },
   methods: {
-    ...mapMutations("history",["addHistory"]),
+    ...mapMutations('history', ['addHistory']),
     selectMenuItem(index) {
       if (index === this.$route.name) return
       this.$router.push({ name: index })
@@ -39,7 +41,6 @@ export default {
   },
   computed: {
     ...mapGetters('router', ['asyncRouters'])
-
   },
   components: {
     AsideComponent
@@ -47,17 +48,16 @@ export default {
   created() {
     this.active = this.$route.name
     let screenWidth = document.body.clientWidth
-     if(screenWidth<1000){
-       this.isCollapse = !this.isCollapse
-      }
+    if (screenWidth < 1000) {
+      this.isCollapse = !this.isCollapse
+    }
 
-     this.$bus.on('collapse', (item) => {
+    this.$bus.on('collapse', item => {
       this.isCollapse = item
     })
-
   },
-  watch:{
-    $route(){
+  watch: {
+    $route() {
       this.active = this.$route.name
     }
   },

+ 42 - 3
web/src/view/layout/index.vue

@@ -3,6 +3,10 @@
     <el-container :class="[isSider?'openside':'hideside',isMobile ? 'mobile': '']">
       <el-row :class="[isShadowBg?'shadowBg':'']" @click.native="changeShadow()"></el-row>
       <el-aside class="main-cont main-left">
+           <div class="tilte">
+              <img src="~@/assets/nav_logo.png" alt=""  class="logoimg">
+              <h2 v-if="isSider" class="tit-text">Gin-Vue-Admin</h2>
+            </div>
         <Aside class="aside" />
       </el-aside>
       <!-- 分块滑动功能 -->
@@ -24,6 +28,7 @@
                 >{{item.meta.title}}</el-breadcrumb-item>
               </el-breadcrumb>
               <div class="fl-right right-box">
+                <Screenfull class="screenfull"></Screenfull>
                 <el-dropdown>
                   <span class="el-dropdown-link">
                     <img :src="userInfo.headerImg" height="30" width="30" />
@@ -83,7 +88,7 @@
 <script>
 import Aside from "@/view/layout/aside";
 import HistoryComponent from "@/view/layout/aside/historyComponent/history";
-
+import Screenfull from "@/view/layout/screenfull";
 import { mapGetters, mapActions } from "vuex";
 import { changePassword } from "@/api/user";
 export default {
@@ -124,7 +129,8 @@ export default {
   },
   components: {
     Aside,
-    HistoryComponent
+    HistoryComponent,
+    Screenfull
   },
   methods: {
     ...mapActions("user", ["LoginOut"]),
@@ -315,8 +321,15 @@ $mainHight: 100vh;
       &:not(.el-menu--collapse) {
         width: 220px;
       }
+      
     }
-
+.el-menu--collapse{
+        li{
+          .el-tooltip,.el-submenu__title{
+            padding:0px 15px !important;
+          }
+        }
+      }
     &::-webkit-scrollbar {
       display: none;
     }
@@ -339,4 +352,30 @@ $mainHight: 100vh;
     }
   }
 }
+.tilte{
+  background: #001529;
+  min-height: 64px;
+  line-height: 64px;
+  background: #002140;
+  text-align: center;
+  .logoimg{
+    width: 30px;
+    height: 30px;
+    vertical-align: middle;
+    background: #fff;
+    border-radius: 50%;
+    padding: 3px;
+  }
+  .tit-text{
+    display: inline-block;
+    color: #fff;
+    font-weight: 600;
+    font-size: 20px;
+    vertical-align: middle;
+  }
+}
+.screenfull{
+  display: inline-block;
+ 
+}
 </style>

+ 114 - 0
web/src/view/layout/screenfull/index.vue

@@ -0,0 +1,114 @@
+<template>
+    <div  @click="click">
+        <!-- <svg
+            t="1508738709248"
+            class="screenfull-svg"
+            viewBox="0 0 1024 1024"
+            version="1.1"
+            xmlns="http://www.w3.org/2000/svg"
+            p-id="2069"
+            xmlns:xlink="http://www.w3.org/1999/xlink"
+            width="32"
+            height="32"
+            v-if="isShow"
+           >
+                <path
+                    d="M333.493443 428.647617 428.322206 333.832158 262.572184 168.045297 366.707916 64.444754 64.09683 64.444754 63.853283 366.570793 167.283957 262.460644Z"
+                    p-id="2070"/>
+                <path
+                    d="M854.845439 760.133334 688.61037 593.95864 593.805144 688.764889 759.554142 854.56096 655.44604 958.161503 958.055079 958.161503 958.274066 656.035464Z"
+                    p-id="2071"/>
+                <path
+                    d="M688.535669 428.550403 854.31025 262.801405 957.935352 366.921787 957.935352 64.34754 655.809313 64.081481 759.919463 167.535691 593.70793 333.731874Z"
+                    p-id="2072"/>
+                <path
+                    d="M333.590658 594.033341 167.8171 759.804852 64.218604 655.67219 64.218604 958.270996 366.342596 958.502263 262.234493 855.071589 428.421466 688.86108Z"
+                    p-id="2073"/>
+        </svg> -->
+        <svg 
+        t="1590133227479" 
+        class="screenfull-svg"
+        viewBox="0 0 1024 1024" 
+        version="1.1" 
+        width="20" 
+        height="20" 
+        xmlns="http://www.w3.org/2000/svg"  
+        v-if="isShow"
+        >
+                <path id="svg_1" d="m928.512,959.744a32,32 0 0 1 -32,-32l0,-256a32,32 0 0 1 64,0l0,256a32,32 0 0 1 -32,32z"/>
+                <path id="svg_2" d="m960.512,927.744a32,32 0 0 1 -32,32l-256,0a32,32 0 0 1 0,-64l256,0a32,32 0 0 1 32,32zm-864.768,-863.488a32,32 0 0 1 32,32l0,256a32,32 0 0 1 -64,0l0,-256a32,32 0 0 1 32,-32z"/>
+                <path id="svg_3" d="m63.744,96.256a32,32 0 0 1 32,-32l256,0a32,32 0 0 1 0,64l-256,0a32,32 0 0 1 -32,-32z"/>
+                <path id="svg_4" d="m958.030718,91.777575a32,32 0 0 1 -32,32l-256,0a32,32 0 0 1 0,-64l256,0a32,32 0 0 1 32,32z"/>
+                <path id="svg_5" d="m926.030718,59.777575a32,32 0 0 1 32,32l0,256a32,32 0 0 1 -64,0l0,-256a32,32 0 0 1 32,-32z"/>
+                <path id="svg_6" d="m940.622718,69.250038a32,32 0 0 1 0,45.248l-247.936,247.936a32,32 0 0 1 -45.248,-45.248l247.936,-247.936a31.936,31.936 0 0 1 45.248,0z"/>
+                <path id="svg_7" d="m61.649508,930.478492a32,32 0 0 1 32,-32l256,0a32,32 0 0 1 0,64l-256,0a32,32 0 0 1 -32,-32z"/>
+                <path id="svg_8" d="m93.649508,962.478492a32,32 0 0 1 -32,-32l0,-256a32,32 0 0 1 64,0l0,256a32,32 0 0 1 -32,32z"/>
+                <path id="svg_9" d="m79.121508,945.070492a32,32 0 0 1 0,-45.248l247.936,-247.936a32,32 0 0 1 45.248,45.248l-247.936,247.936a32,32 0 0 1 -45.248,0z"/>
+        </svg>
+        <svg 
+            t="1590133734869"  
+            class="screenfull-svg" 
+            viewBox="0 0 1024 1024"
+            version="1.1" 
+            xmlns="http://www.w3.org/2000/svg" 
+            p-id="1862" 
+            xmlns:xlink="http://www.w3.org/1999/xlink" 
+            width="20" 
+            height="20" 
+            v-else
+            >
+                <path d="M928.512 959.744a32 32 0 0 1-32-32v-256a32 32 0 0 1 64 0v256a32 32 0 0 1-32 32z" fill="" p-id="1863"></path>
+                <path d="M960.512 927.744a32 32 0 0 1-32 32h-256a32 32 0 0 1 0-64h256a32 32 0 0 1 32 32zM95.744 64.256a32 32 0 0 1 32 32v256a32 32 0 0 1-64 0v-256a32 32 0 0 1 32-32z" fill="" p-id="1864"></path>
+                <path d="M63.744 96.256a32 32 0 0 1 32-32h256a32 32 0 0 1 0 64h-256a32 32 0 0 1-32-32z" fill="" p-id="1865"></path>
+                <path d="M384.064 671.744a32 32 0 0 1-32 32h-256a32 32 0 0 1 0-64h256a32 32 0 0 1 32 32z" fill="" p-id="1866"></path>
+                <path d="M352.064 639.744a32 32 0 0 1 32 32v256a32 32 0 0 1-64 0v-256a32 32 0 0 1 32-32z" fill="" p-id="1867"></path>
+                <path d="M366.656 657.216a32 32 0 0 1 0 45.248L118.72 950.4a32 32 0 0 1-45.248-45.248l247.936-247.936a31.936 31.936 0 0 1 45.248 0z" fill="" p-id="1868"></path>
+                <path d="M639.616 352.512a32 32 0 0 1 32-32h256a32 32 0 0 1 0 64h-256a32 32 0 0 1-32-32z" fill="" p-id="1869"></path>
+                <path d="M671.616 384.512a32 32 0 0 1-32-32v-256a32 32 0 0 1 64 0v256a32 32 0 0 1-32 32z" fill="" p-id="1870"></path>
+                <path d="M657.088 367.104a32 32 0 0 1 0-45.248l247.936-247.936a32 32 0 0 1 45.248 45.248l-247.936 247.936a32 32 0 0 1-45.248 0z" fill="" p-id="1871"></path>
+        </svg>
+    </div>
+</template>
+<script>
+import screenfull from 'screenfull'  //引入screenfull
+export default {
+    name: 'Screenfull',
+    props: {
+        width: {
+            type: Number,
+            default: 22
+        },
+        height: {
+            type: Number,
+            default: 22
+        },
+        fill: {
+            type: String,
+            default: '#48576a'
+        }
+    },
+    data(){
+        return {
+            isShow:true
+        }
+    },
+    methods: {
+        click () {
+            if (screenfull.isEnabled) {
+                this.isShow  = !this.isShow
+                screenfull.toggle()
+            }
+        }
+    }
+}
+</script>
+<style scoped>
+.screenfull-svg {
+    width: 20px;
+    height: 20px;
+    cursor: pointer;
+    fill: #606266;
+    vertical-align: middle;
+    margin-right: 15px;
+}
+</style>