queenshow/src/modules/editor/components/CompUI/customUI/CardDemo/index.tsx

import { Dict_Imgs } from "@/dict";
import { css } from "@linaria/core";
import { defineComponent, reactive, watch } from "vue";
import { any } from "vue-types";
import { Image, Text } from "../..";
import { options } from "./options";

export const CardDemo = defineComponent({
  props: {
    value: any<typeof options.value>().isRequired,
  },
  setup(props) {
    const state = reactive(props.value);

    watch(
      () => [state.cardColumns],
      () => {
        const { cardColumns, list } = state;
        const offset = cardColumns - list.length;
        if (offset > 0) {
          Array.from({ length: offset }, () => {
            list.push({ name: "name", img: Dict_Imgs.Default, desc: "xxx" });
          });
        } else {
          list.splice(cardColumns, offset * -1);
        }
      }
    );

    return () => (
      <>
        <Text v-model={[state.title, "value"]} />
        <Text v-model={[state.desc, "value"]} />
        <div class="flex space-x-16px">
          {state.list.map((d, i) => (
            <div class="w-0 flex-1 relative">
              <Image
                class={imgStyle}
                style={{ borderColor: state.themeColor }}
                v-model={[d.img, "value"]}
              />
              <div
                class={numberStyle}
                style={{ backgroundColor: state.themeColor }}
              >
                {(++i / 100).toString().split(".")[1]}
              </div>
              <Text class="mt-24px" v-model={[d.name, "value"]} />
              <Text v-model={[d.desc, "value"]} />
            </div>
          ))}
        </div>
      </>
    );
  },
});

const imgStyle = css`
  border-bottom: 2px solid;
`;

const numberStyle = css`
  position: absolute;
  left: 50%;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  box-sizing: content-box;
  border: 3px solid #fff;
  transform: translate(-50%, -50%);
`;