1hjz
/
1hjz-h5
0
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

修改样式

feature/feature-compatible
fengchengzhi 7 years ago
parent
100a8f71a7
commit
74232b9b38
4 changed files with 38 additions and 350 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 212
      src/assets/styles/style.css
  2. 6
      src/router/index.js
  3. 126
      src/view/my-money.vue
  4. 44
      src/view/service-evaluation.vue

212
src/assets/styles/style.css
View File

@ -331,137 +331,20 @@ html,body {
color:rgba(255,255,255,1);
letter-spacing: 1px;
}
.my-money .content {
padding-top: 0.9rem;
}
.my-money .rule {
width:100%;
height:1.18rem;
border-radius:0rem;
padding: 0.1rem 0.1rem;
box-sizing: border-box;
}
.my-money .rule .rule-content {
width: 100%;
height: 100%;
background:rgba(255,251,238,1);
display: flex;
align-items: center;
}
.my-money .rule .rule-content img {
width: 0.9rem;
margin-left: .3rem
}
.my-money .rule .rule-content a.text {
font-family:Adobe Heiti Std R;
color:rgba(254,136,31,1);
font-size: 0.4rem;
margin-left: 0.2rem;
margin-right: auto;
}
.my-money .rule .rule-content a.icon {
height: 0.36rem;
}
.my-money .rule .rule-content a.icon img {
width: auto;
height: 0.36rem;
display: block;
margin-right: 0.3rem;
}
.my-money .balance {
height:1.7rem;
background:rgba(255,255,255,1);
display: flex;
align-items: center;
justify-content: space-between;
font-size: 0.3rem;
padding: 0 0.3rem;
}
.my-money .balance .put-money {
width:1.68rem;
height:0.68rem;
background:rgba(72,201,147,1);
border-radius:0rem;
font-size:0.34rem;
font-family:PingFang-SC-Medium;
color:rgba(255,255,255,1);
text-align: center;
line-height: 0.68rem;
}
.my-money .balance >div {
font-size:0.36rem;
font-family:PingFang-SC-Regular;
color:rgba(102,102,102,1);
display: flex;
align-items: center;
}
.my-money .balance >div span {
font-size:0.7rem;
font-family:PingFang-SC-Heavy;
color:rgba(51,51,51,1);
}
.my-money .payments .title-span {
font-size:0.28rem;
color:rgba(102,102,102,1);
display: block;
line-height:0.38rem;
margin-top: 0.2rem;
margin-left: 0.2rem;
}
.my-money .payments >ul >li {
width: 100%;
height: 1rem;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1px;
background: #fff;
padding: 0 0.3rem;
box-sizing: border-box;
}
.my-money .payments >ul >li .liLeft {
display: flex;
flex-direction: column;
justify-content: center;
}
.my-money .payments >ul >li .liLeft .name {
font-size:0.3rem;
font-family:PingFang-SC-Medium;
color:rgba(51,51,51,1);
}
.my-money .payments >ul >li .liLeft .time {
font-size:0.22rem;
font-family:PingFang-SC-Medium;
color:rgba(153,153,153,1);
}
.my-money .payments >ul >li span {
font-size:0.36rem;
font-family:PingFang-SC-Medium;
color:rgba(254,152,64,1);
}
.my-money .payments >ul >li span.put {
color:rgba(51,51,51,1);
}
/*****弹出框样式****/
/*****弹出框*****/
/*遮罩层*/
.popup-box {
width: 100%;
height: 100%;
background: rgba(0,0,0,.6);
position: absolute;
position: fixed;
display: flex;
align-items: center;
justify-content: center;
top: 0;
z-index: 1000;
overflow: hidden;
}
.popup-centent {
@ -472,93 +355,16 @@ html,body {
.popup-centent span.closeBtn {
position: absolute;
right: .15rem;
top: .1rem;
width: .3rem;
height: .3rem;
right: .1rem;
top: 5px;
width: .35rem;
height: .35rem;
display: block;
}
.popup-centent span.closeBtn img {
width: 100%;
height: 100%;
display: block;
}
.my-money .popup-authorization {
width:5.6rem;
height:3.4rem;
border-radius: 5px;
/* padding: 0.3rem 0.4rem; */
display: flex;
justify-content: center;
flex-direction: column;
box-sizing: border-box;
}
.my-money .popup-authorization p {
font-size:0.36rem;
font-family:PingFang-SC-Medium;
color:rgba(0,0,0,1);
text-align: center;
margin-top: .3rem;
}
.my-money .popup-authorization a img {
display: block;
width: 1rem;
margin: auto;
margin-top: .3rem;
}
.my-money .popup-authorization span {
font-size:0.3rem;
font-family:PingFang-SC-Medium;
color:rgba(153,153,153,1);
display: inline-block;
margin: auto;
margin-top: 0.2rem;
}
.my-money .popup-authorization2 {
width:5.6rem;
height:3.4rem;
border-radius: 5px;
/* padding: 0.3rem 0.4rem; */
/* display: flex; */
/* justify-content: center;
flex-direction: column;
box-sizing: border-box; */
}
.my-money .popup-authorization2 .cue-title {
height:0.34rem;
font-size:0.36rem;
font-family:PingFang-SC-Medium;
color:rgba(0,0,0,1);
margin-top: .4rem;
margin-bottom: .4rem;
}
.my-money .popup-authorization2 p {
text-align: center;
font-size:0.28rem;
font-family:PingFang-SC-Medium;
color:rgba(102,102,102,1);
padding: 0 0.3rem;
margin-bottom: .4rem;
}
.my-money .popup-authorization2 button {
width: 100%;
height:1rem;
background:rgba(255,255,255,1);
position: absolute;
bottom: 0;
border: none;
font-size:0.36rem;
font-family:PingFang-SC-Medium;
color:rgba(0,186,134,1);
border-radius: 5px;
border-top: 1px solid #D2D3D5;
}
/*******提现申请******/
.page-content {
width: 100%;

6
src/router/index.js
View File

@ -3,7 +3,6 @@ import Router from 'vue-router'
// 懒加载方式，当路由被访问的时候才加载对应组件
const monthCard = resolve => require(['@/view/month-card'], resolve)
const myMoney = resolve => require(['@/view/my-money'], resolve)
const putMoney = resolve => require(['@/view/put-money'], resolve)
const serviceEvaluation = resolve => require(['@/view/service-evaluation'], resolve)
const putMoneySuccess = resolve => require(['@/view/put-money-success'], resolve)
@ -22,11 +21,6 @@ let router = new Router({
name: '领取优惠券',
component: monthCard
},
{
path: '/my-money',
name: '我的钱包',
component: myMoney
},
{
path: '/put-money',
name: '提现申请',

126
src/view/my-money.vue
View File

@ -1,126 +0,0 @@
<template>
<div class="my-money">
<div class="page-top">
<a @click="goBack()"><img src="../assets/images/my-money/left.png"/></a>
<span>我的钱包</span>
</div>
<div class="content">
<!--查看规则-->
<div class="rule">
<div class="rule-content">
<img src="../assets/images/my-money/money.png" alt="">
<a href="javascript:void(0)" class="text">查看推荐奖励规则</a>
<a href="javascript:void(0)" class="icon"><img src="../assets/images/my-money/right.png"/></a>
</div>
</div>
<!--余额-->
<div class="balance">
<div>余额：<span>500.00</span></div>
<a href="javascript:void(0)" class="put-money" @click="toPutMoney ()">提现</a>
</div>
<!--收支明细-->
<div class="payments">
<span class="title-span">收支明细</span>
<ul>
<li>
<div class="liLeft">
<div class="name">推荐保洁师</div>
<div class="time">2017-09-05</div>
</div>
<span>+500</span>
</li>
<li>
<div class="liLeft">
<div class="name">提现</div>
<div class="time">2017-09-05</div>
</div>
<span class="put">-500</span>
</li>
<li>
<div class="liLeft">
<div class="name">推荐用户下单</div>
<div class="time">2017-09-05</div>
</div>
<span>+500</span>
</li>
<li>
<div class="liLeft">
<div class="name">推荐保洁师服务</div>
<div class="time">2017-09-05</div>
</div>
<span>+200</span>
</li>
</ul>
</div>
</div> <!--content end-->
<!--授权弹框-->
<div id="authorization" class="popup-box" v-show="isShowAuthorization">
<div class="popup-authorization popup-centent">
<span class="closeBtn"><img src="../assets/images/put-money/close.png" alt=""></span>
<p>提现需微信授权</p>
<a href="" ><img src="../assets/images/put-money/weixin.png" alt=""></a>
<span>点击授权</span>
</div>
</div>
<!--授权弹框2-->
<div id="authorization2" class="popup-box" v-show="isShowAuthorization2">
<div class="popup-authorization2 popup-centent">
<span class="closeBtn" @click="closePupup()" ><img src="../assets/images/put-money/close.png" alt=""></span>
<p class="cue-title">提示</p>
<p>请进入微信公众号“一号家政服务号”进行提现操作</p>
<button @click="closePupup()">确定</button>
</div>
</div>
</div>
</template>
<script>
export default{
data() {
return {
//隐藏弹框
isShowAuthorization: false,
isShowAuthorization2: false
}
},
methods:{
toPutMoney (){
//this.isWeixin()
if (!this.isShowAuthorization2 ){
this.$router.push({path:'/put-money'});
}
},
isWeixin() {
var ua = navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i)=="micromessenger") {
return true;
} else {
this.isShowAuthorization2 = true;
return false;
}
},
//点击关闭弹出框
closePupup() {
//ev.cancelBubble = true;
this.isShowAuthorization2 = false;
this.isShowAuthorization1 = false;
},
//返回上一页
goBack() {
history.go(-1)
}
},
mounted() {
//this.isWeixin ()
}
}
</script>

44
src/view/service-evaluation.vue
View File

@ -10,10 +10,10 @@
<div class="line"></div>
<div class="cleaners-news">
<p>保洁师：
<span>林同学</span>
<span>{{name}}</span>
</p>
<p>服务日期：
<span>2018-10-01 08:00-12:00</span>
<span>{{time}}</span>
</p>
</div>
<div class="line"></div>
@ -55,14 +55,16 @@
</div>
</div> -->
<transition name="fade">
<div class="popup-centent" id="popup-question" v-show="tipShow">
<span class="closeBtn"><img src="../assets/images/put-money/close.png" @click="closeTips"></span>
<div class="popup-body">
<p>准时到达：本次保洁师是否如约到达？</p>
<p>洁净标准：本次洁净服务质量,是否您满意？</p>
<p>专业高效：本次洁净服务速度,是否您满意？</p>
<div class="popup-box" v-show="tipShow">
<div class="popup-centent" id="popup-question">
<span class="closeBtn"><img src="../assets/images/put-money/close.png" @click="closeTips"></span>
<div class="popup-body">
<p>准时到达：本次保洁师是否如约到达？</p>
<p>洁净标准：本次洁净服务质量,是否您满意？</p>
<p>专业高效：本次洁净服务速度,是否您满意？</p>
</div>
</div>
</div>
</div>
</transition>
<transition name="alertFade">
<div class="tips" v-show="alertShow">
@ -76,9 +78,15 @@
import { setTimeout } from "timers";
import model from "../models/evaluation-model.js";
import status from "./service-evaluation-status.vue";
import { Alert,Toast } from 'vux'
export default {
data() {
return {
//保洁师姓名
name: '哇哈哈',
//服务时间
time: '2018-10-01 08:00-12:00',
tipShow: false,
timeScore: 0,
serviceScore: 0,
@ -90,7 +98,9 @@ export default {
};
},
components: {
status
status,
Alert,
Toast,
},
methods: {
//点击问号
@ -154,8 +164,10 @@ export default {
},
getParam(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]);
// var r = window.location.search.substr(1).match(reg);
var url = '?name=林同学&time=2018:07:07';
var r = url.substr(1).match(reg);
if (r != null) return unescape(r[2]);
return null;
},
//返回上一页
@ -163,9 +175,11 @@ export default {
history.go(-1)
}
},
mounted(){
let param=this.getParam("code")
// if()
mounted(){
this.name = this.getParam("name")
this.time = this.getParam("time")
// this.$vux.toast.text(this.getParam("name"),'middle')
// this.$vux.toast.text(this.getParam("time"),'middle')
}
};
</script>

Write Preview
Loading…
Cancel
Save