feat: "更多章节"页cast信息改版

src/views/MoreContent.vue

@@ -200,17 +200,33 @@
           >
             重新开始
           </div>
-          <div class="line-1 line">
+          <button
+            class="info"
+            @click="isShowCast = !isShowCast"
+          />
+          <div
+            v-show="isShowCast"
+            class="line-1 line"
+          >
             <span class="key">《无尽藏》展览策展人：</span><span class="value">庞鸥</span>
           </div>
-          <div class="line-2 line">
+          <div
+            v-show="isShowCast"
+            class="line-2 line"
+          >
             线上策展团队：
           </div>
-          <div class="line-3 line">
-            南京博物院：张莅坤 刘佳 李文彬 张晓婉
+          <div
+            v-show="isShowCast"
+            class="line-3 line"
+          >
+            南京博物院：张莅坤 <span>|</span> 刘佳 <span>|</span> 李文彬 <span>|</span> 张晓婉 <span>|</span> 詹徐昊
           </div>
-          <div class="line-4 line">
-            珠海市四维时代网络科技有限公司
+          <div
+            v-show="isShowCast"
+            class="line-4 line"
+          >
+            珠海市四维时代网络科技有限公司设计制作
           </div>
         </div>
       </div>
@@ -313,6 +329,9 @@ const OpenScene = () => {
   musicDom.pause()
   router.push('/scene')
 }
+
+const isShowCast = ref(false)
+
 </script>
 
 <style lang="less" scoped>
@@ -501,17 +520,20 @@ const OpenScene = () => {
         position: absolute;
         top: 0;
         height: 100%;
-        left: calc(3500px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
+        width: calc(462px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
+        left: calc(3200px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
         font-family: "KingHwa_OldSong";
         z-index: 2;
         display: flex;
         flex-direction: column;
         align-items: center;
         & > img.logo {
+          flex: 0 0 auto;
           margin-top: calc((200px - 71px) * v-bind("windowHeight") / v-bind("windowHeightDesign"));
           width: calc(151px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
         }
         > .go-to-online-museum {
+          flex: 0 0 auto;
           width: calc(244px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
           height: calc(110px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
           background-image: url(@/assets/images/btn-online-museum-bg.png);
@@ -522,19 +544,33 @@ const OpenScene = () => {
           display: flex;
           justify-content: center;
           align-items: center;
-          margin-top: calc(62px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
+          margin-top: calc(120px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
+          font-family: KingHwa_OldSong, KingHwa_OldSong;
           font-size: calc(26px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
           color: white;
           cursor: pointer;
         }
         > .restart {
-          margin-top: calc(20px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
+          flex: 0 0 auto;
+          margin-top: calc(15px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
+          font-family: KingHwa_OldSong, KingHwa_OldSong;
           font-size: calc(26px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
           color: #476446;
           white-space: nowrap;
           cursor: pointer;
         }
+        >button.info{
+          flex: 0 0 auto;
+          margin-top: calc(60px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
+          width: calc(30px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
+          height: calc(30px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
+          background-image: url(@/assets/images/icon-info.png);
+          background-size: cover;
+          background-repeat: no-repeat;
+          background-position: center center;
+        }
         >.line{
+          flex: 0 0 auto;
           white-space: pre;
           margin-top: calc(8px  * v-bind("windowHeight") / v-bind("windowHeightDesign"));
           font-family: Source Han Sans CN, Source Han Sans CN;
@@ -542,7 +578,7 @@ const OpenScene = () => {
           color: #688067;
         }
         >.line-1{
-          margin-top: calc(190px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
+          margin-top: calc(18px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
           >.key{
             font-weight: bold;
           }
@@ -550,14 +586,20 @@ const OpenScene = () => {
           }
         }
         >.line-2{
-          margin-top: calc(8px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
+          margin-top: calc(18px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
           font-weight: bold;
         }
         >.line-3{
           margin-top: calc(8px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
+          >span{
+            display: inline-block;
+            transform: translateY(-10%);
+          }
         }
         >.line-4{
           margin-top: calc(8px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
+          letter-spacing: 0.2em;
+          transform: translateX(0.1em);
         }
       }
     }