09/23 15:20

1440 样式修改

src/App.vue

@@ -36,17 +36,17 @@ input[type="number"] {
 }
 .el-tabs__item.is-active {
   color: #14928a !important;
-  // font-size: 16px;
+  // font-size: 14px;
   font-weight: 600;
 }
 .el-tabs__item:hover {
   color: #14928a !important;
-  // font-size: 16px;
+  // font-size: 14px;
   font-weight: 600;
 }
 // 选择框组件
 .el-form-item__content {
-  font-size: 16px !important;
+  font-size: 14px !important;
 }
 .el-select {
   width: 150px !important;
@@ -88,13 +88,13 @@ input[type="number"] {
   flex-direction: row;
   justify-content: flex-start;
   align-items: center;
-  font-size: 16px;
+  font-size: 14px;
   font-weight: 500;
   color: rgba(119, 119, 119, 1);
   height: 30px;
   margin-bottom: 30px;
   p {
-    font-size: 16px;
+    font-size: 14px;
     padding-left: 4px;
   }
   .searchItem {
@@ -108,7 +108,7 @@ input[type="number"] {
     background: rgba(246, 246, 246, 1);
     border-radius: 15px;
     color: #777;
-    font-size: 16px;
+    font-size: 14px;
     .el-icon-close {
       position: absolute;
       right: 5px;
@@ -123,7 +123,7 @@ input[type="number"] {
   justify-content: space-between;
   align-items: center;
   .left {
-    width: 1000px;
+    // width: 1000px;
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
@@ -163,12 +163,15 @@ input[type="number"] {
 .m-container {
   box-sizing: border-box;
   background-color: #fff;
-  padding: 18px 95px 55px 60px;
-  min-height: calc(100vh - 80px);
+  padding: 18px 60px 0;
+  // height: calc(100vh- 80px) !important;
+  height: calc(100vh - 100px);
+  width: 100;
+  min-width: 1440px;
+  overflow: auto;
   .m-core {
     margin-top: 10px;
     background-color: #fff;
-
     position: relative;
   }
   h2 {
@@ -190,7 +193,7 @@ input[type="number"] {
       width: 100px;
       color: #14928a;
       border: 1px solid rgba(20, 146, 138, 1);
-      font-size: 16px;
+      font-size: 14px;
       text-align: center;
       margin-right: 12px;
       &:nth-child(1) {

src/components/Breadcrumb/index.vue

@@ -73,7 +73,7 @@ export default {
 <style lang="scss" scoped>
 .app-breadcrumb.el-breadcrumb {
   display: inline-block;
-  font-size: 16px;
+  font-size: 14px;
   line-height: 50px;
   margin-left: 8px;
 

src/layout/components/AppMain.vue

@@ -21,15 +21,16 @@ export default {
 <style scoped>
 .app-main {
   /*50 = navbar  */
-  min-height: calc(100vh - 80px);
-  padding-top: 80px;
-  width: 100%;
+  /* height: calc(100vh - 80px); */
+  /* height: 100vh; */
+  padding-top: 60px;
+  /* min-width: 1440px; */
   position: relative;
-  overflow: hidden;
+  /* overflow: auto; */
   box-sizing: border-box;
 }
 .fixed-header + .app-main {
-  padding-top: 80px;
+  padding-top: 60px;
 }
 </style>
 

src/layout/components/Navbar.vue

@@ -73,19 +73,19 @@ export default {
 
 <style lang="scss" scoped>
 .navbar {
-  height: 80px;
+  height: 60px;
   overflow: hidden;
   position: relative;
   background: #fff;
   box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.1);
   h2 {
     font-size: 18px;
-    line-height: 80px;
+    line-height: 60px;
     margin: 0 0 0 30px;
     display: inline-block;
   }
   .hamburger-container {
-    line-height: 80px;
+    line-height: 60px;
     height: 100%;
     float: left;
     cursor: pointer;
@@ -105,7 +105,7 @@ export default {
     min-width: 204px;
     float: right;
     height: 100%;
-    line-height: 80px;
+    line-height: 60px;
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
@@ -120,10 +120,14 @@ export default {
       margin-right: 34px;
       position: relative;
       cursor: pointer;
+      img {
+        width: 23px;
+        height: 30px;
+      }
       .active {
         position: absolute;
-        width: 11px;
-        height: 11px;
+        width: 7px;
+        height: 7px;
         background-color: #f97215;
         border-radius: 50%;
         top: 20px;
@@ -134,7 +138,7 @@ export default {
       display: inline-block;
       padding: 0 8px;
       height: 100%;
-      font-size: 18px;
+      font-size: 14px;
       color: #5a5e66;
       vertical-align: text-bottom;
 
@@ -149,7 +153,7 @@ export default {
     }
 
     .avatar-container {
-      height: 80px;
+      height: 60px;
       margin-right: 42px;
       cursor: pointer;
 
@@ -161,16 +165,16 @@ export default {
         align-items: center;
         span {
           margin-left: 15px;
-          font-size: 16px;
+          font-size: 14px;
           font-weight: 500;
           color: rgba(68, 68, 68, 1);
         }
 
         .user-avatar {
           cursor: pointer;
-          width: 50px;
-          height: 50px;
-          border: 3px solid #f0f2f5;
+          width: 32px;
+          height: 32px;
+          border: 2px solid #f0f2f5;
           border-radius: 50%;
         }
 

src/layout/components/Sidebar/Logo.vue

@@ -38,8 +38,8 @@ export default {
   // top:10px;
   position: relative;
   width: 100%;
-  height: 81px;
-  line-height: 81px;
+  height: 60px;
+  line-height: 60px;
   // background: #2b2f3a;
   text-align: center;
   overflow: hidden;
@@ -49,12 +49,12 @@ export default {
     width: 100%;
 
     & .sidebar-logo {
-      width: 170px;
+      width: 132px;
       // height: 210px;
       vertical-align: middle;
     }
     & .sidebar-logo-bottom {
-      width: 170px;
+      width: 132px;
       height: 85px;
       vertical-align: middle;
     }
@@ -65,7 +65,7 @@ export default {
       color: #fff;
       font-weight: 600;
       line-height: 50px;
-      font-size: 16px;
+      font-size: 14px;
       font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
       vertical-align: middle;
     }

src/layout/components/Sidebar/SidebarItem.vue

@@ -60,9 +60,13 @@ export default {
   data () {
     // To fix https://github.com/PanJiaChen/vue-admin-template/issues/237
     // TODO: refactor with render function
-    this.onlyOneChild = null
+
     return {}
   },
+  mounted () {
+    this.onlyOneChild = null
+  }
+  ,
   methods: {
     hasOneShowingChild (children = [], parent) {
       const showingChildren = children.filter(item => {

src/layout/index.vue

@@ -60,7 +60,7 @@ export default {
 .app-wrapper {
   @include clearfix;
   position: relative;
-  height: 100%;
+  // height: 100vh;
   width: 100%;
   &.mobile.openSidebar {
     position: fixed;
@@ -81,7 +81,7 @@ export default {
   position: fixed;
   top: 0;
   right: 0;
-  z-index: 9;
+  z-index: 111;
   width: calc(100% - #{$sideBarWidth});
   transition: width 0.28s;
 }
@@ -94,7 +94,9 @@ export default {
   width: 100%;
 }
 .main-container {
-  padding: 15px 25px 0 15px;
+  // overflow:
+  padding: 10px 10px 0 0;
+  // background-color: #fff;
   box-sizing: border-box;
 }
 </style>

src/main.js

@@ -1,8 +1,8 @@
 import Vue from 'vue'
-
+import ElementUI from 'element-ui'
 import 'normalize.css/normalize.css' // A modern alternative to CSS resets
 import 'default-passive-events'
-import ElementUI from 'element-ui'
+
 import 'element-ui/lib/theme-chalk/index.css'
 import locale from 'element-ui/lib/locale/lang/zh-CN' // lang i18n
 
@@ -34,9 +34,9 @@ if (process.env.NODE_ENV === 'production') {
 import VueAMap from 'vue-amap'
 Vue.use(VueAMap)
 VueAMap.initAMapApiLoader({
-    key: 'c7856e7c812d299cff150e74d60ea608',
-    plugin: ['AMap.Geolocation', 'AMap.PlaceSearch', 'AMap.Geocoder'],
-    v: '1.4.4'
+  key: 'c7856e7c812d299cff150e74d60ea608',
+  plugin: ['AMap.Geolocation', 'AMap.PlaceSearch', 'AMap.Geocoder'],
+  v: '1.4.4'
 })
 
 // set ElementUI lang to EN

src/store/modules/permission.js

@@ -43,53 +43,37 @@ const mutations = {
 }
 // 递归遍历数组
 function recursionRouter (arr) {
-  let newArr = arr.map(item => {
-    let obj = {};
-    obj.component = item.component;
-    obj.hidden = false;
-    obj.path = item.path;
-    obj.meta = { 'title': item.name, 'icon': item.icon }
-    if (item.sysMenus && item.sysMenus.length > 0) {
-      obj.children = recursionRouter(item.sysMenus);
-    }
-    return obj
-  })
-  return newArr
+  if (arr.length > 0) {
+    // console.log(arr);
+    let newArr = arr.map(item => {
+      let obj = {};
+      obj.component = item.component;
+      obj.hidden = false;
+      obj.path = item.path;
+      obj.meta = { 'title': item.name, 'icon': item.icon }
+      if (item.sysMenus && item.sysMenus.length > 0) {
+        obj.children = recursionRouter(item.sysMenus);
+      }
+      return obj
+    })
+    return newArr
+  }
+
 }
 const actions = {
   generateRoutes ({ commit }, roles) {
     return new Promise(resolve => {
       // 获取接口返回的权限菜单
       getSilder().then(res => {
-        // console.log(res.data);
-        // 这里递归 整体修改路由数据
-        // console.log(res.data.rows);
-        // let newData = res.data.map(item => {
-        //   let obj = {};
-        //   obj.component = item.component;
-        //   obj.hidden = false;
-        //   obj.path = item.path;
-        //   obj.meta = { 'title': item.name, 'icon': item.icon }
-        //   if (item.sysMenus && item.sysMenus.length > 0) {
-        //     obj.children = item.sysMenus.map(sub => {
-        //       let obj = {};
-        //       obj.component = sub.component;
-        //       obj.hidden = false;
-        //       obj.path = sub.path;
-        //       obj.meta = { 'title': sub.name, 'icon': sub.icon }
-        //       return obj
-        //     });
-        //   }
-        //   return obj
-        // });
-        // console.log(newData);
-        let newData = recursionRouter(res.data);
-        var accessedRoutes
-        // 生成异步路由表
-        accessedRoutes = generateAsyncRouter(asyncRoutes, newData)
-        // var result = accessedRoutes.concat({ path: '*', redirect: '/404', hidden: true })
-        commit('SET_ROUTES', accessedRoutes)
-        resolve(accessedRoutes)
+        if (res.code == 200) {
+          let newData = recursionRouter(res.data);
+          var accessedRoutes
+          // 生成异步路由表
+          accessedRoutes = generateAsyncRouter(asyncRoutes, newData)
+          // var result = accessedRoutes.concat({ path: '*', redirect: '/404', hidden: true })
+          commit('SET_ROUTES', accessedRoutes)
+          resolve(accessedRoutes)
+        }
       })
     })
   }

src/styles/sidebar.scss

@@ -20,6 +20,11 @@
     z-index: 1001;
     overflow: hidden;
 
+    .el-menu-item {
+      &:hover {
+        color: #fff;
+      }
+    }
     // reset element-ui css
     .horizontal-collapse-transition {
       transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
@@ -39,7 +44,7 @@
 
     &.has-logo {
       .el-scrollbar {
-        height: calc(100% - 50px);
+        height: calc(100% - 60px);
       }
     }
 

src/styles/variables.scss

@@ -9,7 +9,7 @@ $menuHover:#13817A;
 $subMenuBg:#0E605B;
 $subMenuHover:#0E605B;
 
-$sideBarWidth: 225px;
+$sideBarWidth: 165px;
 
 // the :export directive is the magic sauce for webpack
 // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass

src/views/404.vue

@@ -216,7 +216,7 @@ export default {
       text-align: center;
       color: #ffffff;
       opacity: 0;
-      font-size: 16px;
+      font-size: 14px;
       line-height: 36px;
       cursor: pointer;
       animation-name: slideUp;

src/views/journal/journalItem.vue

@@ -41,6 +41,16 @@ export default {
         height: 25px;
       }
     }
+    .read {
+      img {
+        width: 20px;
+        height: 26px;
+      }
+    }
+    .recovery {
+      img {
+      }
+    }
   }
 }
 </style>

src/views/login/index.vue

@@ -101,6 +101,7 @@ export default {
   mounted () {
     this.loginForm.username = localStorage.getItem('username');
     this.loginForm.password = localStorage.getItem('password');
+
   },
   watch: {
     $route: {
@@ -172,19 +173,19 @@ export default {
 ::-webkit-input-placeholder {
   /* WebKit browsers */
   color: #444;
-  font-size: 16px;
+  font-size: 14px;
 }
 
 ::-moz-placeholder {
   /* Mozilla Firefox 19+ */
   color: #444;
-  font-size: 16px;
+  font-size: 14px;
 }
 
 :-ms-input-placeholder {
   /* Internet Explorer 10+ */
   color: #444;
-  font-size: 16px;
+  font-size: 14px;
 }
 .logitem {
   border-radius: 25px !important;
@@ -292,7 +293,7 @@ $light_gray: #eee;
   }
 
   .tips {
-    font-size: 16px;
+    font-size: 14px;
     color: #fff;
     margin-bottom: 10px;
 
@@ -333,7 +334,7 @@ $light_gray: #eee;
     position: absolute;
     right: 10px;
     top: 7px;
-    font-size: 16px;
+    font-size: 14px;
     color: $dark_gray;
     cursor: pointer;
     user-select: none;

src/views/mapDemo/index.vue

@@ -1,88 +1,91 @@
 <template>
   <div>
-    <el-amap :zoom="zoom" :plugin="plugin" :center="center">
-        <el-amap-marker :clickable="true" 
-            :events="marker.events" 
-            :position="marker.position"  
-            v-for="(marker, index) in markers" 
-            :key="index"  ></el-amap-marker>
+    <el-amap :zoom="zoom"
+             :plugin="plugin"
+             :center="center">
+      <el-amap-marker :clickable="true"
+                      :events="marker.events"
+                      :position="marker.position"
+                      v-for="(marker, index) in markers"
+                      :key="index"></el-amap-marker>
     </el-amap>
   </div>
 </template>
 <script>
 export default {
-    data () {
-        let self = this
-        return {
-            zoom: 14,
-            center: [114.34371, 30.55939],
-            markers: [],
-            searchResult: [], // 搜索出来的数据
-            plugin: [{
-                pName: 'Geolocation',
-                events: {
-                    init(o) {
-                        o.getCurrentPosition((status, result) => {
-                            if(result && result.position) {
-                                self.lng = result.position.lng
-                                self.lat = result.position.lat
-                                self.center = [self.lng, self.lat]
-                                self.loaded = true
-                                self.$nextTick()
-                            }
-                        })
-                    }
-                }
-            }],
-            searchOption: {
-                pageSize: 1, // 单页显示结果条数
-                pageIndex: 1, // 页码
-                autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
-            },
-            addressDetail: null, // 输入详情地址
-            teachingSchool: null, // 教学点
+  data () {
 
+    return {
+      zoom: 14,
+      center: [114.34371, 30.55939],
+      markers: [],
+      searchResult: [], // 搜索出来的数据
+      plugin: [{
+        pName: 'Geolocation',
+        events: {
+          init (o) {
+            o.getCurrentPosition((status, result) => {
+              if (result && result.position) {
+                self.lng = result.position.lng
+                self.lat = result.position.lat
+                self.center = [self.lng, self.lat]
+                self.loaded = true
+                self.$nextTick()
+              }
+            })
+          }
         }
+      }],
+      searchOption: {
+        pageSize: 1, // 单页显示结果条数
+        pageIndex: 1, // 页码
+        autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
+      },
+      addressDetail: null, // 输入详情地址
+      teachingSchool: null, // 教学点
+
+    }
+  },
+  mounted () {
+    let self = this
+  },
+  methods: {
+    onSearch () {
+      if (!this.search_value) return
+      this.markers = [] // 重置位置
+      let mapSearch = new AMap.PlaceSearch(this.searchOption)
+      // 目前只需要搜索第一条数据
+      mapSearch.search(this.search_value, (status, sr) => {
+        if (sr && sr.poiList && sr.poiList.count) {
+          let pois = sr.poiList.pois[0]
+          this.searchResult.push(pois)
+          this.markers.push({
+            position: [pois.location.lng, pois.location.lat],
+            events: this.markerEvents(pois)
+          })
+          this.center = [pois.location.lng, pois.location.lat]
+        } else if (sr.poiList === undefined) {
+          throw new Error(sr);
+        }
+      })
     },
-    mounted () {
-    },
-    methods: {
-        onSearch() {
-            if(!this.search_value) return
-            this.markers = [] // 重置位置
-            let mapSearch = new AMap.PlaceSearch(this.searchOption)
-            // 目前只需要搜索第一条数据
-            mapSearch.search(this.search_value, (status, sr) => {
-                if(sr && sr.poiList && sr.poiList.count) {
-                    let pois = sr.poiList.pois[0]
-                    this.searchResult.push(pois)
-                    this.markers.push({
-                        position: [pois.location.lng, pois.location.lat],
-                        events: this.markerEvents(pois)
-                    })
-                    this.center = [pois.location.lng, pois.location.lat]
-                } else if (sr.poiList === undefined) {
-                    throw new Error(sr);
-                }
-            })
-        },
-        markerEvents(pois) { 
-            // marker 事件列表
-            let that = this
-            return {
-                click: (e) => {
-                    let geocoder = new AMap.Geocoder()
-                    geocoder.getAddress(e.lnglat, function(status, result) {
-                        if(status === 'complete' && result.regeocode) {
-                            that.addressDetail = result.regeocode.formattedAddress
-                        } else {
-                            that.$toast('请重新选择地址')
-                        }
-                    })
-                }
+    markerEvents (pois) {
+      // marker 事件列表
+      let that = this
+      return {
+        click: (e) => {
+          let geocoder = new AMap.Geocoder()
+          geocoder.getAddress(e.lnglat, function (status, result) {
+            if (status === 'complete' && result.regeocode) {
+              that.addressDetail = result.regeocode.formattedAddress
+            } else {
+              that.$toast('请重新选择地址')
             }
+          })
         }
+      }
     }
+  }
 }
 </script>
 <style lang="scss">

src/views/teamBuild/components/teamBaseInfo.vue

@@ -268,20 +268,21 @@ export default {
 </script>
 <style lang="scss">
 .base-container {
-  overflow: auto;
+  // overflow: auto;
   display: flex;
   flex-direction: row;
   justify-content: flex-start;
   flex-wrap: nowrap;
-  font-size: 16px;
+  font-size: 14px;
   color: #444;
+  // width: fill-available;
   .banseLeft {
-    width: 1050px;
+    // width: 1050px;
     .head {
       height: 48px;
       line-height: 48px;
       background-color: #edeef0;
-      font-size: 16px;
+      font-size: 14px;
       font-weight: bold;
       color: #444;
       padding: 0 11px;
@@ -294,7 +295,7 @@ export default {
       padding: 15px 11px;
     }
     .checkRow {
-      width: 1050px;
+      // width: 1050px;
       padding-left: 28px;
       display: flex;
       flex-direction: row;
@@ -390,7 +391,7 @@ export default {
       height: 40px;
       line-height: 40px;
       color: #000;
-      font-size: 16px;
+      font-size: 14px;
       background: #fff;
       box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.07);
       text-align: center;
@@ -542,9 +543,9 @@ export default {
       background: #fff;
       .price {
         flex: 1;
-        font-size: 16px;
+        font-size: 14px;
       }
-      font-size: 16px;
+      font-size: 14px;
       span {
         color: #fa101d;
       }

src/views/teamBuild/components/teamSoundMoney.vue

@@ -91,7 +91,7 @@ export default {
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
-    font-size: 16px;
+    font-size: 14px;
     color: #444;
   }
   .floor {

src/views/teamDetail/components/studentSignin.vue

@@ -59,7 +59,7 @@ export default {
 //       width: 100px;
 //       color: #14928a;
 //       border: 1px solid rgba(20, 146, 138, 1);
-//       font-size: 16px;
+//       font-size: 14px;
 //       text-align: center;
 //       margin-right: 12px;
 //       &:nth-child(1) {

src/views/teamDetail/components/teacherSignin.vue

@@ -62,7 +62,7 @@ export default {
 //       width: 100px;
 //       color: #14928a;
 //       border: 1px solid rgba(20, 146, 138, 1);
-//       font-size: 16px;
+//       font-size: 14px;
 //       text-align: center;
 //       margin-right: 12px;
 //       &:nth-child(1) {

src/views/teamDetail/index.vue

@@ -96,7 +96,7 @@ export default {
     width: 100px;
     color: #14928a;
     border: 1px solid rgba(20, 146, 138, 1);
-    font-size: 16px;
+    font-size: 14px;
     text-align: center;
     margin-right: 12px;
     &:nth-child(1) {

src/views/teamDetail/teamList.vue

@@ -298,7 +298,7 @@ export default {
 </script>
 <style lang="scss" scoped>
 .select {
-  font-size: 16px;
+  font-size: 14px;
 }
 .btnList {
   display: flex;

vue.config.js

@@ -16,8 +16,8 @@ const name = defaultSettings.title || 'vue Admin Template' // page title
 // const port = process.env.port || process.env.npm_config_port || 9528 // dev port
 // http://47.99.212.176:8000
 // http://192.168.3.28:8000
-let target = 'http://47.99.212.176:8000'
-// let target = 'http://192.168.3.28:8000'
+// let target = 'http://47.99.212.176:8000'
+let target = 'http://192.168.3.28:8000'
 // All configuration item explanations can be find in https://cli.vuejs.org/config/
 module.exports = {
   /**