Skip to content

hrs_app_h5 / bill

Go to a project
Commit e1df2b60 by lishengfu
Options

udpate

parent 0bc5f298
Inline Side-by-side
Showing with 614 additions and 15 deletions
src/router/index.js
......@@ -2,6 +2,7 @@ import Vue from 'vue'
import VueRouter from 'vue-router'
import moreRouters from './more-router.js'
import personRouters from './person-router.js'
import trusteeship from './trusteeship.js'
Vue.use(VueRouter)
......@@ -12,7 +13,8 @@ const router = new VueRouter({
base: process.env.BASE_URL,
routes:[
...personRouters,
...moreRouters
...moreRouters,
...trusteeship
],
scrollBehavior(to, from, savedPosition) {
return { x: 0, y: 0 }
......
src/router/person-router.js
......@@ -7,5 +7,14 @@ export default [
requiresAuth: true,
title: "人事服务 "
}
},
{
path: "/index/record",
name: "index",
component: () => import("@/views/Bill/record.vue"),
meta: {
requiresAuth: true,
title: "资金记录 "
}
}
]
\ No newline at end of file
src/router/trusteeship.js 0 → 100644
export default [
{
path: "/trusteeship",
name: "trusteeship",
component: () => import("@/views/Trusteeship/index.vue"),
meta: {
requiresAuth: true,
title: "人事托管 "
}
}
]
\ No newline at end of file
src/views/Bill/index.vue
<template>
<div class="container">
人事服务首页
<div>
<div class="header">
<van-nav-bar title="更多服务" left-arrow @click-left="onClickLeft" />
</div>
<div class="contener">
<div class="header">
<div class="header_date_time">123</div>
<div class="header_box">
<div class="title"></div>
<div class="header_content">
<div class="fund">
<span>账户余额</span>
<i>1,000.00</i>
</div>
<div class="paid">
<span>待付金额</span>
<i class="paid_color">200.00</i>
</div>
</div>
<div class="header_info">
<div class="left">
<img src alt />
<span>充值</span>
</div>
<div class="right">
<img src alt />
<span>资金记录</span>
</div>
</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>8000.00</i>
</p>
</div>
<div class="list_contenter">
<!--社保代理-->
<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 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>
<script>
import { NavBar, Icon } from "vant";
export default {
data() {
return {
title: "人事服务首页"
};
components: {
[NavBar.name]: NavBar,
[Icon.name]: Icon
},
mounted(){
console.log('人事服务首页');
methods: {
onClickLeft() {
console.log(1);
}
}
};
</script>
<style lang='less' scoped>
.container{
width:373px;
border:1px solid #f00
<style lang="less" scoped>
.contener {
.header {
height: 136px;
padding: 0 16px;
border-top: 1px solid rgba(15, 130, 245, 1);
background: linear-gradient(
135deg,
rgba(15, 130, 245, 1) 0%,
rgba(6, 115, 223, 1) 100%
);
.header_date_time {
height: 75px;
}
.header_box {
height: 174px;
background: rgba(255, 255, 255, 1);
box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);
border-radius: 0px 0px 4px 4px;
.title {
height: 2px;
box-shadow: 0px 1px 6px 0px rgba(6, 105, 204, 0.6);
}
.header_content {
height: 122px;
.fund {
width: 50%;
float: left;
}
.paid {
width: 50%;
float: left;
.paid_color {
color: #ff9100;
}
}
span {
height: 20px;
font-size: 14px;
color: rgba(149, 152, 158, 1);
line-height: 20px;
display: block;
margin: 20px 0 0 20px;
}
i {
height: 32px;
font-size: 28px;
font-weight: bold;
color: rgba(61, 64, 71, 1);
line-height: 32px;
margin-top: 12px;
display: block;
margin-left: 20px;
}
}
.header_info {
height: 52px;
background: rgba(245, 247, 250, 1);
border-radius: 0px 0px 8px 8px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
.left {
width: 50%;
}
.right {
width: 50%;
}
span {
height: 20px;
font-size: 14px;
font-weight: 500;
color: rgba(7, 122, 236, 1);
line-height: 20px;
letter-spacing: 1px;
}
}
}
}
.box {
padding: 0 16px;
.list {
background: rgba(255, 255, 255, 1);
box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);
border-radius: 4px;
margin-top: 16px;
padding: 16px;
&:first-child {
margin-top: 129px;
}
.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;
}
}
}
.list_contenter {
width: 343px;
background: rgba(255, 255, 255, 1);
box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);
border-radius: 4px;
margin: 16px 0 30px;
.list{
box-shadow: none;
margin: 0;
border-bottom: 1px solid #ECECEE;
border-radius: 0;
}
}
}
}
</style>
\ No newline at end of file
src/views/Bill/record.vue 0 → 100644
<template>
<div>
<div class="header">
<van-nav-bar :title="title" left-arrow @click-left="onClickLeft" />
</div>
<div class="container">
<!--公积金扣费-->
<div class="list">
<div class="title">
<div class="title_info">公积金扣费</div>
<i>-160.00</i>
</div>
<p>
<span>11-20 12:20</span>
</p>
</div>
<!--五险扣费-->
<div class="list">
<div class="title">
<div class="title_info">五险扣费</div>
<i>-160.00</i>
</div>
<p>
<span>11-20 12:20</span>
</p>
</div>
<!--账单扣费-->
<div class="list">
<div class="title">
<div class="title_info">账单扣费</div>
<i>-160.00</i>
</div>
<p>
<span>11-20 12:20</span>
</p>
</div>
<!--转入到人事代理账户-->
<div class="list">
<div class="title">
<div class="title_info">转入到人事代理账户</div>
<i>-160.00</i>
</div>
<p>
<span>11-20 12:20</span>
</p>
</div>
<!--企业会员费-->
<div class="list">
<div class="title">
<div class="title_info">企业会员费</div>
<i>-160.00</i>
</div>
<p>
<span>11-20 12:20</span>
</p>
</div>
</div>
</div>
</template>
<script>
import { NavBar, Icon } from "vant";
export default {
components: {
[NavBar.name]: NavBar,
[Icon.name]: Icon
},
data() {
return {
title: "11月资金记录"
};
},
methods: {
onClickLeft() {
console.log(1);
}
}
};
</script>
<style lang="less" scoped>
.container {
padding: 0 16px;
.list {
padding: 16px 0;
border-bottom: 1px solid #ececee;
&:last-child {
border: 0;
}
.title {
display: flex;
align-items: center;
height: 22px;
font-size: 16px;
font-weight: 500;
color: rgba(61, 64, 71, 1);
line-height: 22px;
i {
margin-left: auto;
}
}
p {
display: flex;
align-items: center;
height: 18px;
font-size: 13px;
color: rgba(149, 152, 158, 1);
line-height: 18px;
margin-top: 6px;
i {
margin-left: auto;
}
}
}
}
</style>
\ No newline at end of file
src/views/More/index.vue
......@@ -14,12 +14,12 @@
</div>
<div class="paid">
<span>待付金额</span>
<i>200.00</i>
<i class="paid_color">200.00</i>
</div>
</div>
<div class="header_info">
<div class="left">
<img src alt />
<img src="" alt />
<span>充值</span>
</div>
<div class="right">
......@@ -94,6 +94,9 @@ export default {
.paid {
width: 50%;
float: left;
.paid_color{
color: #FF9100;
}
}
span {
height: 20px;
......
src/views/Trusteeship/index.vue 0 → 100644
<template>
<div>
<div class="header">
<van-nav-bar title="人事托管" left-arrow @click-left="onClickLeft" />
</div>
<div class="contener">
<div class="header">
<div class="header_date_time">123</div>
<!--社保托管-->
<div class="header_box">
<div class="header_box_title">
<span>社保托管</span>
<i class="title_color">4000.00</i>
</div>
<div class="list_contenter">
<div class="list">
<div class="list_title">
<div class="title">北京市</div>
<van-icon name="arrow" class="arrow_right" @click="cityInfo" />
</div>
<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>
</div>
</div>
</div>
<!--公积金托管-->
<div class="header_box">
<div class="header_box_title">
<span>公积金托管</span>
<i class="title_color">4000.00</i>
</div>
<div class="list_contenter">
<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>
</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>
</div>
</div>
</div>
</div>
</div>
<!--弹出层-->
<van-popup v-model="show" round position="bottom" :style="{ height: '40%' }">内容</van-popup>
</div>
</template>
<script>
import { NavBar, Icon, Popup } from "vant";
export default {
components: {
[NavBar.name]: NavBar,
[Icon.name]: Icon,
[Popup.name]: Popup
},
data() {
return {
show: false
};
},
methods: {
onClickLeft() {
console.log(1);
},
cityInfo() {
this.show = true;
}
}
};
</script>
<style lang="less" scoped>
.contener {
.header {
height: 136px;
padding: 0 16px;
border-top: 1px solid rgba(15, 130, 245, 1);
background: linear-gradient(
135deg,
rgba(15, 130, 245, 1) 0%,
rgba(6, 115, 223, 1) 100%
);
.header_date_time {
height: 75px;
}
.header_box {
height: 206px;
background: rgba(255, 255, 255, 1);
box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);
border-radius: 4px;
margin-top: 16px;
&:first-child {
margin-top: 0;
}
.header_box_title {
height: 52px;
background: rgba(245, 247, 250, 1);
border-radius: 4px 4px 0px 0px;
display: flex;
align-items: center;
padding: 0 16px;
span {
height: 20px;
font-size: 14px;
font-weight: 500;
color: rgba(61, 64, 71, 1);
line-height: 20px;
}
i {
margin-left: auto;
}
.title_color {
color: #ff9100;
}
}
.list_contenter {
.list {
border-bottom: 1px solid #ececee;
padding: 16px;
&: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