<!--
 * @Description: 共有头部
 * @Author: 空白格
 * @Date: 2022-08-10 11:30:36
 * @LastEditors: 空白格
 * @LastEditTime: 2022-08-11 17:52:08
 * @FilePath: \veterans_client_web\src\layout\index.vue
 * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
-->
<template>
  <div class="container">
    <div class="header" height="73px">
      <div class="header-box">
        <div class="header-box-left">
          <router-link to="/">贵州退役军人教育培训</router-link>
        </div>
        <div class="header-box-right">
          <div class="header-box-right-search">
            <el-input
              placeholder="请输入搜索内容"
              size="small"
              v-model="searchValue"
            >
              <i slot="prefix" class="el-input__icon el-icon-search"></i>
            </el-input>
          </div>
          <div class="header-box-right-user" v-if="isLogin">
            下午好，{{ userInfo.userName }}
          </div>
          <div class="header-box-right-user" v-else>
            下午好，请<router-link class="link" to="/login">登录</router-link>
          </div>
        </div>
      </div>
    </div>
    <div class="main">
      <router-view />
    </div>
    <div class="footer" height="100px">
      <div class="footer-link">
        <router-link class="link" to="">关于我们</router-link> |
        <router-link class="link" to="">加入收藏</router-link> |
        <router-link class="link" to="">隐私声明</router-link> |
        <router-link class="link" to="">网站地图</router-link> |
        <router-link class="link" to="">联系我们</router-link> |
        <router-link class="link" to="">网站年报</router-link>
      </div>
      <div class="footer-organizer">
        主办单位：贵州省退役军人事务厅、黔CP备19001516号-1
        网站标识码：5200000143
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "Layout",
  data() {
    return {
      searchValue: "",
    };
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.user.userInfo,
      isLogin: (state) => state.user.isLogin
    }),
  },
  created() {},
};
</script>

<style lang="scss" scoped>
.header {
  background-color: #416050;
  height: 73px;
  &-box {
    width: 70%;
    min-width: 600px;
    height: 73px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    &-left a {
      color: #fff;
      font-size: 26px;
      font-family: SourceHanSansCN;
      font-weight: blod;
    }
    &-right {
      display: flex;
      align-items: center;
      &-search {
        :deep(.el-input__inner) {
          border-radius: 100px !important;
          width: 253px;
          height: 42px;
          line-height: 42px;
          padding-left: 57px;
          background: rgba($color: #fff, $alpha: 0.5);
          color: #fff;
          &::placeholder {
            color: #fff;
          }
        }
        :deep(.el-input__prefix) {
          font-size: 20px;
          left: 16px;
          color: #fff;
        }
        :deep(.el-input--small .el-input__icon) {
          line-height: 42px;
        }
      }
      &-user {
        color: #fff;
        margin-left: 30px;
        font-size: 16px;
        .link {
          color: #fff;
        }
      }
    }
  }
}
.main {
  background-color: #f2f2f2;
}
.footer {
  background-color: #659789;
  opacity: 0.7;
  height: 100px;
  text-align: center;
  color: #fff;
  font-size: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  &-link {
    line-height: 30px;
    .link {
      color: #fff;
      margin: 0 5px;
    }
  }
}
</style>
