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 1186 additions and 106 deletions
/*!
Pure v1.0.1
Copyright 2013 Yahoo!
Licensed under the BSD License.
https://github.com/pure-css/pure/blob/master/LICENSE.md
*/
@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 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<link rel="stylesheet" href="./css/pure-min.css">
<link rel="stylesheet" href="./css/grids-responsive-min.css">
<title>平安人寿保险官网</title>
</head>
......
......@@ -186,6 +186,12 @@ select {
-moz-appearance: none;
}
input {
background: none;
outline: none;
border: none;
}
button::-moz-focus-inner,
input,
input[type="reset"]::-moz-focus-inner,
......@@ -330,7 +336,6 @@ textarea {
position: relative;
}
.swiper-pagination-bullet {
width: 1rem !important;
height: 1rem !important;
......
......@@ -7,7 +7,7 @@ export default {
data() {
return {
activeIndex: 0,
sTitle: this.title,
sTitle: this.dataObj && this.dataObj.name || '',
};
},
props: {
......@@ -17,10 +17,10 @@ export default {
return "nav";
}
},
title: {
type: String,
dataObj: {
type: Object,
default () {
return "";
return {};
}
},
dataList: {
......@@ -44,6 +44,14 @@ export default {
}
},
methods: {
onNavHandler() {
let path = this.dataObj && this.dataObj.path || "";
if (path) {
this.$router.push({
path: path
})
}
},
onOverHandler(event) {
let ul = event.currentTarget.childNodes[1].childNodes[1];
ul.style.display = "block";
......
......@@ -21,8 +21,6 @@
}
span:hover {
// background: #f6f6f6;
// color: #ec6429;
}
ul {
......@@ -45,10 +43,22 @@
}
li:hover {
// background: #f6f6f6;
color: #ec6429;
}
}
}
.user {
width: 7.333333rem;
height: 2.25rem;
background-color: #f05a23;
border-radius: 1.333333rem;
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
.icon-img {
margin: 0 .5rem;
}
}
......
<template>
<div>
<div class="drop-list" @mouseover="onOverHandler($event)" @mouseout="onOutHandler($event)">
<span>
{{sTitle}}
<i></i>
</span>
<!-- 登陆下拉样式 -->
<template v-if="type=='login'">
<div class="user">
<img class="icon-img" src="@/assets/images/home/icon-user.png"> 登入
</div>
</template>
<template v-else>
<span @click="onNavHandler()">
{{dataObj.name}}
</span>
</template>
<div class="list">
<div class="space"></div>
<ul v-dpl>
......
......@@ -14,6 +14,8 @@ export default {
components: {},
methods: {
toPage(name) {
document.documentElement.scrollTop = 0;
document.body.scrollTop = 0;
this.$router.push({
name: name
})
......
......@@ -21,9 +21,9 @@
</div>
<div class="nav">
<div class="nav-v">
<div class="n-item">關於我們</div>
<div class="n-item">集团介绍</div>
<div class="n-item">新聞資訊</div>
<div @click="toPage('profile')" class="n-item">關於我們</div>
<div @click="toPage('profile')" class="n-item">集团介绍</div>
<div @click="toPage('newsList')" class="n-item">新聞資訊</div>
<div class="n-item">加入我們</div>
</div>
<div class="nav-v">
......
......@@ -13,10 +13,12 @@ export default {
maxClientWidth: 950,
navList: [{
name: "產品介紹",
path: "",
list: []
},
{
name: "客戶服務",
path: "",
list: [{
name: "保單查詢",
path: ""
......@@ -43,16 +45,18 @@ export default {
},
{
name: "預約服務",
path: ""
path: "/reservation"
}
]
},
{
name: "新聞資訊",
path: "/news/list",
list: []
},
{
name: "關於平安人壽",
path: "",
list: [{
name: "公司簡介",
path: "/profile"
......@@ -64,8 +68,29 @@ export default {
]
},
],
loginData: {
name: "登入",
path: "",
list: [{
name: "登入",
path: "/login",
value: ""
},
{
name: "修改密码",
path: "",
value: ""
},
{
name: "登出",
path: "",
value: ""
},
]
},
langData: {
name: "繁",
path: "",
list: [{
name: "繁",
path: "",
......
......@@ -57,19 +57,9 @@
}
.nav-item.search {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
cursor: auto;
}
.nav-item.submit {}
.nav-item.auth {
color: #ffffff;
......
......@@ -6,7 +6,7 @@
<div class="main-nav">
<div class="nav-list">
<div class="main-nav-list">
<v-dropdown v-for="item in navList" :key="item.id" :title="item.name" :data-list="item.list">
<v-dropdown v-for="item in navList" :key="item.id" :data-obj="item" :data-list="item.list">
</v-dropdown>
</div>
<div class="nav-item search">
......@@ -14,10 +14,8 @@
<div class="nav-item submit">
</div>
<div class="nav-item auth">
<div class="user">
<img class="icon-img" src="@/assets/images/home/icon-user.png"> 登入
</div>
<v-dropdown class="lang" :type="'lang'" :title="langData.name" :data-list="langData.list"></v-dropdown>
<v-dropdown class="lang" :type="'login'" :data-obj="loginData" :data-list="loginData.list"></v-dropdown>
<v-dropdown class="lang" :type="'lang'" :data-obj="langData" :data-list="langData.list"></v-dropdown>
</div>
</div>
</div>
......
......@@ -8,9 +8,10 @@
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
span {
margin: 0 0.7rem;
margin: 0.4rem 0.7rem;
text-align: center;
}
......
<template>
<div class="comp">
<div class="pagination">
<div class="pagination gird-g">
<span class="pointer" :class="{'disabled' : cur == 1}">
<a @click="prevPage()">上一页</a>
</span>
......@@ -11,6 +11,7 @@
<span class="pointer" :class="{'disabled' : cur == total}">
<a @click="nextPage()">下一页</a>
</span>
<span>第</span>
<input v-model="sel" class="ipt" :placeholder="cur" type="text">
<span>/ {{total}}页</span>
......
......@@ -18,8 +18,8 @@ Mock.bootstrap();
Vue.config.productionTip = false
// Purecss
import Purecss from 'purecss'
Vue.use(Purecss);
// import Purecss from 'purecss'
// Vue.use(Purecss);
// 国际化
Vue.use(VueI18n)
......
......@@ -24,9 +24,39 @@ export default {
},
components: {},
methods: {
toNewsDetail(){
/**
* 推荐产品
*/
onRecommendHandler(val) {
if (val == 1) {
this.$router.push({
path: "/product"
})
}
if (val == 2) {
this.$router.push({
path: "/reservation"
})
}
},
/**
* 推荐产品
*/
onMoreNewsHandler() {
this.$router.push({
path: "/news/list"
})
},
/**
* 去新闻详情页面
* 需要带id
*/
toNewsDetail() {
this.$router.push({
path:'/news/detail'
path: '/news/detail'
})
},
chn(val) {
......
......@@ -16,15 +16,15 @@
<!-- 推荐产品 -->
<div class="box recommend">
<div class="recommend-item">
<div class="btn"></div>
<div @click="onRecommendHandler(1)" class="btn"></div>
<img src="@/assets/images/index/recommend-1.png">
</div>
<div class="recommend-item">
<div class="btn"></div>
<div @click="onRecommendHandler(2)" class="btn"></div>
<img src="@/assets/images/index/recommend-2.png">
</div>
<div class="recommend-item">
<div class="btn"></div>
<div @click="onRecommendHandler(3)" class="btn"></div>
<img src="@/assets/images/index/recommend-3.png">
</div>
</div>
......@@ -41,7 +41,7 @@
<div class="tit">新聞資訊</div>
<div class="under-line"></div>
<div class="news-wrap">
<div class="more pointer">
<div @click="onMoreNewsHandler" class="more pointer">
查看更多 >
</div>
<div @click="toNewsDetail()" class="news-item">
......
import api from '@/api/api'
import {
httpGet,
httpPost
} from '@/api/fetch-api.js'
export default {
data() {
return {
key: 'value',
type: 1, // 1:帐密登陆 2:OTP登陆
}
},
components: {},
methods: {
onCheckHandler() {
},
onProtocolHandler() {
this.$router.push({
path: "/protocol"
})
},
onSubmitHandler() {
},
onRegisterHandler() {
this.$router.push({
path: "/register"
})
},
onForgetHandler() {
},
onLoginTypeHandler(val) {
this.type = val;
},
initData() {}
},
mounted() {},
created() {}
}
@import '@/styles/_support';
.content {
position: relative;
min-height: 50rem;
padding-bottom: 2.25rem;
}
.top-space {
height: 2.25rem;
}
.box {
position: relative;
}
.ebg {
position: absolute;
bottom: 0;
left: 0;
right: 0;
img {
max-width: 100%;
}
}
.login {
color: #4c4948;
@extend .bb;
padding: 2rem 5rem 3.5rem;
border-bottom: solid .666667rem #006441;
margin: auto;
max-width: 40.25rem;
border-radius: .75rem;
box-shadow: 0 0 1.5rem 0 rgba(255, 87, 0, 0.15);
background-color: #ffffff;
&-tit {
font-family: MicrosoftYaHei;
color: #f05a23;
text-align: center;
font-size: 18px;
font-weight: bold;
letter-spacing: .2rem;
}
&-nav {
margin: 2.25rem 0 auto;
display: flex;
justify-content: center;
align-items: center;
&-v-line {
width: .2rem;
height: 1.25rem;
background-color: #4c4948;
margin: 0 2.25rem;
}
&-tit {
font-family: MicrosoftYaHei;
flex: 1;
font-size: 18px;
font-weight: bold;
color: #4c4948;
// text-shadow: 3px 5.2px 9px rgba(76, 73, 72, 0.27);
}
.active {
color: #f05a23;
text-shadow: 3px 5.2px 9px rgba(236, 100, 41, 0.27);
}
}
&-protocol {
margin: 2.5rem auto 0;
display: flex;
align-items: center;
.check {
height: 1rem;
margin-right: .6rem;
}
.protocol {
color: #f05a23;
}
}
&-submit {
@include btc2(13.5rem, 4rem, 16px);
margin: 3.25rem auto 0;
letter-spacing: 1.6px;
}
&-func {
margin: 1.5rem auto 0;
display: flex;
justify-content: center;
&-btn {
margin: 0 1.25rem;
text-decoration: underline;
}
}
}
.form {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
&-item {
position: relative;
margin-top: 2.75rem;
.label {
font-family: MicrosoftYaHei;
font-size: 18px;
font-weight: bold;
color: #f05a23;
display: flex;
align-items: center;
margin-bottom: 1.25rem;
img {
height: 1.5rem;
margin-right: .8rem;
}
}
.ipt-wrap {
position: relative;
display: flex;
justify-content: space-between;
// input和下拉
.ipt {
@extend .bb;
width: 100%;
height: 3.5rem;
border: solid 1px #dcdddd;
background-color: #ffffff;
border-radius: 3.5rem;
padding: 0 1.75rem;
flex: 1;
}
// 长文本
.textarea {
min-height: 8.75rem;
border-radius: 1rem;
}
.down-arrow {
position: absolute;
top: 1.6rem;
right: 2rem;
}
.verify-btn {
@extend .fcc;
font-family: Arial;
font-size: 18px;
width: 8.5rem;
border: solid 1px #dcdddd;
background-color: #f2f2f2;
flex: none;
margin-left: 1.5rem;
color: #4c4948;
}
// 框内按钮
.ipt2 {
display: flex;
justify-content: space-between;
align-items: center;
.ipt-code {
flex: 1;
padding-right: 1.75rem;
}
.veri-btn {
color: #f05a23;
text-decoration: underline;
}
}
}
}
}
@media (max-width: 950px) {
.box {
width: 96%;
}
.login {
padding: 2rem 1rem 3.5rem;
}
}
<template>
<div class="content">
<div class="ebg">
<img src="@/assets/images/common/login-bg.png">
</div>
<div class="top-space"></div>
<div class="box">
<!-- 帐密登陆 -->
<div v-if="type == 1" class="login">
<div class="login-tit">平安壹賬通</div>
<div class="login-nav">
<div @click="onLoginTypeHandler(1)" class="login-nav-tit text-r pointer active">账密登录</div>
<div class="login-nav-v-line">|</div>
<div @click="onLoginTypeHandler(2)" class="login-nav-tit pointer">動態密碼登录</div>
</div>
<div class="gird-g form">
<div class="pure-u-1 form-item">
<div class="label">
<img src="@/assets/images/login/icon-login-user.png"> 账号
</div>
<div class="ipt-wrap">
<input placeholder="請輸入證件號/一账通用户名/手机号" class="ipt" type="text">
</div>
</div>
<div class="pure-u-1 form-item">
<div class="label">
<img src="@/assets/images/login/icon-login-password.png"> 密码
</div>
<div class="ipt-wrap">
<input placeholder="輸入登錄密碼" class="ipt" type="text">
</div>
</div>
<div class="pure-u-1 form-item">
<div class="ipt-wrap">
<input placeholder="請輸入驗證碼" class="ipt ipt-verify" type="text">
<div class="ipt verify-btn pointer">5136</div>
</div>
</div>
</div>
<div class="login-protocol">
<img @click="onCheckHandler()" class="check pointer" src="@/assets/images/login/login-check.png">同意
<span @click="onProtocolHandler()" class="protocol pointer">《平安一账通会员服务协议》</span>
</div>
<div @click="onSubmitHandler()" class="login-submit pointer">登入</div>
<div class="login-func">
<div @click="onRegisterHandler()" class="login-func-btn pointer">註冊</div>
<div @click="onForgetHandler()" class="login-func-btn pointer">忘記密碼</div>
</div>
</div>
<!-- OTP登陆 -->
<div v-if="type == 2" class="login">
<div class="login-tit">平安壹賬通</div>
<div class="login-nav">
<div @click="onLoginTypeHandler(1)" class="login-nav-tit text-r pointer">账密登录</div>
<div class="login-nav-v-line">|</div>
<div @click="onLoginTypeHandler(2)" class="login-nav-tit pointer active">動態密碼登录</div>
</div>
<div class="gird-g form">
<div class="pure-u-1 form-item">
<div class="label">
<img src="@/assets/images/login/icon-login-phone.png"> 手機號
</div>
<div class="ipt-wrap">
<input placeholder="手機號" class="ipt" type="text">
</div>
</div>
<div class="pure-u-1 form-item">
<div class="label">
<img src="@/assets/images/login/icon-login-message.png"> 驗證碼
</div>
<div class="ipt-wrap">
<div class="ipt ipt2">
<input placeholder="驗證碼" class="ipt-code" type="text">
<div class="veri-btn pointer">獲取驗證碼</div>
</div>
</div>
</div>
</div>
<div class="login-protocol">
<img @click="onCheckHandler()" class="check pointer" src="@/assets/images/login/login-check.png">同意
<span @click="onProtocolHandler()" class="protocol pointer">《平安一账通会员服务协议》</span>
</div>
<div @click="onSubmitHandler()" class="login-submit pointer">登入</div>
<div class="login-func">
<div @click="onRegisterHandler()" class="login-func-btn pointer">註冊</div>
<div @click="onForgetHandler()" class="login-func-btn pointer">忘記密碼</div>
</div>
</div>
</div>
</div>
</template>
<script src="./login.js"></script>
<style lang="scss" scoped>
@import "./login.scss";
</style>
......@@ -31,6 +31,8 @@ export default {
},
mounted() {},
created() {
document.documentElement.scrollTop = 0;
document.body.scrollTop = 0;
this.initData();
}
}
......
......@@ -9,7 +9,7 @@
height: 2rem;
}
.box{
.box {
position: relative;
}
......@@ -18,13 +18,16 @@
bottom: 0;
left: 0;
right: 0;
img {
max-width: 100%;
}
}
.news {
color: #4c4948;
margin: 0 auto;
width: 66.75rem;
max-width: 66.75rem;
&-item {
......
......@@ -27,7 +27,7 @@ export default {
tit: "香港邮政局",
type: "",
}],
curIndex: 2,
curIndex: 0,
}
},
components: {},
......
@import '@/styles/_support';
.content {}
.content {
}
.top-space {
height: 2.25rem;
......@@ -12,13 +13,15 @@
@extend .bb;
padding: 4.5rem 1.75rem 3.5rem;
border-bottom: none;
@include border-top-radius(.75rem)
@include border-top-radius(.75rem);
}
.payment {
min-height: 26rem;
&-nav {
display: flex;
justify-content: space-between;
justify-content: space-between;
flex-wrap: wrap;
&-item {
@extend .pointer;
......@@ -55,6 +58,7 @@
&-cont {
margin-top: 3.5rem;
max-width: 67.5rem;
&-item {
@extend .bb;
......@@ -62,28 +66,15 @@
padding: 0 1rem;
ul {
// @extend .bb;
padding-left: 1.2rem;
list-style-type: none;
}
li {
list-style-type: square;
// display: flex;
background-image: url('~@assets/images/payment-type/icon-li.png');
background-repeat: no-repeat;
background-position: 0rem 1.25rem;
padding-left: 1rem;
}
// li:before {
// content: ""; //圆点
// color: #f05a23; //颜色
// margin-right: 1rem;
// background-color: #f05a23;
// width: .4rem;
// height: .4rem;
// display: inline-block;
// margin-bottom: .12rem;
// // display: block;
// // margin-top: 1.2rem;
// }
}
}
}
......
import api from '@/api/api'
import {
httpGet,
httpPost
} from '@/api/fetch-api.js'
export default {
data() {
return {
key: 'value',
type: 1, // 1:手机验证 2:输入密码
}
},
components: {},
methods: {
onCheckHandler() {
},
onProtocolHandler() {
this.$router.push({
path: "/protocol"
})
},
onSubmitHandler() {
this.type = 2;
},
onRegisterHandler() {
},
onForgetHandler() {
},
onLoginTypeHandler(val) {
},
initData() {}
},
mounted() {},
created() {}
}
@import '@/styles/_support';
.content {
position: relative;
min-height: 50rem;
padding-bottom: 2.25rem;
}
.top-space {
height: 2.75rem;
}
.box {
position: relative;
}
.ebg {
position: absolute;
bottom: 0;
left: 0;
right: 0;
img {
max-width: 100%;
}
}
.step {
@extend .fcc;
margin-bottom: 3rem;
}
.login {
color: #4c4948;
@extend .bb;
padding: 2.75rem 5rem 4.25rem;
border-bottom: solid .666667rem #006441;
margin: auto;
max-width: 40.25rem;
border-radius: .75rem;
box-shadow: 0 0 1.5rem 0 rgba(255, 87, 0, 0.15);
background-color: #ffffff;
&-tit {
font-family: MicrosoftYaHei;
color: #f05a23;
text-align: center;
font-size: 18px;
font-weight: bold;
letter-spacing: .2rem;
text-shadow: 3px 5.2px 9px rgba(236, 100, 41, 0.27);
}
&-nav {
margin: 2.25rem 0 auto;
display: flex;
justify-content: center;
align-items: center;
&-v-line {
width: .2rem;
height: 1.25rem;
background-color: #4c4948;
margin: 0 2.25rem;
}
&-tit {
font-family: MicrosoftYaHei;
flex: 1;
font-size: 18px;
font-weight: bold;
color: #4c4948;
// text-shadow: 3px 5.2px 9px rgba(76, 73, 72, 0.27);
}
.active {
color: #f05a23;
text-shadow: 3px 5.2px 9px rgba(236, 100, 41, 0.27);
}
}
&-protocol {
margin: 2.5rem auto 0;
display: flex;
align-items: center;
.check {
height: 1rem;
margin-right: .6rem;
}
.protocol {
color: #f05a23;
}
}
&-submit {
@include btc2(13.5rem, 4rem, 16px);
margin: 8.25rem auto 0;
letter-spacing: 1.6px;
}
&-func {
margin: 1.5rem auto 0;
display: flex;
justify-content: center;
&-btn {
margin: 0 1.25rem;
text-decoration: underline;
}
}
}
.form {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
&-item {
position: relative;
margin-top: 3.75rem;
.label {
font-family: MicrosoftYaHei;
font-size: 18px;
font-weight: bold;
color: #f05a23;
display: flex;
align-items: center;
margin-bottom: 1.25rem;
img {
height: 1.5rem;
margin-right: .8rem;
}
}
.ipt-wrap {
position: relative;
display: flex;
justify-content: space-between;
// input和下拉
.ipt {
@extend .bb;
width: 100%;
height: 3.5rem;
border: solid 1px #dcdddd;
background-color: #ffffff;
border-radius: 3.5rem;
padding: 0 1.75rem;
flex: 1;
}
// 长文本
.textarea {
min-height: 8.75rem;
border-radius: 1rem;
}
.down-arrow {
position: absolute;
top: 1.6rem;
right: 2rem;
}
.verify-btn {
@extend .fcc;
font-family: Arial;
font-size: 18px;
width: 8.5rem;
border: solid 1px #dcdddd;
background-color: #f2f2f2;
flex: none;
margin-left: 1.5rem;
color: #4c4948;
}
// 框内按钮
.ipt2 {
display: flex;
justify-content: space-between;
align-items: center;
.ipt-tel {
flex: 1;
padding-left: 1.75rem;
}
.ipt-code {
flex: 1;
padding-right: 1.75rem;
}
.region-tel{
}
.veri-btn {
color: #f05a23;
text-decoration: underline;
}
}
}
}
}
@media (max-width: 950px) {
.box {
width: 96%;
}
.login {
padding: 2rem 1rem 3.5rem;
}
}
<template>
<div class="content">
<div class="ebg">
<img src="@/assets/images/common/login-bg.png">
</div>
<div class="top-space"></div>
<div class="step">
<img v-if="type == 1" src="@/assets/images/register/register-step-1.png">
<img v-if="type == 2" src="@/assets/images/register/register-step-2.png">
</div>
<div class="box">
<div v-if="type == 1" class="login">
<div class="login-tit">歡迎註冊一賬通</div>
<div class="gird-g form">
<div class="pure-u-1 form-item">
<div class="ipt-wrap">
<img class="down-arrow" src="@/assets/images/reservation/re-down-arrow.png" alt="">
<select class="ipt">
<option>香港手機號</option>
</select>
</div>
</div>
<div class="pure-u-1 form-item">
<div class="ipt-wrap">
<div class="ipt ipt2">
<div class="region-tel">+852</div>
<input placeholder="请输入8位手机号码" class="ipt-tel" type="text">
</div>
</div>
</div>
<div class="pure-u-1 form-item">
<div class="ipt-wrap">
<div class="ipt ipt2">
<input placeholder="請輸入驗證碼" class="ipt-code" type="text">
<div class="veri-btn pointer">獲取驗證碼</div>
</div>
</div>
</div>
</div>
<div class="login-protocol">
<img @click="onCheckHandler()" class="check pointer" src="@/assets/images/login/login-check.png">同意
<span @click="onProtocolHandler()" class="protocol pointer">《平安一账通会员服务协议》</span>
</div>
<div @click="onSubmitHandler()" class="login-submit pointer">點擊註冊</div>
</div>
<div v-if="type == 2" class="login">
<div class="login-tit">請設置新的密碼</div>
<div class="gird-g form">
<div class="pure-u-1 form-item">
<div class="label">
<img src="@/assets/images/register/icon-register-lock.png"> 新密碼
</div>
<div class="ipt-wrap">
<input placeholder="請輸入證件號/一账通用户名/手机号" class="ipt" type="text">
</div>
</div>
<div class="pure-u-1 form-item">
<div class="label">
<img src="@/assets/images/register/icon-register-lock.png"> 確認密碼
</div>
<div class="ipt-wrap">
<input placeholder="輸入登錄密碼" class="ipt" type="text">
</div>
</div>
</div>
<div @click="onSubmitHandler()" class="login-submit pointer">確認</div>
</div>
</div>
</div>
</template>
<script src="./register.js"></script>
<style lang="scss" scoped>
@import "./register.scss";
</style>
import api from '@/api/api'
import {
httpGet,
httpPost
} from '@/api/fetch-api.js'
export default {
data() {
return {
key: 'value'
}
},
components: {},
methods: {
initData() {}
},
mounted() {},
created() {}
}
@import '@/styles/_support';
.content {
padding-bottom: 6rem;
}
.top-space {
height: 4.25rem;
}
.box {}
.form {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
&-item {
position: relative;
padding: 0 1.75rem;
margin-bottom: 2.5rem;
.label {
color: #f05a23;
display: flex;
align-items: center;
margin-bottom: .7rem;
img {
height: 1rem;
margin-right: .8rem;
}
}
.ipt-wrap {
position: relative;
// input和下拉
.ipt {
@extend .bb;
width: 100%;
height: 3.5rem;
border: solid 1px #dcdddd;
background-color: #ffffff;
border-radius: 3.5rem;
padding: 0 2.5rem;
}
// 长文本
.textarea {
min-height: 8.75rem;
border-radius: 1rem;
}
.down-arrow {
position: absolute;
top: 1.6rem;
right: 2rem;
}
}
}
// 不换行
&-item2 {
display: flex;
.label {
min-width: 13.75rem;
height: 2.5rem;
}
.cont {
display: flex;
.boo-btn {
width: 5.25rem;
height: 2.5rem;
line-height: 2.5rem;
border: solid 1px #dcdddd;
background-color: #ffffff;
border-radius: 2.5rem;
text-align: center;
margin: 0 0.6rem;
}
.active {
border: none;
color: #ffffff;
background-color: #f05a23;
box-shadow: 0px 10px 13px 0 rgba(236, 100, 41, 0.2);
background-blend-mode: soft-light, ;
// background-image: linear-gradient(to top, #000000, #ffffff), linear-gradient(to bottom, #f05a23, #f05a23);
background-image: linear-gradient(to bottom, #f05f28, #f05021);
}
}
}
&-item3 {
display: flex;
align-items: flex-start;
flex-wrap: wrap;
.label {
min-width: 13.75rem;
}
.cont {
.calendar {
img {
max-width: 96%;
}
}
}
}
}
.notice {
margin-top: 4rem;
@extend .bb;
padding: 0 1rem;
&-item {
position: relative;
line-height: 2;
letter-spacing: 1.2px;
margin-bottom: 1rem;
&-icon {
// display: inline-block;
position: absolute;
top: .5rem;
}
}
}
<template>
<div class="content">
<div class="top-space"></div>
<div class="box">
<div class="gird-g form">
<div class="pure-u-1 pure-u-md-1-2 form-item">
<div class="label">
<img src="@/assets/images/reservation/icon-re-name.png"> 姓名
</div>
<div class="ipt-wrap">
<input placeholder="姓名" class="ipt" type="text">
</div>
</div>
<div class="pure-u-1 pure-u-md-1-2 form-item">
<div class="label">
<img src="@/assets/images/reservation/icon-re-contact.png">聯絡方式
</div>
<div class="ipt-wrap">
<img class="down-arrow" src="@/assets/images/reservation/re-down-arrow.png" alt="">
<select class="ipt">
<option>電話</option>
</select>
</div>
</div>
<div class="pure-u-1 pure-u-md-1-2 form-item">
<div class="label">
<img src="@/assets/images/reservation/icon-re-name.png">聯絡电话
</div>
<div class="ipt-wrap">
<input placeholder="香港號碼/內地號碼" class="ipt" type="text">
</div>
</div>
<div class="pure-u-1 pure-u-md-1-2 form-item">
<div class="label">
<img src="@/assets/images/reservation/icon-re-clock.png">預約類型
</div>
<div class="ipt-wrap">
<img class="down-arrow" src="@/assets/images/reservation/re-down-arrow.png" alt="">
<select class="ipt">
<option>投保咨詢</option>
</select>
</div>
</div>
<div class="pure-u-1 form-item">
<div class="label">
<img src="@/assets/images/reservation/icon-re-arrow-reservation.png">預約說明
</div>
<div class="ipt-wrap">
<textarea class="ipt textarea"></textarea>
</div>
</div>
<div class="pure-u-1 form-item form-item2">
<div class="label">
<img src="@/assets/images/reservation/icon-re-custom.png">是否平安香港客戶
</div>
<div class="cont">
<div class="boo-btn active">是</div>
<div class="boo-btn">不是</div>
</div>
</div>
<div class="pure-u-1 form-item form-item3">
<div class="label">
<img src="@/assets/images/reservation/icon-re-calendar.png">期望联络时间
</div>
<div class="cont">
<div class="calendar">
<img src="@/assets/images/reservation/re-calendar.png">
</div>
</div>
</div>
</div>
</div>
<div class="box notice">
<p class="notice-item">
<img class="notice-item-icon" src="@/assets/images/reservation/icon-re-notice.png"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;本表格所收集的个人资料根据「平安人寿香港个人资料收集声明」处理及只会被用作于联络 阁下之用。然而所收集的个人资料未经您明确授权将不会转移至「平安人寿香港个人资料收集声明」列明以外之第三者机构。您可选择不向我们提供所需的个人资料，惟这样可能导致我们不能联络您。您亦可根据「平安人寿香港个人资料收集声明」之权利查阅及更正个人资料。
</p>
<p class="notice-item">
<img class="notice-item-icon" src="@/assets/images/reservation/icon-re-notice.png"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;本人现确认明白并同意本人的个人资料根据中银人寿个人资料收集声明作以上述用途。
</p>
</div>
</div>
</template>
<script src="./reservation.js"></script>
<style lang="scss" >
@import "./reservation.scss";
</style>
......@@ -23,6 +23,22 @@ const routes = [
}
},
{
path: '/login',
name: 'login',
component: () => import('./pages/login/login.vue'),
meta: {
title: ''
}
},
{
path: '/register',
name: 'register',
component: () => import('./pages/register/register.vue'),
meta: {
title: ''
}
},
{
path: '/profile',
name: 'profile',
component: () => import('./pages/profile/profile.vue'),
......@@ -81,6 +97,15 @@ const routes = [
},
{
path: '/reservation',
name: 'reservation',
component: () => import('./pages/reservation/reservation.vue'),
meta: {
title: ''
}
},
{
path: '/product',
name: 'product',
component: () => import('./pages/product/product.vue'),
......@@ -128,6 +153,10 @@ router.beforeEach((to, from, next) => {
if (title) {
document.title = title;
}
// const scrollTopList = [
// "newsList", "newsDetail", "protocol", "privacy", "terms", "paymentType", "reservation"
// ]
next();
});
......
......@@ -10,73 +10,91 @@
// 文字截取
@mixin text-overflow() {
overflow: hidden;
white-space: normal;
text-overflow: ellipsis;
word-break: break-all;
word-wrap: normal;
overflow: hidden;
white-space: normal;
text-overflow: ellipsis;
word-break: break-all;
word-wrap: normal;
}
@mixin word-break() {
word-break: break-all;
word-wrap: break-word;
white-space: normal;
word-break: break-all;
word-wrap: break-word;
white-space: normal;
}
// No wrap
@mixin no-wrap() {
word-break: normal;
word-wrap: normal;
white-space: nowrap;
word-break: normal;
word-wrap: normal;
white-space: nowrap;
}
// 清除浮动
@mixin clearfix() {
&:before,
&:after {
content: " "; // 1
display: table; // 2
}
&:after {
clear: both;
}
&:before,
&:after {
content: " "; // 1
display: table; // 2
}
&:after {
clear: both;
}
}
// Single side border-radius
@mixin border-top-radius($radius) {
border-top-right-radius: $radius;
border-top-left-radius: $radius;
border-top-right-radius: $radius;
border-top-left-radius: $radius;
}
@mixin border-right-radius($radius) {
border-bottom-right-radius: $radius;
border-top-right-radius: $radius;
border-bottom-right-radius: $radius;
border-top-right-radius: $radius;
}
@mixin border-bottom-radius($radius) {
border-bottom-right-radius: $radius;
border-bottom-left-radius: $radius;
border-bottom-right-radius: $radius;
border-bottom-left-radius: $radius;
}
@mixin border-left-radius($radius) {
border-bottom-left-radius: $radius;
border-top-left-radius: $radius;
border-bottom-left-radius: $radius;
border-top-left-radius: $radius;
}
// Center-align a block level element
@mixin center-block() {
display: block;
margin-left: auto;
margin-right: auto;
display: block;
margin-left: auto;
margin-right: auto;
}
// CSS image replacement
// Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757
@mixin hide-text() {
font-size: 0;
line-height: 0;
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
font-size: 0;
line-height: 0;
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
}
// 橙色按钮
@mixin btc2($wid:5.25rem, $hei:2.5rem, $fontSize:12px) {
width: $wid;
height: $hei;
line-height: $hei;
font-size: $fontSize;
border-radius: $hei;
text-align: center;
color: #ffffff;
background-color: #f05a23;
box-shadow: 0px 10px 13px 0 rgba(236, 100, 41, 0.2);
background-blend-mode: soft-light, ;
// background-image: linear-gradient(to top, #000000, #ffffff), linear-gradient(to bottom, #f05a23, #f05a23);
background-image: linear-gradient(to bottom, #f05f28, #f05021);
}
......
.bis {
.bis {
background-repeat: no-repeat;
background-size: 100% 100%;
}
......@@ -39,4 +36,14 @@
cursor: pointer;
}
.text-l {
text-align: left;
}
.text-r {
text-align: right;
}
.text-c {
text-align: center;
}
......