<template>
  <div class="top-box">
    <div class="">
      <div class="left">
        <!-- <img :src="logoImg" class="logo" @click="clickLogo" /> -->
        <!-- <span class="system">九州通数字档案馆系统</span> -->
      </div>
      <div class="right">
        <span class="btn" v-if="isLogin" @click="goLogin">登录</span>
        <!-- <span class="btn" v-if="isRegister" @click="goRegister">注册</span> -->
      </div>
    </div>
  </div>
</template>

<script>
import logoImg from "@/assets/img/userlog.png";
export default {
  props: {
    isLogin: {
      type: Boolean,
      default: () => false,
    },
    isRegister: {
      type: Boolean,
      default: () => false,
    },
  },
  data() {
    return {
      logoImg: logoImg,
    };
  },
  methods: {
    goLogin() {
      this.$router.push({
        path: "/userLogin",
      });
    },
    goRegister() {
      this.$router.push({
        path: "/userRegister",
      });
    },
    clickLogo() {
      this.$router.push({
        path: "/login",
      });
    },
  },
};
</script>


<style lang="scss" scoped>
.top-box {
  width: 100%;
  height: 80px;
  background-color: rgba(255, 255, 255, 0.04);

  .top-content {
    width: 1200px;
    margin: 0 auto;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .left {
      height: 100%;
      display: flex;
      align-items: center;

      .logo {
        height: 60px;
        margin-right: 30px;
        cursor: pointer;
      }

      .system {
        font-size: 32px;
        color: #f2f5fb;
        font-family: 'Open Sans', Arial, sans-serif,'Microsoft YaHei';
        font-weight: 500;
      }
    }

    .right {
      height: 100%;
      display: flex;
      align-items: center;

      .btn {
        display: inline-block;
        color: #efefef;
        background-color: #070a39;
        border: 1px solid #efefef;
        padding: 6px 12px;
        border-radius: 8px;
        margin-left: 15px;
        font-size: 16px;
        cursor: pointer;
        opacity: 0.9;

        &:hover {
          opacity: 1;
        }
      }
    }
  }
}

// @media screen and(max-width: 3000px) {
//   // 1920
//   .top-box {
//     .top-content {
//       width: 1550px !important;
//     }
//   }
// }

// @media screen and(max-width: 1700px) {
//   // 1600, 1680
//   .top-box {
//     .top-content {
//       width: 1400px !important;
//     }
//   }
// }

// @media screen and(max-width: 1500px) {
//   // 1366, 1440
//   .top-box {
//     .top-content {
//       width: 1200px !important;
//     }
//   }
// }
</style>
