样式修改

src/css/searchStaticList.less

@@ -13,8 +13,14 @@
     background-color: #fff;
     padding: 0 60px 20px 60px;
   }
-  .resultItemWrap {
-      
+  .staticResult {
+      .loading{
+        text-align: center;
+        img{
+          width: 50px;
+          height: 50px;
+        }
+      }
   }
   .staticTopCenter {
     width: 100%;

src/css/staticInfo.less

@@ -4,7 +4,9 @@
   li {
     list-style: none;
   }
-
+  div,li,span,i,p,h1,h2,h3,h4,h5,pre{
+    font-family: '微软雅黑', '宋体';
+  }
   table {
     border-collapse: collapse;
     border-spacing: 0;
@@ -19,7 +21,21 @@
     color: #1E1E1E;
     line-height: 21px;
   }
-
+  .banner{
+    width: 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 10;
+    height: 60px;
+    line-height: 60px;
+    background-color: @staticMainColor;
+  }
+.staticTopLogo {
+  height: 25px;
+  margin-top: 16px;
+  margin-left: 50px;
+}
   h1 {
     margin: 0 0px 15px 0px !important;
     font-size: 18px !important;
@@ -28,7 +44,7 @@
   }
 
   .titleH2 {
-    font-size: 16px;
+    font-size: 18px;
     position: relative;
     background: #fff;
     padding-right: 6px;
@@ -45,7 +61,7 @@
   .infoBox {
     border-bottom: 1px solid #E6E6E6;
     padding: 0;
-    margin: 0 0 30px 0;
+    margin: 0 0 20px 0;
   }
   .infoBox:hover {
     background-color: #fff;
@@ -122,20 +138,23 @@
     }
   }
   .anchors {
-    width: 200px;
+    width: 210px;
     position: absolute;
     right:15px;
     top: 0;
     margin-right: 14px;
     overflow: auto;
-    height: 100%;
+    background-color: #EDFAFF;
+    padding: 25px 0;
+    /*height: 100%;*/
   }
 
   .anchors ul {
+    margin-left: 30px;
     padding: 15px 0px 15px 20px;
     border-radius: 4px;
     border: 1px solid #EDFAFF;
-    background-color: #EDFAFF;
+    /*background-color: #EDFAFF;*/
     line-height: 19px;
   }
 
@@ -143,61 +162,71 @@
     position: relative;
     border-left: 1px solid #8DD1EE;
   }
+.anchors li:first-child {
+  padding-top:30px
+}
 
   .anchors .anchor-line {
-    height: 20px;
+    height: 30px;
     width: 0;
     border-left: 1px solid #8DD1EE;
   }
 
-  .anchors .anchor-line:last-child {
-    display: none;
-  }
-
+.anchors .a-circle{
+  border:2px #8DD1EE solid;
+  width: 16px;
+  height: 16px;
+  background: #fff;
+  border-radius: 16px;
+  position: absolute;
+  left: 41px;
+  z-index: 1;
+}
+.anchors .a-circle:last-child{
+  bottom: 22px;
+}
   .anchors i {
     position: absolute;
     display: inline-block;
-    width: 8px;
-    height: 8px;
-    border-radius: 5px;
+    width: 16px;
+    height: 16px;
+    border-radius: 8px;
     border: 1px solid @staticMainColor;
     background-color: @staticMainColor;
-    left: -6px;
+    left: -10px;
     top: 5px;
+    z-index: 1;
   }
-
+.anchors li:first-child i{
+  top:35px;
+}
   .anchors a {
     display: inline-block;
     position: relative;
-    top: 0;
+    top: 4px;
     left: 0;
-    width: 132px;
+    width: 126px;
     padding: 0 0px 0 20px;
     text-decoration: none;
-    font-size: 14px;
+    font-size: 16px;
     font-weight: 400;
-    color: #666;
     word-wrap: break-word;
   }
 
   .anchors .active a {
-    color: #3B9ED0 !important;
-    font-weight: 700 !important;
+    /*color: #3B9ED0 !important;
+    font-weight: 700 !important;*/
   }
 
   .anchors .active i {
-    width: 16px;
+    width: 26px;
     height: 16px;
-    top: 1px;
-    left: -8px;
+    top: 6px;
+    left: -14px;
     border-radius: 0;
     border: none;
     background-color: #F5F6F7;
-    background: url('../images/icon_current.png') center center no-repeat;
-  }
-
-  a:visited {
-    color: #777;
+    background: url('../images/icon_current.svg') center center no-repeat;
   }
   .disCopy {
     -webkit-touch-callout: none;
@@ -210,26 +239,34 @@
   .tabBox{
     position: relative;
     background: #fff;
-    height: 38px;
-    border-bottom: 1px solid #E6E6E6;
-    padding: 0 40px;
-  }
+    height: 58px;
+    padding: 0 38px;
+    margin-top:60px;
+  }
+.tabBox .title{
+  font-size: 20px;
+  color: #333;
+  font-weight: bold;
+  line-height: 58px;
+  margin-right: 23px;
+}
   .tabList{
-    position: absolute;
-    bottom: 0;
+    display: inline-block;
   }
   .tab{
     display: inline-block;
-    padding: 4px 18px 5px;
-    margin-right: 5px;
-    background: #EEEEEE;
-    border-radius:6px 6px 0px 0px;
+    padding: 0 5px;
+    margin-right: 20px;
+    background: #fff;
+    border-radius:2px;
     cursor: pointer;
-    font-size: 14px;
-    color: #333;
+    font-size: 11px;
+    color: @staticMainColor;
+    border:1px @staticMainColor solid;
+    vertical-align: text-bottom;
   }
   .activeTab{
-    background: #3B9ED0;
+    background: @staticMainColor;
     color: #fff;
   }
   .ql-align-right{

src/css/staticInfoOut.less

@@ -1,9 +1,12 @@
-
+@import './common.less';
   ul,
   li {
     list-style: none;
   }
 
+div,li,span,i,p,h1,h2,h3,h4,h5,pre{
+  font-family: '微软雅黑', '宋体';
+}
   table {
     border-collapse: collapse;
     border-spacing: 0;
@@ -27,11 +30,13 @@
   }
 
   .titleH2 {
-    font-size: 16px;
+    font-size: 18px;
     position: relative;
     background: #fff;
     padding-right: 6px;
-    /*line-height: 30px;*/
+    padding-left: 15px;
+    font-weight: bold;
+    border-left: 4px solid @staticMainColor;
   }
 
   .content {
@@ -39,9 +44,6 @@
     height: 550px;
   }
   .infoBox {
-    border-left: 1px solid #969C9F;
-    padding: 0 0 0 33px;
-    margin: 0 0 4px 0;
   }
   .infoWrapper {
     padding: 0 0 0 40px;
@@ -114,84 +116,97 @@
         }
     }
   }
