完善网格通静态页面

2021/xz-cmc-wgt/biz/css/common.css

@@ -41,8 +41,57 @@ body {
  left: .25rem;
}
.ipu-tab-head > ul li.ipu-current,
.ipu-tab > ul li.ipu-current {
  border-bottom: none;
}
.ipu-tab-head {
  border-bottom: none;
}
.ipu-tab-head .tab-head-title {
  line-height: .45rem;
  width: .62rem;
  margin: 0 auto;
  font-weight: 500;
}
.ipu-tab-head li.ipu-current .tab-head-title {
  color: #3690F1;
  border-bottom: 2px solid #3690F1;
}
.ipu-navbar .ipu-navbar-item .ipu-icon {
  font-size: .28rem;
}
.ipu-navbar .ipu-navbar-item .ipu-navbar-item-label {
  font-size: .1rem;
  color: rgba(0, 0, 0, .45);
  line-height: 1;
  margin-top: .04rem;
}
.ipu-navbar .ipu-navbar-item.ipu-current .ipu-navbar-item-label {
  color: #3690F1;
}
.ipu-navbar {
  min-height: .64rem;
  border-top: none;
  box-shadow: 0px -5px 5px rgba(0, 0, 0, .06);
  background-color: #fff;
}
/* common */
/*    基础属性定义   */
.common-font12-17 {
  font-size: .12rem;
  line-height: .17rem;
  color: rgba(0, 0, 0, .45);
}
.common-font14 {
  font-size: .14rem;
  line-height: .2rem;
@@ -63,6 +112,10 @@ body {
  color: #3690F1;
}
.common-color-25 {
  color: rgba(0, 0, 0, .25);
}
.common-color-45 {
  color: rgba(0, 0, 0, .45);
}
@@ -206,3 +259,53 @@ body {
  -webkit-transform: translate3d(0, 100%, 0);
  transform: translate3d(0, 100%, 0);
}
/* 常用搜索处理 */
.common-search {
  padding: .15rem .16rem;
  background-color: #fff;
}
.common-search-content {
  position: relative;
  background-color: rgba(0, 0, 0, .02);
  border-radius: .2rem;
  overflow: hidden;
  border: 1px solid #eee;
}
.common-search-input {
  display: block;
  width: 100%;
  -webkit-appearance: none;
  border: none;
  font-size: 0.14rem;
  height: .34rem;
  line-height: 0.2rem;
  color: #000;
  background-color: transparent;
}
.common-search-tip {
  font-size: 0.16rem;
  color: rgba(0, 0, 0, .45);
  line-height: 1;
  text-align: center;
  padding: 0 .06rem 0 .08rem;
}
.common-search-input-clear {
  display: none;
  font-size: .15rem;
  width: .4rem;
  text-align: center;
  color: rgba(0, 0, 0, .4);
}
.common-search-value .common-search-tip-msg {
  display: none;
}
.common-search-value .common-search-input-clear {
  display: block;
}

2021/xz-cmc-wgt/biz/css/project.css

@@ -189,69 +189,52 @@
}
/* 我的 */
.pages-index-my .page-content {
  background-color: #F5F7FA;
.my-userinfo-avater {
  display: block;
  margin: .23rem auto 0;
  width: .8rem;
  height: .8rem;
  border-radius: 50%;
}
.my-list-menu .ipu-list-item-title {
  font-size: .14rem;
  color: #1B1F25;
  line-height: .3rem;
.my-userinfo-name {
  margin-top: .08rem;
  color: #fff;
  text-align: center;
}
.my-list-menu .ipu-list-item-media {
  margin-right: .07rem;
.to-userinfo a {
  margin-top: .11rem;
  color: #fff;
  padding: .08rem .15rem;
  border: 1px solid #fff;
  border-radius: .2rem;
}
.my-list-menu .ipu-list-item-media .app-icon {
  color: #3476DC;
  font-size: .21rem;
  padding: 0 .04rem;
.my-links-block {
  margin: .16rem;
  padding: 0 .2rem;
  background: #fff;
  box-shadow: 0px 2px 12px rgba(75, 75, 75, 0.06);
  border-radius: .16rem .16rem 0 0;
  overflow: auto;
}
.my-list-menu .ipu-list-item-after .app-icon {
  display: block;
  padding-right: .1rem;
.my-link-icon,
.my-link-to {
  font-size: .24rem;
  color: #A3B4C8;
}
.btn-logout {
  display: block;
  width: 100%;
  background: rgba(255, 255, 255, 0.90);
  margin-top: .1rem;
  font-size: .14rem;
  color: red;
  line-height: .5rem;
}
.user-info-list .user-circle {
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: #FFF;
  padding-top: .01rem;
}
.user-info-list .ipu-list-item {
  padding: .25rem 0 .27rem .2rem;
  background-color: #0F76FD;
.my-link-icon {
  margin-right: .1rem;
}
.user-info-list .ipu-list-item-title-row {
  padding-top: .04rem;
.my-link-item {
  padding-top: .25rem;
}
.user-info-list .user-name {
  padding-top: .16rem;
  font-size: .16rem;
  color: #fff;
  line-height: 1;
}
.my-list-menu li + li {
  margin-top: 1px;
.my-link-group {
  padding-bottom: .25rem;
}
.pages-pass-modify .ipu-list-item-inner {
@@ -341,10 +324,238 @@
  min-height: .56rem;
}
.pages-login-set .to-gesture-set {
.pages-login-set .to-page-icon {
  font-size: .2rem;
}
.form-row-block + .form-row-block .form-row-title {
  padding-top: .24rem;
}
/* 用户信息 */
.user-info .user-avater {
  display: block;
  width: .4rem;
  height: .4rem;
  border-radius: 50%;
}
.pages-user-info .form-row-block + .form-row-block {
  margin-top: .1rem;
}
.pages-user-info .forget-pass-form {
  background-color: transparent;
}
.pages-user-info .form-row-block {
  background-color: #fff;
}
.form-row-block-avater .form-row {
  min-height: .72rem;
}
.form-row-block-logout .form-row {
  min-height: .4rem;
}
/* 新闻公告 */
.notice-list {
  margin: .1rem 0;
  background-color: #fff;
}
.notice-list-item {
  padding: .16rem 0;
}
.notice-list li {
  margin: 0 .16rem;
  overflow: auto;
}
.notice-list-item .notice-icon {
  display: block;
  width: .4rem;
  height: .4rem;
  line-height: .4rem;
  text-align: center;
  background-color: rgba(54, 144, 241, 0.1);
  border-radius: .04rem;
  color: #3690F1;
  font-size: .2rem;
  margin-right: .14rem;
}
.notice-list-item .notice-date {
  margin-top: .03rem;
}
.notice-list-item ul li:last-child .ipu-fn-bd-t::after {
  content: none;
}
.notice-detail-block {
  padding: .16rem;
}
.notice-detail-block .notice-date {
  margin-top: .03rem;
}
.notice-detail-block .notice-message {
  margin-top: .16rem;
}
.notice-message .message-block + .message-block {
  margin-top: .2rem;
}
.no-result-msg {
  padding: .1rem;
  font-size: .14rem;
  color: rgba(0, 0, 0, .45);
  text-align: center;
}
/* 首页 */
.ipu-navbar-item.ipu-current .icon-line,
.ipu-navbar .ipu-navbar-item .icon-fill {
  display: none;
}
.ipu-navbar-item.ipu-current .icon-fill,
.ipu-navbar-item .icon-line {
  display: block;
}
.main-bottom-block {
  z-index: 11;
}
.menu-block-wgzy {
  margin: .23rem .16rem .16rem;
}
.menu-block-wgzy .menu-item-name {
  color: #474749;
  margin-top: .17rem;
  text-align: center;
}
.menu-block-wgzy .menu-block-title {
  font-weight: 600;
  color: #474749;
}
.menu-block-wgzy .menu-item-icon {
  width: .4rem;
  height: .4rem;
  margin: 0 auto;
  background-color: #aaa;
}
.menu-block-wgzy .menu-block-content {
  margin: 0 -.125rem;
  flex-wrap: wrap;
}
.menu-block-wgzy .menu-item {
  margin: .125rem;
}
.menu-block-wgzy .menu-item + .menu-item {
}
.menu-block-wghx {
  margin: .24rem .16rem .16rem;
  padding: .16rem;
  background-color: #fff;
  box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.06);
  border-radius: 10px;
  overflow: auto;
}
.menu-block-wghx .menu-item {
  height: .76rem;
  padding: .18rem;
  background: linear-gradient(75.6deg, #819AFF 0%, #BCE3FF 100%);
  border-radius: .1rem;
  color: #4B65BF;
}
.menu-block-wghx .menu-item-name {
  font-weight: 600;
  font-size: .14rem;
  line-height: .2rem;
}
.menu-block-wghx .menu-item-tip {
  margin-top: .03rem;
  font-size: .1rem;
  line-height: .14rem;
}
.menu-block-wghx .menu-item-icon {
  width: .4rem;
  height: .4rem;
  background-color: #fff;
  margin-right: .1rem;
}
.menu-block-wghx .menu-item-xqhx {
  background: linear-gradient(75.6deg, #5CABFF 0%, #96E6FF 100%);
  color: #117DCB;
}
.menu-block-wghx .menu-item-wghx {
  background: linear-gradient(75.6deg, #63F5AF 0%, #96F0E0 100%);
  color: #40A07D;
}
.menu-block-wghx .menu-item-jthx {
  background: linear-gradient(255.6deg, #FFDD66 0%, #FFC266 100%);
  color: #CE8400;
}
.menu-block-wghx .menu-item + .menu-item {
  margin-left: .11rem;
}
.menu-block-wghx .menu-item-group + .menu-item-group {
  margin-top: .15rem;
}
.menu-block-wghx .menu-block-title {
  padding-bottom: .12rem;
  color: #474749;
}
.user-location a {
  margin: .24rem .16rem;
  padding: .06rem .15rem;
  background: #3690F1;
  border-radius: .2rem;
  color: #fff;
}
.user-location a i {
  font-size: .2rem;
  margin-right: .1rem;
}
.menu-block-cycd .menu-item-name {
  margin-top: .08rem;
  text-align: center;
  color: #fff;
  font-size: .12rem;
  line-height: .17rem;
}
.menu-block-cycd .menu-item-icon {
  margin: 0 auto;
  width: .4rem;
  height: .4rem;
  background-color: #ccc;
}

2021/xz-cmc-wgt/biz/js/page/index.js

@@ -1,6 +1,23 @@
require(["ipuUI", "jquery"], function (ipuUI, $) {
  $(function () {
    var navBar = ipuUI.navBar(".ipu-navbar");
  });
  // 我的页面
  $(function(){
    // 查看用户信息
    $(".to-userinfo").click(function(){
      location.href = "user-info.html"
    });
    // 我的列表链接足协
    $(".my-link-item").click(function(){
      location.href =  $(this).data("url");
    });
  });

2021/xz-cmc-wgt/biz/js/page/login-account.js

@@ -40,9 +40,9 @@ require(["ipuUI", "jquery", "tool"], function (ipuUI, $, tool) {
    // 弹出其它登录方式
    // todo，先要判断支持哪些登录方式，将不支持的或未开启的登录方式移除，label外其它属性可自定义
    var loginTypes = [
      {label: 'FaceID登录', url:'login-face.html'},
      {label: '指纹登录', url:'login-touch.html'},
      {label: '手势登录', url:'login-gesture.html'}
      {label: 'FaceID登录', url: 'login-face.html'},
      {label: '指纹登录', url: 'login-touch.html'},
      {label: '手势登录', url: 'login-gesture.html'}
    ];
    $(".to-login-type").click(function () {
@@ -53,5 +53,9 @@ require(["ipuUI", "jquery", "tool"], function (ipuUI, $, tool) {
      });
    });
    //  登录
    $(".btn-login").click(function () {
      location.href = 'index.html';
    });
  });
});

2021/xz-cmc-wgt/biz/js/page/login-set.js

@@ -0,0 +1,9 @@
require(["ipuUI", "jquery"], function (ipuUI, $) {
  $(function () {
    $(".to-gesture-set").click(function () {
      location.href = 'gesture-set.html';
    });
  });
});

2021/xz-cmc-wgt/biz/js/page/notice-list.js

@@ -0,0 +1,123 @@
require(["ipuUI", "jquery"], function (ipuUI, $) {
  $(function () {
    var tab = ipuUI.tab("#tab");  // tab切换
    // 未阅
    (function () {
      var pageNo = 0;     // 查询页数，查询前有做++处理，第一次查询时值为1
      var pageSize = 10;  // 每页数据多少条
      var queryNo = 0;    // 查询编号计数器(重要)
      var refreshEl = $("#unreadList");
      // 模拟用代码开始，正式代码没有这段
      var totalPage = 3;  // 总页数，可修改total为0，查看没有数据时的展示
      var listObj = $("ul", refreshEl);
      var contentHtml = $("li:lt(" + pageSize + ")", listObj).clone(); // 测试用，复制10条数据
      listObj.empty();  // 移除初始的数据
      // 模拟用代码结束
      // 初始化下拉刷新，若组件不是因为加载数据时发生内容变化，需要调用组件的refresh()方法刷新，否则可能导致内容滚动不正常
      var myRefresh = ipuUI.refresh(refreshEl, {
        bottomLoadFun: function () { // 加载更多
          console.log('加载更多'); // 手势按住上移，内容往上翻动
          loadData();
        },
        topLoadFun: function () { // 刷新
          console.log('刷新数据'); // 手势按住下拉，内容往下滚动
          pageNo = 0;     // 重置当前页数
          loadData(true);
        }
      });
      // 加载数据
      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();   //最后调用，结束加载画面
          }
        }, 2000);
      }
    })();
    // 已阅
    (function () {
      var pageNo = 0;     // 查询页数，查询前有做++处理，第一次查询时值为1
      var pageSize = 10;  // 每页数据多少条
      var queryNo = 0;    // 查询编号计数器(重要)
      var refreshEl = $("#readList");
      // 模拟用代码开始，正式代码没有这段
      var totalPage = 3;  // 总页数，可修改total为0，查看没有数据时的展示
      var listObj = $("ul", refreshEl);
      var contentHtml = $("li:lt(" + pageSize + ")", listObj).clone(); // 测试用，复制10条数据
      listObj.empty();  // 移除初始的数据
      // 模拟用代码结束
      // 初始化下拉刷新，若组件不是因为加载数据时发生内容变化，需要调用组件的refresh()方法刷新，否则可能导致内容滚动不正常
      var myRefresh = ipuUI.refresh(refreshEl, {
        bottomLoadFun: function () { // 加载更多
          console.log('加载更多'); // 手势按住上移，内容往上翻动
          loadData();
        },
        topLoadFun: function () { // 刷新
          console.log('刷新数据'); // 手势按住下拉，内容往下滚动
          pageNo = 0;     // 重置当前页数
          loadData(true);
        }
      });
      // 加载数据
      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();   //最后调用，结束加载画面
          }
        }, 2000);
      }
    })();
    // 点击进入详情页面
    $(".ipu-tab-body").on("click", ".notice-list-item", function () {
      location.href = 'notice-detail.html';
    });
    // 进入搜索页面
    $(".to-notice-search").click(function () {
      location.href = "notice-search.html";
    });
  });
});

2021/xz-cmc-wgt/biz/js/page/notice-search.js

@@ -0,0 +1,91 @@
require(["ipuUI", "jquery"], function (ipuUI, $) {
  $(function () {
    // 扩展jquery增加一个回车的回调，不好的方便，不能取消绑定事件
    $.fn.enter = function (back) {
      $(this).on("keydown", function (e) { // 输入框是否有值
        if (e.which == '13') {  // 回车事件
          back.call(this);
        }
      });
      return this;
    };
    // 搜索框清除输入交互
    $(".common-search").each(function (i, obj) {
      $(".common-search-input", this).on("keyup input", function (e) { // 输入框是否有值
        $(obj).toggleClass("common-search-value", $(this).val() != "").width();
      });
      $(".common-search-input-clear", this).click(function () { // 清除按钮
        $(".common-search-input", obj).val("").focus();
        $(obj).removeClass("common-search-value"); // .width();
      });
    });
    var pageNo = 0;     // 查询页数，查询前有做++处理，第一次查询时值为1
    var pageSize = 10;  // 每页数据多少条
    var queryNo = 0;    // 查询编号计数器(重要)
    var refreshEl = $("#refresh");
    var noResultEl = $('.no-result-msg');
    // 模拟用代码开始，正式代码没有这段
    var totalPage = 4;  // 总页数，可修改total为0，查看没有数据时的展示
    var listObj = $("ul", refreshEl);
    var contentHtml = $("li:lt(" + pageSize + ")", listObj).clone(); // 测试用，复制10条数据
    listObj.empty();  // 移除初始的数据
    // 模拟用代码结束
    // 初始化下拉刷新，若组件不是因为加载数据时发生内容变化，需要调用组件的refresh()方法刷新，否则可能导致内容滚动不正常
    var myRefresh = ipuUI.refresh(refreshEl, {
      bottomLoadFun: function () { // 加载更多
        console.log('加载更多'); // 手势按住上移，内容往上翻动
        loadData();
      },
      initEnableBottom: false      // 默认未启用，要等查询来触发
    });
    // 加载数据
    function loadData(refresh) {  // refresh:true表示是刷新加载，false或没有值表示是底部加载
      var localQueryNo = ++queryNo;       // 记录当前查询计数器
      noResultEl.hide();    // 隐藏没有数据的提示
      setTimeout(function () { // 模拟延时加载
        pageNo++;                           // 更新查询页数
        if (localQueryNo == queryNo) { // 检查查询计数器是否变化，变化则表示当前查询是历史查询，不用处理(变成历史查询一般是因为发生了刷新操作或用户手操作执行了新的查询)
          myRefresh.enableBottom(pageNo < totalPage); // 是否有一下页数据，若返回结果没有总数，条件可变更为判断返回数据长度是否等于pageSize
          if (totalPage == 0) {   // 是否有数据返回，若返回结果没有总数，条件可变更为判断是否为第一页且返回数据长度为0或没有数据结果返回
            noResultEl.show();  // 未返回显示没有数据的提示
          } else {
            if (refresh) {                 // 刷新操作需要清空已有内容
              listObj.empty();
            }
            contentHtml.clone().appendTo(listObj);    // 添加新的数据
          }
          myRefresh.endLoading();   //最后调用，结束加载画面
        }
      }, 2000);
    }
    // 搜索框回车键监听
    $(".common-search-input").enter(function () {
      var searchVal = $.trim($(this).val());
      if (searchVal) {
        listObj.empty();  // 清空历史数据
        pageNo = 0; // 重置页数
        myRefresh.startBottomLoading();
        // 清空历史数据
      } else {
        ipuUI.toast("请输入搜索条件");
      }
    });
    // 点击进入详情页面
    $(".pages-notice-search").on("click", ".notice-list-item", function () {
      location.href = 'notice-detail.html';
    });
  });
});

2021/xz-cmc-wgt/biz/js/page/user-info.js

@@ -0,0 +1,9 @@
require(["ipuUI", "jquery"], function (ipuUI, $) {
  $(function () {
    $(".form-row-block-logout").click(function () {
      location.href = 'login-account.html';
    });
  });
});

2021/xz-cmc-wgt/index.html

@@ -0,0 +1,255 @@
<!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/lib/remixicon/remixicon.css">
  <link rel="stylesheet" type="text/css" href="biz/css/project.css">
  <script src="ipu/lib/requirejs/require.js"></script>
  <script src="biz/js/require-config.js"></script>
  <script src="biz/js/page/index.js"></script>
</head>
<body class="pages-main">
<div class="ipu-flex-row ipu-flex-vertical">
  <div class="ipu-flex-col ipu-flex-col-auto">
    <div class="ipu-flex-content">
      <div class="ipu-nav-content">
        <ul>
          <li class="pages-index">
            <div class="ipu-flex-content common-bg-02 common-page-content">
              <div class="user-location ipu-flex">
                <a href="javascript:;" class="common-font14 ipu-flex-middle">
                  <i class="ri-map-pin-line"></i>金珠网格（城一）
                </a>
              </div>
              <div class="menu-block-cycd">
                <div class="menu-item-group ipu-flex">
                  <div class="menu-item ipu-flex-grow-1">
                    <div class="menu-item-icon"></div>
                    <div class="menu-item-name">
                      数据分析
                    </div>
                  </div>
                  <div class="menu-item ipu-flex-grow-1">
                    <div class="menu-item-icon"></div>
                    <div class="menu-item-name">
                      资源网点
                    </div>
                  </div>
                  <div class="menu-item ipu-flex-grow-1">
                    <div class="menu-item-icon"></div>
                    <div class="menu-item-name">
                      工作任务
                    </div>
                  </div>
                  <div class="menu-item ipu-flex-grow-1">
                    <!-- 占位用 -->
                  </div>
                </div>
              </div>
              <div class="menu-block-wghx">
                <div class="common-font14 menu-block-title">
                  网格画像
                </div>
                <div class="menu-block-content">
                  <div class="menu-item-group ipu-flex">
                    <div class="ipu-flex-grow-1 menu-item menu-item-ywhx ipu-flex">
                      <div class="menu-item-icon ipu-flex-grow-0"></div>
                      <div class="menu-item-info ipu-flex-grow-1">
                        <div class="menu-item-name">
                          用户画像
                        </div>
                        <div class="menu-item-tip">
                          用户数据分析
                        </div>
                      </div>
                    </div>
                    <div class="ipu-flex-grow-1 menu-item menu-item-xqhx ipu-flex">
                      <div class="menu-item-icon ipu-flex-grow-0"></div>
                      <div class="menu-item-info ipu-flex-grow-1">
                        <div class="menu-item-name">
                          小区画像
                        </div>
                        <div class="menu-item-tip">
                          小区数据分析
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="menu-item-group ipu-flex">
                    <div class="ipu-flex-grow-1 menu-item menu-item-wghx ipu-flex">
                      <div class="menu-item-icon ipu-flex-grow-0"></div>
                      <div class="menu-item-info ipu-flex-grow-1">
                        <div class="menu-item-name">
                          网格画像
                        </div>
                        <div class="menu-item-tip">
                          区域数据分析
                        </div>
                      </div>
                    </div>
                    <div class="ipu-flex-grow-1 menu-item menu-item-jthx ipu-flex">
                      <div class="menu-item-icon ipu-flex-grow-0"></div>
                      <div class="menu-item-info ipu-flex-grow-1">
                        <div class="menu-item-name">
                          集团画像
                        </div>
                        <div class="menu-item-tip">
                          集团数据分析
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="menu-block-wgzy">
                <div class="menu-block-title common-font14">
                  网格资源
                </div>
                <div class="common-font12-17 menu-block-content">
                  <div class="menu-item-group ipu-flex">
                    <div class="ipu-flex-grow-1 menu-item">
                      <div class="menu-item-icon"></div>
                      <div class="menu-item-name">
                        资源校准
                      </div>
                    </div>
                    <div class="ipu-flex-grow-1 menu-item">
                      <div class="menu-item-icon"></div>
                      <div class="menu-item-name">
                        哑资源核查
                      </div>
                    </div>
                    <div class="ipu-flex-grow-1 menu-item">
                      <!-- 占位用，一行三个 -->
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="pages-my">
            <div class="ipu-flex-content common-bg-02 common-page-content">
              <div class="my-userinfo-block">
                <img class="my-userinfo-avater" src="./temp/2.png">
                <div class="common-font16-22 my-userinfo-name">**兵</div>
                <div class="ipu-flex-center common-font12-17 to-userinfo">
                  <a href="javascript:;">查看个人资料</a>
                </div>
              </div>
              <div class="my-links-block common-font16-22 common-color-85">
                <div class="my-link-group ipu-fn-bd-b">
                  <div class="ipu-flex-middle my-link-item my-link-item-xwgg" data-url="notice-list.html">
                    <div class="ipu-flex-grow-0 my-link-icon">
                      <i class="ri-notification-4-line"></i>
                    </div>
                    <div class="ipu-flex-grow-1 my-link-name">
                      新闻公告
                    </div>
                    <div class="ipu-flex-grow-0 my-link-to">
                      <i class="ri-arrow-right-s-line"></i>
                    </div>
                  </div>
                  <div class="ipu-flex-middle my-link-item my-link-item-aqsz" data-url="login-set.html">
                    <div class="ipu-flex-grow-0 my-link-icon">
                      <i class="ri-notification-4-line"></i>
                    </div>
                    <div class="ipu-flex-grow-1 my-link-name">
                      安全设置
                    </div>
                    <div class="ipu-flex-grow-0 my-link-to">
                      <i class="ri-arrow-right-s-line"></i>
                    </div>
                  </div>
                </div>
                <div class="my-link-group ipu-fn-bd-b my-link-item-xgmm" data-url="pass-modify.html">
                  <div class="ipu-flex-middle my-link-item ">
                    <div class="ipu-flex-grow-0 my-link-icon">
                      <i class="ri-notification-4-line"></i>
                    </div>
                    <div class="ipu-flex-grow-1 my-link-name">
                      修改密码
                    </div>
                    <div class="ipu-flex-grow-0 my-link-to">
                      <i class="ri-arrow-right-s-line"></i>
                    </div>
                  </div>
                </div>
                <div class="my-link-group">
                  <div class="ipu-flex-middle my-link-item my-link-item-gyrj" data-url="app-about.html">
                    <div class="ipu-flex-grow-0 my-link-icon">
                      <i class="ri-notification-4-line"></i>
                    </div>
                    <div class="ipu-flex-grow-1 my-link-name">
                      关于软件
                    </div>
                    <div class="ipu-flex-grow-0 my-link-to">
                      <i class="ri-arrow-right-s-line"></i>
                    </div>
                  </div>
                  <div class="ipu-flex-middle my-link-item my-link-item-yczc" data-url="privacy-policy.html">
                    <div class="ipu-flex-grow-0 my-link-icon">
                      <i class="ri-notification-4-line"></i>
                    </div>
                    <div class="ipu-flex-grow-1 my-link-name">
                      隐私政策
                    </div>
                    <div class="ipu-flex-grow-0 my-link-to">
                      <i class="ri-arrow-right-s-line"></i>
                    </div>
                  </div>
                  <div class="ipu-flex-middle my-link-item my-link-item-fxtg" data-url="app-share.html">
                    <div class="ipu-flex-grow-0 my-link-icon">
                      <i class="ri-notification-4-line"></i>
                    </div>
                    <div class="ipu-flex-grow-1 my-link-name">
                      分享推广
                    </div>
                    <div class="ipu-flex-grow-0 my-link-to">
                      <i class="ri-arrow-right-s-line"></i>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="ipu-flex-col main-bottom-block">
    <nav class="ipu-navbar">
      <a class="ipu-navbar-item " href="javascript:;">
        <i class="ipu-icon icon-line ri-home-4-line"></i>
        <i class="ipu-icon icon-fill ri-home-4-fill"></i>
        <div class="ipu-navbar-item-label">工作台</div>
      </a>
      <a class="ipu-navbar-item" href="javascript:;">
        <i class="ipu-icon icon-line ri-user-line"></i>
        <i class="ipu-icon icon-fill ri-user-fill"></i>
        <div class="ipu-navbar-item-label">我的</div>
      </a>
    </nav>
  </div>
</div>
</body>
</html>

2021/xz-cmc-wgt/login-set.html

@@ -11,6 +11,7 @@
  <script src="ipu/lib/requirejs/require.js"></script>
  <script src="biz/js/require-config.js"></script>
  <script src="biz/js/page/login-set.js"></script>
</head>
<body class="pages-login-set common-bg-02">
@@ -60,12 +61,12 @@
          <div class="common-bg-02 form-row-title common-font16-22 common-color-45">
            手势密码
          </div>
          <div class="form-row ipu-flex-middle">
          <div class="form-row ipu-flex-middle to-gesture-set">
            <div class="ipu-flex-grow-1 form-row-label common-font16-22 common-color-85">
              修改手势密码
            </div>
            <div class="ipu-flex-grow-0">
              <i class="to-gesture-set common-color-65 ri-arrow-right-s-line"></i>
              <i class="to-page-icon common-color-65 ri-arrow-right-s-line"></i>
            </div>
          </div>
        </div>

2021/xz-cmc-wgt/notice-detail.html

@@ -0,0 +1,65 @@
<!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/lib/remixicon/remixicon.css">
  <link rel="stylesheet" type="text/css" href="biz/css/project.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-row ipu-flex-vertical">
  <div class="ipu-flex-col ">
    <header class="ipu-toolbar">
      <a class="ipu-fn-left common-page-back" href="javascript:history.back();">
        <i class="ipu-icon ri-arrow-left-s-line"></i>
        返回
      </a>
      <h1 class="ipu-toolbar-title">新闻公告详情</h1>
    </header>
  </div>
  <div class="ipu-flex-col ipu-flex-col-auto">
    <div class="ipu-flex-content">
      <div class="notice-detail-block">
        <div class="common-font16-22 common-color-85 notice-title">
          关于老版掌经即将下线的通知
        </div>
        <div class="common-font12-17 common-color-45 notice-date">
          2021-04-27
        </div>
        <div class="common-font14 notice-message">
          <p class="message-block">
            尊敬的各位领导、同事：
          </p>
          <p class="message-block">
            AISWare
            IPU是亚信自主研发的一整套移动应用平台产品体系。基于分布式架构设计，提供了一整套后端即服务的高效云服务架构，为企业内部的移动应用开发者提供云端一体化的全流程服务。产品包含移动应用开发开发体系、运营管控体系、业务组件体系和运维监控体系4个板块。
          </p>
          <p class="message-block">
            下载链接：<br>
            http://117.132.182.3:30000/xzzj-server/static/index.html
          </p>
          <p class="message-block">
            感谢对业务支撑中心工作的大力支持！
          </p>
          <p class="message-block">
            业务支撑中心：次仁顿珠<br>
            联系电话：18489214422
          </p>
        </div>
      </div>
    </div>
  </div>
</div>
</div>
</body>
</html>

2021/xz-cmc-wgt/notice-list.html

@@ -0,0 +1,190 @@
<!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/lib/remixicon/remixicon.css">
  <link rel="stylesheet" type="text/css" href="biz/css/project.css">
  <script src="ipu/lib/requirejs/require.js"></script>
  <script src="biz/js/require-config.js"></script>
  <script src="biz/js/page/notice-list.js"></script>
</head>
<body class="pages-notice-list">
<div class="ipu-flex-row ipu-flex-vertical">
  <div class="ipu-flex-col ">
    <header class="ipu-toolbar">
      <a class="ipu-fn-left common-page-back" href="javascript:history.back();">
        <i class="ipu-icon ri-arrow-left-s-line"></i>
        返回
      </a>
      <h1 class="ipu-toolbar-title">新闻公告</h1>
      <a class="ipu-fn-right to-notice-search" href="javascript:;">
        <i class="ipu-icon ri-search-line"></i>
      </a>
    </header>
  </div>
  <div class="ipu-flex-col ipu-flex-col-auto">
    <div class="ipu-flex-content">
      <div class="ipu-tab ipu-tab-fixed" id="tab">
        <div class="ipu-tab-head">
          <ul>
            <li class="ipu-current">
              <div class="common-font16-22 common-color-45 tab-head-title">未阅</div>
            </li>
            <li>
              <div class="common-font16-22 common-color-45 tab-head-title">已阅</div>
            </li>
          </ul>
        </div>
        <div class="ipu-tab-body">
          <ul>
            <li class="ipu-current">
              <div class="ipu-flex-content" id="unreadList">
                <div class="ipu-refresh-wrapper">
                  <div class="ipu-refresh-content">
                    <div class="common-font16-22 common-color-85 notice-list">
                      <ul>
                        <li class="">
                          <div class="notice-list-item ipu-flex ipu-fn-bd-b">
                            <div class="ipu-flex-grow-0 notice-icon">
                              <i class="ri-file-list-3-fill"></i>
                            </div>
                            <div class="ipu-flex-grow-1">
                              <div class="ipu-fn-row notice-title">关于老版掌经即将下线的通知关于老版掌经即将下线的通知关于老版掌经即将下线的通知</div>
                              <div class="common-font12-17 notice-date">2121-04-27</div>
                            </div>
                          </div>
                        </li>
                        <li class="">
                          <div class="notice-list-item ipu-flex ipu-fn-bd-b">
                            <div class="ipu-flex-grow-0 notice-icon">
                              <i class="ri-file-list-3-fill"></i>
                            </div>
                            <div class="ipu-flex-grow-1">
                              <div class="ipu-fn-row notice-title">关于老版掌经即将下线的通知关于老版掌经即将下线的通知关于老版掌经即将下线的通知</div>
                              <div class="common-font12-17 notice-date">2121-04-27</div>
                            </div>
                          </div>
                        </li>
                        <li class="notice-list-item ipu-flex ipu-fn-bd-b">
                          <div class="ipu-flex-grow-0 notice-icon">
                            <i class="ri-file-list-3-fill"></i>
                          </div>
                          <div class="ipu-flex-grow-1">
                            <div class="ipu-fn-row notice-title">关于老版掌经即将下线的通知关于老版掌经即将下线的通知关于老版掌经即将下线的通知</div>
                            <div class="common-font12-17 notice-date">2121-04-27</div>
                          </div>
                        </li>
                        <li class="">
                          <div class="notice-list-item ipu-flex ipu-fn-bd-b">
                            <div class="ipu-flex-grow-0 notice-icon">
                              <i class="ri-file-list-3-fill"></i>
                            </div>
                            <div class="ipu-flex-grow-1">
                              <div class="ipu-fn-row notice-title">关于老版掌经即将下线的通知关于老版掌经即将下线的通知关于老版掌经即将下线的通知</div>
                              <div class="common-font12-17 notice-date">2121-04-27</div>
                            </div>
                          </div>
                        </li>
                        <li class="notice-list-item ipu-flex ipu-fn-bd-b">
                          <div class="ipu-flex-grow-0 notice-icon">
                            <i class="ri-file-list-3-fill"></i>
                          </div>
                          <div class="ipu-flex-grow-1">
                            <div class="ipu-fn-row notice-title">关于老版掌经即将下线的通知关于老版掌经即将下线的通知关于老版掌经即将下线的通知</div>
                            <div class="common-font12-17 notice-date">2121-04-27</div>
                          </div>
                        </li>
                      </ul>
                    </div>
                    <div class="no-result-msg ipu-fn-hide">未查询到数据</div>
                  </div>
                </div>
              </div>
            </li>
            <li class="ipu-current">
              <div class="ipu-flex-content" id="readList">
                <div class="ipu-refresh-wrapper">
                  <div class="ipu-refresh-content">
                    <div class="common-font16-22 common-color-85 notice-list">
                      <ul>
                        <li class="">
                          <div class="notice-list-item ipu-flex ipu-fn-bd-b">
                            <div class="ipu-flex-grow-0 notice-icon">
                              <i class="ri-file-list-3-fill"></i>
                            </div>
                            <div class="ipu-flex-grow-1">
                              <div class="ipu-fn-row notice-title">关于老版掌经即将下线的通知关于老版掌经即将下线的通知关于老版掌经即将下线的通知</div>
                              <div class="common-font12-17 notice-date">2121-04-27</div>
                            </div>
                          </div>
                        </li>
                        <li class="">
                          <div class="notice-list-item ipu-flex ipu-fn-bd-b">
                            <div class="ipu-flex-grow-0 notice-icon">
                              <i class="ri-file-list-3-fill"></i>
                            </div>
                            <div class="ipu-flex-grow-1">
                              <div class="ipu-fn-row notice-title">关于老版掌经即将下线的通知关于老版掌经即将下线的通知关于老版掌经即将下线的通知</div>
                              <div class="common-font12-17 notice-date">2121-04-27</div>
                            </div>
                          </div>
                        </li>
                        <li class="notice-list-item ipu-flex ipu-fn-bd-b">
                          <div class="ipu-flex-grow-0 notice-icon">
                            <i class="ri-file-list-3-fill"></i>
                          </div>
                          <div class="ipu-flex-grow-1">
                            <div class="ipu-fn-row notice-title">关于老版掌经即将下线的通知关于老版掌经即将下线的通知关于老版掌经即将下线的通知</div>
                            <div class="common-font12-17 notice-date">2121-04-27</div>
                          </div>
                        </li>
                        <li class="">
                          <div class="notice-list-item ipu-flex ipu-fn-bd-b">
                            <div class="ipu-flex-grow-0 notice-icon">
                              <i class="ri-file-list-3-fill"></i>
                            </div>
                            <div class="ipu-flex-grow-1">
                              <div class="ipu-fn-row notice-title">关于老版掌经即将下线的通知关于老版掌经即将下线的通知关于老版掌经即将下线的通知</div>
                              <div class="common-font12-17 notice-date">2121-04-27</div>
                            </div>
                          </div>
                        </li>
                        <li class="notice-list-item ipu-flex ipu-fn-bd-b">
                          <div class="ipu-flex-grow-0 notice-icon">
                            <i class="ri-file-list-3-fill"></i>
                          </div>
                          <div class="ipu-flex-grow-1">
                            <div class="ipu-fn-row notice-title">关于老版掌经即将下线的通知关于老版掌经即将下线的通知关于老版掌经即将下线的通知</div>
                            <div class="common-font12-17 notice-date">2121-04-27</div>
                          </div>
                        </li>
                      </ul>
                    </div>
                    <div class="no-result-msg ipu-fn-hide">未查询到数据</div>
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>

2021/xz-cmc-wgt/notice-search.html

@@ -0,0 +1,115 @@
<!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/lib/remixicon/remixicon.css">
  <link rel="stylesheet" type="text/css" href="biz/css/project.css">
  <script src="ipu/lib/requirejs/require.js"></script>
  <script src="biz/js/require-config.js"></script>
  <script src="biz/js/page/notice-search.js"></script>
</head>
<body class="pages-notice-search common-bg-02">
<div class="ipu-flex-row ipu-flex-vertical">
  <div class="ipu-flex-col">
    <header class="ipu-toolbar">
      <a class="ipu-fn-left common-page-back" href="javascript:history.back();">
        <i class="ipu-icon ri-arrow-left-s-line"></i>
        返回
      </a>
      <h1 class="ipu-toolbar-title">搜索</h1>
    </header>
  </div>
  <div class="ipu-flex-col">
    <div class="common-search">
      <div class="ipu-flex-middle common-search-content">
        <div class="ipu-flex-grow-0 ipu-flex-center-middle common-search-tip">
          <i class="common-search-icon ri-search-2-line"></i>
        </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-flex-content">
      <div class="ipu-flex-content" id="refresh">
        <div class="ipu-refresh-wrapper">
          <div class="ipu-refresh-content">
            <div class="common-font16-22 common-color-85 notice-list">
              <ul>
                <li class="">
                  <div class="notice-list-item ipu-flex ipu-fn-bd-b">
                    <div class="ipu-flex-grow-0 notice-icon">
                      <i class="ri-file-list-3-fill"></i>
                    </div>
                    <div class="ipu-flex-grow-1">
                      <div class="ipu-fn-row notice-title">关于老版掌经即将下线的通知关于老版掌经即将下线的通知关于老版掌经即将下线的通知</div>
                      <div class="common-font12-17 notice-date">2121-04-27</div>
                    </div>
                  </div>
                </li>
                <li class="">
                  <div class="notice-list-item ipu-flex ipu-fn-bd-b">
                    <div class="ipu-flex-grow-0 notice-icon">
                      <i class="ri-file-list-3-fill"></i>
                    </div>
                    <div class="ipu-flex-grow-1">
                      <div class="ipu-fn-row notice-title">关于老版掌经即将下线的通知关于老版掌经即将下线的通知关于老版掌经即将下线的通知</div>
                      <div class="common-font12-17 notice-date">2121-04-27</div>
                    </div>
                  </div>
                </li>
                <li class="notice-list-item ipu-flex ipu-fn-bd-b">
                  <div class="ipu-flex-grow-0 notice-icon">
                    <i class="ri-file-list-3-fill"></i>
                  </div>
                  <div class="ipu-flex-grow-1">
                    <div class="ipu-fn-row notice-title">关于老版掌经即将下线的通知关于老版掌经即将下线的通知关于老版掌经即将下线的通知</div>
                    <div class="common-font12-17 notice-date">2121-04-27</div>
                  </div>
                </li>
                <li class="">
                  <div class="notice-list-item ipu-flex ipu-fn-bd-b">
                    <div class="ipu-flex-grow-0 notice-icon">
                      <i class="ri-file-list-3-fill"></i>
                    </div>
                    <div class="ipu-flex-grow-1">
                      <div class="ipu-fn-row notice-title">关于老版掌经即将下线的通知关于老版掌经即将下线的通知关于老版掌经即将下线的通知</div>
                      <div class="common-font12-17 notice-date">2121-04-27</div>
                    </div>
                  </div>
                </li>
                <li class="notice-list-item ipu-flex ipu-fn-bd-b">
                  <div class="ipu-flex-grow-0 notice-icon">
                    <i class="ri-file-list-3-fill"></i>
                  </div>
                  <div class="ipu-flex-grow-1">
                    <div class="ipu-fn-row notice-title">关于老版掌经即将下线的通知关于老版掌经即将下线的通知关于老版掌经即将下线的通知</div>
                    <div class="common-font12-17 notice-date">2121-04-27</div>
                  </div>
                </li>
              </ul>
            </div>
            <div class="no-result-msg ipu-fn-hide">未查询到数据</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>

2021/xz-cmc-wgt/user-info.html

@@ -0,0 +1,107 @@
<!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/lib/remixicon/remixicon.css">
  <link rel="stylesheet" type="text/css" href="biz/css/project.css">
  <script src="ipu/lib/requirejs/require.js"></script>
  <script src="biz/js/require-config.js"></script>
  <script src="biz/js/page/user-info.js"></script>
</head>
<body class="pages-user-info common-bg-02">
<div class="ipu-flex-row ipu-flex-vertical">
  <div class="ipu-flex-col ">
    <header class="ipu-toolbar">
      <a class="ipu-fn-left common-page-back" href="javascript:history.back();">
        <i class="ipu-icon ri-arrow-left-s-line"></i>
        返回
      </a>
      <h1 class="ipu-toolbar-title">个人信息</h1>
    </header>
  </div>
  <div class="ipu-flex-col ipu-flex-col-auto">
    <div class="ipu-flex-content">
      <div class="forget-pass-form user-info">
        <div class="form-row-block form-row-block-avater">
          <div class="form-row ipu-flex-middle common-font16-22">
            <div class="ipu-flex-grow-1 form-row-label  common-color-85">
              头像
            </div>
            <div class="ipu-flex-grow-0 form-row-value">
              <img src="./temp/2.png" class="user-avater">
            </div>
          </div>
        </div>
        <div class="form-row-block">
          <div class="form-row ipu-flex-middle common-font16-22 ipu-fn-bd-b">
            <div class="ipu-flex-grow-1 common-color-85 form-row-label">
              用户名称
            </div>
            <div class="ipu-flex-grow-0 common-color-25 form-row-value">
              **真
            </div>
          </div>
          <div class="form-row ipu-flex-middle common-font16-22 ipu-fn-bd-b">
            <div class="ipu-flex-grow-1 form-row-label common-color-85">
              联系电话
            </div>
            <div class="ipu-flex-grow-0 common-color-25 form-row-value">
              136****7583
            </div>
          </div>
          <div class="form-row ipu-flex-middle common-font16-22">
            <div class="ipu-flex-grow-1 form-row-label common-color-85">
              邮箱地址
            </div>
            <div class="ipu-flex-grow-0 common-color-25 form-row-value">
            </div>
          </div>
        </div>
        <div class="form-row-block">
          <div class="form-row ipu-flex-middle common-font16-22 ipu-fn-bd-b">
            <div class="ipu-flex-grow-1 common-color-85 form-row-label">
              用户编号
            </div>
            <div class="ipu-flex-grow-0 common-color-25 form-row-value">
            </div>
          </div>
          <div class="form-row ipu-flex-middle common-font16-22 ipu-fn-bd-b">
            <div class="ipu-flex-grow-1 form-row-label common-color-85">
              区块
            </div>
            <div class="ipu-flex-grow-0 common-color-25 form-row-value">
            </div>
          </div>
          <div class="form-row ipu-flex-middle common-font16-22">
            <div class="ipu-flex-grow-1 form-row-label common-color-85">
              岗位
            </div>
            <div class="ipu-flex-grow-0 common-color-25 form-row-value">
            </div>
          </div>
        </div>
        <div class="form-row-block form-row-block-logout">
          <div class="form-row ipu-flex-middle-center common-font16">
            退出登录
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>

2021/xz-cmc-wgt/welcome/css/welcome.css

@@ -0,0 +1,49 @@
html {
  font-size: 100px;
}
@media screen and (min-width: 320px) and (max-width: 480px) {
  html {
    font-size: 26.66667vw;
  }
}
body {
  font-family: PingFangSC, 'PingFang SC', Arial, Helvetica, sans-serif;;
}
html,
body,
.welcome-img {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.welcome-img {
  background: url("../img/bg-welcome.png") center 23% no-repeat;
  background-color: rgb(23, 70, 112);
  background-size: 3.75rem auto;
}
.welcome-app{
  margin-top: 1.89rem;
}
.welcome-app-logo {
  margin: 0 auto;
  width: 1.2rem;
  height: 1.2rem;
  background-color: #eee;
}
.welcome-app-name{
  margin-top: .3rem;
  text-align: center;
  font-size: .24rem;
  line-height: .34rem;
  color: #fff;
}

2021/xz-cmc-wgt/welcome/welcome.html

@@ -0,0 +1,23 @@
<!doctype html>
<html>
<head>
  <title>欢迎页</title>
  <meta charset="utf-8">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0, user-scalable=no"/>
  <!-- 宽度自动适配 -->
  <meta content="telephone=no" name="format-detection"/> <!-- 不识别页面上的数字为可拨打号码 -->
  <link rel="stylesheet" type="text/css" href="css/welcome.css">
</head>
<body>
<div class="welcome-img">
  <div class="welcome-app">
    <div class="welcome-app-logo"></div>
    <div class="welcome-app-name">
      西藏网格通
    </div>
  </div>
</div>
</body>
</html>