瀏覽代碼

调整tooltip垂直位移

任一存 3 年之前
父節點
當前提交
095a0d03b6
共有 1 個文件被更改,包括 9 次插入6 次删除
  1. 9 6
      src/components/TooltipInEditor.vue

+ 9 - 6
src/components/TooltipInEditor.vue

@@ -25,16 +25,19 @@ export default {
 </script>
 
 <style lang="less" scoped>
+@arrow-height: 6px;
+@border-width: 1px;
+@extra-transform-y: 5px;
 .tooltip-wrapper {
   position: absolute;
   // left: 50%;
-  transform: translateX(-50%) translateY(calc(-100% - 6px - 2px));
+  transform: translateX(-50%) translateY(calc(-100% - @arrow-height - @border-width - @border-width - @extra-transform-y));
   top: 0;
   z-index: 10000;
   display: none;
 
   background: #191A1C;
-  border: 1px solid rgba(151, 151, 151, 0.2);
+  border: @border-width solid rgba(151, 151, 151, 0.2);
   border-radius: 3px;
   box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.06);
   padding: 8px 8px;
@@ -49,12 +52,12 @@ export default {
     position: absolute;
     // left: 50%;
     transform: translateX(-50%) rotate(45deg);
-    bottom: -6px;
+    bottom: -@arrow-height;
 
     box-sizing: border-box;
-    border: 1px solid transparent;
-    border-right: 1px solid rgba(151, 151, 151, 0.2);
-    border-bottom: 1px solid rgba(151, 151, 151, 0.2);
+    border: @border-width solid transparent;
+    border-right: @border-width solid rgba(151, 151, 151, 0.2);
+    border-bottom: @border-width solid rgba(151, 151, 151, 0.2);
     background: #191A1C;
   }
   .remark {