poi点位详情页面

src/components/HelloWorld.vue

@@ -1,130 +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-router"
-          target="_blank"
-          rel="noopener"
-          >router</a
-        >
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex"
-          target="_blank"
-          rel="noopener"
-          >vuex</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 lang="less">
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

src/router/index.js

@@ -1,19 +1,14 @@
-import HomeView from "../views/HomeView.vue";
+import PoiInfo from "@/views/PoiInfo.vue";
 
 const routes = [
+  // {
+  //   path: "/",
+  //   redirect: "/poi-info",
+  // },
   {
-    path: "/",
-    name: "home",
-    component: HomeView,
-  },
-  {
-    path: "/about",
-    name: "about",
-    // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
-    component: () =>
-      import(/* webpackChunkName: "about" */ "../views/AboutView.vue"),
+    path: "/poi-info",
+    name: "PoiInfo",
+    component: PoiInfo,
   },
 ];
 

src/views/AboutView.vue

@@ -1,5 +0,0 @@
-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
-</template>

src/views/HomeView.vue

@@ -1,18 +0,0 @@
-<template>
-  <div class="home">
-    <!-- <img alt="Vue logo" src="../assets/logo.png" /> -->
-    <HelloWorld msg="Welcome to Your Vue.js App" />
-  </div>
-</template>
-
-<script>
-// @ is an alias to /src
-import HelloWorld from "@/components/HelloWorld.vue";
-
-export default {
-  name: "HomeView",
-  components: {
-    HelloWorld,
-  },
-};
-</script>

src/views/PoiInfo.vue

@@ -0,0 +1,95 @@
+<template>
+  <div class="poi-info">
+    <div class="content-wrap">
+      <video
+        src="@/assets/videos/video.mp4"
+        controls
+        playsinline
+        webkit-playsinline="true"
+        x5-video-player-type="h5"
+      />
+      <p v-for="(item, index) in info.text" :key="index" v-html="item"></p>
+      <img
+        class="photo"
+        :src="require(`@/assets/images/poiImages/${info.name}.jpg`)"
+        alt=""
+        draggable="false"
+      />
+    </div>
+    <div class="splitter" />
+    <button class="close" @click="router.go(-1)" />
+  </div>
+</template>
+
+<script setup>
+// import { ref, computed, watch, onMounted, inject } from "vue";
+import { useRoute, useRouter } from "vue-router";
+// import { useStore } from "vuex";
+
+const route = useRoute();
+const router = useRouter();
+// const store = useStore();
+
+// const $env = inject("$env");
+
+const info = JSON.parse(decodeURIComponent(route.query.poiInfo));
+</script>
+
+<style lang="less" scoped>
+.poi-info {
+  pointer-events: initial;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.8);
+  backdrop-filter: blur(10px);
+  > .content-wrap {
+    height: calc(100% - 80px - 32px - 32px);
+    overflow: auto;
+    width: 92%;
+    margin-left: 4%;
+    margin-top: 32px;
+    margin-bottom: 32px;
+    > video {
+      width: 100%;
+    }
+    > p {
+      font-family: Microsoft YaHei, Microsoft YaHei;
+      font-weight: 400;
+      font-size: 12px;
+      color: #ffffff;
+      line-height: 23px;
+    }
+    > img.photo {
+      margin-top: 10px;
+      width: 100%;
+    }
+  }
+  > .splitter {
+    height: 0px;
+    border: 1px solid;
+    opacity: 0.3;
+    border-image: linear-gradient(
+        90deg,
+        rgba(215, 215, 215, 0),
+        rgba(215, 215, 215, 1),
+        rgba(215, 215, 215, 0)
+      )
+      2 2;
+  }
+  > button.close {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    bottom: 38px;
+    width: 24px;
+    height: 24px;
+    background-image: url(@/assets/images/btn-close.png);
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center center;
+  }
+}
+</style>