ui style

src/App.vue

@@ -10,13 +10,14 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
+// zheyeshi
 #app {
-  & ::v-deep .el-table__body tr:hover>td{
-    background-color: #bed5ff !important;
-  }
+  // & ::v-deep .el-table__body tr:hover>td{
+  //   background-color: #bed5ff !important;
+  // }
  
-  & ::v-deep .el-table__body tr.current-row>td{
-    background-color: #bed5ff !important;
-  }
+  // & ::v-deep .el-table__body tr.current-row>td{
+  //   background-color: #bed5ff !important;
+  // }
 }
 </style>

src/layout/components/Navbar.vue

@@ -9,12 +9,7 @@
         <span class="el-dropdown-link">
           admin<i class="el-icon-arrow-down el-icon--right"></i>
         </span>
-        <el-dropdown-menu slot="dropdown" class="user-dropdown">
-          <router-link to="/">
-            <el-dropdown-item>
-              首页
-            </el-dropdown-item>
-          </router-link>
+        <el-dropdown-menu slot="dropdown">
           <el-dropdown-item divided @click.native="logout">
             <span style="display:block;">退出</span>
           </el-dropdown-item>
@@ -68,7 +63,7 @@ export default {
       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();
       // return year + "年" + month + "月" + date +"日"+" "+hh+":"+mm ;
-      this.dateTime = year + '/' + month + '/' + date + '/' + ' ' + hh + ':' + mm + ':' + ss
+      this.dateTime = year + '/' + month + '/' + date + ' ' + hh + ':' + mm + ':' + ss
     },
     // 定时器函数
     nowTimes() {

src/layout/components/Sidebar/SidebarItem.vue

@@ -29,7 +29,7 @@
     </template>
 
     <template v-else>
-      <el-submenu ref="subMenu" :index="resolvePath(item.path)">
+      <el-submenu id="subid" ref="subMenu" :index="resolvePath(item.path)">
         <template slot="title">
           <icon-item
             v-if="item.meta"
@@ -80,8 +80,13 @@ export default {
     this.onlyOneChild = null;
     return {};
   },
+  mounted() {
+    console.log(this.$refs['subMenu']);
+    console.log(document.getElementById('subid'));
+  },
   methods: {
     hasOneShowingChild(children = [], parent) {
+      
       const showingChildren = children.filter(item => {
         if (item.hidden) {
           return false;
@@ -130,4 +135,11 @@ export default {
     width: 100%;
   }
 }
+.el-menu--collapse .el-menu .el-submenu, .el-menu--popup{
+  min-width: 120px!important;
+}
+.el-menu .el-menu--popup .el-menu--popup-bottom-start ::v-deep{
+  width: 1020px;
+}
+
 </style>

src/layout/components/Sidebar/index.vue

@@ -56,6 +56,7 @@ export default {
 </script>
 <style lang="scss" scoped>
 .frame-menu {
+  padding-left: 30px;
   border: none;
   height: 100%;
   // width: 100% !important;

src/settings.js

 module.exports = {
 
-  title: 'Vue Admin Template',
+  title: "RX100R 漏缆故障定位监测系统",
 
   /**
    * @type {boolean} true | false

src/styles/element-ui.scss

@@ -4,7 +4,10 @@
 .el-breadcrumb__inner a {
   font-weight: 400 !important;
 }
-
+.el-breadcrumb__item:last-child .el-breadcrumb__inner, .el-breadcrumb__item:last-child .el-breadcrumb__inner a, .el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover, .el-breadcrumb__item:last-child .el-breadcrumb__inner:hover,
+.app-breadcrumb.el-breadcrumb .no-redirect {
+  color: #2066F9!important;
+}
 .el-upload {
   input[type="file"] {
     display: none !important;
@@ -86,3 +89,11 @@
   right: 0;
   top: 53%;
 }
+
+.el-table__body tr:active > td{
+  background-color:#bed5ff !important;
+}
+
+.el-table__body tr.hover-row>td {
+  background-color:#bed5ff !important;
+}
\ No newline at end of file

src/styles/sidebar.scss

@@ -160,6 +160,7 @@
     min-width: $sideBarWidth !important;
   }
   
+
   // mobile responsive
   .mobile {
     .main-container {
@@ -190,7 +191,7 @@
 }
 
 // when menu collapsed
-.el-menu--vertical {
+.el-menu--horizontal {
   &>.el-menu {
     .svg-icon {
       margin-right: 16px;
@@ -211,7 +212,8 @@
 
   // the scroll bar appears when the subMenu is too long
   >.el-menu--popup {
-    max-height: 100vh;
+    max-height: 20vh;
+    min-width: 80px;
     overflow-y: auto;
 
     &::-webkit-scrollbar-track-piece {

src/styles/variables.scss

@@ -9,7 +9,7 @@ $menuHover:#263445;
 $subMenuBg:#1f2d3d;
 $subMenuHover:#001528;
 
-$sideBarWidth: 210px;
+$sideBarWidth: 120px;
 
 // the :export directive is the magic sauce for webpack
 // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass

src/views/alarm/cableTime/index.vue

@@ -2,11 +2,9 @@
   <!-- 漏缆实时状态 -->
   <div class="leakage-cable">
     <div class="leakage-top">
-      <el-tabs v-model="activeName" type="card">
-        <el-tab-pane label="全部" name="first">全部</el-tab-pane>
-        <el-tab-pane label="已确认" name="second">已确认</el-tab-pane>
-        <el-tab-pane label="未确认" name="third">未确认</el-tab-pane>
-      </el-tabs>
+      <el-button-group>
+        <el-button v-for="item in tabs" :key="item.key" :type="activeName === item.key ? 'primary' : ''" @click="changeType(item)">{{ item.label }}</el-button>
+      </el-button-group>
       <div class="operate-btn">
         <el-button type="primary">刷新</el-button>
         <el-button type="primary">查询</el-button>
@@ -47,6 +45,7 @@
       <el-table-column
         fixed="right"
         label="操作"
+        align="center"
         width="100">
         <template slot-scope="scope">
           <el-button type="text" >确认</el-button>
@@ -70,13 +69,27 @@ export default {
   components: { Pagination },
   data() {
     return {
-      activeName: '全部',
+      activeName: '0',
       searchForm: {
         pageNum: 1,
         pageSize: 10
       },
       total: 10,
-      tableData
+      tableData,
+      tabs: [
+        {
+          label: '全部',
+          key: '0'
+        },
+        {
+          label: '已确认',
+          key: '1'
+        },
+        {
+          label: '未确认',
+          key: '2'
+        }
+      ],
     };
   },
   methods: {
@@ -94,7 +107,10 @@ export default {
     handlePageChange(pageData) {
       this.searchForm.pageSize = pageData.size
       this.searchForm.pageNum = pageData.page
-    }
+    },
+    changeType(item) {
+      this.activeName = item.key
+    },
   }
 };
 </script>
@@ -111,7 +127,7 @@ export default {
     color: #333333;
   }
   .message {
-    line-height: 32px;
+    line-height: 22px;
   }
   .red {
     color: red;

src/views/alarm/device/index.vue

@@ -2,11 +2,9 @@
   <!-- 漏缆实时状态 -->
   <div class="leakage-cable">
     <div class="leakage-top">
-      <el-tabs v-model="activeName" type="card">
-        <el-tab-pane label="全部" name="first">全部</el-tab-pane>
-        <el-tab-pane label="已确认" name="second">已确认</el-tab-pane>
-        <el-tab-pane label="未确认" name="third">未确认</el-tab-pane>
-      </el-tabs>
+      <el-button-group>
+        <el-button v-for="item in tabs" :key="item.key" :type="activeName === item.key ? 'primary' : ''" @click="changeType(item)">{{ item.label }}</el-button>
+      </el-button-group>
       
       <div class="operate-btn">
         <el-button type="primary">刷新</el-button>
@@ -27,6 +25,7 @@
       <el-table-column
         fixed="right"
         label="操作"
+        align="center"
         width="100">
         <template slot-scope="scope">
           <el-button type="text">确认</el-button>
@@ -56,7 +55,21 @@ export default {
       },
       total: 10,
       tableData,
-      activeName: '全部',
+      activeName: '0',
+      tabs: [
+        {
+          label: '全部',
+          key: '0'
+        },
+        {
+          label: '已确认',
+          key: '1'
+        },
+        {
+          label: '未确认',
+          key: '2'
+        }
+      ],
     };
   },
   methods: {
@@ -80,7 +93,10 @@ export default {
     handlePageChange(pageData) {
       this.searchForm.pageSize = pageData.size
       this.searchForm.pageNum = pageData.page
-    }
+    },
+    changeType(item) {
+      this.activeName = item.key
+    },
   }
 };
 </script>

src/views/dashboard/index.vue

@@ -7,7 +7,7 @@
         <el-card shadow="never">
           <div slot="header" class="clearfix">
             <span>{{ item.title }}</span>
-            <el-button v-if="item.option" style="float: right; padding: 3px 0" type="text">保存</el-button>
+            <el-button v-if="item.option" style="float: right; padding: 3px 0;margin-right:20px" type="text">保存</el-button>
           </div>
           <div v-for="k in item.list" :key="k.name" class="text">
             <el-row :gutter="24">
@@ -16,7 +16,7 @@
               </el-col>
               <el-col :span="14">
                 <div v-if="item.option">
-                  <el-input v-model="k.value" clearable placeholder="请输入内容">{{ k.value }}</el-input>
+                  <el-input v-model="k.value" size="mini" clearable placeholder="请输入内容">{{ k.value }}</el-input>
                 </div>
                 <el-row :gutter="20" v-else-if="k.handle">
                   <el-col :span="10" class="value_handle">{{ k.value }}</el-col>
@@ -92,6 +92,7 @@ export default {
   .item_name {
     width: 262px;
     height: 26px;
+    line-height: 1;
   }
   .value_handle {
     color:red;

src/views/history/leakyCableStatus/index.vue

 <template>
   <!-- 漏缆实时状态 -->
   <div class="leakage-cable">
-    <breadcrumb />
     <div class="leakage-top">
       <div style="color: #666666">
         共6条数据
@@ -54,11 +53,10 @@
 </template>
 
 <script>
-import Breadcrumb from '@/components/Breadcrumb'
 import Pagination from '@/components/Pagination'
 
 export default {
-  components: { Pagination, Breadcrumb },
+  components: { Pagination },
   data() {
     return {
       searchForm: {
@@ -168,7 +166,7 @@ export default {
     color: #333333;
   }
   .message {
-    line-height: 32px;
+    line-height: 22px;
   }
   .red {
     color: red;

src/views/login/index.vue

 <template>
   <div class="login-container">
     <div class="text">
-      <p style="color: white;font-size: 30px;text-align: center;">Birtronix漏缆及天馈线在线监测系统</p>
+      <p style="color: white;font-size: 30px;text-align: center;">RX100R 漏缆故障定位监测系统</p>
     </div>
     <div class="loginBox">
     <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left">

src/views/monitor/leakageCable.vue

@@ -157,7 +157,7 @@ export default {
     color: #333333;
   }
   .message {
-    line-height: 32px;
+    line-height: 22px;
   }
   .red {
     color: red;