搞搞搞

src/components/CameraDesc.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="camera-desc">
+    <div class="wrap">
+      <div class="desc">
+        sdfkjsfsfg记得发个看到过受到法律上的风光
+      </div>
+      <button
+        class="close"
+        @click="emit('close')"
+      >
+        知道了
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted } from "vue"
+import { useRoute, useRouter } from "vue-router"
+import { useStore } from "vuex"
+
+const emit = defineEmits(['close'])
+
+const route = useRoute()
+const router = useRouter()
+const store = useStore()
+
+
+</script>
+
+<style lang="less" scoped>
+.camera-desc{
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  .wrap{
+    position: absolute;
+    left: 50%;
+    top: 10px;
+    transform: translateX(-50%);
+    background-color: blue;
+    width: 70vw;
+    height: 30vh;
+    >button.close{
+      position: absolute;
+      left: 50%;
+      bottom: 10px;
+      transform: translateX(-50%);
+    }
+  }
+}
+</style>

src/components/CharacterDesc.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="character-desc">
+    <div class="wrap">
+      <h1>name</h1>
+      <div class="desc">
+        sdfkjsfsfg记得发个看到过受到法律上的风光
+      </div>
+      <button
+        class="close"
+        @click="emit('close')"
+      >
+        关闭
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted } from "vue"
+import { useRoute, useRouter } from "vue-router"
+import { useStore } from "vuex"
+
+const emit = defineEmits(['close'])
+
+const route = useRoute()
+const router = useRouter()
+const store = useStore()
+
+
+</script>
+
+<style lang="less" scoped>
+.character-desc{
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  .wrap{
+    position: absolute;
+    left: 50%;
+    top: 10vh;
+    transform: translateX(-50%);
+    background-color: blue;
+    width: 70vw;
+    height: 40vh;
+    >h1{
+      text-align: center;
+    }
+    >button.close{
+      position: absolute;
+      left: 50%;
+      bottom: 10px;
+      transform: translateX(-50%);
+    }
+  }
+}
+</style>

src/views/PanoView.vue

@@ -1,6 +1,32 @@
 <template>
   <div class="pano-view">
     <div id="pano" />
+    <button class="return-home">
+      返回home
+    </button>
+    <CameraDesc
+      v-if="isShowCameraDesc"
+      @close="isShowCameraDesc = false"
+    />
+    <CharacterDesc
+      v-if="isShowCharacterDesc"
+      @close="isShowCharacterDesc = false"
+    />
+    <div class="character-wrap">
+      <button
+        class="name"
+        @click="isShowCharacterDesc = true"
+      >
+        金二胖
+      </button>
+      <img
+        class="character"
+        src="@/assets/images/character.jpg"
+        alt=""
+        draggable="false"
+        @click="isShowCameraDesc = true"
+      >
+    </div>
   </div>
 </template>
 
@@ -9,12 +35,15 @@ import { ref, computed, watch, onMounted } from "vue"
 import { useRoute, useRouter, onBeforeRouteUpdate } from "vue-router"
 import { useStore } from "vuex"
 import * as krfn from "@/libs/pano-core/index.js"
+import CameraDesc from '@/components/CameraDesc.vue'
+import CharacterDesc from '@/components/CharacterDesc.vue'
 
 const route = useRoute()
 const router = useRouter()
 const store = useStore()
 
-
+const isShowCameraDesc = ref(false)
+const isShowCharacterDesc = ref(false)
 
 /**
  * 全景图
@@ -89,5 +118,34 @@ setTimeout(() => {
     width: 100%;
     height: 100%;
   }
+  >button.return-home{
+    position: absolute;
+    width: 100px;
+    height: 100px;
+    top: 100px;
+    right: 100px;
+    background-color: red;
+  }
+  >.character-wrap{
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 100px;
+    height: 100px;
+    >button.name{
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 1;
+    }
+    >img{
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      cursor: pointer;
+    }
+  }
 }
 </style>