Skip to content

S
SuperMan
Commit a932e4cc authored by 黄奎's avatar 黄奎
Browse files
Options

页面修改

parent ad9ee333
Hide whitespace changes
Inline Side-by-side
Showing with 130 additions and 151 deletions
src/components/LeaveGroupDownload/travelDays.vue
View file @ a932e4cc
......@@ -9,29 +9,28 @@
</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;">
<Header :TripColor="dataAll.tripColor" :orderMsg="orderMsg"></Header>
<div class="travelDaysTitlle row-aic">
<div class="travelDaysTitlle-left">
<div class="travelDaysTitlle-left-text column-ajc">
<div class="travelDaysTitlle-left-textOne">
<span>{{item.dayNum>9?item.dayNum:'0'+item.dayNum}}</span>
</div>
<div class="travelDaysTitlle-left-textTwo">
<span>{{day}}</span>
<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;">
<Header :TripColor="dataAll.tripColor" :orderMsg="orderMsg"></Header>
<div class="travelDaysTitlle row-aic">
<div class="travelDaysTitlle-left">
<div class="travelDaysTitlle-left-text column-ajc">
<div class="travelDaysTitlle-left-textOne">
<span>{{item.dayNum>9?item.dayNum:'0'+item.dayNum}}</span>
</div>
<div class="travelDaysTitlle-left-textTwo">
<span>{{day}}</span>
</div>
</div>
</div>
</div>
<div class="travelDaysTitlle-right">
<div class="travelDaysTitlle-right-text row-aic"
:style="{'background': dataAll.tripColor,'font-size': getFontSize(item.title),'color':textColor}">
{{item.title}}
<div class="travelDaysTitlle-right">
<div class="travelDaysTitlle-right-text row-aic"
:style="{'background': dataAll.tripColor,'font-size': getFontSize(item.title),'color':textColor}">
{{item.title}}
</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-oneImg bjF6" :id="'travelDaysImg_one'+index">
<img class="absolute" :src="item.details[0].img">
......@@ -39,10 +38,9 @@
<div class="travelDaysMasterMap-text absolute z-index2">{{item.details[0].title}}</div>
</div>
<div class="travelDaysMasterMap-two absolute z-index2">
<div class="travelDaysMasterMap-twoImg relative bjF6"
:style="{'color':'#fff'}"
: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)">
<div class="travelDaysMasterMap-twoImg relative bjF6" :style="{'color':'#fff'}"
: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)">
<template v-if="item.details.length>1&&item.details[1].img">
<img :src="item.details[1].img">
<div class="travelDaysMasterMap-text textTwo absolute z-index2">
......@@ -58,82 +56,78 @@
</template>
</template>
</div>
<div class="travelDaysMasterMap-twoImg relative bjF6" style="margin-top: 47px;"
:style="{'color':'#fff'}"
: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)">
<template v-if="item.details.length>2&&item.details[2].img">
<img :src="item.details[2].img">
<div class="travelDaysMasterMap-text textTwo absolute z-index2">
【{{item.details[2].title}}】</div>
</template>
<div class="travelDaysMasterMap-twoImg relative bjF6" style="margin-top: 47px;" :style="{'color':'#fff'}"
: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)">
<template v-if="item.details.length>2&&item.details[2].img">
<img :src="item.details[2].img">
<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 v-if="jiudian.url" :src="jiudian.url">
<div class="travelDaysMasterMap-text textTwo absolute z-index2">
【{{jiudian.name}}】</div>
<template v-else>
<template v-for="(jiudian,j) in item.jiu2">
<template v-if="jiudian.url&&j==1">
<img v-if="jiudian.url" :src="jiudian.url">
<div class="travelDaysMasterMap-text textTwo absolute z-index2">
【{{jiudian.name}}】</div>
</template>
</template>
</template>
</template>
</div>
</div>
</div>
<div class="travelDaysContent column">
<div class="travelDaysContent-text" v-for="(jindian,j) in item.details"
v-if="item.details.length>0">
<span>{{jindian.title?'【'+jindian.title+'】':''}}</span>
{{jindian.content}}
</div>
<div class="travelDaysContent-text"
v-else>
<span>暂无描述</span>
</div>
</div>
<div class="travelDaysdetails">
<div class="travelDaysdetailsBJ row"
:style="{'background':backgroundColor}">
<div class="travelDaysdetails-textBox column">
<div class="travelDaysdetails-text">
<span class="travelDaysdetails-text0">早餐：</span>
{{item.can.breakfirst}}
</div>
<div class="travelDaysdetails-text">
<span class="travelDaysdetails-text0">午餐：</span>
{{item.can.lanuch}}
</div>
<div class="travelDaysdetails-text">
<span class="travelDaysdetails-text0">晚餐：</span>
{{item.can.dinner}}
</div>
<div class="travelDaysContent column">
<div class="travelDaysContent-text" v-for="(jindian,j) in item.details" v-if="item.details.length>0">
<span>{{jindian.title?'【'+jindian.title+'】':''}}</span>
{{jindian.content}}
</div>
<div class="travelDaysdetails-textBox">
<div class="travelDaysdetails-text">
<span class="travelDaysdetails-text0">住宿：</span>
<template v-for="(j,i) in item.jiu2">{{j.name}} </template> 或同级
</div>
<div class="travelDaysContent-text" v-else>
<span>暂无描述</span>
</div>
<template v-for="(t,i) in item.tips">
<div class="travelDaysdetails-textBox" :style="{'flex-grow':t.content&&getHtmlPlainText(t.content).length>20?'2':''}">
<div class="travelDaysdetails-text" style="margin-right: 0;">
<span class="travelDaysdetails-text0">温馨提示：</span>
<template v-if="getHtmlPlainText(t.content).length>0">
{{getHtmlPlainText(t.content)}}
</template>
<!-- <div class="travelDaysdetails-text1" v-if="t.content!=''" v-html="t.content"></div> -->
<p v-else>暂无提示</p>
</div>
<div class="travelDaysdetails">
<div class="travelDaysdetailsBJ row" :style="{'background':backgroundColor}">
<div class="travelDaysdetails-textBox column">
<div class="travelDaysdetails-text">
<span class="travelDaysdetails-text0">早餐：</span>
{{item.can.breakfirst}}
</div>
<div class="travelDaysdetails-text">
<span class="travelDaysdetails-text0">午餐：</span>
{{item.can.lanuch}}
</div>
<div class="travelDaysdetails-text">
<span class="travelDaysdetails-text0">晚餐：</span>
{{item.can.dinner}}
</div>
</div>
<div class="travelDaysdetails-textBox">
<div class="travelDaysdetails-text">
<span class="travelDaysdetails-text0">住宿：</span>
<template v-for="(j,i) in item.jiu2">{{j.name}} </template> 或同级
</div>
</div>
<template v-for="(t,i) in item.tips">
<div class="travelDaysdetails-textBox"
:style="{'flex-grow':t.content&&getHtmlPlainText(t.content).length>20?'2':''}">
<div class="travelDaysdetails-text" style="margin-right: 0;">
<span class="travelDaysdetails-text0">温馨提示：</span>
<template v-if="getHtmlPlainText(t.content).length>0">
{{getHtmlPlainText(t.content)}}
</template>
<!-- <div class="travelDaysdetails-text1" v-if="t.content!=''" v-html="t.content"></div> -->
<p v-else>暂无提示</p>
</div>
</div>
</template>
</div>
</template>
</div>
</div>
<!-- otherJourney-footer -->
<div>
<div class="otherJourney-introduceFooter z-index1 row-aic"
:style="{'background':''}">
<!-- otherJourney-footer -->
<div>
<div class="otherJourney-introduceFooter z-index1 row-aic" :style="{'background':''}">
<div class="introduceFooterBJ introduceFooterOne" :style="{'background':dataAll.tripColor}">&nbsp;</div>
<div class="introduceFooterBJ introduceFootertTwo" :style="{'background':dataAll.tripColor}">&nbsp;</div>
<div class="introduceFooter-text row-aic">
......@@ -142,9 +136,9 @@
</div>
<div class="introduceFooterBJ introduceFootertThree" :style="{'background':dataAll.tripColor}">&nbsp;</div>
<div class="introduceFooterBJ introduceFootertFour" :style="{'background':dataAll.tripColor}">&nbsp;</div>
</div>
</div>
</div>
</div>
</div>
</div>
......@@ -157,7 +151,7 @@
components: {
Header
},
props: ['dataAll','tripList','orderMsg','orderTripdiff','vshowD','vshowK'],
props: ['dataAll', 'tripList', 'orderMsg', 'orderTripdiff', 'vshowD', 'vshowK'],
data() {
return {
title: '北京-马德里-塞戈维亚-萨拉曼卡-贝尼多姆/小镇-瓦伦西亚-巴塞罗那（约 253km，约 3h）北京-马德里-塞戈维亚-萨拉曼卡-贝尼多姆/小镇-瓦伦西亚-巴塞罗那（约 253km，约 3h）',
......@@ -172,53 +166,34 @@
getHtmlPlainText(html_str) {
//提取字符串中的文字
let re = new RegExp('<[^<>]+>', 'g')
if(html_str){
if (html_str) {
let text = html_str.replace(re, '')
//或
//var text = html_str.replace(/<[^<>]+>/g, "");
return text
}else{
} else {
return ''
}
},
getFontSize(title){
getFontSize(title) {
let size = 30;
if (title.length >80){
var tempSize= Convert.ToDouble(80) / Convert.ToDouble(title.length);
if (title.length > 80) {
var tempSize = Number(80) / Number(title.length);
tempSize = tempSize * 30;
size = Math.Round(tempSize, 1);
size = tempSize.toFixed(1);
}
return size + "px";
// if(title.length>60){
// return 929/60 +'px'
// }else{
// return '30px'
// }
},
getImgColor(img,id){
getImgColor(img, id) {
return "#fff"
// this.canvasImgColor(img,id, (callback) => {
// let rgb = callback
// rgb = rgb.split(',')
// let rgb0 = rgb[0].split('(')
// let arrRgb = [rgb0[1],rgba[1],rgb[2]]
// if(this.getRgbLevel(arrRgb)>50){
// return "#333"
// }else{
// return "#fff"
// }
// })
},
// 获取图片颜色
canvasImgColor(imgs,ids, callback) {
var imgSrc = imgs
var upload = document.getElementById(ids)
const imgEle = document.createElement('img')
const canvas = document.createElement('canvas')
imgEle.src = imgSrc
imgEle.crossOrigin = '';
imgEle.onload = () => {
canvasImgColor(imgs, ids, callback) {
var imgSrc = imgs
var upload = document.getElementById(ids)
const imgEle = document.createElement('img')
const canvas = document.createElement('canvas')
imgEle.src = imgSrc
imgEle.crossOrigin = '';
imgEle.onload = () => {
var ctx = canvas.getContext("2d");
var naturalImgSize = [imgEle.naturalWidth, imgEle.naturalHeight];
canvas.width = naturalImgSize[0];
......@@ -233,59 +208,63 @@
const oneLineImgDataLen = canvas.width * 4;
imgData.data.forEach((colorVal, i) => {
if (i % oneLineImgDataLen <= 0.5 * oneLineImgDataLen || i % oneLineImgDataLen >= 0.6 * oneLineImgDataLen) {
const inLeft = i % oneLineImgDataLen <= 0.5 * oneLineImgDataLen
if (i % 4 === 0) {
// 获取rgb均值
const curAverageRGB = (imgData.data[i] + imgData.data[i + 1] + imgData.data[i + 2]) / 3;
let leftOrRightRef = inLeft ? leftSectionData : rightSectionData;
//每个数组里存四个值：本颜色值中的r、g、b的均值，以及r、g、b三个值。
//均值一方面用于累加计算本区域的整体均值，然后再跟每个均值对比拿到与整体均值最接近的项的索引，再取该数组里的后三个值：rgb，对应着颜色
leftOrRightRef[leftOrRightRef.length] = [curAverageRGB, imgData.data[i], imgData.data[i + 1], imgData.data[i + 2]]
}
if (i % oneLineImgDataLen <= 0.5 * oneLineImgDataLen || i % oneLineImgDataLen >= 0.6 *
oneLineImgDataLen) {
const inLeft = i % oneLineImgDataLen <= 0.5 * oneLineImgDataLen
if (i % 4 === 0) {
// 获取rgb均值
const curAverageRGB = (imgData.data[i] + imgData.data[i + 1] + imgData.data[i + 2]) / 3;
let leftOrRightRef = inLeft ? leftSectionData : rightSectionData;
//每个数组里存四个值：本颜色值中的r、g、b的均值，以及r、g、b三个值。
//均值一方面用于累加计算本区域的整体均值，然后再跟每个均值对比拿到与整体均值最接近的项的索引，再取该数组里的后三个值：rgb，对应着颜色
leftOrRightRef[leftOrRightRef.length] = [curAverageRGB, imgData.data[i], imgData.data[i + 1],
imgData.data[i + 2]
]
}
}
})
//generate average rgb
const averageOfLeft = Math.round(leftSectionData.reduce((_cur, item) => {
return _cur + item[0]
return _cur + item[0]
}, 0) / leftSectionData.length)
const averageOfRight = Math.round(rightSectionData.reduce((_cur, item) => {
return _cur + item[0]
return _cur + item[0]
}, 0) / rightSectionData.length)
//find the most near color
const findNearestIndex = (averageVal, arrBox) => {
let _gapValue = Math.abs(averageVal - arrBox[0])
let _nearColorIndex = 0
arrBox.forEach((item, index) => {
const curGapValue = Math.abs(item - averageVal)
if (curGapValue < _gapValue) {
_gapValue = curGapValue
_nearColorIndex = index
}
})
return _nearColorIndex
let _gapValue = Math.abs(averageVal - arrBox[0])
let _nearColorIndex = 0
arrBox.forEach((item, index) => {
const curGapValue = Math.abs(item - averageVal)
if (curGapValue < _gapValue) {
_gapValue = curGapValue
_nearColorIndex = index
}
})
return _nearColorIndex
}
const leftNearestColor = leftSectionData[findNearestIndex(averageOfLeft, leftSectionData)]
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)
}
}
}
},
computed: {},
watch: {
dataAll: {
handler(val, oldVal) {
if(val&&val.tripColor){
if (val && val.tripColor) {
this.backgroundColor = this.hexToRgb(val.tripColor, 0.2)
let rgba = this.hexToRgb(val.tripColor, 1)
rgba = rgba.split(',')
let rgba0 = rgba[0].split('(')
let arr = [rgba0[1],rgba[1],rgba[2]]
if(this.getRgbLevel(arr)>50){
let arr = [rgba0[1], rgba[1], rgba[2]]
if (this.getRgbLevel(arr) > 50) {
this.textColor = "#fff"
}else{
} else {
this.textColor = "#333"
}
}
......
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