Commit a65ed411 authored by 黄奎's avatar 黄奎
parents 380e314a 3a5f180b
......@@ -74,6 +74,7 @@
.UpgradedVersion-box{
width: 1123px;
height: 1588px;
overflow: hidden;
}
.UpgradedVersion-homebj{
background: url('http://imgfile.oytour.com/Static/NewTripFeature/otherBjTwo.png')no-repeat center;
......
*{
/* font-family: FZCuSong-B09S; */
.bjE6{
background: #e6e6e6;
}
.bjF6{
background: #f6f6f6;
}
.relative{
position: relative;
}
.absolute{
position: absolute;
}
.z-index1{
z-index: 1;
}
.z-index2{
z-index: 2;
}
.z-index3{
z-index: 3;
}
.row{
display: flex;
}
.row-aic{
display: flex;
align-items: center;
}
.row-ajc{
display: flex;
align-items: center;
justify-content: center;
}
.row-sb{
display:flex;
justify-content: space-between;
}
.row-sb-nowrap{
display:flex;
justify-content: space-between;
flex-wrap: nowrap;
}
.column{
display:flex;
flex-direction: column;
}
.column-ajc{
display:flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.marginL20{
margin-left: 20px;
}
.marginL11{
margin-left: 11px;
}
.marginL15{
margin-left: 15px;
}
.marginT20{
margin-top: 20px;
}
.marginT10{
margin-top: 10px;
}
.marginT13{
margin-top: 13px;
}
.marginT14{
margin-top: 14px;
}
.pkey {
color: grey !important;
......@@ -97,7 +167,7 @@
.travelDaysTitlle-left-text{
width: 173px;
height: 173px;
background: url('http://192.168.10.214:8130/Upload/NewTripFeature/Shape.png')no-repeat center;
background: url('https://imgfile.oytour.com/Static/NewTripFeature/Shape.png')no-repeat center;
background-size: 100% 100%;
}
.travelDaysTitlle-left-textOne{
......@@ -151,7 +221,7 @@
font-size: 26px;
font-family: PingFang SC;
font-weight: 500;
color: #FEFEFE;
/* color: #FEFEFE; */
line-height: 34px;
text-align: center;
}
......@@ -163,7 +233,6 @@
width: 335px;
height: 189px;
overflow: hidden;
background: #2A2A2A;
border: 2px solid #FFFFFF;
border-radius: 18px;
}
......@@ -171,12 +240,13 @@
font-size: 26px;
font-family: PingFang SC;
font-weight: 500;
color: #FEFEFE;
line-height: 34px;
}
.travelDaysContent{
max-height: 468px;
line-height: 38px;
padding: 41px 44px 47px 44px;
overflow: hidden;
}
.travelDaysContent-text{
font-size: 21px;
......@@ -192,13 +262,13 @@
padding: 0 36px 115px 36px;
}
.travelDaysdetailsBJ{
border-radius: 45px;
border-radius: 100px;
flex-wrap: wrap;
padding: 20px 35px;
-webkit-border-radius: 45px;
-moz-border-radius: 45px;
-ms-border-radius: 45px;
-o-border-radius: 45px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
-ms-border-radius: 100px;
-o-border-radius: 100px;
}
.travelDaysdetails-text{
flex-wrap: nowrap;
......@@ -220,3 +290,76 @@
padding: 0;
margin: 0;
}
.UpgradedVersion-box{
width: 1123px;
height: 1588px;
overflow: hidden;
}
.UpgradedVersion-homebj{
background: url('https://imgfile.oytour.com/Static/NewTripFeature/otherBjTwo.png')no-repeat center;
background-size: 100% 100%;
}
.UpgradedVersion-introduceBj{
background: url('https://imgfile.oytour.com/Static/NewTripFeature/otherBjTwo.png')no-repeat center;
background-size: 100% 100%;
}
.UpgradedVersion-otherBj{
background: #fff;
}
.UpgradedVersion-Hover{
cursor: pointer;
}
.UpgradedVersion-Hover:hover .featureControls{
opacity: 1;
}
.otherJourney-introduceFooter {
left: 0;
right: 0;
bottom: 32px;
width: 100%;
height: 34px;
background-size: 100% 100%;
}
.introduceFooterBJ {
height: 100%;
}
.introduceFooterOne {
flex-grow: 1;
margin-right: 5px;
}
.introduceFootertTwo,
.introduceFootertThree {
width: 7px;
}
.introduceFootertFour {
width: 120px;
margin-left: 5px;
}
.introduceFooter-text {}
.introduceFooter-text img {
width: 28px;
height: 28px;
display: inline-block;
margin: 0 9px;
}
.introduceFooter-text .edit_div {
line-height: 34px;
text-align: center;
overflow: hidden;
font-size: 22px;
font-family: FZCuSong-B09S;
font-weight: 400;
color: #2A2A2A;
margin: 0 9px 0 0;
}
.otherJourney-footer .edit_div {
display: none;
}
......@@ -43,13 +43,5 @@
</script>
<style>
.travelDays-box{
position: absolute;
left: 0;
top: 112px;
right: 0;
bottom: 115px;
border: 1px solid #ddd;
}
</style>
......@@ -2,7 +2,7 @@
<div class="UpgradedVersion-header absolute row-sb z-index1">
<div class="UpgradedVersion-header-left relative row-aic" :style="{'background':TripColor}">
<img class="header-leftBj absolute z-index2" :src="backgroundImgBj2" />
<img class="header-leftImg" src="http://192.168.10.214:8130/Upload/NewTripFeature/headerLogoTwo.png" />
<img class="header-leftImg" src="https://imgfile.oytour.com/Static/NewTripFeature/headerLogoTwo.png" />
</div>
<div class="UpgradedVersion-header-right">
<div class="UpgradedVersion-header-title">
......@@ -25,8 +25,8 @@
canEdit: true,
LineShortName: '欧洲线',
backgroundImg: '',
backgroundImgBj1: 'http://192.168.10.214:8130/Upload/NewTripFeature/logoBjOne.png', //花纹背景
backgroundImgBj2: 'http://192.168.10.214:8130/Upload/NewTripFeature/logoBjTwo.png', //白色背景
backgroundImgBj1: 'https://imgfile.oytour.com/Static/NewTripFeature/logoBjOne.png', //花纹背景
backgroundImgBj2: 'https://imgfile.oytour.com/Static/NewTripFeature/logoBjTwo.png', //白色背景
};
},
methods: {
......@@ -36,7 +36,7 @@
watch: {
TripColor: {
handler(val, oldVal) {
// this.backgroundImg = `url('http://192.168.10.214:8130/Upload/NewTripFeature/logoBj.png') no-repeat right ${val}`
// this.backgroundImg = `url('https://imgfile.oytour.com/Static/NewTripFeature/logoBj.png') no-repeat right ${val}`
},
deep: false,
immediate: true
......
......@@ -25,27 +25,27 @@
</div>
<div class="travelDaysTitlle-right">
<div class="travelDaysTitlle-right-text"
:style="{'background': TripColor,'font-size':'30px'}">
北京-马德里-塞戈维亚-萨拉曼卡-贝尼多姆/小镇-瓦伦西亚-巴
塞罗那(约 253km,约 3h)
:style="{'background': TripColor,'font-size': getFontSize(title),'color':textColor}">
{{title}}
</div>
</div>
</div>
<div class="travelDaysMasterMap relative">
<div class="travelDaysMasterMap relative"
:style="{'color':textColorOne}">
<div class="travelDaysMasterMap-one">
<div class="travelDaysMasterMap-oneImg">
<img src="http://192.168.10.214:8130/Upload/NewTripFeature/homeBj.png">
<div class="travelDaysMasterMap-oneImg bjF6" id="uploadImg">
<img src="https://imgfile.oytour.com/Static/NewTripFeature/homeBj.png">
</div>
<div class="travelDaysMasterMap-text absolute z-index2">塞维利亚西班牙广场</div>
</div>
<div class="travelDaysMasterMap-two absolute z-index2">
<div class="travelDaysMasterMap-twoImg relative">
<img src="http://192.168.10.214:8130/Upload/NewTripFeature/homeBj.png">
<div class="travelDaysMasterMap-twoImg relative bjF6">
<img src="https://imgfile.oytour.com/Static/NewTripFeature/homeBj.png">
<div class="travelDaysMasterMap-text textTwo absolute z-index2">【米其林烤乳猪】</div>
</div>
<div class="travelDaysMasterMap-twoImg relative" style="margin-top: 47px;">
<img src="http://192.168.10.214:8130/Upload/NewTripFeature/homeBj.png">
<div class="travelDaysMasterMap-twoImg relative bjF6" style="margin-top: 47px;">
<img src="https://imgfile.oytour.com/Static/NewTripFeature/homeBj.png">
<div class="travelDaysMasterMap-text textTwo absolute z-index2">【米其林烤乳猪】</div>
</div>
</div>
......@@ -56,6 +56,25 @@
<span>【塞维利亚斗牛场】</span>
(外观,约 20 分钟)西班牙历史最悠久的斗牛场。每年举行的“阿布利尔节”的场所
</div>
<div class="travelDaysContent-text">
<span>【圣十字区-旧犹太区】</span>
(约 30 分钟)是塞维利亚的老城区,具有典型的安达卢西亚风格
</div>
<div class="travelDaysContent-text">
<span>【塞维利亚王宫】</span>
(外观,约 20 分钟),这座欧洲最古老的皇家宫殿,在 1987 年就已经被选为世界文化遗产。
王宫中最大的亮点,就是由佩德罗一世建造的美轮美奂的佩德罗宫殿,在《权力的游戏》中,这里被称为“流水花园”(Water Gardens),混合了摩尔人阿拉伯式和欧洲哥特式两种建筑风格;
</div>
<div class="travelDaysContent-text">
<span>【西班牙广场】</span>
(约 20 分钟),它是摩尔复兴建筑的缩影,1929 年拉美博览会的场地之一,在广场上可以看到西班牙不同的建筑风格,包括哥特风格、摩尔风格以及银匠风格。
</div>
<div class="travelDaysContent-text">
<span>【特别体验】</span>
赠送:1、西班牙国粹-佛朗明哥舞 2、塞维利亚广场马车游(4 人一马车),感受这里历史的马
车,是这里最亮眼的风景线。一排排马车一字排开,历史的画面扑面而来,乘坐在马车上也将带着您一览塞维
利亚城市一角的风采。
</div>
</div>
<div class="travelDaysdetails">
......@@ -79,6 +98,20 @@
</div>
</div>
</div>
<!-- otherJourney-footer -->
<div>
<div class="otherJourney-introduceFooter absolute z-index1 row-aic"
:style="{'background':''}">
<div class="introduceFooterBJ introduceFooterOne" :style="{'background':TripColor}">&nbsp;</div>
<div class="introduceFooterBJ introduceFootertTwo" :style="{'background':TripColor}">&nbsp;</div>
<div class="introduceFooter-text row-aic">
<img src="http://imgfile.oytour.com/Static/NewTripFeature/footerLogo.png" />
<div class="edit_div">欧洲线</div>
</div>
<div class="introduceFooterBJ introduceFootertThree" :style="{'background':TripColor}">&nbsp;</div>
<div class="introduceFooterBJ introduceFootertFour" :style="{'background':TripColor}">&nbsp;</div>
</div>
</div>
</div>
</div>
......@@ -95,91 +128,21 @@
props: ['TripColor'],
data() {
return {
title: '北京-马德里-塞戈维亚-萨拉曼卡-贝尼多姆/小镇-瓦伦西亚-巴塞罗那(约 253km,约 3h)北京-马德里-塞戈维亚-萨拉曼卡-贝尼多姆/小镇-瓦伦西亚-巴塞罗那(约 253km,约 3h)',
day: 'DAY',
backgroundColor: ''
backgroundColor: '',
textColor: '',
textColorOne: '',
};
},
methods: {
UploadImg(index,type) {
this.MasterMapIndex = index?index:0
if(type) this.StencilDrawing = true
else this.StencilDrawing = false
if(this.FeatureItem.pageType==2){
document.querySelector(`#introducefile_${(this.index * 2 + 1)}_0`).click();
getFontSize(title){
if(title.length>60){
return 929/60 +'px'
}else{
document.querySelector(`#travelDays_${(this.index * 2 + 1)}`).click();
return '30px'
}
},
uploadpic(e) {
let that = this;
if (e.target.files.length > 0 && e.target.files[0].size > 0) {
var reader = new FileReader();
reader.onload = function (event) {
let blob = that.base64ToBlob(event.target.result);
let newArr = [];
newArr.push(blob);
var fileName = `${that.uuid(10, 10)}.png`;
var path = `/newFeature`;
that.uploadSelfBlob(path, newArr, x => {
let allPath = that.domainManager().ViittoFileUrl + x.data.FilePath;
let i = e.target.id.split("_")[2];
if(that.StencilDrawing){
that.FeatureItem.dataObj.SubList[that.MasterMapIndex].url = allPath
}else{
that.FeatureItem.dataObj.ImgList[that.MasterMapIndex].url = allPath
}
});
};
reader.readAsDataURL(e.target.files[0]);
}
},
SelectImg(index,type) {
this.MasterMapIndex = index?index:0
if(type) this.StencilDrawing = true
else this.StencilDrawing = false
if(this.FeatureData.pageType==3) this.choseType = 2
else if(this.FeatureData.pageType==4) this.choseType = 1
else if(this.FeatureData.pageType==5) this.choseType = 2
else if(this.FeatureData.pageType==6) this.choseType = 3
else this.choseType = 0
this.isShowScenicImg = true
},
AddImg() {
let obj = {
url:''
}
this.FeatureItem.dataObj.ImgList.push(obj)
},
DeleteImg(index,type) {
if(type) this.StencilDrawing = true
else this.StencilDrawing = false
if(this.StencilDrawing){
this.FeatureItem.dataObj.SubList.splice(index,1)
}else{
this.FeatureItem.dataObj.ImgList.splice(index,1)
}
},
toAddPages() {
this.$emit('toAddPages', this.index, this.FeatureItem)
},
toDeletePages() {
this.$emit('toDeletePages', this.index, this.FeatureItem)
},
setTemplate(TemplateType) {
this.FeatureItem.pageTemplate = TemplateType
},
closeDMCchooseImg() {
this.isShowScenicImg = false
},
getDMCimg(selectImgArr) {
let Path = selectImgArr[0].Path
if(this.StencilDrawing){
this.FeatureItem.dataObj.SubList[this.MasterMapIndex].url = Path
}else{
this.FeatureItem.dataObj.ImgList[this.MasterMapIndex].url = Path
}
this.isShowScenicImg = false
}
......@@ -189,6 +152,15 @@
TripColor: {
handler(val, oldVal) {
this.backgroundColor = this.hexToRgb(val, 0.15)
let rgba = this.hexToRgb(val, 1)
rgba = rgba.split(',')
let rgba0 = rgba[0].split('(')
let arr = [rgba0[1],rgba[1],rgba[2]]
if(this.getRgbLevel(arr)>50){
this.textColor = "#fff"
}else{
this.textColor = "#333"
}
},
deep: false,
immediate: true
......@@ -202,14 +174,25 @@
// },
},
mounted() {
let bj = 'https://imgfile.oytour.com/Static/NewTripFeature/homeBj.png'
this.canvasImgColor(bj, (callback) => {
this.textColor = callback
let rgba = callback
rgba = rgba.split(',')
let rgba0 = rgba[0].split('(')
let arr = [rgba0[1],rgba[1],rgba[2]]
if(this.getRgbLevel(arr)>50){
this.textColorOne = "#fff"
}else{
this.textColorOne = "#333"
}
})
}
};
</script>
<style>
@import url("../../assets/css/UpgradedVersion.css");
</style>
......@@ -20,7 +20,7 @@
v-bind:toolbarShow="toolbar" v-bind:referenceList="FeeNonIncludeArr"></my-edit>
<div class="TNtitle NotContain">
自费安排==
自费安排
</div>
<table class="TFTable TNtable">
<thead>
......
......@@ -202,7 +202,6 @@
<div id="pdfNode" class="LeaveGroupDownload-form">
<div id="pdfDom" style="padding:0 20px;">
<!-- 首页 -->
<!--
<LeaveGroupDownload
:vshowJ="vshowJ"
:vshowL="vshowL"
......@@ -211,9 +210,9 @@
:orderTripdiff="orderTripdiff"
:vshowLLR="vshowLLR"
:vshowB="vshowB"
:lineId="lineId"></LeaveGroupDownload> -->
:lineId="lineId"></LeaveGroupDownload>
<!-- 行程特色 -->
<!-- <ItineraryFeatures :feature="feature"></ItineraryFeatures> -->
<ItineraryFeatures :feature="feature"></ItineraryFeatures>
<travelDays :TripColor="TripColor"></travelDays>
</div>
</div>
......
......@@ -1739,6 +1739,71 @@ export default {
var b = parseInt(rgb[3], 16);
return 'rgba(' + r + ',' + g + ',' + b + ',' + opc + ')';
}
// 颜色深浅
Vue.prototype.getRgbLevel = function (arr) {
return arr[0] * 0.299 + arr[1] * 0.587 + arr[2] * 0.114;
}
// 获取图片颜色
Vue.prototype.canvasImgColor = function(imgs, callback) {
var imgSrc = imgs
var upload = document.getElementById('uploadImg')
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];
canvas.height = naturalImgSize[1];
//绘制到canvas
ctx.drawImage(imgEle, 0, 0);
//获取imageData:rgba像素点
var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const leftSectionData = []
const rightSectionData = []
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]]
}
}
})
//generate average rgb
const averageOfLeft = Math.round(leftSectionData.reduce((_cur, item) => {
return _cur + item[0]
}, 0) / leftSectionData.length)
const averageOfRight = Math.round(rightSectionData.reduce((_cur, item) => {
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
}
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)`
callback(upload.style.backgroundColor)
}
}
Vue.prototype.base64ToBlob = function (code) {
let parts = code.split(";base64,");
let contentType = parts[0].split(":")[1];
......
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