Skip to content

dev / pingan-life-index-pro

Go to a project
Toggle navigation
Toggle navigation pinning
6e10fcf8 by simon
Options

默认提交

1 parent 36a311e1
Inline Side-by-side
Showing 4 changed files with 297 additions and 9 deletions
...@@ -33,7 +33,7 @@ ...@@ -33,7 +33,7 @@
33 </div> 33 </div>
34 </div> 34 </div>
35 </div> 35 </div>
36 <div class="submit-btn pointer"> 36 <div class="submit-btn">
37 {{$t("policyChangeContact.submit")}} 37 {{$t("policyChangeContact.submit")}}
38 </div> 38 </div>
39 </div> 39 </div>
......
1 @import '@/styles/_support'; 1 @import '@/styles/_support';
2 2
3 .content {} 3 .container {
4 padding-bottom: 2rem;
5 }
6
4 7
5 .border { 8 .border {
6 @extend .bb; 9 @extend .bb;
7 // padding: 2.833333rem 4.0rem 0 3.5rem; 10 // height: 387px;
8 // width: 770px;
9 height: 387px;
10 border-radius: 8px; 11 border-radius: 8px;
11 border: solid 1px #f2f2f2; 12 border: solid 1px #f2f2f2;
12 background-color: #ffffff; 13 background-color: #ffffff;
13 } 14 }
15
16 .table {
17 $girdHei: 4.333333rem;
18 text-align: center;
19
20 &-header {
21 @include border-top-radius(.666667rem);
22 display: flex;
23 align-items: center;
24 height: 2.5rem;
25 color: #ffffff;
26 font-weight: bold;
27 letter-spacing: .1rem;
28
29 &-item {
30 @extend .bb;
31 padding: 0 2rem;
32 }
33 }
34 }
35
36
37 .form {
38 @extend .bb;
39 padding: 1rem .75rem;
40
41 &-item {
42 position: relative;
43 margin-bottom: 2.333333rem;
44 padding: 0 1.25rem;
45
46 .label {
47 color: #f05a23;
48 display: flex;
49 align-items: center;
50 margin-bottom: .7rem;
51
52 .icon {
53 width: 2.166667rem;
54 display: flex;
55 }
56
57 img {
58 height: 1rem;
59 }
60 }
61
62 .ipt-wrap {
63 position: relative;
64
65 // input和下拉
66 .ipt {
67 @extend .bb;
68
69 width: 100%;
70 height: 3.5rem;
71 border: solid 1px #dcdddd;
72 background-color: #ffffff;
73 border-radius: 3.5rem;
74 padding: 0 2.083333rem;
75 }
76
77 // 长文本
78 .textarea {
79 min-height: 8.75rem;
80 border-radius: 1rem;
81 @extend .bb;
82 padding: .75rem;
83 }
84
85 .down-arrow {
86 position: absolute;
87 top: 1.6rem;
88 right: 2rem;
89 background-image: url('~@/assets/images/reservation/re-down-arrow.png');
90 width: 1rem;
91 height: .666667rem;
92 pointer-events: none;
93 cursor: default;
94 }
95 }
96 }
97
98 // 不换行
99 &-item2 {
100 display: flex;
101 margin-bottom: 2.25rem;
102
103 .label {
104 min-width: 12.833333rem;
105 height: 2.5rem;
106 }
107
108 .cont {
109
110 display: flex;
111
112 .boo-btn {
113 width: 5.25rem;
114 height: 2.5rem;
115 line-height: 2.5rem;
116 border: solid 1px #dcdddd;
117 background-color: #ffffff;
118 border-radius: 2.5rem;
119 text-align: center;
120 margin: 0 0.6rem;
121 }
122
123 .active {
124 border: none;
125 color: #ffffff;
126 background-color: #f05a23;
127 box-shadow: 0px 10px 13px 0 rgba(236, 100, 41, 0.2);
128 background-blend-mode: soft-light, ;
129 // background-image: linear-gradient(to top, #000000, #ffffff), linear-gradient(to bottom, #f05a23, #f05a23);
130 background-image: linear-gradient(to bottom, #f05f28, #f05021);
131 }
132 }
133 }
134
135 }
136
137 .orange {
138 background-color: $cOrange;
139 }
140
141 .submit-btn {
142 width: 13.583333rem;
143 height: 4.083333rem;
144 margin: 0 auto 0;
145 line-height: 4.083333rem;
146 box-shadow: 0px 10px 13px 0 rgba(236, 100, 41, 0.2);
147 background-blend-mode: soft-light, ;
148 background-image: linear-gradient(to top, #000000, #ffffff), linear-gradient(to bottom, #ec6429, #ec6429);
149 text-align: center;
150 font-size: 1.291667rem;
151 letter-spacing: .129167rem;
152 color: #ffffff;
153 border-radius: 3.5rem;
154 cursor: pointer;
155 border: none;
156 color: #ffffff;
157 background-color: #f05a23;
158 box-shadow: 0px 10px 13px 0 rgba(236, 100, 41, 0.2);
159 background-blend-mode: soft-light, ;
160 background-image: linear-gradient(to top, #000000, #ffffff), linear-gradient(to bottom, #ec6429, #ec6429);
161 }
......
1 1
2 <template> 2 <template>
3 <div class="container border"> 3 <div class="container border">
4 policy-change-information 4 <div class="table">
5 <div class="table-header orange">
6 <div class="table-header-item">客戶資料變更</div>
7 </div>
8 <div class="gird-g form">
9
10 <!-- 變更對象 -->
11 <div class="pure-u-1 form-item form-item2">
12 <div class="label">
13 <div class="icon"><img src="@/assets/images/reservation/icon-re-custom.png"></div>{{$t('reservation.hkClient')}}
14 </div>
15 <div class="cont">
16 <div class="boo-btn pointer" :class="{active:isHkCus}" @click="isHkCus=true">{{$t('reservation.yes')}}</div>
17 <div class="boo-btn pointer" :class="{active:!isHkCus}" @click="isHkCus=false">{{$t('reservation.no')}}</div>
18 </div>
19 </div>
20
21 <div class="pure-u-1 pure-u-md-1-2 form-item">
22 <div class="label">
23 <div class="icon"><img src="@/assets/images/reservation/icon-re-name.png"></div> {{$t('reservation.name')}}
24 </div>
25 <div class="ipt-wrap">
26 <input :placeholder="$t('reservation.namePlaceholder')" class="ipt" type="text">
27 </div>
28 </div>
29
30 <div class="pure-u-1 pure-u-md-1-2 form-item">
31 <div class="label">
32 <div class="icon"><img src="@/assets/images/reservation/icon-re-contact.png"></div>{{$t('reservation.contactType')}}
33 </div>
34 <div class="ipt-wrap">
35 <div class="down-arrow"></div>
36 <select class="ipt">
37 <option v-if="locale !='zh'">電話</option>
38 <option v-else>电话</option>
39 </select>
40 </div>
41 </div>
42
43 <div class="pure-u-1 pure-u-md-1-2 form-item">
44 <div class="label">
45 <div class="icon"><img src="@/assets/images/reservation/icon-re-phone.png"></div>{{$t('reservation.contact')}}
46 </div>
47 <div class="ipt-wrap">
48 <input :placeholder="$t('reservation.contactPlaceholder')" class="ipt" type="text">
49 </div>
50 </div>
51
52 <div class="pure-u-1 pure-u-md-1-2 form-item">
53 <div class="label">
54 <div class="icon"><img src="@/assets/images/reservation/icon-re-clock.png"></div>{{$t('reservation.reservationType')}}
55 </div>
56 <div class="ipt-wrap">
57 <div class="down-arrow"></div>
58 <select class="ipt">
59 <template v-if="locale =='zh'">
60 <option>投保咨询</option>
61 <option>代办保单变更</option>
62 </template>
63 <template v-else>
64 <option>投保咨詢</option>
65 <option>代辦保單變更</option>
66 </template>
67 </select>
68 </div>
69 </div>
70
71 <div class="pure-u-1 pure-u-md-1-2 form-item">
72 <div class="label">
73 <div class="icon"><img src="@/assets/images/reservation/icon-re-name.png"></div> {{$t('reservation.name')}}
74 </div>
75 <div class="ipt-wrap">
76 <input :placeholder="$t('reservation.namePlaceholder')" class="ipt" type="text">
77 </div>
78 </div>
79
80 <div class="pure-u-1 pure-u-md-1-2 form-item">
81 <div class="label">
82 <div class="icon"><img src="@/assets/images/reservation/icon-re-contact.png"></div>{{$t('reservation.contactType')}}
83 </div>
84 <div class="ipt-wrap">
85 <div class="down-arrow"></div>
86 <select class="ipt">
87 <option v-if="locale !='zh'">電話</option>
88 <option v-else>电话</option>
89 </select>
90 </div>
91 </div>
92
93 <div class="pure-u-1 pure-u-md-1-2 form-item">
94 <div class="label">
95 <div class="icon"><img src="@/assets/images/reservation/icon-re-phone.png"></div>{{$t('reservation.contact')}}
96 </div>
97 <div class="ipt-wrap">
98 <input :placeholder="$t('reservation.contactPlaceholder')" class="ipt" type="text">
99 </div>
100 </div>
101
102 <div class="pure-u-1 pure-u-md-1-2 form-item">
103 <div class="label">
104 <div class="icon"><img src="@/assets/images/reservation/icon-re-clock.png"></div>{{$t('reservation.reservationType')}}
105 </div>
106 <div class="ipt-wrap">
107 <div class="down-arrow"></div>
108 <select class="ipt">
109 <template v-if="locale =='zh'">
110 <option>投保咨询</option>
111 <option>代办保单变更</option>
112 </template>
113 <template v-else>
114 <option>投保咨詢</option>
115 <option>代辦保單變更</option>
116 </template>
117 </select>
118 </div>
119 </div>
120
121 <div class="pure-u-1 pure-u-md-1-2 form-item">
122 <div class="label">
123 <div class="icon"><img src="@/assets/images/reservation/icon-re-clock.png"></div>{{$t('reservation.reservationType')}}
124 </div>
125 <div class="ipt-wrap">
126 <div class="down-arrow"></div>
127 <select class="ipt">
128 <template v-if="locale =='zh'">
129 <option>投保咨询</option>
130 <option>代办保单变更</option>
131 </template>
132 <template v-else>
133 <option>投保咨詢</option>
134 <option>代辦保單變更</option>
135 </template>
136 </select>
137 </div>
138 </div>
139 <div class="pure-u-1 pure-u-md-1-2 form-item"></div>
140
141 </div>
142
143 <div class="submit-btn">
144 {{$t("policyChangeContact.submit")}}
145 </div>
146 </div>
5 </div> 147 </div>
6 </template> 148 </template>
7 149
......
1 1
2 <template> 2 <template>
3 <div class="reservation-container"> 3 <div class="reservation-container">
4 <div class="temp"> 4 <div class="gird-g form">
5 <div class="gird-g form">
6 5
7 <div class="pure-u-1 pure-u-md-1-2 form-item"> 6 <div class="pure-u-1 pure-u-md-1-2 form-item">
8 <div class="label"> 7 <div class="label">
...@@ -93,7 +92,6 @@ ...@@ -93,7 +92,6 @@
93 </div> 92 </div>
94 93
95 </div> 94 </div>
96 </div>
97 95
98 <div class="box notice"> 96 <div class="box notice">
99 <p class="notice-item"> 97 <p class="notice-item">
......