样式优化

Author: fxss5201

src/mixin/listArticleMixin.js

@@ -77,7 +77,8 @@ export default {
       if (result.isok) {
         this.$message({
           message: '删除成功',
-          type: 'success'
+          type: 'success',
+          offset: 80
         })
         this.apiArticleListMethod()
         this.$store.dispatch('aside/apigetAsideMethod')

src/plugins/axios.js

@@ -59,9 +59,10 @@ _axios.interceptors.request.use(
     // Do something with request error
     pageLoading && pageLoading.close()
     pageAxiosList.clear()
-    Vue.prototype.$message.error({
+    Vue.prototype.$message({
       message: '网络出错，请重试',
-      showClose: true
+      type: 'error',
+      offset: 80
     })
     pageLoading = null
     return Promise.reject(error)
@@ -90,14 +91,16 @@ _axios.interceptors.response.use(
       if (response.data.msg) {
         let errorMessage =
           response.data.msg && response.data.msg.length ? response.data.msg : '网络出错，请重试'
-        Vue.prototype.$message.error({
+        Vue.prototype.$message({
           message: errorMessage,
-          showClose: true
+          type: 'error',
+          offset: 80
         })
       } else {
-        Vue.prototype.$message.error({
+        Vue.prototype.$message({
           message: response.data.error,
-          showClose: true
+          type: 'error',
+          offset: 80
         })
       }
     }
@@ -114,9 +117,10 @@ _axios.interceptors.response.use(
       console.log('alreadySent')
     } else {
       pageLoading && pageLoading.close()
-      Vue.prototype.$message.error({
+      Vue.prototype.$message({
         message: '网络出错，请重试',
-        showClose: true
+        type: 'error',
+        offset: 80
       })
       pageAxiosList.clear()
     }

src/views/AdminColumn.vue

@@ -121,7 +121,8 @@ export default {
       if (result.isok) {
         this.$message({
           message: '删除成功',
-          type: 'success'
+          type: 'success',
+          offset: 80
         })
         this.apiColumnListMethod()
       }

src/views/AdminColumnDetail.vue

@@ -175,7 +175,8 @@ export default {
       if (result.isok) {
         this.$message({
           message: type === 'delete' ? '移出成功' : '添加成功',
-          type: 'success'
+          type: 'success',
+          offset: 80
         })
         this.$nextTick(() => {
           this.apiColumnArticleListMethod()

src/views/AdminUser.vue

@@ -124,10 +124,18 @@ export default {
       const isLt2M = file.size / 1024 / 1024 < 2
 
       if (!isJPG && !isPNG) {
-        this.$message.error('上传头像图片只能是 JPG/PNG 格式!')
+        this.$message({
+          message: '上传头像图片只能是 JPG/PNG 格式!',
+          type: 'error',
+          offset: 80
+        })
       }
       if (!isLt2M) {
-        this.$message.error('上传头像图片大小不能超过 2MB!')
+        this.$message({
+          message: '上传头像图片大小不能超过 2MB!',
+          type: 'error',
+          offset: 80
+        })
       }
       return (isJPG || isPNG) && isLt2M
     },
@@ -164,7 +172,8 @@ export default {
       if (result.isok) {
         this.$message({
           message: '保存成功',
-          type: 'success'
+          type: 'success',
+          offset: 80
         })
         this.$nextTick(() => {
           this.$store.dispatch('tokenGetUserInfo')

src/views/Detail.vue

@@ -148,16 +148,28 @@ export default {
     this.$nextTick(() => {
       this.clipboard = new Clipboard('.copy-btn')
       this.clipboard.on('success', (e) => {
-        this.$message.success('复制成功')
+        this.$message({
+          message: '复制成功',
+          type: 'success',
+          offset: 80
+        })
       })
       this.clipboard.on('error', (e) => {
-        this.$message.error('复制成功失败')
+        this.$message({
+          message: '复制失败',
+          type: 'error',
+          offset: 80
+        })
       })
     })
-    window.addEventListener('scroll', this.pageScroll, false)
+    if (document.documentElement.clientWidth > 1590) {
+      window.addEventListener('scroll', this.pageScroll, false)
+    }
   },
   beforeDestroy () {
-    window.removeEventListener('scroll', this.pageScroll, false)
+    if (document.documentElement.clientWidth > 1590) {
+      window.removeEventListener('scroll', this.pageScroll, false)
+    }
   },
   methods: {
     async apiArticleDetailMethod () {
@@ -190,7 +202,8 @@ export default {
       if (result.isok) {
         this.$message({
           message: 'Add star success',
-          type: 'success'
+          type: 'success',
+          offset: 80
         })
         this.info.articleStart = result.data.articleStart
       }
@@ -240,8 +253,17 @@ export default {
     top: 80px;
     left: 50%;
     z-index: 100;
+    padding-top: 26px;
     margin-left: 575px;
-    max-width: 200px;
+    max-width: 220px;
+    max-height: calc(100vh - 168px);
+    overflow-y: auto;
+    &::before {
+      position: fixed;
+      top: 80px;
+      width: 220px;
+      background-color: #fff;
+    }
   }
 }
 .article-content {