-  .anchors {
-    width: 200px;
-    position: absolute;
-    right:15px;
-    top: 0;
-    margin-right: 14px;
-    overflow: auto;
-    height: 100%;
-  }
-
-  .anchors ul {
-    padding: 15px 0px 15px 20px;
-    border-radius: 4px;
-    border: 1px solid #F5F6F7;
-    background-color: #F5F6F7;
-    line-height: 19px;
-  }
-
-  .anchors li {
-    position: relative;
-    border-left: 2px solid #E0E2E3;
-  }
-
-  .anchors .anchor-line {
-    height: 20px;
-    width: 0;
-    border-left: 2px solid #E0E2E3;
-  }
+.anchors {
+  width: 210px;
+  position: absolute;
+  right:15px;
+  top: 0;
+  margin-right: 14px;
+  overflow: auto;
+  background-color: #EDFAFF;
+  padding: 25px 0;
+  /*height: 100%;*/
+}
 
-  .anchors .anchor-line:last-child {
-    display: none;
-  }
+.anchors ul {
+  margin-left: 30px;
+  padding: 15px 0px 15px 20px;
+  border-radius: 4px;
+  border: 1px solid #EDFAFF;
+  /*background-color: #EDFAFF;*/
+  line-height: 19px;
+}
 
-  .anchors i {
-    position: absolute;
-    display: inline-block;
-    width: 8px;
-    height: 8px;
-    border-radius: 5px;
-    border: 1px solid #E0E2E3;
-    background-color: #E0E2E3;
-    left: -6px;
-    top: 5px;
-  }
+.anchors li {
+  position: relative;
+  border-left: 1px solid #8DD1EE;
+}
+.anchors li:first-child {
+  padding-top:30px
+}
 
