diff --git a/back/src/assets/font/convergence-typeface.ttf b/back/src/assets/font/convergence-typeface.ttf
new file mode 100644
index 00000000..e651bf53
Binary files /dev/null and b/back/src/assets/font/convergence-typeface.ttf differ
diff --git a/back/src/assets/font/header-typeface.ttf b/back/src/assets/font/header-typeface.ttf
new file mode 100644
index 00000000..61ed7a82
Binary files /dev/null and b/back/src/assets/font/header-typeface.ttf differ
diff --git a/back/src/assets/font/num-typeface.otf b/back/src/assets/font/num-typeface.otf
new file mode 100644
index 00000000..b4608d06
Binary files /dev/null and b/back/src/assets/font/num-typeface.otf differ
diff --git a/back/src/assets/font/text-typeface.otf b/back/src/assets/font/text-typeface.otf
new file mode 100644
index 00000000..091f56d1
Binary files /dev/null and b/back/src/assets/font/text-typeface.otf differ
diff --git a/back/src/assets/img/activitiMyWorkDynamics/header-bak.png b/back/src/assets/img/activitiMyWorkDynamics/header-bak.png
new file mode 100644
index 00000000..fe65d63f
Binary files /dev/null and b/back/src/assets/img/activitiMyWorkDynamics/header-bak.png differ
diff --git a/back/src/assets/img/activitiMyWorkDynamics/no-img.png b/back/src/assets/img/activitiMyWorkDynamics/no-img.png
new file mode 100644
index 00000000..bd051790
Binary files /dev/null and b/back/src/assets/img/activitiMyWorkDynamics/no-img.png differ
diff --git a/back/src/router/index.js b/back/src/router/index.js
index 6c6a8b21..de422fdd 100644
--- a/back/src/router/index.js
+++ b/back/src/router/index.js
@@ -5,6 +5,13 @@ import { isURL } from '@/utils/validate'
 import store from '@/store'
 import Cookies from 'js-cookie'
 
+
+// 解决ElementUI导航栏中的vue-router在3.0版本以上重复点菜单报错问题
+const originalPush = Router.prototype.push
+Router.prototype.push = function push(location) {
+  return originalPush.call(this, location).catch(err => err)
+}
+
 Vue.use(Router)
 
 // 页面路由(独立页面)
