You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

129 lines
3.1 KiB

<template>
<div v-cloak class="container">
<div class="title-bar">
<h1>安装系统</h1>
</div>
<el-row class="row-bg" justify="space-around" v-if="currentUserType == ''">
<el-card
hover
v-for="(item, key) in userTypeList"
:key="key"
class="box-card"
style="width: 30%"
@click="changeView(item.value, item.title)"
>
<template #header>
<div class="card-header">
<span>{{ item.title }}</span>
</div>
</template>
<div class="text item">{{ item.desc }}</div>
<template #footer>
<el-text>选择</el-text>
</template>
</el-card>
</el-row>
<div class="formbox" v-if="currentUserType != ''">
<el-row>
<el-button circle icon="ArrowLeftBold" @click="currentUserType = ''"></el-button>
<el-text style="margin-left: 5px">{{ currentTitle }}</el-text>
</el-row>
<div v-if="currentUserType == 'person'">
<InstallPerson />
</div>
<div v-if="currentUserType == 'member'">
<InstallMember />
</div>
<div v-if="currentUserType == 'compony'">
<InstallCompony />
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
const currentUserType = ref("");
const currentTitle = ref("");
const userTypeList = [
{
title: "个人用户",
value: "person",
desc: "个人用户是指独立的用户,可以创建自己的OS,并管理自己的文件,无交互功能。",
},
{
title: "企业用户",
value: "member",
desc: "企业用户是指企业员工,可以创建企业员工的个人OS,能和其他员工交互。",
},
{
title: "企业管理员",
value: "compony",
desc: "企业管理员是指企业管理员,可以创建企业员工的帐户,并管理维护企业的各种信息。",
},
];
function changeView(value: string, title: string) {
currentUserType.value = value;
currentTitle.value = title;
}
</script>
<style scoped>
[v-cloak] {
display: none;
}
/* :root {
--win11-bg-color: #222;
--win11-accent-color: #00bcf2;
--win11-accent-hover: #0095dd;
--win11-text-color: #eee;
} */
.container {
margin: 5%;
border-radius: 12px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
background-color: #fff;
padding-bottom: 20px;
}
.formbox {
padding: 0 5%;
}
/* 添加标题栏样式 */
.title-bar {
/* 保持宽度 100%,并确保在容器内水平居中 */
width: 100%;
background-color: #00bcf2;
padding: 10px 0px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 12px 12px 0 0;
/* 添加底部外边距以创建与下方卡片的间距 */
margin-bottom: 20px;
}
.title-bar h1 {
color: #eee;
font-size: 24px;
margin: 0;
}
/* 使 el-card 的 footer 内容居中 */
::v-deep .el-card__footer {
display: flex;
justify-content: center;
align-items: center;
}
.subBtn {
display: flex;
justify-content: center;
align-items: center;
}
.subBtn .el-button {
margin: 30px auto;
}
.userForm {
max-width: 600px;
margin-top: 15px;
padding: 0 50px;
}
</style>