556 lines
26 KiB
HTML
556 lines
26 KiB
HTML
<!DOCTYPE html>
|
|
<html class="x-admin-sm">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>银河锋锐工作室账户后台系统</title>
|
|
<meta name="renderer" content="webkit">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
<link rel="stylesheet" href="/css/font.css">
|
|
<link rel="stylesheet" href="/css/xadmin.css">
|
|
<link rel="stylesheet" href="/css/win10ui.css">
|
|
<link rel="stylesheet" href="/css/theme.css">
|
|
<script type="text/javascript" src="/lib/layui/layui.js" charset="utf-8"></script>
|
|
<script type="text/javascript" src="/js/xadmin.js"></script>
|
|
<!--[if lt IE 9]>
|
|
<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
|
|
<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
|
|
<![endif]-->
|
|
<script>window.breadcrumbs = [{name: "首页", url: ""},{name: "用户", url: ""},{name: "设置"}];</script>
|
|
<script src="/js/address.bar.js"></script>
|
|
<style>
|
|
.plan-form {
|
|
max-width: 750px;
|
|
margin: 50px auto;
|
|
padding: 20px;
|
|
background: #f8f8f8;
|
|
border-radius: 10px;
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.plan-container {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 15px;
|
|
padding: 20px;
|
|
justify-content: center;
|
|
}
|
|
|
|
.plan-radio {
|
|
display: none !important;
|
|
}
|
|
|
|
.plan-card {
|
|
flex: 1 1 200px;
|
|
max-width: 350px;
|
|
height: 160px;
|
|
background: #fff;
|
|
border-radius: 10px;
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
|
padding: 15px;
|
|
cursor: pointer;
|
|
border: 2px solid transparent;
|
|
position: relative;
|
|
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
|
|
}
|
|
|
|
/* 鼠标悬浮效果 */
|
|
.plan-card:hover {
|
|
transform: translateY(-3px);
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
/* 选中状态效果 */
|
|
.plan-radio:checked + .plan-card {
|
|
border-color: #1E9FFF;
|
|
box-shadow: 0 5px 20px rgba(30, 159, 255, 0.3);
|
|
}
|
|
|
|
/* 卡片内容 */
|
|
.plan-icon {
|
|
font-size: 28px;
|
|
margin-bottom: 10px;
|
|
color: #666;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 40px;
|
|
width: 40px;
|
|
border-radius: 50%;
|
|
background: rgba(0, 0, 0, 0.03);
|
|
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
|
}
|
|
|
|
/* 图标放大效果 */
|
|
.plan-card:hover .plan-icon {
|
|
transform: scale(1.1);
|
|
background: rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.plan-radio:checked + .plan-card .plan-icon {
|
|
color: #1E9FFF;
|
|
background: rgba(30, 159, 255, 0.1);
|
|
transform: scale(1.15);
|
|
}
|
|
|
|
.plan-name {
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
margin-bottom: 5px;
|
|
color: #333;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.plan-radio:checked + .plan-card .plan-name {
|
|
color: #1E9FFF;
|
|
}
|
|
|
|
.plan-desc {
|
|
font-size: 15px;
|
|
color: #999;
|
|
}
|
|
|
|
/* 提交按钮 - 使用 layui 按钮样式 */
|
|
.plan-submit {
|
|
display: block;
|
|
width: 200px;
|
|
margin: 30px auto;
|
|
}
|
|
|
|
/* 响应式设计 */
|
|
@media (max-width: 768px) {
|
|
.plan-card {
|
|
flex: 1 1 100%;
|
|
}
|
|
.plan-submit {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.theme-container {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
|
|
gap: 15px;
|
|
padding: 20px;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.theme-radio {
|
|
display: none;
|
|
appearance: none;
|
|
-webkit-appearance: none;
|
|
margin: 0;
|
|
}
|
|
|
|
.theme-card {
|
|
height: 120px;
|
|
background: #fff;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
|
|
cursor: pointer;
|
|
overflow: hidden;
|
|
position: relative;
|
|
transition: all 0.2s ease;
|
|
box-sizing: border-box;
|
|
/*border: 1px solid #eee;*/
|
|
}
|
|
|
|
.theme-card:hover {
|
|
transform: translateY(-3px);
|
|
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.theme-radio:checked + .theme-card {
|
|
outline: 2px solid #1E9FFF;
|
|
outline-offset: -1px;
|
|
box-shadow: 0 0 0 3px rgba(30, 159, 255, 0.2);
|
|
}
|
|
|
|
.theme-top {
|
|
height: 30%;
|
|
width: 100%;
|
|
}
|
|
|
|
.theme-left {
|
|
height: 70%;
|
|
width: 30%;
|
|
float: left;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: space-evenly;
|
|
}
|
|
|
|
.color-dot {
|
|
width: 50px;
|
|
height: 15px;
|
|
border-radius: 5px;
|
|
border-left: 2px solid transparent;
|
|
}
|
|
|
|
.theme-right {
|
|
height: 70%;
|
|
width: 70%;
|
|
float: right;
|
|
}
|
|
|
|
.theme-name {
|
|
position: absolute;
|
|
bottom: 5px;
|
|
left: 5px;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: #333;
|
|
background: rgba(255,255,255,0.8);
|
|
padding: 2px 6px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.layui-form-item {
|
|
display: flex;
|
|
justify-content: center; /* 水平居中 */
|
|
align-items: center; /* 垂直居中 */
|
|
}
|
|
|
|
.layui-form-label {
|
|
width: auto; /* 取消固定宽度 */
|
|
padding-right: 10px; /* 添加右边距 */
|
|
}
|
|
|
|
.layui-input-block {
|
|
margin-left: 0; /* 清除默认左边距 */
|
|
width: auto; /* 自动宽度 */
|
|
}
|
|
|
|
|
|
/* 响应式设计 */
|
|
@media (max-width: 1200px) {
|
|
.theme-container {
|
|
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.theme-container {
|
|
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
|
|
}
|
|
.theme-card {
|
|
height: 80px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="layui-fluid">
|
|
<div class="layui-row layui-col-space15">
|
|
<div class="layui-col-md12">
|
|
<div class="layui-card">
|
|
<div class="layui-card-header">登录默认跳转设置</div>
|
|
<div class="layui-card-body ">
|
|
<form action="" id="FormJump">
|
|
<div class="plan-container">
|
|
<!-- 卡片1 -->
|
|
<input type="radio" name="Jump" id="plan1" value="0" class="plan-radio" title="MSOC" checked>
|
|
<label for="plan1" class="plan-card">
|
|
<div class="plan-icon"><i class="iconfont" style="font-size: 30px"></i></div>
|
|
<h3 class="plan-name">MSOC</h3>
|
|
<p class="plan-desc">由工作室托管的模拟操作系统，允许个性化配置，拥有更多探索空间，内置Manage。</p>
|
|
</label>
|
|
<!-- 卡片2 -->
|
|
<input type="radio" name="Jump" id="plan2" value="1" class="plan-radio" title="Manage">
|
|
<label for="plan2" class="plan-card">
|
|
<div class="plan-icon"><i class="iconfont" style="font-size: 30px"></i></div>
|
|
<h3 class="plan-name">Manage</h3>
|
|
<p class="plan-desc">使用UGM协议的用户管理系统，可以实现一切工作室用户管理任务。内置在MSOC中。</p>
|
|
</label>
|
|
</div>
|
|
<div class="layui-form-item">
|
|
<div class="layui-input-block">
|
|
<button type="submit" class="layui-btn">立即提交</button>
|
|
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-row layui-col-space15">
|
|
<div class="layui-col-md12">
|
|
<div class="layui-card">
|
|
<div class="layui-card-header">主题设置</div>
|
|
<div class="layui-card-body ">
|
|
<form class="" action="" id="FormTheme">
|
|
<div class="theme-container">
|
|
<input type="radio" name="Theme" id="theme1" value="1" class="theme-radio">
|
|
<label for="theme1" class="theme-card">
|
|
<div class="theme-top" style="background: #1a1b20;"></div>
|
|
<div class="theme-left" style="background: #1a1b20;">
|
|
<div class="color-dot" style="background: #009688; border-color: #004570;"></div>
|
|
<div class="color-dot" style="background: #009688; border-color: #004570;"></div>
|
|
<div class="color-dot" style="background: #009688; border-color: #004570;"></div>
|
|
<div class="color-dot" style="background: #009688; border-color: #004570;"></div>
|
|
</div>
|
|
<div class="theme-right" style="background: #0f0f0f;"></div>
|
|
<span class="theme-name">纯黑（同步测试中）</span>
|
|
</label>
|
|
<input type="radio" name="Theme" id="theme2" value="2" class="theme-radio">
|
|
<label for="theme2" class="theme-card">
|
|
<div class="theme-top" style="background: #323640;"></div>
|
|
<div class="theme-left" style="background: #ffffff;">
|
|
<div class="color-dot" style="background: #786aed; border-color: #004570;"></div>
|
|
<div class="color-dot" style="background: #786aed; border-color: #004570;"></div>
|
|
<div class="color-dot" style="background: #786aed; border-color: #004570;"></div>
|
|
<div class="color-dot" style="background: #786aed; border-color: #004570;"></div>
|
|
</div>
|
|
<div class="theme-right" style="background: #eef5f9;"></div>
|
|
<span class="theme-name">标准黑</span>
|
|
</label>
|
|
<input type="radio" name="Theme" id="theme3" value="3" class="theme-radio">
|
|
<label for="theme3" class="theme-card">
|
|
<div class="theme-top" style="background: #f34743;"></div>
|
|
<div class="theme-left" style="background: #f4f4f4;">
|
|
<div class="color-dot" style="background: #fefefe; border-color: #004570;"></div>
|
|
<div class="color-dot" style="background: #fefefe; border-color: #004570;"></div>
|
|
<div class="color-dot" style="background: #fefefe; border-color: #004570;"></div>
|
|
<div class="color-dot" style="background: #fefefe; border-color: #004570;"></div>
|
|
</div>
|
|
<div class="theme-right" style="background: #e8e8e8;"></div>
|
|
<span class="theme-name">标准红</span>
|
|
</label>
|
|
<input type="radio" name="Theme" id="theme4" value="4" class="theme-radio">
|
|
<label for="theme4" class="theme-card">
|
|
<div class="theme-top" style="background: #019587;"></div>
|
|
<div class="theme-left" style="background: #263035;">
|
|
<div class="color-dot" style="background: #212525; border-color: #004570;"></div>
|
|
<div class="color-dot" style="background: #212525; border-color: #004570;"></div>
|
|
<div class="color-dot" style="background: #212525; border-color: #004570;"></div>
|
|
<div class="color-dot" style="background: #212525; border-color: #004570;"></div>
|
|
</div>
|
|
<div class="theme-right" style="background: #e4e4e4;"></div>
|
|
<span class="theme-name">青黑</span>
|
|
</label>
|
|
<input type="radio" name="Theme" id="theme5" value="5" class="theme-radio">
|
|
<label for="theme5" class="theme-card">
|
|
<div class="theme-top" style="background: linear-gradient(to left, #7b4397, #2196f3);"></div>
|
|
<div class="theme-left" style="background: #ffffff;">
|
|
<div class="color-dot" style="background: linear-gradient(to left, #7b4397, #2196f3); border-color: #7b4397;"></div>
|
|
<div class="color-dot" style="background: linear-gradient(to left, #7b4397, #2196f3); border-color: #7b4397;"></div>
|
|
<div class="color-dot" style="background: linear-gradient(to left, #7b4397, #2196f3); border-color: #7b4397;"></div>
|
|
<div class="color-dot" style="background: linear-gradient(to left, #7b4397, #2196f3); border-color: #7b4397;"></div>
|
|
</div>
|
|
<div class="theme-right" style="background: #eef5f9;"></div>
|
|
<span class="theme-name">银河</span>
|
|
</label>
|
|
<input type="radio" name="Theme" id="theme6" value="6" class="theme-radio">
|
|
<label for="theme6" class="theme-card">
|
|
<div class="theme-top" style="background: linear-gradient(to left, #7b4397, #2196f3);"></div>
|
|
<div class="theme-left" style="background: #263035;">
|
|
<div class="color-dot" style="background: linear-gradient(to left, #7b4397, #2196f3); border-color: #7b4397;"></div>
|
|
<div class="color-dot" style="background: linear-gradient(to left, #7b4397, #2196f3); border-color: #7b4397;"></div>
|
|
<div class="color-dot" style="background: linear-gradient(to left, #7b4397, #2196f3); border-color: #7b4397;"></div>
|
|
<div class="color-dot" style="background: linear-gradient(to left, #7b4397, #2196f3); border-color: #7b4397;"></div>
|
|
</div>
|
|
<div class="theme-right" style="background: #ffffff;"></div>
|
|
<span class="theme-name">银河-黑</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="layui-form-item">
|
|
<div class="layui-input-block">
|
|
<button type="submit" class="layui-btn">立即提交</button>
|
|
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-row layui-col-space15">
|
|
<div class="layui-col-md12">
|
|
<div class="layui-card">
|
|
<div class="layui-card-header">手机缩放设置</div>
|
|
<div class="layui-card-body ">
|
|
<form action="" id="FormPhoto">
|
|
<div class="plan-container">
|
|
<!-- 卡片1 -->
|
|
<input type="radio" name="PhotoViewPort" id="photo1" value="0" class="plan-radio" title="PhotoViewPort1" checked>
|
|
<label for="photo1" class="plan-card">
|
|
<div class="plan-icon"><i class="iconfont" style="font-size: 30px"></i></div>
|
|
<h3 class="plan-name">强制使用手机页面</h3>
|
|
<p class="plan-desc">由于Manage默认为电脑服务，即使其x-admin框架支持手机，面对日新月异的页面也不一定回为手机做完美的适配，导致超出手机版边框的事常有发生，几乎无法正常办公</p>
|
|
</label>
|
|
<!-- 卡片2 -->
|
|
<input type="radio" name="PhotoViewPort" id="photo2" value="1" class="plan-radio" title="PhotoViewPort2">
|
|
<label for="photo2" class="plan-card">
|
|
<div class="plan-icon"><i class="iconfont" style="font-size: 30px"></i></div>
|
|
<h3 class="plan-name">强制缩放手机界面</h3>
|
|
<p class="plan-desc">由于Manage默认为电脑服务，通过强制手机模拟1980px使页面强制拉伸成电脑页面，从而使手机版Manage能够不太方便地正常办公，如果觉得文字太小可以双指放大</p>
|
|
</label>
|
|
</div>
|
|
<div class="layui-form-item">
|
|
<div class="layui-input-block">
|
|
<button type="submit" class="layui-btn">立即提交</button>
|
|
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
var loadIndex = layer.load(2);
|
|
document.getElementById('FormJump').addEventListener('submit', function(event) {
|
|
var loadIndexl = layer.load(2);
|
|
event.preventDefault();
|
|
const formData = new FormData(this);
|
|
fetch('/API/SetLJUMPM.api', {
|
|
method: 'POST',
|
|
body: formData,
|
|
credentials: 'include'
|
|
})
|
|
.then(response => {
|
|
layer.close(loadIndexl);
|
|
if (!response.ok) {throw new Error(`HTTP error! status: ${response.status}`)}
|
|
return response.json();
|
|
})
|
|
.then(data => {
|
|
if (data.code === 0) {
|
|
Toast.success('配置变更操作', data.msg, 3000);
|
|
} else if (data.code === 1) {
|
|
Toast.error('配置变更操作', `操作失败，错误：${data.msg}`, 3000);
|
|
console.error('错误详情:', data.msg);
|
|
}
|
|
return data;
|
|
})
|
|
.catch(error => {
|
|
Toast.error('配置变更操作', `请求失败，错误：${error}`, 3000);
|
|
});
|
|
});
|
|
document.getElementById('FormTheme').addEventListener('submit', function(event) {
|
|
var loadIndexl = layer.load(2);
|
|
event.preventDefault();
|
|
const formData = new FormData(this);
|
|
fetch('/API/SetTheme.api', {
|
|
method: 'POST',
|
|
body: formData,
|
|
credentials: 'include'
|
|
})
|
|
.then(response => {
|
|
layer.close(loadIndexl);
|
|
if (!response.ok) {throw new Error(`HTTP error! status: ${response.status}`)}
|
|
return response.json();
|
|
})
|
|
.then(data => {
|
|
if (data.code === 0) {
|
|
Toast.success('配置变更操作', data.msg, 3000);
|
|
} else if (data.code === 1) {
|
|
Toast.error('配置变更操作', `操作失败，错误：${data.msg}`, 3000);
|
|
console.error('错误详情:', data.msg);
|
|
}
|
|
return data;
|
|
})
|
|
.catch(error => {
|
|
Toast.error('配置变更操作', `请求失败，错误：${error}`, 3000);
|
|
});
|
|
});
|
|
document.getElementById('FormPhoto').addEventListener('submit', function(event) {
|
|
var loadIndexl = layer.load(2);
|
|
event.preventDefault();
|
|
const formData = new FormData(this);
|
|
fetch('/API/SetPhotoViewPort.api', {
|
|
method: 'POST',
|
|
body: formData,
|
|
credentials: 'include'
|
|
})
|
|
.then(response => {
|
|
layer.close(loadIndexl);
|
|
if (!response.ok) {throw new Error(`HTTP error! status: ${response.status}`)}
|
|
return response.json();
|
|
})
|
|
.then(data => {
|
|
if (data.code === 0) {
|
|
Toast.success('配置变更操作', data.msg, 3000);
|
|
} else if (data.code === 1) {
|
|
Toast.error('配置变更操作', `操作失败，错误：${data.msg}`, 3000);
|
|
console.error('错误详情:', data.msg);
|
|
}
|
|
return data;
|
|
})
|
|
.catch(error => {
|
|
Toast.error('配置变更操作', `请求失败，错误：${error}`, 3000);
|
|
});
|
|
});
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
layui.use(['form', 'laydate'], function () {
|
|
$ = layui.jquery;
|
|
var form = layui.form;
|
|
var layer = layui.layer;
|
|
var laydate = layui.laydate;
|
|
fetch('/API/GetLJUMPM.api', {
|
|
method: 'GET',
|
|
mode: 'cors',
|
|
credentials: 'include'
|
|
})
|
|
.then(response => {return response.json()})
|
|
.then(data => {
|
|
$(`input[name="Jump"][value="${data.code}"]`).prop('checked', true);
|
|
form.render('radio');
|
|
form.render();
|
|
layer.close(loadIndex);
|
|
})
|
|
.catch(error => {
|
|
console.log('error: ' + error.toString());
|
|
layer.close(loadIndex);
|
|
Toast.error('配置获取操作', '获取用户基本信息出错', 3000);
|
|
});
|
|
fetch('/API/GetTheme.api', {
|
|
method: 'GET',
|
|
mode: 'cors',
|
|
credentials: 'include'
|
|
})
|
|
.then(response => {return response.json()})
|
|
.then(data => {
|
|
$(`input[name="Theme"][value="${data.code}"]`).prop('checked', true);
|
|
form.render('radio');
|
|
form.render();
|
|
layer.close(loadIndex);
|
|
})
|
|
.catch(error => {
|
|
console.log('error: ' + error.toString());
|
|
layer.close(loadIndex);
|
|
Toast.error('配置获取操作', '获取用户基本信息出错', 3000);
|
|
});
|
|
fetch('/API/GetPhotoViewPort.api', {
|
|
method: 'GET',
|
|
mode: 'cors',
|
|
credentials: 'include'
|
|
})
|
|
.then(response => {return response.json()})
|
|
.then(data => {
|
|
$(`input[name="PhotoViewPort"][value="${data.code}"]`).prop('checked', true);
|
|
form.render('radio');
|
|
form.render();
|
|
layer.close(loadIndex);
|
|
})
|
|
.catch(error => {
|
|
console.log('error: ' + error.toString());
|
|
layer.close(loadIndex);
|
|
Toast.error('配置获取操作', '获取用户基本信息出错', 3000);
|
|
});
|
|
});
|
|
});
|
|
layui.use(['form', 'layer'], function(){
|
|
var form = layui.form;
|
|
var layer = layui.layer;
|
|
form.on('radio(ltheme)', function(data){
|
|
console.log("check:", data.value);
|
|
});
|
|
form.render();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |