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 63 additions and 51 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 {
bannerCandidateList: [],
// 导航菜单
// dataList: [
// {
// name: "平安“好e時”<br>自願醫保標準計劃",
// url: "",
// index: 0
// },
// {
// name: "「平安 ‧ 傳家福<br>分紅終身壽險計劃",
// url: "",
// index: 1
// },
// {
// name: "Ping An 'Pro Easy'<br>VHIS Standard Plan",
// url: "",
// index: 2
// },
// {
// name: "Ping An GenRich<br>Insurance Plan",
// url: "",
// index: 3
// },
// {
// name: "Ping An 'Pro Easy'<br>VHIS Standard Plan",
// url: "",
// index: 4
// }
// ],
curTab: {},
// 投保
......@@ -110,32 +83,38 @@ export default {
let result = {};
let mar = 0; // 两边缩进
let ind = 0; // 缩进简介
let wid = 240;
let dataList = this.dataList;
let len = dataList.length;
switch (len) {
case 1:
mar = 100;
ind = 0;
wid = 1200;
break;
case 2:
mar = 60;
ind = 120;
wid = 600;
break;
case 3:
mar = 30;
ind = 60;
wid = 400;
break;
case 4:
mar = 20;
ind = 40;
wid = 300;
break;
case 5:
mar = 15;
ind = 30;
wid = 240;
break;
default:
......@@ -143,19 +122,13 @@ export default {
}
result = {
mar,
ind
ind,
wid
};
// console.log("result:", result);
return result;
}
// tableTapOpt(){
// let result = {
// width:
// }
// },
},
},
methods: {
// fetchBanner() {
// return new Promise((resolve, reject) => {
// httpPost({
......@@ -262,7 +235,6 @@ export default {
sid: true
}).then((result) => {
this.dataList = [];
// console.log("11111");
result.forEach(element => {
let content = JSON.parse(element.content);
let item = {}
......@@ -279,6 +251,12 @@ export default {
}
this.dataList.push(item);
});
// 增加一个tap
// this.dataList.push(JSON.parse(JSON.stringify(this.dataList[0])));
// this.dataList.push(JSON.parse(JSON.stringify(this.dataList[0])));
// this.dataList.push(JSON.parse(JSON.stringify(this.dataList[0])));
this.dataList.forEach((element, idx) => {
element.index = idx;
element.describeList = element.describe.split("\n");
......
......@@ -104,23 +104,34 @@
.nav-tab {
min-height: 100px;
display: flex;
justify-content: center;
font-size: 22px;
text-align: center;
font-weight: bold;
color: $cOrange2;
max-width: 1200px;
// max-width: 1200px;
width: 100%;
margin: 0 auto;
&-item {
@extend .bb;
@extend .fcc;
border-right: solid 2px #ffffff;
cursor: pointer;
color: #ff6839;
color: $cOrange2;
background-color: #fff1ed;
padding: 12px 30px;
&:last-child {
border-right: none;
flex: 1;
justify-content: flex-start;
}
&:first-child {
flex: 1;
justify-content: flex-end;
}
}
......@@ -226,16 +237,16 @@
}
.table {
width: 1200px;
// width: 1200px;
width: 1062px;
// background-color: wheat;
margin: 56px auto 0;
&-tab {
position: relative;
width: 100%;
display: flex;
justify-content: center;
margin-left: 2px;
margin: 0 auto;
justify-content: space-between;
&-item {
background-image: url("~@/assets/images/index/index-tab.png");
......@@ -247,7 +258,17 @@
font-weight: bold;
cursor: pointer;
// filter: drop-shadow(2px 0px 0px rgba(0, 0, 0, 0.3));
filter: drop-shadow(2px 0px 0px rgba(0, 0, 0, 0.3));
margin-left: -120px;
&:first-child {
margin-left: 0;
}
&:last-child {
filter: none;
}
&-act {
background-image: url("~@/assets/images/index/index-tab-act.png");
......@@ -603,6 +624,12 @@
width: 100% !important;
border-right: none;
border-bottom: solid 2px #ffffff;
&:first-child{
justify-content: center;
}
&:last-child{
justify-content: center;
}
}
}
......@@ -639,6 +666,7 @@
.nav-tab {
font-size: $fontSize-M2;
&-item {
}
}
......
......@@ -35,11 +35,12 @@
<!-- <div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div>-->
</div>
<!-- 导航菜单切换 -->
<div class="gird-g nav-tab">
<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>
<!-- <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> -->
<!-- 导航菜单切换 -->
<div class="nav-tab">
<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>
<!-- <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> -->
</div>
<!-- 推荐 为什么选择平安人寿 -->
......@@ -82,11 +83,16 @@
<!-- tab表格 -->
<div class="table" :class="{'table-1':dataList.length<=1}">
<div class="table-tab">
<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="
<!-- <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="
'margin:0 -'+tableTapIndentation.mar+'px;width: calc(100% / ' + dataList.length + ');z-index:' + (dataList.length - index) + ''">{{ item.name }}</div>
</div> -->
<!-- <div class="linear" :style="'width: calc(100% - '+tableTapIndentation.ind+'px *' + (dataList.length - 1) + ')'"></div>
<div class="table-cont" :style="'width: calc(100% - '+tableTapIndentation.ind+'px *' + (dataList.length - 1) + ')'"> -->
<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="
';width: '+(index == 0 ? 'calc(100% / ' + dataList.length + ')' : tableTapIndentation.wid + 'px' ) +' ;z-index:' + (dataList.length - index) + ''">{{ item.name }}</div>
</div>
<div class="linear" :style="'width: calc(100% - '+tableTapIndentation.ind+'px *' + (dataList.length - 1) + ')'"></div>
<div class="table-cont" :style="'width: calc(100% - '+tableTapIndentation.ind+'px *' + (dataList.length - 1) + ')'">
<div class="linear"></div>
<div class="table-cont">
<div class="panel panel-left">
<div @click="onPrevTabHandler()" class="arrow arrow-left"></div>
......