queenjs-modules-shared/packages/auth/components/components/LoginBox.tsx

import { css } from "@linaria/core";
import { defineComponent } from "vue";
import { useAuth } from "../..";

export default defineComponent({
  setup(props, { slots }) {
    const auth = useAuth();
    const bannerStyle = auth.helper.createBgStyle(
      auth.config.banner?.background
    );
    return () => (
      <div class={containerRoot}>
        {auth.config.banner && (
          <section class="login-banner" style={bannerStyle}>
            <div class="banner-content">
              <pre class="content-title">{auth.config.banner.title}</pre>
              <pre class="content-subTit">{auth.config.banner.subTitle}</pre>
            </div>
          </section>
        )}
        {slots.default?.()}
      </div>
    );
  },
});

const containerRoot = css`
  display: flex;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;

  .login-banner {
    width: 400px;
    color: @inf-text-color;

    .banner-content {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.3);
    }

    pre {
      margin: 24px;
      font-family: Arial, Helvetica, sans-serif;
    }

    .content-title {
      font-size: 24px;
      color: #fff;
    }
    .content-subTit {
      font-size: 16px;
      color: #ccc;
    }
  }
`;