增加项目清单静态页面

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

  padding-top: .1rem;
  padding-bottom: 0;
}
.pages-project-task .ipu-toolbar-title{
.pages-project-phase .ipu-toolbar-title {
  left: .55rem;
  right: 1.5rem;
  width: auto;
}
.project-phase-current {
  font-size: .12rem;
  line-height: .32rem;
  color: #4A5568;
}
.project-phase-current .icon-flag {
  margin-left: .05rem;
  font-size: .18rem;
  color: #A0AEC0;
}
.project-phase-block {
  position: absolute;
  top: .86rem;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
  display: none;
}
.project-phase-block .list-head-title {
  font-size: .14rem;
  line-height: .22rem;
  color: #718096;
  padding: .1rem .2rem;
}
.project-phase-block .list-head-link {
  font-size: .14rem;
  line-height: .22rem;
  color: #0B69FF;
  padding: .1rem .2rem;
}
.project-phase-block .list-item {
  margin-left: .2rem;
}
.project-phase-block .list-item .item-title {
  font-size: .14rem;
  color: #1A202C;
  line-height: .425rem;
  padding-right: .2rem;
}
.project-phase-block .item-slt-flag .icon-flag {
  font-size: .2rem;
  color: #0B69FF;
  padding-right: .2rem;
  display: none;
}
.project-phase-block .list-item.slt .icon-flag {
  display: block;
}
.project-phase-block .list-foot {
  padding: .15rem .2rem;
  font-size: .14rem;
  line-height: .22rem;
  color: #0B69FF;
}
.project-phase-block .list-foot .icon-flag {
  font-size: .2rem;
}
.project-phase-content {
  background-color: #fff;
}
.pages-project-phase .ipu-carousel {
  width: 3.15rem;
  margin: 0 auto;
  overflow: visible;
  height: 100%;
  padding-bottom: .4rem;
}
.pages-project-phase .ipu-hammer-carousel .ipu-carousel-wrapper {
  height: 100%;
}
.pages-project-phase .ipu-hammer-carousel .ipu-carousel-wrapper > li {
  height: 100%;
  overflow: auto;
}
.project-phase-item {
  margin: 0 .1rem;
}
.pages-project-phase .ipu-checkbox input[type=checkbox]:before {
  border-color: #CBD5E0;
}
.pages-project-phase .ipu-checkbox input[type=checkbox] {
  margin-left: 0;
}
.pages-project-phase .ipu-checkbox {
  padding: 0 .1rem;
}
.project-task-item {
  background-color: #fff;
  border-left: .05rem solid #0B69FF;
  border-radius: .04rem;
  padding: .13rem .15rem .13rem 0;
  margin: .1rem 0;
}
.project-task-executor .img {
  width: .24rem;
  height: .24rem;
  border-radius: 50%;
}
.project-task-item .project-task-title {
  font-weight: 500;
  font-size: .14rem;
  line-height: .22rem;
  color: #1A202C;
  padding-right: .1rem;
}
.project-task-time-state {
  margin-top: .04rem;
  border-radius: .04rem;
  line-height: .2rem;
  font-size: .12rem;
  color: #718096;
  background-color: #F2F3F7;
  border-radius: .04rem;
  padding: 0 .05rem;
}
.project-task-time-state.time-out {
  background-color: rgba(243, 88, 107, .1);
  color: #F3586B;
}
.project-task-time-state.time-limit {
  color: #ED8936;
  background-color: rgba(237, 137, 54, .1);
}
.link-task-add {
  height: .4rem;
  background-color: #fff;
  font-size: .14rem;
  line-height: .22rem;
  color: #718096;
}
.link-task-add .icon-flag {
  font-size: .2rem;
  padding-right: .03rem;
}
.project-phase-item .item-state {
  font-weight: 500;
  font-size: .14rem;
  line-height: .22rem;
  color: #1A202C;
  padding: .2rem 0 .06rem;
}
.project-phase-item .item-state .num {
  padding-left: .05rem;
  font-weight: normal;
  color: #718096;
}
.carousel-block {
  overflow: hidden;
}
.project-task-item-white {
  border-left-color: #fff;
}
.project-task-item-red {
  border-left-color: #F56565;
}
.project-task-item-yellow {
  border-left-color: #F6AD55;
}
.pages-project-phase .ipu-carousel-indicator li {
  width: .07rem;
  height: .07rem;
  background-color: #A0AEC0;
  opacity: .3;
}
.pages-project-phase .ipu-carousel-indicator li.ipu-current {
  opacity: 1;
}
.project-phase-list .ipu-list-item-title {
  font-size: .16rem;
  line-height: .32rem;
  color: #1A202C;
}
.project-phase-list .ipu-list-item {
  padding-left: .2rem;
}

2020/x-3/biz/js/common/PanCarousel.js

define(["jquery"], function ($) {
  // 非循环时，限制滚动范围，滚动结束处理有问题
  // 参考 HammerCarousel组件改造，功能类似HammerCarousel
  /**
   * @class ipuUI.HammerCarousel
      this.enable = true;
      this.startIndex = Math.ceil(this.option.startIndex);   // 起始位置，表明0不会显示，因为没法显示0
      this.endIndex = this.startIndex + this.itemSize;       // 结束位置展现同起始位置，只是索引不同
      this.endIndex = this.itemSize + (this.option.loop ? this.startIndex : -1);       // 结束位置展现同起始位置，只是索引不同
      this.carouselItemWides = []; // 子项宽度尺寸
      /**
        if (cloneItem.size() < this.showItemSize) {
          this.carouselItems.slice(0, 1).clone().appendTo(this.wrapper).removeClass("ipu-current");
        }
      } else { // 限制最大滚动距离
      }
      var that = this;
      }
      this._show(this.currentIndex, false);
      console.log(this);
    },
    /**
     * 停止自动滚动
        move = this.moveLen - moveLen;
        if (move < 0) {
          move = move / 2;
          //move = 0;
        } else if (move > this.endSize) {
          move = this.endSize + (move - this.endSize) / 2;
          //move = this.endSzie;
        }
      }
      this.displayMoveLen = move;
      $(this.wrapper).css("transform", "translate3d(-" + move + "px, 0, 0)");
      move = -move;
      $(this.wrapper).css("transform", "translate3d(" + move + "px, 0, 0)");  //　css里面负负时不能识别如 --3px
    },
    _show: function (index, animate) { // index = realIndex
      if (animate !== false) { // 默认值为true
      var realIndex = index;
      if ((index == this.startIndex || index == this.endIndex) && this.displayMoveLen) { // 对于重复位置，需要根据最靠近移动
        var moveSize = Math.abs(this.displayMoveLen / this.itemWidth);
        if (Math.abs(this.startIndex - moveSize) > Math.abs(this.endIndex - moveSize)) {
          index = this.endIndex;
        } else {
          index = this.startIndex;
      if (this.option.loop) {
        if ((index == this.startIndex || index == this.endIndex) && this.displayMoveLen) { // 对于重复位置，需要根据最靠近移动
          var moveSize = Math.abs(this.displayMoveLen / this.itemWidth);
          if (Math.abs(this.startIndex - moveSize) > Math.abs(this.endIndex - moveSize)) {
            index = this.endIndex;
          } else {
            index = this.startIndex;
          }
        }
      }
      $(this.wrapper).css("transform", "translate3d(-" + this.moveLen + "px, 0, 0)");
      if (this.indicator) {
        this.indicatorIndexs.eq(currentIndex).addClass("ipu-current").siblings().removeClass("ipu-current");
        this.indicatorIndexs.eq(this.currentIndex).addClass("ipu-current").siblings().removeClass("ipu-current");
      }
      if (this.displayMoveLen) {  // 这个值只在pancancel时使用，否则清0
      function touchStartLister(e) {
        // 组件内，有子组件嵌套的情况，由子组件自己处理
        if ($(e.target).parents(".ipu-hammer-carousel").get(0) != _this.el) {
        if (!$(e.target).is(_this.el) && $(e.target).parents(".ipu-hammer-carousel").get(0) != _this.el) { // 排除直拉点在组件的情况
          return;
        }
          endPanLister();
        }
      }
    }
  });

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

    });
    $(".list-project").on("click", ".ipu-list-item", function () {
      location.href = "project-task.html";
      location.href = "project-phase.html";
    });
    $("list-project").on("click", ".link-more", function () {

2020/x-3/biz/js/page/project-phase.js

require(["ipuUI", "jquery", "tool", "PanCarousel"], function (ipuUI, $, tool, PanCarousel) {
  $(function () {
    var carousel = new PanCarousel(".ipu-carousel", { // 第一页设置幻灯片
      indicator: true, // 是否生成指示器(右下角的小圆点)
      indicatorPosition: 'center',
      loop: false,       // 是否循环
      callBack: function (index, oldIndex) {
        if (index != oldIndex) {
          console.log(index, oldIndex);
          var sltPhase = $(".project-phase-content .list-item-slt:eq(" + index + ")").addClass("slt");
          sltPhase.siblings(".slt").removeClass("slt");
          $(".project-phase-current span").text($.trim(sltPhase.text()));
        }
      }
    });
    // 项目阶段操作
    $(".project-phase-current").click(function () {
      $(".project-phase-block").toggle();
    });
    // 选择不同项目阶段
    $(".project-phase-content").on("click", " .list-item-slt", function () {
      if (!$(this).hasClass("slt")) {
        console.log($(this).index() - 1);
        carousel.show($(this).index() - 1);
        $(".project-phase-block").toggle();
      }
    });
    // 选择不同项目阶段
    $(".project-phase-content").on("click", " .list-item-all", function () {
      ipuUI.toast("进入全部任务页面");     // 进入全部任务页面
    });
    // 新建任务
    $(".carousel-block").on("click", ".link-task-add", function () {
      location.href = "project-phase-add.html";
    });
    // 新建清单
    $(".project-phase-content").on("click", ".list-foot", function () {
      location.href = "project-phase-add.html";
    });
    // 清单列表
    $(".project-phase-content").on("click", ".list-item-all", function () {
      location.href = "project-phase-list.html";
    })
  });
});

2020/x-3/project-phase-add.html

<!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>
</head>
<body class="pages-project-phase-add">
<div class="ipu-flex-row ipu-flex-vertical common-bg-gray">
  <div class="ipu-flex-col common-bg-white">
    <header class="ipu-toolbar ">
      <h1 class="ipu-toolbar-title ipu-fn-row">创建清单</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 link-finish common-color-blue " href="javascript:;">
        完成
      </a>
    </header>
  </div>
  <div class="ipu-flex-col ipu-flex-col-auto">
    <div class="ipu-list ipu-list-form common-list common-list-padding form-block common-m-t-0">
      <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-list-item-input-wrap">
              <input class="ipu-list-item-input" type="text" placeholder="请输入清单名称">
            </div>
          </div>
        </li>
        <li class="ipu-list-item">
          <div class="ipu-list-item-inner ipu-flex-vertical">
            <div class="ipu-list-item-label">
              清单描述
            </div>
            <div class="ipu-list-item-input-wrap">
              <input class="ipu-list-item-input" type="text" placeholder="请输入清单描述">
            </div>
          </div>
        </li>
        <li class="ipu-list-item">
          <div class="ipu-list-item-inner ipu-flex-vertical">
            <div class="ipu-flex ipu-flex-justify-space">
              <div class="ipu-list-item-label">
                开始时间
              </div>
              <div class="ipu-list-item-label">
                结束时间
              </div>
            </div>
            <div class="ipu-flex ipu-flex-justify-space">
              <div class="ipu-list-item-input-wrap ipu-flex-grow-1">
                <input class="ipu-list-item-input" type="text" placeholder="请选择开始时间" readonly id="begin">
              </div>
              <div class="ipu-list-item-input-wrap ipu-flex-grow-1">
                <input class="ipu-list-item-input ipu-txt-right" type="text" placeholder="请选择开始时间" readonly>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>
</body>
</html>

2020/x-3/project-phase-edit.html

<!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>
</head>
<body class="pages-project-phase-edit">
<div class="ipu-flex-row ipu-flex-vertical common-bg-gray">
  <div class="ipu-flex-col common-bg-white">
    <header class="ipu-toolbar ">
      <h1 class="ipu-toolbar-title ipu-fn-row">创建清单</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 link-finish common-color-blue " href="javascript:;">
        完成
      </a>
    </header>
  </div>
  <div class="ipu-flex-col ipu-flex-col-auto">
    <div class="ipu-list ipu-list-form common-list common-list-padding form-block common-m-t-0">
      <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-list-item-input-wrap">
              <input class="ipu-list-item-input" type="text" placeholder="请输入清单名称" value="二阶段工作">
            </div>
          </div>
        </li>
        <li class="ipu-list-item">
          <div class="ipu-list-item-inner ipu-flex-vertical">
            <div class="ipu-list-item-label">
              清单描述
            </div>
            <div class="ipu-list-item-input-wrap">
              <input class="ipu-list-item-input" type="text" placeholder="请输入清单描述">
            </div>
          </div>
        </li>
        <li class="ipu-list-item">
          <div class="ipu-list-item-inner ipu-flex-vertical">
            <div class="ipu-flex ipu-flex-justify-space">
              <div class="ipu-list-item-label">
                开始时间
              </div>
              <div class="ipu-list-item-label">
                结束时间
              </div>
            </div>
            <div class="ipu-flex ipu-flex-justify-space">
              <div class="ipu-list-item-input-wrap ipu-flex-grow-1">
                <input class="ipu-list-item-input" type="text" placeholder="请选择开始时间" readonly id="begin" value="6月25日">
              </div>
              <div class="ipu-list-item-input-wrap ipu-flex-grow-1">
                <input class="ipu-list-item-input ipu-txt-right" type="text" placeholder="请选择开始时间" value="6月31日" readonly>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>
</body>
</html>

2020/x-3/project-phase-list.html

<!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/project-phase-list.js"></script>
</head>
<body class="pages-project-phase-list">
<div class="ipu-flex-row ipu-flex-vertical">
  <div class="ipu-flex-col ">
    <header class="ipu-toolbar ">
      <h1 class="ipu-toolbar-title ipu-fn-row">清单</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" href="javascript:;">
        <i class="ipu-icon ri-record-circle-line"></i>
      </a>
    </header>
  </div>
  <div class="ipu-flex-col ipu-flex-col-auto">
    <div class="ipu-list common-list project-phase-list">
      <ul>
        <li>
          <a class="ipu-list-item ipu-list-item-link" href="javascript:;">
            <div class="ipu-list-item-inner">
              <div class="ipu-list-item-title">一阶段工作</div>
            </div>
          </a>
        </li>
        <li>
          <a class="ipu-list-item ipu-list-item-link" href="javascript:;">
            <div class="ipu-list-item-inner">
              <div class="ipu-list-item-title">二阶段工作</div>
            </div>
          </a>
        </li>
      </ul>
    </div>
  </div>
</div>
</body>
</html>

2020/x-3/project-phase.html

<!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/project-phase.js"></script>
</head>
<body class="pages-project-phase">
<div class="ipu-flex-row ipu-flex-vertical common-bg-gray">
  <div class="ipu-flex-col common-bg-white">
    <header class="ipu-toolbar ">
      <h1 class="ipu-toolbar-title ipu-fn-row">AI Design AI Design AI Design </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" href="javascript:;">
        <i class="ipu-icon ri-record-circle-line"></i>
      </a>
      <a class="ipu-fn-right" href="javascript:;">
        <i class="ipu-icon ri-user-line"></i>
      </a>
      <a class="ipu-fn-right" href="javascript:;">
        <i class="ipu-icon ri-search-line"></i>
      </a>
    </header>
    <div class="ipu-flex-center-middle project-phase-current">
      <span>一阶段工作</span>
      <i class="icon-flag ri-arrow-down-s-line"></i>
    </div>
  </div>
  <div class="ipu-flex-col ipu-flex-col-auto">
    <div class="ipu-flex-content carousel-block">
      <div class="ipu-carousel ipu-hammer-carousel">
        <ul class="ipu-carousel-wrapper">
          <li>
            <div class="project-phase-item">
              <div class="item-state">
                进行中<span class="num">4</span>
              </div>
              <div class="project-task-list">
                <div class="ipu-flex project-task-item ">
                  <label class="ipu-checkbox ipu-checkbox-s ipu-checkbox-square">
                    <input type="checkbox">
                  </label>
                  <div class="ipu-flex-grow-1">
                    <div class="project-task-title">
                      AI Design 产品规划AI Design 产品规划AI Design 产品规划
                    </div>
                    <div class="ipu-flex ">
                      <div class="ipu-flex-grow-0 project-task-time-state time-out"> 已超时</div>
                    </div>
                  </div>
                  <div class="ipu-flex-grow-0 project-task-executor">
                    <img src="./temp/1.png" alt="" class="img"/>
                  </div>
                </div>
                <div class="ipu-flex project-task-item project-task-item-white">
                  <label class="ipu-checkbox ipu-checkbox-s ipu-checkbox-square">
                    <input type="checkbox">
                  </label>
                  <div class="ipu-flex-grow-1">
                    <div class="project-task-title">
                      AI Design 产品规划
                    </div>
                    <div class="ipu-flex ">
                      <div class="ipu-flex-grow-0 project-task-time-state time-limit">
                        今天14:00截止
                      </div>
                    </div>
                  </div>
                  <div class="ipu-flex-grow-0 project-task-executor">
                    <img src="./temp/1.png" alt="" class="img"/>
                  </div>
                </div>
                <div class="ipu-flex project-task-item project-task-item-red">
                  <label class="ipu-checkbox ipu-checkbox-s ipu-checkbox-square">
                    <input type="checkbox">
                  </label>
                  <div class="ipu-flex-grow-1">
                    <div class="project-task-title">
                      AI Design 产品规划
                    </div>
                    <div class="ipu-flex ">
                      <div class="ipu-flex-grow-0 project-task-time-state ">
                        距离截止时间：还剩4天
                      </div>
                    </div>
                  </div>
                </div>
                <div class="ipu-flex project-task-item project-task-item-yellow">
                  <label class="ipu-checkbox ipu-checkbox-s ipu-checkbox-square">
                    <input type="checkbox">
                  </label>
                  <div class="ipu-flex-grow-1">
                    <div class="project-task-title">
                      AI Design 产品规划
                    </div>
                    <div class="ipu-flex ">
                      <div class="ipu-flex-grow-0 project-task-time-state ">
                        距离截止时间：还剩4天
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="ipu-flex-center-middle link-task-add">
                <i class="icon-flag ri-add-fill"></i>
                添加新的任务
              </div>
            </div>
          </li>
          <li>
            <div class="project-phase-item">
              <div class="item-state">
                进行中<span class="num">4</span>
              </div>
              <div class="project-task-list">
                <div class="ipu-flex project-task-item ">
                  <label class="ipu-checkbox ipu-checkbox-s ipu-checkbox-square">
                    <input type="checkbox">
                  </label>
                  <div class="ipu-flex-grow-1">
                    <div class="project-task-title">
                      AI Design 产品规划AI Design 产品规划AI Design 产品规划
                    </div>
                    <div class="ipu-flex ">
                      <div class="ipu-flex-grow-0 project-task-time-state time-out"> 已超时</div>
                    </div>
                  </div>
                  <div class="ipu-flex-grow-0 project-task-executor">
                    <img src="./temp/1.png" alt="" class="img"/>
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <!-- 阶段选择 -->
  <div class="project-phase-block">
    <div class="project-phase-content">
      <div class="list-block">
        <div class="ipu-flex-middle list-head ipu-fn-bd-t ipu-fn-bd-b">
          <div class="ipu-flex-grow-1 list-head-title">清单</div>
          <div class="ipu-flex-grow-0 list-head-link">编辑</div>
        </div>
        <ul>
          <li class="ipu-flex-middle ipu-fn-bd-b list-item list-item-all">
            <div class="ipu-flex-grow-1 item-title ipu-fn-row">全部</div>
            <div class="ipu-flex-grow-0 item-slt-flag">
              <i class="icon-flag ri-check-fill"></i>
            </div>
          </li>
          <li class="ipu-flex-middle ipu-fn-bd-b list-item list-item-slt slt">
            <div class="ipu-flex-grow-1 item-title ipu-fn-row">一阶段工作</div>
            <div class="ipu-flex-grow-0 item-slt-flag">
              <i class="icon-flag ri-check-fill"></i>
            </div>
          </li>
          <li class="ipu-flex-middle ipu-fn-bd-b list-item list-item-slt ">
            <div class="ipu-flex-grow-1 item-title ipu-fn-row">二阶段工作</div>
            <div class="ipu-flex-grow-0 item-slt-flag">
              <i class="icon-flag ri-check-fill"></i>
            </div>
          </li>
        </ul>
        <div class="ipu-flex-middle list-foot">
          <i class="icon-flag ri-add-fill"></i>
          新建清单
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>

2020/x-3/project-task.html

<!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/project-list.js"></script>
</head>
<body class="pages-project-task">
<div class="ipu-flex-row ipu-flex-vertical">
  <div class="ipu-flex-col">
    <header class="ipu-toolbar common-bg-white">
      <h1 class="ipu-toolbar-title ipu-fn-row">AI Design AI Design AI Design </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" href="javascript:history.back();">
        <i class="ipu-icon ri-record-circle-line"></i>
      </a>
      <a class="ipu-fn-right" href="javascript:history.back();">
        <i class="ipu-icon ri-user-line"></i>
      </a>
      <a class="ipu-fn-right" href="javascript:history.back();">
        <i class="ipu-icon ri-search-line"></i>
      </a>
    </header>
    <div class="common-search">
      <div class="ipu-flex common-search-content">
        <div class="ipu-flex-center-middle  common-search-tip">
          <i class="common-search-icon ri-search-2-line"></i>
          <span class="common-search-tip-msg">搜索</span>
        </div>
        <div class="ipu-flex-grow-1 common-search-wrap">
          <input class="common-search-input" placeholder="">
        </div>
        <i class="ipu-flex-grow-0 common-search-input-clear ri-close-circle-fill"></i>
      </div>
    </div>
  </div>
  <div class="ipu-flex-col ipu-flex-col-auto">
    <div class="ipu-list ipu-list-media common-list-noborder-all list-project">
      <div class="ipu-flex list-head">
        <div class="ipu-flex-grow-1 list-head-title">我的项目</div>
        <a class="ipu-flex-grow-0 list-head-link" href="javascript;">全部任务</a>
      </div>
      <ul>
        <li class="ipu-list-item">
          <div class="ipu-list-item-media">
            <img src="./temp/2.png" alt="">
          </div>
          <div class="ipu-list-item-inner">
            <div class="ipu-list-item-title-row">
              <div class="ipu-list-item-title">
                AI Design 项目1
              </div>
            </div>
            <div class="ipu-list-item-subtitle ipu-fn-row">
              项目简介项目简介项目简介项目简介项目简介项目简介项目简介项目简介
            </div>
          </div>
          <div class="ipu-flex-grow-0 ipu-flex-middle link-more">
            <i class="ri-more-fill"></i>
          </div>
        </li>
        <li class="ipu-list-item">
          <div class="ipu-list-item-media">
            <img src="./temp/2.png" alt="">
          </div>
          <div class="ipu-list-item-inner">
            <div class="ipu-list-item-title-row">
              <div class="ipu-list-item-title">
                AI Design 项目1
              </div>
            </div>
            <div class="ipu-list-item-subtitle ipu-fn-row">
              项目简介项目简介项目简介项目简介项目简介项目简介项目简介项目简介
            </div>
          </div>
          <div class="ipu-flex-grow-0 ipu-flex-middle link-more">
            <i class="ri-more-fill"></i>
          </div>
        </li>
        <li class="ipu-list-item">
          <div class="ipu-list-item-media">
            <img src="./temp/2.png" alt="">
          </div>
          <div class="ipu-list-item-inner">
            <div class="ipu-list-item-title-row">
              <div class="ipu-list-item-title">
                AI Design 项目1
              </div>
            </div>
            <div class="ipu-list-item-subtitle ipu-fn-row">
              项目简介项目简介项目简介项目简介项目简介项目简介项目简介项目简介
            </div>
          </div>
          <div class="ipu-flex-grow-0 ipu-flex-middle link-more">
            <i class="ri-more-fill"></i>
          </div>
        </li>
        <li class="ipu-list-item">
          <div class="ipu-list-item-media">
            <img src="./temp/2.png" alt="">
          </div>
          <div class="ipu-list-item-inner">
            <div class="ipu-list-item-title-row">
              <div class="ipu-list-item-title">
                AI Design 项目1
              </div>
            </div>
            <div class="ipu-list-item-subtitle ipu-fn-row">
              项目简介项目简介项目简介项目简介项目简介项目简介项目简介项目简介
            </div>
          </div>
          <div class="ipu-flex-grow-0 ipu-flex-middle link-more">
            <i class="ri-more-fill"></i>
          </div>
        </li>
      </ul>
      <div class="ipu-flex-middle list-foot link-project-add">
        <i class="icon-flag ri-add-fill"></i>
        <div class="list-foot-title">新建项目</div>
      </div>
    </div>
  </div>
</div>
</body>
</html>