Skip to content

dev / pingan-life-index-pro

Go to a project
Toggle navigation
Toggle navigation pinning
d94eb117 by qingxiao
Options

Merge remote-tracking branch 'origin/master'

2 parents 4f7062ac 3368a543
Inline Side-by-side
Showing 7 changed files with 62 additions and 50 deletions

14.2 KB | W: | H:

13.3 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

1.65 KB | W: | H:

796 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin
...@@ -39,33 +39,6 @@ export default { ...@@ -39,33 +39,6 @@ export default {
39 bannerCandidateList: [], 39 bannerCandidateList: [],
40 40
41 // 导航菜单 41 // 导航菜单
42 // dataList: [
43 // {
44 // name: "平安“好e時”<br>自願醫保標準計劃",
45 // url: "",
46 // index: 0
47 // },
48 // {
49 // name: "「平安 ‧ 傳家福<br>分紅終身壽險計劃",
50 // url: "",
51 // index: 1
52 // },
53 // {
54 // name: "Ping An 'Pro Easy'<br>VHIS Standard Plan",
55 // url: "",
56 // index: 2
57 // },
58 // {
59 // name: "Ping An GenRich<br>Insurance Plan",
60 // url: "",
61 // index: 3
62 // },
63 // {
64 // name: "Ping An 'Pro Easy'<br>VHIS Standard Plan",
65 // url: "",
66 // index: 4
67 // }
68 // ],
69 curTab: {}, 42 curTab: {},
70 43
71 // 投保 44 // 投保
...@@ -110,32 +83,38 @@ export default { ...@@ -110,32 +83,38 @@ export default {
110 let result = {}; 83 let result = {};
111 let mar = 0; // 两边缩进 84 let mar = 0; // 两边缩进
112 let ind = 0; // 缩进简介 85 let ind = 0; // 缩进简介
86 let wid = 240;
113 let dataList = this.dataList; 87 let dataList = this.dataList;
114 let len = dataList.length; 88 let len = dataList.length;
115 switch (len) { 89 switch (len) {
116 case 1: 90 case 1:
117 mar = 100; 91 mar = 100;
118 ind = 0; 92 ind = 0;
93 wid = 1200;
119 break; 94 break;
120 95
121 case 2: 96 case 2:
122 mar = 60; 97 mar = 60;
123 ind = 120; 98 ind = 120;
99 wid = 600;
124 break; 100 break;
125 101
126 case 3: 102 case 3:
127 mar = 30; 103 mar = 30;
128 ind = 60; 104 ind = 60;
105 wid = 400;
129 break; 106 break;
130 107
131 case 4: 108 case 4:
132 mar = 20; 109 mar = 20;
133 ind = 40; 110 ind = 40;
111 wid = 300;
134 break; 112 break;
135 113
136 case 5: 114 case 5:
137 mar = 15; 115 mar = 15;
138 ind = 30; 116 ind = 30;
117 wid = 240;
139 break; 118 break;
140 119
141 default: 120 default:
...@@ -143,19 +122,13 @@ export default { ...@@ -143,19 +122,13 @@ export default {
143 } 122 }
144 result = { 123 result = {
145 mar, 124 mar,
146 ind 125 ind,
126 wid
147 }; 127 };
148 // console.log("result:", result);
149 return result; 128 return result;
150 } 129 },
151 // tableTapOpt(){
152 // let result = {
153 // width:
154 // }
155 // },
156 }, 130 },
157 methods: { 131 methods: {
158
159 // fetchBanner() { 132 // fetchBanner() {
160 // return new Promise((resolve, reject) => { 133 // return new Promise((resolve, reject) => {
161 // httpPost({ 134 // httpPost({
...@@ -262,7 +235,6 @@ export default { ...@@ -262,7 +235,6 @@ export default {
262 sid: true 235 sid: true
263 }).then((result) => { 236 }).then((result) => {
264 this.dataList = []; 237 this.dataList = [];
265 // console.log("11111");
266 result.forEach(element => { 238 result.forEach(element => {
267 let content = JSON.parse(element.content); 239 let content = JSON.parse(element.content);
268 let item = {} 240 let item = {}
...@@ -279,6 +251,12 @@ export default { ...@@ -279,6 +251,12 @@ export default {
279 } 251 }
280 this.dataList.push(item); 252 this.dataList.push(item);
281 }); 253 });
254
255 // 增加一个tap
256 // this.dataList.push(JSON.parse(JSON.stringify(this.dataList[0])));
257 // this.dataList.push(JSON.parse(JSON.stringify(this.dataList[0])));
258 // this.dataList.push(JSON.parse(JSON.stringify(this.dataList[0])));
259
282 this.dataList.forEach((element, idx) => { 260 this.dataList.forEach((element, idx) => {
283 element.index = idx; 261 element.index = idx;
284 element.describeList = element.describe.split("\n"); 262 element.describeList = element.describe.split("\n");
......
...@@ -104,23 +104,34 @@ ...@@ -104,23 +104,34 @@
104 .nav-tab { 104 .nav-tab {
105 min-height: 100px; 105 min-height: 100px;
106 display: flex; 106 display: flex;
107 justify-content: center;
107 font-size: 22px; 108 font-size: 22px;
108 text-align: center; 109 text-align: center;
109 font-weight: bold; 110 font-weight: bold;
110 color: $cOrange2; 111 color: $cOrange2;
111 112
112 max-width: 1200px; 113 // max-width: 1200px;
114 width: 100%;
113 margin: 0 auto; 115 margin: 0 auto;
114 116
115 &-item { 117 &-item {
118 @extend .bb;
116 @extend .fcc; 119 @extend .fcc;
117 border-right: solid 2px #ffffff; 120 border-right: solid 2px #ffffff;
118 cursor: pointer; 121 cursor: pointer;
119 color: #ff6839; 122 color: $cOrange2;
120 background-color: #fff1ed; 123 background-color: #fff1ed;
124 padding: 12px 30px;
121 125
122 &:last-child { 126 &:last-child {
123 border-right: none; 127 border-right: none;
128 flex: 1;
129 justify-content: flex-start;
130 }
131
132 &:first-child {
133 flex: 1;
134 justify-content: flex-end;
124 } 135 }
125 } 136 }
126 137
...@@ -226,16 +237,16 @@ ...@@ -226,16 +237,16 @@
226 } 237 }
227 238
228 .table { 239 .table {
229 width: 1200px; 240 // width: 1200px;
241 width: 1062px;
242 // background-color: wheat;
230 243
231 margin: 56px auto 0; 244 margin: 56px auto 0;
232 &-tab { 245 &-tab {
233 position: relative; 246 position: relative;
234 width: 100%; 247 width: 100%;
235 display: flex; 248 display: flex;
236 justify-content: center; 249 justify-content: space-between;
237 margin-left: 2px;
238 margin: 0 auto;
239 &-item { 250 &-item {
240 background-image: url("~@/assets/images/index/index-tab.png"); 251 background-image: url("~@/assets/images/index/index-tab.png");
241 252
...@@ -247,7 +258,17 @@ ...@@ -247,7 +258,17 @@
247 font-weight: bold; 258 font-weight: bold;
248 cursor: pointer; 259 cursor: pointer;
249 260
250 // filter: drop-shadow(2px 0px 0px rgba(0, 0, 0, 0.3)); 261 filter: drop-shadow(2px 0px 0px rgba(0, 0, 0, 0.3));
262
263 margin-left: -120px;
264
265 &:first-child {
266 margin-left: 0;
267 }
268
269 &:last-child {
270 filter: none;
271 }
251 272
252 &-act { 273 &-act {
253 background-image: url("~@/assets/images/index/index-tab-act.png"); 274 background-image: url("~@/assets/images/index/index-tab-act.png");
...@@ -603,6 +624,12 @@ ...@@ -603,6 +624,12 @@
603 width: 100% !important; 624 width: 100% !important;
604 border-right: none; 625 border-right: none;
605 border-bottom: solid 2px #ffffff; 626 border-bottom: solid 2px #ffffff;
627 &:first-child{
628 justify-content: center;
629 }
630 &:last-child{
631 justify-content: center;
632 }
606 } 633 }
607 } 634 }
608 635
...@@ -639,6 +666,7 @@ ...@@ -639,6 +666,7 @@
639 .nav-tab { 666 .nav-tab {
640 font-size: $fontSize-M2; 667 font-size: $fontSize-M2;
641 &-item { 668 &-item {
669
642 } 670 }
643 } 671 }
644 672
......
...@@ -35,11 +35,12 @@ ...@@ -35,11 +35,12 @@
35 <!-- <div class="swiper-button-prev" slot="button-prev"></div> 35 <!-- <div class="swiper-button-prev" slot="button-prev"></div>
36 <div class="swiper-button-next" slot="button-next"></div>--> 36 <div class="swiper-button-next" slot="button-next"></div>-->
37 </div> 37 </div>
38
38 <!-- 导航菜单切换 --> 39 <!-- 导航菜单切换 -->
40 <div class="nav-tab">
41 <div class="nav-tab-item" :class="{ 'nav-tab-item-act': item.index == curTab.index }" :style="'width: calc(1200px / ' + dataList.length + ');'" @click="onTabHandler(item)" v-html="item.tabName" v-for="item in dataList" :key="item.id">{{ item.tabName }}</div>
42 <!-- <div class="nav-tab-item" :class="{ 'nav-tab-item-act': item.index == curTab.index }" :style="'width: calc(100% / ' + dataList.length + '); '+ (index == dataList.length-1 ?'':'width:50%;') +' '" @click="onTabHandler(item)" v-html="item.tabName" v-for="item in dataList" :key="item.id">{{ item.tabName }}</div> -->
39 43
40 <div class="gird-g nav-tab">
41 <div class="nav-tab-item" :class="{ 'nav-tab-item-act': item.index == curTab.index }" :style="'width: calc(100% / ' + dataList.length + ');'" @click="onTabHandler(item)" v-html="item.tabName" v-for="item in dataList" :key="item.id">{{ item.tabName }}</div>
42 <!-- <div class="nav-tab-item pure-u-1 pure-u-md-1-5" :class="{ 'nav-tab-item-act': item.index == curTab.index }" @click="onTabHandler(item)" v-html="item.tabName" v-for="item in dataList" :key="item.id" >{{ item.tabName }}</div> -->
43 </div> 44 </div>
44 45
45 <!-- 推荐 为什么选择平安人寿 --> 46 <!-- 推荐 为什么选择平安人寿 -->
...@@ -82,11 +83,16 @@ ...@@ -82,11 +83,16 @@
82 <!-- tab表格 --> 83 <!-- tab表格 -->
83 <div class="table" :class="{'table-1':dataList.length<=1}"> 84 <div class="table" :class="{'table-1':dataList.length<=1}">
84 <div class="table-tab"> 85 <div class="table-tab">
85 <div class="table-tab-item" @click="onTabHandler(item)" v-html="item.tabName" v-for="(item, index) in dataList" :key="item.id" :class="{ 'table-tab-item-act': item.index == curTab.index }" :style=" 86 <!-- <div class="table-tab-item" @click="onTabHandler(item)" v-html="item.tabName" v-for="(item, index) in dataList" :key="item.id" :class="{ 'table-tab-item-act': item.index == curTab.index }" :style="
86 'margin:0 -'+tableTapIndentation.mar+'px;width: calc(100% / ' + dataList.length + ');z-index:' + (dataList.length - index) + ''">{{ item.name }}</div> 87 'margin:0 -'+tableTapIndentation.mar+'px;width: calc(100% / ' + dataList.length + ');z-index:' + (dataList.length - index) + ''">{{ item.name }}</div>
88 </div> -->
89 <!-- <div class="linear" :style="'width: calc(100% - '+tableTapIndentation.ind+'px *' + (dataList.length - 1) + ')'"></div>
90 <div class="table-cont" :style="'width: calc(100% - '+tableTapIndentation.ind+'px *' + (dataList.length - 1) + ')'"> -->
91 <div class="table-tab-item" @click="onTabHandler(item)" v-html="item.tabName" v-for="(item, index) in dataList" :key="item.id" :class="{ 'table-tab-item-act': item.index == curTab.index }" :style="
92 ';width: '+(index == 0 ? 'calc(100% / ' + dataList.length + ')' : tableTapIndentation.wid + 'px' ) +' ;z-index:' + (dataList.length - index) + ''">{{ item.name }}</div>
87 </div> 93 </div>
88 <div class="linear" :style="'width: calc(100% - '+tableTapIndentation.ind+'px *' + (dataList.length - 1) + ')'"></div> 94 <div class="linear"></div>
89 <div class="table-cont" :style="'width: calc(100% - '+tableTapIndentation.ind+'px *' + (dataList.length - 1) + ')'"> 95 <div class="table-cont">
90 96
91 <div class="panel panel-left"> 97 <div class="panel panel-left">
92 <div @click="onPrevTabHandler()" class="arrow arrow-left"></div> 98 <div @click="onPrevTabHandler()" class="arrow arrow-left"></div>
......