refactor: support for pc preview

src/App.vue

@@ -6,11 +6,12 @@
       </keep-alive>
     </transition>
   </router-view>
-  <BaseMask v-if="!isMobile" />
+  <BaseMask v-if="!isMobile" @click="isMobile = true" />
   <div v-if="!isMobile" class="guide">
-    <Icon icon="mynaui:danger-triangle" />
+    <Icon class="danger" icon="mynaui:danger-triangle" />
+    <Icon class="close" icon="simple-line-icons:close" @click="isMobile = true" />
     <div class="txt">
-      <h2>切换至手机模式才可正常使用</h2>
+      <h2>切换至手机模式获取最佳体验</h2>
       <h3>1. 按 F12 调出控制台</h3>
       <h3>2. 按 Ctrl+Shift+M，或点击下面图标</h3>
     </div>
@@ -34,8 +35,7 @@ import { BASE_URL } from '@/config'
 
 const store = useBaseStore()
 const route = useRoute()
-// const isMobile = ref(/Mobi|Android|iPhone/i.test(navigator.userAgent))
-const isMobile = ref(true)
+const isMobile = ref(/Mobi|Android|iPhone/i.test(navigator.userAgent))
 const transitionName = ref('go')
 
 // watch $route 决定使用哪种过渡
@@ -93,6 +93,15 @@ onMounted(() => {
   font-size: 14rem;
 }
 
+@media screen and (min-width: 500px) {
+  #app {
+    width: 500px !important;
+    position: relative;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+}
+
 .guide {
   color: white;
   z-index: 999;
@@ -105,12 +114,21 @@ onMounted(() => {
   overflow: hidden;
   text-align: center;
 
-  svg {
+  .danger {
     margin-top: 10rem;
     font-size: 40rem;
     color: red;
   }
 
+  .close {
+    cursor: pointer;
+    font-size: 18rem;
+    color: white;
+    position: absolute;
+    right: 15rem;
+    top: 15rem;
+  }
+
   .txt {
     text-align: left;
     padding: 0 24rem;

src/components/Posters.vue

@@ -87,11 +87,12 @@ function getMonth(time) {
 <style scoped lang="less">
 .posters {
   display: grid;
-  grid-template-columns: 33.33vw 33.33vw 33.33vw;
+  grid-template-columns: 33.33% 33.33% 33.33%;
 }
 
 .poster-item {
-  height: calc(33.33vw * 1.2);
+  height: 200rem;
+  max-height: calc(33.33vw * 1.2);
   border: 0.5px solid black;
   overflow: hidden;
   position: relative;

src/components/UserPanel.vue

@@ -501,7 +501,7 @@ function touchEnd() {
           grid-template-columns: 33.33% 33.33% 33.33%;
 
           .item {
-            height: calc(33.33vw * 1.3);
+            height: calc(33.33% * 1.3);
             padding: 2rem;
             overflow: hidden;
             position: relative;

src/pages/home/index.vue

@@ -450,7 +450,7 @@ function dislike() {
 .first-horizontal-item {
   //width: 90vw;
   //height: 80vh;
-  width: 100vw;
+  width: 100%;
   height: calc(var(--vh, 1vh) * 100 - var(--footer-height)) !important;
   overflow: hidden;
   border-radius: 10rem;

src/pages/me/Me.less

@@ -112,7 +112,7 @@
           grid-template-columns: 33.33% 33.33% 33.33%;
 
           .item {
-            height: calc(33.33vw * 1.3);
+            height: calc(33.33% * 1.3);
             padding: 2rem;
             overflow: hidden;
             position: relative;

src/pages/me/Me.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="Me">
-    <SlideRowList name="baseSlide" style="width: 100vw" v-model:active-index="baseActiveIndex">
+    <SlideRowList name="baseSlide" style="width: 100%" v-model:active-index="baseActiveIndex">
       <SlideItem>
         <div ref="float" class="float" :class="floatFixed ? 'fixed' : ''">
           <div

src/utils/dom.ts

@@ -81,8 +81,6 @@ export default class Dom {
       //情况一：获取样式
       if (typeof args[0] === 'string') {
         return window.getComputedStyle(this.els[this.els.length - 1], null)[args[0]]
-        // return globalMethods.$getCss2
-        // return this.els[0].style[args[0]]
       } else {
         //情况三：设置多个样式
         Object.keys(args[0]).map((key) => {

src/utils/index.tsx

@@ -204,26 +204,6 @@ const Utils = {
     // return reg.test(val) ? parseFloat(val) : val
     return parseFloat(val)
   },
-  $getCss2(curEle, attr) {
-    let val = null,
-      reg = null
-    if ('getComputedStyle' in window) {
-      val = window.getComputedStyle(curEle, null)[attr]
-    } else {
-      //ie6~8不支持上面属性
-      //不兼容
-      if (attr === 'opacity') {
-        val = curEle.currentStyle['filter'] //'alpha(opacity=12,345)'
-        reg = /^alphaopacity=(\d+(?:\.\d+)?)opacity=(\d+(?:\.\d+)?)$/i
-        val = reg.test(val) ? reg.exec(val)[1] / 100 : 1
-      } else {
-        val = curEle.currentStyle[attr]
-      }
-    }
-    // reg = /^(-?\d+(\.\d)?)(px|pt|em|rem)?$/i
-    // return reg.test(val) ? parseFloat(val) : val
-    return val
-  },
   $setCss(el, key, value) {
     // console.log(value)
     if (key === 'transform') {

src/utils/slide.ts

@@ -3,6 +3,7 @@ import Utils from '@/utils/index'
 import GM from '@/utils/index'
 import { SlideType } from '@/utils/const_var'
 import { nextTick } from 'vue'
+import { _css } from '@/utils/dom'
 
 function checkEvent(e) {
   const isMobile = /Mobi|Android|iPhone/i.test(navigator.userAgent)
@@ -33,7 +34,7 @@ export function slideInit(el, state) {
     dx2 = 0
   if (state.type === SlideType.HORIZONTAL) dx1 = t
   else dx2 = t
-  Utils.$setCss(el, 'transform', `translate3d(${dx1}px, ${dx2}px, 0)`)
+  _css(el, 'transform', `translate3d(${dx1}px, ${dx2}px, 0)`)
 }
 
 /**
@@ -81,7 +82,7 @@ function canNext(state, isNext) {
 export function slideTouchStart(e, el, state) {
   // console.log('e', e, state.name)
   if (!checkEvent(e)) return
-  Utils.$setCss(el, 'transition-duration', `0ms`)
+  _css(el, 'transition-duration', `0ms`)
   //记录起点坐标，用于move事件计算移动距离
   state.start.x = e.touches[0].pageX
   state.start.y = e.touches[0].pageY
@@ -151,8 +152,8 @@ export function slideTouchMove(
       } else {
         dx2 = t + state.move.y
       }
-      Utils.$setCss(el, 'transition-duration', `0ms`)
-      Utils.$setCss(el, 'transform', `translate3d(${dx1}px, ${dx2}px, 0)`)
+      _css(el, 'transition-duration', `0ms`)
+      _css(el, 'transform', `translate3d(${dx1}px, ${dx2}px, 0)`)
     } else {
       //SlideAlbum.vue组件在用，用于捕获事件，阻止事件传递给父slide
       notNextCb?.()
@@ -219,7 +220,7 @@ export function slideTouchEnd(e, state, canNextCb = null, nextCb = null, notNext
 export function slideReset(e, el, state, emit = null) {
   if (!checkEvent(e)) return
 
-  Utils.$setCss(el, 'transition-duration', `300ms`)
+  _css(el, 'transition-duration', `300ms`)
   const t = getSlideOffset(state, el)
   let dx1 = 0
   let dx2 = 0
@@ -230,7 +231,7 @@ export function slideReset(e, el, state, emit = null) {
     bus.emit(state.name + '-end')
     dx2 = t
   }
-  Utils.$setCss(el, 'transform', `translate3d(${dx1}px, ${dx2}px, 0)`)
+  _css(el, 'transform', `translate3d(${dx1}px, ${dx2}px, 0)`)
   state.start.x = state.start.y = state.start.time = state.move.x = state.move.y = 0
   state.next = false
   state.needCheck = true