diff --git a/back/src/store/index.js b/back/src/store/index.js
index c63854c2..f7821bab 100644
--- a/back/src/store/index.js
+++ b/back/src/store/index.js
@@ -12,7 +12,7 @@ export default new Vuex.Store({
     // 导航条, 布局风格, default(白色) / colorful(鲜艳)
     navbarLayoutType: 'colorful',
     // 侧边栏, 布局皮肤, default(白色) / dark(黑色)
-    sidebarLayoutSkin: 'dark',
+    sidebarLayoutSkin: 'default',
     // 侧边栏, 折叠状态
     sidebarFold: false,
     // 侧边栏, 菜单
diff --git a/back/src/views/main-navbar.vue b/back/src/views/main-navbar.vue
index 0667ace4..adb8b4fe 100644
--- a/back/src/views/main-navbar.vue
+++ b/back/src/views/main-navbar.vue
@@ -1,81 +1,124 @@
 <template>
-  <nav class="aui-navbar" :class="`aui-navbar--${$store.state.navbarLayoutType}`">
+  <nav
+    class="aui-navbar"
+    :class="`aui-navbar--${$store.state.navbarLayoutType}`"
+  >
     <div class="aui-navbar__header">
       <h1 class="aui-navbar__brand" @click="$router.push({ name: 'home' })">
-        <a class="aui-navbar__brand-lg" href="javascript:;">{{ $t('brand.lg') }}</a>
-        <a class="aui-navbar__brand-mini" href="javascript:;">{{ $t('brand.mini') }}</a>
+        <a class="aui-navbar__brand-mini" href="javascript:;">{{
+          $t("brand.mini")
+        }}</a>
+        <a class="aui-navbar__brand-lg" href="javascript:;">{{
+          $t("brand.lg")
+        }}</a>
+        <span>——</span>
+        <span class="back-title-text">后台管理系统</span>
       </h1>
     </div>
     <div class="aui-navbar__body">
       <el-menu class="aui-navbar__menu mr-auto" mode="horizontal">
-        <el-menu-item index="1" @click="$store.state.sidebarFold = !$store.state.sidebarFold">
-          <svg class="icon-svg aui-navbar__icon-menu aui-navbar__icon-menu--switch" aria-hidden="true"><use xlink:href="#icon-outdent"></use></svg>
+        <!--    <el-menu-item
+          index="1"
+          @click="$store.state.sidebarFold = !$store.state.sidebarFold"
+        >
+          <svg
+            class="icon-svg aui-navbar__icon-menu aui-navbar__icon-menu--switch"
+            aria-hidden="true"
+          >
+            <use xlink:href="#icon-outdent"></use>
+          </svg>
         </el-menu-item>
         <el-menu-item index="2" @click="refresh()">
-          <svg class="icon-svg aui-navbar__icon-menu aui-navbar__icon-menu--refresh" aria-hidden="true"><use xlink:href="#icon-sync"></use></svg>
-        </el-menu-item>
+          <svg
+            class="
+              icon-svg
+              aui-navbar__icon-menu aui-navbar__icon-menu--refresh
+            "
+            aria-hidden="true"
+          >
+            <use xlink:href="#icon-sync"></use>
+          </svg>
+        </el-menu-item> -->
       </el-menu>
       <el-menu class="aui-navbar__menu" mode="horizontal">
         <el-menu-item index="1">
           <el-dropdown placement="bottom" :show-timeout="0">
-            <el-button size="mini">{{ $t('_lang') }}</el-button>
+            <el-button size="mini">{{ $t("_lang") }}</el-button>
             <el-dropdown-menu slot="dropdown">
-              <el-dropdown-item v-for="(val, key) in i18nMessages" :key="key" @click.native="$i18n.locale = key">{{ val._lang }}</el-dropdown-item>
+              <el-dropdown-item
+                v-for="(val, key) in i18nMessages"
+                :key="key"
+                @click.native="$i18n.locale = key"
+                >{{ val._lang }}</el-dropdown-item
+              >
             </el-dropdown-menu>
           </el-dropdown>
         </el-menu-item>
         <el-menu-item index="2">
           <a href="//115.28.200.119:9091" target="_blank">
-            <svg class="icon-svg aui-navbar__icon-menu" aria-hidden="true"><use xlink:href="#icon-earth"></use></svg>
+            <svg class="icon-svg aui-navbar__icon-menu" aria-hidden="true">
+              <use xlink:href="#icon-earth"></use>
+            </svg>
           </a>
         </el-menu-item>
         <el-menu-item index="3" v-if="$hasPermission('sys:notice:all')">
           <el-badge :is-dot="messageTip">
-            <a href="#"  @click="myNoticeRouter()"><i class="el-icon-bell"></i></a>
+            <a href="#" @click="myNoticeRouter()"
+              ><i class="el-icon-bell"></i
+            ></a>
           </el-badge>
         </el-menu-item>
         <el-menu-item index="4" @click="fullscreenHandle()">
-          <svg class="icon-svg aui-navbar__icon-menu" aria-hidden="true"><use xlink:href="#icon-fullscreen"></use></svg>
+          <svg class="icon-svg aui-navbar__icon-menu" aria-hidden="true">
+            <use xlink:href="#icon-fullscreen"></use>
+          </svg>
         </el-menu-item>
         <el-menu-item index="5" class="aui-navbar__avatar">
           <el-dropdown placement="bottom" :show-timeout="0">
             <span class="el-dropdown-link">
-              <img src="~@/assets/img/avatar.png">
+              <img src="~@/assets/img/avatar.png" />
               <span>{{ $store.state.user.name }}</span>
               <i class="el-icon-arrow-down"></i>
             </span>
             <el-dropdown-menu slot="dropdown">
-              <el-dropdown-item @click.native="updatePasswordHandle()">{{ $t('updatePassword.title') }}</el-dropdown-item>
-              <el-dropdown-item @click.native="logoutHandle()">{{ $t('logout') }}</el-dropdown-item>
+              <el-dropdown-item @click.native="updatePasswordHandle()">{{
+                $t("updatePassword.title")
+              }}</el-dropdown-item>
+              <el-dropdown-item @click.native="logoutHandle()">{{
+                $t("logout")
+              }}</el-dropdown-item>
             </el-dropdown-menu>
           </el-dropdown>
         </el-menu-item>
       </el-menu>
     </div>
     <!-- 弹窗, 修改密码 -->
-    <update-password v-if="updatePasswordVisible" ref="updatePassword"></update-password>
+    <update-password
+      v-if="updatePasswordVisible"
+      ref="updatePassword"
+    ></update-password>
   </nav>
 </template>
 <script>
-import { messages } from '@/i18n'
-import screenfull from 'screenfull'
-import UpdatePassword from './main-navbar-update-password'
-import { clearLoginInfo } from '@/utils'
+import { messages } from "@/i18n";
+import screenfull from "screenfull";
+import UpdatePassword from "./main-navbar-update-password";
+import { clearLoginInfo } from "@/utils";
 // import Cookies from 'js-cookie'
 // var socket = null
 export default {
-  inject: ['refresh'],
-  data () {
+  inject: ["refresh"],
+  data() {
     return {
       i18nMessages: messages,
       updatePasswordVisible: false,
-      messageTip: false
-    }
+      messageTip: false,
+    };
   },
   components: {
-    UpdatePassword
+    UpdatePassword,
   },
-  created () {
+  created() {
     // var vue = this
     // socket = new WebSocket(`${window.SITE_CONFIG['socketURL']}?token=${Cookies.get('token')}`)
     // socket.onopen = function () {}
@@ -101,56 +144,96 @@ export default {
     // }
 
     // 未读通知数
-    this.getUnReadCount()
+    this.getUnReadCount();
   },
   methods: {
-    myNoticeRouter () {
-      this.$router.replace('notice-notice-user')
+    myNoticeRouter() {
+      this.$router.replace("notice-notice-user");
     },
-    getUnReadCount () {
-      this.$http.get('/sys/notice/mynotice/unread').then(({ data: res }) => {
-        if (res.code !== 0) {
-          return this.$message.error(res.msg)
-        }
-        if (res.data > 0) {
-          this.messageTip = true
-        }
-      }).catch(() => {})
+    getUnReadCount() {
+      this.$http
+        .get("/sys/notice/mynotice/unread")
+        .then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg);
+          }
+          if (res.data > 0) {
+            this.messageTip = true;
+          }
+        })
+        .catch(() => {});
     },
     // 全屏
-    fullscreenHandle () {
+    fullscreenHandle() {
       if (!screenfull.enabled) {
         return this.$message({
-          message: this.$t('fullscreen.prompt'),
-          type: 'warning',
-          duration: 500
-        })
+          message: this.$t("fullscreen.prompt"),
+          type: "warning",
+          duration: 500,
+        });
       }
-      screenfull.toggle()
+      screenfull.toggle();
     },
     // 修改密码
-    updatePasswordHandle () {
-      this.updatePasswordVisible = true
+    updatePasswordHandle() {
+      this.updatePasswordVisible = true;
       this.$nextTick(() => {
-        this.$refs.updatePassword.init()
-      })
+        this.$refs.updatePassword.init();
+      });
     },
     // 退出
-    logoutHandle () {
-      this.$confirm(this.$t('prompt.info', { handle: this.$t('logout') }), this.$t('prompt.title'), {
-        confirmButtonText: this.$t('confirm'),
-        cancelButtonText: this.$t('cancel'),
-        type: 'warning'
-      }).then(() => {
-        this.$http.post('/logout').then(({ data: res }) => {
-          if (res.code !== 0) {
-            return this.$message.error(res.msg)
-          }
-          clearLoginInfo()
-          this.$router.push({ name: 'login' })
-        }).catch(() => {})
-      }).catch(() => {})
+    logoutHandle() {
+      this.$confirm(
+        this.$t("prompt.info", { handle: this.$t("logout") }),
+        this.$t("prompt.title"),
+        {
+          confirmButtonText: this.$t("confirm"),
+          cancelButtonText: this.$t("cancel"),
+          type: "warning",
+        }
+      )
+        .then(() => {
+          this.$http
+            .post("/logout")
+            .then(({ data: res }) => {
+              if (res.code !== 0) {
+                return this.$message.error(res.msg);
+              }
+              clearLoginInfo();
+              this.$router.push({ name: "login" });
+            })
+            .catch(() => {});
+        })
+        .catch(() => {});
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+@font-face {
+  font-family: "header-typeface";
+  src: url("~@/assets/font/header-typeface.ttf");
+}
+.aui-navbar {
+  width: 100%;
+  height: 50px;
+  background-image: url("~@/assets/img/activitiMyWorkDynamics/header-bak.png");
+  .aui-navbar__header {
+    width: 25%;
+    .aui-navbar__brand {
+      margin-left: 20px;
+      a {
+        font-size: 22px;
+        color: #ffffff;
+      }
+      .aui-navbar__brand-mini {
+        display: block;
+      }
+      .back-title-text {
+        margin-top: 5px;
+        font-family: header-typeface;
+      }
     }
   }
 }
-</script>
+</style>
diff --git a/back/src/views/main-sidebar-sub-menu.vue b/back/src/views/main-sidebar-sub-menu.vue
index e4b604ec..6630a7e1 100644
--- a/back/src/views/main-sidebar-sub-menu.vue
+++ b/back/src/views/main-sidebar-sub-menu.vue
@@ -1,89 +1,135 @@
 <template>
-  <el-submenu v-if="menu.children && menu.children.length >= 1" :index="menu.id" :popper-append-to-body="false">
+  <el-submenu
+    v-if="menu.children && menu.children.length >= 1"
+    :index="menu.id"
+    :popper-append-to-body="false"
+  >
     <template slot="title">
-      <svg class="icon-svg aui-sidebar__menu-icon" aria-hidden="true"><use :xlink:href="`#${menu.icon}`"></use></svg>
-      <span>{{ menu.name }}</span>
+      <svg class="icon-svg aui-sidebar__menu-icon" aria-hidden="true">
+        <use :xlink:href="`#${menu.icon}`"></use>
+      </svg>
+      <span class="first-level-text">{{ menu.name }}</span>
     </template>
-    <sub-menu v-for="item in menu.children" :key="item.id" :menu="item"></sub-menu>
+    <sub-menu
+      v-for="item in menu.children"
+      :key="item.id"
+      :menu="item"
+    ></sub-menu>
   </el-submenu>
   <el-menu-item v-else :index="menu.id" ref="li">
     <a
-      :href="isBrowserTabOpen(menu.id) ? getBrowserTabOpenURL(menu.id) : 'javascript:;'"
+      :href="
+        isBrowserTabOpen(menu.id)
+          ? getBrowserTabOpenURL(menu.id)
+          : 'javascript:;'
+      "
       :target="isBrowserTabOpen(menu.id) ? '_blank' : '_self'"
-      @click="isBrowserTabOpen(menu.id) ? 'return false;' : gotoRouteHandle(menu.id)">
-      <svg class="icon-svg aui-sidebar__menu-icon" aria-hidden="true"><use :xlink:href="`#${menu.icon}`"></use></svg>
+      @click="
+        isBrowserTabOpen(menu.id) ? 'return false;' : gotoRouteHandle(menu.id)
+      "
+    >
+      <svg class="icon-svg aui-sidebar__menu-icon" aria-hidden="true">
+        <use :xlink:href="`#${menu.icon}`"></use>
+      </svg>
       <span>{{ menu.name }}</span>
     </a>
   </el-menu-item>
 </template>
 
 <script>
-import SubMenu from './main-sidebar-sub-menu'
+import SubMenu from "./main-sidebar-sub-menu";
 export default {
-  name: 'sub-menu',
-  data () {
+  name: "sub-menu",
+  data() {
     return {
-      browserTabOpenList: [
-        '1156748733921165314',
-      ]
-    }
+      browserTabOpenList: ["1156748733921165314"],
+    };
   },
   props: {
     menu: {
       type: Object,
-      required: true
-    }
+      required: true,
+    },
   },
   components: {
-    SubMenu
+    SubMenu,
   },
-  created () {
+  created() {
     this.$nextTick(() => {
       if (this.$refs.li) {
-        let $li = this.$refs.li.$el
-        let $a = $li.firstElementChild
+        let $li = this.$refs.li.$el;
+        let $a = $li.firstElementChild;
         if ($a) {
-          let pl = '0', pr = '0'
+          let pl = "0",
+            pr = "0";
           if ($li.currentStyle) {
-            pl = $li.currentStyle['paddingLeft']
-            pr = $li.currentStyle['paddingRight']
+            pl = $li.currentStyle["paddingLeft"];
+            pr = $li.currentStyle["paddingRight"];
           } else {
-            pl = window.document.defaultView.getComputedStyle($li, null)['paddingLeft']
-            pr = window.document.defaultView.getComputedStyle($li, null)['paddingRight']
+            pl = window.document.defaultView.getComputedStyle($li, null)[
+              "paddingLeft"
+            ];
+            pr = window.document.defaultView.getComputedStyle($li, null)[
+              "paddingRight"
+            ];
           }
-          $li.setAttribute('style', `padding-left: 0; padding-right: 0;`)
-          $a.setAttribute('style', `padding-left: ${pl}; padding-right: ${pr};`)
+          $li.setAttribute("style", `padding-left: 0; padding-right: 0;`);
+          $a.setAttribute(
+            "style",
+            `padding-left: ${pl}; padding-right: ${pr};`
+          );
         }
       }
-    })
+    });
   },
   methods: {
     // 是否通过浏览器Tab打开菜单
-    isBrowserTabOpen (menuId) {
-      return this.browserTabOpenList.filter(item => item === menuId).length >= 1;
+    isBrowserTabOpen(menuId) {
+      return (
+        this.browserTabOpenList.filter((item) => item === menuId).length >= 1
+      );
     },
     // 获取浏览器Tab打开菜单URL
-    getBrowserTabOpenURL (menuId) {
-      var route = window.SITE_CONFIG['dynamicMenuRoutes'].filter(item => item.meta.menuId === menuId)[0]
-      return route ? route.meta.iframeURL : '';
+    getBrowserTabOpenURL(menuId) {
+      var route = window.SITE_CONFIG["dynamicMenuRoutes"].filter(
+        (item) => item.meta.menuId === menuId
+      )[0];
+      return route ? route.meta.iframeURL : "";
     },
     // 通过menuId与动态(菜单)路由进行匹配跳转至指定路由
-    gotoRouteHandle (menuId) {
-      var route = window.SITE_CONFIG['dynamicMenuRoutes'].filter(item => item.meta.menuId === menuId)[0]
+    gotoRouteHandle(menuId) {
+      var route = window.SITE_CONFIG["dynamicMenuRoutes"].filter(
+        (item) => item.meta.menuId === menuId
+      )[0];
       if (route) {
-        this.$router.push({ name: route.name })
+        this.$router.push({ name: route.name });
       }
-    }
-  }
-}
+    },
+  },
+};
 </script>
 
 <style lang="scss">
 .aui-sidebar__menu {
-  .el-menu-item > a {
-    display: block;
-    color: inherit;
-    text-decoration: none;
+  .first-level-text {
+    font-size: 16px;
+    color: #212121;
+    font-weight: bold;
+  }
+  .el-menu-item {
+    a {
+      display: block;
+      color: inherit;
+      text-decoration: none;
+    }
+    span {
+      font-size: 16px;
+    }
+  }
+  .is-active {
+    color: #ffffff;
+    background-color: #0058e1;
+    border: none;
   }
 }
 </style>
diff --git a/back/src/views/main-theme-tools.vue b/back/src/views/main-theme-tools.vue
index 867e9871..e83d008c 100644
--- a/back/src/views/main-theme-tools.vue
+++ b/back/src/views/main-theme-tools.vue
@@ -1,21 +1,34 @@
 <template>
   <div class="aui-theme-tools" :class="{ 'aui-theme-tools--open': isOpen }">
     <div class="aui-theme-tools__toggle" @click="isOpen = !isOpen">
-      <svg class="icon-svg" aria-hidden="true"><use xlink:href="#icon-setting"></use></svg>
+      <svg class="icon-svg" aria-hidden="true">
+        <use xlink:href="#icon-setting"></use>
+      </svg>
     </div>
     <div class="aui-theme-tools__content">
       <div class="aui-theme-tools__item">
         <h3>Navbar</h3>
-        <el-checkbox v-model="$store.state.navbarLayoutType" true-label="colorful">colorful 鲜艳</el-checkbox>
+        <el-checkbox
+          v-model="$store.state.navbarLayoutType"
+          true-label="colorful"
+          >colorful 鲜艳</el-checkbox
+        >
       </div>
       <div class="aui-theme-tools__item">
         <h3>Sidebar</h3>
-        <el-checkbox v-model="$store.state.sidebarLayoutSkin" true-label="dark">dark 黑色</el-checkbox>
+        <el-checkbox v-model="$store.state.sidebarLayoutSkin" true-label="dark"
+          >dark 黑色</el-checkbox
+        >
       </div>
       <div class="aui-theme-tools__item">
         <h3>Theme</h3>
         <el-radio-group v-model="themeColor" @change="themeColorChangeHandle">
-          <el-radio v-for="item in themeList" :key="item.name" :label="item.name">{{ `${item.name} ${item.desc}` }}</el-radio>
+          <el-radio
+            v-for="item in themeList"
+            :key="item.name"
+            :label="item.name"
+            >{{ `${item.name} ${item.desc}` }}</el-radio
+          >
         </el-radio-group>
       </div>
     </div>
@@ -24,38 +37,47 @@
 
 <script>
 export default {
-  data () {
+  data() {
     return {
       isOpen: false,
-      themeList: require('@/element-ui/config.js'),
-      themeColor: 'turquoise'
-    }
+      themeList: require("@/element-ui/config.js"),
+      themeColor: "turquoise",
+    };
   },
   methods: {
-    themeColorChangeHandle (val) {
+    themeColorChangeHandle(val) {
       var styleList = [
         {
-          id: 'J_elementTheme',
-          url: `${process.env.BASE_URL}element-theme/${val}/index.css?t=${new Date().getTime()}`
+          id: "J_elementTheme",
+          url: `${
+            process.env.BASE_URL
+          }element-theme/${val}/index.css?t=${new Date().getTime()}`,
         },
         {
-          id: 'J_auiTheme',
-          url: `${process.env.BASE_URL}element-theme/${val}/aui.css?t=${new Date().getTime()}`
-        }
-      ]
+          id: "J_auiTheme",
+          url: `${
+            process.env.BASE_URL
+          }element-theme/${val}/aui.css?t=${new Date().getTime()}`,
+        },
+      ];
       for (var i = 0; i < styleList.length; i++) {
-        var el = document.querySelector(`#${styleList[i].id}`)
+        var el = document.querySelector(`#${styleList[i].id}`);
         if (el) {
-          el.href = styleList[i].url
-          continue
+          el.href = styleList[i].url;
+          continue;
         }
-        el = document.createElement('link')
-        el.id = styleList[i].id
-        el.href = styleList[i].url
-        el.rel = 'stylesheet'
-        document.querySelector('head').appendChild(el)
+        el = document.createElement("link");
+        el.id = styleList[i].id;
+        el.href = styleList[i].url;
+        el.rel = "stylesheet";
+        document.querySelector("head").appendChild(el);
       }
-    }
-  }
-}
+    },
+  },
+};
 </script>
