企业体检报告横竖屏适配

src/views/report/components/brushCard.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="brushCard">
-    <div class="control">
+    <div class="control control-v">
       <div class="button home" @click="home">
         <img class="background" src="@/assets/report/control-bg.png" />
         <div class="button-style">
@@ -11,13 +11,24 @@
         </div>
       </div>
     </div>
-    <div class="title title-one">请将身份证放置</div>
-    <div class="title title-two">设备下方感应区</div>
-    <div class="tip">PLEASE PLACE YOUR ID CARD IN THE</div>
-    <div class="tip">SENSOR AREA UNDER THE DEVICE</div>
-    <div class="icon">
+    <div class="title">请将身份证放置设备下方感应区</div>
+    <div class="tip">
+      PLEASE PLACE YOUR ID CARD IN THE SENSOR AREA UNDER THE DEVICE
+    </div>
+    <div class="card-icon">
       <img src="@/assets/report/idcard.png" />
     </div>
+    <div class="control control-h">
+      <div class="button home" @click="home">
+        <img class="background" src="@/assets/report/control-bg.png" />
+        <div class="button-style">
+          <div class="icon">
+            <img src="@/assets/report/home.png" />
+          </div>
+          <div class="name">返回首页</div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -33,6 +44,10 @@ export default {
     };
   },
 
+  created() {
+    this.$emit("update:indexClass", "center-other");
+  },
+
   mounted() {
     this.$emit("update:timerTime", 60);
     this.init = true;
@@ -145,8 +160,7 @@ export default {
           transcationID: "CCS",
         },
       };
