V1.2.0需求 4个页面新增及功能 待处理编辑器锚点定位、编辑器发布的文章UI优化、中英文翻译

mining-pool/src/views/announcementDetails/index.vue

@@ -0,0 +1,131 @@
+<template>
+    <div class="announcementDetails">
+      <section class="container">
+        <section class="leftNav">
+          <div class="leftNav-item " :class="{active:DetailsParams.id == item.id}"  v-for="item in problems" :key="item.id" @click="handleClick(item.id)">
+            {{ item.title }}
+          </div>
+        </section>
+        <section class="rightContent">
+          <div v-if="problemLoading" class="loading-container">
+            <span class="loading-text">正在加载内容...</span>
+          </div>
+          <div v-else-if="info && info.trim()" class="dynamic-content" v-html="info"></div>
+          <div v-else class="no-content">
+            <p>暂无内容</p>
+          </div>
+        </section>
+      </section>
+    </div>
+  </template>
+  
+  <script>
+  import IndexJs from "./index.js";
+  export default {
+    mixins: [IndexJs],
+  }
+  </script>
+  
+  <style lang="scss" scoped>
+  .announcementDetails{
+    width: 100vw;
+    height: 100vh;
+    background: #F8F9FA;
+    padding-top: 60px;
+  }
+  .container{
+    display: flex;
+    justify-content: center;
+    width: 70vw;
+    height: 80vh;
+    margin: 0 auto;
+    background: #fff;
+    border-radius: 10px;
+    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
+    padding: 20px;
+  
+    padding-top: 50px;
+    .leftNav{
+      width: 200px;
+      height: 100%;
+      overflow-y: auto;
+    }
+    .rightContent{
+      flex: 1;
+      height: 100%;
+      margin-left: 50px;
+      overflow-y: auto;
+      padding-right: 20px;
+      .dynamic-content {
+        width: 100%;
+        margin: 0 auto;
+       
+        // 富文本样式
+        :deep(table) {
+          border-collapse: collapse;
+          width: 100%;
+          margin: 16px 0;
+        }
+        :deep(th), :deep(td) {
+          border: 1px solid #d1d5db;
+          padding: 8px 12px;
+          text-align: left;
+        }
+        :deep(th) {
+          background: #f3f4f6;
+          font-weight: bold;
+        }
+        :deep(strong), :deep(b) {
+          font-weight: bold !important;
+          color: inherit !important;
+          font-style: normal !important;
+        }
+        :deep(em), :deep(i) {
+          font-style: italic !important;
+          color: inherit !important;
+        }
+        :deep(a) {
+          color: #007bff !important;
+          text-decoration: none !important;
+          &:hover {
+            text-decoration: underline !important;
+          }
+        }
+      }
+      .loading-container {
+        text-align: center;
+        padding: 40px 0;
+        .loading-text {
+          font-size: 16px;
+          color: #666;
+          vertical-align: middle;
+        }
+      }
+      .no-content {
+        text-align: center;
+        padding: 40px 0;
+        p {
+          font-size: 16px;
+          color: #999;
+          margin: 0;
+        }
+      }
+    }
+  }
+  
+  .leftNav-item{
+    cursor: pointer;
+    padding: 10px;
+    margin-bottom: 10px;
+    text-decoration: underline;
+    text-align: right;
+    &:hover{
+      background:rgba(0,0,0,0.02);
+      color: #651FFF;
+    }
+  }
+  
+  .active{
+    color: #651FFF;
+  }
+  </style>