|
|
|
@ -8,7 +8,7 @@ |
|
|
|
</el-select> |
|
|
|
</el-row> |
|
|
|
<el-row :style="{overflowX:'hidden',height:maxTableHeight+'px'}" ref="table"> |
|
|
|
<div class="moduleset"> |
|
|
|
<div class="moduleset-lg hidden-md-and-down"> |
|
|
|
<div class="nav"> |
|
|
|
<div class="nav_item" :class="{itemActive: item.isChecked}" v-for="(item, index) in rptListCpd" :key="index" @click="intoInfo(item, index)"> |
|
|
|
<img :src="item.img" alt=""> |
|
|
|
@ -22,6 +22,20 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="moduleset-sm hidden-lg-and-up"> |
|
|
|
<div class="nav"> |
|
|
|
<div class="nav_item" :class="{itemActive: item.isChecked}" v-for="(item, index) in rptListCpd" :key="index" @click="intoInfo(item, index)"> |
|
|
|
<div class="title"><p>{{index+1}} {{item.rptName}}</p></div> |
|
|
|
<div class="context"> |
|
|
|
<img :src="item.img" alt=""></img> |
|
|
|
<div class="desc"> |
|
|
|
<span>{{item.desc}}</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<i v-if="item.isChecked" class="el-icon-success"></i> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</el-row> |
|
|
|
</el-col> |
|
|
|
<el-col :span="18"> |
|
|
|
@ -309,52 +323,69 @@ |
|
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
.moduleset { |
|
|
|
.dialog-title { |
|
|
|
font-size: 22px; |
|
|
|
font-weight: bold; |
|
|
|
color: #7D7D7D; |
|
|
|
height: 68px; |
|
|
|
p { |
|
|
|
line-height: 68px; |
|
|
|
margin-left: 28px; |
|
|
|
} |
|
|
|
} |
|
|
|
.toolBox { |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
.selectItem { |
|
|
|
display: flex; |
|
|
|
flex-direction: row; |
|
|
|
height: 70px; |
|
|
|
.item { |
|
|
|
.moduleset-lg { |
|
|
|
|
|
|
|
.nav { |
|
|
|
overflow: hidden; |
|
|
|
display:flex; |
|
|
|
align-items:center; |
|
|
|
justify-content: space-between; |
|
|
|
flex-wrap:wrap; |
|
|
|
padding-right: 5px; |
|
|
|
.nav_item { |
|
|
|
padding:5px; |
|
|
|
display: flex; |
|
|
|
flex-direction: row; |
|
|
|
margin-right: 120px; |
|
|
|
border: 2px solid #EDF0F9; |
|
|
|
box-shadow: 0px 3px 4px 0px rgba(186, 184, 184, 0.1); |
|
|
|
border-radius: 8px; |
|
|
|
align-items: center; |
|
|
|
position: relative; |
|
|
|
cursor: pointer; |
|
|
|
margin: 25px 50px 0 20px; |
|
|
|
margin-top: 10px; |
|
|
|
width:100%; |
|
|
|
img { |
|
|
|
width: 45px; |
|
|
|
height: 45px; |
|
|
|
object-fit:cover; |
|
|
|
max-width: 25%; |
|
|
|
max-height: 80%; |
|
|
|
padding: 2px; |
|
|
|
} |
|
|
|
p { |
|
|
|
font-size: 20px; |
|
|
|
font-weight: bold; |
|
|
|
color: #7D7D7D; |
|
|
|
margin-bottom: 10px; |
|
|
|
} |
|
|
|
span { |
|
|
|
margin-left: 8px; |
|
|
|
font-size: 14px; |
|
|
|
color: #7D7D7D; |
|
|
|
line-height: 16px; |
|
|
|
} |
|
|
|
i { |
|
|
|
position: absolute; |
|
|
|
top: 5px; |
|
|
|
right: 5px; |
|
|
|
font-size: 32px; |
|
|
|
color: #90B1F4; |
|
|
|
} |
|
|
|
} |
|
|
|
.itemActive { |
|
|
|
border: 2px solid #90B1F4; |
|
|
|
box-shadow: 0px 3px 4px 0px rgba(186, 184, 184, 0.1); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.moduleset-sm { |
|
|
|
|
|
|
|
.nav { |
|
|
|
overflow: auto; |
|
|
|
overflow: hidden; |
|
|
|
display:flex; |
|
|
|
align-items:center; |
|
|
|
justify-content: space-between; |
|
|
|
flex-wrap:wrap; |
|
|
|
padding-right: 5px; |
|
|
|
.nav_item { |
|
|
|
height: 100px; |
|
|
|
padding:2px; |
|
|
|
display: flex; |
|
|
|
flex-direction: row; |
|
|
|
border: 2px solid #EDF0F9; |
|
|
|
box-shadow: 0px 3px 4px 0px rgba(186, 184, 184, 0.1); |
|
|
|
@ -362,30 +393,45 @@ |
|
|
|
align-items: center; |
|
|
|
position: relative; |
|
|
|
cursor: pointer; |
|
|
|
margin-top: 10px; |
|
|
|
margin-top: 5px; |
|
|
|
width:100%; |
|
|
|
.title{ |
|
|
|
width:100%; |
|
|
|
p { |
|
|
|
font-size: 14px; |
|
|
|
font-weight: bold; |
|
|
|
color: #7D7D7D; |
|
|
|
margin-bottom: 5px; |
|
|
|
margin-top: 5px; |
|
|
|
} |
|
|
|
} |
|
|
|
.context{ |
|
|
|
display: flex; |
|
|
|
width: 100%; |
|
|
|
padding: 2px; |
|
|
|
img { |
|
|
|
object-fit:cover; |
|
|
|
max-width: 25%; |
|
|
|
max-height: 80%; |
|
|
|
padding: 2px; |
|
|
|
} |
|
|
|
p { |
|
|
|
font-size: 18px; |
|
|
|
font-weight: bold; |
|
|
|
color: #7D7D7D; |
|
|
|
margin-bottom: 10px; |
|
|
|
} |
|
|
|
.desc{ |
|
|
|
width:75%; |
|
|
|
span { |
|
|
|
font-size: 14px; |
|
|
|
font-size: 8px; |
|
|
|
color: #7D7D7D; |
|
|
|
line-height: 16px; |
|
|
|
line-height: 10px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
i { |
|
|
|
position: absolute; |
|
|
|
top: 10px; |
|
|
|
right: 10px; |
|
|
|
font-size: 30px; |
|
|
|
top: 5px; |
|
|
|
right: 5px; |
|
|
|
font-size: 20px; |
|
|
|
color: #90B1F4; |
|
|
|
} |
|
|
|
} |
|
|
|
|
陈裕财
3 years ago