Skip to content

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

页面是修改

parent bc1126e8
Hide whitespace changes
Inline Side-by-side
Showing with 188 additions and 168 deletions
src/components/newTravelmanager/TravelGroupControl/UpgradedVersion/UpgradedVersionDetails.vue
View file @ 958a3385
<template> <template>
<div class="UpgradedVersionDetails-form absolute row-sb z-index1" <div class="UpgradedVersionDetails-form absolute row-sb z-index1" :style="{'background':backgroundColor}">
:style="{'background':backgroundColor}">
<div class="UpgradedVersionDetails-form-Box absolute UpgradedVersion-Hover"> <div class="UpgradedVersionDetails-form-Box absolute UpgradedVersion-Hover">
<div class="UpgradedVersionDetails-formBox1 absolute"> <div class="UpgradedVersionDetails-formBox1 absolute">
<FeatureControls <FeatureControls :index="index" :FeatureData="FeatureData" :ControlsType="'row'"
:index="index" :isDeletePage="FeatureData.isDeletePage" :pagesType="3" @toAddPages="toAddPages"
:FeatureData="FeatureData"
:ControlsType="'row'"
:isDeletePage="FeatureData.isDeletePage"
:pagesType="3"
@toAddPages="toAddPages"
@toDeletePages="toDeletePages"> @toDeletePages="toDeletePages">
</FeatureControls> </FeatureControls>
<input type="file" style="display:none" id='restaurantfile' @change="uploadpic"> <input type="file" style="display:none" id='restaurantfile' @change="uploadpic">
</div> </div>
</div> </div>
<div class="UpgradedVersionDetails-box column" v-for="(item,index) in 3"> <div class="UpgradedVersionDetails-box column" v-for="(item,index) in FeatureData.dataObj.SubList">
<div class="UpgradedVersionDetails-imgbox row-aic UpgradedVersion-Hover"> <div class="UpgradedVersionDetails-imgbox row-aic UpgradedVersion-Hover">
<div class="UpgradedVersionDetails-img relative"> <div class="UpgradedVersionDetails-img relative">
<div class="UpgradedVersionDetails1 absolute z-index1"> <div class="UpgradedVersionDetails1 absolute z-index1">
<FeatureControls <FeatureControls v-if="FeatureData" :index="index" :FeatureData="FeatureData" :isUploadImg="true"
v-if="FeatureData" :isSelectImg="true" @toUploadImg="UploadImg" @toSelectImg="SelectImg" @toAddImg="AddImg"
:index="index" @toDeleteImg="DeleteImg" />
:FeatureData="FeatureData"
:isUploadImg="true"
:isSelectImg="true"
@toUploadImg="UploadImg"
@toSelectImg="SelectImg"
@toAddImg="AddImg"
@toDeleteImg="DeleteImg"/>
</div> </div>
<div class="UpgradedVersionDetails-imgOne bjE6"> <div class="UpgradedVersionDetails-imgOne bjE6">
<img src="http://192.168.10.214:8130/Upload/NewTripFeature/homeBj.png"/> <template v-if="item.ImgList&&item.ImgList.length>0">
<img :src="item.ImgList[0].url" />
</template>
<template v-else>
<img src="http://192.168.10.214:8130/Upload/NewTripFeature/homeBj.png" />
</template>
</div> </div>
<div class="UpgradedVersionDetails-detailsTop absolute"></div> <div class="UpgradedVersionDetails-detailsTop absolute"></div>
</div> </div>
...@@ -39,24 +32,22 @@ ...@@ -39,24 +32,22 @@
<!-- UpgradedVersionDetails-two 02 UpgradedVersionDetails-three 03--> <!-- UpgradedVersionDetails-two 02 UpgradedVersionDetails-three 03-->
<div class="UpgradedVersionDetails-Title UpgradedVersionDetails-two"> <div class="UpgradedVersionDetails-Title UpgradedVersionDetails-two">
<div class="UpgradedVersionDetails-Img-one relative"> <div class="UpgradedVersionDetails-Img-one relative">
<div class="UpgradedVersionDetails-num relative" <div class="UpgradedVersionDetails-num relative" :style="{'color':TripColor}">
:style="{'color':TripColor}">
<span class="absolute">{{'0'+(index+1)}}</span> <span class="absolute">{{'0'+(index+1)}}</span>
</div> </div>
<div class="UpgradedVersionDetails-T absolute"> <div class="UpgradedVersionDetails-T absolute">
<vEditDiv :canEdit='canEdit1' v-model="first1"></vEditDiv> <vEditDiv :canEdit='canEdit1' v-model="item.MainDesc"></vEditDiv>
</div> </div>
</div> </div>
<div class="UpgradedVersionDetails-Img-two relative"> <div class="UpgradedVersionDetails-Img-two relative">
<template v-for="(items,indexs) in subscriptText"> <template v-for="(items,indexs) in subscriptText">
<p class="absolute row-sb" v-if="indexs==index" <p class="absolute row-sb" v-if="indexs==index" :style="{'color':TripColor}">
:style="{'color':TripColor}">
<span v-for="(t,i) in items.Name">{{t}}</span> <span v-for="(t,i) in items.Name">{{t}}</span>
</p> </p>
</template> </template>
</div> </div>
<div class="UpgradedVersionDetails-T-two"> <div class="UpgradedVersionDetails-T-two">
<vEditDiv :canEdit='canEdit' v-model="first"></vEditDiv> <vEditDiv :canEdit='canEdit' v-model="item.MainName"></vEditDiv>
</div> </div>
</div> </div>
</div> </div>
...@@ -82,26 +73,32 @@ ...@@ -82,26 +73,32 @@
], ],
data() { data() {
return { return {
first: '印象日本独家使用京 都 车 站旁 的 京都 千 饭店 ~酒店房间 37 平 方公 尺！ 房型 多样 设 计， 京都千饭店外观为京町家的格子风格，非常引人注目。饭店以「Personal Comfort Hotel」为概念所打造，意思就是追求每个人入住时的舒适感。从有着庭院的大厅穿过以京町家的内庭长廊为主题所建的信道，便可看见用玻璃纱创作的艺术装置随风轻柔地飘动着。再往旁边一看，眼前只见充满开放感的挑高空间。有如通往神社寺庙大门般的大型阶梯充满了存在感。在柔和的光线包围下，一瞬间忘了自己是身处在建筑物之中。让人联想到京都传统建筑的内部装潢没有刻意的高调奢华，但连小细节都做得非常精致，散发出古都特有的风情。低調沉穩的寬敞客房。讓入住者可以從陽台或窗邊觀賞庭園的綠色景緻，同時享受頂級的休閒時光。 ',
canEdit: true, canEdit: true,
first1: '日本料理',
canEdit1: true, canEdit1: true,
backgroundColor: null, backgroundColor: null,
subscriptText:[ subscriptText: [{
{Name:'FOODING',Id:0}, Name: 'FOODING',
{Name:'EXPERIENCE',Id:1}, Id: 0
{Name:'DELICIOUS',Id:2} },
{
Name: 'EXPERIENCE',
Id: 1
},
{
Name: 'DELICIOUS',
Id: 2
}
] ]
}; };
}, },
methods: { methods: {
UploadImg(){ UploadImg() {
}, },
uploadpic(e) { uploadpic(e) {
let that = this; let that = this;
if (e.target.files.length > 0 && e.target.files[0].size > 0) { if (e.target.files.length > 0 && e.target.files[0].size > 0) {
// 压缩图片需要的一些元素和对象 // 压缩图片需要的一些元素和对象
var reader = new FileReader(); var reader = new FileReader();
reader.onload = function (event) { reader.onload = function (event) {
let blob = that.base64ToBlob(event.target.result); let blob = that.base64ToBlob(event.target.result);
...@@ -118,27 +115,27 @@ ...@@ -118,27 +115,27 @@
reader.readAsDataURL(e.target.files[0]); reader.readAsDataURL(e.target.files[0]);
} }
}, },
SelectImg(){ SelectImg() {
this.isShowScenicImg = true this.isShowScenicImg = true
}, },
AddImg(){ AddImg() {
}, },
DeleteImg(){ DeleteImg() {
}, },
toAddPages(index,FeatureData){ toAddPages(index, FeatureData) {
this.$emit('toAddPages',index,FeatureData) this.$emit('toAddPages', index, FeatureData)
}, },
toDeletePages(index,FeatureData){ toDeletePages(index, FeatureData) {
this.$emit('toDeletePages',index,FeatureData) this.$emit('toDeletePages', index, FeatureData)
}, },
}, },
computed: {}, computed: {},
watch: { watch: {
TripColor: { TripColor: {
handler(val, oldVal) { handler(val, oldVal) {
this.backgroundColor = this.hexToRgb(val,0.15) this.backgroundColor = this.hexToRgb(val, 0.15)
}, },
deep: false, deep: false,
immediate: true immediate: true
...@@ -152,128 +149,147 @@ ...@@ -152,128 +149,147 @@
</script> </script>
<style> <style>
.UpgradedVersionDetails-form{ .UpgradedVersionDetails-form {
left: 0; left: 0;
top: 301px; top: 301px;
right: 0; right: 0;
padding: 43px 35px 0 35px; padding: 43px 35px 0 35px;
} }
.UpgradedVersionDetails-form-Box{
width: 100%; .UpgradedVersionDetails-form-Box {
height: 438px; width: 100%;
left: 0; height: 438px;
top: -40px; left: 0;
} top: -40px;
.UpgradedVersionDetails-formBox1{ }
top: 12px;
} .UpgradedVersionDetails-formBox1 {
.UpgradedVersionDetails-imgbox{ top: 12px;
}
.UpgradedVersionDetails-imgbox {}
.UpgradedVersionDetails-img {
width: 332px;
height: 332px;
background: #fff;
border-radius: 50%;
padding: 10px;
}
.UpgradedVersionDetails-imgOne {
left: 0;
top: 0;
width: 312px;
height: 312px;
border-radius: 50%;
overflow: hidden;
}
} .UpgradedVersionDetails-imgOne img {
.UpgradedVersionDetails-img{ left: 0;
width: 332px; top: 0;
height: 332px; width: 100%;
background: #fff; height: 100%;
border-radius: 50%; }
padding: 10px;
} .UpgradedVersionDetails-detailsTop {
.UpgradedVersionDetails-imgOne{ width: 40px;
left: 0; height: 56px;
top: 0; background: url("http://192.168.10.214:8130/Upload/NewTripFeature/detailsTop.png") no-repeat center;
width: 312px; background-size: 100% 100%;
height: 312px; left: 136px;
border-radius: 50%; bottom: -84px;
overflow: hidden; }
}
.UpgradedVersionDetails-imgOne img{ .UpgradedVersionDetails-Title {
left: 0; width: 276px;
top: 0; margin: 111px auto 44px;
width: 100%; padding: 0 26px;
height: 100%; }
}
.UpgradedVersionDetails-detailsTop{ .UpgradedVersionDetails-Img-one {
width: 40px; /* width: 72px;
height: 56px;
background: url("http://192.168.10.214:8130/Upload/NewTripFeature/detailsTop.png") no-repeat center;
background-size: 100% 100%;
left: 136px;
bottom: -84px;
}
.UpgradedVersionDetails-Title{
width: 276px;
margin: 111px auto 44px;
padding: 0 26px;
}
.UpgradedVersionDetails-Img-one{
/* width: 72px;
height: 32px; height: 32px;
background: url("http://192.168.10.214:8130/Upload/NewTripFeature/one.png") no-repeat center; background: url("http://192.168.10.214:8130/Upload/NewTripFeature/one.png") no-repeat center;
background-size: 100% 100%; */ background-size: 100% 100%; */
} }
.UpgradedVersionDetails-two .UpgradedVersionDetails-Img-one{
/* background: url("http://192.168.10.214:8130/Upload/NewTripFeature/two.png") no-repeat center; .UpgradedVersionDetails-two .UpgradedVersionDetails-Img-one {
/* background: url("http://192.168.10.214:8130/Upload/NewTripFeature/two.png") no-repeat center;
background-size: 100% 100%; */ background-size: 100% 100%; */
} }
.UpgradedVersionDetails-three .UpgradedVersionDetails-Img-one{
/* background: url("http://192.168.10.214:8130/Upload/NewTripFeature/three.png") no-repeat center; .UpgradedVersionDetails-three .UpgradedVersionDetails-Img-one {
/* background: url("http://192.168.10.214:8130/Upload/NewTripFeature/three.png") no-repeat center;
background-size: 100% 100%; */ background-size: 100% 100%; */
} }
.UpgradedVersionDetails-num{
height: 32px; .UpgradedVersionDetails-num {
overflow: hidden; height: 32px;
} overflow: hidden;
.UpgradedVersionDetails-num span{ }
font-size: 76px;
font-weight: bold; .UpgradedVersionDetails-num span {
/* font-family: FZCuSong-B09S; */ font-size: 76px;
left: 0; font-weight: bold;
top: -28px; /* font-family: FZCuSong-B09S; */
} left: 0;
.UpgradedVersionDetails-Img-two{ top: -28px;
width: 264px; }
height: 21px;
/* background: url("http://192.168.10.214:8130/Upload/NewTripFeature/fooding.png") no-repeat center; .UpgradedVersionDetails-Img-two {
width: 264px;
height: 21px;
/* background: url("http://192.168.10.214:8130/Upload/NewTripFeature/fooding.png") no-repeat center;
background-size: 100% 100%; */ background-size: 100% 100%; */
margin-top: 77px; margin-top: 77px;
margin-bottom: 20px; margin-bottom: 20px;
} }
.UpgradedVersionDetails-two .UpgradedVersionDetails-Img-two{
/* background: url("http://192.168.10.214:8130/Upload/NewTripFeature/experience.png") no-repeat center; .UpgradedVersionDetails-two .UpgradedVersionDetails-Img-two {
/* background: url("http://192.168.10.214:8130/Upload/NewTripFeature/experience.png") no-repeat center;
background-size: 100% 100%; */ background-size: 100% 100%; */
} }
.UpgradedVersionDetails-three .UpgradedVersionDetails-Img-two{
/* background: url("http://192.168.10.214:8130/Upload/NewTripFeature/delicious.png") no-repeat center; .UpgradedVersionDetails-three .UpgradedVersionDetails-Img-two {
/* background: url("http://192.168.10.214:8130/Upload/NewTripFeature/delicious.png") no-repeat center;
background-size: 100% 100%; */ background-size: 100% 100%; */
} }
.UpgradedVersionDetails-Img-two p{
left: 0; .UpgradedVersionDetails-Img-two p {
right: 0; left: 0;
font-size: 24px; right: 0;
font-weight: 500; font-size: 24px;
} font-weight: 500;
.UpgradedVersionDetails-T{ }
width: 276px;
height: 44px; .UpgradedVersionDetails-T {
overflow: hidden; width: 276px;
font-size: 38px; height: 44px;
font-family: FZCuSong-B09S; overflow: hidden;
font-weight: 400; font-size: 38px;
color: #2A2A2A; font-family: FZCuSong-B09S;
left: -7px; font-weight: 400;
bottom: -53px; color: #2A2A2A;
} left: -7px;
.UpgradedVersionDetails-T-two{ bottom: -53px;
width: 276px; }
height: 499px;
overflow: hidden; .UpgradedVersionDetails-T-two {
font-size: 23px; width: 276px;
font-family: Microsoft YaHei; height: 499px;
font-weight: 400; overflow: hidden;
color: #444444; font-size: 23px;
line-height: 42px; font-family: Microsoft YaHei;
} font-weight: 400;
.UpgradedVersionDetails1{ color: #444444;
left: 16px; line-height: 42px;
top: 122px; }
}
.UpgradedVersionDetails1 {
left: 16px;
top: 122px;
}
</style> </style>
src/components/newTravelmanager/TravelGroupControl/UpgradedVersion/index.vue
View file @ 958a3385
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
@toDeletePages="DeletePages" @setTemplate="setTemplate" v-if="item.pageType!=1"></otherJourney> @toDeletePages="DeletePages" @setTemplate="setTemplate" v-if="item.pageType!=1"></otherJourney>
<!-- 食详情页 --> <!-- 食详情页 -->
<UpgradedVersionDetails :index="index" :FeatureData="item" :TripColor="TripColor" @toAddPages="AddPages" <UpgradedVersionDetails :index="index" :FeatureData="item" :TripColor="TripColor" @toAddPages="AddPages"
@toDeletePages="DeletePages" v-if="item.pageTitle=='食详情'"></UpgradedVersionDetails> @toDeletePages="DeletePages" v-if="item.pageType==3"></UpgradedVersionDetails>
<!-- otherJourney-footer 食景 食详情 --> <!-- otherJourney-footer 食景 食详情 -->
<div v-if="item.pageTitle!='首页'" <div v-if="item.pageTitle!='首页'"
:class="{'otherJourney-footer':item.pageTitle=='食'||item.pageTitle=='景'||item.pageTitle=='食详情'}"> :class="{'otherJourney-footer':item.pageTitle=='食'||item.pageTitle=='景'||item.pageTitle=='食详情'}">
...@@ -146,6 +146,7 @@ ...@@ -146,6 +146,7 @@
DetailsName: "", //详细标题 DetailsName: "", //详细标题
ImgList: [], //图片 ImgList: [], //图片
MainDesc: "", //描述 MainDesc: "", //描述
SubList: [],
}; };
return detailsObj; return detailsObj;
}, },
...@@ -185,13 +186,16 @@ ...@@ -185,13 +186,16 @@
} }
//详情页面 //详情页面
else if (pItem.pageType == 3) { else if (pItem.pageType == 3) {
newObj.MainName = "详情页面"; var dinnerObj = {
newObj.SubName = "『印象日本』日本豪华游代名词"; MainName: "特色餐1",
newObj.ImgList = [{ ImgList: [{
url: "http://imgfile.oytour.com/Upload/DMC/a2Fn2zajwMsxNHaWPdD5idKJD8RyCG5H.jpg" url: "http://imgfile.oytour.com/Upload/DMC/a2Fn2zajwMsxNHaWPdD5idKJD8RyCG5H.jpg"
}]; }],
newObj.MainDesc = MainDesc: "特色餐描述"
"印象日本独家使用京 都 车 站旁 的 京都 千 饭店 ~酒店房间 37 平 方公 尺！ 房型 多样 设 计， 京都千饭店外观为京町家的格子风格，非常引人注目。饭店以「Personal Comfort Hotel」为概念所打造，意思就是追求每个人入住时的舒适感。从有着庭院的大厅穿过以京町家的内庭长廊为主题所建的信道，便可看见用玻璃纱创作的艺术装置随风轻柔地飘动着。再往旁边一看，眼前只见充满开放感的挑高空间。有如通往神社寺庙大门般的大型阶梯充满了存在感。在柔和的光线包围下，一瞬间忘了自己是身处在建筑物之中。让人联想到京都传统建筑的内部装潢没有刻意的高调奢华，但连小细节都做得非常精致，散发出古都特有的风情。低調沉穩的寬敞客房。讓入住者可以從陽台或窗邊觀賞庭園的綠色景緻，同時享受頂級的休閒時光。 "; };
newObj.SubList.push(dinnerObj);
newObj.SubList.push(dinnerObj);
newObj.SubList.push(dinnerObj);
} }
//酒店 //酒店
else if (pItem.pageType == 4) { else if (pItem.pageType == 4) {
......
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