陶杰
2025-01-09 cc1ee1fb090b8344faab02537dec80995cec93fe
pages/login.vue
@@ -1,9 +1,18 @@
<template>
  <div class="login-page">
  <div class="login-page"
  :style="{
    backgroundImage: 'url(' + bgUrl + ')',
    backgroundSize: 'cover',
    backgroundPosition: 'center',
    height: '100vh' }
  "
  >
    <div class="form-content">
      <div class="text-22 font-bold text-mainTitle">HELLO</div>
      <div class="text-26 font-bold text-mainTitle">
        欢迎来到<span class="text-primary">{{ platformName }}</span>
        <!-- 欢迎来到<span class="text-primary">{{ platformName }}</span> -->
        欢迎来到<span class="text-primary">{{ copyright?.base_website_name }}</span>
      </div>
      <div class="flex items-center justify-center mt-50 mb-20">
        <div
@@ -118,8 +127,15 @@
          >登录</el-button
        >
      </el-form>
      <div class="copyright">
          <img class="copyright-logo" :src="logoUrl" /> {{ copyright?.base_website_name }} 版权所有 |
          {{ copyright?.base_regisition_num }}
      </div>
    </div>
  </div>
</template>
<script>
@@ -152,6 +168,9 @@
        },
        code: { required: true, message: '请输入图形验证码', trigger: 'blur' },
      },
      copyright:{},
      logoUrl:'',
      bgUrl:'https://hmy-flower.oss-cn-shanghai.aliyuncs.com/87/878c638c06cf4c3080e6b7139f9a955cdshsp.png',
    }
  },
  watch: {
@@ -162,10 +181,22 @@
    },
  },
  async mounted() {
    await this.getCopyRight()
    // 获取验证码图形
    await this.getCapacha()
  },
  methods: {
    async getCopyRight() {
      const { code, data } = await this.$services.base.getBaseInfo()
      if (code === 0) {
        this.copyright = data
        this.copyright.base_bg_url = JSON.parse(data.base_bg_url || [])
        this.copyright.base_logo_url = JSON.parse(data.base_logo_url || [])
        this.logoUrl = this.copyright?.base_logo_url[0]?.url
        this.bgUrl=this.copyright?.base_bg_url[0]?.url
      }
    },
    async getCapacha() {
      const { captchaCodeId, imageSrc } =
        await this.$services.base.createCaptcha()
@@ -278,5 +309,24 @@
      }
    }
  }
  .copyright {
    width:100%;
    margin: auto;
    margin-top: 10px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-content: center;
    font-size: 12px;
    color: gray;
    .copyright-logo {
      width: 15px;
      height: 15px;
      border-radius: 50px;
      /* 设置圆角 */
    }
  }
}
</style>