1.修改二维码扫描页面具体显示样式

src/views/scanQRCode/index.vue

 <template>
   <div id="scanQRCode">
-   <!-- <h1>{{activeTab}}</h1> -->
-   <!-- <van-notice-bar v-if="isShowNoticeBar" :scrollable="false" text="请点击左上角按钮，使用默认浏览器打开本页面！">
-     <div slot="right-icon">
-     </div>
-   </van-notice-bar> -->
-   <div class="head" v-if="isShowNoticeBar">
-     <div class="headTitle">
-       请点击右上角按钮，使用默认浏览器打开本页面！
-     </div>
-     <div class="headimage">
-       <img style="height: 40px;width: 35px; margin-top: 0px" :src="guideImage" alt="">
-     </div>
-   </div>
-   <van-empty class="customEmpty" :description="activeTab" :image="sphImage">
-      <div slot="description" class="description">
-        <div class="subTitle">上药移动APP</div>
+    <!-- <h1>{{activeTab}}</h1> -->
+    <!-- <van-notice-bar v-if="isShowNoticeBar" :scrollable="false" text="请点击左上角按钮，使用默认浏览器打开本页面！">
+      <div slot="right-icon">
       </div>
+    </van-notice-bar> -->
+    <div class="head" v-if="isShowNoticeBar">
+      <div class="headTitle">
+        请点击右上角按钮，使用默认浏览器打开本页面！
+      </div>
+      <div class="headimage">
+        <img style="height: 40px;width: 35px; margin-top: 0px" :src="guideImage" alt="">
+      </div>
+    </div>
+    <div class="customEmpty" :image="sphImage"
+         :style="{backgroundImage: 'url(' + bagImage + ')' }" style="background-repeat: no-repeat">
+      <img class='subImg' :src="sphImage"/>
+      <div class="subTitle">上药移动APP</div>
+
       <van-button @click="versionUpdateHttpAction('41')" round type="info" class="bottom-button">iOS版下载</van-button>
-      <van-button @click="versionUpdateHttpAction('40')" round type="info" class="bottom-button">Android下载</van-button>
-   </van-empty>
+      <van-button @click="versionUpdateHttpAction('40')" round type="info" style="margin-top: 10px" class="bottom-button">Android下载</van-button>
+    </div>
   </div>
 </template>
 
 <script>
-import { activityQueryDocList } from '@/api/scanQRCode'
+import {activityQueryDocList} from '@/api/scanQRCode'
 import {getFormateDate} from '@/utils/common'
