修改UI工具栏右侧左边UI

src/views/h5editor/index.vue

@@ -27,45 +27,39 @@
       <!-- 属性设置 -->
       <div class="control-panel">
         <div class="funcs">
-          <el-tooltip effect="dark" content="创建文本" placement="left">
+          <div class="tagPage">
             <div style="width:44px;height: 44px; margin-top: 20px;display: flex;justify-content: center"
               @click="togglePanel(1)" :class="{ active: panelState === 1 }">
               <img style="width:34px;height: 34px;" src="http://yun-image.elab-plus.com/images/dyb/new-text.png" alt="">
             </div>
-          </el-tooltip>
-          <el-tooltip effect="dark" content="装饰元素" placement="left">
+            <div class="page-tag-btn-tip">创建文本</div>
+          </div>
+          <div class="tagPage">
             <div style="width:44px;height: 44px;display: flex;justify-content: center" @click="togglePanel(2)"
               :class="{ active: panelState === 2 }">
               <img style="width:34px;height: 34px;" src="http://yun-image.elab-plus.com/images/dyb/new-zhuangshi.png"
                 alt="">
             </div>
-          </el-tooltip>
-          <el-tooltip effect="dark" content="新建轮播" placement="left">
+            <div class="page-tag-btn-tip">装饰元素</div>
+          </div>
+          <div class="tagPage">
             <div style="width:44px;height: 44px;display: flex;justify-content: center" @click="togglePanel(3)"
               :class="{ active: panelState === 3 }">
               <img style="width:34px;height: 34px;" src="http://yun-image.elab-plus.com/images/dyb/new-lunbo.png"
                 alt="">
             </div>
-          </el-tooltip>
-          <!--<el-tooltip  effect="dark" content="播放动画" placement="left">-->
-          <!--<button class="func el-icon-caret-right" @click="playAnimate"></button>-->
-          <!--</el-tooltip>-->
-          <!-- 默认画板页面编辑 -->
-          <!-- <el-tooltip effect="dark" content="交互按钮" placement="left">
-            <div style="width:44px;height: 44px;display: flex;justify-content: center" @click="togglePanel(0)"
-              :class="{ active: panelState === 0 }">
-              <img style="width:34px;height: 34px;" src="http://yun-image.elab-plus.com/images/dyb/new-jiaohuanniu.png"
-                alt="">
-            </div>
-          </el-tooltip> -->
+            <div class="page-tag-btn-tip">新建轮播</div>
+          </div>
 
-          <el-tooltip effect="dark" content="交互按钮" placement="left">
+          <div class="tagPage">
             <div style="width:44px;height: 44px;display: flex;justify-content: center" @click="togglePanel(4)"
               :class="{ active: panelState === 4 }">
               <img style="width:34px;height: 34px;" src="http://yun-image.elab-plus.com/images/dyb/new-jiaohuanniu.png"
                 alt="">
             </div>
-          </el-tooltip>
+            <div class="page-tag-btn-tip">交互按钮</div>
+          </div>
+
           <el-tooltip v-show="false" effect="dark" content="保存" placement="left">
             <div style="width:44px;height: 44px;display: flex;justify-content: center" @click="save">
               <img style="width:34px;height: 34px;" src="http://yun-image.elab-plus.com/images/dyb/new-jiaohuanniu.png"
@@ -107,7 +101,8 @@
                 </el-color-picker>
               </div>
 
-              <div style ="display: flex;flex-direction: row ;padding-left: 23px;padding-top: 12px;padding-bottom: 12px;border-bottom: #E2E4EE solid 1px;">
+              <div
+                style="display: flex;flex-direction: row ;padding-left: 23px;padding-top: 12px;padding-bottom: 12px;border-bottom: #E2E4EE solid 1px;">
                 <div style="display: flex;flex-direction: column;">
                   <label style="font-size:12px;
                       font-family:MicrosoftYaHei;
