Skip to content

dev / pingan-life-index-pro

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

默认提交

1 parent 8a1eff7f
Inline Side-by-side
Showing 17 changed files with 282 additions and 33 deletions
...@@ -2,5 +2,12 @@ module.exports = { ...@@ -2,5 +2,12 @@ module.exports = {
2 presets: [ 2 presets: [
3 '@vue/app' 3 '@vue/app'
4 ], 4 ],
5 sourceType: 'unambiguous' 5 sourceType: 'unambiguous',
6 plugins: [
7 ['import', {
8 libraryName: 'vant',
9 libraryDirectory: 'es',
10 style: true
11 }, 'vant']
12 ]
6 } 13 }
......
...@@ -23,6 +23,7 @@ ...@@ -23,6 +23,7 @@
23 "postcss-pxtorem": "^4.0.1", 23 "postcss-pxtorem": "^4.0.1",
24 "purecss": "^1.0.1", 24 "purecss": "^1.0.1",
25 "ua-device": "^0.1.10", 25 "ua-device": "^0.1.10",
26 "vant": "^2.2.15",
26 "vue": "^2.6.10", 27 "vue": "^2.6.10",
27 "vue-awesome-swiper": "^3.1.3", 28 "vue-awesome-swiper": "^3.1.3",
28 "vue-i18n": "^8.15.0", 29 "vue-i18n": "^8.15.0",
...@@ -36,6 +37,7 @@ ...@@ -36,6 +37,7 @@
36 "@vue/cli-service": "^3.8.0", 37 "@vue/cli-service": "^3.8.0",
37 "babel-eslint": "^10.0.1", 38 "babel-eslint": "^10.0.1",
38 "babel-plugin-component": "^1.1.1", 39 "babel-plugin-component": "^1.1.1",
40 "babel-plugin-import": "^1.13.0",
39 "babel-polyfill": "^6.26.0", 41 "babel-polyfill": "^6.26.0",
40 "eslint": "^5.16.0", 42 "eslint": "^5.16.0",
41 "eslint-plugin-vue": "^5.0.0", 43 "eslint-plugin-vue": "^5.0.0",
......
1 <template> 1 <template>
2 <div id="app"> 2 <div id="app">
3 <v-header></v-header> 3 <v-header class="header"></v-header>
4 <main ref="container" class="main-container"> 4 <main ref="container" class="main-container">
5 <router-view /> 5 <router-view />
6 </main> 6 </main>
...@@ -297,8 +297,6 @@ textarea { ...@@ -297,8 +297,6 @@ textarea {
297 color: $cLightBlack; 297 color: $cLightBlack;
298 } 298 }
299 299
300
301
302 #app { 300 #app {
303 border: 0; 301 border: 0;
304 margin: 0; 302 margin: 0;
...@@ -344,8 +342,6 @@ textarea { ...@@ -344,8 +342,6 @@ textarea {
344 border: 1px solid $cOrange; 342 border: 1px solid $cOrange;
345 } 343 }
346 344
347
348
349 // // 视频 345 // // 视频
350 .video-js { 346 .video-js {
351 background-color: transparent !important; 347 background-color: transparent !important;
...@@ -367,6 +363,22 @@ textarea { ...@@ -367,6 +363,22 @@ textarea {
367 background-color: transparent !important; 363 background-color: transparent !important;
368 } 364 }
369 365
366 // vant
367 .v-header {
368 .van-cell {
369 padding: 16px 16px !important;
370 }
371
372 .van-collapse-item__content {
373 padding: 0;
374 }
375
376 .van-cell:not(:last-child)::after {
377 left: 0;
378 }
379 }
380
381
370 @media (max-width: 1200px) { 382 @media (max-width: 1200px) {
371 .page-index { 383 .page-index {
372 .video-js { 384 .video-js {
...@@ -374,12 +386,16 @@ textarea { ...@@ -374,12 +386,16 @@ textarea {
374 max-width: 100% !important; 386 max-width: 100% !important;
375 } 387 }
376 } 388 }
377 }
378 389
379 @media (max-width: 768px) { 390 #app {
380 $fontSizeTitle: $fontSizeTitle-M; 391 .header {
381 $fontSize: $fontSize-M; 392 position: fixed;
382 $fontSizeSmall: $fontSizeSmall-M; 393 width: 100%;
394 }
395 .main-container {
396 padding-top: $navHeight-M;
397 }
398 }
383 } 399 }
384 400
385 @media (max-width: 768px) { 401 @media (max-width: 768px) {
......
...@@ -6,11 +6,13 @@ import { ...@@ -6,11 +6,13 @@ import {
6 getObjByListKeyValue 6 getObjByListKeyValue
7 } from '@utils/utils.js' 7 } from '@utils/utils.js'
8 import VDropdown from '@components/home/dropdown/dropdown.vue' 8 import VDropdown from '@components/home/dropdown/dropdown.vue'
9 import MDropdown from '@components/home/m-dropdown/m-dropdown.vue'
9 10
10 export default { 11 export default {
11 name: 'VHeader', 12 name: 'VHeader',
12 components: { 13 components: {
13 VDropdown 14 VDropdown,
15 MDropdown
14 }, 16 },
15 computed: { 17 computed: {
16 i18n() { 18 i18n() {
......
...@@ -85,21 +85,34 @@ ...@@ -85,21 +85,34 @@
85 } 85 }
86 } 86 }
87 87
88 .pc {
89 display: block;
90 }
91
92 .mobile {
93 display: none;
94 }
88 95
89 @media (max-width: 1200px) { 96 @media (max-width: 1200px) {
90 .v-header { 97 .v-header {
91 @include content-percent(); 98 @include content-percent();
92 99
93 .main-nav-list { 100 .main-nav {}
94 display: none; 101
95 } 102 .logo-img {
103 margin: 0;
96 } 104 }
97 }
98 105
99 @media (max-width: 768px) { 106 .pc {
100 .v-header {
101 .main-nav {
102 display: none; 107 display: none;
103 } 108 }
109
110 .mobile {
111 display: block;
104 } 112 }
113 }
114
115
105 } 116 }
117
118 @media (max-width: 768px) {}
......
...@@ -3,8 +3,15 @@ ...@@ -3,8 +3,15 @@
3 <header class="v-header"> 3 <header class="v-header">
4 <div class="header-container"> 4 <div class="header-container">
5 <img @click="toIndex" src="@/assets/images/home/header-logo.png" alt="中国平安人寿保险" class="logo-img"> 5 <img @click="toIndex" src="@/assets/images/home/header-logo.png" alt="中国平安人寿保险" class="logo-img">
6
6 <div class="main-nav"> 7 <div class="main-nav">
7 <div class="nav-list"> 8 <!-- mobile -->
9 <div class="nav-list-m mobile">
10 <m-dropdown class="lang" :type="'login'" :data-obj="loginData" :data-list="loginData.list"></m-dropdown>
11 </div>
12
13 <!-- pc -->
14 <div class="nav-list pc">
8 <div class="main-nav-list"> 15 <div class="main-nav-list">
9 <v-dropdown v-for="item in navList" :key="item.id" :data-obj="item" :data-list="item.list"> 16 <v-dropdown v-for="item in navList" :key="item.id" :data-obj="item" :data-list="item.list">
10 </v-dropdown> 17 </v-dropdown>
...@@ -16,7 +23,9 @@ ...@@ -16,7 +23,9 @@
16 <v-dropdown class="lang" :type="'lang'" :data-obj="langData" :data-list="langData.list"></v-dropdown> 23 <v-dropdown class="lang" :type="'lang'" :data-obj="langData" :data-list="langData.list"></v-dropdown>
17 </div> 24 </div>
18 </div> 25 </div>
26
19 </div> 27 </div>
28
20 </div> 29 </div>
21 </header> 30 </header>
22 </template> 31 </template>
......
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 visible: true,
18 activeIndex: -1,
19 borderBoo:false
20 };
21 },
22 props: {
23 // visible: {
24 // type: Boolean,
25 // default () {
26 // return true;
27 // }
28 // },
29 // type: {
30 // type: String,
31 // default () {
32 // return "nav";
33 // }
34 // },
35 // dataObj: {
36 // type: Object,
37 // default () {
38 // return {};
39 // }
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 },
54 computed: {
55 locale() {
56 return this.$i18n.locale || 'tc';
57 },
58 i18n() {
59 return this.$i18n.messages && this.$i18n.locale ? this.$i18n.messages[this.$i18n.locale] : {};
60 },
61 },
62 methods: {
63 onClickHandler(item) {
64 let path = item && item.path || "";
65 if (path) {
66 this.$router.push({
67 path: path
68 })
69 }
70 // this.visible = false;
71 },
72 onChangeHandler(evt) {
73 this.activeIndex = evt;
74 },
75 initData() {
76 let navList = this.i18n.nav.navList;
77 navList.forEach(element => {
78 this.activeNames.push(
79 []
80 )
81 });
82 this.navList = navList;
83
84 }
85 },
86 created() {
87 this.initData();
88 },
89 };
1 @import '@/styles/_support';
2
3 .panel {
4 display: block;
5 left: 0;
6 top: $navHeight-M;
7 position: fixed;
8 width: 100%;
9 height: 100%;
10 background-color: rgba($color: #000000, $alpha: 0.3);
11 // background-color: #ffffff;
12
13 .list {
14 padding: 0 20px;
15 background-color: #ffffff;
16 }
17
18 }
19
20 .coll-item-act{
21 color:$cOrange;
22 }
23
24 .list-item {
25 @extend .bb;
26 display: flex;
27 align-items: center;
28 padding: 16px 16px;
29 position: relative;
30 border-bottom: 1px solid #ebedf0;
31 font-size: 14px;
32 color: $cFontGray;
33 }
34
35 .icon-wrap {
36 @extend .fcc;
37 height: 100%;
38 }
39
40 .plus-icon {
41 width: 21px;
42 height: 21px;
43 background: url("~@/assets/images/home/icon-head-plus.png") no-repeat center;
44 @extend .bis;
45 transform: scale(.6);
46 }
47
48 .arrow-icon {
49 width: 21px;
50 height: 21px;
51 background: url("~@/assets/images/home/icon-head-right-arrow.png") no-repeat center;
52 @extend .bis;
53 transform: scale(.6);
54 }
55
56 .plus-icon-act {
57 background: url("~@/assets/images/home/icon-head-plus-act.png") no-repeat center;
58 }
59
60 .hide{
61 display: none;
62 }
1 <template>
2 <div>
3 <div class="panel" :class="{'hide':!visible}">
4 <div class="list">
5 <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">
7 <van-collapse-item :border="borderBoo" :title="item.name" :name="index">
8 <div slot="title">
9 <span :class="{'coll-item-act':index == activeIndex}" >{{item.name}}</span>
10 </div>
11 <div slot="right-icon">
12 <div class="icon-wrap">
13 <div class="plus-icon" :class="{'plus-icon-act':index == activeIndex}"></div>
14 </div>
15 </div>
16 <div @click="onClickHandler(item)" class="list-item" v-for="item2 in item.list" :key="item2.id">
17 <div class="arrow-icon"></div> {{ item2.name }}
18 </div>
19 </van-collapse-item>
20 </van-collapse>
21 <div v-else @click="onClickHandler(item)" class="list-item">
22 {{item.name}}
23 </div>
24 </div>
25 </div>
26 </div>
27 </div>
28 </template>
29
30 <script src="./m-dropdown.js"></script>
31 <style lang="scss" scoped>
32 @import "./m-dropdown.scss";
33 </style>
...@@ -5,29 +5,27 @@ import router from './router'; ...@@ -5,29 +5,27 @@ import router from './router';
5 import store from './store/index'; 5 import store from './store/index';
6 6
7 import VueAwesomeSwiper from 'vue-awesome-swiper' 7 import VueAwesomeSwiper from 'vue-awesome-swiper'
8 // require styles
9 import 'swiper/dist/css/swiper.css' 8 import 'swiper/dist/css/swiper.css'
10 Vue.use(VueAwesomeSwiper) 9 Vue.use(VueAwesomeSwiper)
11 10
11 // vant
12 import {
13 Collapse,
14 CollapseItem,
15 Icon
16 } from 'vant';
17 Vue.use(Collapse).use(CollapseItem);
18 Vue.use(Icon);
12 19
13 import Mock from './mock' 20 import Mock from './mock'
14 Mock.bootstrap(); 21 Mock.bootstrap();
15 22
16
17 // 视频 23 // 视频
18 import VueVideoPlayer from 'vue-video-player' 24 import VueVideoPlayer from 'vue-video-player'
19 import 'video.js/dist/video-js.css' 25 import 'video.js/dist/video-js.css'
20 // import 'vue-video-player/src/custom-theme.css' 26 Vue.use(VueVideoPlayer)
21
22 Vue.use(VueVideoPlayer,
23 /* {
24 options: global default options,
25 events: global videojs events
26 } */
27 )
28 27
29 // import 'amfe-flexible'; 28 // import 'amfe-flexible';
30
31 Vue.config.productionTip = false 29 Vue.config.productionTip = false
32 30
33 // Purecss 31 // Purecss
...@@ -46,6 +44,8 @@ const i18n = new VueI18n({ ...@@ -46,6 +44,8 @@ const i18n = new VueI18n({
46 } 44 }
47 }) 45 })
48 46
47
48
49 new Vue({ 49 new Vue({
50 i18n, 50 i18n,
51 router, 51 router,
......
...@@ -92,6 +92,7 @@ ...@@ -92,6 +92,7 @@
92 </div> 92 </div>
93 <div class="ipt-wrap"> 93 <div class="ipt-wrap">
94 <div class="eye"></div> 94 <div class="eye"></div>
95 <!-- -->
95 <!-- <div class="eye eye-act"></div> --> 96 <!-- <div class="eye eye-act"></div> -->
96 <input class="ipt" type="text"> 97 <input class="ipt" type="text">
97 </div> 98 </div>
......
...@@ -8,4 +8,8 @@ ...@@ -8,4 +8,8 @@
8 8
9 .date-wrap{ 9 .date-wrap{
10 width: 320px; 10 width: 320px;
11
12 box-sizing: border-box;
13 padding: 12px 12px;
14 background-color: rgba($color: #000000, $alpha: 0.7);
11 } 15 }
......
...@@ -55,7 +55,7 @@ ...@@ -55,7 +55,7 @@
55 // width: 100%; 55 // width: 100%;
56 height: 32.75rem; 56 height: 32.75rem;
57 border-radius: $borderRadiusSmall; 57 border-radius: $borderRadiusSmall;
58 box-shadow: 0 0 1.5rem 0 rgba(255, 87, 0, 0.15); 58 @extend .box-shadow;
59 background-color: #fbfbfb; 59 background-color: #fbfbfb;
60 60
61 .img { 61 .img {
...@@ -160,6 +160,9 @@ ...@@ -160,6 +160,9 @@
160 background-color: $cOrange; 160 background-color: $cOrange;
161 } 161 }
162 162
163 .box-shadow {
164 box-shadow: 0 0 1.5rem 0 rgba(255, 87, 0, 0.15);
165 }
163 166
164 @media (max-width: 1200px) { 167 @media (max-width: 1200px) {
165 .content { 168 .content {
...@@ -183,11 +186,17 @@ ...@@ -183,11 +186,17 @@
183 186
184 187
185 @media (max-width: 768px) { 188 @media (max-width: 768px) {
189 .content {}
190
186 // 推荐产品 191 // 推荐产品
187 .recommend { 192 .recommend {
188 &-item { 193 &-item {
189 width: 100%; 194 width: 100%;
190 margin-right: 0; 195 margin: 0 auto $marginMedium-M;
196 }
191 } 197 }
198
199 .box-shadow {
200 box-shadow: none;
192 } 201 }
193 } 202 }
......
...@@ -45,3 +45,5 @@ $articleWidth:1041px; ...@@ -45,3 +45,5 @@ $articleWidth:1041px;
45 $marginSmall-M: 10px; // 小间距 45 $marginSmall-M: 10px; // 小间距
46 $marginMedium-M: 20px; // 间距 46 $marginMedium-M: 20px; // 间距
47 // $marginLarge: 28px; 47 // $marginLarge: 28px;
48
49 $navHeight-M:90px; // 移动端顶栏高度
......