刘海屏 样式兼容性

src/page-instrument/view-detail/index.tsx

@@ -87,6 +87,7 @@ export const musicScoreRef = ref();
 export default defineComponent({
   name: "music-list",
   setup() {
+    const browsInfo = browser();
     const query: any = getQuery();
 
     const detailData = reactive({
@@ -105,7 +106,8 @@ export default defineComponent({
         // console.log("🚀 ~ screenData:", screenData.content);
         const { isSpecialShapedScreen, notchHeight } = screenData.content;
         if (isSpecialShapedScreen) {
-          detailData.paddingLeft = 25 + "px";
+          // 安卓取刘海值
+          detailData.paddingLeft = browsInfo.android ? notchHeight : 26 + "px";
         }
       }
     };
@@ -411,7 +413,6 @@ export default defineComponent({
         }
       }
     );
-    const browsInfo = browser();
     const handleOpenFignerView = () => {
       if (!query.modelType) {
         detailData.orientation = state.fingeringInfo.orientation || 0;

src/page-instrument/view-detail/smoothAnimation/index.ts

@@ -460,7 +460,8 @@ function createSmoothCurvePoints(pointsPos: pointsPosType, tension?: number, clo
  */
 function drawSmoothCurve(context: CanvasRenderingContext2D, pointsPos: pointsPosType, progresspointsPos?: pointsPosType) {
    context.lineWidth = 4
-   context.lineJoin = "round" // 优化锯齿
+   context.lineJoin = 'round';// 优化锯齿
+   context.lineCap = 'round'; // 优化锯齿
    context.strokeStyle = "rgba(255,255,255,0.6)"
    drawLines(context, pointsPos)
    if (progresspointsPos?.length) {