+<style scoped lang="scss">
+.aui-theme-tools__toggle {
+  background-color: #0058e1;
+}
+</style>
diff --git a/back/src/views/modules/activiti/my-work-dynamics.vue b/back/src/views/modules/activiti/my-work-dynamics.vue
index 269de89d..40d92ca1 100644
--- a/back/src/views/modules/activiti/my-work-dynamics.vue
+++ b/back/src/views/modules/activiti/my-work-dynamics.vue
@@ -8,46 +8,72 @@
           clearable
         />
       </el-col>
-      <el-button type="primary" @click="flashTableData">查询</el-button>
-      <el-button type="primary" @click="restTableData">重置</el-button>
+      <el-button type="primary" class="button-new" @click="flashTableData"
+        >查询</el-button
+      >
+      <el-button type="primary" class="button-new" @click="restTableData"
+        >重置</el-button
+      >
       <div style="float: right">
         <el-button
-        size="mini"
-        type="text"
-        icon="el-icon-delete"
-        @click="deleteData"
-        >批量删除</el-button>
+          size="mini"
+          type="text"
+          icon="el-icon-delete"
+          class="button-text-new"
+          @click="deleteData"
+          >批量删除</el-button
+        >
         <el-button
           type="primary"
+          class="button-new"
           @click="addDataDialogVisabled = true"
