From a027b58ea5857416f24f3ebf90a560ab97023214 Mon Sep 17 00:00:00 2001
From: Poised_flw <luofeihit2010@gmail.com>
Date: Fri, 29 Oct 2021 17:49:51 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E5=BA=94=E7=94=A8=E6=9C=80?=
 =?UTF-8?q?=E5=B0=8F=E5=8C=96=E5=90=8E=E7=9A=84=E6=81=A2=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Footer.vue          | 465 ++++++++++++++++++++++++++++-
 src/tis/layouts/LoginContainer.vue |  14 +-
 2 files changed, 473 insertions(+), 6 deletions(-)

diff --git a/src/components/Footer.vue b/src/components/Footer.vue
index 7d6ca86..b242f25 100644
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@@ -1 +1,464 @@
-<template>
    <div class="footer-main" v-show="!openByKt">
        <!--<img class="msg" :src="`/TIS_PLATFORM/theme/${$tis.bus.theme}/消息按钮.png`" @click="appMenu=!appMenu"/>-->
        <div class="menubtnbox msg" @click="showAppMenus">
            <div class="menubtn"></div>
            <div class="menubtnicon-short" style="top: 42px;"></div>
            <div class="menubtnicon-short" style="top: 54px;"></div>
            <div class="menubtnicon-short" style="top: 66px;"></div>
            <div class="menubtnicon-long" style="top: 42px;"></div>
            <div class="menubtnicon-long" style="top: 54px;"></div>
            <div class="menubtnicon-long" style="top: 66px;"></div>
        </div>
        <div v-show="appMenu" class="menu-content">
            <div :class="['item',currentApp === app.name ? 'active':'']" v-for="app in residentApps"
                 :key="app.id" @click="onOpenApp(app)">
                {{app.name}}
            </div>
        </div>
        <div class="footer" v-show="currentAppMenus">
            <div class="menus">
                <div :class="['item',menu.active ? 'active':'']" v-for="(menu,index) in currentAppMenus"
                     @click="handleMenuClick(menu)"
                     :key="index">
                    {{menu.name}}
                </div>
            </div>
            <span class="widgets" @click="openWidgetPanel">
      <img :src="`/TIS_PLATFORM/theme/${$tis.bus.theme}/浮窗图标.svg`" style="height: 70px; margin: -25px"/>
      <span>浮窗</span>
    </span>
            <div class="more" @click="onShowMore">
                <div v-if="showMoreContent" class="content">
                    <div class="item" v-for="app in moreApps" :key="app.id" @click="onOpenApp(app)">{{app.name}}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
  export default {
    name: "Footer",
    data() {
      return {
        appMenu: false,
        showCurrentAppSubMenu: false,
        open: false,
        showMoreContent: false,
        Apps: []
      };
    },
    mounted() {
      this.$tis.$on("TIS_TEMPLATE_MENU_ACTIVE", { system: true }, () => {
        console.log('菜单更新--------------->');
        this.$forceUpdate();
      });
    },
    computed: {
      currentApp() {
        return this.$tis.getCurrentApp() && this.$tis.getCurrentApp().name;
      },
      currentAppMenus() {
        return this.$tis.getCurrentApp() && this.$tis.getCurrentApp()["menuBar"];
      },
      openByKt() {
        return this.$tis.openFullScreenAppId();
      },
      allApps() {
        return this.$tis.getApps().filter((a) => !a.default && !a.system);
      },
      residentApps() {
        return this.apps.slice(0, 6);
      },
      moreApps() {
        return [...this.$tis.getApps().filter(a => a.system), ...this.apps.slice(6, this.apps.length)];
      },
      recentOpenApps() {
        // 最近打开的5个
        return [...this.allApps]
          .filter((a) => a.lastOpenTime > 0)
          .sort((a, b) => {
            return b.lastOpenTime - a.lastOpenTime;
          })
          .slice(0, 5);
      },
      mostOpenApps() {
        // 最常打开的5个
        return [...this.allApps]
          .filter((a) => a.openTimes > 0)
          .sort((a, b) => {
            return b.openTimes - a.openTimes;
          })
          .slice(0, 5);
      },
      apps() {
        return this.allApps;
      }
    },
    methods: {
      //显示二级菜单
      showAppMenus() {
        this.appMenu = !this.appMenu;
        this.$emit("showAppMenus", this.appMenu);
      },
      //处理二级菜单点击事件
      handleMenuClick(menu) {
        this.$tis.onCurrentAppMenu(menu);
      },
      //  聊天框显示隐藏
      toggleBox() {
        // this.open = !this.open;
        // 展示聊天窗口
        this.$tis.openWidget(this.$tis.bus.alias["ZXZH"]);
      },
      onShowMore() {
        this.showMoreContent = !this.showMoreContent;
      },
      onOpenApp(app) {
        console.log("打开APP", app.id);
        this.$tis.openApp(app.id);
      },
      openWidgetPanel() {
        this.$tis.openWidgetPanel();
      }
    }
  };
