mirror of https://gitee.com/godoos/godoos.git
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
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>
|
|
|