系统通知样式优化

首页bug修复

src/components/GuipToolTip.vue

@@ -1,5 +1,5 @@
 <template>
-    <el-tooltip
+    <el-tooltip :value="isShow" :manual="manual"
       v-bind="mergedProps"
       :disabled="disabled"
       :visible="controlledVisible"
@@ -44,7 +44,9 @@
       hideAfterClick: {
         type: Boolean,
         default: false
-      }
+      },
+      //是否直接显示
+      isShow: Boolean,
     },
     data() {
       return {

src/components/SliderMenu.vue

@@ -14,6 +14,9 @@
             <img v-else class="point" src="../assets/menu-open.svg" @click="changeMenuStatus(false)" alt="">
           </GuipToolTip>
         </div>
+        <GuipToolTip v-if="isShowCreateBtn" :content="createNewMsg" placement="right" :isShow="isShowCreateMsg" :manual="true">
+          <div @click="addSite" class="create-new-site" :class="!isCollapse?'':'create-new-site-short'" >{{!isCollapse ? '创建首个网站' : '建站'}}</div>
+        </GuipToolTip>
         <template v-for="item in menuData" >
           <el-submenu v-if="item.children"  :key="item.index" :index="item.index">
             <template slot="title">
@@ -64,10 +67,19 @@ export default {
   },
   data() {
     return {
+      // AUTH
+      token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE3NTI2NDY1NDUsIm5iZiI6MTc1MjY0NjU0NSwiZXhwIjoxNzU1MjM4NTQ1LCJ1c2VyIjoic3VidXNlciIsImxvZ2luX3R5cGUiOjAsImFpZCI6IjEifQ.G-Is-x9qPMiV_urOlDPQVRjfAIozySxL5EK2k82d46k',
       isCollapse: false,
       routerList: [],
       currentMenuItem:'',
-      currentMenuParent:''
+      currentMenuParent:'',
+      isShowCreateBtn: false,
+      isShowCreateMsg: false,
+      addNewSiteUrl:'/agent/siteAdd',
+      createNewMsg: '',       // 用户输入
+      displayedText: '尽快建网站，售卖服务',   // 显示的逐字文字
+      typingIndex: 0,      // 当前显示到第几个字符
+      typingTimer: null
     };
   },
   watch: {
@@ -77,8 +89,58 @@ export default {
     },
   },
   methods: {
+    // 获取站点列表
+    getSiteNo() {
+      const that = this
+      that.$http('POST', '/agentnew/ajax_get_site_no', {
+      },{
+        headers:{
+          'Auth': this.token
+        }
+      }).then(response => {
+        if(response.status && response.data){
+          that.$nextTick(() => {
+            that.isShowCreateBtn = true
+            that.createSiteMsg()
+          })
+        }
+      }).catch(error => {
+        console.error(error, 'error')
+      })
+    },
+    createSiteMsg() {
+      clearInterval(this.typingTimer);
+      this.typingTimer = setInterval(() => {
+        if (this.typingIndex < this.displayedText.length) {
+          this.createNewMsg += this.displayedText.slice(this.typingIndex,this.typingIndex+1);
+          this.typingIndex++;
+          this.isShowCreateMsg = true;
+        } else {
+          clearInterval(this.typingTimer);
+          setTimeout(()=>{
+            this.isShowCreateMsg = false;
+          },1500)
+          setTimeout(()=>{
+            this.createNewMsg = '';
+            this.typingIndex = 0;
+            this.createSiteMsg()
+          },2000)
+        }
+      }, 200);
+    },
+    addSite(){
+        window.open(this.addNewSiteUrl, '_blank');
+    },
     changeMenuStatus(flag) {
       this.isCollapse = flag;
+
+      this.isShowCreateMsg = false;
+      this.createNewMsg = '';
+      this.typingIndex = 0;
+      clearInterval(this.typingTimer);
+      setTimeout(()=>{
+        this.createSiteMsg()
+      },1000)
     },
     handleOpen(key, keyPath) {
       console.log(key, keyPath);
@@ -130,6 +192,7 @@ export default {
     // // 初始化时设置默认激活的菜单项
     // this.activeMenu = this.$route.path;
     this.updateCurrentMenu();
+    this.getSiteNo()
   }
 }
 </script>
@@ -215,6 +278,22 @@ export default {
   }
 }
 
+.create-new-site{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 11px 12px;
+  border-radius: 4px;
+  background: linear-gradient(290deg, #FF4143 4%, #FF768B 92%);
+  font-size: 14px;
+  color: #fff;
+  font-weight: bold;
+  margin: 0 20px;
+}
+.create-new-site-short{
+  margin: 0 5px;
+}
+
 ::v-deep .el-submenu {
   // width: 16px;
   font-size: 12px;