Kaynağa Gözat

急诊流程

luolei 5 yıl önce
ebeveyn
işleme
cb5d98b85d

+ 133 - 0
src/css/emergency.less

@@ -0,0 +1,133 @@
+@import './common.less';
+
+.emergencyLis {
+  padding-bottom: 30px;
+  .disName{
+    height: 60px;
+    line-height: 60px;
+    position: relative;
+    .name {
+      display: inline-block;
+      font-size: 16px;
+      padding: 0 5px;
+      max-width: 265px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+  .step {
+    padding: 10px 14px 0 14px;
+    p {
+      color: #606060;
+    }
+    h4 {
+      color: #ff1d1d;
+      font-size: 16px;
+      padding: 10px 0;
+      font-weight: 700;
+      line-height: 20px;
+    }
+  }
+  .inHeart {
+    border: 1px solid #f76601;
+    color: #f76601;
+    margin-right: 10px;
+    padding: 7px 10px;
+    float: right;
+    border-radius: 4px;
+  }
+  .outHeart {
+    border: 1px solid #f76601;
+    color: #f76601;
+    margin-right: 10px;
+    padding: 7px 10px;
+    float: right;
+    border-radius: 4px;
+  }
+  .fullPink {
+    background-color: #feefe5;
+    color: #f76601;
+    width: 100%;
+    height: 40px;
+    line-height: 40px;
+    text-align: center;
+  }
+  .fullBlue {
+    background-color: #e9f5ff;
+    color: #2599ff;
+    width: 100%;
+    height: 40px;
+    line-height: 40px;
+    text-align: center;
+  }
+  .imgDown {
+    background-color: #fff;
+    height: 20px;
+    line-height: 20px;
+    width: 100%;
+    text-align: center;
+  }
+  .emptyMain {
+    width: 100%;
+    height: 40px;
+    line-height: 40px;
+    text-align: center;   
+     border: 1px solid #e9e9e9;
+    border-radius: 4px;
+  }
+  .disBtn {
+    height: 48px;
+    line-height: 48px;
+    border-radius: 4px;
+    padding: 0 20px;
+    color: #fff;
+    font-size: 14px;
+    margin: 10px 0;
+    position: relative;
+    span {
+
+    }
+    i {
+      float: right;
+      height: 32px;
+      line-height: 32px;
+      padding: 0 10px;
+      text-align: center;
+      border: 1px solid #fff;
+      margin-top: 8px;
+      border-radius: 4px;
+      cursor: pointer;
+    }
+    img {
+      float: right;
+      cursor: pointer;
+      margin-top: 6px;
+      position: absolute;
+      right: 5px;
+      top: 0;
+      display: none;
+    }
+  }
+  .disBtnRed {
+    background-color: #f76601;
+  }
+  .disBtnBlue {
+    background-color: #2599ff;
+  }
+  .disFst {
+    .stepFst {
+      border-bottom: 1px solid #cfd4dc;
+    }
+  }
+  .disMainRed,.disMainBlue {
+    display: none;
+  }
+  .disMainRed h5,.disMainBlue h5 {
+    color: #ff1d1d;
+    font-size: 16px;
+    padding: 10px 0;
+    font-weight: 700;
+    line-height: 20px;
+  }
+}

+ 59 - 0
src/html/emergency.html

@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+</head>
+<body>
+  <div class="emergencyLis">
+    <div class="disName">心包积液救治流程</div>
+    <div class="disFst">
+      <div class="step stepFst">
+        <p>步骤1</p>
+        <h4>进行全血细胞计数+血型鉴定、术前免疫、凝血功能、超声心动图等检查</h4>
+      </div>
+      <div class="step stepSec">
+        <p>步骤2</p>
+        <div class="disBtn disBtnRed" id="disBtnRed">
+          <span>心包积液</span>
+          <i id="sureBtn1">确定</i>
+          <img id="backBtn1" src="./images/back.png" alt="">
+        </div>
+        <div class="disBtn disBtnBlue" id="disBtnBlue">
+          <span>非心包积液</span>
+          <i id="sureBtn2">确定</i>
+          <img id="backBtn2" src="./images/back.png" alt="">
+        </div>
+        <div class="disMainRed">
+          <div class="outHeart">心外会诊</div>
+          <div class="inHeart">心内会诊</div>
+          <h5>判断是否心包填塞</h5>
+          <div class="fullPink">是</div>
+          <div class="imgDown"><img src="./images/down2.png" alt=""></div>
+          <div class="emptyMain">心包穿刺</div>
+          <div class="imgDown"><img src="./images/down2.png" alt=""></div>
+          <div class="emptyMain">穿刺液分析对症治疗</div>
+          <div class="imgDown"><img src="./images/down2.png" alt=""></div>
+          <div class="emptyMain">抢救室待床!</div>
+          <br><br>
+          <div class="fullBlue">否</div>
+          <div class="imgDown"><img src="./images/down2.png" alt=""></div>
+          <div class="emptyMain">积液量少查找病因对症治疗</div>
+          <div class="imgDown"><img src="./images/down2.png" alt=""></div>
+          <div class="emptyMain">病情未控制病情恶化</div>
+          <div class="imgDown"><img src="./images/down2.png" alt=""></div>
+          <div class="emptyMain">心包穿刺</div>
+          <div class="imgDown"><img src="./images/down2.png" alt=""></div>
+          <div class="emptyMain">穿刺液分析对症治疗</div>
+          <div class="imgDown"><img src="./images/down2.png" alt=""></div>
+          <div class="emptyMain">抢救室待床!</div>
+        </div>
+        <div class="disMainBlue">
+            <h4>查找其他原因</h4>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+</html>

BIN
src/images/back.png


BIN
src/images/down2.png


BIN
src/images/jianb.png


BIN
src/images/left.png


BIN
src/images/pic.png


BIN
src/images/pic1.png


BIN
src/images/pic2.png


BIN
src/images/pic3.png


BIN
src/images/pic4.png


BIN
src/images/pic5.png


BIN
src/images/right.png


+ 29 - 0
src/js/emergency.js

@@ -0,0 +1,29 @@
+require("./../css/emergency.less")
+require("../images/back.png")
+require("../images/down2.png")
+const $ = require("jquery");
+
+$("#sureBtn1").click(function(){
+  $(this).css({display:"none"})
+  $("#disBtnBlue").css({display:"none"})
+  $("#backBtn1").css({display:"block"})
+  $(".disMainRed").css({display:"block"})
+})
+$("#backBtn1").click(function(){
+  $(this).css({display:"none"})
+  $("#disBtnBlue").css({display:"block"})
+  $("#sureBtn1").css({display:"block"})
+  $(".disMainRed").css({display:"none"})
+})
+$("#sureBtn2").click(function(){
+  $(this).css({display:"none"})
+  $("#disBtnRed").css({display:"none"})
+  $("#backBtn2").css({display:"block"})
+  $(".disMainBlue").css({display:"block"})
+})
+$("#backBtn2").click(function(){
+  $(this).css({display:"none"})
+  $("#disBtnRed").css({display:"block"})
+  $("#sureBtn2").css({display:"block"})
+  $(".disMainBlue").css({display:"none"})
+})

+ 14 - 0
webpack.config.js

@@ -17,6 +17,7 @@ module.exports = {
     treatplan: path.resolve(__dirname, 'src/js', 'treatplan.js'),
     indexHorizontal: path.resolve(__dirname, 'src/js', 'indexHorizontal.js'),
     staticSearch: path.resolve(__dirname, 'src/js', 'staticSearch.js'),
+    emergency: path.resolve(__dirname, 'src/js', 'emergency.js'),
     vendor: 'lodash'// 多个页面所需的公共库文件,防止重复打包带入
   },
   output: {
@@ -172,6 +173,19 @@ module.exports = {
         collapseWhitespace: true //删除空白符与换行符
       }
     }),
+    new HtmlWebpackPlugin({
+      title: 'emergency',
+      template: path.resolve(__dirname, 'src/html', 'emergency.html'),
+      filename: 'emergency.html',
+      chunks: ['emergency', 'vendor', 'common'],
+      inject: true,
+      hash: true, //防止缓存
+      minify: {
+        removeAttributeQuotes: true, //压缩 去掉引号
+        removeComments: true, //移除HTML中的注释
+        collapseWhitespace: true //删除空白符与换行符
+      }
+    }),
     new MiniCssExtractPlugin({
       filename: 'css/[name].css',
       chunkFilename: '[id].css'