优化编辑器和前端内容页显示

src/styles/index.scss

@@ -1,5 +1,6 @@
 /* Main styles */
 :root{
+    --primary-color:#409eff;
     --tw-bg-opacity:#272727;
     --header-bg-color:#fff;
     --footer-color:#999;

src/views/components/articleDetail.vue

@@ -1,10 +1,66 @@
 <template>
   <Header />
   <div class="detail">
-    <div class="backimage"></div>
+    <!-- <div class="backimage"></div> -->
     <div class="content">
       <div class="content-left">
         <div class="detail-header">
+          <div class="top-container">
+            <div class="inner-container">
+              <div class="left-container">
+                <div class="avatar-container">
+                  <span
+                    style="
+                      width: 50px;
+                      height: 50px;
+                      line-height: 50px;
+                      font-size: 18px;
+                    "
+                    class="ant-avatar ant-avatar-circle"
+                  >
+                    <span
+                      class="ant-avatar-string"
+                      style="
+                        line-height: 50px;
+                        transform: scale(1) translateX(-50%);
+                      "
+                    >
+                      {{ article.author ? article.author.charAt(0) : '' }}
+                    </span>
+                  </span>
+                </div>
+                <div class="info-container">
+                  <div class="username-container">
+                    <p class="username">{{ article.author }}</p>
+                  </div>
+                  <div class="description">
+                    <span>{{ article.publish_date }}</span>
+                    <span class="description-reading-item">
+                      阅读：{{ article.views }}
+                    </span>
+                    <span class="description-reading-item">
+                      点赞：{{ article.likes }}
+                    </span>
+                  </div>
+                </div>
+              </div>
+              <div class="follow-container">
+                <button type="button" class="ant-btn">
+                  <span>点 赞</span>
+                </button>
+              </div>
+            </div>
+          </div>
+
+          <el-divider></el-divider>
+          <div class="title">
+            <h1>{{ article.title }}</h1>
+          </div>
+
+          <div class="desc-container">
+            <span class="desc-item">{{ article.desc }}</span>
+          </div>
+          <!-- 
           <h1>{{ article.title }}</h1>
           <el-divider></el-divider>
           <div class="detail-meta">
@@ -33,6 +89,7 @@
               {{ article.views }}
             </div>
           </div>
+          -->
         </div>
         <div class="detail-content" ref="contentRef">
           <div v-html="article.content" class="content-html"></div>
@@ -306,6 +363,135 @@ onMounted(async () => {
           font-size: 14px;
           padding-bottom: 20px;
         }
+
+        .top-container {
+          display: flex;
+          -moz-box-pack: justify;
+          justify-content: space-between;
+          -moz-box-align: center;
+          align-items: center;
+
+          .inner-container {
+            width: 100%;
+            display: flex;
+            -moz-box-pack: justify;
+            justify-content: space-between;
+            -moz-box-align: center;
+            align-items: center;
+            cursor: pointer;
+
+            .left-container {
+              display: flex;
+
+              .avatar-container {
+                margin-right: 15px;
+
+                .ant-avatar {
+                  box-sizing: border-box;
+                  margin: 0;
+                  padding: 0;
+                  color: rgba(0, 0, 0, 0.8);
+                  font-size: 14px;
+                  font-variant: tabular-nums;
+                  line-height: 1.5715;
+                  list-style: none;
+                  font-feature-settings: 'tnum';
+                  position: relative;
+                  display: inline-block;
+                  overflow: hidden;
+                  color: #fff;
+                  white-space: nowrap;
+                  text-align: center;
+                  vertical-align: middle;
+                  background: #ccc;
+                  width: 32px;
+                  height: 32px;
+                  line-height: 32px;
+                  border-radius: 50%;
+
+                  .ant-avatar-string {
+                    position: absolute;
+                    left: 50%;
+                    transform-origin: 0 center;
+                  }
+                }
+              }
+              .info-container {
+                .username-container {
+                  display: flex;
+                  -moz-box-align: center;
+                  align-items: center;
+                  padding-top: 3px;
+
+                  .username {
+                    margin: 0px 5px 0px 0px;
+                    font-size: 16px;
+                    font-weight: 600;
+                  }
+                }
+                .description {
+                  margin: 0px;
+                  padding-top: 3px;
+                  font-size: 13px;
+
+                  .description-reading-item {
+                    margin-left: 10px;
+                  }
+                }
+              }
+            }
+
+            .follow-container {
+              .ant-btn {
+                line-height: 1.5715;
+                position: relative;
+                display: inline-block;
+                font-weight: 400;
+                white-space: nowrap;
+                text-align: center;
+                background-image: none;
+                border: 1px solid transparent;
+                border-top-color: transparent;
+                border-right-color: transparent;
+                border-bottom-color: transparent;
+                border-left-color: transparent;
+                box-shadow: 0 2px 0 rgba(0, 0, 0, 0.015);
+                cursor: pointer;
+                transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+                user-select: none;
+                touch-action: manipulation;
+                height: 32px;
+                padding: 4px 15px;
+                font-size: 14px;
+                border-radius: 4px;
+                color: rgba(0, 0, 0, 0.8);
+                background: #fff;
+                border-color: #d9d9d9;
+
+                &:hover {
+                  background: #fff;
+                  color: #536f8a;
+                  border-color: #536f8a;
+                }
+              }
+            }
+          }
+        }
+
+        .title{
+          margin: 40px 0;
+        }
+
+        .desc-container {
+          margin: 20px 0;
+          padding: 20px 0 20px 30px;
+          border-left: rgb(239, 112, 96) 4px solid;
+          background-color: #fff9f9;
+
+          .desc-item {
+            padding: 10px 0;
+          }
+        }
       }
 
       .detail-content {
@@ -380,7 +566,7 @@ onMounted(async () => {
           code {
             background-color: transparent;
             padding: 0;
-            padding-left: 10px;
+            // padding-left: 10px;
             color: #cdd6f4;
             font-size: 13px;
             line-height: 1.7;

src/views/newsCenter/technologyCenter/index.vue

@@ -137,7 +137,7 @@ const loading = ref(false)
 const loadingMore = ref(false)
 const error = ref('')
 const currentPage = ref(1)
-const pageSize = ref(6) // 每次加载6条
+const pageSize = ref(8) // 每次加载8条
 const total = ref(0)
 
 // 计算是否还有更多数据