diff --git a/src/views/device.vue b/src/views/device.vue
index b61fa94..5e35bfd 100644
--- a/src/views/device.vue
+++ b/src/views/device.vue
@@ -1,27 +1,36 @@
 <template>
   <div class="device">
-    <div class="box flex-between">
-      <div v-if="false" class="left" >
-        <div v-if="advertisement==[]" class="advertising icon1 flex-center">广告位招租</div>
+    <div :class="['box', 'flex-between', { 'vertical-width-direction': isVertical }]">
+      <div v-if="false" class="left">
+        <div v-if="advertisement == []" class="advertising icon1 flex-center">广告位招租</div>
         <div v-else class="advertising flex-center">
-          <img :src="advertisement[0].previewPath" model="scaleToFill"/>
+          <img :src="advertisement[0].previewPath" model="scaleToFill" />
         </div>
       </div>
-      <div class="left">
+      <div :class="['left', { 'vertical-width': isVertical }]">
         <div class="zzc"></div>
         <div class="swiper-container">
           <div class="swiper-wrapper">
-            <div v-for="(item,index) in advertisement" :key="index" class="swiper-slide">
+            <div v-for="(item, index) in advertisement" :key="index" class="swiper-slide">
               <!--        图片-->
-              <div v-if="item.fileType=='image/jpeg'" class="advertising flex-center">
-                <img :src="item.previewPath" model="scaleToFill"/>
+              <div v-if="item.fileType == 'image/jpeg'" class="advertising flex-center">
+                <img :src="item.previewPath" model="scaleToFill" />
               </div>
-              <div v-else-if="item.fileType=='image/png'" class="advertising flex-center">
-                <img :src="item.previewPath" model="scaleToFill"/>
+              <div v-else-if="item.fileType == 'image/png'" class="advertising flex-center">
+                <img :src="item.previewPath" model="scaleToFill" />
               </div>
               <!--        视频-->
               <div v-else class="advertising flex-center">
-                <video v-if="index == swIndex" @pause="onPause" @timeupdate="onTimeupdate" @loadedmetadata="loadEdmetadata" :src="item.previewPath" autoplay muted style="width: 100%;height: 100%;"></video>
+                <video
+                  v-if="index == swIndex"
+                  @pause="onPause"
+                  @timeupdate="onTimeupdate"
+                  @loadedmetadata="loadEdmetadata"
+                  :src="item.previewPath"
+                  autoplay
+                  muted
+                  style="width: 100%; height: 100%"
+                ></video>
               </div>
             </div>
           </div>
@@ -30,72 +39,122 @@
       </div>
       <div v-if="false" class="left">
         <!--        广告-->
-        <div v-if="advertisement==''" class="advertising icon1 flex-center">广告位招租</div>
+        <div v-if="advertisement == ''" class="advertising icon1 flex-center">广告位招租</div>
         <!--        图片-->
-        <div v-else-if="advertisement.fileType=='image/png'" class="advertising icon1 flex-center">
-          <img :src="advertisement.previewPath" model="scaleToFill"/>
+        <div v-else-if="advertisement.fileType == 'image/png'" class="advertising icon1 flex-center">
+          <img :src="advertisement.previewPath" model="scaleToFill" />
         </div>
         <!--        视频-->
         <div v-else class="advertising icon1 flex-center">
-          <video :src="advertisement.outerChainPath" autoplay loop muted style="width: 100%;height: 100%;"></video>
+          <video :src="advertisement.outerChainPath" autoplay loop muted style="width: 100%; height: 100%"></video>
         </div>
 
         <div v-show="false" class="box2 flex-between">
           <div class="main2 flex-center" @click="skip('explain', '联系客服')">
-            <img src="../assets/demo7.png"/>联系客服
+            <img src="../assets/demo7.png" />
+            联系客服
           </div>
           <div class="main2 flex-center" @click="skip('explain', '价格查询')">
-            <img src="../assets/demo5.png"/>价格查询
+            <img src="../assets/demo5.png" />
+            价格查询
           </div>
         </div>
       </div>
-      <div class="right">
+      <div :class="['right', { 'vertical-width': isVertical }]" v-if="!isVertical">
         <div class="main4 flex-center">
           <div>
