边框由标题和主体两部分组成。背景通过四个小角标图标进行定位显示,边线加内阴影效果进行装饰。
如果您需要设计属于自己的数据可视化大屏或数据可视化大屏开发 请联系我们微信:17331886870
效果图
组件代码
组件包含了三部分:标题 主体 背景。
主体部分放了一个插槽,通过插槽将其他组件插入到当前组件中。
组件使用
<div class="listItem">
<item13 title="item13绿色边框"></item13>
</div>
组件代码
<template>
<div class="pageItemBody">
<div class="titleInfo">
<titleCom :title="title"></titleCom>
</div>
<div class="itemMain">
<slot></slot>
</div>
<bg></bg>
</div>
</template>
<script>
import bg from './bg.vue'
import titleCom from './title.vue'
export default {
name: "title",
data() {
return {}
},
components: {
bg,
titleCom
},
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;
border: 1px solid #50b9ae;
box-shadow: 0 0 10px #50b9ae inset;
.titleInfo {
display: flex;
height: 80px;
position: relative;
width: calc(100% - 15px - 15px);
margin-left: 15px;
justify-content: flex-start;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
align-content: flex-start;
}
}
.itemMain {
position: relative;
width: 100%;
height: calc(100% - 80px);
}
</style>
背景组件
/**
* @Author: 858834013@qq.com
* @Name: gridView
* @Date: 2023年05月15日21:39:52
* @Desc: 仿安卓.9图九宫格效果
*/
<template>
<div class="gridView">
<!-- 左上角-->
<div class="gLeftTop"></div>
<!-- 右上角-->
<div class="gRightTop"></div>
<!-- 左下角-->
<div class="gLeftBottom"></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: 5px;
top: 5px;
width: 11PX;
height: 11PX;
}
//右上角
.gRightTop {
background: url("./assets/right_top.png") no-repeat;
background-size: 100% 100%;
position: absolute;
right: 5px;
top: 5px;
width: 11PX;
height: 11PX;
}
//左下角
.gLeftBottom {
background: url("./assets/left_bottom.png") no-repeat;
background-size: 100% 100%;
position: absolute;
left: 5px;
bottom: 5px;
width: 11PX;
height: 11PX;
}
//右下角
.gRightBottom {
background: url("./assets/right_bottom.png") no-repeat;
background-size: 100% 100%;
position: absolute;
right: 5px;
bottom: 5px;
width: 11PX;
height: 11PX;
}
}
</style>
标题组件
标题分为左中右三部分,宽度随着标题内部的文字的多少而自动增加
/**
* @Author: 858834013@qq.com
* @Name: title
* @Date: 2023年05月30日16:21:25
* @Desc: 标题组件
*/
<template>
<div class="titleCom">
<div class="titleCom1"></div>
<div class="titleCom2">{{ title }}</div>
<div class="titleCom3"></div>
</div>
</template>
<script>
export default {
name: "title",
props: {
title: {
type: String,
default() {
return '标题';
}
},
},
}
</script>
<style lang="scss" scoped>
.titleCom {
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
align-content: flex-start;
.titleCom1 {
width: 10px;
height: 34px;
background: url("./assets/titleImg1.png");
background-size: 100% 100%;
}
.titleCom2 {
background: url("./assets/titleImg2.png") repeat-x;
background-size: 100% 100%;
height: 34px;
padding: 0 10px;
font-size: 15px;
font-family: PingFang;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
align-content: flex-start;
font-weight: bold;
color: #00FFFC;
}
.titleCom3 {
width: 84px;
height: 34px;
background: url("./assets/titleImg3.png");
background-size: 100% 100%;
}
}
</style>