问诊初始

src/components/common/inquirylist.vue

 <template>
   <div class="inquirylist">
     <el-row>
-      <el-col :span="8" v-for="(o, index) in 1  " :key="o" :offset="index > 0 ? 2 : 0">
+      <el-col :span="8" :key="o" :offset="index > 0   ? 2 : 0">
           <el-card shadow="always" :body-style="{ padding: '0px' }">
             <div class="inquiryname">
               <div class="inquiryinfo">
-                <div class="infone">问诊单2520 <span>(内科) </span></div>
-                <div class="talk">语音问诊</div>
-                <div class="time">{{time}}</div>
+                <div class="infone">问诊单{{inquiry.listnumber}}<span class="department">({{inquiry.department}}) </span></div>
+                <div class="talk">{{inquiry.voice}}</div>
+                <div class="time">{{inquiry.time}}</div>
               </div>
               <div class="inquirystatus">
                 <span class="status">状态：{{inquiry.status}}</span>
                 <div class="inquiryimg" v-if="inquiry.status==''">图片</div>
-                <div class="inquirytime" v-if="inquiry.time"><span></span> 00:00:15</div>
+                <div class="inquirytime" v-if="inquiry.countdown"><span></span> 00:00:15</div>
               </div>
             </div>
             <div class="inquirydoctor">
-              <div class="visitingdoctor"></div>
-              <div class="helpdoctor"> </div>
+              <div class="visitingdoctor">
+                <div class="onedoctor"><span>img</span>接诊医生 <el-tag v-if="inquiry.online" size="mini" type="danger" effect="dark">离线</el-tag></div>
+                <div class="onedoctorname">{{inquiry.visitingdoctor}}</div>
+                <div class="onedoctornum"> <span>{{inquiry.visitingdoctornum}}</span> <span @click="calldoc()" class="calldoctor"><span v-if="calldoctor">呼叫医生</span> <span v-else>呼叫中...</span></span>  </div>
+              </div>
+              <div class="helpdoctor"> 
+                <div class="onedoctor"><span>img</span>接诊医生 <el-tag v-if="inquiry.online" size="mini" type="danger" effect="dark">离线</el-tag></div>
+                <div class="onedoctorname">{{inquiry.helpdoctor}}</div>
+                <div class="onedoctornum"> <span>{{inquiry.helpdoctornum}}</span> <span @click="calldoc()" class="calldoctor"><span v-if="calldoctor">呼叫医生</span> <span v-else>呼叫中...</span></span>  </div>
+              </div>
             </div>
             <div class="inquiryroom">
               <span class="goroom">进入诊室</span>
@@ -34,18 +42,29 @@
 export default {
    data() {
     return {
-      time:new Date().getFullYear()+'-07-14  14:00-15:00',
       inquiry:{
+        time:new Date().getFullYear()+'-07-14  14:00-15:00',
         status:'异常',
-        time:'1'
-      }
+        department:'内科',
+        listnumber:'3520',
+        countdown:'1',
+        online:true,
+        voice:'语音问诊',
+        visitingdoctor:'孙四百',
+        helpdoctor:'孙四百',
+        visitingdoctornum:'111111111111',
+        helpdoctornum:'1111111111111'
+      },
+      calldoctor:true
     };
   },
   created() {
     // vm = this;
   },
   methods: {
-
+    calldoc() {
+      this.calldoctor = false
+    }
   }
 }
 </script>
@@ -53,16 +72,20 @@ export default {
 <style lang="scss" scoped>
  .inquirylist{
   display: flex;
+  flex-basis: 30%;
+  width: 30%;
   margin-bottom: 10px;
   margin: 20px 30px 0px;
   padding: 10px 5px;
-  background: #fff;
+  // background: #fff;
   overflow: hidden !important;
   .el-row{
-    flex-basis: 31%;
+    // flex-basis: 31%;
+    width: 100%;
+    height: 100%;
     .el-col{
       width: 100%;
-      height: 295px;
+      height: 260px;
       .el-card{
         height: 100%;
       }
@@ -85,6 +108,8 @@ export default {
           >span{
             font-size: 14px;
             color: #b2aeae;
+            display: inline-block;
+            margin-left: 5px;
           }
         }
         .talk{
@@ -118,12 +143,95 @@ export default {
       }
    }
    .inquirydoctor{
-      height: 140px;
+      height: 115px;
       border-bottom: rgb(209, 208, 208) 1px solid;
-
+      display: flex;
+      .visitingdoctor{
+        flex-basis: 50%;
+        padding: 5px 2px 7px 7px;
+        border-right: rgb(209, 208, 208) 1px solid;
+        .el-tag{
+          width: 30px;
+          height: 14px;
+          font-size: 10px !important;
+          line-height: 12px;
+          padding-left: 2px;
+        }
+        .el-tag--dark.el-tag--danger{
+          background-color: rgb(208, 2, 27);
+          border-color: rgb(208, 2, 27);
+        }
+        .onedoctor{
+          font-size: 14px;
+          color: #b2aeae;
+          margin: 4px;
+          margin-top: 10px;
+        }
+        .onedoctorname{
+          margin-top: 18px;
+          font-size: 14px;
+          margin-bottom: 7px;
+        }
+        .onedoctornum{
+          font-size: 14px;
+          .calldoctor{
+            display: inline-block;
+            border-radius: 12px;
+            border: 1px solid rgb(129, 178, 234);
+            font-size: 12px;
+            color: rgb(129, 178, 234);
+            width: 59px;
+            height: 20px;
+            padding-left: 4px;
+            margin-left: 13px;
+            cursor:pointer;
+          }
+        }
+      }
+      .helpdoctor{
+        flex-basis: 50%;
+        padding: 5px 2px 7px 7px;
+        .el-tag{
+          width: 30px;
+          height: 14px;
+          font-size: 10px !important;
+          line-height: 12px;
+          padding-left: 2px;
+        }
+        .el-tag--dark.el-tag--danger{
+          background-color: rgb(208, 2, 27);
+          border-color: rgb(208, 2, 27);
+        }
+        .onedoctor{
+          font-size: 14px;
+          color: #b2aeae;
+          margin: 4px;
+          margin-top: 10px;
+        }
+        .onedoctorname{
+          margin-top: 18px;
+          font-size: 14px;
+          margin-bottom: 7px;
+        }
+        .onedoctornum{
+          font-size: 14px;
+          .calldoctor{
+            display: inline-block;
+            border-radius: 12px;
+            border: 1px solid rgb(129, 178, 234);
+            font-size: 12px;
+            color: rgb(129, 178, 234);
+            width: 59px;
+            height: 20px;
+            padding-left: 4px;
+            margin-left: 13px;
+            cursor:pointer;
+          }
+        }
+      }
    }
    .inquiryroom{
-     height: 55px;
+     height: 45px;
      display: flex;
       .goroom{
         display: inline-block;
@@ -131,7 +239,7 @@ export default {
         flex-basis: 50%;
         text-align: center;
         height: 100%;
-        line-height: 55px;
+        line-height: 45px;
         border-right: rgb(209, 208, 208) 1px solid;
       }
       .suggest{
@@ -141,7 +249,7 @@ export default {
         display: inline-block;
         text-align: center;
         height: 100%;
-        line-height: 55px;
+        line-height: 45px;
       }
    }
  }