x部落任务详情页面

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

@@ -8,7 +8,6 @@
}
.task-title-text{
  height: .72rem;
  margin-left: .15rem;
  margin-right: .22rem;
  font-weight: 600;
@@ -21,11 +20,13 @@
  color: #1A202C;
}
.task-notes {
  padding: .1rem 0;
  padding-bottom: .2rem;
  padding-top: .2rem;
  background-color: #F6F7FB;
}
.task-note {
  padding: .1rem .2rem;
  padding: .14rem .2rem .14rem .2rem;
}
.note-user-avatar {
  display: block;
@@ -52,6 +53,7 @@
.task-note-user-name{
  font-size: .14rem;
  color: #1A202C;
  line-height: .2rem;
}
.task-note-input-body{
  color: #F6F7FB;
@@ -59,6 +61,7 @@
.pages-task-list{
  margin-left: .56rem;
  margin-bottom: .21rem;
  margin-right: .27rem;
}
.pages-task-list-2{
  margin-right: .27rem;
@@ -74,16 +77,95 @@
}
.task-note-input {
  color: rgba(0, 0, 0, 0.25);
  padding: .1rem .21rem;
}
.pages-task-image-list{
  margin-left: .56rem;
  margin-bottom: .4rem;
}
.pages-task-image{
.pages-task-image-1{
  width: .93rem;
  height: .6rem;
  background: url("../img/test-task-image.jpg") center center no-repeat;
  background: url("../img/test-show-image-1.jpg") center center no-repeat;
  background-size: .93rem .6rem;
  border-radius: .04rem;
  margin-right: .1rem;
}
.pages-task-image-2{
  width: .93rem;
  height: .6rem;
  background: url("../img/test-show-image-2.jpg") center center no-repeat;
  background-size: .93rem .6rem;
  border-radius: .04rem;
  margin-right: .1rem;
}
.executor-image{
  width: .4rem;
  height: .4rem;
  background: url("../img/test-person-head.jpg") center center no-repeat;
  background-size: .4rem .4rem;
  border-radius: 1rem;
  margin-right: .1rem;
}
.time-image{
  width: .4rem;
  height: .4rem;
  background: url("../img/time-logo.jpg") center center no-repeat;
  background-size: .4rem .4rem;
  border-radius: 1rem;
  margin-right: .1rem;
}
.executor-title{
  font-weight: 500;
  font-size: .12rem;
  line-height: .18rem;
  color: #718096;
}
.executor-name{
  font-weight: 500;
  font-size: .16rem;
  line-height: .2rem;
  color: #1A202C;
}
.participant-number{
  margin-left: .07rem;
  padding-left: .06rem;
  padding-right: .06rem;
  /* 科技灰/400 */
  background: #CBD5E0;
  border-radius: 100px;
  text-align: center;
  color:#1A202C;
}
.pages-task-list .ipu-flex-vertical{
  width: 50%;
}
.pages-task-list .pages-task-list-width{
  width: 100%;
}
.person-head-1{
  width: .22rem;
  height: .22rem;
  margin-left:-.04rem;
  background: url("../img/test-person-head.jpg")center center no-repeat;
  background-size: .22rem .22rem;
  border-radius: 1rem;
}
.person-head-2{
  width: .22rem;
  height: .22rem;
  margin-left:-.04rem;
  background: url("../img/time-logo.jpg")center center no-repeat;
  background-size: .22rem .22rem;
  border-radius: 1rem;
}
.person-head-3{
  width: .22rem;
  height: .22rem;
  margin-left:-.04rem;
  background: url("../img/test-task-image.jpg")center center no-repeat;
  background-size: .22rem .22rem;
  border-radius: 1rem;
}

2020/x-3/task-detail.html

@@ -33,13 +33,43 @@
    </div>
  <div class="ipu-flex pages-task-list">
    <div class="ipu-flex-col">
      <div class="">123</div>
      <div class="">456</div>
    <div class="ipu-flex pages-task-list-width">
      <div class="executor-image"></div>
      <div class="ipu-flex pages-task-list-width">
        <div class="ipu-flex ipu-flex-vertical ">
          <div class="executor-title">执行人</div>
          <div class="executor-name">鲁晓峰</div>
        </div>
        <div class="ipu-flex ipu-flex-vertical ">
          <div class="executor-title">参与者</div>
          <div class="ipu-flex pages-task-list-width">
            <div class="ipu-flex">
              <div class="person-head-1"></div>
              <div class="person-head-2"></div>
              <div class="person-head-3"></div>
              <div class="person-head-2"></div>
            </div>
            <div class="participant-number">+57</div>
          </div>
        </div>
      </div>
    </div>
    <div class="ipu-flex-col-auto pages-task-list-2">
      <div>456</div>
      <div>789</div>
  </div>
  <div class="ipu-flex pages-task-list">
    <div class="ipu-flex pages-task-list-width">
      <div class="time-image"></div>
      <div class="ipu-flex pages-task-list-width">
        <div class="ipu-flex ipu-flex-vertical">
          <div class="executor-title">开始时间</div>
          <div class="executor-name">昨天10:20</div>
        </div>
        <div class="ipu-flex ipu-flex-vertical">
          <div class="executor-title">截止时间</div>
          <div class="executor-name">今天12:00</div>
        </div>
      </div>
    </div>
  </div>
@@ -48,13 +78,13 @@
  </div>
  <div class="pages-task-image-list ipu-flex">
    <div class="pages-task-image"></div>
    <div class="pages-task-image"></div>
    <div class="pages-task-image-1"></div>
    <div class="pages-task-image-2"></div>
  </div>
  <div class="task-notes">
  <div class="ipu-flex-col ipu-flex-col-auto task-notes">
    <div class="ipu-flex task-note">
      <img class="ipu-flex-grow-0 note-user-avatar" src="temp/1.png" alt="">
      <img class="ipu-flex-grow-0 note-user-avatar" src="biz/img/test-task-image.jpg" alt="">
      <div class="ipu-flex-grow-1">
        <div class="ipu-flex ">
          <div class="ipu-flex-grow-1 task-note-user-name">孙欢欢</div>
@@ -65,10 +95,9 @@
        </div>
      </div>
    </div>
  </div>
  <div class="ipu-flex-col task-note-input-body">
    <div class="task-note-input-wrap ipu-fn-bd-t">
      <input type="text" class="task-note-input" placeholder="输入评论内容，@通知其他人"/>