Commit 036d6bc6 authored by 黄奎's avatar 黄奎

页面修改

parent 2c0d4df8
<template> <template>
<div class="featureControls"> <div class="featureControls">
<div class="row-aic featureControls-bottom featureControls-bottomOne" <div class="row-aic featureControls-bottom featureControls-bottomOne" v-if="ControlsType=='row'">
v-if="ControlsType=='row'">
<el-tooltip class="item" effect="dark" content="添加页面" placement="top"> <el-tooltip class="item" effect="dark" content="添加页面" placement="top">
<div @click="toAddPages"> <div @click="toAddPages">
<i class="el-icon-plus"></i> <i class="el-icon-plus"></i>
...@@ -13,23 +12,21 @@ ...@@ -13,23 +12,21 @@
</div> </div>
</el-tooltip> </el-tooltip>
</div> </div>
<div class="column featureControls-bottom featureControls-bottomTwo" <div class="column featureControls-bottom featureControls-bottomTwo" v-else>
v-else>
<div v-if="isTemplate"> <div v-if="isTemplate">
<el-tooltip class="item" effect="dark" content="选模版" placement="top"> <el-tooltip class="item" effect="dark" content="选模版" placement="top">
<el-popover trigger="hover" placement="right"> <el-popover trigger="hover" placement="right">
<div class="featureControls-Template"> <div class="featureControls-Template">
<div class="Template-img relative" v-for="(item,index) in TemplateList" <div class="Template-img relative" v-for="(item,index) in TemplateList" @click="setTemplate(item)">
@click="setTemplate(item)"> <img :src="item.url" />
<img :src="item.url"/> <div v-if="item.id==TemplateType" class="Template-imgSelect absolute row-ajc el-icon-success"></div>
<div v-if="item.id==TemplateType" class="Template-imgSelect absolute row-ajc el-icon-success"></div> </div>
</div> </div>
</div> <div slot="reference" style="padding: 0;">
<div slot="reference" style="padding: 0;"> <i class="el-icon-copy-document"></i>
<i class="el-icon-copy-document"></i> </div>
</div> </el-popover>
</el-popover> </el-tooltip>
</el-tooltip>
</div> </div>
<el-tooltip class="item" effect="dark" content="上传图" placement="top"> <el-tooltip class="item" effect="dark" content="上传图" placement="top">
<div @click="toUploadImg" v-if="isUploadImg"> <div @click="toUploadImg" v-if="isUploadImg">
...@@ -38,18 +35,18 @@ ...@@ -38,18 +35,18 @@
</el-tooltip> </el-tooltip>
<el-tooltip class="item" effect="dark" content="选图" placement="top"> <el-tooltip class="item" effect="dark" content="选图" placement="top">
<div @click="toSelectImg" v-if="isSelectImg"> <div @click="toSelectImg" v-if="isSelectImg">
<i class="el-icon-search"></i> <i class="el-icon-search"></i>
</div>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="添加图" placement="top">
<div @click="toAddImg" v-if="isAddImg">
<i class="el-icon-plus"></i>
</div>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="删除图" placement="top">
<div @click="toDeleteImg" v-if="isDeleteImg">
<i class="el-icon-delete"></i>
</div> </div>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="添加图" placement="top">
<div @click="toAddImg" v-if="isAddImg">
<i class="el-icon-plus"></i>
</div>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="删除图" placement="top">
<div @click="toDeleteImg" v-if="isDeleteImg">
<i class="el-icon-delete"></i>
</div>
</el-tooltip> </el-tooltip>
</div> </div>
</div> </div>
...@@ -60,50 +57,50 @@ ...@@ -60,50 +57,50 @@
components: { components: {
}, },
props: ['index','FeatureData','ControlsType','pagesType','isDeletePage', props: ['index', 'FeatureData', 'ControlsType', 'pagesType', 'isDeletePage',
'isUploadImg','isSelectImg','isAddImg','isDeleteImg','isTemplate','Template'], 'isUploadImg', 'isSelectImg', 'isAddImg', 'isDeleteImg', 'isTemplate', 'Template'
],
data() { data() {
return { return {
TemplateType: 1, TemplateType: 1,
TemplateList:[ TemplateList: [{
{ url: 'http://192.168.10.214:8130/Upload/NewTripFeature/featureTemplateOne.png',
url:'http://192.168.10.214:8130/Upload/NewTripFeature/featureTemplateOne.png', id: 1,
id:1,
}, },
{ {
url:'http://192.168.10.214:8130/Upload/NewTripFeature/featureTemplateTwo.png', url: 'http://192.168.10.214:8130/Upload/NewTripFeature/featureTemplateTwo.png',
id:2, id: 2,
}, },
{ {
url:'http://192.168.10.214:8130/Upload/NewTripFeature/featureTemplateThree.png', url: 'http://192.168.10.214:8130/Upload/NewTripFeature/featureTemplateThree.png',
id:3, id: 3,
} }
] ]
}; };
}, },
methods: { methods: {
setTemplate(item){ setTemplate(item) {
this.TemplateType = item.id this.TemplateType = item.id
this.$emit('setTemplate',this.TemplateType) this.$emit('setTemplate', this.TemplateType)
}, },
toUploadImg(){ toUploadImg() {
this.$emit('toUploadImg') this.$emit('toUploadImg')
}, },
toSelectImg(){ toSelectImg() {
this.$emit('toSelectImg') this.$emit('toSelectImg')
}, },
toAddImg(){ toAddImg() {
this.$emit('toAddImg') this.$emit('toAddImg')
}, },
toDeleteImg(){ toDeleteImg() {
this.$emit('toDeleteImg') this.$emit('toDeleteImg')
}, },
toAddPages(){ toAddPages() {
// this.pagesType 1 首页 2 介绍 3餐食介绍 4宿 5食 6景 // this.pagesType 1 首页 2 介绍 3餐食介绍 4宿 5食 6景
this.$emit('toAddPages',this.index,this.FeatureData) this.$emit('toAddPages', this.index, this.FeatureData)
}, },
toDeletePages(){ toDeletePages() {
this.$emit('toDeletePages',this.index,this.FeatureData) this.$emit('toDeletePages', this.index, this.FeatureData)
}, },
}, },
computed: {}, computed: {},
...@@ -131,60 +128,71 @@ ...@@ -131,60 +128,71 @@
</script> </script>
<style> <style>
.featureControls{ .featureControls {
opacity: 0; opacity: 0;
transition: opacity 2s ease; transition: opacity 2s ease;
-webkit-transition: opacity 2s ease; -webkit-transition: opacity 2s ease;
-moz-transition: opacity 2s ease; -moz-transition: opacity 2s ease;
-ms-transition: opacity 2s ease; -ms-transition: opacity 2s ease;
-o-transition: opacity 2s ease; -o-transition: opacity 2s ease;
} }
.featureControls-bottom{
font-size: 20px; .featureControls-bottom {
color: #fff; font-size: 20px;
cursor: pointer; color: #fff;
background: rgba(0, 0, 0, 0.7); cursor: pointer;
border-radius: 2px; background: rgba(0, 0, 0, 0.7);
} border-radius: 2px;
.featureControls-bottomOne{ }
padding: 1px 10px;
} .featureControls-bottomOne {
.featureControls-bottomTwo{ padding: 1px 10px;
padding: 5px 0; }
}
.featureControls-bottomOne div{ .featureControls-bottomTwo {
padding: 0 5px; padding: 5px 0;
} }
.featureControls-bottomTwo div{
padding: 5px; .featureControls-bottomOne div {
} padding: 0 5px;
.featureControls-Template{ }
width: 150px;
top: -5px; .featureControls-bottomTwo div {
left: 85px; padding: 5px;
background: #fff; }
border: 4px;
} .featureControls-Template {
.featureControls-Template div{ width: 150px;
padding: 0; top: -5px;
} left: 85px;
.Template-img{ background: #fff;
background: #e6e6e6; border: 4px;
margin: 5px 8px; }
border-radius: 4px;
overflow: hidden; .featureControls-Template div {
} padding: 0;
.Template-img img{ }
width: 100%;
padding: 10px; .Template-img {
display: block; background: #e6e6e6;
} margin: 5px 8px;
.Template-imgSelect{ border-radius: 4px;
background: rgba(0, 0, 0, 0.7); overflow: hidden;
left: 0; }
top: 0;
right: 0; .Template-img img {
bottom: 0; width: 100%;
color: #e95252; padding: 10px;
} display: block;
}
.Template-imgSelect {
background: rgba(0, 0, 0, 0.7);
left: 0;
top: 0;
right: 0;
bottom: 0;
color: #e95252;
}
</style> </style>
<template> <template>
<div class="UpgradedVersion-headerTitle"> <div class="UpgradedVersion-headerTitle">
<div class="UpgradedVersion-headerTitle-one absolute z-index1"> <div class="UpgradedVersion-headerTitle-one absolute z-index1">
<vEditDiv :canEdit='canEdit' v-model="first"></vEditDiv> <vEditDiv :canEdit='canEdit' v-model="FeatureItem.dataObj.LtName"></vEditDiv>
</div> </div>
<div class="UpgradedVersion-headerTitle-two absolute z-index2"> <div class="UpgradedVersion-headerTitle-two absolute z-index2">
<vEditDiv :canEdit='canEdit1' v-model="first1"></vEditDiv> <vEditDiv :canEdit='canEdit1' v-model="FeatureItem.dataObj.Title"></vEditDiv>
</div>
<div class="UpgradedVersion-headerTitle-three absolute z-index1" :style="{'background':backgroundColor}">&nbsp;
</div> </div>
<div class="UpgradedVersion-headerTitle-three absolute z-index1"
:style="{'background':backgroundColor}">&nbsp;</div>
<!-- <img class="UpgradedVersion-headerTitle-three absolute z-index1" <!-- <img class="UpgradedVersion-headerTitle-three absolute z-index1"
src="http://192.168.10.214:8130/Upload/NewTripFeature/textBj.png" /> --> src="http://192.168.10.214:8130/Upload/NewTripFeature/textBj.png" /> -->
</div> </div>
...@@ -21,12 +21,11 @@ ...@@ -21,12 +21,11 @@
}, },
props: [ props: [
'TripColor', 'TripColor',
'FeatureData' 'FeatureItem'
], ],
data() { data() {
return { return {
first: '森之京都~椿山庄.风景美术馆日本平系列',
first1: '温泉.美食.叡山铁道秋枫漫游之旅',
canEdit: true, canEdit: true,
canEdit1: true, canEdit1: true,
backgroundColor: null backgroundColor: null
...@@ -39,7 +38,7 @@ ...@@ -39,7 +38,7 @@
watch: { watch: {
TripColor: { TripColor: {
handler(val, oldVal) { handler(val, oldVal) {
this.backgroundColor = this.hexToRgb(val,0.6) this.backgroundColor = this.hexToRgb(val, 0.6)
}, },
deep: false, deep: false,
immediate: true immediate: true
...@@ -53,40 +52,47 @@ ...@@ -53,40 +52,47 @@
</script> </script>
<style> <style>
.UpgradedVersion-headerTitle{ .UpgradedVersion-headerTitle {
text-align: center; text-align: center;
} }
.UpgradedVersion-headerTitle-one{
top: 139px; .UpgradedVersion-headerTitle-one {
left: 124px; top: 139px;
right: 124px; left: 124px;
height: 53px; right: 124px;
font-size: 49px; height: 53px;
font-family: FZCuSong-B09S; font-size: 49px;
font-weight: 400; font-family: FZCuSong-B09S;
color: #2A2A2A; font-weight: 400;
} color: #2A2A2A;
.UpgradedVersion-headerTitle-two{ }
top: 205px;
left: 144px; .UpgradedVersion-headerTitle-two {
right: 144px; top: 205px;
font-size: 34px; left: 144px;
font-family: Microsoft YaHei; right: 144px;
font-weight: 400; font-size: 34px;
color: #2A2A2A; font-family: Microsoft YaHei;
} font-weight: 400;
.UpgradedVersion-headerTitle-one .edit_div,.UpgradedVersion-headerTitle-two .edit_div{ color: #2A2A2A;
white-space: nowrap; }
overflow: hidden;
} .UpgradedVersion-headerTitle-one .edit_div,
.UpgradedVersion-headerTitle-two .edit_div{ .UpgradedVersion-headerTitle-two .edit_div {
height: 40px; white-space: nowrap;
} overflow: hidden;
.UpgradedVersion-headerTitle-three{ }
top: 237px;
left: 370px; .UpgradedVersion-headerTitle-two .edit_div {
width: 379px; height: 40px;
height: 14px; }
border-radius: 7px;
} .UpgradedVersion-headerTitle-three {
top: 237px;
left: 370px;
width: 379px;
height: 14px;
border-radius: 7px;
}
</style> </style>
...@@ -10,11 +10,10 @@ ...@@ -10,11 +10,10 @@
@toAddPages="AddPages" @toDeletePages="DeletePages"></featureHome> @toAddPages="AddPages" @toDeletePages="DeletePages"></featureHome>
<!-- 其余页 --> <!-- 其余页 -->
<div v-else> <div v-else>
<headerTitle :FeatureData="item" :TripColor="TripColor"></headerTitle> <headerTitle :FeatureItem="item" :TripColor="TripColor"></headerTitle>
<!-- 介绍、宿食景页 --> <!-- 介绍、宿食景页 -->
<otherJourney :index="index" :FeatureData="item" :TripColor="TripColor" @toAddPages="AddPages" <otherJourney :index="index" :FeatureItem="item" :TripColor="TripColor" @toAddPages="AddPages"
@toDeletePages="DeletePages" @setTemplate="setTemplate" @toDeletePages="DeletePages" @setTemplate="setTemplate" v-if="item.pageType!=1"></otherJourney>
v-if="item.name=='介绍'||item.name=='宿'||item.name=='食'||item.name=='景'"></otherJourney>
<!-- 食详情页 --> <!-- 食详情页 -->
<UpgradedVersionDetails :index="index" :FeatureData="item" :TripColor="TripColor" @toAddPages="AddPages" <UpgradedVersionDetails :index="index" :FeatureData="item" :TripColor="TripColor" @toAddPages="AddPages"
@toDeletePages="DeletePages" v-if="item.name=='食详情'"></UpgradedVersionDetails> @toDeletePages="DeletePages" v-if="item.name=='食详情'"></UpgradedVersionDetails>
...@@ -71,43 +70,38 @@ ...@@ -71,43 +70,38 @@
dataObj: {}, dataObj: {},
}, },
{ {
name: '介绍', pageTitle: '介绍',
id: 2, pageType: 2,
type: 2, pageTemplate: 0,
Template: 0,
isDeletePage: false, isDeletePage: false,
dataObj: {},
}, },
{ {
name: '食详情', pageTitle: '食详情',
id: 3, pageType: 3,
type: 3, pageTemplate: 0,
Template: 0,
isDeletePage: false, isDeletePage: false,
dataObj: {}, dataObj: {},
}, },
{ {
name: '宿', pageTitle: '宿',
id: 4, pageType: 4,
type: 4,
isDeletePage: false, isDeletePage: false,
Template: 1, pageTemplate: 1,
dataObj: {}, dataObj: {},
}, },
{ {
name: '食', pageTitle: '食',
id: 5, pageType: 5,
type: 5,
isDeletePage: false, isDeletePage: false,
Template: 2, pageTemplate: 2,
dataObj: {}, dataObj: {},
}, },
{ {
name: '景', pageTitle: '景',
id: 6, pageType: 6,
type: 6,
isDeletePage: false, isDeletePage: false,
Template: 3, pageTemplate: 3,
dataObj: {}, dataObj: {},
} }
] ]
...@@ -156,15 +150,30 @@ ...@@ -156,15 +150,30 @@
Title: this.FeatureData.Title, Title: this.FeatureData.Title,
AreaName: "大阪 京都 富士山 伊豆 都 H", //地区 AreaName: "大阪 京都 富士山 伊豆 都 H", //地区
AreaName2: "冲绳 大阪城公园湖 伊豆 H", //地区 AreaName2: "冲绳 大阪城公园湖 伊豆 H", //地区
IndexName: "名称", IndexName: "浅草寺 Senso-ji Temple",
ImgList: [{url:"https://imgfile.oytour.com/Upload/Temporary/202308161225403150000000099.jpg"}], ImgList: [{
IndexDesc: "描述信息", url: "http://imgfile.oytour.com/Upload/DMC/DsrkBYw5MnQnzk2WzksZ4knrrKFbeP3a.jpg"
}],
IndexDesc: "东京最著名、最古老的寺庙,也是日本的门脸、浅草的象征。频繁的庙会活动让你零距离感受日本江户风俗。据说寺内有一座在公元628年偶然被当地渔民打捞上来的观音金像,每年都有许多人前来寺庙祈福保平安。院内有雷门、五重塔等著名古迹;还有90余家商铺的仲见世商店街,可以买到当地特产和吉祥物。在浅草寺可以求签问凶吉,如果不走运抽到了“凶”,和当地人一样系在抽签的地方就可以驱散霉运了。",
};
}
//介绍页面
else if (pItem.pageType == 2) {
pItem.dataObj = {
LtName: this.FeatureData.LtName,
Title: this.FeatureData.Title,
MainName: "日本旅行专家",
SubName: "『印象日本』日本豪华游代名词",
ImgList: [{
url: "http://imgfile.oytour.com/Upload/DMC/a2Fn2zajwMsxNHaWPdD5idKJD8RyCG5H.jpg"
}],
IndexDesc: "印象日本独家使用京 都 车 站旁 的 京都 千 饭店 ~酒店房间 37 平 方公 尺! 房型 多样 设 计, 京都千饭店外观为京町家的格子风格,非常引人注目。饭店以「Personal Comfort Hotel」为概念所打造,意思就是追求每个人入住时的舒适感。从有着庭院的大厅穿过以京町家的内庭长廊为主题所建的信道,便可看见用玻璃纱创作的艺术装置随风轻柔地飘动着。再往旁边一看,眼前只见充满开放感的挑高空间。有如通往神社寺庙大门般的大型阶梯充满了存在感。在柔和的光线包围下,一瞬间忘了自己是身处在建筑物之中。让人联想到京都传统建筑的内部装潢没有刻意的高调奢华,但连小细节都做得非常精致,散发出古都特有的风情。低調沉穩的寬敞客房。讓入住者可以從陽台或窗邊觀賞庭園的綠色景緻,同時享受頂級的休閒時光。 ",
}; };
} }
}); });
} }
console.log("this.pageList",this.pageList); console.log("this.pageList", this.pageList);
}, },
}, },
computed: { computed: {
...@@ -181,7 +190,7 @@ ...@@ -181,7 +190,7 @@
mounted() { mounted() {
//调用初始化信息提示 //调用初始化信息提示
var that = this; var that = this;
that.initFeature(); that.initFeature();
that.MsgBus.$on("comUpTravel", function () { that.MsgBus.$on("comUpTravel", function () {
that.initFeature(); that.initFeature();
}); });
......
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