Skip to content

dev / pingan-life-index-pro

Go to a project
Toggle navigation
Toggle navigation pinning
181aed6a by simon
Options

默认提交

1 parent 2852c7d7
Inline Side-by-side
Showing 98 changed files with 309 additions and 312 deletions
......@@ -369,6 +369,25 @@ textarea {
border-color: $cOrange !important;
}
.ipt-wrap {
.ipt {
@extend .bb;
width: 100%;
height: 4.5rem;
border-radius: 4.5rem;
border: solid 1px #dcdddd !important;
background-color: #ffffff;
padding: 0 2rem;
flex: 1;
letter-spacing: .1rem;
}
}
// 视频
.video-js {
background-color: transparent !important;
}
.video-js .vjs-big-play-button {
top: 0 !important;
bottom: 0 !important;
......@@ -381,4 +400,8 @@ textarea {
.video-js .vjs-slider {
background-color: $cOrange !important;
}
.video-js .vjs-poster {
background-color: transparent !important;
}
</style>
......

17.6 KB | W: | H:

24.6 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

991 Bytes | W: | H:

1.3 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

454 Bytes | W: | H:

597 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin

967 Bytes | W: | H:

1.17 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

1.25 KB | W: | H:

1.58 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

1.39 KB | W: | H:

27.1 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

1.47 KB | W: | H:

1.99 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

893 Bytes | W: | H:

1.12 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

994 Bytes | W: | H:

1.26 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

936 Bytes | W: | H:

1.21 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

1.16 KB | W: | H:

1.49 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

1.08 KB | W: | H:

1.54 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

1.46 KB | W: | H:

1.74 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

921 Bytes | W: | H:

1.22 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

40.3 KB | W: | H:

79.9 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

40.3 KB | W: | H:

116 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

40.3 KB | W: | H:

149 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

40.3 KB | W: | H:

177 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

630 Bytes | W: | H:

800 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin

591 Bytes | W: | H:

729 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin

440 Bytes | W: | H:

489 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin

499 Bytes | W: | H:

533 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin

511 Bytes | W: | H:

579 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin

490 Bytes | W: | H:

555 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin

483 Bytes | W: | H:

612 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin

461 Bytes | W: | H:

563 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin

618 Bytes | W: | H:

771 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin

562 Bytes | W: | H:

711 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin

592 Bytes | W: | H:

738 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin

542 Bytes | W: | H:

658 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin

539 Bytes | W: | H:

723 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin

588 Bytes | W: | H:

722 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin

376 Bytes | W: | H:

681 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin

530 Bytes | W: | H:

626 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin

159 Bytes | W: | H:

193 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin

78 Bytes | W: | H:

1.43 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

541 Bytes | W: | H:

714 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin

591 Bytes | W: | H:

714 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin

569 Bytes | W: | H:

827 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin

641 Bytes | W: | H:

780 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin

588 Bytes | W: | H:

828 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin

644 Bytes | W: | H:

836 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin

459 Bytes | W: | H:

789 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin

510 Bytes | W: | H:

754 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin

546 Bytes | W: | H:

661 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin

575 Bytes | W: | H:

645 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin

375 Bytes | W: | H:

545 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin

512 Bytes | W: | H:

593 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin

279 Bytes | W: | H:

407 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin
......@@ -614,7 +614,7 @@ module.exports = {
m2: "登陸「微信」APP， 按右上角的「+」按鈕並選擇「掃壹掃」掃描下方二維碼（放置二維碼）"
},
qrcode: {
title: "社交媒體"
title: "官方公眾號"
}
},
customService: {
......
......@@ -612,7 +612,7 @@ module.exports = {
m2: "登陸「微信」APP， 按右上角的「+」按鈕並選擇「掃壹掃」掃描下方二維碼（放置二維碼）"
},
qrcode: {
title: "社交媒體"
title: "官方公眾號"
}
},
customService: {
......
......@@ -613,7 +613,7 @@ module.exports = {
m2: "登陆「微信」APP， 按右上角的「+」按钮並选择「扫一扫」扫描下方二维码（放置二维码）"
},
qrcode: {
title: "社交媒体"
title: "官方公众号"
}
},
customService: {
......
......@@ -131,13 +131,6 @@
// input和下拉
.ipt {
@extend .bb;
width: 100%;
height: 4.5rem;
border-radius: 4.5rem;
border: solid 1px #dcdddd !important;
background-color: #ffffff;
padding: 0 2rem;
flex: 1;
letter-spacing: .1rem;
}
......
......@@ -60,22 +60,21 @@
li:hover {
color: $cOrange;
}
}
}
.user {
width: 7.333333rem;
height: 2.25rem;
width: 9.25rem;
height: 3rem;
border-radius: 3rem;
background-color: $cOrange;
border-radius: 2.25rem;
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
margin: 0 auto;
span {
max-width: 4.25rem;
......@@ -89,3 +88,6 @@
margin: 0 .5rem;
}
}
// 登陆
.login {}
......
<template>
<div>
<div class="drop-list" @mouseover="onOverHandler($event)" @mouseout="onOutHandler($event)">
<div class="drop-list" :class="{'login':type=='login'}" @mouseover="onOverHandler($event)" @mouseout="onOutHandler($event)">
<!-- 登陆下拉样式 -->
<template v-if="type=='login'">
<div class="user">
......
......@@ -42,9 +42,9 @@
<div class="public">
<div class="tit">{{$t('footer.qrcode')}}</div>
<!-- <img class="qrcode" src="@/assets/images/home/qrcode-focus.png" alt=""> -->
<img class="qrcode" src="@/assets/images/home/footer-icon-1.png" alt="">
<img class="qrcode" src="@/assets/images/home/footer-icon-2.png" alt="">
<img class="qrcode" src="@/assets/images/home/footer-icon-3.png" alt="">
<img class="qrcode pointer" src="@/assets/images/home/footer-icon-1.png" alt="">
<img class="qrcode pointer" src="@/assets/images/home/footer-icon-2.png" alt="">
<img class="qrcode pointer" src="@/assets/images/home/footer-icon-3.png" alt="">
</div>
</div>
......
@import '@/styles/_support';
.comp {
// display: flex;
}
.comp {}
.pagination {
display: flex;
......@@ -10,14 +8,26 @@
align-items: center;
flex-wrap: wrap;
&-item {
@extend .bb;
padding: 0 .8rem;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
span {
margin: 0.4rem 0.7rem;
text-align: center;
}
.page-num {
width: 1.75rem;
height: 1.75rem;
@extend .fcc;
@extend .bb;
padding: 0 4px;
min-width: 2.25rem;
height: 2.5rem;
border: solid 1px #dcdddd;
text-align: center;
cursor: pointer;
......@@ -42,7 +52,8 @@
.ipt {
@extend .bb;
width: 3.5rem;
width: 5rem;
height: 2.5rem;
border: solid 1px #dcdddd;
padding: 0 .7rem;
text-align: center;
......
......@@ -2,20 +2,25 @@
<template>
<div class="comp">
<div class="pagination gird-g">
<span class="pointer" :class="{'disabled' : cur == 1}">
<a @click="prevPage()">上一页</a>
</span>
<span @click="selPage(index)" class="page-num pointer" v-for="(index,idx) in indexs" :key="idx" v-bind:class="{ 'active': cur == index}">
<a>{{index}}</a>
</span>
<span class="pointer" :class="{'disabled' : cur == total}">
<a @click="nextPage()">下一页</a>
</span>
<div class="pagination-item">
<span class="pointer" :class="{'disabled' : cur == 1}">
<a @click="prevPage()">上一页</a>
</span>
<span @click="selPage(index)" class="page-num pointer" v-for="(index,idx) in indexs" :key="idx" v-bind:class="{ 'active': cur == index}">
<a>{{index}}</a>
</span>
<span class="pointer" :class="{'disabled' : cur == total}">
<a @click="nextPage()">下一页</a>
</span>
</div>
<div class="pagination-item">
<span>第</span>
<input v-model="sel" class="ipt" :placeholder="cur" type="text">
<span>/ {{total}}页</span>
<span @click="jumpPage" class="jump pointer">跳转</span>
</div>
<span>第</span>
<input v-model="sel" class="ipt" :placeholder="cur" type="text">
<span>/ {{total}}页</span>
<span @click="jumpPage" class="jump pointer">跳转</span>
</div>
</div>
</template>
......
......@@ -17,11 +17,12 @@
.ebg {
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 100%;
overflow: hidden;
img {
max-width: 100%;
width: 1920px;
margin-left: -360px;
}
}
......@@ -32,20 +33,16 @@
&-item {
background-color: #ffffff;
// display: flex;
// justify-content: center;
// align-content: center;
// align-items: center;
flex-wrap: wrap;
width: 12.5rem;
height: 12.5rem;
border-radius: .75rem;
width: 16rem;
height: 16rem;
border-radius: $borderRadius;
border: solid 1px #f2f2f2;
margin: .5rem;
margin: $marginSmallHalf;
cursor: pointer;
.icon-wrap {
height: 8.25rem;
height: 11rem;
@extend .fcc;
}
......
......@@ -10,7 +10,7 @@
@include border-top-radius(.666667rem);
display: flex;
align-items: center;
height: 2.5rem;
height: 3.25rem;
color: #ffffff;
font-weight: bold;
letter-spacing: .1rem;
......@@ -24,7 +24,7 @@
text-align: center;
border: solid 1px #f2f2f2;
@include border-bottom-radius(.666667rem);
$gridHei: 4.333333rem;
$gridHei: 5.25rem;
&-item {
position: relative;
......@@ -36,11 +36,11 @@
.hl {
position: absolute;
width: 5.25rem;
width: 6.45rem;
height: 1px;
background-color: #dcdddd;
bottom: 0;
left: .75rem;
left: 1rem;
}
.grid {
......@@ -61,7 +61,7 @@
margin: auto 0;
}
.icon{
.icon {
margin-right: .916667rem;
}
}
......@@ -83,8 +83,9 @@
.w4 {
.h-line {
width: 9rem;
width: 12rem;
}
color: $cOrange;
}
}
......@@ -95,15 +96,15 @@
}
.w1 {
width: 7rem;
width: 8.75rem; // 105
}
.w2 {
width: 23rem;
width: 29rem; // 348
}
.w3 {
width: 23.5rem;
width: 29.75rem; // 357
}
.w4 {
......
......@@ -7,7 +7,7 @@
}
.reservation-container {
width: 64.25rem;
// width: 64.25rem;
border-radius: .666667rem;
border: solid .083333rem #f2f2f2;
background-color: #ffffff;
......@@ -44,27 +44,17 @@
position: relative;
// input和下拉
.ipt {
@extend .bb;
width: 100%;
height: 3.5rem;
border: solid 1px #dcdddd;
background-color: #ffffff;
border-radius: 3.5rem;
padding: 0 2.083333rem;
}
.ipt {}
.name-ipt{
width: 13.666667rem;
.name-ipt {
width: 18rem;
}
.phone-ipt{
width: 13.666667rem;
.phone-ipt {
width: 18rem;
}
.mail-ipt{
}
.mail-ipt {}
// 长文本
.textarea {
......@@ -143,9 +133,11 @@
display: flex;
align-items: center;
flex-wrap: wrap;
.validator {
margin-top: 3rem;
}
.label {
// min-width: 8.833333rem;
}
......@@ -163,7 +155,7 @@
}
}
.ipt-wrap2{
.ipt-wrap2 {
flex: 1;
}
......@@ -184,11 +176,11 @@
}
.form2{
.form-item{
.form2 {
.form-item {
margin-right: 1.166667rem;
&:last-child{
&:last-child {
margin-right: 0;
}
}
......@@ -242,5 +234,5 @@ input {
.disabled {
background-color: gray !important;
background-image:none !important;
background-image: none !important;
}
......
......@@ -5,9 +5,8 @@
.border {
@extend .bb;
padding: 2.833333rem 4.0rem 0 3.5rem;
width: 64.166667rem;
height: 32.25rem;
padding: 44px 4.0rem 0 55px;
min-height: 490px;
border-radius: $borderRadius;
border: solid 1px #f2f2f2;
background-color: #ffffff;
......@@ -19,7 +18,7 @@
margin-bottom: 4.416667rem;
&-item {
font-size: $paddingSmall;
font-size: $fontSize;
&-tit {
display: flex;
......
@import '@/styles/_support';
.cell-group {
margin-bottom: 1rem;
......@@ -6,23 +8,22 @@
}
div {
font-size: 1rem;
color: #4c4948;
}
.w1 {
min-width: 9.166667rem;
width: 10rem;
text-align: center;
}
.w2 {
min-width: 6.25rem;
width: 6.25rem;
text-align: center;
}
.table-header {
width: 64.166667rem;
height: 2.5rem;
// width: 64.166667rem;
height: 3.25rem;
border-top-left-radius: .666667rem;
border-top-right-radius: .666667rem;
background-color: #f2f2f2;
......@@ -30,14 +31,16 @@
align-items: center;
.normal-header {
width: 58.833333rem;
// width: 58.833333rem;
@extend .bb;
padding: 0 2.75rem;
width: 100%;
margin: auto;
display: flex;
justify-content: space-between;
align-items: center;
.title {
font-size: 1rem;
font-weight: bold;
color: #575453;
}
......@@ -59,15 +62,16 @@
}
.table-content {
width: 64.166667rem;
// width: 64.166667rem;
height: auto;
display: inline-block;
// display: inline-block;
border-bottom-left-radius: .666667rem;
border-bottom-right-radius: .666667rem;
border-left: solid .083333rem #f2f2f2;
border-right: solid .083333rem #f2f2f2;
border-bottom: solid .083333rem #f2f2f2;
padding: 0 2.583333rem;
padding: 0 2.75rem;
max-height: 41.666667rem;
transition: max-height ease-out 0.3s !important;
overflow: hidden;
......@@ -80,18 +84,31 @@
align-items: center;
.cell1 {
width: 29.166667rem;
width: 98%;
display: flex;
justify-content: space-between;
margin: auto;
}
.separator-v {
height: 2.5rem;
width: .166667rem;
background-color: #f2f2f2;
margin: 0 .916667rem;
}
.td {
&:first-child {
text-align: left;
}
&:last-child {
text-align: right;
}
}
}
.label span {
......@@ -102,8 +119,8 @@
}
.separator-h {
width: 58.833333rem;
height: .083333rem;
width: 100%;
height: 1px;
background-color: #f2f2f2;
}
}
......
......@@ -11,7 +11,7 @@
&-nav {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
flex-wrap: nowrap;
&-item {
@extend .pointer;
......@@ -19,23 +19,31 @@
display: flex;
justify-content: center;
align-items: center;
height: 3.75rem;
height: 4.75rem;
background-color: #f2f2f2;
padding: 0 1.25rem;
padding: 0 20px;
margin-right: $marginSmall;
&-icon {
margin-right: .4rem;
margin-right: 0.6rem;
img {
max-width: 2rem;
width: 2.4rem;
}
}
&:last-child {
margin-right: 0;
}
}
.active {
color: #ffffff;
background-image: linear-gradient(to bottom, #f05f28, #f05021);
}
}
&-line {
......@@ -45,7 +53,7 @@
&-cont {
@extend .bb;
padding: 3.5rem 6.166667rem 0 2rem;
padding: 4.25rem 2rem 0 2.5rem;
border: solid 1px #f2f2f2;
background-color: #ffffff;
min-height: 43.75rem;
......@@ -63,8 +71,8 @@
li {
background-image: url('~@assets/images/payment-type/icon-li.png');
background-repeat: no-repeat;
background-position: 0rem 1.25rem;
padding-left: 1rem;
background-position: 0 18px;
padding-left: 16px;
}
}
}
......
......@@ -3,7 +3,7 @@
.container {
@extend .bb;
padding: 1.833333rem 3rem 2.5rem 2.166667rem;
width: 770px;
}
.border {
......@@ -12,7 +12,6 @@
background-color: #ffffff;
}
.form {
display: flex;
flex-wrap: wrap;
......@@ -20,6 +19,7 @@
&-item {
position: relative;
margin-bottom: 2.333333rem;
width: 100%;
&:last-child {
margin-bottom: 0;
......@@ -43,20 +43,19 @@
.ipt-wrap {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
// input和下拉
.ipt {
@extend .bb;
width: 42.833333rem;
height: 3.5rem;
border: solid 1px #dcdddd;
background-color: #ffffff;
border-radius: 3.5rem;
padding: 0 2.083333rem;
flex: 1;
}
.agree{
// @extend .bb;
// padding-left: 80px;
}
.name-ipt {
width: 13.666667rem;
......@@ -101,7 +100,7 @@
right: 16rem;
display: flex;
align-items: center;
// bottom: 0;
// bottom: 0;
img {
display: inline-block;
......
......@@ -6,17 +6,14 @@
<div class="label">
<div class="icon"><img src="@/assets/images/policy-change-contact/icon-pcc-phone.png"></div>{{$t('policyChangeContact.phone')}}
</div>
<div class="ipt-wrap" >
<!-- <div> -->
<input class="ipt mail-ipt" :class="{err : errorTips.e1.length > 0}" type="text" v-model="data.mobile">
<!-- </div> -->
<div class="pointer" @click="checked1 = !checked1">
<div class="ipt-wrap">
<input class="ipt mail-ipt" :class="{err : errorTips.e1.length > 0}" type="text" v-model="data.mobile">
<div class="agree pointer" @click="checked1 = !checked1">
<img v-if="!checked1" class="check-icon pointer" src="@/assets/images/reservation/un-check.png">
<img v-else class="check-icon pointer" src="@/assets/images/reservation/check.png">
<span>{{$t("policyChangeContact.checkTips")}}</span>
</div>
</div>
<div class="validator" v-if="errorTips.e1.length > 0">
<img src="@/assets/images/common/icon-notice.png" alt="">{{errorTips.e1}}
......
......@@ -10,7 +10,7 @@
@include border-top-radius(.666667rem);
display: flex;
align-items: center;
height: 2.5rem;
height: 3.25rem;
color: #ffffff;
font-weight: bold;
letter-spacing: .1rem;
......@@ -35,7 +35,8 @@
.hl {
position: absolute;
width: 60.833333rem;
width: 95%;
// width: 77rem;
height: 1px;
background-color: #dcdddd;
bottom: 0;
......@@ -47,7 +48,7 @@
.grid {
position: relative;
padding: 1.583333rem 2rem;
padding: 2rem 3rem;
background-color: #ffffff;
.v-line {
......@@ -103,24 +104,25 @@
}
.w1 {
width: 10.333333rem;
width: 13.25rem;
}
.w2 {
width: 16.916667rem;
width: 21.5rem;
}
.w3 {
width: 9.75rem;
width: 12.5rem;
}
.w4 {
width: 13.583333rem;
width: 17rem;
}
.w5 {
flex: 1;
// width: 212px;
}
}
......
......@@ -21,7 +21,7 @@
@include border-top-radius(.666667rem);
display: flex;
align-items: center;
height: 2.5rem;
height: 3.25rem;
color: #ffffff;
font-weight: bold;
letter-spacing: .1rem;
......@@ -85,14 +85,6 @@
// input和下拉
.ipt {
@extend .bb;
width: 100%;
height: 3.5rem;
border: solid 1px #dcdddd;
background-color: #ffffff;
border-radius: 3.5rem;
padding: 0 2.083333rem;
}
.disable {
......@@ -175,7 +167,6 @@
background-blend-mode: soft-light, ;
background-image: linear-gradient(to top, #000000, #ffffff), linear-gradient(to bottom, #ec6429, #ec6429);
text-align: center;
font-size: 1.291667rem;
letter-spacing: .129167rem;
color: #ffffff;
border-radius: 3.5rem;
......
......@@ -12,7 +12,7 @@ input {
}
.reservation-container {
width: 64.25rem;
// width: 64.25rem;
border-radius: .666667rem;
border: solid .083333rem #f2f2f2;
background-color: #ffffff;
......@@ -50,14 +50,6 @@ input {
// input和下拉
.ipt {
@extend .bb;
width: 100%;
height: 3.5rem;
border: solid 1px #dcdddd;
background-color: #ffffff;
border-radius: 3.5rem;
padding: 0 2.083333rem;
}
// 长文本
......
......@@ -2,19 +2,18 @@
.content {
display: flex;
// margin-top: 2.333333rem;
margin: 2.333333rem auto;
position: relative;
}
.left-panel {
width: 12.833333rem;
// height: 42.333333rem;
margin-left: 3.166667rem;
width: 16rem;
// background-color: wheat;
.separator {
margin: auto;
width: 10.5rem;
width: 13.25rem;
height: .083333rem;
background-color: #dcdddd;
}
......@@ -22,8 +21,7 @@
.menu-item {
position: relative;
@extend .bb;
padding: 1.25rem 0;
// height: 3.833333rem;
padding: 1.5rem 0;
font-weight: bold;
color: $cFontGray;
text-align: center;
......@@ -32,12 +30,12 @@
align-items: center;
justify-content: flex-start;
border-bottom: solid 1px #dcdddd;
width: 10.5rem;
margin-left: 1.083333rem;
width: 13.25rem;
margin-left: 1.25rem;
.icon-wrap {
@extend .fcc;
width: 3rem;
width: 4rem;
.icon {}
}
......@@ -52,10 +50,11 @@
.sel {
position: absolute;
width: .583333rem;
height: 1.166667rem;
width: 8px;
height: 17px;
top: 0;
bottom: 0;
// right: 0;
right: -1.75rem;
margin: auto 0;
background: url("~@/assets/images/insurance-query/triangle.png") no-repeat center center;
......@@ -82,9 +81,8 @@
}
.right-panel {
margin-left: 3rem;
// width: 64.166667rem;
width: 64.416667rem;
margin-left: $marginMedium;
width: 975px;
background-color: #ffffff;
.panel {
......
......@@ -50,34 +50,6 @@
<div class="panel" v-if="activity == 'm8'">
<common-form></common-form>
</div>
<!-- <div class="panel" :class="{activity : activity == 'm1'}">
<contact-us></contact-us>
</div>
<div class="panel" :class="{activity : activity == 'm2'}">
<payment-type></payment-type>
</div>
<div class="panel" :class="{activity : activity == 'm3'}">
<insurance-query></insurance-query>
</div>
<div class="panel" :class="{activity : activity == 'm41'}">
<policy-change-guide></policy-change-guide>
</div>
<div class="panel" :class="{activity : activity == 'm42'}">
<policy-change-contact></policy-change-contact>
</div>
<div class="panel" :class="{activity : activity == 'm43'}">
<policy-change-information></policy-change-information>
</div>
<div class="panel" :class="{activity : activity == 'm5'}"></div>
<div class="panel" :class="{activity : activity == 'm6'}">
<reservation></reservation>
</div>
<div class="panel" :class="{activity : activity == 'm7'}">
<complaint-acceptance></complaint-acceptance>
</div>
<div class="panel" :class="{activity : activity == 'm8'}">
<common-form></common-form>
</div> -->
</div>
</div>
</template>
......
......@@ -30,10 +30,10 @@ export default {
playerOptions: {
width: 843,
height: 475,
// autoplay: true,
muted: true,
autoplay: false, //如果true,浏览器准备好时开始回放。
muted: true, // 默认情况下将会消除任何音频。
language: 'en',
// playbackRates: [0.7, 1.0, 1.5, 2.0],
// playbackRates: [0.7, 1.0, 1.5, 2.0],//播放速度
sources: [{
type: "video/mp4",
// mp4
......@@ -41,7 +41,13 @@ export default {
// webm
// src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
}],
poster: "https://ow.go.qudone.com/jyesupload/476b392f19354fb3a21083220200d912.jpg",
poster: 'images/video-poster.png',
},
controlBar: {
timeDivider: true,
durationDisplay: true,
remainingTimeDisplay: false,
fullscreenToggle: true //全屏按钮
}
}
},
......@@ -93,7 +99,7 @@ export default {
// player is ready
playerReadied(player) {
// seek to 10s
console.log('example player 1 readied', player)
// console.log('example player 1 readied', player)
player.currentTime(10)
// console.log('example 01: the player is readied', player)
},
......@@ -147,7 +153,6 @@ export default {
},
mounted() {
setTimeout(() => {
console.log('dynamic change options', this.player)
this.player.muted(false)
}, 2000)
},
......
......@@ -25,7 +25,6 @@
}
.banner {
// box-shadow: 0 0 1.75rem 0 rgba(255, 87, 0, 0.1);
position: absolute;
z-index: 1;
left: 50%;
......@@ -69,6 +68,7 @@
img {
width: 100%;
@include border-top-radius($borderRadius);
}
&:first-child {
......@@ -91,9 +91,9 @@
overflow: hidden;
}
.desc {
.txt {
@extend .fcc;
@extend .bb;
padding-top: 3.833333rem;
padding-left: 2.166667rem;
flex: 1;
line-height: 2.3;
......@@ -102,7 +102,6 @@
}
.swiper-button-prev {
background-image: url('~@/assets/images/common/button-prev.png');
left: 360px;
......@@ -114,7 +113,9 @@
right: 360px;
}
.swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets{
.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-container-horizontal>.swiper-pagination-bullets {
bottom: 48px;
}
......
......@@ -62,7 +62,7 @@
<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">
<div class="txt">
中國平安人壽保險股份有限公司成立於2002年,是中國平安保險（集團）股份有限公司旗下的重要成員。截至2017年12月31日,平安人壽註冊資本為338億元，在全國擁有42家分公司（含7家電話銷售中心）及超過3,300個營業網點,壽險代理人達138.6萬名。公司個險、銀保、電銷、互聯網多渠道齊頭並進，實現協同發展，運營管理水平及客戶體驗領先市場，並依托集團“金融+科技”雙驅動戰略，在合規經營、防範風險的前提下，開啟平臺經營新時代，持續提升產品、科技兩大核心競爭力，推動內含價值及規模持續、健康、穩定增長。
</div>
</div>
......
......@@ -19,9 +19,13 @@
.ebg {
position: absolute;
bottom: 0;
left: 50%;
margin-left: -960px;
width: 1920px;
width: 100%;
overflow: hidden;
img {
width: 1920px;
margin-left: -360px;
}
}
.step {
......@@ -164,13 +168,6 @@
// input和下拉
.ipt {
@extend .bb;
width: 100%;
height: 4.5rem;
border-radius: 4.5rem;
border: solid 1px #dcdddd;
background-color: #ffffff;
padding: 0 2rem;
flex: 1;
letter-spacing: .1rem;
}
......
......@@ -16,12 +16,17 @@
position: relative;
}
.ebg {
position: absolute;
bottom: 0;
left: 50%;
margin-left: -960px;
width: 1920px;
width: 100%;
overflow: hidden;
img {
width: 1920px;
margin-left: -360px;
}
}
.login {
......@@ -155,13 +160,6 @@
// input和下拉
.ipt {
@extend .bb;
width: 100%;
height: 4.5rem;
border-radius: 4.5rem;
border: solid 1px #dcdddd;
background-color: #ffffff;
padding: 0 2rem;
flex: 1;
letter-spacing: .1rem;
}
......
@import '@/styles/_support';
.content {
// font-family: MicrosoftYaHei;
color: #4c4948;
padding-bottom: 8.5rem;
}
......@@ -12,12 +10,12 @@
}
.top-space {
height: 5rem;
height: 3rem;
}
.tit {
text-align: center;
font-size: 18px;
font-size: $fontSizeTitle;
font-weight: bold;
letter-spacing: 1.8px;
}
......@@ -44,7 +42,7 @@
}
.desc {
max-width: 64rem;
max-width: $articleWidth;
margin-top: 2.5rem;
line-height: 2;
letter-spacing: 1.2px;
......
......@@ -16,18 +16,19 @@
.ebg {
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 100%;
overflow: hidden;
img {
max-width: 100%;
width: 1920px;
margin-left: -360px;
}
}
.news {
color: #4c4948;
margin: 0 auto;
max-width: 66.75rem;
max-width: 81.75rem;
&-item {
......@@ -35,7 +36,7 @@
justify-content: space-between;
align-items: center;
height: 4.25rem;
height: 5.5rem;
border-bottom: solid 1px #dcdddd;
cursor: pointer;
......
<template>
<div class="content">
<div class="ebg">
<img src="@/assets/images/news-list/news-list-c1.png">
</div>
<div class="top-space"></div>
<div class="box">
<div class="news">
<div @click="toNewsDetail()" v-for="(item,index) in items" :key="index" class="news-item">
<div class="news-item-tit">
<div class="point"></div>
{{item}}
<img v-if="index < 3" class="new" src="@/assets/images/news-list/news-list-new.png">
<div>
<div class="content">
<div class="ebg">
<img src="@/assets/images/news-list/news-list-bg.png">
</div>
<div class="top-space"></div>
<div class="box">
<div class="news">
<div @click="toNewsDetail()" v-for="(item,index) in items" :key="index" class="news-item">
<div class="news-item-tit">
<div class="point"></div>
{{item}}
<img v-if="index < 3" class="new" src="@/assets/images/news-list/news-list-new.png">
</div>
<div class="news-item-date">2019-09-27</div>
</div>
<div class="news-item-date">2019-09-27</div>
</div>
<pagination @selpage="selPage" :total="23" class="pagination"></pagination>
</div>
<pagination @selpage="selPage" :total="23" class="pagination"></pagination>
</div>
</div>
</template>
<script src="./news-list.js"></script>
......
......@@ -20,9 +20,13 @@
.ebg {
position: absolute;
bottom: 0;
left: 50%;
margin-left: -960px;
width: 1920px;
width: 100%;
overflow: hidden;
img {
width: 1920px;
margin-left: -360px;
}
}
.step {
......@@ -170,13 +174,6 @@
// input和下拉
.ipt {
@extend .bb;
width: 100%;
height: 4.5rem;
border-radius: 4.5rem;
border: solid 1px #dcdddd;
background-color: #ffffff;
padding: 0 2rem;
flex: 1;
letter-spacing: .1rem;
}
......
......@@ -20,9 +20,13 @@
.ebg {
position: absolute;
bottom: 0;
left: 50%;
margin-left: -960px;
width: 1920px;
width: 100%;
overflow: hidden;
img {
width: 1920px;
margin-left: -360px;
}
}
.step {
......@@ -170,13 +174,6 @@
// input和下拉
.ipt {
@extend .bb;
width: 100%;
height: 4.5rem;
border-radius: 4.5rem;
border: solid 1px #dcdddd;
background-color: #ffffff;
padding: 0 2rem;
flex: 1;
letter-spacing: .1rem;
}
......
@import '@/styles/_support';
.content {
// font-family: MicrosoftYaHei;
color: #4c4948;
padding-bottom: 8.5rem;
}
......@@ -11,19 +9,19 @@
}
.top-space {
height: 5rem;
height: 3rem;
}
.tit {
text-align: center;
font-size: 18px;
font-size: $fontSizeTitle;
font-weight: bold;
letter-spacing: 1.8px;
}
.desc {
max-width: 64rem;
margin-top: 4.25rem;
max-width: $articleWidth;
margin-top: 3rem;
line-height: 2;
letter-spacing: 1.2px;
}
......
@import '@/styles/_support';
.content {
background-color: #f5f5f5;
}
.fix {
position: fixed;
max-width: 950px;
max-width: 1200px;
width: 100%;
top: 0;
}
.banner {
margin-bottom: 3.333333rem;
padding-bottom: $marginMedium;
position: relative;
.btn-position {
position: absolute;
top: 23.333333rem;
top: 27.2rem;
left: 2.833333rem;
cursor: pointer;
}
img {
width: 100%;
}
.btn {
background: #FF5700;
border: 0;
......@@ -135,5 +142,5 @@
}
.bottom-space {
padding-bottom: 5rem;
padding-bottom: $marginMedium;
}
......
@import '@/styles/_support';
.content {
// font-family: MicrosoftYaHei;
color: #4c4948;
padding-bottom: 8.5rem;
}
......@@ -11,7 +9,7 @@
}
.top-space {
height: 5rem;
height: 3rem;
}
.tit {
......@@ -22,8 +20,8 @@
}
.desc {
max-width: 64rem;
margin-top: 4.25rem;
max-width: $articleWidth;
margin-top: 3rem;
line-height: 2;
letter-spacing: 1.2px;
}
......
@import '@/styles/_support';
.content {
// font-family: MicrosoftYaHei;
color: #4c4948;
padding-bottom: 8.5rem;
}
......@@ -11,19 +9,19 @@
}
.top-space {
height: 5rem;
height: 3rem;
}
.tit {
text-align: center;
font-size: 18px;
font-size: $fontSizeTitle;
font-weight: bold;
letter-spacing: 1.8px;
}
.desc {
max-width: 64rem;
margin-top: 4.25rem;
max-width: $articleWidth;
margin-top: 3rem;
line-height: 2;
letter-spacing: 1.2px;
}
......
......@@ -19,9 +19,13 @@
.ebg {
position: absolute;
bottom: 0;
left: 50%;
margin-left: -960px;
width: 1920px;
width: 100%;
overflow: hidden;
img {
width: 1920px;
margin-left: 360px;
}
}
.step {
......@@ -174,13 +178,6 @@
// input和下拉
.ipt {
@extend .bb;
width: 100%;
height: 4.5rem;
border-radius: 4.5rem;
border: solid 1px #dcdddd;
background-color: #ffffff;
padding: 0 2rem;
flex: 1;
letter-spacing: .1rem;
}
......
@import '@/styles/_support';
.content {
// font-family: MicrosoftYaHei;
color: #4c4948;
padding-bottom: 8.5rem;
}
......@@ -11,19 +9,19 @@
}
.top-space {
height: 5rem;
height: 3rem;
}
.tit {
text-align: center;
font-size: 18px;
font-size: $fontSizeTitle;
font-weight: bold;
letter-spacing: 1.8px;
}
.desc {
max-width: 64rem;
margin-top: 4.25rem;
max-width: $articleWidth;
margin-top: 3rem;
line-height: 2;
letter-spacing: 1.2px;
}
......
......@@ -6,19 +6,20 @@
*
*/
$contentWidth:1200px;
$borderRadiusSmall:5px;
$borderRadius:8px;
$borderRadiusSmall:5px;
$borderRadius:8px;
// Margin
$marginSmall: 10px; // 小间距
$marginSmallHalf: 5px; // 小间距的一半
$marginSmall: 10px; // 小间距
$marginMedium: 28px; // 间距
// $marginLarge: 28px;
// Padding
$paddingSmall: 10px;
$paddingMedium: 28px;
// $paddingLarge: 28px;
// Font
$fontSizeTitle:16px;
......@@ -33,8 +34,10 @@ $cGray:#bfbfbf;
$cDark:#dcdcdc;
$cLightBlack:#333333;
// 文章宽度
$articleWidth:1041px;
// 移动端
$marginSmall-M: 10px; // 小间距
$marginSmall-M: 10px; // 小间距
$marginMedium-M: 20px; // 间距
// $marginLarge: 28px;
......
......@@ -45,6 +45,7 @@ module.exports = {
chainWebpack: (config) => {
config.resolve.alias
.set('@', resolve('src'))
.set('@public', resolve('public'))
.set('@assets', resolve('src/assets'))
.set('@components', resolve('src/components'))
.set('@pages', resolve('src/pages'))
......