yudao-dev/src/views/productionVisualization/equipmentBoard/components/baseContainer/eqIndex.vue

<!--
 * @Author: gtz
 * @Date: 2022-01-19 15:58:17
 * @LastEditors: zhp
 * @LastEditTime: 2023-09-16 18:52:57
 * @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: 39em;
      // 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: 7em;
        // 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>