'init'

src/views/material-manage/cockpit/components/baseContainer/index.vue

@@ -0,0 +1,145 @@
+<!--
+ * @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="{height: height * beilv + 'px', 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%;
+  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-content{
+  //   padding: 1em;
+  // }
+}
+</style>