-  .anchors a {
-    display: inline-block;
-    position: relative;
-    top: 0;
-    left: 0;
-    width: 132px;
-    padding: 0 0px 0 20px;
-    text-decoration: none;
-    font-size: 14px;
-    font-weight: 400;
-    color: #777;
-    word-wrap: break-word;
-  }
+.anchors .anchor-line {
+  height: 30px;
+  width: 0;
+  border-left: 1px solid #8DD1EE;
+}
 
-  .anchors .active a {
-    color: #3B9ED0 !important;
-    font-weight: 700 !important;
-  }
+.anchors .a-circle{
+  border:2px #8DD1EE solid;
+  width: 16px;
+  height: 16px;
+  background: #fff;
+  border-radius: 16px;
+  position: absolute;
+  left: 41px;
+  z-index: 1;
+}
+.anchors .a-circle:last-child{
+  bottom: 22px;
+}
+.anchors i {
+  position: absolute;
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  border-radius: 8px;
+  border: 1px solid @staticMainColor;
+  background-color: @staticMainColor;
+  left: -10px;
+  top: 5px;
+  z-index: 1;
+}
+.anchors li:first-child i{
+  top:35px;
+}
+.anchors a {
+  display: inline-block;
+  position: relative;
+  top: 4px;
+  left: 0;
+  width: 126px;
+  padding: 0 0px 0 20px;
+  text-decoration: none;
+  font-size: 16px;
+  font-weight: 400;
+  word-wrap: break-word;
+}
 
-  .anchors .active i {
-    width: 16px;
-    height: 16px;
-    top: 1px;
-    left: -8px;
-    border-radius: 0;
-    border: none;
-    background-color: #F5F6F7;
-    background: url('../images/icon_current.png') center center no-repeat;
-  }
+.anchors .active a {
+  /*color: #3B9ED0 !important;
+  font-weight: 700 !important;*/
+}
 
-  a:visited {
-    color: #777;
-  }
+.anchors .active i {
+  width: 26px;
+  height: 16px;
+  top: 6px;
+  left: -14px;
+  border-radius: 0;
+  border: none;
+  background-color: #F5F6F7;
+  background: url('../images/icon_current.svg') center center no-repeat;
+}
   .disCopy {
     -webkit-touch-callout: none;
     -webkit-user-select: none;
@@ -203,40 +218,27 @@
   .tabBox{
     position: relative;
     background: #fff;
-    height: 38px;
-    border-bottom: 1px solid #E6E6E6;
-    padding: 0 40px;
+    padding: 20px 40px 0;
   }
   .showWhich {
     width: 94px;
     text-align: center;
-    padding-top: 16px;
-    position: absolute;
-    z-index: 20;
-    bottom: -6px;
-    img {
-      width: 8px;
-      position: absolute;
-      top: 29px;
-      left: 76px;
-    }
+    padding: 30px 0 20px;
+    position: relative;
     .showWhichSelect {
-      border-radius: 4px 4px 0px 0px;;
-      background: #E2F1F8;
-      height: 30px;
-      line-height: 30px;
       display: inline-block;
+      color: @staticMainColor;
+      background: url("../images/d1.png") 100px 9px #EAFCFF no-repeat;
+      font-size: 16px;
+      padding:0 24px 0 9px;
       width: 100%;
-      padding-right: 20px;
-      padding-left: 10px;
-      box-sizing: border-box;
       cursor: pointer;
     }
     ul {
       display: none;
       position: absolute;
       left: -9px;
-      top: 48px;
+      top: 52px;
       z-index: 10;
       background-color: #fff;
       width: 110px;
@@ -257,25 +259,35 @@
       }
     }
   }
