移动端适配

src/utils/index.js

@@ -0,0 +1,7 @@
+export function isMobile () {
+  const userAgent = navigator.userAgent || navigator.vendor || window.opera
+  const mobile = /android|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(userAgent)
+
+  // 结合窗口宽度判断
+  return mobile || window.innerWidth <= 768
+}

src/views/Home.vue

@@ -14,7 +14,7 @@
             <MFeature
               v-if="tab === 1"
               :items="face"
-              @reTake="tab = 0; width = '480px'"
+              @reTake="tab = 0; width = CLIENT_WIDTH + 'px'"
               @click:try="handleTry"
               @error="handleError"
             ></MFeature>
@@ -23,7 +23,7 @@
               :src="imgBase64"
               :item="tryItem"
               @feature="tab = 1; width = '80%'"
-              @retake="tab = 0; width = '480px'"
+              @retake="tab = 0; width = CLIENT_WIDTH + 'px'"
             ></MTry>
           </template>
         </template>
@@ -46,6 +46,7 @@ import MCover from './components/MCover'
 import MCamera from './components/MCamera'
 import MFeature from './components/MFeature'
 import MTry from './components/MTry'
+const CLIENT_WIDTH = window.innerWidth < 480 ? window.innerWidth : 480
 export default {
   name: 'home-view',
   components: {
@@ -56,15 +57,16 @@ export default {
   },
   provide: {
     size: {
-      width: 480,
-      height: 640
+      width: CLIENT_WIDTH,
+      height: window.innerWidth < 480 ? window.innerWidth / 480 * 640 : 640
     }
   },
   data () {
     return {
+      CLIENT_WIDTH,
       imgBase64: '',
       tab: 0,
-      width: '480px',
+      width: `${CLIENT_WIDTH}px`,
       error: '',
       tryItem: {}
     }
@@ -75,7 +77,7 @@ export default {
       this.$modal.show('VueDialog')
     },
     handleReject (error, target) {
-      this.width = '480px'
+      this.width = CLIENT_WIDTH + 'px'
       this.tab = 0
       target && target(false)
       if (error) {
@@ -91,7 +93,7 @@ export default {
     },
     handleTry (item) {
       this.tryItem = item
-      this.width = '480px'
+      this.width = CLIENT_WIDTH + 'px'
       this.tab = 2
     }
   }

src/views/components/MCamera.vue

@@ -7,7 +7,7 @@
       autoplay
       playsinline
     ></video>
-    <div class="box d-flex align-center justify-center" ref="box">
+    <div class="box d-flex align-center justify-center" ref="box" :style="`width: ${size.width}`">
       <canvas ref="canvas"></canvas>
       <template v-if="ready">
         <div class="box-tool d-flex align-center justify-center">
@@ -244,7 +244,6 @@ export default {
 
 .box {
   margin: 0 auto;
-  width: 480px;
   background: #000;
   position: relative;
   height: 100%;

src/views/components/MCover.vue

@@ -85,7 +85,7 @@ export default {
     position: absolute;
     left: 30px;
     top: 30px;
-    z-index: 99;
+    z-index: 9;
     display: flex;
     align-items: center;
     img {
@@ -169,7 +169,7 @@ export default {
       &.active {
         cursor: default;
         width: 100%;
-        height: 400px;
+        height: 100%;
         border-radius: 0;
       }
     }

src/views/components/MFeature.vue

@@ -1,14 +1,14 @@
 <template>
   <div class="pa-3 main d-flex align-center flex-column justify-center">
-    <div class="text-center text-h3 text--indigo mb-5">检测结果</div>
-    <div color="#26c6da" class="d-flex justify-space-around">
+    <div class="text-center text-h3 text--indigo mb-5 title">检测结果</div>
+    <div color="#26c6da" class="d-flex justify-space-around box">
       <v-card class="text-center pa-3 card" hover v-for="face in items" :key="face.name" width="500" @click="handlePutOn(face)">
         <img class="faceType" :src="require(`@/assets/face/${face.name}.jpg`)" alt="">
         <div class="text-h5 text--indigo py-5">
           {{ faceType[face.name]?.face }}
           相似度 {{ face.similarity.toFixed(2) }}%
         </div>
-        <div class="d-flex align-center justify-center">
+        <div class="d-flex align-center justify-center glass">
           <div v-for="item in faceType[face.name].items" :key="item.type" class="text--indigo pa-3" style="flex: 1">
             <img :src="item.img" width="100%">
           </div>
@@ -99,7 +99,17 @@ export default {
 }
 @media screen and (max-width: 600px) {
   .faceType {
-    width: 150px;
+    width: 200px;
+  }
+  .box {
+    flex-direction: column;
+  }
+  .glass {
+    padding: 0 80px;
+    justify-content: space-around;
+  }
+  .title {
+    font-size: 32px !important;
   }
 }
 </style>

src/views/components/MTry.vue

@@ -79,6 +79,7 @@
 import programType from '@/utils/program'
 import { swiper, swiperSlide } from 'vue-awesome-swiper'
 import 'swiper/dist/css/swiper.css'
+import { isMobile } from '@/utils'
 export default {
   name: 'm-try',
   components: {
@@ -97,6 +98,7 @@ export default {
   },
   data () {
     return {
+      isMobile: isMobile(),
       clear: false,
       active: 0,
       canMove: false,
@@ -171,13 +173,31 @@ export default {
   mounted () {
     this.$nextTick(() => {
       this.onReload()
+      if (this.isMobile) {
+        this.$refs.content.$el.addEventListener('touchmove', this.onTouchMove)
+        this.$refs.content.$el.addEventListener('touchend', this.onTouchLeave)
+        // this.$refs.cover.addEventListener('touchstart', this.onTouchStart)
+        // this.$refs.cover.addEventListener('touchend', this.onTouchEnd)
+        return
+      }
       this.$refs.content.$el.addEventListener('mousemove', this.onTouchMove)
       this.$refs.content.$el.addEventListener('mouseleave', this.onTouchLeave)
+      // this.$refs.cover.addEventListener('mousedown', this.onTouchStart)
+      // this.$refs.cover.addEventListener('mouseup', this.onTouchEnd)
     })
   },
   beforeDestroy () {
+    if (this.isMobile) {
+      this.$refs.content.$el.removeEventListener('touchmove', this.onTouchMove)
+      this.$refs.content.$el.removeEventListener('touchend', this.onTouchLeave)
+      // this.$refs.cover.removeEventListener('touchstart', this.onTouchStart)
+      // this.$refs.cover.removeEventListener('touchend', this.onTouchEnd)
+      return
+    }
     this.$refs.content.$el.removeEventListener('mousemove', this.onTouchMove)
     this.$refs.content.$el.removeEventListener('mouseleave', this.onTouchLeave)
+    // this.$refs.cover.removeEventListener('mousedown', this.onTouchStart)
+    // this.$refs.cover.removeEventListener('mouseup', this.onTouchEnd)
   },
   methods: {
     // 清屏
@@ -210,23 +230,23 @@ export default {
       return degrees
     },
     onSlideChange () {
-      console.log(this.$refs.mySwiper.swiper)
       this.active = this.$refs.mySwiper.swiper.activeIndex
     },
     onTouchMove (v) {
       if (!this.canMove) {
         return
       }
+      const clientX = this.isMobile ? v.touches[0].clientX : v.clientX
+      const clientY = this.isMobile ? v.touches[0].clientY : v.clientY
       // 计算点位移动距离
-      const moveX = v.clientX - this.moveObj.startX
-      const moveY = v.clientY - this.moveObj.startY
+      const moveX = clientX - this.moveObj.startX
+      const moveY = clientY - this.moveObj.startY
       // 计算点位移动后的位置
       const left = this.moveObj.left + moveX
       const top = this.moveObj.top + moveY
       // 更新点位位置
       this.$refs.cover.style.left = left + 'px'
       this.$refs.cover.style.top = top + 'px'
-      // console.log(left, top)
     },
     onTouchLeave () {
       this.onTouchEnd()
@@ -234,17 +254,16 @@ export default {
     onTouchStart (e) {
       this.canMove = true
       const cover = this.$refs.cover
-      const getContentBoundingClientRect = this.$refs.content.$el.getBoundingClientRect()
-      const getGlassBoundingClientRect = cover.getBoundingClientRect()
+      const { left, top } = this.$refs.content.$el.getBoundingClientRect()
+      const { left: glassLeft, top: glassTop } = cover.getBoundingClientRect()
       const clientHeight = cover.clientHeight
       const clientWidth = cover.clientWidth
       this.moveObj = {
-        startX: e.clientX,
-        startY: e.clientY,
-        left: getGlassBoundingClientRect.left - getContentBoundingClientRect.left + clientWidth / 2,
-        top: getGlassBoundingClientRect.top - getContentBoundingClientRect.top + clientHeight / 2
+        startX: this.isMobile ? e.touches[0].clientX : e.clientX,
+        startY: this.isMobile ? e.touches[0].clientY : e.clientY,
+        left: glassLeft - left + clientWidth / 2,
+        top: glassTop - top + clientHeight / 2
       }
-      // console.log(this.moveObj)
     },
     onTouchEnd (e) {
       this.canMove = false