some common style &居民详情页

src/style/followup/followup-common.scss

 $borderBottomStyle: 1px solid #efefef;
 $picaGreen: #449284; //主色调
 
-$searchDiv: 160px; 
+$searchDiv: 160px;
 
 
 /*列表页布局*/
@@ -38,4 +38,38 @@ $searchDiv: 160px;
 .f-detail-content {
   background: #ffffff;
   padding: 30px;
+  .header {
+    padding-bottom: 20px;
+    border-bottom: $borderBottomStyle;
+    display: flex;
+    justify-content: space-between;
+  }
+}
+/*提示文字*/
+.reminding {
+  color: #9B9997;
+  font-size: 12px;
+}
+/*可点击的文字*/
+.click-text {
+  cursor: pointer;
+  color: $picaGreen;
+}
+/*详情表单*/
+.content-div {
+  display: flex;
+  flex-direction: row;
+  margin-bottom: 10px;
+  .c-title {
+    width: 150px;
+    text-align: right;
+
+    flex-shrink: 0;
+    margin-right: 20px;
+  }
+
+  .more-content {
+    flex-direction: column;
+  }
+
 }

src/views/followup/plan-manage/resident-detail.vue

 <template>
   <div class="resident-detail">
+    <bread-crumb
+      :curmbFirst="curmbFirst"
+      :curmbSecond="curmbSecond"
+      :curmbThird="curmbThird"
+      :jumPathThird="jumPathThird">
+    </bread-crumb>
     <div class="f-detail-content screenSet">
-dcsdf
+      <div class="header">
+        <div class="title"><p>基本信息</p></div>
+        <div class="h-btn">
+          <el-button class="button-white" plain>计划变更</el-button>
+          <el-button class="button-white" plain>结束随访</el-button>
+        </div>
+      </div>
+      <div class="base-info">
+        <div class="resident-info base-content">
+          <div class="content-div">
+            <div class="c-title">随访开始时间：</div>
+            <div class="c-content">戴佳康</div>
+          </div>
+          <div class="content-div ">
+            <div class="c-title">性别：</div>
+            <div class="c-content">男</div>
+          </div>
+          <div class="content-div">
+            <div class="c-title">年龄：</div>
+            <div class="c-content">55岁</div>
+          </div>
+          <div class="content-div">
+            <div class="c-title">身份证号：</div>
+            <div class="c-content">3101110196011022419</div>
+          </div>
+          <div class="content-div">
+            <div class="c-title">联系方式：</div>
+            <div class="c-content">13111111111</div>
+          </div>
+        </div>
+        <div class="group-info base-content">
+          <div class="content-div">
+            <div class="c-title">分组：</div>
+            <div class="c-content">2018糖尿病随访；2018糖尿病随访；</div>
+          </div>
+        </div>
+        <div class="followup-info base-content">
+          <div class="content-div">
+            <div class="c-title">随访模板：</div>
+            <div class="c-content">糖尿病随访</div>
+          </div>
+          <div class="content-div">
+            <div class="c-title">随访开始时间：</div>
+            <div class="c-content">2019-09-09</div>
+          </div>
+          <div class="content-div">
+            <div class="c-title">备注：</div>
+            <div class="c-content">手术随访</div>
+          </div>
+          <div class="content-div">
+            <div class="c-title">随访状态：</div>
+            <div class="c-content">进行中</div>
+          </div>
+        </div>
+      </div>
+      <div class="time-nodes">
+        <p class="title">随访时间节点</p>
+        <el-radio-group v-model="timeNodes">
+          <el-radio-button label="0">开始后1个月</el-radio-button>
+          <el-radio-button label="1">开始后2个月</el-radio-button>
+          <el-radio-button label="2">开始后3个月</el-radio-button>
+        </el-radio-group>
+        <div class="followup-contents">
+          <div class="content-div">
+            <div class="c-title">随访方式：</div>
+            <div class="c-content">门诊随访</div>
+          </div>
+          <div class="content-div">
+            <div class="c-title">提醒医生预约居民：</div>
+            <div class="c-content more-content">
+              <p>开始前20天提醒</p>
+              <p>开始前10天提醒</p>
+            </div>
+          </div>
+          <div class="content-div">
+            <div class="c-title">推送患教：</div>
+            <div class="c-content more-content">
+              <p>开始前30天 <span class="click-text">《患教内容患教内容患教内容》</span></p>
+              <p class="reminding">推送规则：优先微信推送，如果居民没关注云鹊医公众号，将短信推送，短信推送会消耗您的额度。推送详情请前往云鹊医app患教中心查询</p>
+            </div>
+          </div>
+          <div class="content-div">
+            <div class="c-title">随访登记表：</div>
+            <div class="c-content more-content">
+              <p class="click-text">《登记表名登记表名登记表名》</p>
+              <p class="click-text">《登记表名登记表名登记表名登记表名》</p>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
+  import BreadCrumb from '@/components/breadcrumb';
   export default {
-    name: "resident-detail"
+    name: "resident-detail",
+    components: {
+      BreadCrumb
+    },
+    data() {
+      return {
+        /*面包屑配置*/
+        curmbFirst: '随访管理',
+        curmbSecond: '计划管理',
+        curmbThird: '查看居民',
+        jumPathThird: '/followUp/plan-manage',
+        /*面包屑配置*/
+        timeNodes: 0,//时间节点
+      }
+    }
   }
 </script>
 
 <style lang="scss" scoped>
   @import '../../../style/followup/followup-common';
   @import '../../../style/followup/element-reset.css';
+  .resident-detail {
+    .f-detail-content {
+      .header {
+        .title {
+          display: flex;
+          flex-direction: column;
+          justify-content: flex-end;
+        }
+      }
+      .base-info {
+        padding: 10px;
+        border-bottom: 1px dashed #efefef;
+        .base-content {
+          display: flex;
+          flex-direction: row;
+          flex-wrap: wrap;
+          justify-content: space-between;
+          line-height: 35px;
+          .content-div {
+            .c-title {
+              width: 115px;
+            }
+          }
+        }
+      }
+      .time-nodes {
+        padding: 20px 10px;
+        .title {
+          color: #666666;
+          padding-bottom: 20px;
+        }
+        .followup-contents {
+          padding: 25px;
+
+        }
+      }
+    }
+  }
 </style>