Skip to content

hrs_app_h5 / bill

Go to a project
Commit f9f5adb7 by 展昭
Options

修改链接

parent f4501d4c
Inline Side-by-side
Showing with 186 additions and 20 deletions
src/assets/css/index.css
......@@ -10,3 +10,7 @@ i{
.no_bill{
color: #077AEC;
}
.container{
padding-top:46px;
}
\ No newline at end of file
src/components/Header.vue
......@@ -49,10 +49,6 @@ export default {
font-size: 16px !important;
}
.van-nav-bar {
background: linear-gradient(
135deg,
rgba(37, 141, 244, 1) 0%,
rgba(6, 115, 223, 1) 100%
);
background: #0978e7;
}
</style>
src/components/HeaderW.vue 0 → 100644
<template>
<div id="showheader" class="header" :class="this.top?'iosStyle header-warp':'header-warp'">
<van-nav-bar id="nav" :title="title" left-text left-arrow />
</div>
</template>
<script>
import { NavBar, Icon } from "vant";
export default {
components: {
[NavBar.name]: NavBar,
[Icon.name]: Icon
},
props: {
title: String
},
data(){
return{
top:""
}
},
mounted() {
var u = navigator.userAgent;
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
this.top = isiOS;
}
};
</script>
<style scoped>
.header-warp {
position: fixed;
top: 0;
width: 100%;
z-index: 1100;
background-color: #ffffff;
}
.van-hairline--bottom::after {
border: 0 !important;
}
.van-nav-bar__title {
font-size: 18px;
}
.header /deep/ .van-nav-bar .van-icon {
color: #3D4047 !important;
font-size: 16px !important;
}
.van-nav-bar {
background: #fff;
font-size: 16px !important;
color: #3D4047;
}
</style>
src/components/index.js
import Header from "./Header.vue";
import HeaderW from "./HeaderW.vue";
import TabHeader from "./TabHeader.vue";
export {
Header,
HeaderW,
TabHeader
};
\ No newline at end of file
src/main.js
......@@ -6,6 +6,12 @@ import 'lib-flexible/flexible'
import './assets/css/index.css'
Vue.config.productionTip = false
Vue.prototype.globalNavLeftArrowClick = function (callback) {
document.getElementsByClassName("van-nav-bar__left")[0].onclick = function () {
callback();
};
};
new Vue({
router,
store,
......
src/views/Bill/index.vue
......@@ -23,7 +23,7 @@
<img src alt />
<span>充值</span>
</div>
<div class="right">
<div class="right" @click="toPage(2)">
<img src alt />
<span>资金记录</span>
</div>
......@@ -134,7 +134,6 @@
<i>600.00</i>
</p>
</div>
</div>
</div>
</div>
......@@ -143,20 +142,25 @@
<script>
import { Icon } from "vant";
import {TabHeader} from '@/components'
import { TabHeader } from "@/components";
export default {
components: {
[Icon.name]: Icon,
TabHeader
},
data(){
return{
title:'人事服务'
}
data() {
return {
title: "人事服务"
};
},
methods: {
onClickLeft() {
console.log(1);
},
toPage(flag) {
if (flag === 2) {
this.$router.push({ name: "billrecord" });
}
}
}
};
......@@ -283,10 +287,10 @@ export default {
box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);
border-radius: 4px;
margin: 16px 0 30px;
.list{
.list {
box-shadow: none;
margin: 0;
border-bottom: 1px solid #ECECEE;
border-bottom: 1px solid #ececee;
border-radius: 0;
}
}
......
src/views/Bill/record.vue
<template>
<div>
<div class="container">
<div class="header">
<van-nav-bar :title="title" left-arrow @click-left="onClickLeft" />
<HeaderW :title="title" />
</div>
<div class="container">
<div class="container-wrap">
<!--公积金扣费-->
<div class="list">
<div class="title">
......@@ -54,16 +54,107 @@
<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 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 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";
import { Icon } from "vant";
import {HeaderW} from "@/components"
export default {
components: {
[NavBar.name]: NavBar,
HeaderW,
[Icon.name]: Icon
},
data() {
......@@ -74,13 +165,20 @@ export default {
methods: {
onClickLeft() {
console.log(1);
},
navLeftArrowClick() {
this.$router.go(-1);
}
},
mounted() {
this.globalNavLeftArrowClick(this.navLeftArrowClick);
}
};
</script>
<style lang="less" scoped>
.container {
@import url('../../assets/css/index.css');
.container-wrap {
padding: 0 16px;
.list {
padding: 16px 0;
......
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