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

src/views/scanQRCode/index.vue

@@ -13,38 +13,39 @@
         <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="customEmpty" :image="sphImage"
+         :style="{backgroundImage: 'url(' + bagImage + ')' }" style="background-repeat: no-repeat">
+      <img class='subImg' :src="sphImage"/>
       <div class="subTitle">上药移动APP</div>
-      </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 {
+#scanQRCode {
   height: 100%;
   overflow-x: hidden;
   overflow-y: auto;
-    .head{
-      height: 130px;
+  background-color: #FFFFFF;
+
+  .head {
+    height: 100px;
     width: 100%;
     background-color: #343434;
     display: flex;
     padding: 10px;
-      .headTitle{
+
+    .headTitle {
       color: #737172;
       width: 90%;
-        font-size: 20px;
+      font-size: 18px;
       font-weight: 600;
       line-height: 28px;
       margin: auto;
     }
-      .headimage{
+
+    .headimage {
       width: 10%;
     }
   }
-    .van-empty{
+
+  .customEmpty {
     height: 100%;
-      .description{
-        font-size: 16px;
-        color: #666666;
-        text-align: center;
-        margin-top: -230px;
-        .subTitle{
+    width: 100%;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    //text-align: center;
+  }
+
+  .subTitle {
     padding: 5px;
     color: #333333;
     font-size: 20px;
     font-weight: 600;
-        }
-        .sub{
-          padding: 5px;
+    margin-top: 20px;
   }
 
+  .subImg {
+    width:80px;
+    height:80px;
+    display: block;
+    margin-top:30%;
+    border-radius: 8px;
   }
-      /deep/ .van-empty__bottom{
-        width: 60%;
-        .bottom-button{
-          width: 100%;
+
+  .bottom-button {
+    width: 50%;
+    margin-top:50px;
     background-color: #1989fa;
     margin-bottom: 10px;
     font-size: 16px;
   }
-      } 
-      /deep/ .van-empty__image {
-        margin-top: -120px;
-      }
-    }
-  }
+
+}
 </style>