upp

src/App.vue

@@ -4,9 +4,10 @@
     <Transition name="toast-transition">
       <ToastComp v-if="isShowToast" />
     </Transition>
-    <div
+    <!-- 禁止竖屏 -->
+    <!-- <div
       v-if="$isMobile && windowOrientation === 'portrait' && route.meta.windowOrientation === 'landscape'"
-      class="force-landscape window-orientation-tip"
+      class="force-landscape window-orientation-tip "
     >
       <div class="wrap">
         <img
@@ -22,8 +23,27 @@
           横屏播放
         </div>
       </div>
-    </div>
+    </div> -->
     <div
+      v-if="$isMobile"
+      class="force-landscape window-orientation-tip "
+    >
+      <div class="wrap">
+        <img
+          class=""
+          src="@/assets/images/force-landscape.png"
+          alt=""
+          draggable="false"
+        >
+        <div class="txt">
+          请开启自动旋转后
+        </div>
+        <div class="txt">
+          横屏播放
+        </div>
+      </div>
+    </div>
+    <!-- <div
       v-if="$isMobile && windowOrientation === 'landscape' && route.meta.windowOrientation === 'portrait'"
       class="force-portrait window-orientation-tip"
     >
@@ -38,7 +58,7 @@
           请竖屏播放
         </div>
       </div>
-    </div>
+    </div> -->
   </teleport>
 </template>
 
@@ -70,20 +90,27 @@ const time = ref({
 })
 onMounted(() => {
   // 移动端
+  // 监听窗口变化进行高度重置
   window.addEventListener(
     "resize",
     () => {
-      // @ts-ignore
+      // // @ts-ignore
       clearTimeout(time.value.current)
       time.value.current = window.setTimeout(() => {
-        const dom = document.querySelector("#app")
+        const dom = document.querySelector("body")
         if (dom && document.documentElement.clientWidth < 480) {
-          dom.style.height = document.documentElement.clientHeight + "px"
+          const orientation = (window.innerWidth > windowHeight) ? "landscape" : "portrait"
+          if (orientation == 'landscape') {
+            // 更新横屏高度
+            dom.style.height = document.documentElement.clientHeight + "px"
+          }
         }
-      }, 100)
+      }, 50)
     },
     true
   )
+  window.WeixinJSBridge.call('hideToolbar')
+  window.WeixinJSBridge.call('hideOptionMenu')
 })
 </script>
 
@@ -99,11 +126,13 @@ onMounted(() => {
 }
 
 #app {
+  width: 100vw;
   height: 100%;
 }
 
 // 360浏览器不支持not()
