重新添加被删除的代码

src/views/h5editor/index.vue

@@ -30,23 +30,21 @@
           <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 class="page-create-txt" :class="{ active: panelState === 1 }"></div>
             </div>
             <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 class="page-create-btn" :class="{ active: panelState === 2 }"></div>
             </div>
             <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 class="page-create-lunbo" :class="{ active: panelState === 3 }"></div>
             </div>
             <div class="page-tag-btn-tip">新建轮播</div>
           </div>
@@ -54,8 +52,7 @@
           <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 class="page-create-jiaohuanniu" :class="{ active: panelState === 4 }"></div>
             </div>
             <div class="page-tag-btn-tip">交互按钮</div>
           </div>
@@ -820,6 +817,74 @@ export default {
   display: block;
 }
 
+.page-create-txt {
+    width: 34px;
+    height: 34px;
+    background: url('http://yun-image.elab-plus.com/images/dyb/new-text.png') center no-repeat;
+    background-size: 34px 34px;
+
+    &:hover {
+      background: url('http://yun-image.elab-plus.com/images/dyb/new-text-hover.png') center no-repeat;
+      background-size: 34px 34px;
+    }
+
+    &.active {
+      background: url('http://yun-image.elab-plus.com/images/dyb/new-text-active.png') center no-repeat;
+      background-size: 34px 34px;
+    }
+  }
+
+  .page-create-btn {
+    width: 34px;
+    height: 34px;
+    background: url('http://yun-image.elab-plus.com/images/dyb/new-zhuangshi.png') center no-repeat;
+    background-size: 34px 34px;
+
+    &:hover {
+      background: url('http://yun-image.elab-plus.com/images/dyb/new-zhuangshi-hover.png') center no-repeat;
+      background-size: 34px 34px;
+    }
+
+    &.active {
+      background: url('http://yun-image.elab-plus.com/images/dyb/new-zhuangshi-active.png') center no-repeat;
+      background-size: 34px 34px;
+    }
+  }
+
+  .page-create-lunbo {
+    width: 34px;
+    height: 34px;
+    background: url('http://yun-image.elab-plus.com/images/dyb/new-lunbo.png') center no-repeat;
+    background-size: 34px 34px;
+
+    &:hover {
+      background: url('http://yun-image.elab-plus.com/images/dyb/new-lunbo-hover.png') center no-repeat;
+      background-size: 34px 34px;
+    }
+
+    &.active {
+      background: url('http://yun-image.elab-plus.com/images/dyb/new-lunbo-active.png') center no-repeat;
+      background-size: 34px 34px;
+    }
+  }
+
+  .page-create-jiaohuanniu {
+    width: 34px;
+    height: 34px;
+    background: url('http://yun-image.elab-plus.com/images/dyb/new-jiaohuanniu.png') center no-repeat;
+    background-size: 34px 34px;
+
+    &:hover {
+      background: url('http://yun-image.elab-plus.com/images/dyb/new-jiaohuanniu-hover.png') center no-repeat;
+      background-size: 34px 34px;
+    }
+
+    &.active {
+      background: url('http://yun-image.elab-plus.com/images/dyb/new-jiaohuanniu-active.png') center no-repeat;
+      background-size: 34px 34px;
+    }
+  }
+
 .page-tag-btn-tip {
   width: 80px;
   height: 26px;