Skip to content

dev / pingan-life-index-pro

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

默认提交

1 parent 3e4494f5
Expand all
Inline Side-by-side
Showing 14 changed files with 270 additions and 236 deletions

566 KB | W: | H:

316 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

5.51 KB | W: | H:

4.04 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

4.63 KB | W: | H:

3.38 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

6.64 KB | W: | H:

5.71 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

6.62 KB | W: | H:

5.05 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

2.34 KB | W: | H:

2.03 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

8.52 KB | W: | H:

6.04 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

511 Bytes | W: | H:

365 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin
@import '@/styles/_support';
$borderSize: 8px;
.clarms-container {
box-sizing:border-box;
padding:.166667rem;
box-sizing: border-box;
padding: .166667rem;
border-radius: .416667rem;
background-image: linear-gradient(to right, #ffb31d, #f15907);
.clarms-box {
position: relative;
width: 100%;
height: 100%;
border-radius: .416667rem;
background-image: linear-gradient(to right , #ffb31d, #f15907) ;
background: #fff;
padding: 1.666667rem 2.5rem 0 2.5rem;
// padding: 1.666667rem 2.5rem;
.clarms-tips {
top: 20px;
left: 80px;
position: absolute;
z-index: 11;
border-radius: 2px;
padding: 2px;
background-image: linear-gradient(to right, #ffb31d, #f15907);
.cont {
@extend .bb;
padding: 4px;
width: 100%;
height: 100%;
background-color: #ffffff;
border-radius: 2px;
}
}
.clarms-header {
display: flex;
align-items: center;
padding-bottom: 1.666667rem;
.clarms-header-2 {
position: relative;
flex-grow: 1;
display: flex;
align-items: center;
}
.clarms-icon {
width: 4.166667rem;
}
}
.clarms-title-container {
margin-left: 2.5rem;
flex-grow: 1;
width: 100%;
.clarmsActivty {
color: #ffb31d !important;
}
.clarms-t1 {
font-size: 1.5rem;
color: #f15907;
letter-spacing: .166667rem;
}
.clarms-t2 {
color: #58595b;
letter-spacing: .166667rem;
}
}
.clarms-box {
width:100%;
height:100%;
border-radius: .416667rem;
background:#fff;
padding: 1.666667rem 2.5rem 0 2.5rem;
hr {
margin: 0 .833333rem 1.666667rem .833333rem;
border-top: 1px solid #dddede;
}
.clarms-btn {
background: url(~@/assets/images/clarms/button.png);
background-size: 100% 100%;
width: 10.583333rem !important;
height: 3rem;
text-align: center;
line-height: 3rem;
color: white;
letter-spacing: .166667rem;
font-size: 1.166667rem;
cursor: pointer;
}
.clarms-header {
.clarms-img-group {
display: flex;
flex-wrap: wrap;
.clarms-img-item-plugin {
cursor: pointer;
margin-right: .833333rem;
margin-bottom: .833333rem;
width: 5.833333rem;
height: 5.833333rem;
.clarms-img-item {
position: relative;
width: 5.833333rem;
height: 5.833333rem;
.clarms-img-cont {
width: 5.833333rem;
height: 5.833333rem;
position: absolute;
left: 0;
top: 0;
}
.clarms-img-mask {
width: 5.833333rem;
height: 5.833333rem;
text-align: center;
line-height: 5.833333rem;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 1.666667rem;
.clarms-header-2 {
flex-grow: 1;
display: flex;
align-items: center;
}
.clarms-icon {
width: 4.166667rem;
}
}
.clarms-title-container {
margin-left: 2.5rem ;
flex-grow: 1;
width: 100%;
.clarmsActivty {
color: #ffb31d !important;
}
.clarms-t1 {
font-size: 1.5rem ;
color: #f15907;
letter-spacing: .166667rem;
}
background-color: rgba($color: #000000, $alpha: .1);
.clarms-t2 {
color: #58595b;
letter-spacing: .166667rem;
img {
width: 2.5rem;
height: 2.5rem;
}
}
}
hr {
margin: 0 .833333rem 1.666667rem .833333rem;
border-top: 1px solid #dddede ;
.mask-bg-2 {
background-color: rgba($color: #000000, $alpha: .5) !important;
color: white !important;
font-size: 1rem;
}
}
.clarms-btn {
background: url(~@/assets/images/clarms/button.png);
background-size: 100% 100%;
width: 10.583333rem !important;
height: 3rem;
text-align: center;
line-height: 3rem;
color: white;
letter-spacing: .166667rem ;
font-size: 1.166667rem;
cursor: pointer;
.clarms-upload-tips {
font-size: 1rem;
color: #58595b;
text-align: center;
}
.clarms-img-group {
display: flex;
flex-wrap: wrap;
.clarms-img-item-plugin {
cursor: pointer;
margin-right: .833333rem;
margin-bottom: .833333rem;
width: 5.833333rem;
height: 5.833333rem;
.clarms-img-item {
position: relative;
width: 5.833333rem;
height: 5.833333rem;
.clarms-img-cont {
width: 5.833333rem;
height: 5.833333rem;
position: absolute;
left: 0;
top: 0;
}
.clarms-img-mask {
width: 5.833333rem;
height: 5.833333rem;
text-align: center;
line-height: 5.833333rem;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba($color: #000000, $alpha: .1);
img {
width: 2.5rem ;
height: 2.5rem ;
}
}
.mask-bg-2 {
background-color: rgba($color: #000000, $alpha: .5) !important;
color: white !important;
font-size: 1rem;
}
}
.clarms-upload-tips {
font-size: 1rem ;
color: #58595b;
text-align: center;
}
}
}
}
.clarms-empty-line {
height: .833333rem;
}
}
}
.clarms-empty-line {
height: .833333rem;
}
}
@media (max-width: 800px) {
.clarms-container {
.clarms-box {
.clarms-header {
flex-direction: column;
.clarms-header-2{
align-self: flex-start;
}
.clarms-btn {
align-self: flex-end;
margin-top: .833333rem;
}
.clarms-icon {
width: 4.166667rem;
}
}
.clarms-title-container {
margin-top: .833333rem;
margin-left: .833333rem;
}
.clarms-container {
.clarms-box {
.clarms-header {
flex-direction: column;
.clarms-header-2 {
align-self: flex-start;
}
.clarms-btn {
align-self: flex-end;
margin-top: .833333rem;
}
.clarms-icon {
width: 4.166667rem;
}
}
.clarms-title-container {
margin-top: .833333rem;
margin-left: .833333rem;
}
}
}
}
@media (max-width: 600px) {
.clarms-container .clarms-box .clarms-title-container .clarms-t1{
font-size: 1.333333rem ;
}
.clarms-container .clarms-box .clarms-title-container .clarms-t1 {
font-size: 1.333333rem;
}
.clarms-container .clarms-box .clarms-title-container .clarms-t2{
font-size: 1.333333rem ;
}
.clarms-container .clarms-box .clarms-title-container .clarms-t2 {
font-size: 1.333333rem;
}
}
@media (max-width: 500px) {
.clarms-container .clarms-box .clarms-title-container .clarms-t1{
font-size: 1rem;
}
.clarms-container .clarms-box .clarms-title-container .clarms-t1 {
font-size: 1rem;
}
.clarms-container .clarms-box .clarms-title-container .clarms-t2{
font-size: 1rem;
}
}
\ No newline at end of file
.clarms-container .clarms-box .clarms-title-container .clarms-t2 {
font-size: 1rem;
}
}
......
<template>
<div>
<div class="clarms-container">
<div class="clarms-box">
<div class="clarms-header">
<div class="clarms-header-2">
<img class="clarms-icon" :src='icon'>
<div class="clarms-title-container">
<div class="clarms-t1" :class="{clarmsActivty:images && images.length > 0}">{{options.name}}</div>
<div class="clarms-t2">{{$t('clarms.step2.uploadFile')}}{{uploadFiles}}</div>
</div>
</div>
<div class="clarms-btn" :class="{disabled:uploading}" @click="selectMutilFile">
{{$t('clarms.step2.btnUpload')}}
</div>
</div>
<div v-if="images && images.length > 0">
<hr>
<div class="clarms-img-group">
<div class="clarms-img-item-plugin" @mouseover="onOverHandler($event,item,index)" v-for="(item,index) in images" :key="index">
<div class="clarms-img-item">
<img class="clarms-img-cont" :src="item.data">
<div class="clarms-img-mask" v-if="item.showMask && !item.intervial && !item.err">
<img src="@/assets/images/clarms/close.png">
</div>
<div class="clarms-img-mask" v-if="item.showMask && !item.intervial && !item.err" @mouseout="onOutHandler($event,item,index)" @click="removeItem(index)">
</div>
<div class="clarms-img-mask mask-bg-2" v-if="item.intervial">
Uploading{{item.tips}}
</div>
<div class="clarms-img-mask mask-bg-2" v-if="item.err" @click="removeItem(index)">
Uploading{{item.err}}
</div>
</div>
</div>
</div>
<div class="clarms-empty-line"></div>
</div>
</div>
</div>
</div>
<div>
<div class="clarms-container">
<div class="clarms-box">
<div class="clarms-tips" v-if="tipsVisible">
<div class="cont">{{options.toast}}</div>
</div>
<div class="clarms-header">
<div class="clarms-header-2">
<div @mouseover="onShowTipsOverHandler($event)" @mouseout="onShowTipsOutHandler($event)">
<img class="clarms-icon" :src='icon'>
</div>
<div class="clarms-title-container">
<div class="clarms-t1" :class="{clarmsActivty:images && images.length > 0}">{{options.name}}</div>
<div class="clarms-t2">{{$t('clarms.step2.uploadFile')}}{{uploadFiles}}</div>
</div>
</div>
<div class="clarms-btn" :class="{disabled:uploading}" @click="selectMutilFile">
{{$t('clarms.step2.btnUpload')}}
</div>
</div>
<div v-if="images && images.length > 0">
<hr>
<div class="clarms-img-group">
<div class="clarms-img-item-plugin" @mouseover="onOverHandler($event,item,index)" v-for="(item,index) in images" :key="index">
<div class="clarms-img-item">
<img class="clarms-img-cont" :src="item.data">
<div class="clarms-img-mask" v-if="item.showMask && !item.intervial && !item.err">
<img src="@/assets/images/clarms/close.png">
</div>
<div class="clarms-img-mask" v-if="item.showMask && !item.intervial && !item.err" @mouseout="onOutHandler($event,item,index)" @click="removeItem(index)">
</div>
<div class="clarms-img-mask mask-bg-2" v-if="item.intervial">
Uploading{{item.tips}}
</div>
<div class="clarms-img-mask mask-bg-2" v-if="item.err" @click="removeItem(index)">
Uploading{{item.err}}
</div>
</div>
</div>
</div>
<div class="clarms-empty-line"></div>
</div>
</div>
</div>
</div>
</template>
<script src="./clarms-plugins-upload.js"></script>
<style lang="scss" scoped>
@import "./clarms-plugins-upload.scss";
</style>
\ No newline at end of file
</style>
......
......@@ -117,8 +117,10 @@ export default {
// let videoUrl = sessionStorage.getItem("_video_url");
// let posterUrl = sessionStorage.getItem("_poster_url");
let playerOptions = {
width: 800,
height: 450,
// width: 800,
// height: 450,
width: 1200,
height: 675,
// aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
autoplay: false, //如果true,浏览器准备好时开始回放。
muted: true, // 默认情况下将会消除任何音频。
......@@ -154,11 +156,11 @@ export default {
}, {
title: "不設終身保障限額"
}, {
title: "一家投保<br>盡享稅務扣減"
title: "一家投保 盡享稅務扣減"
}, {
title: "承保投保前未知的已有疾病"
}, {
title: "出院免找數<br>讓您安心無憂"
title: "出院免找數 讓您安心無憂"
}, {
title: "無索償折扣"
}];
......
......@@ -16,7 +16,7 @@
// banner 轮播
.banner-contaner {
width: 100%;
height: 791px;
height: 502px;
margin: 0 auto;
position: relative;
z-index: 1;
......@@ -50,20 +50,20 @@
// top: 272px;
// left: 1228px;
// top: 310px;
top: 562px;
left: 379px;
top: 309px;
left: 466px;
display: flex;
.banner-btn {
@extend .pointer;
@extend .bb;
@include btc4(288px, 60px, $fontSizeTitle);
font-size: 30px;
@include btc4(300px, 50px, $fontSizeTitle);
font-size: 22px;
width: auto;
padding: 0 24px;
min-width: 288px;
margin-left: 12px;
background: url("~@assets/images/vhis/vhis-btn2.png");
background: url("~@assets/images/vhis/vhis-btn.png");
letter-spacing: 1.5px;
}
}
......@@ -119,7 +119,7 @@
position: relative;
width: 100%;
height: 100%;
background-color: #ffffff;
background-color: rgba($color: #ffffff, $alpha: 0.8);
border-radius: $borderSize;
.tit {
......@@ -152,13 +152,11 @@
// 标题
.title {
@extend .bb;
padding: 62px 0;
padding: 42px 0;
background-color: #fff1ed;
text-align: center;
font-size: $fontSize;
.tt {
// display: flex;
// justify-content: center;
......@@ -174,24 +172,25 @@
.easy1 {
margin-right: 8px;
margin-top: -4px;
height: 36px;
}
.easy2 {
margin-right: 10px;
margin-top: -4px;
height: 26px;
}
.t1 {
color: $cOrange2;
letter-spacing: 2px;
font-weight: bold;
font-size: 45px;
font-size: 34px;
letter-spacing: 6px;
}
.t2 {
font-size: 34px;
font-size: 24px;
margin-top: 36px;
line-height: 1.39;
letter-spacing: 2px;
......@@ -206,12 +205,12 @@
.tit {
color: $cOrange2;
letter-spacing: 2.5px;
font-size: 50px;
font-size: 36px;
font-weight: bold;
}
.prod {
margin: 48px auto 0;
margin: 24px auto 0;
color: $cOrange2;
display: flex;
justify-content: space-between;
......@@ -234,18 +233,18 @@
.icon-wrap {
@extend .fcc;
width: 210px;
width: 202px;
}
.detail {
padding: 40px 40px 40px 0;
flex: 1;
padding: 52px 40px 0 0;
// flex: 1;
flex-grow: 1;
.t1 {
letter-spacing: 2px;
font-size: 38px;
font-size: 22px;
font-weight: bold;
}
.desc {
......@@ -259,7 +258,7 @@
.c1 {
letter-spacing: 1.2px;
font-size: 24px;
font-size: 18px;
}
}
}
......@@ -276,13 +275,14 @@
// 保障
.guarantee {
margin: 100px auto 0;
font-size: 26px;
font-size: 22px;
.tit {
text-align: center;
color: $cOrange2;
letter-spacing: 1.4px;
letter-spacing: 1.8px;
font-size: 36px;
font-weight: bold;
}
.table {
......@@ -302,19 +302,19 @@
.tt {
@extend .bb;
width: 50%;
padding: 26px 0;
padding: 20px 0;
letter-spacing: 1.12px;
color: #666666;
}
.label {
background-color: #fef1ed;
padding-left: 76px;
padding-left: 100px;
border-right: solid 1px #e4e4e5;
}
.val {
padding-left: 76px;
padding-left: 100px;
}
}
}
......@@ -352,7 +352,7 @@
position: relative;
background-image: url('~@assets/images/vhis/vhis-tick.png');
background-repeat: no-repeat;
background-position: 0 10px;
background-position: 0 5px;
padding-left: 40px;
margin: 24px 0;
......@@ -393,9 +393,9 @@
@extend .bb;
@extend .fcc;
margin: 0 auto 24px;
max-width: 740px;
height: 82px;
line-height: 82px;
max-width: 602px;
height: 67px;
line-height: 67px;
padding: 2px;
border-radius: 2px;
cursor: pointer;
......@@ -405,28 +405,30 @@
@extend .bb;
display: flex;
align-items: center;
padding-left: 220px;
padding-left: 178px;
width: 100%;
height: 100%;
background-color: #ffffff;
font-size: 36px;
font-size: 22px;
font-weight: bold;
border-radius: 2px;
.icon {
margin-right: 24px;
height: 47px;
margin-right: 48px;
}
}
}
}
// 提交订单
.submit-btn {
margin: 120px auto 100px;
margin: 64px auto 100px;
@extend .pointer;
@extend .bb;
@include btc4(406px, 60px, 28px);
@include btc4(300px, 50px, 22px);
font-weight: bold;
}
......
......@@ -7,8 +7,8 @@
<div class="banner banner-pc">
<swiper :options="swiperOption">
<swiper-slide v-for="(item,index) in bannerList" :key="index">
<img class="banner-img" :src="item.pcBannerUrl">
<!-- <img :src="require('@/assets/images/vhis/kv.png')"> -->
<!-- <img class="banner-img" :src="item.pcBannerUrl"> -->
<img :src="require('@/assets/images/vhis/kv.png')">
<div class="btn-wrap">
<div v-for="(btnItem, btnIndex) in item.btns" :key="btnIndex">
<div class="banner-btn" v-if="btnItem.n && btnItem.t && btnItem.c" @click="btnNavigateTo(btnItem.t,btnItem.l)" :style="{backgroundColor:btnItem.c}">{{btnItem.n}}</div>
......