边框由标题和主体两部分组成。背景四个角为异形角标.上下各有两条渐变线图装饰。
如果您需要设计属于自己的数据可视化大屏或数据可视化大屏开发 请联系我们微信:17331886870
效果图
组件代码
<template>
<div class="item1Body">
<bg></bg>
<div class="item1BodyInner">
<slot></slot>
</div>
</div>
</template>
<script>
import bg from './bg.vue'
export default {
data() {
return {}
},
components: {bg},
computed: {},
mounted() {
var that = this;
},
methods: {},
filters: {},
watch: {}
}
</script>
<style lang="scss" scoped>
.item1Body {
position: relative;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
align-content: flex-start;
.item1BodyInner {
background: rgba(#3851A9, 0.2);
border: 2px solid #3DABF2;
width: calc(100% - 6px);
height: calc(100% - 6px);
position: relative;
z-index: 1;
}
}
</style>
背景代码
/**
* @Author: 858834013@qq.com
* @Name: gridView
* @Date: 2023年06月01日15:14:45
* @Desc: 仿安卓.9图九宫格效果
*/
<template>
<div class="gridView">
<!-- 左上角-->
<div class="gLeftTop"></div>
<div class="line1"></div>
<!-- 右上角-->
<div class="gRightTop"></div>
<!-- 左下角-->
<div class="gLeftBottom"></div>
<!-- 右下角-->
<div class="line2"></div>
<div class="gRightBottom"></div>
</div>
</template>
<script>
export default {
name: "gridView"
}
</script>
<style lang="scss" scoped>
.gridView {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
min-height: 80px;
min-width: 250px;
bottom: 0;
right: 0;
z-index: 5;
pointer-events: none; //避免div层被点击
//左上角
.gLeftTop {
background: url("./assets/icon_left_top.png") no-repeat;
background-size: 100% 100%;
position: absolute;
left: 0;
top: 0;
width: 45px;
height: 47px;
}
//右上角
.gRightTop {
background: url("./assets/icon_right_top.png") no-repeat;
background-size: 100% 100%;
position: absolute;
right: 0;
top: 0;
width: 45px;
height: 47px;
}
//左下角
.gLeftBottom {
background: url("./assets/icon_left_bottom.png") no-repeat;
background-size: 100% 100%;
position: absolute;
left: 0;
bottom: 0;
width: 45px;
height: 49px;
}
//右下角
.gRightBottom {
background: url("./assets/icon_right_bottom.png") no-repeat;
background-size: 100% 100%;
position: absolute;
right: 0;
bottom: 0;
width: 45px;
height: 49px;
}
.line1 {
position: absolute;
top: -5px;
width: 100%;
height: 17px;
background: url("./assets/line1.png") center center no-repeat;
background-size: 650px 17px;
}
.line2 {
position: absolute;
bottom: -5px;
width: 100%;
height: 17px;
background: url("./assets/line2.png") center center no-repeat;
background-size: 650px 17px;
}
}
</style>