124 lines
2.8 KiB
Vue
124 lines
2.8 KiB
Vue
|
<template>
|
||
|
|
<transition enter-class="animate__fadeIn"
|
||
|
|
enter-to-class="animate__fadeIn"
|
||
|
|
enter-active-class="animate__fadeIn"
|
||
|
|
leave-class="animate__fadeOut"
|
||
|
|
leave-to-class="animate__fadeOut"
|
||
|
|
leave-active-class="animate__fadeOut"
|
||
|
|
appear>
|
||
|
|
<div class="form-dialog animate__animated">
|
||
|
|
<div class="dialog-wrap">
|
||
|
|
<div class="dialog-content-box" :class="{'dialog-content-box2':styleType == 1 || isDockingToWoer}">
|
||
|
|
<i class="el-icon-close close-btn" @click="closeDialog"></i>
|
||
|
|
<div class="dialog-title" :class="{'dialog-title2':styleType == 1 || isDockingToWoer}" v-if="title">{{title}}</div>
|
||
|
|
<div class="dialog-content">
|
||
|
|
<vue-scroll>
|
||
|
|
<slot name="content"></slot>
|
||
|
|
</vue-scroll>
|
||
|
|
</div>
|
||
|
|
<div class="dialog-bottom">
|
||
|
|
<slot name="bottom"></slot>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</transition>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: "formDialog",
|
||
|
|
props: {
|
||
|
|
title: {
|
||
|
|
type: String,
|
||
|
|
default: "",
|
||
|
|
isDockingToWoer: ""
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data(){
|
||
|
|
return{
|
||
|
|
styleType:1
|
||
|
|
}
|
||
|
|
},
|
||
|
|
created(){
|
||
|
|
this.isDockingToWoer = isDockingToWoer
|
||
|
|
this.styleType = this.$store.state.userInfo.styleType
|
||
|
|
},
|
||
|
|
mounted(){
|
||
|
|
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
closeDialog(){
|
||
|
|
this.$emit('closeDialog')
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="less" scoped>
|
||
|
|
@import "./../../assets/css/animate/animate.min.css";
|
||
|
|
.form-dialog{
|
||
|
|
position: fixed;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
bottom: 0;
|
||
|
|
right: 0;
|
||
|
|
height: 100%;
|
||
|
|
overflow: hidden;
|
||
|
|
z-index: 10;
|
||
|
|
}
|
||
|
|
.dialog-wrap{
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
background: rgba(0,0,0,0.5);
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
.dialog-content-box{
|
||
|
|
position: absolute;
|
||
|
|
left: 50%;
|
||
|
|
top: 50%;
|
||
|
|
transform: translate(-50%,-50%);
|
||
|
|
min-width: 360px;
|
||
|
|
background: #17274A;
|
||
|
|
border-radius: 21px;
|
||
|
|
box-shadow: 0px 8px 12px 4px rgba(23, 31, 60, 0.76);
|
||
|
|
}
|
||
|
|
.dialog-content-box2{
|
||
|
|
background-color: #fff;
|
||
|
|
.el-icon-close{
|
||
|
|
color: #000;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.close-btn{
|
||
|
|
font-size: 18px;
|
||
|
|
position: absolute;
|
||
|
|
right: 26px;
|
||
|
|
top: 24px;
|
||
|
|
cursor: pointer;
|
||
|
|
z-index: 5;
|
||
|
|
}
|
||
|
|
.dialog-title{
|
||
|
|
width: 20%;
|
||
|
|
height: 50px;
|
||
|
|
margin: 0 auto;
|
||
|
|
white-space: nowrap;
|
||
|
|
font-size: 18px;
|
||
|
|
line-height: 50px;
|
||
|
|
text-align: center;
|
||
|
|
color: #fff;
|
||
|
|
padding: 0 40px;
|
||
|
|
background: url('./../../assets/images/dialog-title.png') center no-repeat;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
}
|
||
|
|
.dialog-title2{
|
||
|
|
background: white;
|
||
|
|
color: #000000;
|
||
|
|
}
|
||
|
|
.animate__animated.animate__fadeIn {
|
||
|
|
--animate-duration: 0.6s;
|
||
|
|
}
|
||
|
|
.animate__animated.animate__fadeOut {
|
||
|
|
--animate-duration: 0.6s;
|
||
|
|
}
|
||
|
|
</style>
|