浏览代码

布局修改,兼容性bug

zhouna 5 年之前
父节点
当前提交
0046121e08
共有 2 个文件被更改,包括 26 次插入10 次删除
  1. 17 6
      src/css/index.less
  2. 9 4
      src/index.js

+ 17 - 6
src/css/index.less

@@ -33,8 +33,19 @@
 .flawList{
   padding: 0 15px 20px;
   overflow-y: auto;
+  table{
+    width: 100%;
+    td{
+      padding:10px 0;
+      border-bottom: 1px solid #E2E5EF;
+      img{
+        vertical-align: middle;
+        margin-right: 5px;
+      }
+    }
+  }
 }
-.flawItem{
+/*.flawItem{
   border-bottom: 1px solid #E2E5EF;
   line-height: 20px;
   padding: 10px 100px 10px 20px;
@@ -47,24 +58,24 @@
   height: 16px;
   left: 0;
   top: 13px;
-}
+}*/
 .flawItemIcon{
   width: 16px;
   
 }
 .flawItemMsgBox{
-  display: inline-block;
-  width: 100%;
+  /*display: inline-block;
+  width: 100%;*/
   border-right: 1px solid #E2E5EF;
   box-sizing: border-box;
 }
 .flawItemScore{
-  position: absolute;
+  /*position: absolute;
+  top: 50%;*/
   width: 100px;
   text-align: right;
   height: 20px;
   line-height: 20px;
-  top: 50%;
   margin-top: -10px;
 }
 .flawItemNum{

+ 9 - 4
src/index.js

@@ -34,16 +34,21 @@ function getFLawList(){
 getFLawList()
 
 function renderFlawList(flawList){
-    let str = ``
+    let str = `<table>`;
     for(let i = 0; i < flawList.length; i++){
-        let flawItem = `<div class="flawItem">
+        /*let flawItem = `<div class="flawItem">
             <span class="flawItemIconBox"><img class="flawItemIcon" src="${iconWarn}" /></span>
             <span class="flawItemMsgBox">${flawList[i].msg}${flawList[i].info ? "("+flawList[i].info + ")" :''}</span>
             <span class="flawItemScore fr">评分: <span class="flawItemNum">-${flawList[i].score}</span></span>
-        </div>`
-        str += flawItem
+        </div>`*/
+      let flawItem = `<tr class="flawItem">
+                        <td><div class="flawItemMsgBox"><img class="flawItemIcon" src="${iconWarn}" />${flawList[i].msg}${flawList[i].info ? "("+flawList[i].info + ")" :''}</div></td>
+                        <td class="flawItemScore">评分: <span class="flawItemNum">-${flawList[i].score}</span></td>
+                       </tr>`;
+        str += flawItem;
         
     }
+    str+="</table>";
     if(flawList.length === 0){
         str = `
             <div class="empty">