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
1 1
2 <template> 2 <template>
3 <div class="border"> 3 <div class="contact-us-container">
4 contact-us 4 <div class="border">
5 contact-us
6 </div>
5 </div> 7 </div>
6 </template> 8 </template>
7 9
......
1 @import '@/styles/_support';
2
1 .content { 3 .content {
2 display: flex; 4 display: flex;
3 // margin-top: 2.333333rem; 5 // margin-top: 2.333333rem;
4 margin: 2.333333rem auto; 6 margin: 2.333333rem auto;
7 position: relative;
5 } 8 }
6 9
7 .left-panel { 10 .left-panel {
...@@ -17,134 +20,64 @@ ...@@ -17,134 +20,64 @@
17 } 20 }
18 21
19 .menu-item { 22 .menu-item {
20 height: 5.916667rem; 23 position: relative;
21 line-height: 5.916667rem; 24 @extend .bb;
22 font-size: 1.5rem; 25 padding: 1rem 0;
23 font-weight: bold; 26 font-weight: bold;
24 color: #4c4948; 27 color: $cFontGray;
25 text-align: center; 28 text-align: center;
26 cursor: pointer; 29 cursor: pointer;
27 display: flex; 30 display: flex;
28 align-items: center; 31 align-items: center;
29 justify-content: center; 32 justify-content: flex-start;
30 33 border-bottom: solid 1px #dcdddd;
31 i { 34 width: 10.5rem;
32 display: inline-block; 35 margin-left: 1.083333rem;
33 width: 3.416667rem;
34 height: 3.416667rem;
35 margin-right: .166667rem;
36 vertical-align: middle;
37 }
38
39 .m1 {
40 background: url("~@/assets/images/insurance-query/m1-unselect.png") no-repeat center center;
41 background-size: 100% 100%;
42 }
43
44 .m2 {
45 background: url("~@/assets/images/insurance-query/m2-unselect.png") no-repeat center center;
46 background-size: 100% 100%;
47 }
48
49 .m3 {
50 background: url("~@/assets/images/insurance-query/m3-unselect.png") no-repeat center center;
51 background-size: 100% 100%;
52 }
53
54 .m4 {
55 background: url("~@/assets/images/insurance-query/m4-unselect.png") no-repeat center center;
56 background-size: 100% 100%;
57 }
58
59 .m5 {
60 background: url("~@/assets/images/insurance-query/m5-unselect.png") no-repeat center center;
61 background-size: 100% 100%;
62 }
63
64 .m6 {
65 background: url("~@/assets/images/insurance-query/m6-unselect.png") no-repeat center center;
66 background-size: 100% 100%;
67 }
68
69 .m7 {
70 background: url("~@/assets/images/insurance-query/m7-unselect.png") no-repeat center center;
71 background-size: 100% 100%;
72 }
73
74 .m8 {
75 background: url("~@/assets/images/insurance-query/m8-unselect.png") no-repeat center center;
76 background-size: 100% 100%;
77 }
78 }
79
80 .menu-item.activity {
81 color: #f05a23 !important;
82 36
83 .m1 { 37 .icon-wrap {
84 background: url("~@/assets/images/insurance-query/m1.png") no-repeat center center; 38 @extend .fcc;
85 background-size: 100% 100%; 39 width: 3rem;
86 }
87 40
88 .m2 { 41 .icon {}
89 background: url("~@/assets/images/insurance-query/m2.png") no-repeat center center;
90 background-size: 100% 100%;
91 } 42 }
92 43
93 .m3 { 44 .tit {
94 background: url("~@/assets/images/insurance-query/m3.png") no-repeat center center; 45 flex: 1;
95 background-size: 100% 100%; 46 @extend .bb;
96 } 47 padding: 0 .333333rem;
48 text-align: left;
97 49
98 .m4 {
99 background: url("~@/assets/images/insurance-query/m4.png") no-repeat center center;
100 background-size: 100% 100%;
101 } 50 }
102 51
103 .m5 { 52 .sel {
104 background: url("~@/assets/images/insurance-query/m5.png") no-repeat center center; 53 position: absolute;
105 background-size: 100% 100%; 54 width: .583333rem;
55 height: 1.166667rem;
56 top: 0;
57 bottom: 0;
58 right: -1.75rem;
59 margin: auto 0;
60 background: url("~@/assets/images/insurance-query/triangle.png") no-repeat center center;
61 @extend .bis;
106 } 62 }
107 63
108 .m6 { 64 .sel-first {
109 background: url("~@/assets/images/insurance-query/m6.png") no-repeat center center; 65 margin: 0;
110 background-size: 100% 100%;
111 } 66 }
112 67
113 .m7 { 68 &:first-child {
114 background: url("~@/assets/images/insurance-query/m7.png") no-repeat center center; 69 padding: 0 0 1rem;
115 background-size: 100% 100%;
116 } 70 }
117 71
118 .m8 { 72 &:last-child {
119 background: url("~@/assets/images/insurance-query/m8.png") no-repeat center center; 73 border-bottom: none;
120 background-size: 100% 100%;
121 } 74 }
122 75
123 } 76 }
124 } 77 }
125 78
126 .min-panel {
127 margin-left: .666667rem;
128 width: 1.166667rem;
129
130 .item {
131 width: 1.166667rem;
132 height: 6rem;
133 display: flex;
134 justify-content: flex-start;
135 align-items: center;
136 }
137
138 .activity .triangle {
139 width: .583333rem;
140 height: 1.166667rem;
141 background: url("~@/assets/images/insurance-query/triangle.png") no-repeat center center;
142 background-size: 100% 100%;
143 }
144 }
145
146 .right-panel { 79 .right-panel {
147 margin-left: 1.166667rem; 80 margin-left: 3rem;
148 // width: 64.166667rem; 81 // width: 64.166667rem;
149 width: 64.416667rem; 82 width: 64.416667rem;
150 background-color: #ffffff; 83 background-color: #ffffff;
......
1 <template> 1 <template>
2 <div class="content"> 2 <div class="content">
3
4 <div class="left-panel"> 3 <div class="left-panel">
5 <div class="menu-item" :class="{activity : activity == 'm1'}" @click="changeActivity('m1')"> 4 <div v-for="(item,index) in 8" :key="index" class="menu-item" :class="{'activity' : activity == 'm' + (index+1)}" @click="changeActivity('m'+(index+1))">
6 <i class="m1"></i>{{$t('customService.menu1')}} 5 <div class="icon-wrap">
7 </div> 6 <img class="icon" :src="require('@/assets/images/insurance-query/m'+(index+1) + (activity == 'm' + (index+1) ?'':'-unselect') +'.png')">
8 <div class="separator"></div> 7 </div>
9 <div class="menu-item" :class="{activity : activity == 'm2'}" @click="changeActivity('m2')"> 8 <div class="tit">{{$t('customService.menu'+(index+1))}}</div>
10 <i class="m2"></i>{{$t('customService.menu2')}} 9 <div v-if="activity == 'm' + (index+1)" class="sel" :class="{'sel-first':index == 0}"></div>
11 </div>
12 <div class="separator"></div>
13 <div class="menu-item" :class="{activity : activity == 'm3'}" @click="changeActivity('m3')">
14 <i class="m3"></i>{{$t('customService.menu3')}}
15 </div>
16 <div class="separator"></div>
17 <div class="menu-item" :class="{activity : activity == 'm4'}" @click="changeActivity('m4')">
18 <i class="m4"></i>{{$t('customService.menu4')}}
19 </div>
20 <div class="separator"></div>
21 <div class="menu-item" :class="{activity : activity == 'm5'}" @click="changeActivity('m5')">
22 <i class="m5"></i>{{$t('customService.menu5')}}
23 </div>
24 <div class="separator"></div>
25 <div class="menu-item" :class="{activity : activity == 'm6'}" @click="/*toPath('/reservation')*/changeActivity('m6')">
26 <i class="m6"></i>{{$t('customService.menu6')}}
27 </div>
28 <div class="separator"></div>
29 <div class="menu-item" :class="{activity : activity == 'm7'}" @click="changeActivity('m7')">
30 <i class="m7"></i>{{$t('customService.menu7')}}
31 </div>
32 <div class="separator"></div>
33 <div class="menu-item" :class="{activity : activity == 'm8'}" @click="changeActivity('m8')">
34 <i class="m8"></i>{{$t('customService.menu8')}}
35 </div>
36 </div>
37 <div class="min-panel">
38 <div class="item" :class="{activity : activity == 'm1'}">
39 <div class="triangle"></div>
40 </div>
41 <div class="item" :class="{activity : activity == 'm2'}">
42 <div class="triangle"></div>
43 </div>
44 <div class="item" :class="{activity : activity == 'm3'}">
45 <div class="triangle"></div>
46 </div>
47 <div class="item" :class="{activity : activity == 'm4'}">
48 <div class="triangle"></div>
49 </div>
50 <div class="item" :class="{activity : activity == 'm5'}">
51 <div class="triangle"></div>
52 </div>
53 <div class="item" :class="{activity : activity == 'm6'}">
54 <div class="triangle"></div>
55 </div>
56 <div class="item" :class="{activity : activity == 'm7'}">
57 <div class="triangle"></div>
58 </div>
59 <div class="item" :class="{activity : activity == 'm8'}">
60 <div class="triangle"></div>
61 </div> 10 </div>
62 </div> 11 </div>
63 <div class="right-panel"> 12 <div class="right-panel">
......
...@@ -45,3 +45,4 @@ $cGreen:#006441; ...@@ -45,3 +45,4 @@ $cGreen:#006441;
45 $cGray:#bfbfbf; 45 $cGray:#bfbfbf;
46 $cDark:#dcdcdc; 46 $cDark:#dcdcdc;
47 $cLightBlack:#333333; 47 $cLightBlack:#333333;
48 $cFontGray: #4c4948;
......