From c5b6f6cb5bba7268aaa2496bbf21bf2965277f8b Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期五, 01 七月 2022 13:29:03 +0800
Subject: [PATCH] 2022-07-01

---
 src/tabviews/zshare/mutilform/mkCheckCard/index.scss |  172 +++++++++++++++++++++++++++++++++++++++++++--------------
 1 files changed, 129 insertions(+), 43 deletions(-)

diff --git a/src/tabviews/zshare/mutilform/mkCheckCard/index.scss b/src/tabviews/zshare/mutilform/mkCheckCard/index.scss
index 1fb51b0..da3fdc4 100644
--- a/src/tabviews/zshare/mutilform/mkCheckCard/index.scss
+++ b/src/tabviews/zshare/mutilform/mkCheckCard/index.scss
@@ -1,64 +1,46 @@
 .check-card-form-box {
   margin-top: 5px;
-  // margin-bottom: -10px;
   .card-cell {
     position: relative;
     border: 1px solid #bcbcbc;
+    background: #ffffff;
     border-radius: 4px;
     padding: 6px;
-    margin-bottom: 12px;
+    margin-bottom: 2px;
     line-height: 1.5;
     transition: all 0.3s;
     cursor: pointer;
-    span {
-      display: block;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      position: relative;
-      z-index: 1;
-    }
+    
     .bg-mask {
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
-      opacity: 0.5;
+      opacity: 0.6;
       border-radius: 4px;
       background-color: transparent;
       transition: opacity 0.3s;
     }
   }
-  .card-cell:not(.bg-control).active {
-    border-color: #1890ff;
-    background: #1890ff;
+
+  .content-line {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    position: relative;
+    z-index: 1;
+    line-height: 1.5;
+  }
+  .card-cell.mk-background.active {
+    border-color: var(--mk-sys-color);
+    background: var(--mk-sys-color);
     span {
       color: #ffffff!important;
     }
   }
-  .card-cell.bg-control.active {
-    .bg-mask {
-      opacity: 1;
-    }
-  }
-  .card-pic-cell {
-    position: relative;
-    border: 1px solid #bcbcbc;
-    border-radius: 4px;
-    background-size: cover;
-    background-position: center;
-    margin-bottom: 12px;
-    line-height: 1.5;
-    cursor: pointer;
-    transition: all 0.3s;
-  }
-  .card-pic-cell.active {
-    border-color: #1890ff;
-    box-shadow: 0px 0px 4px #1890ff;
-  }
-
-  .card-cell:not(.bg-control).active::after {
+  .card-cell.mk-background.active::after {
     content: ' ';
     position: absolute;
     display: table;
@@ -71,7 +53,92 @@
     height: 12px;
     transform: rotate(45deg) scale(1) translate(-50%, -50%);
   }
+  .card-cell.mk-font.active {
+    border-color: var(--mk-sys-color);
+    span {
+      color: var(--mk-sys-color)!important;
+    }
+  }
+  .card-cell.mk-custom {
+    border-color: transparent;
+  }
+  .card-cell.mk-custom.active {
+    .bg-mask {
+      opacity: 1;
+    }
+  }
+  .card-pic-cell {
+    position: relative;
+    border: 1px solid #e8e8e8;
+    border-radius: 4px;
+    background-size: cover;
+    background-position: center;
+    margin-bottom: 2px;
+    line-height: 1.5;
+    cursor: pointer;
+    transition: all 0.3s;
+
+    .content-wrap {
+      position: absolute;
+      top: 6px;
+      left: 6px;
+      right: 6px;
+      bottom: 6px;
+      .content-center {
+        position: relative;
+        top: 50%;
+        transform: translate(0px, -50%);
+      }
+    }
+    .anticon-check {
+      display: none;
+      position: absolute;
+      color: #ffffff;
+      border-radius: 20px;
+      padding: 3px;
+      width: 18px;
+      height: 18px;
+      font-size: 12px;
+      right: -2px;
+      bottom: -2px;
+      background: var(--mk-sys-color);
+    }
+  }
+
+  .card-color-cell {
+    position: relative;
+    border: 1px solid transparent;
+    border-radius: 4px;
+    padding: 6px;
+    margin-bottom: 2px;
+    min-height: 35px;
+    cursor: pointer;
+
+    .anticon-check {
+      display: none;
+      position: absolute;
+      color: #ffffff;
+      border-radius: 20px;
+      padding: 3px;
+      width: 18px;
+      height: 18px;
+      font-size: 12px;
+      right: 0px;
+      bottom: 0px;
+      background: var(--mk-sys-color);
+    }
+  }
+
+  .card-pic-cell.active, .card-color-cell.active {
+    .anticon-check {
+      display: inline-block;
+    }
+  }
+
   .card-cell.disabled {
+    cursor: not-allowed;
+  }
+  .card-color-cell.disabled {
     cursor: not-allowed;
   }
   .card-pic-cell.disabled {
@@ -79,22 +146,41 @@
   }
 }
 
+.check-card-form-box.mutile-line {
+  .card-cell {
+    margin-bottom: 12px;
+  }
+  .card-pic-cell {
+    margin-bottom: 12px;
+  }
+  .card-color-cell {
+    margin-bottom: 12px;
+  }
+}
+
 .check-card-form-box:not(.readonly) {
-  .card-cell:not(.bg-control):not(.disabled):hover {
-    border-color: #1890ff;
-    background: #1890ff;
+  .card-cell.mk-background:not(.disabled):hover {
+    border-color: var(--mk-sys-color);
+    background: var(--mk-sys-color);
     span {
       color: #ffffff!important;
     }
   }
-  .card-cell.bg-control:not(.active):not(.disabled):hover {
+  .card-cell.mk-font:not(.disabled):hover {
+    border-color: var(--mk-sys-color);
+    span {
+      color: var(--mk-sys-color)!important;
+    }
+  }
+
+  .card-cell.mk-custom:not(.active):not(.disabled):hover {
     .bg-mask {
-      opacity: 0.7;
+      opacity: 0.8;
     }
   }
   .card-pic-cell:not(.disabled):hover {
-    border-color: #1890ff;
-    box-shadow: 0px 0px 4px #1890ff;
+    border-color: var(--mk-sys-color);
+    box-shadow: 0px 0px 4px var(--mk-sys-color);
   }
 }
 .check-card-form-box.readonly {

--
Gitblit v1.8.0