fwb
3 months ago
parent
b0c39da17e
commit
e6ad23be07
7 changed files with 540 additions and 432 deletions
@ -1,132 +0,0 @@ |
||||
<template> |
||||
<el-card class="container"> |
||||
<template #header> |
||||
<div class="card-header"> |
||||
<span>栏目添加新闻信息</span> |
||||
<el-button type="primary" @click="back" plain round>返回</el-button> |
||||
</div> |
||||
</template> |
||||
<!-- 栏目内添加新闻--> |
||||
<el-form v-model="newsForm"> |
||||
<el-form-item label="所属栏目id" label-width="140px"> |
||||
<el-input v-model="newsForm.categoryId" autocomplete="off" /> |
||||
</el-form-item> |
||||
<el-form-item label="文章内容" label-width="140px"> |
||||
<textarea style="width: 100%;height: 300px" v-model="newsForm.content"></textarea> |
||||
<!-- <el-input class="brief_text" type="textarea" /> --> |
||||
</el-form-item> |
||||
<!-- <el-form-item label="文章id" label-width="140px">--> |
||||
<!-- <el-input v-model="newsForm.id" autocomplete="off" />--> |
||||
<!-- </el-form-item>--> |
||||
<!-- <el-form-item label="标题图片" label-width="140px">--> |
||||
<!-- <el-input v-model="newsForm.pic" autocomplete="off" />--> |
||||
<!-- </el-form-item>--> |
||||
<!-- <el-form-item label="发布时间" label-width="140px">--> |
||||
<!-- <el-input v-model="newsForm.publishTime" autocomplete="off" type="date"/>--> |
||||
<!-- </el-form-item>--> |
||||
<!-- <el-form-item label="浏览次数" label-width="140px">--> |
||||
<!-- <el-input v-model="newsForm.readingNumber" autocomplete="off" />--> |
||||
<!-- </el-form-item>--> |
||||
<el-form-item label="发布状态" label-width="140px"> |
||||
<el-input v-model="newsForm.status" placeholder="1:已发布 2:未发布" autocomplete="off" /> |
||||
</el-form-item> |
||||
<el-form-item label="文章标题" label-width="140px"> |
||||
<el-input v-model="newsForm.title" autocomplete="off" /> |
||||
</el-form-item> |
||||
<!-- <el-form-item label="更新时间" label-width="140px">--> |
||||
<!-- <el-input v-model="newsForm.updateTime" autocomplete="off" type="date"/>--> |
||||
<!-- </el-form-item>--> |
||||
<el-form-item label="发布文章的用户id" label-width="140px"> |
||||
<el-input v-model="newsForm.userId" autocomplete="off" readonly disabled/> |
||||
</el-form-item> |
||||
</el-form> |
||||
<template #footer> |
||||
<div class="dialog-footer"> |
||||
<!-- <el-button>取消</el-button>--> |
||||
<el-button type="primary" @click="addNewsContentConfirm"> |
||||
提交 |
||||
</el-button> |
||||
</div> |
||||
</template> |
||||
</el-card> |
||||
</template> |
||||
|
||||
<script setup lang="ts"> |
||||
import { |
||||
addEssay, |
||||
} from "@/api/user/news.js" |
||||
import {ref} from 'vue'; |
||||
import {ElButton,ElMessage,ElMessageBox } from 'element-plus' |
||||
import type { UploadProps, UploadUserFile } from 'element-plus' |
||||
import useUserStore from "@/store/modules/user"; |
||||
const userStore = useUserStore() |
||||
import {useRouter,useRoute} from "vue-router"; |
||||
const router = useRouter(); |
||||
//通过route携带信息传添加栏目的id |
||||
const route = useRoute(); |
||||
// console.log(route.query.id,'id') |
||||
const back = ()=>{ |
||||
router.push('/news/newsContent') |
||||
} |
||||
//新闻 |
||||
const newsForm = ref({ |
||||
categoryId:route.query.id, |
||||
content:'', |
||||
// file:'', |
||||
// id:'', |
||||
// pic:'', |
||||
publishTime:'', |
||||
readingNumber:'', |
||||
status:'', |
||||
title:'', |
||||
updateTime:'', |
||||
userId:userStore.data.id, |
||||
}) |
||||
//新闻文章添加 |
||||
const addNewsContentConfirm = async (id)=>{ |
||||
await addEssay({ |
||||
categoryId:newsForm.value.categoryId, |
||||
content:newsForm.value.content, |
||||
// file:newsForm.value.file, |
||||
// id:newsForm.value.id, |
||||
// pic:newsForm.value.pic, |
||||
publishTime:newsForm.value.publishTime, |
||||
readingNumber:newsForm.value.readingNumber, |
||||
status:newsForm.value.status, |
||||
title:newsForm.value.title, |
||||
updateTime:newsForm.value.updateTime, |
||||
userId:newsForm.value.userId |
||||
}).then(()=>{ |
||||
ElMessage({ |
||||
message:'添加成功', |
||||
type:'success' |
||||
}); |
||||
// 使用 setTimeout 来延迟一秒后执行路由跳转 |
||||
setTimeout(() => { |
||||
router.push('/news/newsContent'); |
||||
}, 1000); // 1000 毫秒等于 1 秒 |
||||
}) |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
.container{ |
||||
width: 80%; |
||||
margin: auto; |
||||
} |
||||
.card-header { |
||||
display: flex; /* 使用 Flexbox */ |
||||
justify-content: space-between; /* 主轴上平均分配剩余空间 */ |
||||
align-items: center; /* 交叉轴上居中对齐 */ |
||||
} |
||||
|
||||
.card-header span { |
||||
flex: 1; /* 使 span 占用可用空间，实现居中效果 */ |
||||
text-align: center; /* 文本居中 */ |
||||
font-size: 20px; |
||||
} |
||||
.dialog-footer{ |
||||
display: flex; |
||||
justify-content: flex-end; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,511 @@ |
||||
<template> |
||||
<div class="header_title"> |
||||
<span>新闻管理</span> |
||||
</div> |
||||
<div class="common-layout"> |
||||
<el-container> |
||||
<el-aside> |
||||
<div> |
||||
<el-button class="button-container_column" name="editColumnButton" @click="editHandle" round>栏目管理</el-button> |
||||
</div> |
||||
<div class="header-flex-container"> |
||||
<ul class="header-list"> |
||||
<li v-for="item in column"> |
||||
<el-dropdown placement="right"> |
||||
<div class="header-column" type="primary"> |
||||
<span @mouseenter="EssayList(item.id)">{{ item.categoryName }}</span> <!-- 使用span代替p --> |
||||
</div> |
||||
<!--当前栏目新闻管理--> |
||||
<template #dropdown> |
||||
<el-dropdown-menu> |
||||
<el-dropdown-item> |
||||
<ul> |
||||
<li class="flex-container" @click="newViews(listObject)" v-for="listObject in essay" style="margin-bottom: 15px"> |
||||
<el-tag type="info" size="large" style="height: 30px;font-size: 15px"> |
||||
<p >{{listObject.title}}</p> |
||||
</el-tag> |
||||
<div class="button-container"> |
||||
<el-button type="danger" @click.stop="deleteNewsList(listObject.id)" round plain>删除</el-button> |
||||
<el-button type="primary" @click.stop="editNewsDialogFormVisible = true; newViews(listObject)" round plain>编辑</el-button> |
||||
</div> |
||||
</li> |
||||
</ul> |
||||
</el-dropdown-item> |
||||
<div class="add-news-button"> |
||||
<el-button @click="addNewsButton(item)" type="success" style="margin-bottom: 10px" plain round>添加当前栏目新闻</el-button> |
||||
</div> |
||||
</el-dropdown-menu> |
||||
</template> |
||||
</el-dropdown> |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
</el-aside> |
||||
<!-- 新闻内容--> |
||||
<el-main> |
||||
<el-card class="container"> |
||||
<template #header> |
||||
<div class="card-header"> |
||||
<span>栏目添加新闻信息</span> |
||||
</div> |
||||
</template> |
||||
<!-- 栏目内添加新闻--> |
||||
<el-form v-model="newsForm"> |
||||
<el-form-item label="所属栏目id" label-width="140px"> |
||||
<el-input v-model="newsForm.categoryId" autocomplete="off" readonly/> |
||||
</el-form-item> |
||||
<el-form-item label="所属栏目名称" label-width="140px"> |
||||
<el-input v-model="newsForm.categoryName" autocomplete="off" readonly/> |
||||
</el-form-item> |
||||
<el-form-item label="文章内容" label-width="140px"> |
||||
<textarea style="width: 100%;height: 32vh" v-model="newsForm.content"></textarea> |
||||
<!-- <el-input class="brief_text" type="textarea" /> --> |
||||
</el-form-item> |
||||
<!-- <el-form-item label="文章id" label-width="140px">--> |
||||
<!-- <el-input v-model="newsForm.id" autocomplete="off" />--> |
||||
<!-- </el-form-item>--> |
||||
<!-- <el-form-item label="标题图片" label-width="140px">--> |
||||
<!-- <el-input v-model="newsForm.pic" autocomplete="off" />--> |
||||
<!-- </el-form-item>--> |
||||
<!-- <el-form-item label="发布时间" label-width="140px">--> |
||||
<!-- <el-input v-model="newsForm.publishTime" autocomplete="off" type="date"/>--> |
||||
<!-- </el-form-item>--> |
||||
<el-form-item label="浏览次数" label-width="140px"> |
||||
<el-input v-model="newsForm.readingNumber" autocomplete="off" /> |
||||
</el-form-item> |
||||
<el-form-item label="发布状态" label-width="140px"> |
||||
<el-input v-model="newsForm.status" placeholder="1:已发布 2:未发布" autocomplete="off" /> |
||||
</el-form-item> |
||||
<el-form-item label="文章标题" label-width="140px"> |
||||
<el-input v-model="newsForm.title" autocomplete="off" /> |
||||
</el-form-item> |
||||
<!-- <el-form-item label="更新时间" label-width="140px">--> |
||||
<!-- <el-input v-model="newsForm.updateTime" autocomplete="off" type="date"/>--> |
||||
<!-- </el-form-item>--> |
||||
<el-form-item label="发布文章的用户id" label-width="140px"> |
||||
<el-input v-model="newsForm.userId" autocomplete="off" readonly disabled/> |
||||
</el-form-item> |
||||
</el-form> |
||||
<template #footer> |
||||
<div class="dialog-footer"> |
||||
<el-link href="" target="_blank" style="margin-right: 30px;font-size: 19px">关于我们</el-link> |
||||
<el-button type="primary" @click="addNewsContentConfirm"> |
||||
提交 |
||||
</el-button> |
||||
</div> |
||||
</template> |
||||
</el-card> |
||||
</el-main> |
||||
</el-container> |
||||
</div> |
||||
<!-- 栏目编辑弹框--> |
||||
<el-drawer v-model="drawer" title="栏目编辑" :with-header="false"> |
||||
<span>栏目编辑</span><br/> |
||||
<el-button type="success" round style="margin: 10px" @click="addFormVisible = true">添加</el-button> |
||||
<div> |
||||
<el-table :data="column" style="width: 100%"> |
||||
<el-table-column prop="categoryName" label="名称" width="200" /> |
||||
<el-table-column width="200" > |
||||
<template #header> |
||||
操作 |
||||
</template> |
||||
<template #default="{row}"> |
||||
<!-- 删除按钮 --> |
||||
<el-button size="default" type="danger" @click="deleteHandle(row.id)">删除</el-button> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
</div> |
||||
</el-drawer> |
||||
<!-- 栏目添加对话框--> |
||||
<el-dialog v-model="addFormVisible" title="栏目添加" width="500"> |
||||
<el-form :model="form"> |
||||
<el-form-item label="栏目名称" label-width="140px"> |
||||
<el-input v-model="form.categoryName" autocomplete="off" /> |
||||
</el-form-item> |
||||
<el-form-item label="栏目父id" label-width="140px"> |
||||
<el-input v-model="form.categoryPid" autocomplete="off" readonly/> |
||||
</el-form-item> |
||||
<!-- <el-form-item label="创建时间" label-width="140px">--> |
||||
<!-- <el-input v-model="form.createTime" autocomplete="off" type="date"/>--> |
||||
<!-- </el-form-item>--> |
||||
<el-form-item label="创建该栏目的用户id" label-width="140px"> |
||||
<el-input v-model="form.creatorId" autocomplete="off" readonly disabled/> |
||||
</el-form-item> |
||||
<!-- <el-form-item label="栏目id" label-width="140px">--> |
||||
<!-- <el-input v-model="form.id" autocomplete="off" />--> |
||||
<!-- </el-form-item>--> |
||||
<el-form-item label="排序" label-width="140px"> |
||||
<el-input v-model="form.sort" autocomplete="off" /> |
||||
</el-form-item> |
||||
<el-form-item label="是否显示" label-width="140px"> |
||||
<el-input v-model="form.status" autocomplete="off" /> |
||||
</el-form-item> |
||||
<!-- <el-form-item label="更新时间" label-width="140px">--> |
||||
<!-- <el-input v-model="form.updateTime" autocomplete="off" type="date"/>--> |
||||
<!-- </el-form-item>--> |
||||
</el-form> |
||||
<template #footer> |
||||
<div class="dialog-footer"> |
||||
<el-button @click="addFormVisible = false">取消</el-button> |
||||
<el-button type="primary" @click="addFormConfirm"> |
||||
确定 |
||||
</el-button> |
||||
</div> |
||||
</template> |
||||
</el-dialog> |
||||
<!-- 修改新闻--> |
||||
<el-drawer v-model="editNewsDialogFormVisible" title="修改新闻" width="500px"> |
||||
<el-form v-model="nowTimeNewsData"> |
||||
<el-form-item label="所属栏目id" label-width="140px"> |
||||
<el-input v-model="nowTimeNewsData.categoryId" autocomplete="off" readonly disabled/> |
||||
</el-form-item> |
||||
<el-form-item label="文章内容" label-width="140px"> |
||||
<textarea style="width: 100%;height: 300px" v-model="nowTimeNewsData.content"></textarea> |
||||
<!-- <el-input class="brief_text" type="textarea" /> --> |
||||
</el-form-item> |
||||
<!-- <el-form-item label="文章文件" label-width="140px">--> |
||||
<!-- <el-input v-model="nowTimeNewsData.file" autocomplete="off" />--> |
||||
<!-- </el-form-item>--> |
||||
<!-- <el-form-item label="文章id" label-width="140px">--> |
||||
<!-- <el-input v-model="nowTimeNewsData.id" autocomplete="off" />--> |
||||
<!-- </el-form-item>--> |
||||
<!-- <el-form-item label="标题图片" label-width="140px">--> |
||||
<!-- <el-input v-model="nowTimeNewsData.pic" autocomplete="off" />--> |
||||
<!-- </el-form-item>--> |
||||
<!-- <el-form-item label="发布时间" label-width="140px">--> |
||||
<!-- <el-input v-model="nowTimeNewsData.publishTime" autocomplete="off" type="date"/>--> |
||||
<!-- </el-form-item>--> |
||||
<el-form-item label="浏览次数" label-width="140px"> |
||||
<el-input v-model="nowTimeNewsData.readingNumber" autocomplete="off" /> |
||||
</el-form-item> |
||||
<el-form-item label="发布状态" label-width="140px"> |
||||
<el-input v-model="nowTimeNewsData.status" placeholder="1:已发布 2:未发布" autocomplete="off" /> |
||||
</el-form-item> |
||||
<el-form-item label="文章标题" label-width="140px"> |
||||
<el-input v-model="nowTimeNewsData.title" autocomplete="off" /> |
||||
</el-form-item> |
||||
<!-- <el-form-item label="更新时间" label-width="140px">--> |
||||
<!-- <el-input v-model="nowTimeNewsData.updateTime" autocomplete="off" type="date"/>--> |
||||
<!-- </el-form-item>--> |
||||
<el-form-item label="发布文章的用户id" label-width="140px"> |
||||
<el-input v-model="nowTimeNewsData.userId" autocomplete="off" readonly disabled/> |
||||
</el-form-item> |
||||
</el-form> |
||||
<template #footer> |
||||
<div class="dialog-footer"> |
||||
<el-button @click="editNewsDialogFormVisible = false">取消</el-button> |
||||
<el-button type="primary" @click="editNewsContentConfirm"> |
||||
提交 |
||||
</el-button> |
||||
</div> |
||||
</template> |
||||
</el-drawer> |
||||
</template> |
||||
|
||||
<script setup lang="ts"> |
||||
import { |
||||
queryCategory, |
||||
deleteCategory, |
||||
addCategory, |
||||
addEssay, |
||||
editStatus, |
||||
queryEssay, |
||||
deleteEssay, |
||||
editEssay |
||||
} from "@/api/user/news.js" |
||||
import {ref,onMounted} from 'vue'; |
||||
import {ElButton,ElDrawer, ElMessageBox, ElMessage} from 'element-plus' |
||||
import useUserStore from "@/store/modules/user"; |
||||
import {useRouter,useRoute} from "vue-router"; |
||||
const router = useRouter(); |
||||
const route = useRoute(); |
||||
const userStore = useUserStore() |
||||
const drawer = ref(false) |
||||
const nowColumnId = ref() |
||||
const nowCategoryName = ref('') |
||||
const addFormVisible = ref(false) |
||||
//存取栏目信息 |
||||
const column =ref([]) |
||||
//存取文章列表信息 |
||||
const essay = ref([]) |
||||
const editNewsDialogFormVisible = ref(false) |
||||
//添加当前新闻栏目按钮 |
||||
const addNewsButton = (item)=>{ |
||||
nowColumnId.value = item.id |
||||
nowCategoryName.value = item.categoryName |
||||
} |
||||
const nowTimeNewsData = ref({}) |
||||
|
||||
//新闻详细信息获取 |
||||
const newViews = (listObject)=> { |
||||
nowTimeNewsData.value = { ...listObject } |
||||
console.log(nowTimeNewsData,'当前新闻数据') |
||||
} |
||||
//栏目 |
||||
const form = ref({ |
||||
categoryName:'', |
||||
categoryPid:0, |
||||
createTime:'', |
||||
creatorId:userStore.data.id, |
||||
id:'', |
||||
sort:'', |
||||
status:'', |
||||
updateTime:'' |
||||
}) |
||||
|
||||
//获取栏目信息 |
||||
const CategoryList = async () => { |
||||
const res = await queryCategory() |
||||
column.value = res.data |
||||
} |
||||
// 渲染 |
||||
onMounted(() => { |
||||
CategoryList() |
||||
}) |
||||
//栏目编辑按钮 |
||||
const editHandle =() =>{ |
||||
drawer.value = true |
||||
} |
||||
//栏目添加 |
||||
const addFormConfirm = async ()=>{ |
||||
addFormVisible.value = false |
||||
await addCategory({ |
||||
categoryName:form.value.categoryName, |
||||
categoryPid:form.value.categoryPid, |
||||
createTime:form.value.createTime, |
||||
creatorId:form.value.creatorId, |
||||
id:form.value.id, |
||||
sort:form.value.sort, |
||||
status:form.value.status, |
||||
updateTime:form.value.updateTime, |
||||
}).then(()=>{ |
||||
CategoryList() |
||||
ElMessage({ |
||||
message:'添加成功', |
||||
type:'success' |
||||
}) |
||||
}) |
||||
} |
||||
//栏目删除 |
||||
const deleteHandle = async (id)=>{ |
||||
await ElMessageBox.confirm('您确定删除这条栏目信息吗', '温馨提示', { |
||||
confirmButtonText: '确认', |
||||
cancelButtonText: '取消', |
||||
type: 'warning', |
||||
}) |
||||
await deleteCategory(id).then(() => { |
||||
CategoryList() // 删除成功后重新获取列表数据以更新页面 |
||||
ElMessage({ |
||||
message: '删除成功', |
||||
type: 'success', |
||||
}) |
||||
}) |
||||
await CategoryList() |
||||
} |
||||
//新闻文章查询 |
||||
const EssayList = async (id)=>{ |
||||
const response = await queryEssay(id) |
||||
// console.log(response.data,'response') |
||||
essay.value = response.data |
||||
if (essay.value.length > 0) { |
||||
newViews(essay.value[0]); // 显示第一条新闻 |
||||
} |
||||
console.log(essay.value,'essay') |
||||
} |
||||
//新闻删除 |
||||
const deleteNewsList = async (id)=>{ |
||||
// console.log(id) |
||||
await deleteEssay(id).then(() => { |
||||
EssayList(id) // 删除成功后重新获取列表数据以更新页面 |
||||
ElMessage({ |
||||
message: '删除成功', |
||||
type: 'success', |
||||
}) |
||||
}) |
||||
} |
||||
//修改后新闻提交 |
||||
const editNewsContentConfirm = async ()=>{ |
||||
editNewsDialogFormVisible.value = false |
||||
await editEssay({ |
||||
categoryId:nowTimeNewsData.value.categoryId, |
||||
content:nowTimeNewsData.value.content, |
||||
file:nowTimeNewsData.value.file, |
||||
id:nowTimeNewsData.value.id, |
||||
pic:nowTimeNewsData.value.pic, |
||||
publishTime:nowTimeNewsData.value.publishTime, |
||||
readingNumber:nowTimeNewsData.value.readingNumber, |
||||
status:nowTimeNewsData.value.status, |
||||
title:nowTimeNewsData.value.title, |
||||
updateTime:nowTimeNewsData.value.updateTime, |
||||
userId:nowTimeNewsData.value.userId |
||||
}).then(()=>{ |
||||
ElMessage({ |
||||
message:'添加成功', |
||||
type:'success' |
||||
}); |
||||
}) |
||||
} |
||||
//新闻 |
||||
const newsForm = ref({ |
||||
categoryId:nowColumnId, |
||||
categoryName:nowCategoryName, |
||||
content:'', |
||||
// file:'', |
||||
// id:'', |
||||
// pic:'', |
||||
publishTime:'', |
||||
readingNumber:'', |
||||
status:'', |
||||
title:'', |
||||
updateTime:'', |
||||
userId:userStore.data.id, |
||||
}) |
||||
//新闻文章添加 |
||||
const addNewsContentConfirm = async (id)=>{ |
||||
await addEssay({ |
||||
categoryId:newsForm.value.categoryId, |
||||
content:newsForm.value.content, |
||||
// file:newsForm.value.file, |
||||
// id:newsForm.value.id, |
||||
// pic:newsForm.value.pic, |
||||
publishTime:newsForm.value.publishTime, |
||||
readingNumber:newsForm.value.readingNumber, |
||||
status:newsForm.value.status, |
||||
title:newsForm.value.title, |
||||
updateTime:newsForm.value.updateTime, |
||||
userId:newsForm.value.userId |
||||
}).then(()=>{ |
||||
ElMessage({ |
||||
message:'添加成功', |
||||
type:'success' |
||||
}); |
||||
}) |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
.header_title{ |
||||
font-size: 30px; |
||||
text-align: center; |
||||
padding: 20px; |
||||
margin: auto; |
||||
background:white; |
||||
} |
||||
.el-aside { |
||||
height: 100vh; /* 设置高度为视窗高度 */ |
||||
overflow-y: auto; /* 当内容超出时显示滚动条 */ |
||||
} |
||||
.header-flex-container { |
||||
display: flex; |
||||
/*align-items: center; !* 垂直居中 *!*/ |
||||
padding: 20px; |
||||
gap: 10px; |
||||
background: white; |
||||
margin-top: 20px; |
||||
height: 81vh; |
||||
overflow-y: auto; |
||||
} |
||||
.header-flex-container::-webkit-scrollbar { |
||||
width: 0px; /* 滚动条宽度 */ |
||||
} |
||||
.header-list { |
||||
/*display: flex; !* 使li元素水平排列 *!*/ |
||||
flex-wrap: wrap; /* 如果需要换行 */ |
||||
/*align-items: center; !* 如果需要，也可以使li元素垂直居中 *!*/ |
||||
margin: 0; /* 移除默认外边距 */ |
||||
padding: 0; /* 移除默认内边距 */ |
||||
} |
||||
.header-list span{ |
||||
font-size: 17px; |
||||
color: whitesmoke; |
||||
} |
||||
.header-list li { |
||||
list-style: none; |
||||
margin-right: 10px; |
||||
} |
||||
.header-column{ |
||||
height:30px; |
||||
margin-top: 20px; |
||||
margin-right: 80px; |
||||
padding: 5px; |
||||
margin-bottom: 20px; |
||||
cursor: pointer; /* 鼠标悬停时显示手指形状，表示可点击 */ |
||||
} |
||||
.header-column span{ |
||||
color: #222222; |
||||
} |
||||
.add-news-button { |
||||
margin-top: auto; /* 将按钮推到底部 */ |
||||
text-align: center; /* 居中按钮 */ |
||||
width: 100%; |
||||
} |
||||
.contentTitle{ |
||||
color: firebrick; |
||||
font-size: 30px; |
||||
text-align: center; |
||||
display: block; |
||||
width: 100%; /* 或者设置一个具体的宽度 */ |
||||
} |
||||
.flex-container { |
||||
display: flex; |
||||
justify-content: space-between; /* 将内容平均分布，按钮自动靠右 */ |
||||
align-items: center; |
||||
flex-direction: row; |
||||
} |
||||
/* 添加新的类来控制按钮的位置 */ |
||||
.button-container { |
||||
display: flex; |
||||
justify-content: flex-end; /* 按钮靠右 */ |
||||
align-items: center; /* 垂直居中 */ |
||||
} |
||||
.button-container_column{ |
||||
position:absolute; |
||||
margin-top: 30px; |
||||
margin-left: 200px; |
||||
} |
||||
.news-flex-container { |
||||
display: flex; /* 使用 Flexbox 布局 */ |
||||
justify-content: space-between; /* 平均分配空间 */ |
||||
align-items: center; /* 垂直居中对齐 */ |
||||
} |
||||
.news-flex-container p { |
||||
flex: 1; /* 平均分配剩余空间 */ |
||||
text-align: center; /* 文本居中显示 */ |
||||
} |
||||
.flex-container p { |
||||
flex-grow: 1; /* 扩展剩余空间 */ |
||||
margin-right: 10px; /* 添加一些右侧间距以避免按钮与文本直接接触 */ |
||||
} |
||||
.flex-container .el-button { |
||||
margin-left: 20px; /* 将按钮推到最右侧 */ |
||||
} |
||||
.flex-container p:last-child { |
||||
margin-right: 0; |
||||
} |
||||
.scrollbarContent{ |
||||
height:60vh; |
||||
border: 1px; |
||||
background: white; |
||||
border-radius: 1%; |
||||
font-size: 20px; |
||||
padding: 10px; |
||||
overflow-y: auto; |
||||
line-height: 2.0; |
||||
} |
||||
.card-header { |
||||
display: flex; /* 使用 Flexbox */ |
||||
justify-content: space-between; /* 主轴上平均分配剩余空间 */ |
||||
align-items: center; /* 交叉轴上居中对齐 */ |
||||
} |
||||
|
||||
.card-header span { |
||||
flex: 1; /* 使 span 占用可用空间，实现居中效果 */ |
||||
text-align: center; /* 文本居中 */ |
||||
font-size: 20px; |
||||
} |
||||
.dialog-footer{ |
||||
display: flex; |
||||
justify-content: flex-end; |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue