Skip to content

dev / pingan-life-index-pro

Go to a project
Toggle navigation
Toggle navigation pinning
17e9ce89 by simon
Options

默认提交

1 parent 247a13d3
Inline Side-by-side
Showing 22 changed files with 918 additions and 322 deletions
...@@ -14,6 +14,11 @@ module.exports = { ...@@ -14,6 +14,11 @@ module.exports = {
14 form: { 14 form: {
15 datePicker: { 15 datePicker: {
16 datePlaceholder: "please select date" 16 datePlaceholder: "please select date"
17 },
18 modalUploadCard:{
19 tit:"請上傳證件資料",
20 front:"證件正面",
21 back:"證件反面",
17 } 22 }
18 }, 23 },
19 nav: { 24 nav: {
......
...@@ -14,6 +14,11 @@ module.exports = { ...@@ -14,6 +14,11 @@ module.exports = {
14 form: { 14 form: {
15 datePicker: { 15 datePicker: {
16 datePlaceholder: "请选择日期" 16 datePlaceholder: "请选择日期"
17 },
18 modalUploadCard:{
19 tit:"請上傳證件資料",
20 front:"證件正面",
21 back:"證件反面",
17 } 22 }
18 }, 23 },
19 nav: { 24 nav: {
......
...@@ -14,6 +14,11 @@ module.exports = { ...@@ -14,6 +14,11 @@ module.exports = {
14 form: { 14 form: {
15 datePicker: { 15 datePicker: {
16 datePlaceholder: "请选择日期" 16 datePlaceholder: "请选择日期"
17 },
18 modalUploadCard: {
19 tit: "请上传证件资料",
20 front: "证件正面",
21 back: "证件反面",
17 } 22 }
18 }, 23 },
19 nav: { 24 nav: {
...@@ -49,19 +54,19 @@ module.exports = { ...@@ -49,19 +54,19 @@ module.exports = {
49 name: "产品介绍", 54 name: "产品介绍",
50 path: "", 55 path: "",
51 list: [{ 56 list: [{
52 name: "自愿医保基本计划", 57 name: "自愿医保基本计划",
53 path: "/empty" 58 path: "/empty"
54 }, 59 },
55 { 60 {
56 name: "分红终身寿险", 61 name: "分红终身寿险",
57 path: "/product" 62 path: "/product"
58 }] 63 }
64 ]
59 }, 65 },
60 { 66 {
61 name: "客户服务", 67 name: "客户服务",
62 path: "", 68 path: "",
63 list: [ 69 list: [{
64 {
65 name: "客户服务导航", 70 name: "客户服务导航",
66 path: "/custom/product" 71 path: "/custom/product"
67 }, 72 },
...@@ -103,24 +108,25 @@ module.exports = { ...@@ -103,24 +108,25 @@ module.exports = {
103 name: "关于我们", 108 name: "关于我们",
104 path: "", 109 path: "",
105 list: [{ 110 list: [{
106 name: "平安人寿香港", 111 name: "平安人寿香港",
107 path: "/profile" 112 path: "/profile"
108 }, 113 },
109 { 114 {
110 name: "公司活动", 115 name: "公司活动",
111 path: "/empty" 116 path: "/empty"
112 },{ 117 }, {
113 name: "新闻中心", 118 name: "新闻中心",
114 path: "/news/list" 119 path: "/news/list"
115 }, 120 },
116 { 121 {
117 name: "企业社会责任", 122 name: "企业社会责任",
118 path: "/empty" 123 path: "/empty"
119 }, 124 },
120 { 125 {
121 name: "奖项殊荣", 126 name: "奖项殊荣",
122 path: "/empty" 127 path: "/empty"
123 }] 128 }
129 ]
124 }, 130 },
125 { 131 {
126 name: "加入我们", 132 name: "加入我们",
...@@ -612,7 +618,7 @@ module.exports = { ...@@ -612,7 +618,7 @@ module.exports = {
612 } 618 }
613 }, 619 },
614 policyChangeInformation: { 620 policyChangeInformation: {
615 title : "客户资料变更", 621 title: "客户资料变更",
616 hkClient: "是否平安香港客戶", 622 hkClient: "是否平安香港客戶",
617 yes: "是", 623 yes: "是",
618 no: "否", 624 no: "否",
......
1 @import '@/styles/_support'; 1 @import '@/styles/_support';
2 2
3 .comp { 3 .comp {
4 position: absolute; 4 position: fixed;
5 top: 0;
6 left: 0;
5 z-index: 999; 7 z-index: 999;
6 width: 100%; 8 width: 100%;
7 height: 100%; 9 height: 100%;
...@@ -21,8 +23,6 @@ ...@@ -21,8 +23,6 @@
21 @extend .bb; 23 @extend .bb;
22 width: 46.25rem; 24 width: 46.25rem;
23 height: 28.5rem; 25 height: 28.5rem;
24 // width: 36rem;
25 // min-height: 22.5rem;
26 border-radius: 1.25rem; 26 border-radius: 1.25rem;
27 background-color: #ffffff; 27 background-color: #ffffff;
28 padding: 4.5rem 2rem 2.5rem; 28 padding: 4.5rem 2rem 2.5rem;
...@@ -58,6 +58,37 @@ ...@@ -58,6 +58,37 @@
58 } 58 }
59 } 59 }
60 60
61 .hide{ 61 .hide {
62 display: none; 62 display: none;
63 } 63 }
64
65 @media (max-width: 1200px) {
66 .comp {
67 position: fixed;
68 }
69
70 .modal {
71 // width: 90%;
72 position: absolute;
73 }
74 }
75
76
77 @media (max-width: 768px) {
78 .modal {
79 // height: 28.5rem;
80 width: 90%;
81 height: auto;
82
83 &-title {
84 margin-bottom: 1rem;
85 }
86
87 &-icon-wrap {
88 height: 10rem;
89 img{
90 height: 100%;
91 }
92 }
93 }
94 }
......
1 import api from '@/api/api'
2 import {
3 httpGet,
4 httpPost
5 } from '@/api/fetch-api.js'
6
7
8 export default {
9 props: {
10 // 是否显示组件
11 visible: {
12 type: Boolean,
13 default: true,
14 },
15 // 标题名称 需要再 assets/images/common/ 目录下添加图标
16 icon: {
17 type: String,
18 default: "succ",
19 },
20 // 标题，不建议使用
21 title: {
22 type: String,
23 default: "",
24 },
25 // 文案
26 content: {
27 type: String,
28 default: "",
29 },
30 // 确认文案
31 confirmText: {
32 type: String,
33 default: "確認",
34 },
35 // 取消文案
36 cancelText: {
37 type: String,
38 default: "取消",
39 },
40 // 是否显示确认按钮
41 showConfirm: {
42 type: Boolean,
43 default: true,
44 },
45 // 是否显示取消按钮
46 showCancel: {
47 type: Boolean,
48 default: false,
49 },
50 // 是否显示遮罩层
51 overlayShow: {
52 type: Boolean,
53 default: true,
54 },
55
56 // 确定按钮回调方法
57 confirm: {
58 type: Function,
59 default: null
60 },
61 // 取消按钮回调方法
62 cancel: {
63 type: Function,
64 default: null
65 },
66 // 点击关闭回调方法
67 close: {
68 type: Function,
69 default: null
70 },
71 // 点击蒙层回调方法
72 overlay: {
73 type: Function,
74 default: null
75 }
76 },
77 data() {
78 return {
79 key: 'value'
80 }
81 },
82 components: {},
83 methods: {
84 // 点击确认
85 onConfirmHandler() {
86 if (this.confirm) {
87 this.confirm();
88 }
89 },
90 // 点击取消
91 onCancelHandler() {
92 if (this.cancel) {
93 this.cancel();
94 }
95 },
96 // 点击关闭
97 onCloseHandler() {
98 if (this.close) {
99 this.close();
100 }
101 },
102 // 点击蒙层
103 onOverLayHandler() {
104 if (this.overlay) {
105 this.overlay();
106 }
107 },
108 initData() {}
109 },
110 mounted() {},
111 created() {}
112 }
1 @import '@/styles/_support';
2
3 .comp {
4 position: fixed;
5 top: 0;
6 left: 0;
7 z-index: 999;
8 width: 100%;
9 height: 100%;
10 @extend .fcc;
11 text-align: center;
12 }
13
14 .overlay {
15 position: absolute;
16 width: 100%;
17 height: 100%;
18 background: rgba($color: #000000, $alpha: 0.7);
19 }
20
21 .modal {
22 position: relative;
23 width: 45.5rem;
24 min-height: 18.25rem;
25 border-radius: $borderRadius;
26 background-color: #ffffff;
27
28 &-title {
29 position: relative;
30 @extend .bb;
31 @include border-top-radius($borderRadius);
32 @include ellipsis(1);
33 font-size: $fontSizeTitle;
34 font-weight: bold;
35 height: 5rem;
36 line-height: 5rem;
37 // font-weight: bold;
38 background-color: #f2f2f2;
39 text-align: left;
40 padding: 0 3rem;
41
42 .close-btn {
43 position: absolute;
44 top: 2rem;
45 right: 2rem;
46 }
47 }
48
49 &-icon-wrap {
50 @extend .fcc;
51 height: 12rem;
52 }
53
54 &-content {
55 @extend .fcc;
56 @extend .bb;
57 font-size: $fontSize;
58 font-weight: bold;
59 min-height: 13.25rem;
60 padding: $marginMedium-M 3rem;
61 }
62
63 &-btn-wrap {
64 display: flex;
65 justify-content: center;
66
67 .btn {
68 @include btc2(12rem, 3.6rem, 16px);
69 margin: 3rem 1rem 0;
70 @extend .pointer;
71 }
72 }
73 }
74
75 .hide {
76 display: none;
77 }
78
79 @media (max-width: 1200px) {
80 .comp {
81 position: fixed;
82 }
83
84 .modal {
85 position: absolute;
86 }
87 }
88
89
90 @media (max-width: 768px) {
91 .modal {
92
93 width: 90%;
94 height: auto;
95
96 &-title {}
97
98 &-icon-wrap {
99 height: 10rem;
100
101 img {
102 height: 100%;
103 }
104 }
105 }
106 }
1
2 <template>
3 <div class="comp" :class="{'hide' : !visible }">
4 <div @click="onOverLayHandler()" class="overlay" v-if="overlayShow"></div>
5 <div class="modal">
6 <div class="modal-title">
7 {{title}}
8 <img @click="onCloseHandler()" class="close-btn pointer" :src="require('@assets/images/common/icon-modal-simple-close.png')">
9 </div>
10 <div class="modal-content">{{content}}</div>
11 </div>
12 </div>
13 </template>
14
15 <script src="./modal-simple-comp.js"></script>
16 <style lang="scss" scoped>
17 @import "./modal-simple-comp.scss";
18 </style>
1 import api from '@/api/api'
2 import {
3 httpGet,
4 httpPost
5 } from '@/api/fetch-api.js'
6
7
8 export default {
9 props: {
10 // 是否显示组件
11 visible: {
12 type: Boolean,
13 default: true,
14 },
15 // 标题名称 需要再 assets/images/common/ 目录下添加图标
16 icon: {
17 type: String,
18 default: "succ",
19 },
20 // 标题，不建议使用
21 title: {
22 type: String,
23 default: "",
24 },
25 // 文案
26 content: {
27 type: String,
28 default: "",
29 },
30 // 确认文案
31 confirmText: {
32 type: String,
33 default: "確認",
34 },
35 // 取消文案
36 cancelText: {
37 type: String,
38 default: "取消",
39 },
40 // 是否显示确认按钮
41 showConfirm: {
42 type: Boolean,
43 default: true,
44 },
45 // 是否显示取消按钮
46 showCancel: {
47 type: Boolean,
48 default: false,
49 },
50 // 是否显示遮罩层
51 overlayShow: {
52 type: Boolean,
53 default: true,
54 },
55
56 // 确定按钮回调方法
57 confirm: {
58 type: Function,
59 default: null
60 },
61 // 取消按钮回调方法
62 cancel: {
63 type: Function,
64 default: null
65 },
66 // 点击关闭回调方法
67 close: {
68 type: Function,
69 default: null
70 },
71 // 点击蒙层回调方法
72 overlay: {
73 type: Function,
74 default: null
75 }
76 },
77 data() {
78 return {
79 key: 'value'
80 }
81 },
82 components: {},
83 methods: {
84 // 点击确认
85 onConfirmHandler() {
86 if (this.confirm) {
87 this.confirm();
88 }
89 },
90 // 点击取消
91 onCancelHandler() {
92 if (this.cancel) {
93 this.cancel();
94 }
95 },
96 // 点击关闭
97 onCloseHandler() {
98 if (this.close) {
99 this.close();
100 }
101 },
102 // 点击蒙层
103 onOverLayHandler() {
104 if (this.overlay) {
105 this.overlay();
106 }
107 },
108 initData() {}
109 },
110 mounted() {},
111 created() {}
112 }
1 @import '@/styles/_support';
2
3 .comp {
4 position: fixed;
5 top: 0;
6 left: 0;
7 z-index: 999;
8 width: 100%;
9 height: 100%;
10 @extend .fcc;
11 text-align: center;
12 }
13
14 .overlay {
15 position: absolute;
16 width: 100%;
17 height: 100%;
18 background: rgba($color: #000000, $alpha: 0.7);
19 }
20
21 .modal {
22 @extend .bb;
23 position: relative;
24 width: 45.5rem;
25 min-height: 23.25rem;
26 border-radius: $borderRadius;
27 background-color: #ffffff;
28 padding-bottom: $marginMedium-M;
29
30
31 &-title {
32 position: relative;
33 @extend .bb;
34 @include border-top-radius($borderRadius);
35 @include ellipsis(1);
36 font-size: $fontSizeTitle;
37 font-weight: bold;
38 height: 5rem;
39 line-height: 5rem;
40 // font-weight: bold;
41 background-color: #f2f2f2;
42 text-align: left;
43 padding: 0 3rem;
44
45 .close-btn {
46 position: absolute;
47 top: 2rem;
48 right: 2rem;
49 }
50 }
51
52 &-icon-wrap {
53 @extend .fcc;
54 height: 12rem;
55 }
56
57 &-content {
58 @extend .fcc;
59 @extend .bb;
60 font-size: $fontSize;
61 font-weight: bold;
62 min-height: 13.25rem;
63 padding: $marginMedium-M 3rem;
64
65 .upload {
66 display: flex;
67 flex-wrap: wrap;
68 justify-content: center;
69 align-content: center;
70
71 &-item {
72 padding: 0 $marginSmallHalf;
73 }
74 }
75 }
76
77 &-btn-wrap {
78 display: flex;
79 justify-content: center;
80
81 .btn {
82 @include btc2(12rem, 3.6rem, 16px);
83 margin: 0 1rem 0;
84 @extend .pointer;
85 }
86 }
87 }
88
89 .hide {
90 display: none;
91 }
92
93 @media (max-width: 1200px) {
94 .comp {
95 position: fixed;
96 }
97
98 .modal {
99 position: absolute;
100 }
101 }
102
103
104 @media (max-width: 768px) {
105 .modal {
106 width: 90%;
107 height: auto;
108
109 &-title {}
110
111 &-icon-wrap {
112 height: 10rem;
113
114 img {
115 height: 100%;
116 }
117 }
118
119 &-content {
120 .upload {
121 &-item {
122 width: auto;
123 }
124 }
125 }
126 }
127 }
1
2 <template>
3 <div class="comp" :class="{'hide' : !visible }">
4 <div @click="onOverLayHandler()" class="overlay" v-if="overlayShow"></div>
5 <div class="modal">
6 <div class="modal-title">
7 {{$t('form.modalUploadCard.tit')}}
8 <img @click="onCloseHandler()" class="close-btn pointer" :src="require('@assets/images/common/icon-modal-simple-close.png')">
9 </div>
10 <div class="modal-content">
11 <div class="gird-g upload">
12 <div class="pure-u-1 pure-u-md-1-2 upload-item">
13 <div class="tit"> {{$t('form.modalUploadCard.front')}}</div>
14 <img class="poster pointer" :src="require('@assets/images/common/card-front.png')" alt="">
15 </div>
16 <div class="pure-u-1 pure-u-md-1-2 upload-item">
17 <div class="tit"> {{$t('form.modalUploadCard.back')}}</div>
18 <img class="poster pointer" :src="require('@assets/images/common/card-back.png')" alt="">
19 </div>
20 </div>
21 </div>
22 <div class="modal-btn-wrap">
23 <div @click="onCancelHandler()" v-if="showCancel" class="btn">{{cancelText}}</div>
24 <div @click="onConfirmHandler()" v-if="showConfirm" class="btn">{{confirmText}}</div>
25 </div>
26 </div>
27 </div>
28 </template>
29
30 <script src="./modal-upload-card-comp.js"></script>
31 <style lang="scss" scoped>
32 @import "./modal-upload-card-comp.scss";
33 </style>
...@@ -25,20 +25,9 @@ export default { ...@@ -25,20 +25,9 @@ export default {
25 e2: "", 25 e2: "",
26 e3: "" 26 e3: ""
27 }, 27 },
28 dataForm: {
29
30 },
31 insuranceForm: {
32 f1: true,
33 f2: true,
34 f3: true,
35 f4: true,
36 f5: true,
37 }
38 } 28 }
39 }, 29 },
40 components: { 30 components: {},
41 },
42 computed: { 31 computed: {
43 locale() { 32 locale() {
44 return this.$i18n.locale || 'tc'; 33 return this.$i18n.locale || 'tc';
...@@ -155,5 +144,5 @@ export default { ...@@ -155,5 +144,5 @@ export default {
155 mounted() { 144 mounted() {
156 this.initData(); 145 this.initData();
157 }, 146 },
158 created() { } 147 created() {}
159 } 148 }
......
...@@ -4,15 +4,20 @@ import { ...@@ -4,15 +4,20 @@ import {
4 httpPost 4 httpPost
5 } from '@/api/fetch-api.js' 5 } from '@/api/fetch-api.js'
6 6
7 import modalUploadCardComp from '@/components/modal-upload-card-comp/modal-upload-card-comp.vue';
8
7 export default { 9 export default {
8 data() { 10 data() {
9 return { 11 return {
10 key: 'value', 12 key: 'value',
11 isHkCus : true, 13 isHkCus: true,
12 checked : false 14 checked: false,
15 modalUploadCardVisiable: false,
13 } 16 }
14 }, 17 },
15 components: {}, 18 components: {
19 modalUploadCardComp
20 },
16 computed: { 21 computed: {
17 locale() { 22 locale() {
18 return this.$i18n.locale || 'tc'; 23 return this.$i18n.locale || 'tc';
......
1 1
2 <template> 2 <template>
3 <div class="container border"> 3 <div>
4 <div class="table"> 4 <modal-upload-card-comp :visible="modalUploadCardVisiable" :show-confirm="true" ></modal-upload-card-comp>
5 <div class="table-header orange"> 5 <div class="container border">
6 <div class="table-header-item">{{$t('policyChangeInformation.title')}}</div> 6 <div class="table">
7 </div> 7 <div class="table-header orange">
8 <div class="gird-g form"> 8 <div class="table-header-item">{{$t('policyChangeInformation.title')}}</div>
9
10 <!-- 變更對象 checkbox -->
11 <div class="pure-u-1 form-item form-item2">
12 <div class="label">
13 {{$t('policyChangeInformation.hkClient')}}
14 </div>
15 <div class="cont">
16 <div class="boo-btn pointer" :class="{active:isHkCus}" @click="isHkCus=true">{{$t('policyChangeInformation.yes')}}</div>
17 <div class="boo-btn pointer" :class="{active:!isHkCus}" @click="isHkCus=false">{{$t('policyChangeInformation.no')}}</div>
18 </div>
19 </div> 9 </div>
10 <div class="gird-g form">
20 11
21 <!-- start --> 12 <!-- 變更對象 checkbox -->
22 <!-- 1 --> 13 <div class="pure-u-1 form-item form-item2">
23 <div class="pure-u-1 pure-u-md-1-2 form-item"> 14 <div class="label">
24 <div class="label"> 15 {{$t('policyChangeInformation.hkClient')}}
25 <div class="icon"><img src="@/assets/images/policy-change-information/icon-pci-info.png"></div> {{$t('policyChangeInformation.obj')}} 16 </div>
26 </div> 17 <div class="cont">
27 <div class="ipt-wrap"> 18 <div class="boo-btn pointer" :class="{active:isHkCus}" @click="isHkCus=true">{{$t('policyChangeInformation.yes')}}</div>
28 <input class="ipt" type="text"> 19 <div class="boo-btn pointer" :class="{active:!isHkCus}" @click="isHkCus=false">{{$t('policyChangeInformation.no')}}</div>
20 </div>
29 </div> 21 </div>
30 </div>
31 22
32 <!-- 2 --> 23 <!-- start -->
33 <div class="pure-u-1 pure-u-md-1-2 form-item"> 24 <!-- 1 -->
34 <div class="label label2"> 25 <div class="pure-u-1 pure-u-md-1-2 form-item">
35 <div class="fla"> 26 <div class="label">
36 <div class="icon"><img src="@/assets/images/policy-change-information/icon-pci-info.png"></div>{{$t('policyChangeInformation.sex')}} 27 <div class="icon"><img src="@/assets/images/policy-change-information/icon-pci-info.png"></div> {{$t('policyChangeInformation.obj')}}
37 </div> 28 </div>
38 <div class="fla"> 29 <div class="ipt-wrap">
39 <div class="icon icon2"><img src="@/assets/images/policy-change-information/icon-pci-notice.png"></div> 30 <input class="ipt" type="text">
40 <span class="t1">{{$t('policyChangeInformation.modifyTips1')}}</span>
41 <span class="t2">{{$t('policyChangeInformation.modifyTips2')}}</span>
42 </div> 31 </div>
43 </div> 32 </div>
44 <div class="ipt-wrap">
45 <div class="down-arrow"></div>
46 <select disabled class="ipt disable">
47 <option v-if="locale !='zh'">男</option>
48 <option v-else>男</option>
49 </select>
50 </div>
51 </div>
52 33
53 <!-- 3 --> 34 <!-- 2 -->
54 <div class="pure-u-1 pure-u-md-1-2 form-item"> 35 <div class="pure-u-1 pure-u-md-1-2 form-item">
55 <div class="label label2"> 36 <div class="label label2">
56 <div class="fla"> 37 <div class="fla">
57 <div class="icon"><img src="@/assets/images/policy-change-information/icon-pci-date.png"></div>{{$t('policyChangeInformation.birth')}} 38 <div class="icon"><img src="@/assets/images/policy-change-information/icon-pci-info.png"></div>{{$t('policyChangeInformation.sex')}}
39 </div>
40 <div class="fla">
41 <div class="icon icon2"><img src="@/assets/images/policy-change-information/icon-pci-notice.png"></div>
42 <span class="t1">{{$t('policyChangeInformation.modifyTips1')}}</span>
43 <span class="t2">{{$t('policyChangeInformation.modifyTips2')}}</span>
44 </div>
58 </div> 45 </div>
59 <div class="fla"> 46 <div class="ipt-wrap">
60 <div class="icon icon2"><img src="@/assets/images/policy-change-information/icon-pci-notice.png"></div> 47 <div class="down-arrow"></div>
61 <span class="t1">{{$t('policyChangeInformation.modifyTips1')}}</span> 48 <select disabled class="ipt disable">
62 <span class="t2">{{$t('policyChangeInformation.modifyTips2')}}</span> 49 <option v-if="locale !='zh'">男</option>
50 <option v-else>男</option>
51 </select>
63 </div> 52 </div>
64 </div> 53 </div>
65 <div class="ipt-wrap">
66 <input disabled placeholder="1999-1-1" class="ipt disable" type="text">
67 </div>
68 </div>
69 54
70 <!-- 4 --> 55 <!-- 3 -->
71 <div class="pure-u-1 pure-u-md-1-2 form-item"> 56 <div class="pure-u-1 pure-u-md-1-2 form-item">
72 <div class="label"> 57 <div class="label label2">
73 <div class="icon"><img src="@/assets/images/policy-change-information/icon-pci-card.png"></div>{{$t('policyChangeInformation.type')}} 58 <div class="fla">
74 </div> 59 <div class="icon"><img src="@/assets/images/policy-change-information/icon-pci-date.png"></div>{{$t('policyChangeInformation.birth')}}
75 <div class="ipt-wrap"> 60 </div>
76 <div class="down-arrow"></div> 61 <div class="fla">
77 <select class="ipt"> 62 <div class="icon icon2"><img src="@/assets/images/policy-change-information/icon-pci-notice.png"></div>
78 <template v-if="locale =='zh'"> 63 <span class="t1">{{$t('policyChangeInformation.modifyTips1')}}</span>
79 <option>身份证</option> 64 <span class="t2">{{$t('policyChangeInformation.modifyTips2')}}</span>
80 </template> 65 </div>
81 <template v-else> 66 </div>
82 <option>身份證</option> 67 <div class="ipt-wrap">
83 </template> 68 <input disabled placeholder="1999-1-1" class="ipt disable" type="text">
84 </select> 69 </div>
85 </div> 70 </div>
86 </div>
87 71
88 <!-- 5 --> 72 <!-- 4 -->
89 <div class="pure-u-1 pure-u-md-1-2 form-item"> 73 <div class="pure-u-1 pure-u-md-1-2 form-item">
90 <div class="label"> 74 <div class="label">
91 <div class="icon"><img src="@/assets/images/policy-change-information/icon-pci-card.png"></div> {{$t('policyChangeInformation.NO')}} 75 <div class="icon"><img src="@/assets/images/policy-change-information/icon-pci-card.png"></div>{{$t('policyChangeInformation.type')}}
92 </div> 76 </div>
93 <div class="ipt-wrap"> 77 <div class="ipt-wrap">
94 <div class="eye"></div> 78 <div class="down-arrow"></div>
95 <!-- --> 79 <select class="ipt">
96 <!-- <div class="eye eye-act"></div> --> 80 <template v-if="locale =='zh'">
97 <input class="ipt" type="text"> 81 <option>身份证</option>
82 </template>
83 <template v-else>
84 <option>身份證</option>
85 </template>
86 </select>
87 </div>
98 </div> 88 </div>
99 </div>
100 89
101 <!-- 6 --> 90 <!-- 5 -->
102 <div class="pure-u-1 pure-u-md-1-2 form-item"> 91 <div class="pure-u-1 pure-u-md-1-2 form-item">
103 <div class="label"> 92 <div class="label">
104 <div class="icon"><img src="@/assets/images/policy-change-information/icon-pci-card.png"></div> {{$t('policyChangeInformation.validityPeriod')}} 93 <div class="icon"><img src="@/assets/images/policy-change-information/icon-pci-card.png"></div> {{$t('policyChangeInformation.NO')}}
105 </div> 94 </div>
106 <div class="ipt-wrap"> 95 <div class="ipt-wrap">
107 <input class="ipt" type="text"> 96 <div class="eye"></div>
97 <!-- -->
98 <!-- <div class="eye eye-act"></div> -->
99 <input class="ipt" type="text">
100 </div>
108 </div> 101 </div>
109 </div>
110 102
111 <!-- 7 --> 103 <!-- 6 -->
112 <div class="pure-u-1 pure-u-md-1-2 form-item"> 104 <div class="pure-u-1 pure-u-md-1-2 form-item">
113 <div class="label"> 105 <div class="label">
114 <div class="icon"><img src="@/assets/images/policy-change-information/icon-pci-earth.png"></div> {{$t('policyChangeInformation.nationality')}} 106 <div class="icon"><img src="@/assets/images/policy-change-information/icon-pci-card.png"></div> {{$t('policyChangeInformation.validityPeriod')}}
115 </div> 107 </div>
116 <div class="ipt-wrap"> 108 <div class="ipt-wrap">
117 <input class="ipt" type="text"> 109 <input class="ipt" type="text">
110 </div>
118 </div> 111 </div>
119 </div>
120 112
121 <!-- 8 --> 113 <!-- 7 -->
122 <div class="pure-u-1 pure-u-md-1-2 form-item"> 114 <div class="pure-u-1 pure-u-md-1-2 form-item">
123 <div class="label"> 115 <div class="label">
124 <div class="icon"><img src="@/assets/images/policy-change-information/icon-pci-build.png"></div> {{$t('policyChangeInformation.employer')}} 116 <div class="icon"><img src="@/assets/images/policy-change-information/icon-pci-earth.png"></div> {{$t('policyChangeInformation.nationality')}}
125 </div> 117 </div>
126 <div class="ipt-wrap"> 118 <div class="ipt-wrap">
127 <input class="ipt" type="text"> 119 <input class="ipt" type="text">
120 </div>
128 </div> 121 </div>
129 </div>
130 122
131 <!-- 9 --> 123 <!-- 8 -->
132 <div class="pure-u-1 pure-u-md-1-2 form-item"> 124 <div class="pure-u-1 pure-u-md-1-2 form-item">
133 <div class="label"> 125 <div class="label">
134 <div class="icon"><img src="@/assets/images/policy-change-information/icon-pci-love.png"></div> {{$t('policyChangeInformation.maritalStatus')}} 126 <div class="icon"><img src="@/assets/images/policy-change-information/icon-pci-build.png"></div> {{$t('policyChangeInformation.employer')}}
127 </div>
128 <div class="ipt-wrap">
129 <input class="ipt" type="text">
130 </div>
135 </div> 131 </div>
136 <div class="ipt-wrap"> 132
137 <input class="ipt" type="text"> 133 <!-- 9 -->
134 <div class="pure-u-1 pure-u-md-1-2 form-item">
135 <div class="label">
136 <div class="icon"><img src="@/assets/images/policy-change-information/icon-pci-love.png"></div> {{$t('policyChangeInformation.maritalStatus')}}
137 </div>
138 <div class="ipt-wrap">
139 <input class="ipt" type="text">
140 </div>
138 </div> 141 </div>
139 </div>
140 142
141 <div class="pure-u-1 pure-u-md-1-2 form-item"></div> 143 <div class="pure-u-1 pure-u-md-1-2 form-item"></div>
142 144
143 </div> 145 </div>
144 146
145 <div class="submit-btn"> 147 <div class="submit-btn">
146 {{$t("policyChangeInformation.submit")}} 148 {{$t("policyChangeInformation.submit")}}
149 </div>
147 </div> 150 </div>
148 </div> 151 </div>
149 </div> 152 </div>
153
150 </template> 154 </template>
151 155
152 <script src="./policy-change-information.js"></script> 156 <script src="./policy-change-information.js"></script>
......
1 1 import {
2 import { mapGetters, mapActions, mapState } from "vuex"; 2 mapGetters,
3 mapActions,
4 mapState
5 } from "vuex";
3 6
4 import api from '@/api/api' 7 import api from '@/api/api'
5 import { 8 import {
...@@ -9,7 +12,11 @@ import { ...@@ -9,7 +12,11 @@ import {
9 12
10 13
11 import modalComp from '@/components/modal-comp/modal-comp.vue'; 14 import modalComp from '@/components/modal-comp/modal-comp.vue';
12 import { passwordEncrypt } from '@/utils/encrypt.js'; 15 import modalSimpleComp from '@/components/modal-simple-comp/modal-simple-comp.vue';
16 import modalUploadCardComp from '@/components/modal-upload-card-comp/modal-upload-card-comp.vue';
17 import {
18 passwordEncrypt
19 } from '@/utils/encrypt.js';
13 20
14 21
15 export default { 22 export default {
...@@ -49,10 +56,10 @@ export default { ...@@ -49,10 +56,10 @@ export default {
49 }, 56 },
50 errorTips: { 57 errorTips: {
51 // 账密登录页 58 // 账密登录页
52 e1: "",// 账号 59 e1: "", // 账号
53 e2: "",// 密码 60 e2: "", // 密码
54 e3: "",// 图像验证码 61 e3: "", // 图像验证码
55 e4: "",// 勾选同意 62 e4: "", // 勾选同意
56 // 短信验证码 63 // 短信验证码
57 oe1: "", // 账号 64 oe1: "", // 账号
58 oe2: "", // 短信验证码 65 oe2: "", // 短信验证码
...@@ -62,13 +69,17 @@ export default { ...@@ -62,13 +69,17 @@ export default {
62 p5: "" 69 p5: ""
63 }, 70 },
64 modalVisiable: false, 71 modalVisiable: false,
72 modalSimpleVisiable: false,
73 modalUploadCardVisiable: false,
65 targetPath: "", 74 targetPath: "",
66 modalIcon: "succ", 75 modalIcon: "succ",
67 modalContent: "" 76 modalContent: ""
68 } 77 }
69 }, 78 },
70 components: { 79 components: {
71 modalComp 80 modalComp,
81 modalSimpleComp,
82 modalUploadCardComp
72 }, 83 },
73 computed: { 84 computed: {
74 ...mapState({ 85 ...mapState({
...@@ -112,7 +123,7 @@ export default { ...@@ -112,7 +123,7 @@ export default {
112 onLoginTypeHandler(val) { 123 onLoginTypeHandler(val) {
113 this.type = val; 124 this.type = val;
114 }, 125 },
115 initData() { }, 126 initData() {},
116 handlerIsShowImageVcode() { 127 handlerIsShowImageVcode() {
117 return new Promise((resolve, reject) => { 128 return new Promise((resolve, reject) => {
118 httpPost({ 129 httpPost({
...@@ -381,7 +392,10 @@ export default { ...@@ -381,7 +392,10 @@ export default {
381 data["vcodeuuid"] = this.values.vcodeuuid; 392 data["vcodeuuid"] = this.values.vcodeuuid;
382 data["imageValue"] = this.loginForm.imageValue; 393 data["imageValue"] = this.loginForm.imageValue;
383 } 394 }
384 httpPost({ url: api.stdSendOTP, data: data }); 395 httpPost({
396 url: api.stdSendOTP,
397 data: data
398 });
385 }, 399 },
386 _startTimeClick() { 400 _startTimeClick() {
387 this.times.remain = 120; 401 this.times.remain = 120;
...@@ -429,11 +443,18 @@ export default { ...@@ -429,11 +443,18 @@ export default {
429 }, 443 },
430 modalCallback() { 444 modalCallback() {
431 this.modalVisiable = false; 445 this.modalVisiable = false;
446 this.modalSimpleVisiable = false;
447 this.modalUploadCardVisiable = false;
432 if (this.targetPath) { 448 if (this.targetPath) {
433 this.$router.push({ 449 this.$router.push({
434 "path": this.targetPath 450 "path": this.targetPath
435 }); 451 });
436 } 452 }
453 },
454 closeCallback() {
455 this.modalVisiable = false;
456 this.modalSimpleVisiable = false;
457 this.modalUploadCardVisiable = false;
437 } 458 }
438 }, 459 },
439 watch: { 460 watch: {
...@@ -471,5 +492,5 @@ export default { ...@@ -471,5 +492,5 @@ export default {
471 // console.log("PK === ", this.PK) 492 // console.log("PK === ", this.PK)
472 // console.log("E === ", this.E) 493 // console.log("E === ", this.E)
473 }, 494 },
474 created() { } 495 created() {}
475 } 496 }
......
...@@ -244,7 +244,7 @@ ...@@ -244,7 +244,7 @@
244 } 244 }
245 245
246 .login { 246 .login {
247 padding: 1rem 1rem 3.5rem; 247 padding: 2rem 1rem 3.5rem;
248 border-bottom: none; 248 border-bottom: none;
249 249
250 &-nav { 250 &-nav {
......
1 1
2 <template> 2 <template>
3 <div class="content"> 3 <div>
4 <modal-comp :visible="modalVisiable" :show-confirm="false" :icon="modalIcon" :content="modalContent" :confirm="modalCallback" :overlay="modalCallback"></modal-comp> 4 <modal-comp :visible="modalVisiable" :show-confirm="false" :icon="modalIcon" :content="modalContent" :confirm="modalCallback" :overlay="modalCallback"></modal-comp>
5 <div class="ebg"> 5 <modal-simple-comp :visible="modalSimpleVisiable" :show-confirm="false" :icon="modalIcon" :content="modalContent" :confirm="modalCallback" :overlay="modalCallback" :close="closeCallback"></modal-simple-comp>
6 <img src="@/assets/images/common/login-bg.png"> 6 <modal-upload-card-comp :visible="modalUploadCardVisiable" :show-confirm="true" :content="modalContent" :confirm="modalCallback" :overlay="modalCallback" :close="closeCallback"></modal-upload-card-comp>
7 </div> 7 <div class="content">
8 <div class="top-space"></div> 8 <div class="ebg">
9 <div class="box"> 9 <img src="@/assets/images/common/login-bg.png">
10 <!-- 帐密登陆 --> 10 </div>
11 <div v-if="type == 1" class="login"> 11 <div class="top-space"></div>
12 <div class="login-tit"> 12 <div class="box">
13 <img v-if="locale == 'zh'" src="@/assets/images/login/login-tit-zh.png"> 13 <!-- 帐密登陆 -->
14 <img v-if="locale == 'tc'" src="@/assets/images/login/login-tit-tc.png"> 14 <div v-if="type == 1" class="login">
15 <img v-if="locale == 'en'" class="img-en" src="@/assets/images/login/login-tit-en.png"> 15 <div class="login-tit">
16 </div> 16 <img v-if="locale == 'zh'" src="@/assets/images/login/login-tit-zh.png">
17 <div class="login-nav"> 17 <img v-if="locale == 'tc'" src="@/assets/images/login/login-tit-tc.png">
18 <div @click="onLoginTypeHandler(1)" class="login-nav-tit text-r pointer active">{{$t('login.loginType1')}}</div> 18 <img v-if="locale == 'en'" class="img-en" src="@/assets/images/login/login-tit-en.png">
19 <div class="login-nav-v-line"></div>
20 <div @click="onLoginTypeHandler(2)" class="login-nav-tit pointer">{{$t('login.loginType2')}}</div>
21 </div>
22 <div class="gird-g form">
23 <div class="pure-u-1 form-item">
24 <div class="label">
25 <img src="@/assets/images/login/icon-login-user.png"> {{$t('login.account')}}
26 </div>
27 <div class="ipt-wrap">
28 <input v-model="loginForm.userId" :placeholder="$t('login.accountPlaceholder')" class="ipt" :class="{ err : errorTips.e1.length > 0 }" type="text">
29 </div>
30 <div class="validator" v-if="errorTips.e1.length > 0 ">
31 <img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.e1}}
32 </div>
33 </div> 19 </div>
34 <div class="pure-u-1 form-item"> 20 <div class="login-nav">
35 <div class="label"> 21 <div @click="onLoginTypeHandler(1)" class="login-nav-tit text-r pointer active">{{$t('login.loginType1')}}</div>
36 <img src="@/assets/images/login/icon-login-password.png"> {{$t('login.password')}} 22 <div class="login-nav-v-line"></div>
37 </div> 23 <div @click="onLoginTypeHandler(2)" class="login-nav-tit pointer">{{$t('login.loginType2')}}</div>
38 <div class="ipt-wrap">
39 <input v-model="loginForm.password" :placeholder="$t('login.passwordPlaceholder')" class="ipt" :class="{ err : errorTips.e2.length > 0 }" type="password">
40 </div>
41 <div class="validator" v-if="errorTips.e2.length > 0 ">
42 <img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.e2}}
43 </div>
44 </div> 24 </div>
45 <div class="pure-u-1 form-item" v-if="type == 1 && loginCheck.showImageCode"> 25 <div class="gird-g form">
46 <div class="ipt-wrap"> 26 <div class="pure-u-1 form-item">
47 <input :placeholder="$t('login.verifyPlaceholder')" class="ipt ipt-verify" :class="{ err : errorTips.e3.length > 0 }" type="text" v-model="loginForm.imageValue"> 27 <div class="label">
48 <div class="ipt verify-btn pointer vcode" @click="handlerRefreshImageValue"> 28 <img src="@/assets/images/login/icon-login-user.png"> {{$t('login.account')}}
49 <img :src="values.imageBase64"> 29 </div>
30 <div class="ipt-wrap">
31 <input v-model="loginForm.userId" :placeholder="$t('login.accountPlaceholder')" class="ipt" :class="{ err : errorTips.e1.length > 0 }" type="text">
32 </div>
33 <div class="validator" v-if="errorTips.e1.length > 0 ">
34 <img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.e1}}
50 </div> 35 </div>
51 </div> 36 </div>
52 <div class="validator" v-if="errorTips.e3.length > 0 "> 37 <div class="pure-u-1 form-item">
53 <img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.e3}} 38 <div class="label">
39 <img src="@/assets/images/login/icon-login-password.png"> {{$t('login.password')}}
40 </div>
41 <div class="ipt-wrap">
42 <input v-model="loginForm.password" :placeholder="$t('login.passwordPlaceholder')" class="ipt" :class="{ err : errorTips.e2.length > 0 }" type="password">
43 </div>
44 <div class="validator" v-if="errorTips.e2.length > 0 ">
45 <img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.e2}}
46 </div>
47 </div>
48 <div class="pure-u-1 form-item" v-if="type == 1 && loginCheck.showImageCode">
49 <div class="ipt-wrap">
50 <input :placeholder="$t('login.verifyPlaceholder')" class="ipt ipt-verify" :class="{ err : errorTips.e3.length > 0 }" type="text" v-model="loginForm.imageValue">
51 <div class="ipt verify-btn pointer vcode" @click="handlerRefreshImageValue">
52 <img :src="values.imageBase64">
53 </div>
54 </div>
55 <div class="validator" v-if="errorTips.e3.length > 0 ">
56 <img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.e3}}
57 </div>
54 </div> 58 </div>
55 </div> 59 </div>
60 <div class="login-protocol pointer" @click="loginCheck.agreeProtocol = !loginCheck.agreeProtocol">
61 <img v-if="!loginCheck.agreeProtocol" class="check" src="@/assets/images/login/un-check.png">
62 <img v-if="loginCheck.agreeProtocol" class="check" src="@/assets/images/login/check.png"> {{$t('login.agree')}}
63 <span @click="onProtocolHandler()" class="protocol pointer">{{$t('login.protocol')}}</span>
64 </div>
65 <div @click="handlerLogin()" class="login-submit pointer">{{$t('login.login')}}</div>
66 <div class="login-func">
67 <div @click="onRegisterHandler()" class="login-func-btn pointer">{{$t('login.register')}}</div>
68 <div @click="onForgetHandler()" class="login-func-btn pointer">{{$t('login.forget')}}</div>
69 </div>
56 </div> 70 </div>
57 <div class="login-protocol pointer" @click="loginCheck.agreeProtocol = !loginCheck.agreeProtocol">
58 <img v-if="!loginCheck.agreeProtocol" class="check" src="@/assets/images/login/un-check.png">
59 <img v-if="loginCheck.agreeProtocol" class="check" src="@/assets/images/login/check.png"> {{$t('login.agree')}}
60 <span @click="onProtocolHandler()" class="protocol pointer">{{$t('login.protocol')}}</span>
61 </div>
62 <div @click="handlerLogin()" class="login-submit pointer">{{$t('login.login')}}</div>
63 <div class="login-func">
64 <div @click="onRegisterHandler()" class="login-func-btn pointer">{{$t('login.register')}}</div>
65 <div @click="onForgetHandler()" class="login-func-btn pointer">{{$t('login.forget')}}</div>
66 </div>
67 </div>
68 71
69 <!-- OTP登陆 --> 72 <!-- OTP登陆 -->
70 <div v-if="type == 2" class="login"> 73 <div v-if="type == 2" class="login">
71 <div class="login-tit"> 74 <div class="login-tit">
72 <img v-if="locale == 'zh'" src="@/assets/images/login/login-tit-zh.png"> 75 <img v-if="locale == 'zh'" src="@/assets/images/login/login-tit-zh.png">
73 <img v-if="locale == 'tc'" src="@/assets/images/login/login-tit-tc.png"> 76 <img v-if="locale == 'tc'" src="@/assets/images/login/login-tit-tc.png">
74 <img v-if="locale == 'en'" class="img-en" src="@/assets/images/login/login-tit-en.png"> 77 <img v-if="locale == 'en'" class="img-en" src="@/assets/images/login/login-tit-en.png">
75 </div>
76 <div class="login-nav">
77 <div @click="onLoginTypeHandler(1)" class="login-nav-tit text-r pointer"> {{$t('login.loginType1')}}</div>
78 <div class="login-nav-v-line"></div>
79 <div @click="onLoginTypeHandler(2)" class="login-nav-tit pointer active"> {{$t('login.loginType2')}}</div>
80 </div>
81 <div class="gird-g form">
82 <div class="pure-u-1 form-item">
83 <div class="label">
84 <img src="@/assets/images/login/icon-login-phone.png"> {{$t('login.mobile')}}
85 </div>
86 <div class="ipt-wrap">
87 <input :placeholder="$t('login.mobilePlaceholder')" class="ipt" type="text" :class="{ err : errorTips.oe1.length > 0 }" v-model="loginForm.mobileNo">
88 </div>
89 <div class="validator" v-if="errorTips.oe1.length > 0 ">
90 <img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.oe1}}
91 </div>
92 </div> 78 </div>
93 <div class="pure-u-1 form-item" v-if="type == 2 && loginCheck.showImageCode"> 79 <div class="login-nav">
94 <div class="ipt-wrap"> 80 <div @click="onLoginTypeHandler(1)" class="login-nav-tit text-r pointer"> {{$t('login.loginType1')}}</div>
95 <input :placeholder="$t('login.verifyPlaceholder')" class="ipt ipt-verify" :class="{ err : errorTips.oe3.length > 0 }" type="text" v-model="loginForm.imageValue"> 81 <div class="login-nav-v-line"></div>
96 <div class="ipt verify-btn pointer vcode" @click="handlerRefreshImageValue"> 82 <div @click="onLoginTypeHandler(2)" class="login-nav-tit pointer active"> {{$t('login.loginType2')}}</div>
97 <img :src="values.imageBase64">
98 </div>
99 </div>
100 <div class="validator" v-if="errorTips.oe3.length > 0 ">
101 <img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.oe3}}
102 </div>
103 </div> 83 </div>
104 <div class="pure-u-1 form-item"> 84 <div class="gird-g form">
105 <div class="label"> 85 <div class="pure-u-1 form-item">
106 <img src="@/assets/images/login/icon-login-message.png"> {{$t('login.verifyCode')}} 86 <div class="label">
87 <img src="@/assets/images/login/icon-login-phone.png"> {{$t('login.mobile')}}
88 </div>
89 <div class="ipt-wrap">
90 <input :placeholder="$t('login.mobilePlaceholder')" class="ipt" type="text" :class="{ err : errorTips.oe1.length > 0 }" v-model="loginForm.mobileNo">
91 </div>
92 <div class="validator" v-if="errorTips.oe1.length > 0 ">
93 <img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.oe1}}
94 </div>
107 </div> 95 </div>
108 <div class="ipt-wrap"> 96 <div class="pure-u-1 form-item" v-if="type == 2 && loginCheck.showImageCode">
109 <div class="ipt ipt2" :class="{ err : errorTips.oe2.length > 0 }"> 97 <div class="ipt-wrap">
110 <input :placeholder="$t('login.verifyCodePlaceholder')" class="ipt-code" type="text" v-model="loginForm.otp"> 98 <input :placeholder="$t('login.verifyPlaceholder')" class="ipt ipt-verify" :class="{ err : errorTips.oe3.length > 0 }" type="text" v-model="loginForm.imageValue">
111 <div v-if="times.remain == 0" class="veri-btn pointer" @click="handlerStdSendOTP">{{$t('register.verifyCodeGet')}}</div> 99 <div class="ipt verify-btn pointer vcode" @click="handlerRefreshImageValue">
112 <div v-else class="veri-btn-default">{{times.tip}}</div> 100 <img :src="values.imageBase64">
101 </div>
102 </div>
103 <div class="validator" v-if="errorTips.oe3.length > 0 ">
104 <img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.oe3}}
113 </div> 105 </div>
114 </div> 106 </div>
115 <div class="validator" v-if="errorTips.oe2.length > 0 "> 107 <div class="pure-u-1 form-item">
116 <img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.oe2}} 108 <div class="label">
109 <img src="@/assets/images/login/icon-login-message.png"> {{$t('login.verifyCode')}}
110 </div>
111 <div class="ipt-wrap">
112 <div class="ipt ipt2" :class="{ err : errorTips.oe2.length > 0 }">
113 <input :placeholder="$t('login.verifyCodePlaceholder')" class="ipt-code" type="text" v-model="loginForm.otp">
114 <div v-if="times.remain == 0" class="veri-btn pointer" @click="handlerStdSendOTP">{{$t('register.verifyCodeGet')}}</div>
115 <div v-else class="veri-btn-default">{{times.tip}}</div>
116 </div>
117 </div>
118 <div class="validator" v-if="errorTips.oe2.length > 0 ">
119 <img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.oe2}}
120 </div>
117 </div> 121 </div>
118 </div> 122 </div>
123 <div class="login-protocol pointer" @click="loginCheck.agreeProtocol = !loginCheck.agreeProtocol">
124 <img v-if="!loginCheck.agreeProtocol" class="check" src="@/assets/images/login/un-check.png">
125 <img v-if="loginCheck.agreeProtocol" class="check" src="@/assets/images/login/check.png"> {{$t('login.agree')}}
126 <span @click="onProtocolHandler()" class="protocol pointer">{{$t('login.protocol')}}</span>
127 </div>
128 <div @click="handlerLogin()" class="login-submit pointer">{{$t('login.login')}}</div>
129 <div class="login-func">
130 <div @click="toRegisterPage()" class="login-func-btn pointer">{{$t('login.register')}}</div>
131 <div @click="onForgetHandler()" class="login-func-btn pointer">{{$t('login.forget')}}</div>
132 </div>
119 </div> 133 </div>
120 <div class="login-protocol pointer" @click="loginCheck.agreeProtocol = !loginCheck.agreeProtocol">
121 <img v-if="!loginCheck.agreeProtocol" class="check" src="@/assets/images/login/un-check.png">
122 <img v-if="loginCheck.agreeProtocol" class="check" src="@/assets/images/login/check.png"> {{$t('login.agree')}}
123 <span @click="onProtocolHandler()" class="protocol pointer">{{$t('login.protocol')}}</span>
124 </div>
125 <div @click="handlerLogin()" class="login-submit pointer">{{$t('login.login')}}</div>
126 <div class="login-func">
127 <div @click="toRegisterPage()" class="login-func-btn pointer">{{$t('login.register')}}</div>
128 <div @click="onForgetHandler()" class="login-func-btn pointer">{{$t('login.forget')}}</div>
129 </div>
130 </div>
131 134
132 <!----> 135 <!---->
133 <div v-if="type == 3" class="login"> 136 <div v-if="type == 3" class="login">
134 <div class="login-tit"> 137 <div class="login-tit">
135 <img v-if="locale == 'zh'" src="@/assets/images/login/login-tit-zh.png"> 138 <img v-if="locale == 'zh'" src="@/assets/images/login/login-tit-zh.png">
136 <img v-if="locale == 'tc'" src="@/assets/images/login/login-tit-tc.png"> 139 <img v-if="locale == 'tc'" src="@/assets/images/login/login-tit-tc.png">
137 <img v-if="locale == 'en'" class="img-en" src="@/assets/images/login/login-tit-en.png"> 140 <img v-if="locale == 'en'" class="img-en" src="@/assets/images/login/login-tit-en.png">
138 </div>
139 <div class="gird-g form">
140 <div class="pure-u-1 form-item">
141 <div class="label">
142 <img src="@/assets/images/register/icon-register-lock.png"> {{$t('register.newPassword')}}
143 </div>
144 <div class="ipt-wrap">
145 <input :placeholder="$t('register.newPasswordPlaceholder')" class="ipt" type="password" v-model="values.password">
146 </div>
147 <div class="validator" v-if="errorTips.p4.length > 0 ">
148 <img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.p4}}
149 </div>
150 </div> 141 </div>
151 <div class="pure-u-1 form-item"> 142 <div class="gird-g form">
152 <div class="label"> 143 <div class="pure-u-1 form-item">
153 <img src="@/assets/images/register/icon-register-lock.png"> {{$t('register.newPasswordSure')}} 144 <div class="label">
154 </div> 145 <img src="@/assets/images/register/icon-register-lock.png"> {{$t('register.newPassword')}}
155 <div class="ipt-wrap"> 146 </div>
156 <input :placeholder="$t('register.newPasswordSurePlaceholder')" class="ipt" type="password" v-model="values.passwordRepeat"> 147 <div class="ipt-wrap">
148 <input :placeholder="$t('register.newPasswordPlaceholder')" class="ipt" type="password" v-model="values.password">
149 </div>
150 <div class="validator" v-if="errorTips.p4.length > 0 ">
151 <img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.p4}}
152 </div>
157 </div> 153 </div>
158 <div class="validator" v-if="errorTips.p5.length > 0 "> 154 <div class="pure-u-1 form-item">
159 <img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.p5}} 155 <div class="label">
156 <img src="@/assets/images/register/icon-register-lock.png"> {{$t('register.newPasswordSure')}}
157 </div>
158 <div class="ipt-wrap">
159 <input :placeholder="$t('register.newPasswordSurePlaceholder')" class="ipt" type="password" v-model="values.passwordRepeat">
160 </div>
161 <div class="validator" v-if="errorTips.p5.length > 0 ">
162 <img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.p5}}
163 </div>
160 </div> 164 </div>
161 </div> 165 </div>
166 <div @click="onRegisterHandler()" class="login-submit pointer">{{$t('register.sure')}}</div>
162 </div> 167 </div>
163 <div @click="onRegisterHandler()" class="login-submit pointer">{{$t('register.sure')}}</div>
164 </div> 168 </div>
165 </div> 169 </div>
166 </div> 170 </div>
......
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
24 24
25 img { 25 img {
26 width: 1920px; 26 width: 1920px;
27 margin-left: 360px; 27 margin-left: -360px;
28 } 28 }
29 } 29 }
30 30
......
...@@ -24,14 +24,14 @@ ...@@ -24,14 +24,14 @@
24 <div class="pure-u-1 form-item"> 24 <div class="pure-u-1 form-item">
25 <div class="ipt-wrap"> 25 <div class="ipt-wrap">
26 <img class="down-arrow" src="@/assets/images/reservation/re-down-arrow.png" alt=""> 26 <img class="down-arrow" src="@/assets/images/reservation/re-down-arrow.png" alt="">
27 <select class="ipt" v-model="mobileNoType" > 27 <select class="ipt" v-model="mobileNoType">
28 <option v-for="(item,index) in mobileOptions" :key="index" :value="item.type">{{item.name}}</option> 28 <option v-for="(item,index) in mobileOptions" :key="index" :value="item.type">{{item.name}}</option>
29 </select> 29 </select>
30 </div> 30 </div>
31 </div> 31 </div>
32 <div class="pure-u-1 form-item"> 32 <div class="pure-u-1 form-item">
33 <div class="ipt-wrap"> 33 <div class="ipt-wrap">
34 <div class="ipt ipt2" :class="{err : errorTips.p1.length > 0}" > 34 <div class="ipt ipt2" :class="{err : errorTips.p1.length > 0}">
35 <div class="region-tel">{{mobileTip.areaCode}}</div> 35 <div class="region-tel">{{mobileTip.areaCode}}</div>
36 <input :placeholder="mobileTip.placeHolder" class="ipt-tel" type="text" v-model="registerForm.mobileNo"> 36 <input :placeholder="mobileTip.placeHolder" class="ipt-tel" type="text" v-model="registerForm.mobileNo">
37 </div> 37 </div>
...@@ -43,7 +43,7 @@ ...@@ -43,7 +43,7 @@
43 43
44 <div class="pure-u-1 form-item" v-if="registerCheck.showImageCode"> 44 <div class="pure-u-1 form-item" v-if="registerCheck.showImageCode">
45 <div class="ipt-wrap"> 45 <div class="ipt-wrap">
46 <input :placeholder="$t('login.verifyPlaceholder')" class="ipt ipt-verify" :class="{err : errorTips.p3.length > 0}" type="text" v-model="registerForm.imageValue"> 46 <input :placeholder="$t('login.verifyPlaceholder')" class="ipt ipt-verify" :class="{err : errorTips.p3.length > 0}" type="text" v-model="registerForm.imageValue">
47 <div class="ipt verify-btn pointer vcode" @click="handlerRefreshImageVcode"> 47 <div class="ipt verify-btn pointer vcode" @click="handlerRefreshImageVcode">
48 <img :src="values.imageBase64"> 48 <img :src="values.imageBase64">
49 </div> 49 </div>
...@@ -54,7 +54,7 @@ ...@@ -54,7 +54,7 @@
54 </div> 54 </div>
55 <div class="pure-u-1 form-item"> 55 <div class="pure-u-1 form-item">
56 <div class="ipt-wrap"> 56 <div class="ipt-wrap">
57 <div class="ipt ipt2" :class="{err : errorTips.p2.length > 0}" > 57 <div class="ipt ipt2" :class="{err : errorTips.p2.length > 0}">
58 <input :placeholder="$t('register.verifyCodePlaceholder')" class="ipt-code" type="text" v-model="registerForm.opt"> 58 <input :placeholder="$t('register.verifyCodePlaceholder')" class="ipt-code" type="text" v-model="registerForm.opt">
59 <div v-if="times.remain == 0" class="veri-btn pointer" @click="handlerStdSendOTP">{{$t('register.verifyCodeGet')}}</div> 59 <div v-if="times.remain == 0" class="veri-btn pointer" @click="handlerStdSendOTP">{{$t('register.verifyCodeGet')}}</div>
60 <div v-else class="veri-btn-default">{{times.tip}}</div> 60 <div v-else class="veri-btn-default">{{times.tip}}</div>
...@@ -87,7 +87,7 @@ ...@@ -87,7 +87,7 @@
87 <img src="@/assets/images/register/icon-register-lock.png"> {{$t('register.newPassword')}} 87 <img src="@/assets/images/register/icon-register-lock.png"> {{$t('register.newPassword')}}
88 </div> 88 </div>
89 <div class="ipt-wrap"> 89 <div class="ipt-wrap">
90 <input :placeholder="$t('register.newPasswordPlaceholder')" class="ipt" :class="{err : errorTips.p4.length > 0}" type="password" v-model="values.password"> 90 <input :placeholder="$t('register.newPasswordPlaceholder')" class="ipt" :class="{err : errorTips.p4.length > 0}" type="password" v-model="values.password">
91 </div> 91 </div>
92 <div class="validator" v-if="errorTips.p4.length > 0 "> 92 <div class="validator" v-if="errorTips.p4.length > 0 ">
93 <img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.p4}} 93 <img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.p4}}
...@@ -98,7 +98,7 @@ ...@@ -98,7 +98,7 @@
98 <img src="@/assets/images/register/icon-register-lock.png"> {{$t('register.newPasswordSure')}} 98 <img src="@/assets/images/register/icon-register-lock.png"> {{$t('register.newPasswordSure')}}
99 </div> 99 </div>
100 <div class="ipt-wrap"> 100 <div class="ipt-wrap">
101 <input :placeholder="$t('register.newPasswordSurePlaceholder')" class="ipt" :class="{err : errorTips.p5.length > 0}" type="password" v-model="values.passwordRepeat"> 101 <input :placeholder="$t('register.newPasswordSurePlaceholder')" class="ipt" :class="{err : errorTips.p5.length > 0}" type="password" v-model="values.passwordRepeat">
102 </div> 102 </div>
103 <div class="validator" v-if="errorTips.p5.length > 0 "> 103 <div class="validator" v-if="errorTips.p5.length > 0 ">
104 <img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.p5}} 104 <img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.p5}}
......
...@@ -8,6 +8,24 @@ ...@@ -8,6 +8,24 @@
8 * 8 *
9 */ 9 */
10 10
11 // 居中按钮样式
12 @mixin btn-center($width, $height) {
13 width: $width;
14 height: $height;
15 line-height: $height;
16 text-align: center;
17 }
18
19 // 超过多少行自动省略 默认一行
20 @mixin ellipsis($line:1) {
21 display: -webkit-box;
22 word-break: break-all;
23 -webkit-box-orient: vertical;
24 -webkit-line-clamp: $line;
25 overflow: hidden;
26 text-overflow: ellipsis;
27 }
28
11 // 文字截取 29 // 文字截取
12 @mixin text-overflow() { 30 @mixin text-overflow() {
13 overflow: hidden; 31 overflow: hidden;
......