123

package.json

@@ -8,13 +8,20 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@wangeditor/editor": "^5.1.23",
+    "@wangeditor/editor-for-vue": "^1.0.2",
     "axios": "^1.6.8",
     "core-js": "^3.8.3",
     "dayjs": "^1.11.10",
     "element-ui": "^2.15.14",
     "masonry-layout": "^4.2.2",
+    "quill": "^1.3.7",
+    "quill-image-drop-module": "^1.0.3",
+    "quill-image-extend-module": "^1.1.2",
+    "quill-image-resize-module": "^3.0.0",
     "vue": "^2.6.14",
     "vue-lazyload": "^3.0.0",
+    "vue-quill-editor": "^3.0.6",
     "vue-router": "^3.5.1",
     "vuex": "^3.6.2"
   },
@@ -31,7 +38,7 @@
     "eslint-plugin-import": "^2.25.3",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^5.1.0",
-    "eslint-plugin-vue": "^8.0.3",
+    "eslint-plugin-vue": "^7.0.0",
     "less": "^4.0.0",
     "less-loader": "^8.0.0",
     "vue-template-compiler": "^2.6.14"

src/App.vue

@@ -3,6 +3,7 @@
      <main>
     <router-view />
     <trigger></trigger>
+    <el-backtop :right="100" :bottom="100" />
    </main>
    <footer>
     <basePage></basePage>

src/api/backlog.js

@@ -0,0 +1,27 @@
+import request from '../utils/request'
+
+// 获取内容
+export function backlogList (data) {
+  return request({
+    url: '/backlogList',
+    method: 'get',
+    data
+  })
+}
+
+// 新增内容
+export function addBacklog (data) {
+  return request({
+    url: '/addBacklog',
+    method: 'post',
+    data
+  })
+}
+
+// 删除内容
+export function deleteBacklog (id) {
+  return request({
+    url: '/deleteBacklog/' + id,
+    method: 'delete'
+  })
+}

src/api/list.js

@@ -18,6 +18,15 @@ export function addContentToList (id, content) {
   })
 }
 
