Skip to content

dev / pingan-life-index-pro

Go to a project
Toggle navigation
Toggle navigation pinning
9dc41fba by simon
Options

默认提交

1 parent 6d19f925
Inline Side-by-side
Showing 21 changed files with 114 additions and 39 deletions
......@@ -8,6 +8,9 @@
<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">
<!--[if gt IE 6]>
<![endif]-->
<title>平安人寿保险官网</title>
</head>
......
......@@ -303,6 +303,8 @@ textarea {
padding: 0;
}
.main-container {
position: relative;
margin: 0 auto;
......
......@@ -103,7 +103,7 @@ module.exports = {
name: "About Us",
path: "",
list: [{
name: "About Ping An (Life) HK",
name: "Ping An (Life) HK",
path: "/profile"
},
{
......@@ -492,7 +492,8 @@ module.exports = {
]
},
policyChangeGuide: {
notice: "如需做其他保單變更聯繫客服",
notice: "如需做其他保單變更",
noticeLink: "聯繫客服",
head1: "Item",
head2: "Details",
head3: "Applicant",
......
......@@ -104,7 +104,7 @@ module.exports = {
name: "關於我們",
path: "",
list: [{
name: "有關平安人壽香港",
name: "平安人壽香港",
path: "/profile"
},
{
......@@ -142,7 +142,7 @@ module.exports = {
hkPhone: "香港号码",
cnPhone: "内地号码",
aboutUs: "關於我們",
companyIntroduction: "公司介紹",
companyIntroduction: "集團介紹",
news: "新聞資訊",
joinUs: "加入我們",
helpCenter: "幫助中心",
......@@ -152,7 +152,7 @@ module.exports = {
map: "網站地圖",
contactUs: "聯絡我們",
contactInformation: "聯繫方式",
service: "服務網點",
service: "服務網絡",
qrcode: "社交媒體",
copyright: "版權所有 © 中國平安保險（集團）股份有限公司未經許可不得復制、轉載或摘編，違者必究!"
},
......@@ -441,7 +441,7 @@ module.exports = {
type: "保單變更類",
list: [{
name: "保險合同解除申請書",
desc: "退保、猶豫期退保業務適用",
desc: "退保、冷靜期退保業務適用",
download: "",
},
{
......@@ -456,7 +456,7 @@ module.exports = {
},
{
name: "保險合同變更申請書（ 客戶信息變更類）",
desc: "基本信息變更業務適用",
desc: "基本資訊變更業務適用",
download: "",
},
{
......@@ -492,7 +492,8 @@ module.exports = {
]
},
policyChangeGuide: {
notice: "如需做其他保單變更聯繫客服（聯繫客服超鏈接跳轉公司聯繫信息頁）",
notice: "如需做其他保單變更",
noticeLink: "聯繫客服",
head1: "項目",
head2: "具體內容",
head3: "申請資格人",
......
......@@ -103,7 +103,7 @@ module.exports = {
name: "关于我们",
path: "",
list: [{
name: "有关平安香港",
name: "平安人寿香港",
path: "/profile"
},
{
......@@ -141,7 +141,7 @@ module.exports = {
hkPhone: "香港号码",
cnPhone: "内地号码",
aboutUs: "关于我们",
companyIntroduction: "公司介绍",
companyIntroduction: "集团介绍",
news: "新闻资讯",
joinUs: "加入我们",
helpCenter: "帮助中心",
......@@ -151,7 +151,7 @@ module.exports = {
map: "网站地图",
contactUs: "联络我们",
contactInformation: "联系方式",
service: "服务网点",
service: "服务网络",
qrcode: "社交媒體",
copyright: "版权所有 © 中国平安保险（集团）股份有限公司未经许可不得复制、转载或摘编，违者必究!"
},
......@@ -440,7 +440,7 @@ module.exports = {
type: "保单变更类",
list: [{
name: "保险合同解除申请书",
desc: "退保、犹豫期退保业务适用",
desc: "退保、冷静期退保业务适用",
download: "",
},
{
......@@ -492,7 +492,8 @@ module.exports = {
]
},
policyChangeGuide: {
notice: "如需做其他保单变更联系客服（联系客服超链接跳转公司联系信息页）",
notice: "如需做其他保单变更",
noticeLink: "联系客服",
head1: "项目",
head2: "具体内容",
head3: "申请资格人",
......
......@@ -5,11 +5,15 @@
min-width: 10rem;
position: relative;
margin: 0 1rem;
font-size: $fontSize;
font-size: $fontSizeTitle;
.list {
position: absolute;
width: 100%;
width: 110%;
left: 0;
right: 0;
margin: 0 auto;
font-size: $fontSize;
.space {
height: 1.5rem;
......
......@@ -30,12 +30,13 @@
<div class="n-item">{{$t('footer.helpCenter')}}</div>
<div @click="toPage('privacy')" class="n-item">{{$t('footer.privacy')}}</div>
<div @click="toPage('terms')" class="n-item">{{$t('footer.terms')}}</div>
<div class="n-item">{{$t('footer.map')}}</div>
<div @click="toPage('protocol')" class="n-item">{{$t('footer.protocol')}}</div>
</div>
<div class="nav-v">
<div class="n-item">{{$t('footer.contactUs')}}</div>
<div class="n-item">{{$t('footer.contactInformation')}}</div>
<div class="n-item">{{$t('footer.service')}}</div>
<div class="n-item">{{$t('footer.map')}}</div>
</div>
</div>
......
......@@ -99,7 +99,7 @@ $navHeiM: 6rem;
&-nav-list {
position: absolute;
right: 0;
top: 32px;
top: 24px;
display: flex;
align-items: center;
......@@ -128,6 +128,9 @@ $navHeiM: 6rem;
.mobile {
display: block;
&-nav-list {
top: 32px;
}
}
}
......@@ -136,6 +139,12 @@ $navHeiM: 6rem;
@media (max-width: 768px) {
.v-header {
.logo-img {}
height: $navHeight-M;
.mobile {
display: block;
&-nav-list {
top: 24px;
}
}
}
}
......
......@@ -197,7 +197,7 @@
&-icon {
position: absolute;
top: .5rem;
top: .6rem;
}
}
}
......
......@@ -97,11 +97,11 @@
<!-- 通知 -->
<div class="notice">
<p class="notice-item">
<img class="notice-item-icon" src="@/assets/images/reservation/icon-re-notice.png"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{$t('complaintAcceptance.notice1')}}
<img class="notice-item-icon" src="@/assets/images/reservation/icon-re-notice.png"> &nbsp;&nbsp;&nbsp;&nbsp;{{$t('complaintAcceptance.notice1')}}
</p>
<p class="notice-item pointer" @click="checked = !checked">
<img v-if="!checked" class="notice-item-icon" src="@/assets/images/reservation/un-check.png">
<img v-else class="notice-item-icon" src="@/assets/images/reservation/check.png"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{$t('complaintAcceptance.notice2')}}
<img v-else class="notice-item-icon" src="@/assets/images/reservation/check.png"> &nbsp;&nbsp;&nbsp;&nbsp;{{$t('complaintAcceptance.notice2')}}
</p>
</div>
......
......@@ -20,6 +20,14 @@ export default {
},
},
methods: {
toContactUs() {
this.$router.push({
path: "/custom/service",
query: {
q: "m1"
}
});
},
onProjectHandler(item) {
if (item.projectType == 1) {
this.$router.push({
......
......@@ -51,7 +51,7 @@
</div>
<div class="notice">
<img class="icon" src="@/assets/images/policy-change-guide/icon-pcg-notice.png" alt=""> {{$t("policyChangeGuide.notice")}}
<img class="icon" src="@/assets/images/policy-change-guide/icon-pcg-notice.png" alt=""> {{$t("policyChangeGuide.notice")}} <span @click="toContactUs" class="act">{{$t("policyChangeGuide.noticeLink")}}</span>
</div>
</div>
......
......@@ -176,7 +176,7 @@ input {
&-icon {
position: absolute;
top: .5rem;
top: .6rem;
}
}
}
......
......@@ -111,11 +111,11 @@
<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;{{$t('reservation.notice1')}}
<img class="notice-item-icon" src="@/assets/images/reservation/icon-re-notice.png"> &nbsp;&nbsp;&nbsp;&nbsp;{{$t('reservation.notice1')}}
</p>
<p class="notice-item pointer" @click="checked = !checked">
<img v-if="!checked" class="notice-item-icon" src="@/assets/images/reservation/un-check.png">
<img v-else class="notice-item-icon" src="@/assets/images/reservation/check.png"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{$t('reservation.notice2')}}
<img v-else class="notice-item-icon" src="@/assets/images/reservation/check.png"> &nbsp;&nbsp;&nbsp;&nbsp;{{$t('reservation.notice2')}}
</p>
</div>
......
......@@ -21,7 +21,8 @@ export default {
// prevEl: '.swiper-button-prev'
// },
pagination: {
el: '.swiper-pagination'
el: '.swiper-pagination',
clickable: true,
},
autoplay: {
delay: 5000,
......
......@@ -23,7 +23,9 @@
overflow: hidden;
}
.banner {
// PC轮播
.banner-pc {
display: block;
position: absolute;
z-index: 1;
left: 50%;
......@@ -33,12 +35,21 @@
height: 100%;
overflow: hidden;
&-img {
.banner-img {
width: 100%;
height: 100%;
}
}
// 移动端轮播
.banner-mobile {
display: none;
.banner-img {
width: 100%;
}
}
// 推荐产品
.recommend {
display: flex;
......@@ -202,17 +213,34 @@
@media (max-width: 768px) {
.content {}
.banner-contaner {
height: auto;
}
.banner-pc {
display: none;
}
.banner-mobile {
display: block;
}
// 推荐产品
.recommend {
&-item {
width: 100% !important;
;
margin: $marginSmall-M auto !important;
;
}
}
.box-shadow {
box-shadow: none;
}
.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-container-horizontal>.swiper-pagination-bullets {
bottom: 52px;
}
}
......
......@@ -3,19 +3,33 @@
<div class="page page-index">
<div class="banner-contaner">
<!-- banner 轮播 -->
<div class="banner">
<div class="banner banner-pc">
<swiper :options="swiperOption">
<swiper-slide>
<img class="banner-img " src="@/assets/images/index/banner.png">
<img class="banner-img" src="@/assets/images/index/banner.png">
</swiper-slide>
<swiper-slide>
<img class="banner-img " src="@/assets/images/index/banner.png">
<img class="banner-img" src="@/assets/images/index/banner.png">
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
<div class="banner banner-mobile">
<swiper class="swiper" :options="swiperOption">
<swiper-slide>
<img class="banner-img" src="@/assets/images/index/banner-m-1.png">
</swiper-slide>
<swiper-slide>
<img class="banner-img" src="@/assets/images/index/banner-m-2.png">
</swiper-slide>
<!-- <div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div> -->
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
<!-- <div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div> -->
</div>
<div class="content">
<!-- 推荐产品 -->
......
......@@ -97,10 +97,11 @@
// box-shadow: 0px 10px 13px 0 rgba(236, 100, 41, 0.2);
// background-blend-mode: soft-light, ;
// background-image: linear-gradient(to bottom, #f05f28, #f05021);
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, #ec6429, #ec6429);
background-blend-mode: soft-light;
background-image: linear-gradient(to bottom, #ec6429, #ec6429), linear-gradient(to top, #000000, #ffffff);
// background-image: linear-gradient(to top, #000000, #ffffff), linear-gradient(to bottom, #ec6429, #ec6429);
}
......
......@@ -46,4 +46,5 @@ $marginSmall-M: 10px; // 小间距
$marginMedium-M: 20px; // 间距
// $marginLarge: 28px;
$navHeight-M:90px; // 移动端顶栏高度
// $navHeight-M:90px; // 移动端顶栏高度
$navHeight-M:72px; // 移动端顶栏高度
......