kiri-ui-package/kiri-ui-package.css

新增拾色器组件

[data-v-7b8372e3]{margin:0;padding:0;box-sizing:border-box}.color-picker-container[data-v-7b8372e3]{display:flex;justify-content:center;align-items:center;min-height:100vh;padding:20px}.main-content[data-v-7b8372e3]{display:flex;align-items:center;justify-content:space-around;width:100%;max-width:800px}.color-display[data-v-7b8372e3]{display:flex;flex-direction:column;align-items:center;width:120px}.color-label[data-v-7b8372e3]{font-size:14px;color:#666;margin-bottom:10px}.color-circle[data-v-7b8372e3]{width:80px;height:80px;border-radius:50%;margin-bottom:10px;border:2px solid #ddd;box-shadow:0 2px 10px #00000026}.color-value[data-v-7b8372e3]{font-size:12px;color:#999;margin-bottom:5px}.color-rgba[data-v-7b8372e3]{font-size:12px;color:#333;text-align:center}.color-wheel-container[data-v-7b8372e3]{position:relative;width:300px;height:300px}.color-wheel[data-v-7b8372e3]{width:100%;height:100%;border-radius:50%;cursor:crosshair;display:block}.color-wheel-center[data-v-7b8372e3]{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40%;height:40%;border-radius:50%;background:#fff;border:5px solid white;box-shadow:inset 0 0 10px #0003}@media (max-width: 768px){.main-content[data-v-7b8372e3]{flex-direction:column}.color-display[data-v-7b8372e3]{margin:10px 0}}[data-v-be40c0b6]{margin:0;padding:0}.drag-verify-container[data-v-be40c0b6]{padding:10px;border-radius:3px;border:1px solid #ccc}.check[data-v-be40c0b6]{background-repeat:no-repeat;background-size:100% 100%;position:relative}.check-content[data-v-be40c0b6]{width:50px;height:50px;background:#00000080;position:absolute}.check-block[data-v-be40c0b6]{width:50px;height:50px;border:1px solid #fff;background-image:inherit;background-repeat:inherit;position:absolute;left:0}.shape-triangle.check-content[data-v-be40c0b6],.shape-triangle.check-block[data-v-be40c0b6]{width:50px;height:50px;clip-path:polygon(50% 0%,100% 100%,0% 100%);background:#00000080}.shape-triangle.check-block[data-v-be40c0b6]{background:inherit;border:1px solid #fff}.shape-pentagon.check-content[data-v-be40c0b6],.shape-pentagon.check-block[data-v-be40c0b6]{width:50px;height:46px;clip-path:polygon(50% 0%,100% 38%,82% 100%,18% 100%,0% 38%)}.shape-hexagon.check-content[data-v-be40c0b6],.shape-hexagon.check-block[data-v-be40c0b6]{width:50px;height:58px;clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%)}.shape-square.check-content[data-v-be40c0b6],.shape-square.check-block[data-v-be40c0b6]{width:50px;height:50px;border-radius:0;clip-path:none}.drag[data-v-be40c0b6]{height:50px;margin-top:10px;background-color:#f8fafe;position:relative;border:1px solid #cccccc9f}.dragBg[data-v-be40c0b6]{position:absolute;background-color:#dae4fd;width:0px;height:100%;display:flex;align-items:center;justify-content:center;z-index:1}.dragBg.success .success-text[data-v-be40c0b6]{opacity:1}.drag-block[data-v-be40c0b6]{width:50px;height:50px;background-color:#4a8cf7;z-index:10;position:absolute;top:0;left:0;cursor:pointer;border-radius:2px;transition:background-color .3s ease;display:flex;align-items:center;justify-content:center}.slider-icon[data-v-be40c0b6]{color:#fff;font-size:20px;font-weight:700}.slider-icon[data-v-be40c0b6]:after{content:"➡";top:0;left:0}.slider-icon.success[data-v-be40c0b6]:after{content:"✔"}.drag-block[data-v-be40c0b6]:active{cursor:grabbing}.check-container[data-v-be40c0b6]{position:relative}.success-mask[data-v-be40c0b6]{position:absolute;top:0;left:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:30}.success-content[data-v-be40c0b6]{text-align:center;color:#fff;padding:20px}.success-info[data-v-be40c0b6]{font-size:14px;margin:5px 0}.drag-tips[data-v-be40c0b6]{display:flex;align-items:center;justify-content:end;width:95%;height:100%;margin:0 auto;font-size:12px;color:#8a8a8a;-webkit-user-select:none;user-select:none;position:absolute;top:0;left:0}.drag-tips.success[data-v-be40c0b6]:after{content:""}.drag-tips[data-v-be40c0b6]:after{content:"请拖动滑块完成验证~  "}