74 lines
1.7 KiB
Vue
74 lines
1.7 KiB
Vue
|
<template>
|
||
|
|
<div class="go-small-border">
|
||
|
|
<div class="border-content">
|
||
|
|
<div class="svg-content">
|
||
|
|
<img src="./assets/title.svg" class="svg" />
|
||
|
|
</div>
|
||
|
|
<div class="content">
|
||
|
|
<slot></slot>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script lang="ts">export default { name: "SmallBorder" }</script>
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
$border-radius: 10px;
|
||
|
|
$border-width: 2px;
|
||
|
|
$bg-color-start: rgba(14, 18, 27, 1);
|
||
|
|
$bg-color-end: rgba(14, 18, 27, 0.6);
|
||
|
|
$border-gradient-start: rgba(128, 128, 128, 0.3);
|
||
|
|
$border-gradient-end: rgba(128, 128, 128, 0);
|
||
|
|
|
||
|
|
@include go(small-border) {
|
||
|
|
position: relative;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
padding: 0;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
|
||
|
|
& .border-content {
|
||
|
|
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
padding: 0;
|
||
|
|
border-radius: $border-radius;
|
||
|
|
overflow: hidden;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
background: linear-gradient(to top, $bg-color-start, $bg-color-end);
|
||
|
|
|
||
|
|
|
||
|
|
&::before {
|
||
|
|
content: '';
|
||
|
|
position: absolute;
|
||
|
|
inset: 0;
|
||
|
|
border-radius: $border-radius;
|
||
|
|
padding: $border-width;
|
||
|
|
background: linear-gradient(to top, $border-gradient-start, $border-gradient-end);
|
||
|
|
// 实现边框遮罩效果，只显示边框区域
|
||
|
|
-webkit-mask:
|
||
|
|
linear-gradient(#fff, #fff) content-box,
|
||
|
|
linear-gradient(#fff, #fff);
|
||
|
|
-webkit-mask-composite: xor;
|
||
|
|
mask:
|
||
|
|
linear-gradient(#fff, #fff) content-box,
|
||
|
|
linear-gradient(#fff, #fff);
|
||
|
|
mask-composite: exclude;
|
||
|
|
pointer-events: none; // 确保点击能穿透到下层元素
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
& .svg-content {
|
||
|
|
// z-index: 2;
|
||
|
|
width: 100%;
|
||
|
|
height: 12%;
|
||
|
|
// background-color: antiquewhite;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|