-          >动态发布</el-button>
+          >动态发布</el-button
+        >
       </div>
-
     </el-row>
 
     <el-row style="margin-top: 20px">
-      <el-table :data="tableData"  border @selection-change="tableChange" >
-        <el-table-column width="60" type="selection" align="center"></el-table-column> <!--  全选 -->
-        <el-table-column label="序号" width="60" type="index" align="center"></el-table-column>
+      <el-table :data="tableData" border @selection-change="tableChange">
+        <el-table-column
+          width="60"
+          type="selection"
+          align="center"
+        ></el-table-column>
+        <!--  全选 -->
+        <el-table-column
+          label="序号"
+          width="60"
+          type="index"
+          align="center"
+        ></el-table-column>
         <el-table-column label="动态标题" prop="title">
           <template slot-scope="scope">
             <div class="boxtitle">
-              {{scope.row.title}}
+              {{ scope.row.title }}
             </div>
           </template>
         </el-table-column>
         <el-table-column label="内容" prop="content">
           <template slot-scope="scope">
             <div class="boxcontent">
-              {{scope.row.content}}
+              {{ scope.row.content }}
             </div>
           </template>
         </el-table-column>
         <el-table-column label="图片地址" prop="imageUrl"></el-table-column>
-        <el-table-column label="创建时间" prop="createDate"  sortable></el-table-column>
+        <el-table-column
+          label="创建时间"
+          prop="createDate"
+          sortable
+        ></el-table-column>
         <el-table-column width="200" label="操作" align="center">
           <template slot-scope="scope">
