登录页及主页样式

src/assets/less/Suless.less

@@ -1,10 +1,12 @@
-@bordercolor      : #327290;
+@bordercolor      : #C8C8C8;
 @headercolor      : #1f232a;
 @backcolor        : #454959;
-@inpuitbackcolor  : #343642;
+@inpuitbackcolor  : #ffffff;
-@labelDeaultColor : #9698a4;
+@labelDeaultColor : #282828;
 @defaultWhiteColor: #eeeeee;
 @fontfamily       : 'Microsoft YaHei';
+@tableheadColor   : #e5e8eb;
+@tableColor   : #575D63;
 
 /* 滚动条优化 start */
 ::-webkit-scrollbar {
@@ -36,7 +38,7 @@
 }
 body {
   // 打开滚动条固定显示
-  overflow-y: hidden;
+  overflow: hidden;
 
   &.colorWeak {
     filter: invert(80%);
@@ -59,22 +61,27 @@ body {
   color: #8a8e9e !important;
 }
 
+
+
 /* chrome 记住密码样式 */
 .user-layout-login .has-success input:-webkit-autofill {
-  box-shadow             : inset 0 0 1000px #252c40 !important;
+  box-shadow: inset 0 0 1000px 1000px #0f142a  !important;
-  -webkit-text-fill-color: @labelDeaultColor  !important;
+  -webkit-text-fill-color: #fff  !important;
 }
 
 .ant-layout {
-  background: url('~@/assets/img/layoutbg.png') no-repeat center bottom !important;
+  // background: url('~@/assets/img/layoutbg.png') no-repeat center bottom !important;
+  background-color: #fff !important;
+  overflow: hidden;
 }
 
 .ant-layout-header {
-  background: url('~@/assets/img/header_bg.png') no-repeat center top !important;
+  background-image: url('~@/assets/img/header_bg.png') !important;
-  height: 154px !important;
+  background-size: 100% 100%;
-  margin-top: -4px;
+  height: 64px !important;
 }
 
+
 .signdiv,
 .ant-card-head,
 .ant-form-item label,
@@ -198,11 +205,11 @@ ul li {
   font-family: @fontfamily;
   font-weight: 400 !important;
   font-size  : 16px !important;
-  color      : #d4d4d4 !important;
+  color      : @tableColor !important;
 }
 
 .table-page-search-wrapper {
-  padding: 8px 0 0 0;
+  padding: 30px 10px 10px 20px;
 }
 
 
@@ -212,9 +219,6 @@ ul li {
   background: none !important;
 }
 
-.ant-layout-header {
-  height: 160px !important;
-}
 
 .libraryConfiguration .border-card {
   height: 670px !important;
@@ -265,11 +269,11 @@ ul li {
 }
 .ant-radio-wrapper,
 .ant-input-affix-wrapper .ant-input-prefix,
-.ant-input-affix-wrapper .ant-input-suffix，
+.ant-input-affix-wrapper .ant-input-suffix,
 .ant-pagination-disabled .ant-pagination-item-link,
 .ant-pagination-item a,
 .ant-empty-normal,
-.anticon.anticon-schedule， .border-card:hover,
+.anticon.anticon-schedule, .border-card:hover,
 .ant-tabs-tab-active,
 .ant-tabs-tab:hover,
 .ant-form-item,
@@ -290,11 +294,12 @@ ul li {
 }
 
 .ant-layout-content {
-  margin         : 0 30px;
+  padding        : 0 !important;
-  padding        : 20px 50px !important;
+  // background     : url(~@/assets/img/layoutcontentTop.png) 0 0 no-repeat, url(~@/assets/img/layoutcontentMiddle.png) 0 24px no-repeat, url(~@/assets/img/layoutcontentBottom.png) 0 calc(100vh - 182px) no-repeat;
-  background     : url(~@/assets/img/layoutcontentTop.png) 0 0 no-repeat, url(~@/assets/img/layoutcontentMiddle.png) 0 24px no-repeat, url(~@/assets/img/layoutcontentBottom.png) 0 calc(100vh - 182px) no-repeat;
+  // background-size: calc(100vw - 80px) 24px, calc(100vw - 80px) calc(100vh - 206px), calc(100vw - 80px) 24px;
-  background-size: calc(100vw - 80px) 24px, calc(100vw - 80px) calc(100vh - 206px), calc(100vw - 80px) 24px;
+  height         : calc(100vh - 64px) !important;
-  height         : calc(100vh - 155px) !important;
+  margin-top: -2px;
+  overflow: hidden;
 }
 
 .layout {
@@ -441,12 +446,12 @@ ul li {
       margin : auto;
       padding: 0 20px 0 0;
       display: flex;
-      height : 80px;
+      height : 64px;
 
       .ant-menu.ant-menu-horizontal {
         border     : none;
-        height     : 80px;
+        height     : 64px;
-        line-height: 80px;
+        line-height: 64px;
       }
 
       .header-index-left {
@@ -454,9 +459,9 @@ ul li {
 
         .logo.top-nav-header {
           width      : 165px;
-          height     : 80px;
+          height     : 64px;
           position   : relative;
-          line-height: 80px;
+          line-height: 64px;
           transition : all 0.3s;
           overflow   : hidden;
 
@@ -479,7 +484,7 @@ ul li {
 
       .header-index-right {
         float   : right;
-        height  : 80px;
+        height  : 64px;
         overflow: hidden;
 
         .action:hover {
@@ -570,7 +575,7 @@ textarea,
 .ant-input-number-handler-wrap,
 .ant-select-dropdown-content {
   border       : 1px solid @bordercolor  !important;
-  border-radius: 0 !important;
+  border-radius: 3px;
 }
 
 .ant-input-number-handler-down {
@@ -605,6 +610,7 @@ textarea,
     color: #919499 !important;
   }
 
+
   .ant-modal-body,
   .ant-drawer-body {
 
@@ -624,12 +630,6 @@ textarea,
       }
     }
 
-    .ant-table-align-center,
-    .ant-table-thead tr th {
-      background-color: @backcolor  !important;
-      color           : @labelDeaultColor  !important;
-    }
-
     .ant-table-bordered .ant-table-thead>tr>th,
     .ant-table-bordered .ant-table-tbody>tr>td,
     .ant-table-content .ant-table-thead>tr>th,
@@ -650,7 +650,7 @@ textarea,
 }
 
 .ant-btn {
-  width      : 160px !important;
+  min-width  : 60px !important;
   height     : 36px !important;
   font-family: @fontfamily;
   color      : @defaultWhiteColor  !important;
@@ -658,7 +658,7 @@ textarea,
 
 .ant-btn,
 .ant-input-search-button {
-  background   : url('~@/assets/img/buttonDefault.png') !important;
+  // background   : url('~@/assets/img/buttonDefault.png') !important;
   border       : none !important;
   border-radius: 0 !important;
 }
@@ -674,9 +674,9 @@ textarea,
 }
 
 .ant-menu-light {
-  height        : 850px;
+  height        : 100%;
-  padding-bottom: 10px;
+  padding-bottom: 0;
-  overflow-y    : scroll;
+  overflow-y    : none;
 }
 
 .ant-layout-sider {
@@ -748,17 +748,20 @@ textarea,
 
 .ant-menu-horizontal .ant-menu-item,
 .ant-menu-submenu.ant-menu-submenu-horizontal {
-  background    : url('~@/assets/img/menuDefault.png') no-repeat;
+  background-image: url('~@/assets/img/menuDefault.png');
-  width         : 176px !important;
+  background-repeat: no-repeat !important;
-  margin        : 0 20px !important;
+  background-size: 100% 100% !important;
-  min-height    : 60px !important;
+  min-width     : 130px !important;
-  line-height   : 60px !important;
+  margin        : 0 10px !important;
+  min-height    : 36px !important;
+  line-height   : 36px !important;
   text-align    : center;
   font-weight   : bold;
-  font-size     : 18px !important;
+  font-size     : 16px !important;
-  padding       : 0px !important; 
+  padding       :0 20px !important; 
   vertical-align: middle !important;
   font-family   : @fontfamily;
+  border-bottom: none !important;
 }
 
 .ant-menu-item>a>span,
@@ -776,8 +779,9 @@ textarea,
 
 .ant-menu-submenu-horizontal.ant-menu-submenu-selected,
 .ant-menu-submenu-horizontal.ant-menu-submenu-open,
+.ant-menu-horizontal .ant-menu-item-selected,
 .ant-menu-horizontal .ant-menu-item-active {
-  background: url('~@/assets/img/menuSelect.png') no-repeat !important;
+  background-image: url('~@/assets/img/menuSelect.png') !important;
 }
 
 .ant-menu-vertical .ant-menu-item,
@@ -797,7 +801,8 @@ textarea,
 .ant-menu-submenu-vertical.ant-menu-submenu-open,
 .ant-menu-vertical .ant-menu-item-selected,
 .ant-menu-vertical .ant-menu-item-active {
-  background: url('~@/assets/img/MenuSecSelect.png') no-repeat;
+  background-image: url('~@/assets/img/MenuSecSelect.png');
+  background-size: 100% 100%;
 }
 
 .ant-menu-submenu-placement-rightTop {
@@ -877,7 +882,6 @@ textarea,
 
 .ant-table-align-center,
 .ant-table-selection-column,
-.ant-table-thead th,
 .ant-table-row-expand-icon {
   background-color: transparent !important;
   color           : @labelDeaultColor  !important;
@@ -906,12 +910,16 @@ tr.ant-table-expanded-row:hover {
 .ant-table-tbody>tr td,
 .ant-table-row>td>span>a {
   background-color: transparent !important;
-  color           : @defaultWhiteColor;
+  color           : #00A2FF;
   height          : 50px;
   font-family     : @fontfamily;
   font-weight     : 400 !important;
   font-size       : 16px !important;
 }
+.ant-divider{
+  background:#00A2FF !important;
+}
+
 
 .ant-table-tbody>tr.ant-table-row-hover>td,
 .ant-table-tbody>tr.ant-table-row-hover>td>span>a,
@@ -964,14 +972,25 @@ tr.ant-table-expanded-row:hover {
   border-bottom: 1px solid #31343d !important;
 }
 
+.ant-table-tbody>tr>td {
+  color: @tableColor !important;
+}
+.ant-table-align-center,
+.ant-table-thead tr th {
+  background-color: @tableheadColor  !important;
+  color           : @labelDeaultColor  !important;
+  font-weight: 700  !important;
+}
+
 .ant-alert-info {
   background-color: #3D4145;
   border          : none;
   color           : @defaultWhiteColor;
 }
 
+
 .ant-alert-info>a {
-  color: @defaultWhiteColor;
+  color: #00A2FF;
 }
 
 .ant-card-body {
@@ -1026,7 +1045,10 @@ tr.ant-table-expanded-row:hover {
 
 .content {
   .table-operator {
+    position: absolute;
     margin-bottom: 18px;
+    right: 10px;
+    top:30px;
 
     button {
       margin-right: 8px;

src/components/layouts/TabLayout.vue

@@ -18,7 +18,7 @@
         <span slot="tab" :pagekey="page.fullPath">{{ page.meta.title }}</span>
       </a-tab-pane>
     </a-tabs>
-    <div style="margin: 12px 12px 0;">
+    <div>
       <transition name="page-toggle">
         <keep-alive v-if="multipage">
           <router-view v-if="reloadFlag"/>

src/components/layouts/UserLayout.vue

@@ -59,7 +59,7 @@ export default {
   .container {
     width: 1920px;
     min-height: 100%;
-    background: url('~@/assets/img/layoutbg.png') no-repeat center bottom ;
+    background: url('~@/assets/img/loginbg.png') no-repeat center center ;
     background-size: 100%;
     // padding: 110px 0 144px;
     position: relative;
@@ -112,9 +112,9 @@ export default {
     }
 
     .main {
-      width: 670px;
+      width: 568px;
-      height: 488px;
+      height: 440px;
-      margin: 200px auto;
+      margin: 293px 1173px;
       background: url(~@/assets/img/login_bg.png) no-repeat;
     }
 

src/components/menu/index.js

@@ -99,14 +99,15 @@ export default {
     renderItem (menu) {
       if (!menu.hidden) {
         return menu.children && !menu.alwaysShow ? this.renderSubMenu(menu) : this.renderMenuItem(menu)
+        return this.renderMenuItem(menu)
       }
       return null
     },
     renderMenuItem (menu) {
-      if(menu.meta.title == '首页')
+      // if(menu.meta.title == '首页')
-      { 
+      // { 
-        return null
+      //   return null
-      }
+      // }
       const target = menu.meta.target || null
       const tag = target && 'a' || 'router-link'
       let props = { to: { name: menu.name } }
@@ -124,7 +125,7 @@ export default {
           item.meta = Object.assign(item.meta, { hidden: true })
         })
       }
-
+     
       return (
         <Item {...{ key: menu.path }}>
           <tag {...{ props, attrs }}>
@@ -139,6 +140,7 @@ export default {
       if (!menu.alwaysShow) {
         menu.children.forEach(item => itemArr.push(this.renderItem(item)))
       }
+      
       return (
         <SubMenu {...{ key: menu.path }}>
           <span slot="title">

src/components/page/GlobalHeader.vue

@@ -28,35 +28,24 @@
     <!-- 顶部导航栏模式 -->
     <div v-else :class="['top-nav-header-index', theme]">
       <div class="header-index-wide">
-        <div class="header-nowTime" :style="topMenuStyle.headerIndexLeft">
+        <div class="header-nowTime" :style="topMenuStyle.headerIndexLeft">末端数据接入处理系统</div>
-          <div class="nowTime">{{ nowTime }}</div>
-          <div class="nowDate">{{ nowDate }}</div>
-          <div class="nowWeek">{{ nowWeek }}</div>
-        </div>
         <div class="header-index-center" :style="topMenuStyle.headerIndexCenter">
-          <logo class="top-nav-header" :show-title="device !== 'mobile'" />
+          <div class="header-index-wide">
+            <div class="header-index-center" :style="topMenuStyle.topmenuCenter">
+              <s-menu mode="horizontal" :menu="menus" :theme="theme"></s-menu>
+            </div>
+          </div>
         </div>
         <user-menu class="header-index-right" :theme="theme" :style="topMenuStyle.headerIndexRight" />
       </div>
 
-      <div class="header-index-wide">
-        <div class="header-index-left" :style="topMenuStyle.topmenuLeft">
-          <img src="~@/assets/img/MenuLeft.png" alt="" style="margin-top: 11px" />
-        </div>
-        <div class="header-index-center" :style="topMenuStyle.topmenuCenter">
-          <s-menu mode="horizontal" :menu="menus" :theme="theme"></s-menu>
-        </div>
-        <div class="header-index-left" :style="topMenuStyle.topmenuLeft">
-          <img src="~@/assets/img/MenuRight.png" alt="" style="float: right; margin-top: 11px" />
-        </div>
-      </div>
     </div>
   </a-layout-header>
 </template>
 
 <script>
 import UserMenu from '../tools/UserMenu'
-import SMenu from '../menu/'
+import SMenu from '../menu'
 import Logo from '../tools/Logo'
 
 import { mixin } from '@/utils/mixin.js'
@@ -104,11 +93,9 @@ export default {
       //update-begin--author:sunjianlei---date:20190508------for: 顶部导航栏过长时显示更多按钮-----
       topMenuStyle: {
         headerIndexLeft: {},
-        headerIndexCenter: {},
-        topNavHeader: {},
         headerIndexRight: {},
+        headerIndexCenter: {},
         topmenuCenter: {},
-        topmenuLeft: {},
       },
       chatStatus: '',
     }
@@ -134,7 +121,6 @@ export default {
     if (this.mode === 'topmenu') {
       this.buildTopMenuStyle()
     }
-    this.nowTimes()
   },
   methods: {
     handleScroll() {
@@ -157,57 +143,20 @@ export default {
       if (this.mode === 'topmenu') {
         if (this.device === 'mobile') {
           // 手机端需要清空样式，否则显示会错乱
-          this.topMenuStyle.topNavHeader = {}
           this.topMenuStyle.headerIndexRight = {}
           this.topMenuStyle.headerIndexLeft = {}
           this.topMenuStyle.headerIndexCenter = {}
           this.topMenuStyle.topmenuCenter = {}
-          this.topMenuStyle.topmenuLeft = {}
         } else {
           let rightWidth = '460px'
-          let menuLeftWidth = '300px'
+          let menuLeftWidth = '0px'
           this.topMenuStyle.headerIndexRight = { 'min-width': rightWidth }
           this.topMenuStyle.headerIndexLeft = { width: rightWidth }
           this.topMenuStyle.headerIndexCenter = { width: `calc(100% - ${rightWidth} - ${rightWidth})` }
-          this.topMenuStyle.topmenuLeft = { width: menuLeftWidth }
           this.topMenuStyle.topmenuCenter = { width: `calc(100% - ${menuLeftWidth} - ${menuLeftWidth})` }
         }
       }
     },
-    //日期显示
-    timeFormate(timeStamp) {
-      let month =
-        new Date(timeStamp).getMonth() + 1 < 10
-          ? '0' + (new Date(timeStamp).getMonth() + 1)
-          : new Date(timeStamp).getMonth() + 1
-      let date =
-        new Date(timeStamp).getDate() < 10 ? '0' + new Date(timeStamp).getDate() : new Date(timeStamp).getDate()
-      let hh =
-        new Date(timeStamp).getHours() < 10 ? '0' + new Date(timeStamp).getHours() : new Date(timeStamp).getHours()
-      let mm =
-        new Date(timeStamp).getMinutes() < 10
-          ? '0' + new Date(timeStamp).getMinutes()
-          : new Date(timeStamp).getMinutes()
-      let ss =
-        new Date(timeStamp).getSeconds() < 10
-          ? '0' + new Date(timeStamp).getSeconds()
-          : new Date(timeStamp).getSeconds()
-
-      var myddy = new Date(timeStamp).getDay() //获取存储当前日期
-      var weekday = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
-      this.nowTime = hh + ':' + mm
-      this.nowDate = month + '月' + date + '日'
-      this.nowWeek = weekday[myddy]
-    },
-    nowTimes() {
-      this.timeFormate(new Date())
-      setInterval(this.nowTimes, 1000)
-      this.clear()
-    },
-    clear() {
-      clearInterval(this.nowTimes)
-      this.nowTimes = null
-    },
   },
 }
 </script>
@@ -222,8 +171,8 @@ export default {
       margin-left: 10px;
 
       .ant-menu.ant-menu-horizontal {
-        height: 82px;
+        height: 64px;
-        line-height: 82px;
+        line-height: 64px;
       }
     }
     .trigger {
@@ -237,7 +186,7 @@ export default {
   .header {
     z-index: 2;
     color: white;
-    height: 82px;
+    height: 64px;
     background-color: @primary-color;
     transition: background 300ms;
 
@@ -258,32 +207,15 @@ export default {
 }
 
 .ant-layout-header {
-  height: 82px;
+  height: 64px;
-  line-height: 76px;
+  line-height: 64px;
 }
 .header-nowTime {
-  color: #00c3ff;
+  color: #fff;
   font-family: 'Microsoft YaHei';
-  letter-spacing: 2px;
+  font-size: 26px;
-  .nowTime {
+  letter-spacing: 3px;
-    font-size: 40px;
+  font-weight: 700;
-    width: 120px;
+  padding-left:23px;
-    float: left;
-    margin-left:27px;
-  }
-  .nowDate {
-    font-size: 14px;
-    width: 200px;
-    height: 42px;
-    float: left;
-    line-height: 62px;
-  }
-  .nowWeek {
-    font-size: 14px;
-    width: 200px;
-    height: 14px;
-    float: left;
-    line-height: 14px;
-  }
 }
 </style>

src/components/page/GlobalLayout.vue

@@ -133,6 +133,7 @@ export default {
     //--update-begin----author:scott---date:20190320------for:根据后台菜单配置，判断是否路由菜单字段，动态选择是否生成路由（为了支持参数URL菜单）------
     //this.menus = this.mainRouters.find((item) => item.path === '/').children;
     this.menus = this.permissionMenuList
+    console.log(this.permissionMenuList)
     // 根据后台配置菜单，重新排序加载路由信息
     //console.log('----加载菜单逻辑----')
     //console.log(this.mainRouters)

src/components/page/PageHeader.vue

@@ -102,11 +102,17 @@
 
 <style lang="less" scoped>
 
+
   .page-header {
-    padding: 16px 32px 0;
+    margin: 0;
+    padding: 8px 20px;
+    height:40px;
+    width:calc(100vw - 260px);
     position: absolute;
-    top: 124px;
+    top: 110px;
-    left: -18px;
+    left: 260px;
+    background-color:#F1F4F8;
+    border-top:2px solid #2B85D1;
 
     .breadcrumb {
       margin-bottom: 16px;

src/components/page/PageLayout.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :style="!$route.meta.pageHeader ? 'margin: -10px -24px 0;' : null">
+  <div :style="!$route.meta.pageHeader ? 'margin: 0;' : null">
     <!-- pageHeader , route meta hideHeader:true on hide -->
     <page-header v-if="!$route.meta.pageHeader" :title="title" :logo="logo" :avatar="avatar">
       <slot slot="action" name="action"></slot>
@@ -9,7 +9,7 @@
         <div class="link">
           <template v-for="(link, index) in linkList">
             <a :key="index" :href="link.href">
-              <a-icon :type="link.icon"/>
+              <a-icon :type="link.icon" />
               <span>{{ link.title }}</span>
             </a>
           </template>
@@ -22,12 +22,13 @@
         </div>
         <div class="page-menu-tabs" v-if="tabs && tabs.items">
           <!-- @change="callback" :activeKey="activeKey" -->
-          <a-tabs :tabBarStyle="{margin: 0}" @change="tabs.callback" :activeKey="tabs.active()">
+          <a-tabs :tabBarStyle="{ margin: 0 }" @change="tabs.callback" :activeKey="tabs.active()">
             <a-tab-pane v-for="item in tabs.items" :tab="item.title" :key="item.key"></a-tab-pane>
           </a-tabs>
         </div>
       </div>
     </page-header>
+    <div class="leftMenu"></div>
     <div class="content">
       <div :class="['page-header-index-wide']">
         <slot></slot>
@@ -37,91 +38,103 @@
 </template>
 
 <script>
-  import PageHeader from './PageHeader'
+import PageHeader from './PageHeader'
 
-  export default {
+export default {
-    name: "LayoutContent",
+  name: "LayoutContent",
-    components: {
+  components: {
-      PageHeader
+    PageHeader
+  },
+  // ['desc', 'logo', 'title', 'avatar', 'linkList', 'extraImage']
+  props: {
+    desc: {
+      type: String,
+      default: null
     },
-    // ['desc', 'logo', 'title', 'avatar', 'linkList', 'extraImage']
+    logo: {
-    props: {
+      type: String,
-      desc: {
+      default: null
-        type: String,
-        default: null
-      },
-      logo: {
-        type: String,
-        default: null
-      },
-      title: {
-        type: String,
-        default: null
-      },
-      avatar: {
-        type: String,
-        default: null
-      },
-      linkList: {
-        type: Array,
-        default: null
-      },
-      extraImage: {
-        type: String,
-        default: null
-      },
-      search: {
-        type: Boolean,
-        default: false
-      },
-      tabs: {
-        type: Object,
-        default: () => {}
-      }
     },
-    methods: {
+    title: {
+      type: String,
+      default: null
+    },
+    avatar: {
+      type: String,
+      default: null
+    },
+    linkList: {
+      type: Array,
+      default: null
+    },
+    extraImage: {
+      type: String,
+      default: null
+    },
+    search: {
+      type: Boolean,
+      default: false
+    },
+    tabs: {
+      type: Object,
+      default: () => { }
     }
+  },
+  methods: {
   }
+}
 </script>
 
 <style lang="less" scoped>
-  .content {
+.leftMenu {
-    margin: 24px 12px 0;
+  width: 260px;
+  height: calc(100vh - 64px);
+  background-color: #00467C;
+  position: absolute;
+  left: 0;
+}
 
-    .link {
+.content {
-      margin-top: 16px;
+  width: calc(100vw - 261px);
+  position: absolute;
+  left: 260px;
+  top: 140px;
 
-      &:not(:empty) {
+  .link {
-        margin-bottom: 16px;
+    margin-top: 16px;
+
+    &:not(:empty) {
+      margin-bottom: 16px;
+    }
+
+    a {
+      margin-right: 32px;
+      height: 24px;
+      line-height: 24px;
+      display: inline-block;
+
+      i {
+        font-size: 24px;
+        margin-right: 8px;
+        vertical-align: middle;
       }
-      a {
+
-        margin-right: 32px;
+      span {
         height: 24px;
         line-height: 24px;
         display: inline-block;
-
+        vertical-align: middle;
-        i {
-          font-size: 24px;
-          margin-right: 8px;
-          vertical-align: middle;
-        }
-        span {
-          height: 24px;
-          line-height: 24px;
-          display: inline-block;
-          vertical-align: middle;
-        }
       }
     }
   }
-  .page-menu-search {
+}
-    text-align: center;
+
-    margin-bottom: 16px;
+.page-menu-search {
-  }
+  text-align: center;
-  .page-menu-tabs {
+  margin-bottom: 16px;
-    margin-top: 48px;
+}
-  }
+
-  .page-header[data-v-6740ec88] {
+.page-menu-tabs {
-    margin: 0px 24px 0;
+  margin-top: 48px;
-  }
+}
 </style>

src/components/tools/UserMenu.vue

@@ -33,7 +33,7 @@
     </span> -->
     <!-- <header-notice class="action"/> -->
     <a-dropdown>
-      <span class="action action-full ant-dropdown-link user-dropdown-menu" style="margin-top: 20px;">
+      <span class="action action-full ant-dropdown-link user-dropdown-menu" >
         <!-- <a-avatar class="avatar" size="small" :src="getAvatar()"/> -->
       <img src="~@/assets/u8.png" alt="logo" style="margin-right: 10px;margin-top: -6px;" >
         <span v-if="isDesktop()" style="color:#00c3ff">欢迎您，{{ nickname() }}</span>

src/views/user/Login.vue

@@ -2,18 +2,23 @@
   <div class="main">
     <a-form :form="form" class="user-layout-login" ref="formLogin" id="formLogin">
       <div class="header">
-        <span class="title">公报产品同步软件</span>
+        <span class="title">末端数据接入处理系统</span>
       </div>
-      <a-form-item label="账号" :labelCol="labelCol" :wrapperCol="wrapperCol">
+      <div class="name">
+        <span class="title">用户登录</span>
+      </div>
+      <a-form-item label=" " :labelCol="labelCol" :wrapperCol="wrapperCol">
+        <img class="aicon" src="~@/assets/img/icon-账户.png"/>
         <a-input size="large" v-decorator="['username']" type="text" placeholder="请输入账号"> </a-input>
       </a-form-item>
 
-      <a-form-item label="密码" :labelCol="labelCol" :wrapperCol="wrapperCol">
+      <a-form-item label=" " :labelCol="labelCol" :wrapperCol="wrapperCol">
+        <img class="aicon" src="~@/assets/img/icon-密码.png"/>
         <a-input v-decorator="['password']" size="large" type="password" autocomplete="false" placeholder="请输入密码">
         </a-input>
       </a-form-item>
 
-      <a-form-item style="margin-top: 17px; margin-left: 100px">
+      <a-form-item style="margin-top: 17px; margin-left: 95px">
         <a-button
           size="large"
           type="primary"
@@ -25,16 +30,6 @@
         >
           登录
         </a-button>
-
-        <a-button
-          size="large"
-          type="cancel"
-          class="login-button-cancel"
-          @click.stop.prevent="handleCancel"
-          :disabled="loginBtn"
-        >
-          取消
-        </a-button>
       </a-form-item>
     </a-form>
     <login-select-tenant ref="loginSelect" @success="loginSelectOk"></login-select-tenant>
@@ -76,7 +71,7 @@ export default {
       },
       labelCol: {
         xs: { span: 24 },
-        sm: { span: 7 },
+        sm: { span: 4 },
       },
       wrapperCol: {
         xs: { span: 24 },
@@ -226,13 +221,16 @@ export default {
         })
     },
     loginSuccess() {
-      this.$router.push({ path: '/dashboard/analysis' }).catch(() => {
-        console.log('登录跳转首页出错,这个错误从哪里来的')
-      })
       this.$notification.success({
         message: '欢迎',
         description: `${timeFix()}，欢迎回来`,
       })
+      this.loginBtn = false
+      this.$router.push({ path: '/dashboard/analysis' }).then(() => {
+        console.log('222')
+      }).catch(() => {
+        console.log('登录跳转首页出错,这个错误从哪里来的')
+      })
     },
     cmsFailed(err) {
       this.$notification['error']({
@@ -298,34 +296,61 @@ export default {
 
 <style lang="less">
 .user-layout-login {
-  padding-left: 30px;
   .header {
-    padding-top: 80px;
+    position: absolute;
-    height: 175px;
+    top:257px;
+    left:1249px;
     line-height: 36px;
     text-align: center;
     .title {
-      font-size: 32px;
+      font-size: 38px;
       color: #fff;
       font-family: 'Microsoft YaHei';
-      letter-spacing: 10px;
+      letter-spacing: 4px;
+      font-weight: 700;
+    }
+  }
+  .name {
+    padding-top: 53px;
+    height: 135px;
+    line-height: 30px;
+    text-align: center;
+    .title {
+      font-weight: 400;
+      font-size: 24px;
+      color: #25BEFC;
+      font-family: 'Microsoft YaHei';
+      letter-spacing: 5px;
     }
   }
 }
 .user-layout-login .ant-form-item {
-  margin-bottom: 14px !important;
+  margin-bottom: 20px !important;
 }
 .user-layout-login input {
-  background: #333c4e;
+  font-size: 20px;
+  background: #0f142a;
   color: rgba(255, 255, 255, 0.85);
-
+  padding-left: 80px;
-  border: 0px !important;
+  border: 1px solid #1C6094 !important;
   outline: none !important;
   box-shadow: none !important;
-  border-color: #fff !important;
   cursor: pointer;
 }
 
+.user-layout-login .aicon
+{
+  position: absolute;
+  left: 30px;
+  top: -7px;
+  z-index: 11;
+}
+.user-layout-login input::placeholder {
+  color: rgba(255, 255, 255, 0.25);
+}
+
+
+
 .user-layout-login .valid-error .ant-select-selection__placeholder {
   color: #f5222d;
 }
@@ -340,36 +365,26 @@ export default {
   float: right !important;
 }
 .user-layout-login .ant-input-lg {
-  height: 50px !important;
+  height: 60px !important;
-  width: 316px !important;
+  width: 400px !important;
   border-radius: 0px;
 }
 
 .user-layout-login .ant-form-item-label > label::after {
   content: '';
 }
-.user-layout-login .login-button,
+.user-layout-login .login-button{
-.user-layout-login .login-button:hover,
+  width: 400px !important;
-.user-layout-login .login-button:active {
-  width: 156px !important;
   height: 60px !important;
   border: none !important;
   background: url(~@assets/img/login_button.png) !important;
-  font-size: 20px;
+  font-size: 28px;
   color: #fff;
   font-family: 'Microsoft YaHei';
 }
-.user-layout-login .login-button-cancel,
+.user-layout-login .login-button:hover,
-.user-layout-login .login-button-cancel:hover,
+.user-layout-login .login-button:active {
-.user-layout-login .login-button-cancel:active {
+  background: url(~@assets/img/login_button_hover.png) !important;
-  width: 156px !important;
-  height: 60px !important;
-  border: none !important;
-  margin-left: 97px !important;
-  background: url(~@assets/img/login_button_cancel.png) !important;
-  font-size: 20px;
-  color: #fff;
-  font-family: 'Microsoft YaHei';
 }
 .user-layout-login .ant-tabs-ink-bar {
   display: none !important;