邀请页面

src/pages/invite/style.less

@@ -0,0 +1,147 @@
+
+@import '../../global.less';
+
+.container {
+  height: 100%;
+  background: linear-gradient(to bottom, @orange-one, @orange-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: @orange-one;
+    }
+  }
+}
+
+.body {
+  flex-grow: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.title2 {
+  display: block;
+  text-align: center;
+  color: white;
+  font-weight: bold;
+}
+
+.card {
+  @height: 450px;
+  @topHeight: @height * 0.4;
+  @ripSize: 32px;
+  @halfRip: @ripSize / 2;
+  @bottomHeight: @height - @topHeight - @ripSize;
+  @shadowAttr: 1px 1px 8px rgba(0, 0, 0, .2);
+
+  position: relative;
+  margin: 20px 30px;
+  padding-bottom: 20px;
+  height: @height;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  padding: 20px 32px ;
+
+  &::before, &::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    background-color: #fff;
+    width: 100%;
+    z-index: 1;
+    box-shadow: @shadowAttr;
+  }
+
+  &::before {
+    top: 0;
+    height: @topHeight;
+    border-radius: 4px 4px 0 0;
+  }
+
+  &::after {
+    bottom: 0;
+    height: @bottomHeight;
+    border-radius: 0 0 4px 4px;
+  }
+
+  :global {
+    .rip {
+      position: absolute;
+      top: @topHeight;
+      left: @halfRip;
+      right: @halfRip;
+      height: @ripSize;
+      background-color: #fff;
+      z-index: 2;
+
+      &::before, &::after {
+        content: '';
+        position: absolute;
+        width: @ripSize / sqrt(2);
+        height: @ripSize / sqrt(2);
+        top: 50%;
+        border: @halfRip solid transparent;
+        border-radius: 100%;
+        border-top-color: #fff;
+        border-right-color: #fff;
+        box-sizing: content-box;
+        box-shadow: inset -2px 2px 2px rgba(0, 0, 0, 0.1);
+      }
+
+      &::before {
+        left: -(sqrt(2) / 4 + 1) * @ripSize;
+        transform: translateY(-50%) rotate(45deg);
+      }
+
+      &::after {
+        right: -(sqrt(2) / 4 + 1) * @ripSize;
+        transform: translateY(-50%) rotate(225deg);
+      }
+    }
+
+    .content {
+      z-index: 3;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+
+      .title3 {
+        color: @orange-two;
+        font-weight: lighter;
+      }
+
+      .invite-code {
+        font-weight: bold;
+        font-size: 1.2rem;
+        margin: 20px 0;
+      }
+
+      .href-container {
+        margin: 20px 0;
+        word-break: break-all;
+        display: flex;
+        align-items: center;
+        padding: 0 20px;
+      }
+
+      .anticon {
+        font-size: 1.8rem;
+        margin-left: 8px;
+        color: @orange-one;
+      }
+
+      .ant-btn {
+        align-self: stretch;
+      }
+    }
+  }
+}