Skip to content

dev / pingan-life-index-pro

Go to a project
Toggle navigation
Toggle navigation pinning
2852c7d7 by simon
Options

默认提交

1 parent 9f781307
Inline Side-by-side
Showing 14 changed files with 280 additions and 284 deletions
{
"name": "vue-cli3-framework",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"dev": "vue-cli-service serve",
"build": "vue-cli-service build",
"sandbox": "vue-cli-service build --mode sandbox",
"prod": "vue-cli-service build --mode prod",
"lint": "vue-cli-service lint",
"oss": "node build/oss-released.js"
},
"dependencies": {
"ali-oss": "^6.1.1",
"amfe-flexible": "^2.2.1",
"axios": "^0.19.0",
"axios-mock-adapter": "^1.16.0",
"co": "^4.6.0",
"core-js": "^2.6.5",
"glob": "^7.1.4",
"mockjs": "^1.0.1-beta3",
"postcss-pxtorem": "^4.0.1",
"purecss": "^1.0.1",
"ua-device": "^0.1.10",
"vue": "^2.6.10",
"vue-awesome-swiper": "^3.1.3",
"vue-i18n": "^8.15.0",
"vue-router": "^3.0.3",
"vuex": "^3.0.1"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^3.8.0",
"@vue/cli-plugin-eslint": "^3.8.0",
"@vue/cli-service": "^3.8.0",
"babel-eslint": "^10.0.1",
"babel-plugin-component": "^1.1.1",
"babel-polyfill": "^6.26.0",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"node-sass": "^4.12.0",
"prerender-spa-plugin": "^3.4.0",
"sass-loader": "^7.1.0",
"vue-template-compiler": "^2.6.10"
}
"name": "vue-cli3-framework",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"dev": "vue-cli-service serve",
"build": "vue-cli-service build",
"sandbox": "vue-cli-service build --mode sandbox",
"prod": "vue-cli-service build --mode prod",
"lint": "vue-cli-service lint",
"oss": "node build/oss-released.js"
},
"dependencies": {
"ali-oss": "^6.1.1",
"amfe-flexible": "^2.2.1",
"axios": "^0.19.0",
"axios-mock-adapter": "^1.16.0",
"co": "^4.6.0",
"core-js": "^2.6.5",
"glob": "^7.1.4",
"mockjs": "^1.0.1-beta3",
"postcss-pxtorem": "^4.0.1",
"purecss": "^1.0.1",
"ua-device": "^0.1.10",
"vue": "^2.6.10",
"vue-awesome-swiper": "^3.1.3",
"vue-i18n": "^8.15.0",
"vue-router": "^3.0.3",
"vue-video-player": "^5.0.2",
"vuex": "^3.0.1"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^3.8.0",
"@vue/cli-plugin-eslint": "^3.8.0",
"@vue/cli-service": "^3.8.0",
"babel-eslint": "^10.0.1",
"babel-plugin-component": "^1.1.1",
"babel-polyfill": "^6.26.0",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"node-sass": "^4.12.0",
"prerender-spa-plugin": "^3.4.0",
"sass-loader": "^7.1.0",
"vue-template-compiler": "^2.6.10"
}
}
......
<template>
<div id="app">
<v-header></v-header>
<main ref="container" class="main-container">
<router-view />
</main>
<v-footer></v-footer>
</div>
<div id="app">
<v-header></v-header>
<main ref="container" class="main-container">
<router-view />
</main>
<v-footer></v-footer>
</div>
</template>
......@@ -59,8 +59,8 @@ html {
word-spacing: 1px;
word-break: break-word;
text-rendering: optimizeLegibility;
// color: #333;
color: $cFontGray;
// color: #333;
color: $cFontGray;
background-color: #ffffff;
// -ms-text-size-adjust: 100%;
// -webkit-text-size-adjust: 100%;
......@@ -69,8 +69,8 @@ html {
box-sizing: border-box;
}
body{
// font-size: 14px;
body {
font-size: $fontSize;
}
html,
......@@ -327,29 +327,31 @@ textarea {
}
.content {
max-width: 1024px;
// max-width: 1024px;
max-width: 1200px;
width: 100%;
margin: 0 auto;
}
.box-w {
// max-width: 1024px;
max-width: 950px;
// max-width: 950px;
max-width: 1200px;
width: 100%;
margin: 0 auto;
}
.box {
max-width: 950px;
// max-width: 950px;
max-width: 1200px;
width: 100%;
margin: 0 auto;
}
.focus{
border: 1px solid $cOrange ;
.focus {
border: 1px solid $cOrange;
}
.swiper-pagination-bullet {
width: 1rem !important;
height: 1rem !important;
......@@ -359,7 +361,6 @@ textarea {
background: $cOrange !important;
}
.ipt:focus {
border-color: $cOrange !important;
}
......@@ -368,4 +369,16 @@ textarea {
border-color: $cOrange !important;
}
.video-js .vjs-big-play-button {
top: 0 !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
margin: auto !important;
// display: none !important;
}
.video-js .vjs-slider {
background-color: $cOrange !important;
}
</style>
......

52.1 KB | W: | H:

1.02 MB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

55.1 KB | W: | H:

40.3 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

58.8 KB | W: | H:

40.3 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

22.9 KB | W: | H:

40.3 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
......@@ -56,7 +56,6 @@ export default {
}
},
onOverHandler(event) {
let ul = event.currentTarget.childNodes[1].childNodes[1];
ul.style.display = "block";
},
......
......@@ -2,7 +2,7 @@
.drop-list {
display: inline-block;
min-width: 8rem;
min-width: 10rem;
position: relative;
margin: 0 1rem;
font-size: $fontSize;
......@@ -21,8 +21,7 @@
text-align: center;
}
span:hover {
}
span:hover {}
ul {
display: none;
......@@ -31,20 +30,40 @@
border-radius: .5rem;
li {
border-bottom: solid 1px #f1f1f1;
// border-bottom: solid 1px #f1f1f1;
background: #ffffff;
// min-height: 4.25rem;
text-align: center;
padding: 1.5rem 0;
position: relative;
&:after {
content: "";
width: 7rem;
height: 1px;
background: #f1f1f1;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%); //居中处理
}
}
li:last-child {
border-bottom: none;
&:after {
background: transparent;
}
}
li:hover {
color: $cOrange;
}
}
}
......@@ -59,7 +78,8 @@
color: #ffffff;
span {
max-width: 4.25rem ;/* 51/12 */
max-width: 4.25rem;
/* 51/12 */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
......
......@@ -4,7 +4,7 @@
<!-- 登陆下拉样式 -->
<template v-if="type=='login'">
<div class="user">
<img class="icon-img" src="@/assets/images/home/icon-user.png">
<img class="icon-img" src="@/assets/images/home/icon-user.png">
<span>{{dataObj.name}}</span>
</div>
</template>
......
......@@ -13,6 +13,19 @@ Vue.use(VueAwesomeSwiper)
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
} */
)
// import 'amfe-flexible';
Vue.config.productionTip = false
......
......@@ -9,16 +9,14 @@ export default {
data() {
return {
key: 'value',
// swiper
swiperOption: {
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
},
// navigation: {
// nextEl: '.swiper-button-next',
// prevEl: '.swiper-button-prev'
// },
pagination: {
el: '.swiper-pagination',
// renderBullet(index, className) {
// return `<span class="${className} swiper-pagination-bullet-custom">${index + 1}</span>`
// }
el: '.swiper-pagination'
},
autoplay: {
delay: 5000,
......@@ -27,6 +25,23 @@ export default {
},
speed: 1000,
},
// 视频
playerOptions: {
width: 843,
height: 475,
// autoplay: true,
muted: true,
language: 'en',
// playbackRates: [0.7, 1.0, 1.5, 2.0],
sources: [{
type: "video/mp4",
// mp4
src: "https://ow.go.qudone.com/jyesupload/ee516bb327484197b7ca72f3dc4be9e6.mp4",
// webm
// src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
}],
poster: "https://ow.go.qudone.com/jyesupload/476b392f19354fb3a21083220200d912.jpg",
}
}
},
......@@ -37,9 +52,52 @@ export default {
},
i18n() {
return this.$i18n.messages && this.$i18n.locale ? this.$i18n.messages[this.$i18n.locale] : {};
},
player() {
return this.$refs.videoPlayer.player
}
},
methods: {
onPlayerPlay(player) {
// console.log('player play!', player)
},
onPlayerPause(player) {
// console.log('player pause!', player)
},
onPlayerEnded(player) {
// console.log('player ended!', player)
},
onPlayerLoadeddata(player) {
// console.log('player Loadeddata!', player)
},
onPlayerWaiting(player) {
// console.log('player Waiting!', player)
},
onPlayerPlaying(player) {
// console.log('player Playing!', player)
},
onPlayerTimeupdate(player) {
// console.log('player Timeupdate!', player.currentTime())
},
onPlayerCanplay(player) {
// console.log('player Canplay!', player)
},
onPlayerCanplaythrough(player) {
// console.log('player Canplaythrough!', player)
},
// or listen state event
playerStateChanged(playerCurrentState) {
// console.log('player current update state', playerCurrentState)
},
// player is ready
playerReadied(player) {
// seek to 10s
console.log('example player 1 readied', player)
player.currentTime(10)
// console.log('example 01: the player is readied', player)
},
/**
* 推荐产品
*/
......@@ -80,14 +138,18 @@ export default {
path: '/news/detail'
})
},
toProfile(){
toProfile() {
this.$router.push({
path: '/profile'
})
},
initData() {}
},
mounted() {},
created() {
}
mounted() {
setTimeout(() => {
console.log('dynamic change options', this.player)
this.player.muted(false)
}, 2000)
},
created() {}
}
......
......@@ -11,28 +11,27 @@
.box {
position: relative;
margin-top: $marginMedium;
}
// banner 轮播
.banner-contaner {
// height: 360px;
// 匹配父容器
position: relative;
width: 100%;
height: 470px;
margin: 0 auto;
position: relative;
z-index: 1;
overflow: hidden;
height: 250px;
}
.banner {
// box-shadow: 0 0 1.75rem 0 rgba(255, 87, 0, 0.1);
position: absolute;
z-index: 1;
left: 50%;
// width: 1920px;
// margin-left: -960px;
margin-left: -960px;
top: 0;
width: 1024px;
margin-left: -512px;
width: 1920px;
height: 100%;
overflow: hidden;
......@@ -45,22 +44,18 @@
// 推荐产品
.recommend {
display: flex;
// flex-wrap: wrap;
// justify-content: center;
// width: auto;
text-align: center;
justify-content: space-between;
max-width: 79.166667rem;
// max-width: 1200px;
&-item {
margin-top: 2.25rem;
position: relative;
width: 25.833333rem;
border-radius: .75rem;
width: 24.25rem;
height: 32.75rem;
border-radius: $borderRadiusSmall;
box-shadow: 0 0 1.5rem 0 rgba(255, 87, 0, 0.15);
background-color: #fbfbfb;
padding: 0 5px;
.btn {
position: absolute;
......@@ -72,24 +67,8 @@
@include btc2(13.5rem, 4rem, 16px);
}
.tt {
position: absolute;
width: 100%;
color: #4c4948;
}
.t1 {
bottom: 9.3rem;
}
.t2 {
bottom: 11.42rem;
}
img {
height: 100%;
width: 100%;
}
&:first-child {
......@@ -102,107 +81,56 @@
}
}
// 了解我们
.more {
margin: 3.5rem auto 0;
// margin-top: 3.5rem;
// margin-left: 9.791667rem;
position: relative;
// 详情
.detail {
display: flex;
height: 39.75rem;
.btn {
position: absolute;
width: 26%;
height: 8%;
top: 83%;
left: 69%;
z-index: 1;
// background-color: wheat;
.vjs-custom-skin {
border-radius: $borderRadius !important;
overflow: hidden;
}
.cont {
position: relative;
// 客户要求按设计审核，不做居中对齐
// margin: 0 auto;
margin-left: 6.583333rem;
// @extend .fcc;
width: 85%;
img {
width: 100%;
}
.desc {
@extend .bb;
padding-top: 3.833333rem;
padding-left: 2.166667rem;
flex: 1;
line-height: 2.3;
letter-spacing: 1.4px;
}
}
// 新闻资讯
.news {
margin: 4.25rem auto 0;
.linear {
width: 100%;
height: 2.04rem;
background-image: url('~@/assets/images/index/linear.png');
}
.tit {
text-align: center;
color: #f05a23;
font-size: 18px;
font-weight: bold;
letter-spacing: 1.8px;
}
.under-line {
margin: .75rem auto 0;
width: 4rem;
height: .25rem;
background-color: #275d40;
}
.news-wrap {
margin: 3.2rem auto 0;
// max-width: 66.75rem;
max-width: 100rem;
.more {
width: 85%;
text-align: right;
margin-bottom: .5rem;
}
.news-item {
width: 85%;
margin: auto;
height: 4.25rem;
color: #4c4948;
display: flex;
justify-content: space-between;
align-items: center;
border-top: solid 1px #dcdddd;
cursor: pointer;
.swiper-button-prev {
background-image: url('~@/assets/images/common/button-prev.png');
left: 360px;
&-tit {}
}
&-date {}
.swiper-button-next {
background-image: url('~@/assets/images/common/button-next.png');
right: 360px;
}
&:last-child {
border-bottom: solid 1px #dcdddd;
}
}
}
.swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets{
bottom: 48px;
}
.swiper-button-prev {
background-image: url('~@/assets/images/common/button-prev.png');
// display: none;
.swiper-pagination-bullet {
width: 12px;
height: 12px;
background-color: #dcdddd;
}
.swiper-button-next {
background-image: url('~@/assets/images/common/button-next.png');
// display: none;
.swiper-pagination-bullet-active {
width: 12px;
height: 12px;
background-color: $cOrange;
}
@media (max-width: 950px) {
.box {
width: 96%;
......
<template>
<div>
<div class="content">
<div class="banner-contaner">
<!-- banner 轮播 -->
<div class="banner">
<swiper :options="swiperOption">
<swiper-slide>
<img class="banner-img" src="@/assets/images/index/banner.png">
</swiper-slide>
<swiper-slide>
<img class="banner-img" src="@/assets/images/index/banner.png">
</swiper-slide>
<div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
<div class="banner-contaner">
<!-- banner 轮播 -->
<div class="banner">
<swiper :options="swiperOption">
<swiper-slide>
<img class="banner-img " src="@/assets/images/index/banner.png">
</swiper-slide>
<swiper-slide>
<img class="banner-img " src="@/assets/images/index/banner.png">
</swiper-slide>
<!-- <div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div> -->
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
</div>
<div class="content">
<!-- 推荐产品 -->
<div class="box recommend">
<div class="recommend-item">
<div @click="onRecommendHandler(1)" class="btn pointer">{{$t('index.recommend.item1.btn')}}</div>
<img src="@/assets/images/index/recommend-1.png">
</div>
<div class="recommend-item">
<div @click="onRecommendHandler(1)" class="btn pointer">{{$t('index.recommend.item1.btn')}}</div>
<img src="@/assets/images/index/recommend-2.png">
</div>
<div class="recommend-item">
<div @click="onRecommendHandler(1)" class="btn pointer">{{$t('index.recommend.item1.btn')}}</div>
<img src="@/assets/images/index/recommend-3.png">
</div>
<div class="recommend-item">
<div @click="onRecommendHandler(1)" class="btn pointer">{{$t('index.recommend.item1.btn')}}</div>
<img src="@/assets/images/index/recommend-4.png">
</div>
</div>
<!-- <div class="box recommend">
<div class="recommend-item">
<div @click="onRecommendHandler(1)" class="btn pointer">{{$t('index.recommend.item1.btn')}}</div>
<div class="tt t1">{{$t('index.recommend.item1.t1')}}</div>
<img src="@/assets/images/index/recommend-1.png">
</div>
......@@ -37,73 +57,13 @@
<span class="cOrange">{{$t('index.recommend.item3.t3')}}</span>{{$t('index.recommend.item3.t4')}}</div>
<img src="@/assets/images/index/recommend-3.png">
</div>
</div>
<!-- 了解我们 -->
<div class="box more">
<div class="cont">
<div class="btn pointer" @click="toProfile()"></div>
<img :src="require('@/assets/images/index/more-1-'+locale+'.png')">
</div>
</div>
<!-- 新闻资讯 -->
<div class="box news">
<div class="linear"></div>
<div class="tit">{{$t('index.news')}}</div>
<div class="under-line"></div>
<div class="news-wrap">
<!-- hardcode start -->
<template v-if="locale == 'zh'">
<div @click="onMoreNewsHandler" class="more pointer">
{{$t('index.newMore')}} >
</div>
<div @click="toNewsDetail()" class="news-item">
<div class="news-item-tit">平安人寿2019年2季度保险消费报告出炉！</div>
<div class="news-item-date">2019-09-27</div>
</div>
<div @click="toNewsDetail()" class="news-item">
<div class="news-item-tit">公益献礼华诞年，创新开拓扶贫路</div>
<div class="news-item-date">2019-09-27</div>
</div>
<div @click="toNewsDetail()" class="news-item">
<div class="news-item-tit">平安920要放大招啦！内含超强攻略！</div>
<div class="news-item-date">2019-09-27</div>
</div>
<div @click="toNewsDetail()" class="news-item">
<div class="news-item-tit">突发！平安人寿迅速应对广东阳江大巴交通事故</div>
<div class="news-item-date">2019-09-27</div>
</div>
<div @click="toNewsDetail()" class="news-item">
<div class="news-item-tit">伴成长、助扶贫，平安人寿客服节给家庭“AI”的力量</div>
<div class="news-item-date">2019-09-27</div>
</div>
</template>
<template v-else>
<div @click="onMoreNewsHandler" class="more pointer">
{{$t('index.newMore')}} >
</div>
<div @click="toNewsDetail()" class="news-item">
<div class="news-item-tit">平安人壽2019年2季度保險消費報告出爐！</div>
<div class="news-item-date">2019-09-27</div>
</div>
<div @click="toNewsDetail()" class="news-item">
<div class="news-item-tit">公益獻禮華誕年，創新開拓扶貧路</div>
<div class="news-item-date">2019-09-27</div>
</div>
<div @click="toNewsDetail()" class="news-item">
<div class="news-item-tit">平安920要放大招啦！內含超強攻略！</div>
<div class="news-item-date">2019-09-27</div>
</div>
<div @click="toNewsDetail()" class="news-item">
<div class="news-item-tit">突發！平安人壽迅速應對廣東陽江大巴交通事故</div>
<div class="news-item-date">2019-09-27</div>
</div>
<div @click="toNewsDetail()" class="news-item">
<div class="news-item-tit">伴成長、助扶貧，平安人壽客服節給家庭“AI”的力量</div>
<div class="news-item-date">2019-09-27</div>
</div>
</template>
<!-- hardcode end -->
</div> -->
<!-- 详情 -->
<div class="box detail">
<video-player class="vjs-custom-skin" controls ref="videoPlayer" :options="playerOptions" :playsinline="true" @play="onPlayerPlay($event)" @pause="onPlayerPause($event)" @ended="onPlayerEnded($event)" @loadeddata="onPlayerLoadeddata($event)" @waiting="onPlayerWaiting($event)" @playing="onPlayerPlaying($event)" @timeupdate="onPlayerTimeupdate($event)" @canplay="onPlayerCanplay($event)" @canplaythrough="onPlayerCanplaythrough($event)" @ready="playerReadied" @statechanged="playerStateChanged($event)">
</video-player>
<div class="desc">
中國平安人壽保險股份有限公司成立於2002年,是中國平安保險（集團）股份有限公司旗下的重要成員。截至2017年12月31日,平安人壽註冊資本為338億元，在全國擁有42家分公司（含7家電話銷售中心）及超過3,300個營業網點,壽險代理人達138.6萬名。公司個險、銀保、電銷、互聯網多渠道齊頭並進，實現協同發展，運營管理水平及客戶體驗領先市場，並依托集團“金融+科技”雙驅動戰略，在合規經營、防範風險的前提下，開啟平臺經營新時代，持續提升產品、科技兩大核心競爭力，推動內含價值及規模持續、健康、穩定增長。
</div>
</div>
</div>
......