new-hjb-pc/hjb_pc/components/BatchItemUI.vue

<script setup>
const props = defineProps(['channelsData', 'opctions', 'hintA', 'ifExc'])
const emit = defineEmits(['footerCliBtn'])
const upFile = ref()
</script>

<template>
    <div class="batch-item-ui">
        <div class="header">
            {{ opctions.header }}
        </div>
        <div class="main-box">
            <div class="hint">
                <img src="/images/i.png" alt="">
                {{ opctions.hint }}
            </div>
            <ul class="channels" v-if="props.channelsData">
                <li class="item" v-for="item, index in props.channelsData" :key="index" @click="item.click">
                    <div class="img-box" :style="item.tit1?{}:{width:'100%',borderRadius:'unset'}">
                        <img :src="item.imgUrl" alt="" style="width:100%;height: 100%;" :style="item.tit1?{}:{width:'auto'}">
                    </div>
                    <div v-if="item.tit1" class="con-tit">
                        <div class="tit1">{{ item.tit1 }}</div>
                        <!-- <div class="tit2">{{ item.tit2 }}</div> -->
                    </div>
                </li>
            </ul>
            <div v-if="opctions.ifExc" class="excel-box">
                <div class="top">
                    <span class="file-lable">*EXCEL订单附件上传：</span>
                    <div class="file-center">
                        <el-upload class="file-cli" :multiple="false" :on-success="(response, file, fileList) => {
                            const last = fileList[fileList.length - 1]
                            fileList.length = 0
                            fileList.push(last)
                            upFile = file
                        }">
                            <div class="text">{{ upFile ? upFile.name : '未选择文件' }}</div>
                            <el-button class="btn file-btn" type="danger">选择文件</el-button>
                        </el-upload>
                    </div>
                    <!-- <el-button class="btn down-load" type="danger" plain>下载批量导入模板</el-button> -->
                    <div class="div_btn down-load">下载批量导入模板</div>
                </div>
                <div class="bottom">
                    <a v-if="hintA" :href="hintA.href">{{ hintA.text }}</a>
                    <!-- <img src="/images/i.png" alt=""><span>为了保证订单识别准确性，请按照模板样式和文件格式为CSV再上传</span> -->
                </div>
            </div>
        </div>
        <div class="footer">
            <div class="add-order-btn" @click="emit('footerCliBtn')">
                {{ opctions.footer }}
            </div>
        </div>

    </div>
</template>

<style scoped lang="scss">
@import url('//at.alicdn.com/t/c/font_4514007_bcjmwew461c.css');

::v-deep .el-upload-list {
    display: none;
}

.batch-item-ui {
    width: 100%;
    border: .0052rem dashed #aaa;

    &,
    * {
        box-sizing: border-box;
    }

    .header {
        background-color: #f3f4f8;
        height: 0.2083rem;
        color: #252b3a;
        font-size: 0.0833rem;
        line-height: 0.2083rem;
        padding: 0 0.2604rem;
        display: flex;
        align-items: center;
    }

    .header::before {
        content: ' ';
        display: block;
        background-color: #ff4e8d;
        width: 0.0156rem;
        height: 0.0833rem;
        margin-right: 0.026rem;
    }

    .main-box {
        margin: .1458rem .2083rem .026rem;

        .hint {
            font-size: .0677rem;
            font-weight: 400;
            background-color: #fceced;
            color: #575d6c;
            line-height: 1.7;
            margin-bottom: .1563rem;
            display: flex;
            align-items: center;
        }

        .channels {
            list-style: none;
            display: flex;
            flex-wrap: wrap;

            .item {
                --n: 4;
                --space: calc(100% - var(--n)*1.3646rem);
                --h: calc(var(--space)/(var(--n) - 1));
                padding: 0;
                float: left;
                width: 1.3646rem;
                height: .4583rem;
                background: #fff;
                border: .0052rem solid #e1e1e3;
                opacity: 1;
                margin-bottom: .125rem;
                margin-left: var(--h);
                display: flex;

                .img-box {
                    width: .3125rem;
                    height: .3125rem;
                    overflow: hidden;
                    margin: auto .1146rem .0729rem;
                    border-radius: 50%;
                    box-shadow: 0rem 0rem .5208rem #ccc;
                    background-color: #fff;
                }

                .con-tit {
                    width: .8125rem;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    word-break: break-all;

                    .tit1 {
                        font-size: .0729rem;
                        font-weight: 700;
                        color: #252b3a;
                    }

                    .tit2 {
                        font-size: .0625rem;
                        font-weight: 400;
                        color: #575d6c;
                        margin-top: .026rem;
                    }

                }
            }

            .item:nth-of-type(4n-3) {
                margin-left: 0;
            }

            .item:hover {
                border: .0052rem solid #d90e19;
            }
        }

        .excel-box {
            width: 100%;
            margin-bottom: .0729rem;

            .top {
                --height: .1979rem;
                display: flex;
                justify-content: center;
                height: var(--height);

                .file-lable {
                    font-size: .0729rem;
                    font-weight: 400;
                    color: #252b3a;
                    line-height: var(--height);
                }

                .file-center {
                    .file-cli {
                        .text {
                            width: 1.5625rem;
                            border: .0052rem solid #e1e1e3;
                            padding-left: .0521rem;
                            height: var(--height);
                            line-height: var(--height);
                            color: #8a8e99;
                        }

                        .file-btn {
                            border-top-left-radius: 0;
                            border-bottom-left-radius: 0;
                        }
                    }
                }

                .btn {
                    height: var(--height);
                }

                .down-load {
                    margin-left: .2604rem;
                }

                .div_btn {
                    padding: 0 .1458rem;
                    text-align: center;
                    height: var(--height);
                    line-height: var(--height);
                    color: #fff;
                    background: linear-gradient(90deg, #ff99bd 0%, #ffddbe 100%);
                    border-radius: .0521rem;
                    font-size: .0833rem;
                    cursor: pointer;
                }
            }

            .bottom {
                display: flex;
                justify-content: center;
                align-items: center;
                margin-top: .0521rem;

                span {
                    font-size: .0677rem;
                    color: #8a8e99;
                }

                a {
                    display: inline-block;
                    color: #d90e19;
                    text-decoration: underline;
                }
            }
        }
    }

    .footer {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 0.3438rem;
        border: .0052rem solid transparent;
        background: linear-gradient(white, white) padding-box,
            repeating-linear-gradient(-45deg, #ccc 0, #ccc 0.5em, white 0, white 0.75em);

        .add-order-btn {
            padding: 0 .1042rem;
            border: .0052rem solid #ff4e8d;
            color: #ff4e8d;
            text-align: center;
            line-height: 0.2083rem;
            font-size: 0.0729rem;
            border-radius: 5%;
            cursor: pointer;
            transition: all .2s;

            &:hover {
                background-color: red;
                color: #fff
            }
        }
    }
}
</style>