Skip to content

dev / pingan-life-index-pro

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

页首修改

1 parent 3b13238d
Inline Side-by-side
Showing 25 changed files with 2168 additions and 52 deletions
1 /**
2 * 组件描述:PC顶栏导航下拉菜单
3 */
4 import api from '@/api/api'
5 import {
6 httpPost
7 } from '@/api/fetch-api.js'
8
9 export default {
10 name: "DropDownList",
11 data() {
12 return {
13 activeIndex: 0,
14 sTitle: this.dataObj && this.dataObj.name || '',
15 reloadBlackList: []
16 };
17 },
18 props: {
19 /**
20 * 导航类型
21 * nav:普通菜单导航
22 * login:登陆菜单
23 * lang:三语切换菜单
24 */
25 type: {
26 type: String,
27 default () {
28 return "nav";
29 }
30 },
31 /**
32 * 传入菜单完整数据
33 */
34 dataObj: {
35 type: Object,
36 default () {
37 return {};
38 }
39 },
40 /**
41 * 传入菜单列表
42 */
43 dataList: {
44 type: Array,
45 default () {
46 return [];
47 }
48 },
49 labelProperty: {
50 type: String,
51 default () {
52 return "name";
53 }
54 }
55 },
56 directives: {
57 dpl: {
58 bind(el) {
59 el.style.display = "none";
60 }
61 }
62 },
63 methods: {
64 onNavHandler() {
65 console.log("this.dataObj:", this.dataObj);
66 let path = this.dataObj && this.dataObj.path || "";
67 if (path) {
68 this.$router.push({
69 path: path
70 })
71 }
72 },
73 onOverHandler(event) {
74 let ul = event.currentTarget.childNodes[1].childNodes[1];
75 ul.style.display = "block";
76 },
77 onOutHandler(event) {
78 // console.log(event);
79 let ul = event.currentTarget.childNodes[1].childNodes[1];
80 ul.style.display = "none";
81 },
82 onClickHandler(event, index) {
83 // 隐藏其他
84 if (this.$refs.ul) {
85 this.$refs.ul.style.display = "none";
86 }
87
88 // 选择item
89 this.activeIndex = index;
90 let curData = this.dataList[index];
91 if (this.type == "lang") {
92 // 如果是语言设置，则设置语言
93 let lang = curData.value;
94 if (lang != localStorage.getItem('lang')) {
95 localStorage.setItem("lang", lang);
96 if (this.reloadBlackList.indexOf(this.$route.path) >= 0) {
97 window.location.reload();
98 } else {
99 this.$i18n.locale = lang;
100 this.sTitle = curData.name;
101 this.$root.eventBus.$emit("langChange");
102 }
103 }
104 } else {
105 let item = curData;
106 let path = item && item.path || "";
107 this.$root.eventBus.$emit(item.path);
108 if (path) {
109 // console.log("path:", path);
110 // modify
111 if (path == "/custom/service?q=m5") {
112 path = "/clarms"
113 }
114 this.$router.push({
115 path: path
116 })
117 } else {
118 let value = item && item.value || null;
119 if (value) {
120 switch (value) {
121 case "login":
122 this.onLoginHandler();
123 break;
124 case "logout":
125 this.logoutHandler();
126 break;
127 case "gotoVHIS":
128 // gotoVHIS(this.$i18n.locale);
129 this.$router.push({
130 path: "/vhis"
131 });
132 break;
133 }
134 }
135 }
136 }
137 },
138 onLoginHandler() {
139 this.$root.eventBus.$emit("login");
140 if (this.$route.name == "login") {
141 return;
142 } else if (this.$route.name == "register" || this.$route.name == "passwordFind") {
143 this.$router.push({
144 path: "/login"
145 });
146 } else {
147 let callback = this.$route.fullPath;
148 this.$router.push({
149 path: "/login?callback=" + callback
150 });
151 }
152 },
153 logoutHandler() {
154 this.clearCache();
155 httpPost({
156 url: api.logout
157 }).then(() => {
158 this.$store.commit("SET_USER_INFO", null);
159 this.showLogoutTip();
160 });
161 },
162 clearCache() {
163 for (let index = 0; index < sessionStorage.length; index++) {
164 let key = sessionStorage.key(index);
165 console.log(key);
166 sessionStorage.removeItem(key);
167 }
168 },
169 showLogoutTip() {
170 // 登出后的提示
171 // alert("登出成功");
172 },
173 updateTitle(name) {
174 this.sTitle = name || this.sTitle;
175 }
176 },
177 computed: {
178 dplLable() {
179 return this.dataList[this.activeIndex][this.labelProperty];
180 }
181 },
182 created() {},
183 };
1 @import '@/styles/_support.scss';
2
3 .drop-list {
4 display: inline-block;
5 min-width: 120px;
6 position: relative;
7 margin: 0 13.2px;
8 font-size: $fontSizeTitle;
9
10 .list {
11 position: absolute;
12 width: 132px;
13 left: 0;
14 right: 0;
15 margin: 0 auto;
16 font-size: $fontSize;
17 left: 50%;
18 transform: translateX(-50%); //居中处理
19
20 .space {
21 height: 18px;
22 }
23 }
24
25 span {
26 display: block;
27 text-align: center;
28 }
29
30 span:hover {}
31
32 ul {
33 display: none;
34 overflow: hidden;
35 box-shadow: 0 0 18px 0 rgba(255, 87, 0, 0.15);
36 border-radius: 6px;
37
38 li {
39 // border-bottom: solid 1px #f1f1f1;
40 background: #ffffff;
41 text-align: center;
42 padding: 18px 0;
43 position: relative;
44
45 &:after {
46 content: "";
47 width: 84px;
48 height: 1px;
49 background: #f1f1f1;
50 position: absolute;
51 bottom: 0;
52 left: 50%;
53 transform: translateX(-50%); //居中处理
54 }
55
56 }
57
58 li:last-child {
59 border-bottom: none;
60
61 &:after {
62 background: transparent;
63 }
64 }
65
66 li:hover {
67 color: $cOrange;
68 }
69 }
70 }
71 .drop-list:lang(en){
72 min-width: 0;
73 margin: 0 32px;
74 }
75
76 .user {
77 width: 111px;
78 height: 36px;
79 border-radius: 36px;
80 background-color: $cOrange;
81 display: flex;
82 align-items: center;
83 justify-content: center;
84 color: #ffffff;
85 margin: 0 auto;
86
87 span {
88 max-width: 51px;
89 overflow: hidden;
90 white-space: nowrap;
91 text-overflow: ellipsis;
92 }
93
94 .icon-img {
95 margin: 0 6px;
96 }
97 }
98
99 // 登陆
100 .login {}
101
102
103 @media (max-width: 1100px) {
104 .drop-list {
105 margin: 0 28px;
106 min-width: 0;
107 }
108 .drop-list:lang(en) {
109 margin: 0 22px;
110 }
111 }
112
113
114 @media (max-width: 1000px) {
115 // .drop-list {
116 // margin: 0 20px;
117 // }
118 }
1 <template>
2 <div class="drop-list" :class="{'login':type=='login'}" @mouseover="onOverHandler($event)" @mouseout="onOutHandler($event)">
3 <!-- 登陆下拉样式 -->
4 <template v-if="type=='login'">
5 <div class="user" @click="onLoginHandler()">
6 <img class="icon-img" src="@/assets/images/home/icon-user.png">
7 <span>{{dataObj.name}}</span>
8 </div>
9 </template>
10 <!-- 其他下拉样式 -->
11 <template v-else>
12 <span @click="onNavHandler()">
13 {{type == "lang" ? sTitle : dataObj.name}}
14 </span>
15 </template>
16 <div class="list">
17 <div class="space"></div>
18 <ul ref="ul" >
19 <li v-for="(item, index) in dataList" :key="index" @mousedown="onClickHandler($event,index)">{{item[labelProperty]}}</li>
20 </ul>
21 </div>
22 </div>
23 </template>
24
25 <script src="./dropdown.js"></script>
26 <style lang="scss" scoped>
27 @import "./dropdown.scss";
28 </style>
1
2 /**
3 * 组件描述:页脚
4 * 静态页面
5 */
6
7 export default {
8 data() {
9 return {
10 key: 'value',
11 qrcodeVisible: false,
12 }
13 },
14 components: {},
15 methods: {
16 onOverHandler(event) {
17 this.qrcodeVisible = true;
18 },
19 onOutHandler(event) {
20 this.qrcodeVisible = false;
21 },
22 toPage(name) {
23 document.documentElement.scrollTop = 0;
24 document.body.scrollTop = 0;
25 this.$router.push({
26 name: name
27 })
28 },
29 toPath(path) {
30 document.documentElement.scrollTop = 0;
31 document.body.scrollTop = 0;
32 this.$router.push({
33 path: path
34 })
35 },
36 initData() {}
37 },
38 mounted() {},
39 created() {}
40 }
1 @import '@/styles/_support.scss';
2
3 .v-footer {
4 color: #ffffff;
5 background-color: #2e2b2a;
6 font-size: $fontSize;
7
8 .footer-containter {
9 margin: 0 auto;
10 max-width: 1200px;
11
12 .cont {
13 .logo-wrap {
14 padding: 26px 0;
15
16 .logo-img {
17 cursor: pointer;
18 }
19 }
20
21 .line {
22 width: 100%;
23 height: 1px;
24 opacity: 0.2;
25 background-color: #ffffff;
26 }
27
28 // 信息
29 .info {
30 padding: 24px 0 24px;
31 display: flex;
32
33 // 热线
34 .hotline {
35 min-width: 294px;
36
37 .contact {
38 .n-item {
39 margin-bottom: 7.2px;
40 }
41
42 .phone {
43 color: $cOrange;
44 font-size: $fontSizeTitle;
45 font-weight: bold;
46 }
47
48 &:first-child {
49 margin-bottom: 24px;
50 }
51 }
52 }
53
54 // 导航
55 .nav {
56 display: flex;
57
58 .nav-v {}
59
60 .n-item {
61 cursor: pointer;
62 min-width: 177px;
63 }
64 }
65
66 .nav2 {
67 display: none;
68 }
69
70 // 公众号
71 .public {
72 position: relative;
73 text-align: left;
74 margin-left: 63.84px;
75
76 .qrcode-wrap {
77 text-align: center;
78 margin-top: 3.6px;
79
80
81 .qrcode {
82 width: 100px;
83 }
84
85 .c1 {
86 margin-top: 3.6px;
87 }
88 }
89
90 .icon {
91 margin-top: 9px;
92 margin-right: 12px;
93 display: inline-block;
94 }
95 }
96
97 // 公共组件
98 .n-item {
99 margin-bottom: 24px;
100 padding-right: 36px;
101 color: #dcdddd;
102
103 &:first-child {
104 margin-bottom: 32px;
105 }
106
107 &:last-child {
108 margin-bottom: 0;
109 }
110 }
111 }
112
113 // 版权
114 .copyright {
115 color: rgba(179, 177, 168, 0.5);
116 padding: 18px 0;
117 line-height: 1.58;
118 font-size: $fontSizeSmall;
119 }
120 }
121
122 }
123 }
124
125
126 @media (max-width: 1200px) {
127 .v-footer {
128 @include content-percent();
129
130 .footer-containter {
131 .cont {
132 .info {
133 display: block;
134
135 .hotline {}
136
137 .nav {
138 margin-top: 24px;
139 display: flex;
140
141 .nav-v {
142 width: 100%;
143 }
144
145 .n-item {
146 min-width: 0;
147 margin-right: 0;
148 padding-right: 10px;
149 }
150 }
151
152 .nav2 {
153 display: none;
154 }
155
156 .public {
157 margin: 0;
158 margin-top: 36px;
159 text-align: left;
160 min-height: 144px;
161 }
162 }
163
164 .copyright {
165 box-sizing: border-box;
166 padding-right: 24px;
167 }
168 }
169 }
170 }
171 }
172
173 @media (max-width: 768px) {
174 .v-footer {
175 font-size: $fontSizeSmall-M;
176
177 .footer-containter {
178 .cont {
179 .info {
180 display: flex;
181 justify-content: space-between;
182
183 .hotline {
184 min-width: 0;
185
186 .phone {
187 font-size: $fontSizeSmall-M !important;
188 font-weight: bold !important;
189 }
190 }
191
192 .nav {
193 display: none;
194 margin-top: 0;
195
196 .nav-v {}
197
198 .n-item {}
199 }
200
201 .nav2 {
202 display: block;
203 }
204
205 .public {
206 margin: 0;
207 min-width: 108px;
208
209 .qrcode-wrap {
210 img {
211 width: 84px;
212 }
213
214 .c1 {
215 display: none;
216 }
217 }
218 }
219
220 // 公共组件
221 .n-item {
222 margin-bottom: 24px;
223
224 &:first-child {
225 margin-bottom: 24px;
226 }
227 }
228 }
229
230 .copyright {}
231 }
232 }
233 }
234
235 }
1
2 <template>
3 <footer class="v-footer ">
4 <div class="footer-containter ">
5 <div class="cont">
6 <div class="logo-wrap">
7 <img class="logo-img" src="@/assets/images/home/footer-logo.png">
8 </div>
9 <div class="line"></div>
10 <!-- 信息 -->
11 <div class="info">
12 <div class="hotline">
13 <div class="contact">
14 <div class="n-item">{{$t('footer.hkPhone')}}</div>
15 <div class="phone">(852)2983 8866</div>
16 </div>
17 <div class="contact">
18 <div class="n-item">{{$t('footer.cnPhone')}}</div>
19 <div class="phone">(86)40078 95511</div>
20 </div>
21 </div>
22 <div class="nav">
23 <div class="nav-v">
24 <div @click="toPage('profile')" class="n-item">{{$t('footer.aboutUs')}}</div>
25 <div @click="toPage('profile')" class="n-item">{{$t('footer.companyIntroduction')}}</div>
26 <div @click="toPage('newsList')" class="n-item">{{$t('footer.news')}}</div>
27 <div @click="toPage('joinUs')" class="n-item">{{$t('footer.joinUs')}}</div>
28 </div>
29 <div class="nav-v">
30 <div @click="toPage('help')" class="n-item">{{$t('footer.helpCenter')}}</div>
31 <div @click="toPage('privacy')" class="n-item">{{$t('footer.privacy')}}</div>
32 <div @click="toPage('terms')" class="n-item">{{$t('footer.terms')}}</div>
33 <div @click="toPage('personalDataCollection')" class="n-item">{{$t('footer.protocol')}}</div>
34 </div>
35 <div class="nav-v">
36 <div @click="toPath('/custom/service?q=m1')" class="n-item">{{$t('footer.contactUs')}}</div>
37 <div @click="toPage('contactMethod')" class="n-item">{{$t('footer.contactInformation')}}</div>
38 <div @click="toPage('serviceNet')" class="n-item">{{$t('footer.service')}}</div>
39 <div @click="toPage('map')" class="n-item">{{$t('footer.map')}}</div>
40 </div>
41 </div>
42
43 <div class="nav nav2">
44 <div class="nav-v">
45 <div @click="toPage('privacy')" class="n-item">{{$t('footer.privacy')}}</div>
46 <div @click="toPage('terms')" class="n-item">{{$t('footer.terms')}}</div>
47 <div @click="toPage('personalDataCollection')" class="n-item">{{$t('footer.protocol')}}</div>
48 </div>
49 </div>
50
51 <div class="public">
52 <div class="tit">{{$t('footer.qrcode')}}</div>
53 <div @click="qrcodeVisible = !qrcodeVisible" v-if="qrcodeVisible" class="qrcode-wrap">
54 <img @mouseout="onOutHandler($event)" src="@/assets/images/home/qrcode.png" alt="">
55 <div class="c1">{{$t('footer.qrcodeBot')}}</div>
56 </div>
57 <template v-else>
58 <img @click="qrcodeVisible = !qrcodeVisible" @mouseover="onOverHandler($event)" @mouseout="onOutHandler($event)" class="icon pointer" src="@/assets/images/home/footer-icon-1.png" alt="">
59 <img class="icon pointer" src="@/assets/images/home/footer-icon-2.png" alt="">
60 <img class="icon pointer" src="@/assets/images/home/footer-icon-3.png" alt="">
61 </template>
62 </div>
63
64 </div>
65 <div class="line"></div>
66 <!-- 版权 -->
67 <div class="copyright">
68 {{$t('footer.copyright')}}
69 </div>
70 </div>
71 </div>
72 </footer>
73 </template>
74
75 <script src="./footer.js"></script>
76 <style lang="scss" scoped>
77 @import "./footer.scss";
78 </style>
1 /**
2 * 组件描述:官网顶栏导航
3 * 通过@midea 媒体查询决定显示PC/移动端样式
4 */
5
6 import {
7 mapState
8 } from 'vuex'
9
10 import {
11 getObjByListKeyValue
12 } from '@utils/utils.js'
13 import VDropdown from '@components/home/dropdown/dropdown.vue'
14 import MDropdown from '@components/home/m-dropdown/m-dropdown.vue'
15
16 export default {
17 name: 'VHeader',
18 components: {
19 VDropdown,
20 MDropdown
21 },
22 computed: {
23 i18n() {
24 return this.$i18n.messages && this.$i18n.locale ? this.$i18n.messages[this.$i18n.locale] : {};
25 }
26 },
27 data() {
28 return {
29 dropdownMVisible: false,
30 loginMVisible: false,
31 maxClientWidth: 1200,
32 // 用于传入到导航组件dropdown 常规导航菜单数据
33 navList: [],
34 // 用于传入到导航组件dropdown 登菜单数据
35 loginData: {},
36 // 用于传入到导航组件dropdown 语言菜单数据
37 langData: {
38 name: "繁",
39 path: "",
40 list: [{
41 name: "繁",
42 path: "",
43 value: "tc"
44 },
45 {
46 name: "简",
47 path: "",
48 value: "zh"
49 },
50 {
51 name: "EN",
52 path: "",
53 value: "en"
54 },
55 ]
56 }
57 }
58 },
59 computed: {
60 ...mapState({
61 isSmallScreen: state => state.isSmallScreen,
62 userInfo: state => state.userInfo
63 })
64 },
65 methods: {
66 toIndex() {
67 this.$router.push({
68 path: "/"
69 })
70 },
71 onShowDropdown(evtStr) {
72 this.dropdownMVisible = false;
73 this.loginMVisible = false;
74 if (evtStr == 'nav') {
75 this.dropdownMVisible = true;
76 } else if (evtStr == 'login') {
77 this.loginMVisible = true;
78 } else {}
79 },
80 checkIsSmallScreen() {
81 const self = this;
82 if (document.body.clientWidth > self.maxClientWidth) {
83 self.$store.commit('IS_SMALL_SCREEN', false)
84 } else {
85 self.$store.commit('IS_SMALL_SCREEN', true)
86 }
87 },
88 initData() {
89 let i18n = this.$i18n.messages[this.$i18n.locale] || {};
90 this.buildLoginMenu();
91 this.navList = i18n.nav.navList;
92 let curLang = getObjByListKeyValue(this.$i18n.locale, "value", this.langData.list)
93 this.langData.name = curLang.name;
94 },
95 /**
96 * 根据登陆状态构建登陆菜单
97 */
98 buildLoginMenu() {
99 let i18n = this.$i18n.messages[this.$i18n.locale] || {};
100 let menuData = JSON.parse(JSON.stringify(i18n.nav.loginData));
101 let list = [];
102 if (this.userInfo && this.userInfo.name) {
103 menuData.name = this.userInfo.name;
104 if (this.$i18n.locale == "en" && this.userInfo.nameEn) {
105 menuData.name = this.userInfo.nameEn;
106 }
107 menuData.list.forEach(element => {
108 if (element.type == "auth") {
109 list.push(element);
110 }
111 });
112 } else {
113 menuData.list.forEach(element => {
114 if (element.type == "noAuth") {
115 list.push(element);
116 }
117 });
118 }
119 menuData.list = list;
120 this.$set(this, 'loginData', menuData);
121 }
122 },
123 beforeDestroy() {
124 window.removeEventListener('resize', this.checkIsSmallScreen(), false)
125 },
126 mounted() {
127 window.addEventListener('resize', () => this.checkIsSmallScreen(), false);
128 this.$root.eventBus.$on("langChange", () => {
129 this.initData();
130 });
131 },
132 watch: {
133 userInfo(val) {
134 this.buildLoginMenu();
135 }
136 },
137 created() {
138 this.initData();
139 },
140 }
1 @import '@/styles/_support.scss';
2
3 $navHei: 92px;
4 $navHeiM: 72px;
5
6 .v-header {
7 height: $navHei;
8 background-color: #fff;
9 color: $cFontGray;
10 position: relative;
11 z-index: 1000;
12 font-size: $fontSize;
13
14 .header-container {
15 max-width: 1200px;
16 height: 100%;
17 margin: auto;
18 display: flex;
19 align-items: center;
20 position: relative;
21 }
22
23 .main-nav {
24 height: 100%;
25 flex: 1 0 auto;
26 }
27
28 .logo-img {
29 margin-right: 43.2px;
30 max-width: 213px;
31 cursor: pointer;
32 }
33
34 .nav-list {
35 height: 100%;
36 display: flex;
37 align-items: center;
38 justify-content: flex-end;
39 position: relative;
40 }
41
42 .nav-item {
43 display: flex;
44 align-items: center;
45 height: 100%;
46 margin: 0;
47 -ms-flex-pack: center;
48 justify-content: center;
49 position: relative;
50 cursor: pointer;
51 }
52
53 .main-nav-list {
54 display: flex;
55 cursor: pointer;
56 }
57
58 .nav-item.link-item {
59 padding: 0 50px;
60 height: 60px;
61 }
62
63 .nav-item.search {
64 flex: 1 1 auto;
65 }
66
67 .nav-item.auth {
68 color: #ffffff;
69
70 .lang {
71 color: $cOrange;
72 min-width: 96px;
73 }
74 }
75 }
76
77 .pc {
78 display: block;
79 }
80
81 // 移动端导航
82 .mobile {
83 display: none;
84
85 &-nav-list {
86 position: absolute;
87 right: 0;
88 top: 24px;
89
90 display: flex;
91 align-items: center;
92
93 img {
94 width: 20px;
95 margin-left: 20px;
96 }
97 }
98
99 }
100
101 @media (max-width: 1200px) {
102 .v-header {
103 @include content-percent(1%);
104 }
105 }
106
107
108 @media (max-width: 1100px) {
109 .v-header {
110 .logo-img {
111 margin-right: 24px;
112 }
113 }
114
115 .pc {
116
117 .auth {
118 margin-right: 20px;
119 }
120
121 .nav-item.auth {
122
123 .lang {
124 min-width: auto;
125 }
126 }
127 }
128 }
129
130
131 @media (max-width: 980px) {
132 .v-header {
133
134 @include content-percent();
135
136 .main-nav {}
137
138 .logo-img {
139 max-width: 213px;
140 margin: 0;
141 }
142
143 .pc {
144 display: none;
145 }
146
147 .mobile {
148 display: block;
149
150 &-nav-list {
151 top: 32px;
152 }
153 }
154 }
155 }
156
157 @media (max-width: 768px) {
158 .v-header {
159
160 // 原1200px临界样式
161
162 .pc {
163 display: none;
164 }
165
166 height: $navHeight-M;
167
168 .logo-img {
169 width: 186px;
170 margin: 0;
171 }
172
173 .mobile {
174 display: block;
175
176 &-nav-list {
177 top: 24px;
178 }
179 }
180 }
181 }
1
2 <template>
3 <header class="v-header">
4 <div class="header-container">
5 <img @click="toIndex" src="@/assets/images/home/header-logo.png" alt="中国平安人寿保险" class="logo-img">
6
7 <div class="main-nav">
8 <!-- mobile -->
9 <div class="nav-list-m mobile">
10 <div class="mobile-nav-list">
11 <img @click="onShowDropdown('login')" v-if="!loginMVisible" src="@/assets/images/home/mobile-user.png" alt="">
12 <img @click="onShowDropdown('')" v-else src="@/assets/images/home/mobile-user.png" alt="">
13 <img @click="onShowDropdown('nav')" v-if="!dropdownMVisible" src="@/assets/images/home/mobile-nav.png" alt="">
14 <img @click="onShowDropdown('')" v-else src="@/assets/images/home/mobile-nav-close.png" alt="">
15 </div>
16 <m-dropdown class="lang" :type="'nav'" :visible="dropdownMVisible" :show-dropdown-m="onShowDropdown" :lang-list="langData.list" ref="pcMenu"></m-dropdown>
17 <m-dropdown class="lang" :type="'login'" :visible="loginMVisible" :show-dropdown-m="onShowDropdown"></m-dropdown>
18 </div>
19
20 <!-- pc -->
21 <div class="nav-list pc">
22 <div class="main-nav-list">
23 <v-dropdown v-for="item in navList" :key="item.id" :data-obj="item" :data-list="item.list">
24 </v-dropdown>
25 </div>
26 <div class="nav-item search"></div>
27 <div class="nav-item auth">
28 <v-dropdown class="lang" :type="'login'" :data-obj="loginData" :data-list="loginData.list" ref="mobileMenu"></v-dropdown>
29 <v-dropdown class="lang" :type="'lang'" :data-obj="langData" :data-list="langData.list"></v-dropdown>
30 </div>
31 </div>
32
33 </div>
34
35 </div>
36 </header>
37 </template>
38
39 <script src="./header.js"></script>
40 <style lang="scss" scoped>
41 @import "./header.scss";
42 </style>
1 import {
2 mapState
3 } from 'vuex'
4
5 import api from '@/api/api'
6 import {
7 httpPost
8 } from '@/api/fetch-api.js'
9
10 export default {
11 name: "DropDownList",
12 data() {
13 return {
14 navList: [],
15 activeNames: [],
16 activeName: [],
17 activeIndex: -1,
18 borderBoo: false
19 };
20 },
21 props: {
22 visible: {
23 type: Boolean,
24 default () {
25 return false;
26 }
27 },
28 /**
29 * 导航类型
30 * nav:普通菜单导航
31 * login:登陆菜单
32 * lang:三语切换菜单
33 */
34 type: {
35 type: String,
36 default () {
37 return "nav";
38 }
39 },
40 /**
41 * 传入菜单列表
42 */
43 langList: {
44 type: Array,
45 default () {
46 return [];
47 }
48 },
49 // 显示/隐藏移动端导航
50 showDropdownM: {
51 type: Function,
52 default: null
53 },
54 },
55 computed: {
56 ...mapState({
57 isSmallScreen: state => state.isSmallScreen,
58 userInfo: state => state.userInfo
59 }),
60 locale() {
61 return this.$i18n.locale || 'tc';
62 },
63 i18n() {
64 return this.$i18n.messages && this.$i18n.locale ? this.$i18n.messages[this.$i18n.locale] : {};
65 },
66 },
67 methods: {
68 // 跳转菜单
69 onClickHandler(item) {
70 let path = item && item.path || "";
71 this.showDropdownM('');
72 if (path) {
73 this.$router.push({
74 path: path
75 })
76 } else {
77 let value = item && item.value || null;
78 if (value) {
79 switch (value) {
80 case "login":
81 this.onLoginHandler();
82 break;
83 case "logout":
84 this.logoutHandler();
85 break;
86 case "gotoVHIS":
87 // gotoVHIS(this.$i18n.locale);
88 this.$router.push({
89 path: "/vhis"
90 });
91 break;
92 }
93 }
94 }
95 },
96 onLoginHandler() {
97 if (this.$route.name == "login") {
98 return;
99 } else if (this.$route.name == "register" || this.$route.name == "passwordFind") {
100 this.$router.push({
101 path: "/login"
102 });
103 } else {
104 let callback = this.$route.fullPath;
105 this.$router.push({
106 path: "/login?callback=" + callback
107 });
108 }
109 },
110 logoutHandler() {
111 this.clearCache();
112 httpPost({
113 url: api.logout
114 }).then(() => {
115 this.$store.commit("SET_USER_INFO", null);
116 this.showLogoutTip();
117 });
118 },
119 clearCache() {
120 for (let index = 0; index < sessionStorage.length; index++) {
121 let key = sessionStorage.key(index);
122 sessionStorage.removeItem(key);
123 }
124 },
125 // 点击item
126 onChangeHandler(evt) {
127 this.activeIndex = evt;
128 },
129 /**
130 * 设置语言
131 */
132 setLangHandler(curData) {
133 this.showDropdownM('');
134 // 如果是语言设置，则设置语言
135 let lang = curData.value;
136 this.$i18n.locale = lang;
137 localStorage.setItem("lang", lang);
138 this.sTitle = curData.name;
139 window.location.reload();
140 },
141 initData() {
142 let navList = [];
143 if (this.type == "nav") {
144 navList = this.i18n.nav.navList;
145 navList.forEach(element => {
146 this.activeNames.push(
147 []
148 )
149 });
150 } else if (this.type == "login") {
151 // 构建登陆页面
152 let i18n = this.$i18n.messages[this.$i18n.locale] || {};
153 let menuData = JSON.parse(JSON.stringify(i18n.nav.loginData));
154 let list = [];
155 if (this.userInfo && this.userInfo.name) {
156 menuData.name = this.userInfo.name;
157 menuData.list.forEach(element => {
158 if (element.type == "auth") {
159 list.push(element);
160 }
161 });
162 } else {
163 menuData.list.forEach(element => {
164 if (element.type == "noAuth") {
165 list.push(element);
166 }
167 });
168 }
169 // menuData.list = list;
170 navList = list;
171 // console.log("navList:", navList);
172 }
173 this.navList = navList;
174
175 }
176 },
177 created() {
178 this.initData();
179 },
180 watch: {
181 visible(newVal, oldVal) {
182 this.$nextTick(() => {
183 this.$refs.panel.scrollTop = 0;
184 });
185 },
186 userInfo(val) {
187 this.initData();
188 }
189 },
190 };
1 @import '@/styles/_support.scss';
2
3 .panel {
4 z-index: 9999;
5 display: block;
6 left: 0;
7 top: $navHeight-M;
8 position: fixed;
9 width: 100%;
10 height: 100%;
11 // background-color: rgba($color: #000000, $alpha: 0.3);
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: 5000;
22 left: 0;
23 top: 0;
24 }
25
26 .list {
27 position: relative;
28 z-index: 5001;
29 padding: 0 20px;
30 // background-color: #ffffff;
31 }
32
33 // 国际化
34 .lang {
35 position: relative;
36 z-index: 5002;
37 display: flex;
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
56 }
57
58 }
59
60 .coll-item-act {
61 color: $cOrange;
62 }
63
64 .list-item {
65 @extend .bb;
66 display: flex;
67 align-items: center;
68 padding: 16px 16px;
69 position: relative;
70 border-bottom: 1px solid #ebedf0;
71 font-size: 14px;
72 color: $cFontGray;
73 background-color: #fff;
74
75 .txt {
76 flex: 1;
77 }
78 }
79
80 .icon-wrap {
81 @extend .fcc;
82 height: 100%;
83 }
84
85 .plus-icon {
86 width: 21px;
87 height: 21px;
88 background: url("~@/assets/images/home/icon-head-plus.png") no-repeat center;
89 @extend .bis;
90 transform: scale(.6);
91 }
92
93 .arrow-icon {
94 width: 21px;
95 height: 21px;
96 background: url("~@/assets/images/home/icon-head-right-arrow.png") no-repeat center;
97 @extend .bis;
98 transform: scale(.6);
99 }
100
101 .plus-icon-act {
102 background: url("~@/assets/images/home/icon-head-plus-act.png") no-repeat center;
103 }
104
105
106
107 .hide {
108 display: none;
109 }
110
111
112 .panel::-webkit-scrollbar {
113 display: none;
114 }
1 <template>
2 <div>
3 <div ref="panel" class="panel" :class="{'hide':!visible}">
4 <div class="mask" @click="showDropdownM('')"></div>
5 <!-- 列表 -->
6 <div class="list">
7 <div v-for="(item,index) in navList" :key="item.id" :index="index">
8 <van-collapse @change="onChangeHandler" v-model="activeNames[index]" v-if="item && item.list && item.list.length > 0">
9 <van-collapse-item :border="borderBoo" :title="item.name" :name="index">
10 <div slot="title">
11 <span :class="{'coll-item-act':index == activeIndex}">{{item.name}}</span>
12 </div>
13 <div slot="right-icon">
14 <div class="icon-wrap">
15 <div class="plus-icon" :class="{'plus-icon-act':index == activeIndex}"></div>
16 </div>
17 </div>
18 <div @click="onClickHandler(item2)" class="list-item" v-for="item2 in item.list" :key="item2.id">
19 <div class="arrow-icon"></div>
20 <div class="txt">{{ item2.name }}</div>
21 </div>
22 </van-collapse-item>
23 </van-collapse>
24 <div v-else @click="onClickHandler(item)" class="list-item">
25 {{item.name}}
26 </div>
27 </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>
35 </div>
36 </div>
37 </template>
38
39 <script src="./m-dropdown.js"></script>
40 <style lang="scss" scoped>
41 @import "./m-dropdown.scss";
42 </style>
1 /**
2 * 组件描述:PC顶栏导航下拉菜单
3 */
4 import api from '@/api/api'
5 import {
6 httpPost
7 } from '@/api/fetch-api.js'
8
9 export default {
10 name: "DropDownList",
11 data() {
12 return {
13 activeIndex: 0,
14 sTitle: this.dataObj && this.dataObj.name || '',
15 reloadBlackList: [],
16 listVisible: false,
17 };
18 },
19 props: {
20 /**
21 * 导航类型
22 * nav:普通菜单导航
23 * login:登陆菜单
24 * lang:三语切换菜单
25 */
26 type: {
27 type: String,
28 default () {
29 return "nav";
30 }
31 },
32 /**
33 * 传入菜单完整数据
34 */
35 dataObj: {
36 type: Object,
37 default () {
38 return {};
39 }
40 },
41 /**
42 * 传入菜单列表
43 */
44 dataList: {
45 type: Array,
46 default () {
47 return [];
48 }
49 },
50 labelProperty: {
51 type: String,
52 default () {
53 return "name";
54 }
55 }
56 },
57 directives: {
58 dpl: {
59 bind(el) {
60 el.style.display = "none";
61 }
62 }
63 },
64 methods: {
65 onNavHandler() {
66 console.log("this.dataObj:", this.dataObj);
67 let path = this.dataObj && this.dataObj.path || "";
68 if (path) {
69 this.$router.push({
70 path: path
71 })
72 }
73 },
74 onOverHandler(event) {
75 let ul = event.currentTarget.childNodes[1].childNodes[1];
76 ul.style.display = "block";
77 this.listVisible = true;
78 },
79 onOutHandler(event) {
80 let ul = event.currentTarget.childNodes[1].childNodes[1];
81 ul.style.display = "none";
82 this.listVisible = false;
83 },
84 onClickHandler(event, index) {
85 // 隐藏其他
86 if (this.$refs.ul) {
87 this.$refs.ul.style.display = "none";
88 }
89
90 // 选择item
91 this.activeIndex = index;
92 let curData = this.dataList[index];
93 if (this.type == "lang") {
94 // 如果是语言设置，则设置语言
95 let lang = curData.value;
96 if (lang != localStorage.getItem('lang')) {
97 localStorage.setItem("lang", lang);
98 if (this.reloadBlackList.indexOf(this.$route.path) >= 0) {
99 window.location.reload();
100 } else {
101 this.$i18n.locale = lang;
102 this.sTitle = curData.name;
103 this.$root.eventBus.$emit("langChange");
104 }
105 }
106 } else {
107 let item = curData;
108 let path = item && item.path || "";
109 this.$root.eventBus.$emit(item.path);
110 if (path) {
111 // console.log("path:", path);
112 // modify
113 if (path == "/custom/service?q=m5") {
114 path = "/clarms"
115 }
116 this.$router.push({
117 path: path
118 })
119 } else {
120 let value = item && item.value || null;
121 if (value) {
122 switch (value) {
123 case "login":
124 this.onLoginHandler();
125 break;
126 case "logout":
127 this.logoutHandler();
128 break;
129 case "gotoVHIS":
130 // gotoVHIS(this.$i18n.locale);
131 this.$router.push({
132 path: "/vhis"
133 });
134 break;
135 }
136 }
137 }
138 }
139 },
140 onLoginHandler() {
141 this.$root.eventBus.$emit("login");
142 if (this.$route.name == "login") {
143 return;
144 } else if (this.$route.name == "register" || this.$route.name == "passwordFind") {
145 this.$router.push({
146 path: "/login"
147 });
148 } else {
149 let callback = this.$route.fullPath;
150 this.$router.push({
151 path: "/login?callback=" + callback
152 });
153 }
154 },
155 logoutHandler() {
156 this.clearCache();
157 httpPost({
158 url: api.logout
159 }).then(() => {
160 this.$store.commit("SET_USER_INFO", null);
161 this.showLogoutTip();
162 });
163 },
164 clearCache() {
165 for (let index = 0; index < sessionStorage.length; index++) {
166 let key = sessionStorage.key(index);
167 console.log(key);
168 sessionStorage.removeItem(key);
169 }
170 },
171 showLogoutTip() {
172 // 登出后的提示
173 // alert("登出成功");
174 },
175 updateTitle(name) {
176 this.sTitle = name || this.sTitle;
177 }
178 },
179 computed: {
180 dplLable() {
181 return this.dataList[this.activeIndex][this.labelProperty];
182 },
183 locale() {
184 return this.$i18n.locale || "tc";
185 },
186 },
187 created() {},
188 };
1 @import "@/styles/_support.scss";
2
3 .drop-list {
4 display: inline-block;
5 position: relative;
6 margin: 0 0px;
7 font-size: $fontSizeTitle;
8
9 .list {
10 position: absolute;
11 width: 34px;
12 left: 0;
13 right: 0;
14 margin: 0 auto;
15 font-size: 16px;
16 left: 50%;
17 transform: translateX(-50%); //居中处理
18
19 .space {
20 height: 18px;
21 }
22
23 .triangle-up {
24 opacity: 0;
25 margin: 2px auto 0;
26 width: 0;
27 height: 0;
28 border-left: 8px solid transparent;
29 border-right: 8px solid transparent;
30 border-bottom: 9px solid #f1f2f2;
31 }
32 .opacity1{
33 opacity: 1;
34 }
35 }
36
37 span {
38 display: block;
39 text-align: center;
40 }
41
42 span:hover {
43 }
44
45 ul {
46 display: none;
47 overflow: hidden;
48 border-radius: 5px;
49 background-color: #f1f2f2;
50
51 li {
52 @extend .fcc;
53 text-align: center;
54 position: relative;
55 height: 28px;
56 color: $cFontGray2;
57
58 &:after {
59 content: "";
60 width: 28px;
61 height: 1px;
62 background-color: #c5c5c5;
63 position: absolute;
64 bottom: 0;
65 left: 50%;
66 transform: translateX(-50%); //居中处理
67 }
68 }
69
70 li:last-child {
71 border-bottom: none;
72
73 &:after {
74 background: transparent;
75 }
76 }
77
78 li:hover {
79 color: $cOrange2;
80 }
81
82 .act {
83 color: $cOrange2;
84 }
85 }
86 }
87 // .drop-list:lang(en){
88 // min-width: 0;
89 // margin: 0 13px;
90 // }
91
92 @media (max-width: 1100px) {
93 }
94
95 @media (max-width: 1000px) {
96 }
1 <template>
2 <div class="drop-list drop-list-lang" @mouseover="onOverHandler($event)" @mouseout="onOutHandler($event)">
3 <!-- 登陆下拉样式 -->
4 <span @click="onNavHandler()">
5 中 | EN
6 </span>
7 <div class="list">
8
9 <!-- <div class="space"></div> -->
10 <div class="triangle-up" :class="{'opacity1':listVisible}"></div>
11 <ul ref="ul">
12 <li :class="{'act':item.value == locale}" v-for="(item, index) in dataList" :key="index" @mousedown="onClickHandler($event,index)">{{item[labelProperty]}}</li>
13 </ul>
14
15 </div>
16 </div>
17 </template>
18
19 <script src="./dropdown-lang.js"></script>
20 <style lang="scss" scoped>
21 @import "./dropdown-lang.scss";
22 </style>
1 /**
2 * 组件描述:PC顶栏导航下拉菜单
3 */
4 import api from '@/api/api'
5 import {
6 httpPost
7 } from '@/api/fetch-api.js'
8
9 export default {
10 name: "DropDownList",
11 data() {
12 return {
13 activeIndex: 0,
14 sTitle: this.dataObj && this.dataObj.name || '',
15 reloadBlackList: []
16 };
17 },
18 props: {
19 /**
20 * 导航类型
21 * nav:普通菜单导航
22 * login:登陆菜单
23 * lang:三语切换菜单
24 */
25 type: {
26 type: String,
27 default () {
28 return "nav";
29 }
30 },
31 /**
32 * 传入菜单完整数据
33 */
34 dataObj: {
35 type: Object,
36 default () {
37 return {};
38 }
39 },
40 /**
41 * 传入菜单列表
42 */
43 dataList: {
44 type: Array,
45 default () {
46 return [];
47 }
48 },
49 labelProperty: {
50 type: String,
51 default () {
52 return "name";
53 }
54 }
55 },
56 directives: {
57 dpl: {
58 bind(el) {
59 el.style.display = "none";
60 }
61 }
62 },
63 methods: {
64 onNavHandler() {
65 console.log("this.dataObj:", this.dataObj);
66 let path = this.dataObj && this.dataObj.path || "";
67 if (path) {
68 this.$router.push({
69 path: path
70 })
71 }
72 },
73 onOverHandler(event) {
74 let ul = event.currentTarget.childNodes[1].childNodes[1];
75 ul.style.display = "block";
76 },
77 onOutHandler(event) {
78 // console.log(event);
79 let ul = event.currentTarget.childNodes[1].childNodes[1];
80 ul.style.display = "none";
81 },
82 onClickHandler(event, index) {
83 // 隐藏其他
84 if (this.$refs.ul) {
85 this.$refs.ul.style.display = "none";
86 }
87
88 // 选择item
89 this.activeIndex = index;
90 let curData = this.dataList[index];
91 if (this.type == "lang") {
92 // 如果是语言设置，则设置语言
93 let lang = curData.value;
94 if (lang != localStorage.getItem('lang')) {
95 localStorage.setItem("lang", lang);
96 if (this.reloadBlackList.indexOf(this.$route.path) >= 0) {
97 window.location.reload();
98 } else {
99 this.$i18n.locale = lang;
100 this.sTitle = curData.name;
101 this.$root.eventBus.$emit("langChange");
102 }
103 }
104 } else {
105 let item = curData;
106 let path = item && item.path || "";
107 this.$root.eventBus.$emit(item.path);
108 if (path) {
109 // console.log("path:", path);
110 // modify
111 if (path == "/custom/service?q=m5") {
112 path = "/clarms"
113 }
114 this.$router.push({
115 path: path
116 })
117 } else {
118 let value = item && item.value || null;
119 if (value) {
120 switch (value) {
121 case "login":
122 this.onLoginHandler();
123 break;
124 case "logout":
125 this.logoutHandler();
126 break;
127 case "gotoVHIS":
128 // gotoVHIS(this.$i18n.locale);
129 this.$router.push({
130 path: "/vhis"
131 });
132 break;
133 }
134 }
135 }
136 }
137 },
138 onLoginHandler() {
139 this.$root.eventBus.$emit("login");
140 if (this.$route.name == "login") {
141 return;
142 } else if (this.$route.name == "register" || this.$route.name == "passwordFind") {
143 this.$router.push({
144 path: "/login"
145 });
146 } else {
147 let callback = this.$route.fullPath;
148 this.$router.push({
149 path: "/login?callback=" + callback
150 });
151 }
152 },
153 logoutHandler() {
154 this.clearCache();
155 httpPost({
156 url: api.logout
157 }).then(() => {
158 this.$store.commit("SET_USER_INFO", null);
159 this.showLogoutTip();
160 });
161 },
162 clearCache() {
163 for (let index = 0; index < sessionStorage.length; index++) {
164 let key = sessionStorage.key(index);
165 console.log(key);
166 sessionStorage.removeItem(key);
167 }
168 },
169 showLogoutTip() {
170 // 登出后的提示
171 // alert("登出成功");
172 },
173 updateTitle(name) {
174 this.sTitle = name || this.sTitle;
175 }
176 },
177 computed: {
178 dplLable() {
179 return this.dataList[this.activeIndex][this.labelProperty];
180 }
181 },
182 created() {},
183 };
1 @import "@/styles/_support.scss";
2
3 .drop-list {
4 position: relative;
5 cursor: pointer;
6
7 .list {
8 position: absolute;
9 width: 132px;
10 left: 0;
11 right: 0;
12 margin: 0 auto;
13 font-size: $fontSize;
14 left: 50%;
15 transform: translateX(-50%); //居中处理
16
17 .space {
18 height: 18px;
19 }
20
21 }
22
23 span {
24 display: block;
25 text-align: center;
26 }
27
28 span:hover {
29 }
30
31 ul {
32 display: none;
33 overflow: hidden;
34 box-shadow: 0 0 18px 0 rgba(255, 87, 0, 0.15);
35 border-radius: 6px;
36
37 li {
38 // border-bottom: solid 1px #f1f1f1;
39 background: #ffffff;
40 text-align: center;
41 padding: 18px 0;
42 position: relative;
43
44 &:after {
45 content: "";
46 width: 84px;
47 height: 1px;
48 background: #f1f1f1;
49 position: absolute;
50 bottom: 0;
51 left: 50%;
52 transform: translateX(-50%); //居中处理
53 }
54 }
55
56 li:last-child {
57 border-bottom: none;
58
59 &:after {
60 background: transparent;
61 }
62 }
63
64 li:hover {
65 color: $cOrange;
66 }
67 }
68 }
69 .drop-list:lang(en) {
70 min-width: 0;
71 margin: 0 13px;
72 }
73
74 .user {
75 @include border-tans-rev;
76 @extend .fcc;
77 cursor: pointer;
78 width: 70px;
79 height: 45px;
80 border-radius: 22.5px;
81
82 span {
83 max-width: 51px;
84 overflow: hidden;
85 white-space: nowrap;
86 text-overflow: ellipsis;
87 }
88
89 .icon-img {
90 margin: 0 6px;
91 }
92 }
93
94 // 登陆
95 .login {
96 }
97
98 @media (max-width: 1100px) {
99 // .drop-list {
100 // margin: 0 28px;
101 // min-width: 0;
102 // }
103 // .drop-list:lang(en) {
104 // margin: 0 22px;
105 // }
106 }
107
108 @media (max-width: 1000px) {
109 }
1 <template>
2 <div class="drop-list" :class="{'login':type=='login'}" @mouseover="onOverHandler($event)" @mouseout="onOutHandler($event)">
3 <div class="user" @click="onLoginHandler()">
4 <!-- <img class="icon-img" src="@/assets/images/home/icon-user.png"> -->
5 <span>{{dataObj.name}}</span>
6 </div>
7 <div class="list">
8 <div class="space"></div>
9 <ul ref="ul" >
10 <li v-for="(item, index) in dataList" :key="index" @mousedown="onClickHandler($event,index)">{{item[labelProperty]}}</li>
11 </ul>
12 </div>
13 </div>
14 </template>
15
16 <script src="./dropdown-login.js"></script>
17 <style lang="scss" scoped>
18 @import "./dropdown-login.scss";
19 </style>
...@@ -2,10 +2,11 @@ ...@@ -2,10 +2,11 @@
2 2
3 .drop-list { 3 .drop-list {
4 display: inline-block; 4 display: inline-block;
5 min-width: 120px; 5 min-width: 92px;
6 position: relative; 6 position: relative;
7 margin: 0 13.2px; 7 margin: 0 0px;
8 font-size: $fontSizeTitle; 8 font-size: $fontSizeTitle;
9 // background-color: wheat;
9 10
10 .list { 11 .list {
11 position: absolute; 12 position: absolute;
...@@ -70,7 +71,7 @@ ...@@ -70,7 +71,7 @@
70 } 71 }
71 .drop-list:lang(en){ 72 .drop-list:lang(en){
72 min-width: 0; 73 min-width: 0;
73 margin: 0 32px; 74 margin: 0 13px;
74 } 75 }
75 76
76 .user { 77 .user {
...@@ -101,13 +102,13 @@ ...@@ -101,13 +102,13 @@
101 102
102 103
103 @media (max-width: 1100px) { 104 @media (max-width: 1100px) {
104 .drop-list { 105 // .drop-list {
105 margin: 0 28px; 106 // margin: 0 28px;
106 min-width: 0; 107 // min-width: 0;
107 } 108 // }
108 .drop-list:lang(en) { 109 // .drop-list:lang(en) {
109 margin: 0 22px; 110 // margin: 0 22px;
110 } 111 // }
111 } 112 }
112 113
113 114
......
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
15 </template> 15 </template>
16 <div class="list"> 16 <div class="list">
17 <div class="space"></div> 17 <div class="space"></div>
18 <ul ref="ul" v-dpl> 18 <ul ref="ul" >
19 <li v-for="(item, index) in dataList" :key="index" @mousedown="onClickHandler($event,index)">{{item[labelProperty]}}</li> 19 <li v-for="(item, index) in dataList" :key="index" @mousedown="onClickHandler($event,index)">{{item[labelProperty]}}</li>
20 </ul> 20 </ul>
21 </div> 21 </div>
......
...@@ -13,11 +13,17 @@ import { ...@@ -13,11 +13,17 @@ import {
13 import VDropdown from '@components/home/dropdown/dropdown.vue' 13 import VDropdown from '@components/home/dropdown/dropdown.vue'
14 import MDropdown from '@components/home/m-dropdown/m-dropdown.vue' 14 import MDropdown from '@components/home/m-dropdown/m-dropdown.vue'
15 15
16 // 语言下拉菜单
17 import DropdownLang from '@components/home/dropdown-lang/dropdown-lang.vue'
18 import DropdownLogin from '@components/home/dropdown-login/dropdown-login.vue'
19
16 export default { 20 export default {
17 name: 'VHeader', 21 name: 'VHeader',
18 components: { 22 components: {
19 VDropdown, 23 VDropdown,
20 MDropdown 24 MDropdown,
25 DropdownLang,
26 DropdownLogin,
21 }, 27 },
22 computed: { 28 computed: {
23 i18n() { 29 i18n() {
......
1 @import '@/styles/_support.scss'; 1 @import "@/styles/_support.scss";
2 2
3 $navHei: 92px; 3 $navHei: 92px;
4 $navHeiM: 72px; 4 $navHeiM: 72px;
...@@ -26,7 +26,8 @@ $navHeiM: 72px; ...@@ -26,7 +26,8 @@ $navHeiM: 72px;
26 } 26 }
27 27
28 .logo-img { 28 .logo-img {
29 margin-right: 43.2px; 29 // margin-right: 43.2px;
30 margin-right: 0;
30 max-width: 213px; 31 max-width: 213px;
31 cursor: pointer; 32 cursor: pointer;
32 } 33 }
...@@ -51,7 +52,8 @@ $navHeiM: 72px; ...@@ -51,7 +52,8 @@ $navHeiM: 72px;
51 } 52 }
52 53
53 .main-nav-list { 54 .main-nav-list {
54 display: flex; 55 // display: flex;
56 @extend .fcc;
55 cursor: pointer; 57 cursor: pointer;
56 } 58 }
57 59
...@@ -74,8 +76,67 @@ $navHeiM: 72px; ...@@ -74,8 +76,67 @@ $navHeiM: 72px;
74 } 76 }
75 } 77 }
76 78
79 // PC端导航
77 .pc { 80 .pc {
78 display: block; 81 display: block;
82 display: flex;
83
84 justify-content: space-between;
85
86 .main-nav-list {
87 flex: 1;
88 }
89
90 .main-func {
91 display: flex;
92 align-items: center;
93 font-size: $fontSizeSmall-M2;
94
95 // 电话
96 &-tel {
97 display: flex;
98 align-items: center;
99 font-size: $fontSize-M2;
100 font-weight: normal;
101 color: $cOrange2;
102
103 img {
104 margin-right: 2px;
105 margin-top: 4px;
106 }
107 }
108
109 // 语言切换
110 &-lang {
111 cursor: pointer;
112 color: $cOrange2;
113 margin-left: 24px;
114 }
115
116 // 登入
117 &-login {
118 // cursor: pointer;
119 // @include border-tans;
120 // @extend .fcc;
121 // width: 69px;
122 // height: 45px;
123 // border-radius: 22.5px;
124 margin-left: 16px;
125 }
126
127 // 报价
128 &-quote {
129 cursor: pointer;
130 @include linear-bg-top;
131 @extend .fcc;
132 width: 94px;
133 height: 45px;
134 border-radius: 22.5px;
135 margin-left: 16px;
136 font-weight: bold;
137 color: #ffffff;
138 }
139 }
79 } 140 }
80 141
81 // 移动端导航 142 // 移动端导航
...@@ -95,7 +156,6 @@ $navHeiM: 72px; ...@@ -95,7 +156,6 @@ $navHeiM: 72px;
95 margin-left: 20px; 156 margin-left: 20px;
96 } 157 }
97 } 158 }
98
99 } 159 }
100 160
101 @media (max-width: 1200px) { 161 @media (max-width: 1200px) {
...@@ -104,42 +164,37 @@ $navHeiM: 72px; ...@@ -104,42 +164,37 @@ $navHeiM: 72px;
104 } 164 }
105 } 165 }
106 166
107
108 @media (max-width: 1100px) { 167 @media (max-width: 1100px) {
109 .v-header { 168 // .v-header {
110 .logo-img { 169 // .logo-img {
111 margin-right: 24px; 170 // }
112 } 171 // }
113 } 172
114 173 // .pc {
115 .pc { 174 // .auth {
116 175 // margin-right: 20px;
117 .auth { 176 // }
118 margin-right: 20px; 177
119 } 178 // .nav-item.auth {
120 179 // .lang {
121 .nav-item.auth { 180 // min-width: auto;
122 181 // }
123 .lang { 182 // }
124 min-width: auto; 183 // }
125 }
126 }
127 }
128 } 184 }
129 185
130 186 @media (max-width: 1020px) {
131 @media (max-width: 980px) {
132 .v-header { 187 .v-header {
133
134 @include content-percent(); 188 @include content-percent();
135 189
136 .main-nav {} 190 .main-nav {
137
138 .logo-img {
139 max-width: 213px;
140 margin: 0;
141 } 191 }
142 192
193 // .logo-img {
194 // max-width: 213px;
195 // margin: 0;
196 // }
197
143 .pc { 198 .pc {
144 display: none; 199 display: none;
145 } 200 }
...@@ -156,7 +211,6 @@ $navHeiM: 72px; ...@@ -156,7 +211,6 @@ $navHeiM: 72px;
156 211
157 @media (max-width: 768px) { 212 @media (max-width: 768px) {
158 .v-header { 213 .v-header {
159
160 // 原1200px临界样式 214 // 原1200px临界样式
161 215
162 .pc { 216 .pc {
......
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
2 <template> 2 <template>
3 <header class="v-header"> 3 <header class="v-header">
4 <div class="header-container"> 4 <div class="header-container">
5 <!-- logo -->
5 <img @click="toIndex" src="@/assets/images/home/header-logo.png" alt="中国平安人寿保险" class="logo-img"> 6 <img @click="toIndex" src="@/assets/images/home/header-logo.png" alt="中国平安人寿保险" class="logo-img">
6 7
7 <div class="main-nav"> 8 <div class="main-nav">
...@@ -19,15 +20,41 @@ ...@@ -19,15 +20,41 @@
19 20
20 <!-- pc --> 21 <!-- pc -->
21 <div class="nav-list pc"> 22 <div class="nav-list pc">
23 <!-- 导航区 -->
22 <div class="main-nav-list"> 24 <div class="main-nav-list">
23 <v-dropdown v-for="item in navList" :key="item.id" :data-obj="item" :data-list="item.list"> 25 <v-dropdown v-for="item in navList" :key="item.id" :data-obj="item" :data-list="item.list">
24 </v-dropdown> 26 </v-dropdown>
25 </div> 27 </div>
26 <div class="nav-item search"></div> 28 <!-- 功能区 -->
29 <div class="main-func">
30
31 <!-- 电话 -->
32 <div class="main-func-tel">
33 <img src="@/assets/images/home/icon-tel.png" alt="">
34 (852)2983 8866
35 </div>
36
37 <!-- 语言切换 -->
38 <div class="main-func-lang">
39 <!-- 中 | EN -->
40 <dropdown-lang class="lang" :type="'lang'" :data-obj="langData" :data-list="langData.list"></dropdown-lang>
41 </div>
42
43 <!-- 登入 -->
44 <div class="main-func-login">
45 <dropdown-login class="lang" :type="'login'" :data-obj="loginData" :data-list="loginData.list" ref="mobileMenu"></dropdown-login>
46 </div>
47
48 <!-- 报价 -->
49 <div class="main-func-quote">
50 立即報價
51 </div>
52 </div>
53 <!-- <div class="nav-item search"></div>
27 <div class="nav-item auth"> 54 <div class="nav-item auth">
28 <v-dropdown class="lang" :type="'login'" :data-obj="loginData" :data-list="loginData.list" ref="mobileMenu"></v-dropdown> 55 <v-dropdown class="lang" :type="'login'" :data-obj="loginData" :data-list="loginData.list" ref="mobileMenu"></v-dropdown>
29 <v-dropdown class="lang" :type="'lang'" :data-obj="langData" :data-list="langData.list"></v-dropdown> 56 <v-dropdown class="lang" :type="'lang'" :data-obj="langData" :data-list="langData.list"></v-dropdown>
30 </div> 57 </div> -->
31 </div> 58 </div>
32 59
33 </div> 60 </div>
......
...@@ -114,7 +114,8 @@ ...@@ -114,7 +114,8 @@
114 // background-image: linear-gradient(to bottom, #f05f28, #f05021); 114 // background-image: linear-gradient(to bottom, #f05f28, #f05021);
115 box-shadow: 0px 10px 13px 0 rgba(236, 100, 41, 0.2); 115 box-shadow: 0px 10px 13px 0 rgba(236, 100, 41, 0.2);
116 background-blend-mode: soft-light; 116 background-blend-mode: soft-light;
117 background-image: linear-gradient(to bottom, #ec6429, #ec6429), linear-gradient(to top, #000000, #ffffff); 117 background-image: linear-gradient(to bottom, #ec6429, #ec6429),
118 linear-gradient(to top, #000000, #ffffff);
118 // background-image: linear-gradient(to top, #000000, #ffffff), linear-gradient(to bottom, #ec6429, #ec6429); 119 // background-image: linear-gradient(to top, #000000, #ffffff), linear-gradient(to bottom, #ec6429, #ec6429);
119 } 120 }
120 121
...@@ -136,7 +137,8 @@ ...@@ -136,7 +137,8 @@
136 font-size: $fontSize; 137 font-size: $fontSize;
137 border-radius: $hei; 138 border-radius: $hei;
138 text-align: center; 139 text-align: center;
139 background-image: linear-gradient(135deg, #f15a08, #feab1b), linear-gradient(90deg, #fff, #fff); 140 background-image: linear-gradient(135deg, #f15a08, #feab1b),
141 linear-gradient(90deg, #fff, #fff);
140 color: white; 142 color: white;
141 font-weight: 600; 143 font-weight: 600;
142 cursor: pointer; 144 cursor: pointer;
...@@ -152,16 +154,34 @@ ...@@ -152,16 +154,34 @@
152 border: $borderSize solid transparent; 154 border: $borderSize solid transparent;
153 background-clip: padding-box, border-box; 155 background-clip: padding-box, border-box;
154 background-origin: padding-box, border-box; 156 background-origin: padding-box, border-box;
155 background-image: linear-gradient(90deg, #fff, #fff), linear-gradient(90deg, #feab1b, #f15a08); 157 background-image: linear-gradient(90deg, #fff, #fff),
158 linear-gradient(90deg, #feab1b, #f15a08);
159 border-radius: $borderRadius;
160 }
161
162 @mixin border-tans-rev($borderRadius: 1px, $borderSize: 2px) {
163 border: $borderSize solid transparent;
164 background-clip: padding-box, border-box;
165 background-origin: padding-box, border-box;
166 background-image: linear-gradient(90deg, #fff, #fff),
167 linear-gradient(90deg, #f15a08, #feab1b);
156 border-radius: $borderRadius; 168 border-radius: $borderRadius;
157 } 169 }
158 170
159 @mixin linear-bg() { 171 @mixin linear-bg() {
160 background-color: transparent; 172 background-color: transparent;
161 background-image: linear-gradient(135deg, #f15a08, #feab1b), linear-gradient(90deg, #fff, #fff); 173 background-image: linear-gradient(135deg, #f15a08, #feab1b),
174 linear-gradient(90deg, #fff, #fff);
162 } 175 }
163 176
164 @mixin linear-bg-rev() { 177 @mixin linear-bg-rev() {
165 background-color: transparent; 178 background-color: transparent;
166 background-image: linear-gradient(135deg, #feab1b, #f15a08), linear-gradient(90deg, #fff, #fff); 179 background-image: linear-gradient(135deg, #feab1b, #f15a08),
180 linear-gradient(90deg, #fff, #fff);
181 }
182
183 @mixin linear-bg-top() {
184 background-color: transparent;
185 background-image: linear-gradient(to top, #feab1b, #f15a08),
186 linear-gradient(90deg, #fff, #fff);
167 } 187 }
......