样式测试

This commit is contained in:
joylink_zhaoerwei 2024-03-06 18:11:05 +08:00
parent e5c38220a2
commit f220213f38

View File

@ -2,40 +2,28 @@
<div v-loading="loading" class="paper-list-main">
<div id="trainingMapTree" class="left-paper-list">
<div class="paperListName">
<el-form :inline="true" :model="formModel" class="demo-form-inline">
<el-form-item label="组别">
<el-select v-model="formModel.group" placeholder="请选择" clearable style="width: 120px;" @change="queryPaper">
<el-option
v-for="item in groupOption"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item label="赛季">
<el-select v-model="formModel.seasonId" placeholder="请选择" clearable style="width: 120px;" @change="filterPaper">
<el-option
v-for="item in seasonOptions"
:key="item.id"
:label="item.code"
:value="item.id"
/>
</el-select>
</el-form-item>
</el-form>
<div style="width: 50px;">组别</div>
<div>
<el-radio v-model="formModel.group" label="GZ" style="color: #fff;" @input="queryPaper">高职</el-radio>
<el-radio v-model="formModel.group" label="ZZ" style="color: #fff;" @input="queryPaper">中职</el-radio>
</div>
</div>
<el-menu
:default-active="defaultIndex"
class="el-menu-vertical-demo"
:default-active="1"
class="el-menu-vertical"
text-color="#fff"
active-text-color="#ffd04b"
>
<template v-for="(paper,paperIndex) in paperList">
<el-menu-item v-show="!formModel.seasonId||paper.seasonId==formModel.seasonId" :key="paperIndex" :index="paper.id+''" @click="showPaperDetail(paper)">
{{ paper.name }}
</el-menu-item>
</template>
<el-submenu v-for="(paper,paperIndex) in paperList" :key="paperIndex" :index="paper.id+''" @click="showPaperDetail(paper)">
<template slot="title">
<span> {{ paper.name }}</span>
</template>
<template v-for="(paper2,paperIndex2) in paperList">
<el-menu-item v-show="!formModel.seasonId||paper.seasonId==formModel.seasonId" :key="paperIndex2" :index="paper.id+''" @click="showPaperDetail(paper)">
{{ paper2.name }}
</el-menu-item>
</template>
</el-submenu>
</el-menu>
</div>
</div>
@ -50,16 +38,8 @@ export default {
return {
loading: true,
formModel: {
seasonId: '', // id
group:'GZ' //
},
groupOption:[{
value: 'ZZ',
label: '中职'
}, {
value: 'GZ',
label: '高职'
}],
seasonOptions:[],
paperList:[],
defaultIndex: ''
@ -125,17 +105,21 @@ export default {
background: #06284a;
}
.paperListName{
padding: 10px 0 10px 17px;
background: #01468B;
display: flex;
justify-content: left;
align-items: center;
position: sticky;
position: -webkit-sticky;
border-bottom: 1px solid #00172E;
top: 0;
z-index: 9;
height: 55px;
padding: 10px 0 10px 17px;
border-bottom: 1px solid #00172E;
background: #01468B;
color: #fff;
}
}
}
.el-menu{
.el-menu-vertical{
background-color: transparent;
.el-menu-item{
&:hover{
@ -151,10 +135,13 @@ export default {
.el-menu{
border-right-width: 0;
}
}
/deep/{
.el-form-item__label{
color: white !important;
}
.el-submenu__title{
&:hover{
background: #00172E;
}
&:focus{
background-color: #00172E;
}
}
}
</style>