缓存展示

src/subpages/colexiu/popups/productJson/index.module.less

@@ -1,25 +1,38 @@
 .wrap{
     position: fixed;
     left: 0;
-    top: 50%;
-    transform: translateY(-50%);
+    bottom: 0;
     z-index: 1000;
+    .wrapItem{
+        & > span{
+            margin-right: 2px;
+        }
+    }
     :global{
         .van-cell-group{
-            background-color: rgba(255, 255, 255, .8);
+            display: flex;
+            background-color: rgba(0, 0, 0, .5);
         }
         .van-cell{
-            padding: 10Px 16Px;
+            width: auto;
+            padding: 4px 8px;
             line-height: 14Px;
             background-color: transparent;
+            color: #fff;
         }
     }
-}
-.wrapBottom{
-    background-color: rgba(255, 255, 255, .8);
-    :global{
-        .van-radio__icon{
-            // font-size: 14Px;
+    .clearItem{
+        :global{
+            .van-cell__title{
+                color: #fffc00;
+            }
+        }
+    }
+    .saveItem{
+        :global{
+            .van-cell__title{
+                color: #62ff62;
+            }
         }
     }
 }

src/subpages/colexiu/popups/productJson/index.tsx

@@ -14,8 +14,8 @@ export default defineComponent({
     const autoProduct = (val: any) => {
       if (search.modeType === 'json') return
       // console.log(musicData.rended, '渲染是否结束')
-      if (!musicData.svg){
-        musicData.svg = document.getElementById('osmdSvgPage1')?.outerHTML || '';
+      if (!musicData.svg) {
+        musicData.svg = document.getElementById('osmdSvgPage1')?.outerHTML || ''
       }
       if (!musicData.svg) {
         return
@@ -168,32 +168,33 @@ export default defineComponent({
         {search.modeType === 'json' && (
           <div class={styles.wrap}>
             <CellGroup>
-              <Cell
-                center
-                title="五线谱"
-                vSlots={{
-                  'right-icon': () =>
-                    detailState.activeDetail?.musicSvg ? <Icon name="checked" color="rgba(103,201,176,1)" /> : '',
-                }}
-              ></Cell>
-              <Cell
-                center
-                title="首调"
-                vSlots={{
-                  'right-icon': () =>
-                    detailState.activeDetail?.musicJianSvg ? <Icon name="checked" color="rgba(103,201,176,1)" /> : '',
-                }}
-              ></Cell>
-              <Cell
-                center
-                title="固定调"
-                vSlots={{
-                  'right-icon': () =>
-                    detailState.activeDetail?.musicFirstSvg ? <Icon name="checked" color="rgba(103,201,176,1)" /> : '',
+              <Cell center>
+                {{
+                  title: () => (
+                    <div class={styles.wrapItem}>
+                      <span>已缓存的曲谱类型: </span>
+                      <span>
+                        五线谱&nbsp;
+                        {!!detailState.activeDetail?.musicSvg && <Icon name="checked" color="rgba(103,201,176,1)" />}
+                      </span>
+                      <span>
+                        首调&nbsp;
+                        {!!detailState.activeDetail?.musicJianSvg && (
+                          <Icon name="checked" color="rgba(103,201,176,1)" />
+                        )}
+                      </span>
+                      <span>
+                        固定调&nbsp;
+                        {!!detailState.activeDetail?.musicFirstSvg && (
+                          <Icon name="checked" color="rgba(103,201,176,1)" />
+                        )}
+                      </span>
+                    </div>
+                  ),
                 }}
-              ></Cell>
-              <Cell title="清除缓存数据" clickable onClick={handleRemove}></Cell>
-              <Cell title="保存缓存数据" clickable onClick={handleSave}></Cell>
+              </Cell>
+              <Cell class={styles.clearItem} title="清除缓存数据" clickable onClick={handleRemove}></Cell>
+              <Cell class={styles.saveItem} title="保存缓存数据" clickable onClick={handleSave}></Cell>
             </CellGroup>
           </div>
         )}