<template>
<a-card :bordered="false">
<div class="box" :style="{'min-height': clientHeight + 'px'}">
<div class="home-box">
<!-- 左 -->
<div class="bor box-comtentLeft">
<draggable class="left" v-model="list1" group="people" :options="dragOptions">
<div v-for="item in list1" :key="item">
<div class="banner-box" v-if="item == 'banner'">
<span class="banner-text">轮播图</span>
<img
style="margin-left:30px"
src="../../../src/assets/image/banner.jpg"
width="80%"
/>
</div>
<div class="notice-box" v-if="item == 'notice'">
<div class="notice-text">
<img
style="margin-left:30px"
src="../../../src/assets/image/notice.jpg"
width="80%"
alt
/>
</div>
</div>
<div class="school-box" v-if="item == 'introduction'">
<span class="school-text">快捷入口</span>
<img
style="margin-left:30px"
src="../../../src/assets/image/schoolIntroduction.jpg"
width="80%"
alt
/>
</div>
<div class="trainBusiness-box" v-if="item == 'train'">
<img
style="margin-left:30px"
src="../../../src/assets/image/train.jpg"
width="80%"
alt
/>
</div>
<div class="contact-box" v-if="item == 'contactMy'">
<!-- 联系我们 -->
<img
style="margin-left:30px"
src="../../../src/assets/image/contactMy.jpg"
width="80%"
alt
/>
</div>
</div>
</draggable>
</div>
<!-- 双向箭头 -->
<div class="box-arrow">
<a-icon type="swap" class="arrow" />
</div>
<!-- 中间 -->
<div class="bor box-comtentMiddle">
<div class="box-middle-img">
<draggable class="right" v-model="list2" group="people" :options="dragOptions">
<div v-for="item in list2" :key="item" class="item">
<img
v-if="item == 'banner'"
style="margin-left:23px;"
src="../../../src/assets/image/banner.jpg"
width="80%"
/>
<img
v-if="item == 'notice'"
style="margin-left:20px;"
src="../../../src/assets/image/notice.jpg"
width="80%"
alt
/>
<img
v-if="item == 'introduction'"
style="margin-left:25px;"
src="../../../src/assets/image/schoolIntroduction.jpg"
width="80%"
alt
/>
<img
v-if="item == 'train'"
style="margin-left:20px;"
src="../../../src/assets/image/train.jpg"
width="80%"
alt
/>
<img
v-if="item == 'contactMy'"
style="margin-left:17px;"
src="../../../src/assets/image/contactMy.jpg"
width="80%"
alt
/>
</div>
</draggable>
</div>
<a-row class="but">
<a-button @click="empty">清空</a-button>
<a-button type="primary" style="margin-left:15px" @click="release">发布</a-button>
</a-row>
</div>
</div>
</div>
</a-card>
</template>
<script>
// 拖拽排版组件
import draggable from "vuedraggable"
import {homeConfigApi} from "@api/api"
export default {
name: "homeConfiger",
components: {
draggable
},
data() {
return {
clientHeight: document.documentElement.clientHeight - 185,
isTab: 1,
dragOptions: {
animation: 120,
scroll: true,
group: "sortlist",
ghostClass: "ghost-style"
},
list1: ["banner", "notice", "introduction", "train", "contactMy"],
list2: []
}
},
methods: {
//清空
empty() {
this.list1 = ["banner", "notice", "introduction", "train", "contactMy"]
this.list2 = []
},
//发布
release() {
let bannerIndex = this.list2.indexOf('banner')
let noticeIndex = this.list2.indexOf('notice')
let introductionIndex = this.list2.indexOf('introduction')
let trainIndex = this.list2.indexOf('train')
let contactMyIndex = this.list2.indexOf('contactMy')
const param = [
{moduleType:this.list2[0]},
{moduleType:this.list2[1]},
{moduleType:this.list2[2]},
{moduleType:this.list2[3]},
{moduleType:this.list2[4]},
]
param[bannerIndex].xcxLocation = 1
param[noticeIndex].xcxLocation = 2
param[introductionIndex].xcxLocation = 3
param[trainIndex].xcxLocation = 4
param[contactMyIndex].xcxLocation = 5
this.releaseOk(param)
},
//发布模块排序
releaseOk(param){
homeConfigApi(param).then(res=>{
if (res.statusBool) {
this.$message.success(res.message)
// this. empty()
} else {
this.$message.warning(res.message)
}
})
}
}
}
</script>
<style lang="less" scoped>
.home-box {
display: flex;
// justify-content: space-between;
}
.box-comtentMiddle {
margin-left: 0;
}
.box-comtentLeft {
border: 1px solid rgb(194, 193, 193);
border-radius: 10px;
}
.banner-box,
.notice-box,
.trainBusiness-box,
.contact-box,
.school-box {
margin: 5px;
border: 1px solid rgb(194, 193, 193);
border-radius: 10px;
}
.banner-text,
.school-text {
margin-left: 28px;
font-weight: 800;
font-size: 13px;
display: block;
}
.box-arrow {
margin-left: 40px;
text-align: center;
line-height: 600px;
}
.arrow {
font-size: 200px;
color: skyblue;
}
.box-middle-img {
margin-left: 50px;
padding-top: 13%;
width: 90%;
min-height: 93%;
padding-bottom: 20%;
box-sizing: border-box;
background-image: url("../../assets/image/iphone.png");
background-size: 90% 100%;
background-repeat: no-repeat;
}
.but {
position: relative;
top: 10px;
bottom: 0px;
left: 37%;
}
/*const*/
.left,
.right {
display: inline-block;
width: 50vh;
min-height: 68.7vh;
}
</style>