-            <el-button size="mini" @click="openEditDialog(scope.row)" type="text" icon="el-icon-setting"
+            <el-button
+              size="mini"
+              @click="openEditDialog(scope.row)"
+              type="text"
+              icon="el-icon-setting"
+              class="button-text-new"
               >编辑</el-button
             >
             <!-- <el-button size="mini" type="success" icon="el-icon-plus"
@@ -57,27 +83,37 @@
               size="mini"
               type="text"
               icon="el-icon-delete"
+              class="button-text-new"
               @click="deleteData(scope.row)"
               >删除</el-button
             >
+            <el-button
+              size="mini"
+              type="text"
+              icon="el-icon-delete"
+              class="button-text-new"
+              @click="openPreviewData(scope.row)"
+              >预览</el-button
+            >
           </template>
         </el-table-column>
       </el-table>
-    <!-- 分页 -->
-    </el-row><el-pagination
-        style="margin-top: 20px; text-align: center"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
-        :current-page="queryData.pageIndex"
-        :page-sizes="[10, 20, 50, 100]"
-        :page-size="queryData.pageSize"
-        layout="total, sizes, prev, pager, next, jumper"
-        :total="queryData.total"
-      >
-      </el-pagination>
+      <!-- 分页 --> </el-row
+    ><el-pagination
+      style="margin-top: 20px; text-align: center"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+      :current-page="queryData.pageIndex"
+      :page-sizes="[10, 20, 50, 100]"
+      :page-size="queryData.pageSize"
+      layout="total, sizes, prev, pager, next, jumper"
+      :total="queryData.total"
+    >
+    </el-pagination>
 
     <!-- 新增项目 -->
-    <el-dialog :close-on-click-modal="false"
+    <el-dialog
+      :close-on-click-modal="false"
       title="新增项目"
       :visible.sync="addDataDialogVisabled"
       @close="addDataDialogClose"
@@ -98,6 +134,18 @@
             show-word-limit
           ></el-input>
         </el-form-item>
+        <el-form-item prop="title" label="摘要">
+          <el-input
+            v-model="addDataFrom.note1"
+            autocomplete="off"
+            placeholder="摘要"
+            maxlength="1000"
+            show-word-limit
+            type="textarea"
+            @input="noteExceed"
+            :rows="3"
+          ></el-input>
+        </el-form-item>
         <el-form-item prop="content" label="内容">
           <el-input
             v-model="addDataFrom.content"
@@ -111,7 +159,7 @@
           ></el-input>
         </el-form-item>
         <el-form-item>
-       <!-- <el-upload
+          <!-- <el-upload
           class="avatar-uploader"
           :action="fileUploadUrl"
           :show-file-list="false"
@@ -123,32 +171,41 @@
 
         </el-upload> -->
 
-        <el-upload
-          ref="addUpload"
-          class="upload-demo"
-          :action="fileUploadUrl"
-          :on-success="handleAvatarSuccess"
-          :before-upload="beforeAvatarUpload"
-          :on-remove="addUploadRemoveFile"
-          :on-exceed="handleExceed"
-          :on-preview="showView"
-          :limit="1"
-          list-type="picture">
-          <el-button size="small" type="primary">点击上传</el-button>
-          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
-        </el-upload>
+          <el-upload
+            ref="addUpload"
+            class="upload-demo"
+            :action="fileUploadUrl"
+            :on-success="handleAvatarSuccess"
+            :before-upload="beforeAvatarUpload"
+            :on-remove="addUploadRemoveFile"
+            :on-exceed="handleExceed"
+            :on-preview="showView"
+            :limit="1"
+            list-type="picture"
+          >
+            <el-button size="small" type="primary" class="button-new"
+              >点击上传</el-button
+            >
+            <div slot="tip" class="el-upload__tip">
+              只能上传jpg/png文件，且不超过500kb
+            </div>
+          </el-upload>
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button @click="addDataDialogVisabled = false">取 消</el-button>
-        <el-button type="primary" @click="addDataDialogConfirm"
+        <el-button
+          type="primary"
+          @click="addDataDialogConfirm"
+          class="button-new"
           >确 定</el-button
         >
       </div>
     </el-dialog>
 
-<!-- 编辑项目 -->
- <el-dialog :close-on-click-modal="false"
+    <!-- 编辑项目 -->
+    <el-dialog
+      :close-on-click-modal="false"
       title="编辑项目"
       :visible.sync="editDataDialogVisabled"
       @close="editDataDialogClose"
@@ -169,6 +226,18 @@
             show-word-limit
           ></el-input>
         </el-form-item>
+        <el-form-item prop="title" label="摘要">
+          <el-input
+            v-model="eidtDataForm.note1"
+            autocomplete="off"
+            placeholder="摘要"
+            maxlength="1000"
+            show-word-limit
+            type="textarea"
+            @input="noteExceed"
+            :rows="3"
+          ></el-input>
+        </el-form-item>
         <el-form-item prop="content" label="内容">
           <el-input
             v-model="eidtDataForm.content"
@@ -182,7 +251,7 @@
           ></el-input>
         </el-form-item>
         <el-form-item>
-       <!-- <el-upload
+          <!-- <el-upload
           class="avatar-uploader"
           :action="fileUploadUrl"
           :show-file-list="false"
@@ -191,30 +260,81 @@
           <img v-if="eidtDataForm.imageUrl" :src="eidtDataForm.imageUrl" class="avatar">
           <i v-else class="el-icon-plus avatar-uploader-icon"></i>
         </el-upload> -->
-        <el-upload
-          ref="editUpload"
-          class="upload-demo"
-          :action="fileUploadUrl"
-          :on-success="eidtHandleAvatarSuccess"
-          :before-upload="editBeforeAvatarUpload"
-          :limit="1"
-          :file-list="editDialogShowFileList"
-          :on-remove="editUploadRemoveFile"
-          :on-exceed="handleExceed"
-          :on-preview="showView"
-          list-type="picture">
-          <el-button size="small" type="primary">点击上传</el-button>
-          <div slot="tip" class="el-upload__tip">只能上传图片文件</div>
-        </el-upload>
-      </el-form-item>
+          <el-upload
+            ref="editUpload"
+            class="upload-demo"
+            :action="fileUploadUrl"
+            :on-success="eidtHandleAvatarSuccess"
+            :before-upload="editBeforeAvatarUpload"
+            :limit="1"
+            :file-list="editDialogShowFileList"
+            :on-remove="editUploadRemoveFile"
+            :on-exceed="handleExceed"
+            :on-preview="showView"
+            list-type="picture"
+          >
+            <el-button size="small" type="primary" class="button-new"
+              >点击上传</el-button
+            >
+            <div slot="tip" class="el-upload__tip">只能上传图片文件</div>
+          </el-upload>
+        </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button @click="editDataDialogVisabled = false">取 消</el-button>
-        <el-button type="primary" @click="eidtDataDialogConfirm">确 定</el-button>
+        <el-button
+          type="primary"
+          @click="eidtDataDialogConfirm"
+          class="button-new"
+          >确 定</el-button
+        >
       </div>
     </el-dialog>