</script>

<style lang="scss" scoped>
    .menubtnbox{
        width:116px;
        height: 116px;
        /*background-color: #1C1C1B;*/
        position: relative;
    }
    .menubtn{
        content: '';
        width: 81px;
        height: 81px;
        border: 0.4px #979797 solid;
        position: absolute;
        transform: rotate(45deg);
        top: 17px;
        left: 17px;
        background-color: #2B2A26;
    }
    .menubtnicon-short{
        width: 10px;
        height: 6px;
        background-image:  linear-gradient(206deg, #FFE17A 5%, #FFEDC3 100%);
        transform: skewX(-20deg);
        position: absolute;
        left: 36px;
    }
    .menubtnicon-long{
        width: 30px;
        height: 6px;
        background-image:  linear-gradient(206deg, #FFE17A 5%, #FFEDC3 100%);
        transform: skewX(-20deg);
        position: absolute;
        left: 48px;
    }
    .footer-main{
        .menu-content {
            position: absolute;
            bottom: 4.604vw;
            right: -1.083vw;
            background: rgba(0, 0, 0, 0.8);
            width: 8.698vw;
            text-align: center;
            left: 10px;

            .item {
                padding: 1.042vw 0;
                font-size: 1.25vw;
                color: #f1d252;
                position: relative;

                &.active {
                    background: #0a6194;
                }

                &:hover {
                    &:before {
                        content: "";
                        border: var(--footer-item-hover-border);
                        position: absolute;
                        left: 0;
                        top: 0;
                        width: 100%;
                        height: 100%;
                        background-image: var(--footer-item-hover-background-image);
                        box-shadow: var(--footer-item-hover-box-shadow);
                    }
                }
            }
        }
    }
    .msg {
        width: 80px;
        position: absolute;
        bottom: 6px;
        cursor: pointer;
        left: 40px;
        z-index: 999;
    }
    .footer {
        opacity: var(--footer-opacity);
        border: var(--footer-border);
        background-image: var(--footer-background-image);
        height: 63px;
        display: flex;
        align-items: center;



        .menus {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            flex: 1;

            .item {
                white-space: nowrap;
                // padding: 18px 30px;
                padding: 18px 2vw;
                font-size: 24px;
                color: var(--footer-item-color);
                position: relative;
                margin: 0 5px;
                cursor: pointer;

                &.active::after {
                    content: "";
                    position: absolute;
                    bottom: 5px;
                    left: 50%;
                    transform: translateX(-50%);
                    width: 6px;
                    height: 6px;
                    border-radius: 50%;
                    background: rgba(255, 255, 255, 0.85);
                }

                &:hover {
                    &:before {
                        content: "";
                        border: var(--footer-item-hover-border);
                        position: absolute;
                        left: 0;
                        top: 0;
                        width: 100%;
                        height: 100%;
                        background-image: var(--footer-item-hover-background-image);
                        box-shadow: var(--footer-item-hover-box-shadow);
                        transform: skewX(-26deg);
                    }
                }
            }
        }

        .widgets {
            position: relative;
            z-index: 1;
            padding: 18px 30px;
            font-size: 24px;
            cursor: pointer;
            margin-left: 2px;
            color: #fff;
            font-size: 24px;
            display: flex;
            align-items: center;
            white-space: nowrap;

            .menu-content {
                position: absolute;
                bottom: 4.604vw;
                right: -1.083vw;
                background: rgba(0, 0, 0, 0.8);
                width: 8.698vw;
                text-align: center;

                .item {
                    padding: 1.042vw 0;
                    font-size: 1.25vw;
                    color: #f1d252;
                    position: relative;

                    &.active {
                        background: #0a6194;
                    }

                    &:hover {
                        &:before {
                            content: "";
                            border: var(--footer-item-hover-border);
                            position: absolute;
                            left: 0;
                            top: 0;
                            width: 100%;
                            height: 100%;
                            background-image: var(--footer-item-hover-background-image);
                            box-shadow: var(--footer-item-hover-box-shadow);
                        }
                    }
                }
            }

            span {
                margin-left: 10px;
                text-shadow: var(--status-bar-widget-btn-text-shadow);
                color: var(--status-bar-widget-btn-color);
            }

            &::before {
                border: var(--footer-item-hover-border);
                content: "";
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;

                transform: skewX(-26deg);
            }

            &:hover {
                &:before {
                    background-image: var(--footer-item-hover-background-image);
                    box-shadow: var(--footer-item-hover-box-shadow);
                }
            }
        }

        .more {
            margin: 0 20px;
            width: 0;
            height: 0;
            cursor: pointer;
            border-bottom: var(--footer-more-border-bottom);
            border-right: 10px solid transparent;
            border-left: 10px solid transparent;
            position: relative;
            cursor: pointer;

            .content {
                position: absolute;
                bottom: 50px;
                right: -40px;
                background: rgba(0, 0, 0, 0.8);
                width: 167px;
                text-align: center;

                .item {
                    padding: 20px 0;
                    font-size: 24px;
                    color: #f1d252;
                    position: relative;

                    &:hover {
                        &:before {
                            content: "";
                            border: var(--footer-item-hover-border);
                            position: absolute;
                            left: 0;
                            top: 0;
                            width: 100%;
                            height: 100%;
                            background-image: var(--footer-item-hover-background-image);
                            box-shadow: var(--footer-item-hover-box-shadow);
                        }
                    }
                }
            }
        }
    }

    .zhang-chat {
        background: rgba(0, 0, 0, 0.7);
        width: 526px;
        height: 168px;
        position: absolute;
        top: -164px;
        left: 22px;

        img {
            width: 100%;
            height: 100%;
        }
    }


    //css的图标闪烁样式
    // .msg {
    //     // width: 300px;                                    /* 宽度 */
    //     // height: 300px;                                    /* 高度 */
    // 	// border:#666 1px solid;
    // 	// border-radius:50%;
    //     opacity: 0.1;                                   /* 不透明度 */
    //     overflow: hidden;                               /* 溢出隐藏 */
    //     // background:#FF3;                            /* 背景色 */
    //     // margin: 25% auto;                               /* 外边距 */

    //     /* IE10、Firefox and Opera，IE9以及更早的版本不支持 */
    //     animation-name: breath;                         /* 动画名称 */
    //     animation-duration: 1s;                         /* 动画时长3秒 */
    //     animation-timing-function: ease-in-out;         /* 动画速度曲线：以低速开始和结束 */
    //     animation-iteration-count: infinite;            /* 播放次数：无限 */

    //     /* Safari and Chrome */
    //     -webkit-animation-name: breath;                 /* 动画名称 */
    //     -webkit-animation-duration: 1s;                 /* 动画时长3秒 */
    //     -webkit-animation-timing-function: ease-in-out; /* 动画速度曲线：以低速开始和结束 */
    //     -webkit-animation-iteration-count: infinite;    /* 播放次数：无限 */
    // }

    // @keyframes breath {
    //     from { opacity: 0.1; }                          /* 动画开始时的不透明度 */
    //     50%  { opacity:   1; }                          /* 动画50% 时的不透明度 */
    //     to   { opacity: 0.1; }                          /* 动画结束时的不透明度 */
    // }

    // @-webkit-keyframes breath {
    //     from { opacity: 0.1; }                          /* 动画开始时的不透明度 */
    //     50%  { opacity:   1; }                          /* 动画50% 时的不透明度 */
    //     to   { opacity: 0.1; }                          /* 动画结束时的不透明度 */
    // }
</style>
\ No newline at end of file
+<template>
+  <div class="footer-main" v-show="!openByKt">
+    <!--<img class="msg" :src="`/TIS_PLATFORM/theme/${$tis.bus.theme}/消息按钮.png`" @click="appMenu=!appMenu"/>-->
+    <div class="menubtnbox msg" @click="showAppMenus">
+      <div class="menubtn"></div>
+      <div class="menubtnicon-short" style="top: 42px;"></div>
+      <div class="menubtnicon-short" style="top: 54px;"></div>
+      <div class="menubtnicon-short" style="top: 66px;"></div>
+      <div class="menubtnicon-long" style="top: 42px;"></div>
+      <div class="menubtnicon-long" style="top: 54px;"></div>
+      <div class="menubtnicon-long" style="top: 66px;"></div>
+    </div>
+    <div v-show="appMenu" class="menu-content">
+      <div
+        :class="['item', currentApp === app.name ? 'active' : '']"
+        v-for="app in residentApps"
+        :key="app.id"
+        @click="onOpenApp(app)"
+      >
+        {{ app.name }}
+      </div>
+    </div>
+    <div class="footer" v-show="currentAppMenus">
+      <div class="menus">
+        <div
+          :class="['item', menu.active ? 'active' : '']"
+          v-for="(menu, index) in currentAppMenus"
+          @click="handleMenuClick(menu)"
+          :key="index"
+        >
+          {{ menu.name }}
+          <span class="item-dot" v-if="minimizeMap[menu.component[0]]"></span>
+        </div>
+      </div>
+      <span class="widgets" @click="openWidgetPanel">
+        <img
+          :src="`/TIS_PLATFORM/theme/${$tis.bus.theme}/浮窗图标.svg`"
+          style="height: 70px; margin: -25px"
+        />
+        <span>浮窗</span>
+      </span>
+      <div class="more" @click="onShowMore">
+        <div v-if="showMoreContent" class="content">
+          <div
+            class="item"
+            v-for="app in moreApps"
+            :key="app.id"
+            @click="onOpenApp(app)"
+          >
+            {{ app.name }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Footer",
+  data() {
+    return {
+      appMenu: false,
+      showCurrentAppSubMenu: false,
+      open: false,
+      showMoreContent: false,
+      Apps: [],
+      minimizeMap: {}
+    };
+  },
+  mounted() {
+    this.$tis.$on("TIS_TEMPLATE_MENU_ACTIVE", { system: true }, params => {
+      console.log("菜单更新--------------->", params);
+      let minimizeMap = {};
+      params.onActives.forEach(v => {
+        if (v.status === "minimize") {
+          minimizeMap[v.component] = true;
+        }
+      });
+      this.minimizeMap = minimizeMap;
+      this.$forceUpdate();
+    });
+  },
+  computed: {
+    currentApp() {
+      return this.$tis.getCurrentApp() && this.$tis.getCurrentApp().name;
+    },
+    currentAppMenus() {
+      return this.$tis.getCurrentApp() && this.$tis.getCurrentApp()["menuBar"];
+    },
+    openByKt() {
+      return this.$tis.openFullScreenAppId();
+    },
+    allApps() {
+      return this.$tis.getApps().filter(a => !a.default && !a.system);
+    },
+    residentApps() {
+      return this.apps.slice(0, 6);
+    },
+    moreApps() {
+      return [
+        ...this.$tis.getApps().filter(a => a.system),
+        ...this.apps.slice(6, this.apps.length)
+      ];
+    },
+    recentOpenApps() {
+      // 最近打开的5个
+      return [...this.allApps]
+        .filter(a => a.lastOpenTime > 0)
+        .sort((a, b) => {
+          return b.lastOpenTime - a.lastOpenTime;
+        })
+        .slice(0, 5);
+    },
+    mostOpenApps() {
+      // 最常打开的5个
+      return [...this.allApps]
+        .filter(a => a.openTimes > 0)
+        .sort((a, b) => {
+          return b.openTimes - a.openTimes;
+        })
+        .slice(0, 5);
+    },
+    apps() {
+      return this.allApps;
+    }
+  },
+  methods: {
+    //显示二级菜单
+    showAppMenus() {
+      this.appMenu = !this.appMenu;
+      this.$emit("showAppMenus", this.appMenu);
+    },
+    //处理二级菜单点击事件
+    handleMenuClick(menu) {
+      this.$tis.onCurrentAppMenu(menu);
+    },
+    //  聊天框显示隐藏
+    toggleBox() {
+      // this.open = !this.open;
+      // 展示聊天窗口
+      this.$tis.openWidget(this.$tis.bus.alias["ZXZH"]);
+    },
+    onShowMore() {
+      this.showMoreContent = !this.showMoreContent;
+    },
+    onOpenApp(app) {
+      console.log("打开APP", app.id);
+      this.$tis.openApp(app.id);
+    },
+    openWidgetPanel() {
+      this.$tis.openWidgetPanel();
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.menubtnbox {
+  width: 116px;
+  height: 116px;
+  /*background-color: #1C1C1B;*/
+  position: relative;
+}
+.menubtn {
+  content: "";
+  width: 81px;
+  height: 81px;
+  border: 0.4px #979797 solid;
+  position: absolute;
+  transform: rotate(45deg);
+  top: 17px;
+  left: 17px;
+  background-color: #2b2a26;
+}
+.menubtnicon-short {
+  width: 10px;
+  height: 6px;
+  background-image: linear-gradient(206deg, #ffe17a 5%, #ffedc3 100%);
+  transform: skewX(-20deg);
+  position: absolute;
+  left: 36px;
+}
+.menubtnicon-long {
+  width: 30px;
+  height: 6px;
+  background-image: linear-gradient(206deg, #ffe17a 5%, #ffedc3 100%);
+  transform: skewX(-20deg);
+  position: absolute;
+  left: 48px;
+}
+.footer-main {
+  .menu-content {
+    position: absolute;
+    bottom: 4.604vw;
+    right: -1.083vw;
+    background: rgba(0, 0, 0, 0.8);
+    width: 8.698vw;
+    text-align: center;
+    left: 10px;
+
+    .item {
+      padding: 1.042vw 0;
+      font-size: 1.25vw;
+      color: #f1d252;
+      position: relative;
+
+      &.active {
+        background: #0a6194;
+      }
+
+      &:hover {
+        &:before {
+          content: "";
+          border: var(--footer-item-hover-border);
+          position: absolute;
+          left: 0;
+          top: 0;
+          width: 100%;
+          height: 100%;
+          background-image: var(--footer-item-hover-background-image);
+          box-shadow: var(--footer-item-hover-box-shadow);
+        }
+      }
+    }
+  }
+}
+.msg {
+  width: 80px;
+  position: absolute;
+  bottom: 6px;
+  cursor: pointer;
+  left: 40px;
+  z-index: 999;
+}
+.footer {
+  opacity: var(--footer-opacity);
+  border: var(--footer-border);
+  background-image: var(--footer-background-image);
+  height: 63px;
+  display: flex;
+  align-items: center;
+
+  .menus {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    flex: 1;
+
+    .item {
+      white-space: nowrap;
+      // padding: 18px 30px;
+      padding: 18px 2vw;
+      font-size: 24px;
+      color: var(--footer-item-color);
+      position: relative;
+      margin: 0 5px;
+      cursor: pointer;
+
+      &-dot {
+        position: absolute;
+        bottom: 4px;
+        left: 50%;
+        width: 6px;
+        height: 6px;
+        border-radius: 50%;
+        background: red;
+      }
+
+      &.active::after {
+        content: "";
+        position: absolute;
+        bottom: 5px;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 6px;
+        height: 6px;
+        border-radius: 50%;
+        background: rgba(255, 255, 255, 0.85);
+      }
+
+      &:hover {
+        &:before {
+          content: "";
+          border: var(--footer-item-hover-border);
+          position: absolute;
+          left: 0;
+          top: 0;
+          width: 100%;
+          height: 100%;
+          background-image: var(--footer-item-hover-background-image);
+          box-shadow: var(--footer-item-hover-box-shadow);
+          transform: skewX(-26deg);
+        }
+      }
+    }
+  }
+
+  .widgets {
+    position: relative;
+    z-index: 1;
+    padding: 18px 30px;
+    font-size: 24px;
+    cursor: pointer;
+    margin-left: 2px;
+    color: #fff;
+    font-size: 24px;
+    display: flex;
+    align-items: center;
+    white-space: nowrap;
+
+    .menu-content {
+      position: absolute;
+      bottom: 4.604vw;
+      right: -1.083vw;
+      background: rgba(0, 0, 0, 0.8);
+      width: 8.698vw;
+      text-align: center;
+
+      .item {
+        padding: 1.042vw 0;
+        font-size: 1.25vw;
+        color: #f1d252;
+        position: relative;
+
+        &.active {
+          background: #0a6194;
+        }
+
+        &:hover {
+          &:before {
+            content: "";
+            border: var(--footer-item-hover-border);
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            background-image: var(--footer-item-hover-background-image);
+            box-shadow: var(--footer-item-hover-box-shadow);
+          }
+        }
+      }
+    }
+
+    span {
+      margin-left: 10px;
+      text-shadow: var(--status-bar-widget-btn-text-shadow);
+      color: var(--status-bar-widget-btn-color);
+    }
+
+    &::before {
+      border: var(--footer-item-hover-border);
+      content: "";
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+
+      transform: skewX(-26deg);
+    }
+
+    &:hover {
+      &:before {
+        background-image: var(--footer-item-hover-background-image);
+        box-shadow: var(--footer-item-hover-box-shadow);
+      }
+    }
+  }
+
+  .more {
+    margin: 0 20px;
+    width: 0;
+    height: 0;
+    cursor: pointer;
+    border-bottom: var(--footer-more-border-bottom);
+    border-right: 10px solid transparent;
+    border-left: 10px solid transparent;
+    position: relative;
+    cursor: pointer;
+
+    .content {
+      position: absolute;
+      bottom: 50px;
+      right: -40px;
+      background: rgba(0, 0, 0, 0.8);
+      width: 167px;
+      text-align: center;
+
+      .item {
+        padding: 20px 0;
+        font-size: 24px;
+        color: #f1d252;
+        position: relative;
+
+        &:hover {
+          &:before {
+            content: "";
+            border: var(--footer-item-hover-border);
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            background-image: var(--footer-item-hover-background-image);
+            box-shadow: var(--footer-item-hover-box-shadow);
+          }
+        }
+      }
+    }
+  }
+}
+
+.zhang-chat {
+  background: rgba(0, 0, 0, 0.7);
+  width: 526px;
+  height: 168px;
+  position: absolute;
+  top: -164px;
+  left: 22px;
+
+  img {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+//css的图标闪烁样式
+// .msg {
+//     // width: 300px;                                    /* 宽度 */
+//     // height: 300px;                                    /* 高度 */
+// 	// border:#666 1px solid;
+// 	// border-radius:50%;
+//     opacity: 0.1;                                   /* 不透明度 */
+//     overflow: hidden;                               /* 溢出隐藏 */
+//     // background:#FF3;                            /* 背景色 */
+//     // margin: 25% auto;                               /* 外边距 */
+
+//     /* IE10、Firefox and Opera，IE9以及更早的版本不支持 */
+//     animation-name: breath;                         /* 动画名称 */
+//     animation-duration: 1s;                         /* 动画时长3秒 */
+//     animation-timing-function: ease-in-out;         /* 动画速度曲线：以低速开始和结束 */
+//     animation-iteration-count: infinite;            /* 播放次数：无限 */
+
+//     /* Safari and Chrome */
+//     -webkit-animation-name: breath;                 /* 动画名称 */
+//     -webkit-animation-duration: 1s;                 /* 动画时长3秒 */
+//     -webkit-animation-timing-function: ease-in-out; /* 动画速度曲线：以低速开始和结束 */
+//     -webkit-animation-iteration-count: infinite;    /* 播放次数：无限 */
+// }
+
+// @keyframes breath {
+//     from { opacity: 0.1; }                          /* 动画开始时的不透明度 */
+//     50%  { opacity:   1; }                          /* 动画50% 时的不透明度 */
+//     to   { opacity: 0.1; }                          /* 动画结束时的不透明度 */
+// }
+
+// @-webkit-keyframes breath {
+//     from { opacity: 0.1; }                          /* 动画开始时的不透明度 */
+//     50%  { opacity:   1; }                          /* 动画50% 时的不透明度 */
+//     to   { opacity: 0.1; }                          /* 动画结束时的不透明度 */
+// }
+</style>
diff --git a/src/tis/layouts/LoginContainer.vue b/src/tis/layouts/LoginContainer.vue
index f611f6d..ed77eda 100644
--- a/src/tis/layouts/LoginContainer.vue
+++ b/src/tis/layouts/LoginContainer.vue
@@ -10,13 +10,17 @@ export default {
     Login() {
       return this.$tis.layouts.Login;
     },
-    deviceType(){
+    deviceType() {
       return this.$tis.getDeviceType();
     },
     visible() {
-      return !!this.Login && this.$tis.isVisibleWidgetsLoginPanel() && !this.$tis.openFullScreenAppId();
-    },
-  },
+      return (
+        !!this.Login &&
+        this.$tis.isVisibleWidgetsLoginPanel() &&
+        !this.$tis.openFullScreenAppId()
+      );
+    }
+  }
 };
 </script>
 
@@ -29,4 +33,4 @@ export default {
   left: 0;
   z-index: 300;
 }
-</style>
\ No newline at end of file
+</style>