@cloudbase/weda-ui 2.0.11 → 2.0.27

package/src/web/components/graphicCard/index.css

@@ -81,8 +81,8 @@
 }
 
 .weda-graphic-card .weda-graphic-card__col .weda-graphic-card__title {
-  font-size: 16px;
-  line-height: 24px;
+  font-size: 1.1428em;
+  line-height: 1.71428em;
   text-align: center;
   color: rgba(0, 0, 0, 0.9);
   display: -webkit-box;
@@ -93,8 +93,8 @@
 }
 
 .weda-graphic-card .weda-graphic-card__col .weda-graphic-card__desc {
-  font-size: 14px;
-  line-height: 22px;
+  font-size: 1em;
+  line-height: 1.5714em;
   color: rgba(0, 0, 0, 0.4);
   text-align: center;
   display: -webkit-box;
@@ -105,8 +105,8 @@
 }
 
 .weda-graphic-card .weda-graphic-card__col .weda-graphic-card__btn--text {
-  font-size: 14px;
-  line-height: 22px;
+  font-size: 1em;
+  line-height: 1.5714em;
   color: #0052d9;
   margin-right: 8px;
 }

package/src/web/components/image/image.tsx

@@ -109,7 +109,7 @@ export function ImageInner({
               const windowHeight = window.innerHeight;
               const windowWidth = window.innerWidth;
               let ratio = realWidth.current / realHeight.current;
-              if(Number.isNaN(ratio)) {
+              if (Number.isNaN(ratio)) {
                 ratio = 1;
               }
               const height = windowWidth / ratio;
@@ -184,4 +184,4 @@ export function ImageInner({
       </ConfigProvider>
     );
   }
-}
+}

package/src/web/components/image/index.css

@@ -42,11 +42,13 @@
 }
 .weda-image:not([src]):before,
 .weda-image-error::before {
-    content: '';
-    background: #f5f5f5 url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIiBmaWxsPSJub25lIj4KICA8cGF0aCBkPSJNMjUuMzIgMTYuMzU5N0MyNi4wNzY0IDE2LjM1OTcgMjYuODI1NCAxNi41MDg3IDI3LjUyNDMgMTYuNzk4MUMyOC4yMjMxIDE3LjA4NzYgMjguODU4MSAxNy41MTE5IDI5LjM5MjkgMTguMDQ2OEMyOS45Mjc4IDE4LjU4MTYgMzAuMzUyMSAxOS4yMTY2IDMwLjY0MTYgMTkuOTE1NEMzMC45MzEgMjAuNjE0MyAzMS4wOCAyMS4zNjMzIDMxLjA4IDIyLjExOTdDMzEuMDggMjIuODc2MSAzMC45MzEgMjMuNjI1MSAzMC42NDE2IDI0LjMyMzlDMzAuMzUyMSAyNS4wMjI4IDI5LjkyNzggMjUuNjU3OCAyOS4zOTI5IDI2LjE5MjZDMjguODU4MSAyNi43Mjc1IDI4LjIyMzEgMjcuMTUxOCAyNy41MjQzIDI3LjQ0MTJDMjYuODI1NCAyNy43MzA3IDI2LjA3NjQgMjcuODc5NyAyNS4zMiAyNy44Nzk3QzIzLjc5MjQgMjcuODc5NyAyMi4zMjczIDI3LjI3MjggMjEuMjQ3MSAyNi4xOTI2QzIwLjE2NjkgMjUuMTEyNCAxOS41NiAyMy42NDczIDE5LjU2IDIyLjExOTdDMTkuNTYgMjAuNTkyIDIwLjE2NjkgMTkuMTI3IDIxLjI0NzEgMTguMDQ2OEMyMi4zMjczIDE2Ljk2NjUgMjMuNzkyNCAxNi4zNTk3IDI1LjMyIDE2LjM1OTdaTTI4IDMuNTU5NjlWMTQuODc2OEMyNy4xNzc3IDE0LjU4NjYgMjYuMTkyIDE0LjQzODggMjUuMzIgMTQuNDM5N0MyNC4wMzEgMTQuNDM5NyAyMi44MTU3IDE0Ljc1NzEgMjEuNzQ4OCAxNS4zMTg0TDIwLjc5NTIgMTMuMTU5N0wxNi4wMjU5IDIwLjAyNzVMOC40NDU3NiAxNi40NDFMMy41NiAyMy4zOTk3SDE3Ljc0NjJDMTcuOTg2NyAyNC44MjkgMTguNjI4MiAyNi4xNjA2IDE5LjU5NTggMjcuMjM5N0gxVjMuNTU5NjlIMjhaTTI1Ljk2IDI0LjAzOTdIMjQuNjhWMjUuMzE5N0gyNS45NlYyNC4wMzk3Wk0yNS45NiAxOC45MTk3SDI0LjY4VjIzLjM5OTdIMjUuOTZWMTguOTE5N1pNNi4xMiAxMC41OTk3QzYuMTIgMTEuOTk4MSA3LjE5OTA0IDEzLjEwODUgOC42MDc2OCAxMy4xNTg0QzEwLjAyMDggMTMuMjA3NyAxMS4yNCAxMi4wNDggMTEuMjQgMTAuNTk5N0MxMS4yNCA5LjI0NjA5IDEwLjA2NDMgOC4wODU3NyA4Ljc1MjMyIDguMDQwOTdDNy4yOTU2OCA3Ljk5MTY5IDYuMTIgOS4xNTEzNyA2LjEyIDEwLjU5OTdaIiBmaWxsPSIjQkNDNEQwIj48L3BhdGg+Cjwvc3ZnPgo=') no-repeat center / 50% 50%;
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
+  content: '';
+  background: #f5f5f5
+    url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIiBmaWxsPSJub25lIj4KICA8cGF0aCBkPSJNMjUuMzIgMTYuMzU5N0MyNi4wNzY0IDE2LjM1OTcgMjYuODI1NCAxNi41MDg3IDI3LjUyNDMgMTYuNzk4MUMyOC4yMjMxIDE3LjA4NzYgMjguODU4MSAxNy41MTE5IDI5LjM5MjkgMTguMDQ2OEMyOS45Mjc4IDE4LjU4MTYgMzAuMzUyMSAxOS4yMTY2IDMwLjY0MTYgMTkuOTE1NEMzMC45MzEgMjAuNjE0MyAzMS4wOCAyMS4zNjMzIDMxLjA4IDIyLjExOTdDMzEuMDggMjIuODc2MSAzMC45MzEgMjMuNjI1MSAzMC42NDE2IDI0LjMyMzlDMzAuMzUyMSAyNS4wMjI4IDI5LjkyNzggMjUuNjU3OCAyOS4zOTI5IDI2LjE5MjZDMjguODU4MSAyNi43Mjc1IDI4LjIyMzEgMjcuMTUxOCAyNy41MjQzIDI3LjQ0MTJDMjYuODI1NCAyNy43MzA3IDI2LjA3NjQgMjcuODc5NyAyNS4zMiAyNy44Nzk3QzIzLjc5MjQgMjcuODc5NyAyMi4zMjczIDI3LjI3MjggMjEuMjQ3MSAyNi4xOTI2QzIwLjE2NjkgMjUuMTEyNCAxOS41NiAyMy42NDczIDE5LjU2IDIyLjExOTdDMTkuNTYgMjAuNTkyIDIwLjE2NjkgMTkuMTI3IDIxLjI0NzEgMTguMDQ2OEMyMi4zMjczIDE2Ljk2NjUgMjMuNzkyNCAxNi4zNTk3IDI1LjMyIDE2LjM1OTdaTTI4IDMuNTU5NjlWMTQuODc2OEMyNy4xNzc3IDE0LjU4NjYgMjYuMTkyIDE0LjQzODggMjUuMzIgMTQuNDM5N0MyNC4wMzEgMTQuNDM5NyAyMi44MTU3IDE0Ljc1NzEgMjEuNzQ4OCAxNS4zMTg0TDIwLjc5NTIgMTMuMTU5N0wxNi4wMjU5IDIwLjAyNzVMOC40NDU3NiAxNi40NDFMMy41NiAyMy4zOTk3SDE3Ljc0NjJDMTcuOTg2NyAyNC44MjkgMTguNjI4MiAyNi4xNjA2IDE5LjU5NTggMjcuMjM5N0gxVjMuNTU5NjlIMjhaTTI1Ljk2IDI0LjAzOTdIMjQuNjhWMjUuMzE5N0gyNS45NlYyNC4wMzk3Wk0yNS45NiAxOC45MTk3SDI0LjY4VjIzLjM5OTdIMjUuOTZWMTguOTE5N1pNNi4xMiAxMC41OTk3QzYuMTIgMTEuOTk4MSA3LjE5OTA0IDEzLjEwODUgOC42MDc2OCAxMy4xNTg0QzEwLjAyMDggMTMuMjA3NyAxMS4yNCAxMi4wNDggMTEuMjQgMTAuNTk5N0MxMS4yNCA5LjI0NjA5IDEwLjA2NDMgOC4wODU3NyA4Ljc1MjMyIDguMDQwOTdDNy4yOTU2OCA3Ljk5MTY5IDYuMTIgOS4xNTEzNyA2LjEyIDEwLjU5OTdaIiBmaWxsPSIjQkNDNEQwIj48L3BhdGg+Cjwvc3ZnPgo=')
+    no-repeat center / 50% 50%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
 }

