短视频页面隐藏标签，新设计稿页面提交

2020/short-video-ui/biz/css/base.css

@@ -2,6 +2,74 @@
  padding-bottom: .1rem;
}
.common-search {
  padding: .15rem;
  background-color: #fff;
}
.common-search-content {
  position: relative;
  background: #f7f7f7;
  border-radius: 0.18rem;
  overflow: hidden;
}
.common-search-input {
  display: block;
  width: 100%;
  -webkit-appearance: none;
  border: none;
  font-size: 0.12rem;
  line-height: 0.16rem;
  padding: .11rem .4rem .09rem .35rem;
  color: #666;
  background-color: transparent;
}
.common-search-tip {
  position: absolute;
  top: .08rem;
  left: .1rem;
  width: auto;
  font-size: 0.14rem;
  font-weight: 400;
  color: #B9BFC6;
  line-height: 0.24rem;
  text-align: center;
}
.common-search-input-clear {
  display: none;
  right: 0;
  top: 0;
  position: absolute;
  font-size: .15rem;
  width: .4rem;
  height: .4rem;
  text-align: center;
  color: rgba(0, 0, 0, .4);
  line-height: .4rem;
}
.common-search-icon {
  margin-right: .05rem;
  font-size: .2rem;
}
.common-search-value .common-search-tip-msg {
  display: none;
}
.common-search-value .common-search-tip,
.common-search-active .common-search-tip {
  left: .1rem;
  width: auto;
}
.common-search-value .common-search-input-clear {
  display: block;
}
.pages-video {
  font-family: PingFangSC;
  background-color: #fff;
@@ -255,7 +323,7 @@
}
.video-common-list .ipu-switch input {
  width: .32rem;
  width: .3rem;
  height: .15rem;
}
@@ -278,4 +346,131 @@
  font-size: .12rem;
  color: rgba(0, 0, 0, .25);
  line-height: 1;
}
.list-item-sy .ipu-list-item-inner {
  overflow: visible;
}
.video-sy-block {
  margin: .12rem -.12rem -.12rem;
  padding: .12rem;
  background-color: rgba(0, 0, 0, .04);
}
.video-sy-block .sy-img-title {
  font-size: .12rem;
  color: rgba(0, 0, 0, .85);
  line-height: 1;
}
.video-sy-block .sy-slt-icon {
  margin-top: .12rem;
  line-height: 1;
  font-size: .4rem;
  color: rgba(0, 0, 0, .65);
}
.list-nowrap-border.ipu-list > ul:before,
.list-nowrap-border.ipu-list > ul:after {
  content: none;
}
.video-upload-play {
  height: 2.13rem;
  background-color: #eee;
  margin-bottom: .08rem;
}
.sy-img-display .sy-img-result {
  display: block;
  width: .4rem;
  height: .4rem;
}
.video-desc-limit-num {
  text-align: right;
  font-size: .08rem;
  color: rgba(0, 0, 0, 0.25);
  line-height: 1;
}
.list-item-vido-desc .ipu-list-item-textarea {
  height: 1.12rem;
}
.upload-video-add-labels {
  overflow: auto;
  margin: 0.05rem -0.05rem;
}
.upload-video-add-labels .label-item {
  background: #0083D3;
  border-radius: .04rem;
  color: #fff;
  font-size: .12rem;
  line-height: .2rem;
  padding: 0 0 0 .08rem;
  float: left;
  margin: .05rem;
}
.pages-video-add-label .common-page-content {
  margin: 0 .12rem;
}
.upload-video-add-labels .label-item .close-icon {
  padding-left: .07rem;
  padding-right: .08rem;
}
.video-label-input {
  -webkit-appearance: none;
  display: block;
  width: 100%;
  border-radius: .09rem;
  background-color: #f7f7f7;
  color: rgba(0, 0, 0, .85);
  font-size: .12rem;
  line-height: .18rem;
  padding: .09rem .18rem;
  border: none;
}
.video-label-limit {
  margin-left: .12rem;
  font-size: .12rem;
  color: rgba(0, 0, 0, .25);
  line-height: .36rem;
}
.video-label-recomm-title {
  font-size: .14rem;
  color: rgba(0, 0, 0, .85);
  line-height: 1;
}
.video-label-recomm-labels {
  margin: 0 -.05rem;
  overflow: auto;
  margin-top: .13rem;
}
.video-label-recomm-labels .label {
  background: #F7F7F7;
  border-radius: .04rem;
  font-size: .12rem;
  color: rgba(0, 0, 0, .65);
  line-height: .2rem;
  padding: 0 .08rem;
  margin: .05rem;
  float: left;
}
.video-label-recomm {
  margin-top: .2rem;
}
.label-input-block {
  margin-top: .1rem;
}

