搞搞搞

README.md

@@ -1,4 +1,7 @@
 ## 部署测试环境
-文件存放位置：
+文件存放位置：oss://4dkk-culture/NanjingMuseumWuJinZang/
 
-访问url：
+访问url：https://culture.4dage.com/NanjingMuseumWuJinZang/index.html#/
+
+## 任一存的todos
+首页 文字区域变更 要问一下。

public/configExcel.js

@@ -247,7 +247,7 @@ var configExcel = {
   ],
   "画作": [
     {
-      "标题": "墨竹图",
+      "标题": "墨竹图（一）",
       "朝代": "宋",
       "作者": "文同",
       "馆藏": "台北故宫博物院藏",
@@ -357,7 +357,7 @@ var configExcel = {
       "图片": "=DISPIMG(\"ID_8E8F1A57A2F946169D6FE3AD124EAF8C\",1)"
     },
     {
-      "标题": "墨竹图",
+      "标题": "墨竹图（二）",
       "朝代": "明",
       "作者": "唐寅",
       "馆藏": "大都会艺术博物馆藏",
@@ -390,7 +390,7 @@ var configExcel = {
       "图片": "=DISPIMG(\"ID_D9AB1A8A0937417989394AD45A831607\",1)"
     },
     {
-      "标题": "竹朱图",
+      "标题": "朱竹图",
       "朝代": "明",
       "作者": "倪元璐",
       "馆藏": "台北故宫博物院藏",

src/App.vue

@@ -41,7 +41,7 @@ const store = useStore()
 
 <style lang="less">
 html, body {
-  // overscroll-behavior: none;
+  overscroll-behavior: none;
   overflow: hidden;
   height: 100%;
 }

src/useFunctions/useSizeAdapt.js

@@ -15,7 +15,7 @@ export default function useSizeAdapt(windowWidthWhenDesign = 390, windowHeightWh
       scaleRate.value = windowHeightWhenDesign / window.innerHeight
     } else {
       windowSizeWhenDesignForRef.value = windowWidthWhenDesign
-      windowSizeInCssForRef.value = '100vw'
+      windowSizeInCssForRef.value = window.innerWidth + 'px'
       scaleRate.value = windowWidthWhenDesign / window.innerWidth
     }
   }

src/views/HomeView.vue

@@ -361,6 +361,10 @@ const isShowHotspotDetail3 = ref(false)
 .home {
   width: 100%;
   height: 100%;
+  background-image: url(@/assets/images/home-painting-line-small.jpg);
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center center;
   // 滚动条，只设置某一项可能导致不生效。
   ::-webkit-scrollbar { width: 0; height: 0; }
   >.bg-mask{
@@ -369,11 +373,8 @@ const isShowHotspotDetail3 = ref(false)
     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);
+    background: rgba(59,64,60,0.67);
+    backdrop-filter: blur(calc(5 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')));
   }
   >.startup{
     z-index: 10;

src/views/HotspotDetail1.vue

@@ -91,7 +91,10 @@ const craftInfo = configText.craft
   top: 0;
   width: 100%;
   height: 100%;
-  background-color: #000;
+  background-image: url(@/assets/images/home-painting-line-small.jpg);
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center center;
   display: flex;
   flex-direction: column;
   justify-content: space-evenly;
@@ -101,11 +104,8 @@ const craftInfo = configText.craft
     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);
+    background: rgba(59,64,60,0.67);
+    backdrop-filter: blur(calc(5 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')));
     z-index: -1;
   }
   >.row{

src/views/HotspotDetail3.vue

@@ -91,7 +91,10 @@ const craftInfo = configText.craft
   top: 0;
   width: 100%;
   height: 100%;
-  background-color: #000;
+  background-image: url(@/assets/images/home-painting-line-small.jpg);
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center center;
   display: flex;
   flex-direction: column;
   justify-content: space-evenly;
@@ -101,11 +104,8 @@ const craftInfo = configText.craft
     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);
+    background: rgba(59,64,60,0.67);
+    backdrop-filter: blur(calc(5 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')));
     z-index: -1;
   }
   >.row{

src/views/PaintingListMenu.vue

@@ -10,12 +10,30 @@
         :key="ageName"
         class="menu-item"
       >
-        <div class="cover">
-          <span class="age">{{ ageName }}</span>
-          <span class="age-en">{{ `${ageCnToEn[ageName]} dynasty` }}</span>
-          <span class="author-list">{{ getAuthorList(paintingGroup).join('/') }}</span>
+        <div
+          class="cover"
+          @click="onClickAge(ageName)"
+        >
+          <div class="age">
+            {{ ageName }}
+          </div>
+          <div class="age-en">
+            {{ `${ageCnToEn[ageName]} dynasty` }}
+          </div>
+          <div class="author-list">
+            {{ getAuthorList(paintingGroup).join('\\') }}
+          </div>
         </div>
-        <div class="hidden-content">
+        <div
+          v-if="ageName !== '清' && !expandedAgeNameList.has(ageName)"
+          class="splitter"
+        />
+        <div
+          class="hidden-content"
+          :style="{
+            width: expandedAgeNameList.has(ageName) ? getHiddenContentWidth(paintingGroup, ageName) : '0',
+          }"
+        >
           <div
             v-if="ageName === '宋'"
             class="special-desc"
@@ -29,9 +47,17 @@
             :key="item['标题']"
             class="painting-item"
           >
-            <span class="author">{{ item['作者'] }}</span>
-            <span class="title">{{ item['标题'] }}</span>
-            <span class="type">{{ item['装裱\/材质\/笔类型'] }}</span>
+            <div class="top-wrap">
+              <div class="author">
+                {{ item['作者'] }}
+              </div>
+              <div class="title">
+                {{ item['标题'].split('\n').join('') }}
+              </div>
+              <div class="type">
+                {{ item['装裱\/材质\/笔类型'] }}
+              </div>
+            </div>
             <div class="img-wrap">
               <img
                 class=""
@@ -40,8 +66,12 @@
                 draggable="false"
               >
             </div>
-            <span class="size">{{ getPaintingSizeString(item['尺寸']) }}</span>
-            <span class="position">{{ item['馆藏'] }}</span>
+            <div class="size">
+              {{ getPaintingSizeString(item['尺寸']) }}
+            </div>
+            <div class="position">
+              {{ item['馆藏'] }}
+            </div>
           </div>
         </div>
       </div>
@@ -119,15 +149,25 @@ function getPaintingSizeString(raw) {
   width = width.substring(1, width.length - 2)
   return `${width}\u00D7${height} 厘米`
 }
-const specialDesc = configExcel['其他'][3]['修篁树石图'][1]['作品简介'].split('\n')[0]
-
-function onClickMenuItem(menuItemName) {
-  // const targetIdx = poemList.findIndex((item) => {
-  //   return item['朝代'] === menuItemName
-  // })
-  // swiper.slideTo(targetIdx)
-  // isShowMenu.value = false
+const paintingWidthWhenDesign = 240
+const paintingMarginWhenDesin = 75
+const specialDescWidthWhenDesin = 444
+function getHiddenContentWidth(paintingGroup, ageName) {
+  let temp = paintingGroup.length * (paintingWidthWhenDesign + paintingMarginWhenDesin) + paintingMarginWhenDesin
+  if (ageName === '宋') {
+    temp += specialDescWidthWhenDesin
+  }
+  return `${temp / windowSizeWhenDesignForRef.value * Number(windowSizeInCssForRef.value.substring(0, windowSizeInCssForRef.value.length - 2))}px`
 }
+const expandedAgeNameList = ref(new Set())
+function onClickAge(ageName) {
+  if (expandedAgeNameList.value.has(ageName)) {
+    expandedAgeNameList.value.delete(ageName)
+  } else {
+    expandedAgeNameList.value.add(ageName)
+  }
+}
+const specialDesc = configExcel['其他'][3]['修篁树石图'][1]['作品简介'].split('\n')[0]
 
 const isShowOperationTip = ref(true)
 watch(menuElScrollLeft, (v) => {
@@ -146,6 +186,156 @@ watch(menuElScrollLeft, (v) => {
   width: 100%;
   height: 100%;
   background-color: #99ab8e;
+  >ul{
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    overflow: auto;
+    >.menu-item{
+      flex: 0 0 auto;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      >.cover{
+        flex: 0 0 auto;
+        height: 100%;
+        padding-left: calc(22 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        padding-right: calc(22 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        writing-mode: vertical-lr;
+        >.age{
+          margin-top: calc(334 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          font-family: KingHwa_OldSong, KingHwa_OldSong;
+          font-weight: 400;
+          font-size: calc(34 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          color: #fff;
+          line-height: calc(40 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        }
+        >.age-en{
+          margin-top: calc(334 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          font-family: KingHwa_OldSong, KingHwa_OldSong;
+          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'));
+        }
+        >.author-list{
+          margin-top: calc(334 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          font-family: KaiTi, KaiTi;
+          font-weight: 400;
+          font-size: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          color: #FFFFFF;
+          line-height: calc(19 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          letter-spacing: 0.2em;
+        }
+      }
+      >.splitter{
+        height: calc(534 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        width: 1px;
+        background-color: #fff;
+      }
+      >.hidden-content{
+        transition: width 1s;
+        overflow: hidden;
+        display: flex;
+        background-color: #f9f7f2;
+        height: 100%;
+        >.special-desc{
+          flex: 0 0 auto;
+          >img.logo{
+
+          }
+          >p{
+
+          }
+          >button.see-more{
+
+          }
+        }
+        >.painting-item:last-of-type {
+          margin-right: calc(v-bind('paintingMarginWhenDesin') / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        }
+        >.painting-item{
+          flex: 0 0 auto;
+          margin-left: calc(v-bind('paintingMarginWhenDesin') / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          width: calc(v-bind('paintingWidthWhenDesign') / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          >.top-wrap{
+            height: 0;
+            width: 0;
+            margin-top: calc(297 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+            margin-bottom: calc(29 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+            position: relative;
+            >.author{
+              writing-mode: vertical-lr;
+              font-family: KingHwa_OldSong, KingHwa_OldSong;
+              font-weight: 400;
+              font-size: calc(34 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+              color: #474747;
+              white-space: pre;
+              position: absolute;
+              right: 0;
+              bottom: calc(18 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+            }
+            >.title{
+              writing-mode: vertical-lr;
+              font-family: KingHwa_OldSong, KingHwa_OldSong;
+              font-weight: 400;
+              font-size: calc(13 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+              color: #474747;
+              white-space: pre;
+              position: absolute;
+              left: calc(11 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+              bottom: 0;
+            }
+            >.type{
+              writing-mode: vertical-lr;
+              font-family: KingHwa_OldSong, KingHwa_OldSong;
+              font-weight: 400;
+              font-size: calc(13 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+              color: #474747;
+              white-space: pre;
+              position: absolute;
+              left: calc(31 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+              bottom: calc(0 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+            }
+          }
+          >.img-wrap{
+            width: calc(240 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+            height: calc(240 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+            border-radius: 50%;
+            border: calc(4 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) solid #50361E;
+            overflow: hidden;
+            margin-bottom: calc(21 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+            >img{
+              width: 100%;
+              height: 100%;
+              object-fit: cover;
+            }
+          }
+          >.size{
+            font-family: KingHwa_OldSong, KingHwa_OldSong;
+            font-weight: 400;
+            font-size: 13px;
+            color: #474747;
+            line-height: 15px;
+            margin-bottom: 0.5em;
+          }
+          >.position{
+            font-family: KingHwa_OldSong, KingHwa_OldSong;
+            font-weight: 400;
+            font-size: 13px;
+            color: #474747;
+            line-height: 15px;
+          }
+        }
+      }
+    }
+  }
   >.operation-tip{
     position: absolute;
     right: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));