novel-front-app/pages_order/novel/login.vue

<template>
  <div class="login-page">
    <div class="logo-box">
      <img class="logo" src="/static/auth/headImage.png" alt="logo" />
    </div>
    <div class="title">瀚涵中文网</div>
    <LoginButton type="primary" @click="onLogin">登录</LoginButton>
    <div class="cancel-row">
      <LoginButton type="secondary" @click="onCancel">取消登录</LoginButton>
      <span class="arrow-icon">◆</span>
      <span class="dashed-line"></span>
    </div>
    <AgreementCheck v-model:checked="checked">
      我已阅读并同意<a href="#">《服务协议》</a>和<a href="#">《隐私政策》</a>
    </AgreementCheck>
    <div class="book-bg"></div>
  </div>
</template>

<script>
import LoginButton from './components/LoginButton.vue';
import AgreementCheck from './components/AgreementCheck.vue';

export default {
  name: 'NovelLogin',
  components: { LoginButton, AgreementCheck },
  data() {
    return {
      checked: false
    };
  },
  methods: {
    onLogin() {
      if (!this.checked) {
        this.$toast && this.$toast('请先同意协议');
        return;
      }
      // 登录逻辑
    },
    onCancel() {
      // 取消登录逻辑
    }
  }
};
</script>

<style scoped>
.login-page {
  min-height: 100vh;
  background: #eef2fc;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  padding-top: 60px;
}
.logo-box {
  width: 120px;
  height: 120px;
  background: #fff;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px #e0e6f6;
}
.logo {
  width: 80px;
  height: 80px;
  object-fit: contain;
}
.title {
  font-size: 22px;
  font-weight: bold;
  color: #222;
  margin-bottom: 32px;
}
.cancel-row {
  width: 80%;
  display: flex;
  align-items: center;
  position: relative;
  margin-bottom: 8px;
}
.arrow-icon {
  color: #fd7e14;
  font-size: 18px;
  margin: 0 6px;
  z-index: 2;
}
.dashed-line {
  flex: 1;
  border-bottom: 2px dashed #fd7e14;
  height: 0;
  margin-left: -8px;
}
.book-bg {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 220px;
  height: 180px;
  background: url('/static/auth/headImage.png') no-repeat center/contain;
  opacity: 0.08;
  z-index: 0;
}
</style>