|
|
@@ -0,0 +1,156 @@
|
|
|
+<template>
|
|
|
+ <div class="hotspot-detail-3">
|
|
|
+ <div class="bg-mask" />
|
|
|
+ <div class="row row-1">
|
|
|
+ <div class="text">
|
|
|
+ <h3>
|
|
|
+ {{ craftInfo[0].title }}
|
|
|
+ </h3>
|
|
|
+ <p>
|
|
|
+ {{ craftInfo[0].desc }}
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ <div class="image">
|
|
|
+ <img
|
|
|
+ class=""
|
|
|
+ :src="`${$env.VUE_APP_DEPLOY_ORIGIN}/configMultiMedia/${craftInfo[0].title}.png`"
|
|
|
+ alt=""
|
|
|
+ draggable="false"
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="row row-2">
|
|
|
+ <div class="text">
|
|
|
+ <h3>
|
|
|
+ {{ craftInfo[1].title }}
|
|
|
+ </h3>
|
|
|
+ <p>
|
|
|
+ {{ craftInfo[1].desc }}
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ <div class="image">
|
|
|
+ <img
|
|
|
+ class=""
|
|
|
+ :src="`${$env.VUE_APP_DEPLOY_ORIGIN}/configMultiMedia/${craftInfo[1].title}.png`"
|
|
|
+ alt=""
|
|
|
+ draggable="false"
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="row row-3">
|
|
|
+ <div class="text">
|
|
|
+ <h3>
|
|
|
+ {{ craftInfo[2].title }}
|
|
|
+ </h3>
|
|
|
+ <p>
|
|
|
+ {{ craftInfo[2].desc }}
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ <div class="image">
|
|
|
+ <img
|
|
|
+ class=""
|
|
|
+ :src="`${$env.VUE_APP_DEPLOY_ORIGIN}/configMultiMedia/${craftInfo[2].title}.png`"
|
|
|
+ alt=""
|
|
|
+ draggable="false"
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <BtnBack
|
|
|
+ @click="emit('close')"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { ref, computed, watch, onMounted, inject } from "vue"
|
|
|
+import { useRoute, useRouter } from "vue-router"
|
|
|
+import { useStore } from "vuex"
|
|
|
+import useSizeAdapt from "@/useFunctions/useSizeAdapt"
|
|
|
+
|
|
|
+const {
|
|
|
+ windowSizeInCssForRef,
|
|
|
+ windowSizeWhenDesignForRef,
|
|
|
+} = useSizeAdapt()
|
|
|
+
|
|
|
+const route = useRoute()
|
|
|
+const router = useRouter()
|
|
|
+const store = useStore()
|
|
|
+
|
|
|
+const $env = inject('$env')
|
|
|
+
|
|
|
+const emit = defineEmits(['close'])
|
|
|
+
|
|
|
+const craftInfo = configText.craft
|
|
|
+
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+.hotspot-detail-3{
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background-color: #000;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-evenly;
|
|
|
+ >.bg-mask{
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background-image: url(@/assets/images/home-painting.jpg);
|
|
|
+ background-size: cover;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-position: center center;
|
|
|
+ filter: grayscale(1) brightness(0.35);
|
|
|
+ z-index: -1;
|
|
|
+ }
|
|
|
+ >.row{
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ gap: calc(17 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
+ >.text{
|
|
|
+ width: calc(170 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
+ >h3{
|
|
|
+ font-family: KaiTi, KaiTi;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
+ color: #FFFFFF;
|
|
|
+ line-height: calc(23 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
+ margin-bottom: calc(11 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
+ text-align: end;
|
|
|
+ }
|
|
|
+ >p{
|
|
|
+ font-family: KaiTi, KaiTi;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: calc(14 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
+ color: rgba(255, 255, 255, 0.8);
|
|
|
+ line-height: 1.3;
|
|
|
+ text-align: justified;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ >.image{
|
|
|
+ flex: 0 0 auto;
|
|
|
+ width: calc(159 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
+ height: calc(159 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
+ border-radius: 50%;
|
|
|
+ border: 1px solid #FFFFFF;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ >img{
|
|
|
+ width: calc(131 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
+ height: calc(131 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ >.row-2{
|
|
|
+ flex-direction: row-reverse
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
任一存
