Skip to content

S
SuperMan
Commit 20c3e76a authored by youjie's avatar youjie
Browse files
Options

no message

parent ae6b353a
Hide whitespace changes
Inline Side-by-side
Showing with 290 additions and 98 deletions
src/assets/css/UpgradedVersion.css
View file @ 20c3e76a
...@@ -74,6 +74,7 @@ ...@@ -74,6 +74,7 @@
.UpgradedVersion-box{ .UpgradedVersion-box{
width: 1123px; width: 1123px;
height: 1588px; height: 1588px;
overflow: hidden;
} }
.UpgradedVersion-homebj{ .UpgradedVersion-homebj{
background: url('http://192.168.10.214:8130/Upload/NewTripFeature/otherBjTwo.png')no-repeat center; background: url('http://192.168.10.214:8130/Upload/NewTripFeature/otherBjTwo.png')no-repeat center;
......
src/assets/css/tripIndexNew.css
View file @ 20c3e76a
*{ .bjE6{
/* font-family: FZCuSong-B09S; */ 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 { .pkey {
color: grey !important; color: grey !important;
...@@ -151,7 +221,7 @@ ...@@ -151,7 +221,7 @@
font-size: 26px; font-size: 26px;
font-family: PingFang SC; font-family: PingFang SC;
font-weight: 500; font-weight: 500;
color: #FEFEFE; /* color: #FEFEFE; */
line-height: 34px; line-height: 34px;
text-align: center; text-align: center;
} }
...@@ -163,7 +233,6 @@ ...@@ -163,7 +233,6 @@
width: 335px; width: 335px;
height: 189px; height: 189px;
overflow: hidden; overflow: hidden;
background: #2A2A2A;
border: 2px solid #FFFFFF; border: 2px solid #FFFFFF;
border-radius: 18px; border-radius: 18px;
} }
...@@ -171,12 +240,13 @@ ...@@ -171,12 +240,13 @@
font-size: 26px; font-size: 26px;
font-family: PingFang SC; font-family: PingFang SC;
font-weight: 500; font-weight: 500;
color: #FEFEFE;
line-height: 34px; line-height: 34px;
} }
.travelDaysContent{ .travelDaysContent{
max-height: 468px;
line-height: 38px; line-height: 38px;
padding: 41px 44px 47px 44px; padding: 41px 44px 47px 44px;
overflow: hidden;
} }
.travelDaysContent-text{ .travelDaysContent-text{
font-size: 21px; font-size: 21px;
...@@ -192,13 +262,13 @@ ...@@ -192,13 +262,13 @@
padding: 0 36px 115px 36px; padding: 0 36px 115px 36px;
} }
.travelDaysdetailsBJ{ .travelDaysdetailsBJ{
border-radius: 45px; border-radius: 100px;
flex-wrap: wrap; flex-wrap: wrap;
padding: 20px 35px; padding: 20px 35px;
-webkit-border-radius: 45px; -webkit-border-radius: 100px;
-moz-border-radius: 45px; -moz-border-radius: 100px;
-ms-border-radius: 45px; -ms-border-radius: 100px;
-o-border-radius: 45px; -o-border-radius: 100px;
} }
.travelDaysdetails-text{ .travelDaysdetails-text{
flex-wrap: nowrap; flex-wrap: nowrap;
...@@ -220,3 +290,76 @@ ...@@ -220,3 +290,76 @@
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
.UpgradedVersion-box{
width: 1123px;
height: 1588px;
overflow: hidden;
}
.UpgradedVersion-homebj{
background: url('http://192.168.10.214:8130/Upload/NewTripFeature/otherBjTwo.png')no-repeat center;
background-size: 100% 100%;
}
.UpgradedVersion-introduceBj{
background: url('http://192.168.10.214:8130/Upload/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;
}
src/components/LeaveGroupDownload/travelDays.vue
View file @ 20c3e76a
...@@ -25,26 +25,26 @@ ...@@ -25,26 +25,26 @@
</div> </div>
<div class="travelDaysTitlle-right"> <div class="travelDaysTitlle-right">
<div class="travelDaysTitlle-right-text" <div class="travelDaysTitlle-right-text"
:style="{'background': TripColor,'font-size':'30px'}"> :style="{'background': TripColor,'font-size': getFontSize(title),'color':textColor}">
北京-马德里-塞戈维亚-萨拉曼卡-贝尼多姆/小镇-瓦伦西亚-巴 {{title}}
塞罗那（约 253km，约 3h）
</div> </div>
</div> </div>
</div> </div>
<div class="travelDaysMasterMap relative"> <div class="travelDaysMasterMap relative"
:style="{'color':textColorOne}">
<div class="travelDaysMasterMap-one"> <div class="travelDaysMasterMap-one">
<div class="travelDaysMasterMap-oneImg"> <div class="travelDaysMasterMap-oneImg bjF6" id="uploadImg">
<img src="http://192.168.10.214:8130/Upload/NewTripFeature/homeBj.png"> <img src="http://192.168.10.214:8130/Upload/NewTripFeature/homeBj.png">
</div> </div>
<div class="travelDaysMasterMap-text absolute z-index2">塞维利亚西班牙广场</div> <div class="travelDaysMasterMap-text absolute z-index2">塞维利亚西班牙广场</div>
</div> </div>
<div class="travelDaysMasterMap-two absolute z-index2"> <div class="travelDaysMasterMap-two absolute z-index2">
<div class="travelDaysMasterMap-twoImg relative"> <div class="travelDaysMasterMap-twoImg relative bjF6">
<img src="http://192.168.10.214:8130/Upload/NewTripFeature/homeBj.png"> <img src="http://192.168.10.214:8130/Upload/NewTripFeature/homeBj.png">
<div class="travelDaysMasterMap-text textTwo absolute z-index2">【米其林烤乳猪】</div> <div class="travelDaysMasterMap-text textTwo absolute z-index2">【米其林烤乳猪】</div>
</div> </div>
<div class="travelDaysMasterMap-twoImg relative" style="margin-top: 47px;"> <div class="travelDaysMasterMap-twoImg relative bjF6" style="margin-top: 47px;">
<img src="http://192.168.10.214:8130/Upload/NewTripFeature/homeBj.png"> <img src="http://192.168.10.214:8130/Upload/NewTripFeature/homeBj.png">
<div class="travelDaysMasterMap-text textTwo absolute z-index2">【米其林烤乳猪】</div> <div class="travelDaysMasterMap-text textTwo absolute z-index2">【米其林烤乳猪】</div>
</div> </div>
...@@ -56,6 +56,25 @@ ...@@ -56,6 +56,25 @@
<span>【塞维利亚斗牛场】</span> <span>【塞维利亚斗牛场】</span>
（外观，约 20 分钟）西班牙历史最悠久的斗牛场。每年举行的“阿布利尔节”的场所 （外观，约 20 分钟）西班牙历史最悠久的斗牛场。每年举行的“阿布利尔节”的场所
</div> </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>
<div class="travelDaysdetails"> <div class="travelDaysdetails">
...@@ -79,6 +98,20 @@ ...@@ -79,6 +98,20 @@
</div> </div>
</div> </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>
</div> </div>
...@@ -95,91 +128,21 @@ ...@@ -95,91 +128,21 @@
props: ['TripColor'], props: ['TripColor'],
data() { data() {
return { return {
title: '北京-马德里-塞戈维亚-萨拉曼卡-贝尼多姆/小镇-瓦伦西亚-巴塞罗那（约 253km，约 3h）北京-马德里-塞戈维亚-萨拉曼卡-贝尼多姆/小镇-瓦伦西亚-巴塞罗那（约 253km，约 3h）',
day: 'DAY', day: 'DAY',
backgroundColor: '' backgroundColor: '',
textColor: '',
textColorOne: '',
}; };
}, },
methods: { methods: {
UploadImg(index,type) { getFontSize(title){
this.MasterMapIndex = index?index:0 if(title.length>60){
if(type) this.StencilDrawing = true return 929/60 +'px'
else this.StencilDrawing = false
if(this.FeatureItem.pageType==2){
document.querySelector(`#introducefile_${(this.index * 2 + 1)}_0`).click();
}else{ }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 @@ ...@@ -189,6 +152,15 @@
TripColor: { TripColor: {
handler(val, oldVal) { handler(val, oldVal) {
this.backgroundColor = this.hexToRgb(val, 0.15) 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, deep: false,
immediate: true immediate: true
...@@ -202,14 +174,25 @@ ...@@ -202,14 +174,25 @@
// }, // },
}, },
mounted() { mounted() {
let bj = 'http://192.168.10.214:8130/Upload/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> </script>
<style> <style>
@import url("../../assets/css/UpgradedVersion.css");
</style> </style>
src/components/TravelManager/TravelGroupControl/TravelNotice.vue
View file @ 20c3e76a
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
v-bind:toolbarShow="toolbar" v-bind:referenceList="FeeNonIncludeArr"></my-edit> v-bind:toolbarShow="toolbar" v-bind:referenceList="FeeNonIncludeArr"></my-edit>
<div class="TNtitle NotContain"> <div class="TNtitle NotContain">
自费安排== 自费安排
</div> </div>
<table class="TFTable TNtable"> <table class="TFTable TNtable">
<thead> <thead>
......
src/plug/index.js
View file @ 20c3e76a
...@@ -1739,6 +1739,71 @@ export default { ...@@ -1739,6 +1739,71 @@ export default {
var b = parseInt(rgb[3], 16); var b = parseInt(rgb[3], 16);
return 'rgba(' + r + ',' + g + ',' + b + ',' + opc + ')'; 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) { Vue.prototype.base64ToBlob = function (code) {
let parts = code.split(";base64,"); let parts = code.split(";base64,");
let contentType = parts[0].split(":")[1]; 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