kubbo/dvcp_v2_webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

构建版本修改

Browse Source
This commit is contained in:
aixianling
2022-08-12 11:20:51 +08:00
parent c3f6fbbffe
commit 98946c1e28
167 changed files with 845 additions and 3473 deletions
Download Patch File Download Diff File Expand all files Collapse all files

140
components/layout/AiDvPanel/borders/border3.vue Normal file
View File

@@ -0,0 +1,140 @@
<template>
<section class="border3">
<div class="bg">
<div class="bg-wrapper"></div>
<div class="header">
<div class="header-border">
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
</div>
<h2>{{ title }}</h2>
<div class="header-border">
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
</div>
</div>
<div class="bottom">
<div class="bottom-left">
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
</div>
<div class="bottom-right">
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
</div>
</div>
<div class="slot">
<slot/>
</div>
</div>
</section>
</template>
<script>
export default {
name: 'border3',
props: {title: String}
}
</script>
<style lang="scss" scoped>
.border3 {
width: 100%;
height: 100%;
box-sizing: border-box;
* {
box-sizing: border-box;
}
.bg {
position: relative;
height: 100%;
.bg-wrapper {
position: absolute;
top: 12px;
width: 100%;
height: calc(100% - 12px);
background: rgba(11, 24, 73, 0.3);
}
.bottom-left, .bottom-right, .header-border {
display: flex;
align-items: center;
position: relative;
justify-content: space-between;
width: 24%;
height: 1px;
.point {
width: 4px;
height: 1px;
background: #FFCD68;
}
}
.bottom {
display: flex;
justify-content: space-between;
position: absolute;
bottom: 0;
left: 0;
z-index: 1;
width: 100%;
height: 1px;
background: rgba(0, 133, 255, 0.5);
}
.header {
display: flex;
position: relative;
align-items: center;
justify-content: space-between;
height: 24px;
line-height: 24px;
text-align: center;
.header-border {
position: relative;
display: flex;
align-items: center;
width: 30%;
height: 1px;
background: rgba(0, 133, 255, 0.5);
}
h2 {
position: relative;
font-size: 18px;
color: #fff;
letter-spacing: 2px;
&::after {
position: absolute;
top: 50%;
left: 50%;
width: 120px;
height: 12px;
transform: translate(-50%, -50%);
content: ' ';
background: url(./../asset/border3Title.png) no-repeat;
background-size: 100% 100%;
opacity: 0.8;
}
}
}
.slot {
position: relative;
z-index: 1;
height: calc(100% - 34px);
padding: 0;
}
}
}
</style>