新增index页面
This commit is contained in:
parent
67a6915401
commit
3f684d99dc
173
web/index.html
173
web/index.html
@ -3,73 +3,12 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>反诈骗软件 Demo</title>
|
<title>AntiScamAI</title>
|
||||||
<style>
|
<link rel="stylesheet" href="styles.css">
|
||||||
body {
|
|
||||||
font-family: Arial, sans-serif;
|
|
||||||
background-color: #f4f4f9;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
.container {
|
|
||||||
width: 80%;
|
|
||||||
margin: 50px auto;
|
|
||||||
background-color: white;
|
|
||||||
padding: 30px;
|
|
||||||
border-radius: 8px;
|
|
||||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
h1 {
|
|
||||||
text-align: center;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
.section {
|
|
||||||
margin: 30px 0;
|
|
||||||
}
|
|
||||||
.section input,
|
|
||||||
.section button {
|
|
||||||
padding: 10px;
|
|
||||||
font-size: 16px;
|
|
||||||
width: 100%;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
border-radius: 4px;
|
|
||||||
margin: 10px 0;
|
|
||||||
}
|
|
||||||
.section input[type="file"] {
|
|
||||||
width: auto;
|
|
||||||
}
|
|
||||||
.section button {
|
|
||||||
background-color: #4CAF50;
|
|
||||||
color: white;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.section button:hover {
|
|
||||||
background-color: #45a049;
|
|
||||||
}
|
|
||||||
.result {
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f9f9f9;
|
|
||||||
border: 1px solid #ddd;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
.result p {
|
|
||||||
margin: 5px 0;
|
|
||||||
}
|
|
||||||
.result.success {
|
|
||||||
border-color: #4CAF50;
|
|
||||||
color: #4CAF50;
|
|
||||||
}
|
|
||||||
.result.error {
|
|
||||||
border-color: #f44336;
|
|
||||||
color: #f44336;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<h1>反诈骗软件 Demo</h1>
|
<h1>AntiScamAI</h1>
|
||||||
|
|
||||||
<!-- 钓鱼网站检测 -->
|
<!-- 钓鱼网站检测 -->
|
||||||
<div class="section">
|
<div class="section">
|
||||||
@ -96,108 +35,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script>
|
<script src="scripts.js"></script>
|
||||||
// 创建 WebSocket 连接
|
|
||||||
const socket = new WebSocket('ws://localhost:8080'); // 后端WebSocket服务器的地址
|
|
||||||
|
|
||||||
socket.onopen = () => {
|
|
||||||
console.log('WebSocket 连接已建立');
|
|
||||||
};
|
|
||||||
|
|
||||||
socket.onmessage = (event) => {
|
|
||||||
const data = JSON.parse(event.data);
|
|
||||||
if (data.type === 'urlResult') {
|
|
||||||
displayUrlResult(data.result);
|
|
||||||
} else if (data.type === 'imageResult') {
|
|
||||||
displayImageResult(data.result);
|
|
||||||
} else if (data.type === 'textResult') {
|
|
||||||
displayTextResult(data.result);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
socket.onerror = (error) => {
|
|
||||||
console.error('WebSocket 错误:', error);
|
|
||||||
};
|
|
||||||
|
|
||||||
socket.onclose = () => {
|
|
||||||
console.log('WebSocket 连接关闭');
|
|
||||||
};
|
|
||||||
|
|
||||||
// 钓鱼网站检测
|
|
||||||
function checkPhishingWebsite() {
|
|
||||||
const url = document.getElementById('urlInput').value;
|
|
||||||
if (url) {
|
|
||||||
socket.send(JSON.stringify({ type: 'checkPhishing', url }));
|
|
||||||
} else {
|
|
||||||
alert("请输入网址");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 聊天图片检测
|
|
||||||
function checkChatImage() {
|
|
||||||
const imageInput = document.getElementById('imageInput');
|
|
||||||
if (imageInput.files.length > 0) {
|
|
||||||
const file = imageInput.files[0];
|
|
||||||
const reader = new FileReader();
|
|
||||||
reader.onload = function(e) {
|
|
||||||
socket.send(JSON.stringify({ type: 'checkImage', imageData: e.target.result }));
|
|
||||||
};
|
|
||||||
reader.readAsDataURL(file);
|
|
||||||
} else {
|
|
||||||
alert("请上传图片进行检测");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 话术检测
|
|
||||||
function checkScript() {
|
|
||||||
const text = document.getElementById('textInput').value;
|
|
||||||
if (text) {
|
|
||||||
socket.send(JSON.stringify({ type: 'checkScript', text }));
|
|
||||||
} else {
|
|
||||||
alert("请输入文本进行检测");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 显示检测结果
|
|
||||||
function displayUrlResult(result) {
|
|
||||||
const resultDiv = document.getElementById('urlResult');
|
|
||||||
if (result.isPhishing) {
|
|
||||||
resultDiv.textContent = "警告！这是一个钓鱼网站。";
|
|
||||||
resultDiv.classList.remove('success');
|
|
||||||
resultDiv.classList.add('error');
|
|
||||||
} else {
|
|
||||||
resultDiv.textContent = "这个网站看起来安全。";
|
|
||||||
resultDiv.classList.remove('error');
|
|
||||||
resultDiv.classList.add('success');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function displayImageResult(result) {
|
|
||||||
const resultDiv = document.getElementById('imageResult');
|
|
||||||
if (result.isSuspicious) {
|
|
||||||
resultDiv.textContent = "警告！图片检测到可疑内容。";
|
|
||||||
resultDiv.classList.remove('success');
|
|
||||||
resultDiv.classList.add('error');
|
|
||||||
} else {
|
|
||||||
resultDiv.textContent = "图片通过检测。";
|
|
||||||
resultDiv.classList.remove('error');
|
|
||||||
resultDiv.classList.add('success');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function displayTextResult(result) {
|
|
||||||
const resultDiv = document.getElementById('textResult');
|
|
||||||
if (result.isSuspicious) {
|
|
||||||
resultDiv.textContent = "警告！检测到可疑话术。";
|
|
||||||
resultDiv.classList.remove('success');
|
|
||||||
resultDiv.classList.add('error');
|
|
||||||
} else {
|
|
||||||
resultDiv.textContent = "文本通过检测。";
|
|
||||||
resultDiv.classList.remove('error');
|
|
||||||
resultDiv.classList.add('success');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
231
web/main.js
Normal file
231
web/main.js
Normal file
@ -0,0 +1,231 @@
|
|||||||
|
// 创建 WebSocket 连接
|
||||||
|
const socket = new WebSocket('ws://localhost:8080'); // 后端WebSocket服务器的地址
|
||||||
|
|
||||||
|
socket.onopen = () => {
|
||||||
|
console.log('WebSocket 连接已建立');
|
||||||
|
};
|
||||||
|
|
||||||
|
socket.onmessage = (event) => {
|
||||||
|
const data = JSON.parse(event.data);
|
||||||
|
if (data.type === 'urlResult') {
|
||||||
|
displayUrlResult(data.result);
|
||||||
|
} else if (data.type === 'imageResult') {
|
||||||
|
displayImageResult(data.result);
|
||||||
|
} else if (data.type === 'textResult') {
|
||||||
|
displayTextResult(data.result);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
socket.onerror = (error) => {
|
||||||
|
console.error('WebSocket 错误:', error);
|
||||||
|
};
|
||||||
|
|
||||||
|
socket.onclose = () => {
|
||||||
|
console.log('WebSocket 连接关闭');
|
||||||
|
};
|
||||||
|
|
||||||
|
// 钓鱼网站检测
|
||||||
|
function checkPhishingWebsite() {
|
||||||
|
const url = document.getElementById('urlInput').value;
|
||||||
|
if (url) {
|
||||||
|
socket.send(JSON.stringify({ type: 'checkPhishing', url }));
|
||||||
|
} else {
|
||||||
|
alert("请输入网址");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 聊天图片检测
|
||||||
|
function checkChatImage() {
|
||||||
|
const imageInput = document.getElementById('imageInput');
|
||||||
|
if (imageInput.files.length > 0) {
|
||||||
|
const file = imageInput.files[0];
|
||||||
|
const reader = new FileReader();
|
||||||
|
reader.onload = function(e) {
|
||||||
|
socket.send(JSON.stringify({ type: 'checkImage', imageData: e.target.result }));
|
||||||
|
};
|
||||||
|
reader.readAsDataURL(file);
|
||||||
|
} else {
|
||||||
|
alert("请上传图片进行检测");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 话术检测
|
||||||
|
function checkScript() {
|
||||||
|
const text = document.getElementById('textInput').value;
|
||||||
|
if (text) {
|
||||||
|
socket.send(JSON.stringify({ type: 'checkScript', text }));
|
||||||
|
} else {
|
||||||
|
alert("请输入文本进行检测");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 显示检测结果（适配语言切换）
|
||||||
|
function displayUrlResult(result) {
|
||||||
|
const resultDiv = document.getElementById('urlResult');
|
||||||
|
const language = localStorage.getItem('language') || 'zh-CN';
|
||||||
|
const translations = {
|
||||||
|
'zh-CN': {
|
||||||
|
warning: '警告！这是一个钓鱼网站。',
|
||||||
|
safe: '这个网站看起来安全。',
|
||||||
|
},
|
||||||
|
'en-US': {
|
||||||
|
warning: 'Warning! This is a phishing website.',
|
||||||
|
safe: 'This website looks safe.',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
if (result.isPhishing) {
|
||||||
|
resultDiv.textContent = translations[language].warning;
|
||||||
|
resultDiv.classList.remove('success');
|
||||||
|
resultDiv.classList.add('error');
|
||||||
|
} else {
|
||||||
|
resultDiv.textContent = translations[language].safe;
|
||||||
|
resultDiv.classList.remove('error');
|
||||||
|
resultDiv.classList.add('success');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function displayImageResult(result) {
|
||||||
|
const resultDiv = document.getElementById('imageResult');
|
||||||
|
const language = localStorage.getItem('language') || 'zh-CN';
|
||||||
|
const translations = {
|
||||||
|
'zh-CN': {
|
||||||
|
warning: '警告！图片检测到可疑内容。',
|
||||||
|
safe: '图片通过检测。',
|
||||||
|
},
|
||||||
|
'en-US': {
|
||||||
|
warning: 'Warning! Suspicious content detected in the image.',
|
||||||
|
safe: 'The image passed the check.',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
if (result.isSuspicious) {
|
||||||
|
resultDiv.textContent = translations[language].warning;
|
||||||
|
resultDiv.classList.remove('success');
|
||||||
|
resultDiv.classList.add('error');
|
||||||
|
} else {
|
||||||
|
resultDiv.textContent = translations[language].safe;
|
||||||
|
resultDiv.classList.remove('error');
|
||||||
|
resultDiv.classList.add('success');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function displayTextResult(result) {
|
||||||
|
const resultDiv = document.getElementById('textResult');
|
||||||
|
const language = localStorage.getItem('language') || 'zh-CN';
|
||||||
|
const translations = {
|
||||||
|
'zh-CN': {
|
||||||
|
warning: '警告！检测到可疑话术。',
|
||||||
|
safe: '文本通过检测。',
|
||||||
|
},
|
||||||
|
'en-US': {
|
||||||
|
warning: 'Warning! Suspicious script detected.',
|
||||||
|
safe: 'The text passed the check.',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
if (result.isSuspicious) {
|
||||||
|
resultDiv.textContent = translations[language].warning;
|
||||||
|
resultDiv.classList.remove('success');
|
||||||
|
resultDiv.classList.add('error');
|
||||||
|
} else {
|
||||||
|
resultDiv.textContent = translations[language].safe;
|
||||||
|
resultDiv.classList.remove('error');
|
||||||
|
resultDiv.classList.add('success');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 语言切换
|
||||||
|
function switchLanguage(language) {
|
||||||
|
const translations = {
|
||||||
|
'zh-CN': {
|
||||||
|
title: 'AntiScamAI',
|
||||||
|
phishingLabel: '钓鱼网站检测',
|
||||||
|
phishingPlaceholder: '输入网址进行检测',
|
||||||
|
phishingButton: '检测网址',
|
||||||
|
imageLabel: '聊天图片检测',
|
||||||
|
imageButton: '检测图片',
|
||||||
|
textLabel: '话术检测',
|
||||||
|
textPlaceholder: '输入文本进行检测',
|
||||||
|
textButton: '检测话术',
|
||||||
|
darkModeButton: '切换深色模式',
|
||||||
|
urlWarning: '警告！这是一个钓鱼网站。',
|
||||||
|
urlSafe: '这个网站看起来安全。',
|
||||||
|
imageWarning: '警告！图片检测到可疑内容。',
|
||||||
|
imageSafe: '图片通过检测。',
|
||||||
|
textWarning: '警告！检测到可疑话术。',
|
||||||
|
textSafe: '文本通过检测。',
|
||||||
|
},
|
||||||
|
'en-US': {
|
||||||
|
title: 'AntiScamAI',
|
||||||
|
phishingLabel: 'Phishing Website Detection',
|
||||||
|
phishingPlaceholder: 'Enter URL to check',
|
||||||
|
phishingButton: 'Check URL',
|
||||||
|
imageLabel: 'Chat Image Detection',
|
||||||
|
imageButton: 'Check Image',
|
||||||
|
textLabel: 'Script Detection',
|
||||||
|
textPlaceholder: 'Enter text to check',
|
||||||
|
textButton: 'Check Script',
|
||||||
|
darkModeButton: 'Toggle Dark Mode',
|
||||||
|
urlWarning: 'Warning! This is a phishing website.',
|
||||||
|
urlSafe: 'This website looks safe.',
|
||||||
|
imageWarning: 'Warning! Suspicious content detected in the image.',
|
||||||
|
imageSafe: 'The image passed the check.',
|
||||||
|
textWarning: 'Warning! Suspicious script detected.',
|
||||||
|
textSafe: 'The text passed the check.',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const translation = translations[language];
|
||||||
|
document.querySelector('h1').textContent = translation.title;
|
||||||
|
document.querySelectorAll('h2')[0].textContent = translation.phishingLabel;
|
||||||
|
document.querySelector('#urlInput').placeholder = translation.phishingPlaceholder;
|
||||||
|
document.querySelectorAll('button')[2].textContent = translation.phishingButton;
|
||||||
|
document.querySelectorAll('h2')[1].textContent = translation.imageLabel;
|
||||||
|
document.querySelectorAll('button')[3].textContent = translation.imageButton;
|
||||||
|
document.querySelectorAll('h2')[2].textContent = translation.textLabel;
|
||||||
|
document.querySelector('#textInput').placeholder = translation.textPlaceholder;
|
||||||
|
document.querySelectorAll('button')[4].textContent = translation.textButton;
|
||||||
|
document.querySelector('.theme-switcher button').textContent = translation.darkModeButton;
|
||||||
|
|
||||||
|
// 更新结果文本
|
||||||
|
const urlResult = document.getElementById('urlResult');
|
||||||
|
if (urlResult.textContent.includes('警告')) {
|
||||||
|
urlResult.textContent = translation.urlWarning;
|
||||||
|
} else if (urlResult.textContent.includes('安全')) {
|
||||||
|
urlResult.textContent = translation.urlSafe;
|
||||||
|
}
|
||||||
|
|
||||||
|
const imageResult = document.getElementById('imageResult');
|
||||||
|
if (imageResult.textContent.includes('警告')) {
|
||||||
|
imageResult.textContent = translation.imageWarning;
|
||||||
|
} else if (imageResult.textContent.includes('通过')) {
|
||||||
|
imageResult.textContent = translation.imageSafe;
|
||||||
|
}
|
||||||
|
|
||||||
|
const textResult = document.getElementById('textResult');
|
||||||
|
if (textResult.textContent.includes('警告')) {
|
||||||
|
textResult.textContent = translation.textWarning;
|
||||||
|
} else if (textResult.textContent.includes('通过')) {
|
||||||
|
textResult.textContent = translation.textSafe;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 页面加载时初始化语言
|
||||||
|
window.onload = () => {
|
||||||
|
const savedLanguage = localStorage.getItem('language') || 'zh-CN';
|
||||||
|
switchLanguage(savedLanguage);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 深色模式切换
|
||||||
|
function toggleDarkMode() {
|
||||||
|
document.body.classList.toggle('dark-theme');
|
||||||
|
const isDarkMode = document.body.classList.contains('dark-theme');
|
||||||
|
localStorage.setItem('darkMode', isDarkMode);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 页面加载时初始化深色模式
|
||||||
|
window.onload = () => {
|
||||||
|
const isDarkMode = localStorage.getItem('darkMode') === 'true';
|
||||||
|
if (isDarkMode) document.body.classList.add('dark-theme');
|
||||||
|
};
|
||||||
122
web/style.css
122
web/style.css
@ -1,122 +0,0 @@
|
|||||||
/* 重置一些默认样式 */
|
|
||||||
* {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
font-family: Arial, sans-serif;
|
|
||||||
background-color: #f4f4f4;
|
|
||||||
color: #333;
|
|
||||||
line-height: 1.6;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 容器样式 */
|
|
||||||
.container {
|
|
||||||
width: 80%;
|
|
||||||
margin: 50px auto;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 标题 */
|
|
||||||
h1, h2 {
|
|
||||||
color: #444;
|
|
||||||
font-size: 24px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 按钮样式 */
|
|
||||||
button {
|
|
||||||
background-color: #4CAF50;
|
|
||||||
color: white;
|
|
||||||
padding: 10px 20px;
|
|
||||||
border: none;
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 16px;
|
|
||||||
margin-top: 10px;
|
|
||||||
border-radius: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
button:hover {
|
|
||||||
background-color: #45a049;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 输入框样式 */
|
|
||||||
textarea, select, input[type="number"], input[type="checkbox"] {
|
|
||||||
width: 100%;
|
|
||||||
padding: 10px;
|
|
||||||
margin: 10px 0;
|
|
||||||
border-radius: 5px;
|
|
||||||
border: 1px solid #ddd;
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 表格样式 */
|
|
||||||
table {
|
|
||||||
width: 100%;
|
|
||||||
border-collapse: collapse;
|
|
||||||
margin-top: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
table, th, td {
|
|
||||||
border: 1px solid #ddd;
|
|
||||||
}
|
|
||||||
|
|
||||||
th, td {
|
|
||||||
padding: 10px;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
th {
|
|
||||||
background-color: #f2f2f2;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 页面内容区 */
|
|
||||||
#settings-page, #manual-detect-page, #auto-detect-toggle, #intercept-logs-page, #system-logs-page {
|
|
||||||
background-color: #fff;
|
|
||||||
padding: 20px;
|
|
||||||
border-radius: 8px;
|
|
||||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
|
||||||
margin-top: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 结果展示区域 */
|
|
||||||
#manual-result, #auto-detect-toggle, #intercept-logs-page, #system-logs-page {
|
|
||||||
margin-top: 20px;
|
|
||||||
font-size: 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 间距与对齐 */
|
|
||||||
label {
|
|
||||||
font-size: 16px;
|
|
||||||
display: block;
|
|
||||||
margin-top: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="number"], select, textarea {
|
|
||||||
max-width: 300px;
|
|
||||||
margin: 10px auto;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 开关样式 */
|
|
||||||
input[type="checkbox"] {
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 手动检测文本框 */
|
|
||||||
textarea {
|
|
||||||
height: 120px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 日志页面内容 */
|
|
||||||
#intercept-logs-page, #system-logs-page {
|
|
||||||
overflow-y: auto;
|
|
||||||
max-height: 300px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#intercept-logs-page table, #system-logs-page table {
|
|
||||||
margin-top: 10px;
|
|
||||||
}
|
|
||||||
117
web/styles.css
Normal file
117
web/styles.css
Normal file
@ -0,0 +1,117 @@
|
|||||||
|
body {
|
||||||
|
font-family: Arial, sans-serif;
|
||||||
|
background: linear-gradient(135deg, #f4f4f9, #e6f7ff);
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
width: 80%;
|
||||||
|
margin: 50px auto;
|
||||||
|
background-color: white;
|
||||||
|
padding: 30px;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
text-align: center;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section {
|
||||||
|
margin: 30px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section input,
|
||||||
|
.section button {
|
||||||
|
padding: 10px;
|
||||||
|
font-size: 16px;
|
||||||
|
width: 100%;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 4px;
|
||||||
|
margin: 10px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section input[type="file"] {
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section button {
|
||||||
|
background-color: #4c68af;
|
||||||
|
color: white;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section button:hover {
|
||||||
|
background-color: #4553a0;
|
||||||
|
}
|
||||||
|
/*
|
||||||
|
|
||||||
|
.result {
|
||||||
|
margin-top: 20px;
|
||||||
|
padding: 10px;
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.result p {
|
||||||
|
margin: 5px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.result.success {
|
||||||
|
border-color: #4CAF50;
|
||||||
|
color: #4CAF50;
|
||||||
|
}
|
||||||
|
|
||||||
|
.result.error {
|
||||||
|
border-color: #f44336;
|
||||||
|
color: #f44336;
|
||||||
|
}
|
||||||
|
*/
|
||||||
|
.section button {
|
||||||
|
background-color: #4c68af;
|
||||||
|
color: white;
|
||||||
|
cursor: pointer;
|
||||||
|
width: auto; /* 修改宽度 */
|
||||||
|
padding: 10px 20px; /* 调整内边距 */
|
||||||
|
border-radius: 20px; /* 添加圆角 */
|
||||||
|
}
|
||||||
|
/* 添加的设置页面样式 */
|
||||||
|
.section label {
|
||||||
|
display: block;
|
||||||
|
margin: 10px 0;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #555;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section select {
|
||||||
|
padding: 10px;
|
||||||
|
font-size: 16px;
|
||||||
|
width: 100%;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 4px;
|
||||||
|
margin: 10px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section input[type="checkbox"],
|
||||||
|
.section input[type="radio"] {
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section button {
|
||||||
|
background-color: #4c68af;
|
||||||
|
color: white;
|
||||||
|
cursor: pointer;
|
||||||
|
width: auto;
|
||||||
|
padding: 10px 20px;
|
||||||
|
border-radius: 20px;
|
||||||
|
border: none;
|
||||||
|
font-size: 16px;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section button:hover {
|
||||||
|
background-color: #4553a0;
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user