From 147e35acedf8278e77f6c04f1ba9977b805e5497 Mon Sep 17 00:00:00 2001
From: lingting <sunlisten.gzm@gmail.com>
Date: Tue, 25 Apr 2023 11:29:06 +0800
Subject: [PATCH] =?UTF-8?q?UI:=20=E8=B0=83=E6=95=B4=E4=BA=8C=E6=AC=A1?=
 =?UTF-8?q?=E9=AA=8C=E8=AF=81=E7=9A=84=E6=A0=B7=E5=BC=8F=E5=AE=9E=E7=8E=B0?=
 =?UTF-8?q?=E5=92=8C=E7=A7=BB=E5=8A=A8=E5=AE=9E=E7=8E=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Captcha/index.css  |  99 ----------------------------
 src/components/Captcha/index.less | 104 ++++++++++++++++++++++++++++++
 src/components/Captcha/index.tsx  |  10 +--
 3 files changed, 109 insertions(+), 104 deletions(-)
 delete mode 100644 src/components/Captcha/index.css
 create mode 100644 src/components/Captcha/index.less

diff --git a/src/components/Captcha/index.css b/src/components/Captcha/index.css
deleted file mode 100644
index 25e7afb..0000000
--- a/src/components/Captcha/index.css
+++ /dev/null
@@ -1,99 +0,0 @@
-.slider {
-  background-color: #fff;
-  width: 278px;
-  height: 285px;
-  z-index: 999;
-  box-sizing: border-box;
-  padding: 9px;
-  border-radius: 6px;
-  box-shadow: 0 0 11px 0 #999;
-}
-
-.slider .content {
-  width: 100%;
-  height: 159px;
-  position: relative;
-}
-
-.bg-img-div {
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  transform: translate(0, 0);
-}
-
-.slider-img-div {
-  height: 100%;
-  position: absolute;
-  transform: translate(0, 0);
-}
-
-.bg-img-div img {
-  width: 100%;
-}
-
-.slider-img-div img {
-  height: 100%;
-}
-
-.slider .slider-move {
-  height: 60px;
-  width: 100%;
-  margin: 11px 0;
-  position: relative;
-}
-
-.slider .bottom {
-  height: 19px;
-  width: 100%;
-}
-
-.refresh-btn, .close-btn, .slider-move-track, .slider-move-btn {
-  background: url("/captcha-tianai.png") no-repeat;
-}
-
-.refresh-btn, .close-btn {
-  display: inline-block;
-}
-
-.slider-move .slider-move-track {
-  line-height: 38px;
-  font-size: 14px;
-  text-align: center;
-  white-space: nowrap;
-  color: #88949d;
-  -moz-user-select: none;
-  -webkit-user-select: none;
-  user-select: none;
-}
-
-.slider {
-  user-select: none;
-}
-
-.slider-move .slider-move-btn {
-  transform: translate(0, 0);
-  background-position: -5px 11.79625%;
-  position: absolute;
-  top: -12px;
-  left: 0;
-  width: 66px;
-  height: 66px;
-}
-
-.slider-move-btn:hover, .close-btn:hover, .refresh-btn:hover {
-  cursor: pointer
-}
-
-.bottom .close-btn {
-  width: 20px;
-  height: 20px;
-  background-position: 0 44.86874%;
-  margin-right: 5px;
-}
-
-.bottom .refresh-btn {
-  width: 20px;
-  height: 20px;
-  background-position: 0 81.38425%;
-}
diff --git a/src/components/Captcha/index.less b/src/components/Captcha/index.less
new file mode 100644
index 0000000..664f866
--- /dev/null
+++ b/src/components/Captcha/index.less
@@ -0,0 +1,104 @@
+@captcha-img-url: '/captcha-tianai.png';
+
+.slider {
+  background-color: #fff;
+  width: 278px;
+  height: 285px;
+  z-index: 999;
+  box-sizing: border-box;
+  padding: 9px;
+  border-radius: 6px;
+  box-shadow: 0 0 11px 0 #999;
+  user-select: none;
+
+  .content {
+    width: 100%;
+    height: 159px;
+    position: relative;
+  }
+
+  .bg-img-div {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    transform: translate3d(0, 0, 0);
+  }
+
+  .slider-img-div {
+    height: 100%;
+    position: absolute;
+    transform: translate3d(0, 0, 0);
+  }
+
+  .bg-img-div img {
+    width: 100%;
+  }
+
+  .slider-img-div img {
+    height: 100%;
+  }
+
+  .refresh-btn,
+  .close-btn,
+  .slider-move-track,
+  .slider-move-btn {
+    background: url(@captcha-img-url) no-repeat;
+  }
+
+  .refresh-btn,
+  .close-btn {
+    display: inline-block;
+  }
+
+  .slider-move {
+    height: 60px;
+    width: 100%;
+    margin: 11px 0;
+    position: relative;
+
+    .slider-move-track {
+      line-height: 38px;
+      font-size: 14px;
+      text-align: center;
+      white-space: nowrap;
+      color: #88949d;
+      -moz-user-select: none;
+      -webkit-user-select: none;
+      user-select: none;
+    }
+
+    .slider-move-btn {
+      transform: translate3d(0, 0, 0);
+      background-position: -5px 11.79625%;
+      position: absolute;
+      top: -12px;
+      left: 0;
+      width: 66px;
+      height: 66px;
+    }
+  }
+
+  .slider-move-btn:hover,
+  .close-btn:hover,
+  .refresh-btn:hover {
+    cursor: pointer;
+  }
+
+  .bottom {
+    height: 19px;
+    width: 100%;
+
+    .close-btn {
+      width: 20px;
+      height: 20px;
+      background-position: 0 44.86874%;
+      margin-right: 5px;
+    }
+
+    .refresh-btn {
+      width: 20px;
+      height: 20px;
+      background-position: 0 81.38425%;
+    }
+  }
+}
diff --git a/src/components/Captcha/index.tsx b/src/components/Captcha/index.tsx
index 5c6c337..0d53727 100644
--- a/src/components/Captcha/index.tsx
+++ b/src/components/Captcha/index.tsx
@@ -3,7 +3,7 @@ import { captchaGet, captchaValid } from '@/services/captcha';
 import I18n from '@/utils/I18nUtils';
 import type { CSSProperties, RefObject } from 'react';
 import React, { Component } from 'react';
-import './index.css';
+import './index.less';
 
 export * from './typings';
 
@@ -43,10 +43,10 @@ const defaultState = {
   trackArr: [],
   moveBtnStyles: {
     backgroundPosition: '-5px 11.79625%',
-    transform: 'translate(0px, 0px)',
+    transform: 'translate3d(0px, 0px, 0)',
   },
   imgDivStyles: {
-    transform: 'translate(0px, 0px)',
+    transform: 'translate3d(0px, 0px, 0)',
   },
   raw: {},
 };
@@ -186,8 +186,8 @@ export default class extends AbstractVerify<State> {
       moveX,
       trackArr,
       movePercent: moveX / (bgImgRef.current?.width || 1),
-      moveBtnStyles: { ...moveBtnStyles, transform: `translate(${moveX}px, 0px)` },
-      imgDivStyles: { transform: `translate(${moveX}px, 0px)` },
+      moveBtnStyles: { ...moveBtnStyles, transform: `translate3d(${moveX}px, 0px, 0)` },
+      imgDivStyles: { transform: `translate3d(${moveX}px, 0px, 0)` },
     });
   }