-  .tabList{
-    position: absolute;
-    bottom: 0;
-    left: 186px;
-  }
-  .tab{
-    display: inline-block;
-    padding: 4px 18px 5px;
-    margin-right: 5px;
-    background: #EEEEEE;
-    border-radius:6px 6px 0px 0px;
-    cursor: pointer;
-    font-size: 14px;
-    color: #333;
-  }
-  .activeTab{
-    background: #3B9ED0;
-    color: #fff;
+  .titleCont{
+    background: #fff;
+    padding-left: 39px;
+    padding-bottom: 20px;
   }
+.titleCont .title{
+  font-size: 20px;
+  font-weight: bold;
+  margin-right: 23px;
+}
+.tabList{
+  display: inline-block;
+}
+.tab{
+  display: inline-block;
+  padding: 0 5px;
+  margin-right: 20px;
+  background: #fff;
+  border-radius:2px;
+  cursor: pointer;
+  font-size: 11px;
+  color: #2A9BD5;
+  border:1px #2A9BD5 solid;
+  vertical-align: text-bottom;
+}
+.activeTab{
+  background: #2A9BD5;
+  color: #fff;
+}
   .ql-align-right{
     text-align: right;
   }
@@ -303,12 +315,23 @@
 }
 .open-win{
   position: absolute;
-  right: 15px;
-  bottom: 8px;
+  right: 38px;
+  bottom: 28px;
   cursor: pointer;
   color: #3B9ED0;
   font-size: 14px;
   padding-left: 30px;
   background: url("../images/link.png") 0 -2px no-repeat;
   background-size: 25px 25px;
+}
+.footer{
+  width: 100%;
+  height: 100px;
+  background: #172238;
+  padding-top: 35px;
+  p{
+    color:#fff;
+    text-align: center;
+    font-size: 12px;
+  }
 }

src/html/searchStaticList.html

@@ -39,8 +39,8 @@
         <a href="./homeStatic.html">首页</a><span> > 搜索结果</span>
       </div>
       <div class="staticResult">
+        <p class="loading"><img src="../images/loading.gif" alt=""></p>
         <div class="resultItemWrap">
-
         </div>
         <div class="resultItemEmpty">
           <img src="../images/nolis.png" alt="">

src/html/staticInfo.html

@@ -15,44 +15,43 @@
 </head>
 
 <body>
-  <div class="tabBox">
-    <div class="tabList">
-     
+    <div class="banner">
+        <img class="staticTopLogo" src="../images/staticLogo.png" alt="">
     </div>
-      <a id="openWin" class="open-win">网页查看</a>
+  <div class="tabBox">
+      <span class="title"></span>
+      <div class="tabList"></div>
+      <!--<a id="openWin" class="open-win">网页查看</a>-->
   </div>
   
   <div class=" container disCopy staticKnowledge">
-    <h1></h1>
     <div class="content">
         <div class="infos"></div>
         <div class="anchors">
+          <div class="a-circle"></div>
           <ul></ul>
+          <div class="a-circle"></div>
         </div>
-
-      
     </div>
   </div>
   <div class=" container disCopy clinicalPathway">
-    <h1></h1>
     <div class="content">
         <div class="infos"></div>
         <div class="anchors">
+            <div class="a-circle"></div>
           <ul></ul>
+            <div class="a-circle"></div>
         </div>
-
-      
     </div>
   </div>
   <div class=" container disCopy notice">
-    <h1></h1>
     <div class="content">
         <div class="infos"></div>
         <div class="anchors">
+            <div class="a-circle"></div>
           <ul></ul>
+            <div class="a-circle"></div>
         </div>
-
-      
     </div>
   </div>
   <div class="btmFix"></div>

