<template>
|
<div class="square-box">
|
<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="style">
|
<slot></slot>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script>
|
export default {
|
props: {
|
minHeight: {
|
type: String,
|
default: '200px'
|
},
|
icon:{
|
type: String,
|
default: 'ios-help-buoy'
|
},
|
title: {
|
type: String,
|
default: ''
|
},
|
showTitle: {
|
type: Boolean,
|
default: true
|
}
|
},
|
data() {
|
return {
|
style: {
|
minHeight: this.minHeight
|
}
|
}
|
}
|
}
|
</script>
|
<style scoped>
|
.square-box::before {
|
content: "";
|
overflow: hidden;
|
}
|
.square-box {
|
position: relative;
|
}
|
.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-title {
|
margin: 15px;
|
}
|
.square-box-content {
|
margin: 15px;
|
}
|
.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>
|