2020/short-video-ui/biz/js/page/video-add-label.js

@@ -0,0 +1,70 @@
require(["ipuUI", "jquery"], function (ipuUI, $) {
  $.sizeReady(function () {
    // 扩展jquery增加一个回车的回调，不好的方便，不能取消绑定事件
    $.fn.enter = function (back) {
      $(this).on("keydown", function (e) { // 输入框是否有值
        if (e.which == '13') {  // 回车事件
          back.call(this);
        }
      });
      return this;
    };
    var labels = [];  // 已添加的标签数组
    // 输入框回车添加标签
    $(".video-label-input").enter(function () {
      var inputLabel = $.trim($(this).val());
      if (checkLabelSize() && inputLabel != "") {
        addLabel(inputLabel);
        $(this).val("");   // 清空输入
      }
    });
    // 删除已添加标签
    $(".upload-video-add-labels").on("click", ".label-item", function () {
      $(this).remove();
      labels.splice( $(this).index(), 1);   // 更新数组
      updateLabelSize();
    });
    // 添加标签
    function addLabel(labelStr) {
      if (labels.indexOf(labelStr) == -1) {
        labels.push(labelStr);
        // templates:es6特性， 兼容性：ios9+与android4.4+
        var labelHtml = `<label class="ipu-flex ipu-flex-align-center label-item">
                          ${labelStr} <i class="close-icon mdi mdi-close"></i>
                        </label>`;
        $(labelHtml).appendTo(".upload-video-add-labels");
        updateLabelSize();
      } else {
        ipuUI.toast('该标签已添加');
      }
    }
    // 更新标签数量
    function updateLabelSize() {
      $(".video-label-num").text(labels.length);
    }
    // 检验标签数量
    function checkLabelSize() {
      if (labels.length >= 5) {
        ipuUI.toast("最多只能添加5个标签");
        return false;
      } else {
        return true;
      }
    }
    // 点击推荐标签
    $(".video-label-recomm-labels").on("click", ".label", function () {
      if (checkLabelSize()) {
        addLabel($.trim($(this).text()));
      }
    });
  });
});

2020/short-video-ui/video-add-label.html

@@ -0,0 +1,57 @@
<!DOCTYPE html>
<html>
<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="ipu/lib/mdi/css/mdi.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/video-add-label.js"></script>
</head>
<body class="pages-video pages-video-add-label">
<div class="ipu-flex-row ipu-flex-vertical">
  <div class="ipu-flex-col">
    <header class="ipu-toolbar">
      <a class="ipu-fn-left page-back" href="javascript:history.back();">
        <i class="ipu-icon mdi mdi-chevron-left"></i>
      </a>
      <div class="ipu-fn-right">
        完成
      </div>
      <h1 class="ipu-toolbar-title">添加标签</h1>
    </header>
  </div>
  <div class="ipu-flex-col ipu-flex-col-auto">
    <div class="common-page-content">
      <div class="upload-video-add-labels">
      </div>
      <div class="ipu-flex label-input-block">
        <div class="ipu-flex-grow-1 video-label-input-wrap">
          <input type="text" class="video-label-input" placeholder="请输入标签名称">
        </div>
        <div class="ipu-flex-grow-0 video-label-limit">
          <span class="video-label-num">0</span>/5
        </div>
      </div>
      <div class="video-label-recomm">
        <div class="video-label-recomm-title">推荐标签</div>
        <div class="video-label-recomm-labels ">
          <label  class="label">标签内容</label>
          <label class="label">标签内容</label>
          <label class="label">标签内容</label>
          <label class="label">标签内容</label>
          <label class="label">标签内容</label>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>