package/src/web/components/image/index.tsx

@@ -6,15 +6,31 @@ import './index.css';
 import { ImageInner } from './image';
 import type { CommonPropsType } from '../../types';
 
-
-const defaultSrc = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAiIGhlaWdodD0iODAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48Y2lyY2xlIGN4PSI0MCIgY3k9IjQwIiByPSI0MCIgZmlsbD0iI0VCRUZGNSIvPjxwYXRoIGZpbGw9IiNGRkYiIGQ9Ik0yMCA1NlYyNGg0MHYzMnoiLz48cGF0aCBmaWxsPSIjQzFDQ0REIiBkPSJNMjYgMzdoMjh2MkgyNnptMCA3aDIwdjJIMjZ6bS02LTIwaDQwdjdIMjB6Ii8+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNDggNDQpIj48Y2lyY2xlIGZpbGw9IiNGRkYiIGN4PSIxMCIgY3k9IjEwIiByPSI3Ii8+PHBhdGggZD0iTTEwIDJhOCA4IDAgMSAxIDAgMTYgOCA4IDAgMCAxIDAtMTZ6bTEgMTBIOXYyaDJ2LTJ6bTAtNkg5djVoMlY2eiIgZmlsbD0iIzAwNkVGRiIvPjwvZz48L2c+PC9zdmc+';
-type TMode = 'scaleToFill' | 'aspectFit' | 'aspectFill' | 'widthFix' | 'heightFix' | 'top' | 'bottom' | 'center' | 'left' | 'right' | 'top left' | 'top right' | 'bottom left' | 'bottom right';
-export interface PropsType extends CommonPropsType, Pick<HTMLImageElement, 'src'|'alt'> {
-  mode: TMode,
-  lazyLoad: boolean,
-  maskClosable: boolean,
-  imgPreview: boolean,
-  fit: React.CSSProperties['objectFit']
+const defaultSrc =
+  'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAiIGhlaWdodD0iODAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48Y2lyY2xlIGN4PSI0MCIgY3k9IjQwIiByPSI0MCIgZmlsbD0iI0VCRUZGNSIvPjxwYXRoIGZpbGw9IiNGRkYiIGQ9Ik0yMCA1NlYyNGg0MHYzMnoiLz48cGF0aCBmaWxsPSIjQzFDQ0REIiBkPSJNMjYgMzdoMjh2MkgyNnptMCA3aDIwdjJIMjZ6bS02LTIwaDQwdjdIMjB6Ii8+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNDggNDQpIj48Y2lyY2xlIGZpbGw9IiNGRkYiIGN4PSIxMCIgY3k9IjEwIiByPSI3Ii8+PHBhdGggZD0iTTEwIDJhOCA4IDAgMSAxIDAgMTYgOCA4IDAgMCAxIDAtMTZ6bTEgMTBIOXYyaDJ2LTJ6bTAtNkg5djVoMlY2eiIgZmlsbD0iIzAwNkVGRiIvPjwvZz48L2c+PC9zdmc+';
+type TMode =
+  | 'scaleToFill'
+  | 'aspectFit'
+  | 'aspectFill'
+  | 'widthFix'
+  | 'heightFix'
+  | 'top'
+  | 'bottom'
+  | 'center'
+  | 'left'
+  | 'right'
+  | 'top left'
+  | 'top right'
+  | 'bottom left'
+  | 'bottom right';
+export interface PropsType
+  extends CommonPropsType,
+    Pick<HTMLImageElement, 'src' | 'alt'> {
+  mode: TMode;
+  lazyLoad: boolean;
+  maskClosable: boolean;
+  imgPreview: boolean;
+  fit: React.CSSProperties['objectFit'];
 }
 
 export default function Image({
@@ -75,8 +91,9 @@ export default function Image({
   ) : null;
 }
 
-
-function getObjectFitByWxImageMode(mode: TMode): React.CSSProperties['objectFit'] {
+function getObjectFitByWxImageMode(
+  mode: TMode
+): React.CSSProperties['objectFit'] {
   const array = [
     {
       mode: 'scaleToFill',

package/src/web/components/index.js

@@ -47,6 +47,7 @@ export { default as Link } from './link';
 export { default as Drawer } from './drawer';
 export { default as UploaderView } from './uploaderView';
 export { default as UploaderFileView } from './uploaderFileView';
+export { default as WedaVideo } from './wedaVideo/index';
 
 export { default as Picker } from './picker/picker';
 export { default as DatePicker } from './picker/datePicker';

package/src/web/components/link/index.tsx

@@ -7,17 +7,17 @@ export interface PropsType extends CommonPropsType {
   /**
    * 内容
    */
-   content?: string;
-   /**
-    * 链接地址
-    */
-   url?: string;
-   /**
-    * 参数
-    */
-   params?: {key: string, value: string}[];
-   contentSlot?: React.ReactNode;
-   isOpenInNewWindow: boolean;
+  content?: string;
+  /**
+   * 链接地址
+   */
+  url?: string;
+  /**
+   * 参数
+   */
+  params?: { key: string; value: string }[];
+  contentSlot?: React.ReactNode;
+  isOpenInNewWindow: boolean;
 }
 
 // 所有绝对地址直接交由浏览器，新开窗口交由浏览器
@@ -110,7 +110,7 @@ export default function Link({
           }
         }
       }}
-      rel='noopener noreferrer'
+      rel="noopener noreferrer"
     >
       {contentSlot && <div className="weda-link-slot">{contentSlot}</div>}
       {content}

package/src/web/components/listView/index.css

@@ -22,8 +22,8 @@
 .weda-list-view__containor .weda-list-view__more .weda-list-view__more-text {
   padding-top: 10px;
   padding-bottom: 14px;
-  font-size: 12px;
-  line-height: 22px;
+  font-size: 0.85714em;
+  line-height: 0.85714em;
   color: rgba(0, 0, 0, 0.4);
   text-align: center;
   box-sizing: border-box;
@@ -81,8 +81,8 @@
 .weda-list-view__containor
   .weda-list-view__more
   .weda-list-view__pagination-next {
-  font-size: 12px;
-  line-height: 24px;
+  font-size: 0.85714em;
+  line-height: 1.71428em;
   color: rgba(0, 0, 0, 0.4);
   padding: 0 24px;
   cursor: pointer;
@@ -105,8 +105,8 @@
   .weda-list-view__pagination-next::after {
   position: absolute;
   content: '';
-  width: 24px;
-  height: 24px;
+  width: 1.71428em;
+  height: 1.71428em;
   top: 10px;
   opacity: 0.2;
   background-image: url(arrow-right-line.svg);
@@ -137,7 +137,7 @@
 .weda-list-view__containor
   .weda-list-view__more
   .weda-list-view__pagination-text {
-  font-size: 12px;
-  line-height: 22px;
+  font-size: 0.85714em;
+  line-height: 1.71428em;
   color: rgba(0, 0, 0, 0.4);
 }

package/src/web/components/lottery/index.css

@@ -8,7 +8,7 @@
   position: relative;
   width: 100%;
   height: 100%;
-  background: #FF465C;
+  background: #ff465c;
   border: 1px solid rgba(255, 255, 255, 0.6);
   box-shadow: inset 0px 0px 4px rgba(255, 255, 255, 0.5);
   border-radius: 10px;
@@ -56,15 +56,15 @@
   height: 9px;
   box-shadow: 0px 0px 4px rgba(255, 255, 255, 0.3);
   border-radius: 50%;
-  background: #FFFFFF;
+  background: #ffffff;
 }
 
 .weda-lottery .weda-lottery__dot .weda-lottery__dot-item:nth-child(odd) {
-  background: #FFEE52;
+  background: #ffee52;
 }
 
 .weda-lottery .weda-lottery__dot .weda-lottery__dot-item:nth-child(even) {
-  background: #FFFFFF
+  background: #ffffff;
 }
 
 .weda-lottery .weda-lottery__dot-horizontal .weda-lottery__dot-item {
@@ -118,7 +118,7 @@
   position: relative;
   width: 100%;
   box-sizing: border-box;
-  background: linear-gradient(180deg, #DD0D00 0%, #D80027 100%);
+  background: linear-gradient(180deg, #dd0d00 0%, #d80027 100%);
   border: 1px solid rgba(255, 255, 255, 0.25);
   box-shadow: inset 0px 0px 4px rgba(255, 255, 255, 0.5);
   border-radius: 10px;
@@ -137,23 +137,23 @@
 
 .weda-lottery .weda-lottery__inner .weda-lottery__turntable-item {
   position: absolute;
-  width: calc((100% - 32px)/ 3);
-  height: calc((100% - 32px)/ 3);
+  width: calc((100% - 32px) / 3);
+  height: calc((100% - 32px) / 3);
   font-size: 0;
   text-align: center;
-  background: #FFF8EE;
-  box-shadow: inset 0px -2px 0px #FFDDBD;
+  background: #fff8ee;
+  box-shadow: inset 0px -2px 0px #ffddbd;
   border-radius: 8px;
 }
 
 .weda-lottery .weda-lottery__inner .weda-lottery__turntable-item.is-actived {
-  background: #FFF8EE;
-  box-shadow: 0px 0px 6px #FFFFFF;
+  background: #fff8ee;
+  box-shadow: 0px 0px 6px #ffffff;
 }
 
 .weda-lottery .weda-lottery__inner .weda-lottery__turntable-item.is-selected {
-  background: #FF6666;
-  box-shadow: inset 0px -2px 0px #FFA4A4;
+  background: #ff6666;
+  box-shadow: inset 0px -2px 0px #ffa4a4;
 }
 
 .weda-lottery .weda-lottery__inner .weda-lottery__turntable-item:first-child {
@@ -163,7 +163,7 @@
 
 .weda-lottery .weda-lottery__inner .weda-lottery__turntable-item:nth-child(2) {
   top: 8px;
-  left: calc((100% - 32px)/ 3 + 16px);
+  left: calc((100% - 32px) / 3 + 16px);
 }
 
 .weda-lottery .weda-lottery__inner .weda-lottery__turntable-item:nth-child(3) {
@@ -172,7 +172,7 @@
 }
 
 .weda-lottery .weda-lottery__inner .weda-lottery__turntable-item:nth-child(4) {
-  top: calc((100% - 32px)/ 3 + 16px);
+  top: calc((100% - 32px) / 3 + 16px);
   right: 8px;
 }
 
@@ -183,7 +183,7 @@
 
 .weda-lottery .weda-lottery__inner .weda-lottery__turntable-item:nth-child(6) {
   bottom: 8px;
-  left: calc((100% - 32px)/ 3 + 16px);
+  left: calc((100% - 32px) / 3 + 16px);
 }
 
 .weda-lottery .weda-lottery__inner .weda-lottery__turntable-item:nth-child(7) {
@@ -192,7 +192,7 @@
 }
 
 .weda-lottery .weda-lottery__inner .weda-lottery__turntable-item:nth-child(8) {
-  bottom: calc((100% - 32px)/ 3 + 16px);
+  bottom: calc((100% - 32px) / 3 + 16px);
   left: 8px;
 }
 
@@ -210,8 +210,11 @@
   align-items: center;
 }
 
-.weda-lottery .weda-lottery__inner .weda-lottery__turntable-item.is-actived .weda-lottery__turntable-cell {
-  border-color: #FFE05F;
+.weda-lottery
+  .weda-lottery__inner
+  .weda-lottery__turntable-item.is-actived
+  .weda-lottery__turntable-cell {
+  border-color: #ffe05f;
 }
 
 .weda-lottery .weda-lottery__inner .weda-lottery__turntable-cell-image {
@@ -234,32 +237,35 @@
   font-size: 12px;
   line-height: 17px;
   text-align: center;
-  color: #BA0000;
+  color: #ba0000;
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
   width: 100%;
 }
 
-.weda-lottery .weda-lottery__inner .weda-lottery__turntable-item.is-selected .weda-lottery__turntable-cell-desc {
-  color: #FFFFFF;
+.weda-lottery
+  .weda-lottery__inner
+  .weda-lottery__turntable-item.is-selected
+  .weda-lottery__turntable-cell-desc {
+  color: #ffffff;
 }
 
 .weda-lottery .weda-lottery__turntable-btn {
   z-index: 2;
   position: absolute;
-  width: calc((100% - 32px)/ 3);
-  height: calc((100% - 32px)/ 3);
-  top: calc((100% - 32px)/ 3 + 16px);
-  left: calc((100% - 32px)/ 3 + 16px);
-  background: linear-gradient(180deg, #FFEE81 0%, #FFD646 100%);
-  box-shadow: inset 0px -2px 0px #FF7A00;
+  width: calc((100% - 32px) / 3);
+  height: calc((100% - 32px) / 3);
+  top: calc((100% - 32px) / 3 + 16px);
+  left: calc((100% - 32px) / 3 + 16px);
+  background: linear-gradient(180deg, #ffee81 0%, #ffd646 100%);
+  box-shadow: inset 0px -2px 0px #ff7a00;
   border-radius: 50%;
 }
 
 .weda-lottery .weda-lottery__turntable-btn.is-actived {
-  background: linear-gradient(180deg, #FFEE81 0%, #FFD646 100%);
-  box-shadow: inset 0px 2px 0px #FFFFFF;
+  background: linear-gradient(180deg, #ffee81 0%, #ffd646 100%);
+  box-shadow: inset 0px 2px 0px #ffffff;
 }
 
 .weda-lottery .weda-lottery__btn-inner {
@@ -271,7 +277,7 @@
 .weda-lottery .weda-lottery__btn {
   width: 100%;
   height: 100%;
-  background: linear-gradient(180deg, #FF922D 0%, #FF3C76 100%);
+  background: linear-gradient(180deg, #ff922d 0%, #ff3c76 100%);
   box-shadow: inset 0px 0px 8px rgba(234, 27, 53, 0.5);
   border-radius: 50%;
   display: flex;
@@ -280,7 +286,7 @@
 }
 
 .weda-lottery .weda-lottery__turntable-btn.is-actived .weda-lottery__btn {
-  background: linear-gradient(180deg, #FF922D 0%, #FF3C76 100%);
+  background: linear-gradient(180deg, #ff922d 0%, #ff3c76 100%);
   box-shadow: inset 0px 0px 8px rgba(234, 27, 53, 0.5);
 }
 
@@ -291,16 +297,16 @@
   box-sizing: border-box;
   display: flex;
   align-items: center;
-  text-decoration: none
+  text-decoration: none;
 }
 
-.weda-lottery .weda-lottery__btn-image  .weda-lottery__btn-text {
+.weda-lottery .weda-lottery__btn-image .weda-lottery__btn-text {
   font-weight: 600;
   font-size: 18px;
   line-height: 22px;
   text-align: center;
-  color: #FFFFFF;
-  text-shadow: 0px 0.5px 0px #E42B27;
+  color: #ffffff;
+  text-shadow: 0px 0.5px 0px #e42b27;
   max-height: 100%;
   display: -webkit-box;
   overflow: hidden;
@@ -324,4 +330,4 @@
 .weda-lottery-mobile .weda-lottery__content {
   width: 100%;
 }
-/* mobile style end */
+/* mobile style end */

package/src/web/components/lottery/index.tsx

@@ -3,7 +3,7 @@ import React, { useState, useEffect } from 'react';
 import { usePlatform } from '../../utils/platform';
 import classNames from '../../utils/classnames';
 import './index.css';
-import { CommonPropsType } from '../../types';
+import type { CommonPropsType } from '../../types';
 import { ConfigProvider } from 'tea-component';
 import LotteryAction from './lotteryUtil';
 
@@ -297,7 +297,7 @@ export default function Lottery({
           <div className={`${CLASS_PREFIX}__wrap`}>
             {dotList.map((dot, index) => {
               return (
-                <>
+                <div key={index}>
                   {dot.single && (
                     <div
                       key={`${dot.direction}-${index}`}
@@ -371,7 +371,7 @@ export default function Lottery({
                       {true && renderDot(dot.direction, dot.list)}
                     </div>
                   )}
-                </>
+                </div>
               );
             })}
             <div

package/src/web/components/modal/index.tsx

@@ -1,16 +1,16 @@
 import * as React from 'react';
 import { Modal, Button, ModalProps, ConfigProvider } from 'tea-component';
-import { unknownFunction } from '../../types';
+import type { unknownFunction } from '../../types';
 import classNames from '../../utils/classnames';
 
 export interface PropTypes extends ModalProps {
-  content: string,
-  customButton: React.ReactNode,
-  customContent: React.ReactNode,
-  isDefaultButton: boolean,
-  emit?: unknownFunction,
-  events: Record<string, unknownFunction>,
-  size: ModalProps['size'],
+  content: string;
+  customButton: React.ReactNode;
+  customContent: React.ReactNode;
+  isDefaultButton: boolean;
+  emit?: unknownFunction;
+  events: Record<string, unknownFunction>;
+  size: ModalProps['size'];
 }
 
 export default function WeDaModal(_props: PropTypes) {
@@ -28,33 +28,33 @@ export default function WeDaModal(_props: PropTypes) {
   } = _props;
 
   return (
-  <ConfigProvider classPrefix="wedatea2td">
-    <Modal
-      size={size}
-      className={classNames('weda-ui', 'lcap-modal', 'container', className)}
-      visible={visible}
-      onClose={() => {
-        emit('close', {});
-      }}
-      {...props}
+    <ConfigProvider classPrefix="wedatea2td">
+      <Modal
+        size={size}
+        className={classNames('weda-ui', 'lcap-modal', 'container', className)}
+        visible={visible}
+        onClose={() => {
+          emit('close', {});
+        }}
+        {...props}
       >
-      <Modal.Body>{content ? content : customContent}</Modal.Body>
-      <Modal.Footer>
-        {isDefaultButton ? (
-          <Button
-          type="primary"
-          onClick={() => {
-            emit('confirm', {});
-            // events.confirm();
-          }}
-          >
-            确定
-          </Button>
-        ) : (
-          customButton
+        <Modal.Body>{content ? content : customContent}</Modal.Body>
+        <Modal.Footer>
+          {isDefaultButton ? (
+            <Button
+              type="primary"
+              onClick={() => {
+                emit('confirm', {});
+                // events.confirm();
+              }}
+            >
+              确定
+            </Button>
+          ) : (
+            customButton
           )}
-      </Modal.Footer>
-    </Modal>
-  </ConfigProvider>
+        </Modal.Footer>
+      </Modal>
+    </ConfigProvider>
   );
 }

package/src/web/components/navLayout/index.css

@@ -156,36 +156,36 @@
 }
 
 .weda-grid-navigation .weda-grid-navigation__col .weda-grid-navigation__icon {
-  width: 56px;
-  height: 56px;
+  width: 4em;
+  height: 4em;
 }
 .weda-grid-navigation
   .weda-grid-navigation__col
   .weda-grid-navigation__fonticon {
-  font-size: 56px;
+  font-size: 4em;
 }
 .weda-grid-navigation
   .weda-grid-navigation__col--small
   .weda-grid-navigation__icon {
-  width: 48px;
-  height: 48px;
+  width: 3.428571em;
+  height: 3.428571em;
 }
 .weda-grid-navigation
   .weda-grid-navigation__col--small
   .weda-grid-navigation__fonticon {
-  font-size: 48px;
+  font-size: 3.428571em;
 }
 
 .weda-grid-navigation
   .weda-grid-navigation__col--big
   .weda-grid-navigation__icon {
-  width: 72px;
-  height: 72px;
+  width: 5.14285em;
+  height: 5.14285em;
 }
 .weda-grid-navigation
   .weda-grid-navigation__col--big
   .weda-grid-navigation__fonticon {
-  font-size: 72px;
+  font-size: 5.14285em;
 }
 
 .weda-grid-navigation .weda-grid-navigation__img {
@@ -194,7 +194,7 @@
 }
 
 .weda-grid-navigation .weda-grid-navigation__col .weda-grid-navigation__text {
-  font-size: 16px;
+  font-size: 1.142857em;
   /* line-height: 24px; */
   text-align: center;
   color: rgba(0, 0, 0, 0.6);
@@ -215,15 +215,15 @@
 .weda-grid-navigation
   .weda-grid-navigation__col--small
   .weda-grid-navigation__text {
-  font-size: 14px;
-  line-height: 22px;
+  font-size: 1em;
+  line-height: 1.5714em;
 }
 
 .weda-grid-navigation
   .weda-grid-navigation__col--big
   .weda-grid-navigation__text {
-  font-size: 20px;
-  line-height: 28px;
+  font-size: 1.42857em;
+  line-height: 2em;
 }
 
 /* h5 style */
@@ -280,36 +280,36 @@
 .weda-grid-navigation-mobile
   .weda-grid-navigation__col
   .weda-grid-navigation__icon {
-  width: 36px;
-  height: 36px;
+  width: 2.57142em;
+  height: 2.57142em;
 }
 .weda-grid-navigation-mobile
   .weda-grid-navigation__col
   .weda-grid-navigation__fonticon {
-  font-size: 36px;
+  font-size: 2.57142em;
 }
 
 .weda-grid-navigation-mobile
   .weda-grid-navigation__col--small
   .weda-grid-navigation__icon {
-  width: 32px;
-  height: 32px;
+  width: 2.285714em;
+  height: 2.285714em;
 }
 .weda-grid-navigation-mobile
   .weda-grid-navigation__col--small
   .weda-grid-navigation__fonticon {
-  font-size: 32px;
+  font-size: 2.285714em;
 }
 .weda-grid-navigation-mobile
   .weda-grid-navigation__col--big
   .weda-grid-navigation__fonticon {
-  font-size: 40px;
+  font-size: 2.857142em;
 }
 .weda-grid-navigation-mobile
   .weda-grid-navigation__col--big
   .weda-grid-navigation__icon {
-  width: 40px;
-  height: 40px;
+  width: 2.85714em;
+  height: 2.85714em;
 }
 .weda-grid-navigation-mobile
   .weda-grid-navigation__col
@@ -320,8 +320,8 @@
 .weda-grid-navigation-mobile
   .weda-grid-navigation__col--small
   .weda-grid-navigation__text {
-  font-size: 12px;
-  line-height: 20px;
+  font-size: 0.85714em;
+  line-height: 1.42857em;
   margin-top: 4px;
 }