公告消息页面提交

2021/ng-srb/biz/css/base-lxp.css

@@ -329,6 +329,11 @@
  margin-bottom: .1rem;
}
.feedback-card-reporter,
.feedback-card-leader {
  padding: 0;
}
.feedback-card-content {
  margin: 0 .15rem;
}
@@ -338,6 +343,15 @@
  margin: 0 .185rem;
}
.feedback-card-reporter .feedback-card-content,
.feedback-card-leader .feedback-card-content {
  margin: 0;
}
.ipu-list-item-inner {
  margin: 0 .15rem;
}
.feedback-card-name {
  color: #333333;
  font-weight: bold;
@@ -583,3 +597,187 @@
  height: 1.12rem;
  background: url(../img/feedback-detail-adopted.png) center/1.13rem no-repeat;
}
/* 公告 */
.notice-search {
  padding: .1rem .18rem;
  background: #F5F5F5;
}
.notice-search-content {
  position: relative;
  height: 100%;
}
.notice-search-content input {
  width: 100%;
  border: 0;
  margin: 0;
  padding: 0 .35rem;
  font-size: .12rem;
  font-weight: 500;
  line-height: .32rem;
  background: #FFFFFF;
  border: 1px solid #EBEBEB;
  border-radius: .16rem;
}
.notice-search-logo {
  position: absolute;
  left: .1rem;
  top: 50%;
  width: .155rem;
  height: .155rem;
  margin-top: -.0775rem;
  background: url(../img/notice-search-logo.png) center/.155rem no-repeat;
}
.notice-search-remove {
  position: absolute;
  right: .1rem;
  top: 50%;
  width: .155rem;
  height: .155rem;
  margin-top: -.0775rem;
  background: url(../img/notice-search-remove.png) center/.155rem no-repeat;
}
.notice-list {
  margin: 0 .15rem;
}
.notice-item {
  background: #FFFFFF;
  border: 1px solid #E0E0E0;
  border-radius: .03rem;
  padding: .16rem .15rem .16rem .1rem;
  margin-bottom: .125rem;
}
.notice-item-preview {
  padding-bottom: .11rem;
}
.notice-item-preview-title {
  position: relative;
  font-size: .13rem;
  font-weight: bold;
  color: #333333;
  line-height: .14rem;
  margin-bottom: .15rem;
}
.notice-item-preview-title.ipu-list-item-link:after {
  width: 0.1rem;
  background-size: .1rem;
}
.notice-item-preview-desc {
  font-size: .12rem;
  font-weight: 500;
  color: #999999;
  line-height: 1;
}
.notice-item-detail {
  display: flex;
  justify-content: space-between;
  padding-top: .15rem;
}
.notice-item-detail-tag {
  margin-left: .015rem;
}
.notice-item-detail-tag span {
  font-size: .12rem;
  font-weight: 500;
  color: #FFFFFF;
  line-height: .135rem;
  background: #919191;
  border-radius: .025rem;
  margin-right: .05rem;
  padding: 0 .025rem;
}
/* 公告-详情 */
.notice-detail-content {
  margin-top: .1rem;
}
.notice-detail-card {
  background: #FFFFFF;
  padding: .15rem;
}
.notice-detail-head {
  padding-bottom: .1rem;
}
.notice-detail-title {
  font-size: .18rem;
  font-weight: bold;
  color: #333333;
  line-height: .19rem;
}
.notice-detail-date {
  font-size: .12rem;
  font-weight: 400;
  color: #666666;
  line-height: .32rem;
}
.notice-detail-body {
  font-size: .15rem;
  line-height: .25rem;
  margin-top: .13rem;
}
.notice-detail-images img {
  width: 100%;
  margin: .18rem 0;
}
.notice-detail-doc {
  font-size: .12rem;
  padding-top: .125rem;
}
.notice-detail-doc>div {
  height: .45rem;
}
.notice-detail-doc-icon {
  display: inline-block;
  width: .2rem;
  height: .2rem;
  background-position: center center;
  background-repeat: no-repeat;
  margin-left: .04rem;
  margin-right: .085rem;
}
.doc-icon-word {
  background-image: url(../img/notice-detail-icon-word.png);
  background-size: .185rem;
}
.doc-icon-pdf {
  background-image: url(../img/notice-detail-icon-pdf.png);
  background-size: .19rem;
}
.notice-detail-doc-name {
  color: #999999;
}
.notice-detail-doc-download {
  min-width: .37rem;
  height: .19rem;
  font-size: inherit;
  line-height: .19rem;
  background: #00A2EA;
  border-radius: .025rem;
  padding: 0 .07rem 0 .065rem;
}