2020/short-video-ui/video-add.html

@@ -30,127 +30,81 @@
    </header>
  </div>
  <div class="ipu-flex-col ipu-flex-col-auto">
    <div class="ipu-list ipu-list-form video-common-list">
      <ul>
        <li class="ipu-list-item">
          <div class="ipu-list-item-inner">
            <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">
            <div class="ipu-list-item-label">
              视频简介
            </div>
            <div class="ipu-list-item-input-wrap">
              <textarea class="ipu-list-item-textarea" rows="6" placeholder="请填写简介"></textarea>
            </div>
          </div>
        </li>
        <li class="ipu-list-item">
          <div class="ipu-list-item-inner">
            <div class="ipu-list-item-label">
              是否公开
    <div class="common-page-content">
      <div class="video-upload-play">
        视频区域
      </div>
      <div class="ipu-list ipu-list-form video-common-list list-nowrap-border">
        <ul>
          <li class="ipu-list-item">
            <div class="ipu-list-item-inner">
              <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>
            <div class="ipu-list-item-input-wrap ipu-flex ipu-flex-justify-end">
              <label class="ipu-switch">
                <input class="ipu-switch-input" type="checkbox">
              </label>
          </li>
          <li class="ipu-list-item list-item-vido-desc">
            <div class="ipu-list-item-inner">
              <div class="ipu-list-item-label">
                视频简介
              </div>
              <div class="ipu-list-item-input-wrap">
                <textarea class="ipu-list-item-textarea" rows="6" placeholder="请填写简介"></textarea>
                <div class="video-desc-limit-num">
                  <sapn class="video-desc-num">0</sapn>
                  /250
                </div>
              </div>
            </div>
          </div>
        </li>
        <li class="ipu-list-item">
          <div class="">
          </li>
          <li class="ipu-list-item">
            <div class="ipu-list-item-inner">
              <div class="ipu-list-item-label">
                添加水印
                是否公开
              </div>
              <div class="ipu-list-item-input-wrap ipu-flex ipu-flex-justify-space">
                <div class="sy-switch-note">水印将展示在视频右上角</div>
              <div class="ipu-list-item-input-wrap ipu-flex ipu-flex-justify-end">
                <label class="ipu-switch">
                  <input class="ipu-switch-input" type="checkbox">
                </label>
              </div>
            </div>
            <div class="">
              新的内容
            </div>
          </div>
        </li>
        <li class="ipu-list-item">
          <div class="ipu-list-item-inner">
            <div class="ipu-list-item-label">
              水印图片：
            </div>
            <div class="ipu-list-item-input-wrap">
              <input class="ipu-list-item-input" type="text" placeholder="请选择" readonly>
            </div>
          </div>
        </li>
        <li class="ipu-list-item">
          <div class="ipu-list-item-inner">
            <div class="ipu-list-item-label">
            </div>
            <div class="ipu-list-item-input-wrap">
              <img class="form-input-img" src="temp/01.jpg" alt=""/>
            </div>
          </div>
        </li>
        <li class="ipu-list-item">
          <div class="ipu-list-item-inner">
            <div class="ipu-list-item-label">
              水印位置：
            </div>
            <div class="ipu-list-item-input-wrap">
              <input class="ipu-list-item-input" type="text" placeholder="请选择" readonly>
            </div>
          </div>
        </li>
        <li class="ipu-list-item">
          <div class="ipu-list-item-inner">
            <div class="ipu-list-item-label">
              <span class="form-label-required">*</span>
              视频名称：
            </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">
            <div class="ipu-list-item-label">
              <span class="form-label-required">*</span>
              是否公开：
            </div>
            <div class="ipu-list-item-input-wrap">
              <label class="ipu-switch">
                <input class="ipu-switch-input" type="checkbox">
              </label>
            </div>
          </div>
        </li>
        <li class="ipu-list-item">
          <div class="ipu-list-item-inner">
            <div class="ipu-list-item-label">
              标签(空格分隔)：
            </div>
            <div class="ipu-list-item-input-wrap">
              <textarea class="ipu-list-item-textarea" placeholder="请输入">游戏 魔兽世界 ICC 魔兽 剑圣</textarea>
          </li>
          <li class="ipu-list-item list-item-sy">
            <div class="ipu-list-item-inner ipu-flex-vertical">
              <div class="ipu-flex">
                <div class="ipu-list-item-label">
                  添加水印
                </div>
                <div class="ipu-list-item-input-wrap ipu-flex ipu-flex-justify-space">
                  <div class="sy-switch-note">水印将展示在视频右上角</div>
                  <label class="ipu-switch">
                    <input class="ipu-switch-input" type="checkbox">
                  </label>
                </div>
              </div>
              <div class="ipu-flex ipu-flex-vertical video-sy-block">
                <div class="sy-img-title">水印图片</div>
                <div class="sy-img-display">
                  <i class="mdi mdi-image-plus sy-slt-icon"></i>
                  <img src="temp/01.jpg" alt="" class="sy-img-result">
                </div>
              </div>
            </div>
          </div>
         </li>
      </ul>
    </div>
  </div>
  <div class="ipu-flex-col">
    <div class="ipu-fn-m">
      <button class="ipu-btn ipu-btn-l ipu-btn-block">发布</button>
          </li>
           <li>
            <a href="" class="ipu-list-item ipu-list-item-link list-item-label">
              <div class="ipu-list-item-inner">
                <div class="ipu-list-item-label">
                  标签
                </div>
              </div>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>

