提取slide tip组件

src/components/HelloWorld.vue

@@ -1,58 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

src/components/SlideTip.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="slide-tip">
+    <div class="slide-tip_text">
+      向<br>下<br>滑<br>动
+    </div>
+    <img
+      class="slide-tip_image"
+      src="@/assets/image/下拉.png"
+      alt=""
+    >
+  </div>
+</template>
+
+<style lang="less" scoped>
+.slide-tip {
+  position: absolute;
+  bottom: 17.299vh;
+  left: 50%;
+  transform: translateX(-50%s);
+  font-size: 2.370vh;
+  font-family: Adobe Heiti Std;
+  color: #13357E;
+  animation: twinkle 2s infinite;
+  .slide-tip_image {
+    height: 2.330vh;
+    margin-top: 1.5vh;
+  }
+}
+@keyframes twinkle {
+  0% {
+    opacity: 0;
+  }
+  40% {
+    opacity: 1;
+  }
+  60% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+</style>

src/main.js

@@ -7,6 +7,9 @@ import Vant from 'vant'
 import 'vant/lib/index.css'
 Vue.use(Vant)
 
+import SlideTip from "@/components/SlideTip.vue"
+Vue.component('SlideTip', SlideTip)
+
 Vue.config.productionTip = false
 
 new Vue({

src/views/Home.vue

@@ -15,16 +15,7 @@
       src="@/assets/image/博物馆的力量.png"
       alt=""
     >
-    <div class="slide-tip">
-      <div class="slide-tip_text">
-        向<br>下<br>滑<br>动
-      </div>
-      <img
-        class="slide-tip_image"
-        src="@/assets/image/下拉.png"
-        alt=""
-      >
-    </div>
+    <SlideTip />
     <img
       class="museum-logo"
       src="@/assets/image/museum-logo.png"
@@ -99,20 +90,6 @@ export default {
     left: 50%;
     transform: translateX(-50%);
   }
-  .slide-tip {
-    position: absolute;
-    bottom: 17.299vh;
-    left: 50%;
-    transform: translateX(-50%s);
-    font-size: 2.370vh;
-    font-family: Adobe Heiti Std;
-    color: #13357E;
-    animation: twinkle 2s infinite;
-    .slide-tip_image {
-      height: 2.330vh;
-      margin-top: 1.5vh;
-    }
-  }
   .museum-logo {
     position: absolute;
     left: 2.28rem;
@@ -137,20 +114,4 @@ export default {
     z-index: -1;
   }
 }
-
-@keyframes twinkle {
-  0% {
-    opacity: 0;
-  }
-  40% {
-    opacity: 1;
-  }
-  60% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 0;
-  }
-}
-
 </style>