195 lines
3.9 KiB
Vue
195 lines
3.9 KiB
Vue
<template>
|
||
<div class="detail">
|
||
<!-- tab栏 -->
|
||
<div class="tab-select">
|
||
<div class="item" :class="tabIndex == index ? 'active' : ''" v-for="(item, index) in tabs" :key="index" @click="tabClick(index)">{{item}}<span></span></div>
|
||
</div>
|
||
|
||
<!-- 全部 -->
|
||
<div v-if="tabIndex == 0">
|
||
<div class="search-box">
|
||
<div class="integral-types" @click="showType = true">积分类型<u-icon name="arrow-down"></u-icon></div>
|
||
<u-search placeholder="请输入关键字" v-model="keyword" :show-action="false"></u-search>
|
||
</div>
|
||
|
||
<div class="card-list">
|
||
<div class="card-item">
|
||
<div class="card-title">本人于12月6日在中医院接种第二针…</div>
|
||
<div class="card-name">
|
||
<div class="name">新冠疫苗接种</div>
|
||
<div class="time">2021-12-06</div>
|
||
</div>
|
||
<div class="card-type">
|
||
<div class="type">审核通过</div>
|
||
<div class="num">＋20</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- $dict.getDict('yesOrNo') -->
|
||
<u-select v-model="showType" :list="typeList" label-name="dictName" value-name="dictValue"
|
||
@confirm="confirmTypeSelect"/>
|
||
</div>
|
||
|
||
<!-- 待审核 -->
|
||
<div v-if="tabIndex == 1">
|
||
待审核
|
||
</div>
|
||
|
||
<!-- 已审核 -->
|
||
<div v-if="tabIndex == 2">
|
||
已审核
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'detail',
|
||
data () {
|
||
return {
|
||
tabs: ['全部', '待审核', '已审核'],
|
||
tabIndex: 0,
|
||
showType: false,
|
||
keyword: '',
|
||
typeList: [],
|
||
|
||
}
|
||
},
|
||
methods: {
|
||
|
||
tabClick(index) {
|
||
this.tabIndex = index
|
||
},
|
||
|
||
confirmTypeSelect(e) {
|
||
console.log(e);
|
||
},
|
||
},
|
||
onShow() {
|
||
document.title = '积分审核'
|
||
},
|
||
onLoad() {
|
||
// this.$dict.load('yesOrNo')
|
||
},
|
||
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.detail {
|
||
|
||
.tab-select {
|
||
width: 100%;
|
||
height: 96px;
|
||
line-height: 96px;
|
||
background: #3975C6;
|
||
display: flex;
|
||
|
||
.item{
|
||
flex: 1;
|
||
text-align: center;
|
||
font-size: 28px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
color: #CDDCF0;
|
||
}
|
||
|
||
.active{
|
||
font-family: PingFangSC-Medium, PingFang SC;
|
||
font-weight: 500;
|
||
position: relative;
|
||
color: #fff;
|
||
span{
|
||
width: 48px;
|
||
height: 4px;
|
||
background: #FFF;
|
||
position: absolute;
|
||
bottom: 14px;
|
||
left: 50%;
|
||
margin-left: -24px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.search-box {
|
||
display: flex;
|
||
width: 100%;
|
||
height: 112px;
|
||
line-height: 112px;
|
||
background-color: #FFFFFF;
|
||
padding: 0 32px;
|
||
box-sizing: border-box;
|
||
|
||
.integral-types {
|
||
width: 30%;
|
||
}
|
||
}
|
||
|
||
.card-list {
|
||
width: 100%;
|
||
padding: 0 32px;
|
||
box-sizing: border-box;
|
||
|
||
.card-item {
|
||
margin-top: 24px;
|
||
background-color: #FFFFFF;
|
||
box-shadow: 0px 0px 8px 8px rgba(0, 0, 0, 0.02);
|
||
border-radius: 16px;
|
||
padding: 30px 32px 20px 32px;
|
||
|
||
.card-title {
|
||
height: 60px;
|
||
line-height: 60px;
|
||
font-size: 36px;
|
||
color: #333333;
|
||
overflow:hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
-o-text-overflow:ellipsis;
|
||
}
|
||
|
||
.card-name {
|
||
margin-top: 30px;
|
||
display: flex;
|
||
height: 50px;
|
||
line-height: 50px;
|
||
font-size: 28px;
|
||
color: #999999;
|
||
|
||
.name {
|
||
padding: 0 30px;
|
||
background: #EEEEEE;
|
||
border-radius: 24px;
|
||
margin-right: 40px;
|
||
}
|
||
}
|
||
|
||
.card-type {
|
||
margin-top: 30px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.type {
|
||
font-size: 28px;
|
||
}
|
||
|
||
.num {
|
||
font-size: 34px;
|
||
}
|
||
|
||
.status0 {
|
||
color: #FF9B2B;
|
||
}
|
||
|
||
.status1 {
|
||
color: #4181FF;
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
|
||
}
|
||
</style> |