大屏
This commit is contained in:
‘937886381’
@@ -0,0 +1,294 @@
|
||||
<!--
|
||||
* @Author: gtz
|
||||
* @Date: 2022-01-19 15:58:17
|
||||
* @LastEditors: zhp
|
||||
* @LastEditTime: 2023-09-16 10:04:49
|
||||
* @Description: file content
|
||||
* @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseContainer\index.vue
|
||||
-->
|
||||
<template>
|
||||
<div
|
||||
class="base-container"
|
||||
:style="{ height: '100%', fontSize: 12 * beilv + 'px', padding: 12 * beilv + 'px' }"
|
||||
:class="{ 'no-padding': noPadding, 'border-none': !showLine }"
|
||||
>
|
||||
<!-- <div class="base-container" :style="{height: height * beilv + 'px', fontSize: 12 * beilv + 'px', padding: 12 * beilv + 'px'}"> -->
|
||||
<template v-if="showLine">
|
||||
<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" />
|
||||
</template>
|
||||
|
||||
<div class="bar-item">
|
||||
<div v-if="title" class="bar-title">
|
||||
<div class="line line-bottom" />
|
||||
<div class="line line-bottom-vertical" />
|
||||
<div class="line line-bottom-right" />
|
||||
<div class="line line-bottom-right-vertical" />
|
||||
<span class="title">
|
||||
<!-- <svg-icon :icon-class="titleIcon" style="font-size: 1.5em; position: relative; top: .08em" /> -->
|
||||
{{ title }}
|
||||
</span>
|
||||
<span class="colorBlock One" />
|
||||
<span class="colorBlock Two" />
|
||||
<span class="colorBlock Three" />
|
||||
<span class="colorBlock Four" />
|
||||
|
||||
</div>
|
||||
<div class="bar-content" :class="{ 'p-0': noContentPadding }">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'BaseContainer',
|
||||
props: {
|
||||
showLine: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
noPadding: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
noContentPadding: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
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%;
|
||||
background-color: rgba($color: #061027, $alpha: 0.15);
|
||||
position: relative;
|
||||
// opacity: 0.65;
|
||||
border-bottom: 2px solid;
|
||||
border-image: linear-gradient(90deg, rgba(195, 255, 251, 0), rgba(0, 255, 236, 1), rgba(144, 255, 246, 0)) 2 2;
|
||||
filter: blur(0px);
|
||||
filter: blur(0px);
|
||||
|
||||
.line {
|
||||
position: absolute;
|
||||
border-top: 1px solid #52fff1;
|
||||
width: .8em;
|
||||
top: -0.1em;
|
||||
left: -0.1em;
|
||||
&-vertical {
|
||||
// top: calc(-5em / 12);
|
||||
left: calc(-1em / 12);
|
||||
transform: rotate(90deg);
|
||||
transform-origin: left;
|
||||
}
|
||||
|
||||
&-right {
|
||||
top: -0.1em;
|
||||
right: .01em;
|
||||
left: inherit;
|
||||
}
|
||||
|
||||
&-right-vertical {
|
||||
top: calc(-2em / 12);
|
||||
right: calc(-1em / 12);
|
||||
left: inherit;
|
||||
transform: rotate(-90deg);
|
||||
transform-origin: right;
|
||||
}
|
||||
|
||||
&-bottom {
|
||||
top: inherit;
|
||||
bottom: 0.01em;
|
||||
left: -0.1em;
|
||||
}
|
||||
|
||||
&-bottom-vertical {
|
||||
top: inherit;
|
||||
left: calc(-1em / 12);
|
||||
bottom: calc(1em / 12);
|
||||
transform: rotate(-90deg);
|
||||
transform-origin: left;
|
||||
}
|
||||
|
||||
&-bottom-right {
|
||||
top: inherit;
|
||||
left: inherit;
|
||||
bottom: 0.01em;
|
||||
right: 0.01em;
|
||||
}
|
||||
|
||||
&-bottom-right-vertical {
|
||||
top: inherit;
|
||||
left: inherit;
|
||||
right: calc(-1em / 12);
|
||||
bottom: calc(-1em / 12);
|
||||
transform: rotate(90deg);
|
||||
transform-origin: right;
|
||||
}
|
||||
}
|
||||
|
||||
.bar-item {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.bar-title {
|
||||
width: 100%;
|
||||
background: linear-gradient(90deg, rgba(75, 239, 255, 0.28) 0%, rgba(0, 169, 205, 0) 20%,), linear-gradient(180deg, rgba(75, 239, 255, 0.28) 0%,
|
||||
rgba(0, 169, 205, 0) 20%);
|
||||
backdrop-filter: blur(1.5px);
|
||||
color: #52fff1;
|
||||
.colorBlock{
|
||||
display: inline-block;
|
||||
width: 4px;
|
||||
height: 16px;
|
||||
background: #31A6AE;
|
||||
opacity: 0.84;
|
||||
backdrop-filter: blur(1.5px);
|
||||
margin-left: 14em;
|
||||
// margin-top: 1.2em;
|
||||
}
|
||||
.Two{
|
||||
opacity: 0.55;
|
||||
margin-left: 0.375em;
|
||||
}
|
||||
.Three {
|
||||
opacity: 0.29;
|
||||
margin-left: 0.375em;
|
||||
}
|
||||
.Four {
|
||||
opacity: 0.16;
|
||||
margin-left: 0.375em;
|
||||
}
|
||||
font-size: 1.5em;
|
||||
height: 3em;
|
||||
position: relative;
|
||||
.line {
|
||||
position: absolute;
|
||||
border-top: 1px solid #52fff1;
|
||||
width: .5em;
|
||||
// top: -0.1em;
|
||||
// left: -0.1em;
|
||||
|
||||
// &-vertical {
|
||||
// // top: calc(-5em / 12);
|
||||
// left: calc(-1em / 12);
|
||||
// transform: rotate(90deg);
|
||||
// transform-origin: left;
|
||||
// }
|
||||
|
||||
// &-right {
|
||||
// top: -0.1em;
|
||||
// right: .01em;
|
||||
// left: inherit;
|
||||
// }
|
||||
|
||||
// &-right-vertical {
|
||||
// top: calc(-2em / 12);
|
||||
// right: calc(-1em / 12);
|
||||
// left: inherit;
|
||||
// transform: rotate(-90deg);
|
||||
// transform-origin: right;
|
||||
// }
|
||||
|
||||
&-bottom {
|
||||
top: inherit;
|
||||
bottom: 0.01em;
|
||||
left: -0.1em;
|
||||
}
|
||||
|
||||
&-bottom-vertical {
|
||||
top: inherit;
|
||||
left: calc(-1em / 12);
|
||||
bottom: calc(1em / 12);
|
||||
transform: rotate(-90deg);
|
||||
transform-origin: left;
|
||||
}
|
||||
|
||||
&-bottom-right {
|
||||
top: inherit;
|
||||
left: inherit;
|
||||
bottom: 0.01em;
|
||||
right: 0.01em;
|
||||
}
|
||||
|
||||
&-bottom-right-vertical {
|
||||
top: inherit;
|
||||
left: inherit;
|
||||
right: calc(-0.1em / 12);
|
||||
bottom: calc(.1em / 12);
|
||||
transform: rotate(90deg);
|
||||
transform-origin: right;
|
||||
}
|
||||
}
|
||||
.title{
|
||||
margin-left: 1.75em;
|
||||
margin-top: 1em;
|
||||
width: 6em;
|
||||
// height: 100%;
|
||||
display: inline-block;
|
||||
}
|
||||
// padding: 0.67em;
|
||||
}
|
||||
|
||||
.bar-content {
|
||||
// padding: 1em;
|
||||
flex: 1 auto;
|
||||
}
|
||||
|
||||
.no-padding {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.p-0 {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&.border-none {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user