diff --git a/components/archive/list.vue b/components/archive/list.vue
index 6a28c8f..8095dfa 100644
--- a/components/archive/list.vue
+++ b/components/archive/list.vue
@@ -12,7 +12,7 @@
                     d="M12 22c3.859 0 7-3.141 7-7s-3.141-7-7-7c-3.86 0-7 3.141-7 7s3.14 7 7 7zm0-12c2.757 0 5 2.243 5 5s-2.243 5-5 5-5-2.243-5-5 2.243-5 5-5zm-1-8H7v5.518a8.957 8.957 0 0 1 4-1.459V2zm6 0h-4v4.059a8.957 8.957 0 0 1 4 1.459V2z"></path><path
                     d="m10.019 15.811-.468 2.726L12 17.25l2.449 1.287-.468-2.726 1.982-1.932-2.738-.398L12 11l-1.225 2.481-2.738.398z"></path></svg>
                 </span>
-              <span style="font-size: 20px" v-html="article.articleTitle"> </span>
+              <span class="articleTitle" v-html="article.articleTitle"> </span>
               <el-tag size="mini" v-for="tag in article.tags" :key="tag.idTag" style="margin-right: 10px"> {{ tag.tagTitle }}</el-tag>
 
               <div class="text-muted article-summary-md" v-html="article.articlePreviewContent"></div>
