更新群组界面

2020/x-3/biz/css/base-ghh.css

@@ -1551,6 +1551,7 @@ body {
  border-radius: 50%;
}
/*
.calendar-day-table .table-tr .table-td.today .day {
  background-color: rgba(46, 142, 255, 0.1);
}
@@ -1558,6 +1559,7 @@ body {
.calendar-day-table .table-tr .table-td.today .num {
  color: #2E8EFF;
}
*/
.calendar-day-table .table-tr .table-td.sltday .day {
  background-color: #4690FF;
@@ -1626,7 +1628,7 @@ body {
  font-size: 0.18rem;
  font-weight: 500;
  color: rgba(0, 0, 0, .85);
  line-height: .2rem;
  line-height: .22rem;
  background: transparent;
}
@@ -2941,7 +2943,6 @@ body {
  padding: 0 .1rem 0 .08rem;
}
.all-todo-list > ul:not(:empty) {
  padding: .15rem 0;
}
@@ -2959,4 +2960,98 @@ body {
.task-end-time-hot {
  background-color: rgba(235, 87, 87, .1);
  color: #EB5757;
}
.notice-list-item {
  margin-top: .1rem;
  background: #fff;
  border-radius: .08rem;
  overflow: hidden;
}
.notice-list-item-wrap {
  margin: .1rem .2rem .3rem;
}
.notice-list-item-time {
  font-size: 14px;
  line-height: 20px;
  color: #718096;
  text-align: center;
}
.notice-list-item-image-warp .img {
  display: block;
  width: 100%;
}
.notice-list-item-msg {
  margin: 0 .15rem;
  padding: .15rem 0;
  font-size: .16rem;
  line-height: .26rem;
  color: #1A202C;
}
.ipu-list-item-link {
  position: relative;
}
.notice-list-item-to-detail {
  font-size: .14rem;
  line-height: .26rem;
  color: #1A202C;
  padding: .1rem 0;
  margin: 0 .15rem;
}
.notice-list-item-to-detail.ipu-list-item-link:after {
  width: .16rem;
}
.pages-notice-list .ipu-toolbar {
  background-color: transparent;
}
.block-head-link-more.show {
  display: block;
}
.ipu-list-item-input-wrap.ipu-list-item-link {
  padding-right: .4rem;
}
.ipu-list-item-input-wrap.ipu-list-item-link:after {
  right: .05rem;
}
.pages-group-detail-noauth .auth-block {
  display: none;
}
.pages-group-detail-noauth .ipu-list-item-link {
  padding-right: .2rem;
}
.pages-group-detail-noauth .ipu-list-item-link:after {
  content: none;
}
.group-input-set-wrap {
  margin-top: .08rem;
}
.group-input-set-wrap .icon {
  display: block;
  font-size: .18rem;
  color: #A0AEC0;
  line-height: .2rem;
}
.btn-group-set {
  display: block;
  width: 1.54rem;
  line-height: .36rem;
  margin: .3rem auto;
  border-radius: .04rem;
}

2020/x-3/biz/js/page/group-detail.js

@@ -1,5 +1,29 @@
require(["ipuUI", "jquery"], function (ipuUI, $) {
    $(function () {
  $(function () {
    ipuUI.toast("两秒后切换至有操作权限的展示");  // 群主进入页面
    setTimeout(function () {
      $("body").removeClass("pages-group-detail-noauth");
    }, 2000);
    // 进入群描述修改
    $(".ipu-list-item-group-desc").click(function () {
      if (!$("body").hasClass("pages-group-detail-noauth")) {
        location.href = "group-desc-set.html";
      }
    });
    // 进入群名称修改
    $(".ipu-list-item-group-name").click(function () {
      if (!$("body").hasClass("pages-group-detail-noauth")) {
        location.href = "group-name-set.html";
      }
    });
    // 进入成员列表
    $(".block-head-link-more").click(function () {
      location.href = "group-member-more.html";
    });
    // 加、减群成员，参考创建群
  });
});

2020/x-3/biz/js/page/group-list.js

@@ -4,5 +4,15 @@ require(["ipuUI", "jquery", "tool"], function (ipuUI, $, tool) {
    $(".to-group-create").on("click", function () {
      location.href = "group-add.html";
    });
    $(".group-list-item-name .icon").click(function () {
      location.href = "group-detail.html";
      return false;
    });
    $(".group-list-item").click(function () {
      ipuUI.toast("进入群聊");
    });
  });
});

2020/x-3/biz/js/page/group-name-set.js

@@ -0,0 +1,9 @@
require(["ipuUI", "jquery", "tool"], function (ipuUI, $) {
  $.sizeReady(function () {
    $(".group-input-set-wrap .icon").click(function () {
      $(".ipu-list-item-input").val("");
    });
    
  });
});

2020/x-3/biz/js/page/notice-list.js

@@ -0,0 +1,11 @@
require(["ipuUI", "jquery", "tool"], function (ipuUI, $) {
  $.sizeReady(function () {
    var containerHeight = $("#content-wrap").height();
    var contentHeight = $(".common-page-content").outerHeight();
    console.log(containerHeight, contentHeight);
    $("#content-wrap").scrollTop(contentHeight - containerHeight + 20);  // 加20是以防
  });
});

2020/x-3/group-add.html

@@ -14,7 +14,7 @@
  <script src="biz/js/require-config.js"></script>
  <script src="biz/js/page/group-add.js"></script>
</head>
<body class="pages-schedule-add">
<body class="pages-group-add">
<div class="ipu-flex-row ipu-flex-vertical common-bg-white">
@@ -24,6 +24,9 @@
      <a class="ipu-fn-left page-back" href="javascript:history.back();">
        <i class="ipu-icon ri-arrow-left-s-line"></i>
      </a>
      <a class="ipu-fn-right link-finish common-color-blue" href="javascript:;">
        完成
      </a>
    </header>
  </div>
@@ -195,13 +198,6 @@
    </div>
  </div>
  <div class="ipu-flex-col">
    <div class="ipu-fn-m ipu-fn-p">
      <button class="ipu-btn common-btn">提交</button>
    </div>
  </div>
</div>

2020/x-3/group-desc-set.html

@@ -0,0 +1,55 @@
<!DOCTYPE html>
<html lang="en">
<head>
  <title>群组-群描述设置</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
  <link rel="stylesheet" type="text/css" href="ipu/ui/css/ipuUI.css">
  <link rel="stylesheet" type="text/css" href="biz/lib/remixicon/remixicon.css">
  <link rel="stylesheet" type="text/css" href="biz/css/base.css">
  <script src="ipu/lib/requirejs/require.js"></script>
  <script src="biz/js/require-config.js"></script>
  <script src="biz/js/page/group-name-set.js"></script>
</head>
<body class="pages-group-desc-set">
<div class="ipu-flex-row ipu-flex-vertical common-bg-white">
  <div class="ipu-flex-col">
    <header class="ipu-toolbar common-bg-white">
      <h1 class="ipu-toolbar-title">修改群组描述</h1>
      <a class="ipu-fn-left page-back" href="javascript:history.back();">
        <i class="ipu-icon ri-arrow-left-s-line"></i>
      </a>
    </header>
  </div>
  <div class="ipu-flex-col ipu-flex-col-auto ipu-fn-p-b">
    <div class="ipu-list common-list common-list-padding ">
      <ul>
        <li class="ipu-list-item">
          <div class="ipu-list-item-inner ipu-flex-vertical">
            <div class="ipu-list-item-label">
              群组描述
            </div>
            <div class="ipu-flex-middle group-input-set-wrap">
              <div class="ipu-list-item-input-wrap ipu-flex-grow-1">
                <input class="ipu-list-item-input" type="text" placeholder="请输入群组描述" value="X部落与USPA对接">
              </div>
              <div class="ipu-flex-grow-0">
                <i class="icon ri-close-circle-fill"></i>
              </div>
            </div>
        </li>
      </ul>
    </div>
    <button class="ipu-btn btn-group-set">确定</button>
  </div>
</div>
</body>
</html>

2020/x-3/group-detail.html

@@ -0,0 +1,160 @@
<!DOCTYPE html>
<html lang="en">
<head>
  <title>群组-详情</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
  <link rel="stylesheet" type="text/css" href="ipu/ui/css/ipuUI.css">
  <link rel="stylesheet" type="text/css" href="biz/lib/remixicon/remixicon.css">
  <link rel="stylesheet" type="text/css" href="biz/css/base.css">
  <script src="ipu/lib/requirejs/require.js"></script>
  <script src="biz/js/require-config.js"></script>
  <script src="biz/js/page/group-detail.js"></script>
</head>
<body class="pages-gropu-detail pages-group-detail-noauth">
<div class="ipu-flex-row ipu-flex-vertical common-bg-white">
  <div class="ipu-flex-col">
    <header class="ipu-toolbar common-bg-white">
      <h1 class="ipu-toolbar-title">群组详情</h1>
      <a class="ipu-fn-left page-back" href="javascript:history.back();">
        <i class="ipu-icon ri-arrow-left-s-line"></i>
      </a>
    </header>
  </div>
  <div class="ipu-flex-col ipu-flex-col-auto ipu-fn-p-b">
    <div class="group-member-block">
      <div class="block-head">
        <span class="block-head-title">
          参与人
        </span>
      </div>
      <div class="block-body">
        <div class="group-member-list">
          <div class="group-member-item">
            <img class="group-member-avater" src="./temp/1.png" alt=""/>
            <div class="group-manager-flag group-manager-flag-owner"></div>
            <div class="group-member-name">孙欢欢</div>
          </div>
          <div class="group-member-item ">
            <img class="group-member-avater" src="./temp/1.png" alt=""/>
            <div class="group-member-name">孙欢欢</div>
          </div>
          <div class="group-member-item ">
            <img class="group-member-avater" src="./temp/1.png" alt=""/>
            <div class="group-member-name">孙欢欢</div>
          </div>
          <div class="group-member-item ">
            <img class="group-member-avater" src="./temp/1.png" alt=""/>
            <div class="group-member-name">孙欢欢</div>
          </div>
          <div class="group-member-item ">
            <img class="group-member-avater" src="./temp/1.png" alt=""/>
            <div class="group-member-name">孙欢欢</div>
          </div>
          <div class="group-member-item ">
            <img class="group-member-avater" src="./temp/1.png" alt=""/>
            <div class="group-member-name">孙欢欢</div>
          </div>
          <div class="group-member-item ">
            <img class="group-member-avater" src="./temp/1.png" alt=""/>
            <div class="group-member-name">孙欢欢</div>
          </div>
          <div class="group-member-item ">
            <img class="group-member-avater" src="./temp/1.png" alt=""/>
            <div class="group-member-name">孙欢欢</div>
          </div>
          <div class="group-member-item ">
            <img class="group-member-avater" src="./temp/1.png" alt=""/>
            <div class="group-member-name">孙欢欢</div>
          </div>
          <div class="group-member-item ">
            <img class="group-member-avater" src="./temp/1.png" alt=""/>
            <div class="group-member-name">孙欢欢</div>
          </div>
          <div class="group-member-item ">
            <img class="group-member-avater" src="./temp/1.png" alt=""/>
            <div class="group-member-name">孙欢欢</div>
          </div>
          <div class="group-member-item ">
            <img class="group-member-avater" src="./temp/1.png" alt=""/>
            <div class="group-member-name">孙欢欢</div>
          </div>
          <div class="group-member-item ">
            <img class="group-member-avater" src="./temp/1.png" alt=""/>
            <div class="group-member-name">孙欢欢</div>
          </div>
          <!-- 增加了除创建人以外的成员显示移除入口-->
          <div class="group-member-item auth-block">
            <div class="group-member-action ipu-flex-middle-center group-member-action-remove ">
              <i class="icon ri-subtract-fill"></i>
            </div>
            <div class="group-member-name"></div>
          </div>
          <div class="group-member-item auth-block">
            <div class="group-member-action ipu-flex-middle-center group-member-action-add">
              <i class="icon ri-add-fill"></i>
            </div>
            <div class="group-member-name"></div>
          </div>
        </div>
        <!-- 成员数量 加上添加移除，最多展示三排，超出展示更多入口  -->
        <div class="block-head-link-more show">
          <div class="ipu-flex-center-middle">
            查看更多成员
            <i class="icon ri-arrow-right-s-line"></i>
          </div>
        </div>
      </div>
    </div>
    <div class="ipu-list common-list common-list-padding form-block">
      <ul>
        <li class="ipu-list-item">
          <div class="ipu-list-item-inner ipu-list-item-inner-empty">
          </div>
        </li>
        <li class="ipu-list-item ipu-list-item-group-name">
          <div class="ipu-list-item-inner ipu-flex-vertical common-p-r-0">
            <div class="ipu-list-item-label">
              群组名称
            </div>
            <div class="ipu-flex ipu-list-item-input-wrap ipu-list-item-link">
              <input class="ipu-list-item-input" type="text" placeholder="" value="群组名称" readonly>
            </div>
          </div>
        </li>
        <li class="ipu-list-item ipu-list-item-group-desc">
          <div class="ipu-list-item-inner ipu-flex-vertical common-p-r-0">
            <div class="ipu-list-item-label">
              群组描述
            </div>
            <div class="ipu-flex ipu-list-item-input-wrap ipu-list-item-link">
              <div class="ipu-list-item-input">
                X部落APP工作X部落APP工作X部落APP工作
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>
</body>
</html>

2020/x-3/group-list.html

@@ -57,8 +57,11 @@
      </div>
      <div class="group-list-item">
        <div class="ipu-fn-row group-list-item-name">
          X部落战队
        <div class="ipu-flex ipu-flex-justify-space group-list-item-name">
          <div class="ipu-fn-row ipu-flex-grow-1">
            X部落战队X部落战队X部落战队
          </div>
          <i class="icon ipu-flex-grow-0 ri-more-line"></i>
        </div>
        <div class="ipu-fn-row group-list-item-desc">
          对X部落工作内容进行相关文字描述
@@ -72,8 +75,11 @@
      </div>
      <div class="group-list-item">
        <div class="ipu-fn-row group-list-item-name">
          X部落战队
        <div class="ipu-flex ipu-flex-justify-space group-list-item-name">
          <div class="ipu-fn-row ipu-flex-grow-1">
            X部落战队X部落战队X部落战队
          </div>
          <i class="icon ipu-flex-grow-0 ri-more-line"></i>
        </div>
        <div class="ipu-fn-row group-list-item-desc">
          对X部落工作内容进行相关文字描述

2020/x-3/group-name-set.html

@@ -0,0 +1,55 @@
<!DOCTYPE html>
<html lang="en">
<head>
  <title>群组-群名设置</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
  <link rel="stylesheet" type="text/css" href="ipu/ui/css/ipuUI.css">
  <link rel="stylesheet" type="text/css" href="biz/lib/remixicon/remixicon.css">
  <link rel="stylesheet" type="text/css" href="biz/css/base.css">
  <script src="ipu/lib/requirejs/require.js"></script>
  <script src="biz/js/require-config.js"></script>
  <script src="biz/js/page/group-name-set.js"></script>
</head>
<body class="pages-group-name-set">
<div class="ipu-flex-row ipu-flex-vertical common-bg-white">
  <div class="ipu-flex-col">
    <header class="ipu-toolbar common-bg-white">
      <h1 class="ipu-toolbar-title">修改群组名称</h1>
      <a class="ipu-fn-left page-back" href="javascript:history.back();">
        <i class="ipu-icon ri-arrow-left-s-line"></i>
      </a>
    </header>
  </div>
  <div class="ipu-flex-col ipu-flex-col-auto ipu-fn-p-b">
    <div class="ipu-list common-list common-list-padding">
      <ul>
        <li class="ipu-list-item">
          <div class="ipu-list-item-inner ipu-flex-vertical">
            <div class="ipu-list-item-label">
              群组名称
            </div>
            <div class="ipu-flex-middle group-input-set-wrap">
              <div class="ipu-list-item-input-wrap ipu-flex-grow-1">
                <input class="ipu-list-item-input" type="text" placeholder="请输入群组名称" value="X部落与USPA对接">
              </div>
              <div class="ipu-flex-grow-0">
                <i class="icon ri-close-circle-fill"></i>
              </div>
            </div>
        </li>
      </ul>
    </div>
    <button class="ipu-btn btn-group-set">确定</button>
  </div>
</div>
</body>
</html>

2020/x-3/notice-list.html

@@ -0,0 +1,109 @@
<!DOCTYPE html>
<html lang="en">
<head>
  <title>公告-列表</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
  <link rel="stylesheet" type="text/css" href="ipu/ui/css/ipuUI.css">
  <link rel="stylesheet" type="text/css" href="biz/lib/remixicon/remixicon.css">
  <link rel="stylesheet" type="text/css" href="biz/css/base.css">
  <script src="ipu/lib/requirejs/require.js"></script>
  <script src="biz/js/require-config.js"></script>
  <script src="biz/js/page/notice-list.js"></script>
</head>
<body class="pages-notice-list">
<div class="ipu-flex-row ipu-flex-vertical common-bg-gray">
  <div class="ipu-flex-col">
    <header class="ipu-toolbar">
      <h1 class="ipu-toolbar-title">公告</h1>
      <a class="ipu-fn-left page-back" href="javascript:history.back();">
        <i class="ipu-icon ri-arrow-left-s-line"></i>
      </a>
      <a class="ipu-fn-right page-search" href="javascript: ;">
        <i class="ipu-icon ri-search-line"></i>
      </a>
    </header>
  </div>
  <div class="ipu-flex-col ipu-flex-col-auto" id="content-wrap">
    <div class="common-page-content">
      <div class="notice-list">
        <div class="notice-list-item-wrap">
          <div class="notice-list-item-time">
            下午13：00
          </div>
          <div class="notice-list-item">
            <div class="notice-list-item-image-warp">
              <img class="img" src="temp/2.png"/>
            </div>
            <div class="notice-list-item-msg ipu-fn-bd-b">
              您已加入X部落战队，点击查看详情机可以查看组织信息，您已加入X部落战队，点击查看详情机可以查看组织信息，您已加入X部落战队，点击查看详情机可以查看组织信息。
            </div>
            <div class="notice-list-item-to-detail ipu-list-item-link">
              查看详情
            </div>
          </div>
        </div>
        <div class="notice-list-item-wrap">
          <div class="notice-list-item-time">
            下午13：00
          </div>
          <div class="notice-list-item">
            <div class="notice-list-item-msg ipu-fn-bd-b">
              您已加入X部落战队，点击查看详情机可以查看组织信息，您已加入X部落战队，点击查看详情机可以查看组织信息，您已加入X部落战队，点击查看详情机可以查看组织信息。
            </div>
            <div class="notice-list-item-to-detail ipu-list-item-link">
              查看详情
            </div>
          </div>
        </div>
        <div class="notice-list-item-wrap">
          <div class="notice-list-item-time">
            下午13：00
          </div>
          <div class="notice-list-item">
            <div class="notice-list-item-image-warp">
              <img class="img" src="temp/2.png"/>
            </div>
            <div class="notice-list-item-msg ipu-fn-bd-b">
              您已加入X部落战队，点击查看详情机可以查看组织信息，您已加入X部落战队，点击查看详情机可以查看组织信息，您已加入X部落战队，点击查看详情机可以查看组织信息。
            </div>
            <div class="notice-list-item-to-detail ipu-list-item-link">
              查看详情
            </div>
          </div>
        </div>
        <div class="notice-list-item-wrap">
          <div class="notice-list-item-time">
            下午13：00
          </div>
          <div class="notice-list-item">
            <div class="notice-list-item-msg ipu-fn-bd-b">
              您已加入X部落战队，点击查看详情机可以查看组织信息，您已加入X部落战队，点击查看详情机可以查看组织信息，您已加入X部落战队，点击查看详情机可以查看组织信息。
            </div>
            <div class="notice-list-item-to-detail ipu-list-item-link">
              查看详情
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>