LiaoningChanpinHuaxiang/src/views/index.vue

<template>
  <div class="container">
    <div class="content">
      <div class="content-top">
        <div class="content-top-left">
          <div class="content-top-left-data1">
            {{ dataNow(1) }}
          </div>
          <div class="content-top-left-data2">
            <div>
              {{ dataNow(3) }}
            </div>
            <div>{{ dataNow(2) }}</div>

          </div>
        </div>
        <div class="content-top-right">
          <div class="content-top-fanhui">返回门户</div>
          <div>
            <div>
              <el-dropdown trigger="click">
                <span class="el-dropdown-link">
                  您好xxx<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>用户中心</el-dropdown-item>
                  <el-dropdown-item>退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>
        </div>
      </div>


      <div class="content-bottom">
        <div class="input">
          <el-input v-model="input" placeholder="请输入内容"></el-input>
        </div>

        <div class="sousuo" @click="gotoBgpage">
          搜索
        </div>

      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: '',
  components: {},
  data() {
    return {
      input: ""
    }
  },
  created() { },
  mounted() { this.dataNow(2) },
  methods: {
    gotoBgpage() {
      this.$router.push("/bgpage")
    },
    dataNow(index) {
      let now = new Date();

      if (index == 1) {
        let hour = now.getHours();
        if (hour < 10) hour = "0" + hour

        let minute = now.getMinutes();
        if (minute < 10) minute = "0" + minute

        let second = now.getSeconds();
        if (second < 10) second = "0" + second

        return `${hour}:${minute}:${second}`
      } else if (index == 2) {
        let year = now.getFullYear();
        if (year < 10) year = "0" + year

        let month = now.getMonth() + 1;
        if (month < 10) month = "0" + month

        let day = now.getDate();
        if (day < 10) day = "0" + day

        return `${year}:${month}:${day}`
      } else if (index == 3) {
        let dayOfWeek = now.getDay();
        // 将星期几转换为对应的中文表示
        let weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
        let chineseDayOfWeek = weekDays[dayOfWeek];
        return chineseDayOfWeek

      }
    }
  },
  computed: {}
} 
</script>
<style scoped lang='scss'>
@import '../assets/styles/theme.scss';

.container {
  width: 100vw;
  height: 100vh;
  padding: 10px 40px 0;
  background-color: #000000;
  position: relative;
  /* 将内容水平居中对齐 */
}

.content-top {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .content-top-left {
    display: flex;
    align-items: center;
    color: #ffffff;

    .content-top-left-data1 {
      font-size: 30px;
      font-weight: 500;
      font-family: DIN;
      margin: 0 20px 0 0;
    }
  }

  .content-top-right {
    display: flex;
    align-items: center;
    color: #ffffff;

    .content-top-fanhui {
      padding: 10px 10px;
      background-color: blue;
      border-radius: 10px;
    }

    .el-dropdown-link {
      color: #ffffff;
    }
  }


}

.content-bottom {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 800px;
  display: flex;
  color: #ffffff;

  .input {
    width: 500px;
  }

  .sousuo {
    color: #ffffff;
    padding: 3px 5px;
    background-color: blue;
    cursor: pointer;
  }
}
</style>