Inicio Explorar Axuda
Rexistro Iniciar sesión
renyicun
/
NanjingMuseumWuJinZang
1
0
Fork 0
Ficheiros Incidencias 0 Pull Requests 0 Wiki
Explorar o código

热点1和热点3的详情页

任一存 hai 1 ano
pai
d001e8c521
achega
1e0c0db7a2
Modificáronse 11 ficheiros con 304 adicións e 1 borrados
Unificar vista Mostrar estatísticas de Diff
  1. BIN=BIN
      public/configMultiMedia/册.png
  2. BIN=BIN
      public/configMultiMedia/卷.png
  3. BIN=BIN
      public/configMultiMedia/纸.png
  4. BIN=BIN
      public/configMultiMedia/绢.png
  5. BIN=BIN
      public/configMultiMedia/绫.png
  6. BIN=BIN
      public/configMultiMedia/轴.png
  7. 26 0
      public/config.js
  8. 1 1
      public/index.html
  9. 8 0
      src/views/HomeView.vue
  10. 113 0
      src/views/HotspotDetail1.vue
  11. 156 0
      src/views/HotspotDetail3.vue

BIN=BIN
public/configMultiMedia/册.png
Ver ficheiro


BIN=BIN
public/configMultiMedia/卷.png
Ver ficheiro


BIN=BIN
public/configMultiMedia/纸.png
Ver ficheiro


BIN=BIN
public/configMultiMedia/绢.png
Ver ficheiro


BIN=BIN
public/configMultiMedia/绫.png
Ver ficheiro


BIN=BIN
public/configMultiMedia/轴.png
Ver ficheiro


+ 26 - 0
public/config.js
Ver ficheiro 

@@ -13,4 +13,30 @@ var configText = {
 
   homepagePaintingDetailDescLeaf: '竹叶的画法以“个”“介"“分”字法叠加、穿插、组合而成，叶叶不乱、有条不紊，每片都交代清楚。以书法用笔写出，看似类似，实则每一笔都有变化，细腻微妙。',

   homepagePaintingDetailDescLeaf: '竹叶的画法以“个”“介"“分”字法叠加、穿插、组合而成，叶叶不乱、有条不紊，每片都交代清楚。以书法用笔写出，看似类似，实则每一笔都有变化，细腻微妙。',

   homepagePaintingDetailDescStone: '卧石、枯树和灌木在竹下方，用低矮、枯梗、虚淡来衬托竹的挺拔、润泽和沉着。图中弥漫着敦厚温润、不瘟不火、从容淡定的神韵。',

   homepagePaintingDetailDescStone: '卧石、枯树和灌木在竹下方，用低矮、枯梗、虚淡来衬托竹的挺拔、润泽和沉着。图中弥漫着敦厚温润、不瘟不火、从容淡定的神韵。',

   homepagePaintingSummary: '赵孟頫对李衎的墨竹评价极高：“吾友李仲宾为此君写真，冥搜极讨，盖欲尽得竹之情状，二百年来，以画竹称者，皆未必能用意精深如仲宾也。”',

   homepagePaintingSummary: '赵孟頫对李衎的墨竹评价极高：“吾友李仲宾为此君写真，冥搜极讨，盖欲尽得竹之情状，二百年来，以画竹称者，皆未必能用意精深如仲宾也。”',

+  craft: [

+    {

+      title: '轴',

+      desc:	`轴是中国书画装裱的是最主要的形制。上为“天头”，下为“地头”，左右称“边”，最上的木杆称“天杆”，最下的称“地杆”，两头装有轴头。中间为“画心”即书画的部分。`,

+    },

+    {

+      title: '卷',

+      desc:	`卷也可说是放长的横披，除了画心外，左右还有引首、拖尾等。手卷又称长卷或图卷，这一装裱形制一般为典藏家所需，一般市民不会收藏。`,

+    },

+    {

+      title: '册',

+      desc:	`册是书画作品的一种装裱形式，也是我国古代书籍装帧传统形制中的一种。它是指一种画芯较小而页数较多的书画作品，因为把书画分成数页装订成册而得名。始创于北宋，如《宣和睿览册》。元代逐渐流行，明清较多见。`,

+    },

+    {

+      title: '绢',

+      desc:	`绢，在国画中读四声，常被误读成一声。绘在绢、绫、丝织物上的字画，称为绢本，在画面中能看到明显的横竖交错的纺织痕迹。`,

+    },

+    {

+      title: '纸',

+      desc:	`纸区别于绢本，它是在国画中最常使用的材料。以纸为底，所绘制的就称之为纸本。`,

+    },

+    {

+      title: '绫',

+      desc:	`绫是斜纹地上起斜纹花的中国传统丝织物，是在绮的基础上发展起来的。始产于汉代以前，盛于唐、宋。绫光滑柔软，质地轻薄，用于书画装裱等。用作装裱图画、书籍以及高级礼品盒等的称裱画绫。`,

+    },

+  ]

 }
 
 }

+ 1 - 1
public/index.html
Ver ficheiro 

@@ -8,7 +8,7 @@
 
     <title>我是标题</title>
 
     <title>我是标题</title>
 
   </head>
 
   </head>
 
   <body>
 
   <body>
 
-    <script src="./config.js"></script>
 
+    <script src="./configText.js"></script>
 
     <!-- <script src="https://cdn.bootcss.com/vConsole/3.2.0/vconsole.min.js"></script> -->
 
     <!-- <script src="https://cdn.bootcss.com/vConsole/3.2.0/vconsole.min.js"></script> -->
 
     <noscript>
 
     <noscript>
 
       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
 
       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>

+ 8 - 0
src/views/HomeView.vue
Ver ficheiro 

@@ -112,6 +112,7 @@
 
       <HotspotComp

       <HotspotComp

         v-show="isShowHotspot"

         v-show="isShowHotspot"

         class="hotspot-3"

         class="hotspot-3"

+        @click="isShowHotspotDetail3 = true"

       />

       />

     </div>

     </div>

     <div

     <div

@@ -178,6 +179,11 @@
 
       class="hotspot-detail"

       class="hotspot-detail"

       @close="isShowHotspotDetail1 = false"

       @close="isShowHotspotDetail1 = false"

     />

     />

+    <HotspotDetail3

+      v-if="isShowHotspotDetail3"

+      class="hotspot-detail"

+      @close="isShowHotspotDetail3 = false"

+    />

   </div>

   </div>

 </template>

 </template>

 

 

@@ -188,6 +194,7 @@ import { useStore } from "vuex"
 
 import Startup from '@/views/StartupView.vue'

 import Startup from '@/views/StartupView.vue'

 import useSizeAdapt from "@/useFunctions/useSizeAdapt"

 import useSizeAdapt from "@/useFunctions/useSizeAdapt"

 import HotspotDetail1 from '@/views/HotspotDetail1.vue'

 import HotspotDetail1 from '@/views/HotspotDetail1.vue'

+import HotspotDetail3 from '@/views/HotspotDetail3.vue'

 

 

 const route = useRoute()

 const route = useRoute()

 const router = useRouter()

 const router = useRouter()

@@ -329,6 +336,7 @@ const isShowHotspot = computed(() => {
 
 })

 })

 

 

 const isShowHotspotDetail1 = ref(false)

 const isShowHotspotDetail1 = ref(false)

+const isShowHotspotDetail3 = ref(false)

 </script>

 </script>

 

 

 <style lang="less" scoped>

 <style lang="less" scoped>

+ 113 - 0
src/views/HotspotDetail1.vue
Ver ficheiro 

@@ -1,6 +1,60 @@
 
 <template>

 <template>

   <div class="hotspot-detail-1">

   <div class="hotspot-detail-1">

     <div class="bg-mask" />

     <div class="bg-mask" />

+    <div class="row row-1">

+      <div class="text">

+        <h3>

+          {{ craftInfo[3].title }}

+        </h3>

+        <p>

+          {{ craftInfo[3].desc }}

+        </p>

+      </div>

+      <div class="image">

+        <img

+          class=""

+          :src="`${$env.VUE_APP_DEPLOY_ORIGIN}/configMultiMedia/${craftInfo[3].title}.png`"

+          alt=""

+          draggable="false"

+        >

+      </div>

+    </div>

+    <div class="row row-2">

+      <div class="text">

+        <h3>

+          {{ craftInfo[4].title }}

+        </h3>

+        <p>

+          {{ craftInfo[4].desc }}

+        </p>

+      </div>

+      <div class="image">

+        <img

+          class=""

+          :src="`${$env.VUE_APP_DEPLOY_ORIGIN}/configMultiMedia/${craftInfo[4].title}.png`"

+          alt=""

+          draggable="false"

+        >

+      </div>

+    </div>

+    <div class="row row-3">

+      <div class="text">

+        <h3>

+          {{ craftInfo[5].title }}

+        </h3>

+        <p>

+          {{ craftInfo[5].desc }}

+        </p>

+      </div>

+      <div class="image">

+        <img

+          class=""

+          :src="`${$env.VUE_APP_DEPLOY_ORIGIN}/configMultiMedia/${craftInfo[5].title}.png`"

+          alt=""

+          draggable="false"

+        >

+      </div>

+    </div>

     <BtnBack

     <BtnBack

       @click="emit('close')"

       @click="emit('close')"

     />

     />

@@ -11,6 +65,12 @@
 
 import { ref, computed, watch, onMounted, inject } from "vue"

 import { ref, computed, watch, onMounted, inject } from "vue"

 import { useRoute, useRouter } from "vue-router"

 import { useRoute, useRouter } from "vue-router"

 import { useStore } from "vuex"

 import { useStore } from "vuex"

+import useSizeAdapt from "@/useFunctions/useSizeAdapt"

+

+const {

+  windowSizeInCssForRef,

+  windowSizeWhenDesignForRef,

+} = useSizeAdapt()

 

 

 const route = useRoute()

 const route = useRoute()

 const router = useRouter()

 const router = useRouter()

@@ -20,6 +80,8 @@ const $env = inject('$env')
 
 

 

 const emit = defineEmits(['close'])

 const emit = defineEmits(['close'])

 

 

+const craftInfo = configText.craft

+

 </script>

 </script>

 

 

 <style lang="less" scoped>

 <style lang="less" scoped>

@@ -30,6 +92,9 @@ const emit = defineEmits(['close'])
 
   width: 100%;

   width: 100%;

   height: 100%;

   height: 100%;

   background-color: #000;

   background-color: #000;

+  display: flex;

+  flex-direction: column;

+  justify-content: space-evenly;

   >.bg-mask{

   >.bg-mask{

     position: absolute;

     position: absolute;

     left: 0;

     left: 0;

@@ -41,6 +106,54 @@ const emit = defineEmits(['close'])
 
     background-repeat: no-repeat;

     background-repeat: no-repeat;

     background-position: center center;

     background-position: center center;

     filter: grayscale(1) brightness(0.35);

     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-1{

+    flex-direction: row-reverse

+  }

+  >.row-3{

+    flex-direction: row-reverse

   }

   }

 }

 }

 </style>
 
 </style>

+ 156 - 0
src/views/HotspotDetail3.vue
Ver ficheiro 

@@ -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>