apps/supplier-dispatch-h5
9
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

task#10094,调度app审核批次静态页

Browse Source
This commit is contained in:
zhouxueli
2024-01-24 15:51:29 +08:00
parent e49375c3f1
commit 857197eac6
1 changed files with 70 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
src/views/caseList/caseList.vue
View File

@ -12,21 +12,22 @@
/>
</div>
<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)">
{{ 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 class="listWrap">
<div class="listItem" @click="goPageDetail">
<div class="item">
<div><span>审核批次</span><span>PC1234123443243232131</span></div>
<div><span>报销金额</span><span>300</span></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 class="listItem" v-for="(item,index) in 3" :key="index" @click="goPageDetail">
<div class="line1">
<div><span>审核批次:</span><span>PC1234123443243232131</span></div>
<div class="viewBtn">查看</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>
@ -41,7 +42,7 @@ export default {
mixins: [myMixins],
data(){
return{
tabArr: [{name: '待审核', status: 1}, {name: '已审核', status: 2},],
tabArr: [{name: '待审核', status: 1,num:1}, {name: '已审核', status: 2,num:3},],
activeIndex: 0,
pageList:[],
pageNum:1,
@ -87,60 +88,88 @@ export default {
.navBar{
margin-bottom: 46px;
}
::v-deep .van-nav-bar__content{
background-color: #354683 !important;
}
.tab_wrap {
@include fontWeightSize(bolder, 15px);
display: flex;
justify-content: space-around;
padding: 5px 0 5px 0;
@include colorOpa(#737373,0.7);
@include fontWeightSize(500, 14px);
@include flexColAround();
padding: 2px 0 10px 0;
background: #354683;
div {
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 {
color: #3678FF;
position: relative;
opacity: 1;
}
.active:after {
content: '';
display: block;
@include wh(50px,3px);
background: linear-gradient(270deg, #33A3FF 0%, #176AFE 100%);
border-radius: 2px;
@include wh(18px,2px);
opacity: .8;
background: #FFFFFF;
position: absolute;
border-radius: 2px;
margin-top: 3px;
left: 50%;
opacity: 1;
transform: translateX(-50%);
}
}
.listWrap{
width: 100%;
height: calc(100% - 86px);
overflow-y: auto;
background-color: #F4F5F7;
.listItem{
width: 100%;
//@include wh(100%,200px);
padding: 12px 12px;
box-sizing: border-box;
.item{
@include wh(100%,100%);
box-sizing: border-box;
padding: 6px 0;
border-bottom: 1px solid #cccccc;
border-top: 1px solid #cccccc;
position: relative;
padding: 14px 25px 13px 29px;
background-color: #FFFFFF;
margin-bottom: 10px;
.line1{
@include flexColBet();
.viewBtn{
@include wh(48px,18px);
text-align: center;
line-height: 18px;
background: #354D93;
border-radius: 3px;
color: #FFFFFF;
}
}
div{
line-height: 22px;
line-height: 27px;
span:first-child{
display: inline-block;
margin-right: 8px;
}
}
img{
width: 23px;
height: 31px;
position: absolute;
top: 34%;
right: 0
width: 60px;
opacity: 0.5;
}
}
}
}
.greColor{
color:#38AD00 ;
font-weight: bold;
}
.redColor{
color:#FF5D2E ;
font-weight: bold;
}
</style>