-<!--            <div class="flex-center ewm" v-if="memberLoginVo!=''">-->
-<!--              <div class="zzc flex-center"></div>-->
-<!--              <VueQr :auto-color="true" :dot-scale="1" :logo-src="require('@/assets/logo.png')"-->
-<!--                     :logoMargin="0"-->
-<!--                     :logoScale=".2" :margin="0" :size="300" :text="''" logoBackgroundColor="white">-->
-<!--              </VueQr>-->
-<!--            </div>-->
+            <!--            <div class="flex-center ewm" v-if="memberLoginVo!=''">-->
+            <!--              <div class="zzc flex-center"></div>-->
+            <!--              <VueQr :auto-color="true" :dot-scale="1" :logo-src="require('@/assets/logo.png')"-->
+            <!--                     :logoMargin="0"-->
+            <!--                     :logoScale=".2" :margin="0" :size="300" :text="''" logoBackgroundColor="white">-->
+            <!--              </VueQr>-->
+            <!--            </div>-->
             <div class="flex-center ewm">
-              <VueQr v-if="appSrc" :auto-color="true" :dot-scale="1" :logo-src="require('@/assets/logo.png')"
-                     :logoMargin="0"
-                     :logoScale=".2" :margin="0" :size="300" :text="appSrc" logoBackgroundColor="white">
-              </VueQr>
+              <VueQr
+                v-if="appSrc"
+                :auto-color="true"
+                :dot-scale="1"
+                :logo-src="require('@/assets/logo.png')"
+                :logoMargin="0"
+                :logoScale="0.2"
+                :margin="0"
+                :size="300"
+                :text="appSrc"
+                logoBackgroundColor="white"
+              ></VueQr>
             </div>
             <div class="flex-center tip">
-              <img src="../assets/demo9.png"/>扫码打印手机文件
+              <img src="../assets/demo9.png" />
+              扫码打印手机文件
             </div>
           </div>
         </div>
 
         <!--        功能-->
         <div class="feature">
-          <div
-              class="main icon2 flex-start"
-              @click="skip('operationGuide', 'U盘打印')"
-          >
-            <img src="../assets/demo2.png"/>
+          <div class="main icon2 flex-start" @click="skip('operationGuide', 'U盘打印')">
+            <img src="../assets/demo2.png" />
             <div>U盘打印</div>
           </div>
-          <div
-              class="main icon3 flex-start"
-              @click="skip('operationGuide', '扫描打印')"
-          >
-            <img src="../assets/demo3.png"/>
+          <div class="main icon3 flex-start" @click="skip('operationGuide', '扫描打印')">
+            <img src="../assets/demo3.png" />
             <div>扫描打印</div>
           </div>
-          <div
-              class="main icon4 flex-start"
-              @click="skip('operationGuide', '身份证打印')"
-          >
-            <img src="../assets/demo4.png"/>
+          <div class="main icon4 flex-start" @click="skip('operationGuide', '身份证打印')">
+            <img src="../assets/demo4.png" />
             <div>身份证打印</div>
           </div>
         </div>
       </div>
+      <!-- 竖版 -->
+      <div :class="['right', 'vertical-bottom', { 'vertical-width': isVertical }]" v-if="isVertical">
+        <div class="main4 flex-center vertical-width50">
+          <div style="display: flex; flex-direction: column; align-items: center">
+            <!--            <div class="flex-center ewm" v-if="memberLoginVo!=''">-->
+            <!--              <div class="zzc flex-center"></div>-->
+            <!--              <VueQr :auto-color="true" :dot-scale="1" :logo-src="require('@/assets/logo.png')"-->
+            <!--                     :logoMargin="0"-->
+            <!--                     :logoScale=".2" :margin="0" :size="300" :text="''" logoBackgroundColor="white">-->
+            <!--              </VueQr>-->
+            <!--            </div>-->
+            <div class="flex-center ewm">
+              <VueQr
+                v-if="appSrc"
+                :auto-color="true"
+                :dot-scale="1"
+                :logo-src="require('@/assets/logo.png')"
+                :logoMargin="0"
+                :logoScale="0.2"
+                :margin="0"
+                :size="300"
+                :text="appSrc"
+                logoBackgroundColor="white"
+              ></VueQr>
+            </div>
+            <div class="flex-center tip">
+              <img src="../assets/demo9.png" />
+              扫码打印手机文件
+            </div>
+          </div>
+        </div>
+
+        <!--        功能-->
+        <!-- <div class="feature"> -->
+        <div class="main icon2 flex-start vertical-width50" @click="skip('operationGuide', 'U盘打印')">
+          <img src="../assets/demo2.png" />
+          <div>U盘打印</div>
+        </div>
+        <div class="main icon3 flex-start vertical-width50" @click="skip('operationGuide', '扫描打印')">
+          <img src="../assets/demo3.png" />
+          <div>扫描打印</div>
+        </div>
+        <div class="main icon4 flex-start vertical-width50" @click="skip('operationGuide', '身份证打印')">
+          <img src="../assets/demo4.png" />
+          <div>身份证打印</div>
+        </div>
+        <!-- </div> -->
+      </div>
       <div class="dbTip flex-between">
         <div>机器编号：{{ cite.code }}</div>
         <div>客服电话：{{ facility.servicePhone }}</div>