2020/short-video-ui/video-search.html

@@ -13,7 +13,7 @@
  <script src="biz/js/require-config.js"></script>
  <script src="biz/js/page/video-search.js"></script>
</head>
<body class="pages-video-search">
<body class="pages-video pages-video-search">
<div class="ipu-flex-row ipu-flex-vertical">
  <div class="ipu-flex-col">
@@ -30,11 +30,11 @@
      <div class="ipu-flex common-search-content">
        <div class="ipu-flex-center-middle  common-search-tip">
          <i class="common-search-icon mdi mdi-magnify"></i>
          <span class="common-search-tip-msg">搜索</span>
          <!--<span class="common-search-tip-msg">搜索</span>-->
        </div>
        <div class="ipu-flex-grow-1 common-search-wrap">
          <input class="common-search-input" placeholder="">
          <input class="common-search-input" placeholder="请输入搜索内容">
        </div>
        <i class="ipu-flex-grow-0 common-search-input-clear mdi mdi-close-circle"></i>
      </div>

2020/short-video/biz/css/base.css

@@ -13,6 +13,7 @@
  width: 50%;
  float: left;
}
li.swipe-actions-wrapper {
  width: auto;
}
@@ -119,7 +120,7 @@ li.swipe-actions-wrapper {
.video-list .ipu-list-item-media img {
  position: relative;
  display: block;
  width: 1.2rem;
  width: 1.4rem;
  height: .8rem;
}
@@ -137,6 +138,7 @@ li.swipe-actions-wrapper {
.video-list .ipu-list-item-text {
  font-size: .1rem;
  color: #999;
  margin-top: .03rem;
}
.video-list .ipu-list-item-text .label {
@@ -147,7 +149,7 @@ li.swipe-actions-wrapper {
}
.video-list .item-content-inner {
  padding: .02rem 0 .03rem;
  padding: .05rem 0 .03rem;
}
.video-list .ipu-list-item-text .label + .label {
@@ -229,4 +231,8 @@ li.swipe-actions-wrapper {
  line-height: 1.1;
  color: #a3a4aa;
  margin-top: 0.2rem;
}
.video-list .ipu-list-item-inner > .ipu-list-item-text {
  display: none;
}