瀏覽代碼

样式修改

黄琪勇 8 月之前
父節點
當前提交
5769546fb8

+ 8 - 0
src/page-instrument/evaluat-model/earphone/index.module.less

@@ -2,6 +2,14 @@
     position: relative;
     width: 600px;
     height: 229px;
+    &.ipadEarphoneBox{
+        width: 540px;
+        height: 206px;
+        .earphoneBtn{
+            width: 120px;
+            height: 35px;
+        }
+    }
     .earphoneBg {
         position: absolute;
         left: 50%;

+ 5 - 1
src/page-instrument/evaluat-model/earphone/index.tsx

@@ -4,6 +4,7 @@ import noEarphone from "../icons/no_erji.png";
 import youxianEarphone from "../icons/youxian_erji.png";
 import lanyaEarphone from "../icons/lanya_erji.png";
 import earphoneBtn from "../icons/confirm.png"
+import { browser } from "/src/utils";
 
 export default defineComponent({
 	name: "earphone",
@@ -15,8 +16,11 @@ export default defineComponent({
 		},
 	},	
 	setup(props, { emit }) {
+		// 资源类型
+		const browserInfo = browser();
+		const isPad =  navigator?.userAgent?.includes("UAWEIVRD-W09") || browserInfo?.iPad || browserInfo.isTablet;
 		return () => (
-			<div class={styles.earphoneBox}>
+			<div class={[styles.earphoneBox, isPad && styles.ipadEarphoneBox]}>
 				<img class={styles.earphoneBg} src={props.earphoneType === "有线耳机" ? youxianEarphone : props.earphoneType === "蓝牙耳机" ? lanyaEarphone : noEarphone} />
 				<img class={styles.earphoneBtn} src={earphoneBtn} onClick={() => emit("close")} />
 			</div>

+ 3 - 0
src/page-instrument/evaluat-model/evaluat-result/index.module.less

@@ -134,6 +134,9 @@
                 &>span {
                     margin: -2px 4px 0;
                 }
+                &.huaWeiLevel{
+                    padding-top: 3px;
+                }
             }
         }
 

+ 2 - 1
src/page-instrument/evaluat-model/evaluat-result/index.tsx

@@ -93,6 +93,7 @@ export default defineComponent({
       return tipContent
     })
 
+    const isHuaWeiPad = navigator?.userAgent?.includes("UAWEIVRD-W09") ? true : false
     onMounted(() => {
       if (!evaluatingData.isErrorState) {
         handleAddRecord();
@@ -128,7 +129,7 @@ export default defineComponent({
                   <div class={[styles.scoreSection, "evaluting-result-1"]}>
                     <div class={styles.num}>{evaluatingData.resultData.score}</div>
                     <div class={styles.score}>分</div>
-                    <div class={styles.level}>
+                    <div class={[styles.level, isHuaWeiPad && styles.huaWeiLevel]}>
                       <div>{level[evaluatingData.resultData.heardLevel]}</div>
                       <span>|</span>
                       <div>速度{evaluatingData.resultData.speed || state.speed}</div>

+ 8 - 0
src/page-instrument/evaluat-model/index.module.less

@@ -133,6 +133,14 @@
     position: relative;
     width: 600px;
     height: 229px;
+    &.ipadEarphoneBox{
+        width: 540px;
+        height: 206px;
+        .earphoneBtn{
+            width: 120px;
+            height: 35px;
+        }
+    }
     .earphoneBg {
         position: absolute;
         left: 50%;

+ 3 - 2
src/page-instrument/evaluat-model/index.tsx

@@ -532,7 +532,8 @@ export default defineComponent({
 			clearTimeout(checkErjiTimer);
       checkErjiTimer = null;
 		});
-
+    // 资源类型
+    const isPad =  navigator?.userAgent?.includes("UAWEIVRD-W09") || browserInfo?.iPad || browserInfo.isTablet;
     return () => (
       <div>
         <div class={styles.operatingBtn}>
@@ -586,7 +587,7 @@ export default defineComponent({
           evaluatingData.isBeginMask && <div class={styles.beginMask}></div>
         }
         <Popup teleport="body" closeOnClickOverlay={false} class={["popup-custom", "van-scale"]} transition="van-scale" v-model:show={tipErjiPopShow.value}>
-          <div class={styles.earphoneBox}>
+          <div class={[styles.earphoneBox, isPad && styles.ipadEarphoneBox]}>
             <img class={styles.earphoneBg} src={tipErjiBg} />
             <img class={styles.earphoneBtn} src={tipErjiBtn} onClick={() => {
               evaluatingData.tipErjiShow = false;

+ 2 - 2
src/page-instrument/header-top/index.module.less

@@ -241,7 +241,7 @@
                 font-weight: 600;
                 font-size: 12px;
                 color: #673207;
-                line-height: 1;
+                line-height: 16px;
             }
         }
     }
@@ -338,7 +338,7 @@
     width: 100vw;
     height: 100vh;
     background: url(./image/bg.png) no-repeat;
-    background-size: 100% 100%;
+    background-size: cover;
     transition: all .3s;
     &.hidden{
         opacity: 0;

二進制
src/page-instrument/view-detail/images/bg2_left_zs.png


+ 2 - 4
src/page-instrument/view-detail/index.module.less

@@ -252,15 +252,13 @@
 
 .bg2Left {
     width: 52px;
-    height: 125px;
     position: absolute;
-    left: -1px;
+    left: 0px;
     top: 0;
 }
 .bg2Right {
     width: 52px;
-    height: 125px;
     position: absolute;
-    right: -1px;
+    right: 0;
     top: 0;
 }

+ 12 - 0
src/page-instrument/view-evaluat-report/component/share-top/index.module.less

@@ -334,6 +334,18 @@
     &.padPlayerBox{
         width: 418px;
         height: 248px;
+        .audioBox{
+            .audioBga1{
+                width: 112px;
+            }
+            .audioBga2{
+                width: 206px;
+            }
+            .audioVisualizer{
+                width: 288px;
+                height: 50px;
+            }
+        }
     }
     .videoBox {
         width: 100%;

+ 2 - 5
src/page-instrument/view-evaluat-report/component/share-top/index.tsx

@@ -82,10 +82,7 @@ export default defineComponent({
     });
 
     // 资源类型
-    const isPad = computed(() => {
-      return navigator?.userAgent?.includes("UAWEIVRD-W09") || browserInfo?.iPad;
-    });
-
+    const isPad =  navigator?.userAgent?.includes("UAWEIVRD-W09") || browserInfo?.iPad || browserInfo.isTablet;
 		const openAudioAndVideo = () => {
 			shareData.show = true;
 			if (shareData.isInitPlyr) return;
@@ -107,7 +104,7 @@ export default defineComponent({
 						shareData._plrl.on('pause', () => {
 							pauseVisualDraw()
 						});
-					}, 300); // 弹窗动画是0.25秒 这里用定时器 确保canvas 能获取到宽高
+					}, 500); // 弹窗动画是0.25秒 这里用定时器 确保canvas 能获取到宽高
 				}
 				shareData.isInitPlyr = true;
 			});

+ 2 - 4
src/page-instrument/view-evaluat-report/index.module.less

@@ -190,15 +190,13 @@
 
 .bg2Left {
   width: 52px;
-  height: 125px;
   position: absolute;
-  left: -1px;
+  left: 0;
   top: 0;
 }
 .bg2Right {
   width: 52px;
-  height: 125px;
   position: absolute;
-  right: -1px;
+  right: 0;
   top: 0;
 }

+ 32 - 0
src/utils/index.ts

@@ -4,6 +4,33 @@ import { getQuery } from "./queryString";
 /** 获取浏览器信息 */
 export const browser = () => {
 	const u = navigator.userAgent;
+	const isAndroid = /(?:Android)/.test(u);
+ 	const isFireFox = /(?:Firefox)/.test(u);
+	function isIpadFun() {
+		const ua = window.navigator.userAgent;
+		let IsIPad = false;
+		if (/ipad/i.test(ua)) {
+			IsIPad = true;
+		}
+		// iPad from IOS13
+		const macApp = ua.match(/Macintosh/i) != null;
+		if (macApp) {
+			// need to distinguish between Macbook and iPad
+			const canvas = document.createElement('canvas');
+			if (canvas != null) {
+			const context: any =
+				canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
+			if (context) {
+				const info = context.getExtension('WEBGL_debug_renderer_info');
+				if (info) {
+				const renderer = context.getParameter(info.UNMASKED_RENDERER_WEBGL);
+				if (renderer.indexOf('Apple') != -1) IsIPad = true;
+				}
+			}
+			}
+		}
+		return IsIPad;
+	}	
 	return {
 		trident: u.indexOf("Trident") > -1, //IE内核
 		presto: u.indexOf("Presto") > -1, //opera内核
@@ -24,6 +51,11 @@ export const browser = () => {
 		isStudent: u.indexOf("ORCHESTRASTUDENT") > -1 || u.includes("COLEXIUSTUDENT"),
 		isSchool: u.indexOf("ORCHESTRASCHOOL") > -1,
 		iPad: u.indexOf("iPad") > -1, //是否iPad
+		isTablet:
+		/(?:iPad|PlayBook)/.test(u) ||
+		(isAndroid && !/(?:Mobile)/.test(u)) ||
+		(isFireFox && /(?:Tablet)/.test(u)) ||
+		isIpadFun(),
 		webApp: u.indexOf("Safari") == -1, //是否web应该程序,没有头部与底部
 		weixin: u.indexOf("MicroMessenger") > -1, //是否微信 (2015-01-22新增)
 		alipay: u.indexOf("AlipayClient") > -1, //是否支付宝