竖版样式

src/css/indexVert.less

@@ -0,0 +1,86 @@
+.iframeWrap {
+    margin: 10px auto 50px;
+    padding: 20px;
+    min-width: 340px;
+}
+.recommendInfoWrapper  {
+    border: 1px solid #F2F2F2;
+    margin-bottom: 15px;
+    h4 {
+        color: #000;
+        height: 40px;
+        line-height: 40px;
+        background-color: #FAEBEC;
+        font-size: 16px;
+        font-weight: bold;
+    }
+}
+.recommendInfoWrapper h4 i {
+    content: '';
+    width: 40px;
+    height: 40px;
+    float: left;
+}
+.symptomRecommend, .physiExamRecommend, .labAndPacsRecommend{
+    h4{
+        background-color: #ECF4FC;
+    }
+}
+.treatRecommend {
+    h4 {
+        background-color: #E3FEFE;
+    }
+}
+.ConditTips {
+    h4 {
+        background-color: #FDF4EE;
+    }
+}
+.recommendInfoBox {
+    padding: 17px;
+}
+.treatRecommend h4 i {
+    background: url(/images/zhiliao.png) center center no-repeat;
+}
+.ConditTips h4 i {
+    background: url(/images/tips.png) center center no-repeat;
+}
+.symptomRecommend h4 i {
+    background: url(/images/inquire.png) center center no-repeat;
+}
+.physiExamRecommend h4 i {
+    background: url(/images/tgjc.png) center center no-repeat;
+}
+.labAndPacsRecommend h4 i {
+    background: url(/images/inspect.png) center center no-repeat;
+}
+.warning h4 i {
+    background: url(/images/warings.png) center center no-repeat;
+}
+.diagRecommend h4 i {
+    background: url(/images/yszd.png) center center no-repeat;
+}
+.recommendInfoItem {
+    margin-right: 18px;
+    float: left;
+    line-height: 24px;
+}
+.infoMsg, .infoMsgOn {
+    position: relative;
+    top: 4px;
+}
+.infoMsg, .infoMsgOn{
+    display: none;
+}
+.recommendInfoItem:hover {
+    .infoMsg {
+        display: inline-block;
+        width: 16px;
+        height: 16px;
+        background: url(/images/msg1.png) center center no-repeat;
+    }
+    .infoMsg:hover {
+        background: url(/images/msg2.png) center center no-repeat;
+    }
+}
+

src/js/indexVert.js

@@ -1,5 +1,5 @@
 require('./../css/reset.css');
-
+require('./../css/indexVert.less');
 const $ = require("jquery");
 const { post,config,getUrlArgObject } = require('./promise.js');
 const { transConf } = require('./util.js');

src/js/indexVertDom.js

@@ -1,10 +1,12 @@
 const $ = require("jquery")
+const infoMsgImg = require('./../images/msg1.png')
+const infoMsgImgOn = require('./../images/msg2.png')
 
 function renderRecommendInfo(className,title,data, hasInfo, type, position) {
     console.log('title:', title)
     const str = `<div class="recommendInfoWrapper ${className}">
                     <h4><i></i>${title}</h4>
-                    <div class="recommendInfoBox  ${className + 'box'}"></div>
+                    <div class="recommendInfoBox clearfix ${className + 'box'}"></div>
                 </div>`
     $('.recommendWrap').append(str)
     let childrenNodeStr = ''
@@ -12,7 +14,7 @@ function renderRecommendInfo(className,title,data, hasInfo, type, position) {
         for (let i = 0; i < data.length; i++) {
             childrenNodeStr += `<span class="recommendInfoItem" data-name="${data[i].name}">
                                     ${data[i].name}
-                                    <span  title="点击名称可看详细说明" class="infoMsg">说明</span>
+                                    <span  title="点击名称可看详细说明" class="infoMsg"></span>
                                 </span>`
         }
     } else {
@@ -52,7 +54,7 @@ function renderTreat(className,title, data) {
     console.log('renderTreat')
     const str = `<div class="recommendInfoWrapper ${className}">
                     <h4><i></i>${title}</h4>
-                    <div class="recommendInfoBox  ${className + 'box'}"></div>
+                    <div class="recommendInfoBox clearfix ${className + 'box'}"></div>
                 </div>`
     $('.recommendWrap').append(str)
     if(data.commonTreatment&&data.commonTreatment.content) {