Skip to content

hrs_app_h5 / bill

Go to a project
Commit 0bc09ccd by lishengfu
Options

update

parent f4501d4c
Inline Side-by-side
Showing with 337 additions and 18 deletions
src/assets/css/index.css
......@@ -9,4 +9,7 @@ i{
/*未扣费*/
.no_bill{
color: #077AEC;
}
.mt0{
margin-top: 0 !important;
}
\ No newline at end of file
src/components/Header.vue
<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 />
</div>
</template>
......
src/router/bill-router.js
......@@ -36,6 +36,15 @@ export default [
}
},
{
path: "/sociallist/socialpayment",
name: "socialpayment",
component: () => import("@/views/Bill/socialpayment.vue"),
meta: {
requiresAuth: true,
title: "社保/公积金/个税列表 "
}
},
{
path: "/sociallist",
name: "sociallist",
component: () => import("@/views/Bill/sociallist.vue"),
......
src/views/Bill/sociallist.vue
<template>
<div class="container">
<div class="header">
<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>
</template>
<script>
import {Header} from '@/components'
import { Header } from "@/components";
import { Icon } from "vant";
export default {
components:{
Header
},
data(){
return{
title:'11月社保代理'
components: {
Header,
[Icon.name]: Icon
},
data() {
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;
}
},
methods:{
.arrow_right {
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>
\ 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>
<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>
<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 {
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;
}
}
}
}
}
</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