Skip to content

dev / pingan-life-index-pro

Go to a project
Toggle navigation
Toggle navigation pinning
716fc33d by simon
Options

no message

1 parent 7f539609
Expand all
Inline Side-by-side
Showing 55 changed files with 1148 additions and 68 deletions
1 /*!
2 Pure v1.0.1
3 Copyright 2013 Yahoo!
4 Licensed under the BSD License.
5 https://github.com/pure-css/pure/blob/master/LICENSE.md
6 */
7 @media screen and (min-width:35.5em){.pure-u-sm-1,.pure-u-sm-1-1,.pure-u-sm-1-12,.pure-u-sm-1-2,.pure-u-sm-1-24,.pure-u-sm-1-3,.pure-u-sm-1-4,.pure-u-sm-1-5,.pure-u-sm-1-6,.pure-u-sm-1-8,.pure-u-sm-10-24,.pure-u-sm-11-12,.pure-u-sm-11-24,.pure-u-sm-12-24,.pure-u-sm-13-24,.pure-u-sm-14-24,.pure-u-sm-15-24,.pure-u-sm-16-24,.pure-u-sm-17-24,.pure-u-sm-18-24,.pure-u-sm-19-24,.pure-u-sm-2-24,.pure-u-sm-2-3,.pure-u-sm-2-5,.pure-u-sm-20-24,.pure-u-sm-21-24,.pure-u-sm-22-24,.pure-u-sm-23-24,.pure-u-sm-24-24,.pure-u-sm-3-24,.pure-u-sm-3-4,.pure-u-sm-3-5,.pure-u-sm-3-8,.pure-u-sm-4-24,.pure-u-sm-4-5,.pure-u-sm-5-12,.pure-u-sm-5-24,.pure-u-sm-5-5,.pure-u-sm-5-6,.pure-u-sm-5-8,.pure-u-sm-6-24,.pure-u-sm-7-12,.pure-u-sm-7-24,.pure-u-sm-7-8,.pure-u-sm-8-24,.pure-u-sm-9-24{display:inline-block;zoom:1;letter-spacing:normal;word-spacing:normal;vertical-align:top;text-rendering:auto}.pure-u-sm-1-24{width:4.1667%}.pure-u-sm-1-12,.pure-u-sm-2-24{width:8.3333%}.pure-u-sm-1-8,.pure-u-sm-3-24{width:12.5%}.pure-u-sm-1-6,.pure-u-sm-4-24{width:16.6667%}.pure-u-sm-1-5{width:20%}.pure-u-sm-5-24{width:20.8333%}.pure-u-sm-1-4,.pure-u-sm-6-24{width:25%}.pure-u-sm-7-24{width:29.1667%}.pure-u-sm-1-3,.pure-u-sm-8-24{width:33.3333%}.pure-u-sm-3-8,.pure-u-sm-9-24{width:37.5%}.pure-u-sm-2-5{width:40%}.pure-u-sm-10-24,.pure-u-sm-5-12{width:41.6667%}.pure-u-sm-11-24{width:45.8333%}.pure-u-sm-1-2,.pure-u-sm-12-24{width:50%}.pure-u-sm-13-24{width:54.1667%}.pure-u-sm-14-24,.pure-u-sm-7-12{width:58.3333%}.pure-u-sm-3-5{width:60%}.pure-u-sm-15-24,.pure-u-sm-5-8{width:62.5%}.pure-u-sm-16-24,.pure-u-sm-2-3{width:66.6667%}.pure-u-sm-17-24{width:70.8333%}.pure-u-sm-18-24,.pure-u-sm-3-4{width:75%}.pure-u-sm-19-24{width:79.1667%}.pure-u-sm-4-5{width:80%}.pure-u-sm-20-24,.pure-u-sm-5-6{width:83.3333%}.pure-u-sm-21-24,.pure-u-sm-7-8{width:87.5%}.pure-u-sm-11-12,.pure-u-sm-22-24{width:91.6667%}.pure-u-sm-23-24{width:95.8333%}.pure-u-sm-1,.pure-u-sm-1-1,.pure-u-sm-24-24,.pure-u-sm-5-5{width:100%}}@media screen and (min-width:48em){.pure-u-md-1,.pure-u-md-1-1,.pure-u-md-1-12,.pure-u-md-1-2,.pure-u-md-1-24,.pure-u-md-1-3,.pure-u-md-1-4,.pure-u-md-1-5,.pure-u-md-1-6,.pure-u-md-1-8,.pure-u-md-10-24,.pure-u-md-11-12,.pure-u-md-11-24,.pure-u-md-12-24,.pure-u-md-13-24,.pure-u-md-14-24,.pure-u-md-15-24,.pure-u-md-16-24,.pure-u-md-17-24,.pure-u-md-18-24,.pure-u-md-19-24,.pure-u-md-2-24,.pure-u-md-2-3,.pure-u-md-2-5,.pure-u-md-20-24,.pure-u-md-21-24,.pure-u-md-22-24,.pure-u-md-23-24,.pure-u-md-24-24,.pure-u-md-3-24,.pure-u-md-3-4,.pure-u-md-3-5,.pure-u-md-3-8,.pure-u-md-4-24,.pure-u-md-4-5,.pure-u-md-5-12,.pure-u-md-5-24,.pure-u-md-5-5,.pure-u-md-5-6,.pure-u-md-5-8,.pure-u-md-6-24,.pure-u-md-7-12,.pure-u-md-7-24,.pure-u-md-7-8,.pure-u-md-8-24,.pure-u-md-9-24{display:inline-block;zoom:1;letter-spacing:normal;word-spacing:normal;vertical-align:top;text-rendering:auto}.pure-u-md-1-24{width:4.1667%}.pure-u-md-1-12,.pure-u-md-2-24{width:8.3333%}.pure-u-md-1-8,.pure-u-md-3-24{width:12.5%}.pure-u-md-1-6,.pure-u-md-4-24{width:16.6667%}.pure-u-md-1-5{width:20%}.pure-u-md-5-24{width:20.8333%}.pure-u-md-1-4,.pure-u-md-6-24{width:25%}.pure-u-md-7-24{width:29.1667%}.pure-u-md-1-3,.pure-u-md-8-24{width:33.3333%}.pure-u-md-3-8,.pure-u-md-9-24{width:37.5%}.pure-u-md-2-5{width:40%}.pure-u-md-10-24,.pure-u-md-5-12{width:41.6667%}.pure-u-md-11-24{width:45.8333%}.pure-u-md-1-2,.pure-u-md-12-24{width:50%}.pure-u-md-13-24{width:54.1667%}.pure-u-md-14-24,.pure-u-md-7-12{width:58.3333%}.pure-u-md-3-5{width:60%}.pure-u-md-15-24,.pure-u-md-5-8{width:62.5%}.pure-u-md-16-24,.pure-u-md-2-3{width:66.6667%}.pure-u-md-17-24{width:70.8333%}.pure-u-md-18-24,.pure-u-md-3-4{width:75%}.pure-u-md-19-24{width:79.1667%}.pure-u-md-4-5{width:80%}.pure-u-md-20-24,.pure-u-md-5-6{width:83.3333%}.pure-u-md-21-24,.pure-u-md-7-8{width:87.5%}.pure-u-md-11-12,.pure-u-md-22-24{width:91.6667%}.pure-u-md-23-24{width:95.8333%}.pure-u-md-1,.pure-u-md-1-1,.pure-u-md-24-24,.pure-u-md-5-5{width:100%}}@media screen and (min-width:64em){.pure-u-lg-1,.pure-u-lg-1-1,.pure-u-lg-1-12,.pure-u-lg-1-2,.pure-u-lg-1-24,.pure-u-lg-1-3,.pure-u-lg-1-4,.pure-u-lg-1-5,.pure-u-lg-1-6,.pure-u-lg-1-8,.pure-u-lg-10-24,.pure-u-lg-11-12,.pure-u-lg-11-24,.pure-u-lg-12-24,.pure-u-lg-13-24,.pure-u-lg-14-24,.pure-u-lg-15-24,.pure-u-lg-16-24,.pure-u-lg-17-24,.pure-u-lg-18-24,.pure-u-lg-19-24,.pure-u-lg-2-24,.pure-u-lg-2-3,.pure-u-lg-2-5,.pure-u-lg-20-24,.pure-u-lg-21-24,.pure-u-lg-22-24,.pure-u-lg-23-24,.pure-u-lg-24-24,.pure-u-lg-3-24,.pure-u-lg-3-4,.pure-u-lg-3-5,.pure-u-lg-3-8,.pure-u-lg-4-24,.pure-u-lg-4-5,.pure-u-lg-5-12,.pure-u-lg-5-24,.pure-u-lg-5-5,.pure-u-lg-5-6,.pure-u-lg-5-8,.pure-u-lg-6-24,.pure-u-lg-7-12,.pure-u-lg-7-24,.pure-u-lg-7-8,.pure-u-lg-8-24,.pure-u-lg-9-24{display:inline-block;zoom:1;letter-spacing:normal;word-spacing:normal;vertical-align:top;text-rendering:auto}.pure-u-lg-1-24{width:4.1667%}.pure-u-lg-1-12,.pure-u-lg-2-24{width:8.3333%}.pure-u-lg-1-8,.pure-u-lg-3-24{width:12.5%}.pure-u-lg-1-6,.pure-u-lg-4-24{width:16.6667%}.pure-u-lg-1-5{width:20%}.pure-u-lg-5-24{width:20.8333%}.pure-u-lg-1-4,.pure-u-lg-6-24{width:25%}.pure-u-lg-7-24{width:29.1667%}.pure-u-lg-1-3,.pure-u-lg-8-24{width:33.3333%}.pure-u-lg-3-8,.pure-u-lg-9-24{width:37.5%}.pure-u-lg-2-5{width:40%}.pure-u-lg-10-24,.pure-u-lg-5-12{width:41.6667%}.pure-u-lg-11-24{width:45.8333%}.pure-u-lg-1-2,.pure-u-lg-12-24{width:50%}.pure-u-lg-13-24{width:54.1667%}.pure-u-lg-14-24,.pure-u-lg-7-12{width:58.3333%}.pure-u-lg-3-5{width:60%}.pure-u-lg-15-24,.pure-u-lg-5-8{width:62.5%}.pure-u-lg-16-24,.pure-u-lg-2-3{width:66.6667%}.pure-u-lg-17-24{width:70.8333%}.pure-u-lg-18-24,.pure-u-lg-3-4{width:75%}.pure-u-lg-19-24{width:79.1667%}.pure-u-lg-4-5{width:80%}.pure-u-lg-20-24,.pure-u-lg-5-6{width:83.3333%}.pure-u-lg-21-24,.pure-u-lg-7-8{width:87.5%}.pure-u-lg-11-12,.pure-u-lg-22-24{width:91.6667%}.pure-u-lg-23-24{width:95.8333%}.pure-u-lg-1,.pure-u-lg-1-1,.pure-u-lg-24-24,.pure-u-lg-5-5{width:100%}}@media screen and (min-width:80em){.pure-u-xl-1,.pure-u-xl-1-1,.pure-u-xl-1-12,.pure-u-xl-1-2,.pure-u-xl-1-24,.pure-u-xl-1-3,.pure-u-xl-1-4,.pure-u-xl-1-5,.pure-u-xl-1-6,.pure-u-xl-1-8,.pure-u-xl-10-24,.pure-u-xl-11-12,.pure-u-xl-11-24,.pure-u-xl-12-24,.pure-u-xl-13-24,.pure-u-xl-14-24,.pure-u-xl-15-24,.pure-u-xl-16-24,.pure-u-xl-17-24,.pure-u-xl-18-24,.pure-u-xl-19-24,.pure-u-xl-2-24,.pure-u-xl-2-3,.pure-u-xl-2-5,.pure-u-xl-20-24,.pure-u-xl-21-24,.pure-u-xl-22-24,.pure-u-xl-23-24,.pure-u-xl-24-24,.pure-u-xl-3-24,.pure-u-xl-3-4,.pure-u-xl-3-5,.pure-u-xl-3-8,.pure-u-xl-4-24,.pure-u-xl-4-5,.pure-u-xl-5-12,.pure-u-xl-5-24,.pure-u-xl-5-5,.pure-u-xl-5-6,.pure-u-xl-5-8,.pure-u-xl-6-24,.pure-u-xl-7-12,.pure-u-xl-7-24,.pure-u-xl-7-8,.pure-u-xl-8-24,.pure-u-xl-9-24{display:inline-block;zoom:1;letter-spacing:normal;word-spacing:normal;vertical-align:top;text-rendering:auto}.pure-u-xl-1-24{width:4.1667%}.pure-u-xl-1-12,.pure-u-xl-2-24{width:8.3333%}.pure-u-xl-1-8,.pure-u-xl-3-24{width:12.5%}.pure-u-xl-1-6,.pure-u-xl-4-24{width:16.6667%}.pure-u-xl-1-5{width:20%}.pure-u-xl-5-24{width:20.8333%}.pure-u-xl-1-4,.pure-u-xl-6-24{width:25%}.pure-u-xl-7-24{width:29.1667%}.pure-u-xl-1-3,.pure-u-xl-8-24{width:33.3333%}.pure-u-xl-3-8,.pure-u-xl-9-24{width:37.5%}.pure-u-xl-2-5{width:40%}.pure-u-xl-10-24,.pure-u-xl-5-12{width:41.6667%}.pure-u-xl-11-24{width:45.8333%}.pure-u-xl-1-2,.pure-u-xl-12-24{width:50%}.pure-u-xl-13-24{width:54.1667%}.pure-u-xl-14-24,.pure-u-xl-7-12{width:58.3333%}.pure-u-xl-3-5{width:60%}.pure-u-xl-15-24,.pure-u-xl-5-8{width:62.5%}.pure-u-xl-16-24,.pure-u-xl-2-3{width:66.6667%}.pure-u-xl-17-24{width:70.8333%}.pure-u-xl-18-24,.pure-u-xl-3-4{width:75%}.pure-u-xl-19-24{width:79.1667%}.pure-u-xl-4-5{width:80%}.pure-u-xl-20-24,.pure-u-xl-5-6{width:83.3333%}.pure-u-xl-21-24,.pure-u-xl-7-8{width:87.5%}.pure-u-xl-11-12,.pure-u-xl-22-24{width:91.6667%}.pure-u-xl-23-24{width:95.8333%}.pure-u-xl-1,.pure-u-xl-1-1,.pure-u-xl-24-24,.pure-u-xl-5-5{width:100%}}
...@@ -6,6 +6,8 @@ ...@@ -6,6 +6,8 @@
6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge">
7 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 7 <meta name="viewport" content="width=device-width,initial-scale=1.0">
8 <link rel="icon" href="<%= BASE_URL %>favicon.ico"> 8 <link rel="icon" href="<%= BASE_URL %>favicon.ico">
9 <link rel="stylesheet" href="./css/pure-min.css">
10 <link rel="stylesheet" href="./css/grids-responsive-min.css">
9 <title>平安人寿保险官网</title> 11 <title>平安人寿保险官网</title>
10 </head> 12 </head>
11 13
......
...@@ -186,6 +186,12 @@ select { ...@@ -186,6 +186,12 @@ select {
186 -moz-appearance: none; 186 -moz-appearance: none;
187 } 187 }
188 188
189 input {
190 background: none;
191 outline: none;
192 border: none;
193 }
194
189 button::-moz-focus-inner, 195 button::-moz-focus-inner,
190 input, 196 input,
191 input[type="reset"]::-moz-focus-inner, 197 input[type="reset"]::-moz-focus-inner,
...@@ -330,7 +336,6 @@ textarea { ...@@ -330,7 +336,6 @@ textarea {
330 position: relative; 336 position: relative;
331 } 337 }
332 338
333
334 .swiper-pagination-bullet { 339 .swiper-pagination-bullet {
335 width: 1rem !important; 340 width: 1rem !important;
336 height: 1rem !important; 341 height: 1rem !important;
......
...@@ -7,7 +7,7 @@ export default { ...@@ -7,7 +7,7 @@ export default {
7 data() { 7 data() {
8 return { 8 return {
9 activeIndex: 0, 9 activeIndex: 0,
10 sTitle: this.title, 10 sTitle: this.dataObj && this.dataObj.name || '',
11 }; 11 };
12 }, 12 },
13 props: { 13 props: {
...@@ -17,10 +17,10 @@ export default { ...@@ -17,10 +17,10 @@ export default {
17 return "nav"; 17 return "nav";
18 } 18 }
19 }, 19 },
20 title: { 20 dataObj: {
21 type: String, 21 type: Object,
22 default () { 22 default () {
23 return ""; 23 return {};
24 } 24 }
25 }, 25 },
26 dataList: { 26 dataList: {
...@@ -44,6 +44,14 @@ export default { ...@@ -44,6 +44,14 @@ export default {
44 } 44 }
45 }, 45 },
46 methods: { 46 methods: {
47 onNavHandler() {
48 let path = this.dataObj && this.dataObj.path || "";
49 if (path) {
50 this.$router.push({
51 path: path
52 })
53 }
54 },
47 onOverHandler(event) { 55 onOverHandler(event) {
48 let ul = event.currentTarget.childNodes[1].childNodes[1]; 56 let ul = event.currentTarget.childNodes[1].childNodes[1];
49 ul.style.display = "block"; 57 ul.style.display = "block";
......
...@@ -21,8 +21,6 @@ ...@@ -21,8 +21,6 @@
21 } 21 }
22 22
23 span:hover { 23 span:hover {
24 // background: #f6f6f6;
25 // color: #ec6429;
26 } 24 }
27 25
28 ul { 26 ul {
...@@ -45,10 +43,22 @@ ...@@ -45,10 +43,22 @@
45 } 43 }
46 44
47 li:hover { 45 li:hover {
48 // background: #f6f6f6;
49 color: #ec6429; 46 color: #ec6429;
50 } 47 }
48 }
49 }
51 50
51 .user {
52 width: 7.333333rem;
53 height: 2.25rem;
54 background-color: #f05a23;
55 border-radius: 1.333333rem;
56 display: flex;
57 align-items: center;
58 justify-content: center;
59 color: #ffffff;
52 60
61 .icon-img {
62 margin: 0 .5rem;
53 } 63 }
54 } 64 }
......
1 <template> 1 <template>
2 <div> 2 <div>
3 <div class="drop-list" @mouseover="onOverHandler($event)" @mouseout="onOutHandler($event)"> 3 <div class="drop-list" @mouseover="onOverHandler($event)" @mouseout="onOutHandler($event)">
4 <span> 4 <!-- 登陆下拉样式 -->
5 {{sTitle}} 5 <template v-if="type=='login'">
6 <i></i> 6 <div class="user">
7 <img class="icon-img" src="@/assets/images/home/icon-user.png"> 登入
8 </div>
9 </template>
10 <template v-else>
11 <span @click="onNavHandler()">
12 {{dataObj.name}}
7 </span> 13 </span>
14 </template>
8 <div class="list"> 15 <div class="list">
9 <div class="space"></div> 16 <div class="space"></div>
10 <ul v-dpl> 17 <ul v-dpl>
......
...@@ -14,6 +14,8 @@ export default { ...@@ -14,6 +14,8 @@ export default {
14 components: {}, 14 components: {},
15 methods: { 15 methods: {
16 toPage(name) { 16 toPage(name) {
17 document.documentElement.scrollTop = 0;
18 document.body.scrollTop = 0;
17 this.$router.push({ 19 this.$router.push({
18 name: name 20 name: name
19 }) 21 })
......
...@@ -21,9 +21,9 @@ ...@@ -21,9 +21,9 @@
21 </div> 21 </div>
22 <div class="nav"> 22 <div class="nav">
23 <div class="nav-v"> 23 <div class="nav-v">
24 <div class="n-item">關於我們</div> 24 <div @click="toPage('profile')" class="n-item">關於我們</div>
25 <div class="n-item">集团介绍</div> 25 <div @click="toPage('profile')" class="n-item">集团介绍</div>
26 <div class="n-item">新聞資訊</div> 26 <div @click="toPage('newsList')" class="n-item">新聞資訊</div>
27 <div class="n-item">加入我們</div> 27 <div class="n-item">加入我們</div>
28 </div> 28 </div>
29 <div class="nav-v"> 29 <div class="nav-v">
......
...@@ -13,10 +13,12 @@ export default { ...@@ -13,10 +13,12 @@ export default {
13 maxClientWidth: 950, 13 maxClientWidth: 950,
14 navList: [{ 14 navList: [{
15 name: "產品介紹", 15 name: "產品介紹",
16 path: "",
16 list: [] 17 list: []
17 }, 18 },
18 { 19 {
19 name: "客戶服務", 20 name: "客戶服務",
21 path: "",
20 list: [{ 22 list: [{
21 name: "保單查詢", 23 name: "保單查詢",
22 path: "" 24 path: ""
...@@ -43,16 +45,18 @@ export default { ...@@ -43,16 +45,18 @@ export default {
43 }, 45 },
44 { 46 {
45 name: "預約服務", 47 name: "預約服務",
46 path: "" 48 path: "/reservation"
47 } 49 }
48 ] 50 ]
49 }, 51 },
50 { 52 {
51 name: "新聞資訊", 53 name: "新聞資訊",
54 path: "/news/list",
52 list: [] 55 list: []
53 }, 56 },
54 { 57 {
55 name: "關於平安人壽", 58 name: "關於平安人壽",
59 path: "",
56 list: [{ 60 list: [{
57 name: "公司簡介", 61 name: "公司簡介",
58 path: "/profile" 62 path: "/profile"
...@@ -64,8 +68,29 @@ export default { ...@@ -64,8 +68,29 @@ export default {
64 ] 68 ]
65 }, 69 },
66 ], 70 ],
71 loginData: {
72 name: "登入",
73 path: "",
74 list: [{
75 name: "登入",
76 path: "/login",
77 value: ""
78 },
79 {
80 name: "修改密码",
81 path: "",
82 value: ""
83 },
84 {
85 name: "登出",
86 path: "",
87 value: ""
88 },
89 ]
90 },
67 langData: { 91 langData: {
68 name: "繁", 92 name: "繁",
93 path: "",
69 list: [{ 94 list: [{
70 name: "繁", 95 name: "繁",
71 path: "", 96 path: "",
......
...@@ -57,19 +57,9 @@ ...@@ -57,19 +57,9 @@
57 } 57 }
58 58
59 .nav-item.search { 59 .nav-item.search {
60 -webkit-box-flex: 1;
61 -ms-flex: 1 1 auto;
62 flex: 1 1 auto; 60 flex: 1 1 auto;
63 -webkit-box-pack: end;
64 -ms-flex-pack: end;
65 justify-content: flex-end;
66 cursor: auto;
67 } 61 }
68 62
69
70
71 .nav-item.submit {}
72
73 .nav-item.auth { 63 .nav-item.auth {
74 64
75 color: #ffffff; 65 color: #ffffff;
......
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
6 <div class="main-nav"> 6 <div class="main-nav">
7 <div class="nav-list"> 7 <div class="nav-list">
8 <div class="main-nav-list"> 8 <div class="main-nav-list">
9 <v-dropdown v-for="item in navList" :key="item.id" :title="item.name" :data-list="item.list"> 9 <v-dropdown v-for="item in navList" :key="item.id" :data-obj="item" :data-list="item.list">
10 </v-dropdown> 10 </v-dropdown>
11 </div> 11 </div>
12 <div class="nav-item search"> 12 <div class="nav-item search">
...@@ -14,10 +14,8 @@ ...@@ -14,10 +14,8 @@
14 <div class="nav-item submit"> 14 <div class="nav-item submit">
15 </div> 15 </div>
16 <div class="nav-item auth"> 16 <div class="nav-item auth">
17 <div class="user"> 17 <v-dropdown class="lang" :type="'login'" :data-obj="loginData" :data-list="loginData.list"></v-dropdown>
18 <img class="icon-img" src="@/assets/images/home/icon-user.png"> 登入 18 <v-dropdown class="lang" :type="'lang'" :data-obj="langData" :data-list="langData.list"></v-dropdown>
19 </div>
20 <v-dropdown class="lang" :type="'lang'" :title="langData.name" :data-list="langData.list"></v-dropdown>
21 </div> 19 </div>
22 </div> 20 </div>
23 </div> 21 </div>
......
...@@ -8,9 +8,10 @@ ...@@ -8,9 +8,10 @@
8 display: flex; 8 display: flex;
9 justify-content: center; 9 justify-content: center;
10 align-items: center; 10 align-items: center;
11 flex-wrap: wrap;
11 12
12 span { 13 span {
13 margin: 0 0.7rem; 14 margin: 0.4rem 0.7rem;
14 text-align: center; 15 text-align: center;
15 } 16 }
16 17
......
1 1
2 <template> 2 <template>
3 <div class="comp"> 3 <div class="comp">
4 <div class="pagination"> 4 <div class="pagination gird-g">
5 <span class="pointer" :class="{'disabled' : cur == 1}"> 5 <span class="pointer" :class="{'disabled' : cur == 1}">
6 <a @click="prevPage()">上一页</a> 6 <a @click="prevPage()">上一页</a>
7 </span> 7 </span>
...@@ -11,6 +11,7 @@ ...@@ -11,6 +11,7 @@
11 <span class="pointer" :class="{'disabled' : cur == total}"> 11 <span class="pointer" :class="{'disabled' : cur == total}">
12 <a @click="nextPage()">下一页</a> 12 <a @click="nextPage()">下一页</a>
13 </span> 13 </span>
14
14 <span>第</span> 15 <span>第</span>
15 <input v-model="sel" class="ipt" :placeholder="cur" type="text"> 16 <input v-model="sel" class="ipt" :placeholder="cur" type="text">
16 <span>/ {{total}}页</span> 17 <span>/ {{total}}页</span>
......
...@@ -18,8 +18,8 @@ Mock.bootstrap(); ...@@ -18,8 +18,8 @@ Mock.bootstrap();
18 Vue.config.productionTip = false 18 Vue.config.productionTip = false
19 19
20 // Purecss 20 // Purecss
21 import Purecss from 'purecss' 21 // import Purecss from 'purecss'
22 Vue.use(Purecss); 22 // Vue.use(Purecss);
23 23
24 // 国际化 24 // 国际化
25 Vue.use(VueI18n) 25 Vue.use(VueI18n)
......
...@@ -24,9 +24,39 @@ export default { ...@@ -24,9 +24,39 @@ export default {
24 }, 24 },
25 components: {}, 25 components: {},
26 methods: { 26 methods: {
27 toNewsDetail(){ 27
28 /**
29 * 推荐产品
30 */
31 onRecommendHandler(val) {
32 if (val == 1) {
33 this.$router.push({
34 path: "/product"
35 })
36 }
37 if (val == 2) {
38 this.$router.push({
39 path: "/reservation"
40 })
41 }
42 },
43
44 /**
45 * 推荐产品
46 */
47 onMoreNewsHandler() {
48 this.$router.push({
49 path: "/news/list"
50 })
51 },
52
53 /**
54 * 去新闻详情页面
55 * 需要带id
56 */
57 toNewsDetail() {
28 this.$router.push({ 58 this.$router.push({
29 path:'/news/detail' 59 path: '/news/detail'
30 }) 60 })
31 }, 61 },
32 chn(val) { 62 chn(val) {
......
...@@ -16,15 +16,15 @@ ...@@ -16,15 +16,15 @@
16 <!-- 推荐产品 --> 16 <!-- 推荐产品 -->
17 <div class="box recommend"> 17 <div class="box recommend">
18 <div class="recommend-item"> 18 <div class="recommend-item">
19 <div class="btn"></div> 19 <div @click="onRecommendHandler(1)" class="btn"></div>
20 <img src="@/assets/images/index/recommend-1.png"> 20 <img src="@/assets/images/index/recommend-1.png">
21 </div> 21 </div>
22 <div class="recommend-item"> 22 <div class="recommend-item">
23 <div class="btn"></div> 23 <div @click="onRecommendHandler(2)" class="btn"></div>
24 <img src="@/assets/images/index/recommend-2.png"> 24 <img src="@/assets/images/index/recommend-2.png">
25 </div> 25 </div>
26 <div class="recommend-item"> 26 <div class="recommend-item">
27 <div class="btn"></div> 27 <div @click="onRecommendHandler(3)" class="btn"></div>
28 <img src="@/assets/images/index/recommend-3.png"> 28 <img src="@/assets/images/index/recommend-3.png">
29 </div> 29 </div>
30 </div> 30 </div>
...@@ -41,7 +41,7 @@ ...@@ -41,7 +41,7 @@
41 <div class="tit">新聞資訊</div> 41 <div class="tit">新聞資訊</div>
42 <div class="under-line"></div> 42 <div class="under-line"></div>
43 <div class="news-wrap"> 43 <div class="news-wrap">
44 <div class="more pointer"> 44 <div @click="onMoreNewsHandler" class="more pointer">
45 查看更多 > 45 查看更多 >
46 </div> 46 </div>
47 <div @click="toNewsDetail()" class="news-item"> 47 <div @click="toNewsDetail()" class="news-item">
......
1 import api from '@/api/api'
2 import {
3 httpGet,
4 httpPost
5 } from '@/api/fetch-api.js'
6
7 export default {
8 data() {
9 return {
10 key: 'value',
11 type: 1, // 1:帐密登陆 2:OTP登陆
12 }
13 },
14 components: {},
15 methods: {
16 onCheckHandler() {
17
18 },
19 onProtocolHandler() {
20 this.$router.push({
21 path: "/protocol"
22 })
23 },
24 onSubmitHandler() {
25
26 },
27 onRegisterHandler() {
28 this.$router.push({
29 path: "/register"
30 })
31 },
32 onForgetHandler() {
33
34 },
35 onLoginTypeHandler(val) {
36 this.type = val;
37 },
38 initData() {}
39 },
40 mounted() {},
41 created() {}
42 }
1 @import '@/styles/_support';
2
3 .content {
4 position: relative;
5 min-height: 50rem;
6 padding-bottom: 2.25rem;
7 }
8
9 .top-space {
10 height: 2.25rem;
11 }
12
13 .box {
14 position: relative;
15 }
16
17 .ebg {
18 position: absolute;
19 bottom: 0;
20 left: 0;
21 right: 0;
22
23 img {
24 max-width: 100%;
25 }
26 }
27
28 .login {
29 color: #4c4948;
30 @extend .bb;
31 padding: 2rem 5rem 3.5rem;
32 border-bottom: solid .666667rem #006441;
33
34 margin: auto;
35 max-width: 40.25rem;
36 border-radius: .75rem;
37 box-shadow: 0 0 1.5rem 0 rgba(255, 87, 0, 0.15);
38 background-color: #ffffff;
39
40 &-tit {
41 font-family: MicrosoftYaHei;
42 color: #f05a23;
43 text-align: center;
44 font-size: 18px;
45 font-weight: bold;
46 letter-spacing: .2rem;
47 }
48
49 &-nav {
50 margin: 2.25rem 0 auto;
51 display: flex;
52 justify-content: center;
53 align-items: center;
54
55 &-v-line {
56 width: .2rem;
57 height: 1.25rem;
58 background-color: #4c4948;
59 margin: 0 2.25rem;
60 }
61
62 &-tit {
63 font-family: MicrosoftYaHei;
64 flex: 1;
65 font-size: 18px;
66 font-weight: bold;
67 color: #4c4948;
68 // text-shadow: 3px 5.2px 9px rgba(76, 73, 72, 0.27);
69 }
70
71 .active {
72 color: #f05a23;
73 text-shadow: 3px 5.2px 9px rgba(236, 100, 41, 0.27);
74 }
75 }
76
77 &-protocol {
78 margin: 2.5rem auto 0;
79 display: flex;
80 align-items: center;
81
82 .check {
83 height: 1rem;
84 margin-right: .6rem;
85 }
86
87 .protocol {
88 color: #f05a23;
89 }
90 }
91
92 &-submit {
93 @include btc2(13.5rem, 4rem, 16px);
94 margin: 3.25rem auto 0;
95 letter-spacing: 1.6px;
96 }
97
98 &-func {
99 margin: 1.5rem auto 0;
100 display: flex;
101 justify-content: center;
102
103 &-btn {
104 margin: 0 1.25rem;
105 text-decoration: underline;
106 }
107 }
108 }
109
110
111 .form {
112 display: flex;
113 justify-content: space-between;
114 flex-wrap: wrap;
115
116
117 &-item {
118 position: relative;
119 margin-top: 2.75rem;
120
121 .label {
122 font-family: MicrosoftYaHei;
123 font-size: 18px;
124 font-weight: bold;
125 color: #f05a23;
126 display: flex;
127 align-items: center;
128 margin-bottom: 1.25rem;
129
130 img {
131 height: 1.5rem;
132 margin-right: .8rem;
133 }
134 }
135
136 .ipt-wrap {
137 position: relative;
138 display: flex;
139 justify-content: space-between;
140
141 // input和下拉
142 .ipt {
143 @extend .bb;
144 width: 100%;
145 height: 3.5rem;
146 border: solid 1px #dcdddd;
147 background-color: #ffffff;
148 border-radius: 3.5rem;
149 padding: 0 1.75rem;
150 flex: 1;
151 }
152
153 // 长文本
154 .textarea {
155 min-height: 8.75rem;
156 border-radius: 1rem;
157 }
158
159 .down-arrow {
160 position: absolute;
161 top: 1.6rem;
162 right: 2rem;
163 }
164
165
166 .verify-btn {
167 @extend .fcc;
168 font-family: Arial;
169 font-size: 18px;
170 width: 8.5rem;
171 border: solid 1px #dcdddd;
172 background-color: #f2f2f2;
173 flex: none;
174 margin-left: 1.5rem;
175 color: #4c4948;
176 }
177
178 // 框内按钮
179 .ipt2 {
180 display: flex;
181 justify-content: space-between;
182 align-items: center;
183
184 .ipt-code {
185 flex: 1;
186 padding-right: 1.75rem;
187 }
188
189 .veri-btn {
190 color: #f05a23;
191 text-decoration: underline;
192 }
193 }
194
195
196
197
198 }
199
200 }
201 }
202
203 @media (max-width: 950px) {
204 .box {
205 width: 96%;
206 }
207
208 .login {
209 padding: 2rem 1rem 3.5rem;
210 }
211 }
1
2 <template>
3 <div class="content">
4 <div class="ebg">
5 <img src="@/assets/images/common/login-bg.png">
6 </div>
7 <div class="top-space"></div>
8 <div class="box">
9 <!-- 帐密登陆 -->
10 <div v-if="type == 1" class="login">
11 <div class="login-tit">平安壹賬通</div>
12 <div class="login-nav">
13 <div @click="onLoginTypeHandler(1)" class="login-nav-tit text-r pointer active">账密登录</div>
14 <div class="login-nav-v-line">|</div>
15 <div @click="onLoginTypeHandler(2)" class="login-nav-tit pointer">動態密碼登录</div>
16 </div>
17 <div class="gird-g form">
18 <div class="pure-u-1 form-item">
19 <div class="label">
20 <img src="@/assets/images/login/icon-login-user.png"> 账号
21 </div>
22 <div class="ipt-wrap">
23 <input placeholder="請輸入證件號/一账通用户名/手机号" class="ipt" type="text">
24 </div>
25 </div>
26 <div class="pure-u-1 form-item">
27 <div class="label">
28 <img src="@/assets/images/login/icon-login-password.png"> 密码
29 </div>
30 <div class="ipt-wrap">
31 <input placeholder="輸入登錄密碼" class="ipt" type="text">
32 </div>
33 </div>
34 <div class="pure-u-1 form-item">
35 <div class="ipt-wrap">
36 <input placeholder="請輸入驗證碼" class="ipt ipt-verify" type="text">
37 <div class="ipt verify-btn pointer">5136</div>
38 </div>
39 </div>
40 </div>
41 <div class="login-protocol">
42 <img @click="onCheckHandler()" class="check pointer" src="@/assets/images/login/login-check.png">同意
43 <span @click="onProtocolHandler()" class="protocol pointer">《平安一账通会员服务协议》</span>
44 </div>
45 <div @click="onSubmitHandler()" class="login-submit pointer">登入</div>
46 <div class="login-func">
47 <div @click="onRegisterHandler()" class="login-func-btn pointer">註冊</div>
48 <div @click="onForgetHandler()" class="login-func-btn pointer">忘記密碼</div>
49 </div>
50 </div>
51
52 <!-- OTP登陆 -->
53 <div v-if="type == 2" class="login">
54 <div class="login-tit">平安壹賬通</div>
55 <div class="login-nav">
56 <div @click="onLoginTypeHandler(1)" class="login-nav-tit text-r pointer">账密登录</div>
57 <div class="login-nav-v-line">|</div>
58 <div @click="onLoginTypeHandler(2)" class="login-nav-tit pointer active">動態密碼登录</div>
59 </div>
60 <div class="gird-g form">
61 <div class="pure-u-1 form-item">
62 <div class="label">
63 <img src="@/assets/images/login/icon-login-phone.png"> 手機號
64 </div>
65 <div class="ipt-wrap">
66 <input placeholder="手機號" class="ipt" type="text">
67 </div>
68 </div>
69 <div class="pure-u-1 form-item">
70 <div class="label">
71 <img src="@/assets/images/login/icon-login-message.png"> 驗證碼
72 </div>
73 <div class="ipt-wrap">
74 <div class="ipt ipt2">
75 <input placeholder="驗證碼" class="ipt-code" type="text">
76 <div class="veri-btn pointer">獲取驗證碼</div>
77 </div>
78 </div>
79 </div>
80 </div>
81 <div class="login-protocol">
82 <img @click="onCheckHandler()" class="check pointer" src="@/assets/images/login/login-check.png">同意
83 <span @click="onProtocolHandler()" class="protocol pointer">《平安一账通会员服务协议》</span>
84 </div>
85 <div @click="onSubmitHandler()" class="login-submit pointer">登入</div>
86 <div class="login-func">
87 <div @click="onRegisterHandler()" class="login-func-btn pointer">註冊</div>
88 <div @click="onForgetHandler()" class="login-func-btn pointer">忘記密碼</div>
89 </div>
90 </div>
91 </div>
92 </div>
93 </template>
94
95 <script src="./login.js"></script>
96 <style lang="scss" scoped>
97 @import "./login.scss";
98 </style>
...@@ -31,6 +31,8 @@ export default { ...@@ -31,6 +31,8 @@ export default {
31 }, 31 },
32 mounted() {}, 32 mounted() {},
33 created() { 33 created() {
34 document.documentElement.scrollTop = 0;
35 document.body.scrollTop = 0;
34 this.initData(); 36 this.initData();
35 } 37 }
36 } 38 }
......
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
9 height: 2rem; 9 height: 2rem;
10 } 10 }
11 11
12 .box{ 12 .box {
13 position: relative; 13 position: relative;
14 } 14 }
15 15
...@@ -18,13 +18,16 @@ ...@@ -18,13 +18,16 @@
18 bottom: 0; 18 bottom: 0;
19 left: 0; 19 left: 0;
20 right: 0; 20 right: 0;
21
22 img {
23 max-width: 100%;
24 }
21 } 25 }
22 26
23 .news { 27 .news {
24 color: #4c4948; 28 color: #4c4948;
25 margin: 0 auto; 29 margin: 0 auto;
26 width: 66.75rem; 30 max-width: 66.75rem;
27
28 31
29 &-item { 32 &-item {
30 33
......
...@@ -27,7 +27,7 @@ export default { ...@@ -27,7 +27,7 @@ export default {
27 tit: "香港邮政局", 27 tit: "香港邮政局",
28 type: "", 28 type: "",
29 }], 29 }],
30 curIndex: 2, 30 curIndex: 0,
31 } 31 }
32 }, 32 },
33 components: {}, 33 components: {},
......
1 @import '@/styles/_support'; 1 @import '@/styles/_support';
2 2
3 .content {} 3 .content {
4 }
4 5
5 .top-space { 6 .top-space {
6 height: 2.25rem; 7 height: 2.25rem;
...@@ -12,13 +13,15 @@ ...@@ -12,13 +13,15 @@
12 @extend .bb; 13 @extend .bb;
13 padding: 4.5rem 1.75rem 3.5rem; 14 padding: 4.5rem 1.75rem 3.5rem;
14 border-bottom: none; 15 border-bottom: none;
15 @include border-top-radius(.75rem) 16 @include border-top-radius(.75rem);
16 } 17 }
17 18
18 .payment { 19 .payment {
20 min-height: 26rem;
19 &-nav { 21 &-nav {
20 display: flex; 22 display: flex;
21 justify-content: space-between; 23 justify-content: space-between;
24 flex-wrap: wrap;
22 25
23 &-item { 26 &-item {
24 @extend .pointer; 27 @extend .pointer;
...@@ -55,6 +58,7 @@ ...@@ -55,6 +58,7 @@
55 58
56 &-cont { 59 &-cont {
57 margin-top: 3.5rem; 60 margin-top: 3.5rem;
61 max-width: 67.5rem;
58 62
59 &-item { 63 &-item {
60 @extend .bb; 64 @extend .bb;
...@@ -62,28 +66,15 @@ ...@@ -62,28 +66,15 @@
62 padding: 0 1rem; 66 padding: 0 1rem;
63 67
64 ul { 68 ul {
65 // @extend .bb; 69 list-style-type: none;
66 padding-left: 1.2rem;
67 } 70 }
68 71
69 li { 72 li {
70 list-style-type: square; 73 background-image: url('~@assets/images/payment-type/icon-li.png');
71 // display: flex; 74 background-repeat: no-repeat;
75 background-position: 0rem 1.25rem;
76 padding-left: 1rem;
72 } 77 }
73
74 // li:before {
75 // content: ""; //圆点
76 // color: #f05a23; //颜色
77 // margin-right: 1rem;
78 // background-color: #f05a23;
79 // width: .4rem;
80 // height: .4rem;
81 // display: inline-block;
82 // margin-bottom: .12rem;
83 // // display: block;
84 // // margin-top: 1.2rem;
85 // }
86
87 } 78 }
88 } 79 }
89 } 80 }
......
1 import api from '@/api/api'
2 import {
3 httpGet,
4 httpPost
5 } from '@/api/fetch-api.js'
6
7 export default {
8 data() {
9 return {
10 key: 'value',
11 type: 1, // 1:手机验证 2:输入密码
12 }
13 },
14 components: {},
15 methods: {
16 onCheckHandler() {
17
18 },
19 onProtocolHandler() {
20 this.$router.push({
21 path: "/protocol"
22 })
23 },
24 onSubmitHandler() {
25 this.type = 2;
26 },
27 onRegisterHandler() {
28
29 },
30 onForgetHandler() {
31
32 },
33 onLoginTypeHandler(val) {
34
35 },
36 initData() {}
37 },
38 mounted() {},
39 created() {}
40 }
1 @import '@/styles/_support';
2
3 .content {
4 position: relative;
5 min-height: 50rem;
6 padding-bottom: 2.25rem;
7 }
8
9 .top-space {
10 height: 2.75rem;
11 }
12
13 .box {
14 position: relative;
15 }
16
17 .ebg {
18 position: absolute;
19 bottom: 0;
20 left: 0;
21 right: 0;
22
23 img {
24 max-width: 100%;
25 }
26 }
27
28 .step {
29 @extend .fcc;
30 margin-bottom: 3rem;
31 }
32
33 .login {
34 color: #4c4948;
35 @extend .bb;
36 padding: 2.75rem 5rem 4.25rem;
37 border-bottom: solid .666667rem #006441;
38
39 margin: auto;
40 max-width: 40.25rem;
41 border-radius: .75rem;
42 box-shadow: 0 0 1.5rem 0 rgba(255, 87, 0, 0.15);
43 background-color: #ffffff;
44
45 &-tit {
46 font-family: MicrosoftYaHei;
47 color: #f05a23;
48 text-align: center;
49 font-size: 18px;
50 font-weight: bold;
51 letter-spacing: .2rem;
52 text-shadow: 3px 5.2px 9px rgba(236, 100, 41, 0.27);
53 }
54
55
56 &-nav {
57 margin: 2.25rem 0 auto;
58 display: flex;
59 justify-content: center;
60 align-items: center;
61
62 &-v-line {
63 width: .2rem;
64 height: 1.25rem;
65 background-color: #4c4948;
66 margin: 0 2.25rem;
67 }
68
69 &-tit {
70 font-family: MicrosoftYaHei;
71 flex: 1;
72 font-size: 18px;
73 font-weight: bold;
74 color: #4c4948;
75 // text-shadow: 3px 5.2px 9px rgba(76, 73, 72, 0.27);
76 }
77
78 .active {
79 color: #f05a23;
80 text-shadow: 3px 5.2px 9px rgba(236, 100, 41, 0.27);
81 }
82 }
83
84 &-protocol {
85 margin: 2.5rem auto 0;
86 display: flex;
87 align-items: center;
88
89 .check {
90 height: 1rem;
91 margin-right: .6rem;
92 }
93
94 .protocol {
95 color: #f05a23;
96 }
97 }
98
99 &-submit {
100 @include btc2(13.5rem, 4rem, 16px);
101 margin: 8.25rem auto 0;
102 letter-spacing: 1.6px;
103 }
104
105 &-func {
106 margin: 1.5rem auto 0;
107 display: flex;
108 justify-content: center;
109
110 &-btn {
111 margin: 0 1.25rem;
112 text-decoration: underline;
113 }
114 }
115 }
116
117 .form {
118 display: flex;
119 justify-content: space-between;
120 flex-wrap: wrap;
121
122
123 &-item {
124 position: relative;
125 margin-top: 3.75rem;
126
127 .label {
128 font-family: MicrosoftYaHei;
129 font-size: 18px;
130 font-weight: bold;
131 color: #f05a23;
132 display: flex;
133 align-items: center;
134 margin-bottom: 1.25rem;
135
136 img {
137 height: 1.5rem;
138 margin-right: .8rem;
139 }
140 }
141
142 .ipt-wrap {
143 position: relative;
144 display: flex;
145 justify-content: space-between;
146
147 // input和下拉
148 .ipt {
149 @extend .bb;
150 width: 100%;
151 height: 3.5rem;
152 border: solid 1px #dcdddd;
153 background-color: #ffffff;
154 border-radius: 3.5rem;
155 padding: 0 1.75rem;
156 flex: 1;
157 }
158
159 // 长文本
160 .textarea {
161 min-height: 8.75rem;
162 border-radius: 1rem;
163 }
164
165 .down-arrow {
166 position: absolute;
167 top: 1.6rem;
168 right: 2rem;
169 }
170
171
172 .verify-btn {
173 @extend .fcc;
174 font-family: Arial;
175 font-size: 18px;
176 width: 8.5rem;
177 border: solid 1px #dcdddd;
178 background-color: #f2f2f2;
179 flex: none;
180 margin-left: 1.5rem;
181 color: #4c4948;
182 }
183
184 // 框内按钮
185 .ipt2 {
186 display: flex;
187 justify-content: space-between;
188 align-items: center;
189
190 .ipt-tel {
191 flex: 1;
192 padding-left: 1.75rem;
193 }
194
195 .ipt-code {
196 flex: 1;
197 padding-right: 1.75rem;
198 }
199
200 .region-tel{
201
202 }
203
204 .veri-btn {
205 color: #f05a23;
206 text-decoration: underline;
207 }
208 }
209
210 }
211
212 }
213 }
214
215 @media (max-width: 950px) {
216 .box {
217 width: 96%;
218 }
219
220 .login {
221 padding: 2rem 1rem 3.5rem;
222 }
223 }
1
2 <template>
3 <div class="content">
4 <div class="ebg">
5 <img src="@/assets/images/common/login-bg.png">
6 </div>
7 <div class="top-space"></div>
8 <div class="step">
9 <img v-if="type == 1" src="@/assets/images/register/register-step-1.png">
10 <img v-if="type == 2" src="@/assets/images/register/register-step-2.png">
11 </div>
12 <div class="box">
13 <div v-if="type == 1" class="login">
14 <div class="login-tit">歡迎註冊一賬通</div>
15 <div class="gird-g form">
16 <div class="pure-u-1 form-item">
17 <div class="ipt-wrap">
18 <img class="down-arrow" src="@/assets/images/reservation/re-down-arrow.png" alt="">
19 <select class="ipt">
20 <option>香港手機號</option>
21 </select>
22 </div>
23 </div>
24 <div class="pure-u-1 form-item">
25 <div class="ipt-wrap">
26 <div class="ipt ipt2">
27 <div class="region-tel">+852</div>
28 <input placeholder="请输入8位手机号码" class="ipt-tel" type="text">
29 </div>
30 </div>
31 </div>
32 <div class="pure-u-1 form-item">
33 <div class="ipt-wrap">
34 <div class="ipt ipt2">
35 <input placeholder="請輸入驗證碼" class="ipt-code" type="text">
36 <div class="veri-btn pointer">獲取驗證碼</div>
37 </div>
38 </div>
39 </div>
40 </div>
41 <div class="login-protocol">
42 <img @click="onCheckHandler()" class="check pointer" src="@/assets/images/login/login-check.png">同意
43 <span @click="onProtocolHandler()" class="protocol pointer">《平安一账通会员服务协议》</span>
44 </div>
45 <div @click="onSubmitHandler()" class="login-submit pointer">點擊註冊</div>
46 </div>
47 <div v-if="type == 2" class="login">
48 <div class="login-tit">請設置新的密碼</div>
49 <div class="gird-g form">
50 <div class="pure-u-1 form-item">
51 <div class="label">
52 <img src="@/assets/images/register/icon-register-lock.png"> 新密碼
53 </div>
54 <div class="ipt-wrap">
55 <input placeholder="請輸入證件號/一账通用户名/手机号" class="ipt" type="text">
56 </div>
57 </div>
58 <div class="pure-u-1 form-item">
59 <div class="label">
60 <img src="@/assets/images/register/icon-register-lock.png"> 確認密碼
61 </div>
62 <div class="ipt-wrap">
63 <input placeholder="輸入登錄密碼" class="ipt" type="text">
64 </div>
65 </div>
66 </div>
67 <div @click="onSubmitHandler()" class="login-submit pointer">確認</div>
68 </div>
69 </div>
70 </div>
71 </template>
72
73 <script src="./register.js"></script>
74 <style lang="scss" scoped>
75 @import "./register.scss";
76 </style>
1 import api from '@/api/api'
2 import {
3 httpGet,
4 httpPost
5 } from '@/api/fetch-api.js'
6
7 export default {
8 data() {
9 return {
10 key: 'value'
11 }
12 },
13 components: {},
14 methods: {
15 initData() {}
16 },
17 mounted() {},
18 created() {}
19 }
1 @import '@/styles/_support';
2
3 .content {
4 padding-bottom: 6rem;
5 }
6
7 .top-space {
8 height: 4.25rem;
9 }
10
11 .box {}
12
13 .form {
14 display: flex;
15 justify-content: space-between;
16 flex-wrap: wrap;
17
18 &-item {
19 position: relative;
20 padding: 0 1.75rem;
21 margin-bottom: 2.5rem;
22
23 .label {
24 color: #f05a23;
25 display: flex;
26 align-items: center;
27 margin-bottom: .7rem;
28
29 img {
30 height: 1rem;
31 margin-right: .8rem;
32 }
33 }
34
35 .ipt-wrap {
36 position: relative;
37
38 // input和下拉
39 .ipt {
40 @extend .bb;
41
42 width: 100%;
43 height: 3.5rem;
44 border: solid 1px #dcdddd;
45 background-color: #ffffff;
46 border-radius: 3.5rem;
47 padding: 0 2.5rem;
48 }
49
50 // 长文本
51 .textarea {
52 min-height: 8.75rem;
53 border-radius: 1rem;
54 }
55
56 .down-arrow {
57 position: absolute;
58 top: 1.6rem;
59 right: 2rem;
60 }
61 }
62
63 }
64
65 // 不换行
66 &-item2 {
67 display: flex;
68
69 .label {
70 min-width: 13.75rem;
71 height: 2.5rem;
72 }
73
74 .cont {
75
76 display: flex;
77
78 .boo-btn {
79 width: 5.25rem;
80 height: 2.5rem;
81 line-height: 2.5rem;
82 border: solid 1px #dcdddd;
83 background-color: #ffffff;
84 border-radius: 2.5rem;
85 text-align: center;
86 margin: 0 0.6rem;
87 }
88
89 .active {
90 border: none;
91 color: #ffffff;
92 background-color: #f05a23;
93 box-shadow: 0px 10px 13px 0 rgba(236, 100, 41, 0.2);
94 background-blend-mode: soft-light, ;
95 // background-image: linear-gradient(to top, #000000, #ffffff), linear-gradient(to bottom, #f05a23, #f05a23);
96 background-image: linear-gradient(to bottom, #f05f28, #f05021);
97 }
98 }
99 }
100
101 &-item3 {
102 display: flex;
103 align-items: flex-start;
104 flex-wrap: wrap;
105
106 .label {
107 min-width: 13.75rem;
108 }
109
110 .cont {
111 .calendar {
112 img {
113 max-width: 96%;
114 }
115 }
116 }
117 }
118 }
119
120
121 .notice {
122 margin-top: 4rem;
123 @extend .bb;
124 padding: 0 1rem;
125
126 &-item {
127 position: relative;
128 line-height: 2;
129 letter-spacing: 1.2px;
130 margin-bottom: 1rem;
131
132 &-icon {
133 // display: inline-block;
134 position: absolute;
135 top: .5rem;
136 }
137 }
138 }
1
2 <template>
3 <div class="content">
4 <div class="top-space"></div>
5 <div class="box">
6 <div class="gird-g form">
7
8 <div class="pure-u-1 pure-u-md-1-2 form-item">
9 <div class="label">
10 <img src="@/assets/images/reservation/icon-re-name.png"> 姓名
11 </div>
12 <div class="ipt-wrap">
13 <input placeholder="姓名" class="ipt" type="text">
14 </div>
15 </div>
16
17 <div class="pure-u-1 pure-u-md-1-2 form-item">
18 <div class="label">
19 <img src="@/assets/images/reservation/icon-re-contact.png">聯絡方式
20 </div>
21 <div class="ipt-wrap">
22 <img class="down-arrow" src="@/assets/images/reservation/re-down-arrow.png" alt="">
23 <select class="ipt">
24 <option>電話</option>
25 </select>
26 </div>
27 </div>
28
29 <div class="pure-u-1 pure-u-md-1-2 form-item">
30 <div class="label">
31 <img src="@/assets/images/reservation/icon-re-name.png">聯絡电话
32 </div>
33 <div class="ipt-wrap">
34 <input placeholder="香港號碼/內地號碼" class="ipt" type="text">
35 </div>
36 </div>
37
38 <div class="pure-u-1 pure-u-md-1-2 form-item">
39 <div class="label">
40 <img src="@/assets/images/reservation/icon-re-clock.png">預約類型
41 </div>
42 <div class="ipt-wrap">
43 <img class="down-arrow" src="@/assets/images/reservation/re-down-arrow.png" alt="">
44 <select class="ipt">
45 <option>投保咨詢</option>
46 </select>
47 </div>
48 </div>
49
50 <div class="pure-u-1 form-item">
51 <div class="label">
52 <img src="@/assets/images/reservation/icon-re-arrow-reservation.png">預約說明
53 </div>
54 <div class="ipt-wrap">
55 <textarea class="ipt textarea"></textarea>
56 </div>
57 </div>
58
59 <div class="pure-u-1 form-item form-item2">
60 <div class="label">
61 <img src="@/assets/images/reservation/icon-re-custom.png">是否平安香港客戶
62 </div>
63 <div class="cont">
64 <div class="boo-btn active">是</div>
65 <div class="boo-btn">不是</div>
66 </div>
67 </div>
68
69 <div class="pure-u-1 form-item form-item3">
70 <div class="label">
71 <img src="@/assets/images/reservation/icon-re-calendar.png">期望联络时间
72 </div>
73 <div class="cont">
74 <div class="calendar">
75 <img src="@/assets/images/reservation/re-calendar.png">
76 </div>
77 </div>
78 </div>
79
80 </div>
81 </div>
82
83 <div class="box notice">
84 <p class="notice-item">
85 <img class="notice-item-icon" src="@/assets/images/reservation/icon-re-notice.png"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;本表格所收集的个人资料根据「平安人寿香港个人资料收集声明」处理及只会被用作于联络 阁下之用。然而所收集的个人资料未经您明确授权将不会转移至「平安人寿香港个人资料收集声明」列明以外之第三者机构。您可选择不向我们提供所需的个人资料，惟这样可能导致我们不能联络您。您亦可根据「平安人寿香港个人资料收集声明」之权利查阅及更正个人资料。
86 </p>
87 <p class="notice-item">
88 <img class="notice-item-icon" src="@/assets/images/reservation/icon-re-notice.png"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;本人现确认明白并同意本人的个人资料根据中银人寿个人资料收集声明作以上述用途。
89 </p>
90 </div>
91 </div>
92 </template>
93
94 <script src="./reservation.js"></script>
95 <style lang="scss" >
96 @import "./reservation.scss";
97 </style>
...@@ -23,6 +23,22 @@ const routes = [ ...@@ -23,6 +23,22 @@ const routes = [
23 } 23 }
24 }, 24 },
25 { 25 {
26 path: '/login',
27 name: 'login',
28 component: () => import('./pages/login/login.vue'),
29 meta: {
30 title: ''
31 }
32 },
33 {
34 path: '/register',
35 name: 'register',
36 component: () => import('./pages/register/register.vue'),
37 meta: {
38 title: ''
39 }
40 },
41 {
26 path: '/profile', 42 path: '/profile',
27 name: 'profile', 43 name: 'profile',
28 component: () => import('./pages/profile/profile.vue'), 44 component: () => import('./pages/profile/profile.vue'),
...@@ -81,6 +97,15 @@ const routes = [ ...@@ -81,6 +97,15 @@ const routes = [
81 }, 97 },
82 98
83 { 99 {
100 path: '/reservation',
101 name: 'reservation',
102 component: () => import('./pages/reservation/reservation.vue'),
103 meta: {
104 title: ''
105 }
106 },
107
108 {
84 path: '/product', 109 path: '/product',
85 name: 'product', 110 name: 'product',
86 component: () => import('./pages/product/product.vue'), 111 component: () => import('./pages/product/product.vue'),
...@@ -128,6 +153,10 @@ router.beforeEach((to, from, next) => { ...@@ -128,6 +153,10 @@ router.beforeEach((to, from, next) => {
128 if (title) { 153 if (title) {
129 document.title = title; 154 document.title = title;
130 } 155 }
156 // const scrollTopList = [
157 // "newsList", "newsDetail", "protocol", "privacy", "terms", "paymentType", "reservation"
158 // ]
159
131 next(); 160 next();
132 }); 161 });
133 162
......
...@@ -32,11 +32,13 @@ ...@@ -32,11 +32,13 @@
32 32
33 // 清除浮动 33 // 清除浮动
34 @mixin clearfix() { 34 @mixin clearfix() {
35
35 &:before, 36 &:before,
36 &:after { 37 &:after {
37 content: " "; // 1 38 content: " "; // 1
38 display: table; // 2 39 display: table; // 2
39 } 40 }
41
40 &:after { 42 &:after {
41 clear: both; 43 clear: both;
42 } 44 }
...@@ -80,3 +82,19 @@ ...@@ -80,3 +82,19 @@
80 background-color: transparent; 82 background-color: transparent;
81 border: 0; 83 border: 0;
82 } 84 }
85
86 // 橙色按钮
87 @mixin btc2($wid:5.25rem, $hei:2.5rem, $fontSize:12px) {
88 width: $wid;
89 height: $hei;
90 line-height: $hei;
91 font-size: $fontSize;
92 border-radius: $hei;
93 text-align: center;
94 color: #ffffff;
95 background-color: #f05a23;
96 box-shadow: 0px 10px 13px 0 rgba(236, 100, 41, 0.2);
97 background-blend-mode: soft-light, ;
98 // background-image: linear-gradient(to top, #000000, #ffffff), linear-gradient(to bottom, #f05a23, #f05a23);
99 background-image: linear-gradient(to bottom, #f05f28, #f05021);
100 }
......
1 1 .bis {
2
3
4 .bis {
5 background-repeat: no-repeat; 2 background-repeat: no-repeat;
6 background-size: 100% 100%; 3 background-size: 100% 100%;
7 } 4 }
...@@ -39,4 +36,14 @@ ...@@ -39,4 +36,14 @@
39 cursor: pointer; 36 cursor: pointer;
40 } 37 }
41 38
39 .text-l {
40 text-align: left;
41 }
42 42
43 .text-r {
44 text-align: right;
45 }
46
47 .text-c {
48 text-align: center;
49 }
......