Skip to content

Q
qa-platform-ui
Commit b969c5a0 authored by 黎博's avatar 黎博
Browse files
Options

修改样式

parent 292e3857
Hide whitespace changes
Inline Side-by-side
Showing with 106 additions and 81 deletions
src/views/layout/Home.vue
View file @ b969c5a0
<template> <template>
<el-container class="body"> <el-container class="body">
<el-aside width="230px"> <el-aside :width="getCollapseState?'64px':'230px'">
<Aside></Aside> <Aside></Aside>
</el-aside> </el-aside>
<el-container class="main"> <el-container class="main">
<el-header> <el-header>
<Header></Header> <Header></Header>
<AsideTitle></AsideTitle>
</el-header> </el-header>
<el-main> <el-main>
<AsideTitle></AsideTitle>
<!--页面的展示--> <!--页面的展示-->
<transition name="compAnimate" appear> <transition name="compAnimate" appear>
<keep-alive> <keep-alive>
...@@ -161,28 +161,33 @@ export default { ...@@ -161,28 +161,33 @@ export default {
.main { .main {
height: 100%; height: 100%;
} }
.el-aside { .el-aside {
background-color: #525e7d; background-color: #001528;
height: 100%; height: 100%;
} }
.el-header { .el-header {
padding: 0; padding: 0;
} }
/*组件过渡动画*/ .el-main {
.compAnimate-enter { padding: 0px 10px 10px 10px;
opacity: 0;
transform: translateY(-60px);
} }
// /*组件过渡动画*/
// .compAnimate-enter {
// opacity: 0;
// transform: translateY(-60px);
// }
.compAnimate-leave-to { // .compAnimate-leave-to {
opacity: 0; // opacity: 0;
} // }
.compAnimate-enter-active { // .compAnimate-enter-active {
transition: all 0.8s ease-in-out; // transition: all 0.8s ease-in-out;
} // }
.compAnimate-leave-active { // .compAnimate-leave-active {
transition: all 0.2s ease; // transition: all 0.2s ease;
} // }
</style> </style>
src/views/layout/leftAside/Aside.vue
View file @ b969c5a0
<template> <template>
<div style="height: 100%"> <div style="height: 100%">
<div class="head"> <div class="head">
<img src="../../../assets/image/logo.png" alt /> <img src="../../../assets/image/QA.png" alt />
<span>量测试平台</span> <span>QA测试平台</span>
</div> </div>
<!-- <div <!-- <div
class="menu-toggle" class="menu-toggle"
@click="toggle_collapse" @click="toggle_collapse"
>|||</div> --> >|||</div> -->
<!-- 左侧菜单栏 --> <!-- 左侧菜单栏 -->
<el-menu :collapse="getCollapseState" :collapse-transition="false" background-color="#525E7D" text-color="#fff" active-text-color="#ffd04b" router :default-active="activePath"> <el-menu :collapse="getCollapseState" :collapse-transition="false" background-color="#001528" text-color="#fff" active-text-color="#ffd04b" router :default-active="activePath">
<!-- 一级菜单：w --> <!-- 一级菜单：w -->
<el-submenu :index="item.id + ''" v-for="item in nav" :key="item.id"> <el-submenu :index="item.id + ''" v-for="item in nav" :key="item.id">
<template slot="title"> <template slot="title">
...@@ -85,13 +85,13 @@ export default { ...@@ -85,13 +85,13 @@ export default {
text-align: center; text-align: center;
display: flex; display: flex;
> img { > img {
height: 34px; height: 40px;
width: 70px; width: 40px;
margin: 16px 0px 0px 10px; margin: 10px 0px 0px 10px;
} }
> span { > span {
font-size: 22px; font-size: 22px;
color: #3f9eff; color: #ffffff;
margin-left: 15px; margin-left: 15px;
} }
} }
......
src/views/layout/rightMain/AsideTitle.vue
View file @ b969c5a0
<template> <template>
<div class="titleNavBox"> <div class="titleNavBox" :style="{width: (getCollapseState == false)?'calc(100% - 200px)':'calc(100% - 64px)'}">
<el-tag <el-tag
v-for="(item, index) in getAsideTitle" v-for="(item, index) in getAsideTitle"
:key="index" :key="index"
...@@ -23,8 +23,7 @@ export default { ...@@ -23,8 +23,7 @@ export default {
return { return {
navWidth: '', // 标题导航条宽度 navWidth: '', // 标题导航条宽度
pageWidth: '', // 页面宽度 pageWidth: '', // 页面宽度
isShow: false, isShow: true,
mouseR: false, // 是否渲染鼠标右键事件
clientX: '', clientX: '',
clientY: '' clientY: ''
} }
...@@ -145,12 +144,12 @@ export default { ...@@ -145,12 +144,12 @@ export default {
this.pageWidth = document.documentElement.clientWidth - 64 this.pageWidth = document.documentElement.clientWidth - 64
} }
// 标题导航宽度 // 标题导航宽度
// this.navWidth = this.$el.querySelector('.titleNav').scrollWidth this.navWidth = document.querySelector('.titleNavBox').scrollWidth
// 如果标题导航超出页面宽度 则显示方向键 否则隐藏 // 如果标题导航超出页面宽度 则显示方向键 否则隐藏
if (this.navWidth >= this.pageWidth) { if (this.navWidth >= this.pageWidth) {
this.isShow = true this.isShow = true
// this.$el.querySelector('.titleNav').style.right = '20px' // document.querySelector('.titleNavBox').style.right = '20px'
} else { } else {
this.isShow = false this.isShow = false
} }
...@@ -163,26 +162,12 @@ export default { ...@@ -163,26 +162,12 @@ export default {
if (direction === 'left') { if (direction === 'left') {
let num = 0 let num = 0
num += (this.navWidth - this.pageWidth + 40) / 3 num += (this.navWidth - this.pageWidth + 40) / 3
this.$el.querySelector('.titleNav').scrollLeft -= num this.$el.querySelector('.titleNavBox').scrollLeft -= num
} else { } else {
let num = 0 let num = 0
num += (this.navWidth - this.pageWidth + 40) / 3 num += (this.navWidth - this.pageWidth + 40) / 3
this.$el.querySelector('.titleNav').scrollLeft += num this.$el.querySelector('.titleNavBox').scrollLeft += num
} }
},
/*
* 鼠标右键事件，阻止浏览器默认的右键事件，弹出关闭标题标签的选项
* */
mouseRight(event) {
// 渲染右键功能
this.mouseR = true
// 获得当前鼠标点击右键的X, y轴坐标 传递给子组件做初始化位置
this.clientX = event.clientX
this.clientY = event.clientY
},
// 关闭右键功能
closeRightF(state) {
this.mouseR = state
} }
}, },
mounted() { mounted() {
...@@ -244,19 +229,21 @@ export default { ...@@ -244,19 +229,21 @@ export default {
.title { .title {
position: relative; position: relative;
cursor: pointer; cursor: pointer;
background-color: #d9d9d9; background-color: #ffffff;
color: #4d4d4d; color: #8c8c8c;
border: 0px; border: 0px;
padding-left: 20px; padding-left: 20px;
font-size: 14px; font-size: 14px;
box-shadow: 1px 1px 1px 1px #999999; // box-shadow: 1px 1px 1px 1px #e2e2e2;
border-right: 2px solid #f4f4f4;
// margin-left: 2px;
} }
.active:before { .active:before {
content: ' '; content: ' ';
width: 8px; width: 8px;
height: 8px; height: 8px;
background-color: #00cc00; background-color: #409eff;
/*opacity: 0.5;*/ /*opacity: 0.5;*/
border-radius: 5px; border-radius: 5px;
z-index: 1000; z-index: 1000;
...@@ -267,12 +254,12 @@ export default { ...@@ -267,12 +254,12 @@ export default {
} }
.active { .active {
background-color: #2954a3; background-color: #deebf8;
color: #ffffff; color: #409eff;
} }
.marginR { .marginR {
margin-right: 6px; margin-right: 2px;
} }
[leftIcon], [leftIcon],
...@@ -288,7 +275,7 @@ export default { ...@@ -288,7 +275,7 @@ export default {
[leftIcon] { [leftIcon] {
left: 0; left: 0;
top: 6px; top: 6px;
box-shadow: 2px 0 5px 0 #bfbfbf; // box-shadow: 2px 0 5px 0 #bfbfbf;
} }
[rightIcon] { [rightIcon] {
...@@ -298,10 +285,12 @@ export default { ...@@ -298,10 +285,12 @@ export default {
} }
.titleNavBox { .titleNavBox {
position: absolute; position: fixed;
height: 42px; white-space: nowrap;
width: 100%; // width: 100%;
z-index: 200; z-index: 200;
// box-shadow: 0 1px 3px 0 #595959; // border-bottom: 1px solid #e9eaf1;
box-shadow: 0 .5px 1px 0 #d8d6d6;
// box-shadow: 0 1px 3px rgb(0 0 0 / 8%);
} }
</style> </style>
src/views/layout/rightMain/Crumbs.vue
View file @ b969c5a0
...@@ -49,7 +49,7 @@ export default { ...@@ -49,7 +49,7 @@ export default {
transition: all 1s ease; transition: all 1s ease;
} }
.el-breadcrumb /deep/ .el-breadcrumb__inner { // .el-breadcrumb /deep/ .el-breadcrumb__inner {
color: #ffffff !important; // color: #000000 !important;
} // }
</style> </style>
src/views/layout/rightMain/Header.vue
View file @ b969c5a0
<template> <template>
<el-header> <el-header>
<!-- <div class="left">
<el-button icon="el-icon-s-fold" plain @click="toggleCollapse"></el-button>
<Crumbs :crumbs="getCrumbs"></Crumbs>
</div> -->
<div class="left"> <div class="left">
<div class="toggle" @click="toggleCollapse">
<p multiBtn>
<i :class="{'el-icon-s-fold': getCollapseState == false?true:false,
'el-icon-s-unfold': getCollapseState == true?true:false}">
</i>
</p>
</div>
<Crumbs :crumbs="getCrumbs"></Crumbs> <Crumbs :crumbs="getCrumbs"></Crumbs>
</div> </div>
<div class="right"> <div class="right">
...@@ -9,7 +20,7 @@ ...@@ -9,7 +20,7 @@
<el-option v-for="item in envList" :key="item.key" :label="item.desc" :value="item.key"> <el-option v-for="item in envList" :key="item.key" :label="item.desc" :value="item.key">
</el-option> </el-option>
</el-select> </el-select>
<el-button type="primary" @click="logout">退出</el-button> <el-button plain @click="logout">退出</el-button>
</div> </div>
</el-header> </el-header>
</template> </template>
...@@ -33,6 +44,13 @@ export default { ...@@ -33,6 +44,13 @@ export default {
}) })
}, },
methods: { methods: {
toggleCollapse() {
if (this.getCollapseState === false) {
this.$store.commit('header/setCollapse', true)
} else {
this.$store.commit('header/setCollapse', false)
}
},
getEnvList() { getEnvList() {
getNamespaceList().then((resp) => { getNamespaceList().then((resp) => {
this.envList = resp.data.data this.envList = resp.data.data
...@@ -45,26 +63,6 @@ export default { ...@@ -45,26 +63,6 @@ export default {
logout() { logout() {
window.sessionStorage.clear() window.sessionStorage.clear()
this.$router.push('/') this.$router.push('/')
},
isOpen() {
// 判断左侧栏是否展开或收缩
if (this.getCollapseState === false) {
this.$store.commit('header/setCollapse', true)
this.$notify({
title: '成功',
message: '关闭左侧导航栏',
type: 'success',
duration: 1000
})
} else {
this.$store.commit('header/setCollapse', false)
this.$notify({
title: '成功',
message: '打开左侧导航栏',
type: 'success',
duration: 1000
})
}
} }
}, },
created() { created() {
...@@ -78,13 +76,23 @@ export default { ...@@ -78,13 +76,23 @@ export default {
<style lang="less" scoped> <style lang="less" scoped>
.el-header { .el-header {
background-color: #525e7d; background-color: #fcfcfc;
color: #333; color: #333;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
border-bottom: 1px solid #e9eaf1;
// box-shadow: 0 1px 0 #f4f4f4;
}
.left {
display: flex;
.toggle {
margin-top: 8px;
}
} }
.right { .right {
display: flex; display: flex;
right: 0;
margin: 10px 20px 0 0; margin: 10px 20px 0 0;
> .el-tag { > .el-tag {
margin-top: 5px; margin-top: 5px;
...@@ -98,4 +106,27 @@ export default { ...@@ -98,4 +106,27 @@ export default {
margin-right: 20px; margin-right: 20px;
} }
} }
p[multiBtn] {
width: 38px;
max-width: 38px;
height: 38px;
max-height: 38px;
font-size: 18px;
border-radius: 38px;
margin: 2px;
cursor: pointer;
display: inline-flex;
vertical-align: middle;
}
[multiBtn] i {
line-height: 38px;
margin: 0 auto;
}
[multiBtn]:hover {
box-shadow: 0 0 6px #b3b3b3 inset;
transition: all 0.5s ease;
}
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment