右上角按钮

src/App.vue

@@ -1,26 +1,33 @@
 <template>
-  <img alt="Vue logo" src="./assets/logo.png">
-  <HelloWorld msg="Welcome to Your Vue.js App"/>
+  <GuidePage></GuidePage>
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld.vue'
+import GuidePage from '@/components/GuidePage.vue'
 
 export default {
   name: 'App',
   components: {
-    HelloWorld
+    GuidePage
   }
 }
 </script>
 
 <style>
+body{
+  margin:0;
+  /* max-width: 768px; */
+  text-align: center;
+}
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
-  margin-top: 60px;
+  width:25.8rem;
+  height:100%;
+  margin: 0 auto;
+  background-color:cadetblue;
 }
 </style>

src/components/GuidePage.vue

@@ -0,0 +1,99 @@
+<template>
+  <div id="guide" @click="contactControl">
+    <img id="background1" src="@/assets/images/demobackground.png" />
+    <div id="contact">
+      <img id="contactButton" 
+        @click="isShowContact=!isShowContact" 
+        src="@/assets/images/contactbutton.png"/>
+      <div id="info" v-show="isShowContact">
+        <img id="contactInfo" src="@/assets/images/contactinfo.png"/>
+        <div id="phone"></div>
+        <div id="email"></div>
+        <div id="weChat"></div>
+      </div>
+    </div>
+    <div id="button"><p>点击看展</p></div>
+    <template v-if="show">
+      <div class="orther-button"></div>
+    </template>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "GuidePage",
+  props: {},
+  data() {
+    return {
+      isShowContact: false,
+    };
+  },
+  methods: {
+    contactControl(event) {
+        console.log(event.target.id,2);
+      if (
+        event.target.id != "contactButton" &&
+        event.target.id != "contactInfo"
+      ) {
+        this.isShowContact = false;
+        //TODO:测试下点击其他组件时能不能收回
+      }
+    },
+  },
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+#guide {
+  position: relative;
+  font-size: 16px;
+}
+#background1 {
+  width: 100%;
+  opacity: 0.5;
+}
+#contact {
+  position: fixed;
+  right: 0.5rem;
+  top: 1rem;
+  width: 3.6rem;
+  height: 3.6rem;
+}
+#contact img{
+  width:3.6rem;
+  height:3.6rem;
+}
+#info{
+  position:absolute;
+  right:1rem;
+  top:3.6rem;
+  width:20.7rem;
+  height:27.3rem;
+}
+#info img{
+  width:100%;
+  height: 100%;
+  opacity: 0.8;
+}
+#button {
+  position: absolute;
+  top: 47.1rem;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 18.9rem;
+  height: 4.3rem;
+  background: linear-gradient(180deg, #d06814, transparent);
+  border-radius: 6px;
+  opacity: 0.8;
+}
+#button p {
+  display: block;
+  text-align: center;
+  font-weight: normal;
+  color: #ffffff;
+  font-size: 1rem;
+  font-family: "Microsoft YaHei", "serif";
+  opacity: 1;
+}
+</style>

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/main.js

@@ -1,4 +1,4 @@
 import { createApp } from 'vue'
 import App from './App.vue'
-
+import '../utils/rem.js'
 createApp(App).mount('#app')

utils/rem.js

@@ -0,0 +1,12 @@
+// 设置基准大小
+const baseSize =16;
+function setRem () {
+  // 当前页面宽度相对于 414 宽的缩放比例
+  const scale = document.documentElement.clientWidth / 414
+  document.documentElement.style.fontSize = Math.min(29.6,(baseSize * Math.min(scale, 2))) + 'px'
+}
+// 初始化
+setRem()
+window.onresize = function () {
+  setRem()
+}