Browse Source

优化

master
陈裕财 3 years ago
parent
commit
6f1e68818e
  1. 138
      src/views/xm/rpt/reportIndex.vue

138
src/views/xm/rpt/reportIndex.vue

@ -1,28 +1,30 @@
<template> <template>
<section class="padding"> <section class="padding">
<el-row gutter="5"> <el-row gutter="5">
<el-col :span="4">
<el-col :span="6">
<el-row> <el-row>
<el-select v-model="filters.category" clearable @change="onCategroySelect" style="width:100%;" :disabled="category"> <el-select v-model="filters.category" clearable @change="onCategroySelect" style="width:100%;" :disabled="category">
<el-option v-for="(item,index) in categorys" :label="item" :value="item" :key="index"></el-option> <el-option v-for="(item,index) in categorys" :label="item" :value="item" :key="index"></el-option>
</el-select> </el-select>
</el-row> </el-row>
<el-row :style="{overflowX:'hidden',height:maxTableHeight+'px'}" ref="table"> <el-row :style="{overflowX:'hidden',height:maxTableHeight+'px'}" ref="table">
<el-card v-for="(p,i) in rptListCpd" :key="i" @click.native="intoInfo(p,i)" :class="{itemActive:p.isChecked,card:true,}" shadow="always">
<div slot="header" class="clearfix">
{{ i+1 }}.<span>{{p.rptName}}</span> <span><i v-if="p.isChecked" class="el-icon-success"></i></span>
<div class="moduleset">
<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="">
<div class="desc">
<p>{{index+1}} {{item.rptName}}</p>
<span>
{{item.desc}}
</span>
</div>
<i v-if="item.isChecked" class="el-icon-success"></i>
</div> </div>
<img :src="p.img" class="image" style="width:100%;float:center;">
<div>
<div class="bottom clearfix">
<div class="desc">{{ p.desc }}</div>
<el-button type="text" class="button"></el-button>
</div> </div>
</div> </div>
</el-card>
</el-row> </el-row>
</el-col> </el-col>
<el-col :span="20">
<el-col :span="18">
<xm-iteration-burnout v-if="showRptRef=='xmIterationBurnout'" :category="filters.category" ref="xmIterationBurnout" :xm-iteration="xmIteration" :xm-product="xmProduct" :xm-project="xmProject"></xm-iteration-burnout> <xm-iteration-burnout v-if="showRptRef=='xmIterationBurnout'" :category="filters.category" ref="xmIterationBurnout" :xm-iteration="xmIteration" :xm-product="xmProduct" :xm-project="xmProject"></xm-iteration-burnout>
<xm-menu-day-trend v-if="showRptRef=='xmMenuDayTrend'" :category="filters.category" ref="xmMenuDayTrend" :xm-product="xmProduct" :xm-project="xmProject" :xm-iteration="xmIteration"></xm-menu-day-trend> <xm-menu-day-trend v-if="showRptRef=='xmMenuDayTrend'" :category="filters.category" ref="xmMenuDayTrend" :xm-product="xmProduct" :xm-project="xmProject" :xm-iteration="xmIteration"></xm-menu-day-trend>
<xm-menu-day-accumulate v-if="showRptRef=='xmMenuDayAccumulate'" :category="filters.category" ref="xmMenuDayAccumulate" :xm-product="xmProduct" :xm-project="xmProject" :xm-iteration="xmIteration"></xm-menu-day-accumulate> <xm-menu-day-accumulate v-if="showRptRef=='xmMenuDayAccumulate'" :category="filters.category" ref="xmMenuDayAccumulate" :xm-product="xmProduct" :xm-project="xmProject" :xm-iteration="xmIteration"></xm-menu-day-accumulate>
@ -305,54 +307,88 @@
<style lang="scss" scoped> <style lang="scss" scoped>
.desc {
font-size: 13px;
color: #999;
line-height:16px;
.moduleset {
.dialog-title {
font-size: 22px;
font-weight: bold;
color: #7D7D7D;
height: 68px;
p {
line-height: 68px;
margin-left: 28px;
} }
.bottom {
margin-top: 5px;
line-height: 12px;
height: 30px;
} }
.button {
padding: 0;
float: right;
.toolBox {
display: flex;
flex-direction: column;
.selectItem {
display: flex;
flex-direction: row;
height: 70px;
.item {
display: flex;
flex-direction: row;
margin-right: 120px;
cursor: pointer;
margin: 25px 50px 0 20px;
img {
width: 45px;
height: 45px;
}
span {
margin-left: 8px;
} }
.image {
object-fit:cover;
width: 100%;
display: block;
} }
.clearfix:before,
.clearfix:after {
display: table;
content: "";
} }
.clearfix:after {
clear: both
} }
.card {
margin-bottom:5px;
.nav {
overflow: auto;
padding:0px 10px 0 20px;
display:flex;
align-items:center;
justify-content: space-between;
flex-wrap:wrap;
.nav_item {
display: flex;
height: 138px;
flex-direction: row;
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; cursor: pointer;
}
i {
position:absolute;
right:20px;
font-size: 32px;
line-height: 32px;
margin-top: 10px;
width:100%;
img {
width: 94px;
height: 94px;
margin: 0 18px;
}
p {
font-size: 20px;
font-weight: bold;
color: #7D7D7D;
margin-bottom: 10px;
}
span {
font-size: 14px;
color: #7D7D7D;
line-height: 26px;
}
i {
position: absolute;
top: 10px;
right: 20px;
font-size: 36px;
color: #90B1F4; color: #90B1F4;
}
.itemActive {
border: 1px solid #90B1F4;
}
}
.itemActive {
border: 2px solid #90B1F4;
box-shadow: 0px 3px 4px 0px rgba(186, 184, 184, 0.1);
}
}
} }
</style> </style>
Loading…
Cancel
Save