duoji-frontend/src/views/checkManage/index.vue

<template>
    <div class="check-page">
        <div class="title-info">
            <span class="explain">颜色说明：</span>
            <span class="info-text">
                <a-tag color="#d81e06" style="width:30px;height:20px"></a-tag>
                盘点错误
            </span>
            <span class="info-text">
                 <a-tag color="#1afa29" style="width:30px;height:20px"></a-tag>
                盘点正确
            </span>
            <span class="info-text">
                 <a-tag color="#bfbfbf" style="width:30px;height:20px"></a-tag>
                未盘点
            </span>
        </div>

        <div class="check-content">
            <div class="roadway-top">
                <happy-scroll color="rgba(100,100,100,0.5)" size="8" class="scroll-box">
                    <div class="roadway-box">
                        <div class="line" v-for="item in 20" :key="item">
                            <a-tag
                                :color="[i+'-'+item == '4-14'|| i+'-'+item=='8-18'?'#d81e06':'#bfbfbf']"
                                style="width:46px;height:25px;margin: 1px 2px;" v-for="i in 60"
                                :key="i">{{i}}-{{item}}
                            </a-tag>
                        </div>
                    </div>
                </happy-scroll>
                <a-radio-group v-model="size" style="margin:10px 0">
                    <a-radio-button value="small">
                        外
                    </a-radio-button>
                    <a-radio-button value="default">
                        内
                    </a-radio-button>
                </a-radio-group>
            </div>
            <a-select default-value="jack" style="width: 180px">
                <a-select-option value="jack">
                    1号巷道
                </a-select-option>
                <a-select-option value="lucy">
                    2号巷道
                </a-select-option>
                <a-select-option value="disabled">
                    3号巷道
                </a-select-option>
            </a-select>
            <div class="roadway-top">
                <happy-scroll color="rgba(100,100,100,0.5)" size="8" class="scroll-box">
                    <div class="roadway-box">
                        <div class="line" v-for="item in 20" :key="item">
                            <a-tag
                                :color="[i+'-'+item == '5-16'|| i+'-'+item=='9-17'||i+'-'+item=='11-15'?'#1afa29':'#bfbfbf']"
                                style="width:46px;height:25px;margin: 1px 2px;" v-for="i in 60"
                                :key="i">{{i}}-{{item}}
                            </a-tag>
                        </div>
                    </div>
                </happy-scroll>
                <a-radio-group v-model="size" style="margin:10px 0">
                    <a-radio-button value="small">
                        外
                    </a-radio-button>
                    <a-radio-button value="default">
                        内
                    </a-radio-button>
                </a-radio-group>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            size: 'small'
        };
    },
    mounted() {

    },
    methods: {},
    components: {}
};
</script>
<style lang="scss" scoped>
    .check-page {
        .title-info {
            display: flex;
            align-items: center;
            justify-content: start;

            .explain {
                font-weight: 600;
            }

            .info-text {
                display: flex;
                align-items: center;
                justify-content: center;
                margin-right: 15px;
            }
        }

        .ant-tag {
            margin-right: 0;
            display: block;
            line-height: 25px;
            text-align: center;
            cursor: pointer;
        }

        .roadway-top {
            padding: 20px 0;
            width: 1000px;

            .scroll-box {
                height: 270px;

                .roadway-box {
                    transform: rotateX(180deg);
                    padding: 10px 10px 0 0;

                    .line {
                        display: flex;
                        transform: rotateX(180deg); //两次垂直镜像翻转让原本由上到下排列的div 更改为由下到上
                    }
                }
            }

        }
    }
</style>