task#15348,培训文档和文档资料布局更改
This commit is contained in:
@ -2,7 +2,7 @@
|
||||
.wrap{
|
||||
@include wh(100%,100%);
|
||||
background-color: #F4F5F7;
|
||||
overflow-y: auto;
|
||||
|
||||
}
|
||||
.navBar{
|
||||
margin-bottom: 46px;
|
||||
@ -13,10 +13,37 @@
|
||||
@include wh(17px, 17px);
|
||||
}
|
||||
}
|
||||
.tab_wrap {
|
||||
@include fontWeightSize(bold, 12px);
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
padding: 5px 0 5px 0;
|
||||
@include colorOpa(#737373,0.7);
|
||||
div {
|
||||
padding-top: 8px;
|
||||
}
|
||||
.active {
|
||||
color: #3678FF;
|
||||
position: relative;
|
||||
}
|
||||
.active:after {
|
||||
content: '';
|
||||
display: block;
|
||||
@include wh(50px,2px);
|
||||
background: linear-gradient(270deg, #33A3FF 0%, #176AFE 100%);
|
||||
border-radius: 2px;
|
||||
position: absolute;
|
||||
margin-top: 3px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
.contentWrap{
|
||||
@include sizingPadding(0,8px);
|
||||
overflow-y: auto;
|
||||
width: 100%;
|
||||
margin-top: 20px;
|
||||
height: calc(100% - 100px);
|
||||
margin-top: 10px;
|
||||
.itemWrap{
|
||||
margin-bottom: 16px;
|
||||
@include wh(100%, 300px);
|
||||
@ -35,15 +62,15 @@
|
||||
@include wh(100%,200px);
|
||||
position: relative;
|
||||
img{
|
||||
@include wh(100%,200px);
|
||||
@include wh(100%,100%);
|
||||
}
|
||||
.name{
|
||||
/* .name{
|
||||
position: absolute;
|
||||
left: 30px;
|
||||
bottom: 30px;
|
||||
@include fontWeightSize(bold,14px);
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}*/
|
||||
}
|
||||
.left{
|
||||
color: red;
|
||||
|
@ -32,21 +32,13 @@
|
||||
<van-pull-refresh v-model="isLoading" @refresh="onRefresh" style="min-height:85vh">
|
||||
<div class="itemWrap" v-for="(item,index) in pageList" :key="index" @click="goH5Detail(item)">
|
||||
<div class="info flexBetween common">
|
||||
<div class="title">{{ item.pushUser }}</div>
|
||||
<div class="time">{{ item.pushTime }}</div>
|
||||
<div class="title">{{ item.name }}</div>
|
||||
<div class="time">{{ item.updateTime }}</div>
|
||||
</div>
|
||||
<div class="imgWrap">
|
||||
<img :src="item.themePicture">
|
||||
<div class="name">{{item.name}}</div>
|
||||
</div>
|
||||
<div class="num common">{{ item.synopsis }}</div>
|
||||
<div class="doc flexBetween common">
|
||||
<div class="left">{{ item.docType?.label }}</div>
|
||||
<div class="right">
|
||||
<span style="color: red;font-size: 14px;margin-right: 8px">{{ item.listShowButton==null ? '已处理' : '未处理' }}</span>
|
||||
<span style="opacity: .9;color: #ccc">阅读 {{item.readCount}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</van-pull-refresh>
|
||||
</div>
|
||||
@ -60,11 +52,11 @@
|
||||
import {myMixins} from "@/utils/myMixins"
|
||||
import {pageList} from "@/api/mine";
|
||||
export default {
|
||||
name: "trainDocment",
|
||||
name: "docmentList",
|
||||
mixins:[myMixins],
|
||||
data(){
|
||||
return{
|
||||
tabArr: [{name: '中道制度', status: 1}, {name: '技术参数', status: 2},],
|
||||
tabArr: [{name: '车型技术参数', status: 1}, {name: '中道服务规范', status: 2},{name: '中道小课堂', status: 3}, {name: '新手入列', status: 4},],
|
||||
activeIndex: 0,
|
||||
pageList:[],
|
||||
pageNum:1,
|
||||
@ -124,29 +116,5 @@ export default {
|
||||
@import "@/styles/common.scss";
|
||||
@import "@/styles/mixin.scss";
|
||||
@import "@/styles/docment.scss";
|
||||
.tab_wrap {
|
||||
@include fontWeightSize(bolder, 15px);
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
padding: 5px 0 5px 0;
|
||||
@include colorOpa(#737373,0.7);
|
||||
div {
|
||||
padding-top: 8px;
|
||||
}
|
||||
.active {
|
||||
color: #3678FF;
|
||||
position: relative;
|
||||
}
|
||||
.active:after {
|
||||
content: '';
|
||||
display: block;
|
||||
@include wh(50px,3px);
|
||||
background: linear-gradient(270deg, #33A3FF 0%, #176AFE 100%);
|
||||
border-radius: 2px;
|
||||
position: absolute;
|
||||
margin-top: 3px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
@ -21,25 +21,26 @@
|
||||
</template>
|
||||
</van-nav-bar>
|
||||
</div>
|
||||
|
||||
<div class="tab_wrap">
|
||||
<div v-for="(item, index) in tabArr" :key="index" :class="{'active' : activeIndex == index}"
|
||||
@click="changeTab(index)">
|
||||
{{ item.name }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="contentWrap" v-show="!showEmpty">
|
||||
<van-pull-refresh v-model="isLoading" @refresh="onRefresh" style="min-height:85vh">
|
||||
<div class="itemWrap" v-for="(item,index) in pageList" :key="index" @click="goH5Detail(item)">
|
||||
<div class="info flexBetween common">
|
||||
<div class="title">{{ item.pushUser }}</div>
|
||||
<div class="time">{{ item.pushTime }}</div>
|
||||
<!-- item.mustRead===1-->
|
||||
<div class="title">{{ item.name }}<span class="read">必读</span></div>
|
||||
<div class="time">{{ item.updateTime }}</div>
|
||||
</div>
|
||||
<div class="imgWrap">
|
||||
<img :src="item.themePicture">
|
||||
<div class="name">{{item.name}}</div>
|
||||
</div>
|
||||
<div class="num common">{{ item.synopsis }}</div>
|
||||
<div class="doc flexBetween common">
|
||||
<div class="left">{{ item.docType?.label }}</div>
|
||||
<div class="right">
|
||||
<span style="color: red;font-size: 14px;margin-right: 8px">{{ item.listShowButton==null ? '已处理' : '未处理' }}</span>
|
||||
<span style="opacity: .9;color: #ccc">阅读 {{item.readCount}}</span>
|
||||
</div>
|
||||
<div style="text-align: right" v-if="item.docType?.label !== '普通材料'">
|
||||
<span style="color: red;font-size: 14px;margin-right: 8px">{{ item.listShowButton==null ? '已处理' : '未处理' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</van-pull-refresh>
|
||||
@ -60,6 +61,8 @@ export default {
|
||||
mixins:[myMixins],
|
||||
data(){
|
||||
return{
|
||||
tabArr: [{name: '车型技术参数', status: 1}, {name: '中道服务规范', status: 2},{name: '中道小课堂', status: 3}],
|
||||
activeIndex: 0,
|
||||
pageNum:1,
|
||||
pageSize:10,
|
||||
pageList:[],
|
||||
@ -80,6 +83,17 @@ export default {
|
||||
this.isLoading = false;
|
||||
}, 1000);
|
||||
},
|
||||
async changeTab(index) {
|
||||
this.activeIndex = index
|
||||
this.pageNum = 1
|
||||
this.pageList = [];
|
||||
if(this.activeIndex === 0){
|
||||
this.trainingType =1
|
||||
}else{
|
||||
this.trainingType=2
|
||||
}
|
||||
await this.getList()
|
||||
},
|
||||
async getList(){
|
||||
let res= await pageList({
|
||||
pageNum:this.pageNum,
|
||||
@ -105,4 +119,10 @@ export default {
|
||||
@import "@/styles/common.scss";
|
||||
@import "@/styles/mixin.scss";
|
||||
@import "@/styles/docment.scss";
|
||||
.read{
|
||||
padding: 2px 8px;
|
||||
border-radius: 5px;
|
||||
border: 1px solid red;
|
||||
color: red;
|
||||
}
|
||||
</style>
|
Reference in New Issue
Block a user