@@ -107,7 +166,7 @@
 import VueQr from 'vue-qr'
 
 export default {
-  name: "device",
+  name: 'device',
   components: {
     VueQr
   },
@@ -119,15 +178,16 @@
       memberLoginVo: '',
       advertisement: '',
       facility: '',
-      src: ''
-    };
+      src: '',
+      isVertical: false
+    }
   },
   methods: {
     skip(href, name) {
-      let {facility} = this
-      let {sta, name2} = ''
+      let { facility } = this
+      let { sta, name2 } = ''
       facility.paperNumber.forEach(item => {
-        if(item.name.indexOf('A4')!=-1) {
+        if (item.name.indexOf('A4') != -1) {
           if (item.residue < 1) {
             name2 = '请联系管理员添加' + item.name
             sta = true
@@ -154,9 +214,9 @@
       this.$router.push({
         name: href,
         params: {
-          name: name,
-        },
-      });
+          name: name
+        }
+      })
     },
     load() {
       if (this.src == '') {
@@ -181,34 +241,34 @@
           disableOnInteraction: false
         },
         pagination: {
-          el: '.swiper-pagination',
+          el: '.swiper-pagination'
         },
-        on:{
+        on: {
           slideChangeTransitionEnd: function () {
             // console.log(this.realIndex);
             _this.swIndex = this.realIndex
-            if(_this.advertisement[this.realIndex].fileType=='video/mp4') {
+            if (_this.advertisement[this.realIndex].fileType == 'video/mp4') {
               _this.bannerLoop(false)
             }
           }
-        },
+        }
       })
     },
-    bannerLoop(sta,n) {
+    bannerLoop(sta, n) {
       let _this = this
-      if(sta) {
+      if (sta) {
         _this.mySwiper.slideTo(n)
-        _this.mySwiper.autoplay.start();
-      }else{
-        _this.mySwiper.autoplay.stop();
+        _this.mySwiper.autoplay.start()
+      } else {
+        _this.mySwiper.autoplay.stop()
       }
     },
     onPause() {
-      let n = this.swIndex+1
-      if(n==this.advertisement.length) {
+      let n = this.swIndex + 1
+      if (n == this.advertisement.length) {
         n = 1
       }
-      this.bannerLoop(true,n)
+      this.bannerLoop(true, n)
     },
     onTimeupdate() {
       // console.log(123,e)
@@ -216,16 +276,22 @@
     // 正在加载中
     loadEdmetadata() {
       // console.log(456,e)
-    },
+    }
   },
   mounted() {
+    console.log(window.outerHeight)
+    if (window.outerWidth === 1080) {
+      this.isVertical = true
+    } else {
+      this.isVertical = false
+    }
     this.load()
 
     setInterval(() => {
       if (this.cite.advertisement != this.advertisement) {
         this.advertisement = this.cite.advertisement
         setTimeout(() => {
-          this.GGT(this.advertisement[0].intervalTime*1000)
+          this.GGT(this.advertisement[0].intervalTime * 1000)
         }, 500)
       }
       if (this.cite.facility != this.facility) {
@@ -243,7 +309,7 @@
       }
     }, 300)
   }
-};
+}
 </script>
 
 <style lang="less" scoped>
@@ -397,7 +463,7 @@
     .zzc {
       position: absolute;
       background: #333;
-      opacity: .5;
+      opacity: 0.5;
       top: 0;
       left: 0;
       width: 100%;
@@ -417,4 +483,22 @@
     padding: 0 3rem;
   }
 }
+.vertical-width-direction {
+  width: 100%;
+  flex-direction: column;
+}
+.vertical-width {
+  width: 100% !important;
+}
+.vertical-width50 {
+  width: 48% !important;
+  height: 25rem !important;
+  justify-content: center;
+  font-size: 2.5rem !important;
+}
+.vertical-bottom {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
 </style>