+    <!-- 预览项目 -->
+    <el-dialog
+      :close-on-click-modal="false"
+      title="预览项目"
+      :visible.sync="perviewDataDialogVisabled"
+      @close="perviewDataDialogClose"
+      width="1300px"
+      top="10vh"
+    >
+      <div class="preview-dialog">
+        <div class="preview-title">
+          <div class="title-text">
+            <span>{{ previewData.title }}</span>
+          </div>
+          <div class="title-time">
+            <span>发布时间：</span>
+            <span>{{ previewData.updateDate }}</span>
+          </div>
+        </div>
+        <div class="preview-note">
+          <span>摘要：</span>
+          <span>{{ previewData.note1 }}</span>
+        </div>
+        <div class="preview-image">
+          <img
+            width="100%"
+            v-if="previewData.imageUrl != ''"
+            :src="previewData.imageUrl"
+            alt=""
+          />
+          <img
+            width="100%"
+            v-else
+            src="~@/assets/img/activitiMyWorkDynamics/no-img.png"
+            alt=""
+          />
+        </div>
+        <div class="preview-content">
+          <span>{{ previewData.content }}</span>
+        </div>
+      </div>
+    </el-dialog>
+
     <el-dialog :visible.sync="dialogVisibleImg">
-      <img width="100%" :src="previewImg" alt="">
+      <img width="100%" :src="previewImg" alt="" />
     </el-dialog>
   </el-card>
 </template>
@@ -222,15 +342,15 @@
 <script>
 // @ is an alias to /src
 export default {
-  data () {
+  data() {
     return {
-      fileUploadUrl: window.SITE_CONFIG.apiURL + '/upload',
+      fileUploadUrl: window.SITE_CONFIG.apiURL + "/upload",
       // 表格筛选条件对象
       queryData: {
-        keyworld: '',
+        keyworld: "",
         pageIndex: 1,
         pageSize: 10,
-        total: 0
+        total: 0,
       },
       // 表格数据数组对象
       tableData: [],
@@ -241,310 +361,429 @@ export default {
       // imageUrl: '',
       // 新增数据表单对象
       addDataFrom: {
-        title: '',
-        content: '',
-        imageUrl: '',
-        delFlag: 0
+        title: "",
+        note1: "",
+        content: "",
+        imageUrl: "",
+        delFlag: 0,
       },
       // 新增数据表单验证对象
       addDataFromRules: {
-        title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
-        content: [
-          { required: true, message: '请输入内容', trigger: 'blur' }
-        ],
+        title: [{ required: true, message: "请输入标题", trigger: "blur" }],
+        note1: [{ required: true, message: "请输入摘要", trigger: "blur" }],
+        content: [{ required: true, message: "请输入内容", trigger: "blur" }],
         imageUrl: [
-          { required: true, message: '请输入图片地址', trigger: 'blur' }
-        ]
+          { required: true, message: "请输入图片地址", trigger: "blur" },
+        ],
       },
       editDataDialogVisabled: false,
       eidtDataForm: {
-        title: '',
-        content: '',
-        imageUrl: ''
+        title: "",
+        note1: "",
+        content: "",
+        imageUrl: "",
       },
       eidtDataFromRules: {
-        title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
-        content: [
-          { required: true, message: '请输入内容', trigger: 'blur' }
-        ],
+        title: [{ required: true, message: "请输入标题", trigger: "blur" }],
+        note1: [{ required: true, message: "请输入摘要", trigger: "blur" }],
+        content: [{ required: true, message: "请输入内容", trigger: "blur" }],
         imageUrl: [
-          { required: true, message: '请输入图片地址', trigger: 'blur' }
-        ]
+          { required: true, message: "请输入图片地址", trigger: "blur" },
+        ],
       },
-      previewImg: '', // 预览图片
+      perviewDataDialogVisabled: false,
+      previewData: {
+        title: "",
+        note1: "",
+        content: "",
+        imageUrl: "",
+        delFlag: 0,
+      },
+      previewImg: "", // 预览图片
       deleteDataArr: [],
-      dialogVisibleImg: false
-    }
+      dialogVisibleImg: false,
+    };
   },
