joylink/rt-sim-training-client
6
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

仿真页面样式调整

Browse Source
This commit is contained in:
fan 2023-02-21 11:18:59 +08:00
parent 582cc02722
commit 5c43facb36
4 changed files with 121 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/layout/components/Navbar.vue
View File

@ -3,9 +3,9 @@
ref="keMenu"
class="navbar"
router
background-color="#00172E"
:default-active="activePath"
mode="horizontal"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b"
@select="handleSelect"
@ -35,7 +35,7 @@
</el-menu-item>
</template>
</template>
<el-submenu v-else :key="idx" :index="item.path" :show-timeout="100">
<el-submenu v-else :key="idx" :index="item.path" popper-append-to-body :show-timeout="100">
<template slot="title">
<span v-if="item.meta" slot="title">{{ $t(item.meta.i18n) }}</span>
</template>
@ -222,9 +222,33 @@ export default {
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
<style lang="scss" scoped>
$height: 61px;
.el-menu.el-menu--horizontal{
border-bottom: solid 1px #01468B;
}
.el-menu {
background: linear-gradient(to bottom, #01468B, #00172E);
}
.el-menu-item{
background: linear-gradient(to bottom, #01468B, #00172E);
&:hover{
background: #00172E;
}
}
/deep/ {
.el-submenu {
&:hover{
background: #00172E;
}
}
.el-submenu__title{
background: linear-gradient(to bottom, #01468B, #00172E);
&:hover{
background: #00172E;
}
}
}
.rightGroup{
display: inline-block;
padding: 0 20px;
@ -280,9 +304,11 @@ export default {
line-height: 36px;
color: #fff;
font-size: 14px;
}
.targetDiv :hover {
background-color: #434A50;
background: linear-gradient(to bottom, #01468B, #00172E);
&:hover {
background: #00172E;
}
}
.helpDiv {
height: 60px;

32
src/views/trainingPlatform/demonList.vue
View File

@ -12,7 +12,6 @@
<el-menu
:default-active="defaultIndex"
class="el-menu-vertical-demo"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b"
>
@ -86,16 +85,24 @@ export default {
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.el-menu{
background-color: transparent;
}
.el-menu-item{
&:hover{
background: #00172E;
}
}
.mapListName{
padding: 10px 0 10px 17px;
color: #fff;
background: #545c64;
background: #01468B;
display: flex;
justify-content: left;
align-items: center;
position: sticky;
position: -webkit-sticky;
border-bottom: 3px solid #8c8a89;
border-bottom: 1px solid #00172E;
top: 0;
z-index: 9;
}
@ -103,16 +110,27 @@ export default {
width: 100%;
height: 100%;
flex: 1;
overflow: scroll;
overflow-y: scroll;
padding-bottom: 10px;
background: #545c64;
background: linear-gradient(to bottom, #01468B, #00172E);
&::-webkit-scrollbar{
background: #06284a;
}
&::-webkit-scrollbar-thumb{
background: #0c0909;
}
&::-webkit-scrollbar-track{
background: #06284a;
}
}
.map-list-main{
height: 100%;
display:flex;
flex-direction:column;
}
/deep/.el-menu{
border-right-width: 0;
/deep/{
.el-menu{
border-right-width: 0;
}
}
</style>

1
src/views/trainingPlatform/index.vue
View File

@ -62,5 +62,6 @@ export default {
left:0;
top:0;
height: 100%;
background: #00172E;
}
</style>

65
src/views/trainingPlatform/simulation.vue
View File

@ -1,7 +1,7 @@
<template>
<div style="height: 100%;width: 100%;padding-bottom: 20px;">
<div style="height: 50px;text-align: center;line-height: 50px;font-size: 26px;font-weight: bolder;">{{ mapName }}</div>
<el-tabs v-model="activeName" style="height: calc(100% - 30px);margin: 0 10px;overflow-y: auto;" type="border-card">
<div class="sim-box">
<div style="height: 50px;text-align: center;line-height: 50px;font-size: 26px;font-weight: bolder;color: #fff;">{{ mapName }}</div>
<el-tabs v-model="activeName" class="tabs-box" type="border-card">
<el-tab-pane label="功能" name="first" style="height: 100%;">
<el-collapse v-model="collapse" accordion>
<template v-for="item in subsetList">
@ -343,6 +343,62 @@ export default {
};
</script>
<style lang="scss" scoped>
/deep/{
.el-collapse-item__header {
background: #00172E;
color: #fff;
}
.el-collapse-item__content{
background: #00172E;
}
.el-tabs__nav-scroll{
background: #00172E;
}
.el-tabs--border-card>.el-tabs__header .el-tabs__item{
color: #fff;
border: solid 1px #01468B;
}
.el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active{
background: #01468B;
}
.el-form-item__label {
color: #fff;
}
.el-tabs--border-card{
border: solid 1px #01468B;
}
.el-collapse-item__header{
border-bottom: solid 1px #01468B;
}
.el-collapse{
border-top: solid 1px #01468B;
border-bottom: solid 1px #01468B;
}
.el-collapse-item__wrap{
border-bottom: solid 1px #01468B;
}
}
.tabs-box{
height: calc(100% - 30px);
margin: 0 10px;
overflow-y: auto;
background: transparent;
&::-webkit-scrollbar{
background: #06284a;
}
&::-webkit-scrollbar-thumb{
background: #0c0909;
}
&::-webkit-scrollbar-track{
background: #06284a;
}
}
.sim-box{
height: 100%;
width: 100%;
padding-bottom: 20px;
background: #00172E;
}
.box-card {
width: 30%;
height: 220px;
@ -350,6 +406,7 @@ export default {
position: relative;
cursor: pointer;
user-select: none;
background: transparent;
}
.bg-img-box {
padding: 10px;
@ -371,6 +428,7 @@ export default {
position: relative;
left: 45%;
height: 60px;
background: transparent;
}
.card-box-title {
text-align: center;
@ -386,6 +444,7 @@ export default {
display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
background: transparent;
}
.box-card .el-tooltip__popper {
width: 300px;