Преглед на файлове

管理中心-我的素材:上传素材按钮tooltip改用通用的v-tooltip指令实现,以避免层叠效果上的bug。

任一存 преди 2 години
родител
ревизия
63d978852d

+ 4 - 5
packages/qjkankan-editor/src/views/material/audio/index.vue

@@ -18,11 +18,10 @@
             class="ui-button submit"
           >
             <span>{{upload_material}}</span>
-            <i class="iconfont icon-material_prompt hover-tips hover-tips-upload-icon">
-              <div>
-                <div class="remark">{{audio_size}}</div>
-              </div>
-            </i>
+            <i
+              class="iconfont icon-material_prompt"
+              v-tooltip="audio_size"
+            />
             <upload
               ref="uploadFile"
               :failString="audio_fail"

+ 4 - 5
packages/qjkankan-editor/src/views/material/image/index.vue

@@ -18,11 +18,10 @@
             class="ui-button submit"
           >
             <span>{{upload_material}}</span>
-            <i class="iconfont icon-material_prompt hover-tips hover-tips-upload-icon">
-              <div>
-                <div class="remark">{{img_size}}</div>
-              </div>
-            </i>
+            <i
+              class="iconfont icon-material_prompt"
+              v-tooltip="img_size"
+            />
             <upload
               ref="uploadFile"
               :failString="img_fail"

+ 4 - 5
packages/qjkankan-editor/src/views/material/pano/index.vue

@@ -14,11 +14,10 @@
         <div class="btn">
           <button @mouseover.stop="showList = true" @click="onUploadFile" class="ui-button submit">
             <span>{{ upload_material }}</span>
-            <i class="iconfont icon-material_prompt hover-tips hover-tips-upload-icon">
-              <div>
-                <div class="remark">{{ pano_size }}</div>
-              </div>
-            </i>
+            <i
+              class="iconfont icon-material_prompt"
+              v-tooltip="pano_size"
+            />
             <upload ref="uploadFile" :failString="pano_fail" :limitFailStr="pano_limit" accept-type=".jpg"
               media-type="image" :limit="120" @file-change="onFileChange"></upload>
           </button>

+ 0 - 24
packages/qjkankan-editor/src/views/material/style.less

@@ -359,30 +359,6 @@
   padding: 0 16px;
 }
 
-// 左上角上传素材按钮的提示icon,hover时的样式和一般的有tooltip的元素不一样
-.hover-tips.hover-tips-upload-icon {
-  &:hover {
-    color: #fff !important;
-    cursor: default;
-  }
-  // tip的方框
-  > div {
-    top: -30px;
-    left: -30px;
-    transform: translateX(0);
-    // tip的箭头
-    &::before {
-      position: absolute;
-      bottom: -14px;
-      transform: translateX(0);
-      left: 30px;
-    }
-    .remark {
-      line-height: 20px;
-    }
-  }
-}
-
 input::placeholder,
 textarea::placeholder {
   font-size: 14px;

+ 4 - 5
packages/qjkankan-editor/src/views/material/video/index.vue

@@ -18,11 +18,10 @@
             class="ui-button submit"
           >
             <span>{{upload_material}}</span>
-            <i class="iconfont icon-material_prompt hover-tips hover-tips-upload-icon">
-              <div>
-                <div class="remark">{{video_size}}</div>
-              </div>
-            </i>
+            <i
+              class="iconfont icon-material_prompt"
+              v-tooltip="video_size"
+            />
             <upload
               ref="uploadFile"
               :failString="video_limit"