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>
<el-container class="body">
<el-aside width="230px">
<el-aside :width="getCollapseState?'64px':'230px'">
<Aside></Aside>
</el-aside>
<el-container class="main">
<el-header>
<Header></Header>
<AsideTitle></AsideTitle>
</el-header>
<el-main>
<AsideTitle></AsideTitle>
<!--页面的展示-->
<transition name="compAnimate" appear>
<keep-alive>
......@@ -161,28 +161,33 @@ export default {
.main {
height: 100%;
}
.el-aside {
background-color: #525e7d;
background-color: #001528;
height: 100%;
}
.el-header {
padding: 0;
}
/*组件过渡动画*/
.compAnimate-enter {
opacity: 0;
transform: translateY(-60px);
.el-main {
padding: 0px 10px 10px 10px;
}
// /*组件过渡动画*/
// .compAnimate-enter {
// opacity: 0;
// transform: translateY(-60px);
// }
.compAnimate-leave-to {
opacity: 0;
}
// .compAnimate-leave-to {
// opacity: 0;
// }
.compAnimate-enter-active {
transition: all 0.8s ease-in-out;
}
.compAnimate-leave-active {
transition: all 0.2s ease;
}
// .compAnimate-enter-active {
// transition: all 0.8s ease-in-out;
// }
// .compAnimate-leave-active {
// transition: all 0.2s ease;
// }
</style>
src/views/layout/leftAside/Aside.vue
View file @ b969c5a0
<template>
<div style="height: 100%">
<div class="head">
<img src="../../../assets/image/logo.png" alt />
<span>量测试平台</span>
<img src="../../../assets/image/QA.png" alt />
<span>QA测试平台</span>
</div>
<!-- <div
class="menu-toggle"
@click="toggle_collapse"
>|||</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 -->
<el-submenu :index="item.id + ''" v-for="item in nav" :key="item.id">
<template slot="title">
......@@ -85,13 +85,13 @@ export default {
text-align: center;
display: flex;
> img {
height: 34px;
width: 70px;
margin: 16px 0px 0px 10px;
height: 40px;
width: 40px;
margin: 10px 0px 0px 10px;
}
> span {
font-size: 22px;
color: #3f9eff;
color: #ffffff;
margin-left: 15px;
}
}
......
src/views/layout/rightMain/AsideTitle.vue
View file @ b969c5a0
<template>
<div class="titleNavBox">
<div class="titleNavBox" :style="{width: (getCollapseState == false)?'calc(100% - 200px)':'calc(100% - 64px)'}">
<el-tag
v-for="(item, index) in getAsideTitle"
:key="index"
......@@ -23,8 +23,7 @@ export default {
return {
navWidth: '', // 标题导航条宽度
pageWidth: '', // 页面宽度
isShow: false,
mouseR: false, // 是否渲染鼠标右键事件
isShow: true,
clientX: '',
clientY: ''
}
......@@ -145,12 +144,12 @@ export default {
this.pageWidth = document.documentElement.clientWidth - 64
}
// 标题导航宽度
// this.navWidth = this.$el.querySelector('.titleNav').scrollWidth
this.navWidth = document.querySelector('.titleNavBox').scrollWidth
// 如果标题导航超出页面宽度 则显示方向键 否则隐藏
if (this.navWidth >= this.pageWidth) {
this.isShow = true
// this.$el.querySelector('.titleNav').style.right = '20px'
// document.querySelector('.titleNavBox').style.right = '20px'
} else {
this.isShow = false
}
......@@ -163,26 +162,12 @@ export default {
if (direction === 'left') {
let num = 0
num += (this.navWidth - this.pageWidth + 40) / 3
this.$el.querySelector('.titleNav').scrollLeft -= num
this.$el.querySelector('.titleNavBox').scrollLeft -= num
} else {
let num = 0
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() {
......@@ -244,19 +229,21 @@ export default {
.title {
position: relative;
cursor: pointer;
background-color: #d9d9d9;
color: #4d4d4d;
background-color: #ffffff;
color: #8c8c8c;
border: 0px;
padding-left: 20px;
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 {
content: ' ';
width: 8px;
height: 8px;
background-color: #00cc00;
background-color: #409eff;
/*opacity: 0.5;*/
border-radius: 5px;
z-index: 1000;
......@@ -267,12 +254,12 @@ export default {
}
.active {
background-color: #2954a3;
color: #ffffff;
background-color: #deebf8;
color: #409eff;
}
.marginR {
margin-right: 6px;
margin-right: 2px;
}
[leftIcon],
......@@ -288,7 +275,7 @@ export default {
[leftIcon] {
left: 0;
top: 6px;
box-shadow: 2px 0 5px 0 #bfbfbf;
// box-shadow: 2px 0 5px 0 #bfbfbf;
}
[rightIcon] {
......@@ -298,10 +285,12 @@ export default {
}
.titleNavBox {
position: absolute;
height: 42px;
width: 100%;
position: fixed;
white-space: nowrap;
// width: 100%;
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>
src/views/layout/rightMain/Crumbs.vue
View file @ b969c5a0
......@@ -49,7 +49,7 @@ export default {
transition: all 1s ease;
}
.el-breadcrumb /deep/ .el-breadcrumb__inner {
color: #ffffff !important;
}
// .el-breadcrumb /deep/ .el-breadcrumb__inner {
// color: #000000 !important;
// }
</style>
src/views/layout/rightMain/Header.vue
View file @ b969c5a0
<template>
<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="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>
</div>
<div class="right">
......@@ -9,7 +20,7 @@
<el-option v-for="item in envList" :key="item.key" :label="item.desc" :value="item.key">
</el-option>
</el-select>
<el-button type="primary" @click="logout">退出</el-button>
<el-button plain @click="logout">退出</el-button>
</div>
</el-header>
</template>
......@@ -33,6 +44,13 @@ export default {
})
},
methods: {
toggleCollapse() {
if (this.getCollapseState === false) {
this.$store.commit('header/setCollapse', true)
} else {
this.$store.commit('header/setCollapse', false)
}
},
getEnvList() {
getNamespaceList().then((resp) => {
this.envList = resp.data.data
......@@ -45,26 +63,6 @@ export default {
logout() {
window.sessionStorage.clear()
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() {
......@@ -78,13 +76,23 @@ export default {
<style lang="less" scoped>
.el-header {
background-color: #525e7d;
background-color: #fcfcfc;
color: #333;
display: flex;
justify-content: space-between;
border-bottom: 1px solid #e9eaf1;
// box-shadow: 0 1px 0 #f4f4f4;
}
.left {
display: flex;
.toggle {
margin-top: 8px;
}
}
.right {
display: flex;
right: 0;
margin: 10px 20px 0 0;
> .el-tag {
margin-top: 5px;
......@@ -98,4 +106,27 @@ export default {
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>
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