style[hotspot]: scrollbar

components.d.ts

@@ -8,6 +8,7 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     ElImage: typeof import('element-plus/es')['ElImage']
+    ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
   }

src/hotspot/views/hotspot/index.scss

@@ -50,25 +50,28 @@
   }
 
   &-scrollbar {
+    margin: 0 auto;
+    padding-right: 20px;
     max-height: 19%;
-    overflow: auto;
     width: 70%;
     color: #fff;
-    margin: 0 auto;
 
     &.isTop {
       max-height: 65%;
-      height: 65%;
       padding: 50px 0;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
+
+      .el-scrollbar__view {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+      }
     }
     h3 {
       font-size: 20px;
       font-weight: 600;
     }
-    p {
+    &-content {
       line-height: 1.5;
       margin-top: 10px;
       font-size: 16px;

src/hotspot/views/hotspot/index.vue

@@ -76,14 +76,14 @@
       </li>
     </ul>
 
-    <div
+    <el-scrollbar
       v-if="isMobile ? isTextType : true"
       class="hotspot-page-scrollbar"
       :class="{ isTop: !flooTab.length && !isMobile }"
     >
       <h3>{{ myTitle }}</h3>
-      <div v-html="myTxt" />
-    </div>
+      <div v-html="myTxt" class="hotspot-page-scrollbar-content" />
+    </el-scrollbar>
   </div>
 </template>
 

src/index/app.scss

@@ -47,7 +47,6 @@ body {
   margin: 0px;
   font-size: 14px;
   color: rgba(255, 255, 255, 0.9);
-  font-family: 'Source Han Sans CN-Medium';
   -webkit-tap-highlight-color: transparent;
 }
 a {