mirror of
https://github.com/MCSManager/UI.git
synced 2024-11-21 03:15:46 +08:00
新增 用户界面
This commit is contained in:
Suwings
parent
50460ad89b
commit
784490d909
@ -1,254 +0,0 @@
|
||||
<!--
|
||||
* @Author: Copyright(c) 2020 Suwings
|
||||
* @Date: 2021-05-08 11:53:54
|
||||
* @LastEditTime: 2021-05-13 13:54:29
|
||||
* @Description:
|
||||
-->
|
||||
|
||||
<template>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24">
|
||||
<Panel>
|
||||
<template #title>操作系统数据</template>
|
||||
<template #default>
|
||||
<el-row :gutter="20">
|
||||
<!-- <el-col :span="24" :offset="0">
|
||||
<div class="overview-info-hr">操作系统数据</div>
|
||||
</el-col> -->
|
||||
<el-col :xs="12" :md="6" v-for="(item, index) in computerInfoA" :key="index">
|
||||
<div class="overview-info-warpper">
|
||||
<p class="overview-info-title" v-text="item.name"></p>
|
||||
<p class="overview-info-value" v-text="item.value"></p>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="24" :offset="0">
|
||||
<div class="box-card-title">控制面板数据</div>
|
||||
</el-col>
|
||||
|
||||
<el-col :xs="12" :md="6" v-for="(item, index) in computerInfoB" :key="index">
|
||||
<div class="overview-info-warpper">
|
||||
<p class="overview-info-title" v-text="item.name"></p>
|
||||
<p class="overview-info-value" v-text="item.value"></p>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
</Panel>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :md="16">
|
||||
<Panel>
|
||||
<template #title>帮助文档</template>
|
||||
<template #default>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12" :offset="0" v-for="(item, index) in manualLink" :key="index">
|
||||
<a class="manualLink" :href="item.link" v-text="item.title"></a>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="24">
|
||||
<div class="box-card-title">常见问题</div>
|
||||
</el-col>
|
||||
<el-col :span="12" :offset="0" v-for="(item, index) in manualLink" :key="index">
|
||||
<a class="manualLink" :href="item.link" v-text="item.title"></a>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
</Panel>
|
||||
<Panel>
|
||||
<template #title>更多服务</template>
|
||||
<template #default>
|
||||
<el-row type="flex" class="row-bg" justify="space-between">
|
||||
<el-col :span="6">
|
||||
<div class="manual-link-block-wrapper">
|
||||
<a class="manual-link-block" href="/"><i class="el-icon-link"></i> API 文档</a>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="manual-link-block-wrapper">
|
||||
<a class="manual-link-block" href="/"><i class="el-icon-link"></i> 快速入门</a>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="manual-link-block-wrapper">
|
||||
<a class="manual-link-block" href="/"><i class="el-icon-link"></i> 官方网站</a>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="manual-link-block-wrapper">
|
||||
<a class="manual-link-block" href="/"><i class="el-icon-link"></i> 购买专业版</a>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
</Panel>
|
||||
</el-col>
|
||||
|
||||
<el-col :md="8">
|
||||
<Panel>
|
||||
<template #title>最新公告</template>
|
||||
<template #default>
|
||||
<div style="height: 300px">
|
||||
测试数据 - 测试面板 <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
|
||||
</div>
|
||||
</template>
|
||||
</Panel>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Panel from "../../components/Panel";
|
||||
|
||||
export default {
|
||||
data: function () {
|
||||
return {
|
||||
computerInfoA: [
|
||||
{
|
||||
name: "操作系统",
|
||||
value: "Windows 10"
|
||||
},
|
||||
{
|
||||
name: "系统版本",
|
||||
value: "Windows 20H4"
|
||||
},
|
||||
{
|
||||
name: "计算机名称",
|
||||
value: "Suwings"
|
||||
},
|
||||
{
|
||||
name: "正常运行时间",
|
||||
value: "234:21"
|
||||
},
|
||||
{
|
||||
name: "处理器型号",
|
||||
value: "Intel i7-4002K"
|
||||
},
|
||||
{
|
||||
name: "磁盘空间",
|
||||
value: "123.2GB/256GB"
|
||||
},
|
||||
{
|
||||
name: "内存使用率",
|
||||
value: "64%"
|
||||
},
|
||||
{
|
||||
name: "CPU使用率",
|
||||
value: "12%"
|
||||
}
|
||||
],
|
||||
computerInfoB: [
|
||||
{
|
||||
name: "面板版本",
|
||||
value: "9.0.0"
|
||||
},
|
||||
{
|
||||
name: "用户在线数",
|
||||
value: "4/20"
|
||||
},
|
||||
{
|
||||
name: "实例运行数",
|
||||
value: "16/70"
|
||||
},
|
||||
{
|
||||
name: "集群在线",
|
||||
value: "4/4"
|
||||
},
|
||||
{
|
||||
name: "封禁 IP 数",
|
||||
value: "4"
|
||||
},
|
||||
{
|
||||
name: "面板使用内存",
|
||||
value: "78MB"
|
||||
},
|
||||
{
|
||||
name: "越权访问接口",
|
||||
value: "0"
|
||||
},
|
||||
{
|
||||
name: "登录次数",
|
||||
value: "0"
|
||||
}
|
||||
],
|
||||
|
||||
manualLink: [
|
||||
{
|
||||
title: "如何获取云服务器的初始密码？",
|
||||
link: ""
|
||||
},
|
||||
{
|
||||
title: "为何控制台展示的流量数据与日志计算的流量对不上？",
|
||||
link: ""
|
||||
},
|
||||
{
|
||||
title: "使用 SSH 密钥登录还可以同时使用密码登录吗？",
|
||||
link: ""
|
||||
},
|
||||
{
|
||||
title: "在群聊中如何对群成员设置或取消禁言？",
|
||||
link: ""
|
||||
},
|
||||
{
|
||||
title: "备案初审被腾讯云驳回如何解决？",
|
||||
link: ""
|
||||
},
|
||||
{
|
||||
title: "即时通信 IM 消息存储时长是多久？",
|
||||
link: ""
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
methods: {},
|
||||
components: { Panel }
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.overview-info-title {
|
||||
/* text-align: center; */
|
||||
color: rgb(66, 66, 66);
|
||||
font-size: 12px;
|
||||
margin-top: 0px;
|
||||
}
|
||||
.overview-info-value {
|
||||
/* text-align: center; */
|
||||
font-size: 14px;
|
||||
}
|
||||
.overview-info-hr {
|
||||
line-height: normal;
|
||||
margin-bottom: 16px;
|
||||
font-weight: 800;
|
||||
font-size: 12px;
|
||||
color: rgb(122, 122, 122);
|
||||
}
|
||||
.manualLink {
|
||||
display: block;
|
||||
color: black;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 8px;
|
||||
box-sizing: border-box;
|
||||
text-decoration: none;
|
||||
}
|
||||
.manualLink:hover {
|
||||
color: #006eff !important;
|
||||
}
|
||||
|
||||
.manual-link-block-wrapper {
|
||||
margin: 4px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.manual-link-block {
|
||||
background-color: #ebeef3;
|
||||
display: block;
|
||||
padding: 8px;
|
||||
line-height: 1.5;
|
||||
transition: all 0.4s;
|
||||
}
|
||||
.manual-link-block:hover {
|
||||
background-color: #caced6;
|
||||
}
|
||||
</style>
|
||||
60
src/app/views/Users.vue
Normal file
60
src/app/views/Users.vue
Normal file
@ -0,0 +1,60 @@
|
||||
<!--
|
||||
* @Author: Copyright(c) 2020 Suwings
|
||||
* @Date: 2021-05-08 11:53:54
|
||||
* @LastEditTime: 2021-07-03 09:32:19
|
||||
* @Description:
|
||||
-->
|
||||
|
||||
<template>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24">
|
||||
<Panel>
|
||||
<template #title>用户列表</template>
|
||||
<template #default> test </template>
|
||||
</Panel>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Panel from "../../components/Panel";
|
||||
// import { ElMessage } from "element-plus";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
objects: [
|
||||
{
|
||||
uuid: "14c154fc93bb4186a129d235310f2431",
|
||||
userName: "Suwings",
|
||||
permission: "管理账户",
|
||||
registerTime: "2021/1/1 12:24:11",
|
||||
loginTime: "2021/1/1 12:24:11",
|
||||
instances: []
|
||||
}
|
||||
],
|
||||
multipleSelection: [] // 表格多选属性
|
||||
};
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
// 表格多选函数
|
||||
selectionChange(v) {
|
||||
this.multipleSelection = v;
|
||||
},
|
||||
editObject() {},
|
||||
batDelete() {
|
||||
console.log("Delete:", this.multipleSelection);
|
||||
}
|
||||
},
|
||||
components: { Panel }
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.instance-table-warpper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user