yxk_pc_mdh/src/pages/independent/screen.vue

<template>
  <div>
    <!-- <dv-full-screen-container> -->
    <div id="index">
      <div class="header-wrap">
        <div class="myheader">
          <p class="header-title">
            {{ companyInfo.screenName }}
          </p>
          <div class="time">{{ time }}</div>
          <!-- <div class="weather">{{ "🌤晴    22℃" }}</div> -->
        </div>
      </div>
      <div class="main-wrap">
        <Left ref="left" style="z-index:999"></Left>
        <Center></Center>
        <Right ref="right" style="z-index:999"></Right>
        <!-- <div style="position: absolute;top: 0;left: 0;">
          <model3d v-if="show == 'cj'" @ok="swtchModel" />
          <model3dsb v-if="show == 'sb'" @ok="swtchModel" />
          <model3dhcl v-if="show == 'hcl'" @ok="swtchModel" />
          <model3dfq v-if="show == 'fq'" @ok="swtchModel" />
        </div> -->
      </div>
    </div>
    <!-- </dv-full-screen-container> -->
    <!-- <div id="index" v-else>
      <div class="header-wrap" @click="handleClick" title="点击开启屏幕适配">
        <div class="myheader">
          <p class="header-title">
            路信云广西建筑工企综合服务平台大数据展示中心
          </p>
        </div>
      </div>
      <div class="main-wrap">
        <Left></Left>
        <Center></Center>
        <Right></Right>
      </div>
    </div> -->
  </div>
</template>

<script>
import "../../utils/flexble";
import Left from "./left";
import Center from "./center";
import Right from "./right";
import moment from "moment";
import model3d from "./screen-3d";
import model3dsb from "./screen-3d-sb";
import model3dhcl from "./screen-3d-hcl";
import model3dfq from "./screen-3d-fq";
import { mapState } from "vuex";

export default {
  name: "LongScreen",
  components: {
    Center,
    Left,
    Right,
    model3d,
    model3dsb,
    model3dhcl,
    model3dfq
  },
  data() {
    return {
      time: "",
      timeSelse: null,
      show: "cj"
    };
  },
  computed: {
    ...mapState({
      companyInfo: state => state.common.companyInfo
    }),
  },
  mounted() {
    this.timeSelse = setInterval(() => {
      this.getTime();
    }, 1000);
  },
  methods: {
    swtchModel(val) {
      this.show = val;
    },
    getTime() {
      this.time = moment()
        .subtract(0, "hours")
        .format("yyyy-MM-DD HH:mm:ss");
    },
    handleClick() {
      this.isUseVScaleScreen = !this.isUseVScaleScreen;
    }
  }
};
</script>

<style scoped lang="less">
#index {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: url("../../assets/longscreen2/background.png");
}

.header-wrap {
  width: 100%;
  height: 10.4rem;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  position: relative;

  .time {
    position: absolute;
    left: 1.2rem;
    top: 1rem;
    color: #fff;
    font-size: 1.8rem;
  }

  .weather {
    position: absolute;
    right: 1.2rem;
    top: 1rem;
    color: #fff;
    font-size: 1.8rem;
  }

  .myheader {
    width: 100%;
    height: 10.4rem;
    background: url("../../assets/longscreen2/header-bg.png");
    background-size: 100% 100%;
    background-position: center center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    padding-top: 1.6rem;
    box-sizing: border-box;

    .header-title {
      font-size: 4rem;
      letter-spacing: 1px;
      // font-family: "Courier New", Courier, monospace;
      font-family: PangMenZhengDao-3, PangMenZhengDao;
      font-weight: bold;
      color: #fffde8;
      background: linear-gradient(180deg, #00a9ff 0%, #e8feff 70%);
      height: 5.2rem;
      line-height: 5.2rem;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
}

.main-wrap {
  width: 100%;
  height: calc(100% - 10.4rem);
  // padding: 0px 40px;
  // margin-top: 15px;
  // box-sizing: border-box;
  display: flex;
  // justify-content: space-between;
}
</style>