xiaoshu/src/views/Document.vue

<template>
    <main>
        <section>
            <div v-for="(item, key) in data" :key="key" :style="{ background: item.background }">
                <img :src="getAssetURL(item.img)" />
                <div :style="{ color: item.color }">
                    {{ item.title }}
                    <span>{{ item.content }}</span>
                </div>
            </div>
        </section>
        <footer>
            <a-popover :popup-visible="showUpload" position="tl">
                <div :class="{ 'text-hide': showUpload }">
                    <div
                        @click="
                            () => {
                                showUpload = true;
                            }
                        "
                    >
                        <img src="@/assets/document/3.svg" class="img-normal" v-if="!showUpload" />
                        <img src="@/assets/document/4.svg" class="img-hover" v-if="!showUpload" />
                        <img src="@/assets/document/5.svg" class="img-active" v-if="showUpload" />
                    </div>
                    <p>已选择 0/0 个文档</p>
                </div>
                <template #content>
                    <div class="upload-wrap">
                        <header>
                            <p>文档解析站</p>
                            <div
                                @click="
                                    () => {
                                        showUpload = false;
                                    }
                                "
                            >
                                <icon-close size="large" />
                            </div>
                        </header>
                    </div>
                </template>
            </a-popover>
        </footer>
    </main>
</template>
<script>
import { defineComponent, ref, inject } from "vue";
export default defineComponent({
    components: {},
    setup() {
        const showUpload = ref(false);
        const { helper } = inject("$global");
        const DEFAULT_DATA = [
            {
                background: "rgba(72, 177, 244, 0.06)",
                color: "rgb(72, 177, 244)",
                img: "/src/assets/document/1.png",
                title: "自定义个人文档",
                content: "支持个人文档上传，以列表形式管理个人文档库"
            },
            {
                background: "rgba(158, 128, 255, 0.06)",
                color: "rgb(158, 128, 255)",
                img: "/src/assets/document/2.png",
                title: "多文档问答",
                content: "支持勾选多个文档，实现基于限定文档的问答"
            }
        ];
        const data = ref(DEFAULT_DATA);
        return { data, getAssetURL: helper.getAssetURL, showUpload };
    }
});
</script>
<style lang="scss" scoped>
main {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    > section {
        overflow-y: auto;
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        flex: 1;
        > div {
            width: 382px;
            height: 120px;
            padding: 20px 24px;
            border-radius: 8px;
            display: flex;
            > img {
                width: 30px;
                height: 38px;
                margin-right: 12px;
            }
            > div {
                font-size: 18px;
                font-weight: 700;
                > span {
                    font-size: 15px;
                    font-weight: 400;
                    color: #797d7f;
                    margin-top: 8px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    line-height: 1.4;
                }
            }
        }
    }
    > footer {
        > div {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            height: 32px;
            border-radius: 21px;
            border: 1px solid #e3e3e3;
            white-space: nowrap;
            overflow: hidden;
            transition-duration: 0.3s;
            width: 250px;
            &.text-hide {
                width: 110px;
                overflow: hidden;
            }
            > p {
                overflow: hidden;
                white-space: nowrap;
            }
            > div {
                cursor: pointer;
                width: 110px;
                height: 32px;
                .img-normal {
                    display: block;
                }
                .img-hover {
                    display: none;
                }
                &:hover {
                    .img-normal {
                        display: none;
                    }
                    .img-hover {
                        display: block;
                    }
                }
                > img {
                    width: 110px;
                    height: 32px;
                }
            }
        }
    }
}
.upload-wrap {
    width: 800px;
    height: 300px;
    > header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        > p {
            font-size: 18px;
            font-weight: bold;
        }
        > div {
            width: 38px;
            height: 38px;
            border-radius: 6px;
            cursor: pointer;
            justify-content: center;
            align-items: center;
            display: flex;
            &:hover {
                background: rgba(0, 0, 0, 0.05);
            }
        }
    }
}
</style>