139 lines
2.9 KiB
Vue
139 lines
2.9 KiB
Vue
<template>
|
|
<div class="techy-container">
|
|
<template v-if="showCorner">
|
|
<div class="line top left vertical" />
|
|
<div class="line top left horizontal" />
|
|
<div class="line top right vertical" />
|
|
<div class="line top right horizontal " />
|
|
<div class="line bottom right horizontal" />
|
|
<div class="line bottom right vertical" />
|
|
<div class="line bottom left vertical" />
|
|
<div class="line bottom left horizontal" />
|
|
</template>
|
|
|
|
<div class="container-title-wrapper">
|
|
<span class="container-icon" v-html="computeIcon" />
|
|
<span class="container-title">{{ title }}</span>
|
|
</div>
|
|
|
|
<slot />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
IconMenuOnly,
|
|
IconTriple,
|
|
IconPCTriple,
|
|
IconPCAlert,
|
|
IconMenuSearch,
|
|
IconSafetyHat,
|
|
IconTrend,
|
|
IconMenu1
|
|
} from './icons'
|
|
|
|
export default {
|
|
name: 'TechyContainer',
|
|
props: {
|
|
title: { type: String, default: '默认标题' },
|
|
icon: { type: String, default: 'defaultIcon' },
|
|
showCorner: {
|
|
type: Boolean,
|
|
default: true
|
|
}
|
|
},
|
|
computed: {
|
|
computeIcon() {
|
|
switch (this.icon) {
|
|
case '折角的菜单图标':
|
|
return IconMenu1
|
|
case '趋势放大镜图标':
|
|
return IconTrend
|
|
case '菜单放大镜图标':
|
|
return IconMenuSearch
|
|
case '安全帽图标':
|
|
return IconSafetyHat
|
|
case '电脑警告图标':
|
|
return IconPCAlert
|
|
case '电脑警告菜单图标':
|
|
return IconPCTriple
|
|
case '菱形叠加':
|
|
return IconTriple
|
|
default:
|
|
return IconMenuOnly
|
|
// more...
|
|
}
|
|
}
|
|
},
|
|
data() {
|
|
return {}
|
|
},
|
|
mounted() {}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.techy-container {
|
|
border: calc(2px * var(--beilv)) solid #52fff1;
|
|
border-image: linear-gradient(90deg, rgba(82, 255, 241, 0.6), rgba(95, 190, 249, 0), rgba(82, 255, 241, 0.6)) 2 2;
|
|
display: inline-block;
|
|
position: relative;
|
|
padding: calc(24px * var(--beilv));
|
|
width: 100%;
|
|
height: 100%;
|
|
box-shadow: inset 0px 0px 20px 0px rgba(255, 255, 255, 0.15);
|
|
background: rgba(6, 16, 39, 0.3);
|
|
backdrop-filter: blur(2px);
|
|
}
|
|
|
|
.line {
|
|
position: absolute;
|
|
background-color: #52fff1;
|
|
}
|
|
|
|
.horizontal {
|
|
height: calc(4px * var(--beilv));
|
|
width: calc(26px * var(--beilv));
|
|
}
|
|
|
|
.vertical {
|
|
height: calc(26px * var(--beilv));
|
|
width: calc(4px * var(--beilv));
|
|
}
|
|
|
|
.top {
|
|
top: calc(-3px * var(--beilv));
|
|
}
|
|
|
|
.left {
|
|
left: calc(-3px * var(--beilv));
|
|
}
|
|
|
|
.right {
|
|
right: calc(-3px * var(--beilv));
|
|
}
|
|
|
|
.bottom {
|
|
bottom: calc(-3px * var(--beilv));
|
|
}
|
|
|
|
.container-title-wrapper {
|
|
color: #52fff1;
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: calc(18px * var(--beilv));
|
|
line-height: 1;
|
|
margin-bottom: calc(8px * var(--beilv));
|
|
}
|
|
|
|
.container-title {
|
|
margin-left: calc(4px * var(--beilv));
|
|
}
|
|
|
|
.container-icon {
|
|
position: relative;
|
|
height: calc(24px * var(--beilv)) !important;
|
|
width: calc(24px * var(--beilv)) !important;
|
|
}
|
|
</style>
|