消息

TUIKit/components/common/Dialog/style/color.scss

@@ -0,0 +1,43 @@
+.dialog {
+  background: rgba(0, 0, 0, 0.6);
+
+  &-main {
+    background: #FFF;
+
+    &-header {
+      font-weight: 500;
+      color: #333;
+    }
+
+    &-title {
+      font-family: PingFangSC-Medium;
+      font-weight: 500;
+      color: #333;
+    }
+
+    &-back {
+      background: none;
+    }
+
+    &-content {
+      font-weight: 400;
+      color: #333;
+    }
+  }
+}
+
+.btn {
+  font-weight: 400;
+  color: #FFF;
+  letter-spacing: 0;
+
+  &-cancel {
+    border: 1px solid #ddd;
+    color: #666;
+  }
+
+  &-default {
+    background: #006EFF;
+    border: 1px solid #006EFF;
+  }
+}

TUIKit/components/common/Dialog/style/dialog.scss

@@ -0,0 +1,4 @@
+@import '../../../../assets/styles/common';
+@import "./color";
+@import "./web";
+@import "./h5";

TUIKit/components/common/Dialog/style/h5.scss

@@ -0,0 +1,56 @@
+.dialog-h5 {
+  height: 100%;
+  top: 0;
+  align-items: inherit;
+
+  .dialog {
+    &-main {
+      border-radius: 0;
+      padding: 0;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      width: 100%;
+      min-height: 80px;
+      min-width: 120px;
+
+      &-content {
+        flex: 1;
+        min-width: 0;
+        min-height: 0;
+        overflow: hidden;
+        text-align: center;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin-bottom: 0;
+
+        &-uniapp {
+          padding: 40px 0;
+        }
+      }
+
+      &-footer {
+        border-top: 1px solid #DDD;
+
+        .btn {
+          flex: 1;
+          margin: 0;
+          background: none;
+          border-right: 1px solid #DDD;
+
+          &-default {
+            color: #FF584C;
+            border: none;
+          }
+        }
+      }
+    }
+  }
+}
+
+.center {
+  align-items: center;
+  padding: 20px;
+  box-sizing: border-box;
+}

TUIKit/components/common/Dialog/style/web.scss

@@ -0,0 +1,61 @@
+.dialog {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  z-index: 6;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  &-main {
+    min-width: 368px;
+    border-radius: 10px;
+    padding: 20px 30px;
+
+    &-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      font-size: 16px;
+      line-height: 30px;
+    }
+
+    &-title {
+      font-size: 16px;
+      line-height: 30px;
+    }
+
+    &-content {
+      font-size: 14px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin-bottom: 20px;
+    }
+
+    &-footer {
+      display: flex;
+      justify-content: flex-end;
+    }
+  }
+}
+
+.btn {
+  padding: 8px 20px;
+  margin: 0 6px;
+  border-radius: 4px;
+  border: none;
+  font-size: 14px;
+  text-align: center;
+  line-height: 20px;
+
+  &:disabled {
+    opacity: 0.3;
+  }
+
+  &:last-child {
+    margin-right: 0;
+  }
+}