'更新'

src/views/message/components/messageContent.vue

@@ -196,7 +196,7 @@ li{
   padding: 0 20px; /* 添加一些内边距以避免内容紧贴边缘 */
 }
 .el-input{
-  margin-bottom: 30px;
+  margin-bottom: 20px;
 }
 .content-container {
   display: flex;

src/views/message/components/receiveContentList.vue

@@ -17,10 +17,15 @@
               <span class="time">发送时间：{{ Message.sendTime }}</span>
               <span class="read-status">是否阅读：{{Message.isRead ? '已读' : '未读' }}</span>
             </div>
+            <el-divider/>
             <div class="recipient">标题：{{ Message.title }}</div>
-            <div class="content">
+<!--            <div class="content">-->
-              内容：{{ Message.content }}
+<!--              内容：{{ Message.content }}-->
-            </div>
+              <el-form-item label="文章内容">
+                <textarea style="width: 100%;height:50vh" v-model="Message.content"></textarea>
+                <!-- <el-input class="brief_text" type="textarea" /> -->
+              </el-form-item>
+<!--            </div>-->
             </div>
 <!--          <template #footer>Footer content</template>-->
         </el-card>

src/views/message/components/sendMessageList.vue

@@ -17,10 +17,14 @@
               <span class="time">发送时间：{{ sendMessage.sendTime }}</span>
 <!--              <span class="read-status">是否阅读：{{sendMessage.isRead}}</span>-->
             </div>
+            <el-divider/>
             <div class="recipient">标题：{{ sendMessage.title }}</div>
-            <div class="content">
+<!--            <div class="content">-->
-              内容：{{ sendMessage.content }}
+<!--              内容：{{ sendMessage.content }}-->
-            </div>
+<!--            </div>-->
+            <el-form-item label="文章内容">
+              <textarea style="width: 100%;height:50vh" v-model="sendMessage.content"></textarea>
+            </el-form-item>
           </div>
           <!--          <template #footer>Footer content</template>-->
         </el-card>

src/views/news/components/newsContentManage.vue

@@ -5,10 +5,11 @@
   <div class="common-layout">
     <el-container>
       <el-aside>
+
+        <div class="header-flex-container">
           <div>
-          <el-button class="button-container_column" name="editColumnButton" @click="editHandle" round>栏目管理</el-button>
+            <el-button class="button-container_column" @click="editHandle" type="primary" plain round>栏目管理</el-button>
           </div>
-        <div class="header-flex-container">
           <ul class="header-list">
             <li v-for="item in column">
               <el-dropdown placement="right">
@@ -58,7 +59,7 @@
               <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>
+              <textarea style="width: 100%;height:320px" v-model="newsForm.content"></textarea>
               <!-- <el-input class="brief_text" type="textarea" /> -->
             </el-form-item>
             <!--      <el-form-item label="文章id" label-width="140px">-->
@@ -101,7 +102,7 @@
   <!--  栏目编辑弹框-->
   <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>
+    <el-button type="success" round style="margin: 30px" @click="addFormVisible = true">添加新闻栏目</el-button>
     <div>
       <el-table :data="column" style="width: 100%">
         <el-table-column prop="categoryName" label="名称" width="200" />
@@ -403,17 +404,15 @@ const addNewsContentConfirm = async (id)=>{
   gap: 10px;
   background: white;
   margin-top: 20px;
-  height: 81vh;
+  height: 810px;
   overflow-y: auto;
 }
 .header-flex-container::-webkit-scrollbar {
   width: 0px; /* 滚动条宽度 */
 }
 .header-list {
-  /*display: flex; !* 使li元素水平排列 *!*/
   flex-wrap: wrap; /* 如果需要换行 */
-  /*align-items: center; !* 如果需要，也可以使li元素垂直居中 *!*/
+  margin-left: 40px; /* 移除默认外边距 */
-  margin: 0; /* 移除默认外边距 */
   padding: 0; /* 移除默认内边距 */
 }
 .header-list span{
@@ -461,8 +460,7 @@ const addNewsContentConfirm = async (id)=>{
 }
 .button-container_column{
   position:absolute;
-  margin-top: 30px;
+  margin-left: 180px;
-  margin-left: 200px;
 }
 .news-flex-container {
   display: flex; /* 使用 Flexbox 布局 */

src/views/news/index.vue

@@ -32,7 +32,6 @@
       </el-aside>
       <!--  新闻内容-->
       <el-main>
-        <div class="mainContainer">
           <div class="card-header">
             <el-card shadow="hover">
               <div style="height:33px">
@@ -53,7 +52,6 @@
               <span>{{ nowTimeNewsData.content }}</span>
             </el-scrollbar>
         </div>
-        </div>
       </el-main>
     </el-container>
   </div>
@@ -65,6 +63,7 @@ import {
   queryEssay,
 } from "@/api/user/news.js"
 import {ref,onMounted} from 'vue';
+import {ElMessage} from 'element-plus'
 import useUserStore from "@/store/modules/user";
 import {useRouter} from "vue-router";
 const router = useRouter();
@@ -74,6 +73,13 @@ const column  =ref([])
 const CategoryList = async () => {
   const res = await queryCategory()
   column.value = res.data
+  console.log('栏目数组长度：',column.value.length)
+  // 初始化时加载第一个栏目的第一条新闻
+  if (column.value.length > 0) {
+    await EssayList(column.value[0].id);
+  } else {
+   await ElMessage.warning('没有找到任何栏目！');
+  }
 }
 // 渲染
 onMounted(() => {
@@ -81,10 +87,7 @@ onMounted(() => {
 })
 const essay = ref([])
 const nowTimeNewsData = ref({})
-//新闻详细信息获取
+
-const newViews = (listObject)=> {
-  nowTimeNewsData.value = { ...listObject }
-}
 //新闻文章查询
 const EssayList = async (id)=>{
   const response = await queryEssay(id)
@@ -93,8 +96,11 @@ const EssayList = async (id)=>{
     newViews(essay.value[0]); // 显示第一条新闻
   }
 }
+//新闻详细信息获取
+const newViews = (listObject)=> {
+  nowTimeNewsData.value = { ...listObject }
+}
 </script>
-
 <style scoped>
 .header_title{
   font-size: 30px;
@@ -103,10 +109,7 @@ const EssayList = async (id)=>{
   margin: auto;
   background-image: linear-gradient(60deg,honeydew,powderblue,honeydew);
 }
-.el-aside {
+/*侧边*/
-  height: 100vh; /* 设置高度为视窗高度 */
-  overflow-y: auto; /* 当内容超出时显示滚动条 */
-}
 .header-flex-container {
   display: flex;
   /*align-items: center; !* 垂直居中 *!*/
@@ -114,18 +117,16 @@ const EssayList = async (id)=>{
   gap: 10px;
   background: white;
   margin-top: 20px;
-  height: 81vh;
+  height: 810px;
   overflow-y: auto;
 }
 .header-flex-container::-webkit-scrollbar {
   width: 0px; /* 滚动条宽度 */
 }
 .header-list {
-  /*display: flex; !* 使li元素水平排列 *!*/
+  flex-wrap: wrap;
-  flex-wrap: wrap; /* 如果需要换行 */
+  margin-left: 50px;
-  /*align-items: center; !* 如果需要，也可以使li元素垂直居中 *!*/
+  padding: 0;
-  margin: 0; /* 移除默认外边距 */
-  padding: 0; /* 移除默认内边距 */
 }
 .header-list span{
   font-size: 17px;
@@ -146,6 +147,17 @@ const EssayList = async (id)=>{
 .header-column span{
   color: #222222;
 }
+/*内容*/
+.scrollbarContent{
+  height:680px;
+  border: 1px;
+  background: white;
+  border-radius: 1%;
+  font-size: 20px;
+  padding: 10px;
+  overflow-y: auto;
+  line-height: 2.0;
+}
 .contentTitle{
   color: firebrick;
   font-size: 30px;
@@ -178,14 +190,5 @@ const EssayList = async (id)=>{
 .flex-container p:last-child {
   margin-right: 0;
 }
-.scrollbarContent{
+
-  height:68vh;
-  border: 1px;
-  background: white;
-  border-radius: 1%;
-  font-size: 20px;
-  padding: 10px;
-  overflow-y: auto;
-  line-height: 2.0;
-}
 </style>