huimv.cloud.client/src/views/LoginMiddle/LoginMiddle.vue

<template>
    <div class="LoginMiddle">
        <article class="article">
            <el-select v-model="optionValue" placeholder="请选择活动区域">
                <el-option label="选项一" value="1"></el-option>
                <el-option label="选项二" value="2"></el-option>
                <el-option label="选项三" value="3"></el-option>
                <el-option label="选项四" value="4"></el-option>
            </el-select>
            <el-button type="primary" @click="OnConfirm">确定</el-button>
        </article>
    </div>
</template>
<script>
export default {
    name: "LoginMiddle",
    data() {
        return {
            optionValue: '1'
        }
    },
    methods: {
        OnConfirm() {
            console.log(this.optionValue)
            this.$router.push({
                path: "/home"
            });
        }
    }
};
</script>

<style lang="scss" scoped>
.LoginMiddle {
    width: 100%;
    height: 100vh;
    background-color: rgba($color: #000000, $alpha: 0.6);
    display: flex;
    justify-content: center;
    .article {
        width: 400px;
        height: 150px;
        padding: 20px 0;
        background-color: #fff;
        border-radius: 20px;
        margin-top: 10%;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
    }
}
</style>