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 = {
presets: [
'@vue/app'
],
sourceType: 'unambiguous'
sourceType: 'unambiguous',
plugins: [
['import', {
libraryName: 'vant',
libraryDirectory: 'es',
style: true
}, 'vant']
]
}
......
......@@ -23,6 +23,7 @@
"postcss-pxtorem": "^4.0.1",
"purecss": "^1.0.1",
"ua-device": "^0.1.10",
"vant": "^2.2.15",
"vue": "^2.6.10",
"vue-awesome-swiper": "^3.1.3",
"vue-i18n": "^8.15.0",
......@@ -36,6 +37,7 @@
"@vue/cli-service": "^3.8.0",
"babel-eslint": "^10.0.1",
"babel-plugin-component": "^1.1.1",
"babel-plugin-import": "^1.13.0",
"babel-polyfill": "^6.26.0",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
......
<template>
<div id="app">
<v-header></v-header>
<v-header class="header"></v-header>
<main ref="container" class="main-container">
<router-view />
</main>
......@@ -297,8 +297,6 @@ textarea {
color: $cLightBlack;
}
#app {
border: 0;
margin: 0;
......@@ -344,8 +342,6 @@ textarea {
border: 1px solid $cOrange;
}
// // 视频
.video-js {
background-color: transparent !important;
......@@ -367,6 +363,22 @@ textarea {
background-color: transparent !important;
}
// vant
.v-header {
.van-cell {
padding: 16px 16px !important;
}
.van-collapse-item__content {
padding: 0;
}
.van-cell:not(:last-child)::after {
left: 0;
}
}
@media (max-width: 1200px) {
.page-index {
.video-js {
......@@ -374,12 +386,16 @@ textarea {
max-width: 100% !important;
}
}
}
@media (max-width: 768px) {
$fontSizeTitle: $fontSizeTitle-M;
$fontSize: $fontSize-M;
$fontSizeSmall: $fontSizeSmall-M;
#app {
.header {
position: fixed;
width: 100%;
}
.main-container {
padding-top: $navHeight-M;
}
}
}
@media (max-width: 768px) {
......
......@@ -6,11 +6,13 @@ import {
getObjByListKeyValue
} from '@utils/utils.js'
import VDropdown from '@components/home/dropdown/dropdown.vue'
import MDropdown from '@components/home/m-dropdown/m-dropdown.vue'
export default {
name: 'VHeader',
components: {
VDropdown
VDropdown,
MDropdown
},
computed: {
i18n() {
......
......@@ -85,21 +85,34 @@
}
}
.pc {
display: block;
}
.mobile {
display: none;
}
@media (max-width: 1200px) {
.v-header {
@include content-percent();
.main-nav-list {
display: none;
}
.main-nav {}
.logo-img {
margin: 0;
}
}
@media (max-width: 768px) {
.v-header {
.main-nav {
.pc {
display: none;
}
.mobile {
display: block;
}
}
}
@media (max-width: 768px) {}
......
......@@ -3,8 +3,15 @@
<header class="v-header">
<div class="header-container">
<img @click="toIndex" src="@/assets/images/home/header-logo.png" alt="中国平安人寿保险" class="logo-img">
<div class="main-nav">
<div class="nav-list">
<!-- mobile -->
<div class="nav-list-m mobile">
<m-dropdown class="lang" :type="'login'" :data-obj="loginData" :data-list="loginData.list"></m-dropdown>
</div>
<!-- pc -->
<div class="nav-list pc">
<div class="main-nav-list">
<v-dropdown v-for="item in navList" :key="item.id" :data-obj="item" :data-list="item.list">
</v-dropdown>
......@@ -16,7 +23,9 @@
<v-dropdown class="lang" :type="'lang'" :data-obj="langData" :data-list="langData.list"></v-dropdown>
</div>
</div>
</div>
</div>
</header>
</template>
......
import {
mapState
} from 'vuex'
import api from '@/api/api'
import {
httpPost
} from '@/api/fetch-api.js'
export default {
name: "DropDownList",
data() {
return {
navList: [],
activeNames: [],
activeName: [],
visible: true,
activeIndex: -1,
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";
// }
// }
},
computed: {
locale() {
return this.$i18n.locale || 'tc';
},
i18n() {
return this.$i18n.messages && this.$i18n.locale ? this.$i18n.messages[this.$i18n.locale] : {};
},
},
methods: {
onClickHandler(item) {
let path = item && item.path || "";
if (path) {
this.$router.push({
path: path
})
}
// this.visible = false;
},
onChangeHandler(evt) {
this.activeIndex = evt;
},
initData() {
let navList = this.i18n.nav.navList;
navList.forEach(element => {
this.activeNames.push(
[]
)
});
this.navList = navList;
}
},
created() {
this.initData();
},
};
@import '@/styles/_support';
.panel {
display: block;
left: 0;
top: $navHeight-M;
position: fixed;
width: 100%;
height: 100%;
background-color: rgba($color: #000000, $alpha: 0.3);
// background-color: #ffffff;
.list {
padding: 0 20px;
background-color: #ffffff;
}
}
.coll-item-act{
color:$cOrange;
}
.list-item {
@extend .bb;
display: flex;
align-items: center;
padding: 16px 16px;
position: relative;
border-bottom: 1px solid #ebedf0;
font-size: 14px;
color: $cFontGray;
}
.icon-wrap {
@extend .fcc;
height: 100%;
}
.plus-icon {
width: 21px;
height: 21px;
background: url("~@/assets/images/home/icon-head-plus.png") no-repeat center;
@extend .bis;
transform: scale(.6);
}
.arrow-icon {
width: 21px;
height: 21px;
background: url("~@/assets/images/home/icon-head-right-arrow.png") no-repeat center;
@extend .bis;
transform: scale(.6);
}
.plus-icon-act {
background: url("~@/assets/images/home/icon-head-plus-act.png") no-repeat center;
}
.hide{
display: none;
}
<template>
<div>
<div class="panel" :class="{'hide':!visible}">
<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>
</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>
</van-collapse-item>
</van-collapse>
<div v-else @click="onClickHandler(item)" class="list-item">
{{item.name}}
</div>
</div>
</div>
</div>
</div>
</template>
<script src="./m-dropdown.js"></script>
<style lang="scss" scoped>
@import "./m-dropdown.scss";
</style>
......@@ -5,29 +5,27 @@ import router from './router';
import store from './store/index';
import VueAwesomeSwiper from 'vue-awesome-swiper'
// require styles
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper)
// vant
import {
Collapse,
CollapseItem,
Icon
} from 'vant';
Vue.use(Collapse).use(CollapseItem);
Vue.use(Icon);
import Mock from './mock'
Mock.bootstrap();
// 视频
import VueVideoPlayer from 'vue-video-player'
import 'video.js/dist/video-js.css'
// import 'vue-video-player/src/custom-theme.css'
Vue.use(VueVideoPlayer,
/* {
options: global default options,
events: global videojs events
} */
)
Vue.use(VueVideoPlayer)
// import 'amfe-flexible';
Vue.config.productionTip = false
// Purecss
......@@ -46,6 +44,8 @@ const i18n = new VueI18n({
}
})
new Vue({
i18n,
router,
......
......@@ -92,6 +92,7 @@
</div>
<div class="ipt-wrap">
<div class="eye"></div>
<!-- -->
<!-- <div class="eye eye-act"></div> -->
<input class="ipt" type="text">
</div>
......
......@@ -8,4 +8,8 @@
.date-wrap{
width: 320px;
box-sizing: border-box;
padding: 12px 12px;
background-color: rgba($color: #000000, $alpha: 0.7);
}
......
......@@ -55,7 +55,7 @@
// width: 100%;
height: 32.75rem;
border-radius: $borderRadiusSmall;
box-shadow: 0 0 1.5rem 0 rgba(255, 87, 0, 0.15);
@extend .box-shadow;
background-color: #fbfbfb;
.img {
......@@ -160,6 +160,9 @@
background-color: $cOrange;
}
.box-shadow {
box-shadow: 0 0 1.5rem 0 rgba(255, 87, 0, 0.15);
}
@media (max-width: 1200px) {
.content {
......@@ -183,11 +186,17 @@
@media (max-width: 768px) {
.content {}
// 推荐产品
.recommend {
&-item {
width: 100%;
margin-right: 0;
margin: 0 auto $marginMedium-M;
}
}
.box-shadow {
box-shadow: none;
}
}
......
......@@ -45,3 +45,5 @@ $articleWidth:1041px;
$marginSmall-M: 10px; // 小间距
$marginMedium-M: 20px; // 间距
// $marginLarge: 28px;
$navHeight-M:90px; // 移动端顶栏高度
......