<template>
  <div id="top">
    <el-row>
      <el-col :span="24" class="top">
        <el-col :span="24" class="one">
          <div class="w_1200">
            <p class="time">{{ time }}</p>
          </div>
        </el-col>
        <el-col :span="24">
          <div class="w_1200">
            <el-col :span="18" class="logo">
              <a href="/">
                <p class="title">{{ infoMes.title }}</p>
                <p class="e-title">{{ infoMes.engtitle }}</p>
              </a>
            </el-col>
            <el-col :span="6" class="search">
              <el-input placeholder="请输入内容" suffix-icon="el-icon-search" v-model="input2"> </el-input>
            </el-col>
          </div>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex';
var moment = require('moment');
export default {
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  name: 'top',
  props: {
    infoMes: { type: Object },
  },
  components: {},
  data: function() {
    return {
      input2: '',
      time: '',
    };
  },
  created() {
    this.time = moment().format('LL dddd');
  },
  methods: {},
  computed: {
    ...mapState(['user']),
  },
};
</script>

<style lang="less" scoped>
.w_1200 {
  width: 1200px;
  margin: 0 auto;
}
.top {
  .one {
    height: 40px;
    background-color: #215299;
    .time {
      line-height: 40px;
      color: #fff;
    }
  }
  .logo {
    margin: 90px 0px;
    a {
      display: inline-block;
      .title {
        color: #215299;
        font-size: 36px;
        font-family: cursive;
        font-weight: 600px;
        text-shadow: -1px 0 rgb(3, 3, 3), 0 1px white, 1px 0 white, 0 -1px white;
      }
      .e-title {
        color: #215299;
        font-size: 18px;
        font-weight: bold;
      }
    }
  }
  .search {
    margin: 102px 0px;
    height: 40px;
  }
}
/deep/.el-input__inner {
  background: #2152999f;
  border-radius: 20px;
  border: 0;
  color: #fff;
}
</style>
