E-commerce/src/components/bgBox/index.vue

<template>
  <div class="container-box" ref="editor">
    <div class="top">
      <div class="logo AICenter">
        <div class="title ml-36px ">
          沽源县电子商务平台电子可视化平台
        </div>
      </div>
      <div class="tabsBox AICenter">
        <div class="tabs">
          <div
              :class="[`tab-item`, { cur: index === tabs.index }]"
              :key="item"
              @click="tabs.index = index"
              v-for="(item, index) in tabs.list"
          >
            {{ item }}
          </div>
        </div>
      </div>
      <div class="tipsBox">
        <div class="dateBox center AICenter">
          <div class="date font-size-22px">{{ dateBox.date }}</div>
          <div class="date font-size-22px">{{ dateBox.time }}</div>
          <div class="date font-size-22px">{{ dateBox.weekday }}</div>
        </div>
      </div>
    </div>
    <div class="box">
      <slot>&nbsp;</slot>
    </div>
    <div :class="[`bg`, bgType]"></div>
  </div>
</template>

<script>
import {screenSize} from '@/assets/js/utils'
import dayjs from 'dayjs'

export default {
  components: {},
  data() {
    return {
      tabs: {
        index: this.$props.tabIndex,
        list: [`商务平台交易统计`, `全县交易统计`, '电商平台分析'],
      },
      dateBox: {
        time: ``,
        date: ``,
      },
    }
  },
  props: {
    tabChange: {
      type: Function,
      default: undefined,
    },
    tabIndex: {
      type: Number,
      default: 0,
    },
    bgType: {
      type: String,
      default: `g-bg1`,
    },
  },
  watch: {
    'tabs.index'(val) {
      this.tabChange && this.tabChange(val)
    },
  },
  computed: {},
  created() {
    this.$util.autoVueFn(
        [
          {
            time: 1000,
            fn: this.currentTime,
          },
          // {
          //   time: 1000 * 900,
          //   fn: this.currentWeather,
          // },
        ],
        this
    )
  },
  mounted() {
    screenSize(this.$refs.editor)
  },
  methods: {
    async currentTime() {
      const now = dayjs(Date.now());
      const weekArray = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
      this.dateBox = {
        date: now.format('YYYY/MM/DD'),
        time: now.format('HH:mm:ss'),
        weekday: weekArray[now.day()]
      }
    },
  },
}
</script>

<style lang="less" scoped>
.container-box {
  width: 1920px;
  height: 1080px;
  transform-origin: 0 0 0;
  position: relative;
  color: #fff;

  .top {
    position: absolute;
    display: flex;
    width: 100%;
    height: 80px;
    z-index: 10;
    background-image: url("~@/assets/img/titile@2x.png");
    background-size: cover;

    .title {
      width: 550px;
      height: 48px;
      font-family: YouSheBiaoTiHei, sans-serif;
      font-size: 34px;
      background: linear-gradient(0deg, rgba(27, 146, 255, 1) 0%, rgba(255, 255, 255, 1) 50%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      line-height: 48px;
      text-align: left;
      font-style: normal;
    }

    .line {
      width: 0px;
      height: 41px;
      margin: 0 20px;
      border: 1px solid rgba(255, 255, 255, 0.3);
    }

    .tabs {
      font-size: 25px;
      text-align: center;
      display: flex;
      background-image: url('~@/assets/img2/综合总览/编组 9.png');
      background-repeat: no-repeat;
      background-position: center bottom;
      width: 766px;

      .tab-item {
        line-height: 56px;
        //margin-right: 32px;
        padding: 0 30px;
        font-family: YouSheBiaoTiHei;
        font-size: 28px;
        color: #FFFFFF;
        text-shadow: 0px 2px 4px #004F4D;
        text-align: left;
        font-style: normal;
        position: relative;
        cursor: pointer;

        &.cur {
          color: rgba(255, 220, 81, 1);
          background-image: url("~@/assets/img/highlight.png");
          background-size: contain;
          background-repeat: no-repeat;
          background-position: center;
        }
      }
    }

    .tipsBox {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      width: 100%;
      padding-right: 77px;

      .dateBox {
        .date {
          font-family: YouSheBiaoTiHei;
          font-size: 20px;
          color: #FFFFFF;
          line-height: 22px;
          text-align: right;
          font-style: normal;
          margin-right: 20px;
        }

      }

      .temperature {
        // img {
        //   padding: 0 20px;
        // }
      }

      .headPortrait {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        overflow: hidden;
        cursor: pointer;
      }
    }
  }

  .bg {
    pointer-events: none;
  }

  & > .box {
    transform-origin: 0 0 0;
    position: absolute;
    top: 90px;
    width: 100%;
    box-sizing: border-box;
    padding: 40px;
    left: 0;
    top: 0;
    padding: 0;
    z-index: 9;
  }
}

.AICenter {
  display: flex;
  align-items: center
}
</style>