2021/ng-srb/biz/js/pages/notice-detail.js

@@ -0,0 +1,5 @@
require(["ipuUI", "jquery"], function (ipuUI, $) {
  $.sizeReady(function () {
    //
  });
});

2021/ng-srb/biz/js/pages/notice.js

@@ -0,0 +1,60 @@
require(["ipuUI", "jquery"], function (ipuUI, $) {
  $.sizeReady(function () {
    // 清空搜索栏
    $(".notice-search-remove").click(function () {
      $(".notice-search input").val('');
    })
    // 下滑刷新
    var pageNo = 0; // 查询页数，查询前有做++处理，第一次查询时值为1
    var pageSize = 10; // 每页数据多少条
    var queryNo = 0; // 查询编号计数器(重要)
    // 模拟用代码开始，正式代码没有这段
    var totalPage = 3;  // 总页数，可修改total为0，查看没有数据时的展示
    var listObj = $(".notice-list");
    var contentHtml = $(".notice-item:lt(" + pageSize + ")", listObj).clone(); // 测试用，复制10条数据
    listObj.empty();  // 移除初始的数据
    // 模拟用代码结束
    // 初始化下拉刷新，若组件不是因为加载数据时发生内容变化，需要调用组件的refresh()方法刷新，否则可能导致内容滚动不正常
    var myRefresh = ipuUI.refresh("#refresh", {
      bottomLoadFun: function () { // 加载更多
        console.log('加载更多'); // 手势按住上移，内容往上翻动
        loadData();
      }
    });
    // 加载数据
    function loadData(refresh) {  // refresh:true表示是刷新加载，false或没有值表示是底部加载
      var localQueryNo = ++queryNo;       // 记录当前查询计数器
      $('.no-result-msg').hide();    // 隐藏没有数据的提示
      setTimeout(function () { // 模拟延时加载
        pageNo++;                           // 更新查询页数
        if (localQueryNo == queryNo) { // 检查查询计数器是否变化，变化则表示当前查询是历史查询，不用处理(变成历史查询一般是因为发生了刷新操作或用户手操作执行了新的查询)
          myRefresh.enableBottom(pageNo < totalPage); // 是否有一下页数据，若返回结果没有总数，条件可变更为判断返回数据长度是否等于pageSize
          if (totalPage == 0) {   // 是否有数据返回，若返回结果没有总数，条件可变更为判断是否为第一页且返回数据长度为0或没有数据结果返回
            $('.no-result-msg').show();  // 未返回显示没有数据的提示
          } else {
            if (refresh) {                 // 刷新操作需要清空已有内容
              listObj.empty();
            }
            contentHtml.clone().appendTo(listObj);    // 添加新的数据
          }
          myRefresh.endLoading();   //最后调用，结束加载画面
        }
        // 进入意见反馈详情页
        $(".notice-item").click(function () {
          // 
          location.href = "notice-detail.html";
        });
      }, 1000);
    }
  });
});

2021/ng-srb/notice-detail.html

@@ -0,0 +1,77 @@
<!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="biz/css/base.css">
  <script src="ipu/lib/requirejs/require.js"></script>
  <script src="biz/js/require-config.js"></script>