@@ -115,7 +110,7 @@
                   <el-input-number v-model="canvasWidth" :disabled="true" size="small" style="width:110px;">
                   </el-input-number>
                 </div>
-                <div  style="display: flex;flex-direction: column; margin-left:45px">
+                <div style="display: flex;flex-direction: column; margin-left:45px">
                   <label style="font-size:12px;
                       font-family:MicrosoftYaHei;
                       color:rgba(51,51,51,1); margin-bottom: 6px;">画布高度</label>
@@ -129,7 +124,7 @@
               ">
                 <label style="font-size:12px;
                 font-family:MicrosoftYaHei; display:block;
-                color:rgba(51,51,51,1);margin-bottom:10px;" >屏飘动效</label>
+                color:rgba(51,51,51,1);margin-bottom:10px;">屏飘动效</label>
                 <div class="content" :xxx="`animatedNameGlobal`">
                   <div
                     style="display: inline-flex;overflow: hidden;text-align: center; cursor: pointer; margin-right:12px;"
@@ -145,22 +140,23 @@
                 </div>
               </div>
 
-              <div class="clearfix" v-if="panelTabState !== 1 && panelTabState !== 3"  style="border-bottom: #E2E4EE solid 1px; padding-top:010px;padding-bottom:2px;
+              <div class="clearfix" v-if="panelTabState !== 1 && panelTabState !== 3" style="border-bottom: #E2E4EE solid 1px; padding-top:010px;padding-bottom:2px;
               padding-left:23px;">
                 <label style="font-size:12px;
                 font-family:MicrosoftYaHei; display:block;
                 color:rgba(51,51,51,1);margin-bottom:10px;">背景动效</label>
                 <div class="content" :xxx="`animatedNameBackgroundGlobal`">
-                  <div
-                    style="display: inline-flex;overflow: hidden;text-align: center; cursor: pointer"
+                  <div style="display: inline-flex;overflow: hidden;text-align: center; cursor: pointer"
                     v-for="(item,index) in animateBackgroundGlobalList">
                     <div v-model="animatedNameBackgroundGlobal" @click="checkBackgroundGlobalAnimation(item)"
-                      :title="item.name" :style="{'background':'rgba(238,242,250,1)', 'margin-right':'12px',
+                      :title="item.name"
+                      :style="{'background':'rgba(238,242,250,1)', 'margin-right':'12px',
                       'border-radius':'12px', 'margin-bottom':'10px',
                       'border':'1px solid rgba(205,209,221,1)','font-size': '12px',
                       color: animatedNameBackgroundGlobal==item.id? 'white':'#999999','letter-spacing': 0,
                     'word-break':'keep-all',padding: '4px 13px','background': animatedNameBackgroundGlobal===item.id? '#4E5DFF':'rgba(238,242,250,1)',
-                    'border': animatedNameBackgroundGlobal===item.id? '1px solid #4E5DFF':'1px solid rgba(205,209,221,1)'}">{{item.name}}</div>
+                    'border': animatedNameBackgroundGlobal===item.id? '1px solid #4E5DFF':'1px solid rgba(205,209,221,1)'}">{{item.name}}
+                    </div>
                   </div>
                 </div>
               </div>
@@ -808,6 +804,30 @@
 </script>
 
 <style lang="less" scoped>
+  .tagPage {
+    position: relative;
+  }
+
+  .tagPage:hover div {
+    display: block;
+  }
+
+  .page-tag-btn-tip {
+    width: 80px;
+    height: 26px;
+    position: absolute;
+    left: -85px;
+    top: 50%;
+    transform: translateY(-50%);
+    display: none;
+    text-align: center;
+    line-height: 26px;
+    font-size: 14px;
+    color: #fff;
+    background: url(../../assets/images/page_tag_btn_tip.png) center no-repeat;
+    background-size: cover;
+  }
+
   .editor {
     background-color: rgb(237, 239, 247);
     position: relative;