85bf3214cc
重构了多个视图组件的代码结构和样式，包括： 1. 重命名变量和类名以提高可读性 2. 优化CSS样式结构和响应式设计 3. 添加过渡动画和悬停效果 4. 统一组件命名规范 5. 改进表单验证和交互体验 6. 增强代码注释和文档 feat(types): 修改Article接口定义 更新Article接口字段，将categoryId改为attributeid，并将categoryName和tags改为数组类型 fix(services): 修改文章服务接口 更新getAllArticles方法，改为获取已发布文章 style(layouts): 调整主布局样式 修改导航栏背景透明度和布局间距 chore(assets): 更新背景图片 替换旧的背景图片文件
53 lines
1.1 KiB
Vue
53 lines
1.1 KiB
Vue
<template>
|
|
<div class="alert-demo-container">
|
|
<!-- 主要警告 -->
|
|
<el-alert title="主要警告" type="primary" />
|
|
|
|
<!-- 成功警告 -->
|
|
<el-alert title="成功警告" type="success" />
|
|
|
|
<!-- 信息警告 -->
|
|
<el-alert title="信息警告" type="info" />
|
|
|
|
<!-- 警告提醒 -->
|
|
<el-alert title="警告提醒" type="warning" />
|
|
|
|
<!-- 错误警告 -->
|
|
<el-alert title="错误警告" type="error" />
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
/* 警告框演示容器样式 */
|
|
.alert-demo-container {
|
|
max-width: 600px;
|
|
}
|
|
|
|
/* 警告框样式 */
|
|
.alert-demo-container .el-alert {
|
|
margin: 20px 0 0;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
/* 第一个警告框的特殊样式（移除顶部外边距） */
|
|
.alert-demo-container .el-alert:first-child {
|
|
margin: 0;
|
|
}
|
|
|
|
/* 警告框悬浮效果 */
|
|
.alert-demo-container .el-alert:hover {
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
/* 响应式设计 */
|
|
@media (max-width: 768px) {
|
|
.alert-demo-container {
|
|
max-width: 100%;
|
|
margin: 0 10px;
|
|
}
|
|
|
|
.alert-demo-container .el-alert {
|
|
margin: 15px 0 0;
|
|
}
|
|
}
|
|
</style> |