Skip to content

dev / pingan-life-index-pro

Go to a project
Toggle navigation
Toggle navigation pinning
059054a1 by simon
Options

客户介绍 新设计样式 样式大优化

1 parent 0c648f83
Expand all
Inline Side-by-side
Showing 22 changed files with 48 additions and 163 deletions

1.91 KB | W: | H:

630 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin

1.92 KB | W: | H:

591 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin

1.52 KB | W: | H:

440 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin

1.65 KB | W: | H:

499 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin

1.57 KB | W: | H:

511 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin

1.66 KB | W: | H:

490 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin

1.58 KB | W: | H:

483 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin

1.63 KB | W: | H:

461 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin

1.71 KB | W: | H:

618 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin

1.76 KB | W: | H:

562 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin

1.77 KB | W: | H:

592 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin

1.79 KB | W: | H:

542 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin

1.79 KB | W: | H:

539 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin

1.85 KB | W: | H:

588 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin

1.63 KB | W: | H:

376 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin

1.69 KB | W: | H:

530 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin

1020 Bytes | W: | H:

159 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin
<template>
<div class="border">
contact-us
<div class="contact-us-container">
<div class="border">
contact-us
</div>
</div>
</template>
......
@import '@/styles/_support';
.content {
display: flex;
// margin-top: 2.333333rem;
margin: 2.333333rem auto;
position: relative;
}
.left-panel {
......@@ -17,134 +20,64 @@
}
.menu-item {
height: 5.916667rem;
line-height: 5.916667rem;
font-size: 1.5rem;
position: relative;
@extend .bb;
padding: 1rem 0;
font-weight: bold;
color: #4c4948;
color: $cFontGray;
text-align: center;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
i {
display: inline-block;
width: 3.416667rem;
height: 3.416667rem;
margin-right: .166667rem;
vertical-align: middle;
}
.m1 {
background: url("~@/assets/images/insurance-query/m1-unselect.png") no-repeat center center;
background-size: 100% 100%;
}
.m2 {
background: url("~@/assets/images/insurance-query/m2-unselect.png") no-repeat center center;
background-size: 100% 100%;
}
.m3 {
background: url("~@/assets/images/insurance-query/m3-unselect.png") no-repeat center center;
background-size: 100% 100%;
}
.m4 {
background: url("~@/assets/images/insurance-query/m4-unselect.png") no-repeat center center;
background-size: 100% 100%;
}
.m5 {
background: url("~@/assets/images/insurance-query/m5-unselect.png") no-repeat center center;
background-size: 100% 100%;
}
.m6 {
background: url("~@/assets/images/insurance-query/m6-unselect.png") no-repeat center center;
background-size: 100% 100%;
}
.m7 {
background: url("~@/assets/images/insurance-query/m7-unselect.png") no-repeat center center;
background-size: 100% 100%;
}
.m8 {
background: url("~@/assets/images/insurance-query/m8-unselect.png") no-repeat center center;
background-size: 100% 100%;
}
}
.menu-item.activity {
color: #f05a23 !important;
justify-content: flex-start;
border-bottom: solid 1px #dcdddd;
width: 10.5rem;
margin-left: 1.083333rem;
.m1 {
background: url("~@/assets/images/insurance-query/m1.png") no-repeat center center;
background-size: 100% 100%;
}
.icon-wrap {
@extend .fcc;
width: 3rem;
.m2 {
background: url("~@/assets/images/insurance-query/m2.png") no-repeat center center;
background-size: 100% 100%;
.icon {}
}
.m3 {
background: url("~@/assets/images/insurance-query/m3.png") no-repeat center center;
background-size: 100% 100%;
}
.tit {
flex: 1;
@extend .bb;
padding: 0 .333333rem;
text-align: left;
.m4 {
background: url("~@/assets/images/insurance-query/m4.png") no-repeat center center;
background-size: 100% 100%;
}
.m5 {
background: url("~@/assets/images/insurance-query/m5.png") no-repeat center center;
background-size: 100% 100%;
.sel {
position: absolute;
width: .583333rem;
height: 1.166667rem;
top: 0;
bottom: 0;
right: -1.75rem;
margin: auto 0;
background: url("~@/assets/images/insurance-query/triangle.png") no-repeat center center;
@extend .bis;
}
.m6 {
background: url("~@/assets/images/insurance-query/m6.png") no-repeat center center;
background-size: 100% 100%;
.sel-first {
margin: 0;
}
.m7 {
background: url("~@/assets/images/insurance-query/m7.png") no-repeat center center;
background-size: 100% 100%;
&:first-child {
padding: 0 0 1rem;
}
.m8 {
background: url("~@/assets/images/insurance-query/m8.png") no-repeat center center;
background-size: 100% 100%;
&:last-child {
border-bottom: none;
}
}
}
.min-panel {
margin-left: .666667rem;
width: 1.166667rem;
.item {
width: 1.166667rem;
height: 6rem;
display: flex;
justify-content: flex-start;
align-items: center;
}
.activity .triangle {
width: .583333rem;
height: 1.166667rem;
background: url("~@/assets/images/insurance-query/triangle.png") no-repeat center center;
background-size: 100% 100%;
}
}
.right-panel {
margin-left: 1.166667rem;
margin-left: 3rem;
// width: 64.166667rem;
width: 64.416667rem;
background-color: #ffffff;
......
<template>
<div class="content">
<div class="left-panel">
<div class="menu-item" :class="{activity : activity == 'm1'}" @click="changeActivity('m1')">
<i class="m1"></i>{{$t('customService.menu1')}}
</div>
<div class="separator"></div>
<div class="menu-item" :class="{activity : activity == 'm2'}" @click="changeActivity('m2')">
<i class="m2"></i>{{$t('customService.menu2')}}
</div>
<div class="separator"></div>
<div class="menu-item" :class="{activity : activity == 'm3'}" @click="changeActivity('m3')">
<i class="m3"></i>{{$t('customService.menu3')}}
</div>
<div class="separator"></div>
<div class="menu-item" :class="{activity : activity == 'm4'}" @click="changeActivity('m4')">
<i class="m4"></i>{{$t('customService.menu4')}}
</div>
<div class="separator"></div>
<div class="menu-item" :class="{activity : activity == 'm5'}" @click="changeActivity('m5')">
<i class="m5"></i>{{$t('customService.menu5')}}
</div>
<div class="separator"></div>
<div class="menu-item" :class="{activity : activity == 'm6'}" @click="/*toPath('/reservation')*/changeActivity('m6')">
<i class="m6"></i>{{$t('customService.menu6')}}
</div>
<div class="separator"></div>
<div class="menu-item" :class="{activity : activity == 'm7'}" @click="changeActivity('m7')">
<i class="m7"></i>{{$t('customService.menu7')}}
</div>
<div class="separator"></div>
<div class="menu-item" :class="{activity : activity == 'm8'}" @click="changeActivity('m8')">
<i class="m8"></i>{{$t('customService.menu8')}}
</div>
</div>
<div class="min-panel">
<div class="item" :class="{activity : activity == 'm1'}">
<div class="triangle"></div>
</div>
<div class="item" :class="{activity : activity == 'm2'}">
<div class="triangle"></div>
</div>
<div class="item" :class="{activity : activity == 'm3'}">
<div class="triangle"></div>
</div>
<div class="item" :class="{activity : activity == 'm4'}">
<div class="triangle"></div>
</div>
<div class="item" :class="{activity : activity == 'm5'}">
<div class="triangle"></div>
</div>
<div class="item" :class="{activity : activity == 'm6'}">
<div class="triangle"></div>
</div>
<div class="item" :class="{activity : activity == 'm7'}">
<div class="triangle"></div>
</div>
<div class="item" :class="{activity : activity == 'm8'}">
<div class="triangle"></div>
<div v-for="(item,index) in 8" :key="index" class="menu-item" :class="{'activity' : activity == 'm' + (index+1)}" @click="changeActivity('m'+(index+1))">
<div class="icon-wrap">
<img class="icon" :src="require('@/assets/images/insurance-query/m'+(index+1) + (activity == 'm' + (index+1) ?'':'-unselect') +'.png')">
</div>
<div class="tit">{{$t('customService.menu'+(index+1))}}</div>
<div v-if="activity == 'm' + (index+1)" class="sel" :class="{'sel-first':index == 0}"></div>
</div>
</div>
<div class="right-panel">
......
......@@ -45,3 +45,4 @@ $cGreen:#006441;
$cGray:#bfbfbf;
$cDark:#dcdcdc;
$cLightBlack:#333333;
$cFontGray: #4c4948;
......