效果图(还没画好 将就看吧 就这个意思)

image.png

html代码

<div
                        style="background-color: #fff;padding: 10px;height: calc(100% - 55px);display: flex;align-items: center;justify-content: left"
                    >
                        <div v-for="(item, index) in fileList" :key="index" class="wenshu">
                            <div class="h-50 w-100">
                                <el-row class="title12">
                                    <el-tooltip
                                        class="item"
                                        effect="dark"
                                        :content="item.name"
                                        placement="top"
                                    >
                                        <span>{{ item.name }}</span>
                                    </el-tooltip>
                                </el-row>
                            </div>
                            <div class="h-50 w-100">
                                <el-row class="itembutton">
                                    <div class="load_text" @click="lookPDF(item)">
                                        点击查看
                                    </div>
                                </el-row>
                            </div>
                        </div>
                    </div>

css

.wenshu {
    width: 200px;
    height: 150px;
    margin: 5px;
    background: url('/assets/wenshu_back.jpg');
    background-size: 200px 200px;
    .title12 {
        padding-top: 24px;
        padding-left: 43px;
        color: #ffffff;
        font-size: 20px;
    }
    .itembutton {
        padding-top: 6px;
        padding-left: 43px;
        cursor: pointer;
        .load_text {
            line-height: 27px;
            text-align: center;
            width: 79px;
            background: #cce0f0;
            border-radius: 3px;
            font-size: 14px;
            color: #0062b4;
        }
    }
}

第二次效果

image.png

html

    <div
                        style="background-color: #fff;padding: 10px;height: calc(100% - 55px);display: flex;align-items: center;justify-content: left"
                    >
                        <div v-for="(item, index) in fileList" :key="index" class="wenshu">
                            <div class="h-40 w-100">
                                <!--                                    删除按钮-->
                                <el-row class="removeButton">
                                    <el-tooltip
                                        class="item"
                                        effect="dark"
                                        :content="'删除' + item.name"
                                        placement="top"
                                    >
                                        <el-button
                                            type="danger"
                                            icon="el-icon-delete"
                                            @click="PDFRemove(item)"
                                            circle
                                        />
                                    </el-tooltip>
                                </el-row>
                                <!--                                    题目-->
                                <!--                                <el-row class="title12">-->
                                <!--                                    <el-tooltip-->
                                <!--                                        class="item"-->
                                <!--                                        effect="dark"-->
                                <!--                                        :content="item.name"-->
                                <!--                                        placement="top"-->
                                <!--                                    >-->
                                <!--                                        <span>{{item.name}}</span>-->
                                <!--                                    </el-tooltip>-->
                                <!--                                </el-row>-->
                            </div>
                            <!--                                查看按钮-->
                            <div class="h-70 w-100">
                                <el-tooltip
                                    class="item"
                                    effect="dark"
                                    :content="'点击查看'+item.name"
                                    placement="top"
                                >
                                    <el-row style="height: 100%" @click="lookPDF(item)"/>
                                </el-tooltip>
                            </div>
                        </div>
                    </div>
                </div>

css

.wenshu {
    width: 150px;
    height: 150px;
    margin: 5px;
    background-image: url('/assets/PDF.png');
    background-repeat: no-repeat;
    background-size: 150px 150px;
    /*  题目*/
    .title12 {
        padding-top: 24px;
        padding-left: 43px;
        color: #ffffff;
        font-size: 20px;
    }
    /*  删除按钮*/
    .removeButton {
        margin-left: 10px;
    }
    /*  查看按钮*/
    .itembutton {
        padding-top: 45px;
        padding-left: 35px;
        cursor: pointer;
        .load_text {
            line-height: 27px;
            text-align: center;
            width: 79px;
            /*background: #cce0f0;*/
            /*border-radius: 3px;*/
            font-size: 14px;
            color: #0062b4;
        }
    }
}