-input, textarea {
+input,
+textarea {
   user-select: initial;
 }
 
@@ -112,6 +141,7 @@ input, textarea {
   font-family: 'jiangxizhuokai-Regular';
   src: url('@/assets/style/jiangxizhuokai-Regular.ttf');
 }
+
 // @font-face {
 //   font-family: 'Source Han Serif CN';
 //   src: url('@/assets/style/SourceHanSerifCN-Regular.otf');
@@ -120,6 +150,7 @@ input, textarea {
   font-family: 'Source Han Serif CN-Bold';
   src: url('@/assets/style/SourceHanSerifCN-Bold.otf');
 }
+
 // i {
 //   font-style: italic;
 // }
@@ -135,6 +166,7 @@ input, textarea {
 .fade-in-enter-active {
   transition: opacity 1s;
 }
+
 .fade-in-enter-from {
   opacity: 0;
 }
@@ -143,6 +175,7 @@ input, textarea {
   transition: opacity 1s;
   pointer-events: none;
 }
+
 .fade-out-leave-to {
   opacity: 0;
 }
@@ -151,13 +184,16 @@ input, textarea {
   transition: opacity 0.5s;
   pointer-events: none;
 }
+
 .tool-fade-in-out-leave-active {
   transition: opacity 0.5s;
   pointer-events: none;
 }
+
 .tool-fade-in-out-enter-from {
   opacity: 0 !important;
 }
+
 .tool-fade-in-out-leave-to {
   opacity: 0 !important;
 }
@@ -166,6 +202,7 @@ input, textarea {
   transition: opacity 0.5s;
   pointer-events: none;
 }
+
 .toast-transition-leave-to {
   opacity: 0;
 }
@@ -174,13 +211,16 @@ input, textarea {
 .animation-show-hide {
   animation: show-hide 1.8s infinite;
 }
+
 @keyframes show-hide {
   0% {
     opacity: 0;
   }
+
   50% {
     opacity: 1;
   }
+
   100% {
     opacity: 0;
   }
@@ -191,6 +231,7 @@ input, textarea {
   background-color: rgba(0, 0, 0, 80%) !important;
   backdrop-filter: blur(5px);
 }
+
 // 或者
 // .viewer-backdrop {
 //   background-color: rgba(0, 0, 0, 90%) !important;
@@ -198,33 +239,82 @@ input, textarea {
 </style>
 
 <style lang="less" scoped>
-.window-orientation-tip{
+.window-orientation-tip {
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   z-index: 9999;
-  background: rgba(0,0,0,0.7);
+  background: rgba(0, 0, 0, 0.7);
   backdrop-filter: blur(calc(90 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')));
   display: flex;
   justify-content: center;
   align-items: center;
-  >.wrap{
+
+  >.wrap {
     text-align: center;
-    >img{
+
+    >img {
       width: calc(113 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       height: calc(113 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       margin-bottom: calc(39 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     }
-    >.txt{
+
+    >.txt {
       font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       font-family: Microsoft YaHei-Regular, Microsoft YaHei;
       font-weight: 400;
-      color: rgba(255,255,255,0.7);
+      color: rgba(255, 255, 255, 0.7);
       line-height: calc(34 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       letter-spacing: calc(1 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     }
   }
 }
+
+/*竖屏*/
+@media screen and (orientation: portrait) {
+  .window-orientation-tip {
+    .window-orientation-tip {
+      display: block;
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 9999;
+      background: rgba(0, 0, 0, 0.7);
+      backdrop-filter: blur(calc(90 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')));
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      >.wrap {
+        text-align: center;
+
+        >img {
+          width: calc(113 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          height: calc(113 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          margin-bottom: calc(39 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        }
+
+        >.txt {
+          font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          font-family: Microsoft YaHei-Regular, Microsoft YaHei;
+          font-weight: 400;
+          color: rgba(255, 255, 255, 0.7);
+          line-height: calc(34 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          letter-spacing: calc(1 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        }
+      }
+    }
+  }
+}
+
+/*横屏*/
+@media screen and (orientation: landscape) {
+  .window-orientation-tip {
+    display: none;
+  }
+}
 </style>

src/components/ForeWord.vue

@@ -115,9 +115,13 @@ const isShowForeword = ref(true)
       padding-left: calc(38 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       overflow: auto;
       &::-webkit-scrollbar { height: 0; };
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      // align-items: center;
       >p{
-        margin-bottom: 1em;
-        font-size: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        margin-bottom: 1.5em;
+        font-size: calc(17 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
         font-family: Source Han Serif CN-Bold, Source Han Serif CN;
         font-weight: bold;
         color: #484238;
@@ -145,7 +149,7 @@ const isShowForeword = ref(true)
       bottom: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       width: calc(95 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       height: calc(44 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      font-size: 16px;
+      font-size: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       font-family: Source Han Serif CN-Bold, Source Han Serif CN;
       font-weight: bold;
       color: #FFFFFF;

src/main.js

@@ -27,6 +27,8 @@ app.provide('$mitt', mitt())
 const uaParser = new UAParser()
 const uaInfo = uaParser.getResult()
 console.log('uaInfo: ', uaInfo)
+// 判断为华为系统
+// if()
 app.provide('$uaInfo', uaInfo)
 if (uaInfo.browser && uaInfo.browser.name === 'WeChat') {
   app.provide('$isWeChat', true)

src/views/CommonDrawList.vue

@@ -53,7 +53,7 @@
         name: 'StartView',
       })"
     /> -->
-    <button
+    <!-- <button
       class="like"
       :class="{
         liked: hasLiked,
@@ -75,7 +75,7 @@
         draggable="false"
       >
       <span class="txt">{{ likeCount }}</span>
-    </button>
+    </button> -->
     <button
       class="return"
       @click="router.push({
@@ -219,14 +219,14 @@ function onGroupUlWheel(e) {
 </script>
 
 <style>
-.viewer-button{
+.viewer-button {
   width: 0 !important;
   height: 0 !important;
 }
 </style>
 
 <style lang="less" scoped>
-.common-draw-list-view{
+.common-draw-list-view {
   position: relative;
   height: 100%;
   padding-top: calc(28 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
@@ -239,7 +239,8 @@ function onGroupUlWheel(e) {
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center center;
-  >div.no-content{
+
+  >div.no-content {
     position: absolute;
     left: 0;
     top: 0;
@@ -248,11 +249,13 @@ function onGroupUlWheel(e) {
     display: flex;
     justify-content: center;
     align-items: center;
-    >img.no-content{
+
+    >img.no-content {
       height: calc(242 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     }
   }
-  >ul.common-draw-list{
+
+  >ul.common-draw-list {
     width: 100%;
     padding-left: calc(19 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     padding-right: calc(4 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
@@ -260,8 +263,14 @@ function onGroupUlWheel(e) {
     display: flex;
     align-items: center;
     overflow: auto;
-    &::-webkit-scrollbar { height: 0; };
-    >li{
+
+    &::-webkit-scrollbar {
+      height: 0;
+    }
+
+    ;
+
+    >li {
       flex: 0 0 auto;
       width: calc(272 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       height: calc(272 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
@@ -271,15 +280,17 @@ function onGroupUlWheel(e) {
       background-position: center center;
       border-radius: calc(10 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       border: calc(4 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) solid #FFFFFF;
-      box-shadow: 0px calc(4 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) calc(4 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) 0px rgba(0,0,0,0.1);
-      >img{
+      box-shadow: 0px calc(4 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) calc(4 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) 0px rgba(0, 0, 0, 0.1);
+
+      >img {
         width: 100%;
         height: 100%;
         object-fit: cover;
       }
     }
   }
-  >button.game-entry{
+
+  >button.game-entry {
     position: absolute;
     bottom: 0;
     right: calc(160 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
@@ -290,12 +301,13 @@ function onGroupUlWheel(e) {
     background-repeat: no-repeat;
     background-position: center center;
   }
-  >button.like{
+
+  >button.like {
     position: absolute;
     bottom: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     right: calc(70 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     background: #FFD73C;
-    box-shadow: 0px calc(4 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) calc(4 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) 0px rgba(0,0,0,0.25);
+    box-shadow: 0px calc(4 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) calc(4 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) 0px rgba(0, 0, 0, 0.25);
     border-radius: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     opacity: 1;
     border: calc(2 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) solid #FFFFFF;
@@ -306,12 +318,14 @@ function onGroupUlWheel(e) {
     display: flex;
     justify-content: space-evenly;
     align-items: center;
-    box-shadow: 0px calc(4 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) calc(4 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) 0px rgba(0,0,0,0.25);
-    >img{
+    box-shadow: 0px calc(4 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) calc(4 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) 0px rgba(0, 0, 0, 0.25);
+
+    >img {
       width: calc(26 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       height: calc(26 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     }
-    >.txt{
+
+    >.txt {
       font-size: calc(14 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       font-family: Source Han Sans CN-Regular, Source Han Sans CN;
       font-weight: 400;
@@ -319,13 +333,16 @@ function onGroupUlWheel(e) {
       line-height: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     }
   }
-  >button.like.liked{
+
+  >button.like.liked {
     background: #fbf0d8;
-    >.txt{
+
+    >.txt {
       color: rgba(215, 173, 13, 1);
     }
   }
-  >button.return{
+
+  >button.return {
     position: absolute;
     bottom: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     right: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
@@ -335,19 +352,31 @@ function onGroupUlWheel(e) {
     background-size: contain;
     background-repeat: no-repeat;
     background-position: center center;
-    box-shadow: 0px calc(4 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) calc(4 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) 0px rgba(0,0,0,0.25);
+    box-shadow: 0px calc(4 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) calc(4 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) 0px rgba(0, 0, 0, 0.25);
     border-radius: 50%;
   }
-  >ul.group-list{
+
+  >ul.group-list {
     padding-left: calc(19 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     margin-right: calc(170 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     padding-bottom: calc(5 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     display: flex;
     align-items: center;
     overflow: auto;
-    &::-webkit-scrollbar { background: #fbf0d8; width: calc(4 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')); height: calc(4 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')); } /*宽度是对垂直滚动条而言，高度是对水平滚动条而言*/
-    &::-webkit-scrollbar-thumb { background: rgba(215, 173, 13, 1); border-radius: calc(2 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')); }
-    >li{
+
+    &::-webkit-scrollbar {
+      background: #fbf0d8;
+      width: calc(4 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      height: calc(4 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    }
+
+    /*宽度是对垂直滚动条而言，高度是对水平滚动条而言*/
+    &::-webkit-scrollbar-thumb {
+      background: rgba(215, 173, 13, 1);
+      border-radius: calc(2 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    }
+
+    >li {
       flex: 0 0 auto;
       display: flex;
       height: calc(40 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
@@ -365,16 +394,17 @@ function onGroupUlWheel(e) {
       border-radius: calc(5 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       cursor: pointer;
     }
-    >li.active{
+
+    >li.active {
       background-color: rgba(239, 196, 27, 1);
       font-weight: bold;
       color: #FFFFFF;
       border: calc(3 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) solid #FFFFFF;
-      box-shadow: 0px calc(4 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) calc(4 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) 0px rgba(0,0,0,0.25);
+      box-shadow: 0px calc(4 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) calc(4 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) 0px rgba(0, 0, 0, 0.25);
     }
   }
 
-  >.show-on-mask{
+  >.show-on-mask {
     position: absolute;
     z-index: 2106;
     right: 0;
@@ -383,6 +413,7 @@ function onGroupUlWheel(e) {
     display: flex;
     flex-direction: column;
     align-items: center;
+
     >button.return {
       width: calc(40 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       height: calc(40 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));

src/views/EntryList.vue

@@ -42,8 +42,31 @@
       </li> -->
     </ul>
     <button
+      class="like"
+      :class="{
+        liked: hasLiked,
+      }"
+      @click="onClickLike"
+    >
+      <img
+        v-show="!hasLiked"
+        class=""
+        src="@/assets/images/like.png"
+        alt=""
+        draggable="false"
+      >
+      <img
+        v-show="hasLiked"
+        class=""
+        src="@/assets/images/liked.png"
+        alt=""
+        draggable="false"
+      >
+      <span class="txt">{{ likeCount }}</span>
+    </button>
+    <button
       class="return"
-      @click="router.push({
+      @click="router.replace({
         name: 'HomeView',
       })"
     />
@@ -51,8 +74,10 @@
 </template>
 
 <script setup>
-import { ref, } from "vue"
-import { useRouter } from "vue-router"
+import { onMounted, ref, computed } from "vue"
+import { useRoute, useRouter } from "vue-router"
+import { likeRecord } from "@/store/index.js"
+
 
 const {
   windowSizeInCssForRef,
@@ -60,17 +85,48 @@ const {
 } = useSizeAdapt(724, 375)
 
 const router = useRouter()
+const route = useRoute()
 
+const hasLiked = computed(() => {
+  return likeRecord.value[route.query.idx - 1]
+})
+
+const likeCount = ref()
+function onClickLike(e) {
+  if (hasLiked.value) {
+    return
+  }
+  likeRecord.value[route.query.idx - 1] = true
+  api.like(route.query.idx)
+  likeCount.value++ // 从接口拿到的数据不会立刻变化
+  setTimeout(() => {
+    utils.animateCSS(e.target, 'heartBeat')
+  }, 100)
+}
 
 
 const ulEl = ref(null)
 function onWheel(e) {
   ulEl.value.scrollLeft -= e.wheelDelta
 }
+
+onMounted(() => {
+  getLikeCount()
+})
+
+const getLikeCount = () => {
+  // 总点赞量
+  likeCount.value = 0
+  api.getAllLikeCount().then((res) => {
+    likeCount.value += res
+  })
+}
+
+
 </script>
 
 <style lang="less" scoped>
-.entry-list-view{
+.entry-list-view {
   height: 100%;
   padding-top: calc(18 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
   padding-bottom: calc(45 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
@@ -79,7 +135,8 @@ function onWheel(e) {
   justify-content: space-around;
   align-items: center;
   background-image: url(@/assets/images/foreword-bg.jpg);
-  >ul.entry-list{
+
+  >ul.entry-list {
     // height: 100%;
     height: 95%;
     width: 100%;
@@ -87,8 +144,14 @@ function onWheel(e) {
     display: flex;
     align-items: center;
     overflow: auto;
-    &::-webkit-scrollbar { height: 0; };
-    >li{
+
+    &::-webkit-scrollbar {
+      height: 0;
+    }
+
+    ;
+
+    >li {
       flex: 0 0 auto;
       height: 100%;
       margin-right: calc(15 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
@@ -99,17 +162,62 @@ function onWheel(e) {
       display: inline-flex;
       justify-content: center;
       align-items: center;
-      >h3{
+
+      >h3 {
         display: inline-block;
         text-align: center;
       }
+
       >img {
         // height: 100%;
         height: 100%;
       }
     }
   }
-  >button.return{
+
+  >button.like {
+    position: absolute;
+    bottom: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    right: calc(70 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    background: #FFD73C;
+    box-shadow: 0px calc(4 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) calc(4 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) 0px rgba(0, 0, 0, 0.25);
+    border-radius: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    opacity: 1;
+    border: calc(2 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) solid #FFFFFF;
+    width: calc(88 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    height: calc(40 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    padding-left: calc(5 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    padding-right: calc(5 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    box-shadow: 0px calc(4 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) calc(4 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) 0px rgba(0, 0, 0, 0.25);
+
+    >img {
+      width: calc(26 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      height: calc(26 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    }
+
+    >.txt {
+      font-size: calc(14 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+      font-weight: 400;
+      color: #FFFFFF;
+      line-height: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    }
+  }
+
+
+  >button.like.liked {
+    background: #fbf0d8;
+
+    >.txt {
+      color: rgba(215, 173, 13, 1);
+    }
+  }
+
+
+  >button.return {
     position: absolute;
     bottom: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     right: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));

src/views/HomeView.vue

@@ -1,11 +1,13 @@
 <template>
   <div class="home">
     <video
+      id="homeVideo"
       src="@/assets/videos/startup.mp4"
       autoplay
       playsinline
       webkit-playsinline="true"
       x5-video-player-type="h5"
+      poster="../assets/images/thumbimg.png"
       muted
     />
     <Transition name="fade-in">
@@ -63,7 +65,7 @@
           <div
             class="item-circle"
             style="background: #E89795;"
-            @click="router.push({
+            @click="router.replace({
               name: 'StartView',
             })"
           >
@@ -90,7 +92,7 @@
 import Clipboard from "clipboard"
 import { showToast } from "@/store/index.js"
 import { useRoute, useRouter } from "vue-router"
-import { ref } from "vue"
+import { onMounted, ref } from "vue"
 import ForeWord from "@/components/ForeWord.vue"
 const {
   windowSizeInCssForRef,
@@ -125,6 +127,27 @@ function onClickCopy() {
 }
 
 
+
+onMounted(() => {
+
+  const homeVideoDom = document.getElementById('homeVideo')
+  homeVideoDom.addEventListener('loadedmetadata', () => {
+    homeVideoDom.play()
+  })
+  // IOS自动播放兼容
+  document.addEventListener(
+    'WeixinJSBridgeReady',
+    function() {
+      homeVideoDom.play()
+    },
+    false
+  )
+  // homeVideoDom.addEventListener('play', () => {
+  //   alert('有播放')
+  // })
+})
+
+
 </script>
 
 <style lang="less" scoped>