feat: 报告修改

src/page-instrument/report-new/index.module.less

@@ -114,6 +114,81 @@
 }
 
 .scoreTable {
-    padding-top: calc(var(--header-height) + 54px);
+    padding-top: calc(var(--header-height) + 30px);
     background: #ECFDFC;
+    .stContent {
+        position: relative;
+        &::before {
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 47px;
+            height: 200px;
+            background: linear-gradient( 90deg, rgba(212,244,237,0) 0%, #D4F5EE 100%);
+        }
+        border: 1px solid rgba(120, 211, 205, 0.58);
+        display: flex;
+        flex-wrap: nowrap;
+        overflow-x: scroll;
+        -ms-overflow-style: none;
+        scrollbar-width: none;
+        &::-webkit-scrollbar {
+            display: none;
+        }
+    }
+    .stMeasure {
+        width: 160px;
+        height: 20px;
+        border-bottom: 1px solid rgba(120, 211, 205, 0.25);
+        border-right: 1px solid rgba(120, 211, 205, 0.58);
+        display: flex;
+        align-items: center;
+        padding: 0 5px;
+        overflow: hidden;
+        .mBeat {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            background: #C9E4EB;
+            width: 16px;
+            transform: scale(0.72);
+            font-size: 12px;
+            margin-right: 2px;
+            span {
+                font-size: 12px;
+                color: #007C74;
+                &:first-child {
+                    border-bottom: 1px solid #007C74;
+                }
+            }
+        }
+        .mNumber {
+            font-size: 12px;
+            color: #007C74;
+        }
+    }
+    .stBeat {
+        display: flex;
+        align-items: center;
+        border-bottom: 1px solid rgba(120, 211, 205, 0.25);
+        &:last-child {
+            border-bottom: none;
+        }
+        li {
+            width: 40px;
+            height: 15px;
+            border-right: 1px dashed;
+            /* 利用 repeating-linear-gradient 自定义 dash 长度 */
+            border-image: repeating-linear-gradient(
+                180deg,
+                rgba(120, 211, 205, 0.3) 0,
+                rgba(120, 211, 205, 0.3) 4px,
+                transparent 4px,
+                transparent 6px
+            ) 1;
+            &:last-child {
+                //border-right: none;
+            }
+        }
+    }
 }

src/page-instrument/report-new/index.tsx

@@ -62,11 +62,35 @@ export default defineComponent({
         </div>
 
         <div class={styles.scoreTable}>
-            <table>
-                <tr>
-                    <td></td>
-                </tr>
-            </table>
+            <div class={styles.stContent}>
+                {
+                    [1,1,1,1,1,1,1,1,1,1].map((item: any, mIndex: number) => 
+                        <>
+                            <div>
+                                <div class={styles.stMeasure}>
+                                    <p class={styles.mBeat}>
+                                        <span>4</span>
+                                        <span>4</span>
+                                    </p>
+                                    <div class={styles.mNumber}>{mIndex+1}</div>
+                                </div>   
+                                {
+                                    [1,1,1,1,1,1,1,1,1,1].map((gItem: any) => 
+                                        <ul class={styles.stBeat}>
+                                            <li></li>
+                                            <li></li>
+                                            <li></li>
+                                            <li></li>
+                                        </ul>                                 
+                                    )
+                                }
+                            </div>
+                        </>
+                    )
+                }
+
+            </div>
+
         </div>
 
       </div>