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="llrr">
                    <div class="left">
                        <div class="name">
                            <div v-if="item.name">{{ item.name }}</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>
                        </div>
                    </div>
                    <div class="right" v-if="item.name2 || item.info2 || item.info2s">
                        <div class="name">

                            <div v-if="item.name2" class="name2">{{ item.name2 }}</div>

                        </div>
                        <div v-if="item.info2 || item.info2s">
                            <div class="info" :style="{
                                height: item.info2s && '30px',
                            }">
                                <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>
                </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;"
                            :align="title.align" :key="index" />
                    </el-table>
                </div>
                <div class="Modeltable" 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="320 * (title.width / 100)" :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;

    @media screen and (max-width: 768px) {
        overflow: hidden;
    }

    .Modeltable {
        display: none;

        @media screen and (max-width: 768px) {
            display: block;
            margin-top: 10px;

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

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

            :deep(.cell) {

                font-family: 'Calibri';
            }

        }
    }

    @media screen and (max-width: 768px) {
        margin: 0 15px 0 15px;
        // overflow: hidden;
    }

    // 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;

            .llrr {
                display: flex;


                @media screen and (max-width: 768px) {
                    flex-direction: column;
                }
            }

            .left {
                width: 450px;
            }

            .right {
                width: 200px;

                @media screen and (max-width: 768px) {
                    margin-top: 10px;
                }

            }

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

                .name2 {}



            }

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


                a {
                    color: #355D80;
                }

                .info2 {}
            }

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

                @media screen and (max-width: 768px) {
                    display: none;
                }

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

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

                :deep(.cell) {

                    font-family: 'Calibri';
                }
            }
        }
    }
}
</style>