消息

TUIKit/components/TUIGroup/manage-group/style/color.scss

@@ -0,0 +1,64 @@
+.manage {
+  background: #FFF;
+  box-shadow: 0 1px 10px 0 rgba(2, 16, 43, 0.15);
+
+  &-header {
+    border-bottom: 1px solid #E8E8E9;
+
+    .manage-header-content {
+      font-family: PingFangSC-Medium;
+      font-weight: 500;
+      color: #000;
+    }
+  }
+
+  .main {
+    .footer {
+      .list-item {
+        font-weight: 400;
+        color: #dc2113;
+        border-bottom: 1px solid #E8E8E9;
+      }
+    }
+  }
+}
+
+.input {
+  border: 1px solid #E8E8E9;
+  font-weight: 400;
+  color: #000;
+  opacity: 0.6;
+}
+
+.avatar {
+  background: #F4F5F9;
+  color: #000;
+}
+
+.space-top {
+  border-top: 10px solid #F4F5F9;
+}
+
+.btn {
+  background: #3370FF;
+  border: 0 solid #2F80ED;
+  color: #FFF;
+
+  &-cancel {
+    background: #FFF;
+    border: 1px solid #DDD;
+    color: #828282;
+  }
+}
+
+.slider {
+  &-box {
+    background: #E1E1E3;
+  }
+
+  &-block {
+    background: #FFF;
+    border: 0 solid rgba(0, 0, 0, 0.85);
+    box-shadow: 0 2px 4px 0 #D1D1D1;
+  }
+}

TUIKit/components/TUIGroup/manage-group/style/h5.scss

@@ -0,0 +1,3 @@
+.deleted-dialog {
+  padding: 20%;
+}

TUIKit/components/TUIGroup/manage-group/style/index.scss

@@ -0,0 +1,39 @@
+@import '../../../../assets/styles/common';
+@import './color';
+@import './web';
+@import './h5';
+
+
+.icon-close {
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+  position: relative;
+  border-radius: 50%;
+}
+
+.icon-close::before,
+.icon-close::after {
+  content: "";
+  position: absolute;
+  background-color: #8F959E;
+  height: 16px;
+  width: 2px;
+  top: 50%;
+  left: 50%;
+  margin-top: -8px;
+  margin-left: -1px;
+}
+
+.icon-close::before {
+  transform: rotate(45deg);
+}
+
+.icon-close::after {
+  transform: rotate(-45deg);
+}
+
+.tab-icon {
+  position: absolute;
+  left: 20px;
+}

TUIKit/components/TUIGroup/manage-group/style/web.scss

@@ -0,0 +1,243 @@
+.btn {
+  padding: 4px 28px;
+  font-size: 12px;
+  line-height: 24px;
+  border-radius: 4px;
+}
+
+.list {
+  padding: 0 20px;
+  display: flex;
+  flex-direction: column;
+
+  &-item {
+    padding: 14px 0;
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+  }
+
+  &-between {
+    justify-content: space-between;
+  }
+}
+
+.manage {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+
+  &-header {
+    padding: 10px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    &-content {
+      margin-left: -20px;
+      text-align: center;
+      font-size: 16px;
+      line-height: 30px;
+      font-weight: 500;
+    }
+
+    &-left {
+      display: flex;
+    }
+  }
+
+  .main {
+    .user-info {
+      padding: 0 20px;
+      display: flex;
+      flex-direction: column;
+      font-size: 14px;
+
+      &-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 14px 0;
+
+        &-right {
+          display: flex;
+          align-items: center;
+        }
+      }
+
+      &-list {
+        flex: 1;
+        display: flex;
+        flex-wrap: wrap;
+        padding-bottom: 20px;
+
+        &-item {
+          position: relative;
+          flex: 0 0 36px;
+          display: flex;
+          flex-direction: column;
+          padding-right: 20px;
+
+          &:last-child {
+            padding-right: 0;
+          }
+
+          .more {
+            padding-top: 10px;
+          }
+
+          &-info {
+            text-align: center;
+            max-width: 36px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+        }
+      }
+    }
+
+    .content {
+      padding: 0 20px;
+
+      .list-item {
+        justify-content: space-between;
+
+        .btn {
+          flex: 1;
+        }
+
+        .article {
+          opacity: 0.6;
+          width: 246px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+
+        .end {
+          align-self: flex-end;
+          margin-bottom: 4px;
+        }
+      }
+    }
+
+    .footer {
+      padding: 0 20px;
+
+      .list-item {
+        cursor: pointer;
+        width: 100%;
+        font-size: 14px;
+        padding: 14px 0;
+        justify-content: center;
+
+        &:last-child {
+          border: none;
+        }
+      }
+    }
+  }
+
+  .admin {
+    padding: 20px 0;
+
+    &-content {
+      padding: 20px 20px 12px;
+      display: flex;
+      align-items: center;
+
+      .aside {
+        flex: 1;
+        font-size: 14px;
+
+        .p {
+          font-size: 12px;
+        }
+      }
+    }
+
+    &-list {
+      padding: 0 20px;
+
+      .label {
+        display: inline-block;
+        font-size: 14px;
+        padding-bottom: 8px;
+      }
+    }
+
+    .last {
+      padding-top: 13px;
+      position: relative;
+
+      &::before {
+        position: absolute;
+        content: "";
+        width: calc(100% - 40px);
+        height: 1px;
+        top: 0;
+        left: 0;
+        right: 0;
+        margin: 0 auto;
+      }
+    }
+  }
+}
+
+.input {
+  border-radius: 4px;
+  padding: 4px 16px;
+  font-size: 14px;
+}
+
+.group-id {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  .icon {
+    width: 15px;
+    height: 15px;
+    cursor: pointer;
+  }
+}
+
+.avatar {
+  width: 36px;
+  height: 36px;
+  border-radius: 4px;
+  font-size: 12px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.slider {
+  &-box {
+    display: flex;
+    align-items: center;
+    width: 34px;
+    height: 20px;
+    border-radius: 10px;
+  }
+
+  &-block {
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    border-radius: 8px;
+    margin: 0 2px;
+  }
+}
+
+.space-between {
+  justify-content: space-between;
+}
+
+.del-dialog-title {
+  text-align: center;
+  padding: 20px 0;
+}