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

<template>
    <div class="realTime bg-white">
        <div class="realTime-position">
            <div class="realTime-position-label">选择位置：</div>
            <div class="realTime-position-box">
                <div class="realTime-position-box-btns"></div>
                <div class="realTime-position-box-control" @click="handleUpDown">
                    {{controlLabel ? '收起' : '展开'}}
                    <a-icon type="up" :class="{'anticon-rotate': !controlLabel}"></a-icon>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "realTimeMonitoring",
    data() {
        return {
            // 收起true  展开false
            controlLabel: true
        };
    },
    methods: {
        // 展开收起
        handleUpDown() {
            this.controlLabel = !this.controlLabel;
        }
    }
};
</script>

<style lang='scss'>
.realTime {
    padding: 24px;
    &-position {
        display: flex;
        justify-content: space-between;
        &-box {
            flex: 1;
            display: flex;
            justify-content: space-between;
            &-btns {
                flex: 1;
                display: flex;
                flex-wrap: wrap;
                justify-content: flex-start;
            }
            &-control {
                text-align: right;
                cursor: pointer;
                color: #55a4ff;
                .anticon {
                    transform: rotate(0deg);
                    transform-origin: center;
                    transition: all 0.2s linear;
                }
                .anticon-rotate {
                    transform: rotate(180deg);
                }
            }
        }
    }
}
</style>