Skip to content

dev / pingan-life-index-pro

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

页首页脚

1 parent eda42e37
Inline Side-by-side
Showing 13 changed files with 271 additions and 205 deletions
......@@ -8,6 +8,7 @@ module.exports = {
Age: "Age",
Birthday: "Birthday",
SubmitSuccess: "Successfully submitted",
Email: "Email",
},
message: {
login: 'Login',
......@@ -172,6 +173,9 @@ module.exports = {
}
]
},
header:{
quote: "Quote now",
},
footer: {
hkPhone: "Hong Kong Phone No.",
cnPhone: "Mainland Phone No.",
......
......@@ -8,6 +8,7 @@ module.exports = {
Age: "年齡",
Birthday: "生日",
SubmitSuccess: "遞交申請成功",
Email: "電郵",
},
message: {
login: "Login",
......@@ -174,6 +175,9 @@ module.exports = {
}
]
},
header:{
quote: "立即報價",
},
footer: {
hkPhone: "香港號碼",
cnPhone: "內地號碼",
......
......@@ -8,6 +8,7 @@ module.exports = {
Female: "女性",
Birthday: "生日",
SubmitSuccess: "递交申请成功",
Email: "电邮",
},
message: {
login: "登入",
......@@ -174,6 +175,9 @@ module.exports = {
}
]
},
header:{
quote: "立即报价",
},
footer: {
hkPhone: "香港号码",
cnPhone: "内地号码",
......@@ -189,6 +193,10 @@ module.exports = {
contactUs: "联系我们",
contactInformation: "联系方式",
service: "服务网络",
// 新增
qrcode: "社交媒体",
qrcodeBot: "官方公众号",
copyright: "版权 © 中国平安人寿（香港）有限公司  版权所有"
......
......@@ -84,10 +84,6 @@
}
}
}
// .drop-list:lang(en){
// min-width: 0;
// margin: 0 13px;
// }
@media (max-width: 1100px) {
}
......
/**
* 组件描述:页脚
* 静态页面
......@@ -36,5 +35,10 @@ export default {
initData() {}
},
mounted() {},
created() {}
created() {},
// watch: {
// "$route": function (to,from) {
// console.log("to:",to.name);
// }
// }
}
......
@import '@/styles/_support.scss';
@import "@/styles/_support.scss";
.v-footer {
color: #ffffff;
background-color: #2e2b2a;
font-size: $fontSize;
color: $cFontGray2;
background-color: #d1d2d3;
font-size: $fontSize-M2;
.footer-containter {
margin: 0 auto;
......@@ -21,62 +21,96 @@
.line {
width: 100%;
height: 1px;
opacity: 0.2;
background-color: #ffffff;
background-color: #c1c2c4;
}
// 信息
.info {
padding: 24px 0 24px;
padding: 100px 0 20px;
display: flex;
justify-content: space-between;
// 热线
// 热线 左边菜单
.hotline {
min-width: 294px;
@extend .bb;
min-width: 360px;
padding-right: 24px;
&-tit {
font-weight: bold;
margin-bottom: 12px;
color: #000000;
}
.contact {
margin-bottom: 12px;
.n-item {
margin-bottom: 7.2px;
}
.phone {
color: $cOrange;
font-size: $fontSizeTitle;
color: $cOrange2;
font-weight: bold;
font-size: 30px;
}
&:first-child {
margin-bottom: 24px;
// margin-bottom: 24px;
}
}
.server-time {
}
.contact-us {
margin-top: 36px;
.tit {
color: #000000;
}
}
.email {
margin-top: 36px;
}
}
// 导航
// 导航 中间菜单 PC
.nav {
display: flex;
.nav-v {}
.n-item {
cursor: pointer;
min-width: 177px;
.nav-v {
.n-item {
cursor: pointer;
@extend .bb;
width: 200px;
padding-right: 12px;
margin-bottom: 12px;
}
}
}
// 导航 中间菜单 mobile
.nav2 {
display: none;
}
// 公众号
// 公众号 右边菜单
.public {
position: relative;
text-align: left;
margin-left: 63.84px;
.tit {
margin-bottom: 24px;
}
.icon-wrap {
position: relative;
}
.qrcode-wrap {
position: absolute;
text-align: center;
margin-top: 3.6px;
left: 0;
top: 60px;
.qrcode {
width: 100px;
......@@ -88,82 +122,70 @@
}
.icon {
margin-top: 9px;
margin-right: 12px;
margin-right: 27px;
display: inline-block;
margin-bottom: 24px;
&:last-child {
margin-right: 0;
}
}
}
// 公共组件
.n-item {
margin-bottom: 24px;
padding-right: 36px;
color: #dcdddd;
&:first-child {
margin-bottom: 32px;
}
&:last-child {
margin-bottom: 0;
}
// &:last-child {
// margin-bottom: 0;
// }
}
.n-item-tit {
color: #000000;
cursor: default !important;
}
}
// 版权
.copyright {
color: rgba(179, 177, 168, 0.5);
padding: 18px 0;
padding: 52px 0 60px;
line-height: 1.58;
font-size: $fontSizeSmall;
}
}
}
}
@media (max-width: 1200px) {
.v-footer {
@include content-percent();
}
}
@media (max-width: 980px) {
.v-footer {
@include content-percent();
.footer-containter {
.cont {
.info {
display: block;
// display: block;
display: flex;
flex-wrap: wrap;
.hotline {}
.hotline {
}
.nav {
margin-top: 24px;
display: flex;
.nav-v {
width: 100%;
}
.n-item {
min-width: 0;
margin-right: 0;
padding-right: 10px;
}
}
.nav2 {
display: none;
margin-top: 24px;
}
.public {
margin: 0;
margin-top: 36px;
text-align: left;
min-height: 144px;
margin-top: 24px;
}
}
.copyright {
box-sizing: border-box;
padding-right: 24px;
}
}
}
......@@ -172,41 +194,43 @@
@media (max-width: 768px) {
.v-footer {
font-size: $fontSizeSmall-M;
font-size: $fontSizeMb;
.footer-containter {
.cont {
.info {
display: flex;
justify-content: space-between;
display: block;
padding: 32px 0 12px;
.hotline {
min-width: 0;
.phone {
font-size: $fontSizeSmall-M !important;
font-weight: bold !important;
.contact {
.phone {
font-size: $fontSizeTitleMb;
}
}
}
.nav {
display: none;
margin-top: 0;
.nav-v {}
.nav-v {
}
.n-item {}
.n-item {
}
}
.nav2 {
display: block;
// display: block;
display: flex;
}
.public {
margin: 0;
min-width: 108px;
.qrcode-wrap {
top: 40px;
img {
width: 84px;
}
......@@ -215,6 +239,10 @@
display: none;
}
}
.icon {
width: 32px;
}
}
// 公共组件
......@@ -227,9 +255,10 @@
}
}
.copyright {}
.copyright {
padding: 32px 0;
}
}
}
}
}
......
<template>
<footer class="v-footer ">
<div class="footer-containter ">
<div class="cont">
<div class="logo-wrap">
<img class="logo-img" src="@/assets/images/home/footer-logo.png">
</div>
<div class="line"></div>
<!-- 信息 -->
<div class="info">
<div class="hotline">
<div class="contact">
<div class="n-item">{{$t('footer.hkPhone')}}</div>
<div class="phone">(852)2983 8866</div>
</div>
<div class="contact">
<div class="n-item">{{$t('footer.cnPhone')}}</div>
<div class="phone">(86)40078 95511</div>
</div>
</div>
<div class="nav">
<div class="nav-v">
<div @click="toPage('profile')" class="n-item">{{$t('footer.aboutUs')}}</div>
<div @click="toPage('profile')" class="n-item">{{$t('footer.companyIntroduction')}}</div>
<div @click="toPage('newsList')" class="n-item">{{$t('footer.news')}}</div>
<div @click="toPage('joinUs')" class="n-item">{{$t('footer.joinUs')}}</div>
</div>
<div class="nav-v">
<div @click="toPage('help')" 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 @click="toPage('personalDataCollection')" class="n-item">{{$t('footer.protocol')}}</div>
</div>
<div class="nav-v">
<div @click="toPath('/custom/service?q=m1')" class="n-item">{{$t('footer.contactUs')}}</div>
<div @click="toPage('contactMethod')" class="n-item">{{$t('footer.contactInformation')}}</div>
<div @click="toPage('serviceNet')" class="n-item">{{$t('footer.service')}}</div>
<div @click="toPage('map')" class="n-item">{{$t('footer.map')}}</div>
</div>
</div>
<footer class="v-footer ">
<div class="footer-containter ">
<div class="cont">
<!-- <div class="logo-wrap">
<img class="logo-img" src="@/assets/images/home/footer-logo.png">
</div> -->
<!-- <div class="line"></div> -->
<!-- 信息 -->
<div class="info">
<!-- 左边菜单 -->
<div class="hotline">
<div class="hotline-tit">客戶服務熱線</div>
<div class="contact">
<div class="n-item">{{$t('footer.hkPhone')}}</div>
<div class="phone">(852)2983 8866</div>
</div>
<div class="contact">
<div class="n-item">{{$t('footer.cnPhone')}}</div>
<div class="phone">(86)40078 95511</div>
</div>
<div class="server-time">服務時間：星期一至五 9:00-17:30</div>
<div class="nav nav2">
<div class="nav-v">
<div @click="toPage('privacy')" class="n-item">{{$t('footer.privacy')}}</div>
<div @click="toPage('terms')" class="n-item">{{$t('footer.terms')}}</div>
<div @click="toPage('personalDataCollection')" class="n-item">{{$t('footer.protocol')}}</div>
</div>
</div>
<div class="contact-us">
<div class="tit">{{$t('footer.contactUs')}}</div>
<div class="address">香港尖沙咀廣東道21號港威大廈第五座16樓A137</div>
<div class="time">服務時間：星期一至五 9:00-17:30</div>
</div>
<div class="email">{{$t('common.Email')}}：cs@pingan.com.hk</div>
</div>
<div class="public">
<div class="tit">{{$t('footer.qrcode')}}</div>
<div @click="qrcodeVisible = !qrcodeVisible" v-if="qrcodeVisible" class="qrcode-wrap">
<img @mouseout="onOutHandler($event)" src="@/assets/images/home/qrcode.png" alt="">
<div class="c1">{{$t('footer.qrcodeBot')}}</div>
</div>
<template v-else>
<img @click="qrcodeVisible = !qrcodeVisible" @mouseover="onOverHandler($event)" @mouseout="onOutHandler($event)" class="icon pointer" src="@/assets/images/home/footer-icon-1.png" alt="">
<img class="icon pointer" src="@/assets/images/home/footer-icon-2.png" alt="">
<img class="icon pointer" src="@/assets/images/home/footer-icon-3.png" alt="">
</template>
</div>
<!-- 中间菜单 PC -->
<div class="nav">
</div>
<div class="line"></div>
<!-- 版权 -->
<div class="copyright">
{{$t('footer.copyright')}}
</div>
</div>
</div>
</footer>
<div class="nav-v">
<div class="n-item n-item-tit">產品介紹</div>
<div @click="toPage('vhisDetail')" class="n-item">自願醫保</div>
<div @click="toPage('genRich')" class="n-item">投資成份保險</div>
<div class="n-item">推廣優惠</div>
</div>
<div class="nav-v">
<div @click="toPage('profile')" class="n-item">{{$t('footer.aboutUs')}}</div>
<div @click="toPage('joinUs')" class="n-item">{{$t('footer.joinUs')}}</div>
<div @click="toPage('privacy')" class="n-item">{{$t('footer.privacy')}}</div>
<div @click="toPage('terms')" class="n-item">{{$t('footer.terms')}}</div>
<div @click="toPage('personalDataCollection')" class="n-item">{{$t('footer.protocol')}}</div>
</div>
<!-- <div class="nav-v">
<div @click="toPage('profile')" class="n-item">{{$t('footer.aboutUs')}}</div>
<div @click="toPage('profile')" class="n-item">{{$t('footer.companyIntroduction')}}</div>
<div @click="toPage('newsList')" class="n-item">{{$t('footer.news')}}</div>
<div @click="toPage('joinUs')" class="n-item">{{$t('footer.joinUs')}}</div>
</div>
<div class="nav-v">
<div @click="toPage('help')" 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 @click="toPage('personalDataCollection')" class="n-item">{{$t('footer.protocol')}}</div>
</div>
<div class="nav-v">
<div @click="toPath('/custom/service?q=m1')" class="n-item">{{$t('footer.contactUs')}}</div>
<div @click="toPage('contactMethod')" class="n-item">{{$t('footer.contactInformation')}}</div>
<div @click="toPage('serviceNet')" class="n-item">{{$t('footer.service')}}</div>
<div @click="toPage('map')" class="n-item">{{$t('footer.map')}}</div>
</div> -->
</div>
<!-- 菜单 移动端 -->
<div class="nav nav2">
<div class="nav-v">
<div @click="toPage('profile')" class="n-item">{{$t('footer.aboutUs')}}</div>
<div @click="toPage('profile')" class="n-item">{{$t('footer.companyIntroduction')}}</div>
<div @click="toPage('newsList')" class="n-item">{{$t('footer.news')}}</div>
</div>
<div class="nav-v">
<div @click="toPage('profile')" class="n-item">{{$t('footer.aboutUs')}}</div>
<div @click="toPage('joinUs')" class="n-item">{{$t('footer.joinUs')}}</div>
<div @click="toPage('privacy')" class="n-item">{{$t('footer.privacy')}}</div>
<div @click="toPage('terms')" class="n-item">{{$t('footer.terms')}}</div>
<div @click="toPage('personalDataCollection')" class="n-item">{{$t('footer.protocol')}}</div>
</div>
<!-- <div class="nav-v">
<div @click="toPage('privacy')" class="n-item">{{$t('footer.privacy')}}</div>
<div @click="toPage('terms')" class="n-item">{{$t('footer.terms')}}</div>
<div @click="toPage('personalDataCollection')" class="n-item">{{$t('footer.protocol')}}</div>
</div> -->
</div>
<!-- 右边菜单 -->
<div class="public">
<div class="tit">{{$t('footer.qrcode')}}</div>
<div class="icon-wrap">
<div @click="qrcodeVisible = !qrcodeVisible" v-if="qrcodeVisible" class="qrcode-wrap">
<img @mouseout="onOutHandler($event)" src="@/assets/images/home/qrcode.png" alt="">
<div class="c1">{{$t('footer.qrcodeBot')}}</div>
</div>
<img @click="qrcodeVisible = !qrcodeVisible" @mouseover="onOverHandler($event)" @mouseout="onOutHandler($event)" class="icon pointer" src="@/assets/images/home/footer-icon-b-1.png" alt="">
<img class="icon pointer" src="@/assets/images/home/footer-icon-b-2.png" alt="">
<img class="icon pointer" src="@/assets/images/home/footer-icon-b-3.png" alt="">
</div>
</div>
</div>
<div class="line"></div>
<!-- 版权 -->
<div class="copyright">
{{$t('footer.copyright')}}
</div>
</div>
</div>
</footer>
</template>
<script src="./footer.js"></script>
......
......@@ -165,22 +165,6 @@ $navHeiM: 72px;
}
@media (max-width: 1100px) {
// .v-header {
// .logo-img {
// }
// }
// .pc {
// .auth {
// margin-right: 20px;
// }
// .nav-item.auth {
// .lang {
// min-width: auto;
// }
// }
// }
}
@media (max-width: 1020px) {
......@@ -190,11 +174,6 @@ $navHeiM: 72px;
.main-nav {
}
// .logo-img {
// max-width: 213px;
// margin: 0;
// }
.pc {
display: none;
}
......
......@@ -46,15 +46,10 @@
</div>
<!-- 报价 -->
<div class="main-func-quote">
立即報價
<div class="main-func-quote" >
{{$t('header.quote')}}
</div>
</div>
<!-- <div class="nav-item search"></div>
<div class="nav-item auth">
<v-dropdown class="lang" :type="'login'" :data-obj="loginData" :data-list="loginData.list" ref="mobileMenu"></v-dropdown>
<v-dropdown class="lang" :type="'lang'" :data-obj="langData" :data-list="langData.list"></v-dropdown>
</div> -->
</div>
</div>
......
......@@ -6,10 +6,10 @@
*
*/
$contentWidth:1200px;
$contentWidth: 1200px;
$borderRadiusSmall:5px;
$borderRadius:8px;
$borderRadiusSmall: 5px;
$borderRadius: 8px;
// Margin
$marginSmallHalf: 5px; // 小间距的一半
......@@ -22,41 +22,44 @@ $paddingSmall: 10px;
$paddingMedium: 28px;
// Font
$fontSizeTitle:16px;
$fontSize:14px;
$fontSizeSmall:12px;
$fontSizeTitle-M:17px;
$fontSize-M:14px;
$fontSizeSmall-M:12px;
$fontSizeTitle: 16px;
$fontSize: 14px;
$fontSizeSmall: 12px;
$fontSizeTitle-M: 17px;
$fontSize-M: 14px;
$fontSizeSmall-M: 12px;
//新版PC字体
$fontSizeTitle-M2:24px;
$fontSize-M2:18px;
$fontSizeSmall-M2:16px;
$fontSizeTitle-M2: 24px;
$fontSize-M2: 18px;
$fontSizeSmall-M2: 16px;
// 暂定移动端字体
$fontSizeTitleMb: 22px;
$fontSizeMb: 16px;
$fontSizeSmallMb: 14px;
// Color
$cOrange:#f05a23;
$cOrange: #f05a23;
$cFontGray: #4c4948;
$cGreen:#006441;
$cGray:#bfbfbf;
$cGray2:#494949;
$cDark:#dcdcdc;
$cLightBlack:#606266;
$cDisabled:#888888;
$cGreen: #006441;
$cGray: #bfbfbf;
$cGray2: #494949;
$cDark: #dcdcdc;
$cLightBlack: #606266;
$cDisabled: #888888;
$cOrange2:#ff6839;
$cOrange2: #ff6839;
$cFontGray2: #58595b;
$cFontGray3: #666666;
// 文章宽度
$articleWidth:1040px;
$articleTitleLarge:36px;
$articleStrong:22px;
$articleNormal:18px;
$articleSmall:16px;
$articleWidth: 1040px;
$articleTitleLarge: 36px;
$articleStrong: 22px;
$articleNormal: 18px;
$articleSmall: 16px;
// 移动端
$marginSmall-M: 10px; // 小间距
......@@ -64,4 +67,4 @@ $marginMedium-M: 20px; // 间距
// $marginLarge: 28px;
// $navHeight-M:90px; // 移动端顶栏高度
$navHeight-M:72px; // 移动端顶栏高度
$navHeight-M: 72px; // 移动端顶栏高度
......