iopProject

2023-04-12 14:40:19 +08:00
commit 54bc2204dc
133 changed files with 35706 additions and 0 deletions
@@ -0,0 +1,160 @@
+<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>