11-main/src/views/index.vue

<template>
  <div id="choicepart-container">
    <div class="choicepart-navbar">
      <span class="navbar-left">
        {{ date }}
      </span>
      <span class="navbar-title">
        <img :src="require(`../assets/img/choicepart/icon.png`)" class="navbar-title-icon" alt="">
        合 肥 新 能 源 数 字 工 厂
      </span>
      <span class="navbar-right">
        <span>
          {{ time }}
          <svg-icon icon-class="logout" class="item-icon" @click="logout" />
        </span>
      </span>
    </div>
    <div class="choicepart-box">
      <div
        v-for="item in routeList"
        :key="item.path"
        :style="{
          background: item.title.length > 6 ? `url(${require('../assets/img/choicepart/choice-item-longback.png')}) no-repeat` : `url(${require('../assets/img/choicepart/choice-item-back.png')}) no-repeat`,
          backgroundSize: '100% 100%'
        }"
        class="choicepart-item"
        @click="handelClick(item)"
      >
        <div class="choicepart-item-border">
          <img :src="require(`../assets/img/choicepart/${item.name}.png`)" alt="">
        </div>
        <div class="choicepart-item-title" :title="item.title">{{ item.title }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import Cookie from 'js-cookie'

let interval = null
let eventListener = null

export default {
  name: 'ChoicePart',
  data() {
    return {
      baseImg: require('../assets/img/login-back.jpg'),
      coverImgUrl: localStorage.getItem('backImg') || '',
      rowNum: 1,
      windowWidth: 0,
      routeList: [
        { name: 'factory', path: 'http://zs.mes.picaiba.com/#/3d-overview', title: '数字工厂总览' },
        { name: 'mes', path: 'http://zs.mes.picaiba.com/#/login', title: 'MES生产管理平台' },
        { name: 'wms', path: 'http://zs.wms.picaiba.com/#/login', title: 'WMS物流仓储管理' },
        { name: 'data', path: 'factory', title: '数据采集平台' }
      ],
      date: '',
      time: '',
      beilv: 1
    }
  },
  created() {
    this.windowWidth = window.innerWidth
    this.date = this.getTime()[0]
    this.time = this.getTime()[1]
    interval = setInterval(() => {
      const a = this.getTime()
      this.date = a[0]
      this.time = a[1]
    }, 1000)
    this.beilv = document.body.offsetWidth / 1920
    document.documentElement.style.setProperty('--beilv', this.beilv)
    addEventListener('resize', eventListener = () => {
      this.beilv = document.body.offsetWidth / 1920
      document.documentElement.style.setProperty('--beilv', this.beilv)
    })
  },
  destroyed() {
    clearInterval(interval)
    removeEventListener('resize', eventListener)
  },
  methods: {
    getTime() {
      const myDate = new Date()
      const mytime = myDate.toLocaleString('chinese', { hour12: false })
      const date = mytime.split(' ')[0].split('/').join('.')
      const time = mytime.split(' ')[1]
      return [date, time]
    },
    handelClick(item) {
      if (item.path.substring(0, 4) === 'http') {
        if (item.path === 'http://zs.mes.picaiba.com/#/3d-overview') {
          window.open(item.path)
        } else {
          window.open(`${item.path}?username=${Cookie.get('account')}&password=${Cookie.get('password')}`)
        }
      } else {
        this.$router.push({
          name: item.path
        })
      }
    },
    async logout() {
      await this.$store.dispatch('user/logout')
      this.$router.push('/')
    }
  }
}
</script>

<style lang="scss" scoped>
#choicepart-container {
  user-select: none;
  min-width: 100%;
  min-height: 100vh;
  // background: linear-gradient(-45deg, rgb(25, 25, 200), rgb(0, 100, 200));
  background: url('../assets/img/choicepart/choicepart-back.png') repeat;
  background-size: cover;
  overflow-x: scroll;
  .choicepart-navbar {
    width: 100%;
    min-width: calc(1600px * var(--beilv));
    height: 11vh;
    line-height: 11vh;
    text-align: center;
    color: #fff;
    font-size: calc(29px * var(--beilv));
    background: url('../assets/img/choicepart/header.png') no-repeat;
    background-size: 100% auto;
    position: relative;
    .navbar-left {
      color: #49E1DE;
      position: absolute;
      font-family: zcoolqingkehuangyouti-Regular;
      left: calc(58px * var(--beilv));
      font-size: calc(32px * var(--beilv));
      line-height: 12vh;
    }
    .navbar-right {
      color: #49E1DE;
      position: absolute;
      font-family: zcoolqingkehuangyouti-Regular;
      right: calc(84px * var(--beilv));
      font-size: calc(32px * var(--beilv));
      line-height: 12vh;
      span {
        position: relative;
        .item-icon {
          position: absolute;
          top: calc(3px * var(--beilv));
          right: calc(-56px * var(--beilv));
          cursor: pointer;
        }
      }
    }
    .navbar-title {
      .navbar-title-icon {
        position: relative;
        top: calc(13px * var(--beilv));
        right: calc(12px * var(--beilv));
      }
      img {
        width: calc(34px * var(--beilv));
        height: calc(46px * var(--beilv));
      }
    }
  }
  .choicepart-box {
    width: calc(1456px * var(--beilv));
    margin: 0 auto;
    padding-top: 16vh;
    min-height: 88vh;
    .choicepart-item {
      display: inline-block;
      width: calc(334px * var(--beilv));
      height: calc(444px * var(--beilv));
      margin: calc(15px * var(--beilv));
      // border: 1px dashed #fff;
      box-shadow: 0 calc(2px * var(--beilv)) calc(10px * var(--beilv)) rgba(0, 0, 0, 0.5);
      top: 0;
      font-size: calc(24px * var(--beilv));
      border-radius: calc(5px * var(--beilv));
      overflow: hidden;
      cursor: pointer;
      position: relative;
      .choicepart-item-border {
        height: 100%;
        border-radius: calc(5px * var(--beilv));
        padding: 0 calc(5px * var(--beilv));
        line-height: calc(32px * var(--beilv));
        font-size: calc(28px * var(--beilv));
        font-weight: lighter;
        color: #2c6bd8;
        overflow: hidden;
        img {
          width: calc(158px * var(--beilv));
          height: calc(158px * var(--beilv));
          position: relative;
          top: calc(77px * var(--beilv));
          left: calc(88px * var(--beilv));
        }
      }
      .choicepart-item-title {
        overflow: hidden;
        padding: 0 calc(10px * var(--beilv));
        text-overflow: ellipsis;
        white-space: nowrap;
        position: absolute;
        bottom: 0;
        left: calc(2px * var(--beilv));
        right: calc(2px * var(--beilv));
        text-align: center;
        color: #fff;
        font-size: calc(20px * var(--beilv));
        line-height: calc(88px * var(--beilv));
        height: calc(103px * var(--beilv));
        letter-spacing: calc(2px * var(--beilv));
        transition: all .5s ease;
      }
    }
    .choicepart-item:hover {
      .choicepart-item-title {
        transform: scale(1.1);
      }
    }
  }
}
::-webkit-scrollbar-track-piece {
  //滚动条凹槽的颜色，还可以设置边框属性
  background: rgba(255, 255, 255, 0.1);
}
::-webkit-scrollbar {
  //滚动条的宽度
  width: calc(9px * var(--beilv));
  height: calc(9px * var(--beilv));
}
::-webkit-scrollbar-thumb {
  //滚动条的设置
  background-color: #dddddd;
  background-clip: padding-box;
  min-height: calc(28px * var(--beilv));
  border-radius: calc(9px * var(--beilv));
}
::-webkit-scrollbar-thumb:hover {
  background-color: #bbb;
}
</style>