住院病案详情

src/views/medicalRecord/components/IconBtn.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="btn-box">
+    <slot />
+  </div>
+</template>
+
+<script>
+  export default {
+    
+  }
+</script>
+
+<style lang="scss" scoped>
+.btn-box {
+  padding: 10px;
+  background: rgba(0,73,131,0.1);
+  border-radius: 6px;
+  margin: 20px 10px;
+  text-align: center;
+  cursor: pointer;
+  display: inline-block;
+  &:hover {
+    opacity: 0.7;
+  }
+}
+</style>

src/views/medicalRecord/index.vue

@@ -122,6 +122,22 @@
           <td colspan="5">i11.111111</td>
         </tr>
       </table>
+      <div class="oper-box">
+        <IconBtnVue>
+          <el-image
+            class="icon_btn"
+            :src="require('../../assets/images/sort.png')"
+            fit="contain">
+          </el-image>
+        </IconBtnVue>
+        <IconBtnVue style="margin-right: 0;">
+          <el-image
+            class="icon_btn"
+            :src="require('../../assets/images/setting.png')"
+            fit="contain">
+          </el-image>
+        </IconBtnVue>
+      </div>
       <!-- 诊断信息 -->
       <table class="table">
         <tr>
@@ -307,6 +323,22 @@
           <td>2023年01月01日</td>
         </tr>
       </table>
+      <div class="oper-box">
+        <IconBtnVue>
+          <el-image
+            class="icon_btn"
+            :src="require('../../assets/images/sort.png')"
+            fit="contain">
+          </el-image>
+        </IconBtnVue>
+        <IconBtnVue style="margin-right: 0;">
+          <el-image
+            class="icon_btn"
+            :src="require('../../assets/images/setting.png')"
+            fit="contain">
+          </el-image>
+        </IconBtnVue>
+      </div>
       <!-- 手术信息 -->
       <table class="table shoushu">
         <tr>
@@ -396,6 +428,11 @@
           <td colspan="11">2.有，目的化疗</td>
         </tr>
       </table>
+      <div class="oper-box">
+        <IconBtnVue style="margin-right: 0;">
+          <span class="text_btn">查看费用详情</span>
+        </IconBtnVue>
+      </div>
       <!-- 费用信息 -->
       <table class="table">
         <tr>
@@ -448,7 +485,11 @@
 </template>
 
 <script>
+import IconBtnVue from './components/IconBtn.vue'
 export default {
+  components: {
+    IconBtnVue
+  },
   data() {
     return {
     }
@@ -474,6 +515,21 @@ export default {
   text-align: right;
   margin-bottom: 20px;
 }
+.icon_btn {
+  width: 20px;
+  height: 20px;
+  display: block;
+}
+.text_btn {
+  font-size: 14px;
+  font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+  font-weight: 400;
+  color: #185DA6;
+  line-height: 20px;
+}
+.oper-box {
+  text-align: right;
+}
 .table {
   width: 100%;
   min-width: 600px;
@@ -481,7 +537,6 @@ export default {
   empty-cells: show;
   border-collapse: collapse;
   margin: 0 auto;
-  margin-bottom: 30px;
   th,td {
     border: 1px solid #666666;
     font-size: 14px;