重新设计

src/components/login/bg/index.vue

@@ -1,91 +1,38 @@
 <template>
-  <ul class="slide-box">
-    <li></li>
-    <li></li>
-    <li></li>
-    <li></li>
-  </ul>
+  <div class="page">
+    <img class="img" src="/img/icon/login-bg.png">
+    <div class="company">
+      <img class="logo" src="../../../../public/img/icon/logo.png" >
+    </div>
+  </div>
 </template>
 
 <script>
-export default {
-  name: "indexbg"
-};
+  export default {
+    name: "indexbg"
+  };
 </script>
 
 <style lang="scss">
-.slide-box {
-  position: fixed;
-  width: 100%;
-  height: 100%;
-  background: #0086b3;
-  top: 0px;
-  left: 0px;
-  z-index: 0;
-  li {
+  .page {
     width: 100%;
     height: 100%;
-    position: absolute;
-    top: 0px;
-    left: 0px;
-    color: transparent;
-    background-size: cover;
-    background-position: 50% 50%;
-    background-repeat: none;
-    opacity: 0;
-    z-index: 0;
-    -webkit-backface-visibility: hidden;
-    -webkit-animation: imageAnimation 48s linear infinite 0s;
-    -moz-animation: imageAnimation 48s linear infinite 0s;
-    -o-animation: imageAnimation 48s linear infinite 0s;
-    -ms-animation: imageAnimation 48s linear infinite 0s;
-    animation: imageAnimation 48s linear infinite 0s;
+    position: relative;
 
-    &:nth-child(1) {
-      background-image: url(/img/bg/bg-1.jpg);
+    .img {
+      width: 100%;
+      height: 100%;
     }
-    &:nth-child(2) {
-      background-image: url(/img/bg/bg-2.jpg);
-      -webkit-animation-delay: 12s;
-      -moz-animation-delay: 12s;
-      -o-animation-delay: 12s;
-      -ms-animation-delay: 12s;
-      animation-delay: 12s;
-    }
-    &:nth-child(3) {
-      background-image: url(/img/bg/bg-3.jpg);
-      -webkit-animation-delay: 24s;
-      -moz-animation-delay: 24s;
-      -o-animation-delay: 24s;
-      -ms-animation-delay: 24s;
-      animation-delay: 24s;
-    }
-    &:nth-child(4) {
-      background-image: url(/img/bg/bg-1.jpg);
-      animation-delay: 36s;
+
+    .company {
+      position: absolute;
+      left: 3.2rem;
+      top: 2.2rem;
+
+      .logo{
+        width: 9.375rem;
+        height: 2.5625rem;
+      }
     }
   }
-}
-@keyframes imageAnimation {
-  0% {
-    opacity: 0;
-    animation-timing-function: ease-in;
-  }
-  8% {
-    opacity: 1;
-    transform: scale(1.15);
-    animation-timing-function: ease-out;
-  }
-  17% {
-    opacity: 1;
-    transform: scale(1.2);
-  }
-  25% {
-    opacity: 0;
-    transform: scale(1.4);
-  }
-  100% {
-    opacity: 0;
-  }
-}
 </style>

src/page/index/sidebar/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="avue-sidebar">
+  <div class="avue-sidebar" style="background-color: #042352;border: none;box-shadow: none;">
     <!-- <logo></logo> -->
     <el-scrollbar style="height:100%">
       <div v-if="validatenull(menu)"
@@ -46,4 +46,3 @@
 </script>
 <style lang="scss" scoped>
 </style>
-

src/page/index/sidebar/sidebarItem.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="menu-wrapper">
     <template v-for="item in menu">
-      <el-menu-item v-if="validatenull(item[childrenKey]) && vaildRoles(item)"
+      <el-menu-item  v-if="validatenull(item[childrenKey]) && vaildRoles(item)"
                     :index="item[pathKey]"
                     @click="open(item)"
                     :key="item[labelKey]"
@@ -143,4 +143,3 @@
     }
   };
 </script>
-

src/page/index/top/index.vue

@@ -1,96 +1,81 @@
 <template>
-  <div class="avue-top">
-    <div class="top-bar__left">
-      <div class="avue-breadcrumb"
-           :class="[{ 'avue-breadcrumb--active': isCollapse }]"
-           v-if="showCollapse">
-        <i class="icon-navicon"
-           @click="setCollapse"></i>
-      </div>
-    </div>
-    <div class="top-bar__title">
-      <div class="top-bar__item--show" style="vertical-align: top;">{{website.indexTitle}}</div>
-      <div class="top-bar__item top-bar__item--show"
-           v-if="showMenu">
-        <top-menu ref="topMenu"></top-menu>
+  <div class="topWH" style="height: 10.8rem;background-color: #042352;">
+    <div class="top-bar__left " style="left: 0;">
+      <div class="" style="position: relative;" :style="titleW">
+        <img src="/img/icon/top-bg.png" class="topWH">
+        <div class="top-title">
+          {{title}}
+        </div>
+        <div class="tab-left">
+          <div v-if="index<menu.length/ 2" @click="menuClick(item)" v-for="(item,index) in menu" :key="index">
+            <div :class="selectedIndex==item.index?'selected':''" class="tabName" style="margin-right: 1.875rem;">
+              <span>{{item.name}}</span>
+              <img v-if="selectedIndex==index" src="/img/icon/top-selected.png" class="tab-bottom" />
+              <div v-else class="tab-bottom" />
+            </div>
+          </div>
+        </div>
+        <div class="tab-right">
+          <div v-if="index>=menu.length/ 2" @click="selectedIndex=index" v-for="(item,index) in menu" :key="index">
+            <div :class="selectedIndex==item.index?'selected':''" class="tabName" style="margin-left: 1.875rem;">
+              <span>{{item.name}}</span>
+              <img v-if="selectedIndex==index" src="/img/icon/top-selected.png" class="tab-bottom" />
+              <div v-else class="tab-bottom" />
+            </div>
+          </div>
+        </div>
       </div>
-      <span class="top-bar__item"
-            v-if="showSearch">
-        <top-search></top-search>
-      </span>
     </div>
     <div class="top-bar__right">
-      <el-tooltip v-if="showColor"
-                  effect="dark"
-                  :content="$t('navbar.color')"
-                  placement="bottom">
+      <div>
+        <i style="font-style: normal; margin-right: 3rem;color: #FFFFFF;font-size: 16px;">{{time}}</i>
+      </div>
+      <el-tooltip v-if="showColor" effect="light" :content="$t('navbar.color')" placement="bottom">
         <div class="top-bar__item">
           <top-color></top-color>
         </div>
       </el-tooltip>
-      <el-tooltip v-if="showDebug"
-                  effect="dark"
-                  :content="logsFlag?$t('navbar.bug'):logsLen+$t('navbar.bugs')"
-                  placement="bottom">
+      <el-tooltip v-if="showDebug" effect="light" :content="logsFlag?$t('navbar.bug'):logsLen+$t('navbar.bugs')"
+        placement="bottom">
         <div class="top-bar__item">
           <top-logs></top-logs>
         </div>
       </el-tooltip>
-      <el-tooltip v-if="showLock"
-                  effect="dark"
-                  :content="$t('navbar.lock')"
-                  placement="bottom">
+      <el-tooltip v-if="showLock" effect="light" :content="$t('navbar.lock')" placement="bottom">
         <div class="top-bar__item">
           <top-lock></top-lock>
         </div>
       </el-tooltip>
-      <el-tooltip v-if="showTheme"
-                  effect="dark"
-                  :content="$t('navbar.theme')"
-                  placement="bottom">
+      <el-tooltip v-if="showTheme" effect="light" :content="$t('navbar.theme')" placement="bottom">
         <div class="top-bar__item top-bar__item--show">
           <top-theme></top-theme>
         </div>
       </el-tooltip>
-      <el-tooltip effect="dark"
-                  :content="$t('navbar.notice')"
-                  placement="bottom">
+      <el-tooltip effect="light" :content="$t('navbar.notice')" placement="bottom">
         <div class="top-bar__item top-bar__item--show">
           <top-notice></top-notice>
         </div>
       </el-tooltip>
-      <el-tooltip effect="dark"
-                  :content="$t('navbar.language')"
-                  placement="bottom">
-        <div class="top-bar__item top-bar__item--show">
-          <top-lang></top-lang>
-        </div>
-      </el-tooltip>
-      <el-tooltip v-if="showFullScren"
-                  effect="dark"
-                  :content="isFullScren?$t('navbar.screenfullF'):$t('navbar.screenfull')"
-                  placement="bottom">
+      <el-tooltip v-if="showFullScren" effect="light"
+        :content="isFullScren?$t('navbar.screenfullF'):$t('navbar.screenfull')" placement="bottom">
         <div class="top-bar__item">
-          <i :class="isFullScren?'icon-tuichuquanping':'icon-quanping'"
-             @click="handleScreen"></i>
+          <i :class="isFullScren?'icon-tuichuquanping icon':'icon-quanping icon'" @click="handleScreen"></i>
         </div>
       </el-tooltip>
-      <img class="top-bar__img"
-           :src="userInfo.avatar">
+      <div style="margin-left: 20px;"></div>
       <el-dropdown>
         <span class="el-dropdown-link">
-          {{userInfo.userName}}
-          <i class="el-icon-arrow-down el-icon--right"></i>
+          <i class="icon">{{userInfo.userName || 'admin'}}</i>
+          <i class="el-icon-arrow-down el-icon--right icon" style="font-size: 18px;"></i>
         </span>
-        <el-dropdown-menu slot="dropdown">
+        <el-dropdown-menu slot="dropdown" >
           <el-dropdown-item>
             <router-link to="/">{{$t('navbar.dashboard')}}</router-link>
           </el-dropdown-item>
           <el-dropdown-item>
             <router-link to="/info/index">{{$t('navbar.userinfo')}}</router-link>
           </el-dropdown-item>
-          <el-dropdown-item @click.native="logout"
-                            divided>{{$t('navbar.logOut')}}
+          <el-dropdown-item @click.native="logout" divided>{{$t('navbar.logOut')}}
           </el-dropdown-item>
         </el-dropdown-menu>
       </el-dropdown>
@@ -103,9 +88,17 @@
   </div>
 </template>
 <script>
-  import {resetRouter} from '@/router/router'
-  import {mapGetters, mapState} from "vuex";
-  import {fullscreenToggel, listenfullscreen} from "@/util/util";
+  import {
+    resetRouter
+  } from '@/router/router'
+  import {
+    mapGetters,
+    mapState
+  } from "vuex";
+  import {
+    fullscreenToggel,
+    listenfullscreen
+  } from "@/util/util";
   import topLock from "./top-lock";
   import topMenu from "./top-menu";
   import topSearch from "./top-search";
@@ -115,6 +108,7 @@
   import topNotice from './top-notice'
   import topLang from "./top-lang";
   import navbar from "./nav/nav-bar.vue";
+  import dateTime from '@/util/dateTime.js'
 
   export default {
     components: {
@@ -130,14 +124,64 @@
     },
     name: "top",
     data() {
-      return {};
+      return {
+        activeName: 'second',
+
+        timer: null,
+        time: '',
+        title: "智慧园区大数据平台",
+
+        selectedIndex: 0,
+        menu: [{
+            name: '全景园区',
+            value: 0
+          },
+          {
+            name: '智能运营中心',
+            value: 1
+          },
+          {
+            name: '智能安防',
+            value: 2
+          },
+          {
+            name: '一脸通',
+            value: 3
+          },
+          {
+            name: '停车管理',
+            value: 4
+          },
+          {
+            name: '能耗管理',
+            value: 5
+          },
+          {
+            name: '环境管理',
+            value: 6
+          },
+          {
+            name: '消防管理',
+            value: 7
+          },
+          {
+            name: '红色园区',
+            value: 8
+          }
+        ],
+
+      };
     },
     filters: {},
     created() {
+      this.getTime()
     },
     mounted() {
       listenfullscreen(this.setScreen);
     },
+    destroyed() {
+      clearInterval(this.timer)
+    },
     computed: {
       ...mapState({
         showDebug: state => state.common.showDebug,
@@ -161,6 +205,14 @@
       ])
     },
     methods: {
+      getTime() {
+        this.timer = setInterval(() => {
+          this.time = dateTime.format()
+        }, 1000)
+      },
+      menuClick(item) {
+        this.selectedIndex = item.value
+      },
       handleScreen() {
         fullscreenToggel();
       },
@@ -178,7 +230,9 @@
         }).then(() => {
           this.$store.dispatch("LogOut").then(() => {
             resetRouter();
-            this.$router.push({path: "/login"});
+            this.$router.push({
+              path: "/login"
+            });
           });
         });
       }
