150 lines
3.1 KiB
Vue
150 lines
3.1 KiB
Vue
<!--
|
|
* @Author: gtz
|
|
* @Date: 2022-01-19 15:58:17
|
|
* @LastEditors: zhp
|
|
* @LastEditTime: 2022-01-24 09:18:01
|
|
* @Description: file content
|
|
* @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseContainer\index.vue
|
|
-->
|
|
<template>
|
|
<div class="base-container" :style="{fontSize: 12 * beilv + 'px'}">
|
|
<div class="line" />
|
|
<div class="line line-vertical" />
|
|
<div class="line line-right" />
|
|
<div class="line line-right-vertical" />
|
|
<div class="line line-bottom" />
|
|
<div class="line line-bottom-vertical" />
|
|
<div class="line line-bottom-right" />
|
|
<div class="line line-bottom-right-vertical" />
|
|
<div class="bar-item">
|
|
<div v-if="title" class="bar-title">
|
|
<span>
|
|
<svg-icon :icon-class="titleIcon" style="font-size: 1.5em; position: relative; top: .08em" />
|
|
{{ title }}
|
|
</span>
|
|
</div>
|
|
<div class="bar-content">
|
|
<slot />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'BaseContainer',
|
|
props: {
|
|
title: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
titleIcon: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
height: {
|
|
type: Number,
|
|
default: 200
|
|
},
|
|
baseSize: {
|
|
type: Number,
|
|
default: 12
|
|
},
|
|
beilv: {
|
|
type: Number,
|
|
default: 1
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
curIndex: 0
|
|
}
|
|
},
|
|
mounted() {
|
|
},
|
|
methods: {
|
|
changeTab(num) {
|
|
this.curIndex = num
|
|
this.$emit('tabSelect', num)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.base-container {
|
|
color: #fff;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba($color: #061027, $alpha: 0.15);
|
|
position: relative;
|
|
border: 2px solid;
|
|
border-image: linear-gradient(90deg, rgba(82, 255, 241, 0.6), rgba(95, 190, 249, 0), rgba(82, 255, 241, 0.6)) 2 2;
|
|
box-shadow: inset 0px 0px 20px 0px rgba(255,255,255,0.15);
|
|
|
|
.line {
|
|
position: absolute;
|
|
border-top: 4px solid #52FFF1;
|
|
width: 2em;
|
|
top: -.25em;
|
|
left: -.25em;
|
|
&-vertical {
|
|
top: calc(-5em / 12);
|
|
left: calc(-1em / 12);
|
|
transform: rotate(90deg);
|
|
transform-origin: left;
|
|
}
|
|
&-right {
|
|
top: -.25em;
|
|
right: -.25em;
|
|
left: inherit;
|
|
}
|
|
&-right-vertical {
|
|
top: calc(-5em / 12);
|
|
right: calc(-1em / 12);
|
|
left: inherit;
|
|
transform: rotate(-90deg);
|
|
transform-origin: right;
|
|
}
|
|
&-bottom {
|
|
top: inherit;
|
|
left: -.25em;
|
|
bottom: -.25em;
|
|
}
|
|
&-bottom-vertical {
|
|
top: inherit;
|
|
left: calc(-1em / 12);
|
|
bottom: calc(-5em / 12);
|
|
transform: rotate(-90deg);
|
|
transform-origin: left;
|
|
}
|
|
&-bottom-right {
|
|
top: inherit;
|
|
left: inherit;
|
|
right: -.25em;
|
|
bottom: -.25em;
|
|
}
|
|
&-bottom-right-vertical {
|
|
top: inherit;
|
|
left: inherit;
|
|
right: calc(-1em / 12);
|
|
bottom: calc(-5em / 12);
|
|
transform: rotate(90deg);
|
|
transform-origin: right;
|
|
}
|
|
}
|
|
.bar-title {
|
|
width: 100%;
|
|
color: #52FFF1;
|
|
font-size: 1.5em;
|
|
padding: .67em;
|
|
}
|
|
.bar-item {
|
|
height: 100%;
|
|
}
|
|
.bar-content{
|
|
height: calc(100% - 4em);
|
|
}
|
|
}
|
|
</style>
|