fix: 修复样式

yuque · Oct 26, 2023 · ae501f3 · ae501f3
1 parent 7d65720
commit ae501f3
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 5 deletions.
diff --git a/src/pages/inject/AreaSelector/app.module.less b/src/pages/inject/AreaSelector/app.module.less
@@ -15,7 +15,7 @@
   border: 2px solid @primary-color;
 }
 
-.mask {
+.maskWrapper {
   display: flex;
   box-sizing: border-box;
   align-items: center;
@@ -27,11 +27,19 @@
   font-size: 14px;
   transform: translateX(-50%);
   background-color: rgba(0, 0, 0, 0.65);
+  box-shadow: 0 4px 8px -4px rgba(0, 0, 0, 0.13), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 12px 24px 16px rgba(0, 0, 0, 0.04);
   z-index: @z-index-max + 1;
   border-radius: 10px;
   text-align: center;
   pointer-events: none; // 遮罩层不需要响应鼠标事件
   color: @white;
+  font-family: @font-family;
+  white-space: nowrap;
+
+  .icon {
+    margin-right: 8px;
+    font-size: @font-size-lg;
+  }
 }
 
 .confirm {
@@ -45,8 +53,7 @@
   cursor: pointer;
   display: inline-block;
   color: @white;
-  font-size: 12px;
-  font-weight: 400;
+  font-size: @font-size;
   padding: 0 8px;
   text-align: center;
   touch-action: manipulation;
@@ -56,5 +63,6 @@
   text-decoration: none;
   pointer-events: all;
   transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+  font-family: @font-family;
 }
 
diff --git a/src/pages/inject/AreaSelector/app.tsx b/src/pages/inject/AreaSelector/app.tsx
@@ -1,5 +1,6 @@
 import React, { useEffect, useRef, useCallback, useState } from 'react';
 import classnames from 'classnames';
+import { InfoCircleOutlined } from '@ant-design/icons';
 import { useForceUpdate } from '@/hooks/useForceUpdate';
 import { transformDOM } from '@/core/transform-dom';
 import { __i18n } from '@/isomorphic/i18n';
@@ -127,8 +128,9 @@ function App(props: IAppProps) {
 
   return (
     <>
-      <div className={classnames(styles.mask, 'select-inner')}>
-        {__i18n('单击区域以选中，再次单击取消选中。ESC 退出， ↲ 完成')}
+      <div className={classnames(styles.maskWrapper, 'select-inner')}>
+        <InfoCircleOutlined className={styles.icon} />
+        {__i18n('单击区域选中，再次点击取消选中，ESC 退出，↩ 完成。')}
         {!!targetRectListRef.current.length && (
           <div
             className={classnames(styles.confirm, 'select-confirm')}