边框由标题和主体两部分组成。上下异形边框效果。
如果您需要设计属于自己的数据可视化大屏或数据可视化大屏开发 请联系我们微信:17331886870
组件代码
/**
* @Author: 858834013@qq.com
* @Name: pageItem
* @Date: 2023年06月20日15:49:31
* @Desc: vue3 数据可视化大屏蓝色边框-四角加梯形标题样式
*/
<template>
<div class="pageItemBody">
<div class="titleBody">
<div class="titleBody1"></div>
<div class="titleBody2">
<span>{{ title }}</span>
</div>
<div class="titleBody3"></div>
</div>
<div class="itemMain">
<slot></slot>
</div>
<bg></bg>
</div>
</template>
<script>
import bg from './bg.vue'
export default {
name: "title",
data() {
return {}
},
components: {
bg
},
props: {
title: {
type: String,
default() {
return '标题';
}
},
},
watch: {},
mounted() {
var that = this;
},
}
</script>
<style lang="scss" scoped>
.pageItemBody {
width: 100%;
position: relative;
height: 100%;
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-wrap: nowrap;
flex-direction: column;
z-index: 1;
align-content: flex-start;
}
.itemMain {
position: relative;
width: 100%;
height: calc(100% - 60px);
}
.titleBody {
margin: auto;
width: auto;
height: 37px;
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
align-content: flex-start;
top: -10px;
opacity: 1;
z-index: 0;
.titleBody1 {
width: 21px;
height: 37px;
background: url("./assets/titlebg1.png") no-repeat;
}
.titleBody2 {
height: 37px;
background: url("./assets/titlebg2.png") no-repeat;
background-size: 100% 100%;
min-width: 200px;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
align-content: flex-start;
span {
font-size: 24px;
font-family: PangMenZhengDao;
font-weight: 400;
color: rgba(26, 228, 248, 1.00);
}
}
.titleBody3 {
width: 21px;
height: 37px;
background: url("./assets/titlebg3.png") no-repeat;
}
}
</style>
背景组件
/**
* @Author: 858834013@qq.com
* @Name: gridView
* @Date: 2023年06月20日15:50:04
* @Desc: 仿九宫背景
*/
<template>
<div class="gridView">
<!-- 左上角-->
<div class="gLeftTop"></div>
<!-- 顶部中间-->
<div class="gTopCenter"></div>.
<!-- 右上角-->
<div class="gRightTop"></div>
<!-- 中间部分-->
<div class="gCenterMain">
<!-- 左侧中间-->
<div class="gLeftCenter"></div>
<!-- 右侧中间-->
<div class="gRightCenter"></div>
<!-- 中间-->
<div class="gCenter"></div>
</div>
<!-- 左下角-->
<div class="gLeftBottom"></div>
<!-- 底部中间-->
<div class="gBottomCenter"></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: -1;
pointer-events: none; //避免div层被点击
//左上角
.gLeftTop {
background: url("./assets/left_top.png") no-repeat;
background-size: 100% 100%;
position: absolute;
left: 0;
width: 40PX;
height: 40PX;
}
//顶部中间
.gTopCenter {
width: calc(100% - 40PX - 40PX);
left: 40PX;
position: absolute;
height: 40PX;
background: url("./assets/top.png") repeat-x;
background-size: 100% 100%;
}
//右上角
.gRightTop {
background: url("./assets/right_top.png") no-repeat;
background-size: 100% 100%;
position: absolute;
right: 0;
top: 0;
width: 40PX;
height: 40PX;
}
//左下角
.gLeftBottom {
background: url("./assets/left_bottom.png") no-repeat;
background-size: 100% 100%;
position: absolute;
left: 0;
bottom: 0;
width: 40PX;
height: 40PX;
}
//底部中间
.gBottomCenter {
width: calc(100% - 40PX - 40PX);
left: 40PX;
bottom: 0;
position: absolute;
height: 40PX;
background: url("./assets/bottom.png") repeat-x;
background-size: 100% 100%;
}
//右下角
.gRightBottom {
background: url("./assets/right_bottom.png") no-repeat;
background-size: 100% 100%;
position: absolute;
right: 0;
bottom: 0;
width: 40PX;
height: 40PX;
}
//中间部分
.gCenterMain {
width: 100%;
height: calc(100% - 40PX - 40PX);
position: absolute;
top: 40PX;
bottom: 40PX;
//左侧中间
.gLeftCenter {
left: 0;
height: 100%;
position: absolute;
background: url("./assets/left_center.png") repeat-y;
background-size: 100%;
width: 40PX;
}
.gCenter {
width: calc(100% - 40PX - 40PX);
left: 40PX;
bottom: 0;
position: absolute;
height: 100%;
background: url("./assets/center.png") no-repeat;
background-size: 100% 100%;
}
//右侧中间
.gRightCenter {
height: 100%;
position: absolute;
right: 0;
background: url("./assets/right_center.png");
background-size: 100% 100%;
width: 40PX;
}
}
}
.zhuangshi {
position: absolute;
left: 0;
top: 20%;
z-index: 100;
img {
width: 5px;
height: 70px;
}
}
.line {
position: absolute;
left: 15%;
top: -21px;
z-index: 100;
img {
width: 136px;
height: 42px;
}
}
.line2 {
position: absolute;
left: 70%;
top: -21px;
z-index: 100;
img {
width: 136px;
height: 42px;
}
}
.line3 {
position: absolute;
left: -21px;
top: 60%;
z-index: 100;
img {
width: 43px;
height: 136px;
}
}
.line4 {
position: absolute;
right: -21px;
top: 30%;
z-index: 100;
img {
width: 43px;
height: 136px;
}
}
</style>
组件加工
将边框组件进行进一步加工,我们可以改造为一个弹窗样式:vue3 数据可视化大屏带动画弹窗组件-蓝色弹窗效果
更多边框组件
组件实例代码下载
项目代码 vue3 vite js nodejs 14