-  created () {
-    this.getTableData()
+  created() {
+    this.getTableData();
   },
   methods: {
-    tableChange (val) {
-      this.deleteDataArr = val.map(item => item.id)
-      console.log(this.deleteDataArr)
+    tableChange(val) {
+      this.deleteDataArr = val.map((item) => item.id);
+      console.log(this.deleteDataArr);
     },
-    restTableData () {
-      this.queryData.keyworld = ''
-      this.getTableData()
+    restTableData() {
+      this.queryData.keyworld = "";
+      this.getTableData();
     },
-    showView (file) {
-      this.previewImg = file.url
-      this.dialogVisibleImg = true
+    showView(file) {
+      this.previewImg = file.url;
+      this.dialogVisibleImg = true;
     },
-    getTableData () {
-      this.$http.get('/workdynamics/page', {
-        params: {
-          limit: this.queryData.pageSize,
-          page: this.queryData.pageIndex,
-          name: this.queryData.keyworld
-        }
-      })
+    getTableData() {
+      this.$http
+        .get("/workdynamics/page", {
+          params: {
+            limit: this.queryData.pageSize,
+            page: this.queryData.pageIndex,
+            name: this.queryData.keyworld,
+          },
+        })
         .then(({ data: res }) => {
           if (res.code !== 0) {
-            return this.$message.error(res.msg)
+            return this.$message.error(res.msg);
           }
-          this.tableData = res.data.list
-          this.queryData.total = res.data.total
+          this.tableData = res.data.list;
+          this.queryData.total = res.data.total;
         })
-        .catch(() => {})
+        .catch(() => {});
     },
-    flashTableData () {
-      this.queryData.pageIndex = 1
-      this.getTableData()
+    flashTableData() {
+      this.queryData.pageIndex = 1;
+      this.getTableData();
     },
     // 分页大小更改
-    handleSizeChange (value) {
-      this.queryData.pageSize = value
-      this.getTableData()
+    handleSizeChange(value) {
+      this.queryData.pageSize = value;
+      this.getTableData();
     },
     // 当前索引更改
-    handleCurrentChange (val) {
-      this.queryData.pageIndex = val
-      this.getTableData()
+    handleCurrentChange(val) {
+      this.queryData.pageIndex = val;
+      this.getTableData();
     },
     // 新增数据窗口关闭事件
-    addDataDialogClose () {
-      this.$refs.addDataFormRef.resetFields()
-      this.addDataFrom.imageUrl = ''
-      this.$refs.addUpload.clearFiles()
+    addDataDialogClose() {
+      this.$refs.addDataFormRef.resetFields();
+      this.addDataFrom.imageUrl = "";
+      this.$refs.addUpload.clearFiles();
       // this.addDataFrom.imagesFiles = []
       // this.$refs.addDataFromUploadRef.clearFiles()
     },
-    editDataDialogClose () {
-      this.$refs.editDataFormRef.resetFields()
-      this.eidtDataForm.imageUrl = ''
-      this.$refs.editUpload.clearFiles()
+    editDataDialogClose() {
+      this.$refs.editDataFormRef.resetFields();
+      this.eidtDataForm.imageUrl = "";
+      this.$refs.editUpload.clearFiles();
     },
     // 追加数据
-    addDataDialogConfirm () {
+    addDataDialogConfirm() {
       this.$refs.addDataFormRef.validate(async (valid) => {
         if (valid) {
+          //console.log("新增新增", this.addDataFrom);
           this.$http
-            .post('/workdynamics/insert', this.addDataFrom)
+            .post("/workdynamics/insert", this.addDataFrom)
             .then(({ data: res }) => {
               if (res.code !== 0) {
-                return this.$message.error(res.msg)
+                return this.$message.error(res.msg);
               }
-              this.$message.success('新增成功')
-              this.addDataDialogVisabled = false
-              this.getTableData()
+              this.$message.success("新增成功");
+              this.addDataDialogVisabled = false;
+              this.getTableData();
             })
-            .catch(() => {})
+            .catch(() => {});
         } else {
-          this.$message.success('表单数据填写不完整')
+          this.$message.success("表单数据填写不完整");
         }
-      })
+      });
     },
     // 限定图片
-    handleExceed () {
-      this.$message({ type: 'error', message: '最多支持一张图片上传' })
+    handleExceed() {
+      this.$message({ type: "error", message: "最多支持一张图片上传" });
     },
     // 限制标题
-    titleExceed (str) {
+    titleExceed(str) {
       if (str.length >= 200) {
-        this.$message.error('标题文字不能超过200字')
+        this.$message.error("标题文字不能超过200字");
       }
     },
     // 限制内容
-    contentExceed (str) {
+    contentExceed(str) {
       if (str.length >= 2000) {
-        this.$message.error('内容文字不能超过2000字')
+        this.$message.error("内容文字不能超过2000字");
+      }
+    },
+    //限制摘要
+    noteExceed(str) {
+      if (str.length >= 1000) {
+        this.$message.error("摘要文字不能超过1000字");
       }
     },
     // 删除数据
-    deleteData (row) {
-      console.log(row)
-      this.$confirm('此操作将删除当前数据, 是否继续?', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
+    deleteData(row) {
+      console.log(row);
+      this.$confirm("此操作将删除当前数据, 是否继续?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
       })
         .then(async () => {
-          let ids = []
+          let ids = [];
           if (this.deleteDataArr.length > 1) {
-            ids = this.deleteDataArr
+            ids = this.deleteDataArr;
           } else {
-            ids = [row.id]
+            ids = [row.id];
           }
-          console.log(ids)
-          this.$http.delete('/workdynamics/delete', {
-            data: ids
-          })
+          console.log(ids);
+          this.$http
+            .delete("/workdynamics/delete", {
+              data: ids,
+            })
             .then(({ data: res }) => {
               if (res.code !== 0) {
-                return this.$message.error(res.msg)
+                return this.$message.error(res.msg);
               }
               this.$message({
-                type: 'success',
-                message: '删除成功!'
-              })
-              this.getTableData()
-            })
+                type: "success",
+                message: "删除成功!",
+              });
+              this.getTableData();
+            });
         })
         .catch(() => {
           this.$message({
-            type: 'info',
-            message: '已取消删除'
-          })
-        })
+            type: "info",
+            message: "已取消删除",
+          });
+        });
     },
-    handleAvatarSuccess (res, file) {
+    //预览工作动态信息
+    async openPreviewData(row) {
+      console.log("预览预览", row);
+      const { data: res } = await this.$http.get(
+        `workdynamics/select/${row.id}`
+      );
+
       if (res.code !== 0) {
-        return this.$message.error(res.msg)
+        return this.$message.error(res.msg);
       }
 
-      this.addDataFrom.imageUrl = res.data
+      this.previewData = res.data;
+
+      this.perviewDataDialogVisabled = true;
+    },
+    perviewDataDialogClose() {
+      this.perviewDataDialogVisabled = false;
+    },
+    handleAvatarSuccess(res, file) {
+      if (res.code !== 0) {
+        return this.$message.error(res.msg);
+      }
+
+      this.addDataFrom.imageUrl = res.data;
       // this.imageUrl = URL.createObjectURL(file.raw);
     },
-    beforeAvatarUpload (file) {
+    beforeAvatarUpload(file) {
       const isImage =
-        file.type === 'image/jpeg' ||
-        file.type === 'image/jpg' ||
-        file.type === 'image/png'
-      const isLt2M = file.size / 1024 / 1024 < 2
+        file.type === "image/jpeg" ||
+        file.type === "image/jpg" ||
+        file.type === "image/png";
+      const isLt2M = file.size / 1024 / 1024 < 2;
 
       if (!isImage) {
-        this.$message.error('上传头像图片只能是 JPG 格式!')
+        this.$message.error("上传头像图片只能是 JPG 格式!");
       }
       if (!isLt2M) {
-        this.$message.error('上传头像图片大小不能超过 2MB!')
+        this.$message.error("上传头像图片大小不能超过 2MB!");
       }
-      return isImage && isLt2M
+      return isImage && isLt2M;
     },
-    eidtHandleAvatarSuccess (res, file) {
+    eidtHandleAvatarSuccess(res, file) {
       if (res.code !== 0) {
-        return this.$message.error(res.msg)
+        return this.$message.error(res.msg);
       }
 
-      this.eidtDataForm.imageUrl = res.data
+      this.eidtDataForm.imageUrl = res.data;
       // this.imageUrl = URL.createObjectURL(file.raw);
     },
-    editBeforeAvatarUpload (file) {
+    editBeforeAvatarUpload(file) {
       const isImage =
-        file.type === 'image/jpeg' ||
-        file.type === 'image/jpg' ||
-        file.type === 'image/png'
-      const isLt2M = file.size / 1024 / 1024 < 2
+        file.type === "image/jpeg" ||
+        file.type === "image/jpg" ||
+        file.type === "image/png";
+      const isLt2M = file.size / 1024 / 1024 < 2;
 
       if (!isImage) {
-        this.$message.error('上传头像图片只能是 JPG 格式!')
+        this.$message.error("上传头像图片只能是 JPG 格式!");
       }
       if (!isLt2M) {
-        this.$message.error('上传头像图片大小不能超过 2MB!')
+        this.$message.error("上传头像图片大小不能超过 2MB!");
       }
-      return isImage && isLt2M
+      return isImage && isLt2M;
     },
-    async openEditDialog (row) {
-      const { data: res } = await this.$http.get(`workdynamics/select/${row.id}`)
+    async openEditDialog(row) {
+      const { data: res } = await this.$http.get(
+        `workdynamics/select/${row.id}`
+      );
 
       if (res.code !== 0) {
-        return this.$message.error(res.msg)
+        return this.$message.error(res.msg);
       }
 
-      this.eidtDataForm = res.data
+      this.eidtDataForm = res.data;
 
-      this.editDataDialogVisabled = true
+      this.editDataDialogVisabled = true;
     },
-    eidtDataDialogConfirm () {
+    eidtDataDialogConfirm() {
       this.$refs.editDataFormRef.validate(async (valid) => {
         if (valid) {
-          console.log(this.eidtDataForm)
+          console.log(this.eidtDataForm);
           this.$http
-            .put('/workdynamics/update', this.eidtDataForm)
+            .put("/workdynamics/update", this.eidtDataForm)
             .then(({ data: res }) => {
               if (res.code !== 0) {
-                return this.$message.error(res.msg)
+                return this.$message.error(res.msg);
               }
-              this.$message.success('编辑成功')
-              this.editDataDialogVisabled = false
-              this.getTableData()
+              this.$message.success("编辑成功");
+              this.editDataDialogVisabled = false;
+              this.getTableData();
             })
-            .catch(() => {})
+            .catch(() => {});
         } else {
-          this.$message.success('表单数据填写不完整')
+          this.$message.success("表单数据填写不完整");
         }
-      })
+      });
     },
-    addUploadRemoveFile (file, fileList) {
-      this.$refs.addUpload.clearFiles()
-      this.addDataFrom.imageUrl = ''
+    addUploadRemoveFile(file, fileList) {
+      this.$refs.addUpload.clearFiles();
+      this.addDataFrom.imageUrl = "";
+    },
+    editUploadRemoveFile(file, fileList) {
+      this.$refs.editUpload.clearFiles();
+      this.eidtDataForm.imageUrl = "";
     },
-    editUploadRemoveFile (file, fileList) {
-      this.$refs.editUpload.clearFiles()
-      this.eidtDataForm.imageUrl = ''
-    }
   },
   computed: {
-    editDialogShowFileList () {
+    editDialogShowFileList() {
       if (this.eidtDataForm.imageUrl) {
-        return [{ name: this.eidtDataForm.imageUrl, url: this.eidtDataForm.imageUrl }]
+        return [
+          { name: this.eidtDataForm.imageUrl, url: this.eidtDataForm.imageUrl },
+        ];
       }
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+.avatar-uploader .el-upload {
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+.avatar-uploader .el-upload:hover {
+  border-color: #409eff;
+}
+.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 178px;
+  height: 178px;
+  line-height: 178px;
+  text-align: center;
+}
+.avatar {
+  width: 178px;
+  height: 178px;
+  display: block;
+}
+.boxtitle {
+  width: 100%;
+  max-height: 200px;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+}
+.boxcontent {
+  width: 100%;
+  max-height: 200px;
+  -webkit-line-clamp: 4;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+}
+.preview-dialog {
+  width: 100%;
+  height: 723px;
+  overflow: auto;
+  /* 滚动条凹槽的颜色，还可以设置边框属性 */
+  ::-webkit-scrollbar-track-piece {
+    background-color: #f8f8f8;
+    -webkit-border-radius: 2em;
+    -moz-border-radius: 2em;
+    border-radius: 2em;
+  }
+
+  /* 滚动条的宽度 */
+  ::-webkit-scrollbar {
+    width: 7px;
+    height: 7px;
+  }
+
+  .preview-title {
+    width: 100%;
+    height: 100px;
+    //margin-top: -40px;
+    border-bottom: solid #c6c6c6 1px;
+    .title-text {
+      text-align: center;
+      span {
+        font-size: 24px;
+        color: #0558e1;
+      }
+    }
+    .title-time {
+      width: 100%;
+      height: 30px;
+      margin-top: 14px;
+      text-align: center;
+      line-height: 30px;
+      span {
+        font-size: 16px;
+        color: #212121;
+      }
+    }
+  }
+  .preview-note {
+    width: 100%;
+    height: 100px;
+    text-align: left;
+    margin-top: 24px;
+    text-indent: 2em;
+  }
+  .preview-image {
+    width: 900px;
+    //height: 100%;
+    margin-top: 16px;
+    padding-top: 5px;
+    text-align: center;
+    padding-left: 300px;
+  }
+  .preview-content {
+    line-height: 30px;
+    text-indent: 2em;
+    margin-top: 16px;
+    span {
+      font-size: 16px;
+      color: #212121;
+      overflow: hidden;
+      display: -webkit-box;
+      -webkit-line-clamp: 5;
+      -webkit-box-orient: vertical;
     }
   }
 }
-</script>
-<style scoped>
-.avatar-uploader .el-upload {
-    border: 1px dashed #d9d9d9;
-    border-radius: 6px;
-    cursor: pointer;
-    position: relative;
-    overflow: hidden;
-  }
-  .avatar-uploader .el-upload:hover {
-    border-color: #409EFF;
-  }
-  .avatar-uploader-icon {
-    font-size: 28px;
-    color: #8c939d;
-    width: 178px;
-    height: 178px;
-    line-height: 178px;
-    text-align: center;
-  }
-  .avatar {
-    width: 178px;
-    height: 178px;
-    display: block;
-  }
-   .boxtitle{
-    width: 100%;
-    max-height: 200px;
-    -webkit-line-clamp: 2;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display:-webkit-box;
-    -webkit-box-orient: vertical;
-  }
-  .boxcontent{
-    width: 100%;
-    max-height: 200px;
-    -webkit-line-clamp: 4;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display:-webkit-box;
-    -webkit-box-orient: vertical;
-  }
-
+.button-new {
+  background-color: #0558e1;
+  border: none;
+}
+.button-text-new {
+  color: #0558e1;
+}
+.el-icon-delete {
+  color: #0558e1;
+}
 </style>