فهرست منبع

悬浮提示框样式修改

zhangweicheng 6 سال پیش
والد
کامیت
796a6bb642

+ 9 - 13
public/web/tree_sheet/tree_sheet_helper.js

@@ -482,14 +482,8 @@ var TREE_SHEET_HELPER = {
                 let div = $('#autoTip')[0];
                 if (!div) {
                     div = document.createElement("div");
-                    $(div).css("position", "absolute")
-                        .css("border", "1px #000000 solid")
-                        .css("box-shadow", "1px 2px 5px rgba(0,0,0,0)")
-                        .css("font", "0.9rem Calibri")
-                        .css("background", "#000000")
-  						.css("color",'#FFFFFF')
-                        .css("padding", 5)
-                        .attr("id", 'autoTip');
+                    $(div).addClass("message-box");
+                    $(div) .attr("id", 'autoTip');
                     $(div).hide();
                     document.body.insertBefore(div, null);
                 }
@@ -499,7 +493,7 @@ var TREE_SHEET_HELPER = {
                     setting.pos = SheetDataHelper.getObjPos(hitinfo.sheet.getParent().qo);
                 }
                 if(text) text = replaceAll(/[\n]/,'<br>',text);
-                $(this._toolTipElement).html(text);
+                $(this._toolTipElement).html(`<span>${text}</span><div class="triangle-border tb-border"></div><div class="triangle-border tb-background"></div>`);
                 //清单指引、清单库做特殊处理
                 if($(hitinfo.sheet.getParent().qo).attr('id') === 'stdBillsSpread' || $(hitinfo.sheet.getParent().qo).attr('id') === 'billsGuidance_bills'){
                     $(this._toolTipElement).css('top', '').css('left', '').css('width', '');
@@ -507,10 +501,12 @@ var TREE_SHEET_HELPER = {
                     if($(this._toolTipElement).width() < hitinfo.x){
                         marginLeftMouse = hitinfo.x - $(this._toolTipElement).width();
                     }
-                    $(this._toolTipElement).css("top", setting.pos.y + hitinfo.y + 15).css("left", marginLeftMouse ? setting.pos.x + marginLeftMouse : setting.pos.x);
-                }
-                else {
-                    $(this._toolTipElement).css("top", setting.pos.y + hitinfo.cellRect.y ).css("left", setting.pos.x + hitinfo.cellRect.x + hitinfo.cellRect.width);
+                    $(this._toolTipElement).css("top", setting.pos.y + hitinfo.cellRect.y  -$(this._toolTipElement).height() -20).css("left", marginLeftMouse ? setting.pos.x + marginLeftMouse : setting.pos.x);
+                } else {
+                    //计算显示的初始位置
+                    let top = setting.pos.y + hitinfo.cellRect.y -$(this._toolTipElement).height() -26;
+                    let left =  setting.pos.x + hitinfo.cellRect.x;
+                    $(this._toolTipElement).css("top", top).css("left", left);
                 }
                 $(this._toolTipElement).show("fast");
                 TREE_SHEET_HELPER.tipDiv = 'show';//做个标记

+ 38 - 0
web/building_saas/css/custom.css

@@ -59,4 +59,42 @@ legend.legend{
 .modal-quantity-edit-height {
     height: 200px;
     overflow-y: auto;
+}
+
+.message-box {
+    position:absolute;
+    background:#000;
+    padding:8px 10px;
+    line-height: 18px;
+    border-radius:4px;
+    text-align:left;
+    font:0.9rem Calibri;
+    box-shadow:2px 2px 6px #ccc;
+    color:#fff;
+}
+.triangle-border {
+    position:absolute;
+    left:10px;
+    overflow:hidden;
+    width:0;
+    height:0;
+    border-width:6px;
+    border-style:solid dashed dashed dashed;
+}
+.tb-border {
+    bottom:-12px;
+    border-color:#000 transparent transparent transparent;
+}
+.tb-background {
+    bottom:-11px;
+    border-color:#000 transparent transparent transparent;
+}
+
+.tb-border_up {
+    top:-12px;
+    border-color:transparent transparent #000 transparent;
+}
+.tb-background_up {
+    top:-11px;
+    border-color:transparent transparent #000 transparent;
 }

+ 1 - 0
web/building_saas/pm/html/project-management.html

@@ -9,6 +9,7 @@
     <!-- inject:css -->
     <link rel="stylesheet" href="/lib/bootstrap/css/bootstrap.min.css">
     <link rel="stylesheet" href="/web/building_saas/css/main.css">
+    <link rel="stylesheet" href="/web/building_saas/css/custom.css">
     <link rel="stylesheet" href="/lib/font-awesome/font-awesome.min.css">
     <link rel="stylesheet" href="/lib/spreadjs/sheets/css/gc.spread.sheets.sc.css">
     <!--zTree-->