task#10094,路桥费页面布局，纯静态
This commit is contained in:
BIN
src/assets/arrow_rht.png
Normal file
BIN
src/assets/arrow_rht.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
@ -135,6 +135,30 @@ const routes = [
|
||||
meta: {
|
||||
title:'文档资料'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/caseList',
|
||||
name: 'caseList',
|
||||
component:()=>import('@/views/caseList/caseList.vue'),
|
||||
meta: {
|
||||
title:'案件列表'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/driverCaseList',
|
||||
name: 'driverCaseList',
|
||||
component:()=>import('@/views/driverCaseList/driverCaseList.vue'),
|
||||
meta: {
|
||||
title:'司机app案件列表'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/caseDetail',
|
||||
name: 'caseDetail',
|
||||
component:()=>import('@/views/caseList/caseDetail.vue'),
|
||||
meta: {
|
||||
title:'案件详情'
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
|
||||
123
src/views/caseList/caseDetail.vue
Normal file
123
src/views/caseList/caseDetail.vue
Normal file
@ -0,0 +1,123 @@
|
||||
<template>
|
||||
<div class="wrap">
|
||||
<div class="navBar">
|
||||
<van-nav-bar
|
||||
title="案件详情"
|
||||
left-arrow
|
||||
left-arrow-color="#FFFFFF"
|
||||
:border="false"
|
||||
:fixed="true"
|
||||
:safe-area-inset-top="true"
|
||||
@click-left="h5GoBack"
|
||||
/>
|
||||
</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="listWrap">
|
||||
<div class="listItem">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {myMixins} from "@/utils/myMixins";
|
||||
|
||||
export default {
|
||||
name: "caseDetail",
|
||||
mixins: [myMixins],
|
||||
data(){
|
||||
return{
|
||||
tabArr: [{name: '待审核', status: 1}, {name: '审核通过', status: 2},{name: '审核不通过', status: 3},],
|
||||
activeIndex: 0,
|
||||
pageList:[],
|
||||
pageNum:1,
|
||||
pageSize:10,
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
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()
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@/styles/mixin.scss";
|
||||
@import "@/styles/common.scss";
|
||||
.wrap{
|
||||
@include wh(100%,100%);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.navBar{
|
||||
margin-bottom: 46px;
|
||||
}
|
||||
.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%);
|
||||
}
|
||||
}
|
||||
.listWrap{
|
||||
width: 100%;
|
||||
.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;
|
||||
div{
|
||||
line-height: 22px;
|
||||
span:first-child{
|
||||
display: inline-block;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
146
src/views/caseList/caseList.vue
Normal file
146
src/views/caseList/caseList.vue
Normal file
@ -0,0 +1,146 @@
|
||||
<template>
|
||||
<div class="wrap">
|
||||
<div class="navBar">
|
||||
<van-nav-bar
|
||||
title="报销批次"
|
||||
left-arrow
|
||||
left-arrow-color="#FFFFFF"
|
||||
:border="false"
|
||||
:fixed="true"
|
||||
:safe-area-inset-top="true"
|
||||
@click-left="h5GoBack"
|
||||
/>
|
||||
</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="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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {myMixins} from "@/utils/myMixins";
|
||||
|
||||
export default {
|
||||
name: "caseList",
|
||||
mixins: [myMixins],
|
||||
data(){
|
||||
return{
|
||||
tabArr: [{name: '待审核', status: 1}, {name: '已审核', status: 2},],
|
||||
activeIndex: 0,
|
||||
pageList:[],
|
||||
pageNum:1,
|
||||
pageSize:10,
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
async changeTab(index) {
|
||||
this.activeIndex = index
|
||||
console.log(' this.activeIndex', this.activeIndex)
|
||||
this.pageNum = 1
|
||||
this.pageList = [];
|
||||
if(this.activeIndex === 0){
|
||||
// this.trainingType =1
|
||||
}else{
|
||||
// this.trainingType=2
|
||||
}
|
||||
// await this.getList()
|
||||
},
|
||||
goPageDetail(){
|
||||
console.log("去查看详情")
|
||||
this.$router.push({
|
||||
name: 'caseDetail', // 目标路由的名称
|
||||
/* params: {
|
||||
id: item.id, // 参数对象的属性
|
||||
postfix:item.postfix,
|
||||
index:this.activeIndex,
|
||||
queryTime: this.time || this.queryTime
|
||||
}*/
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@/styles/mixin.scss";
|
||||
@import "@/styles/common.scss";
|
||||
.wrap{
|
||||
@include wh(100%,100%);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.navBar{
|
||||
margin-bottom: 46px;
|
||||
}
|
||||
.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%);
|
||||
}
|
||||
}
|
||||
.listWrap{
|
||||
width: 100%;
|
||||
.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;
|
||||
div{
|
||||
line-height: 22px;
|
||||
span:first-child{
|
||||
display: inline-block;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
img{
|
||||
width: 23px;
|
||||
height: 31px;
|
||||
position: absolute;
|
||||
top: 34%;
|
||||
right: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
124
src/views/driverCaseList/driverCaseList.vue
Normal file
124
src/views/driverCaseList/driverCaseList.vue
Normal file
@ -0,0 +1,124 @@
|
||||
<template>
|
||||
<div class="wrap">
|
||||
<div class="navBar">
|
||||
<van-nav-bar
|
||||
title="司机app报销"
|
||||
left-arrow
|
||||
left-arrow-color="#FFFFFF"
|
||||
:border="false"
|
||||
:fixed="true"
|
||||
:safe-area-inset-top="true"
|
||||
@click-left="h5GoBack"
|
||||
/>
|
||||
</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="listWrap">
|
||||
<div class="listItem">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {myMixins} from "@/utils/myMixins";
|
||||
|
||||
export default {
|
||||
name: "caseList",
|
||||
mixins: [myMixins],
|
||||
data(){
|
||||
return{
|
||||
tabArr: [{name: '待提交', status: 1}, {name: '已提交', status: 2},{name: '不可提交', status: 3},],
|
||||
activeIndex: 0,
|
||||
pageList:[],
|
||||
pageNum:1,
|
||||
pageSize:10,
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
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()
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@/styles/mixin.scss";
|
||||
@import "@/styles/common.scss";
|
||||
.wrap{
|
||||
@include wh(100%,100%);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.navBar{
|
||||
margin-bottom: 46px;
|
||||
}
|
||||
.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%);
|
||||
}
|
||||
}
|
||||
.listWrap{
|
||||
width: 100%;
|
||||
.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;
|
||||
div{
|
||||
line-height: 22px;
|
||||
span:first-child{
|
||||
display: inline-block;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user