<template>
|
<div class="container">
|
<el-radio-group v-model="radio" size="large" style="margin-top:20px;color: white;">
|
<!-- <el-radio :value="3">先入先出 </el-radio> -->
|
<el-radio :value="6">先进后出</el-radio>
|
<el-radio :value="9">零期先出 </el-radio>
|
<el-radio :value="12">整件先出 </el-radio>
|
</el-radio-group>
|
</div>
|
<div class="button" style="text-align: right; margin-top: 50px; margin-right: 300px;">
|
<el-button type="primary" size="large" @click="handleConfirm">确定</el-button>
|
</div>
|
|
</template>
|
|
|
<script setup>
|
import { ref } from 'vue'
|
import { ElMessage } from 'element-plus'
|
const radio = ref(4)
|
const handleConfirm = () => {
|
ElMessage.success('切换成功')
|
}
|
</script>
|
|
<style scoped>
|
/* 外层容器：全屏居中 */
|
.container {
|
margin-top: 100px;
|
display: flex;
|
flex-direction: column; /* 垂直排列 */
|
justify-content: center; /* 垂直居中 */
|
align-items: center; /* 水平居中 */
|
/* background-color: #50a375; */
|
font-size: 24px; /* 整体放大 */
|
}
|
|
/* 标题样式 */
|
.title {
|
font-size: 32px;
|
font-weight: bold;
|
margin-bottom: 40px; /* 和按钮组保持间距 */
|
}
|
|
|
|
/* 按钮组内部：让每个选项纵向排列 */
|
.el-radio-group {
|
display: flex;
|
flex-direction: column; /* 垂直排列 */
|
gap: 20px; /* 每个单选按钮的间距 */
|
}
|
|
::v-deep(.el-radio) {
|
transform: scale(1.5); /* 整体放大 */
|
margin: 10px 0; /* 每个单选之间加间距 */
|
}
|
|
::v-deep(.el-radio__label) {
|
font-size: 30px; /* 放大文字 */
|
}
|
</style>
|
