diff --git a/src/assets/image/defined.png b/src/assets/image/defined.png
index 7ba10b3cd283b08000151a7dacd48826207e883d..63175ad0ed40318f1db9cbad5027b544651ad4ad 100644
Binary files a/src/assets/image/defined.png and b/src/assets/image/defined.png differ
diff --git a/src/assets/image/defined1.png b/src/assets/image/defined1.png
new file mode 100644
index 0000000000000000000000000000000000000000..7ba10b3cd283b08000151a7dacd48826207e883d
Binary files /dev/null and b/src/assets/image/defined1.png differ
diff --git a/src/assets/image/top-left-btn.png b/src/assets/image/top-left-btn.png
new file mode 100644
index 0000000000000000000000000000000000000000..0ae7266f937377aae3adef459e93234b06b88770
Binary files /dev/null and b/src/assets/image/top-left-btn.png differ
diff --git a/src/assets/image/top-left.png b/src/assets/image/top-left.png
index 89c449df781a1398f5e2af726fdb82224eb63c7b..340f8faa91d6d58ab2aec5b0f9ec789063ad8884 100644
Binary files a/src/assets/image/top-left.png and b/src/assets/image/top-left.png differ
diff --git a/src/assets/image/top-left1.png b/src/assets/image/top-left1.png
new file mode 100644
index 0000000000000000000000000000000000000000..89c449df781a1398f5e2af726fdb82224eb63c7b
Binary files /dev/null and b/src/assets/image/top-left1.png differ
diff --git a/src/assets/image/top-right-btn.png b/src/assets/image/top-right-btn.png
new file mode 100644
index 0000000000000000000000000000000000000000..18a380f90d100940724028f1fd94f8cb83e93ee5
Binary files /dev/null and b/src/assets/image/top-right-btn.png differ
diff --git a/src/components/feature/AccumulativeStatistics/AccuItem.vue b/src/components/feature/AccumulativeStatistics/AccuItem.vue
index e875bb29d0926b411e2322579b198f4488360d52..bb9f58a6b549e70dc6e4f8949528d3a14e11284c 100644
--- a/src/components/feature/AccumulativeStatistics/AccuItem.vue
+++ b/src/components/feature/AccumulativeStatistics/AccuItem.vue
@@ -67,7 +67,7 @@ export default class AccuItem extends Vue {
     this.$emit('contentOpen', row);
   }
   private getDetail(index: number, row: any) {
-    if (row.idNo) {
+    if (row.idNo && /[0-9]+/.test(row.idNo)) {
       this.$router.push(`/PatientPortrayal?id=${row.idNo}`);
     } else {
       this.$message.error('该患者暂时无法进行追溯');
diff --git a/src/components/feature/DiseaseInfoFeverClinic/DiseaseList.vue b/src/components/feature/DiseaseInfoFeverClinic/DiseaseList.vue
index ffb9e4bcb738af95c2379f7c585ee60a3f32f4db..d42596fa72e4fafeacdae552fcbc3854a5ec78b4 100644
--- a/src/components/feature/DiseaseInfoFeverClinic/DiseaseList.vue
+++ b/src/components/feature/DiseaseInfoFeverClinic/DiseaseList.vue
@@ -362,7 +362,7 @@ export default class DiseasDeList extends Vue {
 
   // 追溯
   private getDetail(index: number, row: any) {
-    if (row.idNo) {
+    if (row.idNo && /[0-9]+/.test(row.idNo)) {
       this.$router.push(`/PatientPortrayal?id=${row.idNo}`);
     } else {
       this.$message.error('该患者暂时无法进行追溯');
diff --git a/src/components/feature/DiseaseInfoGL/DiseaseList.vue b/src/components/feature/DiseaseInfoGL/DiseaseList.vue
index 5dbaa65ddfcd223b1647a274e4b507a8ee61216a..13e1c12838277e83a576bb1d4f5ab9c1bbd30787 100644
--- a/src/components/feature/DiseaseInfoGL/DiseaseList.vue
+++ b/src/components/feature/DiseaseInfoGL/DiseaseList.vue
@@ -381,7 +381,7 @@ export default class DiseasDeList extends Vue {
 
   // 追溯
   private getDetail(index: number, row: any) {
-    if (row.suffererCard) {
+    if (row.suffererCard && /[0-9]+/.test(row.suffererCard)) {
       this.$router.push(`/PatientPortrayal?id=${row.suffererCard}`);
     } else {
       this.$message.error('该患者暂时无法进行追溯');
diff --git a/src/components/feature/DiseaseInfoHospitalDD/DiseaseList.vue b/src/components/feature/DiseaseInfoHospitalDD/DiseaseList.vue
index 977cbf562b48f8aa2938f30c64a19da2e6eb706c..8baf84b2baea5285322845e648520544c6f9487c 100644
--- a/src/components/feature/DiseaseInfoHospitalDD/DiseaseList.vue
+++ b/src/components/feature/DiseaseInfoHospitalDD/DiseaseList.vue
@@ -351,7 +351,7 @@ export default class DiseasDeList extends Vue {
 
   // 追溯
   private getDetail(index: number, row: any) {
-    if (row.idNo) {
+    if (row.idNo && /[0-9]+/.test(row.idNo)) {
       this.$router.push(`/PatientPortrayal?id=${row.idNo}`);
     } else {
       this.$message.error('该患者暂时无法进行追溯');
diff --git a/src/components/feature/DiseaseInfoHospitalFC/DiseaseList.vue b/src/components/feature/DiseaseInfoHospitalFC/DiseaseList.vue
index 46286cbcca182e1fa8ecccd3adae6a8f9c0e0a15..7ffc5ed4edb5e2e55e78ccfa8ecdd2a18538e746 100644
--- a/src/components/feature/DiseaseInfoHospitalFC/DiseaseList.vue
+++ b/src/components/feature/DiseaseInfoHospitalFC/DiseaseList.vue
@@ -327,7 +327,7 @@ export default class DiseasDeList extends Vue {
 
   // 追溯
   private getDetail(index: number, row: any) {
-    if (row.idNo) {
+    if (row.idNo && /[0-9]+/.test(row.idNo)) {
       this.$router.push(`/PatientPortrayal?id=${row.idNo}`);
     } else {
       this.$message.error('该患者暂时无法进行追溯');
diff --git a/src/components/feature/DiseaseInfoYQ/DiseaseList.vue b/src/components/feature/DiseaseInfoYQ/DiseaseList.vue
index 2f5b0e17ff3b33aac8f62670c86b6d2a2dc1d3a6..517b8ac863f9e2cb6b1e082a132177cdc30817a8 100644
--- a/src/components/feature/DiseaseInfoYQ/DiseaseList.vue
+++ b/src/components/feature/DiseaseInfoYQ/DiseaseList.vue
@@ -362,7 +362,7 @@ export default class DiseasDeList extends Vue {
 
   // 追溯
   private getDetail(index: number, row: any) {
-    if (row.idNo) {
+    if (row.idNo && /[0-9]+/.test(row.idNo)) {
       this.$router.push(`/PatientPortrayal?id=${row.idNo}`);
     } else {
       this.$message.error('该患者暂时无法进行追溯');
diff --git a/src/router/router.ts b/src/router/router.ts
index 2710f5091bf5c918e21197f361389ac8ae345841..6257c372e28676e72b38abdc45da3e72cfae65e3 100644
--- a/src/router/router.ts
+++ b/src/router/router.ts
@@ -222,9 +222,15 @@ const router = new Router({
     },
   ],
 });
-// router.beforeEach((to, from, next) => {
-//   //  登录校验
-//   console.log(to);
-//   next();
-// });
+router.beforeEach((to, from, next) => {
+  if (
+    to.path === '/login' ||
+    to.path === '/dataCompare' ||
+    localStorage.getItem('token')
+  ) {
+    next();
+  } else {
+    next('/login');
+  }
+});
 export default router;
diff --git a/src/views/LayoutHome.vue b/src/views/LayoutHome.vue
index f505d8f1e391989e9c7c5695eaeb9ba17ce31432..11bff424cc17c0f8cf019c97e353c34922d48a47 100644
--- a/src/views/LayoutHome.vue
+++ b/src/views/LayoutHome.vue
@@ -32,8 +32,10 @@ import MenuList from '@/views/MenuList.vue';
 export default class LayoutHome extends Vue {
   private userName: string | null = localStorage.getItem('username');
   private loginOut() {
+    loginServer.loginOut().then((res: any) => {
+      localStorage.setItem('token', '');
+    });
     this.$router.push('/login');
-    loginServer.loginOut();
   }
 }
 </script>
diff --git a/src/views/PatientPortrayal.vue b/src/views/PatientPortrayal.vue
index b25848147f29483c844a57f6d1e2c368327ea37c..5a6acfcda2257abd3f6dde2a88029edaf8286571 100644
--- a/src/views/PatientPortrayal.vue
+++ b/src/views/PatientPortrayal.vue
@@ -1,128 +1,177 @@
 <template>
-  <div
-    class="PatientPortrayal"
-    id="scaleLayout"
-    :style="'transform:scale(' + scaleX + ',' + scaleY +')'"
-  >
-    <div class="layoutHome-header">
-      <div class="layoutHome-header-box" v-for="(item,index) in topData" :key="index">
-        <div class="view">{{item.changeTime}}</div>
-        <div class="layoutHome-image" v-if="item.changeInfo"></div>
-        <div class="text" :title="item.changeInfo" >{{item.changeInfo}}</div>
-        <div class="cursor" v-if="item.changeInfo"></div>
-        <div class="cursor-last" v-if="index == 7"></div>
-      </div>
-      <div class="last-page" @click="headerPageChange(-1)" v-if="topParams.nowPage > 0">上一页</div>
-      <div
+  <div class="wrap">
+    <div
+      class="PatientPortrayal"
+      :class="{
+        active: prevSufferId !== '' && prevSufferId !== sufferData.idNo,
+      }"
+      id="scaleLayout"
+      :style="'transform:scale(' + scaleX + ',' + scaleY + ')'"
+    >
+      <div class="layoutHome-header">
+        <div
+          class="layoutHome-header-box"
+          v-for="(item, index) in topData"
+          :key="index"
+        >
+          <div class="view">{{ item.changeTime }}</div>
+          <div class="layoutHome-image" v-if="item.changeInfo"></div>
+          <div class="text" :title="item.changeInfo">{{ item.changeInfo }}</div>
+          <div class="cursor" v-if="item.changeInfo && index !== 0"></div>
+          <!-- <div class="cursor-last" v-if="index == 7"></div> -->
+        </div>
+        <div
+          class="last-page"
+          @click="headerPageChange(-1)"
+          v-if="topParams.nowPage > 0"
+        ></div>
+        <div
           class="next-page"
           @click="headerPageChange(1)"
-          v-if="topTotalPage - topParams.nowPage != 1&&topTotalPage!=0"
-        >下一页</div>
-      <div class="layoutHome-left-image" @click="downloadTrace">
-        <span class="left-text">{{currentSufferData.suffererName}}病情溯源</span>
+          v-if="topTotalPage - topParams.nowPage != 1 && topTotalPage != 0"
+        ></div>
+        <div class="layoutHome-left-image" @click="downloadTrace">
+          <span class="left-text"
+            >{{ currentSufferData.suffererName }}病情溯源</span
+          >
+        </div>
+        <div class="defined-back" @click="back()"></div>
       </div>
-      <div class="defined-back" @click="back()"></div>
-    </div>
-    <div class="PatientPortrayal-bottom">
-      <div
-        class="PatientPortrayal-message"
-        @click="changeId(item)"
-        :class="{active:item.id === currentSufferData.id}"
-        v-for="(item,index) in sickMessageData"
-        :key="index"
-      >
-        <div class="photo-bg"></div>
-        <div class="photo"></div>
-        <div class="light-line" v-if="item.id === currentSufferData.id"></div>
-        <div class="lead-line"></div>
-        <div class="relation">{{item.ccRelation}}</div>
-        <div class="sick-message">
-          <span class="sick-message-text">
-            <span class="text">
-              <span>姓名:</span>
-              <span>{{item.ccName}}</span>
-            </span>
-            <span class="text">
-              <span>性别/年龄:</span>
-              <span>{{item.ccSex}}{{item.ccAge}}</span>
-            </span>
-            <span class="text">
-              <span>联系电话:</span>
-              <span>{{item.ccTelphone}}</span>
-            </span>
-            <!-- <span class="text">
+      <div class="PatientPortrayal-bottom">
+        <div
+          class="PatientPortrayal-message"
+          @click="changeId(item)"
+          :class="{
+            active: item.id === currentSufferData.id,
+            sick: item.infectedType === '1',
+          }"
+          v-for="(item, index) in sickMessageData"
+          :key="index"
+        >
+          <div class="photo-bg"></div>
+          <div class="photo"></div>
+          <div class="light-line" v-if="item.id === currentSufferData.id"></div>
+          <div class="lead-line"></div>
+          <div class="relation">{{ item.ccRelation }}</div>
+          <div class="sick-message">
+            <span class="sick-message-text">
+              <span class="text">
+                <span>姓名:</span>
+                <span>{{ item.ccName }}</span>
+              </span>
+              <span class="text">
+                <span>性别/年龄:</span>
+                <span>{{ item.ccSex }}{{ item.ccAge }}</span>
+              </span>
+              <span class="text">
+                <span>联系电话:</span>
+                <span>{{ item.ccTelphone }}</span>
+              </span>
+              <!-- <span class="text">
               <span>身份证:</span>
               <span>{{item.suffererIdno}}</span>
             </span>-->
-            <span class="text">
-              <span>病患位置:</span>
-              <span :title="item.ccCurLocation">{{item.ccCurLocation}}</span>
-            </span>
-            <!-- <span class="text">
+              <span class="text">
+                <span>病患位置:</span>
+                <span :title="item.ccCurLocation">{{
+                  item.ccCurLocation
+                }}</span>
+              </span>
+              <!-- <span class="text">
                 <span>病患类型:</span>
                 <span>{{item.remark}}</span>
               </span>
             </span>-->
-          </span>
-        </div>
-      </div>
-      <div class="defined" @click="reset">
-        <div class="defined-phtot-bg"></div>
-        <div class="defined-message">
-          <div class="defined-message-line">
-            <span>姓名:</span>
-            <span>{{sufferData.suffererName}}</span>
-          </div>
-          <div class="defined-message-line">
-            <span>身份证:</span>
-            <span>{{sufferData.idNo}}</span>
+            </span>
           </div>
-          <div class="defined-message-line">
-            <span>性别/年龄:</span>
-            <span>{{sufferData.gender}} {{sufferData.age}}</span>
+        </div>
+        <div class="defined" @click="reset">
+          <div class="defined-phtot-bg"></div>
+          <div class="defined-message">
+            <div class="defined-message-line">
+              <span>姓名:</span>
+              <span>{{ sufferData.suffererName }}</span>
+            </div>
+            <div class="defined-message-line">
+              <span>身份证:</span>
+              <span>{{ sufferData.idNo }}</span>
+            </div>
+            <div class="defined-message-line">
+              <span>性别/年龄:</span>
+              <span>{{ sufferData.gender }} {{ sufferData.age }}</span>
+            </div>
+            <div class="defined-message-line">
+              <span>电话:</span>
+              <span>{{ sufferData.telephone || '-' }}</span>
+            </div>
+            <div class="defined-message-line">
+              <span>病患类型:</span>
+              <span class="suffer-type">{{
+                sufferData.suffererType || '-'
+              }}</span>
+            </div>
+            <div class="defined-message-line">
+              <span>病患位置:</span>
+              <span>{{ sufferData.location || '-' }}</span>
+            </div>
+            <div class="defined-message-line">
+              <span>感染人数:</span>
+              <span class="close-contact">{{
+                sufferData.closeContactNum || '-'
+              }}</span>
+              <span>感染率:</span>
+              <span>{{
+                sufferData.infectionRate !== null
+                  ? `${(sufferData.infectionRate * 100).toFixed(2)}%`
+                  : '-'
+              }}</span>
+            </div>
           </div>
-          <div class="defined-message-line">
-            <span>电话:</span>
-            <span>{{sufferData.telephone || '-'}}</span>
+          <div
+            class="last-page"
+            @click="pageChange(-1)"
+            v-if="params.nowPage > 0"
+          >
+            上一页
           </div>
-          <div class="defined-message-line">
-            <span>病患类型:</span>
-            <span>{{sufferData.suffererType || '-'}}</span>
+          <div
+            class="next-page"
+            @click="pageChange(1)"
+            v-if="
+              pageData.totalPage - params.nowPage != 1 &&
+                pageData.totalPage != 0
+            "
+          >
+            下一页
           </div>
-          <div class="defined-message-line">
-            <span>病患位置:</span>
-            <span>{{sufferData.location || '-'}}</span>
+          <div class="page-number">
+            <span class="page-number-left"
+              >{{ params.nowPage + 1 }}/{{
+                pageData.totalPage == 0 ? 1 : pageData.totalPage
+              }}页</span
+            >
+            <span class="page-number-right">共{{ pageData.total }}位</span>
           </div>
         </div>
-        <div class="last-page" @click="pageChange(-1)" v-if="params.nowPage > 0">上一页</div>
-        <div
-          class="next-page"
-          @click="pageChange(1)"
-          v-if="pageData.totalPage - params.nowPage != 1&&pageData.totalPage!=0"
-        >下一页</div>
-        <div class="page-number">
-          <span class="page-number-left">{{params.nowPage + 1}}/{{pageData.totalPage==0?1:pageData.totalPage}}页</span>
-          <span class="page-number-right">共{{pageData.total}}位</span>
-        </div>
       </div>
     </div>
   </div>
 </template>
 
 <script lang="ts">
-import { Component, Vue, Prop } from 'vue-property-decorator';
+import { Component, Vue, Prop, Watch } from 'vue-property-decorator';
 import { diseaseInfoServer, accumulativeStatistics } from '@/api/installServer';
 @Component({
   name: 'LayoutHome',
   components: {},
 })
 export default class LayoutHome extends Vue {
-  private topData: any = [
-  ];
+  private topData: any = [];
   private sickMessageData: any = [];
   private scaleX = 1;
   private scaleY = 1;
   private sufferData: any = {};
+  private prevSufferId: any = '';
   private currentSufferData: any = {
     id: '',
     suffererName: '',
@@ -145,40 +194,62 @@ export default class LayoutHome extends Vue {
     total: 0,
     totalPage: 1,
   };
-  private searchDate = sessionStorage.getItem('searchDate');
   private created() {
-    diseaseInfoServer
-      .getDDHospitalEditDataIdNo(this.$route.query.id)
-      .then((res: any) => {
-        if (res.data.code === '200') {
-          this.sufferData = res.data.data;
-          this.currentSufferData.id = this.sufferData.id;
-          this.currentSufferData.suffererName = this.sufferData.suffererName;
-          this.currentSufferData.suffererIdNo = this.sufferData.idNo;
-          this.getContentList();
-          this.patientPortrayal(); // 开始调本人的溯源接口
-        } else if (res.data.code === '-100') {
-          this.$message.error('该患者暂时无法进行追溯');
-        }
-      });
+    const id = this.$route.query.id;
+    this.getSufferData(id);
+  }
+  private getSufferData(id: any) {
+    diseaseInfoServer.getDDHospitalEditDataIdNo(id).then((res: any) => {
+      if (res.data.code === '200') {
+        this.sufferData = res.data.data;
+        this.currentSufferData.id = this.sufferData.id;
+        this.currentSufferData.suffererName = this.sufferData.suffererName;
+        this.currentSufferData.suffererIdNo = this.sufferData.idNo;
+        this.getContentList();
+        this.patientPortrayal(); // 开始调本人的溯源接口
+      } else if (res.data.code === '-100') {
+        this.$message.error('该患者暂时无法进行追溯');
+      }
+    });
+  }
+  @Watch('$route')
+  private refresh() {
+    this.pageData = {
+      total: 0,
+      totalPage: 1,
+    };
+    this.topParams.nowPage = 0;
+    this.params.nowPage = 0;
+    const id = this.$route.query.id;
+    this.getSufferData(id);
   }
   private reset() {
-    this.currentSufferData.id = this.sufferData.id;
-    this.currentSufferData.suffererName = this.sufferData.suffererName;
-    this.currentSufferData.suffererIdNo = this.sufferData.idNo;
-    this.patientPortrayal(); // 开始调本人的溯源接口
+    // this.currentSufferData.id = this.sufferData.id;
+    // this.currentSufferData.suffererName = this.sufferData.suffererName;
+    // this.currentSufferData.suffererIdNo = this.sufferData.idNo;
+    // this.patientPortrayal(); // 开始调本人的溯源接口
   }
   // 密切人员的点击事件，暂时没用
   private changeId(item: any) {
-    this.currentSufferData.id = item.id;
+    // this.currentSufferData.id = item.id;
     // this.currentSufferData.suffererName = item.ccName;
     //  this.currentSufferData.suffererIdNo = item.suffererIdno;
     // this.patientPortrayal();
     // 拿这个id再去调溯源接口
+    this.prevSufferId = this.sufferData.idNo;
+    if (item.infectedType !== '1') {
+      return;
+    }
+    if (item.ccIdno && /[0-9]+/.test(item.ccIdno)) {
+      // item.suffererIdno = '420122197003220927';
+      this.$router.push(`/PatientPortrayal?id=${item.ccIdno}`);
+      // this.getSufferData(item.suffererIdno);
+    } else {
+      this.$message.error('该患者暂时无法进行追溯');
+    }
   }
   private getContentList() {
-    this.params.suffererIdNo =
-      this.sufferData.idNo || this.sufferData.telphone;
+    this.params.suffererIdNo = this.sufferData.idNo || this.sufferData.telphone;
     if (this.sufferData.idNo) {
       this.params.suffererIdNo = this.params.suffererIdNo;
     }
@@ -225,17 +296,12 @@ export default class LayoutHome extends Vue {
         this.topTotalPage = res.data.data.totalPages;
       }
     });
-
   }
   private back() {
-    if (this.searchDate) {
-       sessionStorage.setItem('searchDate', this.searchDate);
-       this.$router.go(-1);
-    } else {
-       this.$router.go(-1);
-    }
+    this.prevSufferId = this.sufferData.idNo;
+    this.$router.go(-1);
   }
-     private downloadFun(res: any) {
+  private downloadFun(res: any) {
     const obj = res.data;
     const filename = res.headers.filename;
     if (window.navigator.msSaveOrOpenBlob) {
@@ -257,7 +323,7 @@ export default class LayoutHome extends Vue {
       suffererName: this.currentSufferData.suffererName,
     };
     accumulativeStatistics.suffererinfoTraceExport(params).then((res: any) => {
-        this.downloadFun(res);
+      this.downloadFun(res);
     });
   }
   private mounted() {
@@ -278,6 +344,14 @@ export default class LayoutHome extends Vue {
 </script>
 
 <style lang="less" scoped>
+@keyframes changePage {
+  from {
+    transform: translate(100%, 100%);
+  }
+  to {
+    transform: translate(0, 0);
+  }
+}
 @keyframes borderRotate {
   from {
     transform: rotateZ(0deg);
@@ -305,61 +379,71 @@ export default class LayoutHome extends Vue {
     transform: scale(1);
   }
 }
+.PatientPortrayal.active {
+  animation: changePage 0.5s linear;
+}
+.wrap {
+  background: url('../../src/assets/image/bg.png');
+  width: 100%;
+  height: 100%;
+}
 .PatientPortrayal {
   // outline: 1px solid green;
   transform-origin: 0 0;
   width: 1920px;
   height: 1080px;
-  background: url("../../src/assets/image/bg.png");
+  background: url('../../src/assets/image/bg.png');
   .layoutHome-header {
     width: 100%;
     height: 212px;
-    background: url("../../src/assets/image/shijianzhou.png");
+    background: url('../../src/assets/image/shijianzhou.png');
     overflow: hidden;
     position: relative;
     .defined-back {
       width: 125px;
       height: 46px;
-      background: url("../../src/assets/image/back-btn.png") no-repeat;
+      background: url('../../src/assets/image/back-btn.png') no-repeat;
       position: absolute;
       top: 35px;
       right: 105px;
       cursor: pointer;
     }
     .last-page {
-        width: 80px;
-        height: 42px;
-        position: absolute;
-        top: 154px;
-        left: 210px;
-        color: #7bdefd;
-        text-align: center;
-        border:1px solid #2b72ea;
-        line-height: 42px;
-        cursor: pointer;
-        border-raius:5px;
-      }
-      .next-page {
-        cursor: pointer;
-        width: 80px;
-        height: 42px;
-        position: absolute;
-        border:1px solid #2b72ea;
-        top: 150px;
-        right: 134px;
-        color: #7bdefd;
-        text-align: center;
-        line-height: 42px;
-        border-radius:5px;
-      }
+      width: 42px;
+      height: 42px;
+      position: absolute;
+      background: url('../../src/assets/image/top-left-btn.png') no-repeat;
+      top: 89px;
+      left: 326px;
+      color: #7bdefd;
+      text-align: center;
+      // border: 1px solid #2b72ea;
+      line-height: 42px;
+      cursor: pointer;
+      border-radius: 5px;
+    }
+    .next-page {
+      cursor: pointer;
+      width: 42px;
+      height: 42px;
+      position: absolute;
+      background: url('../../src/assets/image/top-right-btn.png') no-repeat;
+      // border: 1px solid #2b72ea;
+      top: 85px;
+      right: 244px;
+      color: #7bdefd;
+      text-align: center;
+      line-height: 42px;
+      border-radius: 5px;
+    }
     .layoutHome-left-image {
       width: 238px;
       height: 54px;
       position: absolute;
       top: 76px;
-      left: 124px;
-      background: url("../../src/assets/image/top-left.png");
-      cursor:pointer;
+      left: 85px;
+      background: url('../../src/assets/image/top-left.png');
+      cursor: pointer;
       .left-text {
         display: inline-block;
         margin-top: 10px;
@@ -372,7 +456,7 @@ export default class LayoutHome extends Vue {
     .layoutHome-image {
       width: 64px;
       height: 78px;
-      background: url("../../src/assets/image/dingwei.png");
+      background: url('../../src/assets/image/dingwei.png');
     }
     .layoutHome-header-box {
       width: 106px;
@@ -381,7 +465,7 @@ export default class LayoutHome extends Vue {
       .view {
         width: 104px;
         height: 40px;
-        background: url("../../src/assets/image/viewbg.png");
+        background: url('../../src/assets/image/viewbg.png');
         font-size: 14px;
         color: #20c2e8;
         text-align: center;
@@ -521,7 +605,7 @@ export default class LayoutHome extends Vue {
           top: 73px;
           left: -10px;
         }
-        .cursor-last{
+        .cursor-last {
           position: absolute;
           top: 66px;
           right: -35px;
@@ -530,12 +614,12 @@ export default class LayoutHome extends Vue {
       .cursor {
         width: 13px;
         height: 12px;
-        background: url("../../src/assets/image/jiantou.png");
+        background: url('../../src/assets/image/jiantou.png');
       }
       .cursor-last {
         width: 13px;
         height: 12px;
-        background: url("../../src/assets/image/jiantou.png");
+        background: url('../../src/assets/image/jiantou.png');
       }
     }
   }
@@ -548,16 +632,16 @@ export default class LayoutHome extends Vue {
     .defined {
       width: 498px;
       height: 673px;
-      background: url("../../src/assets/image/defined.png");
+      background: url('../../src/assets/image/defined.png');
       position: absolute;
       top: 0;
       left: 50%;
       transform: translateX(-50%);
-      cursor: pointer;
+      cursor: default;
       .last-page {
         width: 126px;
         height: 42px;
-        background: url("../../src/assets/image/last-page.png") no-repeat;
+        background: url('../../src/assets/image/last-page.png') no-repeat;
         position: absolute;
         bottom: -52px;
         left: -257px;
@@ -571,7 +655,7 @@ export default class LayoutHome extends Vue {
         cursor: pointer;
         width: 123px;
         height: 42px;
-        background: url("../../src/assets/image/next-page.png") no-repeat;
+        background: url('../../src/assets/image/next-page.png') no-repeat;
         position: absolute;
         bottom: -52px;
         right: -250px;
@@ -583,7 +667,7 @@ export default class LayoutHome extends Vue {
         height: 30px;
         position: absolute;
         bottom: -45px;
-        right: -410px;
+        right: -464px;
         font-size: 20px;
         color: #55c4fe;
         letter-spacing: 2px;
@@ -596,19 +680,19 @@ export default class LayoutHome extends Vue {
       .defined-phtot-bg {
         width: 238px;
         height: 238px;
-        background: url("../../src/assets/image/defined-photo-bg.png") no-repeat;
+        background: url('../../src/assets/image/defined-photo-bg.png') no-repeat;
         background-size: 100% 100%;
         position: absolute;
-        top: 144px;
+        top: 156px;
         left: 130px;
         animation: borderRotate 3s linear infinite;
       }
       .defined-message {
         width: 315px;
-        height: 218px;
+        height: 244px;
         position: absolute;
         left: 94px;
-        bottom: 54px;
+        bottom: 19px;
         .defined-message-line {
           height: 32px;
           line-height: 32px;
@@ -625,10 +709,31 @@ export default class LayoutHome extends Vue {
             &:nth-child(2) {
               float: left;
               font-size: 16px;
-              color: #67e4ff;
+              color: #23ddfd;
               line-height: 32px;
               margin-left: 20px;
             }
+            &:nth-child(3) {
+              font-size: 16px;
+              color: #fff;
+              margin-left: 20px;
+              width: 61px;
+              float: left;
+            }
+            &:nth-child(4) {
+              float: lett;
+              font-size: 18px;
+              color: #23ddfd;
+              line-height: 32px;
+              margin-left: 15px;
+              width: 50px;
+            }
+            &:nth-child(2).suffer-type {
+              color: #23ddfd;
+            }
+            &:nth-child(2).close-contact {
+              font-size: 18px;
+            }
           }
         }
       }
@@ -638,16 +743,22 @@ export default class LayoutHome extends Vue {
         animation: borderRotate 3s linear 1 forwards;
       }
     }
+    .PatientPortrayal-message.sick {
+      cursor: pointer;
+      .photo {
+        background: url('../../src/assets/image/miqie-defined.png');
+      }
+    }
     .PatientPortrayal-message {
       width: 531px;
       height: 219px;
-      background: url("../../src/assets/image/miqie.png");
+      background: url('../../src/assets/image/miqie.png');
       position: relative;
-      cursor: pointer;
+      cursor: default;
       .light-line {
         width: 317px;
         height: 97px;
-        background: url("../../src/assets/image/active.png");
+        background: url('../../src/assets/image/active.png');
         position: absolute;
         left: -65px;
         bottom: -16px;
@@ -658,7 +769,7 @@ export default class LayoutHome extends Vue {
         height: 92px;
         background-size: 100% 100%;
         overflow: hidden;
-        background: url("../../src/assets/image/miqie-photo-bg.png");
+        background: url('../../src/assets/image/miqie-photo-bg.png');
       }
       .photo {
         width: 68px;
@@ -666,13 +777,13 @@ export default class LayoutHome extends Vue {
         position: absolute;
         left: 12px;
         top: 12px;
-        background: url("../../src/assets/image/miqie-adopt.png");
+        background: url('../../src/assets/image/miqie-adopt.png');
       }
-      .relation{
-        width:110px;
-        height:40px;
-        color:#83e3ff;
-         text-align:center;
+      .relation {
+        width: 110px;
+        height: 40px;
+        color: #83e3ff;
+        text-align: center;
       }
       .sick-message {
         width: 457px;
@@ -714,7 +825,7 @@ export default class LayoutHome extends Vue {
             }
             &:nth-child(3) {
               width: 50%;
-              margin-left:53px;
+              margin-left: 53px;
             }
             &:nth-child(4) {
               width: 100%;
@@ -752,15 +863,15 @@ export default class LayoutHome extends Vue {
         .lead-line {
           width: 303px;
           height: 97px;
-          background: url("../../src/assets/image/left-top.png");
+          background: url('../../src/assets/image/left-top.png');
           position: absolute;
           top: 104px;
           right: -267px;
         }
-        .relation{
-          position:absolute;
-          top:117px;
-          right:-89px;
+        .relation {
+          position: absolute;
+          top: 117px;
+          right: -89px;
         }
       }
       &:nth-child(2) {
@@ -773,12 +884,12 @@ export default class LayoutHome extends Vue {
           position: absolute;
           top: 104px;
           left: -267px;
-          background: url("../../src/assets/image/right-top.png") no-repeat;
+          background: url('../../src/assets/image/right-top.png') no-repeat;
         }
-        .relation{
-          position:absolute;
-          top:122px;
-          left:-88px;
+        .relation {
+          position: absolute;
+          top: 122px;
+          left: -88px;
         }
       }
       &:nth-child(3) {
@@ -790,12 +901,12 @@ export default class LayoutHome extends Vue {
           position: absolute;
           top: 12px;
           right: -286px;
-          background: url("../../src/assets/image/left-center.png") no-repeat;
+          background: url('../../src/assets/image/left-center.png') no-repeat;
         }
-        .relation{
-          position:absolute;
-          top:94px;
-          right:-129px;
+        .relation {
+          position: absolute;
+          top: 94px;
+          right: -129px;
         }
       }
       &:nth-child(4) {
@@ -808,12 +919,12 @@ export default class LayoutHome extends Vue {
           position: absolute;
           top: 35px;
           left: -277px;
-          background: url("../../src/assets/image/right-center.png") no-repeat;
+          background: url('../../src/assets/image/right-center.png') no-repeat;
         }
-        .relation{
-          position:absolute;
-          top:112px;
-          left:-122px;
+        .relation {
+          position: absolute;
+          top: 112px;
+          left: -122px;
         }
       }
       &:nth-child(5) {
@@ -826,12 +937,12 @@ export default class LayoutHome extends Vue {
           position: absolute;
           top: -124px;
           right: -257px;
-          background: url("../../src/assets/image/left-bottom.png") no-repeat;
+          background: url('../../src/assets/image/left-bottom.png') no-repeat;
         }
-        .relation{
-          position:absolute;
-          top:73px;
-          right:-88px;
+        .relation {
+          position: absolute;
+          top: 73px;
+          right: -88px;
         }
       }
       &:nth-child(6) {
@@ -844,12 +955,12 @@ export default class LayoutHome extends Vue {
           position: absolute;
           top: -103px;
           left: -279px;
-          background: url("../../src/assets/image/right-bottom.png") no-repeat;
+          background: url('../../src/assets/image/right-bottom.png') no-repeat;
         }
-        .relation{
-          position:absolute;
-          top:97px;
-          left:-95px;
+        .relation {
+          position: absolute;
+          top: 97px;
+          left: -95px;
         }
       }
     }