fix: 调整用户主页在移动端的布局和动画效果的参数

public/index.html

@@ -6,8 +6,8 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width,initial-scale=1.0">
   <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-<!--  <script src="https://cdn.bootcss.com/pdf.js/2.3.200/pdf.min.js"></script>-->
-  <script src="https://cdn.jsdelivr.net/npm/pdfjs-dist@2.2.228/build/pdf.min.js"></script>
+  <script src="https://cdn.bootcss.com/pdf.js/2.3.200/pdf.min.js"></script>
+<!--  <script src="https://cdn.jsdelivr.net/npm/pdfjs-dist@2.2.228/build/pdf.min.js"></script>-->
 <!--  <script src="https://cdn.bootcss.com/pdf.js/2.3.200/pdf.worker.min.js"></script>-->
   <title>SEEC 课堂助手</title>
   <style>

src/App.vue

@@ -27,6 +27,10 @@ body {
   color: #3a4a5a;
 }
 
+* {
+  -webkit-tap-highlight-color: transparent;
+}
+
 .title {
   font-size: 28px;
   font-weight: 600;

src/components/Ripple.vue

@@ -1,5 +1,7 @@
 <template>
-  <div @click="handleRipple" :class="className" :style="size ? `width: ${size}px; height: ${size}px;` : ''">
+  <div class="ripple-wrapper">
+    <div class="ripple" @click="handleRipple" :class="className" :style="size ? `width: ${size}px; height: ${size}px;` : ''">
+    </div>
   </div>
 </template>
 
@@ -18,7 +20,7 @@ export default {
         this.className = 'show'
         setTimeout(() => {
           this.className = ''
-        }, 400)
+        }, 500)
       })
     }
   }
@@ -29,10 +31,22 @@ export default {
 @import '~@/style/theme.scss';
 
 $opacity: .15;
-div {
+.ripple-wrapper {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.ripple {
+  -webkit-tap-highlight-color: transparent;
   opacity: 0;
-  width: 100px;
-  height: 100px;
+  width: 80px;
+  height: 80px;
   z-index: 2;
   position: absolute;
   background-color: $icon-hover-color;
@@ -42,19 +56,19 @@ div {
 
 .show {
   opacity: $opacity;
-  animation: ripple .4s forwards cubic-bezier(0, .5, .5, 1);
+  animation: ripple .5s forwards ease-out;
 }
 
 @keyframes ripple {
   0% {
     opacity: $opacity;
-    transform: scale(0.00001, 0.0001);
+    transform: scale(0.1, 0.1);
   }
-  80% {
+  40% {
     opacity: $opacity;
     transform: scale(1, 1);
   }
-  90% {
+  80% {
     opacity: $opacity;
     transform: scale(1, 1);
   }

src/components/TabIconButton.vue

@@ -1,8 +1,8 @@
 <template>
-    <div
-      class="tab-icon-button"
-      :class="active ? 'active' : ''"
-    >{{ tab.unicode }}</div>
+  <div
+    class="tab-icon-button"
+    :class="active ? 'active' : ''"
+  >{{ tab.unicode }}</div>
 </template>
 
 <script>
@@ -15,7 +15,17 @@ export default {
 @import '~@/style/theme.scss';
 
 .tab-icon-button {
+  -webkit-tap-highlight-color: transparent;
+  z-index: 2;
+  overflow: hidden;
   user-select: none;
+  position: relative;
+  width: 42px;
+  height: 42px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 1000px;
   cursor: pointer;
   text-align: center;
   font-family: 'iconfont', sans-serif;

src/views/shared/UserHomeLayout.vue

@@ -106,7 +106,7 @@ export default {
 }
 
 .tab {
-  min-height: 320px;
+  min-height: 350px;
   padding: 40px;
   width: 320px;
   flex: 1;
@@ -119,8 +119,10 @@ export default {
   }
 
   .view-container {
-    min-height: 60vh;
-    padding: 8vw;
+    box-sizing: border-box;
+    height: calc(100vh - 54px);
+    padding: 48px 24px;
+    margin-bottom: 30px;
     width: 100%;
     max-width: 460px;
   }