jsm-mall-front/src/views/bigViews/index.vue

<template>
  <page-size-limit>
    <div class="big-view-t1" v-if="showBool">
      <div
        class="bggif"
        :style="{
          background: `url('${
            [
              'https://zfire-train.oss-cn-guangzhou.aliyuncs.com/train/pic/166997089127898d52ae7-87a5-49ca-b25b-ee1fe4f735ba.gif',
              'https://fw.greeapps.com/zfdapi/img/get?key=uploads/20230417/860f5e3c02404eb4b638a92edcec47c9.gif',
              'https://fw.greeapps.com/zfdapi/img/get?key=uploads/20230417/d30d030ca19c0cf0cb460e03acee5d8b.gif',
              'https://fw.greeapps.com/zfdapi/img/get?key=uploads/20230417/16c6e3dad13c5ffe2725c42bd5e42183.gif',
              'https://fw.greeapps.com/zfdapi/img/get?key=uploads/20230417/f6dfd70df6401871a35c255f38d5a862.gif'
            ][dayIndex]
          }')`
        }"
      />
      <zj-page-container>
        <div class="head-size"><head-view /></div>
        <zj-page-fill>
          <dataView1 />
        </zj-page-fill>
        <div
          @click="huishouye"
          :style="`position: fixed;right: 20px;bottom: 100px;background-image: url(${fanhuizhuye});background-size: 100%;width:30px;height: 30px;z-index: 9999;`"
        ></div>
        <div
          @click="shuxinyemian"
          :style="`position: fixed;right: 20px;bottom: 60px;background-image: url(${shuaxin});background-size: 100%;width:30px;height: 30px;z-index: 9999;`"
        ></div>
        <div
          :style="`position: fixed;right: 20px;bottom: 20px;background-image: url(${quanpin});background-size: 100%;width:30px;height: 30px;z-index: 9999;display: flex;justify-content: center;align-items: center;`"
        >
          <screenfull id="screenfull" :className="'hahahdkdjshakdhssk'" />
        </div>
      </zj-page-container>
    </div>
  </page-size-limit>
</template>

<script>
import Screenfull from '@/components/Screenfull'
import pageSizeLimit from '@/components/page-size-limit.vue'
import headView from '@/components/head.vue'
import { delayPerform } from 'js-perform-lock'
import quanpin from '@/assets/全屏@2x.png'
import shuaxin from '@/assets/刷新@2x.png'
import fanhuizhuye from '@/assets/fanhuizhuye.png'
var d
import dataView1 from './dataView1/index.vue'
export default {
  components: {
    headView,
    dataView1,
    pageSizeLimit,
    Screenfull
  },
  data() {
    return {
      quanpin,
      shuaxin,
      fanhuizhuye,
      dayIndex: (new Date().getDate() - 1) % 5,
      showBool: true
    }
  },
  mounted() {
    d = new delayPerform(250).refactor((/**可接收参数**/) => {
      this.re()
    })
    window.addEventListener('resize', d)
  },
  beforeUnmount() {
    window.removeEventListener('resize', d)
  },
  methods: {
    huishouye() {
      this.$router.push({
        name: 'home'
      })
    },
    shuxinyemian() {
      location.reload()
    },
    re() {
      this.showBool = false
      this.$nextTick(() => {
        this.showBool = true
      })
    }
  }
}
</script>

<style lang="scss">
.hahahdkdjshakdhssk {
  fill: #fff !important;
  color: #fff !important;
}
.el-carousel__arrow {
  top: 75% !important;
}
</style>
<style scoped lang="scss">
::v-deep .el-carousel,
::v-deep .el-carousel__container {
  height: 100%;
}
.loginBG {
  width: 520px; //650px;
  height: 436px; //545px;
  background-size: 100% 100%;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  .loginBGform {
    width: 100%;
    height: 100%;
    position: relative;
    ::v-deep .el-input {
      background: rgba(0, 0, 0, 0) !important;
      border: none !important;
      box-shadow: none !important;
      .el-input__wrapper {
        background: rgba(0, 0, 0, 0) !important;
        box-shadow: none !important;
        border: none !important;
      }
      .el-input__inner {
        color: #fff;
      }
    }
    .username {
      width: 200px;
      height: 30px;
      position: absolute;
      top: 200px;
      left: 196px;
      cursor: pointer;
    }
    .mimasl {
      width: 200px;
      height: 30px;
      position: absolute;
      top: 272px;
      left: 196px;
      cursor: pointer;
    }
    .anniuyangs {
      width: 290px;
      height: 38px;
      position: absolute;
      top: 328px;
      left: 129px;
      cursor: pointer;
    }
  }
}
.big-view-t1 {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background: #080c42;
  position: relative;

  .bggif {
    opacity: 0.5;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 0;
    // background: url('https://zfire-train.oss-cn-guangzhou.aliyuncs.com/train/pic/166997089127898d52ae7-87a5-49ca-b25b-ee1fe4f735ba.gif');
  }
  .head-size {
    width: 100%;
    height: 60px;
  }
}
</style>