横版样式修改，高100

src/css/cdssHorizontal.less

@@ -1,37 +1,44 @@
 @import "./common.less";
 .bodyWrap {
-  /*padding: 0 0 0 43px;*/
   position: relative;
-  /*min-height: 244px;*/
-  height: 244px;
+  min-height: 100px;
   border-bottom: 1px solid #ebebeb;
-  /*min-width: 1127px;*/
   box-shadow: 1px 1px 5px 2px #ebebeb;
 }
 .versionWrapper {
-  /*display: inline-block;
   position: absolute;
-  left: 0px;*/
-  float: left;
-  width: 43px;
-  height: 100%;
-  background: @bgcBlue;
+  top:0;
+  right: 0;
+  width: 45px;
+  height: 100px;
+  background: url("../images/bg.png");
   color: #fff;
   font-size: 12px;
 }
 .versionTop {
-  /*position: absolute;
-  width: 100%;*/
-  height: 160px;
+  display: inline-block;
+  width: 10px;
+  height: 49px;
+  background: url("../images/copy.png");
   cursor: pointer;
+  margin: 3px 0 0 2px;
 }
 .versionBottom {
-  position: absolute;
-  /*width: 100%;*/
-  bottom: 0;
-  height: 70px;
-  font-size: 12px;
+  display: inline-block;
+  width: 40px;
+  height: 10px;
+  background: url("../images/vs.png");
   cursor: pointer;
+  margin: 29px 0 0 3px;
+}
+.versionNew{
+  display: inline-block;
+  width: 24px;
+  height: 12px;
+  background: url("../images/new1.png");
+  position: absolute;
+  top: 70px;
+  left: 19px;
 }
 .pushDisclaimer {
   display: inline-block;
@@ -57,58 +64,44 @@
   left: 7px;
 }
 .tabList {
-  width: 100%;
-  height: 34px;
-  background-color: #fff;
+  float: left;
+  width: 70px;
+  height: 100%;
+  min-height: 100px;
+  text-align: center;
   color: #333333;
   //   box-sizing: border-box;
   z-index: 99;
-  border-bottom: 4px solid #e6e7e8;
+  border-right: 1px solid @bgcBlue;
 }
 .tab {
-  position: relative;
-  width: 106px;
-  height: 34px;
-  line-height: 34px;
-  background: #ffffff;
+  width: 60px;
+  height: 20px;
+  font-size:12px;
   cursor: pointer;
   text-align: center;
-  float: left;
+  margin:4px 5px;
 }
 .tabName {
-  display: inline-block;
   text-align: center;
 }
 .activeTab {
   font-weight: 500;
-  background: #e3f0ff;
   color: @bgcBlue;
-}
-.activeLine {
-  display: none;
-  position: absolute;
-  left: 0;
-  bottom: 0;
-  width: 106px;
-  height: 4px;
-  background: #4f9ff3;
+  background: @pushBgColor;
 }
 .contentBox {
-  /*position: absolute;
-  left: 43px;*/
-  margin-left: 43px;
-  height: 100%;
-  // overflow-y: auto;
+  margin:0 46px 0 72px;
 }
 .moduleWrapper {
   /*position: absolute;
-  width: 100%;*/
-  height: 202px;
+  width: 100%;
+  height: 202px;*/
 }
 .leftWrapper,
 .rightWrapper {
   position: relative;
-  height: 206px;
+  height: 100px;
   display: inline-block;
   box-sizing: border-box;
   overflow-y: auto;
@@ -117,7 +110,7 @@
   width: 60%;
   // border-right: 1px solid #E6E6E6;
   float: left;
-  padding: 10px 10px 0 10px;
+  padding: 2px 10px 0 10px;
   box-sizing: border-box;
 }
 .rightWrapper {
@@ -130,6 +123,9 @@
 .leftBox,
 .rightBox {
   position: relative;
+  p{
+    font-size: 12px;
+  }
 }
 .moduleWrapper {
   display: none;
@@ -137,7 +133,10 @@
 .moduleItem {
   padding: 0 0 0 110px;
   box-sizing: border-box;
-  line-height: 27px;
+  line-height: 21px;
+  span,div{
+    font-size: 12px;
+  }
   &:hover {
     background: #f6f6f6;
   }
@@ -145,30 +144,27 @@
 .moduleItemTitBox {
   display: inline-block;
   width: 110px;
-  height: 27px;
+  height: 21px;
   box-sizing: border-box;
   position: absolute;
   left: 0;
-  margin-top: -1px;
+  margin-top: -2px;
 }
 .casewriting .moduleItemTitBox .moduleTitle {
   color: @colorWaring;
 }
 .titleIcon {
   width: 18px;
-  margin: 0px 5px 0 5px;
+  margin: 0px 0px 0 5px;
   position: relative;
   top: 4px;
 }
 .treatIcon {
-  width: 20px;
+  width: 14px;
   position: relative;
-  top: 4px;
+  top: 2px;
   margin-right: 6px;
 }
-.infoImg {
-  width: 15px;
-}
 .moduleTitle {
   font-size: 14px;
   font-weight: 500;
@@ -183,20 +179,17 @@
 .warning .moduleTitle {
   color: #fff;
   background: #ff7f5b;
-  width: 83px;
-  height: 21px;
-  line-height: 21px;
+  width: 62px;
+  height: 17px;
+  line-height: 17px;
   margin-top: 4px;
   img {
-    width: 16px;
+    width: 12px;
     vertical-align: top;
     margin-top: -1.5px;
-    margin-right: 13px;
+    margin-right: 7px;
   }
 }
-.warning {
-  margin-bottom: 10px;
-}
 .warning .moduleItemTitBox {
   width: 83px;
 }
@@ -207,12 +200,12 @@
   //   color: #1677FF;
 }
 .infoImg {
-  width: 15px;
+  width: 11px;
   position: absolute;
-  top: 7px;
+  top: 5px;
   cursor: pointer;
   display: none;
-  right: 2px;
+  right: 4px;
 }
 .pushItemBox:hover {
   .infoImg {
@@ -235,9 +228,10 @@
   .moduleTitle {
     position: absolute;
     top: 0;
-    font-size: 14px;
+    font-size: 12px;
     /*font-weight: 600;*/
     color: @colorWaring;
+    left: -4px;
   }
 }
 .moduleItem.crivalue,
@@ -262,7 +256,7 @@
     color: @colorWaring;
     display: inline-block;
     border: 1px solid @colorWaring;
-    line-height: 18px;
+    line-height: 16px;
     top: 5px;
     padding: 0 7px;
     border-radius: 9px;
@@ -279,7 +273,7 @@
   display: inline-block;
   cursor: pointer;
   float: right;
-  line-height: 27px;
+  line-height: 21px;
   color: #3b9ed0;
   position: relative;
   right: 5px;
@@ -289,10 +283,11 @@
   display: inline-block;
   cursor: pointer;
   position: absolute;
-  line-height: 27px;
+  line-height: 21px;
   color: @bgcBlue;
   right: 5px;
   bottom: 0;
+  font-size: 12px;
 }
 .longStrBox {
   max-height: 180px;
@@ -326,22 +321,22 @@
   left: 0;
   font-size: 12px;
   color: @bgcBlue;
-  //   background: #e2eaf2;
-  border: 0px;
   display: inline-block;
   line-height: 16px;
-  border-radius: 2px;
   top: 4px;
-  padding: 2px 5px;
+  padding: 0px 5px;
   border-radius: 9px;
   border: 1px solid @bgcBlue;
 }
 .rightBoxTitle {
-  height: 36px;
-  line-height: 36px;
+  height: 22px;
+  line-height: 22px;
   color: #2fc6c7;
   border-bottom: 1px solid #e6e6e6;
   font-weight: 600;
+  span{
+    font-size: 12px;
+  }
 }
 .versionIcon {
   width: 12px;
@@ -360,12 +355,6 @@
   position: relative;
   top: -5px;
 }
-
-/*.medicine .titleIcon, .operation .titleIcon, .general .titleIcon, .nurse .titleIcon {
-    width: 13px;
-    position: relative;
-    top: 2px;
-}*/
 .moduleItem.casewriting {
   padding: 0 0 0 160px;
   // background: rgba(60,172,228,.17);
@@ -396,9 +385,9 @@
 .showMoreGeneralTreat {
   position: absolute;
   cursor: pointer;
-  color: #3b9ed0;
+  color: @bgcBlue;
   right: 0px;
-  bottom: 0px;
+  bottom: 7px;
   background: #fff;
 }
 .generalTreatInfo {
@@ -422,23 +411,23 @@
   }
 }
 .disName {
-  font-size: 14px;
+  font-size: 12px;
   color: #1e1e1e;
-  margin: 10px 0;
+  margin: 3px 0 0;
   font-weight: 600;
 }
 .followUpWrap {
   /*position: absolute;*/
   width: 100%;
-  height: 202px;
-  padding: 10px 20px;
+  height: 100px;
+  padding: 0 20px;
   box-sizing: border-box;
   overflow-y: auto;
 }
 .operaNameBox {
   background-color: #eff1f6;
-  height: 27px;
-  line-height: 27px;
+  height: 21px;
+  line-height: 21px;
   color: #777777;
   padding-left: 10px;
 }
@@ -455,7 +444,7 @@
   color: @fontColor;
   .infoBox {
     padding-left: 10px;
-    padding-top: 8px;
+    padding-top: 3px;
     box-sizing: border-box;
     &:hover {
       background-color: #fff;
@@ -464,26 +453,27 @@
   .infoBox p {
     color: #1e1e1e;
     font-weight: bold;
-    margin-bottom: 10px;
+    font-size: 12px;
+    margin-bottom: 5px;
   }
 }
 .medicalKonwledgeWrap {
-  height: 202px;
+  height: 100px;
   overflow: auto;
 }
 .readMorePlan {
-  margin-top: 20px;
+  margin-top: 10px;
   padding-left: 10px;
-  width: 116px;
-  height: 28px;
-  line-height: 28px;
+  width: 98px;
+  height: 21px;
+  line-height: 21px;
   background: #e7f1ff;
   border-radius: 2px;
   cursor: pointer;
   a {
     list-style: none;
     display: inline-block;
-
+    font-size: 12px;
     color: @bgcBlue;
   }
   img {
@@ -501,18 +491,21 @@
     position: absolute;
     left: 0;
     top: 0px;
-    width: 62px;
-    height: 22px;
-    line-height: 22px;
+    width: 50px;
+    height: 18px;
+    line-height: 18px;
     border-radius: 4px;
     color: @bgcBlue;
     border: 1px solid @bgcBlue;
     text-align: center;
     font-size: 12px;
     img {
-      width: 15px;
-      height: 15px;
-      margin-bottom: -1.5px;
+      width: 12px;
+      height: 12px;
+      margin-bottom: -1px;
+    }
+    span{
+      font-size: 12px;
     }
   }
 }
@@ -538,23 +531,23 @@
   display: none;
   .title {
     float: left;
-    height: 30px;
+    height: 20px;
     padding: 0 12px;
-    margin-top: 9px;
+    margin-top: 3px;
     border-radius: 8px 8px 0px 0px;
     img {
       vertical-align: middle;
-      width: 20px;
-      height: 20px;
+      width: 14px;
+      height: 14px;
       margin-top: -1.5px;
     }
     .h2 {
-      font-size: 14px;
+      font-size: 12px;
       color: @bgcBlue;
     }
     .go {
       margin-right: 10px;
-      font-size: 14px;
+      font-size: 12px;
       color: #1677ff;
       text-decoration: none;
       cursor: pointer;
@@ -568,9 +561,9 @@
   .go-btn,
   .go-push {
     display: inline-block;
-    width: 80px;
-    height: 25px;
-    line-height: 25px;
+    width: 60px;
+    height: 17px;
+    line-height: 17px;
     border-radius: 4px;
     text-align: center;
     background: #e7f1ff;
@@ -581,6 +574,7 @@
     .infos {
       .label {
         color: #333;
+        font-size: 12px;
       }
       .val {
         color: #666;
@@ -597,10 +591,10 @@
       }
     }
     .infos {
-      height: 24px;
+      height: 20px;
     }
     .detail {
-      padding: 0 8px 27px 4px;
+      padding: 0 8px 0 4px;
       margin-right: 20px;
       max-height: 125px;
       overflow-y: hidden;
@@ -610,10 +604,12 @@
         width: 60px;
         position: absolute;
         left: 502px;
-        bottom: 4px;
+        bottom: 0;
+        font-size: 12px;
+        background: none;
       }
       li {
-        margin-bottom: 6px;
+        margin-bottom: 2px;
         &:hover {
           background: #f6f6f6;
         }
@@ -624,11 +620,13 @@
         padding-left: 5px;
         line-height: 12px;
         margin-top: 4px;
+        font-size: 12px;
       }
       .val {
         margin-left: 65px;
         .name {
           color: #333;
+          font-size: 12px;
         }
         .desc {
           color: #666;
@@ -648,11 +646,12 @@
       width: 100%;
       border: 1px @bgcBlue solid;
       color: @bgcBlue;
-      height: 30px;
-      line-height: 30px;
+      font-size: 12px;
+      height: 21px;
+      line-height: 21px;
       border-radius: 4px;
       cursor: pointer;
-      background: url("../images/go.png") 94% center no-repeat;
+      background: url("../images/go.png") 92% center no-repeat;
       text-indent: -8px;
       text-decoration: none;
     }
@@ -662,11 +661,9 @@
 .recipe {
   .title {
     width: 124px;
-    margin-top: 9px;
   }
   .content {
     margin-left: 146px;
-    padding-top: 9px;
   }
 }
 
@@ -700,8 +697,7 @@
 
 .knowledge .content p {
   display: inline-block;
-  width: 88px;
-  margin-top: 8px;
+  width: 83px;
   margin-right: 10px;
   text-align: center;
 }
@@ -719,20 +715,25 @@
   font-weight: 500;
 }
 .tcmWarp {
-  padding-bottom: 10px;
   box-sizing: border-box;
   overflow: auto;
 }
 .empty-box{
   text-align: center;
-  margin-top: 22px;
   display: none;
+  padding-top: 8px;
+  .emptyImg{
+    width: 100px;
+  }
+  .emptyTxt{
+    font-size: 12px;
+  }
 }
 .loading{
    position: fixed;
    width: 100%;
    left: 0;
-   top: 82px;
+   top: 44px;
    z-index: 100;
    display: none;
  }
@@ -746,9 +747,25 @@
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=50);";
 }
 .loadingImg{
-  width: 40px;
+  width: 30px;
   position: absolute;
   left: 50%;
   top: 50%;
-  margin: -20px 0 0 -20px;
+  margin: -15px 0 0 -15px;
+}
+
+.bodyWrapHorizontal ::-webkit-scrollbar{
+  /*滚动条整体样式*/
+  width: 4px;
+  /*高宽分别对应横竖滚动条的尺寸*/
+  height: 4px;
+  background: #fff;
+  -webkit-box-shadow: inset 1px 0 1px rgba(0, 0, 0, 0.2);
+}
+.bodyWrapHorizontal ::-webkit-scrollbar-thumb{
+  /*滚动条里面小方块*/
+  width: 4px;
+  height: 4px;
+  border-radius: 3px;
+  background: #ccc;
 }

src/css/followUpV.less

@@ -3,7 +3,7 @@
 .operaNameBox{
     background: #EFF1F6;
     line-height: 22px;
-    padding: 5px 6px 5px 9px;
+    padding: 3px 6px 3px 9px;
     font-size: 12px;
     color: @txtColor;
     border-radius: 2px;
@@ -26,9 +26,6 @@
     border-radius: 12px;
     cursor: pointer;
 }
-.infoWrap{
-    overflow-y: auto;
-}
 .infoBoxTitle{
     line-height: 32px;
     color: @markFontColor;
@@ -102,10 +99,16 @@
     margin-top: 162px;
     text-align: center;
 }
-.bodyWrapHorizontal .followUpWrap .emptyBox{
-    margin-top: 16px;
+.bodyWrapHorizontal .followUpWrap {
+    .emptyBox{
+        margin-top: 0;
+    }
+    .emptyTxt{
+        font-size: 12px;
+    }
 }
 .followUpWrap .emptyImg{
+    width: 100px;
     position: relative; 
     left: 0; 
     margin-left: 0;

src/html/cdssHorizontal.html

@@ -15,22 +15,8 @@
 
 <body>
   <div class="bodyWrap bodyWrapHorizontal clearfix">
-      <div class="versionWrapper">
-        <span class="versionTop">
-          <span class="pushDisclaimer">智能推送仅供参考 </span>
-          <span class="logoTxt"> &copy;朗通医疗</span>
-        </span>
-        <span class="versionBottom">
-          <span class="versionTxt">版本说明</span>
-          <span ><img class="versionIcon" src="./images/new2.png" alt=""></span>
-        </span>
-       
-      </div>
-      
-      <div class="contentBox">
-        <div class="tabList">
-
-        </div>
+      <div class="tabList"></div>
+      <div class="contentBox clearfix">
         <div class="recommendWrap moduleWrapper clearfix">
           <div class="empty-box empty-right">
             <img class="emptyImg" src="../images/icon_admin.png" alt="空">
@@ -41,7 +27,7 @@
             <p class="emptyTxt">暂无推送内容</p>
           </div>
           <div class="empty-box loading">
-          <div class="loadingMask"></div>
+          <!--<div class="loadingMask"></div>-->
           <img class="loadingImg" src="../images/loading.gif" alt="loading">
           <!-- <p class="loadingTxt">loading~</p> -->
         </div>
@@ -123,6 +109,11 @@
          </div>
         </div>
       </div>
+    <div class="versionWrapper">
+      <span class="versionTop"></span>
+      <span class="versionNew"></span>
+      <span class="versionBottom"></span>
+    </div>
   </div>
 </body>
 

src/js/cdssHorizontal.js

@@ -158,14 +158,13 @@ function renderTab(tabList) {
   for (let i = 0; i < tabList.length; i++) {
     if (tabList[i].status == '1') {
       TabNum++
-      tabStr += `<span class="tab" data-name="${tabList[i].code}" ><span class="tabName">${tabList[i].name}</span><span class="activeLine"></span></span>`
+      tabStr += `<div class="tab" data-name="${tabList[i].code}" ><span class="tabName">${tabList[i].name}</span></div>`
     }
 
   }
   $(".tabList").append(tabStr)
   $(".tabList .tab").eq(0).addClass("activeTab")
   $(".tabList .tab").eq(0).addClass("activeTab")
-  $(".tabList .tab .activeLine").eq(0).css({ display: "block" })
   // $(".tabList .tab").css("height", 1 / TabNum * 100 + '%')
   let showModuleName = $(".tabList .tab").eq(0).attr("data-name")
   getModuleShow(moduleConfig[showModuleName])
@@ -242,9 +241,7 @@ function isNeedwriteStandardPush(list) {
 function bindTabClick() {
   $(".tabList .tab").on("click", function () {
     $(".activeTab").removeClass("activeTab")
-    $(".tabList .tab .activeLine").css({ display: "none" })
     $(this).addClass("activeTab")
-    $(this).find('.activeLine').css({ display: "block" })
     const moduleName = $(this).attr("data-name")
     getModuleShow(moduleConfig[moduleName])
   })
@@ -332,14 +329,15 @@ function renderPushData() {
           $(".leftWrapper").css({"width":'0','padding':'0'});
           $(".rightWrapper").css("width",'100%');
         }
-      } else {
+      } else if($(".leftWrapper .moduleItem:visible").length!==0) {console.log(2)
         $(".empty-box").hide();
         $(".leftWrapper").css({
           borderRight: "0px",
           width: "100%"
         })
       }
-      if ((!$(".moduleItem.medicine") && !$(".moduleItem.operation") && !(".moduleItem.general")) || ($(".moduleItem.general").length === 0 && $(".moduleItem.medicine").length === 0 && $(".moduleItem.operation").length === 0 && $(".moduleItem.nurse").length === 0)) {
+      if ($(".moduleItem.general,.moduleItem.medicine,.moduleItem.operation,.moduleItem.nurse").length === 0&&$(".leftWrapper .moduleItem:visible").length!==0) {
+          console.log(3)
         $(".rightWrapper").css("display", "none")
         $(".empty-box").hide();
         $(".leftWrapper").css({
@@ -362,8 +360,8 @@ function renderPushData() {
   })
 }
 function empty(){   //显示空状态
-  setTimeout(function(){
-      if(!$(".rightWrapper .rightBoxTitle").html()){
+  setTimeout(function(){console.log(!$(".rightWrapper .rightBoxTitle").html(),$(".leftWrapper .moduleItem:visible").length===0)
+      if((!$(".rightWrapper .rightBoxTitle").html())&&$(".leftWrapper .moduleItem:visible").length!==0){console.log(4)
           $(".leftWrapper").css({
               borderRight: "0px",
               width: "100%"
@@ -664,7 +662,7 @@ function bindSlide() {
       longBox.css("display", "block")
     let location = longBox.attr("data-location")
     let scrollTop = getLongTop(location)
-      const n = -10 + Number(scrollTop)>-1?(-10 + Number(scrollTop)):0;
+      const n = Number(scrollTop)-2>-1?Number(scrollTop)-2:0;
       longBox.css("top", n + "px")
   })
   $(".showLess").off("click").on("click", function () {
@@ -751,7 +749,7 @@ function addScrollEvent() {
 
     if ($(".leftWrapper .longStrBox:visible").length) {
         const n = Number(getLongTop("left")) -10>-1?(Number(getLongTop("left")) -10):0;
-      $(".leftWrapper .longStrBox:visible").css("top", Number(getLongTop("left")) -10 + "px")
+      $(".leftWrapper .longStrBox:visible").css("top", Number(getLongTop("left")) -2 + "px")
     }
   }, 100));
   $(`.rightWrapper`).off("scroll").scroll(throttle(function () {

src/js/followUp.js

@@ -56,10 +56,10 @@ function renderDetailHorizontal(data) {
         let pacsStr = ``
         let title = `<p>${getTime(item.examineDate)}（${item.description && (item.description)}）</p>`
         for (let i = 0; i < lisArr.length; i++) {
-            lisStr += `<div style="position:relative"><span class="circle"></span>${lisArr[i]}</div>`
+            lisStr += `<div style="position:relative;font-size: 12px"><span class="circle"></span>${lisArr[i]}</div>`
         }
         for (let i = 0; i < pacsArr.length; i++) {
-            pacsStr += `<div style="position:relative"><span class="circle"></span>${pacsArr[i]}</div>`
+            pacsStr += `<div style="position:relative;font-size: 12px"><span class="circle"></span>${pacsArr[i]}</div>`
         }
         str += `<div class="infoBox">
             ${title}

src/js/tcmiss.js

@@ -92,7 +92,10 @@ function getTcmData(param, config) {
 function renderTcm(data, num = 3) {
     let str = ``, it;
     $("#goTreat").hide();
-    const n = num < data.length ? num : data.length;
+    let n = num < data.length ? num : data.length;
+    if($(".horizontal-detail").length){
+        n=1;
+    }
     for (let i = 0; i < n; i++) {
         it = data[i];
         str += `<li class="clearfix"><div class="label">处方${i + 1}：</div>