Skip to content

dev / pingan-life-index-pro

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

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

1 parent 0c648f83
Inline Side-by-side
Showing 22 changed files with 208 additions and 321 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 1
2 <template> 2 <template>
3 <div class="payment"> 3 <div class="payment-container">
4 <div class="payment-nav"> 4 <div class="payment">
5 <div @mouseover="onOverHandler(index)" class="payment-nav-item" :class="{'active' : index == curIndex}" v-for="(item, index) in dataList" :key="item.id"> 5 <div class="payment-nav">
6 <div class="payment-nav-item-icon"> 6 <div @mouseover="onOverHandler(index)" class="payment-nav-item" :class="{'active' : index == curIndex}" v-for="(item, index) in dataList" :key="item.id">
7 <img :src="require('@assets/images/payment-type/icon-payment-'+(index+1)+(index == curIndex?'-act':'')+'.png')"> 7 <div class="payment-nav-item-icon">
8 <img :src="require('@assets/images/payment-type/icon-payment-'+(index+1)+(index == curIndex?'-act':'')+'.png')">
9 </div>
10 {{ item.tit }}
8 </div> 11 </div>
9 {{ item.tit }}
10 </div> 12 </div>
11 </div> 13 <div class="payment-line"></div>
12 <div class="payment-line"></div> 14
13 15 <div class="payment-cont">
14 <div class="payment-cont"> 16
15 17 <template v-if="locale =='zh'">
16 <template v-if="locale =='zh'"> 18 <!-- 简体 -->
17 <!-- 简体 --> 19 <div v-if="curIndex == 0" class="payment-cont-item">
18 <div v-if="curIndex == 0" class="payment-cont-item"> 20 <ul>
19 <ul> 21 <li>现金：缴付保费的上限为每张保单15,000美元正或等值港元。</li>
20 <li>现金：缴付保费的上限为每张保单15,000美元正或等值港元。</li> 22 <li>支票：请以划线支票付款，抬头写上「中国平安人寿保险股份有限公司香港分公司」并于支票背面写上缴费通知书右上方的「收款单编号」</li>
21 <li>支票：请以划线支票付款，抬头写上「中国平安人寿保险股份有限公司香港分公司」并于支票背面写上缴费通知书右上方的「收款单编号」</li> 23 <li>信用卡：您可透过信用卡以港元缴费，最高缴款额须按您的指定银行而定。</li>
22 <li>信用卡：您可透过信用卡以港元缴费，最高缴款额须按您的指定银行而定。</li> 24 <li>易办事：您可透过由「易办事」会员银行发行的提款卡及具备提款功能之信用卡透过易办事以港元缴付费用，最高缴款额须按您的指定银行而定。</li>
23 <li>易办事：您可透过由「易办事」会员银行发行的提款卡及具备提款功能之信用卡透过易办事以港元缴付费用，最高缴款额须按您的指定银行而定。</li> 25 </ul>
24 </ul> 26 客户服务中心地址：香港尖沙嘴港威永金融大楼
25 客户服务中心地址：香港尖沙嘴港威永金融大楼 27 <br>服务时间：星期一至五上午9时至下午6时正
26 <br>服务时间：星期一至五上午9时至下午6时正 28 </div>
27 </div> 29
28 30 <div v-else-if="curIndex == 1" class="payment-cont-item">
29 <div v-else-if="curIndex == 1" class="payment-cont-item"> 31 您可通过本港银行提供的「网上缴费服务」以港元信用卡/银行账户缴交保费。详情请联络您的银行。
30 您可通过本港银行提供的「网上缴费服务」以港元信用卡/银行账户缴交保费。详情请联络您的银行。 32 <ul>
31 <ul> 33 <li>通过「本港银行港元信用卡」进行网上缴费：
32 <li>通过「本港银行港元信用卡」进行网上缴费： 34 <br>缴费商户 : 中国平安人寿保险股份有限公司香港分公司
33 <br>缴费商户 : 中国平安人寿保险股份有限公司香港分公司 35 <br>提款账户: 请选择「港元信用卡」
34 <br>提款账户: 请选择「港元信用卡」 36 <br>账单号码: 缴费通知书上之「账单号码」
35 <br>账单号码: 缴费通知书上之「账单号码」 37 </li>
36 </li> 38 <li>通过「本港银行账户」进行网上缴费：
37 <li>通过「本港银行账户」进行网上缴费： 39 <br>缴费商户: 中国平安人寿保险股份有限公司香港分公司
38 <br>缴费商户: 中国平安人寿保险股份有限公司香港分公司 40 <br>提款账户 :请选择往来或储蓄账户
39 <br>提款账户 :请选择往来或储蓄账户 41 <br>账单号码: 缴费通知书上之「收款单编号」
40 <br>账单号码: 缴费通知书上之「收款单编号」 42 <br>账单类别: 11 - 缴付港元，12 - 缴付美元，13 - 缴付人民币
41 <br>账单类别: 11 - 缴付港元，12 - 缴付美元，13 - 缴付人民币 43 </li>
42 </li> 44 </ul>
43 </ul> 45 </div>
44 </div> 46
45 47 <div v-else-if="curIndex == 2" class="payment-cont-item">
46 <div v-else-if="curIndex == 2" class="payment-cont-item"> 48 您可通过本港银行把保费电汇至以下银行户口。
47 您可通过本港银行把保费电汇至以下银行户口。 49 <ul>
48 <ul> 50 <li>收款银行：**银行</li>
49 <li>收款银行：**银行</li> 51 <li>银行地址：香港***</li>
50 <li>银行地址：香港***</li> 52 <li>收款人名字：中国平安人寿保险股份有限公司香港分公司</li>
51 <li>收款人名字：中国平安人寿保险股份有限公司香港分公司</li> 53 <li>银行代码：***</li>
52 <li>银行代码：***</li> 54 <li>收款人账号：***-******</li>
53 <li>收款人账号：***-******</li> 55 <li>代号：******</li>
54 <li>代号：******</li> 56 </ul>
55 </ul> 57 </div>
56 </div> 58
57 59 <div v-else-if="curIndex == 3" class="payment-cont-item">
58 <div v-else-if="curIndex == 3" class="payment-cont-item"> 60 您可通过24小时「银通」自动柜员机从您的香港银行账户转账付款。
59 您可通过24小时「银通」自动柜员机从您的香港银行账户转账付款。 61 <ul>
60 <ul> 62 <li>请选择服务:「缴费」>「输入商户号码」</li>
61 <li>请选择服务:「缴费」>「输入商户号码」</li> 63 <li>商户编号 : ****</li>
62 <li>商户编号 : ****</li> 64 <li>账单类别 : 01 - 新单保费 ，02 - 续期保费及征费，03 - 偿还个人保单贷款</li>
63 <li>账单类别 : 01 - 新单保费 ，02 - 续期保费及征费，03 - 偿还个人保单贷款</li> 65 <li>账单号码 : 缴费通知书右上方之「收款单编号」</li>
64 <li>账单号码 : 缴费通知书右上方之「收款单编号」</li> 66 </ul>
65 </ul> 67 </div>
66 </div> 68
67 69 <div v-else-if="curIndex == 4" class="payment-cont-item">
68 <div v-else-if="curIndex == 4" class="payment-cont-item"> 70 <ul>
69 <ul> 71 <li>缴费灵网上服务: 请浏览www.ppshk.com</li>
70 <li>缴费灵网上服务: 请浏览www.ppshk.com</li> 72 <li>缴费灵电话服务: 请致电18033 (广东话) 或18031 (英语)</li>
71 <li>缴费灵电话服务: 请致电18033 (广东话) 或18031 (英语)</li> 73 <li>商户编号 : ****</li>
72 <li>商户编号 : ****</li> 74 <li>账单类别 : 01 - 保费及保费征费/偿还保单贷款</li>
73 <li>账单类别 : 01 - 保费及保费征费/偿还保单贷款</li> 75 <li>账单号码:缴费通知书右上方之「账单号码」</li>
74 <li>账单号码:缴费通知书右上方之「账单号码」</li> 76 </ul>
75 </ul> 77 </div>
76 </div> 78
77 79 <div v-else-if="curIndex == 5" class="payment-cont-item">
78 <div v-else-if="curIndex == 5" class="payment-cont-item"> 80 请携同缴费通知书到香港任何一间邮政局以现金、支票及易办事缴费。
79 请携同缴费通知书到香港任何一间邮政局以现金、支票及易办事缴费。 81 <ul>
80 <ul> 82 <li>每笔现金交易金额的上限为港元80,000。</li>
81 <li>每笔现金交易金额的上限为港元80,000。</li> 83 <li>易办事交易上限为港元50,000.00。</li>
82 <li>易办事交易上限为港元50,000.00。</li> 84 <li>支票交易无上限。</li>
83 <li>支票交易无上限。</li> 85 <li>支票的截数日期为星期一至五下午3时及星期六上午11时，现金/ 易办事的截数日期为星期一至六下午6时，星期日及公众假期会于下一个工作天处理，请预留最少三个工作天处理有关付款。</li>
84 <li>支票的截数日期为星期一至五下午3时及星期六上午11时，现金/ 易办事的截数日期为星期一至六下午6时，星期日及公众假期会于下一个工作天处理，请预留最少三个工作天处理有关付款。</li> 86 </ul>
85 </ul> 87 </div>
86 </div> 88 </template>
87 </template> 89
88 90 <template v-else>
89 <template v-else> 91 <!-- 繁体-->
90 <!-- 繁体--> 92 <div v-if="curIndex == 0" class="payment-cont-item">
91 <div v-if="curIndex == 0" class="payment-cont-item"> 93 <ul>
92 <ul> 94 <li>現金：繳付保費的上限為每張保單15,000美元正或等值港元。</li>
93 <li>現金：繳付保費的上限為每張保單15,000美元正或等值港元。</li> 95 <li>支票：請以劃線支票付款，擡頭寫上「中國平安人壽保險股份有限公司香港分公司」並於支票背面寫上繳費通知書右上方的「收款單編號」</li>
94 <li>支票：請以劃線支票付款，擡頭寫上「中國平安人壽保險股份有限公司香港分公司」並於支票背面寫上繳費通知書右上方的「收款單編號」</li> 96 <li>信用卡：您可透過信用卡以港元繳費，最高繳款額須按您的指定銀行而定。</li>
95 <li>信用卡：您可透過信用卡以港元繳費，最高繳款額須按您的指定銀行而定。</li> 97 <li>易辦事：您可透過由「易辦事」會員銀行發行的提款卡及具備提款功能之信用卡透過易辦事以港元繳付費用，最高繳款額須按您的指定銀行而定。</li>
96 <li>易辦事：您可透過由「易辦事」會員銀行發行的提款卡及具備提款功能之信用卡透過易辦事以港元繳付費用，最高繳款額須按您的指定銀行而定。</li> 98 </ul>
97 </ul> 99 客戶服務中心地址：香港尖沙嘴港威永金融大樓
98 客戶服務中心地址：香港尖沙嘴港威永金融大樓 100 <br>服務時間：星期壹至五上午9時至下午6時正
99 <br>服務時間：星期壹至五上午9時至下午6時正 101 </div>
100 </div> 102
101 103 <div v-else-if="curIndex == 1" class="payment-cont-item">
102 <div v-else-if="curIndex == 1" class="payment-cont-item"> 104 您可通過本港銀行提供的「網上繳費服務」以港元信用卡/銀行賬戶繳交保費。詳情請聯絡您的銀行。
103 您可通過本港銀行提供的「網上繳費服務」以港元信用卡/銀行賬戶繳交保費。詳情請聯絡您的銀行。 105 <ul>
104 <ul> 106 <li>通過「本港銀行港元信用卡」進行網上繳費：
105 <li>通過「本港銀行港元信用卡」進行網上繳費： 107 <br>繳費商戶 : 中國平安人壽保險股份有限公司香港分公司
106 <br>繳費商戶 : 中國平安人壽保險股份有限公司香港分公司 108 <br>提款賬戶: 請選擇「港元信用卡」
107 <br>提款賬戶: 請選擇「港元信用卡」 109 <br>賬單號碼: 繳費通知書上之「賬單號碼」
108 <br>賬單號碼: 繳費通知書上之「賬單號碼」 110 </li>
109 </li> 111 <li>通過「本港銀行賬戶」進行網上繳費：
110 <li>通過「本港銀行賬戶」進行網上繳費： 112 <br>繳費商戶: 中國平安人壽保險股份有限公司香港分公司
111 <br>繳費商戶: 中國平安人壽保險股份有限公司香港分公司 113 <br>提款賬戶 :請選擇往來或儲蓄賬戶
112 <br>提款賬戶 :請選擇往來或儲蓄賬戶 114 <br>賬單號碼: 繳費通知書上之「收款單編號」
113 <br>賬單號碼: 繳費通知書上之「收款單編號」 115 <br>賬單類別: 11 - 繳付港元，12 - 繳付美元，13 - 繳付人民幣
114 <br>賬單類別: 11 - 繳付港元，12 - 繳付美元，13 - 繳付人民幣 116 </li>
115 </li> 117 </ul>
116 </ul> 118 </div>
117 </div> 119
118 120 <div v-else-if="curIndex == 2" class="payment-cont-item">
119 <div v-else-if="curIndex == 2" class="payment-cont-item"> 121 您可通過本港銀行把保費電匯至以下銀行戶口。
120 您可通過本港銀行把保費電匯至以下銀行戶口。 122 <ul>
121 <ul> 123 <li>收款銀行：**銀行</li>
122 <li>收款銀行：**銀行</li> 124 <li>銀行地址：香港***</li>
123 <li>銀行地址：香港***</li> 125 <li>收款人名字：中國平安人壽保險股份有限公司香港分公司</li>
124 <li>收款人名字：中國平安人壽保險股份有限公司香港分公司</li> 126 <li>銀行代碼：***</li>
125 <li>銀行代碼：***</li> 127 <li>收款人賬號：***-******</li>
126 <li>收款人賬號：***-******</li> 128 </ul>
127 </ul> 129
128 130 </div>
129 </div> 131
130 132 <div v-else-if="curIndex == 3" class="payment-cont-item">
131 <div v-else-if="curIndex == 3" class="payment-cont-item"> 133 您可通過24小時「銀通」自動櫃員機從您的香港銀行賬戶轉賬付款。
132 您可通過24小時「銀通」自動櫃員機從您的香港銀行賬戶轉賬付款。 134 <ul>
133 <ul> 135 <li>請選擇服務:「繳費」>「輸入商戶號碼」</li>
134 <li>請選擇服務:「繳費」>「輸入商戶號碼」</li> 136 <li>商戶編號 : ****</li>
135 <li>商戶編號 : ****</li> 137 <li>賬單類別 : 01 - 新單保費 ，02 - 續期保費及征費，03 - 償還個人保單貸款</li>
136 <li>賬單類別 : 01 - 新單保費 ，02 - 續期保費及征費，03 - 償還個人保單貸款</li> 138 <li>賬單號碼 : 繳費通知書右上方之「收款單編號</li>
137 <li>賬單號碼 : 繳費通知書右上方之「收款單編號</li> 139 </ul>
138 </ul> 140
139 141 </div>
140 </div> 142
141 143 <div v-else-if="curIndex == 4" class="payment-cont-item">
142 <div v-else-if="curIndex == 4" class="payment-cont-item"> 144 <ul>
143 <ul> 145 <li>繳費靈網上服務: 請瀏覽www.ppshk.com</li>
144 <li>繳費靈網上服務: 請瀏覽www.ppshk.com</li> 146 <li>繳費靈電話服務: 請致電18033 (廣東話) 或18031 (英語)</li>
145 <li>繳費靈電話服務: 請致電18033 (廣東話) 或18031 (英語)</li> 147 <li>商戶編號 : ****</li>
146 <li>商戶編號 : ****</li> 148 <li>賬單類別 : 01 - 保費及保費征費/償還保單貸款</li>
147 <li>賬單類別 : 01 - 保費及保費征費/償還保單貸款</li> 149 <li>賬單號碼:繳費通知書右上方之「賬單號碼」</li>
148 <li>賬單號碼:繳費通知書右上方之「賬單號碼」</li> 150 </ul>
149 </ul> 151 </div>
150 </div> 152
151 153 <div v-else-if="curIndex == 5" class="payment-cont-item">
152 <div v-else-if="curIndex == 5" class="payment-cont-item"> 154 請攜同繳費通知書到香港任何壹間郵政局以現金、支票及易辦事繳費。
153 請攜同繳費通知書到香港任何壹間郵政局以現金、支票及易辦事繳費。 155 <ul>
154 <ul> 156 <li>每筆現金交易金額的上限為港元80,000。</li>
155 <li>每筆現金交易金額的上限為港元80,000。</li> 157 <li>易辦事交易上限為港元50,000.00。</li>
156 <li>易辦事交易上限為港元50,000.00。</li> 158 <li>支票交易無上限。</li>
157 <li>支票交易無上限。</li> 159 <li>支票的截數日期為星期壹至五下午3時及星期六上午11時，現金/ 易辦事的截數日期為星期壹至六下午6時，星期日及公眾假期會於下壹個工作天處理， 請預留最少三個工作天處理有關付款。</li>
158 <li>支票的截數日期為星期壹至五下午3時及星期六上午11時，現金/ 易辦事的截數日期為星期壹至六下午6時，星期日及公眾假期會於下壹個工作天處理， 請預留最少三個工作天處理有關付款。</li> 160 </ul>
159 </ul> 161
160 162 </div>
161 </div> 163 </template>
162 </template>
163 164
165 </div>
164 </div> 166 </div>
165 </div> 167 </div>
166 </template> 168 </template>
......
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;
......