logpm_page/src/views/wel/index.vue

<template>
  <div class="bx" v-if="indexState">
    <div class="left">
      <div class="tptitl">
        <img src="./static/topicon.png" />
        <span>发货操作</span>
      </div>
      <div class="onebx1">
        <div class="item1">
          <img src="./static/1.png" />
          <span>提货</span>
        </div>
        <div class="item2">
          <img src="./static/2.png" />
          <span>预开单</span>
        </div>
        <div class="item3">
          <img src="./static/3.png" />
          <span>创建运单</span>
        </div>
        <div class="item4">
          <img src="./static/4.png" />
          <span>补录运单</span>
        </div>
        <div class="item5">
          <img src="./static/5.png" />
          <span>短驳发车</span>
        </div>
        <div class="item6">
          <img src="./static/6.png" />
          <span>外部中转</span>
        </div>
        <div class="item7">
          <img src="./static/7.png" />
          <span>库存管理</span>
        </div>
        <div class="item8">
          <img src="./static/8.png" />
          <span>车辆配载</span>
        </div>
        <img class="upimg" src="./static/up.png" />
        <img class="rigth1" src="./static/rigth.png" />
        <img class="rigth2" src="./static/rigth.png" />
        <img class="rigth3" src="./static/rigth.png" />
        <img class="rigth4" src="./static/rigth.png" />
        <img class="rigthall" src="./static/rigthall.png" />
      </div>
    </div>
    <div class="ztjk">
      <img src="./static/9.png" />
      <span>到货操作</span>
    </div>
    <div class="rigth">
      <div class="tptitl">
        <img src="./static/topicon.png" />
        <span>到货操作</span>
      </div>
      <div class="onebx1">
        <div class="item1">
          <img src="./static/10.png" />
          <span>到站卸车</span>
        </div>
        <div class="item2">
          <img src="./static/11.png" />
          <span>库存管理</span>
        </div>
        <div class="item3">
          <img src="./static/12.png" />
          <span>短驳接收</span>
        </div>
        <div class="item4">
          <img src="./static/13.png" />
          <span>外部中转</span>
        </div>
        <div class="item5">
          <img src="./static/14.png" />
          <span>送货</span>
        </div>
        <div class="item6">
          <img src="./static/15.png" />
          <span>中转签收</span>
        </div>
        <div class="item7">
          <img src="./static/16.png" />
          <span>送货签收</span>
        </div>
        <div class="item8">
          <img src="./static/17.png" />
          <span>自提签收</span>
        </div>
        <img class="upimg" src="./static/down.png" />
        <img class="rigth1" src="./static/rigth.png" />
        <img class="rigth2" src="./static/rigth.png" />
        <img class="rigth3" src="./static/rigth.png" />
        <img class="rigth4" src="./static/rigth.png" />
        <img class="rigthall" src="./static/rigthall2.png" />
        <img class="leftall" src="./static/leftall.png" />
      </div>
    </div>
    <div class="buts">
      <div class="tptitl">
        <img src="./static/topicon.png" />
        <span>回单管理</span>
      </div>
      <div class="onebx1">
        <div class="item1">
          <img src="./static/18.png" />
          <span>回单回收</span>
        </div>
        <div class="item2">
          <img src="./static/19.png" />
          <span>回单寄出</span>
        </div>
        <div class="item3">
          <img src="./static/20.png" />
          <span>回单接收</span>
        </div>
        <div class="item4">
          <img src="./static/21.png" />
          <span>回单发放</span>
        </div>
        <img class="left1" src="./static/rigth.png" />
        <img class="left2" src="./static/rigth.png" />
        <img class="left3" src="./static/rigth.png" />
      </div>
    </div>
    <div class="el-gl">
      <div>公告栏</div>
    </div>
  </div>
  <div v-else class="el_Hwlogo">
    <div class="content">
      <img src="/public/img/p-logo.png" alt="" />
      <div class="info">
        <div class="name">{{ name }}</div>
        <div class="slogan">您好！欢迎使用货无忧</div>
        <div class="title">成都数联物科信息技术有限公司</div>
        <div class="time">{{ currentTime }}</div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
const indexState = ref(false);
const currentTime = ref('0000年00月00日00时00分00秒');
const name = ref('');
name.value = JSON.parse(localStorage.getItem('TWMS-userInfo')).content.real_name;
setInterval(() => {
  const now = new Date();
  const year = now.getFullYear();
  const month = String(now.getMonth() + 1).padStart(2, '0');
  const day = String(now.getDate()).padStart(2, '0');
  const hours = String(now.getHours()).padStart(2, '0');
  const minutes = String(now.getMinutes()).padStart(2, '0');
  const seconds = String(now.getSeconds()).padStart(2, '0');
  currentTime.value = `${year}年${month}月${day}日${hours}时${minutes}分${seconds}秒`;
}, 1000);
</script>
<style scoped lang="scss">
.info {
  display: flex;
  display: flex;
  flex-direction: column;
  justify-content: center;
  .name {
    font-size: 40px;
    color: #d3832a;
    font-weight: bold;
  }
  .slogan {
    font-size: 3em;
  }
  .time {
    display: flex;
    margin-top: 10px;
    justify-content: flex-end;
  }
  .title {
    display: flex;
    margin-top: 10px;
    justify-content: flex-end;
  }
}
.el_Hwlogo {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  span {
    color: #d3832a;
  }
  img {
    width: 300px;
    height: 300px;
  }
  .content {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
  }
}
.el-gl {
  font-weight: 500;
  text-align: center;
  position: absolute;
  right: 10px;
  top: 10px;
  width: 15%;
  background-color: #fff;
  border-radius: 32px;
  padding: 5px;
  box-sizing: border-box;
  border: 1px solid #f1eeee69;
  box-shadow: 4px 6px 0 #d3dff6, 1px 1px 9px #d3dff6;
  height: 762px;
}
</style>
<style lang="scss" scope>
@import '../../styles/flowStyle.scss';

#avue-view {
  background-color: #fff;
}
</style>
<script>
import { mapGetters } from 'vuex';
export default {
  name: 'wel',
  data() {
    return {
      activeNames: ['1', '2', '3', '5'],
      logActiveNames: ['29'],
    };
  },
  computed: {
    ...mapGetters(['userInfo']),
  },
  methods: {
    handleChange(val) {
      window.console.log(val);
    },
  },
};
</script>