Skip to content

S
SuperMan
Commit f198d7ea authored by 沈良进's avatar 沈良进
Browse files
Options

页面修改

parent 3666a475
Hide whitespace changes
Inline Side-by-side
Showing with 162 additions and 139 deletions
src/components/LeaveGroupDownload/travelDays.vue
View file @ f198d7ea
...@@ -9,116 +9,135 @@ ...@@ -9,116 +9,135 @@
</div> </div>
</div> </div>
</div> --> </div> -->
<div class="UpgradedVersion-box UpgradedVersion-homebj relative"
v-for="(item,index) in tripList">
<div class="absolute z-index1 column" style="left: 0;right: 0; top: 0;bottom: 0;"> <div class="UpgradedVersion-box UpgradedVersion-homebj relative" v-for="(item,index) in tripList">
<Header :TripColor="dataAll.tripColor" :orderMsg="orderMsg"></Header> <div class="absolute z-index1 column" style="left: 0;right: 0; top: 0;bottom: 0;">
<div class="travelDaysTitlle row-aic"> <Header :TripColor="dataAll.tripColor" :orderMsg="orderMsg"></Header>
<div class="travelDaysTitlle-left"> <div class="travelDaysTitlle row-aic">
<div class="travelDaysTitlle-left-text column-ajc"> <div class="travelDaysTitlle-left">
<div class="travelDaysTitlle-left-textOne"> <div class="travelDaysTitlle-left-text column-ajc">
<span>{{item.dayNum>9?item.dayNum:'0'+item.dayNum}}</span> <div class="travelDaysTitlle-left-textOne">
</div> <span>{{item.dayNum>9?item.dayNum:'0'+item.dayNum}}</span>
<div class="travelDaysTitlle-left-textTwo"> </div>
<span>{{day}}</span> <div class="travelDaysTitlle-left-textTwo">
<span>{{day}}</span>
</div>
</div> </div>
</div> </div>
</div> <div class="travelDaysTitlle-right">
<div class="travelDaysTitlle-right"> <div class="travelDaysTitlle-right-text row-aic"
<div class="travelDaysTitlle-right-text row-aic" :style="{'background': dataAll.tripColor,'font-size': getFontSize(item.title),'color':textColor}">
:style="{'background': dataAll.tripColor,'font-size': getFontSize(item.title),'color':textColor}"> {{item.title}}
{{item.title}} </div>
</div> </div>
</div> </div>
</div> <div :id="'travelDaysMasterMap_'+index" class="travelDaysMasterMap relative">
<div :id="'travelDaysMasterMap_'+index" class="travelDaysMasterMap relative">
<div class="travelDaysMasterMap-one" :style="{'color':'#fff'}"> <div class="travelDaysMasterMap-one" :style="{'color':'#fff'}">
<div class="travelDaysMasterMap-oneImg relative bjF6" :id="'travelDaysImg_one'+index"> <div class="travelDaysMasterMap-oneImg relative bjF6" :id="'travelDaysImg_one'+index">
<img class="absolute" :src="item.details[0].img?item.details[0].img:'https://imgfile.oytour.com/Static/NewTripFeature/acquiesce.jpg'"> <img class="absolute"
:src="item.details[0].img?item.details[0].img:'https://imgfile.oytour.com/Upload/DefalutImage/DMC/defaultairline.png'">
</div> </div>
<div class="travelDaysMasterMap-text absolute z-index2">{{item.details[0].title}}</div> <div class="travelDaysMasterMap-text absolute z-index2">{{item.details[0].title}}</div>
</div> </div>
<div class="travelDaysMasterMap-two absolute z-index2"> <div class="travelDaysMasterMap-two absolute z-index2">
<template v-if="item.imgMapId=='travelDaysMasterMap_'+index&&item.showImgOne"> <template v-if="item.imgMapId=='travelDaysMasterMap_'+index&&item.showImgOne">
<div class="travelDaysMasterMap-twoImg relative bjF6" <div class="travelDaysMasterMap-twoImg relative bjF6" :style="{'color':'#fff'}"
:style="{'color':'#fff'}" :id="'travelDaysImg_two'+index"
:id="'travelDaysImg_two'+index" v-if="(item.details&&item.details.length>1&&item.details[1].img)||(item.jiu2&&item.jiu2.length>0&&item.jiu2[0].url)">
v-if="(item.details&&item.details.length>1&&item.details[1].img)||(item.jiu2&&item.jiu2.length>0&&item.jiu2[0].url)"> <template v-if="item.details.length>1&&item.details[1].img">
<template v-if="item.details.length>1&&item.details[1].img"> <img class=""
<img class="" :src="item.details[1].img?item.details[1].img:'https://imgfile.oytour.com/Static/NewTripFeature/acquiesce.jpg'"> :src="item.details[1].img?item.details[1].img:'https://imgfile.oytour.com/Static/NewTripFeature/acquiesce.jpg'">
<div class="travelDaysMasterMap-text textTwo absolute z-index2"> <div class="travelDaysMasterMap-text textTwo absolute z-index2">
【{{item.details[1].title}}】</div> 【{{item.details[1].title}}】</div>
</template> </template>
<template v-else> <template v-else>
<template v-for="(jiudian,j) in item.jiu2"> <template v-for="(jiudian,j) in item.jiu2">
<template v-if="jiudian.url&&j==0"> <template v-if="jiudian.url&&j==0">
<img class="" v-if="jiudian.url" :src="jiudian.url?jiudian.url:'https://imgfile.oytour.com/Static/NewTripFeature/acquiesce.jpg'"> <img class="" v-if="jiudian.url"
<div class="travelDaysMasterMap-text textTwo absolute z-index2"> :src="jiudian.url?jiudian.url:'https://imgfile.oytour.com/Static/NewTripFeature/acquiesce.jpg'">
【{{jiudian.newTitle}}】</div> <div class="travelDaysMasterMap-text textTwo absolute z-index2">
【{{jiudian.newTitle}}】</div>
</template>
</template> </template>
</template> </template>
</template> </div>
</div>
</template> </template>
<template v-if="item.imgMapId=='travelDaysMasterMap_'+index&&item.showImgTwo"> <template v-if="item.imgMapId=='travelDaysMasterMap_'+index&&item.showImgTwo">
<div class="travelDaysMasterMap-twoImg relative bjF6" style="margin-top: 47px;" <div class="travelDaysMasterMap-twoImg relative bjF6" style="margin-top: 47px;" :style="{'color':'#fff'}"
:style="{'color':'#fff'}" :id="'travelDaysImg_three'+index"
:id="'travelDaysImg_three'+index" v-if="(item.details&&item.details.length>2&&item.details[2].img)||(item.jiu2&&item.jiu2.length>1&&item.jiu2[0].url)">
v-if="(item.details&&item.details.length>2&&item.details[2].img)||(item.jiu2&&item.jiu2.length>1&&item.jiu2[0].url)"> <template v-if="item.details.length>2&&item.details[2].img">
<template v-if="item.details.length>2&&item.details[2].img"> <img class=""
<img class="" :src="item.details[2].img?item.details[2].img:'https://imgfile.oytour.com/Static/NewTripFeature/acquiesce.jpg'"> :src="item.details[2].img?item.details[2].img:'https://imgfile.oytour.com/Static/NewTripFeature/acquiesce.jpg'">
<div class="travelDaysMasterMap-text textTwo absolute z-index2">
【{{item.details[2].title}}】</div>
</template>
<template v-else>
<template v-for="(jiudian,j) in item.jiu2">
<template v-if="jiudian.url&&j==1">
<img class="" v-if="jiudian.url" :src="jiudian.url?item.details[2].img:'https://imgfile.oytour.com/Static/NewTripFeature/acquiesce.jpg'">
<div class="travelDaysMasterMap-text textTwo absolute z-index2"> <div class="travelDaysMasterMap-text textTwo absolute z-index2">
【{{jiudian.name}}】</div> 【{{item.details[2].title}}】</div>
</template> </template>
</template>
</template> <template v-else>
</div> <template v-for="(jiudian,j) in item.jiu2">
<template v-if="jiudian.url&&j==1">
<img class="" v-if="jiudian.url"
:src="jiudian.url?item.details[2].img:'https://imgfile.oytour.com/Static/NewTripFeature/acquiesce.jpg'">
<div class="travelDaysMasterMap-text textTwo absolute z-index2">
【{{jiudian.name}}】</div>
</template>
</template>
</template>
</div>
</template> </template>
</div> </div>
</div>
<div class="travelDaysContent column">
<div class="travelDaysContent-text" v-for="(jindian,j) in item.details">
<span>【{{jindian.title}}】</span>
{{jindian.content}}
</div> </div>
</div>
<div class="travelDaysdetails absolute"> <template v-if="item.details&&item.details.length>0">
<div class="travelDaysdetailsBJ row" <div class="travelDaysContent column">
:style="{'background':backgroundColor}"> <div class="travelDaysContent-text" v-for="(jindian,j) in item.details">
<div class="travelDaysdetails-text row"> <span>【{{jindian.title}}】</span>
<span>早餐：</span> {{jindian.content}}
<div><p>{{item.can.breakfirst}}</p></div> </div>
</div>
<div class="travelDaysdetails-text row">
<span>午餐：</span>
<div><p>{{item.can.lanuch}}</p></div>
</div> </div>
<div class="travelDaysdetails-text row"> </template>
<span>晚餐：</span> <template v-else>
<div><p>{{item.can.dinner}}</p></div> <div class="travelDaysContent column">
<div class="travelDaysContent-text">
<span>【{{jindian.title}}】</span>
{{jindian.content}}
</div>
</div> </div>
<div class="travelDaysdetails-text row"> </template>
<span>住宿：</span>
<div>
<p v-for="(j,i) in item.jiu2">{{j.name}}</p> <div class="travelDaysdetails absolute">
<div class="travelDaysdetailsBJ row" :style="{'background':backgroundColor}">
<div class="travelDaysdetails-text row">
<span>早餐：</span>
<div>
<p>{{item.can.breakfirst}}</p>
</div>
</div>
<div class="travelDaysdetails-text row">
<span>午餐：</span>
<div>
<p>{{item.can.lanuch}}</p>
</div>
</div>
<div class="travelDaysdetails-text row">
<span>晚餐：</span>
<div>
<p>{{item.can.dinner}}</p>
</div>
</div>
<div class="travelDaysdetails-text row">
<span>住宿：</span>
<div>
<p v-for="(j,i) in item.jiu2">{{j.name}}</p>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> <!-- otherJourney-footer -->
<!-- otherJourney-footer --> <div>
<div> <div class="otherJourney-introduceFooter absolute z-index1 row-aic" :style="{'background':''}">
<div class="otherJourney-introduceFooter absolute z-index1 row-aic"
:style="{'background':''}">
<div class="introduceFooterBJ introduceFooterOne" :style="{'background':dataAll.tripColor}">&nbsp;</div> <div class="introduceFooterBJ introduceFooterOne" :style="{'background':dataAll.tripColor}">&nbsp;</div>
<div class="introduceFooterBJ introduceFootertTwo" :style="{'background':dataAll.tripColor}">&nbsp;</div> <div class="introduceFooterBJ introduceFootertTwo" :style="{'background':dataAll.tripColor}">&nbsp;</div>
<div class="introduceFooter-text row-aic"> <div class="introduceFooter-text row-aic">
...@@ -127,9 +146,9 @@ ...@@ -127,9 +146,9 @@
</div> </div>
<div class="introduceFooterBJ introduceFootertThree" :style="{'background':dataAll.tripColor}">&nbsp;</div> <div class="introduceFooterBJ introduceFootertThree" :style="{'background':dataAll.tripColor}">&nbsp;</div>
<div class="introduceFooterBJ introduceFootertFour" :style="{'background':dataAll.tripColor}">&nbsp;</div> <div class="introduceFooterBJ introduceFootertFour" :style="{'background':dataAll.tripColor}">&nbsp;</div>
</div>
</div> </div>
</div> </div>
</div>
</div> </div>
</div> </div>
...@@ -142,7 +161,7 @@ ...@@ -142,7 +161,7 @@
components: { components: {
Header Header
}, },
props: ['dataAll','tripList','orderMsg','orderTripdiff','vshowD','vshowK'], props: ['dataAll', 'tripList', 'orderMsg', 'orderTripdiff', 'vshowD', 'vshowK'],
data() { data() {
return { return {
title: '北京-马德里-塞戈维亚-萨拉曼卡-贝尼多姆/小镇-瓦伦西亚-巴塞罗那（约 253km，约 3h）北京-马德里-塞戈维亚-萨拉曼卡-贝尼多姆/小镇-瓦伦西亚-巴塞罗那（约 253km，约 3h）', title: '北京-马德里-塞戈维亚-萨拉曼卡-贝尼多姆/小镇-瓦伦西亚-巴塞罗那（约 253km，约 3h）北京-马德里-塞戈维亚-萨拉曼卡-贝尼多姆/小镇-瓦伦西亚-巴塞罗那（约 253km，约 3h）',
...@@ -154,39 +173,39 @@ ...@@ -154,39 +173,39 @@
}, },
methods: { methods: {
getShow(Id,HeightNum,item){ getShow(Id, HeightNum, item) {
item.imgMapId = Id item.imgMapId = Id
if(HeightNum>=243){ if (HeightNum >= 243) {
item.showImgOne = true item.showImgOne = true
}else{ } else {
item.showImgOne = false item.showImgOne = false
} }
if(HeightNum>=478){ if (HeightNum >= 478) {
item.showImgTwo = true item.showImgTwo = true
}else{ } else {
item.showImgTwo = false item.showImgTwo = false
} }
this.$forceUpdate() this.$forceUpdate()
}, },
getHeigthNum(Id,item){ getHeigthNum(Id, item) {
let that = this let that = this
setTimeout(()=>{ setTimeout(() => {
var Height = document.getElementById(Id); var Height = document.getElementById(Id);
if(Height){ if (Height) {
let HeightNum = Height.offsetHeight let HeightNum = Height.offsetHeight
that.getShow(Id,HeightNum,item) that.getShow(Id, HeightNum, item)
} }
},300) }, 300)
}, },
getFontSize(title){ getFontSize(title) {
if(title.length>60){ if (title.length > 60) {
return 929/60 +'px' return 929 / 60 + 'px'
}else{ } else {
return '30px' return '30px'
} }
}, },
getImgColor(img,id){ getImgColor(img, id) {
return "#fff" return "#fff"
return return
// this.canvasImgColor(img,id, (callback) => { // this.canvasImgColor(img,id, (callback) => {
...@@ -202,14 +221,14 @@ ...@@ -202,14 +221,14 @@
// }) // })
}, },
// 获取图片颜色 // 获取图片颜色
canvasImgColor(imgs,ids, callback) { canvasImgColor(imgs, ids, callback) {
var imgSrc = imgs var imgSrc = imgs
var upload = document.getElementById(ids) var upload = document.getElementById(ids)
const imgEle = document.createElement('img') const imgEle = document.createElement('img')
const canvas = document.createElement('canvas') const canvas = document.createElement('canvas')
imgEle.src = imgSrc imgEle.src = imgSrc
imgEle.crossOrigin = ''; imgEle.crossOrigin = '';
imgEle.onload = () => { imgEle.onload = () => {
var ctx = canvas.getContext("2d"); var ctx = canvas.getContext("2d");
var naturalImgSize = [imgEle.naturalWidth, imgEle.naturalHeight]; var naturalImgSize = [imgEle.naturalWidth, imgEle.naturalHeight];
canvas.width = naturalImgSize[0]; canvas.width = naturalImgSize[0];
...@@ -224,58 +243,62 @@ ...@@ -224,58 +243,62 @@
const oneLineImgDataLen = canvas.width * 4; const oneLineImgDataLen = canvas.width * 4;
imgData.data.forEach((colorVal, i) => { imgData.data.forEach((colorVal, i) => {
if (i % oneLineImgDataLen <= 0.5 * oneLineImgDataLen || i % oneLineImgDataLen >= 0.6 * oneLineImgDataLen) { if (i % oneLineImgDataLen <= 0.5 * oneLineImgDataLen || i % oneLineImgDataLen >= 0.6 *
const inLeft = i % oneLineImgDataLen <= 0.5 * oneLineImgDataLen oneLineImgDataLen) {
if (i % 4 === 0) { const inLeft = i % oneLineImgDataLen <= 0.5 * oneLineImgDataLen
// 获取rgb均值 if (i % 4 === 0) {
const curAverageRGB = (imgData.data[i] + imgData.data[i + 1] + imgData.data[i + 2]) / 3; // 获取rgb均值
let leftOrRightRef = inLeft ? leftSectionData : rightSectionData; const curAverageRGB = (imgData.data[i] + imgData.data[i + 1] + imgData.data[i + 2]) / 3;
//每个数组里存四个值：本颜色值中的r、g、b的均值，以及r、g、b三个值。 let leftOrRightRef = inLeft ? leftSectionData : rightSectionData;
//均值一方面用于累加计算本区域的整体均值，然后再跟每个均值对比拿到与整体均值最接近的项的索引，再取该数组里的后三个值：rgb，对应着颜色 //每个数组里存四个值：本颜色值中的r、g、b的均值，以及r、g、b三个值。
leftOrRightRef[leftOrRightRef.length] = [curAverageRGB, imgData.data[i], imgData.data[i + 1], imgData.data[i + 2]] //均值一方面用于累加计算本区域的整体均值，然后再跟每个均值对比拿到与整体均值最接近的项的索引，再取该数组里的后三个值：rgb，对应着颜色
} leftOrRightRef[leftOrRightRef.length] = [curAverageRGB, imgData.data[i], imgData.data[i + 1],
imgData.data[i + 2]
]
} }
}
}) })
//generate average rgb //generate average rgb
const averageOfLeft = Math.round(leftSectionData.reduce((_cur, item) => { const averageOfLeft = Math.round(leftSectionData.reduce((_cur, item) => {
return _cur + item[0] return _cur + item[0]
}, 0) / leftSectionData.length) }, 0) / leftSectionData.length)
const averageOfRight = Math.round(rightSectionData.reduce((_cur, item) => { const averageOfRight = Math.round(rightSectionData.reduce((_cur, item) => {
return _cur + item[0] return _cur + item[0]
}, 0) / rightSectionData.length) }, 0) / rightSectionData.length)
//find the most near color //find the most near color
const findNearestIndex = (averageVal, arrBox) => { const findNearestIndex = (averageVal, arrBox) => {
let _gapValue = Math.abs(averageVal - arrBox[0]) let _gapValue = Math.abs(averageVal - arrBox[0])
let _nearColorIndex = 0 let _nearColorIndex = 0
arrBox.forEach((item, index) => { arrBox.forEach((item, index) => {
const curGapValue = Math.abs(item - averageVal) const curGapValue = Math.abs(item - averageVal)
if (curGapValue < _gapValue) { if (curGapValue < _gapValue) {
_gapValue = curGapValue _gapValue = curGapValue
_nearColorIndex = index _nearColorIndex = index
} }
}) })
return _nearColorIndex return _nearColorIndex
} }
const leftNearestColor = leftSectionData[findNearestIndex(averageOfLeft, leftSectionData)] const leftNearestColor = leftSectionData[findNearestIndex(averageOfLeft, leftSectionData)]
const rightNearestColor = rightSectionData[findNearestIndex(averageOfRight, rightSectionData)] const rightNearestColor = rightSectionData[findNearestIndex(averageOfRight, rightSectionData)]
upload.style.backgroundColor = `rgba(${leftNearestColor[1]},${leftNearestColor[2]},${leftNearestColor[3]},1) 0%,rgba(${rightNearestColor[1]},${rightNearestColor[2]},${rightNearestColor[3]},1)` upload.style.backgroundColor =
`rgba(${leftNearestColor[1]},${leftNearestColor[2]},${leftNearestColor[3]},1) 0%,rgba(${rightNearestColor[1]},${rightNearestColor[2]},${rightNearestColor[3]},1)`
callback(upload.style.backgroundColor) callback(upload.style.backgroundColor)
}
} }
}
}, },
computed: {}, computed: {},
watch: { watch: {
dataAll: { dataAll: {
handler(val, oldVal) { handler(val, oldVal) {
if(val&&val.tripColor){ if (val && val.tripColor) {
this.backgroundColor = this.hexToRgb(val.tripColor, 0.2) this.backgroundColor = this.hexToRgb(val.tripColor, 0.2)
let rgba = this.hexToRgb(val.tripColor, 1) let rgba = this.hexToRgb(val.tripColor, 1)
rgba = rgba.split(',') rgba = rgba.split(',')
let rgba0 = rgba[0].split('(') let rgba0 = rgba[0].split('(')
let arr = [rgba0[1],rgba[1],rgba[2]] let arr = [rgba0[1], rgba[1], rgba[2]]
if(this.getRgbLevel(arr)>50){ if (this.getRgbLevel(arr) > 50) {
this.textColor = "#fff" this.textColor = "#fff"
}else{ } else {
this.textColor = "#333" this.textColor = "#333"
} }
} }
...@@ -285,8 +308,8 @@ ...@@ -285,8 +308,8 @@
}, },
tripList: { tripList: {
handler(val, oldVal) { handler(val, oldVal) {
this.tripList.forEach((x,index)=>{ this.tripList.forEach((x, index) => {
this.getHeigthNum('travelDaysMasterMap_'+index,x) this.getHeigthNum('travelDaysMasterMap_' + index, x)
}) })
}, },
deep: true, deep: true,
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment