安卓 图片长按问题

assets/styles/app.scss

@@ -42,13 +42,17 @@ html {
 }
 
 *:not(input, textarea) {
-  user-select: none;
-  -webkit-user-drag: none;
   -webkit-touch-callout: none;
   -webkit-user-select: none;
+  -khtml-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
+  -webkit-user-drag: none;
+}
+
+.img {
+  pointer-events: none;
 }
 
 a,

components/common/bg/index.vue

 <template>
   <div class="bg">
-    <img src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/gameSecond/background3.png" alt="" class="bg-img">
+    <CyImage src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/gameSecond/background3.png" alt="" class="bg-img"/>
     <!-- 背景 -->
   </div>
 </template>
@@ -16,7 +16,12 @@
   .bg-img {
     height: 100%;
     width: 100%;
+    background-image: url(https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/gameSecond/background3.png);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    background-position: center;
     object-fit: cover;
+    pointer-events: none;
   }
 }
 </style>

components/common/header/index.vue

@@ -9,9 +9,10 @@
       </div>
     </div>
     <div class="bar">
+      <div class="bar-bg img"/>
       <div class="input-box">
         <div class="input-img">
-          <img src="https://kuawai.s3.ap-east-1.amazonaws.com/temp/header/gold-coin.png" alt="">
+          <CyImage class="img" src="https://kuawai.s3.ap-east-1.amazonaws.com/temp/header/gold-coin.png" alt="" />
         </div>
         <div class="value">
           {{ userInfo.goldCredit }}
@@ -19,7 +20,7 @@
       </div>
       <div class="input-box">
         <div class="input-img" style="width: 54px; top: -10px; left: -8px">
-          <img src="https://kuawai.s3.ap-east-1.amazonaws.com/temp/header/red-coin.png" alt="">
+          <CyImage class="img" src="https://kuawai.s3.ap-east-1.amazonaws.com/temp/header/red-coin.png" alt=""/>
         </div>
         <div class="value">
           {{ userInfo.redCredit }}
@@ -38,10 +39,10 @@
     </div>
     <div class="right-block">
       <div v-audio class="btn exit" @click="click().quit()">
-        <img src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/Exit%20Button.png" alt="">
+        <CyImage class="img" src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/Exit%20Button.png" alt=""/>
       </div>
-      <div class="btn full-screen" @click="click().fullScreen()">
-        <img v-audio src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/Full%20Screen%20Button.png" alt="">
+      <div v-audio class="btn full-screen" @click="click().fullScreen()">
+        <CyImage class="img" src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/Full%20Screen%20Button.png" alt=""/>
       </div>
     </div>
     <Confirm ref="confirm" title="登出" message="您要登出当前账号吗？" @confirm="() => network().quitAccount()"/>
@@ -247,7 +248,8 @@ export default {
       padding-left: 46px;
       height: 50px;
     }
-    img {
+    .img {
+      width: 50px;
       height: 30px;
       /* display: none; */
     }
@@ -257,13 +259,20 @@ export default {
   padding-left: 170px;
   display: flex;
   height: 78px;
-  background-image: url(https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/Bar%20Background.png);
-  background-size: auto 100%;
-  background-position: center;
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
+  .bar-bg {
+    background-image: url(https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/Bar%20Background.png);
+    background-size: auto 100%;
+    background-position: center;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
   .input-box {
     padding-left: 28px;
     position: relative;
@@ -275,7 +284,7 @@ export default {
       top: -6px;
       width: 44px;
       height: 44px;
-      img {
+      .img {
         width: 100%;
       }
     }

components/common/image.vue

+<template>
+  <div class="img-box" @click.stop="$emit('click')">
+    <div class="img-touch"/>
+    <img :src="src" alt="" class="img">
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    src: {
+      type: String,
+      default: '',
+    },
+  },
+  data() {
+    return {}
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.img-box{
+  position: relative;
+  .img-touch {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    z-index: 2;
+    /* background: red; */
+  }
+  .img {
+    z-index: 1;
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>

components/common/menu.vue

 <template>
   <div>
     <div class="layout-menu">
-      <div class="menu-item">
-        <img v-audio class="btn" src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/ic_menu_01.png" alt="" @click="$refs.audioSettingDialog.show()">
+      <div class="bg img"/>
+      <div class="menu-item btn">
+        <div @click="$refs.audioSettingDialog.show()">
+          <!-- <img v-audio class="btn" src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/ic_menu_01.png" alt=""> -->
+          <div class="img"/>
+          <!-- <el-image
+            v-audio
+            :src="'https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/ic_menu_01.png'"
+            :fit="'contain'"
+            class="btn"
+            @click="$refs.audioSettingDialog.show()"
+          /> -->
+        </div>
       </div>
     </div>
     <AudioSettingDialog ref="audioSettingDialog" />
@@ -28,16 +39,27 @@ export default {
   top: 100px;
   height: 300px;
   width: 57px;
-  background-image: url(https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/ic_menu.png);
-  background-repeat: no-repeat;
-  background-size: 100% 100%;
+  .bg {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background-image: url(https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/ic_menu.png);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+  }
   .menu-item {
     margin: 20px 0 20px -14px;
     width: 50px;
-    img {
+    pointer-events: all;
+    .img {
       width: 50px;
-      display: block;
-      margin: auto;
+      height: 50px;
+      position: relative;
+      background-image: url(https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/ic_menu_01.png);
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
     }
   }
 }

components/dialog/user-dialog/tab.vue

@@ -5,7 +5,7 @@
         <img v-if="tabIndex === index" class="tab-img" src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/Rounded%20Rectangle%2019.png" alt="">
         <img v-else class="tab-img" src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/last_game%20%E6%8B%B7%E8%B4%9D%202.png" alt="">
         <div class="text">{{ text }}</div>
-        <div v-if="index === 0" class="version">{{ `1.0.023` }}</div>
+        <div v-if="index === 0" class="version">{{ `1.0.024` }}</div>
       </div>
     </div>
   </div>

plugins/plugins.js

@@ -6,14 +6,18 @@ Vue.mixin(indexMixins)
 import VueClipboard from 'vue-clipboard2' // 复制组件
 Vue.use(VueClipboard) // 复制组件
 
+import CyImage from '@/components/common/image'
+
 import {
   Message,
   Loading,
   Slider,
+  Image,
 } from 'element-ui'
 
 Vue.use(Loading.directive)
 Vue.use(Slider)
+Vue.component('CyImage', CyImage)
 
 Vue.prototype.$message = Message
 Vue.prototype.$loading = Loading.service