Skip to content

X
XiTianSenMall
Commit 23cbd780 authored by xulili's avatar xulili
Browse files
Options

专属客服和注册

parent 79c9e9ff
Show whitespace changes
Inline Side-by-side
Showing with 334 additions and 0 deletions
H5/src/views/customer-service.vue 0 → 100644
View file @ 23cbd780
<template>
<div class="customer-service">
<div class="nav">
<van-icon
name="arrow-left"
size="20"
class="nav-left"
@click="$router.go(-1)"
/>
<span class="nav-title">专属客服</span>
</div>
<div class="panel-box">
<div class="panel-content">
<div class="title">客服二维码</div>
<img src="@/assets/images/logo.png" class="qrCode" alt="">
<div class="save-code">
<p>保存二维码</p>
<p>打开微信扫一扫添加客服</p>
</div>
<van-button>保存</van-button>
</div>
</div>
</div>
</template>
<script>
export default {
name: "customerService",
data() {
return {
};
},
methods: {
handleUrl(urlName) {
this.$router.push({ name: urlName });
}
}
};
</script>
<style lang="scss" scoped>
$white: #ffffff;
.customer-service {
width: 100%;
height: 298px;
background-image: url("../assets/images/森林状态.png");
background-size: cover;
.nav {
position: relative;
display: flex;
align-items: center;
width: 100%;
height: 46px;
color: #fff;
.nav-left {
position: absolute;
top: 0;
bottom: 0;
width: 52px;
height: 100%;
line-height: 46px;
text-align: center;
}
.nav-title {
max-width: 60%;
margin: 0 auto;
font-weight: bold;
font-size: 16px;
}
}
.panel-box{
height: calc(100vh - 86px);
padding: 0 15px;
margin-top: 15px;
.panel-content{
width: 100%;
height: 100%;
background-color: #ffffff;
box-shadow: 0px 2px 12px 0px
rgba(6, 0, 1, 0.04);
border-radius: 4px;
padding-top: 45px;
box-sizing: border-box;
.title{
font-size: 18px;
font-weight: normal;
font-stretch: normal;
line-height: 26px;
letter-spacing: 0px;
color: #333333;
text-align: center;
}
.qrCode{
width: 128px;
height: 130px;
margin: 80px auto 30px;
display: block;
}
.save-code{
font-size: 14px;
font-weight: normal;
font-stretch: normal;
line-height: 16px;
letter-spacing: 0px;
color: #999999;
}
.van-button{
width: 160px;
height: 36px;
background-color: #88c678;
border-radius: 4px;
font-size: 18px;
color: #ffffff;
margin: 85px auto 0 ;
display: block;
}
}
}
}
</style>
H5/src/views/register.vue 0 → 100644
View file @ 23cbd780
<template>
<div class="register-container">
<van-icon name="arrow-left" @click="$router.go(-1)" />
<img src="@/assets/images/logo.png" class="logo-img" alt="">
<div class="form-content">
<van-cell-group>
<van-field
:value="value"
placeholder="请输入用户名"
:border="hasBorder"
bind:change="onChange"
>
<img class="icon-user" src="@/assets/images/icon-user.png" slot="left-icon" alt="">
</van-field>
<van-field
:value="value"
placeholder="请输入验证码"
:border="hasBorder"
bind:change="onChange"
>
<img class="icon-user" src="@/assets/images/icon-code.png" slot="left-icon" alt="">
<van-button slot="button" size="small" type="primary" class="verify-code">发送验证码</van-button>
</van-field>
<van-field
:value="value"
placeholder="请输入推荐人邀请码（非必填）"
:border="hasBorder"
bind:change="onChange"
>
<img class="icon-user" src="@/assets/images/icon-invite-code.png" slot="left-icon" alt="">
</van-field>
</van-cell-group>
<van-button class="btn-submit" @click="register">注册</van-button>
</div>
<van-overlay
:show="show"
class-name="registerEorr"
@click="onClickHide">
<div class="wrapper" @click.stop>
<div class="title">{{title}}</div>
<div class="error-tip"></div>
<div class="tip">{{tip}}</div>
<van-button>确定</van-button>
</div>
</van-overlay>
</div>
</template>
<script>
export default {
name:'register',
data(){
return {
value:'',
hasBorder:false,
show: true,
title:'注册失败',
tip:'该推荐人邀请码不存在，请重新填写'
}
},
methods: {
register(){
// this.show = true
},
onClickHide(){
this.show = false
}
}
}
</script>
<style lang="scss" scoped>
.register-container{
height: 100vh;
background-color: #ffffff;
padding: 54px 15px 0 15px;
box-sizing: border-box;
overflow: hidden;
.van-icon-arrow-left{
position: absolute;
left: 15px;
top: 9px;
// display: block;
// font-size: 25px;
// color: #333;
// margin: 13px 0 0 15px;
}
.logo-img{
width: 102px;
height: 102px;
display: block;
margin: 0 auto 50px;
}
.form-content{
padding: 0 15px;
.van-field__left-icon{
display: flex;
align-items: center;
}
.van-cell-group::after{
display: none;
}
.van-cell{
background-color: #f9f9f9;
border-radius: 25px;
margin-bottom: 20px;
}
}
.icon-user{
width: 18px;
height:18px;
}
.icon-code{
width: 16px;
height:18px;
}
.icon-code{
width: 17px;
height:17px;
}
.btn-submit{
width: 100%;
height: 44px;
background-image: linear-gradient(72deg,
#88c678 0%,
#95e87f 100%),
linear-gradient(
#999999,
#999999);
background-blend-mode: normal,
normal;
border-radius: 22px;
color: #ffffff;
font-size: 18px;
margin-top: 20px;
}
.verify-code{
background-color: transparent;
border: none;
color: #88c677;
}
.van-overlay.registerEorr{
.wrapper{
width: 315px;
height: 293px;
position: absolute;
background-color: #ffffff;
top: 50%;
left: 50%;
transform: translate(-50%, -60%);
padding: 30px 0;
text-align: center;
box-sizing: border-box;
border-radius: 4px;
.title{
font-size: 20px;
font-weight: normal;
font-stretch: normal;
line-height: 20px;
letter-spacing: 0px;
color: #333333;
}
.error-tip{
width: 72px;
height: 72px;
border: 6px solid #ff0000;
border-radius: 50%;
font-size: 48px;
font-weight:bold;
color: #ff0000;
margin: 25px auto;
position: relative;
&:before,&:after{
content: "";
display: inline-block;
width: 6px;
height: 30px;
background-color: #ff0000;
border-radius: 4px;
transform-origin:center ;
position: absolute;
left: 50%;
top: 50%;
}
&:before{
transform:translate(-50%,-50%) rotate(45deg);
}
&:after{
transform:translate(-50%,-50%) rotate(-45deg);
}
}
.tip{
font-size: 14px;
font-weight: normal;
font-stretch: normal;
line-height: 20px;
color: #999999;
}
.van-button{
width: 160px;
height: 36px;
background-color: #88c678;
border-radius: 18px;
color: #ffffff;
margin-top: 25px;
}
}
}
}
</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 to comment