From a8e5c02a3266b6b3529b34ad63e66ba03db1ded4 Mon Sep 17 00:00:00 2001
From: yanzhongrong <yanzhongrong@laddercloud.com>
Date: Sun, 30 Jan 2022 02:03:52 +0800
Subject: [PATCH] ui style
---
src/App.vue | 13 +++----
src/layout/components/Navbar.vue | 9 ++---
src/layout/components/Sidebar/SidebarItem.vue | 14 +++++++-
src/layout/components/Sidebar/index.vue | 1 +
src/settings.js | 2 +-
src/styles/element-ui.scss | 13 ++++++-
src/styles/sidebar.scss | 6 ++--
src/styles/variables.scss | 2 +-
src/views/alarm/cableTime/index.vue | 34 ++++++++++++++-----
src/views/alarm/device/index.vue | 30 ++++++++++++----
src/views/dashboard/index.vue | 5 +--
src/views/history/leakyCableStatus/index.vue | 6 ++--
src/views/login/index.vue | 2 +-
src/views/monitor/leakageCable.vue | 2 +-
14 files changed, 96 insertions(+), 43 deletions(-)
diff --git a/src/App.vue b/src/App.vue
index a30ef4a..1e2c89b 100644
--- a/src/App.vue
+++ b/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>
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
index 456e518..a5c57b2 100644
--- a/src/layout/components/Navbar.vue
+++ b/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() {
diff --git a/src/layout/components/Sidebar/SidebarItem.vue b/src/layout/components/Sidebar/SidebarItem.vue
index d5787ca..0c10978 100644
--- a/src/layout/components/Sidebar/SidebarItem.vue
+++ b/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>
diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue
index b34aef6..78baebf 100644
--- a/src/layout/components/Sidebar/index.vue
+++ b/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;
diff --git a/src/settings.js b/src/settings.js
index ae3c494..8428f9b 100644
--- a/src/settings.js
+++ b/src/settings.js
@@ -1,6 +1,6 @@
module.exports = {
- title: 'Vue Admin Template',
+ title: "RX100R æ¼ç¼†æ•…障定ä½ç›‘测系统",
/**
* @type {boolean} true | false
diff --git a/src/styles/element-ui.scss b/src/styles/element-ui.scss
index 147cfda..154c792 100644
--- a/src/styles/element-ui.scss
+++ b/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
diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss
index 8bcb1e1..d8f4580 100644
--- a/src/styles/sidebar.scss
+++ b/src/styles/sidebar.scss
@@ -159,6 +159,7 @@
.el-menu--collapse .el-menu .el-submenu {
min-width: $sideBarWidth !important;
}
+
// mobile responsive
.mobile {
@@ -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 {
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 32439d3..aaad1db 100644
--- a/src/styles/variables.scss
+++ b/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
diff --git a/src/views/alarm/cableTime/index.vue b/src/views/alarm/cableTime/index.vue
index a3d6785..e066c8d 100644
--- a/src/views/alarm/cableTime/index.vue
+++ b/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;
diff --git a/src/views/alarm/device/index.vue b/src/views/alarm/device/index.vue
index 1e40dc8..d1ca6dc 100644
--- a/src/views/alarm/device/index.vue
+++ b/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>
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index e335353..332cea3 100644
--- a/src/views/dashboard/index.vue
+++ b/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;
diff --git a/src/views/history/leakyCableStatus/index.vue b/src/views/history/leakyCableStatus/index.vue
index fde231d..0cf9f6a 100644
--- a/src/views/history/leakyCableStatus/index.vue
+++ b/src/views/history/leakyCableStatus/index.vue
@@ -1,7 +1,6 @@
<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;
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 818102e..7cdaee5 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -1,7 +1,7 @@
<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">
diff --git a/src/views/monitor/leakageCable.vue b/src/views/monitor/leakageCable.vue
index 9bdb9e5..1f1751b 100644
--- a/src/views/monitor/leakageCable.vue
+++ b/src/views/monitor/leakageCable.vue
@@ -157,7 +157,7 @@ export default {
color: #333333;
}
.message {
- line-height: 32px;
+ line-height: 22px;
}
.red {
color: red;
--
2.18.1