-import { bridge } from "@/utils";
+import {bridge} from '@/utils'
+
 export default {
   name: 'ScanQRCode',
-  components: {
-  },
+  components: {},
   data() {
     return {
       tabsTitle: [],
       moreSearchShow: false,
       activeTab: '',
       isFirst: false,
-      isShowNoticeBar: true,
+      isShowNoticeBar: false,
       guideImage: require('@/assets/img/guide.png'),
       sphImage: require('@/assets/img/icon_sph.png'),
       bagImage: require('@/assets/img/bagImage.png')
     }
   },
   computed: {
-    linkInfo () {
+    linkInfo() {
       return this.$store.state.linkInfo
     },
     routKey() {
@@ -54,6 +55,9 @@ export default {
       let time = this.time.start + '/' + this.time.end
       return time
     }
+  },
+  created() {
+
   },
   activated() {
     // let _this = this
@@ -85,30 +89,31 @@ export default {
     getJudgeBrowserAction() {
       this.activeTab = ''
       var browser = {
-        versions: function() {
+        versions: (function () {
           var u = navigator.userAgent
           console.log(u)
           return {
-            trident: u.indexOf('Trident') > -1, //IE内核
-            presto: u.indexOf('Presto') > -1, //opera内核
-            webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
-            gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,//火狐内核
-            mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
-            ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
-            android: u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, //android终端
-            iPhone: u.indexOf('iPhone') > -1 , //是否为iPhone或者QQHD浏览器
-            iPad: u.indexOf('iPad') > -1, //是否iPad
-            webApp: u.indexOf('Safari') == -1, //是否web应该程序，没有头部与底部
-            Safari: u.indexOf('Safari') > -1, //是否web应该程序，没有头部与底部
-            weixin: u.indexOf('MicroMessenger') > -1, //是否微信 （2015-01-22新增）
-            qq: u.match(/\sQQ/i) == " qq", //是否QQ
-            isBaidu: u.indexOf('baiduboxapp') !== -1, //是否为百度浏览器
-            isqqBrowser: u.indexOf('mqqbrowser') !== -1, //是否为qq浏览器
-            isWxBrowser: u.indexOf('micromessenger') !== -1,//是否为微信浏览器
-            isUc: u.indexOf('ucbrowser') !== -1,//是否为uc浏览器
-          };
-        }(),
+            trident: u.indexOf('Trident') > -1, // IE内核
+            presto: u.indexOf('Presto') > -1, // opera内核
+            webKit: u.indexOf('AppleWebKit') > -1, // 苹果、谷歌内核
+            gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, // 火狐内核
+            mobile: !!u.match(/AppleWebKit.*Mobile.*/), // 是否为移动终端
+            ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), // ios终端
+            android: u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, // android终端
+            iPhone: u.indexOf('iPhone') > -1, // 是否为iPhone或者QQHD浏览器
+            iPad: u.indexOf('iPad') > -1, // 是否iPad
+            webApp: u.indexOf('Safari') == -1, // 是否web应该程序，没有头部与底部
+            Safari: u.indexOf('Safari') > -1, // 是否web应该程序，没有头部与底部
+            weixin: u.indexOf('MicroMessenger') > -1, // 是否微信 （2015-01-22新增）
+            qq: u.match(/\sQQ/i) == ' qq', // 是否QQ
+            isBaidu: u.indexOf('baiduboxapp') !== -1, // 是否为百度浏览器
+            isqqBrowser: u.indexOf('mqqbrowser') !== -1, // 是否为qq浏览器
+            isWxBrowser: u.indexOf('micromessenger') !== -1, // 是否为微信浏览器
+            isUc: u.indexOf('ucbrowser') !== -1// 是否为uc浏览器
+          }
+        }())
       }
+      this.ua = browser
       if (browser.versions.webKit) {
         this.activeTab = '苹果、谷歌内核'
         if (browser.versions.mobile) {
@@ -135,23 +140,24 @@ export default {
             }
           }
         }
-      } else if (browser.versions.weixin){
+      } else if (browser.versions.weixin) {
         this.activeTab = 'weixin'
       }
-    },
-    // 版本更新接口
+    }
+    ,
+// 版本更新接口
     versionUpdateHttpAction(type) {
       let _this = this
       let dict = {
-        'attr':{'empid':''},
-        'filters':[
-          {'key':'type','opt':'LIKE','type':'S','value':type}
+        'attr': {'empid': ''},
+        'filters': [
+          {'key': 'type', 'opt': 'LIKE', 'type': 'S', 'value': type}
         ],
-        'logic':'or',
-        'sort':'desc',
-        'orderby':'createon',
-        'pageNum':1,
-        'pageSize':10
+        'logic': 'or',
+        'sort': 'desc',
+        'orderby': 'createon',
+        'pageNum': 1,
+        'pageSize': 10
       }
       activityQueryDocList(dict).then(rt => {
         if (rt) {
@@ -163,28 +169,33 @@ export default {
       }).catch(e => {
         this.$toast('获取信息失败！')
       })
-    },
+    }
+    ,
     postDataListAction(item) {
       const removeItem = item
       removeItem.cellId = item.id + item.erp_user
       return item
-    },
+    }
+    ,
     openPager(path) {
       this.$router.push({
         path: path,
         query: this.$store.state.linkInfo
       })
-    },
+    }
+    ,
     onBrowserBack() {
       if (this.moreSearchShow) {
         this.moreSearchShow = false
         return
       }
       this.$router.go(-1)
-    },
+    }
+    ,
     onSearch() {
 
-    },
+    }
+    ,
     closeAppPage() {
       console.log('关闭页面')
       bridge.closeWindow_c()
@@ -194,58 +205,65 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  #scanQRCode {
-    height: 100%;
-    overflow-x: hidden;
-    overflow-y: auto;
-    .head{
-      height: 130px;
-      width: 100%;
-      background-color: #343434;
-      display: flex;
-      padding: 10px;
-      .headTitle{
-        color: #737172;
-        width: 90%;
-        font-size: 20px;
-        font-weight: 600;
-        line-height: 28px;
-        margin: auto;
-      }
-      .headimage{
-        width: 10%;
-      }
+#scanQRCode {
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  background-color: #FFFFFF;
+
+  .head {
+    height: 100px;
+    width: 100%;
+    background-color: #343434;
+    display: flex;
+    padding: 10px;
+
+    .headTitle {
+      color: #737172;
+      width: 90%;
+      font-size: 18px;
+      font-weight: 600;
+      line-height: 28px;
+      margin: auto;
     }
-    .van-empty{
-      height: 100%;
-      .description{
-        font-size: 16px;
-        color: #666666;
-        text-align: center;
-        margin-top: -230px;
-        .subTitle{
-          padding: 5px;
-          color: #333333;
-          font-size: 20px;
-          font-weight: 600;
-        }
-        .sub{
-          padding: 5px;
-        }
-        
-      }
-      /deep/ .van-empty__bottom{
-        width: 60%;
-        .bottom-button{
-          width: 100%;
-          background-color: #1989fa;
-          margin-bottom: 10px;
-          font-size: 16px;
-        }
-      } 
-      /deep/ .van-empty__image {
-        margin-top: -120px;
-      }
+
+    .headimage {
+      width: 10%;
     }
   }
+
+  .customEmpty {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    //text-align: center;
+  }
+
+  .subTitle {
+    padding: 5px;
+    color: #333333;
+    font-size: 20px;
+    font-weight: 600;
+    margin-top: 20px;
+  }
+
+  .subImg {
+    width:80px;
+    height:80px;
+    display: block;
+    margin-top:30%;
+    border-radius: 8px;
+  }
+
+  .bottom-button {
+    width: 50%;
+    margin-top:50px;
+    background-color: #1989fa;
+    margin-bottom: 10px;
+    font-size: 16px;
+  }
+
+}
 </style>