queenshow/src/modules/editor/components/CompUI/customUI/Covers/Cover/component.tsx

import { css } from "@linaria/core";
import { isPc } from "@queenjs/utils";
import { onMounted, ref } from "vue";
import { string } from "vue-types";
import { useCompData } from ".";
import { Text } from "../../..";
import { createUIComp } from "../../../defines/createUIComp";

export const Component = createUIComp({
  props: {
    compId: string().isRequired,
  },
  setup(props) {
    const { children } = useCompData(props.compId);

    const elRef = ref();
    onMounted(() => {
      elRef.value.style.height = isPc()
        ? "12.8rem"
        : document.documentElement.clientHeight + "px";
    });

    return () => {
      return (
        <div class={compStyle} ref={elRef}>
          <Text.Component compId={children.title.id} />
          <div class="arrow">↓</div>
        </div>
      );
    };
  },
});

const compStyle = css`
  .arrow {
    position: absolute;
    left: 50%;
    bottom: 0.42rem;
    width: 0.7rem;
    height: 0.7rem;
    line-height: 0.7rem;
    font-size: 0.36rem;
    text-align: center;
    color: #fff;
    border: 2px solid #fff;
    border-radius: 50%;
    transform: translateX(-50%);
  }
`;