webnew-count/src/layout/common/top.vue

<template>
  <div id="logo">
    <el-col :span="24" class="top">
      <div class="w_1200">
        <el-col :span="12">
          <span class="date">{{ data }}</span>
        </el-col>
        <el-col :span="12" class="login">
          <span v-if="user.type == null">
            <el-button size="mini" @click="$router.push({ path: '/login' })">登录</el-button>
            <el-button size="mini" @click="$router.push({ path: '/register' })">注册</el-button>
          </span>
          <span v-else>
            <!-- <span style="padding:0 15px 0 0;">{{ user.name }}</span> -->
            <el-button @click="$router.push({ path: '/pcenter/index' })">个人中心</el-button>
          </span>
        </el-col>
      </div>
    </el-col>
    <el-col :span="24" class="logo">
      <div class="w_1200">
        <el-col :span="2" class="image" @click.native="clickBtn()">
          <el-image :src="src"></el-image>
        </el-col>
        <el-col :span="15" class="title" @click.native="clickBtn()">
          <p>吉林省计算中心</p>
          <p>JiLin province computing center</p>
        </el-col>
        <el-col :span="7" class="search">
          <el-input placeholder="关键词" v-model="input"></el-input>
          <el-button icon="el-icon-search"></el-button>
        </el-col>
      </div>
    </el-col>
  </div>
</template>

<script>
import moment from 'moment';
import { mapState, createNamespacedHelpers } from 'vuex';
export default {
  name: 'logo',
  props: {},
  components: {},
  data: () => ({
    src: require('@/assets/logo.png'),
    newsrc: require('@/assets/123.jpg'),
    data: '',
    input: '',
  }),
  created() {
    this.searchdate();
  },
  computed: {
    ...mapState(['user']),
  },
  methods: {
    searchdate() {
      let date = moment().format('YYYY-MM-DD ');
      let week = moment().format('d');
      let newWeek = week == 1 ? '一' : week == 2 ? '二' : week == 3 ? '三' : week == 4 ? '四' : week == 5 ? '五' : week == 6 ? '六' : week == 7 ? '日' : '';
      let newDate = date + '星期' + newWeek;
      this.$set(this, `data`, newDate);
    },
    clickBtn() {
      this.$router.push({ path: '/' });
    },
  },
};
</script>

<style lang="less" scoped>
.w_1200 {
  width: 1200px;
  margin: 0 auto;
}
.top {
  height: 40px;
  overflow: hidden;
  background-color: rgba(11, 58, 125, 0.8);
  color: #fff;
  line-height: 40px;
}
.login {
  text-align: right;
  .el-button {
    background: transparent;
    color: #fff;
    border: none;
    font-size: 18px;
    padding: 0 0;
  }
}
.logo {
  height: 200px;
  overflow: hidden;
  .image {
    padding: 66px 0;
  }
  .title {
    padding: 66px 0;
    p:first-child {
      font-size: 40px;
      color: rgb(255, 255, 255);
      font-family: 黑体;
    }
    p:last-child {
      font-size: 16px;
      color: rgb(255, 255, 255);
      font-family: 黑体;
      text-transform: uppercase;
    }
  }
  .title:hover {
    cursor: pointer;
  }
}
.search {
  height: 40px;
  background: #2152994f;
  border-radius: 25px;
  color: #fff;
  padding: 0 0 0 16px;
  margin: 80px 0;
  .el-input {
    float: left;
    width: 85%;
  }
  .el-button {
    float: left;
    padding: 8px 8px;
    background: transparent;
    border: none;
    font-size: 25px;
  }
}
/deep/.el-input__inner {
  background: transparent;
  border: none;
  color: #fff;
}
</style>