feat: 增加一些组件

zhangnuoyan

2024-08-25 54f5cd85e43bf92266a2617994642e1b8aa5bcb5

 src/views/components/the-img-card/index.vue

@@ -3,38 +3,21 @@
    <div class="the-img-card" :class="currentThemeMode === 'dark' ? 'card-img-dark' : ''">
        <div class="img-box-card">
            <div class="card-icon" :style="dynamicStyle">
                <a-image
                    width="140"
                    height="140"
                    border-radius="14px"
                    :preview="false"
                    src="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp"
                />
                <a-image width="140" height="140" border-radius="14px" :preview="false" :src="icon" />
            </div>
            <div class="card-content">
                <div class="card-content-top">
                    <div class="card-name">
                        <span class="name">张三</span>
                        <span class="name">{{ title }}</span>
                        <icon-woman v-if="sex && sex === 'woman'" />
                        <icon-man v-if="!sex && sex === 'woman'" />
                    </div>
                    <div @click="handleChange" class="card-detail">详情 ></div>
                    <div class="card-detail" @click="handleChange">详情 ></div>
                </div>
                <div>
                    <span>人员编号</span>：
                    <span>H324343</span>
                </div>
                <div>
                    <span>出现天数</span>：
                    <span>2天</span>
                </div>
                <div>
                    <span>居住地址</span>：
                    <span>经济快速等级考试</span>
                </div>
                <div>
                    <span>身份证号</span>：
                    <span>3673672627722</span>
                <div v-for="(content, key) in contents" :key="key">
                    <span>{{ content.key }}</span
                    >：
                    <span>{{ content.value }}</span>
                </div>
            </div>
        </div>
@@ -49,29 +32,14 @@
    defineProps<{
        icon?: string;
        title?: string;
        unit?: string;
        metering?: number;
        colorBg?: string;
        sex?: boolean;
        isIcon?: boolean;
        contents?: Array<any>;
    }>(),
    {
        icon: "",
        title: "",
        unit: "",
        metering: 0,
        colorBg: "#fff",
        sex: true,
        isIcon: true
        contents: () => []
    }
);

const colorBg = computed(() => {
    return props.colorBg;
});
const dynamicStyle = {
    backgroundColor: colorBg.value // 动态背景色
};

const emits = defineEmits<{
    (e: "handleChange", data: object): void;