141 lines
3.0 KiB
Vue
141 lines
3.0 KiB
Vue
<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>
|