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