Skip to content

hrs_app_h5 / bill

Go to a project
Commit 77e70796 by 展昭
Options

Merge branch 'master' of http://gitlab.corp.qinqinxiaobao.com:9880/hrs_app_h5/bill

parents f9f5adb7 71a80fe5
Inline Side-by-side
Showing with 356 additions and 26 deletions
src/assets/css/index.css
*{ * {
padding: 0; padding : 0;
margin: 0; margin : 0;
list-style: none; list-style: none;
} }
i{
i {
font-style: normal; font-style: normal;
} }
/*未扣费*/ /*未扣费*/
.no_bill{ .no_bill {
color: #077AEC; color: #077AEC;
} }
.container{ .container {
padding-top:46px; padding-top: 46px;
}
.mt0 {
margin-top: 0 !important;
} }
\ No newline at end of file
src/components/Header.vue
<template> <template>
<div id="showheader" class="header" :class="this.top?'iosStyle header-warp':'header-warp'"> <div id="showheader" class="header">
<van-nav-bar id="nav" :title="title" left-text left-arrow /> <van-nav-bar id="nav" :title="title" left-text left-arrow />
</div> </div>
</template> </template>
......
src/router/bill-router.js
...@@ -36,6 +36,15 @@ export default [ ...@@ -36,6 +36,15 @@ export default [
} }
}, },
{ {
path: "/sociallist/socialpayment",
name: "socialpayment",
component: () => import("@/views/Bill/socialpayment.vue"),
meta: {
requiresAuth: true,
title: "社保/公积金/个税列表 "
}
},
{
path: "/sociallist", path: "/sociallist",
name: "sociallist", name: "sociallist",
component: () => import("@/views/Bill/sociallist.vue"), component: () => import("@/views/Bill/sociallist.vue"),
......
src/views/Bill/index.vue
...@@ -282,7 +282,6 @@ export default { ...@@ -282,7 +282,6 @@ export default {
} }
} }
.list_contenter { .list_contenter {
width: 343px;
background: rgba(255, 255, 255, 1); background: rgba(255, 255, 255, 1);
box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1); box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);
border-radius: 4px; border-radius: 4px;
......
src/views/Bill/sociallist.vue
<template> <template>
<div class="container"> <div class="container">
<div class="header">
<Header :title="title" /> <Header :title="title" />
{{title}} </div>
<div class="contener">
<div class="header">
<div class="content_left">
<div class="title_info">应付总额</div>
<div class="title_money">440.00</div>
</div>
<div class="content_right">
<div class="title_info">待付金额</div>
<div class="title_money">200.00</div>
</div>
</div>
<div class="box">
<!--社保代缴-->
<div class="list">
<div class="list_title">
<div class="title">社保代缴</div>
<van-icon name="arrow" class="arrow_right" />
</div>
<p>
<span>应付金额</span>
<i>600.00</i>
</p>
<p>
<span>待付金额</span>
<i>600.00</i>
</p>
</div>
<!--社保补差-->
<div class="list">
<div class="list_title">
<div class="title">社保补差</div>
<van-icon name="arrow" class="arrow_right" />
</div>
<p>
<span>应付金额</span>
<i>600.00</i>
</p>
<p>
<span>待付金额</span>
<i>600.00</i>
</p>
</div>
<!--社保退费-->
<div class="list">
<div class="list_title">
<div class="title">社保退费</div>
<van-icon name="arrow" class="arrow_right" />
</div>
<p>
<span>应付金额</span>
<i>600.00</i>
</p>
<p>
<span>待付金额</span>
<i>600.00</i>
</p>
</div>
<!--保证金扣费-->
<div class="list">
<div class="list_title">
<div class="title">保证金扣费</div>
<van-icon name="arrow" class="arrow_right" />
</div>
<p>
<span>应付金额</span>
<i>600.00</i>
</p>
<p>
<span>待付金额</span>
<i>600.00</i>
</p>
</div>
<!--保证金退费-->
<div class="list">
<div class="list_title">
<div class="title">保证金退费</div>
<van-icon name="arrow" class="arrow_right" />
</div>
<p>
<span>应付金额</span>
<i>600.00</i>
</p>
<p>
<span>待付金额</span>
<i>600.00</i>
</p>
</div>
</div>
</div>
</div> </div>
</template> </template>
<script> <script>
import {Header} from '@/components' import { Header } from "@/components";
import { Icon } from "vant";
export default { export default {
components:{ components: {
Header Header,
}, [Icon.name]: Icon
data(){ },
return{ data() {
title:'11月社保代理' return {
title: "11月社保代理"
};
},
methods: {}
};
</script>
<style lang="less" scoped>
.contener {
.header {
height: 98px;
padding: 0 16px;
background: #0978e7;
.content_left {
width: 50%;
float: left;
}
.content_right {
width: 50%;
float: left;
}
.title_info {
height: 20px;
font-size: 14px;
color: rgba(255, 255, 255, 1);
line-height: 20px;
margin-top: 20px;
}
.title_money {
height: 30px;
font-size: 24px;
font-weight: bold;
color: rgba(255, 255, 255, 1);
line-height: 30px;
margin-top: 8px;
}
}
.box {
padding: 0 16px;
.list {
background: rgba(255, 255, 255, 1);
border-bottom: 1px solid #ececee;
padding: 16px 0;
&:last-child {
border-bottom: 0;
}
.list_title {
display: flex;
align-items: center;
.title {
height: 22px;
font-size: 16px;
font-weight: 500;
color: rgba(61, 64, 71, 1);
line-height: 22px;
} }
}, .arrow_right {
methods:{ margin-left: auto;
color: #e4e4e6;
}
}
p {
display: flex;
align-items: center;
margin-top: 6px;
height: 18px;
font-size: 13px;
color: rgba(149, 152, 158, 1);
line-height: 18px;
i {
font-style: normal;
margin-left: auto;
}
}
} }
}
} }
</script>
<style>
</style> </style>
\ No newline at end of file
src/views/Bill/socialpayment.vue 0 → 100644
<template>
<div class="container">
<div class="header">
<Header :title="title" />
</div>
<div class="contener">
<div class="header">
<div class="content_left">
<div class="title_info">应付总额</div>
<div class="title_money">440.00</div>
</div>
<div class="content_right">
<div class="title_info">待付金额</div>
<div class="title_money">200.00</div>
</div>
</div>
<div class="box mt0">
<label class="label_time">截止扣费日期 11-20</label>
<div class="list">
<div class="list_title">
<div class="title">武天依</div>
<div class="list_title_money">500.00</div>
<van-icon name="arrow" class="arrow_right" />
</div>
<p>
<span>城市</span>
<i class="no_bill">未扣费</i>
</p>
</div>
</div>
<div class="box">
<label class="label_time">截止扣费日期 11-20</label>
<div class="list">
<div class="list_title">
<div class="title">武天依</div>
<div class="list_title_money">500.00</div>
<van-icon name="arrow" class="arrow_right" />
</div>
<p>
<span>城市</span>
<i class="no_bill">未扣费</i>
</p>
</div>
</div>
</div>
</div>
</template>
<script>
import { Header } from "@/components";
import { Icon } from "vant";
export default {
components: {
Header,
[Icon.name]: Icon
},
data() {
return {
title: "11月社保代理"
};
},
methods: {}
};
</script>
<style lang="less" scoped>
.contener {
background: rgba(245, 247, 250, 1);
.header {
height: 98px;
padding: 0 16px;
background: #0978e7;
.content_left {
width: 50%;
float: left;
}
.content_right {
width: 50%;
float: left;
}
.title_info {
height: 20px;
font-size: 14px;
color: rgba(255, 255, 255, 1);
line-height: 20px;
margin-top: 20px;
}
.title_money {
height: 30px;
font-size: 24px;
font-weight: bold;
color: rgba(255, 255, 255, 1);
line-height: 30px;
margin-top: 8px;
}
}
.box {
margin-top: 16px;
padding: 0 16px;
background: white;
&:first-child {
margin-top: 0;
}
.label_time {
height: 20px;
font-size: 14px;
color: rgba(61, 64, 71, 1);
line-height: 20px;
padding: 16px 0;
display: block;
border-bottom: 1px solid #ececee;
}
.list {
background: rgba(255, 255, 255, 1);
border-bottom: 1px solid #ececee;
padding: 16px 0;
&:last-child {
border-bottom: 0;
}
.list_title {
display: flex;
align-items: center;
.title {
height: 22px;
font-size: 16px;
font-weight: 500;
color: rgba(61, 64, 71, 1);
line-height: 22px;
}
.arrow_right {
color: #e4e4e6;
}
.list_title_money {
height: 22px;
font-size: 16px;
font-weight: 500;
color: rgba(61, 64, 71, 1);
line-height: 22px;
margin-left: auto;
}
}
p {
display: flex;
align-items: center;
margin-top: 6px;
height: 18px;
font-size: 13px;
color: rgba(149, 152, 158, 1);
line-height: 18px;
i {
font-style: normal;
margin-left: auto;
}
}
}
}
}
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment