Merge branch 'master' of http://192.168.0.115:3000/renyicun/NanjingMuseumWuJinZang-PC

public/configText.js

@@ -18,7 +18,7 @@ var configText = {
   homepagePaintingDetailDescLeaf1: '<span>竹叶的画法以</span><span style="font-size:1.3em" >“个”</span><span>“介"“分”\n字法叠加、穿插、组合而成，叶叶不乱、有条不紊，每片都交代清楚。以书法用笔写出，看似类似，实则每一笔都有变化，细腻微妙。</span>',
   homepagePaintingDetailDescLeaf2: '<span>竹叶的画法以“个”</span><span style="font-size:1.3em">“介"</span><span>“分”\n字法叠加、穿插、组合而成，叶叶不乱、有条不紊，每片都交代清楚。以书法用笔写出，看似类似，实则每一笔都有变化，细腻微妙。</span>',
   homepagePaintingDetailDescLeaf3: '<span>竹叶的画法以“个”“介"</span><span style="font-size:1.3em" >“分”</span><span>\n字法叠加、穿插、组合而成，叶叶不乱、有条不紊，每片都交代清楚。以书法用笔写出，看似类似，实则每一笔都有变化，细腻微妙。</span>',
-  homepagePaintingDetailDescLeaf: '<span>以</span><span style="font-size:1.3em" >“个”“介"“分”</span><span>\n字法叠加、穿插、组合而成，叶叶不乱、有条不紊，每片都交代清楚。以书法用笔写出，看似类似，实则每一笔都有变化，细腻微妙。</span>',
+  homepagePaintingDetailDescLeaf: '<span>竹自根部开始出枝，完全符合竹子自然生长的状态，竹叶的画法以</span><span style="font-size:1.3em" >“个”“介"“分”</span><span>\n字法叠加、穿插、组合而成，叶叶不乱、有条不紊，每片都交代清楚。以书法用笔写出，看似类似，实则每一笔都有变化，细腻微妙。</span>',
 
   homepagePaintingDetailDescStone: '<span >卧石、枯树和灌木</span><span>在竹下方，用低矮、枯梗、虚淡来衬托竹的挺拔、润泽和沉着。图中弥漫着敦厚温润、不瘟不火、从容淡定的神韵。</span>',
   homepagePaintingSummary: '赵孟頫对李衎的墨竹评价极高：“吾友李仲宾为此君写真，冥搜极讨，盖欲尽得竹之情状，二百年来，以画竹称者，皆未必能用意精深如仲宾也。”',

src/components/PaintingInfoBox.vue

@@ -1,10 +1,11 @@
 <script setup>
-import { ref, computed } from "vue"
+import { ref, computed, onMounted } from "vue"
+import { useRoute } from 'vue-router'
+
+const route = useRoute()
 
 // 1-作品简介  2-作者简介
-const curState = computed(() => {
-  return props.state
-})
+const curState = ref(1)
 
 const isCloseInfo = ref(false)
 
@@ -59,6 +60,30 @@ const props = defineProps({
 const newTitle = computed(() => {
   return props.title.split('\n')
 })
+
+// 格式化作品简介/作者简介
+const FormatPaintingDesc = computed(() => {
+  return props.paintingDesc.replace(/\n/g, "<br>").split('<br>').map((line) => `<p>${line}</p>`).join('')
+})
+
+const FormatAuthorDesc = computed(() => {
+  return props.authorDesc.replace(/\n/g, "<br>").split('<br>').map((line) => `<p>${line}</p>`).join('')
+})
+
+onMounted(() => {
+  if (route.query.state) {
+    curState.value = route.query.state
+  }
+})
+
+const exChangeFu = () => {
+  if (curState.value == 1) {
+    curState.value = 2
+
+  } else if (curState.value == 2) {
+    curState.value = 1
+  }
+}
 </script>
 
 <template>
@@ -82,7 +107,7 @@ const newTitle = computed(() => {
         </div>
         <div
           class="exchange"
-          @click="curState == 1 ? (curState = 2) : (curState = 1)"
+          @click="exChangeFu"
         >
           <img
             src="@/assets/images/icon_change.png"
@@ -101,13 +126,16 @@ const newTitle = computed(() => {
         <p>{{ props.subtitle }}</p>
         <p>{{ props.location }}</p>
         <br>
-        <p>{{ props.paintingDesc }}</p>
+        <div style="text-indent: 2em;">
+          <p v-html="FormatPaintingDesc" />
+        </div>
       </div>
       <div
         v-else-if="curState == 2"
         class="bottom"
+        style="text-indent: 2em;"
       >
-        <p>{{ props.authorDesc.length >0? props.authorDesc:'暂无信息' }}</p>
+        <p v-html="FormatPaintingDesc.length > 0 ? FormatPaintingDesc :'暂无信息'" />
       </div>
     </div>
   </div>
@@ -173,7 +201,7 @@ const newTitle = computed(() => {
       overflow: auto;
       font-size: 30px;
       line-height: 35px;
-      padding: 10px 40px 0 0 ;
+      padding: 10px 40px 20px 0 ;
       color: #E1EDD9;
       font-family: 'KaiTi';
       p{

src/views/HomeView.vue

@@ -1,6 +1,6 @@
 <script setup>
-import { ref, computed, nextTick } from "vue"
-import { useRouter } from "vue-router"
+import { ref, computed, nextTick, onMounted } from "vue"
+import { useRouter, useRoute } from "vue-router"
 import { useStore } from "vuex"
 import Startup from "@/views/StartupView.vue"
 import useRollFu from "../rollFu.js"
@@ -10,6 +10,7 @@ import HotspotDetail1 from "@/views/HotspotDetail1.vue"
 
 const store = useStore()
 const router = useRouter()
+const route = useRoute()
 
 const { handleScroll } = useRollFu()
 
@@ -71,6 +72,11 @@ const scrollFu = (val) => {
     }
   }
 }
+onMounted(() => {
+  if (route.query.page) {
+    curPageIndex.value = parseInt(route.query.page)
+  }
+})
 </script>
 
 <template>
@@ -114,6 +120,10 @@ const scrollFu = (val) => {
         v-if="!store.state.haveShownStartup"
         class="startup"
       />
+      <!-- <Startup
+        v-if="true"
+        class="startup"
+      /> -->
     </Transition>
     <!-- 首页标题 -->
     <div
@@ -291,9 +301,9 @@ const scrollFu = (val) => {
       <div class="text-box-title">
         {{ longTitleText }}
       </div>
-      <div v-if="curPageIndex == 2">
+      <!-- <div v-if="curPageIndex == 2">
         竹子的画法
-      </div>
+      </div> -->
       <div
         class="text-box-desc"
         v-html="longDescText"
@@ -529,6 +539,9 @@ const scrollFu = (val) => {
       line-height: 48px;
       margin-bottom: 30px;
     }
+    .text-box-desc{
+      text-indent: 2em;
+    }
   }
 }
 </style>

src/views/HotspotDetail1.vue

@@ -7,15 +7,15 @@
       :style="`opacity:${pageLev === 1 ? '1' : '0'}`"
     >
     <!-- 中间--点击查看 -->
-    <!-- <div :class="`HD1_2 ${isLookImg ? '' : 'HD1_2Hide'}`">
+    <div :class="`HD1_2 ${isLookImg ? '' : 'HD1_2Hide'}`">
       <img
         class=""
-        :src="require(`@/assets/images/icon-click-tip.png`)"
+        :src="require(`@/assets/images/icon_white_click.png`)"
         alt=""
         draggable="false"
       >
-      <div>点 击 查 看</div>
-    </div> -->
+      <div>点击查看</div>
+    </div>
 
     <!-- 右边三个画 -->
     <div
@@ -44,6 +44,14 @@
           color="green"
           text="左右滑动"
         /> -->
+
+        <!-- 滑动提示 -->
+        <OperationTip
+          v-if="isShowOperationTip"
+          class="operation-tip"
+          text="向下滑动"
+          :is-show="isShowOperationTip"
+        />
       </div>
 
       <img
@@ -234,27 +242,22 @@ const imgBottomLoc = (nowId, itemId) => {
   .HD1_2 {
     position: absolute;
     z-index: 11;
-    top: 45%;
-    left: 40%;
-    transform: translate(-50%, -50%);
-    width: 30px;
+    right: calc(12% + 476px);
+    bottom: calc(80vh - 50%);
     display: flex;
     flex-direction: column;
-    pointer-events: none;
-    transition: opacity 1s;
-    opacity: 1;
+    justify-content: center;
+    align-items: center;
     & > img {
       width: 40px;
     }
     & > div {
-      margin-top: 10px;
-      position: relative;
-      line-height: 20px;
-      left: 9px;
+      margin-top: 5px;
       font-weight: 400;
       font-family: KaiTi;
       color: #fff;
-      text-align: center;
+      white-space: nowrap;
+
     }
   }
   .HD1_2Hide {
@@ -303,6 +306,9 @@ const imgBottomLoc = (nowId, itemId) => {
       justify-content: center;
       align-items: center;
       padding-top: 30%;
+      .operation-tip{
+        top: 10%;
+      }
     }
     > img {
       width: 60vw;

src/views/HotspotDetail3.vue

@@ -234,6 +234,7 @@ const handleScroll = () => {
     display: flex;
     flex-direction: column;
     justify-content: space-evenly;
+    z-index: 10;
 
     > img {
       width: 35px;

src/views/PaintingDetail.vue

@@ -49,7 +49,7 @@ onMounted(() => {
       :size="paintingInfo['尺寸'] ? getPaintingSize(paintingInfo['尺寸']) : ''"
       :state="route.query.state ? Number(route.query.state) : 1"
     />
-    <BtnBack @click="router.back()" />
+    <BtnBack @click="() => route.query.idx == 'home' ? router.replace('/?page=4'):router.back()" />
   </div>
 </template>
 

src/views/StartupView.vue

@@ -19,12 +19,12 @@
       draggable="false"
     >
 
-    <!-- <img
+    <img
       class="title"
       src="@/assets/images/startup-title.png"
       alt=""
       draggable="false"
-    > -->
+    >
 
     <Transition name="fade-in">
       <img