提取

src/pages/draw/style.less

@@ -0,0 +1,117 @@
+
+@import '../../global.less';
+
+.container {
+  height: 100%;
+  background: linear-gradient(to bottom, @blue-one, @blue-two);
+  position: relative;
+  display: flex;
+  flex-direction: column;
+
+  :global {
+    .header {
+      background-color: rgba(255,255,255,0);
+      color: white;
+    }
+
+    .ant-btn-primary {
+      border-width: 0;
+      background-color: @blue-one;
+    }
+  }
+}
+
+.body {
+  flex-grow: 1;
+  overflow: auto;
+}
+
+.none {
+  text-align: center;
+  width: 100%;
+  padding-top: 40%;
+}
+
+.card {
+  background-color: #fff;
+  margin: 10px;
+  padding-bottom: 20px;
+  box-shadow: 1px 1px 8px rgba(0, 0, 0, .2);
+  min-height: 60%;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+}
+
+@pLeft: 48px;
+@pRight: 30px;
+@pTop: 20px;
+
+.btn {
+  margin-left: @pLeft;
+  margin-right: @pRight;
+  margin-top: 40px;
+}
+
+.section {
+  padding-left: @pLeft;
+  padding-right: @pRight;
+  padding-top: @pTop;
+  position: relative;
+
+  &::before {
+    content: '';
+    display: block;
+    position: absolute;
+    @size: 10px;
+    width: @size;
+    height: @size;
+    background-color: @blue-two;
+    border-radius: @size / 2;
+    top: @pTop + @size / 2 + 2px;
+    left: @pLeft / 2 - @size / 2;
+  }
+
+  :global {
+    .app-input {
+      margin: 8px 0;
+    }
+
+    .with-postfix {
+      display: flex;
+      align-items: baseline;
+      justify-content: space-between;
+    }
+
+    .small-info {
+      font-weight: lighter;
+      font-size: 0.8rem;
+    }
+
+    .coin-selection {
+      display: flex;
+      align-items: baseline;
+
+      .ant-select {
+        flex-grow: 1;
+        margin: 0 4px;
+      }
+    }
+
+    .right {
+      text-align: right;
+    }
+  }
+}
+
+.main {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  :global {
+    canvas {
+      margin: 10px 0;
+    }
+  }
+}