+// 修改列表内容
+export function updateContentInList (id, contentId, content) {
+  return request({
+    url: `/list/${id}/${contentId}`,
+    method: 'put',
+    data: content
+  })
+}
+
 // 删除列表中的内容
 export function deleteContentFromList (id, contentId) {
   return request({

src/assets/styles/compon.less

@@ -1,51 +1,87 @@
 .kecheng {
-    width: 1200px;
+  width: 1200px;
-    margin: 20px auto;
+  margin: 20px auto;
 
-    .empty{
+  .empty {
-        width: 100%;
+    width: 100%;
-        height: 100px;
+    height: 100px;
-        background-color: #f5f5f5;
+    background-color: #f5f5f5;
-        text-align: center;
+    text-align: center;
-        line-height: 100px;
+    line-height: 100px;
-        font-size: 18px;
+    font-size: 18px;
-        color: #999;
+    color: #999;
+  }
+
+  .con {
+    width: 100%;
+    height: 100px;
+    background-color: #fff;
+    background-image: linear-gradient(90deg,
+        transparent 79px,
+        #abced4 79px,
+        #abced4 81px,
+        transparent 81px),
+      linear-gradient(#eee 0.1em, transparent 0.1em);
+    background-size: 100% 1.2em;
+    margin-bottom: 20px;
+
+    .title {
+      width: 900px;
+      height: 40px;
+      font-size: 26px;
+      font-weight: bold;
+      margin: 10px 0 0 85px;
+      cursor: pointer;
+      color: #007bff;
+      display: -webkit-box;
+      /* 需要组合这些属性来实现效果 */
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 1;
+      /* 限制显示的行数，例如3行 */
+      overflow: hidden;
+      float: left;
+
+      &:hover {
+        text-decoration: underline;
+      }
     }
 
-    .con {
+    .delete-btn {
-      width: 100%;
+      background-color: #007bff;
-      height: 100px;
+      color: white;
-      background-color: #fff;
+      border: none;
-      background-image: linear-gradient(
+      width: 40px;
-          90deg,
+      height: 40px;
-          transparent 79px,
+      border-radius: 50%;
-          #abced4 79px,
+      cursor: pointer;
-          #abced4 81px,
+      opacity: 0;
-          transparent 81px
+      transition: all 0.3s ease;
-        ),
+      margin-left: 100px;
-        linear-gradient(#eee 0.1em, transparent 0.1em);
-      background-size: 100% 1.2em;
-      margin-bottom: 20px;
 
-      .title {
+      &:hover{
-        width: 1100px;
+        background-color: #00ffff;
-        height: 40px;
-        font-size: 24px;
-        margin: 10px 0 0 85px;
-        cursor: pointer;
       }
+    }
 
-      .content {
+
-        width: 1100px;
+    .content {
-        height: 40px;
+      display: inline;
-        text-indent: 2em;
+      width: 800px;
-        margin-left: 80px;
+      text-indent: 2em;
-        overflow: hidden;
+      margin: 0 0 0 60px;
-        word-wrap: break-word; /* 适用于大多数浏览器 */
+      display: -webkit-box;
-        overflow-wrap: break-word; /* 适用于最新的浏览器 */
+      /* 需要组合这些属性来实现效果 */
-      }
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 1;
+      /* 限制显示的行数，例如3行 */
+      overflow: hidden;
+    }
+
+    &:hover .delete-btn{
+      opacity: 1;
     }
   }
+}
 
 
 .main-content {
@@ -55,60 +91,27 @@
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
-.kecheng {
-  margin-bottom: 20px;
-}
 
-.con {
+.add-btn{
-  background-color: #fff;
+  width: 100px;
-  padding: 15px;
+  height: 40px;
-  margin-bottom: 10px;
-  border-radius: 4px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-}
-
-.title {
-  font-size: 18px;
-  font-weight: bold;
-  margin-bottom: 5px;
-  cursor: pointer;
-  color: #007bff;
-}
-
-.title:hover {
-  text-decoration: underline;
-}
-
-.content {
-  font-size: 14px;
-  color: #333;
-  float: left;
-}
-
-button {
-  background-color: #007bff;
-  color: white;
   border: none;
-  padding: 10px 20px;
-  border-radius: 4px;
-  cursor: pointer;
-}
-
-button:hover {
-  background-color: #0056b3;
-}
-
-input,
-textarea {
-  width: 100%;
-  padding: 10px;
-  margin: 10px 0;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-}
-
-input:focus,
-textarea:focus {
-  border-color: #007bff;
   outline: none;
+  border-radius: 10px;
+  background-color: rgb(60, 255, 0);
+  color: #f9f9f9;
+  font-weight: bold;
+  font-size: 18px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+
+  &:hover{
+    background-color: rgb(200, 197, 0);
+  }
+}
+
+.dialog-footer{
+  .el-button{
+    margin-top: 50px;
+  }
 }

src/components/CustomEditor.vue

@@ -0,0 +1,103 @@
+<template>
+  <el-dialog title="添加新内容" :visible.sync="localVisible" @close="clearForm">
+    <el-form
+      :model="newContent"
+      :rules="rules"
+      ref="newContentForm"
+      label-width="100px"
+      class="demo-ruleForm"
+    >
+      <el-form-item label="标题" prop="title">
+        <el-input v-model="newContent.title" placeholder="标题"></el-input>
+      </el-form-item>
+      <el-form-item label="内容">
+        <Toolbar
+          style="border-bottom: 1px solid #ccc"
+          :editor="editor"
+          :defaultConfig="toolbarConfig"
+          :mode="mode"
+        />
+        <Editor
+          style="height: 500px; overflow-y: hidden;"
+          v-model="newContent.content"
+          :defaultConfig="editorConfig"
+          :mode="mode"
+          @onCreated="onCreated"
+        />
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="handleCancel">取消</el-button>
+      <el-button type="primary" @click="submitForm('newContentForm')">添加</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
+
+export default {
+  name: 'CustomEditor',
+  components: { Editor, Toolbar },
+  props: {
+    visible: {
+      type: Boolean,
+      required: true
+    }
+  },
+  data () {
+    return {
+      editor: null,
+      newContent: {
+        title: '',
+        content: ''
+      }, // 新内容
+      toolbarConfig: {},
+      editorConfig: { placeholder: '请输入内容...' },
+      mode: 'default', // or 'simple'
+      rules: {
+        title: [{ required: true, message: '标题不能为空', trigger: 'blur' }]
+      },
+      localVisible: this.visible
+    }
+  },
+  watch: {
+    visible (newVal) {
+      this.localVisible = newVal
+    },
+    localVisible (newVal) {
+      this.$emit('update:visible', newVal)
+    }
+  },
+  methods: {
+    onCreated (editor) {
+      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
+    },
+    submitForm (formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          this.$emit('add-content', this.newContent)
+          this.clearForm()
+        } else {
+          console.error('表单验证失败')
+          return false
+        }
+      })
+    },
+    handleCancel () {
+      this.clearForm()
+      this.localVisible = false
+    },
+    clearForm () {
+      this.newContent = { title: '', content: '' }
+    }
+  },
+  beforeDestroy () {
+    const editor = this.editor
+    if (editor == null) return
+    editor.destroy() // 组件销毁时，及时销毁编辑器
+  }
+}
+</script>
+
+<style src="@wangeditor/editor/dist/css/style.css"></style>

src/components/navigationBar.vue

@@ -178,23 +178,21 @@ export default {
     width: 1200px;
     height: 60px;
     margin: 0 auto;
-    line-height: 60px;
 
     p {
       width: 88px;
-      height: 29px;
+      height: 60px;
       font-size: 22px;
       font-weight: bold;
       color: #006cff;
       float: left;
-      margin-left: 20px;
+      line-height: 60px;
     }
 
     .nackground {
       width: 600px;
       height: 60px;
       float: left;
-      margin-left: 100px;
       text-align: center;
 
       li {
@@ -203,6 +201,7 @@ export default {
         align-items: center;
         float: left;
         margin-left: 40px;
+        line-height: 60px;
         position: relative;
 
         a {
@@ -246,6 +245,7 @@ export default {
   width: 380px;
   height: 60px;
   float: right;
+  line-height: 60px;
   position: relative;
 
   .out {

src/main.js

@@ -8,6 +8,16 @@ import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
 import navigationBar from '@/components/navigationBar.vue'
 import music from '@/components/music.vue'
+
+// 引入富文本组件
+import QuillEditor from 'vue-quill-editor'
+// 引入富文本组件样式
+import 'quill/dist/quill.core.css'
+import 'quill/dist/quill.snow.css'
+import 'quill/dist/quill.bubble.css'
+Vue.use(QuillEditor)
+// 引入富文本组件
+
 Vue.use(ElementUI)
 Vue.component('navigationBar', navigationBar)
 Vue.component('musIc', music)

src/views/AboutUs.vue

@@ -18,7 +18,7 @@
             <h3>其他操作</h3>
             <hr />
             <p @click="toggleBackground">切换背景</p>
-            <p>帮助与反馈</p>
+            <p @click="toggleTheme">帮助与反馈</p>
           </div>
           <trigger :visible.sync="isShow"></trigger>
         </el-tab-pane>
@@ -34,7 +34,7 @@
                 :class="{ selected: index === selectedTodoIndex }"
                 @click="selectTodo(index)"
               >
-                {{ todo }}
+                {{ todo.content }}
               </li>
             </ul>
             <div class="wtbDone-footer">
@@ -58,7 +58,11 @@
                 </div>
                 <div class="form-item">
                   <label for="intro">介绍：</label>
-                  <input id="intro" v-model="form.intro" placeholder="请输入介绍" />
+                  <input
+                    id="intro"
+                    v-model="form.intro"
+                    placeholder="请输入介绍"
+                  />
                 </div>
                 <div class="form-item">
                   <label>性别：</label>
@@ -81,7 +85,11 @@
                     <option value="region2">地区2</option>
                     <option value="region3">地区3</option>
                   </select>
-                  <select id="city" v-model="form.city" style="margin-left: 10px">
+                  <select
+                    id="city"
+                    v-model="form.city"
+                    style="margin-left: 10px"
+                  >
                     <option value="city1">城市1</option>
                     <option value="city2">城市2</option>
                     <option value="city3">城市3</option>
@@ -95,7 +103,9 @@
             <div class="right-section">
               <div class="avatar-section">
                 <img :src="avatar" alt="用户头像" class="avatar" />
-                <span class="change-avatar-btn" @click="changeAvatar">更换头像</span>
+                <span class="change-avatar-btn" @click="changeAvatar"
+                  >更换头像</span
+                >
               </div>
             </div>
           </div>
@@ -125,10 +135,11 @@
 </template>
 
 <script>
-import navigationBar from '@/components/navigationBar.vue'
+import navigationBar from '@/components/navigationBar.vue' // 自定义导航栏组件
-import trigger from '@/components/trigger.vue'
+import trigger from '@/components/trigger.vue' // 自定义组件
-import { getUserInfo, updateUserInfo } from '@/api/login'
+import { getUserInfo, updateUserInfo } from '@/api/login' // 个人信息相关接口
-import { mapState, mapGetters, mapActions } from 'vuex'
+import { backlogList, addBacklog, deleteBacklog } from '@/api/backlog' // 待办事项相关接口
+import { mapState, mapGetters, mapActions } from 'vuex' // vuex相关
 
 export default {
   data () {
@@ -145,9 +156,9 @@ export default {
       dialogVisible: false,
       imageUrl: '',
       name: '',
-      avatar: require('@/assets/images/sub.jpg'),
+      avatar: require('@/assets/images/sub2.jpg'),
-      newTodo: '',
+      newTodo: '', // 待办事项输入框内容
-      todos: [],
+      todos: [], // 待办事项列表
       selectedTodoIndex: null
     }
   },
@@ -159,7 +170,11 @@ export default {
     ...mapState(['username']),
     ...mapGetters(['getUsername'])
   },
+  created () {
+    this.fetchTodos() // 获取待办事项
+  },
   methods: {
+    // 获取个人信息
     fetchUserInfo (username) {
       getUserInfo(username)
         .then((res) => {
@@ -183,6 +198,12 @@ export default {
     toggleBackground () {
       this.isShow = true
     },
+    toggleTheme () {
+      this.$message({
+        message: '暂未开放，敬请期待！',
+        type: 'info'
+      })
+    },
     ...mapActions(['updateUsername']),
     saveUserInfo () {
       const currentUsername = localStorage.getItem('username') // 获取当前用户名
@@ -218,27 +239,54 @@ export default {
 
       console.log(updatedUserInfo)
     },
+    // 获取待办事项
+    fetchTodos () {
+      backlogList().then((res) => {
+        this.todos = res.data
+      })
+    },
+    // 添加待办事项
     handleAdd () {
-      if (this.newTodo.trim() !== '') {
+      if (this.newTodo.trim() === '') {
-        this.todos.push(this.newTodo.trim())
-        this.newTodo = ''
-        this.$message.success('添加成功')
-      } else {
         this.$message.error('请输入待办事项')
+        return
       }
+      addBacklog({ content: this.newTodo }).then((res) => {
+        if (res && res.status === 200) {
+          this.$message.success('添加成功')
+          this.fetchTodos()
+          this.newTodo = ''
+        } else {
+          this.$message.error('添加失败')
+        }
+      })
     },
     selectTodo (index) {
       this.selectedTodoIndex = index
     },
+    // 删除待办事项
     handleDelete () {
       if (this.selectedTodoIndex !== null) {
-        this.todos.splice(this.selectedTodoIndex, 1)
+        const selectedTodo = this.todos[this.selectedTodoIndex]
-        this.selectedTodoIndex = null
+        deleteBacklog(selectedTodo.id)
-        this.$message.success('删除成功')
+          .then((res) => {
+            if (res && res.status === 200) {
+              this.$message.success('删除成功')
+              this.fetchTodos()
+              this.selectedTodoIndex = null
+            } else {
+              this.$message.error('删除失败')
+            }
+          })
+          .catch((error) => {
+            console.error('删除待办事项失败：', error)
+            this.$message.error('删除失败')
+          })
       } else {
         this.$message.error('请选择要删除的待办事项')
       }
     },
+    /** 更换头像 */
     changeAvatar () {
       this.dialogVisible = true
     },
@@ -308,7 +356,7 @@ ul {
     width: 100%;
     height: 40px;
     line-height: 40px;
-    text-align: center;
+    text-indent: 2em;
     background-color: #f5f5f5;
     border-bottom: 1px solid #ddd;
     cursor: pointer;

src/views/Home.vue

@@ -44,7 +44,7 @@
         </div>
       </div>
     </div>
-    <el-backtop :right="100" :bottom="100" />
+
     <musIc />
   </div>
 </template>

src/views/labelPage.vue

@@ -18,7 +18,7 @@
                 <h4>{{ item.title }}</h4>
               </router-link>
               <!-- 删除按钮/图标 -->
-              <button class="delete-btn" @click="deleteItem(index)">删除</button>
+              <button class="delete-btn" @click="deleteItem(index)">X</button>
             </li>
           </ul>
         </div>
@@ -33,10 +33,16 @@
     <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
       <el-form ref="form" :model="form" label-width="80px" :rules="rules">
         <el-form-item label="笔记标题" prop="addContent">
-          <el-input v-model="form.addContent" placeholder="请输入标题"></el-input>
+          <el-input
+            v-model="form.addContent"
+            placeholder="请输入标题"
+          ></el-input>
         </el-form-item>
         <el-form-item label="表名" prop="tableName">
-          <el-input v-model="form.tableName" placeholder="请输入表名(英文)"></el-input>
+          <el-input
+            v-model="form.tableName"
+            placeholder="请输入表名(英文)"
+          ></el-input>
         </el-form-item>
       </el-form>
 
@@ -228,20 +234,21 @@ a {
   position: absolute;
   top: 0;
   right: 0;
-  background-color: rgba(255, 106, 106, 0.2);
+  background-color: rgba(0, 0, 0, 0.2);
-  color: rgba(248, 146, 51, 0.897);
+  color: rgba(255, 255, 255, 0.897);
   border: none;
-  width: 50px;
+  border-radius: 50%;
+  width: 30px;
   height: 30px;
   cursor: pointer;
   font-size: 16px;
-  // 阴影
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+  transition: all 0.3s;
   opacity: 0;
 }
 
 .box-bd ul li:hover .delete-btn {
-  opacity:1;
+  opacity: 1;
 }
 
 .add {

src/views/particulars/detailPage.vue

@@ -24,6 +24,15 @@ export default {
   },
   created () {
     this.selectedItem = this.$route.params.selectedItem // 获取路由参数中的选定内容
+
+    if (this.selectedItem) {
+      localStorage.setItem('selectedItem', JSON.stringify(this.selectedItem))
+    } else {
+      const savedItem = localStorage.getItem('selectedItem')
+      if (savedItem) {
+        this.selectedItem = JSON.parse(savedItem)
+      }
+    }
   }
 }
 </script>

src/views/particulars/paiListPage.vue

@@ -7,11 +7,13 @@
           暂无内容
         </div>
         <div class="con" v-for="(item, index) in paginatedContent" :key="index">
-          <div class="title" @click="pushDetailPage(item, tableName)">
+          <div class="title" @click="pushDetailPage(item)">
             {{ item.title }}
           </div>
-          <div class="content" v-html="item.content"></div>
+          <button class="delete-btn" @click="deleteContent(item.id)">X</button>
-          <button @click="deleteContent(item.id)">删除</button>
+          <div class="content">
+            <span v-html="item.content"></span>
+          </div>
         </div>
       </div>
       <el-pagination
@@ -22,43 +24,26 @@
         @current-change="handlePageChange"
         style="margin: 20px 0 20px 500px"
       ></el-pagination>
-      <button @click="showAddDialog">添加新内容</button>
+      <button class="add-btn" @click="showAddDialog">添加新内容</button>
 
-      <!-- 弹框 -->
+      <CustomEditor
-      <el-dialog title="添加新内容" :visible.sync="dialogVisible">
+        :visible.sync="dialogVisible"
-        <el-form
+        @add-content="addContent"
-          :model="newContent"
+      />
-          :rules="rules"
-          ref="newContent"
-          label-width="100px"
-          class="demo-ruleForm"
-        >
-          <el-form-item label="标题" prop="title">
-            <el-input v-model="newContent.title" placeholder="标题"></el-input>
-          </el-form-item>
-          <el-form-item label="内容" prop="content">
-            <el-input
-              type="textarea"
-              v-model="newContent.content"
-              placeholder="内容"
-            ></el-input>
-          </el-form-item>
-        </el-form>
-        <span slot="footer" class="dialog-footer">
-          <el-button @click="dialogVisible = false">取消</el-button>
-          <el-button type="primary" @click="addContent">添加</el-button>
-        </span>
-      </el-dialog>
     </main>
-    <div class="fortter"></div>
+    <div class="footer"></div>
   </div>
 </template>
 
 <script>
 import { getlist, addContentToList, deleteContentFromList } from '@/api/list'
+import CustomEditor from '@/components/CustomEditor'
 
 export default {
   name: 'liSt',
+  components: {
+    CustomEditor
+  },
   data () {
     return {
       detailContent: [], // 初始化为数组
@@ -71,11 +56,7 @@ export default {
       newContent: {
         title: '',
         content: ''
-      }, // 新内容
+      } // 新内容
-      rules: {
-        title: [{ required: true, message: '标题不能为空', trigger: 'blur' }],
-        content: [{ required: true, message: '内容不能为空', trigger: 'blur' }]
-      }
     }
   },
   created () {
@@ -87,14 +68,13 @@ export default {
       getlist(id)
         .then((response) => {
           this.detailContent = response.data || []
-          this.total = response.data.length || 0
+          this.total = this.detailContent.length || 0
           this.tableName = response.data.tableName || ''
         })
         .catch((error) => {
           console.error('获取内容时出错：', error)
         })
     },
-    // 修改方法以传递选定的内容到 detailPage
     pushDetailPage (item) {
       this.$router.push({
         name: 'detailPage',
@@ -104,33 +84,35 @@ export default {
       })
     },
     handlePageChange (newPage) {
-      // 处理页面变化
       this.currentPage = newPage
       this.fetchContent() // 获取新页面的内容
     },
     showAddDialog () {
       this.dialogVisible = true
     },
-    addContent () {
+    addContent (newContent) {
       const id = this.$route.params.id // 获取路由参数
-      if (!this.newContent.title || !this.newContent.content) {
+      if (newContent.title === '' || newContent.content === '') {
-        alert('标题和内容不能为空')
+        this.$message({
-        return
+          message: '内容不能为空',
-      }
+          type: 'error'
-      addContentToList(id, this.newContent)
+        })
-        .then((response) => {
+      } else {
-          this.$message({
+        addContentToList(id, newContent)
-            message: '添加成功',
+          .then((response) => {
-            type: 'success'
+            this.$message({
+              message: '添加成功',
+              type: 'success'
+            })
+
+            this.dialogVisible = false
+            this.fetchContent() // 刷新内容列表
           })
-          this.dialogVisible = false
+          .catch((error) => {
-          this.newContent.title = ''
+            console.error('添加内容时出错：', error)
-          this.newContent.content = ''
+          })
-          this.fetchContent() // 刷新内容列表
+        console.log('准备发送的数据:', newContent)
-        })
+      }
-        .catch((error) => {
-          console.error('添加内容时出错：', error)
-        })
     },
     deleteContent (contentId) {
       const id = this.$route.params.id // 获取路由参数
@@ -164,5 +146,4 @@ export default {
 
 <style lang="less" scoped>
 @import url("@/assets/styles/compon.less");
-
 </style>

src/views/photoGallery.vue

@@ -29,8 +29,6 @@
         v-for="(item, index) in photos"
         :key="index"
         :class="item.sizeClass"
-        @mouseover="onMouseOver($event, item.sizeClass)"
-        @mouseleave="onMouseLeave"
         @click="openImageViewer(item.src)"
         ref="photoItems"
       >
@@ -171,29 +169,6 @@ export default {
     closeImageViewer () {
       this.showImageViewer = false
       document.body.classList.remove('no-scroll') // 恢复页面滚动
-    },
-    // 鼠标悬停时显示边框指示器
-    onMouseOver (event, sizeClass) {
-      const galleryItem = event.currentTarget
-      const rect = galleryItem.getBoundingClientRect()
-      const scrollTop = window.pageYOffset || document.documentElement.scrollTop
-      const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft
-
-      // 生成随机颜色
-      const randomColor = '#' + Math.floor(Math.random() * 16777215).toString(16)
-
-      this.pointerStyle = {
-        display: 'block',
-        top: `${rect.top + scrollTop - 85}px`,
-        left: `${rect.left + scrollLeft - 105}px`,
-        width: `${rect.width + 30}px`,
-        height: `${rect.height + 30}px`,
-        borderColor: randomColor // 设置随机颜色
-      }
-    },
-    // 鼠标离开时隐藏边框指示器
-    onMouseLeave () {
-      this.pointerStyle.display = 'none'
     }
   },
   // 组件挂载后加载图片

src/views/subject/listPage.vue

@@ -9,7 +9,7 @@
         </path>
       </svg>
       <div class="ana">
-        <p>{{ user }}</p>
+        <p class="name">{{ user }}</p>
       </div>
     </div>
     <div class="article" v-for="(item, index) in articleS" :key="index">
@@ -136,7 +136,7 @@ export default {
     backdrop-filter: blur(0px);
     -webkit-backdrop-filter: blur(0px);
 
-    p {
+    .name {
       text-align: center;
       line-height: 50px;
       font-size: 20px;
@@ -200,13 +200,9 @@ export default {
     .duce {
       width: 100%;
       height: 80px;
-      line-height: 30px;
+      // line-height: 30px;
-      overflow: hidden;
-      display: -webkit-box;
-      -webkit-line-clamp: 3;
-      -webkit-box-orient: vertical;
       word-break: break-all;
-      color: rgb(143, 143, 143);
+      color: rgb(0, 0, 0);
       margin-top: 10px;
 
       .content {
@@ -214,8 +210,13 @@ export default {
         font-weight: 400;
         font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
         width: 850px;
-        height: 60px;
+        height: 20px;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 1;
         overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
       }
     }
   }