src/html/staticInfoOut.html

@@ -18,49 +18,49 @@
   <div class="tabBox">
     <div class="showWhich">
       <span class="showWhichSelect ellipsis" title=""></span>
-      <img src="../images/d.png" alt="">
-      <ul>
-        
-      </ul>
-    </div>
-    <div class="tabList">
-     
+      <!--<img src="../images/d1.png" alt="">-->
+      <ul></ul>
     </div>
     <a id="openWin" class="open-win">网页查看</a>
   </div>
-  
+  <div class="titleCont">
+      <span class="title"></span>
+      <div class="tabList"></div>
+  </div>
   <div class=" container disCopy staticKnowledge">
-    <h1></h1>
     <div class="content">
         <div class="infos"></div>
         <div class="anchors">
+          <div class="a-circle"></div>
           <ul></ul>
+          <div class="a-circle"></div>
         </div>
-        
     </div>
   </div>
   <div class=" container disCopy clinicalPathway">
-    <h1></h1>
     <div class="content">
         <div class="infos"></div>
         <div class="anchors">
+            <div class="a-circle"></div>
           <ul></ul>
+            <div class="a-circle"></div>
         </div>
-
-      
     </div>
   </div>
   <div class=" container disCopy notice">
-    <h1></h1>
     <div class="content">
         <div class="infos"></div>
         <div class="anchors">
+            <div class="a-circle"></div>
           <ul></ul>
+            <div class="a-circle"></div>
         </div>
-
-      
     </div>
   </div>
+<div class="footer">
+    <p>免责声明：本知识库提供的有关疾病、症状、检查、药品、指南规范、循证文献和病例文献等信息仅供医生学习参考。</p>
+    <p>版权所有：杭州朗通信息技术有限公司      浙ICP备：16000400号-2</p>
+</div>
 </body>
 
 </html>

src/images/icon_current.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="26px" height="16px" viewBox="0 0 26 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 61 (89581) - https://sketch.com -->
+    <title>矩形</title>
+    <desc>Created with Sketch.</desc>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="疾病详情-临床路径页" transform="translate(-1121.000000, -304.000000)" fill="#2A9BD5">
+            <g id="编组-3" transform="translate(1079.000000, 126.000000)">
+                <polygon id="矩形" points="42 178 63.6239567 178 68 186.189897 63.6239567 194 42 194"></polygon>
+            </g>
+        </g>
+    </g>
+</svg>

src/js/searchStaticList.js

@@ -30,6 +30,8 @@ function changeTab(){
 }
 function getSearchList(){
     $(".searchBtn").click(function(){
+        $(".resultItemWrap,.pagination").html("");
+        $(".staticResult .loading").show();
         getTabData(curPage)
     })
 }
