Skip to content

S
SuperMan
Commit c05ffbb6 authored by zhengke's avatar zhengke
Browse files
Options

修改

parent 0d827096
Hide whitespace changes
Inline Side-by-side
Showing with 121 additions and 129 deletions
src/components/WebSet/WebSiteEdit.vue
View file @ c05ffbb6
...@@ -71,6 +71,87 @@ ...@@ -71,6 +71,87 @@
cursor: pointer; cursor: pointer;
} }
.WebSiteEdit .temp-list-item {
position: relative;
}
.WebSiteEdit .temp-font {
position: absolute;
width: 210px;
height: 100%;
background: rgba(0, 0, 0, 0.3);
color: #fff;
font-size: 20px;
top: 0;
display: flex;
align-items: center;
justify-content: center;
}
.WebSite_item {
display: flex;
border-bottom: 1px solid #f6f6f6;
background-color: #fff;
}
.diy-component-preview .WebSite_item .temp-img {
flex-basis: calc(60% - 60px);
}
.temp-img img {
display: block;
width: 100%;
user-select: none;
pointer-events: none;
}
.WebSite_item .temp-info {
padding: 15px 20px 0;
flex-basis: 40%;
background-color: #fff;
}
.WebSite_item .temp-title {
margin: 0;
font-size: 18px;
font-weight: 500;
}
.temp-subtitle {
margin: 0;
width: 280px;
padding-top: 2px;
font-size: 15px;
font-weight: 700;
color: #999;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.diy-component-edit {
position: absolute;
top: 0;
bottom: 0;
left: 465px;
right: 0;
background: #fff;
padding: 20px;
overflow: auto;
min-width: 650px;
padding-right: 20%;
}
.group-tool {
margin-top: 20px;
}
.Movie_sj {
color: #333;
font-size: 14px;
margin-left: 20px;
}
</style> </style>
<template> <template>
<div class="WebSiteEdit"> <div class="WebSiteEdit">
...@@ -83,25 +164,54 @@ ...@@ -83,25 +164,54 @@
</el-option> </el-option>
</el-select> </el-select>
<div class="temp-list-wrap"> <div class="temp-list-wrap">
<div v-for="(subItem,subIndex) in detailsList" :key="subIndex" @click="AddData(subItem)"> <div v-for="(subItem,subIndex) in detailsList" class="temp-list-item" :key="subIndex"
@click="AddData(subItem)">
<img :src="subItem.TemplateData.CoverImg" :alt="subItem.SubTemplateName" /> <img :src="subItem.TemplateData.CoverImg" :alt="subItem.SubTemplateName" />
<div class="temp-font">{{subItem.SubTemplateName}}</div>
</div> </div>
</div> </div>
</div> </div>
<div class="WebSite_right"> <div class="WebSite_right">
<div class="WebSite_right_preview"> <div class="WebSite_right_preview">
<div v-for="(item,index) in dataList" :key="index"> <div v-for="(item,index) in dataList" :key="index">
<plugvideo v-if="item.Id=='white_label_video'" :plugData="item.plugData" :currentIndex="index"></plugvideo> <div class="diy-component-preview">
<plugpicture v-if="item.Id=='white_label_slider'" :plugData="item.plugData"></plugpicture> <div class="WebSite_item">
<div class="temp-img">
<img :src="item.plugData.CoverImg" alt="" />
</div>
<div class="temp-info">
<h2 class="temp-title">{{item.plugData.Title}}</h2>
<h3 class="temp-subtitle">
<template v-if="item.Id=='white_label_video'">
{{item.plugData.Describe}}
</template>
</h3>
<div class="group-tool">
<el-button type="primary" size="small" @click="isShowDialog=true">編輯</el-button>
<el-button type="danger" size="small">刪除</el-button>
<span class="Movie_sj">上架</span>
<el-switch v-model="item.plugData.isShelves" :active-value="1" :inactive-value="0" active-color="#13ce66"
inactive-color="#dcdfe6"></el-switch>
</div>
</div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<el-dialog title="版面區塊設定" :visible.sync="isShowDialog" width="900px">
<plugvideodialog :plugData="dialogData" ref="plugvideodialog"></plugvideodialog>
<span slot="footer" class="dialog-footer">
<el-button @click="isShowDialog = false" size="small">取 消</el-button>
<el-button type="danger" size="small" @click="setVideoInfo()">确 定</el-button>
</span>
</el-dialog>
</div> </div>
</template> </template>
<script> <script>
import plugvideo from "../WebSet/plug-in/video.vue" import plugvideodialog from "../WebSet/plug-in/video_dialog.vue"
import plugpicture from "../WebSet/plug-in/picture.vue"
export default { export default {
data() { data() {
return { return {
...@@ -113,12 +223,13 @@ ...@@ -113,12 +223,13 @@
dataList: [], dataList: [],
//模板详情列表 //模板详情列表
detailsList: [], detailsList: [],
isShowDialog:false,
dialogData:{}
}; };
}, },
created() {}, created() {},
components: { components: {
plugvideo, plugvideodialog
plugpicture
}, },
methods: { methods: {
//获取数据 //获取数据
...@@ -129,8 +240,10 @@ ...@@ -129,8 +240,10 @@
AddData(item) { AddData(item) {
var obj = { var obj = {
Id: item.TemplateKey, Id: item.TemplateKey,
plugData: item.TemplateData plugData: item.TemplateData,
isShelves:1
}; };
console.log(item);
this.dataList.push(obj); this.dataList.push(obj);
}, },
//获取下拉框 //获取下拉框
......
src/components/WebSet/plug-in/video.vue deleted 100644 → 0
View file @ 0d827096
<style>
.WebSite_item {
display: flex;
border-bottom: 1px solid #f6f6f6;
background-color: #fff;
}
.diy-component-preview .WebSite_item .temp-img {
flex-basis: calc(60% - 60px);
}
.temp-img img {
display: block;
width: 100%;
user-select: none;
pointer-events: none;
}
.WebSite_item .temp-info {
padding: 15px 20px 0;
flex-basis: 40%;
background-color: #fff;
}
.WebSite_item .temp-title {
margin: 0;
font-size: 18px;
font-weight: 500;
}
.temp-subtitle {
margin: 0;
width: 280px;
padding-top: 2px;
font-size: 15px;
font-weight: 700;
color: #999;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.diy-component-edit {
position: absolute;
top: 0;
bottom: 0;
left: 465px;
right: 0;
background: #fff;
padding: 20px;
overflow: auto;
min-width: 650px;
padding-right: 20%;
}
.group-tool {
margin-top: 20px;
}
.Movie_sj {
color: #333;
font-size: 14px;
margin-left: 20px;
}
</style>
<template>
<div>
<div class="diy-component-preview">
<div class="WebSite_item">
<div class="temp-img">
<img :src="plugData.CoverImg" alt="" />
</div>
<div class="temp-info">
<h2 class="temp-title">{{plugData.Title}}</h2>
<h3 class="temp-subtitle">
{{plugData.Describe}}
</h3>
<div class="group-tool">
<el-button type="primary" size="small" @click="isShowDialog=true">編輯</el-button>
<el-button type="danger" size="small">刪除</el-button>
<span class="Movie_sj">上架</span>
<el-switch v-model="plugData.isShelves" :active-value="1" :inactive-value="0" active-color="#13ce66"
inactive-color="#dcdfe6"></el-switch>
</div>
</div>
</div>
</div>
<el-dialog title="版面區塊設定" :visible.sync="isShowDialog" width="900px">
<plugvideodialog :plugData="dialogData" ref="plugvideodialog"></plugvideodialog>
<span slot="footer" class="dialog-footer">
<el-button @click="isShowDialog = false" size="small">取 消</el-button>
<el-button type="danger" size="small" @click="setVideoInfo()">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import plugvideodialog from "../plug-in/video_dialog.vue"
export default {
props: ["plugData", "currentIndex"],
data() {
return {
isShowDialog: false,
dialogData: JSON.parse(JSON.stringify(this.plugData)),
};
},
created() {},
components: {
plugvideodialog
},
methods: {
setVideoInfo() {
this.$parent.getsubplugdata(this.currentIndex, this.dialogData);
this.isShowDialog = false;
},
},
mounted() {}
};
</script>
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