图片流及cookie获取
This commit is contained in:
@@ -1,19 +1,26 @@
|
||||
<script setup>
|
||||
import LotteryResults from './components/LotteryResults.vue'
|
||||
import Index from './components/index.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="app">
|
||||
<LotteryResults />
|
||||
<main class="app-main">
|
||||
<Index />
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.app {
|
||||
width: 100%;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.app-main {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,43 +0,0 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
defineProps({
|
||||
msg: String,
|
||||
})
|
||||
|
||||
const count = ref(0)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<h1>{{ msg }}</h1>
|
||||
|
||||
<div class="card">
|
||||
<button type="button" @click="count++">count is {{ count }}</button>
|
||||
<p>
|
||||
Edit
|
||||
<code>components/HelloWorld.vue</code> to test HMR
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
Check out
|
||||
<a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
|
||||
>create-vue</a
|
||||
>, the official Vue + Vite starter
|
||||
</p>
|
||||
<p>
|
||||
Learn more about IDE Support for Vue in the
|
||||
<a
|
||||
href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
|
||||
target="_blank"
|
||||
>Vue Docs Scaling up Guide</a
|
||||
>.
|
||||
</p>
|
||||
<p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.read-the-docs {
|
||||
color: #888;
|
||||
}
|
||||
</style>
|
||||
@@ -1,458 +0,0 @@
|
||||
<template>
|
||||
<div class="lottery-container">
|
||||
<!-- 顶部导航栏 -->
|
||||
<header class="lottery-header">
|
||||
|
||||
</header>
|
||||
|
||||
<!-- 主要内容区域 -->
|
||||
<div class="main-content">
|
||||
<!-- 左侧用户信息面板 -->
|
||||
<aside class="user-panel">
|
||||
<div class="panel-section">
|
||||
<h3>账户信息</h3>
|
||||
<div class="user-info">
|
||||
<div class="info-item">
|
||||
<span class="label">账户:</span>
|
||||
<span class="value">pmk1 (VIP)</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="label">快开码:</span>
|
||||
<span class="value">4701262635</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="label">余额:</span>
|
||||
<span class="value">125.7</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel-section">
|
||||
<h3>开奖明细</h3>
|
||||
<div class="lottery-details">
|
||||
<div class="detail-item">
|
||||
<span class="label">期号:</span>
|
||||
<span class="value">20200114</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="label">开奖号码:</span>
|
||||
<div class="winning-numbers">
|
||||
<div class="ball red">5</div>
|
||||
<div class="ball green">8</div>
|
||||
<div class="ball blue">7</div>
|
||||
<div class="ball yellow">9</div>
|
||||
<div class="ball purple">2</div>
|
||||
<div class="ball pink">3</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- 右侧开奖结果表格 -->
|
||||
<div class="results-section">
|
||||
<div class="section-header">
|
||||
<div class="header-controls">
|
||||
<div class="filter">
|
||||
<label>期数:</label>
|
||||
<select>
|
||||
<option>1~10</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter">
|
||||
<label>玩法:</label>
|
||||
<select>
|
||||
<option>总和值</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="results-table-container">
|
||||
<table class="results-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>期号</th>
|
||||
<th>日期</th>
|
||||
<th>开奖时间</th>
|
||||
<th>开奖号码</th>
|
||||
<th>冠亚和</th>
|
||||
<th>冠亚军</th>
|
||||
<th>2串</th>
|
||||
<th>4串</th>
|
||||
<th>大小</th>
|
||||
<th>龙虎</th>
|
||||
<th>1~5尾</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="result in lotteryResults" :key="result.issue">
|
||||
<td>{{ result.issue }}</td>
|
||||
<td>{{ result.date }}</td>
|
||||
<td>{{ result.time }}</td>
|
||||
<td class="numbers-column">
|
||||
<div class="ball" v-for="(number, index) in result.numbers" :key="index" :class="getBallColorClass(index)">
|
||||
{{ number }}
|
||||
</div>
|
||||
</td>
|
||||
<td>{{ result.sum }}</td>
|
||||
<td>{{ result.firstSecondSum }}</td>
|
||||
<td>{{ result.twoSeries }}</td>
|
||||
<td>{{ result.fourSeries }}</td>
|
||||
<td>{{ result.size }}</td>
|
||||
<td>{{ result.dragonTiger }}</td>
|
||||
<td class="tails-column">
|
||||
<div class="tail" v-for="(tail, index) in result.tails" :key="index" :class="getTailClass(tail)">
|
||||
{{ tail }}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'LotteryResults',
|
||||
data() {
|
||||
return {
|
||||
lotteryResults: []
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// 页面加载时从后端获取彩票开奖结果数据
|
||||
this.fetchLotteryResults();
|
||||
},
|
||||
methods: {
|
||||
async fetchLotteryResults() {
|
||||
try {
|
||||
const response = await fetch('http://localhost:8080/api/lottery/results');
|
||||
if (response.ok) {
|
||||
this.lotteryResults = await response.json();
|
||||
} else {
|
||||
console.error('获取数据失败:', response.status);
|
||||
// 如果后端没有数据，使用模拟数据
|
||||
this.useMockData();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取数据时发生错误:', error);
|
||||
// 如果连接后端失败，使用模拟数据
|
||||
this.useMockData();
|
||||
}
|
||||
},
|
||||
useMockData() {
|
||||
// 使用模拟数据
|
||||
this.lotteryResults = [
|
||||
{
|
||||
issue: '202001214',
|
||||
date: '2020-01-21',
|
||||
time: '15:10:00',
|
||||
numbers: ['5', '8', '7', '9', '2', '3', '1', '10', '12', '4', '6', '11'],
|
||||
sum: '62',
|
||||
firstSecondSum: '33',
|
||||
twoSeries: '22',
|
||||
fourSeries: '',
|
||||
size: '大',
|
||||
dragonTiger: '龙',
|
||||
tails: ['虎', '龙', '虎', '虎', '龙']
|
||||
},
|
||||
{
|
||||
issue: '202001213',
|
||||
date: '2020-01-21',
|
||||
time: '15:05:00',
|
||||
numbers: ['8', '3', '7', '9', '5', '4', '6', '10', '12', '1', '2', '11'],
|
||||
sum: '67',
|
||||
firstSecondSum: '32',
|
||||
twoSeries: '22',
|
||||
fourSeries: '',
|
||||
size: '大',
|
||||
dragonTiger: '龙',
|
||||
tails: ['虎', '龙', '虎', '虎', '龙']
|
||||
},
|
||||
{
|
||||
issue: '202001212',
|
||||
date: '2020-01-21',
|
||||
time: '15:00:00',
|
||||
numbers: ['2', '8', '10', '11', '9', '12', '5', '3', '7', '4', '6', '1'],
|
||||
sum: '67',
|
||||
firstSecondSum: '32',
|
||||
twoSeries: '22',
|
||||
fourSeries: '',
|
||||
size: '大',
|
||||
dragonTiger: '龙',
|
||||
tails: ['虎', '龙', '虎', '虎', '龙']
|
||||
}
|
||||
];
|
||||
},
|
||||
getBallColorClass(index) {
|
||||
// 根据号码位置返回不同的颜色类
|
||||
const colors = ['blue', 'red', 'green', 'yellow', 'purple', 'pink', 'orange', 'cyan', 'magenta', 'lime', 'teal', 'indigo'];
|
||||
return colors[index % colors.length];
|
||||
},
|
||||
getTailClass(tail) {
|
||||
// 根据龙虎返回不同的颜色类
|
||||
return tail === '龙' ? 'dragon' : 'tiger';
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.lottery-container {
|
||||
font-family: Arial, sans-serif;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
/* 顶部导航栏样式 */
|
||||
.lottery-header {
|
||||
background-color: #1a73e8;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.header-top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10px 20px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.nav-tabs {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.tab {
|
||||
padding: 8px 12px;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.tab:hover {
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.header-right {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.btn-settings, .btn-exit {
|
||||
background-color: transparent;
|
||||
color: white;
|
||||
border: 1px solid white;
|
||||
padding: 6px 12px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-settings:hover, .btn-exit:hover {
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.header-bottom {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 8px 20px;
|
||||
background-color: #1557b0;
|
||||
}
|
||||
|
||||
.sub-tabs {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.sub-tab {
|
||||
padding: 6px 10px;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.sub-tab:hover {
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.sub-tab.active {
|
||||
background-color: rgba(255, 255, 255, 0.3);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.btn-settings.small {
|
||||
padding: 4px 8px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* 主要内容区域 */
|
||||
.main-content {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 左侧用户信息面板 */
|
||||
.user-panel {
|
||||
width: 200px;
|
||||
background-color: #f5f5f5;
|
||||
border-right: 1px solid #ddd;
|
||||
padding: 15px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.panel-section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.panel-section h3 {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.info-item, .detail-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 8px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.label {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.value {
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.winning-numbers {
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
/* 右侧开奖结果表格 */
|
||||
.results-section {
|
||||
flex: 1;
|
||||
padding: 15px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.section-header h2 {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.header-controls {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.filter {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.filter select {
|
||||
padding: 4px 6px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
/* 开奖结果表格 */
|
||||
.results-table-container {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.results-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.results-table th, .results-table td {
|
||||
border: 1px solid #ddd;
|
||||
padding: 8px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.results-table th {
|
||||
background-color: #f5f5f5;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.results-table tr:nth-child(even) {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
/* 号码球样式 */
|
||||
.ball {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-size: 10px;
|
||||
font-weight: bold;
|
||||
margin: 1px;
|
||||
}
|
||||
|
||||
.numbers-column {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.ball.blue { background-color: #1a73e8; }
|
||||
.ball.red { background-color: #ea4335; }
|
||||
.ball.green { background-color: #34a853; }
|
||||
.ball.yellow { background-color: #fbbc05; }
|
||||
.ball.purple { background-color: #9c27b0; }
|
||||
.ball.pink { background-color: #e91e63; }
|
||||
.ball.orange { background-color: #ff9800; }
|
||||
.ball.cyan { background-color: #00bcd4; }
|
||||
.ball.magenta { background-color: #ff00ff; }
|
||||
.ball.lime { background-color: #00ff00; }
|
||||
.ball.teal { background-color: #009688; }
|
||||
.ball.indigo { background-color: #3f51b5; }
|
||||
|
||||
/* 龙虎样式 */
|
||||
.tails-column {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.tail {
|
||||
padding: 2px 6px;
|
||||
border-radius: 3px;
|
||||
font-size: 10px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.tail.dragon { background-color: #ea4335; color: white; }
|
||||
.tail.tiger { background-color: #1a73e8; color: white; }
|
||||
</style>
|
||||
@@ -1,112 +0,0 @@
|
||||
<template>
|
||||
<div class="user-form">
|
||||
<form @submit.prevent="handleSubmit">
|
||||
<div class="form-group">
|
||||
<label for="name">姓名</label>
|
||||
<input
|
||||
type="text"
|
||||
id="name"
|
||||
v-model="formData.name"
|
||||
required
|
||||
>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="email">邮箱</label>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
v-model="formData.email"
|
||||
required
|
||||
>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="password">密码</label>
|
||||
<input
|
||||
type="password"
|
||||
id="password"
|
||||
v-model="formData.password"
|
||||
:required="!user.id"
|
||||
>
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
<button type="submit" class="save-btn">保存</button>
|
||||
<button type="button" @click="$emit('cancel')" class="cancel-btn">取消</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'UserForm',
|
||||
props: {
|
||||
user: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
formData: { ...this.user }
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
user(newUser) {
|
||||
this.formData = { ...newUser };
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleSubmit() {
|
||||
this.$emit('save', this.formData);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.user-form {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.save-btn, .cancel-btn {
|
||||
padding: 8px 16px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.save-btn {
|
||||
background-color: #4CAF50;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.cancel-btn {
|
||||
background-color: #f2f2f2;
|
||||
color: #333;
|
||||
}
|
||||
</style>
|
||||
@@ -1,187 +0,0 @@
|
||||
<template>
|
||||
<div class="user-management">
|
||||
<h2>用户管理</h2>
|
||||
<button @click="showAddForm = true" class="add-btn">添加用户</button>
|
||||
<table class="user-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>姓名</th>
|
||||
<th>邮箱</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="user in users" :key="user.id">
|
||||
<td>{{ user.id }}</td>
|
||||
<td>{{ user.name }}</td>
|
||||
<td>{{ user.email }}</td>
|
||||
<td>
|
||||
<button @click="editUser(user)" class="edit-btn">编辑</button>
|
||||
<button @click="deleteUser(user.id)" class="delete-btn">删除</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<!-- 用户表单弹窗 -->
|
||||
<div v-if="showAddForm || editingUser" class="modal-overlay">
|
||||
<div class="modal">
|
||||
<h3>{{ editingUser ? '编辑用户' : '添加用户' }}</h3>
|
||||
<user-form
|
||||
:user="currentUser"
|
||||
@save="saveUser"
|
||||
@cancel="cancelForm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import UserForm from './UserForm.vue';
|
||||
import axios from 'axios';
|
||||
|
||||
export default {
|
||||
name: 'UserManagement',
|
||||
components: {
|
||||
UserForm
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
users: [],
|
||||
showAddForm: false,
|
||||
editingUser: null,
|
||||
currentUser: {}
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.fetchUsers();
|
||||
},
|
||||
methods: {
|
||||
fetchUsers() {
|
||||
axios.get('/api/users')
|
||||
.then(response => {
|
||||
this.users = response.data;
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('获取用户列表失败:', error);
|
||||
});
|
||||
},
|
||||
editUser(user) {
|
||||
this.editingUser = true;
|
||||
this.currentUser = { ...user };
|
||||
},
|
||||
deleteUser(userId) {
|
||||
if (confirm('确定要删除这个用户吗？')) {
|
||||
axios.delete(`/api/users/${userId}`)
|
||||
.then(() => {
|
||||
this.fetchUsers();
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('删除用户失败:', error);
|
||||
});
|
||||
}
|
||||
},
|
||||
saveUser(user) {
|
||||
if (this.editingUser) {
|
||||
// 更新用户
|
||||
axios.put(`/api/users/${user.id}`, user)
|
||||
.then(() => {
|
||||
this.fetchUsers();
|
||||
this.cancelForm();
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('更新用户失败:', error);
|
||||
});
|
||||
} else {
|
||||
// 添加用户
|
||||
axios.post('/api/users', user)
|
||||
.then(() => {
|
||||
this.fetchUsers();
|
||||
this.cancelForm();
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('添加用户失败:', error);
|
||||
});
|
||||
}
|
||||
},
|
||||
cancelForm() {
|
||||
this.showAddForm = false;
|
||||
this.editingUser = false;
|
||||
this.currentUser = {};
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.user-management {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.add-btn {
|
||||
margin-bottom: 20px;
|
||||
padding: 8px 16px;
|
||||
background-color: #4CAF50;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.user-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.user-table th, .user-table td {
|
||||
border: 1px solid #ddd;
|
||||
padding: 8px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.user-table th {
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
|
||||
.edit-btn, .delete-btn {
|
||||
padding: 4px 8px;
|
||||
margin-right: 5px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.edit-btn {
|
||||
background-color: #2196F3;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.delete-btn {
|
||||
background-color: #f44336;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.modal {
|
||||
background-color: white;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
width: 400px;
|
||||
max-width: 90%;
|
||||
}
|
||||
</style>
|
||||
@@ -24,10 +24,9 @@ a:hover {
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
place-items: center;
|
||||
min-width: 320px;
|
||||
min-height: 100vh;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -58,11 +57,18 @@ button:focus-visible {
|
||||
padding: 2em;
|
||||
}
|
||||
|
||||
|
||||
/* 响应式app容器 */
|
||||
@media (max-width: 768px) {
|
||||
#app {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
#app {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
|
||||
Reference in New Issue
Block a user