Skip to content

dev / pingan-life-index-pro

Go to a project
Toggle navigation
Toggle navigation pinning
c30007cb by simon
Options

默认提交

1 parent c5c56af6
Inline Side-by-side
Showing 11 changed files with 157 additions and 47 deletions
......@@ -21,7 +21,8 @@ export default {
},
data() {
return {
maxClientWidth: 950,
dropdownMVisible: false,
maxClientWidth: 1200,
navList: [],
loginData: {},
langData: {
......@@ -58,6 +59,29 @@ export default {
path: "/"
})
},
onShowDropdown(boo = true) {
this.dropdownMVisible = boo;
// if (this.dropdownMVisible) {
// this.stop();
// } else {
// this.move();
// }
},
// stop() {
// var mo = function (e) {
// e.preventDefault();
// };
// document.body.style.overflow = 'hidden';
// document.addEventListener("touchmove", mo, false); //禁止页面滑动
// },
// /***取消滑动限制***/
// move() {
// var mo = function (e) {
// e.preventDefault();
// };
// document.body.style.overflow = ''; //出现滚动条
// document.removeEventListener("touchmove", mo, false);
// },
checkIsSmallScreen() {
const self = this;
if (document.body.clientWidth > self.maxClientWidth) {
......
@import '@/styles/_support';
$navHei: 7.666667rem;
$navHeiM: 6rem;
.v-header {
height: 7.666667rem;
height: $navHei;
background-color: #fff;
color: $cFontGray;
position: relative;
......@@ -89,8 +92,24 @@
display: block;
}
// 移动端导航
.mobile {
display: none;
&-nav-list {
position: absolute;
right: 0;
top: 32px;
display: flex;
align-items: center;
img {
width: 20px;
margin-left: 20px;
}
}
}
@media (max-width: 1200px) {
......@@ -115,4 +134,8 @@
}
@media (max-width: 768px) {}
@media (max-width: 768px) {
.v-header {
.logo-img {}
}
}
......
......@@ -7,7 +7,12 @@
<div class="main-nav">
<!-- mobile -->
<div class="nav-list-m mobile">
<m-dropdown class="lang" :type="'login'" :data-obj="loginData" :data-list="loginData.list"></m-dropdown>
<div class="mobile-nav-list">
<img src="@/assets/images/home/mobile-user.png" alt="">
<img @click="onShowDropdown(true)" v-if="!dropdownMVisible" src="@/assets/images/home/mobile-nav.png" alt="">
<img @click="onShowDropdown(false)" v-else src="@/assets/images/home/mobile-nav-close.png" alt="">
</div>
<m-dropdown class="lang" :lang-list="langData.list" :visible="dropdownMVisible" :show-dropdown-m="onShowDropdown"></m-dropdown>
</div>
<!-- pc -->
......
......@@ -14,42 +14,28 @@ export default {
navList: [],
activeNames: [],
activeName: [],
visible: true,
activeIndex: -1,
borderBoo:false
borderBoo: false
};
},
props: {
// visible: {
// type: Boolean,
// default () {
// return true;
// }
// },
// type: {
// type: String,
// default () {
// return "nav";
// }
// },
// dataObj: {
// type: Object,
// default () {
// return {};
// }
// },
// dataList: {
// type: Array,
// default () {
// return [];
// }
// },
// labelProperty: {
// type: String,
// default () {
// return "name";
// }
// }
visible: {
type: Boolean,
default () {
return false;
}
},
langList: {
type: Array,
default () {
return [];
}
},
// 显示/隐藏移动端导航
showDropdownM: {
type: Function,
default: null
},
},
computed: {
locale() {
......@@ -63,15 +49,28 @@ export default {
onClickHandler(item) {
let path = item && item.path || "";
if (path) {
this.showDropdownM(false);
this.$router.push({
path: path
})
}
// this.visible = false;
},
// 点击item
onChangeHandler(evt) {
this.activeIndex = evt;
},
/**
* 设置语言
*/
setLangHandler(curData) {
this.showDropdownM(false);
// 如果是语言设置，则设置语言
let lang = curData.value;
this.$i18n.locale = lang;
localStorage.setItem("lang", lang);
this.sTitle = curData.name;
window.location.reload();
},
initData() {
let navList = this.i18n.nav.navList;
navList.forEach(element => {
......@@ -80,7 +79,8 @@ export default {
)
});
this.navList = navList;
console.log("navList:", this.navList);
console.log("langList:", this.langList);
}
},
created() {
......
@import '@/styles/_support';
.panel {
z-index: 9999;
display: block;
left: 0;
top: $navHeight-M;
position: fixed;
width: 100%;
height: 100%;
background-color: rgba($color: #000000, $alpha: 0.3);
// background-color: #ffffff;
// background-color: rgba($color: #000000, $alpha: 0.3);
background-color: #ffffff;
overflow: scroll;
padding-bottom: 200px;
// 遮罩
.mask {
width: 100%;
height: 100%;
position: fixed;
z-index: 1001;
left: 0;
top: 0;
}
.list {
position: relative;
z-index: 2001;
padding: 0 20px;
// background-color: #ffffff;
}
// 国际化
.lang {
position: relative;
z-index: 2002;
display: flex;
background-color: #ffffff;
padding: 20px 36px;
&-item {
border-right: solid 1px #ebedf0;
padding: 0 12px;
@extend .fcc;
&:first-child {
padding: 0 10px 0 0;
}
&-act {
color: $cOrange;
}
}
}
}
.coll-item-act{
color:$cOrange;
.coll-item-act {
color: $cOrange;
}
.list-item {
......@@ -30,6 +70,11 @@
border-bottom: 1px solid #ebedf0;
font-size: 14px;
color: $cFontGray;
background-color: #fff;
.txt {
flex: 1;
}
}
.icon-wrap {
......@@ -57,6 +102,8 @@
background: url("~@/assets/images/home/icon-head-plus-act.png") no-repeat center;
}
.hide{
.hide {
display: none;
}
......
<template>
<div>
<div class="panel" :class="{'hide':!visible}">
<div class="mask" @click="showDropdownM(false)"></div>
<!-- 列表 -->
<div class="list">
<div v-for="(item,index) in navList" :key="item.id" :index="index">
<van-collapse @change="onChangeHandler" v-model="activeNames[index]" v-if="item && item.list && item.list.length > 0">
<van-collapse-item :border="borderBoo" :title="item.name" :name="index">
<div slot="title">
<span :class="{'coll-item-act':index == activeIndex}" >{{item.name}}</span>
<span :class="{'coll-item-act':index == activeIndex}">{{item.name}}</span>
</div>
<div slot="right-icon">
<div class="icon-wrap">
<div class="plus-icon" :class="{'plus-icon-act':index == activeIndex}"></div>
</div>
</div>
<div @click="onClickHandler(item)" class="list-item" v-for="item2 in item.list" :key="item2.id">
<div class="arrow-icon"></div> {{ item2.name }}
<div @click="onClickHandler(item2)" class="list-item" v-for="item2 in item.list" :key="item2.id">
<div class="arrow-icon"></div>
<div class="txt">{{ item2.name }}</div>
</div>
</van-collapse-item>
</van-collapse>
......@@ -23,6 +26,12 @@
</div>
</div>
</div>
<!-- 语言 -->
<div v-if="langList && langList.length > 0" class="lang">
<div @click="setLangHandler(item)" class="lang-item pointer" :class="{'lang-item-act':locale==item.value}" v-for="item in langList" :key="item.id">
{{ item.name }}
</div>
</div>
</div>
</div>
</template>
......
......@@ -60,7 +60,6 @@
.info2 {
.info-item {
// margin: 0;
@extend .bb;
padding-right: 2rem;
}
......
......@@ -82,6 +82,9 @@
.content {
@include content-percent();
}
.ebg {
display: none;
}
}
@media (max-width: 768px) {
......