tradeScreen/src/view/Businesses.vue

<template>
    <div class="box">
        <div class="img-cls">
            <img src="/static/town/TABBG.png" style="width: 100%;height: 100%;position: absolute;" alt="">
            <div class="content">
                <div class="btns">
                    <div class="btn" @click="test">正常开启的商户</div>
                    <div class="btn" @click="test">已关闭的商户</div>
                </div>


                <div class="table">
                    <dv-scroll-board :config="configs" @click='hdClick' style="width:95vw;height:100%" />
                </div>

            </div>
        </div>
    </div>
</template>


<script setup>
// 102B3
import { ref, reactive, onMounted } from "vue"
import { useRouter } from 'vue-router'
const route = useRouter()

const ShwostoreType = ref(false)
const test = () => {
    console.log(6)
}

const hdClick = (e) => {
    // console.log(e)
    if (e.columnIndex == 10) {
        // alert(45)
        route.replace('/storeLogin')
    }


}
const a = (aaa) => {
    for (let i = 0; i < 100; i++) {
        if (i % 2 == 0) {
            aaa.data.push(
                [
                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;' >排sd序</div>`,
                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;color:#3D9EB5';cursor: pointer;>登录</div>`,
                ]
            )
        } else {
            aaa.data.push(
                [
                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排sd序</div>`,
                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;color:#3D9EB5; cursor: pointer;'>登录</div>`,
                ]


            )
        }


    }
}
const configs = reactive({
    headerBGC: "linear-gradient(to right, #ff0000, #00ff00)",
    oddRowBGC: '',
    evenRowBGC: "",
    rowNum: 20,
    header: [
        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>ID</div>`,
        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>商户名称</div>`,
        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>商户姓名</div>`,
        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>商户属地</div>`,
        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>备注</div>`,
        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>推荐</div>`,
        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>创建时间</div>`,
        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>押金</div>`,
        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>商户分类</div>`,
        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>开启/关闭</div>`,
        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>操作</div>`,
    ],
    data: [
    ]
})
onMounted(() => {
    a(configs)
})
</script>


<style lang="scss" scoped>
.box {
    margin-top: 3vh;
    width: 100vw;
    height: 90vh;
    position: relative;

    .img-cls {

        width: 99%;
        height: 90vh;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        // background-color: #fff;
        box-sizing: border-box;

        .content {
            width: 100%;
            height: 100%;
            padding: 2vw;
        }

    }

    .btns {
        display: flex;

        .btn {
            color: white;
            border: 1px solid #BF6D5D;
            padding: 3px 10px;
            border-radius: 20px;
            margin-right: 10px;
        }
    }

    .table {
        width: 100%;
        height: 78vh;
        margin-top: 2vh;
    }
}

.manageBtn {
    padding: 2px 10px;
    border: 1px solid #6377C8;
    border-radius: 20px;
    margin-right: 10px;
}

:deep(.ceil) {
    padding: 0 !important;
    margin-bottom: 5px;
    margin-right: 2px;
}

:deep(.header-item) {
    padding: 0 !important;
}




.row {}
</style>