<template>
|
<div class="square-box" :class="setFull">
|
<div class="square-box-mask"></div>
|
<!-- 左上 -->
|
<div class="square-box-left-top"></div>
|
<div class="square-box-left-top-tip"></div>
|
<!-- 右下 -->
|
<div class="square-box-right-bottom"></div>
|
<div class="square-box-right-bottom-tip"></div>
|
<!-- 右上 -->
|
<div class="square-box-right-top"></div>
|
<!-- 左下 -->
|
<div class="square-box-left-bottom"></div>
|
<div class="square-box-container">
|
<div class="square-box-title" v-if="showTitle"><Icon :type="icon" /><span class="square-box-title-text">{{title}}</span></div>
|
<div class="square-box-content" :style="getContentStyle">
|
<slot></slot>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script>
|
import $ from 'jquery'
|
export default {
|
props: {
|
minHeight: {
|
type: String,
|
default: '200px'
|
},
|
icon:{
|
type: String,
|
default: 'ios-help-buoy'
|
},
|
title: {
|
type: String,
|
default: ''
|
},
|
showTitle: {
|
type: Boolean,
|
default: true
|
},
|
full: false
|
},
|
data() {
|
return {
|
style: {
|
minHeight: this.minHeight
|
}
|
}
|
},
|
computed: {
|
setFull: function() {
|
if(typeof(this.full) != 'undefined') {
|
return {
|
'full-container': true
|
}
|
}
|
},
|
getContentStyle: function() {
|
var result = {
|
minHeight: this.minHeight
|
};
|
var root = $(this.$el);
|
if(typeof(this.full) != 'undefined') {
|
result.height = 'calc(100% - 95px)';
|
}
|
|
return result;
|
}
|
}
|
}
|
</script>
|
<style scoped>
|
.square-box::before {
|
content: "";
|
overflow: hidden;
|
}
|
.square-box {
|
position: relative;
|
}
|
.square-box.full-container {
|
height: 100%;
|
}
|
.square-box-mask {
|
position: absolute;
|
left: 0;
|
top:0;
|
right: 0;
|
bottom:0;
|
z-index: -1;
|
background-color: #22304F;
|
opacity: .5;
|
}
|
.square-box-container {
|
position: relative;
|
padding: 1px;
|
}
|
.square-box.full-container .square-box-container {
|
height: 100%;
|
}
|
.square-box-title {
|
margin: 15px;
|
}
|
.square-box-content {
|
margin: 15px;
|
}
|
.square-box-content.no-margin{
|
margin-left: 0;
|
margin-right: 0;
|
}
|
.square-box-left-top {
|
position: absolute;
|
left: 0;
|
top: 0;
|
width: 28px;
|
height: 28px;
|
border-top: 1px solid #37779B;
|
border-left: 1px solid #37779B;
|
z-index: 0;
|
}
|
.square-box-left-top-tip {
|
position: absolute;
|
left: 2px;
|
top: 2px;
|
width: 0;
|
height: 0;
|
border-width: 6px;
|
border-style: solid;
|
border-color: transparent;
|
border-top-color: #37779B;
|
border-left-color: #37779B;
|
z-index: 0;
|
}
|
.square-box-right-bottom {
|
position: absolute;
|
right: 0;
|
bottom: 0;
|
width: 28px;
|
height: 28px;
|
border-right: 1px solid #37779B;
|
border-bottom: 1px solid #37779B;
|
z-index: 0;
|
}
|
.square-box-right-bottom-tip {
|
position: absolute;
|
right: 2px;
|
bottom: 2px;
|
width: 0;
|
height: 0;
|
border-width: 6px;
|
border-style: solid;
|
border-color: transparent;
|
border-right-color: #37779B;
|
border-bottom-color: #37779B;
|
z-index: 0;
|
}
|
.square-box-right-top {
|
position: absolute;
|
right: 0;
|
top: 0;
|
width: 14px;
|
height: 14px;
|
border-right: 1px solid #37779B;
|
border-top: 1px solid #37779B;
|
z-index: 0;
|
}
|
.square-box-left-bottom {
|
position: absolute;
|
left: 0;
|
bottom: 0;
|
width: 14px;
|
height: 14px;
|
border-left: 1px solid #37779B;
|
border-bottom: 1px solid #37779B;
|
z-index: 0;
|
}
|
.square-box-title {
|
color: #438FB0;
|
font-size: 22px;
|
}
|
.square-box-title-text {
|
margin-left: 8px;
|
font-size: 16px;
|
}
|
</style>
|
