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 { ...@@ -21,7 +21,8 @@ export default {
21 }, 21 },
22 data() { 22 data() {
23 return { 23 return {
24 maxClientWidth: 950, 24 dropdownMVisible: false,
25 maxClientWidth: 1200,
25 navList: [], 26 navList: [],
26 loginData: {}, 27 loginData: {},
27 langData: { 28 langData: {
...@@ -58,6 +59,29 @@ export default { ...@@ -58,6 +59,29 @@ export default {
58 path: "/" 59 path: "/"
59 }) 60 })
60 }, 61 },
62 onShowDropdown(boo = true) {
63 this.dropdownMVisible = boo;
64 // if (this.dropdownMVisible) {
65 // this.stop();
66 // } else {
67 // this.move();
68 // }
69 },
70 // stop() {
71 // var mo = function (e) {
72 // e.preventDefault();
73 // };
74 // document.body.style.overflow = 'hidden';
75 // document.addEventListener("touchmove", mo, false); //禁止页面滑动
76 // },
77 // /***取消滑动限制***/
78 // move() {
79 // var mo = function (e) {
80 // e.preventDefault();
81 // };
82 // document.body.style.overflow = ''; //出现滚动条
83 // document.removeEventListener("touchmove", mo, false);
84 // },
61 checkIsSmallScreen() { 85 checkIsSmallScreen() {
62 const self = this; 86 const self = this;
63 if (document.body.clientWidth > self.maxClientWidth) { 87 if (document.body.clientWidth > self.maxClientWidth) {
......
1 @import '@/styles/_support'; 1 @import '@/styles/_support';
2 2
3 $navHei: 7.666667rem;
4 $navHeiM: 6rem;
5
3 .v-header { 6 .v-header {
4 height: 7.666667rem; 7 height: $navHei;
5 background-color: #fff; 8 background-color: #fff;
6 color: $cFontGray; 9 color: $cFontGray;
7 position: relative; 10 position: relative;
...@@ -89,8 +92,24 @@ ...@@ -89,8 +92,24 @@
89 display: block; 92 display: block;
90 } 93 }
91 94
95 // 移动端导航
92 .mobile { 96 .mobile {
93 display: none; 97 display: none;
98
99 &-nav-list {
100 position: absolute;
101 right: 0;
102 top: 32px;
103
104 display: flex;
105 align-items: center;
106
107 img {
108 width: 20px;
109 margin-left: 20px;
110 }
111 }
112
94 } 113 }
95 114
96 @media (max-width: 1200px) { 115 @media (max-width: 1200px) {
...@@ -115,4 +134,8 @@ ...@@ -115,4 +134,8 @@
115 134
116 } 135 }
117 136
118 @media (max-width: 768px) {} 137 @media (max-width: 768px) {
138 .v-header {
139 .logo-img {}
140 }
141 }
......
...@@ -7,7 +7,12 @@ ...@@ -7,7 +7,12 @@
7 <div class="main-nav"> 7 <div class="main-nav">
8 <!-- mobile --> 8 <!-- mobile -->
9 <div class="nav-list-m mobile"> 9 <div class="nav-list-m mobile">
10 <m-dropdown class="lang" :type="'login'" :data-obj="loginData" :data-list="loginData.list"></m-dropdown> 10 <div class="mobile-nav-list">
11 <img src="@/assets/images/home/mobile-user.png" alt="">
12 <img @click="onShowDropdown(true)" v-if="!dropdownMVisible" src="@/assets/images/home/mobile-nav.png" alt="">
13 <img @click="onShowDropdown(false)" v-else src="@/assets/images/home/mobile-nav-close.png" alt="">
14 </div>
15 <m-dropdown class="lang" :lang-list="langData.list" :visible="dropdownMVisible" :show-dropdown-m="onShowDropdown"></m-dropdown>
11 </div> 16 </div>
12 17
13 <!-- pc --> 18 <!-- pc -->
......
...@@ -14,42 +14,28 @@ export default { ...@@ -14,42 +14,28 @@ export default {
14 navList: [], 14 navList: [],
15 activeNames: [], 15 activeNames: [],
16 activeName: [], 16 activeName: [],
17 visible: true,
18 activeIndex: -1, 17 activeIndex: -1,
19 borderBoo:false 18 borderBoo: false
20 }; 19 };
21 }, 20 },
22 props: { 21 props: {
23 // visible: { 22 visible: {
24 // type: Boolean, 23 type: Boolean,
25 // default () { 24 default () {
26 // return true; 25 return false;
27 // } 26 }
28 // }, 27 },
29 // type: { 28 langList: {
30 // type: String, 29 type: Array,
31 // default () { 30 default () {
32 // return "nav"; 31 return [];
33 // } 32 }
34 // }, 33 },
35 // dataObj: { 34 // 显示/隐藏移动端导航
36 // type: Object, 35 showDropdownM: {
37 // default () { 36 type: Function,
38 // return {}; 37 default: null
39 // } 38 },
40 // },
41 // dataList: {
42 // type: Array,
43 // default () {
44 // return [];
45 // }
46 // },
47 // labelProperty: {
48 // type: String,
49 // default () {
50 // return "name";
51 // }
52 // }
53 }, 39 },
54 computed: { 40 computed: {
55 locale() { 41 locale() {
...@@ -63,15 +49,28 @@ export default { ...@@ -63,15 +49,28 @@ export default {
63 onClickHandler(item) { 49 onClickHandler(item) {
64 let path = item && item.path || ""; 50 let path = item && item.path || "";
65 if (path) { 51 if (path) {
52 this.showDropdownM(false);
66 this.$router.push({ 53 this.$router.push({
67 path: path 54 path: path
68 }) 55 })
69 } 56 }
70 // this.visible = false;
71 }, 57 },
58 // 点击item
72 onChangeHandler(evt) { 59 onChangeHandler(evt) {
73 this.activeIndex = evt; 60 this.activeIndex = evt;
74 }, 61 },
62 /**
63 * 设置语言
64 */
65 setLangHandler(curData) {
66 this.showDropdownM(false);
67 // 如果是语言设置，则设置语言
68 let lang = curData.value;
69 this.$i18n.locale = lang;
70 localStorage.setItem("lang", lang);
71 this.sTitle = curData.name;
72 window.location.reload();
73 },
75 initData() { 74 initData() {
76 let navList = this.i18n.nav.navList; 75 let navList = this.i18n.nav.navList;
77 navList.forEach(element => { 76 navList.forEach(element => {
...@@ -80,7 +79,8 @@ export default { ...@@ -80,7 +79,8 @@ export default {
80 ) 79 )
81 }); 80 });
82 this.navList = navList; 81 this.navList = navList;
83 82 console.log("navList:", this.navList);
83 console.log("langList:", this.langList);
84 } 84 }
85 }, 85 },
86 created() { 86 created() {
......
1 @import '@/styles/_support'; 1 @import '@/styles/_support';
2 2
3 .panel { 3 .panel {
4 z-index: 9999;
4 display: block; 5 display: block;
5 left: 0; 6 left: 0;
6 top: $navHeight-M; 7 top: $navHeight-M;
7 position: fixed; 8 position: fixed;
8 width: 100%; 9 width: 100%;
9 height: 100%; 10 height: 100%;
10 background-color: rgba($color: #000000, $alpha: 0.3); 11 // background-color: rgba($color: #000000, $alpha: 0.3);
11 // background-color: #ffffff; 12 background-color: #ffffff;
13 overflow: scroll;
14 padding-bottom: 200px;
15
16 // 遮罩
17 .mask {
18 width: 100%;
19 height: 100%;
20 position: fixed;
21 z-index: 1001;
22 left: 0;
23 top: 0;
24 }
12 25
13 .list { 26 .list {
27 position: relative;
28 z-index: 2001;
14 padding: 0 20px; 29 padding: 0 20px;
30 // background-color: #ffffff;
31 }
32
33 // 国际化
34 .lang {
35 position: relative;
36 z-index: 2002;
37 display: flex;
15 background-color: #ffffff; 38 background-color: #ffffff;
39 padding: 20px 36px;
40
41 &-item {
42 border-right: solid 1px #ebedf0;
43 padding: 0 12px;
44 @extend .fcc;
45
46
47 &:first-child {
48 padding: 0 10px 0 0;
49 }
50
51 &-act {
52 color: $cOrange;
53 }
54 }
55
16 } 56 }
17 57
18 } 58 }
19 59
20 .coll-item-act{ 60 .coll-item-act {
21 color:$cOrange; 61 color: $cOrange;
22 } 62 }
23 63
24 .list-item { 64 .list-item {
...@@ -30,6 +70,11 @@ ...@@ -30,6 +70,11 @@
30 border-bottom: 1px solid #ebedf0; 70 border-bottom: 1px solid #ebedf0;
31 font-size: 14px; 71 font-size: 14px;
32 color: $cFontGray; 72 color: $cFontGray;
73 background-color: #fff;
74
75 .txt {
76 flex: 1;
77 }
33 } 78 }
34 79
35 .icon-wrap { 80 .icon-wrap {
...@@ -57,6 +102,8 @@ ...@@ -57,6 +102,8 @@
57 background: url("~@/assets/images/home/icon-head-plus-act.png") no-repeat center; 102 background: url("~@/assets/images/home/icon-head-plus-act.png") no-repeat center;
58 } 103 }
59 104
60 .hide{ 105
106
107 .hide {
61 display: none; 108 display: none;
62 } 109 }
......
1 <template> 1 <template>
2 <div> 2 <div>
3 <div class="panel" :class="{'hide':!visible}"> 3 <div class="panel" :class="{'hide':!visible}">
4 <div class="mask" @click="showDropdownM(false)"></div>
5 <!-- 列表 -->
4 <div class="list"> 6 <div class="list">
5 <div v-for="(item,index) in navList" :key="item.id" :index="index"> 7 <div v-for="(item,index) in navList" :key="item.id" :index="index">
6 <van-collapse @change="onChangeHandler" v-model="activeNames[index]" v-if="item && item.list && item.list.length > 0"> 8 <van-collapse @change="onChangeHandler" v-model="activeNames[index]" v-if="item && item.list && item.list.length > 0">
7 <van-collapse-item :border="borderBoo" :title="item.name" :name="index"> 9 <van-collapse-item :border="borderBoo" :title="item.name" :name="index">
8 <div slot="title"> 10 <div slot="title">
9 <span :class="{'coll-item-act':index == activeIndex}" >{{item.name}}</span> 11 <span :class="{'coll-item-act':index == activeIndex}">{{item.name}}</span>
10 </div> 12 </div>
11 <div slot="right-icon"> 13 <div slot="right-icon">
12 <div class="icon-wrap"> 14 <div class="icon-wrap">
13 <div class="plus-icon" :class="{'plus-icon-act':index == activeIndex}"></div> 15 <div class="plus-icon" :class="{'plus-icon-act':index == activeIndex}"></div>
14 </div> 16 </div>
15 </div> 17 </div>
16 <div @click="onClickHandler(item)" class="list-item" v-for="item2 in item.list" :key="item2.id"> 18 <div @click="onClickHandler(item2)" class="list-item" v-for="item2 in item.list" :key="item2.id">
17 <div class="arrow-icon"></div> {{ item2.name }} 19 <div class="arrow-icon"></div>
20 <div class="txt">{{ item2.name }}</div>
18 </div> 21 </div>
19 </van-collapse-item> 22 </van-collapse-item>
20 </van-collapse> 23 </van-collapse>
...@@ -23,6 +26,12 @@ ...@@ -23,6 +26,12 @@
23 </div> 26 </div>
24 </div> 27 </div>
25 </div> 28 </div>
29 <!-- 语言 -->
30 <div v-if="langList && langList.length > 0" class="lang">
31 <div @click="setLangHandler(item)" class="lang-item pointer" :class="{'lang-item-act':locale==item.value}" v-for="item in langList" :key="item.id">
32 {{ item.name }}
33 </div>
34 </div>
26 </div> 35 </div>
27 </div> 36 </div>
28 </template> 37 </template>
......
...@@ -60,7 +60,6 @@ ...@@ -60,7 +60,6 @@
60 60
61 .info2 { 61 .info2 {
62 .info-item { 62 .info-item {
63 // margin: 0;
64 @extend .bb; 63 @extend .bb;
65 padding-right: 2rem; 64 padding-right: 2rem;
66 } 65 }
......
...@@ -82,6 +82,9 @@ ...@@ -82,6 +82,9 @@
82 .content { 82 .content {
83 @include content-percent(); 83 @include content-percent();
84 } 84 }
85 .ebg {
86 display: none;
87 }
85 } 88 }
86 89
87 @media (max-width: 768px) { 90 @media (max-width: 768px) {
......