</head>
<body class="pages-notice-detail">
  <div class="ipu-flex-vertical ipu-flex-row">
    <div class="ipu-flex-col">
      <header class="ipu-toolbar">
        <h1 class="ipu-toolbar-title">公告消息</h1>
        <a class="ipu-fn-left common-page-back" href="javascript:history.back();">
          <i class="common-back-icon"></i>
        </a>
      </header>
    </div>
    <div class="ipu-flex-col ipu-flex-col-auto">
      <div class="ipu-flex-content notice-detail-content">
        <div class="notice-detail-card">
          <div class="notice-detail-head ipu-fn-bd-b">
            <div class="notice-detail-title">2021年春节期间系统调整升级公告！</div>
            <div class="notice-detail-date">2021-10-30 09:53</div>
          </div>
          <div class="notice-detail-body">
            尊敬的用户：<br>&nbsp;&nbsp;&nbsp;&nbsp;
            为向你提供优质的服务，我司将于2021年01月
            30日17: 00对收入宝进行系统升级，升级期间地
            市暂停所有业务办理和业务查询。营业厅、10086
            服务热线仅受理紧急停机业务，在线客服将暂停，造
            成不便，敬请谅解。由衷感谢您对我公司的理解和支
            持。
          </div>
          <div class="notice-detail-images">
            <img src="temp/02.jpg">
          </div>
          <div class="notice-detail-doc ipu-list ipu-fn-bd-t">
            <div class="ipu-flex ipu-flex-justify-space ipu-flex-align-center">
              <div class="ipu-flex ipu-flex-align-center">
                <i class="notice-detail-doc-icon doc-icon-word"></i>
                <span class="notice-detail-doc-name">
                  系统公告word文件(<span class="notice-detail-doc-size">1.8MB</span>)
                </span>
              </div>
              <a href="javascript:;" class="notice-detail-doc-download  ipu-btn">下载</a>
            </div>
            <div class="ipu-flex ipu-flex-justify-space ipu-flex-align-center">
              <div class="ipu-flex ipu-flex-align-center">
                <i class="notice-detail-doc-icon doc-icon-pdf"></i>
                <span class="notice-detail-doc-name">
                  系统公告pdf文件(<span class="notice-detail-doc-size">895KB</span>)
                </span>
              </div>
              <a href="javascript:;" class="notice-detail-doc-download ipu-btn">下载</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script src="biz/js/pages/notice-detail.js"></script>
</body>
</html>

2021/ng-srb/notice.html

@@ -0,0 +1,93 @@
<!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="biz/css/base.css">
  <script src="ipu/lib/requirejs/require.js"></script>
  <script src="biz/js/require-config.js"></script>
</head>
<body class="pages-notice">
  <div class="ipu-flex-vertical ipu-flex-row">
    <div class="ipu-flex-col">
      <header class="ipu-toolbar">
        <h1 class="ipu-toolbar-title">公告消息</h1>
        <a class="ipu-fn-left common-page-back" href="javascript:history.back();">
          <i class="common-back-icon"></i>
        </a>
      </header>
      <div class="notice-search">
        <div class="notice-search-content">
          <i class="notice-search-logo"></i>
          <input type="text">
          <i class="notice-search-remove"></i>
        </div>
      </div>
    </div>
    <div class="ipu-flex-col ipu-flex-col-auto">
      <div class="ipu-flex-content" id="refresh">
        <div class="ipu-refresh-wrapper">
          <div class="ipu-refresh-content">
            <div class="notice-list">
              <div class="notice-item">
                <div class="notice-item-preview ipu-fn-bd-b">
                  <div class="notice-item-preview-title ipu-fn-row ipu-list-item-link">2021年春节期间系统调整升级公告！</div>
                  <div class="notice-item-preview-desc ipu-fn-row">为向你提供更优质的服务，我司将于2021年2月8日进行紧</div>
                </div>
                <div class="notice-item-detail">
                  <div class="notice-item-detail-tag">
                    <span>图片</span>
                    <span>PDF</span>
                    <span>Word</span>
                  </div>
                  <div class="notice-item-detail-date">2021.01.20</div>
                </div>
              </div>
              <div class="notice-item">
                <div class="notice-item-preview ipu-fn-bd-b">
                  <div class="notice-item-preview-title ipu-fn-row ipu-list-item-link">2021年春节期间系统调整升级公告！</div>
                  <div class="notice-item-preview-desc ipu-fn-row">为向你提供更优质的服务，我司将于2021年2月8日进行紧</div>
                </div>
                <div class="notice-item-detail">
                  <div class="notice-item-detail-tag">
                    <span>图片</span>
                    <span>PDF</span>
                    <span>Word</span>
                  </div>
                  <div class="notice-item-detail-date">2021.01.19</div>
                </div>
              </div>
              <div class="notice-item">
                <div class="notice-item-preview ipu-fn-bd-b">
                  <div class="notice-item-preview-title ipu-fn-row ipu-list-item-link">2021年春节期间系统调整升级公告！</div>
                  <div class="notice-item-preview-desc ipu-fn-row">为向你提供更优质的服务，我司将于2021年2月8日进行紧</div>
                </div>
                <div class="notice-item-detail">
                  <div class="notice-item-detail-tag">
                    <span>图片</span>
                    <span>PDF</span>
                    <span>Word</span>
                  </div>
                  <div class="notice-item-detail-date">2021.01.18</div>
                </div>
              </div>
            </div>
            <div class="no-result-msg ipu-txt-center">当前公告为空</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script src="biz/js/pages/notice.js"></script>
</body>
</html>