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

<template>
    <div class="checkOperation">
        <div class="topMenu">
            <a-select default-value="lucy" style="width: 160px;margin-right:25px" @change="handleChange">
                <a-select-option value="jack">
                    巷道一
                </a-select-option>
                <a-select-option value="lucy">
                    巷道二
                </a-select-option>
            </a-select>
            <a-select default-value="lucy" style="width: 160px;margin-right:25px" @change="handleChange">
                <a-select-option value="jack">
                    左货架
                </a-select-option>
                <a-select-option value="lucy">
                    右货架
                </a-select-option>
            </a-select>
            <a-select default-value="lucy" style="width: 160px" @change="handleChange">
                <a-select-option value="jack">
                    外
                </a-select-option>
                <a-select-option value="lucy">
                    内
                </a-select-option>
            </a-select>
            <div class="carousel-box">
                <a-carousel class="carousel" ref="carousel">
                    <div class="carousel-page">
                        <p class="carousel-page-title">工单号：223333331123213</p>
                        <div class="carousel-page-content">
                            <div class="img-box">
                                <img
                                    src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1520587439,1746635941&fm=26&gp=0.jpg"
                                    alt="">
                                <p>操作前照片</p>
                            </div>
                            <div class="img-box">
                                <img
                                    src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=274465270,4254987731&fm=26&gp=0.jpg"
                                    alt="">
                                <p>操作后照片</p>
                            </div>
                        </div>
                        <div class="info-box">
                            <p>系统登记品规：xxxsxxxx</p>
                            <p>系统登记数量：23021</p>
                        </div>
                    </div>
                    <div><h3>2</h3></div>
                    <div><h3>3</h3></div>
                    <div><h3>4</h3></div>
                </a-carousel>
            </div>
            <div>
                <div @click="prev()">上一张</div>
                <div @click="next()">下一张</div>
            </div>
        </div>

    </div>
</template>
<script>
    export default {
        data() {
            return {}
        },
        methods: {
            prev() {
                this.$refs.carousel.prev();
            },
            next() {
                this.$refs.carousel.next();
            }
        }
    }
</script>
<style lang="scss">
    .ant-carousel .slick-slide {
        color: #000000;
    }

    .carousel-box {
        width: 1200px;
        /*border: solid 1px red;*/
        .carousel-page {
            display: flex;
            align-items: center;
            justify-content: left;

            &-title {
                color: #009FE3;
            }

            &-content {
                display: flex;
                align-items: center;
                justify-content: left;
            }

            .img-box {
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
                margin-right: 25px;

                img {
                    width: 400px;
                }
            }

            .info-box {
                color: #000000;
                display: flex;
                align-items: center;
                justify-content: center;
            }

        }
    }

</style>