@@ -186,5 +240,74 @@
   };
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
+  .topWH {
+    width: 100vw;
+    height: 10.2rem;
+  }
+
+  .icon {
+    color: #02EEFF;
+    font-size: 20px;
+  }
+
+  .top-title {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    bottom: 1rem;
+    left: calc(50% - 14rem);
+    font-size: 1.3rem;
+    font-family: '宋体';
+    color: #FFFFFF;
+    font-weight: 800;
+    font-style: normal;
+    width: 28.75rem;
+    height: 4.375rem;
+  }
+
+
+  .tab-left {
+    display: flex;
+    justify-content: flex-end;
+    position: absolute;
+    bottom: 1.4rem;
+    left: 1.2rem;
+    width: 31%;
+  }
+
+  .tab-right {
+    display: flex;
+    justify-content: flex-start;
+    position: absolute;
+    bottom: 1.4rem;
+    right: 1.2rem;
+    width: 31%;
+  }
+
+  .tabName {
+    font-style: normal;
+    color: #FFFFFF;
+    font-size: 0.98rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .tab-bottom {
+    width: 70%;
+    height: 0.36rem;
+    margin-top: 0.4rem;
+  }
+
+  .selected {
+    font-weight: 800;
+    color: #02eeff;
+  }
+
+  .tabName:hover {
+    color: #02eeff;
+  }
 </style>

src/page/index/top/top-lock.vue

@@ -1,72 +1,71 @@
 <template>
   <span>
-    <i class="icon-suoping"
-       @click="handleLock"></i>
-    <el-dialog title="设置锁屏密码"
-               :visible.sync="box"
-               width="30%"
-               append-to-body>
-      <el-form :model="form"
-               ref="form"
-               label-width="80px">
-        <el-form-item label="锁屏密码"
-                      prop="passwd"
-                      :rules="[{ required: true, message: '锁屏密码不能为空'}]">
-          <el-input v-model="form.passwd"
-                    placeholder="请输入锁屏密码" />
+    <i class="icon-suoping icon" @click="handleLock"></i>
+    <el-dialog title="设置锁屏密码" :visible.sync="box" width="30%" append-to-body>
+      <el-form :model="form" ref="form" label-width="80px">
+        <el-form-item label="锁屏密码" prop="passwd" :rules="[{ required: true, message: '锁屏密码不能为空'}]">
+          <el-input v-model="form.passwd" placeholder="请输入锁屏密码" />
         </el-form-item>
       </el-form>
-      <span slot="footer"
-            class="dialog-footer">
-        <el-button type="primary"
-                   @click="handleSetLock">确 定</el-button>
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="handleSetLock">确 定</el-button>
       </span>
     </el-dialog>
   </span>
 </template>
 
 <script>
-import { validatenull } from "@/util/validate";
-import { mapGetters } from "vuex";
-export default {
-  name: "top-lock",
-  data() {
-    return {
-      box: false,
-      form: {
-        passwd: ""
-      }
-    };
-  },
-  created() {},
-  mounted() {},
-  computed: {
-    ...mapGetters(["lockPasswd"])
-  },
-  props: [],
-  methods: {
-    handleSetLock() {
-      this.$refs["form"].validate(valid => {
-        if (valid) {
-          this.$store.commit("SET_LOCK_PASSWD", this.form.passwd);
-          this.handleLock();
+  import {
+    validatenull
+  } from "@/util/validate";
+  import {
+    mapGetters
+  } from "vuex";
+  export default {
+    name: "top-lock",
+    data() {
+      return {
+        box: false,
+        form: {
+          passwd: ""
         }
-      });
+      };
+    },
+    created() {},
+    mounted() {},
+    computed: {
+      ...mapGetters(["lockPasswd"])
     },
-    handleLock() {
-      if (validatenull(this.lockPasswd)) {
-        this.box = true;
-        return;
+    props: [],
+    methods: {
+      handleSetLock() {
+        this.$refs["form"].validate(valid => {
+          if (valid) {
+            this.$store.commit("SET_LOCK_PASSWD", this.form.passwd);
+            this.handleLock();
+          }
+        });
+      },
+      handleLock() {
+        if (validatenull(this.lockPasswd)) {
+          this.box = true;
+          return;
+        }
+        this.$store.commit("SET_LOCK");
+        setTimeout(() => {
+          this.$router.push({
+            path: "/lock"
+          });
+        }, 100);
       }
-      this.$store.commit("SET_LOCK");
-      setTimeout(() => {
-        this.$router.push({ path: "/lock" });
-      }, 100);
-    }
-  },
-  components: {}
-};
+    },
+    components: {}
+  };
 </script>
 
 <style lang="scss" scoped>
+ .icon {
+   color: #02EEFF;
+   font-size: 28px;
+ }
 </style>

src/page/index/top/top-notice.vue

@@ -1,87 +1,84 @@
 <template>
-  <el-popover placement="bottom"
-              width="350"
-              trigger="click">
+  <el-popover placement="bottom" width="350" trigger="click">
 
     <el-tabs v-model="activeName">
-      <el-tab-pane label="邮件(1)"
-                   name="first"></el-tab-pane>
-      <el-tab-pane label="消息(2)"
-                   name="second"></el-tab-pane>
-      <el-tab-pane label="通知"
-                   name="third"></el-tab-pane>
+      <el-tab-pane label="邮件(1)" name="first"></el-tab-pane>
+      <el-tab-pane label="消息(2)" name="second"></el-tab-pane>
+      <el-tab-pane label="通知" name="third"></el-tab-pane>
     </el-tabs>
     <el-scrollbar style="height:300px">
-      <avue-notice :data="data"
-                   :option="option"
-                   @page-change="pageChange"></avue-notice>
+      <avue-notice :data="data" :option="option" @page-change="pageChange"></avue-notice>
     </el-scrollbar>
     <div slot="reference">
       <el-badge is-dot>
-        <i class="el-icon-bell"></i>
+        <i class="el-icon-message-solid icon"></i>
       </el-badge>
     </div>
   </el-popover>
 </template>
 
 <script>
-let list = [{
-  img: '/img/bg/vip1.png',
-  title: '史蒂夫·乔布斯 关注了你',
-  subtitle: '05-08 15:08',
-  tag: '已经开始',
-  status: 0
-}, {
-  img: '/img/bg/vip2.png',
-  title: '斯蒂夫·沃兹尼亚克 关注了你',
-  subtitle: '05-08 15:08',
-  tag: '未开始',
-  status: 1
-}, {
-  img: '/img/bg/vip3.png',
-  title: '蒂姆·库克 关注了你',
-  subtitle: '05-08 15:08',
-  status: 3,
-  tag: '有错误'
-}, {
-  img: '/img/bg/vip4.png',
-  title: '比尔·费尔南德斯 关注了你',
-  subtitle: '05-08 15:08',
-  status: 4,
-  tag: '已完成'
-}];
-export default {
-  name: "top-notice",
-  data () {
-    return {
-      activeName: 'first',
-      option: {
-        props: {
-          img: 'img',
-          title: 'title',
-          subtitle: 'subtitle',
-          tag: 'tag',
-          status: 'status'
+  let list = [{
+    img: '/img/bg/vip1.png',
+    title: '史蒂夫·乔布斯 关注了你',
+    subtitle: '05-08 15:08',
+    tag: '已经开始',
+    status: 0
+  }, {
+    img: '/img/bg/vip2.png',
+    title: '斯蒂夫·沃兹尼亚克 关注了你',
+    subtitle: '05-08 15:08',
+    tag: '未开始',
+    status: 1
+  }, {
+    img: '/img/bg/vip3.png',
+    title: '蒂姆·库克 关注了你',
+    subtitle: '05-08 15:08',
+    status: 3,
+    tag: '有错误'
+  }, {
+    img: '/img/bg/vip4.png',
+    title: '比尔·费尔南德斯 关注了你',
+    subtitle: '05-08 15:08',
+    status: 4,
+    tag: '已完成'
+  }];
+  export default {
+    name: "top-notice",
+    data() {
+      return {
+        activeName: 'first',
+        option: {
+          props: {
+            img: 'img',
+            title: 'title',
+            subtitle: 'subtitle',
+            tag: 'tag',
+            status: 'status'
+          },
         },
-      },
-      data: list,
-    }
-  },
-  created () {
-
-  },
-  methods: {
-    pageChange (page, done) {
-      setTimeout(() => {
-        this.$message.success('页码' + page)
-        this.data = this.data.concat(list);
-        done();
-      }, 1000)
+        data: list,
+      }
+    },
+    created() {
 
     },
-  }
-};
+    methods: {
+      pageChange(page, done) {
+        setTimeout(() => {
+          this.$message.success('页码' + page)
+          this.data = this.data.concat(list);
+          done();
+        }, 1000)
+
+      },
+    }
+  };
 </script>
 
 <style lang="scss" scoped>
+  .icon {
+    color: #02EEFF;
+    font-size: 20px;
+  }
 </style>

src/page/login/index.vue

@@ -1,87 +1,37 @@
 <template>
-  <div class="login-container"
-       ref="login"
-       @keyup.enter.native="handleLogin">
-       <particles/>
-       <indexbg/>
-      <!-- <div class="login-container-left">
-        <h4 class="login-title"> -->
-          <!-- {{ $t('login.title') }} -->
-          <!-- {{website.title}} -->
-          <!-- <top-lang></top-lang> -->
-        <!-- </h4>
-        <div class="bg"></div>
+  <div class="login-container" ref="login" @keyup.enter.native="handleLogin">
+    <indexbg />
+    <div class="login-border" style="">
+      <div style="position: relative;">
+        <div style="position: absolute;left: 1.875rem;bottom: 0rem;width: 30%;display: flex;flex-direction: column;">
+          <userLogin></userLogin>
+        </div>
+        <img src="/img/icon/login.gif" style="width: 100%;height: 100%;"/>
       </div>
-      <div class="login-container-right"> -->
-        <!-- <div class="login-weaper animated bounceInDown">
-        <div class="login-left">
-          <div class="login-time">
-            {{time}}
-          </div>
-          <img class="img" src="/img/logo.png" alt="">
-          <p class="title">{{ $t('login.info') }}</p>
-        </div> -->
-        <div class="login-border">
-          <div class="login-main">
-            <span class="login-title">{{website.title}}</span>
-            <userLogin v-if="activeName==='user'"></userLogin>
-            <codeLogin v-else-if="activeName==='code'"></codeLogin>
-            <thirdLogin v-else-if="activeName==='third'"></thirdLogin>
-            <div class="login-menu">
-              <!-- <a href="#" @click.stop="activeName='user'">{{ $t('login.userLogin') }}</a> -->
-              <!-- <a href="#" @click.stop="activeName='code'">{{ $t('login.phoneLogin') }}</a> -->
-              <!-- <a href="#" @click.stop="activeName='third'">{{ $t('login.thirdLogin') }}</a> -->
-            </div>
-          </div>
-      </div>
-    <!-- </div>
-      </div> -->
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-    <!-- <top-color v-show="false"></top-color> -->
-      <foot/>
+    </div>
+    <foot />
   </div>
 </template>
 <script>
   import userLogin from "./userlogin";
   import codeLogin from "./codelogin";
   import thirdLogin from "./thirdlogin";
-  import {mapGetters} from "vuex";
-  import {dateFormat} from "@/util/date";
-  import {validatenull} from "@/util/validate";
+  import {
+    mapGetters
+  } from "vuex";
+  import {
+    dateFormat
+  } from "@/util/date";
+  import {
+    validatenull
+  } from "@/util/validate";
   import topLang from "@/page/index/top/top-lang";
   import topColor from "@/page/index/top/top-color";
-  import {getQueryString, getTopUrl} from "@/util/util";
+  import {
+    getQueryString,
+    getTopUrl
+  } from "@/util/util";
   import indexbg from '@/components/login/bg'
-  import particles from "@/components/login/particles";
   import foot from "@/components/login/foot";
   export default {
     name: "login",
@@ -91,7 +41,6 @@
       thirdLogin,
       topLang,
       topColor,
-      particles,
       indexbg,
       foot
     },
@@ -116,8 +65,7 @@
       this.handleLogin();
       this.getTime();
     },
-    mounted() {
-    },
+    mounted() {},
     computed: {
       ...mapGetters(["website", "tagWel"])
     },
@@ -139,7 +87,8 @@
           source = source.split(redirectUrl)[1];
           this.socialForm.source = source;
         }
-        if (!validatenull(this.socialForm.source) && !validatenull(this.socialForm.code) && !validatenull(this.socialForm.state)) {
+        if (!validatenull(this.socialForm.source) && !validatenull(this.socialForm.code) && !validatenull(this
+            .socialForm.state)) {
           const loading = this.$loading({
             lock: true,
             text: '第三方系统登录中,请稍后。。。',
@@ -147,7 +96,9 @@
           });
           this.$store.dispatch("LoginBySocial", this.socialForm).then(() => {
             window.location.href = topUrl.split(redirectUrl)[0];
-            this.$router.push({path: this.tagWel.value});
+            this.$router.push({
+              path: this.tagWel.value
+            });
             loading.close();
           }).catch(() => {
             loading.close();

src/page/login/userlogin.vue

@@ -1,76 +1,74 @@
 <template>
-  <el-form class="login-form"
-           status-icon
-           :rules="loginRules"
-           ref="loginForm"
-           :model="loginForm"
-           label-width="0">
-    <el-form-item v-if="tenantMode" prop="tenantId">
-      <el-input size="small"
-                @keyup.enter.native="handleLogin"
-                v-model="loginForm.tenantId"
-                auto-complete="off"
-                :placeholder="$t('login.tenantId')">
-        <i slot="prefix" class="icon-quanxian"/>
-      </el-input>
-    </el-form-item>
-    <el-form-item prop="username">
-      <el-input size="small"
-                @keyup.enter.native="handleLogin"
-                v-model="loginForm.username"
-                auto-complete="off"
-                :placeholder="$t('login.username')">
-        <i slot="prefix" class="icon-yonghu"/>
-      </el-input>
-    </el-form-item>
-    <el-form-item prop="password">
-      <el-input size="small"
-                @keyup.enter.native="handleLogin"
-                :type="passwordType"
-                v-model="loginForm.password"
-                auto-complete="off"
-                :placeholder="$t('login.password')">
-        <i class="el-icon-view el-input__icon" slot="suffix" @click="showPassword"/>
-        <i slot="prefix" class="icon-mima"/>
-      </el-input>
-    </el-form-item>
-    <el-form-item v-if="this.website.captchaMode" prop="code">
-      <el-row :span="24">
-        <el-col :span="16">
-          <el-input size="small"
-                    @keyup.enter.native="handleLogin"
-                    v-model="loginForm.code"
-                    auto-complete="off"
-                    :placeholder="$t('login.code')">
-            <i slot="prefix" class="icon-yanzhengma"/>
-          </el-input>
-        </el-col>
-        <el-col :span="8">
-          <div class="login-code">
-            <img :src="loginForm.image" class="login-code-img" @click="refreshCode"
-            />
-          </div>
-        </el-col>
-      </el-row>
-    </el-form-item>
-    <el-form-item>
-      <el-button type="primary"
-                 size="small"
-                 @click.native.prevent="handleLogin"
-                 class="login-submit">{{$t('login.submit')}}
-      </el-button>
-    </el-form-item>
-  </el-form>
+  <div>
+    <el-form class="login-form" status-icon :rules="loginRules" ref="loginForm" :model="loginForm" label-width="0">
+      <el-form-item>
+        <div >
+          <i class="login-title" style="font-size: 1.5rem;position: relative;bottom: -0.8rem;">CY-SMART</i>
+          <br />
+          <i class="login-title" style="font-size: 1.3rem;position: relative;bottom: -0.4rem;">智慧园区大数据平台</i>
+        </div>
+      </el-form-item>
+      <el-form-item v-if="tenantMode" prop="tenantId">
+        <el-input size="small" @keyup.enter.native="handleLogin" v-model="loginForm.tenantId" auto-complete="off"
+          :placeholder="$t('login.tenantId')">
+        </el-input>
+      </el-form-item>
+
+      <el-form-item prop="username">
+        <el-input size="small" @keyup.enter.native="handleLogin" v-model="loginForm.username" auto-complete="off"
+          :placeholder="$t('login.username')">
+        </el-input>
+      </el-form-item>
+      <el-form-item prop="password">
+        <el-input size="small" @keyup.enter.native="handleLogin" :type="passwordType" v-model="loginForm.password"
+          auto-complete="off" :placeholder="$t('login.password')">
+          <i class="el-icon-view" slot="suffix" @click="showPassword" />
+        </el-input>
+      </el-form-item>
+      <el-form-item v-if="this.website.captchaMode" prop="code">
+        <el-row :span="24">
+          <el-col :span="16">
+            <el-input size="small" @keyup.enter.native="handleLogin" v-model="loginForm.code" auto-complete="off"
+              :placeholder="$t('login.code')">
+              <i slot="prefix" class="icon-yanzhengma" />
+            </el-input>
+          </el-col>
+          <el-col :span="8">
+            <div class="login-code">
+              <img :src="loginForm.image" class="login-code-img" @click="refreshCode" />
+            </div>
+          </el-col>
+        </el-row>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" size="small" @click.native.prevent="handleLogin" class="login-submit">
+          {{$t('login.submit')}}
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </div>
 </template>
 
 <script>
-  import {mapGetters} from "vuex";
-  import {info} from "@/api/system/tenant";
-  import {getCaptcha} from "@/api/user";
-  import {getTopUrl} from "@/util/util";
+  import {
+    mapGetters
+  } from "vuex";
+  import {
+    info
+  } from "@/api/system/tenant";
+  import {
+    getCaptcha
+  } from "@/api/user";
+  import {
+    getTopUrl
+  } from "@/util/util";
 
-  import {getByTenantId} from "@/api/system/setting";
-  import {getTenantTypeByTenantId} from "@/api/system/tenanttype"
+  import {
+    getByTenantId
+  } from "@/api/system/setting";
+  import {
+    getTenantTypeByTenantId
+  } from "@/api/system/tenanttype"
 
   export default {
     name: "userlogin",
@@ -94,15 +92,26 @@
           image: "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",
         },
         loginRules: {
-          tenantId: [
-            {required: false, message: "请输入租户ID", trigger: "blur"}
-          ],
-          username: [
-            {required: true, message: "请输入用户名", trigger: "blur"}
-          ],
-          password: [
-            {required: true, message: "请输入密码", trigger: "blur"},
-            {min: 1, message: "密码长度最少为6位", trigger: "blur"}
+          tenantId: [{
+            required: false,
+            message: "请输入租户ID",
+            trigger: "blur"
+          }],
+          username: [{
+            required: true,
+            message: "请输入用户名",
+            trigger: "blur"
+          }],
+          password: [{
+              required: true,
+              message: "请输入密码",
+              trigger: "blur"
+            },
+            {
+              min: 1,
+              message: "密码长度最少为6位",
+              trigger: "blur"
+            }
           ]
         },
         passwordType: "password"
@@ -112,8 +121,7 @@
       this.getTenant();
       this.refreshCode();
     },
-    mounted() {
-    },
+    mounted() {},
     computed: {
       ...mapGetters(["tagWel"])
     },
@@ -127,9 +135,9 @@
         })
       },
       showPassword() {
-        this.passwordType === ""
-          ? (this.passwordType = "password")
-          : (this.passwordType = "");
+        this.passwordType === "" ?
+          (this.passwordType = "password") :
+          (this.passwordType = "");
       },
       handleLogin() {
         this.$refs.loginForm.validate(valid => {
@@ -141,26 +149,28 @@
             });
             this.$store.dispatch("LoginByUsername", this.loginForm).then(() => {
               // this.$router.push({path: this.tagWel.value});
-              getByTenantId(this.loginForm.tenantId).then(res =>{
+              getByTenantId(this.loginForm.tenantId).then(res => {
                 var _this = this;
-                getTenantTypeByTenantId(this.loginForm.tenantId).then((r)=>{
+                getTenantTypeByTenantId(this.loginForm.tenantId).then((r) => {
                   console.log(r.data.data.tenantType == 1)
-                  localStorage.setItem("tenantType",r.data.data.tenantType)
+                  localStorage.setItem("tenantType", r.data.data.tenantType)
 
-                  if(r.data.data.tenantType == 1){
+                  if (r.data.data.tenantType == 1) {
                     let routeUrl = this.$router.resolve({
                       // path: "/wel/door",
                       path: "/wel/index",
                       params: {
-                        tenantId:  this.loginForm.tenantId
+                        tenantId: this.loginForm.tenantId
                       }
                     });
                     window.open(routeUrl.href, '_top');
-                    _this.$addStorageEvent(2, "index-options",JSON.stringify(res.data.data));
+                    _this.$addStorageEvent(2, "index-options", JSON.stringify(res.data.data));
 
-                  }else{
+                  } else {
                     // _this.$addStorageEvent(2, "index-options",JSON.stringify(res.data.data));
-                    _this.$router.push({path: this.tagWel.value});
+                    _this.$router.push({
+                      path: this.tagWel.value
+                    });
                   }
 
                 })
@@ -191,5 +201,10 @@
 </script>
 
 <style scoped>
-
+  .login-title {
+    color: #3B8FF4;
+    font-family: MicrosoftYaHei-Bold;
+    font-style: normal;
+    font-weight: 800;
+  }
 </style>

src/styles/login.scss

@@ -25,7 +25,7 @@
 .login-left,
 .login-border {
   position: relative;
-  min-height: 500px;
+  height: 440px;
   align-items: center;
   display: flex;
 }
@@ -69,16 +69,12 @@
 
 .login-border {
   position: absolute;
-  right: 10%;
-  top: 30%;
-  // border-left: none;
-  border-top-right-radius: 5px;
-  border-bottom-right-radius: 5px;
+  left: 25%;
+  top: calc(50% - 220px);
   color: #fff;
   background-color:transparent;
-  width: 30%;
-  // float: left;
-  // box-sizing: border-box;
+  width: 50%;
+  overflow: hidden;
 }
 
 .login-main {
@@ -119,10 +115,9 @@
 }
 
 .login-submit {
-  width: 20%;
+  width: 100%;
   height: 45px;
-  border: 1px solid #ddd;
-  background: #0C5B8D;
+  background: #3B8FF4;
   font-size: 18px;
   letter-spacing: 2px;
   font-weight: 300;
@@ -131,14 +126,14 @@
   margin-top: 30px;
   font-family: "neo";
   transition: 0.25s;
-  float: right;
+  float: left;
 }
 
 .login-form {
-  margin: 100px 0;
+  margin: 3.125rem 0;
 
   i {
-    color: #fff;
+    color: #E0E0E0;
   }
 
   .el-form-item__content {
@@ -146,20 +141,20 @@
   }
 
   .el-form-item {
-    margin-bottom: 12px;
+    margin-bottom: 20px;
   }
 
   .el-input {
     input {
-      padding-bottom: 10px;
-      text-indent: 20px;
+	  height: 2.75rem;
+	  line-height: 2.75rem;
       background: transparent;
-      font-size: 20px;
+      font-size: 0.875rem;
       width: 100%;
       border: none;
-      border-radius: 0;
-      color: #fff;
-      border-bottom: 1px solid rgb(235, 237, 242);
+      border-radius: 4px;
+      color: #333;
+	  border: 1px solid #E0E0E0;
     }
 
     .el-input__prefix {

src/styles/sidebar.scss

@@ -81,9 +81,9 @@ $mainColor: #1b315e;
                 background: #2d58ac;
                 position: absolute;
             }
-            background-color: rgba(0,0,0,.8);
+            background-color: #042352;
             i,span{
-                color:#fff;
+                color:#02EEFF;
             }
         }
     }

src/styles/tags.scss

@@ -30,8 +30,8 @@
         font-weight: normal;
         color: #ccc;
         &.is-active {
-            color: #dddddd;
-            border-bottom: 3px solid #1b315e;
+            color: #3B8FF4;
+            border-bottom: 3px solid #3B8FF4;
         }
     }
     .el-tabs__nav-prev,

src/styles/theme/iview.scss

@@ -50,7 +50,7 @@
     background: #001529;
     .el-menu-item{
       &.is-active {
-          background-color:  #000c17;
+          background-color:  #ffaaff;
           &:before {
             display: none;
           }

src/styles/theme/star.scss

@@ -54,7 +54,7 @@
             }
         }
         &.is-active {
-            background-color: rgba(0,0,0,.4);
+            background-color: rgba(85, 170, 0, 0.4);
             i,span{
                 color:#fff;
             }

src/styles/theme/white.scss

@@ -69,7 +69,7 @@
     box-shadow: 2px 0 6px rgba(0, 21, 41, 0.15);
     background-color: #fff;
     padding-top: 70px;
-    .el-menu-item,.el-submenu__title{
+    .el-menu-item,.el-submenu__title{		
       i,span{
           color:#666
       }

src/styles/top.scss

@@ -3,10 +3,8 @@ $mainColor: #ffffff;
 $floor-first: 80px;
 $font-color: #B2C0CC;
 .avue-top {
-    padding: 0 20px;
+    padding: 0 0px;
     position: relative;
-    background: #17171A url("/img/bg/top-bg.png") no-repeat center/cover;
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
     // color: rgba(0, 0, 0, .65);
      color: $font-color;
     font-size: 28px;

src/styles/variables.scss

@@ -1,8 +1,8 @@
 
 //main
 $mainBg: #4682B4;
-$mainColor: #1b315e;
-$backgrouind: #17171A;
+$mainColor: #228adb;
+$backgrouind: #fff;
 
 
 $color-white: #fff;

src/util/dateTime.js

@@ -0,0 +1,55 @@
+/**
+ * 日期时间工具类，后期慢慢收集累积
+ * createDate 2021-11-02
+ */
+
+let dateTime = {}
+
+/**
+ * this.$dateTime.dateFormat(new Date())
+ * 2021-01-26 11:48:52
+ */
+dateTime.format=(date= new Date(),fmt="YYYY-mm-dd HH:MM:SS")=> {
+    let ret;
+    const opt = {
+        "Y+": date.getFullYear().toString(),        // 年
+        "m+": (date.getMonth() + 1).toString(),     // 月
+        "d+": date.getDate().toString(),            // 日
+        "H+": date.getHours().toString(),           // 时
+        "M+": date.getMinutes().toString(),         // 分
+        "S+": date.getSeconds().toString()          // 秒
+        // 有其他格式化字符需求可以继续添加，必须转化成字符串
+    };
+    for (let k in opt) {
+        ret = new RegExp("(" + k + ")").exec(fmt);
+        if (ret) {
+            fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
+        };
+    };
+    return fmt;
+}
+
+dateTime.createDate = (value)=>{
+  let date = typeof (value) == 'string' ? value.replace(/\-/g, '/') : value
+  return new Date(date)
+}
+
+dateTime.getTime = (value)=>{
+	if (value) {
+		let date = typeof (value) == 'string' ? value.replace(/\-/g, '/') : value
+		return new Date(date).getTime()
+	}
+	return new Date().getTime()
+} 
+
+//默认五分钟
+dateTime.getExpireTime=(value=5,date=new Date())=>{
+	let min=date.getMinutes()
+	date.setMinutes(min + value)
+	let expireTime=dateTime.format(date)
+	return expireTime
+}
+
+
+
+export default dateTime

src/views/wel/index.vue

@@ -5,101 +5,100 @@
 </template>
 
 <script>
-export default {
-  data() {
-    return {
+  export default {
+    data() {
+      return {
         option: {
-        span:8,
-        data: [
-          {
-            name: '大屏设计器',
-            src: './test/3.png',
-            text: '自动生成大屏数据面板',
-            href:'https://data.avuejs.com/build/1427195433161928705',
-            target:'_blank'
-          },
-          {
-            name: '3D场景设计器',
-            src: './test/1.png',
-            text: '构建自己的3D可视化场景',
-            href:'http://8.129.99.119/editor/editor/',
-            target:'_blank'
-          },
-          {
-            name: '信阳榕基软件园',
-            src: './test/2.png',
-            text: '信阳软件园区',
-            href:'http://192.168.1.69:1888/',
-            target:'_blank'
-          },
-          // {
-          //   name: '城市指挥中心',
-          //   src: './test/5.png',
-          //   text: '城市指挥中心',
-          //   href:'http://36.103.227.152:1777',
-          //   target:'_blank'
-          // },
-          // {
-          //   name: '城市网格管理',
-          //   src: './test/4.png',
-          //   text: '城市网格管理',
-          //   href:'http://36.103.227.152:1666',
-          //   target:'_blank'
-          // },
-          // {
-          //   name: '宁夏银川市望远工业园区德锐斯创业园',
-          //   src: './test/6.png',
-          //   text: '宁夏银川市望远工业园区德锐斯创业园',
-          //   href:'http://139.9.103.171:1999/#/wel/index21',
-          //   target:'_blank'
-          // },
-          // {
-          //   name: '宁夏数字社区',
-          //   src: './test/7.png',
-          //   text: '宁夏数字社区',
-          //   href:'http://139.9.103.171:1888/#/wel/smartCommunity',
-          //   target:'_blank'
-          // },
-          // {
-          //   name: '消防态势--设备态势',
-          //   src: './test/8.png',
-          //   text: '消防态势--设备态势',
-          //   href:'http://192.168.1.69:1889/#/wel/fireDevices',
-          //   target:'_blank'
-          // },
-          // {
-          //   name: '养老服务',
-          //   src: './test/9.png',
-          //   text: '养老服务',
-          //   href:'http://192.168.1.69:1889/#/wel/smartPension',
-          //   target:'_blank'
-          // },
-          // {
-          //   name: '公安服务',
-          //   src: './test/10.png',
-          //   text: '公安服务',
-          //   href:'http://192.168.1.69:1889/#/wel/smartPolice',
-          //   target:'_blank'
-          // },
-          // {
-          //   name: '运营服务',
-          //   src: './test/11.png',
-          //   text: '运营服务',
-          //   href:'http://192.168.1.69:1889/#/wel/operatePlatform',
-          //   target:'_blank'
-          // },
-        ]
-      },
-    }
-  },
-  methods: {
+          span: 8,
+          data: [{
+              name: '大屏设计器',
+              src: './test/3.png',
+              text: '自动生成大屏数据面板',
+              href: 'https://data.avuejs.com/build/1427195433161928705',
+              target: '_blank'
+            },
+            {
+              name: '3D场景设计器',
+              src: './test/1.png',
+              text: '构建自己的3D可视化场景',
+              href: 'http://8.129.99.119/editor/editor/',
+              target: '_blank'
+            },
+            {
+              name: '信阳榕基软件园',
+              src: './test/2.png',
+              text: '信阳软件园区',
+              href: 'http://192.168.1.69:1888/',
+              target: '_blank'
+            },
+            // {
+            //   name: '城市指挥中心',
+            //   src: './test/5.png',
+            //   text: '城市指挥中心',
+            //   href:'http://36.103.227.152:1777',
+            //   target:'_blank'
+            // },
+            // {
+            //   name: '城市网格管理',
+            //   src: './test/4.png',
+            //   text: '城市网格管理',
+            //   href:'http://36.103.227.152:1666',
+            //   target:'_blank'
+            // },
+            // {
+            //   name: '宁夏银川市望远工业园区德锐斯创业园',
+            //   src: './test/6.png',
+            //   text: '宁夏银川市望远工业园区德锐斯创业园',
+            //   href:'http://139.9.103.171:1999/#/wel/index21',
+            //   target:'_blank'
+            // },
+            // {
+            //   name: '宁夏数字社区',
+            //   src: './test/7.png',
+            //   text: '宁夏数字社区',
+            //   href:'http://139.9.103.171:1888/#/wel/smartCommunity',
+            //   target:'_blank'
+            // },
+            // {
+            //   name: '消防态势--设备态势',
+            //   src: './test/8.png',
+            //   text: '消防态势--设备态势',
+            //   href:'http://192.168.1.69:1889/#/wel/fireDevices',
+            //   target:'_blank'
+            // },
+            // {
+            //   name: '养老服务',
+            //   src: './test/9.png',
+            //   text: '养老服务',
+            //   href:'http://192.168.1.69:1889/#/wel/smartPension',
+            //   target:'_blank'
+            // },
+            // {
+            //   name: '公安服务',
+            //   src: './test/10.png',
+            //   text: '公安服务',
+            //   href:'http://192.168.1.69:1889/#/wel/smartPolice',
+            //   target:'_blank'
+            // },
+            // {
+            //   name: '运营服务',
+            //   src: './test/11.png',
+            //   text: '运营服务',
+            //   href:'http://192.168.1.69:1889/#/wel/operatePlatform',
+            //   target:'_blank'
+            // },
+          ]
+        },
+      }
+    },
+    methods: {
 
+    }
   }
-}
 </script>
 
 <style scoped lang="scss">
-   /deep/ .data-card .item {
+  /deep/ .data-card .item {
     position: relative;
     margin: 0 auto 50px;
     width: 500px;
@@ -111,8 +110,9 @@ export default {
     border-style: solid; */
     /* box-shadow: 2px 2px 2px #30313B; */
 
-}
-/deep/ .el-card {
+  }
+
+  /deep/ .el-card {
     border: 1px solid transparent;
-}
+  }
 </style>