From b945f5a17664823e5ab2967e61bc3f3d38aa4087 Mon Sep 17 00:00:00 2001
From: hailin <1356886193@qq.com>
Date: 星期二, 18 七月 2023 08:57:18 +0800
Subject: [PATCH] 修改侧边导航栏
---
src/layout/index.vue | 3
src/styles/variables.scss | 24 ++
src/views/laboratory/ledger/index.vue | 18 +-
src/views/laboratory/personnel/index.vue | 179 ++++++++++++------------
src/layout/components/Sidebar/SidebarItem.vue | 2
src/styles/element-ui.scss | 23 +++
src/styles/sidebar.scss | 153 +++++++++++++++++++--
7 files changed, 275 insertions(+), 127 deletions(-)
diff --git a/src/layout/components/Sidebar/SidebarItem.vue b/src/layout/components/Sidebar/SidebarItem.vue
index a418c3d..0fd21c9 100644
--- a/src/layout/components/Sidebar/SidebarItem.vue
+++ b/src/layout/components/Sidebar/SidebarItem.vue
@@ -8,7 +8,7 @@
</app-link>
</template>
- <el-submenu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body>
+ <el-submenu v-else ref="subMenu" popper-class="popMenu" :index="resolvePath(item.path)" popper-append-to-body>
<template slot="title">
<item v-if="item.meta" :icon="item.meta && item.meta.icon" :title="item.meta.title" />
</template>
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 7f7d261..f8ca9cf 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -94,11 +94,12 @@
right: 0;
z-index: 9;
width: calc(100% - #{$sideBarWidth});
+ // width: calc(100% - 100px);
transition: width 0.28s;
}
.hideSidebar .fixed-header {
- width: calc(100% - 54px)
+ width: calc(100% - #{$sideBarWidth})
}
.mobile .fixed-header {
diff --git a/src/styles/element-ui.scss b/src/styles/element-ui.scss
index dfae657..9b495c7 100644
--- a/src/styles/element-ui.scss
+++ b/src/styles/element-ui.scss
@@ -89,4 +89,25 @@
}
.el-radio-button__orig-radio:checked+.el-radio-button__inner {
box-shadow: -0.00521rem 0 0 0 #b3d8ff;
-}
\ No newline at end of file
+}
+
+.el-menu-item,.el-submenu{
+ width: 100px;
+ height: 100px !important;
+ line-height:normal;
+ display: flex;
+ align-items: center;
+ justify-content: center !important;
+
+}
+// .el-menu-popup{
+// min-width: 100px !important;
+// }
+.el-menu--vertical{
+ max-width: 100px !important;
+}
+
+.el-menu--collapse .el-menu .el-submenu, .el-menu--popup {
+ min-width: 100px !important;
+ // background-color: #fff ;
+}
diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss
index c803516..19c677f 100644
--- a/src/styles/sidebar.scss
+++ b/src/styles/sidebar.scss
@@ -69,11 +69,38 @@
}
// menu hover
- .submenu-title-noDropdown,
- .el-submenu__title {
+
+ .el-submenu__title,.el-tooltip{
+
&:hover {
background-color: $menuHover !important;
+ border-radius: 8px;
+ overflow: hidden;
+ color: $menuActiveText !important;
+
}
+ }
+ .submenu-title-noDropdown{
+ &:hover {
+ background-color:transparent !important;
+ // background-color: $menuBg !important;
+ border-radius: 8px;
+ overflow: hidden;
+ color: $menuActiveText !important;
+
+ }
+ }
+ .el-submenu.is-active{
+ .popMenu{
+ background-color: #fff !important;
+ }
+ .el-submenu__title{
+ background-color: #ffffff !important;
+ border-radius: 8px;
+ overflow: hidden;
+ color: $menuActiveText !important;
+ }
+
}
@@ -88,26 +115,53 @@
}
}
+ // .is-active.el-submenu{
+ // color: $subMenuActiveText !important;
+
+ // }
.is-active.el-menu-item {
- color: $subMenuActiveText !important;
- border-right: 3px solid $menuActiveText;
- background-color: $menuHover !important;
+ // color: $subMenuActiveText !important;
+ // border-right: 3px solid $menuActiveText;
+ // background-color: $menuHover !important;
+ background: #fff !important;
+ .el-tooltip{
+ color: $subMenuActiveText !important;
+ // border-right: 3px solid $menuActiveText;
+ background-color: $menuHover !important;
+ border-radius: 8px;
+ }
+
}
}
.hideSidebar {
.sidebar-container {
- width: 54px !important;
+ // width: 54px !important;//鍘熸潵鐨勬牱寮�
+ width: 100px !important;//淇敼鍚庣殑鏍峰紡
}
.main-container {
- margin-left: 54px;
+ // margin-left: 54px;//鍘熸潵鐨勬牱寮�
+ margin-left: 100px;//淇敼鍚庣殑鏍峰紡
}
.submenu-title-noDropdown {
padding: 0 !important;
position: relative;
+ .el-tooltip{
+ width: 80px !important;
+ line-height: normal;
+ height: 80px !important;
+ padding: 0 !important;
+ display: flex !important;
+ flex-direction: column;
+ align-items: center;
+ line-height: normal;
+ justify-content: center;
+ position: static !important;
+
+ }
.el-tooltip {
padding: 0 !important;
@@ -116,28 +170,70 @@
}
.sub-el-icon {
- margin-left: 19px;
+ font-size: 30px;
+ margin: 0px;
}
}
}
.el-submenu {
overflow: hidden;
-
- &>.el-submenu__title {
+
+ &>.el-submenu__title{
+ // width: auto;
+ // height: auto;
+ width: 80px;
+ line-height: normal;
+ height: 80px !important;
padding: 0 !important;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
.svg-icon {
margin-left: 20px;
}
.sub-el-icon {
- margin-left: 19px;
+ // margin-left: 19px;
+ font-size: 30px;
+ margin: 0px;
+
}
.el-submenu__icon-arrow {
display: none;
}
+ }
+ &>.el-menu--vertical.popMenu{
+ .el-menu{
+ width: 60px;
+ height: 60px !important;
+ line-height: normal !important;
+ // >a{
+ // width: 100%;
+ // height: 60px !important;
+ // }
+ }
+ .nest-menu{
+ width: 60px;
+ height: 60px !important;
+ line-height: normal !important;
+ background-color: #fff !important;
+ // margin: 0 auto;
+ // >a {
+ // height: 100%;
+ // }
+ .el-menu-item{
+ padding: 0px !important;
+ width: 60px;
+ height: 30px !important;
+ line-height: normal !important;
+ margin: 0 auto;
+ }
+ }
+
}
}
@@ -145,11 +241,12 @@
.el-submenu {
&>.el-submenu__title {
&>span {
- height: 0;
- width: 0;
- overflow: hidden;
- visibility: hidden;
- display: inline-block;
+ // height: 0;
+ // width: 0;
+ // overflow: hidden;
+ // visibility: hidden;
+ // display: inline-block;
+ // 涓婇潰鏄殣钘忔枃瀛�
}
}
}
@@ -192,6 +289,7 @@
// when menu collapsed
.el-menu--vertical {
&>.el-menu {
+ background-color: $subMenuBg !important;
.svg-icon {
margin-right: 16px;
}
@@ -200,12 +298,29 @@
margin-left: -2px;
}
}
-
.nest-menu .el-submenu>.el-submenu__title,
.el-menu-item {
+ width: 100px;
+ height: 30px !important;
+ min-width: 100px !important;
+ line-height: 30px;
+ text-align: left !important;
+ font-size: 10px;
+ justify-content: start !important;
+ background-color: $subMenuBg !important;
+ color: $subMenuHover !important;
+ .svg-icon{
+ margin-right: 0px;
+ display: none;
+ }
+ span{
+ text-align: center;
+ }
&:hover {
// you can use $subMenuHover
- background-color: $menuHover !important;
+ background-color: $subMenuHover !important;
+ color: $subMenuBg !important;
+ // background-color: red !important;
}
}
@@ -213,7 +328,7 @@
>.el-menu--popup {
max-height: 100vh;
overflow-y: auto;
-
+ background-color: #fff;
&::-webkit-scrollbar-track-piece {
background: #d3dce6;
}
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index cd256ef..a1fdee7 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -12,18 +12,32 @@
// $sideBarWidth: 210px;
-$menuText:#606266;
+// $menuText:#606266;
+// $menuActiveText:#0077DB;
+// // $subMenuActiveText:#606266; //https://github.com/ElemeFE/element/issues/12951
+// $subMenuActiveText:#0077DB; //https://github.com/ElemeFE/element/issues/12951
+
+// $menuBg:#fff;
+// $menuHover:#E5F1FB;
+
+// $subMenuBg:#fff;
+// $subMenuHover:#E5F1FB;
+
+// $sideBarWidth: 100px;
+
+
+$menuText:#fff;
$menuActiveText:#0077DB;
// $subMenuActiveText:#606266; //https://github.com/ElemeFE/element/issues/12951
$subMenuActiveText:#0077DB; //https://github.com/ElemeFE/element/issues/12951
-$menuBg:#fff;
-$menuHover:#E5F1FB;
+$menuBg:#0077DB;
+$menuHover:#fff;
$subMenuBg:#fff;
-$subMenuHover:#E5F1FB;
+$subMenuHover:#0077DB;
-$sideBarWidth: 200px;
+$sideBarWidth: 100px;
// 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/laboratory/ledger/index.vue b/src/views/laboratory/ledger/index.vue
index 20c2883..619ac3b 100644
--- a/src/views/laboratory/ledger/index.vue
+++ b/src/views/laboratory/ledger/index.vue
@@ -5,8 +5,8 @@
<el-form ref="form" inline="true" :model="searchData">
<el-form-item>
<el-input
- placeholder="璇疯緭鍏ョ紪鍙�/璁惧鍚嶇О/鍨嬪彿瑙勬牸"
v-model="searchData.keyword"
+ placeholder="璇疯緭鍏ョ紪鍙�/璁惧鍚嶇О/鍨嬪彿瑙勬牸"
>
<i slot="prefix" class="el-input__icon el-icon-search" />
</el-input>
@@ -35,9 +35,7 @@
:props="defaultProps"
default-expand-all
:filter-node-method="filterNode"
- >
-
- </el-tree>
+ />
</div>
<div class="library-table">
<div class="table-header">
@@ -50,7 +48,7 @@
<el-radio-button label="鏁呴殰" />
<el-radio-button label="鎶ュ簾" />
</el-radio-group>
- <el-checkbox :style="{'marginLeft':'12px'}" v-model="isOut">宸茶繃鏈�</el-checkbox>
+ <el-checkbox v-model="isOut" :style="{'marginLeft':'12px'}">宸茶繃鏈�</el-checkbox>
</div>
<div class="serve-btn">
<!-- <el-button type="primary" icon="el-icon-plus">鏂板浜哄憳</el-button> -->
@@ -125,21 +123,21 @@
min-width="120"
:fixed="true"
>
- <template slot-scope="scope" >
- <el-button @click="handleClick(scope.row)" type="text" size="small">缂栬緫</el-button>
+ <template slot-scope="scope">
+ <el-button type="text" size="small" @click="handleClick(scope.row)">缂栬緫</el-button>
<!-- <el-button type="text" size="small">缂栬緫</el-button> -->
</template>
</el-table-column>
</el-table>
<div>
<el-pagination
- @size-change="handleSizeChange"
- @current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[100, 200, 300, 400]"
:page-size="100"
layout="total, sizes, prev, pager, next, jumper"
:total="400"
+ @size-change="handleSizeChange"
+ @current-change="handleCurrentChange"
/>
</div>
</div>
@@ -253,7 +251,7 @@
color: #333 !important;
}
::v-deep .el-tree-node:focus>.el-tree-node__content{
- background: rgba(58,124,253,0.1) !important;
+ background: rgba(58,124,253,0.1) !important;
// opacity: 0.31;
border-radius: 3px;
color: #333 !important;
diff --git a/src/views/laboratory/personnel/index.vue b/src/views/laboratory/personnel/index.vue
index 244d5a4..ec45299 100644
--- a/src/views/laboratory/personnel/index.vue
+++ b/src/views/laboratory/personnel/index.vue
@@ -5,42 +5,42 @@
<el-form ref="form" inline="true" :model="searchData">
<el-form-item>
<el-input
- placeholder="璇疯緭鍏ヤ汉鍛樺悕绉�"
v-model="keyword"
+ placeholder="璇疯緭鍏ヤ汉鍛樺悕绉�"
>
<i slot="prefix" class="el-input__icon el-icon-search" />
</el-input>
</el-form-item>
<el-form-item>
- <el-button @click="searchData()" type="primary">鏌ヨ</el-button>
- <el-button @click="resetData()" type="primary" plain>閲嶇疆</el-button>
+ <el-button type="primary" @click="searchData()">鏌ヨ</el-button>
+ <el-button type="primary" plain @click="resetData()">閲嶇疆</el-button>
<!-- <el-button type="text">楂樼骇鎼滅储<i class="el-icon-arrow-down el-icon--right" /></el-button> -->
</el-form-item>
</el-form>
</div>
<div class="serve-btn">
- <el-button type="primary" @click="dialogFormVisible = true" icon="el-icon-plus">鏂板浜哄憳</el-button>
+ <el-button type="primary" icon="el-icon-plus" @click="dialogFormVisible = true">鏂板浜哄憳</el-button>
<el-dialog title="鏂板浜哄憳" :visible.sync="dialogFormVisible">
- <el-form :model="form" :rules="rules" ref="form">
+ <el-form ref="form" :model="form" :rules="rules">
<el-form-item label="璐﹀彿" :label-width="formLabelWidth" prop="account">
- <el-input v-model="form.account" autocomplete="off"></el-input>
- </el-form-item>
+ <el-input v-model="form.account" autocomplete="off" />
+ </el-form-item>
<el-form-item label="骞撮緞" :label-width="formLabelWidth">
- <el-input v-model="form.age" autocomplete="off"></el-input>
+ <el-input v-model="form.age" autocomplete="off" />
</el-form-item>
<el-form-item label="閭" :label-width="formLabelWidth" prop="email">
- <el-input v-model="form.email" autocomplete="off"></el-input>
+ <el-input v-model="form.email" autocomplete="off" />
</el-form-item>
<el-form-item label="鍚嶅瓧" :label-width="formLabelWidth" prop="name">
- <el-input v-model="form.name" autocomplete="off"></el-input>
+ <el-input v-model="form.name" autocomplete="off" />
</el-form-item>
<el-form-item label="鐢佃瘽" :label-width="formLabelWidth" prop="phone">
- <el-input v-model="form.phone" autocomplete="off"></el-input>
+ <el-input v-model="form.phone" autocomplete="off" />
</el-form-item>
-
+
<el-form-item label="鏉冮檺" :label-width="formLabelWidth" prop="role_id">
- <el-input v-model="form.role_id" autocomplete="off"></el-input>
+ <el-input v-model="form.role_id" autocomplete="off" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
@@ -111,7 +111,7 @@
min-width="120"
>
<template slot-scope="scope">
- <el-button @click="handleClick(scope.row)" type="text" size="small">缂栬緫</el-button>
+ <el-button type="text" size="small" @click="handleClick(scope.row)">缂栬緫</el-button>
<!-- <el-button type="text" size="small">缂栬緫</el-button> -->
</template>
</el-table-column>
@@ -119,14 +119,14 @@
<div>
<!-- 鍒嗛〉鍣� -->
<el-pagination
- @size-change="handleSizeChange"
- @current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[100, 200, 300, 400]"
- :page-size=pageSize
+ :page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
- :total=this.personnerlTable.length>
- </el-pagination>
+ :total="this.personnerlTable.length"
+ @size-change="handleSizeChange"
+ @current-change="handleCurrentChange"
+ />
</div>
</div>
</div>
@@ -139,115 +139,114 @@
export default {
data() {
return {
- currentPage: 1,
keyword: '',
personnerlTable: [
],
- filteredpersonnerlTable:[],
- currentindex:1,
+ filteredpersonnerlTable: [],
+ currentindex: 1,
currentPage: 1, // 褰撳墠椤电爜
total: 20, // 鎬绘潯鏁�
pageSize: 100, // 姣忛〉鐨勬暟鎹潯鏁�
- personData:[], //鐢ㄦ潵瀛樻斁鎺ュ彛浼犺繃鏉ョ殑浜哄憳鍒楄〃鏁版嵁
- dialogFormVisible:false,
+ personData: [], // 鐢ㄦ潵瀛樻斁鎺ュ彛浼犺繃鏉ョ殑浜哄憳鍒楄〃鏁版嵁
+ dialogFormVisible: false,
form: {
- account: "",
+ account: '',
age: '',
- email: "",
- name: "",
- phone: "",
+ email: '',
+ name: '',
+ phone: '',
role_id: ''
- },
- formLabelWidth: '120px',
- rules: {
- account:[
- {
- required: true, message: '璇疯緭鍏ヨ处鍙�', trigger: 'blur'
- }
- ],
- name:[{
- required: true, message: '璇疯緭鍏ュ悕瀛�', trigger: 'blur'
- }],
- phone: [
- // { required: true, message: '璇疯緭鍏�11浣嶇數璇濆彿鐮�', trigger: 'blur' },
- { pattern: /^1[34578]\d{9}$/, message: '闈炴硶鎵嬫満鍙风爜', trigger: 'blur' }
- ],
- email: [
- // { required: true, message: '璇疯緭鍏ラ偖绠卞湴鍧�', trigger: 'blur' },
- { type: 'email', message: '闈炴硶閭鍦板潃', trigger: ['blur', 'change'] }
- ],
- role_id:[
- {required: true, message: '璇疯緭鍏ユ潈闄�(0鎴�1)', trigger: 'blur'}
-
- ]
},
+ formLabelWidth: '120px',
+ rules: {
+ account: [
+ {
+ required: true, message: '璇疯緭鍏ヨ处鍙�', trigger: 'blur'
+ }
+ ],
+ name: [{
+ required: true, message: '璇疯緭鍏ュ悕瀛�', trigger: 'blur'
+ }],
+ phone: [
+ // { required: true, message: '璇疯緭鍏�11浣嶇數璇濆彿鐮�', trigger: 'blur' },
+ { pattern: /^1[34578]\d{9}$/, message: '闈炴硶鎵嬫満鍙风爜', trigger: 'blur' }
+ ],
+ email: [
+ // { required: true, message: '璇疯緭鍏ラ偖绠卞湴鍧�', trigger: 'blur' },
+ { type: 'email', message: '闈炴硶閭鍦板潃', trigger: ['blur', 'change'] }
+ ],
+ role_id: [
+ { required: true, message: '璇疯緭鍏ユ潈闄�(0鎴�1)', trigger: 'blur' }
+
+ ]
+ }
}
},
- mounted(){
- this.getData();
+ mounted() {
+ this.getData()
},
methods: {
- //姣忛〉鏉℃暟鏀瑰彉鏃惰Е鍙� 閫夋嫨涓�椤垫樉绀哄灏戣
+ // 姣忛〉鏉℃暟鏀瑰彉鏃惰Е鍙� 閫夋嫨涓�椤垫樉绀哄灏戣
handleSizeChange(val) {
console.log(`姣忛〉 ${val} 鏉)
- this.currentPage = 1;
- this.pageSize = val;
+ this.currentPage = 1
+ this.pageSize = val
},
- //褰撳墠椤垫敼鍙樻椂瑙﹀彂 璺宠浆鍏朵粬椤�
+ // 褰撳墠椤垫敼鍙樻椂瑙﹀彂 璺宠浆鍏朵粬椤�
handleCurrentChange(val) {
console.log(`褰撳墠椤�: ${val}`)
- this.currentPage = val;
+ this.currentPage = val
},
- getData(){
- axios.get("/user/list_new_personnel",{
- params:{
- pageNo:0,
- pageSize:20
+ getData() {
+ axios.get('/user/list_new_personnel', {
+ params: {
+ pageNo: 0,
+ pageSize: 20
}
- }).then(res=>{
+ }).then(res => {
// console.log(res)
- this.personData=res.data.data.row
- this.personnerlTable=this.personData
- }).catch(res=>{
- console.log("error")
+ this.personData = res.data.data.row
+ this.personnerlTable = this.personData
+ }).catch(res => {
+ console.log('error')
})
},
searchData() {
- this.filteredpersonnerlTable = this.personnerlTable.filter((item) =>{
- return item.username==this.keyword
+ this.filteredpersonnerlTable = this.personnerlTable.filter((item) => {
+ return item.username === this.keyword
}
- );
- this.personnerlTable=this.filteredpersonnerlTable
+ )
+ this.personnerlTable = this.filteredpersonnerlTable
},
- resetData(){
+ resetData() {
// console.log("111111")
- this.personnerlTable=this.personData
- this.keyword=''
+ this.personnerlTable = this.personData
+ this.keyword = ''
},
// 鎻愪氦鏂板浜哄憳琛ㄥ崟
submitForm() {
// Handle form submission here
// console.log(this.form);
// POST璇锋眰
- this.$refs.form.validate((valid)=>{
- if(valid){
- this.dialogFormVisible = false;
+ this.$refs.form.validate((valid) => {
+ if (valid) {
+ this.dialogFormVisible = false
axios.post('/user/add_new_personnel', this.form)
- .then(response => {
- console.log(response);
- // this.dialogVisible = false;
- })
- .catch(error => {
- console.error(error);
- });
- }else{
- console.log('error submit!!');
- return false;
+ .then(response => {
+ console.log(response)
+ // this.dialogVisible = false;
+ })
+ .catch(error => {
+ console.error(error)
+ })
+ } else {
+ console.log('error submit!!')
+ return false
}
- })
+ })
}
- },
+ }
}
</script>
--
Gitblit v1.9.3