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

public/configExcel.js

@@ -141,140 +141,160 @@ var configExcel = {
       "类型": "五律",
       "朝代": "唐",
       "作者": "李白",
-      "正文": "野竹攒石生 含烟映江岛\n翠色落波深 虚声带寒早\n龙吟曾未听 凤曲吹应好\n不学蒲柳凋 贞心尝自保"
+      "正文": "野竹攒石生 含烟映江岛\n翠色落波深 虚声带寒早\n龙吟曾未听 凤曲吹应好\n不学蒲柳凋 贞心尝自保",
+      "顶部距离": '11vh'
     },
     {
       "标题": "严郑公宅同咏竹",
       "类型": "五律",
       "朝代": "唐",
       "作者": "杜甫",
-      "正文": "绿竹半含箨 新梢才出墙\n色侵书帙晚 阴过酒樽凉\n雨洗娟娟净 风吹细细香\n但令无剪伐 会见拂云长"
+      "正文": "绿竹半含箨 新梢才出墙\n色侵书帙晚 阴过酒樽凉\n雨洗娟娟净 风吹细细香\n但令无剪伐 会见拂云长",
+      "顶部距离": '20vh'
     },
     {
       "标题": "竹里馆",
       "类型": "五绝",
       "朝代": "唐",
       "作者": "王维",
-      "正文": "独坐幽篁里 弹琴复长啸\n深林人不知 明月来相照"
+      "正文": "独坐幽篁里 弹琴复长啸\n深林人不知 明月来相照",
+      "顶部距离": '11vh'
     },
     {
       "标题": "庭竹",
       "类型": "五绝",
       "朝代": "唐",
       "作者": "刘禹锡",
-      "正文": "露涤铅粉节 风摇青玉枝\n依依似君子 无地不相宜"
+      "正文": "露涤铅粉节 风摇青玉枝\n依依似君子 无地不相宜",
+      "顶部距离": '11vh'
     },
     {
       "标题": "於潜僧绿筠轩",
       "类型": "五律",
       "朝代": "宋",
       "作者": "苏轼",
-      "正文": "宁可食无肉 不可居无竹\n无肉令人瘦 无竹令人俗\n人瘦尚可肥 士俗不可医\n旁人笑此言 似高还似痴\n若对此君仍大嚼 世间那有扬州鹤"
+      "正文": `宁可食无肉<span>一二</span> 不可居无竹\n无肉令人瘦<span>一二</span> 无竹令人俗\n人瘦尚可肥<span>一二</span> 士俗不可医\n旁人笑此言<span>一二</span> 似高还似痴\n若对此君仍大嚼 世间那有扬州鹤`,
+      "顶部距离": '18vh'
     },
     {
       "标题": "竹颂",
       "类型": "五绝",
       "朝代": "宋",
       "作者": "黄庭坚",
-      "正文": "深根藏器时 寸寸抱奇节\n遭时上风云 故可傲冰雪"
+      "正文": "深根藏器时 寸寸抱奇节\n遭时上风云 故可傲冰雪",
+      "顶部距离": '11vh'
     },
     {
       "标题": "咏竹",
       "类型": "七绝",
       "朝代": "宋",
       "作者": "王安石",
-      "正文": "人怜直节生来瘦 \n自许高材老更刚\n曾与蒿藜同雨露 \n终随松柏到冰霜"
+      "正文": "人怜直节生来瘦 \n自许高材老更刚\n曾与蒿藜同雨露 \n终随松柏到冰霜",
+      "顶部距离": '11vh'
     },
     {
       "标题": "咏竹",
       "类型": "七律",
       "朝代": "宋",
       "作者": "徐庭筠",
-      "正文": "不论台阁与山林 爱尔岂惟千亩阴\n未出土时先有节 便凌云去也无心\n葛陂始与龙俱化 嶰谷聊同凤一吟\n月朗风清良夜永 可怜王子独知音"
+      "正文": "不论台阁与山林 爱尔岂惟千亩阴\n未出土时先有节 便凌云去也无心\n葛陂始与龙俱化 嶰谷聊同凤一吟\n月朗风清良夜永 可怜王子独知音",
+      "顶部距离": '11vh'
     },
     {
-      "标题": "水仙子<img src='/static/point.png'/>咏竹",
+      "标题": "水仙子<img src='./static/point.png'/>咏竹",
       "类型": "七律",
       "朝代": "元",
       "作者": "马谦斋",
-      "正文": "贞姿不受雪霜侵 直节亭亭易见心\n渭川风雨清吟枕 花开时有凤寻\n文湖州是个知音\n春日临风醉 秋霄对月吟\n舞闲阶碎影筛金"
+      "正文": "贞姿不受雪霜侵 直节亭亭易见心\n渭川风雨清吟枕 花开时有凤寻\n文湖州是个知音\n春日临风醉<span>一二</span> 秋霄对月吟\n舞闲阶碎影筛金",
+      "顶部距离": '18vh'
     },
     {
       "标题": "题文与可画竹",
       "类型": "七律",
       "朝代": "元",
       "作者": "柯九思",
-      "正文": "湖州放笔夺造化 \n此事世人那得知\n跫然何处见生气\n仿佛空庭月落时"
+      "正文": "湖州放笔夺造化 \n此事世人那得知\n跫然何处见生气\n仿佛空庭月落时",
+      "顶部距离": '19vh'
     },
     {
       "标题": "题画竹",
       "类型": "七绝",
       "朝代": "元",
       "作者": "萨都剌",
-      "正文": "小雨春池湿凤毛 \n天孙深夜织鲛绡\n何人更立湘江水 \n独倚薰风忆舜韶"
+      "正文": "小雨春池湿凤毛 \n天孙深夜织鲛绡\n何人更立湘江水 \n独倚薰风忆舜韶",
+      "顶部距离": '11vh'
     },
     {
-      "标题": "题画竹<img src='/static/point.png'/>谁谓籊籊竿",
+      "标题": "题画竹<img src='./static/point.png'/>谁谓籊籊竿",
       "类型": "五绝",
       "朝代": "元",
       "作者": "仇远",
-      "正文": "谁谓籊籊竿 乃不如劲草\n北风动地来 直节未易倒"
+      "正文": "谁谓籊籊竿 乃不如劲草\n北风动地来 直节未易倒",
+      "顶部距离": '23vh'
     },
     {
       "标题": "咏竹",
       "类型": "五绝",
       "朝代": "明",
       "作者": "朱元璋",
-      "正文": "雪压枝头低 虽低不着泥\n一朝红日出 依旧与天齐"
+      "正文": "雪压枝头低 虽低不着泥\n一朝红日出 依旧与天齐",
+      "顶部距离": '11vh'
     },
     {
       "标题": "水仙杂竹",
       "类型": "七绝",
       "朝代": "明",
       "作者": "徐渭",
-      "正文": "二月二日涉笔新 \n水仙竹叶两精神\n正如月下骑鸾女 \n何处堪容食肉人"
+      "正文": "二月二日涉笔新 \n水仙竹叶两精神\n正如月下骑鸾女 \n何处堪容食肉人",
+      "顶部距离": '15vh'
     },
     {
       "标题": "画竹",
       "类型": "五律",
       "朝代": "明",
       "作者": "徐渭",
-      "正文": "万物贵取影 写竹更宜然\n秾阴不通鸟 碧浪自翻天\n戛戛俱鸣石 迷迷别有烟\n直须文与可 把笔取神传"
+      "正文": "万物贵取影 写竹更宜然\n秾阴不通鸟 碧浪自翻天\n戛戛俱鸣石 迷迷别有烟\n直须文与可 把笔取神传",
+      "顶部距离": '11vh'
     },
     {
       "标题": "西湖竹枝",
       "类型": "七绝",
       "朝代": "明",
       "作者": "贝琼",
-      "正文": "六月玉泉来看鱼 \n湖头雨过尽芙蕖\n芙蕖花开郎更远 \n玉泉鱼少亦无书"
+      "正文": "六月玉泉来看鱼 \n湖头雨过尽芙蕖\n芙蕖花开郎更远 \n玉泉鱼少亦无书",
+      "顶部距离": '15vh'
     },
     {
       "标题": "竹石",
       "类型": "七绝",
       "朝代": "清",
       "作者": "郑燮",
-      "正文": "咬定青山不放松 \n立根原在破岩中\n千磨万击还坚劲 \n任尔东西南北风"
+      "正文": "咬定青山不放松 \n立根原在破岩中\n千磨万击还坚劲 \n任尔东西南北风",
+      "顶部距离": '11vh'
     },
     {
       "标题": "新竹",
       "类型": "七绝",
       "朝代": "清",
       "作者": "郑燮",
-      "正文": "新竹高于旧竹枝 \n全凭老干为扶持\n明年再有新生者 \n十丈龙孙绕凤池"
+      "正文": "新竹高于旧竹枝 \n全凭老干为扶持\n明年再有新生者 \n十丈龙孙绕凤池",
+      "顶部距离": '11vh'
     },
     {
       "标题": "潍县署中画竹呈年伯包大中丞括",
       "类型": "七绝",
       "朝代": "清",
       "作者": "郑燮",
-      "正文": "衙斋卧听萧萧竹 \n疑是民间疾苦声\n些小吾曹州县吏 \n一枝一叶总关情"
+      "正文": "衙斋卧听萧萧竹 \n疑是民间疾苦声\n些小吾曹州县吏 \n一枝一叶总关情",
+      "顶部距离": '25vh'
     },
     {
       "标题": "上元竹枝词",
       "类型": "七绝",
       "朝代": "清",
       "作者": "符曾",
-      "正文": "桂花香馅裹胡桃 \n江米如珠井水淘\n见说马家滴粉好 \n试灯风里卖元宵"
+      "正文": "桂花香馅裹胡桃 \n江米如珠井水淘\n见说马家滴粉好 \n试灯风里卖元宵",
+      "顶部距离": '16vh'
     }
   ],
   "画作": [
@@ -347,6 +367,9 @@ var configExcel = {
       "标题（展示）": "筼筜清影图",
       "朝代": "元",
       "作者": "吴镇",
+      "音": ['吴', '镇'],
+      "音图": 'wuzhen.png',
+      "注音": "吴镇",
       "馆藏": "台北故宫博物院藏",
       "装裱\/材质\/笔类型": "轴 纸本 墨笔",
       "尺寸": "纵102.6厘米\n横32.7厘米",

src/App.vue

@@ -12,7 +12,10 @@
   />
 
   <!-- 平板横屏提示 -->
-  <div class="landscape-prompt-box">
+  <div
+    id="prompt-box"
+    class="landscape-prompt-box"
+  >
     <img
       src="@/assets/images/pad-l-icon.png"
       alt=""
@@ -56,6 +59,16 @@ const store = useStore()
 
 const time = ref(null)
 
+function updateOrientationClass() {
+  if (window.matchMedia('(orientation: landscape)').matches) {
+    document.getElementById('prompt-box').classList.add('landscape')
+    document.getElementById('prompt-box').classList.remove('portrait')
+  } else {
+    document.getElementById('prompt-box').classList.add('portrait')
+    document.getElementById('prompt-box').classList.remove('landscape')
+  }
+}
+
 function isNotMobile() {
   const userAgent = navigator.userAgent || navigator.vendor || window.opera
   const mobileKeywords = [
@@ -76,6 +89,13 @@ onMounted(() => {
     // appDom.clientWidth = '390px'
   }
 
+  if ( window.innerWidth >= 600) {
+    // 初始化
+    updateOrientationClass()
+    // 监听窗口尺寸变化
+    window.addEventListener('resize', updateOrientationClass)
+  }
+
   window.addEventListener(
     "resize",
     () => {
@@ -95,6 +115,7 @@ onMounted(() => {
     },
     true
   )
+
 })
 
 </script>
@@ -112,10 +133,9 @@ body {
   -webkit-touch-callout: none;
 }
 
-.landscape-prompt-box{
-  display: none;
-  @media screen and (min-width: 768px) and (orientation: landscape) {
-    position: fixed;
+.landscape {
+  /* 横屏样式 */
+  position: fixed;
     top: 0;
     left: 0;
     width: 100%;
@@ -128,8 +148,7 @@ body {
     font-family: KaiTi;
     z-index: 2024;
     color: white;
-  }
-  img{
+    img{
     width: 13%;
     margin-bottom: 15px;
   }
@@ -141,6 +160,39 @@ body {
   }
 }
 
+.portrait {
+  display: none;
+}
+
+// .landscape-prompt-box{
+//   display: none;
+//   @media screen and (min-width: 600px) and (orientation: landscape) {
+//     position: fixed;
+//     top: 0;
+//     left: 0;
+//     width: 100%;
+//     height: 100%;
+//     background: url(@/assets/images/pad-l-bg.png);
+//     display: flex;
+//     flex-direction: column;
+//     align-items: center;
+//     justify-content: center;
+//     font-family: KaiTi;
+//     z-index: 2024;
+//     color: white;
+//   }
+//   img{
+//     width: 13%;
+//     margin-bottom: 15px;
+//   }
+//   div{
+//     color: white;
+//     font-family: KaiTi;
+//     font-size: 24px;
+//     margin-top: 10px;
+//   }
+// }
+
 
 // 360浏览器不支持not()
 input,
@@ -155,9 +207,12 @@ textarea {
   left: 50%;
   transform: translateX(-50%);
   overflow: hidden;
-  @media screen and (min-width: 768px) {
+  @media screen and (min-width: 600px) {
     max-width: 100%;
   }
+  // @media screen and (-webkit-min-device-pixel-ratio: 0) {
+  //   max-width: 500px;
+  // }
 }
 
 // 字体
@@ -278,7 +333,7 @@ textarea {
   font-family: KaiTi;
   color: white;
   transition: all 0.5s;
-  @media screen and (min-width: 768px) {
+  @media screen and (min-width: 600px) {
     font-size: 26px;
     // line-height: calc(34 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
   }
@@ -286,7 +341,7 @@ textarea {
     width: 30px;
     height: 30px;
     margin-left: 10px;
-    @media screen and (min-width: 768px) {
+    @media screen and (min-width: 600px) {
       width: 45px;
       height: 45px;
     }

src/components/BtnBack.vue

@@ -70,7 +70,7 @@ const props = defineProps({
     font-size: 14px;
     font-family: KaiTi;
     writing-mode:horizontal-tb !important;
-    @media screen and (min-width: 768px) {
+    @media screen and (min-width: 600px) {
       font-size: 20px;
       bottom: -24px;
       left: -12px;

src/components/OperationTip.vue

@@ -84,7 +84,7 @@ watch(propIsShow, (v) => {
     font-family: KaiTi;
     font-weight: 400;
     font-size: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-    @media screen and (min-width: 768px) {
+    @media screen and (min-width: 600px) {
       font-size: calc(22 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     }
   }
@@ -92,7 +92,7 @@ watch(propIsShow, (v) => {
     width: calc(40 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     height: calc(41 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
 
-    // @media screen and (min-width: 768px) {
+    // @media screen and (min-width: 600px) {
     //   width: calc(50 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     //   height: calc(51 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     // }

src/main.js

@@ -65,34 +65,60 @@ const userAgent = navigator.userAgent
 // } else {
 //   window.location.href = './mobile.html'
 // }
-
-
-// 检测是否为移动设备
-const isMobile = /Mobi|Android/i.test(userAgent)
-
-// 检测是否为平板设备
-const isTablet = /Tablet|iPad/i.test(userAgent)
-
-if (!(isTablet || isMobile)) {
-  // console.log('isMobile: ', isMobile)
+// alert(userAgent)
+
+if (
+  uaInfo.device.type === 'mobile' ||
+  (uaInfo.browser.name === 'Edge' && uaInfo.os.name === 'Linux' && window.innerWidth < 1024 ) || // 尽量判断出移动端edge
+  /Mobi|Android|iPhone|SymbianOS|Windows Phone|iPad|iPod|MIUI|Mi Pad|Redmi Pad|Macintosh/i.test(navigator.userAgent)
+) {
+  // app.provide('$isMobile', true)
+  // window.location.assign(process.env.VUE_APP_MOBILE_URL)
+} else {
   const appDom = document.getElementById('app')
   appDom.style.maxWidth = '100%'
   window.location.assign(process.env.VUE_APP_PC_URL)
-} else {
-  // console.log('!isMobile: ', !isMobile)
-  // const appDom = document.getElementById('app')
-  // appDom.style.maxWidth = '100%'
-  // window.location.assign(process.env.VUE_APP_PC_URL)
 }
 
-// if (/Mobi|Android/i.test(navigator.userAgent)) {
 
-// } else {
+
+// // 检测是否为移动设备
+// const isMobile = /Mobi|Android/i.test(userAgent)
+
+// // 检测是否为平板设备
+// const isTablet = /iPad|Tablet|Kindle|Silk|Galaxy Tab|Nexus 7|Mi Pad|Redmi Pad |MediaPad/i.test(userAgent)
+
+// function isIPad(userAgent) {
+//   const userAgentLowerCase = userAgent.toLowerCase()
+//   return (
+//     userAgentLowerCase.includes('IPad') ||
+//     (userAgentLowerCase.includes('Macintosh') &&
+//       userAgentLowerCase.includes('Mac OS X') &&
+//       !userAgentLowerCase.includes('IPhone') &&
+//       !userAgentLowerCase.includes('IPod'))
+//   )
+// }
+
+// if (!(isTablet || isMobile || isIPad)) {
+//   // console.log('isMobile: ', isMobile)
 //   const appDom = document.getElementById('app')
 //   appDom.style.maxWidth = '100%'
 //   window.location.assign(process.env.VUE_APP_PC_URL)
+// } else {
+//   // console.log('!isMobile: ', !isMobile)
+//   // const appDom = document.getElementById('app')
+//   // appDom.style.maxWidth = '100%'
+//   // window.location.assign(process.env.VUE_APP_PC_URL)
 // }
 
+// // if (/Mobi|Android/i.test(navigator.userAgent)) {
+
+// // } else {
+// //   const appDom = document.getElementById('app')
+// //   appDom.style.maxWidth = '100%'
+// //   window.location.assign(process.env.VUE_APP_PC_URL)
+// // }
+
 // 处理resize事件
 let windowWidthLast = window.innerWidth
 let windowHeightLast = window.innerHeight

src/views/BambooBookScene1.vue

@@ -95,7 +95,7 @@ const innerHeight = ref(window.innerHeight + "px")
     position: absolute;
     bottom: 0;
     right: 0;
-    @media screen and (min-width: 768px) {
+    @media screen and (min-width: 600px) {
       width: 50%;
     }
 
@@ -137,7 +137,7 @@ const innerHeight = ref(window.innerHeight + "px")
     writing-mode: vertical-rl;
     /* 垂直排列，从右向左 */
     direction: rtl;
-    @media screen and (min-width: 768px) {
+    @media screen and (min-width: 600px) {
       background-image: url(@/assets/images/bg_zhupu-768.jpg);
       background-size: 100% 100%;
     }
@@ -161,7 +161,7 @@ const innerHeight = ref(window.innerHeight + "px")
       );
       // right: calc(50 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       right: 13%;
-      @media screen and (min-width: 768px) {
+      @media screen and (min-width: 600px) {
         right: 17%;
       }
     }
@@ -181,7 +181,7 @@ const innerHeight = ref(window.innerHeight + "px")
       letter-spacing: 0.3em;
       top: 50%;
       right: 20%;
-      @media screen and (min-width: 768px) {
+      @media screen and (min-width: 600px) {
         right: 19%;
       }
       // right: calc(75 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
@@ -196,7 +196,7 @@ const innerHeight = ref(window.innerHeight + "px")
         50 / v-bind("windowSizeWhenDesignForRef") *
           v-bind("windowSizeInCssForRef")
       );
-      @media screen and (min-width: 768px) {
+      @media screen and (min-width: 600px) {
         right: 17%;
       }
     }
@@ -254,7 +254,7 @@ const innerHeight = ref(window.innerHeight + "px")
       font-family: "KaiTi";
       writing-mode: initial;
       direction: ltr;
-      @media screen and (min-width: 768px) {
+      @media screen and (min-width: 600px) {
         width: calc(
         220 / v-bind("windowSizeWhenDesignForRef") *
           v-bind("windowSizeInCssForRef");

src/views/BambooBookScene2.vue

@@ -184,7 +184,7 @@ const {
       object-position: left;
       position: absolute;
       top: 5%;
-      @media screen and (min-width: 768px) {
+      @media screen and (min-width: 600px) {
         object-fit: contain;
         object-position: center;
       }

src/views/BambooHotView3/index.vue

@@ -443,7 +443,7 @@ img {
     right: unset;
     left: calc(50 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
     writing-mode: vertical-lr;
-    @media screen and (min-width: 768px) {
+    @media screen and (min-width: 600px) {
       bottom: 30%;
     }
 
@@ -509,7 +509,7 @@ img {
     font-size: 12px;
     font-family: KaiTi;
     writing-mode: vertical-rl;
-    @media screen and (min-width: 768px) {
+    @media screen and (min-width: 600px) {
       font-size: 22px;
     }
 
@@ -523,7 +523,7 @@ img {
       width: 20px;
       height: 20px;
       background: url('./images/hot.png') no-repeat center / contain;
-      @media screen and (min-width: 768px) {
+      @media screen and (min-width: 600px) {
         width: 30px;
         height: 30px;
       }
@@ -572,7 +572,7 @@ img {
     left: calc(1000 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
     transform: translateZ(calc(10 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef')));
     z-index: 2;
-    @media screen and (min-width: 768px){
+    @media screen and (min-width: 600px){
       left: calc(1095 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
     }
   }
@@ -581,7 +581,7 @@ img {
     left: calc((1280) /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
     transform: translateZ(calc(10 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef')));
     z-index: 4;
-    @media screen and (min-width: 768px){
+    @media screen and (min-width: 600px){
       left: calc((1280 + 95) /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
     }
 
@@ -589,7 +589,7 @@ img {
   &-b8 {
     left: calc(1030 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
     transform: translateZ(calc(25 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'))) scale(0.8);
-    @media screen and (min-width: 768px){
+    @media screen and (min-width: 600px){
       left: calc(1135 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
     }
     .bamboo-hot2__hot {
@@ -658,13 +658,13 @@ img {
     align-items: center;
     opacity: 1;
     transition: opacity 1s;
-    @media screen and (min-width: 768px) {
+    @media screen and (min-width: 600px) {
       font-size: 22px;
     }
 
     img {
       width: 30px;
-      @media screen and (min-width: 768px) {
+      @media screen and (min-width: 600px) {
         width: 50px;
       }
     }

src/views/HomeView.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed, inject, nextTick } from "vue"
+import { ref, computed, inject, nextTick, onMounted } from "vue"
 import { useRouter } from "vue-router"
 import { useStore } from "vuex"
 
@@ -7,6 +7,8 @@ import HotspotDetail1 from "@/views/HotspotDetail1.vue"
 import HotspotDetail3 from "@/views/HotspotDetail3.vue"
 import { api as viewerApi } from "v-viewer"
 import Startup from "@/views/StartupView.vue"
+import { useWindowSize } from '@vueuse/core'
+
 
 const store = useStore()
 
@@ -20,6 +22,8 @@ const detailDescLeaf = configText.homepagePaintingDetailDescLeaf
 const router = useRouter()
 
 const { windowSizeInCssForRef, windowSizeWhenDesignForRef } = useSizeAdapt()
+const { width: windowWidth, height: windowHeight } = useWindowSize()
+
 
 const isShowPaintingDesc = ref(false)
 const isShowAuthorDesc = ref(false)
@@ -125,6 +129,28 @@ function onClickGoNextPage() {
   }, 2000)
 }
 
+// 将视频资源转换成blob
+const videoData = ref()
+const initVideoSrc = () => {
+  let xhr = new XMLHttpRequest()
+  /*通过get请求获取项目中的mp4文件流，因为axios修改responseType稍微有点麻烦，所以干脆写原生xhr请求了 */
+  xhr.open('GET', require(`@/assets/videos/fade-from-home-to-more-content${windowWidth >= 600 ? '-768' : ''}.mp4`), true)
+  //设置请求结果类型为blob
+  xhr.responseType = 'blob'
+  //回调
+  xhr.onload = function(e) {
+    if (this.status == 200) {
+      //创建blob对象，并把值赋给video的src
+      videoData.value = URL.createObjectURL(this.response)
+    }
+  }
+  xhr.send()
+}
+
+onMounted(() => {
+  initVideoSrc()
+})
+
 const backFu = () => {
   if (
     curPageIndex.value === 4 ||
@@ -160,14 +186,15 @@ const backFu = () => {
     <!-- 了解更多视频 -->
     <Transition name="fade-in">
       <video
-        v-if="isShowVideoFadeToNextPage"
+        v-show="isShowVideoFadeToNextPage"
         ref="videoFadeToNextPageEl"
         class="fade-to-next-page"
-        src="@/assets/videos/fade-from-home-to-more-content.mp4"
+        :src="videoData"
         playsinline
         webkit-playsinline="true"
         x5-video-player-type="h5"
         muted
+        :controls="false"
         @ended="
           router.replace({
             name: 'MoreContentChange',
@@ -197,6 +224,10 @@ const backFu = () => {
         v-if="!store.state.haveShownStartup"
         class="startup"
       />
+      <!-- <Startup
+        v-if="true"
+        class="startup"
+      /> -->
     </Transition>
     <!-- 首页标题 -->
     <div
@@ -257,7 +288,7 @@ const backFu = () => {
         alt=""
         :style="{
           opacity: curPageIndex == 4 ? 1 : 0,
-          zIndex: 2,
+          zIndex: 3,
         }"
         draggable="false"
       >
@@ -267,7 +298,7 @@ const backFu = () => {
         src="@/assets/images/img_stone_all-min.png"
         :style="{
           opacity: curPageIndex == 5 ? 1 : 0,
-          zIndex: 2,
+          zIndex: 3,
         }"
         alt=""
         draggable="false"
@@ -567,8 +598,10 @@ img,
 div {
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
-  // transition: opacity 1.5s, top 1.5s, transform 1.5s;
   transition: opacity 1.5s, top 1.5s, width 1.5s, height 1.5s;
+  @media screen and (min-width: 600px) {
+    transition: auto;
+  }
 }
 
 ::-webkit-scrollbar {
@@ -592,6 +625,9 @@ div {
     height: 100%;
     object-fit: cover;
     z-index: 20;
+    &&::-webkit-media-controls{
+      display: none !important;
+    }
   }
 
   > .bg-mask {
@@ -680,8 +716,6 @@ div {
     );
     z-index: 7;
     pointer-events: none;
-    will-change: transform;
-    backface-visibility: hidden;
     z-index: 10;
 
     & > div {
@@ -794,7 +828,7 @@ div {
       right: 0;
       bottom: 0;
       transition: all 1.5s ease-in-out;
-      @media screen and (min-width: 768px) {
+      @media screen and (min-width: 600px) {
         width: 40px;
         height: 40px;
         right: 5px;
@@ -819,9 +853,16 @@ div {
         v-bind("windowSizeInCssForRef")
     );
     // background: green;
+    will-change: translate;
     transform: translate(-50%, 0);
     z-index: 1;
 
+    @media screen and (min-width: 600px) {
+      transition: top 1.5s, width 1.5s, height 1.5s;
+      -webkit-backface-visibility: hidden;
+      backface-visibility: hidden;
+    }
+
     > .painting-border {
       width: 100%;
       height: 100%;
@@ -840,6 +881,11 @@ div {
       position: absolute;
       left: 50%;
       transform: translate(-50%, 26%);
+      @media screen and (min-width: 600px) {
+        transition: left 1.5s, width 1.5s, height 1.5s;
+        -webkit-backface-visibility: hidden;
+        backface-visibility: hidden;
+      }
     }
   }
 
@@ -865,7 +911,7 @@ div {
       -80 / v-bind("windowSizeWhenDesignForRef") * v-bind("windowSizeInCssForRef")
     );
 
-    @media screen and (min-width: 768px) {
+    @media screen and (min-width: 600px) {
       width: 75%;
     }
 
@@ -890,7 +936,7 @@ div {
       z-index: 2;
       overflow: hidden;
       transition: opacity 1.5s ease;
-      @media screen and (min-width: 768px) {
+      @media screen and (min-width: 600px) {
         transform: translateX(-20%);
       }
     }
@@ -928,7 +974,7 @@ div {
     );
     transform: translate(-40%, -39%);
     transform-origin: center center;
-    @media screen and (min-width: 768px) {
+    @media screen and (min-width: 600px) {
       transform: translate(-45%, -39%);
     }
     > .painting-stem {
@@ -1013,7 +1059,7 @@ div {
       30 / v-bind("windowSizeWhenDesignForRef") *
         v-bind("windowSizeInCssForRef")
     );
-    @media screen and (min-width: 768px) {
+    @media screen and (min-width: 600px) {
       width:80%;
     }
   }
@@ -1048,7 +1094,7 @@ div {
     );
     z-index: 10;
     opacity: 0;
-    @media screen and (min-width: 768px) {
+    @media screen and (min-width: 600px) {
       width: 65px;
       height: 65px;
     }
@@ -1201,7 +1247,7 @@ div {
       > img {
         width: 45%;
         margin-bottom: 10px;
-        @media screen and (min-width: 768px) {
+        @media screen and (min-width: 600px) {
           width: 55%;
         }
       }
@@ -1224,7 +1270,7 @@ div {
     transform: translate(-50%, 0);
     z-index: 5;
     opacity: 1;
-    @media screen and (min-width: 768px) {
+    @media screen and (min-width: 600px) {
       bottom: calc(
         100 / v-bind("windowSizeWhenDesignForRef") *
           v-bind("windowSizeInCssForRef")
@@ -1249,7 +1295,7 @@ div {
     padding-top: 15%;
     padding-left: 10%;
     padding-right: 10%;
-    @media screen and (min-width: 768px) {
+    @media screen and (min-width: 600px) {
       padding-top: 10%;
       padding-left: 15%;
       padding-right: 15%;
@@ -1285,7 +1331,7 @@ div {
     > .painting-img {
       width: 70%;
       margin-bottom: 20px;
-      @media screen and (min-width: 768px) {
+      @media screen and (min-width: 600px) {
         width: 60%;
         margin-bottom: 40px;
       }
@@ -1295,7 +1341,7 @@ div {
       width: 100%;
       overflow: auto;
       padding: 0 0px 40px 0px;
-      @media screen and (min-width: 768px) {
+      @media screen and (min-width: 600px) {
         max-height: 30%;
       }
       &::-webkit-scrollbar {
@@ -1315,7 +1361,7 @@ div {
             v-bind("windowSizeInCssForRef")
         );
         font-family: KaiTi;
-        @media screen and (min-width: 768px) {
+        @media screen and (min-width: 600px) {
           font-size: calc(
             20 / v-bind("windowSizeWhenDesignForRef") *
               v-bind("windowSizeInCssForRef")
@@ -1373,7 +1419,7 @@ div {
     padding-top: 15%;
     padding-left: 10%;
     padding-right: 10%;
-    @media screen and (min-width: 768px) {
+    @media screen and (min-width: 600px) {
       padding-top: 10%;
       padding-left: 15%;
       padding-right: 15%;
@@ -1452,7 +1498,7 @@ div {
               v-bind("windowSizeInCssForRef")
           );
           font-family: KaiTi;
-          @media screen and (min-width: 768px) {
+          @media screen and (min-width: 600px) {
             font-size: calc(
             20 / v-bind("windowSizeWhenDesignForRef") *
               v-bind("windowSizeInCssForRef")

src/views/HotspotDetail1.vue

@@ -180,7 +180,7 @@ const onSwipeChange = (num, index) => {
     swChange.value = false
     setTimeout(() => {
       swChange.value = true
-    }, 600)
+    }, 100)
   }
 
   pageLev.value = newItem.id
@@ -190,7 +190,7 @@ const onSwipeChange = (num, index) => {
       title: newItem.title,
       desc: newItem.desc,
     }
-  }, 500)
+  }, 100)
 }
 
 // 判断画轴的位置 在 左边还是右边
@@ -225,7 +225,7 @@ const imgBottomLoc = (nowId, itemId) => {
     top: 60px;
     left: 30px;
     width: 80px;
-    @media screen and (min-width: 768px) {
+    @media screen and (min-width: 600px) {
       width: 20%;
       top: 100px;
       left: 50px;
@@ -244,14 +244,14 @@ const imgBottomLoc = (nowId, itemId) => {
     pointer-events: none;
     transition: opacity 1s;
     opacity: 1;
-    @media screen and (min-width: 768px) {
+    @media screen and (min-width: 600px) {
       font-size: 22px;
       top: 70%;
       left: 43%;
     }
     & > img {
       width: 40px;
-      @media screen and (min-width: 768px) {
+      @media screen and (min-width: 600px) {
         width: 50px;
       }
     }
@@ -283,24 +283,28 @@ const imgBottomLoc = (nowId, itemId) => {
     right: -60%;
     z-index: 1;
     bottom: 8%;
-    @media screen and (min-width: 768px) {
-      bottom: -40%;
+    @media screen and (min-width: 600px) {
+      bottom: 0;
+      top:33.5vh;
     }
   }
   .HD1_3_2 {
     right: -50%;
     z-index: 2;
     bottom: 0;
-    @media screen and (min-width: 768px) {
-      bottom: -55%;
+    @media screen and (min-width: 600px) {
+      bottom: 0;
+      top:48.5vh;
     }
   }
   .HD1_3_3 {
     right: -40%;
     z-index: 3;
     bottom: -8%;
-    @media screen and (min-width: 768px) {
-      bottom: -70%;
+    @media screen and (min-width: 600px) {
+      // bottom: -70%;
+      bottom: 0;
+      top:61.5vh;
     }
   }
   .HD1_3Ac {
@@ -317,9 +321,17 @@ const imgBottomLoc = (nowId, itemId) => {
       justify-content: center;
       align-items: center;
       padding-top: 30%;
-      @media screen and (min-width: 768px) {
+      @media screen and (min-width: 600px) {
         padding-top: 10%;
       }
+
+      .operation-tip{
+        @media screen and (min-width: 600px) {
+          position: absolute;
+          left: 50%;
+          transform: translateX(-50%);
+        }
+      }
     }
   }
 
@@ -338,8 +350,9 @@ const imgBottomLoc = (nowId, itemId) => {
   .HD1_3AcBottom {
     bottom: -50px;
     transition: right 1s, opacity 0.8s;
-    @media screen and (min-width: 768px) {
-      bottom: -30%;
+    @media screen and (min-width: 600px) {
+      // bottom: -35%;
+      top: 50vh;
     }
   }
 
@@ -373,7 +386,7 @@ const imgBottomLoc = (nowId, itemId) => {
       height: calc(100% - 50px);
       writing-mode: vertical-rl;
       line-height: 120%;
-      @media screen and (min-width: 768px) {
+      @media screen and (min-width: 600px) {
         font-size: 20px;
       }
     }

src/views/HotspotDetail3.vue

@@ -1,38 +1,38 @@
 <template>
   <div class="hotspot-detail-3">
     <img
-      v-show="state === 1 && innerWidth < 768"
+      v-show="state === 1 && innerWidth < 600"
       class="bg-img"
       src="@/assets/images/hots-detail-bg-state1.png"
       alt=""
     >
     <img
-      v-show="state === 2 && innerWidth < 768"
+      v-show="state === 2 && innerWidth < 600"
       class="bg-img"
       src="@/assets/images/hots-detail-bg-state2.png"
       alt=""
     >
     <img
-      v-show="state === 3 && innerWidth < 768"
+      v-show="state === 3 && innerWidth < 600"
       class="bg-img"
       src="@/assets/images/hots-detail-bg-state3.png"
       alt=""
     >
 
     <img
-      v-show="state === 1 && innerWidth >= 768"
+      v-show="state === 1 && innerWidth >= 600"
       class="bg-img"
       src="@/assets/images/hots-detail-bg-state1-768.jpg"
       alt=""
     >
     <img
-      v-show="state === 2 && innerWidth >= 768"
+      v-show="state === 2 && innerWidth >= 600"
       class="bg-img"
       src="@/assets/images/hots-detail-bg-state2-768.jpg"
       alt=""
     >
     <img
-      v-show="state === 3 && innerWidth >= 768"
+      v-show="state === 3 && innerWidth >= 600"
       class="bg-img"
       src="@/assets/images/hots-detail-bg-state3-768.jpg"
       alt=""
@@ -234,7 +234,7 @@ const handleScroll = () => {
         v-bind("windowSizeInCssForRef")
     );
     // 适配平板
-    @media screen and (min-width: 768px) {
+    @media screen and (min-width: 600px) {
       width: 65%;
       max-width: auto;
       bottom: calc(
@@ -258,7 +258,7 @@ const handleScroll = () => {
     img {
       // height: 50vh;
       width: 990px;
-      @media screen and (min-width: 768px) {
+      @media screen and (min-width: 600px) {
         width: 1324px;
       }
     }
@@ -269,7 +269,7 @@ const handleScroll = () => {
     width: 100%;
     transition: opacity 1s ease;
     // 适配平板
-    @media screen and (min-width: 768px) {
+    @media screen and (min-width: 600px) {
       width: 70%;
       left: 50%;
       transform: translateX(-50%);
@@ -297,7 +297,7 @@ const handleScroll = () => {
       35 / v-bind("windowSizeWhenDesignForRef") *
         v-bind("windowSizeInCssForRef")
     );
-    @media screen and (min-width: 768px) {
+    @media screen and (min-width: 600px) {
       width: 40%;
     }
 

src/views/MoreContent.vue

@@ -394,7 +394,8 @@ const pageWidth = ref(0)
 const pageNum = 4
 
 onMounted(() => {
-  if (window.innerWidth >= 768) {
+  // alert(window.innerWidth)
+  if (window.innerWidth >= 600) {
     pageWidth.value = window.innerWidth
   } else {
     pageWidth.value = window.innerWidth >= 500 ? 500 : window.innerWidth
@@ -472,7 +473,7 @@ body {
         top: 46%;
         left: 15%;
         z-index: 20;
-        @media screen and (min-width: 768px) {
+        @media screen and (min-width: 600px) {
           left: 8%;
         }
       }
@@ -503,7 +504,7 @@ body {
             margin-bottom: 10px;
             font-size: 20px;
             margin-bottom: 0;
-            @media screen and (min-width: 768px) {
+            @media screen and (min-width: 600px) {
               font-size: 28px;
             }
           }
@@ -518,7 +519,7 @@ body {
           letter-spacing: 0.3em;
           white-space: pre;
           position: relative;
-          @media screen and (min-width: 768px) {
+          @media screen and (min-width: 600px) {
             font-size: 60px;
           }
 
@@ -530,7 +531,7 @@ body {
             width: 40%;
           }
           img.deco2{
-            @media screen and (min-width: 768px) {
+            @media screen and (min-width: 600px) {
               right: auto;
               left: -0.05em;
             }
@@ -560,7 +561,7 @@ body {
       .ROW1_2 {
         z-index: 4;
         right: -15%;
-        @media screen and (min-width: 768px) {
+        @media screen and (min-width: 600px) {
           right: -8%;
         }
       }
@@ -587,21 +588,21 @@ body {
       .ROW2_1 {
         z-index: 5;
         right: -13%;
-        @media screen and (min-width: 768px) {
+        @media screen and (min-width: 600px) {
           right: -8%;
         }
       }
       .ROW2_2 {
         z-index: 4;
         right: -22%;
-        @media screen and (min-width: 768px) {
+        @media screen and (min-width: 600px) {
           right: -14%;
         }
       }
       .ROW2_3 {
         z-index: 4;
         left: -38%;
-        @media screen and (min-width: 768px) {
+        @media screen and (min-width: 600px) {
           left: -28%;
         }
       }
@@ -616,7 +617,7 @@ body {
       .ROW2_6 {
         left: 0;
         height: 30%;
-        @media screen and (min-width: 768px) {
+        @media screen and (min-width: 600px) {
           left: -28%;
         }
       }
@@ -650,7 +651,7 @@ body {
       .ROW3_7 {
         z-index: 4;
         left: -48%;
-        @media screen and (min-width: 768px) {
+        @media screen and (min-width: 600px) {
           left: -36%;
         }
       }
@@ -661,21 +662,21 @@ body {
       .ROW3_9 {
         z-index: 4;
         right: -37%;
-        @media screen and (min-width: 768px) {
+        @media screen and (min-width: 600px) {
           right: -25%;
         }
       }
       .ROW3_10 {
         z-index: 5;
         right: -3%;
-        @media screen and (min-width: 768px) {
+        @media screen and (min-width: 600px) {
           right: 2%;
         }
       }
       .ROW3_11 {
         z-index: 5;
         left: -15%;
-        @media screen and (min-width: 768px) {
+        @media screen and (min-width: 600px) {
           left: -12%;
         }
       }
@@ -683,7 +684,7 @@ body {
         z-index: 5;
         left: 2%;
         height: 40%;
-        @media screen and (min-width: 768px) {
+        @media screen and (min-width: 600px) {
           left: 13%;
         }
       }
@@ -703,28 +704,28 @@ body {
       .ROW4_6 {
         z-index: 3;
         left: -30%;
-        @media screen and (min-width: 768px) {
+        @media screen and (min-width: 600px) {
           left: -18%;
         }
       }
       .ROW4_7 {
         z-index: 4;
         left: -70%;
-        @media screen and (min-width: 768px) {
+        @media screen and (min-width: 600px) {
           left: 51%;
         }
       }
       .ROW4_8 {
         z-index: 4;
         right: -5%;
-        @media screen and (min-width: 768px) {
+        @media screen and (min-width: 600px) {
           right: -2%;
         }
       }
       .ROW4_9 {
         z-index: 5;
         right: -5%;
-        @media screen and (min-width: 768px) {
+        @media screen and (min-width: 600px) {
           right: -2%;
         }
       }
@@ -757,13 +758,13 @@ body {
       color: white;
       z-index: 20;
       width: 20%;
-      @media screen and (min-width: 768px) {
+      @media screen and (min-width: 600px) {
         width: 19%;
       }
       & > img {
         pointer-events: none;
         width: 118px;
-        @media screen and (min-width: 768px) {
+        @media screen and (min-width: 600px) {
           width: 115%;
         }
       }
@@ -779,8 +780,9 @@ body {
         margin-top: 40%;
         margin-left: -25%;
         font-size: 18px;
-        @media screen and (min-width: 768px) {
+        @media screen and (min-width: 600px) {
           font-size: 24px;
+          margin-top: 32%;
         }
       }
 
@@ -795,7 +797,7 @@ body {
 
         margin-left: 54%;
         font-size: 18px;
-        @media screen and (min-width: 768px) {
+        @media screen and (min-width: 600px) {
           font-size: 24px;
           margin-left: 45%;
         }
@@ -814,14 +816,14 @@ body {
           width: 20px;
           height: 20px;
           margin-bottom: 5px;
-          @media screen and (min-width: 768px) {
+          @media screen and (min-width: 600px) {
             width: 35px;
             height: 35px;
             }
           }
         >img{
           width: 75vw;
-          @media screen and (min-width: 768px) {
+          @media screen and (min-width: 600px) {
             width: 65vw;
           }
         }
@@ -896,13 +898,13 @@ body {
     align-items: center;
     opacity: 1;
     transition: opacity 1s;
-    @media screen and (min-width: 768px) {
+    @media screen and (min-width: 600px) {
       font-size: 22px;
     }
 
     img {
       width: 30px;
-      @media screen and (min-width: 768px) {
+      @media screen and (min-width: 600px) {
         width: 50px;
       }
     }

src/views/PaintingDetail.vue

@@ -487,7 +487,7 @@ function showBigPainting() {
       -60 / var(--39efea6f-windowSizeWhenDesignForRef) * var(--39efea6f-windowSizeInCssForRef)
     );
 
-    @media screen and (min-width: 768px) {
+    @media screen and (min-width: 600px) {
       animation: paintion-up 2s forwards;
       transform: translate(-50%, 0) scale(0.85);
       top: calc(
@@ -754,7 +754,7 @@ function showBigPainting() {
     //     height: calc(400 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     //   }
     // }
-    @media screen and (min-width: 768px) {
+    @media screen and (min-width: 600px) {
       height: calc(
         255 / v-bind("windowSizeWhenDesignForRef") *
           v-bind("windowSizeInCssForRef")
@@ -859,7 +859,7 @@ function showBigPainting() {
       230 / v-bind("windowSizeWhenDesignForRef") *
         v-bind("windowSizeInCssForRef")
     );
-    @media screen and (min-width: 768px) {
+    @media screen and (min-width: 600px) {
       height: calc(
         180 / v-bind("windowSizeWhenDesignForRef") *
           v-bind("windowSizeInCssForRef")
@@ -871,7 +871,7 @@ function showBigPainting() {
       360 / v-bind("windowSizeWhenDesignForRef") *
         v-bind("windowSizeInCssForRef")
     );
-    @media screen and (min-width: 768px) {
+    @media screen and (min-width: 600px) {
       width: calc(
         450 / v-bind("windowSizeWhenDesignForRef") *
           v-bind("windowSizeInCssForRef")

src/views/PaintingList.vue

@@ -383,7 +383,7 @@ const isShowPaintingStyleDesc = ref(false)
       height: 100%;
       display: flex;
       align-items: center;
-      @media screen and (min-width: 768px) {
+      @media screen and (min-width: 600px) {
         justify-content: right;
       }
       >.cover{
@@ -601,7 +601,7 @@ const isShowPaintingStyleDesc = ref(false)
             color: #474747;
             line-height: 15px;
             margin-bottom: 0.5em;
-            @media screen and (min-width: 768px) {
+            @media screen and (min-width: 600px) {
               font-size: 20px;
             }
           }
@@ -611,7 +611,7 @@ const isShowPaintingStyleDesc = ref(false)
             font-size: 13px;
             color: #474747;
             line-height: 15px;
-            @media screen and (min-width: 768px) {
+            @media screen and (min-width: 600px) {
               font-size: 22px;
             }
           }

src/views/PoemList.js

@@ -26,6 +26,10 @@ export const arrList = [
   [
     { classTxt: 'ROW5_1', imgName: "3_06", moveNum: 60 },
     { classTxt: 'ROW5_2', imgName: "2_03", moveNum: 80 },
+
+    // { classTxt: 'ROW4_3', imgName: "4_05", moveNum: 100 },
+    // { classTxt: 'ROW3_3', imgName: "4_08", moveNum: 100 },
+
     { classTxt: 'ROW5_3', imgName: "4_06", moveNum: 100 },
     { classTxt: 'ROW5_4', imgName: "4_07", moveNum: 100 },
     { classTxt: 'ROW5_5', imgName: "2_04", moveNum: 80 },

src/views/PoemList.vue

@@ -52,7 +52,10 @@
                 <span class="age">{{ item1["朝代"] }}</span>
               </div>
             </div>
-            <p>{{ item1["正文"] }}</p>
+            <p
+              :style="{marginTop: item1['顶部距离']? item1['顶部距离'] :''}"
+              v-html="item1[&quot;正文&quot;]"
+            />
           </div>
         </div>
       </div>
@@ -260,7 +263,7 @@ onMounted(() => {
   ageList.value = ageListTemp
   listRes.value = arrRes
 
-  const fullWidth = window.innerWidth >= 768 ? window.innerWidth : window.innerWidth >= 500 ? 500 : window.innerWidth
+  const fullWidth = window.innerWidth >= 600 ? window.innerWidth : window.innerWidth >= 500 ? 500 : window.innerWidth
 
   pageWidth.value = fullWidth
   // 总盒子的宽度
@@ -375,7 +378,7 @@ const isMoveFu = (index, num) => {
       color: #fff;
       border: 1px solid transparent;
 
-      @media screen and (min-width: 768px) {
+      @media screen and (min-width: 600px) {
         width: 40px;
         height: 40px;
         font-size: 20px;
@@ -386,7 +389,7 @@ const isMoveFu = (index, num) => {
       color: #d6cda1;
       border: 1px solid #d6cda1;
       font-size: 18px;
-      @media screen and (min-width: 768px) {
+      @media screen and (min-width: 600px) {
         font-size: 22px;
       }
     }
@@ -444,7 +447,7 @@ const isMoveFu = (index, num) => {
       .ROW2_1 {
         z-index: 2;
         left: -38%;
-        @media screen and (min-width: 768px) {
+        @media screen and (min-width: 600px) {
           left: -26%;
         }
       }
@@ -457,7 +460,7 @@ const isMoveFu = (index, num) => {
       }
       .ROW3_1 {
         left: -36%;
-        @media screen and (min-width: 768px) {
+        @media screen and (min-width: 600px) {
           left: -27%;
         }
       }
@@ -478,7 +481,7 @@ const isMoveFu = (index, num) => {
       }
       .ROW4_1 {
         left: -35%;
-        @media screen and (min-width: 768px) {
+        @media screen and (min-width: 600px) {
           left: -26%;
         }
       }
@@ -496,20 +499,20 @@ const isMoveFu = (index, num) => {
       }
       .ROW4_5 {
         right: -17%;
-        @media screen and (min-width: 768px) {
+        @media screen and (min-width: 600px) {
           right: -13%;
         }
       }
       .ROW5_1 {
         left: -45%;
-        @media screen and (min-width: 768px) {
+        @media screen and (min-width: 600px) {
           left: -29%;
         }
       }
       .ROW5_2 {
         z-index: 2;
         left: -17%;
-        @media screen and (min-width: 768px) {
+        @media screen and (min-width: 600px) {
           left: -9%;
         }
       }
@@ -525,7 +528,7 @@ const isMoveFu = (index, num) => {
       }
       .ROW5_5 {
         right: -6%;
-        @media screen and (min-width: 768px) {
+        @media screen and (min-width: 600px) {
           right: -4%;
         }
       }
@@ -639,9 +642,14 @@ const isMoveFu = (index, num) => {
           letter-spacing: 0.2em;
         }
       }
-
+      /deep/.inner-wrap > p > span{
+        opacity: 0;
+      }
       /deep/.title-wrap > h1 > img {
-        width: 100%;
+          width: calc(
+            30 / v-bind("windowSizeWhenDesignForRef") *
+              v-bind("windowSizeInCssForRef")
+          );
         margin-bottom: 3%;
         // position: relative;
       }
@@ -702,7 +710,7 @@ const isMoveFu = (index, num) => {
     .ROWtxt {
       padding-top: 15%;
       padding-right: 40%;
-      @media screen and (min-width: 768px) {
+      @media screen and (min-width: 600px) {
         padding-right: 19%;
       }
     }
@@ -710,7 +718,7 @@ const isMoveFu = (index, num) => {
   .ROW2 {
     .ROWtxt {
       padding-right: 24%;
-      @media screen and (min-width: 768px) {
+      @media screen and (min-width: 600px) {
         padding-right: 9%;
       }
     }
@@ -718,7 +726,7 @@ const isMoveFu = (index, num) => {
   .ROW3 {
     .ROWtxt {
       padding-right: 30%;
-      @media screen and (min-width: 768px) {
+      @media screen and (min-width: 600px) {
         padding-right: 8%;
       }
     }
@@ -726,7 +734,7 @@ const isMoveFu = (index, num) => {
   .ROWW19 {
     .ROWtxt {
       padding-top: 87%;
-      @media screen and (min-width: 768px) {
+      @media screen and (min-width: 600px) {
         padding-top: 53%;
       }
     }
@@ -746,7 +754,7 @@ const isMoveFu = (index, num) => {
     transition: opacity 0.5s;
     pointer-events: none;
     font-family: KingHwa_OldSong;
-    @media screen and (min-width: 768px) {
+    @media screen and (min-width: 600px) {
       font-size: 20px;
     }
   }
@@ -769,7 +777,7 @@ const isMoveFu = (index, num) => {
     align-items: center;
     opacity: 1;
     transition: opacity 1s;
-    @media screen and (min-width: 768px) {
+    @media screen and (min-width: 600px) {
       font-size: 22px;
     }
 
@@ -834,7 +842,8 @@ const isMoveFu = (index, num) => {
     );
     position: absolute;
     bottom: 0;
-    z-index: 2;
+    z-index: 20;
+    pointer-events: none;
   }
 }
 </style>

src/views/ShuangGouSheSeDetail.vue

@@ -116,14 +116,18 @@ const curPercentage = computed(() => {
     class="home"
   >
     <div class="title">
-      <span
+      <div
         :style="{ color: curIndex == 1 ? 'rgba(71, 71, 71, 0.15)' : '' }"
         @click="curIndex = 0"
-      >双钩</span>
-      <span
+      >
+        双钩
+      </div>
+      <div
         :style="{ color: curIndex == 0 ? 'rgba(71, 71, 71, 0.15)' : '' }"
         @click="curIndex = 1"
-      >设色</span>
+      >
+        设色
+      </div>
       <img
         src="@/assets/images/icon_video_active.png"
         class="icon-video"
@@ -299,7 +303,7 @@ const curPercentage = computed(() => {
       48 / v-bind("windowSizeWhenDesignForRef") *
         v-bind("windowSizeInCssForRef")
     );
-    writing-mode: vertical-rl;
+    writing-mode: vertical-rl !important;
     font-family: "KingHwa_OldSong";
     position: absolute;
     right: 13%;
@@ -425,7 +429,7 @@ const curPercentage = computed(() => {
     height: 30vh;
     width: 50%;
     text-indent: 2em;
-    @media screen and (min-width: 768px) {
+    @media screen and (min-width: 600px) {
       bottom: 9vh !important;
     }
   }

src/views/StartupView.vue

@@ -53,7 +53,7 @@
         v-show="isShowVideo"
         ref="videoEl"
         class="transition-video"
-        src="@/assets/videos/startup.mp4"
+        :src="videoData"
         playsinline
         webkit-playsinline="true"
         x5-video-player-type="h5"
@@ -83,6 +83,8 @@ const store = useStore()
 
 const $env = inject('$env')
 
+const innerWidth = ref(window.innerWidth)
+
 const {
   windowSizeInCssForRef,
   windowSizeWhenDesignForRef,
@@ -114,6 +116,28 @@ function onClickStart() {
 function onVideoEnd() {
   store.dispatch('recordShownStartup')
 }
+
+// 将视频资源转换成blob
+const videoData = ref()
+const initVideoSrc = () => {
+  let xhr = new XMLHttpRequest()
+  /*通过get请求获取项目中的mp4文件流，因为axios修改responseType稍微有点麻烦，所以干脆写原生xhr请求了 */
+  xhr.open('GET', require(`@/assets/videos/startup${windowWidth >= 600 ? '-768' : ''}.mp4`), true)
+  //设置请求结果类型为blob
+  xhr.responseType = 'blob'
+  //回调
+  xhr.onload = function(e) {
+    if (this.status == 200) {
+      //创建blob对象，并把值赋给video的src
+      videoData.value = URL.createObjectURL(this.response)
+    }
+  }
+  xhr.send()
+}
+
+onMounted(() => {
+  initVideoSrc()
+})
 </script>
 
 <style lang="less" scoped>
@@ -168,11 +192,15 @@ function onVideoEnd() {
   }
 
   >video.transition-video{
+    width: 100%;
+    height: 100%;
     position: absolute;
     left: 50%;
     top: 0;
     height: 100%;
     transform: translateX(-50%);
+    object-fit: cover !important;
+    object-position: top !important;
   }
 
   // @keyframes spin {