Strona główna Odkrywaj Pomoc
Zaloguj się
asiainfo
/
static
Obserwuj 2
Polub 0
Forkuj 0
Kod Problemy 0 Oczekujące zmiany 0 Commity 2068 Wydania 4 Wiki
Przeglądaj źródła

短视频页面静态页面优化

guohh 4 lat temu
rodzic
db9c6862e3
commit
a108ad3d73
6 zmienionych plików z 182 dodań i 127 usunięć
Zunifikowany widok Pokaż statystyki zmian
  1. 66 2
      2020/short-video-ui/biz/css/base.css
  2. 3 1
      2020/short-video-ui/biz/js/page/video-search.js
  3. 1 1
      2020/short-video-ui/index.html
  4. 1 1
      2020/short-video-ui/video-add-label.html
  5. 2 2
      2020/short-video-ui/video-add.html
  6. 109 120
      2020/short-video-ui/video-search.html

+ 66 - 2
2020/short-video-ui/biz/css/base.css
Wyświetl plik

323 
}
 323 
}
324
324
325 
.video-common-list .ipu-switch input {
 325 
.video-common-list .ipu-switch input {
326 
  width: .3rem;
326 
  width: .29rem;
327 
  height: .15rem;
 327 
  height: .15rem;
328 
}
 328 
}
329
329
330 
.video-common-list .ipu-switch input:after {
 330 
.video-common-list .ipu-switch input:after {
331 
  width: .13rem;
 331 
  width: .13rem;
332 
  height: .13rem;
 332 
  height: .13rem;
333 
  left: .01rem;
334 
  box-shadow: none;
335 
}
336
337 
.video-common-list .ipu-switch input:before {
338 
  background-color: rgb(217, 217, 217);
333 
}
 339 
}
334
340
335 
.video-common-list .ipu-switch input:checked:before {
 341 
.video-common-list .ipu-switch input:checked:before {
339 
}
 345 
}
340
346
341 
.video-common-list .ipu-switch input:checked:after {
 347 
.video-common-list .ipu-switch input:checked:after {
342 
  left: .165rem;
348 
  left: .155rem;
343 
}
 349 
}
344
350
345 
.sy-switch-note {
 351 
.sy-switch-note {
473
479
474 
.label-input-block {
 480 
.label-input-block {
475 
  margin-top: .1rem;
 481 
  margin-top: .1rem;
482 
}
483
484 
.no-result-msg {
485 
  text-align: center;
486 
  color: #666;
487 
  padding: .1rem;
488 
  margin-top: .1rem;
489 
  font-size: .13rem;
490 
  display: none;
491 
}
492
493 
.pages-video-search-content {
494 
  z-index: 1;
495 
}
496
497 
.search-history-block {
498 
  position: absolute;
499 
  top: 1.1rem;
500 
  left: 0;
501 
  right: 0;
502 
  bottom: 0;
503 
  background-color: #fff;
504 
  display: none;
505 
  z-index: 11;
506 
}
507
508 
.state-search-input .search-history-block {
509 
  display: block;
510 
}
511
512 
.search-history-head {
513 
  font-size: .14rem;
514 
  color: rgba(0, 0, 0, .85);
515 
  line-height: 1;
516 
  padding-left: .12rem;
517 
}
518
519 
.search-history-clear {
520 
  color: rgba(0, 0, 0, .45);
521 
  font-size: .2rem;
522 
  width: .4rem;
523 
  text-align: center;
524 
}
525
526 
.search-history-list {
527 
  padding: .1rem .07rem;
528 
  overflow: auto;
529 
}
530
531 
.search-history-list label {
532 
  float: left;
533 
  padding: .1rem;
534 
  font-size: .12rem;
535 
  color: rgba(0, 0, 0, .65);
536 
  line-height: 1;
537 
  background-color: #f7f7f7;
538 
  border-radius: .06rem;
539 
  margin: .05rem;
476 
}
 540 
}

+ 3 - 1
2020/short-video-ui/biz/js/page/video-search.js
Wyświetl plik

20
20
21 
      $(".common-search-input", this).focus(function () { // 输入框激活时
 21 
      $(".common-search-input", this).focus(function () { // 输入框激活时
22 
        $(obj).addClass("common-search-active");
 22 
        $(obj).addClass("common-search-active");
23 
        $("body").addClass("state-search-input");
23 
      });
 24 
      });
24
25
25 
      $(".common-search-input", this).blur(function () { // 输入框未激活时
 26 
      $(".common-search-input", this).blur(function () { // 输入框未激活时
43 
      countNo++;
 44 
      countNo++;
44 
      myRefresh.enableBottom(true);
 45 
      myRefresh.enableBottom(true);
45 
      myRefresh.refresh();
 46 
      myRefresh.refresh();
47 
      $("body").removeClass("state-search-input");
46 
    });
 48 
    });
47
49
48 
    var totalPage = 3;  // 总页数
50 
    var totalPage = 2;  // 总页数
49 
    var nowPage = 1;    // 当前显示第几页，因为默认有一些数据了，所以为1
 51 
    var nowPage = 1;    // 当前显示第几页，因为默认有一些数据了，所以为1
50 
    var rootEl = $("#refresh-video-list");
 52 
    var rootEl = $("#refresh-video-list");
51 
    var listObj = $("ul", rootEl);
 53 
    var listObj = $("ul", rootEl);

+ 1 - 1
2020/short-video-ui/index.html
Wyświetl plik

33 
                  <a class="ipu-fn-right link-to-search" href="javascript:;">
 33 
                  <a class="ipu-fn-right link-to-search" href="javascript:;">
34 
                    <i class="ipu-icon mdi mdi-magnify"></i>
 34 
                    <i class="ipu-icon mdi mdi-magnify"></i>
35 
                  </a>
 35 
                  </a>
36 
                  <h1 class="ipu-toolbar-title">视频</h1>
36 
                  <h1 class="ipu-toolbar-title">首页</h1>
37 
                </header>
 37 
                </header>
38 
              </div>
 38 
              </div>
39
39

+ 1 - 1
2020/short-video-ui/video-add-label.html
Wyświetl plik

40 
        </div>
 40 
        </div>
41 
      </div>
 41 
      </div>
42 
      <div class="video-label-recomm">
 42 
      <div class="video-label-recomm">
43 
        <div class="video-label-recomm-title">推荐标签</div>
43 
        <div class="video-label-recomm-title">历史标签</div>
44 
        <div class="video-label-recomm-labels ">
 44 
        <div class="video-label-recomm-labels ">
45 
          <label  class="label">标签内容</label>
 45 
          <label  class="label">标签内容</label>
46 
          <label class="label">标签内容</label>
 46 
          <label class="label">标签内容</label>

+ 2 - 2
2020/short-video-ui/video-add.html
Wyświetl plik

72 
              </div>
 72 
              </div>
73 
            </div>
 73 
            </div>
74 
          </li>
 74 
          </li>
75 
          <li class="ipu-list-item list-item-sy">
75 
        <!--  <li class="ipu-list-item list-item-sy">
76 
            <div class="ipu-list-item-inner ipu-flex-vertical">
 76 
            <div class="ipu-list-item-inner ipu-flex-vertical">
77 
              <div class="ipu-flex">
 77 
              <div class="ipu-flex">
78 
                <div class="ipu-list-item-label">
 78 
                <div class="ipu-list-item-label">
93 
                </div>
 93 
                </div>
94 
              </div>
 94 
              </div>
95 
            </div>
 95 
            </div>
96 
          </li>
96 
          </li>-->
97 
          <li>
 97 
          <li>
98 
            <a href="" class="ipu-list-item ipu-list-item-link list-item-label">
 98 
            <a href="" class="ipu-list-item ipu-list-item-link list-item-label">
99 
              <div class="ipu-list-item-inner">
 99 
              <div class="ipu-list-item-inner">

+ 109 - 120
2020/short-video-ui/video-search.html
Wyświetl plik

13 
  <script src="biz/js/require-config.js"></script>
 13 
  <script src="biz/js/require-config.js"></script>
14 
  <script src="biz/js/page/video-search.js"></script>
 14 
  <script src="biz/js/page/video-search.js"></script>
15 
</head>
 15 
</head>
16 
<body class="pages-video pages-video-search">
16 
<body class="pages-video pages-video-search state-search-input">
17 
<div class="ipu-flex-row ipu-flex-vertical">
 17 
<div class="ipu-flex-row ipu-flex-vertical">
18
18
19 
  <div class="ipu-flex-col">
 19 
  <div class="ipu-flex-col">
30 
      <div class="ipu-flex common-search-content">
 30 
      <div class="ipu-flex common-search-content">
31 
        <div class="ipu-flex-center-middle  common-search-tip">
 31 
        <div class="ipu-flex-center-middle  common-search-tip">
32 
          <i class="common-search-icon mdi mdi-magnify"></i>
 32 
          <i class="common-search-icon mdi mdi-magnify"></i>
33 
          <!--<span class="common-search-tip-msg">搜索</span>-->
34 
        </div>
 33 
        </div>
35
34
36 
        <div class="ipu-flex-grow-1 common-search-wrap">
 35 
        <div class="ipu-flex-grow-1 common-search-wrap">
39 
        <i class="ipu-flex-grow-0 common-search-input-clear mdi mdi-close-circle"></i>
 38 
        <i class="ipu-flex-grow-0 common-search-input-clear mdi mdi-close-circle"></i>
40 
      </div>
 39 
      </div>
41 
    </div>
 40 
    </div>
42
43 
    <!---->
44 
  </div>
 41 
  </div>
45 
  <div class="ipu-flex-col ipu-flex-col-auto">
42
43 
  <div class="ipu-flex-col ipu-flex-col-auto pages-video-search-content">
46 
    <div class="ipu-flex-content" id="refresh-video-list">
 44 
    <div class="ipu-flex-content" id="refresh-video-list">
47 
      <div class="ipu-refresh-wrapper">
 45 
      <div class="ipu-refresh-wrapper">
48 
        <div class="video-list ipu-list ipu-list-media">
49 
          <ul>
50 
            <li>
51 
              <a class="ipu-list-item ipu-list-item-link">
52 
                <div class="ipu-list-item-media">
53 
                  <img src="biz/img/01.jpg" alt="">
54 
                </div>
55 
                <div class="ipu-list-item-inner">
56 
                  <div class="ipu-list-item-title-row">
57 
                    <div class="ipu-list-item-title">
58 
                      视频名称(建议10字以内)
59 
                    </div>
60 
                    <div class="ipu-list-item-after">
61 
                      1:16
46 
        <div class="ipu-refresh-content">
47 
          <div class="video-list ipu-list ipu-list-block ipu-list-media">
48 
            <ul>
49 
              <li>
50 
                <a class="ipu-list-item">
51 
                  <div class="ipu-list-item-media">
52 
                    <div class="item-img-wrap">
53 
                      <img class="item-img" src="biz/img/01.jpg" alt="">
54 
                      <div class="video-time"> 1:16</div>
62 
                    </div>
 55 
                    </div>
63 
                  </div>
 56 
                  </div>
64 
                  <div class="item-content-inner">
65 
                    <div class="ipu-list-item-text">
66 
                      <label>上传者：</label>张大龙
57 
                  <div class="ipu-list-item-inner">
58 
                    <div class="ipu-list-item-title-row">
59 
                      <div class="ipu-list-item-title ipu-fn-row-2">
60 
                        视频名称 视频名称 视频名称 视频名称 视频名称 视频名称 视频名称 视频名称
61 
                      </div>
62 
                    </div>
63 
                    <div class="item-content-inner">
64 
                      <div class="ipu-list-item-text">
65 
                        <label>上传者：</label>张大龙
66 
                      </div>
67 
                      <div class="ipu-list-item-text">
68 
                        <label>更新时间：</label>2020-09-01 12:00
69 
                      </div>
67 
                    </div>
 70 
                    </div>
68 
                    <div class="ipu-list-item-text">
69 
                      <label>更新时间：</label>2020-09-01 12:00
70 
                    </div>
71 
                  </div>
72 
                  <div class="ipu-list-item-text">
73 
                    <label>标签：</label>
74 
                    <span class="label">游戏</span>
75 
                    <span class="label">魔兽世界</span>
76 
                    <span class="label">ICC</span>
77 
                  </div>
 71 
                  </div>
78 
                </div>
79 
              </a>
80 
             </li>
81 
            <li>
82 
              <a class="ipu-list-item ipu-list-item-link">
83 
                <div class="ipu-list-item-media">
84 
                  <img src="biz/img/01.jpg" alt="">
85 
                </div>
86 
                <div class="ipu-list-item-inner">
87 
                  <div class="ipu-list-item-title-row">
88 
                    <div class="ipu-list-item-title">
89 
                      视频名称视频名称视频
90 
                    </div>
91 
                    <div class="ipu-list-item-after">
92 
                      1:16
72 
                </a>
73 
              </li>
74 
              <li>
75 
                <a class="ipu-list-item ">
76 
                  <div class="ipu-list-item-media">
77 
                    <div class="item-img-wrap">
78 
                      <img class="item-img" src="biz/img/01.jpg" alt="">
79 
                      <div class="video-time"> 1:16</div>
93 
                    </div>
 80 
                    </div>
94 
                  </div>
 81 
                  </div>
95 
                  <div class="item-content-inner">
96 
                    <div class="ipu-list-item-text">
97 
                      <label>上传者：</label>张大龙
98 
                    </div>
99 
                    <div class="ipu-list-item-text">
100 
                      <label>更新时间：</label>2020-09-01 12:00
82 
                  <div class="ipu-list-item-inner">
83 
                    <div class="ipu-list-item-title-row">
84 
                      <div class="ipu-list-item-title ipu-fn-row-2">
85 
                        视频名称视频名称视频
86 
                      </div>
87 
                    </div>
88 
                    <div class="item-content-inner">
89 
                      <div class="ipu-list-item-text">
90 
                        <label>上传者：</label>张大龙
91 
                      </div>
92 
                      <div class="ipu-list-item-text">
93 
                        <label>更新时间：</label>2020-09-01 12:00
94 
                      </div>
101 
                    </div>
 95 
                    </div>
102 
                  </div>
 96 
                  </div>
103 
                  <div class="ipu-list-item-text">
104 
                    <label>标签：</label>
105 
                    <span class="label">漫游</span>
106 
                  </div>
107 
                </div>
108 
              </a>
109 
            </li>
110 
            <li>
111 
              <a class="ipu-list-item ipu-list-item-link">
112 
                <div class="ipu-list-item-media">
113 
                  <img src="biz/img/01.jpg" alt="">
114 
                </div>
115 
                <div class="ipu-list-item-inner">
116 
                  <div class="ipu-list-item-title-row">
117 
                    <div class="ipu-list-item-title">
118 
                      视频名称(建议10字以内)
119 
                    </div>
120 
                    <div class="ipu-list-item-after">
121 
                      1:16
97 
                </a>
98 
              </li>
99 
              <li>
100 
                <a class="ipu-list-item ">
101 
                  <div class="ipu-list-item-media">
102 
                    <div class="item-img-wrap">
103 
                      <img class="item-img" src="biz/img/01.jpg" alt="">
104 
                      <div class="video-time"> 1:16</div>
122 
                    </div>
 105 
                    </div>
123 
                  </div>
 106 
                  </div>
124 
                  <div class="item-content-inner">
125 
                    <div class="ipu-list-item-text">
126 
                      <label>上传者：</label>张大龙
107 
                  <div class="ipu-list-item-inner">
108 
                    <div class="ipu-list-item-title-row">
109 
                      <div class="ipu-list-item-title ipu-fn-row-2">
110 
                        视频名称
111 
                      </div>
112 
                    </div>
113 
                    <div class="item-content-inner">
114 
                      <div class="ipu-list-item-text">
115 
                        <label>上传者：</label>张大龙
116 
                      </div>
117 
                      <div class="ipu-list-item-text">
118 
                        <label>更新时间：</label>2020-09-01 12:00
119 
                      </div>
127 
                    </div>
 120 
                    </div>
128 
                    <div class="ipu-list-item-text">
129 
                      <label>更新时间：</label>2020-09-01 12:00
130 
                    </div>
131 
                  </div>
132 
                  <div class="ipu-list-item-text">
133 
                    <label>标签：</label>
134 
                  </div>
 121 
                  </div>
135 
                </div>
136 
              </a>
137 
             </li>
138 
            <li>
139 
              <a class="ipu-list-item">
140 
                <div class="ipu-list-item-media">
141 
                  <img src="biz/img/01.jpg" alt="">
142 
                </div>
143 
                <div class="ipu-list-item-inner">
144 
                  <div class="ipu-list-item-title-row">
145 
                    <div class="ipu-list-item-title">
146 
                      视频名称视频名称视频
147 
                    </div>
148 
                    <div class="ipu-list-item-after">
149 
                      1:16
122 
                </a>
123 
              </li>
124 
              <li>
125 
                <a class="ipu-list-item">
126 
                  <div class="ipu-list-item-media">
127 
                    <div class="item-img-wrap">
128 
                      <img class="item-img" src="biz/img/01.jpg" alt="">
129 
                      <div class="video-time"> 1:16</div>
150 
                    </div>
 130 
                    </div>
151 
                  </div>
 131 
                  </div>
152 
                  <div class="item-content-inner">
153 
                    <div class="ipu-list-item-text">
154 
                      <label>上传者：</label>张大龙
132 
                  <div class="ipu-list-item-inner">
133 
                    <div class="ipu-list-item-title-row">
134 
                      <div class="ipu-list-item-title ipu-fn-row-2">
135 
                        视频名称视频名称视频
136 
                      </div>
137 
                    </div>
138 
                    <div class="item-content-inner">
139 
                      <div class="ipu-list-item-text">
140 
                        <label>上传者：</label>张大龙
141 
                      </div>
142 
                      <div class="ipu-list-item-text">
143 
                        <label>更新时间：</label>2020-09-01 12:00
144 
                      </div>
155 
                    </div>
 145 
                    </div>
156 
                    <div class="ipu-list-item-text">
157 
                      <label>更新时间：</label>2020-09-01 12:00
158 
                    </div>
159 
                  </div>
160 
                  <div class="ipu-list-item-text">
161 
                    <label>标签：</label>
162 
                    <span class="label">漫游</span>
163 
                  </div>
 146 
                  </div>
164 
                </div>
165 
              </a>
166 
            </li>
167 
          </ul>
147 
                </a>
148 
              </li>
149 
            </ul>
150 
          </div>
151 
          <div class="no-result-msg">无数据</div>
168 
        </div>
 152 
        </div>
169 
      </div>
 153 
      </div>
170 
    </div>
 154 
    </div>
171 
  </div>
 155 
  </div>
172
156
173 
  <!--<div class="search-history">
174 
    <div class="hot-words">
175 
      <div class="title">
176 
        <a href="javascript:;" class="search-history-clear">清空</a>
157 
  <div class="search-history-block">
158 
    <div class="ipu-flex-middle ipu-flex-justify-space search-history-head">
159 
      <div class="search-history-title">
177 
        搜索历史
 160 
        搜索历史
178 
      </div>
 161 
      </div>
179 
      <div class="history-key">
180 
        <label>4G</label>
181 
        <label>移动营业厅</label>
182 
        <label>业务办理</label>
183 
        <label>统计分析</label>
184 
      </div>
162 
      <a href="javascript:;" class="search-history-clear">
163 
        <i class="mdi mdi-delete-outline"></i>
164 
      </a>
185 
    </div>
 165 
    </div>
186 
  </div>-->
166 
    <div class="search-history-list">
167 
      <label>4G</label>
168 
      <label>移动营业厅</label>
169 
      <label>业务办理</label>
170 
      <label>统计分析</label>
171 
      <label>移动营业厅</label>
172 
      <label>业务办理</label>
173 
      <label>统计分析</label>
174 
    </div>
175 
  </div>
187
176
188 
</div>
 177 
</div>
189 
</body>
 178 
</body>