fini-ui/src/views/IPO/components/IpoContent.vue

<template>
    <div class="wrap22">

        <div class="title">{{ title }}</div>
        <ul>
            <li v-for="(item, index) in data.info" :key="index">
                <div class="name">
                    <div v-if="item.name">{{ item.name }}</div>
                    <div v-if="item.name2" class="name2">{{ item.name2 }}</div>

                </div>
                <div v-if="item.infos">

                    <div class="info" v-if="item.infos.length" v-for="(t, index) in item.infos" :key="index">{{ t }}
                    </div>
                    <div class="info" v-else>-</div>

                </div>
                <div v-if="item.info || item.info2 || item.info2s">
                    <div class="info" :style="{
                        height: item.info2s && '30px',
                    }">
                        <div v-if="item.info">
                            <a :href="item.href" v-if="item.href">{{ item.info }}</a>
                            <span v-else>{{ item.info }}</span>

                        </div>
                        <div v-if="item.info2" class="info2" :style="{ top: item.info2Top && item.info2Top }">
                            <a :href="item.href2" v-if="item.href2">{{ item.info2 }}</a>
                            <span v-else>{{ item.info2 }}</span>
                        </div>
                        <div v-if="item.info2s" class="info2">
                            <div v-for="(t, index) in item.info2s" :key="index">{{ t }}</div>
                        </div>
                    </div>
                </div>
                <div class="table" v-if="item.table">
                    <el-table :data="item.table.lists" stripe style="width: 100%;">
                        <el-table-column v-for="(title, index) in item.table.title" :prop="title.content"
                            :label="title.header" :width="800 * (title.width / 100)" style="padding-left: 100px; color:red"
                            :align="title.align" :key="index" />
                    </el-table>
                </div>


            </li>

        </ul>
    </div>
</template>

<script lang="ts">
export default {
    name: "Ipocontent",
};
</script>

<script lang="ts" setup>

interface obj {
    name: string
    info?: string | null | undefined
    href?: string;
    href2?: string;
    infos?: Array<string>
    name2?: string
    info2?: string | null | undefined
    info2s?: Array<string>
    info2Top?: string
    table?: {
        title: { header?: string, content?: string, width: number, align?: string }[],
        lists: { des?: string, number?: string, persent?: string }[]
    }
}
// width值传1-100 代表的是表头宽度的百分比
const data = defineProps<{ info: obj[], title: string }>()

</script>

<style lang="scss" scoped>
.wrap22 {
    background-color: #fff;
    padding: 15px;
    border-left: 15px solid #98C2F2;
    margin-bottom: 20px;

    // height: 600px;
    .title {
        font-size: 27px;
        line-height: 24px;
        font-weight: 700;
        color: #1C3F56;
        font-family: "Calibri";
    }

    ul {

        // display: flex;
        // flex-direction: column;
        margin-top: 15px;

        li {
            margin-bottom: 25px;

            .name {
                color: #8AA1B6;
                font-size: 12px;
                position: relative;

                .name2 {
                    position: absolute;
                    top: 0px;
                    left: 450px;
                }


            }

            .info {
                font-size: 18px;
                line-height: 16px;
                color: #355D80;
                font-weight: 500;
                margin-top: 8px;
                position: relative;
                font-family: "Calibri";
     
                a {
                    color: #355D80;
                }

                .info2 {
                    position: absolute;
                    top: 0px;
                    left: 450px;
                }
            }

            .table {
                width: 800px;
                margin-top: 20px;

                :deep(.el-table) {
                    color: #355D80;
                }

                :deep(.el-table thead) {
                    color: #355D80;
                }

                :deep(.cell) {
                    // max-width: 310px;
                    // color: red;
                    font-family: 'Calibri';
                }
            }
        }
    }
}
</style>