竖版样式--

src/css/cdss.less

@@ -5,20 +5,18 @@ body{
     background: #fff;
 }
 .bodyWrap{
-    position: fixed;
-    width: 100%;
-    height: 100%;
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  /*background: @bgcBlue;*/
 }
 .iframeWrap {
-    margin: 0 auto 50px;
-    // padding: 0 20px 20px 20px;
-    min-width: 340px;
-    overflow-y: hidden;
+
 }
 .contentWrapper{
-    position: relative;
-    overflow-y: hidden;
-    // overflow-y: auto;
+  margin-left: 40px;
+  padding:10px 12px 0;
+  /*background: #fff;*/
 }
 .responsibility {
     text-align: center;
@@ -129,20 +127,6 @@ body{
     font-size: 12px;
     margin-top: 15px;
 }
-// .titleIcon{
-//     width: 16px;
-//     margin: 0px 12px 0 12px;
-//     position: relative;
-//     top: 2px;
-// }
-// .warningbox{
-//     .titleIcon{
-//         width: 16px;
-//         margin: 0px 12px 0 -5px;
-//         position: relative;
-//         top: 2px;
-//     }  
-// }
 .loading{
     position: fixed;
     width: 100%;
@@ -218,24 +202,16 @@ body{
 
 
 // CDSS6.0
-.tab{
-    color: @tabColor;
-    margin-right: 20px;
-    display: inline-block;
-  &:last-child {
-    margin-right: 0;
-  }
-}
-.moduleItem{
-    border: 1px solid #EAEDF1;
-    margin: 0 0 0px 0;
-}
 .longBox,.shortBox{
-    padding: 4px 10px;
+  padding: 4px 10px;
+  border-bottom: 1px #E6E6E6 dashed;
+  &:last-child{
+    border-bottom: none;
+  }
 }
 .diag{
     .longBox,.shortBox{
-        padding: 0 10px;
+        padding: 0 10px 8px;
     }
 }
 .longBox{
@@ -271,15 +247,18 @@ body{
     color: #3B9ED0;
 }
 .moduleTitle{
-    height: 30px;
-    line-height: 30px;
+    height: 35px;
+    line-height: 35px;
     font-size: 14px;
+    color: @fontClr;
     font-weight: 600;
+    border-radius: 8px 8px 0 0;
+    margin-bottom: 10px;
     .titleIcon{
         width: 20px;
         position: relative;
         top: 5px;
-        margin: 0 8px;
+        margin: 0 5px 0 14px;
     }
 }
 .casewriting .titleIcon{
@@ -291,12 +270,15 @@ body{
     // top: 2px;
 }
 .moduleBox{
-    padding: 5px 0;
+  padding:0 14px;
 }
 .moduleBoxTitle{
-    padding: 0 10px;
-    line-height: 27px;
-    font-weight: 600;
+  color: @fontClr;
+  line-height: 17px;
+  font-weight: 600;
+  padding-left: 3px;
+  margin: 6px 0;
+  border-left:4px solid @suggerColor;
 }
 .iconMark{
     width: 4px;
@@ -309,50 +291,38 @@ body{
     position: relative;
 }
 .moduleItem{
-    border-radius: 4px;
-    .moduleBox{
-        border-bottom: 1px solid #EAEDF1;
-    }
-    .moduleBox:last-child{
-        border-bottom: 0;
-    }
+    border-radius: 8px;
+    box-shadow: 0px 5px 5px 0px @shadowColor;
+    margin-bottom: 10px;
 }
 .tabList{
-    line-height: 39px;
   margin-bottom: 8px;
-    padding: 0 20px 0 20px;
-    box-sizing: border-box;
+  height: 100%;
+  background: @bgcBlue;
 }
 .tab{
-    font-size:14px;
-    color: #777777;
-    position: relative;
-    cursor: pointer;
-}
+  width: 10px;
+  padding:8px 10px;
+  font-size:14px;
+  cursor: pointer;
+  color: @tabColor;
+  margin-left: 10px;
+  background: @tabBgColor;
+  border-radius: 8px 0px 0px 8px;
+  span{
+  }
+ }
 .activeTab{
-    color:#3B9ED0;
-    font-weight: 600;
-    font-size:16px;
-    .activeLine{
-        display: inline-block;
-        width: 34%;
-        height: 3px;
-        left: 32%;
-        background: #3B9ED0;
-        position: absolute;
-      bottom: 3px;
-    }
+  color:@fontClr;
+  font-weight: 600;
+  font-size:14px;
+  background: @mainBg;
 }
 .moduleWrapper{
     display: none;
 }
 .recommendWrap{
-    position: absolute;
-    box-sizing: border-box;
-    width: 100%;
-    height: 100%;
-    overflow-y: auto;
-    padding: 0 15px 50px 15px;
+
 }
 .staticSearchB ul{
     position: absolute;
@@ -380,9 +350,6 @@ body{
 .medicalKonwledgeWrap{
     padding: 0 30px;
 }
-.titleIcon{
-    width: 20px;
-}
 .newIcon{
     width: 27px;
     position: relative;
@@ -441,8 +408,7 @@ body{
     color: #3B9ED0;
 }
 .shortStrBox,.longStrBox{
-    position: relative;
-    padding: 4px 0;
+
 }
 .longStrBox{
     display: none;

src/css/common.less

@@ -1,13 +1,20 @@
 @import './reset.css';
+@fontClr:#333;//通用字体颜色
+@txtColor:#666;//正文字体颜色
+@mainBg:#fff; //主体背景色
+@tabColor: #fff; // 左侧Tab文字颜色
+@tabBgColor: #1C6EC3; // 左侧Tab背景颜色
+@bgcBlue:#4F9FF3; //背景蓝色
+@dangerColor:#FF7F5B; //警惕
+@shadowColor:#DEDDDD; //阴影颜色
+@linkColor:#1677FF; //链接颜色
+@warnColor:#FF8042;   //错误提示颜色
+@suggerColor:#267FD7; //推送颜色
+@treatColor:#1ECEBD; //治疗颜色
+
+
 @grayColor:#D1D1D1; //边框
-@bgcBlue:#ECF4FC; //背景蓝色
 @colorBlue:#267FD7;  //hover
-@bgcWaring:#FDF4EE; //病情提示
-@colorWaring:#FF545B; //警惕
-@bgcPlan:#E3FEFE; //治疗
-@bgcMay:#FAEBEC; //疑似，警惕，可能
-@bgcModal:#DFEAFE; //弹窗头
-@tabColor: #777; // 右侧大Tab文字颜色
 @staticMainColor: #2A9BD5; // 静态知识主要颜色
 .disCopy {
     -webkit-touch-callout: none;
@@ -33,7 +40,12 @@
   .clearfix {
     zoom: 1; 
   }
-
+.fl{
+  float: left;
+}
+.fr{
+  float: right;
+}
 // 文本编辑器返回dom样式
 .ql-align-right {
   text-align: right;

src/css/reset.css

@@ -34,7 +34,7 @@ input {
 html,
 body {
   font-family: 'Microsoft YaHei', arial, tahoma, sans-serif;
-  color: #000;
+  color: #666;
 }
 
 ol,
@@ -45,9 +45,6 @@ ul {
 li {
   list-style: none;
 }
-a {
-  color: #000;
-}
 button {
   cursor: pointer;
   outline: none;

src/html/cdss.html

@@ -25,10 +25,8 @@
           <img src="../images/right.png" class="right" alt="">
         </div>
       </div> -->
-      <div class="iframeWrap">
-        <div class="tabList">
-
-        </div>
+      <div class="iframeWrap clearfix">
+        <div class="tabList fl"></div>
         <div class="contentWrapper">
           <div class="recommendWrap moduleWrapper">
             <div class="recommendBox">

src/js/cdss.js

@@ -306,8 +306,8 @@ function renderPushData(){
 }
 function adjustHei(){
   const iframeHei = $(".bodyWrap").height()
-  const tabHei = $(".tabList").height()
-  $(".contentWrapper").css("height",iframeHei-tabHei-20-30+3+19+'px')
+  $(".contentWrapper").css("height",iframeHei-20-30+3+19+'px')
+  $(".tabList").css("height",iframeHei+'px')
 }
 function isNeedPush(list){
   let pushCode = ["diag","lis","pacs","symptom","vital","treat","medicines"]
@@ -410,11 +410,11 @@ function  renderwriteStandardPage(list,casewritingNum){
     $(".moduleItem.casewriting").append(allStr)
     $(".casewritingWrapper").append(shortStrBox)
     if( arr.length>casewritingNum){
-      $(".shortStrBox .billingPushItem").eq( $(".shortStrBox .billingPushItem").length -1).append(`<span class="showMoreCaseWriting">更多<img class="iconArrowImg" src="${iconArrowDown}"></span>`)
+      $(".shortStrBox .billingPushItem").eq( $(".shortStrBox .billingPushItem").length -1).append(`<span class="showMoreCaseWriting"><img class="iconArrowImg" src="${iconArrowDown}"></span>`)
       
       // $(".moduleItem .generalTreatInfo").append(`<span class="showLessGeneralTreat">收起<img class="iconArrowImg" src="${iconArrowUp}"></span>`)
       $(".casewritingWrapper").append(longStrBox)
-      $(".longStrBox .billingPushItem").eq( $(".longStrBox .billingPushItem").length -1).append(`<span class="showLessCaseWriting">收起<img class="iconArrowImg" src="${iconArrowUp}"></span>`)
+      $(".longStrBox .billingPushItem").eq( $(".longStrBox .billingPushItem").length -1).append(`<span class="showLessCaseWriting"><img class="iconArrowImg" src="${iconArrowUp}"></span>`)
     }
     $('.moduleItem.casewriting').css("display","block")
     bindSlideCaseWriting()
@@ -558,8 +558,8 @@ function rendergeneraTreatPush(list){
     $(".moduleItem.general").css("display","block")
     let generaTreatHei = $(".moduleItem .generalTreatInfo")[0].scrollHeight
     if(generaTreatHei > 50){
-      $(".moduleItem .generalTreatInfo").append(`<span class="showMoreGeneralTreat">更多<img class="iconArrowImg more" src="${iconArrowDown}"></span>`)
-      $(".moduleItem .generalTreatInfo").append(`<span class="showLessGeneralTreat">收起<img class="iconArrowImg" src="${iconArrowUp}"></span>`)
+      $(".moduleItem .generalTreatInfo").append(`<span class="showMoreGeneralTreat"><img class="iconArrowImg more" src="${iconArrowDown}"></span>`)
+      $(".moduleItem .generalTreatInfo").append(`<span class="showLessGeneralTreat"><img class="iconArrowImg" src="${iconArrowUp}"></span>`)
       bindGeneralSlide()
     }
   }
@@ -606,8 +606,8 @@ function renderItemWrapper(list, showNum, type, hasInfo) {
       longStr:''
     }
   }else{
-    shortStr += `<span class="showMore">更多 <img class="iconArrowImg" src="${iconArrowDown}"></span>`
-    longStr += `<span class="showLess">收起 <img class="iconArrowImg"  src="${iconArrowUp}"></span>`
+    shortStr += `<span class="showMore"><img class="iconArrowImg" src="${iconArrowDown}"></span>`
+    longStr += `<span class="showLess"><img class="iconArrowImg"  src="${iconArrowUp}"></span>`
     return {
       shortStr:`<div class="shortBox clearfix">${shortStr}</div>`,
       longStr:`<div class="longBox clearfix">${longStr}</div>`
@@ -672,13 +672,14 @@ function hasTab(tabName,tabList){
   return false
 }
 function renderTab(tabList){
-    let tabStr = ''
+    let tabStr = '<ul>'
     for(let i = 0; i < tabList.length; i++){
       if(tabList[i].status == '1'){
-        tabStr += `<span class="tab" data-name="${tabList[i].code}" >${tabList[i].name}<span class="activeLine"></span></span>`
+        tabStr += `<li class="tab" data-name="${tabList[i].code}" ><span>${tabList[i].name}</span></li>`
       }
       
     }
+    tabStr += `</ul>`;
     $(".tabList").append(tabStr)
     let tabNum = 0;
     if(isTcm=='true'){

src/js/promise.js

@@ -191,65 +191,69 @@ const throttle = function (fn, threshhold) {
     }
   }
 }
-
+const colorMap={
+  warnColor:'#FFE8DD', //智能警示等tab颜色
+  suggerColor:'#E3F0FF', //推荐提示tab颜色
+  treatColor:'#E3FEFE',  //治疗等tab颜色
+}
 const titleConfig = {
   warning:{
-    background: "#FFE8DD",
+    background: colorMap.warnColor,
     icon: iconWarning1,
     name:"智能警示"
   },
   symptomPush:{
-    background: "#EEF5FD",
+    background: colorMap.suggerColor,
     icon: iconSymptomPush,
     name:"推荐症状"
   },
   diagPush:{
-    background: "#EEF5FD",
+    background: colorMap.suggerColor,
     icon: iconDiagPush2,
     name:"智能诊断"
   },
   checkupPush:{
-    background: "#EEF5FD",
+    background: colorMap.suggerColor,
     icon: iconCheckupPush,
     name:"推荐体格检查"
   },
   scalePush:{
-    background: "#EEF5FD",
+    background: colorMap.suggerColor,
     icon: iconScalePush,
     name:"推荐量表"
   },
   lisPush:{
-    background: "#ECF4FC",
+    background: colorMap.suggerColor,
     icon: iconLisPush,
     name:"推荐检验"
   },
   pacsPush:{
-    background: "#ECF4FC",
+    background: colorMap.suggerColor,
     icon: iconPacsPush,
     name:"推荐检查"
   },
   drugPush:{
-    background: "#E3FEFE",
+    background: colorMap.treatColor,
     icon: iconDrugPush,
     name:"推荐用药"
   },
-    nursePush: {
-        background: "#E3FEFE",
-        icon: iconNursePush,
-        name: "推荐护理"
-    },
+  nursePush: {
+    background: colorMap.treatColor,
+    icon: iconNursePush,
+    name: "推荐护理"
+  },
   operationPush:{
-    background: "#E3FEFE",
+    background: colorMap.treatColor,
     icon: iconOperationPush,
     name:"推荐手术及操作"
   },
   generaTreatPush:{
-    background: "#E3FEFE",
+    background: colorMap.treatColor,
     icon: iconTreat,
     name:"一般治疗"
   },
   casewritingPush:{
-    background: "#FFE8DD",
+    background: colorMap.warnColor,
     icon: iconCaseWrite,
     name:"病历书写规范提示"
   }