@@ -81,5 +81,9 @@ export default {
 </script>
 
 <style scoped>
+.articleTitle {
+  font-size: 20px;
+  font-weight: 600;
+}
 
 </style>
diff --git a/components/common/comment/main.vue b/components/common/comment/main.vue
index 1a48e9d..8226be6 100644
--- a/components/common/comment/main.vue
+++ b/components/common/comment/main.vue
@@ -266,7 +266,7 @@ export default {
         tab: '\t',
         cdn: apiConfig.VDITOR,
         cache: {
-          enable: this.postId ? false : true,
+          enable: !this.postId,
           id: this.postId ? this.postId : '',
         },
         after() {
diff --git a/components/common/product/list.vue b/components/common/product/list.vue
index 09f9be1..b955abb 100644
--- a/components/common/product/list.vue
+++ b/components/common/product/list.vue
@@ -1,18 +1,30 @@
 <template>
   <div class="wrapper">
     <el-row class="row-cards row-deck" :gutter="20">
-      <el-col :span="8" v-for="product in products.list" :key="product.idProduct" style="margin-right: 20px;">
+      <el-col :xs="24" :sm="24" :md="10" :lg="10" :xl="10" v-for="product in products.list" :key="product.idProduct" style="margin-bottom: 10px;">
         <el-card :body-style="{ padding: '20px' }">
           <el-col :span="24">
             <el-image :src="product.productImgUrl"
                       style="border-radius: 10px;background: #f5f7fa;border: #f5f7fa solid 1px;" fit="cover"></el-image>
           </el-col>
-          <el-col style="padding-top: 20px;font-size: 16px;line-height: 22px;font-weight: 500;margin-bottom: 4px;">
-            <span v-html="product.productTitle"></span>
+          <el-col :span="24">
+            <el-tag
+              style="margin-right: 0.5rem;"
+              v-for="tag in product.tags?.split(',') || []"
+              :key="tag"
+              size="small"
+              effect="plain">
+              # {{ tag }}
+            </el-tag>
           </el-col>
-          <el-col style="padding-top: 30px;text-align: right;">
-<!--            <el-button type="text" class="button">立即购买</el-button>-->
-            <el-button type="text" class="button" @click="handleClick(product.idProduct)">查看详情</el-button>
+          <el-col :span="24" style="font-size: 16px;line-height: 22px;font-weight: 500;margin: 4px 0;text-align: center;">
+            <span style="font-weight: bolder;" v-html="product.productTitle"></span>
+          </el-col>
+          <el-col span="24">
+            <small v-html="product.productDescription"></small>
+          </el-col>
+          <el-col :span="24" style="text-align: center;">
+            <el-button type="text" class="button" @click="handleClick(product.idProduct)">了解更多</el-button>
           </el-col>
         </el-card>
       </el-col>
diff --git a/config/api.config.js b/config/api.config.js
index ce3ebc6..2ba3259 100644
--- a/config/api.config.js
+++ b/config/api.config.js
@@ -8,8 +8,8 @@ const apisMap = {
     PROXY: '/proxy',
     SOCKET: 'http://localhost:3000/ws',
     GRAVATAR: '/proxy/static.rymcu.com/avatar',
-    VDITOR: 'https://static.rymcu.com/vditor@3.8.14/',
-    VDITOR_CSS: 'https://static.rymcu.com/vditor@3.8.14/dist/css/content-theme'
+    VDITOR: 'https://static.rymcu.com/vditor@3.9.8/',
+    VDITOR_CSS: 'https://static.rymcu.com/vditor@3.9.8/dist/css/content-theme'
   },
   test: {
     FE: 'https://rymcu.com',
@@ -18,8 +18,8 @@ const apisMap = {
     PROXY: 'https://static.rymcu.com/proxy',
     SOCKET: 'https://rymcu.com/wss',
     GRAVATAR: 'https://static.rymcu.com/avatar',
-    VDITOR: 'https://static.rymcu.com/vditor@3.8.14/',
-    VDITOR_CSS: 'https://static.rymcu.com/vditor@3.8.14/dist/css/content-theme'
+    VDITOR: 'https://static.rymcu.com/vditor@3.9.8/',
+    VDITOR_CSS: 'https://static.rymcu.com/vditor@3.9.8/dist/css/content-theme'
   },
   production: {
     FE: 'https://rymcu.com',
@@ -28,8 +28,8 @@ const apisMap = {
     PROXY: 'https://static.rymcu.com/proxy',
     SOCKET: 'https://rymcu.com/wss',
     GRAVATAR: 'https://static.rymcu.com/avatar',
-    VDITOR: 'https://static.rymcu.com/vditor@3.8.14/',
-    VDITOR_CSS: 'https://static.rymcu.com/vditor@3.8.14/dist/css/content-theme'
+    VDITOR: 'https://static.rymcu.com/vditor@3.9.8/',
+    VDITOR_CSS: 'https://static.rymcu.com/vditor@3.9.8/dist/css/content-theme'
   }
 }
 
diff --git a/nuxt.config.js b/nuxt.config.js
index f21b3ef..6d0b7c0 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -46,7 +46,7 @@ export default {
   ** Global CSS
   */
   css: [
-    'element-ui/lib/theme-chalk/index.css',
+    'element-ui/lib/theme-chalk/index.css'
   ],
   /*
   ** Plugins to load before mounting the App
@@ -72,7 +72,7 @@ export default {
     '@nuxtjs/axios',
     '@nuxtjs/proxy',
     '@nuxtjs/auth-next',
-    '@nuxtjs/device',
+    '@nuxtjs/device'
   ],
   auth: {
     redirect: {
@@ -128,7 +128,7 @@ export default {
   ** See https://nuxtjs.org/api/configuration-build/
   */
   build: {
-    transpile: [/^element-ui/,'defu'],
+    transpile: [/^element-ui/, 'defu'],
     optimization: {
       splitChunks: {
         minSize: 10000,
diff --git a/package.json b/package.json
index 6fac827..c010e33 100644
--- a/package.json
+++ b/package.json
@@ -27,7 +27,7 @@
     "raw-loader": "^4.0.2",
     "save-svg-as-png": "^1.4.17",
     "simple-icons": "^6.23.0",
-    "vditor": "^3.8.18",
+    "vditor": "^3.9.8",
     "vue-cropper": "^0.6.2",
     "vue-sse": "^2.5.2",
     "vuejs-avataaars": "^4.0.1"
diff --git a/pages/admin/topics.vue b/pages/admin/topics.vue
index c9a6b70..b639fee 100644
--- a/pages/admin/topics.vue
+++ b/pages/admin/topics.vue
@@ -1,5 +1,8 @@
 <template>
-  <el-row :gutter="8" style="margin-top: 20px;">
+  <div>
+
+
+  <el-row  style="margin-top: 20px;">
     <el-col style="margin-bottom: 1rem;">
       <el-breadcrumb separator-class="el-icon-arrow-right">
         <el-breadcrumb-item :to="{ path: '/admin' }">首页</el-breadcrumb-item>
@@ -9,66 +12,80 @@
     <el-col style="margin: .5rem;">
       <el-button size="small" @click="createTopic" plain>创建专题</el-button>
     </el-col>
-    <el-col :span="8" style="margin-bottom: .5rem;" v-for="topic in topics.list" :key="topic.idTopic">
-      <el-card>
-        <div class="card-body d-flex flex-column">
+
+
+
+  </el-row>  <el-row :gutter="20">
+  <el-col :span="8" style="margin-bottom: .5rem;" v-for="topic in topics.list" :key="topic.idTopic">
+    <el-card shadow="never">
+      <div class="card-body d-flex flex-column">
+        <el-row :gutter="20">
           <el-col :span="4" style="text-align: right;">
-            <img :src="topic.topicIconPath" :alt="topic.topicTitle" class="topic-brand-img">
+            <img style="margin-right: 10px;" :src="topic.topicIconPath" :alt="topic.topicTitle"
+                 class="topic-brand-img">
           </el-col>
-          <el-col :span="20">
-            <el-col>
-              <el-col>
-                <el-link rel="nofollow" @click="onRouter('admin-topic-detail',topic.topicUri)" :underline="false"><h4>{{
-                    topic.topicTitle
-                  }}</h4>
-                </el-link>
-              </el-col>
-              <el-col>
-                <div class="text-muted article-summary-md">{{ topic.topicDescription }}</div>
-              </el-col>
-            </el-col>
+          <el-col :span="20" >
+            <el-link rel="nofollow" @click="onRouter('admin-topic-detail',topic.topicUri)" :underline="false">
+              <span style="font-size: 20px;font-weight: bold"> {{ topic.topicTitle }}</span>
+            </el-link>
+            <div class="text-muted article-summary-md text-content">{{ topic.topicDescription }}</div>
           </el-col>
-        </div>
-      </el-card>
-    </el-col>
-  </el-row>
+        </el-row>
+
+
+      </div>
+    </el-card>
+
+  </el-col>
+</el-row> </div>
 </template>
 
 <script>
-  import {mapState} from 'vuex';
+import {mapState} from 'vuex';
 
-  export default {
-    name: "topics",
-    middleware: 'auth',
-    fetch() {
-      let {store, params, error} = this.$nuxt.context
-      return Promise.all([
-        store
-          .dispatch('topic/fetchList', params)
-          .catch(err => error({statusCode: 404}))
-      ])
-    },
-    computed: {
-      ...mapState({
-        topics: state => state.topic.list.data
+export default {
+  name: "topics",
+  middleware: 'auth',
+  fetch() {
+    let {store, params, error} = this.$nuxt.context
+    return Promise.all([
+      store
+        .dispatch('topic/fetchList', params)
+        .catch(err => error({statusCode: 404}))
+    ])
+  },
+  computed: {
+    ...mapState({
+      topics: state => state.topic.list.data
+    })
+  },
+  methods: {
+    onRouter(item, data) {
+      this.$router.push({
+        path: '/admin/topic/' + data
       })
     },
-    methods: {
-      onRouter(item, data) {
-        this.$router.push({
-          path: '/admin/topic/' + data
-        })
-      },
-      createTopic() {
-        let _ts = this;
-        _ts.$router.push({
-          path: '/admin/topic/post'
-        })
-      }
+    createTopic() {
+      let _ts = this;
+      _ts.$router.push({
+        path: '/admin/topic/post'
+      })
     }
   }
+}
 </script>
 
 <style scoped>
+.topic-brand-img {
+  margin-top: 40%;
+}
 
+.text-content {
+  height: 70px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-line-clamp: 3;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+}
 </style>
diff --git a/pages/article/post/_article_id.vue b/pages/article/post/_article_id.vue
index eb568ad..00cc853 100644
--- a/pages/article/post/_article_id.vue
+++ b/pages/article/post/_article_id.vue
@@ -197,7 +197,7 @@
               // Vue.Vditor.highlightRender({style: 'github'}, element, this.contentEditor);
             },
             theme: {
-              cdn: apiConfig.VDITOR_CSS
+              path: apiConfig.VDITOR_CSS
             }
           },
           upload: {
diff --git a/pages/product/_product_id.vue b/pages/product/_product_id.vue
index 4384187..6d42afa 100644
--- a/pages/product/_product_id.vue
+++ b/pages/product/_product_id.vue
@@ -8,6 +8,16 @@
               {{ product.productTitle }}
             </h1>
           </div>
+          <div style="margin: 1rem 0;">
+            <el-tag
+              style="margin-right: 0.5rem;"
+              v-for="tag in product.tags?.split(',') || []"
+              :key="tag"
+              size="small"
+              effect="plain">
+              # {{ tag }}
+            </el-tag>
+          </div>
           <div class="pt-7 pipe-content__reset vditor-reset" id="articleContent" v-html="product.productContent"
                style="overflow: hidden;"></div>
         </div>
diff --git a/pages/user/settings/avatar.vue b/pages/user/settings/avatar.vue
index 0dbbf58..1b70746 100644
--- a/pages/user/settings/avatar.vue
+++ b/pages/user/settings/avatar.vue
@@ -1,35 +1,60 @@
 <template>
   <el-row>
-    <el-col>
+    <el-col :spn="12">
       <h1>我的头像</h1>
     </el-col>
     <el-col>
       <el-form :model="user" ref="user" label-width="100px">
         <el-form-item>
           <el-row>
-            <el-col :span="24">
-              <vue-cropper
-                ref="cropper"
-                :aspect-ratio="1 / 1"
-                :src="avatarUrl"
-                :checkCrossOrigin="false"
-                :checkOrientation="false"
-                :imgStyle="{width: '360px'}"
-                :autoCropArea="1"
-                :autoCrop="autoCrop"
-                preview=".preview"
-              />
+            <el-col :span="12">
+              <client-only>
+                <div class="cropperBox">
+                  <!--                  <vue-cropper-->
+                  <!--                    :autoCrop="autoCrop"-->
+                  <!--                    :img="avatarUrl"-->
+                  <!--                    ref="cropper"-->
+                  <!--                    :fixed="true"-->
+                  <!--                    @realTime="realTime"-->
+                  <!--                    @imgMoving="cropImage"-->
+                  <!--                    @cropMoving="cropImage"-->
+                  <!--                  />-->
+                  <vue-cropper
+                    :autoCrop="autoCrop"
+                    :img="avatarUrl"
+                    ref="cropper"
+                    :fixed="true"
+                    @realTime="realTime"
+                  />
+                </div>
+              </client-only>
             </el-col>
             <el-col :span="24" style="margin-top: 2rem;">
               <el-col :span="8" style="max-width: 20rem;max-height: 20rem;">
-                <div class="preview preview-large"/>
-              </el-col>
-              <el-col :span="6" style="height: 20rem;">
-                <div class="preview preview-medium"/>
-              </el-col>
-              <el-col :span="4" style="height: 20rem;">
-                <div class="preview preview-small"/>
+                <div class="preview preview-large" :style="{height:cropImg.h+'px',width:cropImg.w+'px'}"
+                     style="overflow:hidden;margin: 0 auto">
+                  <img :src="cropImg.url" :style="cropImg.img">
+                </div>
               </el-col>
+<!--              <el-col :span="6" style="height: 20rem;">-->
+<!--                <div class="preview preview-medium" style="overflow:hidden;">-->
+<!--                  <div :style="{height:cropImg.h+'px',width:cropImg.w+'px'}"-->
+<!--                       style="overflow:hidden;margin: 0 auto">-->
+<!--                    <img :src="cropImg.url" :style="cropImg.img">-->
+<!--                  </div>-->
+<!--                </div>-->
+<!--              </el-col>-->
+<!--              <el-col :span="4" style="height: 20rem;">-->
+<!--                <div class="preview preview-small" style="overflow:hidden;">-->
+<!--                  <div :style="{height:(cropImg.h*0.2)+'px',width:cropImg.w+'px'}"-->
+<!--                       style="overflow:hidden;margin: 0 auto">-->
+<!--                    <img :src="cropImg.url" :style="cropImg.img">-->
+<!--                  </div>-->
+<!--                </div>-->
+<!--                &lt;!&ndash;                <div class="preview preview-small">&ndash;&gt;-->
+<!--                &lt;!&ndash;                  <img :src="cropImg.url"/>&ndash;&gt;-->
+<!--                &lt;!&ndash;                </div>&ndash;&gt;-->
+<!--              </el-col>-->
             </el-col>
             <el-col :span="24" style="margin-top: 2rem;">
               <el-upload
@@ -62,7 +87,7 @@
               </el-upload>
               <el-button style="margin-top: 1rem;" type="primary" round plain @click="genAvatar">随机</el-button>
               <el-button type="primary" round plain @click.prevent="reset">重置</el-button>
-              <el-button type="primary" round plain @click.prevent="cropImage">提交</el-button>
+              <el-button type="primary" round plain @click.prevent="updateUser">提交</el-button>
             </el-col>
           </el-row>
         </el-form-item>
@@ -75,15 +100,13 @@
 import {mapState} from 'vuex';
 import Avataaars from 'vuejs-avataaars';
 import saveSvg from 'save-svg-as-png';
-import VueCropper from 'vue-cropper';
 
 const {generateRandomAvatar} = require('~/plugins/avataaars/generator/generateAvatar');
 export default {
   name: "avatar",
   middleware: 'auth',
   components: {
-    Avataaars,
-    VueCropper
+    Avataaars
   },
   computed: {
     ...mapState({
@@ -97,14 +120,19 @@ export default {
     return {
       user: {},
       loading: false,
+      oldAvatarUrl: '',
       avatarUrl: '',
       avatar: {},
       cropImg: '',
       data: null,
-      autoCrop: true
+      autoCrop: true,
     }
   },
   methods: {
+    realTime(data) {
+      console.log(data.img)
+      this.cropImg = data;
+    },
     genAvatar() {
       let _ts = this;
       let user = _ts.user
@@ -116,7 +144,6 @@ export default {
             user.avatarType = 1;
             user.avatarUrl = uri;
             _ts.$set(_ts, 'avatarUrl', uri);
-            _ts.$refs.cropper.replace(uri);
           } else {
             _ts.$message.error('头像上传失败 !');
           }
@@ -159,45 +186,47 @@ export default {
           } else {
             _ts.$set(_ts, 'user', res);
             _ts.$set(_ts, 'avatarUrl', res.avatarUrl);
-            _ts.$refs.cropper.replace(res.avatarUrl);
+            _ts.$set(_ts, 'oldAvatarUrl', res.avatarUrl);
             // _ts.webImageToBase64(res.user.avatarUrl);
           }
         }
       })
     },
     reset() {
-      this.$refs.cropper.reset();
+      this.avatarUrl = JSON.parse(JSON.stringify(this.oldAvatarUrl))
+      // this.$refs.cropper.clearCrop();
     },
     // get image data for post processing, e.g. upload or setting image src
     cropImage() {
       let _ts = this;
-      try {
-        this.cropImg = this.$refs.cropper.getCroppedCanvas().toDataURL();
-      } catch (e) {
-        _ts.$message.error('图片获取失败 !');
-        return;
-      }
-      let user = _ts.user;
-      user.avatarType = 1;
-      user.avatarUrl = _ts.cropImg;
-      _ts.updateUser(user);
+      this.$refs.cropper.getCropData(data => {
+        let user = _ts.user;
+        user.avatarUrl = data;
+        user.avatarType = '1';
+        _ts.$set(_ts, 'user', user);
+        _ts.$set(_ts, 'avatarUrl', data);
+      })
     },
-    updateUser(user) {
+    updateUser() {
       let _ts = this;
+      let user = _ts.user;
       _ts.$refs['user'].validate((valid) => {
         if (valid) {
-          _ts.$axios.$patch('/api/user-info/update', user).then(function (res) {
-            if (res) {
-              if (res.message) {
-                _ts.$message.error(res.message);
-              } else {
-                _ts.$set(_ts, 'user', res);
-                _ts.$set(_ts, 'avatarUrl', res.avatarUrl);
-                _ts.$store.commit('setUserInfo', res);
-                _ts.$message.success('更新成功 !');
+          this.$refs.cropper.getCropData(data => {
+            user.avatarUrl = data
+            _ts.$axios.$patch('/api/user-info/update', user).then(function (res) {
+              if (res) {
+                if (res.message) {
+                  _ts.$message.error(res.message);
+                } else {
+                  _ts.$set(_ts, 'user', res);
+                  _ts.$set(_ts, 'avatarUrl', res.avatarUrl);
+                  _ts.$store.commit('setUserInfo', res);
+                  _ts.$message.success('更新成功 !');
+                }
               }
-            }
-          })
+            })
+          });
         } else {
           _ts.$message.error('数据异常 !');
         }
@@ -209,7 +238,6 @@ export default {
       reader.readAsDataURL(file);
       reader.onload = function () {
         _ts.$set(_ts, 'avatarUrl', this.result);
-        _ts.$refs.cropper.replace(this.result);
       }
     },
     compress(img, width, height, ratio) {
@@ -312,6 +340,12 @@ export default {
   background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC);
 }
 
+.preview-large img {
+  object-fit: contain;
+  width: 16rem;
+  height: 16rem;
+}
+
 .preview-large {
   width: 16rem;
   height: 16rem;
@@ -324,6 +358,13 @@ export default {
   overflow: hidden;
 }
 
+.preview-medium img {
+  object-fit: contain;
+  width: 8rem;
+  height: 8rem;
+}
+
+
 .preview-medium {
   width: 8rem;
   height: 8rem;
@@ -334,8 +375,10 @@ export default {
   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
   background-color: #ffffff;
   overflow: hidden;
+
 }
 
+
 .preview-small {
   width: 2rem;
   height: 2rem;
@@ -347,4 +390,17 @@ export default {
   background-color: #ffffff;
   overflow: hidden;
 }
+
+.preview-small img {
+  object-fit: contain;
+  width: 2rem;
+  height: 2rem;
+}
+
+.cropperBox {
+  width: 100%;
+  height: 256px;
+  margin-bottom: 20px;
+  border: 1px solid #F2F6FC;
+}
 </style>