依据组内负责前端界面设计的同学进行的前端界面设计风格进行了典籍管理界面的设计
1.效果展示
2.具体代码
{{ book.category }}
import { ref } from 'vue'
import { useClassicStore } from '@/stores/classic'
import { saveClassic, deleteClassic } from '@/apis/classic-apis'
import { tabs } from '@/utils/classic'
const store = useClassicStore()
const editBook = ref({})
const edit = (book) => {
editBook.value = { ...book }
}
const saveBook = async () => {
try {
await saveClassic(editBook.value)
await store.loadBooks()
editBook.value = {}
alert('保存成功')
} catch {
alert('操作失败,请重试')
}
}
const del = async (id) => {
if (confirm('确认删除该典籍?此操作不可逆!')) {
try {
await deleteClassic(id)
await store.loadBooks()
alert('删除成功')
} catch {
alert('删除失败')
}
}
}
.admin-container {
position: relative;
padding: 2rem;
max-width: 1200px;
margin: 0 auto;
min-height: 150vh;
z-index: 1;
}
.admin-container::before {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url("https://c.animaapp.com/m9pqi0c3GNaMeT/img/back.png");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
opacity: 0.3; /* 调整透明度 */
z-index: -1;
}
.admin-container {
padding: 2rem;
max-width: 1200px;
margin: 0 auto;
}
.admin-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 2rem;
}
.admin-form {
background: rgba(248, 249, 250, 0.9); /* 增加透明度 */
background: #f8f9fa;
padding: 2rem;
border-radius: 1rem;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
margin-bottom: 2rem;
}
.form-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
margin-bottom: 1rem;
}
.form-column {
display: flex;
flex-direction: column;
gap: 1rem;
margin-bottom: 1rem;
}
input, textarea, select {
padding: 0.8rem;
border: 1px solid #ddd;
border-radius: 0.5rem;
font-size: 1rem;
}
textarea {
resize: vertical;
min-height: 100px;
}
select {
background: white;
}
.form-actions {
display: flex;
gap: 1rem;
margin-top: 1.5rem;
}
.book-admin-list {
display: grid;
gap: 1rem;
}
.admin-book-card {
background: rgba(255, 255, 255, 0.9); /* 增加透明度 */
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
background: white;
border-radius: 0.5rem;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.book-info h4 {
margin: 0;
color: #333;
}
.category-tag {
display: inline-block;
background: #e8f5e9;
color: #2e7d32;
padding: 0.25rem 0.5rem;
border-radius: 0.25rem;
font-size: 0.8rem;
}
.book-actions {
display: flex;
gap: 0.5rem;
}
.delete-btn {
background-color: #ff4444;
}
.admin-header,
.admin-form,
.book-admin-list {
position: relative;
z-index: 1;
}
其它相关的store,utils,apis,css代码就不展示了