缓存UI修改

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

@@ -1,38 +1,48 @@
-.wrap{
-    position: fixed;
-    left: 0;
-    bottom: 0;
-    z-index: 1000;
-    .wrapItem{
-        & > span{
-            margin-right: 2px;
-        }
+.wrap {
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  z-index: 1000;
+  .wrapItem {
+    & > span {
+      margin-right: 2px;
     }
-    :global{
-        .van-cell-group{
-            display: flex;
-            background-color: rgba(0, 0, 0, .5);
-        }
-        .van-cell{
-            width: auto;
-            padding: 4px 8px;
-            line-height: 14Px;
-            background-color: transparent;
-            color: #fff;
-        }
+  }
+  :global {
+    .van-cell-group {
+      display: flex;
+      background-color: rgba(0, 0, 0, 0.5);
+      backdrop-filter: blur(4px);
+      border-radius: 2px;
+      overflow: hidden;
     }
-    .clearItem{
-        :global{
-            .van-cell__title{
-                color: #fffc00;
-            }
-        }
+    .van-cell {
+      width: auto;
+      padding: 4px;
+      line-height: .16rem;
+      background-color: transparent;
+      color: #fff;
     }
-    .saveItem{
-        :global{
-            .van-cell__title{
-                color: #62ff62;
-            }
-        }
+  }
+  .clearItem,
+  .saveItem {
+    &:hover {
+      background-color: #000;
     }
-}
+    border-left: 1px solid #fff;
+  }
+  .clearItem {
+    :global {
+      .van-cell__title {
+        color: #fffc00;
+      }
+    }
+  }
+  .saveItem {
+    :global {
+      .van-cell__title {
+        color: #62ff62;
+      }
+    }
+  }
+}

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

@@ -172,21 +172,29 @@ export default defineComponent({
                 {{
                   title: () => (
                     <div class={styles.wrapItem}>
-                      <span>已缓存的曲谱类型: </span>
+                      <span>缓存状态: </span>
                       <span>
                         五线谱&nbsp;
-                        {!!detailState.activeDetail?.musicSvg && <Icon name="checked" color="rgba(103,201,176,1)" />}
+                        {detailState.activeDetail?.musicSvg ? (
+                          <Icon name="success" color="rgba(103,201,176,1)" />
+                        ) : (
+                          <Icon name="cross" color="#ff6868" />
+                        )}
                       </span>
                       <span>
                         首调&nbsp;
-                        {!!detailState.activeDetail?.musicJianSvg && (
-                          <Icon name="checked" color="rgba(103,201,176,1)" />
+                        {detailState.activeDetail?.musicJianSvg ? (
+                          <Icon name="success" color="rgba(103,201,176,1)" />
+                        ) : (
+                          <Icon name="cross" color="#ff6868" />
                         )}
                       </span>
                       <span>
                         固定调&nbsp;
-                        {!!detailState.activeDetail?.musicFirstSvg && (
+                        {detailState.activeDetail?.musicFirstSvg ? (
                           <Icon name="checked" color="rgba(103,201,176,1)" />
+                        ) : (
+                          <Icon name="cross" color="#ff6868" />
                         )}
                       </span>
                     </div>