feat: first commit

src/components/loading-dialog/index.less

@@ -0,0 +1,52 @@
+@import '@/styles/common.less';
+@import '@/styles/variables.less';
+
+.loading-dialog {
+
+  &__dialog-content {
+    .flex-column();
+
+    @keyframes spin {
+      from {
+        transform: rotate(0deg);
+      }
+
+      to {
+        transform: rotate(360deg);
+      }
+    }
+
+    &__icon-wrapper {
+      position: relative;
+      width: 188px;
+      height: 188px;
+    }
+
+    &__icon-bg {
+      width: 100%;
+      height: 100%;
+      padding: 8px;
+      background: conic-gradient(#6D3DF5, 30%, #ECE5FF);
+      border-radius: 50%;
+      animation: spin 1.5s linear infinite reverse;
+    }
+
+    &__icon {
+      width: 188px;
+      height: 188px;
+      border-radius: 50%;
+      background: #F2F2F2;
+      position: absolute;
+      top: 8px;
+      left: 8px;
+    }
+
+    &__title {
+      font-size: 36px;
+      font-weight: 500;
+      line-height: 58px;
+      margin-top: 24px;
+    }
+  }
+
+}

src/components/loading-dialog/index.tsx

@@ -0,0 +1,35 @@
+import { Image } from '@tarojs/components';
+
+import { Dialog } from '@taroify/core';
+
+import './index.less';
+
+interface IProps {
+  open: boolean;
+  text: string;
+}
+
+const PREFIX = 'loading-dialog';
+
+function LoadingDialog(props: IProps) {
+  const { open, text } = props;
+  return (
+    <Dialog className={PREFIX} open={open}>
+      <Dialog.Content>
+        <div className={`${PREFIX}__dialog-content`}>
+          <div className={`${PREFIX}__dialog-content__icon-wrapper`}>
+            <div className={`${PREFIX}__dialog-content__icon-bg`} />
+            <Image
+              mode="aspectFit"
+              className={`${PREFIX}__dialog-content__icon`}
+              src={require('@/statics/svg/certification-tips-icon.svg')}
+            />
+          </div>
+          <div className={`${PREFIX}__dialog-content__title`}>{text}</div>
+        </div>
+      </Dialog.Content>
+    </Dialog>
+  );
+}
+
+export default LoadingDialog;