task#10094,调度app审核批次静态页
This commit is contained in:
@ -12,21 +12,22 @@
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="tab_wrap">
|
<div class="tab_wrap">
|
||||||
<div v-for="(item, index) in tabArr" :key="index" :class="{'active' : activeIndex == index}"
|
<div v-for="(item, index) in tabArr" :key="index"
|
||||||
@click="changeTab(index)">
|
@click="changeTab(index)">
|
||||||
{{ item.name }}
|
<sapn :class="{'active' : activeIndex == index , 'alpha' :true}"> {{ item.name }}</sapn>
|
||||||
|
<span class="numTip" style="opacity: 1 !important;">{{item.num}}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="listWrap">
|
<div class="listWrap">
|
||||||
<div class="listItem" @click="goPageDetail">
|
<div class="listItem" v-for="(item,index) in 3" :key="index" @click="goPageDetail">
|
||||||
<div class="item">
|
<div class="line1">
|
||||||
<div><span>审核批次</span><span>PC1234123443243232131</span></div>
|
<div><span>审核批次:</span><span>PC1234123443243232131</span></div>
|
||||||
<div><span>报销金额</span><span>300</span></div>
|
<div class="viewBtn">查看</div>
|
||||||
<div><span>案件数量</span><span>30</span></div>
|
|
||||||
<div><span>提交人员</span><span>张三</span></div>
|
|
||||||
<div><span>提交时间</span><span>2023-11-22 12:12:00</span></div>
|
|
||||||
<img src="@/assets/arrow_rht.png">
|
|
||||||
</div>
|
</div>
|
||||||
|
<div><span>报销金额:</span><span class="redColor">1238元</span><span class="greColor">/1200元</span></div>
|
||||||
|
<div><span>案件数量:</span><span>4</span><span class="greColor">/2</span></div>
|
||||||
|
<div><span>提交人员:</span><span>王二麻子</span></div>
|
||||||
|
<div><span>提交时间:</span><span>2024-01-24 12:00:00</span></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -41,7 +42,7 @@ export default {
|
|||||||
mixins: [myMixins],
|
mixins: [myMixins],
|
||||||
data(){
|
data(){
|
||||||
return{
|
return{
|
||||||
tabArr: [{name: '待审核', status: 1}, {name: '已审核', status: 2},],
|
tabArr: [{name: '待审核', status: 1,num:1}, {name: '已审核', status: 2,num:3},],
|
||||||
activeIndex: 0,
|
activeIndex: 0,
|
||||||
pageList:[],
|
pageList:[],
|
||||||
pageNum:1,
|
pageNum:1,
|
||||||
@ -87,60 +88,88 @@ export default {
|
|||||||
.navBar{
|
.navBar{
|
||||||
margin-bottom: 46px;
|
margin-bottom: 46px;
|
||||||
}
|
}
|
||||||
|
::v-deep .van-nav-bar__content{
|
||||||
|
background-color: #354683 !important;
|
||||||
|
}
|
||||||
.tab_wrap {
|
.tab_wrap {
|
||||||
@include fontWeightSize(bolder, 15px);
|
@include fontWeightSize(500, 14px);
|
||||||
display: flex;
|
@include flexColAround();
|
||||||
justify-content: space-around;
|
padding: 2px 0 10px 0;
|
||||||
padding: 5px 0 5px 0;
|
background: #354683;
|
||||||
@include colorOpa(#737373,0.7);
|
|
||||||
div {
|
div {
|
||||||
padding-top: 8px;
|
padding-top: 8px;
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
.alpha{
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
.numTip{
|
||||||
|
display: inline-block;
|
||||||
|
@include wh(15px,15px);
|
||||||
|
@include bgcolorOpa(#F95B45,0.9);
|
||||||
|
border-radius: 4px;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 15px;
|
||||||
|
margin-left: 5px;
|
||||||
|
opacity: 1; /* 保持透明度为1 */
|
||||||
}
|
}
|
||||||
.active {
|
.active {
|
||||||
color: #3678FF;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
|
opacity: 1;
|
||||||
}
|
}
|
||||||
.active:after {
|
.active:after {
|
||||||
content: '';
|
content: '';
|
||||||
display: block;
|
display: block;
|
||||||
@include wh(50px,3px);
|
@include wh(18px,2px);
|
||||||
background: linear-gradient(270deg, #33A3FF 0%, #176AFE 100%);
|
opacity: .8;
|
||||||
border-radius: 2px;
|
background: #FFFFFF;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
border-radius: 2px;
|
||||||
margin-top: 3px;
|
margin-top: 3px;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
|
opacity: 1;
|
||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.listWrap{
|
.listWrap{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
height: calc(100% - 86px);
|
||||||
|
overflow-y: auto;
|
||||||
|
background-color: #F4F5F7;
|
||||||
.listItem{
|
.listItem{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
//@include wh(100%,200px);
|
|
||||||
padding: 12px 12px;
|
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
.item{
|
padding: 14px 25px 13px 29px;
|
||||||
@include wh(100%,100%);
|
background-color: #FFFFFF;
|
||||||
box-sizing: border-box;
|
margin-bottom: 10px;
|
||||||
padding: 6px 0;
|
.line1{
|
||||||
border-bottom: 1px solid #cccccc;
|
@include flexColBet();
|
||||||
border-top: 1px solid #cccccc;
|
.viewBtn{
|
||||||
position: relative;
|
@include wh(48px,18px);
|
||||||
div{
|
text-align: center;
|
||||||
line-height: 22px;
|
line-height: 18px;
|
||||||
span:first-child{
|
background: #354D93;
|
||||||
display: inline-block;
|
border-radius: 3px;
|
||||||
margin-right: 8px;
|
color: #FFFFFF;
|
||||||
}
|
|
||||||
}
|
}
|
||||||
img{
|
}
|
||||||
width: 23px;
|
div{
|
||||||
height: 31px;
|
line-height: 27px;
|
||||||
position: absolute;
|
span:first-child{
|
||||||
top: 34%;
|
display: inline-block;
|
||||||
right: 0
|
width: 60px;
|
||||||
|
opacity: 0.5;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.greColor{
|
||||||
|
color:#38AD00 ;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.redColor{
|
||||||
|
|
||||||
|
color:#FF5D2E ;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user