-      CloseDevice(from).then((res) => {
-      });
+      CloseDevice(from).then((res) => {});
     },
     nextStep() {
       clearInterval(this.timer);
@@ -176,9 +190,11 @@ export default {
 .brushCard {
   width: 100%;
   height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
 
   .control {
-    padding-top: 60px;
     width: 100%;
     height: 130px;
     display: flex;
@@ -236,28 +252,14 @@ export default {
   }
 
   .title {
-    width: 100%;
-    height: 90px;
-    font-size: 80px;
-    line-height: 90px;
     text-align: center;
     font-weight: 540;
     color: #ffffff;
     text-shadow: 5px 4px 5px #141c2a;
     font-family: "苹方简M";
   }
-  .title-one {
-    margin-top: 85px;
-  }
-  .title-two {
-    margin-top: 30px;
-    padding-bottom: 20px;
-  }
 
   .tip {
-    width: 100%;
-    height: 40px;
-    font-size: 28px;
     line-height: 40px;
     text-align: center;
     font-weight: 540;
@@ -265,9 +267,10 @@ export default {
     text-shadow: 5px 4px 5px #141c2a;
   }
 
-  .icon {
+  .card-icon {
     width: 100%;
-    height: calc(100% - 700px);
+    height: 0;
+    flex: 1;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -277,4 +280,77 @@ export default {
     }
   }
 }
+// 横屏
+@media screen and (orientation: landscape) {
+  .brushCard {
+    .control-v {
+      display: none !important;
+    }
+
+    .control-h {
+      padding-top: 60px;
+      transform: scale(0.8);
+    }
+
+    .title {
+      padding-top: 25px;
+      margin: auto;
+      width: 100%;
+      height: 70px;
+      font-size: 60px;
+      line-height: 70px;
+    }
+
+    .tip {
+      margin: auto;
+      width: 100%;
+      height: 40px;
+      font-size: 23px;
+    }
+
+    .card-icon {
+      padding-top: 50px;
+
+      img {
+        width: 540px;
+      }
+    }
+  }
+}
+// 竖屏
+@media screen and (orientation: portrait) {
+  .brushCard {
+    .control-h {
+      display: none !important;
+    }
+
+    .control-v {
+      padding-top: 60px;
+    }
+
+    .title {
+      padding-top: 85px;
+      margin: auto;
+      width: 600px;
+      height: 180px;
+      font-size: 80px;
+      line-height: 90px;
+    }
+
+    .tip {
+      padding-top: 20px;
+      margin: auto;
+      width: 600px;
+      height: 80px;
+      font-size: 28px;
+    }
+
+    .card-icon {
+
+      img {
+        width: 670px;
+      }
+    }
+  }
+}
 </style>

src/views/report/components/index.vue

@@ -1,20 +1,12 @@
 <template>
   <div class="index">
     <div class="button" @click="start"></div>
-    <div class="style-ball ball1">
-      <img src="@/assets/report/1.png" />
-    </div>
-    <div class="style-ball ball2">
-      <img src="@/assets/report/2.png" />
-    </div>
-    <div class="style-ball ball3">
-      <img src="@/assets/report/3.png" />
-    </div>
-    <div class="style-ball ball4">
-      <img src="@/assets/report/4.png" />
-    </div>
-    <div class="style-ball ball5">
-      <img src="@/assets/report/5.png" />
+    <div
+      v-for="(item, index) in bubbles"
+      :key="index"
+      :class="'style-ball ' + 'ball' + (index + 1)"
+    >
+      {{ item.substring(0, 2) }}<br />{{ item.substring(2, 4) }}
     </div>
   </div>
 </template>
@@ -24,10 +16,24 @@ export default {
   name: "ZhtIndex",
 
   data() {
-    return {};
+    return {
+      bubbles: [
+        "基本信息",
+        "待办事项",
+        "违法违章",
+        "申报信息",
+        "税款信息",
+        "风险提醒",
+        "信用等级",
+        "票种核定",
+        "欠税信息",
+      ],
+    };
   },
 
-  created() {},
+  created() {
+    this.$emit('update:indexClass','')
+  },
 
   mounted() {
     this.$emit("update:timerTime", -1);
@@ -50,63 +56,181 @@ export default {
   position: relative;
   width: 100%;
   height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 
   .button {
-    position: absolute;
-    top: 415px;
-    left: 130px;
-    z-index: 9;
-    width: 680px;
-    height: 305px;
-    border-radius: 80px;
+    width: 742px;
+    height: 271px;
+    background-image: url("@/assets/report/index-button.png");
+    background-size: 100%;
+    background-repeat: no-repeat;
+    transition: opacity 0.2s;
     cursor: pointer;
+    user-select: none;
   }
   .button:active {
-    filter: blur(50px);
-    background: rgba(255, 255, 255, 0.2);
+    opacity: 0.6;
   }
 
   .style-ball {
     position: absolute;
     z-index: 5;
-    animation: ball ease-in-out 4s infinite;
+    width: 100px;
+    height: 100px;
+    color: #fff;
+    font-size: 22px;
+    line-height: 25px;
+    background-image: url("@/assets/report/bubble.png");
+    background-size: 100% 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transform: scale(var(--scale));
+    animation: ball ease-in-out 4s var(--delayed) infinite;
   }
 
   @keyframes ball {
     0% {
-      transform: scale(1);
+      transform: scale(var(--scale));
     }
     50% {
-      transform: scale(0.7);
+      transform: scale(calc(var(--scale) - 0.5));
     }
     100% {
-      transform: scale(1);
+      transform: scale(var(--scale));
     }
   }
+}
+// 横屏
+@media screen and (orientation: landscape) {
+  .ball1 {
+    --scale: 1.5;
+    top: 20px;
+    left: 900px;
+    --delayed: -4s;
+  }
+
+  .ball2 {
+    --scale: 1.6;
+    top: 80px;
+    left: 350px;
+    --delayed: -3.5s;
+  }
+
+  .ball3 {
+    --scale: 1.5;
+    top: 90px;
+    left: 650px;
+    --delayed: -3s;
+  }
 
+  .ball4 {
+    --scale: 1.9;
+    top: 100px;
+    left: 1200px;
+    --delayed: -2.5s;
+  }
+
+  .ball5 {
+    --scale: 1.9;
+    top: 200px;
+    left: 150px;
+    --delayed: -2s;
+  }
+
+  .ball6 {
+    --scale: 2.3;
+    bottom: 200px;
+    left: 1250px;
+    --delayed: -1.5s;
+  }
+
+  .ball7 {
+    --scale: 2.7;
+    bottom: 100px;
+    left: 220px;
+    --delayed: -1s;
+  }
+
+  .ball8 {
+    --scale: 1.7;
+    bottom: 80px;
+    left: 650px;
+    --delayed: -0.5s;
+  }
+
+  .ball9 {
+    --scale: 1.7;
+    bottom: 0px;
+    left: 1000px;
+    --delayed: -0s;
+  }
+}
+// 竖屏
+@media screen and (orientation: portrait) {
   .ball1 {
-    top: 900px;
-    left: 80px;
+    --scale: 1.6;
+    top: 80px;
+    left: 150px;
+    --delayed: -4s;
   }
 
   .ball2 {
-    top: 800px;
-    left: 620px;
+    --scale: 1.5;
+    top: 80px;
+    left: 600px;
+    --delayed: -3.5s;
   }
 
   .ball3 {
-    top: 180px;
-    left: 720px;
+    --scale: 1.5;
+    top: 260px;
+    left: 400px;
+    --delayed: -3s;
   }
 
   .ball4 {
-    top: 120px;
-    left: 155px;
+    --scale: 1.8;
+    top: 300px;
+    left: 750px;
+    --delayed: -2.5s;
   }
 
   .ball5 {
-    top: 410px;
-    left: -87px;
+    --scale: 1.9;
+    top: 350px;
+    left: 50px;
+    --delayed: -2s;
+  }
+
+  .ball6 {
+    --scale: 1.7;
+    bottom: 350px;
+    left: 400px;
+    --delayed: -1.5s;
+  }
+
+  .ball7 {
+    --scale: 2.4;
+    bottom: 350px;
+    left: 750px;
+    --delayed: -1s;
+  }
+
+  .ball8 {
+    --scale: 2.7;
+    bottom: 200px;
+    left: 80px;
+    --delayed: -0.5s;
+  }
+
+  .ball9 {
+    --scale: 1.7;
+    bottom: 100px;
+    left: 450px;
+    --delayed: -0s;
   }
 }
 </style>

src/views/report/components/lookReport.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="brushCard">
-    <div class="control">
+    <div class="control control-v">
       <div class="button back" @click="back">
         <img class="background" src="@/assets/report/control-bg.png" />
         <div class="button-style">
@@ -193,6 +193,26 @@
         </div>
       </div>
     </div>
+    <div class="control control-h">
+      <div class="button back" @click="back">
+        <img class="background" src="@/assets/report/control-bg.png" />
+        <div class="button-style">
+          <div class="icon">
+            <img src="@/assets/report/back.png" />
+          </div>
+          <div class="name">返回上层</div>
+        </div>
+      </div>
+      <div class="button home" @click="home">
+        <img class="background" src="@/assets/report/control-bg.png" />
+        <div class="button-style">
+          <div class="icon">
+            <img src="@/assets/report/home.png" />
+          </div>
+          <div class="name">返回首页</div>
+        </div>
+      </div>
+    </div>
     <transition name="msgbox">
       <div class="msgbox" v-if="showPrint">
         <div class="msgbox-content">
@@ -230,6 +250,10 @@ export default {
     };
   },
 
+  created() {
+    this.$emit("update:indexClass", "center-other");
+  },
+
   mounted() {
     this.$emit("update:timerTime", 30);
     this.getDatetime();
@@ -308,14 +332,14 @@ export default {
         page: "selectDate",
         timestamp: Date.now(),
       });
-      sessionStorage.removeItem("RECORD")
-      sessionStorage.removeItem("FXTXLIST")
-      sessionStorage.removeItem("DBSXLIST")
-      sessionStorage.removeItem("RANK")
-      sessionStorage.removeItem("RANKLIST")
-      sessionStorage.removeItem("WFWZLIST")
-      sessionStorage.removeItem("IMGURL")
-      sessionStorage.removeItem("MESSAGE")
+      sessionStorage.removeItem("RECORD");
+      sessionStorage.removeItem("FXTXLIST");
+      sessionStorage.removeItem("DBSXLIST");
+      sessionStorage.removeItem("RANK");
+      sessionStorage.removeItem("RANKLIST");
+      sessionStorage.removeItem("WFWZLIST");
+      sessionStorage.removeItem("IMGURL");
+      sessionStorage.removeItem("MESSAGE");
     },
     home() {
       this.$emit("update:timerTime", -1);
@@ -336,6 +360,9 @@ export default {
 .brushCard {
   width: 100%;
   height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
 
   .control {
     padding-top: 60px;
@@ -397,9 +424,6 @@ export default {
   @tableTitleSize: 12px;
   .pdf-box {
     margin: auto;
-    margin-top: 20px;
-    width: calc(100% - 80px);
-    height: calc(100% - 260px);
     overflow-x: hidden;
     overflow-y: auto;
     border-radius: 10px;
@@ -583,4 +607,42 @@ export default {
     opacity: 0;
   }
 }
+// 横屏
+@media screen and (orientation: landscape) {
+  .brushCard {
+    .control-v {
+      display: none !important;
+    }
+
+    .control-h {
+      padding-top: 30px;
+      transform: scale(0.8);
+    }
+
+    .pdf-box {
+      margin-top: 40px;
+      width: 1140px;
+      height: 0;
+      flex: 1;
+    }
+  }
+}
+// 竖屏
+@media screen and (orientation: portrait) {
+  .brushCard {
+    .control-h {
+      display: none !important;
+    }
+
+    .control-v {
+      padding-top: 60px;
+    }
+
+    .pdf-box {
+      margin-top: 20px;
+      width: calc(100% - 80px);
+      height: calc(100% - 260px);
+    }
+  }
+}
 </style>

src/views/report/components/selectDate.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="brushCard">
-    <div class="control">
+    <div class="control control-v">
       <div class="button back" @click="back">
         <img class="background" src="@/assets/report/control-bg.png" />
         <div class="button-style">
@@ -60,11 +60,35 @@
           </div>
         </div>
       </div>
+      <div class="search search-h" @click="nextStep">
+        <img src="@/assets/report/cxBg.png" />
+        <div>点击查询</div>
+      </div>
     </div>
-    <div class="search" @click="nextStep">
+    <div class="search search-v" @click="nextStep">
       <img src="@/assets/report/cxBg.png" />
       <div>点击查询</div>
     </div>
+    <div class="control control-h">
+      <div class="button back" @click="back">
+        <img class="background" src="@/assets/report/control-bg.png" />
+        <div class="button-style">
+          <div class="icon">
+            <img src="@/assets/report/back.png" />
+          </div>
+          <div class="name">返回上层</div>
+        </div>
+      </div>
+      <div class="button home" @click="home">
+        <img class="background" src="@/assets/report/control-bg.png" />
+        <div class="button-style">
+          <div class="icon">
+            <img src="@/assets/report/home.png" />
+          </div>
+          <div class="name">返回首页</div>
+        </div>
+      </div>
+    </div>
     <transition name="loading">
       <div v-if="showLoading" class="pop-loading">
         <div class="loading-box">
@@ -118,6 +142,7 @@ export default {
   },
 
   created() {
+    this.$emit("update:indexClass", "center-other");
     this.getDate();
   },
 
@@ -375,6 +400,9 @@ export default {
 .brushCard {
   width: 100%;
   height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
 
   .control {
     padding-top: 60px;
@@ -443,6 +471,8 @@ export default {
     text-align: center;
     font-weight: 400;
     color: #ffffff;
+    text-shadow: 5px 4px 5px #141c2a;
+    font-family: "苹方简M";
   }
 
   .tip {
@@ -460,7 +490,6 @@ export default {
   .tip-box {
     margin: auto;
     margin-top: 36px;
-    width: 712px;
     height: 76px;
     border-top: 1px solid #fff;
     border-bottom: 1px solid #fff;
@@ -489,12 +518,9 @@ export default {
     position: relative;
     margin: auto;
     margin-top: 30px;
-    width: 712px;
-    height: 85px;
 
     .select-picker {
       width: 100%;
-      height: 100%;
       display: flex;
       align-items: center;
       justify-content: space-between;
@@ -525,7 +551,6 @@ export default {
 
     .picker-box {
       position: absolute;
-      top: 145px;
       left: 0;
       z-index: 99;
       width: 100%;
@@ -590,7 +615,6 @@ export default {
   .search {
     position: relative;
     margin: auto;
-    margin-top: 205px;
     width: 327px;
     height: 152px;
     cursor: pointer;
@@ -669,4 +693,114 @@ export default {
     opacity: 0;
   }
 }
+// 横屏
+@media screen and (orientation: landscape) {
+  .brushCard {
+    .control-v {
+      display: none !important;
+    }
+
+    .control-h {
+      padding-top: 30px;
+      transform: scale(0.8);
+    }
+
+    .title {
+      padding-top: 25px;
+      margin: auto;
+      height: 70px;
+      font-size: 60px;
+      line-height: 70px;
+    }
+
+    .tip {
+      margin: auto;
+      height: 40px;
+      font-size: 23px;
+    }
+
+    .tip-box {
+      width: 950px;
+    }
+
+    .select-box {
+      margin-left: calc(50% - 115px - 360px);
+      width: 720px;
+      height: 0;
+      flex: 1;
+
+      .select-picker {
+        height: 85px;
+      }
+
+      .picker-box {
+        top: 120px;
+      }
+
+      .search-h {
+        position: absolute;
+        top: -30px;
+        right: -300px;
+        transform: scale(0.65);
+      }
+    }
+
+    .search-v {
+      display: none;
+    }
+  }
+}
+// 竖屏
+@media screen and (orientation: portrait) {
+  .brushCard {
+    .control-h {
+      display: none !important;
+    }
+
+    .control-v {
+      padding-top: 60px;
+    }
+
+    .title {
+      padding-top: 85px;
+      margin: auto;
+      height: 90px;
+      font-size: 80px;
+      line-height: 90px;
+    }
+
+    .tip {
+      padding-top: 10px;
+      margin: auto;
+      height: 40px;
+      font-size: 28px;
+    }
+
+    .tip-box {
+      width: 712px;
+    }
+
+    .select-box {
+      width: 712px;
+      height: 0;
+      flex: 1;
+
+      .select-picker {
+        height: 85px;
+      }
+
+      .picker-box {
+        top: 145px;
+      }
+
+      .search-h {
+        display: none;
+      }
+    }
+
+    .search {
+      margin-bottom: 100px;
+    }
+  }
+}
 </style>

src/views/report/components/selectEnterprise.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="selectEnterprise">
-    <div class="control">
+    <div class="control control-v">
       <div class="button home" @click="home">
         <img class="background" src="@/assets/report/control-bg.png" />
         <div class="button-style">
@@ -48,6 +48,17 @@
         </tr>
       </table>
     </div>
+    <div class="control control-h">
+      <div class="button home" @click="home">
+        <img class="background" src="@/assets/report/control-bg.png" />
+        <div class="button-style">
+          <div class="icon">
+            <img src="@/assets/report/home.png" />
+          </div>
+          <div class="name">返回首页</div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -65,6 +76,7 @@ export default {
   },
 
   created() {
+    this.$emit("update:indexClass", "center-other");
     this.$loading.show("正在获取企业信息...");
     this.qylb();
   },
@@ -98,9 +110,11 @@ export default {
       qylb(from).then((res) => {
         this.$loading.hide();
         if (res.code == 200) {
-          let datas = res.data.sfList
-          let newData = []
-          datas = datas.filter((item) => !newData.includes(item.nsrmc) && newData.push(item.nsrmc));
+          let datas = res.data.sfList;
+          let newData = [];
+          datas = datas.filter(
+            (item) => !newData.includes(item.nsrmc) && newData.push(item.nsrmc)
+          );
           this.list = datas;
           this.alllist = datas;
         } else {
@@ -179,6 +193,9 @@ export default {
 .selectEnterprise {
   width: 100%;
   height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
 
   .control {
     padding-top: 60px;
@@ -239,19 +256,15 @@ export default {
   }
 
   .title {
-    margin-top: 86px;
     width: 100%;
-    height: 90px;
-    font-size: 80px;
-    line-height: 90px;
     text-align: center;
     font-weight: 400;
     color: #ffffff;
+    text-shadow: 5px 4px 5px #141c2a;
+    font-family: "苹方简M";
   }
 
   .tip {
-    margin-top: 10px;
-    width: 100%;
     height: 40px;
     font-size: 28px;
     text-align: center;
@@ -264,7 +277,6 @@ export default {
   .search-box {
     padding: 0 35px;
     margin: auto;
-    margin-top: 70px;
     width: 580px;
     height: 76px;
     border-radius: 38px;
@@ -305,9 +317,9 @@ export default {
 
   .lists {
     margin: auto;
-    margin-top: 60px;
     width: 800px;
-    height: calc(100% - 680px);
+    height: 0;
+    flex: 1;
     background: #eeeeee;
     overflow-x: hidden;
     overflow-y: auto;
@@ -323,8 +335,6 @@ export default {
       width: 100%;
 
       .t-title {
-        height: 95px;
-
         td {
           text-align: center;
           font-size: 30px;
@@ -334,16 +344,10 @@ export default {
       }
 
       .t-content {
-        height: 120px;
-
         .xh {
           width: 80px;
         }
 
-        .mc {
-          width: 200px;
-        }
-
         td {
           padding: 0 10px;
           text-align: center;
@@ -402,4 +406,103 @@ export default {
     background: rgba(0, 0, 0, 0.1);
   }
 }
+// 横屏
+@media screen and (orientation: landscape) {
+  .selectEnterprise {
+    .control-v {
+      display: none !important;
+    }
+
+    .control-h {
+      padding-top: 30px;
+      transform: scale(0.8);
+    }
+
+    .title {
+      padding-top: 25px;
+      margin: auto;
+      height: 70px;
+      font-size: 60px;
+      line-height: 70px;
+    }
+
+    .tip {
+      margin: auto;
+      height: 40px;
+      font-size: 23px;
+    }
+
+    .search-box {
+      margin-top: 30px;
+    }
+
+    .lists {
+      margin-top: 30px;
+      width: 1340px;
+      height: calc(100% - 440px);
+
+      .table {
+        .t-title {
+          height: 70px;
+        }
+
+        .t-content {
+          height: 78px;
+
+          .t-button {
+            transform: scale(0.8);
+          }
+        }
+      }
+    }
+  }
+}
+// 竖屏
+@media screen and (orientation: portrait) {
+  .selectEnterprise {
+    .control-h {
+      display: none !important;
+    }
+
+    .control-v {
+      padding-top: 60px;
+    }
+
+    .title {
+      padding-top: 85px;
+      margin: auto;
+      height: 90px;
+      font-size: 80px;
+      line-height: 90px;
+    }
+
+    .tip {
+      padding-top: 10px;
+      margin: auto;
+      height: 40px;
+      font-size: 28px;
+    }
+
+    .search-box {
+      margin-top: 70px;
+    }
+
+    .lists {
+      width: 800px;
+      margin-top: 60px;
+      margin-bottom: 50px;
+      height: calc(100% - 680px);
+
+      .table {
+        .t-title {
+          height: 95px;
+        }
+
+        .t-content {
+          height: 120px;
+        }
+      }
+    }
+  }
+}
 </style>

src/views/report/index.vue

@@ -1,14 +1,5 @@
 <template>
   <div class="report">
-    <div class="report-bg">
-      <img
-        :src="
-          nowPage.page == 'index'
-            ? require('@/assets/report/bg.png')
-            : require('@/assets/report/bg-1.png')
-        "
-      />
-    </div>
     <div class="report-container">
       <div class="top">
         <div v-if="nowPage.page == 'index'" class="top-one">
@@ -24,14 +15,15 @@
           <img src="@/assets/report/top-logo.png" />
         </div>
       </div>
-      <div class="center">
-        <div v-if="timerTime >= 0" class="timer">
+      <div :class="'center ' + indexClass">
+        <!-- <div v-if="timerTime >= 0" class="timer">
           {{ timerTime }} 秒&nbsp;&nbsp;后自动返回首页
-        </div>
+        </div> -->
         <component
           :is="nowPage.page"
           :nowPage.sync="nowPage"
           :timerTime.sync="timerTime"
+          :indexClass.sync="indexClass"
         ></component>
       </div>
       <div class="bottom">
@@ -85,6 +77,7 @@ export default {
 
   data() {
     return {
+      indexClass: "",
       timer: null,
       timerTime: 0,
       datetime: {},
@@ -98,7 +91,7 @@ export default {
 
   watch: {
     timerTime(e) {
-      this.startTimer(e);
+      // this.startTimer(e);
     },
   },
 
@@ -171,24 +164,9 @@ export default {
 
 <style lang="less" scoped>
 .report {
-  width: 1080px;
-  height: 1920px;
   user-select: none;
   font-family: "pf";
-
-  .report-bg {
-    position: fixed;
-    top: 0;
-    left: 0;
-    z-index: -10;
-    width: 100%;
-    height: 100%;
-
-    img {
-      width: 100%;
-      height: 100%;
-    }
-  }
+  background-size: 100% 100%;
 
   .report-container {
     width: 100%;
@@ -198,13 +176,12 @@ export default {
     flex-direction: column;
 
     .top {
-      padding-top: 34px;
-      width: 100%;
-      height: 152px;
+      padding: 0 40px 0 40px;
+      height: 136px;
+      width: calc(100% - 80px);
 
       .top-one {
-        margin: auto;
-        width: calc(100% - 85px);
+        width: 100%;
         height: 100%;
         display: flex;
         justify-content: space-between;
@@ -215,22 +192,22 @@ export default {
 
           img {
             width: 100%;
-            height: 136px;
           }
         }
 
         .right {
           width: max-content;
-          height: 136px;
 
           .r-top {
-            margin-top: 11px;
             font-size: 52px;
+            line-height: 52px;
             color: #ffffff;
             font-weight: 400;
           }
           .r-bottom {
+            margin-top: 10px;
             font-size: 15px;
+            line-height: 15px;
             color: #ffffff;
             font-weight: 400;
           }
@@ -241,23 +218,15 @@ export default {
         width: 100%;
         height: 100%;
         display: flex;
-        align-items: center;
-        justify-content: center;
 
         img {
-          margin-left: -25px;
-          width: 931px;
-          height: 152px;
+          height: 100%;
         }
       }
     }
 
     .center {
-      position: relative;
-      padding: 105px 90px 55px 90px;
-      width: 100%;
-      height: 1500px;
-      box-sizing: border-box;
+      margin: auto;
 
       .timer {
         position: absolute;
@@ -273,10 +242,15 @@ export default {
         text-align: center;
       }
     }
+    .center-other {
+      background: rgba(170, 210, 255, 0.3);
+      border-radius: 50px;
+      backdrop-filter: blur(48px);
+    }
 
     .bottom {
       width: 100%;
-      flex: 1;
+      height: 140px;
 
       .bottom-one {
         margin: auto;
@@ -284,10 +258,10 @@ export default {
         height: 100%;
         display: flex;
         justify-content: space-between;
+        align-items: flex-end;
 
         .left {
           width: 473px;
-          height: 100%;
           display: flex;
           align-items: center;
 
@@ -354,12 +328,11 @@ export default {
         width: calc(100% - 140px);
         height: 100%;
         display: flex;
-        align-items: center;
+        align-items: flex-end;
         justify-content: space-between;
 
         .left {
           width: 473px;
-          height: 100%;
           display: flex;
           align-items: center;
 
@@ -399,4 +372,55 @@ export default {
     }
   }
 }
+
+// 横屏
+@media screen and (orientation: landscape) {
+  .report {
+    width: 100%;
+    height: 1080px;
+    background-image: url("@/assets/report/bg-h.png");
+
+    .report-container {
+      .center {
+        width: 1500px;
+        height: 740px;
+      }
+
+      .top {
+        .top-two {
+          justify-content: flex-start;
+        }
+      }
+
+      .bottom {
+        padding-bottom: 40px;
+      }
+    }
+  }
+}
+
+// 竖屏
+@media screen and (orientation: portrait) {
+  .report {
+    width: 100%;
+    height: 1920px;
+    background-image: url("@/assets/report/bg-v.png");
+
+    .report-container {
+      .top {
+        .top-two {
+          justify-content: center;
+        }
+      }
+      .center {
+        width: 900px;
+        height: 1340px;
+      }
+
+      .bottom {
+        padding-bottom: 88px;
+      }
+    }
+  }
+}
 </style>