@@ -58,6 +60,7 @@ function getTabData(){
     })
 }
 function renderList(tabList){
+    $(".staticResult .loading").hide();
     if(tabList.length == 0){
         $('.pagination').html('')
         $(".resultItemWrap").html('');

src/js/staticInfo.js

@@ -35,7 +35,7 @@ function getInfomation() {
     var anchors = '';
   
     if (!data) {
-      $("h1").html("暂时没有数据");
+      $(".title").html("暂时没有数据");
       $(".anchors").css("display", "none");
       return;
     }
@@ -117,15 +117,15 @@ function addLinkClickEvent(contentWrapClassName) {
 function renderTab(detailList){
   if(detailList['静态知识']){
     $(".tabList").append(`<span class="tab" data-module="staticKnowledge">静态知识</span>`)
-    $(".staticKnowledge h1").html(showName);
+    $(".tabBox .title").html(showName);
   }
   if(detailList['临床路径']){
     $(".tabList").append(`<span class="tab" data-module="clinicalPathway">临床路径</span>`)
-    $(".clinicalPathway h1").html(clinicalPathwayName);
+    $(".tabBox .title").html(clinicalPathwayName);
   }
   if(detailList['注意事项']){
     $(".tabList").append(`<span class="tab" data-module="notice">注意事项</span>`)
-    $(".notice h1").html(noticeName);
+    $(".tabBox .title").html(noticeName);
   }
   $(".tabList .tab").eq(0).addClass("activeTab")
   let defaultModuleName = $(".tabList .tab").eq(0).attr("data-module")
@@ -149,12 +149,12 @@ function bindTabClick(){
     const type= getUrlArgObject('type');
     const name= getUrlArgObject('name');
     const position= getUrlArgObject('position');
-    openNewWin("information.html?name="+encodeURIComponent(name)+"&position="+encodeURIComponent(position)+"&type="+encodeURIComponent(type));
+    openNewWin("staticInfo.html?name="+encodeURIComponent(name)+"&position="+encodeURIComponent(position)+"&type="+encodeURIComponent(type));
   })
 }
 function adjustHeight() {
   var ht = window.innerHeight || document.documentElement.clientHeight;
-  $(".content").height(ht - 80 + "px");
+  $(".content").height(ht - 30 + "px");
 }
 function adjustWidth() {
   var wt = window.innerWidth || document.documentElement.clientWidth;

src/js/staticInfoOut.js

@@ -117,7 +117,7 @@ function renderContent(list, contentWrapClassName){
         item.content = item.content&&item.content.replace(/{imageUrlPrefix}/g, imageUrlPrefix);
         anchors = '<li><i></i><a href="#' + contentWrapClassName+i +
           '">' + item.title + '</a></li><li class="anchor-line"></li>';
-        str = '<div class="infoBox"><div class="title"> <div class= "circleBox"><span class="circle"> </span></div> <h2 class="titleH2" id="' + contentWrapClassName+i +
+        str = '<div class="infoBox"><div class="title"> <h2 class="titleH2" id="' + contentWrapClassName+i +
           '">'
         if (getUrlArgObject('type') == 8) {
           str += '【' + item.title + '】'
@@ -169,15 +169,15 @@ function renderTab(detailList){
   $(".tabList").html('')
   if(detailList['静态知识']){
     $(".tabList").append(`<span class="tab" data-module="staticKnowledge">静态知识</span>`)
-    $(".staticKnowledge h1").html(showName);
+    $(".titleCont .title").html(showName);
   }
   if(detailList['临床路径']){
     $(".tabList").append(`<span class="tab" data-module="clinicalPathway">临床路径</span>`)
-    $(".clinicalPathway h1").html(clinicalPathwayName);
+    $(".titleCont .title").html(clinicalPathwayName);
   }
   if(detailList['注意事项']){
     $(".tabList").append(`<span class="tab" data-module="notice">注意事项</span>`)
-    $(".notice h1").html(noticeName);
+    $(".titleCont .title").html(noticeName);
   }
   $(".tabList .tab").eq(0).addClass("activeTab")
   let defaultModuleName = $(".tabList .tab").eq(0).attr("data-module")
@@ -202,12 +202,12 @@ function bindTabClick(){
     const hospitalId= getUrlArgObject('hospitalId');
     const hisName= getUrlArgObject('hisName');
     const hisDetailName= getUrlArgObject('hisDetailName');
-    openNewWin("informationOut.html?hospitalId="+encodeURIComponent(hospitalId)+"&hisName="+encodeURIComponent(hisName)+"&hisDetailName="+encodeURIComponent(hisDetailName)+"&type="+encodeURIComponent(type));
+    openNewWin("staticInfoOut.html?hospitalId="+encodeURIComponent(hospitalId)+"&hisName="+encodeURIComponent(hisName)+"&hisDetailName="+encodeURIComponent(hisDetailName)+"&type="+encodeURIComponent(type));
   })
 }
 function adjustHeight() {
   var ht = window.innerHeight || document.documentElement.clientHeight;
-  $(".content").height(ht - 90 + "px");
+  $(".content").height(ht - 200 + "px");
 }
 function adjustWidth() {
   var wt = window.innerWidth || document.documentElement.clientWidth;