项目支持手机端浏览

src/layout/components/AppMain.vue

@@ -38,7 +38,7 @@ export default {
 .hasTagsView {
   .app-main {
     /* 84 = navbar + tags-view = 50 + 34 */
-    min-height: calc(100vh - 84px);
+    min-height: calc(100vh - 80px);
   }
 
   // .fixed-header+.app-main {

src/layout/components/Navbar.vue

@@ -1,110 +1,304 @@
 <template>
   <div class="navbar">
-    <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
+     <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
 
     <breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
 
     <div class="right-menu">
-      <template v-if="device!=='mobile'">
-        <search id="header-search" class="right-menu-item" />
-
-        <error-log class="errLog-container right-menu-item hover-effect" />
-
+      <template v-if="device !== 'mobile'">
+        <i
+          v-if="isShow"
+          class="el-icon-message-solid right-menu-item hover-effect shake"
+          @click="openNotice"
+          style="height: 50px; width: 40px; line-height: 52px; font-size: 22px"
+        />
         <screenfull id="screenfull" class="right-menu-item hover-effect" />
 
-        <el-tooltip content="Global Size" effect="dark" placement="bottom">
+        <!-- <el-tooltip content="Global Size" effect="dark" placement="bottom">
           <size-select id="size-select" class="right-menu-item hover-effect" />
-        </el-tooltip>
-
+        </el-tooltip> -->
       </template>
 
-      <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
+      <el-dropdown
+        class="avatar-container right-menu-item hover-effect"
+        trigger="click"
+      >
         <div class="avatar-wrapper">
-          <img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">
+          <img :src="avatar + '?imageView2/1/w/80/h/80'" class="user-avatar" />
           <i class="el-icon-caret-bottom" />
         </div>
         <el-dropdown-menu slot="dropdown">
-          <router-link to="/profile/index">
-            <el-dropdown-item>Profile</el-dropdown-item>
+          <router-link to="/person/my-message">
+            <el-dropdown-item>我的信息</el-dropdown-item>
           </router-link>
-          <router-link to="/">
-            <el-dropdown-item>Dashboard</el-dropdown-item>
+          <router-link to="/person/change-phone">
+            <el-dropdown-item>更换手机号</el-dropdown-item>
+          </router-link>
+          <router-link to="/person/change-password">
+            <el-dropdown-item>修改密码</el-dropdown-item>
           </router-link>
-          <a target="_blank" href="https://github.com/PanJiaChen/vue-element-admin/">
-            <el-dropdown-item>Github</el-dropdown-item>
-          </a>
-          <a target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/#/">
-            <el-dropdown-item>Docs</el-dropdown-item>
-          </a>
           <el-dropdown-item divided @click.native="logout">
-            <span style="display:block;">Log Out</span>
+            <span style="display: block">退出登录</span>
           </el-dropdown-item>
         </el-dropdown-menu>
       </el-dropdown>
     </div>
+
+    <el-dialog
+      title="系统公告"
+      :center="true"
+      align="left"
+      top="8vh"
+      width="800px"
+      @close="submit"
+      :close-on-click-modal="false"
+      :visible.sync="showModel"
+      element-loading-text="拼命加载中"
+      element-loading-spinner="el-icon-loading"
+      element-loading-background="rgba(0, 0, 0, 0.8)"
+      append-to-body
+    >
+      <el-card style="margin-top: -20px">
+        <el-row :gutter="10" v-if="activeMsg !== null">
+          <el-col :span="24">
+            <div style="padding: 0 0 22px 0">
+              <el-alert
+                :closable="false"
+                show-icon
+                center
+                class="my-el-alert"
+                :title="activeMsg.module"
+                :type="activeMsg.sys_type === 'VER' ? 'success' : 'warning'"
+              ></el-alert>
+            </div>
+            <el-form
+              :size="'mini'"
+              label-position="left"
+              label-width="82px"
+              class="demo-table-expand"
+              style="padding-left: 25px"
+            >
+              <el-row>
+                <el-col :span="12" v-if="activeMsg.sys_type === 'VER'">
+                  <el-form-item label="版本编号：">
+                    <p style="margin: 0">{{ activeMsg.version }}</p>
+                  </el-form-item></el-col
+                >
+                <el-col :span="activeMsg.sys_type === 'VER' ? 12 : 24">
+                  <el-form-item
+                    :label="
+                      activeMsg.sys_type === 'VER' ? '更新时间：' : '预计时间：'
+                    "
+                  >
+                    <p style="margin: 0">
+                      {{ activeMsg.addtime }}
+                    </p></el-form-item
+                  ></el-col
+                >
+                <el-col :span="24"
+                  ><el-form-item label="更新内容：">
+                    <p
+                      style="margin: 0"
+                      v-html="activeMsg.system"
+                    ></p></el-form-item
+                ></el-col>
+                <el-col :span="24" style="text-align: right">
+                  <el-checkbox
+                    v-model="checked"
+                    class="fl"
+                    style="padding-top: 5px"
+                    >我已知晓，后续不再提示！</el-checkbox
+                  >
+                  <el-button @click="submit" type="primary" plain
+                    >关闭
+                  </el-button>
+                </el-col>
+              </el-row>
+            </el-form>
+          </el-col>
+        </el-row>
+      </el-card>
+    </el-dialog>
   </div>
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
-// import Breadcrumb from '@/components/Breadcrumb'
-// import Hamburger from '@/components/Hamburger'
-// import ErrorLog from '@/components/ErrorLog'
-// import Screenfull from '@/components/Screenfull'
-// import SizeSelect from '@/components/SizeSelect'
-// import Search from '@/components/HeaderSearch'
+import { mapGetters } from "vuex";
+
+import asyncRequest from "@/apis/service/system/updates";
+import resToken from "@/mixins/resToken";
+import { getNotice, setNotice } from "@/utils/auth";
 
 export default {
-  // components: {
-  //   Breadcrumb,
-  //   Hamburger,
-  //   ErrorLog,
-  //   Screenfull,
-  //   SizeSelect,
-  //   Search
-  // },
   computed: {
-    ...mapGetters([
-      'sidebar',
-      'avatar',
-      'device'
-    ])
+    ...mapGetters(["sidebar", "avatar", "device"]),
+  },
+  mixins: [resToken],
+  data() {
+    return {
+      showModel: false,
+      loading: false,
+      isShow: true,
+      statsTime: 0,
+      endTime: 0,
+      checked: false,
+      lastNotice: null,
+      parmValue: {
+        type: "",
+        page: 1, // 页码
+        size: 15, // 每页显示条数
+      },
+      activeMsg: null,
+    };
+  },
+  mounted() {
+    this.openNotice(1);
   },
   methods: {
+    async openNotice(type) {
+      if (getNotice() && getNotice().length > 0) {
+        this.lastNotice = JSON.parse(getNotice());
+      } else {
+        this.lastNotice = null;
+      }
+      this.loading = true;
+      const res = await asyncRequest.list(this.parmValue);
+      if (
+        res &&
+        res.code === 0 &&
+        res.data &&
+        res.data.list &&
+        res.data.list.length > 0
+      ) {
+        this.activeMsg = res.data.list[0];
+        this.isShow = true;
+        if (this.lastNotice + "" !== "null") {
+          if (this.activeMsg.addtime === this.lastNotice.addtime) {
+            if (this.lastNotice.type === "1") {
+              this.checked = true;
+            } else {
+              this.checked = false;
+            }
+          } else {
+            this.checked = false;
+          }
+        } else {
+          let model = {
+            type: this.checked ? "1" : "0",
+            addtime: this.activeMsg.addtime,
+          };
+          setNotice(JSON.stringify(model));
+          this.checked = false;
+        }
+        if (type === 1) {
+          this.typeShow();
+        } else {
+          this.showModel = true;
+        }
+
+      } else if (res && res.code >= 100 && res.code <= 104) {
+        await this.logout();
+      } else {
+        this.activeMsg = null;
+        this.isShow = false;
+      }
+      this.loading = false;
+    },
+    typeShow() {
+      let nowtime = new Date().valueOf();
+      if (this.activeMsg.sys_type === "VER") {
+        this.statsTime = new Date(this.activeMsg.addtime).valueOf();
+        this.endTime = this.statsTime + 1000 * 60 * 60 * 24 * 7;
+
+        if (
+          nowtime > this.statsTime &&
+          nowtime < this.endTime &&
+          !this.checked
+        ) {
+          this.showModel = true;
+        } else {
+          this.showModel = false;
+        }
+      } else {
+        this.statsTime = 0;
+        this.endTime = new Date(this.activeMsg.addtime).valueOf();
+        if (nowtime < this.endTime && !this.checked) {
+          this.showModel = true;
+        } else {
+          this.showModel = false;
+        }
+      }
+    },
     toggleSideBar() {
-      this.$store.dispatch('app/toggleSideBar')
+      this.$store.dispatch("app/toggleSideBar");
     },
     async logout() {
-      await this.$store.dispatch('user/logout')
-      this.$router.push(`/login?redirect=${this.$route.fullPath}`)
-    }
-  }
-}
+      await this.$store.dispatch("user/logout");
+      this.$router.push(`/login?redirect=${this.$route.fullPath}`);
+    },
+    submit() {
+      let model = {
+        type: this.checked ? "1" : "0",
+        addtime: this.activeMsg.addtime,
+      };
+      setNotice(JSON.stringify(model));
+      this.showModel = false;
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
+@keyframes shake {
+  /* 水平抖动，核心代码 */
+  10%,
+  90% {
+    transform: translate3d(-1px, 0, 0);
+  }
+  20%,
+  80% {
+    transform: translate3d(+2px, 0, 0);
+  }
+  30%,
+  70% {
+    transform: translate3d(-4px, 0, 0);
+  }
+  40%,
+  60% {
+    transform: translate3d(+4px, 0, 0);
+  }
+  50% {
+    transform: translate3d(-4px, 0, 0);
+  }
+}
+.shake {
+  animation: shake 800ms ease-in-out;
+}
 .navbar {
   height: 50px;
   overflow: hidden;
   position: relative;
   background: #fff;
-  box-shadow: 0 1px 4px rgba(0,21,41,.08);
+  min-width: 1000px;
+  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
 
   .hamburger-container {
     line-height: 46px;
     height: 100%;
     float: left;
     cursor: pointer;
-    transition: background .3s;
-    -webkit-tap-highlight-color:transparent;
+    transition: background 0.3s;
+    -webkit-tap-highlight-color: transparent;
 
     &:hover {
-      background: rgba(0, 0, 0, .025)
+      background: rgba(0, 0, 0, 0.025);
     }
   }
 
   .breadcrumb-container {
     float: left;
+   width: 500px;
+   //min-width: calc(1200px - 200px - 150px);
   }
 
   .errLog-container {
@@ -114,6 +308,7 @@ export default {
 
   .right-menu {
     float: right;
+
     height: 100%;
     line-height: 50px;
 
@@ -131,10 +326,10 @@ export default {
 
       &.hover-effect {
         cursor: pointer;
-        transition: background .3s;
+        transition: background 0.3s;
 
         &:hover {
-          background: rgba(0, 0, 0, .025)
+          background: rgba(0, 0, 0, 0.025);
         }
       }
     }
@@ -164,4 +359,4 @@ export default {
     }
   }
 }
-</style>
+</style>

src/layout/components/Sidebar/Logo.vue

@@ -24,8 +24,9 @@ export default {
   },
   data() {
     return {
-      title: 'Vue Element Admin',
-      logo: 'https://wpimg.wallstcn.com/69a1c46c-eb1c-4b46-8bd4-e9e686ef5251.png'
+
+      title: '采销平台订单系统',
+      logo: require("@/assets/img/logo.gif"),
     }
   }
 }
@@ -42,13 +43,15 @@ export default {
 }
 
 .sidebar-logo-container {
-  position: relative;
+  position: absolute;
   width: 100%;
-  height: 50px;
-  line-height: 50px;
-  background: #2b2f3a;
+  height: 80px;
+  line-height: 88px;
+  background:  #63cbe7;
   text-align: center;
   overflow: hidden;
+  z-index: 2;;
+  display: block;
 
   & .sidebar-logo-link {
     height: 100%;
@@ -58,16 +61,18 @@ export default {
       width: 32px;
       height: 32px;
       vertical-align: middle;
-      margin-right: 12px;
+      margin-right: 8px;
     }
 
     & .sidebar-title {
       display: inline-block;
       margin: 0;
-      color: #fff;
+      vertical-align: top;
+      color: #000;
       font-weight: 600;
-      line-height: 50px;
-      font-size: 14px;
+      line-height: 88px;
+      height: 80px;;
+      font-size: 18px;
       font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
       vertical-align: middle;
     }

src/styles/sidebar.scss

@@ -42,7 +42,7 @@
       .el-scrollbar {
         height: 100%;
         box-sizing: border-box;
-        // padding-top:84px;
+        padding-top:80px;
         // overflow-y:scroll;
         // 、calc(100% - 84px);
       }
@@ -56,6 +56,12 @@
       display: inline-block;
       width: 100%;
       overflow: hidden;
+     &.sidebar-logo-link{
+       height: 80px;
+      vertical-align: top;
+      overflow: hidden;
+      // height: 100%;
+     }
     }
 
     .svg-icon {

src/views/interest/action/index.vue

@@ -574,7 +574,7 @@ export default {
 </script>
 <style lang="scss" scoped>
 .action {
-  height: calc(100vh - 84px);
+  height: calc(100vh - 80px);
   position: relative;
   width: 100%;
   text-align: center;