feat:增加PageControl组件并引入iconfont

config/paths.js

@@ -62,7 +62,7 @@ module.exports = {
   appPath: resolveApp('.'),
   appBuild: resolveApp('dist'),
   appPublic: resolveApp('public'),
-  appHtml: resolveApp('public/index.html'),
+  appHtml: resolveApp('src/index.html'),
   appIndexJs: resolveModule(resolveApp, 'src/index'),
   appPackageJson: resolveApp('package.json'),
   appSrc: resolveApp('src'),

config/webpack.config.js

@@ -160,7 +160,7 @@ module.exports = function(webpackEnv) {
       // to bring better experience for Create React App users. You can replace
       // the line below with these two lines if you prefer the stock client:
       // require.resolve('webpack-dev-server/client') + '?/',
-      // require.resolve('webpack/hot/dev-server'),
+      require.resolve('webpack/hot/dev-server'),
       isEnvDevelopment &&
         require.resolve('react-dev-utils/webpackHotDevClient'),
       // Finally, this is your app's code:

src/components/Breadcrumbs.less

+@import '../core/variables.less';
+
+.xm-breadCrumb{
+  margin-left: 16px;
+  color: #989898;
+  margin-top:10px;
+  margin-bottom: 10px;
+  +.statistic-tips{
+    position: relative;
+    top: -8px;
+    margin-bottom: 0px !important;
+  }
+  .back-btn {
+    cursor: pointer;
+    &:hover {
+      color: @xm-color-primary;
+    }
+  }
+  span {
+    font-size: @xm-font-size-m;
+    line-height: 25px;
+  }
+  .ant-breadcrumb{
+    display: inline-block;
+    span{
+      color: #989898;
+      font-weight: 400;
+    }
+  }
+  .divide{
+    display: inline-block;
+    position: relative;
+    height: 12px;
+    width: 25px;
+    &:after{
+      content:'';
+      position: absolute;
+      left: 12px;
+      height: 16px;
+      top: 0px;
+      border-left:1px solid #989898;
+    }
+  }
+  
+}
\ No newline at end of file

src/components/Breadcrumbs.tsx

+/*
+ * @Author: sunbingqing
+ * @Date: 2019-07-26 11:26:00
+ * @Last Modified by: 孙冰清
+ * @Last Modified time: 2019-07-26 11:59:24
+ */
+
+import React from 'react';
+import { Breadcrumb } from 'antd';
+import { LeftOutlined } from '@ant-design/icons';
+import _ from 'underscore';
+import './Breadcrumbs.less';
+
+interface BreadcrumbsProps {
+  goBack?: () => void;
+  navList: string | string[];
+  text?: string;
+}
+
+const Breadcrumbs = (props: BreadcrumbsProps) => {
+  const { goBack, navList, text } = props;
+  
+  function _onClick(): any {
+    goBack ? goBack() : window.RCHistory.goBack();
+  }
+  const isString = _.isString(navList);
+  const isArray = _.isArray(navList);
+  return (
+    <div className="xm-breadCrumb">
+      <span onClick={_onClick} className="back-btn" />
+      <LeftOutlined/>
+      <span className="text ml5" >{text ? text : '返回'}</span>
+      <div className="divide"></div>
+      <Breadcrumb>
+        {isString && <Breadcrumb.Item>{navList}</Breadcrumb.Item>}
+        {isArray && _.map(navList, (item: string, index: number) => {
+          return <Breadcrumb.Item key={index}>{item}</Breadcrumb.Item>;
+        })}
+        { !isString && !isArray && <Breadcrumb.Item>{navList}</Breadcrumb.Item>}
+      </Breadcrumb>
+    </div>
+  );
+};
+
+export default Breadcrumbs;

src/components/PageControl.less

+@import "../core/variables.less";
+.xm-page-control {
+  margin: 16px 0px;
+  position: relative;
+  padding-bottom: 16px;
+ 
+  .title {
+    position: absolute;
+    left: 0;
+    color: @text-sub;
+  }
+
+  > ul {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    white-space: nowrap;
+    line-height: 30px;
+  }
+  
+  .select-list{
+    ul{
+      li{
+        display: block;
+        border:none;
+      }
+    }
+  }
+
+  > ul {
+    li {
+      display: inline-block;
+      vertical-align: top;
+      padding: 0px 5px;
+      min-width: 26px;
+      height: 26px;
+      line-height: 26px;
+      border-bottom: 1px solid @border;
+      border-top: 1px solid @border;
+      border-right: 1px solid @border;
+      margin-top: 1px;
+      color: @text-sub;
+      a {
+        color: @primary;
+        display: block;
+      }
+      &.active {
+        a {
+          color: #fff;
+        }
+      }
+      &:nth-child(2) {
+        border-left: 1px solid @border;
+      }
+      &:nth-child(11) {
+        border-right: 1px solid @border;
+      }
+      
+      &:nth-child(12) {
+        border-right: 1px solid @border;
+      }
+    }
+    .omit+li {
+      border-left: 1px solid @border;
+    }
+
+    li:first-child {
+      border-left: 1px solid @border;
+    }
+
+    &>span {
+      display: inline-block;
+    }
+    &>div {
+      display: inline-block;
+      width: 26px;
+      height: 26px;
+      border: 1px solid @border;
+      line-height: 26px;
+    }
+  }
+
+  .back {
+    margin-right: 10px;
+    border-radius: 4px;
+    cursor: pointer;
+    color: @primaryDark;
+  }
+
+  .go {
+    margin-left: 10px;
+    border-radius: 4px;
+    cursor: pointer;
+    color: @primaryDark;
+  }
+
+  .active {
+    background-color: @primaryDark;
+    border: 1px solid @primaryDark;
+    color: white;
+  }
+
+  .omit {
+    border: 0px;
+    margin: 0 5px;
+  }
+
+  .jumper {
+    margin-left: 5px;
+    border: none;
+    border-radius: 0px;
+    line-height: 26px;
+    color: @text-sub;
+    width: auto;
+    input {
+      width: 35px;
+      height: 25px;
+      border-radius: 4px;
+      border: 1px solid @border;
+      padding: 0px 5px;
+      margin: 0px 5px;
+      color: @text-sub;
+    }
+    button {
+      margin-left: 5px;
+      height: 26px;
+      line-height: 26px;
+      border: 1px solid @primaryDark;
+      border-radius: 4px;
+      padding: 0px 10px;
+      color: @primaryDark;
+
+      &:hover, &:active {
+        color: #fff;
+        background: @primaryDark;
+      }
+    }
+  }
+  .hide {
+    opacity: 0;
+  }
+  .show {
+    opacity: 1;
+  }
+}
+
+.xm-page-control_primary {
+  .go {
+    color: @primary;
+  }
+  
+  .active {
+    background-color: @primary;
+    border: 1px solid @primary;
+  }
+
+  .back {
+    color: @primary;
+  }
+}
\ No newline at end of file

src/components/PageControl.tsx

+/*
+ * @Author: sunbingqing
+ * @Date: 2019-07-24 17:21:00
+ * @Last Modified by: mikey.zhaopeng
+ * @Last Modified time: 2020-11-25 14:36:16
+ */
+
+import React from 'react';
+import { Pagination } from 'antd';
+import './PageControl.less';
+
+interface PageControlProps {
+  current: number;
+  total: number;
+  pageSize: number;
+  showDataNums?: boolean;
+  showSizeChanger?: boolean;
+  size?: 'default' | 'small';
+  toPage: (value: number) => void;
+  className?: string;
+  onShowSizeChange?: any;
+  pageSizeOptions?:any
+}
+
+const PageControl = (props: PageControlProps) => {
+  const { current, total, pageSize, showDataNums, showSizeChanger, size, toPage, className,
+    onShowSizeChange, pageSizeOptions } = props;
+  const cls = 'xm-page-control ' + className;
+
+  function _onChange(page: number): any {
+    toPage(page - 1);
+  }
+
+  return (
+    <div className={cls}>
+      {(showDataNums === undefined ? true : showDataNums) &&
+        <span>共{total}条数据</span>
+      }
+      <div style={{ display: 'inline', float: 'right' }}>
+        <Pagination
+          size={size}
+          current={current + 1}
+          total={total || 0}
+          pageSizeOptions={['10', '20', '50', '100']}
+          onShowSizeChange={onShowSizeChange}
+          showSizeChanger={showSizeChanger}
+          pageSize={pageSize || 10}
+          onChange={(page: any) => _onChange(page)}
+          showQuickJumper
+        />
+      </div>
+    </div>
+  );
+};
+
+export default PageControl;

src/core/global.less

+@import "./variables.less";
+
+html {
+  color: rgba(0, 0, 0, 0.65);
+
+  p {
+    margin-bottom: 0px;
+  }
+}
+
+span {
+  word-break: break-all;
+}
+
+* {
+  word-break: break-all;
+}
+
+.update-notice-box {
+  .top {
+    text-align: center;
+
+    img {
+      width: 310px;
+    }
+  }
+
+  .content {
+    img {
+      width: 100%;
+    }
+  }
+}
+
+.iconfont {
+  font-family: "iconfont";
+  font-size: 14px;
+  font-style: normal;
+
+  &.font-20 {
+    font-size: 20px;
+  }
+
+  &.font-22 {
+    font-size: 22px;
+  }
+
+  &.blue {
+    color: #5D98E0;
+  }
+
+  &.crimson {
+    color: #F26293;
+  }
+
+  &.orange {
+    color: #FF7800;
+  }
+
+  &.rico {
+    color: #3BBDAA;
+  }
+
+  &.green {
+    color: #5DD333;
+  }
+}
+
+.orange {
+  color: @primary;
+}
+
+.red {
+  color: #ff5656 !important;
+}
+
+.pink {
+  color: #fdaba9;
+}
+
+.pink-bg {
+  background: #fdaba9;
+}
+
+.grey-bg {
+  background: #c6c8c9;
+}
+
+@top-height: 50px;
+@nav-line-height: 40px;
+
+.dropdown-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 1001;
+  display: none;
+  /*dropdown-menu开始为隐藏的*/
+  float: left;
+  min-width: 160px;
+  padding: 5px 0;
+  margin: 2px 0 0;
+  list-style: none;
+  background-color: #ffffff;
+  border: 1px solid @xm-color-border;
+  *border-right-width: 2px;
+  *border-bottom-width: 2px;
+  -webkit-border-radius: 6px;
+  -moz-border-radius: 6px;
+  border-radius: 6px;
+  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+  -webkit-background-clip: padding-box;
+  -moz-background-clip: padding;
+  background-clip: padding-box;
+}
+
+.open {
+  *z-index: 1000;
+  position: relative;
+}
+
+.open>.dropdown-menu {
+  display: block;
+  /*加入open类，之后变为显示*/
+}
+
+.layout-container {
+  display: none;
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: rgba(0, 0, 0, 0.4);
+  z-index: 999;
+}
+
+// 全局表单样式
+form {
+  &.form-horizontal {
+    label {
+      float: left;
+    }
+  }
+}
+
+// 有图标的输入框
+.custom-input-with-addon {
+  @height: 30px;
+  @borderRadius: 4px;
+  display: flex;
+  display: -webkit-flex;
+  flex-direction: row;
+  -webkit-flex-direction: row;
+  align-items: center;
+  height: @height;
+  width: 210px;
+
+  input {
+    display: block;
+    height: 100%;
+    flex: 1;
+    -webkit-flex: 1;
+    border: 1px solid @xm-color-border;
+    border-right: hidden;
+    box-sizing: border-box;
+    padding: 0 4px;
+    border-top-left-radius: @borderRadius;
+    border-bottom-left-radius: @borderRadius;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  .addon {
+    cursor: pointer;
+    background: @primary;
+    height: 100%;
+    width: 40px;
+    color: #ffffff;
+    text-align: center;
+    line-height: @height;
+    border-top-right-radius: @borderRadius;
+    border-bottom-right-radius: @borderRadius;
+  }
+}
+
+// 有图标且有图标背景色的按钮
+.custom-btn-with-addon-bg {
+  @height: 30px;
+  overflow-y: hidden;
+  display: inline-block;
+  height: @height;
+  background: @primary;
+  color: #ffffff;
+
+  .icon {
+    height: 100%;
+    width: 35px;
+    line-height: @height;
+    text-align: center;
+    display: inline-block;
+    background: darken(@sunDark, 3%);
+  }
+
+  .text {
+    display: inline-block;
+    height: 100%;
+    padding: 0 10px;
+    line-height: @height;
+  }
+}
+
+//自定义下拉框
+select {
+  outline: none;
+  -webkit-tap-highlight-color: transparent;
+  -webkit-appearance: none;
+  border: none;
+  background: transparent;
+  padding-right: 20px;
+  background-size: auto 100%;
+
+  &:focus,
+  &:active {
+    outline: none;
+  }
+}
+
+.static-select {
+  cursor: pointer;
+  height: 15px;
+  line-height: 15px;
+  display: inline-block;
+  background: transparent;
+  padding-right: 20px;
+  // background: url(../images/down_crrow.png) no-repeat center right;
+  background-size: auto 100%;
+  box-sizing: content-box;
+}
+
+.arrow-select {
+  cursor: pointer;
+  height: 24px;
+  line-height: 24px;
+  font-size: 12px;
+  display: inline-block;
+  background: transparent;
+  padding-right: 13px;
+  // background: url(../images/down_crrow.png) no-repeat center right;
+  margin-right: 2px;
+  background-size: auto 50%;
+  box-sizing: content-box;
+}
+
+// 分页控制条
+// 选择老师modal
+.modal.select-teacher,
+.modal.select-single-course {
+  .modal-body {
+    padding: 20px;
+
+    .filter {
+      line-height: 30px;
+      margin-bottom: 20px;
+
+      &:after {
+        content: ' ';
+        display: block;
+        clear: both;
+      }
+
+      .btn {
+        height: 30px;
+        padding: 0 10px;
+        color: #ffffff;
+        background: @primary;
+        border-radius: 4px;
+        margin-left: 20px;
+
+        .icon {
+          margin-right: 4px;
+        }
+      }
+    }
+
+    .datas {
+      max-height: 400px;
+      overflow: auto;
+
+      >.multy {
+        tbody {
+          tr {
+            td {
+              span.icon {
+                cursor: pointer;
+              }
+            }
+
+            td:nth-child(1) {
+              span:before {
+                content: '\e62f';
+              }
+            }
+          }
+
+          tr.selected {
+            td:nth-child(1) {
+              span:before {
+                content: '\e630';
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+// 全局表格列表无数据时提示
+.not-have-data {
+  text-align: center;
+}
+
+// 全局tab标签
+.nav-tabs-custom {
+  .nav-tabs {
+    padding: 10px 20px;
+
+    li {
+      display: inline-block;
+      margin-right: 30px;
+      cursor: pointer;
+
+      &:last-child {
+        margin-right: 0;
+      }
+
+      &.active {
+        color: #F58E2C;
+        ;
+        border-bottom: 2px solid;
+      }
+    }
+  }
+
+  .tab-content {
+    .tab-pane {
+      display: none;
+
+      &.active {
+        display: block;
+      }
+    }
+  }
+}
+
+.hide {
+  visibility: hidden;
+}
+
+.none {
+  display: none;
+}
+
+.datepicker table.table {
+  width: 280px;
+
+  td,
+  th {
+    background: #fff;
+  }
+}
+
+.daterangepicker {
+  font-size: 12px;
+
+  .btn {
+
+    &.btn-success,
+    &.btn-default {
+      border: 1px solid @xm-color-border;
+      padding: 6px 10px;
+      border-radius: 3px;
+      color: #666;
+    }
+
+    &.btn-success {
+      border-color: @primary;
+      background: @primary;
+      color: #ffffff;
+    }
+
+    &.btn-default {
+      border: 1px solid @primary  !important;
+      color: @primary;
+    }
+  }
+
+  .time-enum {
+    margin-top: 20px;
+
+    .btn {
+      border: 1px solid @primary;
+      color: @primary;
+      padding: 2px 4px;
+      border-radius: 4px;
+      margin-bottom: 6px;
+      margin-right: 4px;
+
+      &:last-child {
+        margin-right: 0;
+      }
+
+      -webkit-transition: all .3s;
+      -moz-transition: all .3s;
+      -ms-transition: all .3s;
+      -o-transition: all .3s;
+      transition: all .3s;
+
+      &:hover {
+        background-color: #F58E2C;
+        color: #ffffff;
+      }
+    }
+  }
+}
+
+#top-container {
+  &::-webkit-scrollbar {
+    width: 0;
+    opacity: 0;
+  }
+}
+
+.datas {
+  &::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+    background: none;
+    opacity: 1;
+  }
+
+  &::-webkit-scrollbar-track {
+    border-radius: 10px;
+    background-color: #F5F5F5;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    background-color: @primary;
+  }
+}
+
+.tip-install-print-driver {
+  position: absolute;
+  width: 100%;
+  background: @primary;
+  z-index: 99999;
+  text-align: center;
+  line-height: 50px;
+  font-size: 16px;
+  color: #ffffff;
+  top: 0;
+  left: 0;
+
+  a {
+    color: #5e80bd;
+  }
+
+  .close {
+    float: right;
+    margin-right: 15px;
+    cursor: pointer;
+  }
+}
+
+.toast-screen-middle {
+  top: 50%;
+  right: 40%;
+}
+
+.list {
+  &::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+    background: none;
+    opacity: 1;
+  }
+
+  &::-webkit-scrollbar-track {
+    border-radius: 10px;
+    background-color: #F5F5F5;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    // background-color: @primary;
+  }
+}
+
+// 表格中的input都是单下划线形式
+table {
+  tr {
+
+    th,
+    td {
+      .delete {
+        cursor: pointer;
+        line-height: 21px;
+        color: #bfbfbf;
+      }
+
+      input {
+        color: rgba(0, 0, 0, 0.73);
+        line-height: 22px;
+        padding: 0 5px;
+      }
+    }
+  }
+}
+
+textarea {
+  margin: 4px 0 10px;
+  color: rgba(0, 0, 0, 0.73);
+  border: 1px solid @xm-color-border;
+  border-radius: 4px;
+  padding: 8px !important;
+  -webkit-transition: all .3s;
+  -moz-transition: all .3s;
+  -ms-transition: all .3s;
+  -o-transition: all .3s;
+  transition: all .3s;
+  display: block;
+  width: 100%;
+  min-height: 100px;
+
+  &:focus,
+  &:active,
+  &:hover {
+    outline: none;
+    border: 1px solid @primary  !important;
+    box-shadow: 0 0 2px @primary;
+  }
+}
+
+textarea::-webkit-input-placeholder {
+  color: #ccc;
+}
+
+.divider {
+  display: inline-block;
+  width: 1px;
+  border-left: 1px solid @border;
+}
+
+.line {
+  height: 1px;
+  background-color: @border;
+}
+
+//图表自定义图例
+.selfLegend {
+  .legend {
+    height: 20px;
+    margin-top: 10px;
+    margin-bottom: -31px;
+    text-align: right;
+    margin-right: 20px;
+
+    .dot {
+      display: inline-block;
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      margin: 0 5px 0 0;
+      margin-left: 20px;
+    }
+  }
+}
+
+//全局阴影遮盖
+.shadow-up {
+  filter: blur(4px);
+  -webkit-filter: blur(4px);
+}
+
+// .box-shadow {
+//   box-shadow: 0px 5px 3px #E7E5E3;
+// }
+// window daterangepicker bug
+.daterangepicker select.hourselect,
+.daterangepicker select.minuteselect,
+.daterangepicker select.secondselect,
+.daterangepicker select.ampmselect {
+  padding-right: 0 !important;
+}
+
+// 所有数据图表页面的tip左边加一个返回按钮
+.total-statistic {
+  .btn {
+    margin-right: 10px;
+  }
+}
+
+// 图标单位位置
+.unitTag {
+  position: absolute;
+  left: 20px;
+  font-size: 12px;
+}
+
+// 图标单位位置
+.unitDetailTag {
+  position: absolute;
+  left: 30px;
+  font-size: 12px;
+}
+
+.rl {
+  position: relative;
+}
+
+.box {
+  .box-footer {
+    height: 32px;
+    line-height: 30px;
+    position: relative;
+  }
+}
+
+.timeSelect {
+  display: inline-block;
+  margin-right: 10px;
+  margin-left: -20px;
+
+  input {
+    width: 160px;
+    display: inline-block;
+  }
+
+  label {
+    display: inline-block;
+  }
+}
+
+.callee(@counter, @max, @depth, @key, @prototype) when(@counter <=@max) {
+  .@{key}@{counter} {
+    @{prototype}: unit(@counter, px) !important;
+  }
+
+  .callee(@counter + @depth, @max, @depth, @key, @prototype);
+}
+
+// margin边距
+.callee(0, 60, 2, m, margin);
+.callee(0, 60, 2, ml, margin-left);
+.callee(0, 60, 2, mt, margin-top);
+.callee(0, 60, 2, mr, margin-right);
+.callee(0, 60, 2, mb, margin-bottom);
+// padding边距
+.callee(0, 60, 2, p, padding);
+.callee(0, 60, 2, pt, padding-top);
+.callee(0, 60, 2, pr, padding-right);
+.callee(0, 60, 2, pb, padding-bottom);
+.callee(0, 60, 2, pl, padding-left);
+// 设置文字大小
+.callee(10, 20, 1, fz, font-size);
+.callee(20, 60, 2, fz, font-size);
+
+.mt15 {
+  margin-top: 15px !important;
+}
+
+.mt5 {
+  margin-top: 5px !important;
+}
+
+.ml5 {
+  margin-left: 5px !important;
+}
+
+.mb5 {
+  margin-bottom: 5px !important;
+}
+
+.mb15 {
+  margin-bottom: 15px !important;
+}
+
+.mr5 {
+  margin-right: 5px !important;
+}
+
+.mainFontCloor {
+  color: #FFAB1A;
+}
+
+.handLike {
+  cursor: pointer;
+}
+
+.btn {
+  &.disabled {
+    cursor: not-allowed;
+  }
+}
+
+input {
+  font-size: 14px;
+}
+
+.datePick {
+  .rangeDate {
+    width: 185px;
+    font-size: 14px;
+  }
+
+  .signalDate {
+    font-size: 14px;
+  }
+}
+
+.xm-divider {
+  display: inline-block;
+  width: 1px;
+  border-left: 1px solid @xm-color-border;
+}
+
+.daterangepicker .ranges input,
+.daterangepicker .ranges .input-mini {
+  font-size: 11px !important;
+}
+
+.tycolor {
+  color: #58B7EF;
+}
+
+.color-red {
+  color: #EC4B35 !important;
+}
+
+.inline {
+  display: inline-block;
+}
+
+.mr10 {
+  margin-right: 10px;
+}
+
+.down-excel {
+  position: absolute;
+  right: 0px;
+  bottom: 10px;
+  display: flex;
+  align-items: center;
+  z-index: 100;
+
+  &>a {
+    margin-right: 20px;
+  }
+}
+
+.calendar-time {
+  select {
+    border: 1px solid @xm-color-border;
+    -moz-appearance: menulist;
+    -webkit-appearance: menulist;
+    appearance: menulist;
+    width: 45px;
+  }
+}
+
+.xm-table-filter {
+  display: inline-block;
+}
+
+.v-line {
+  background-color: @xm-color-border;
+  width: 1;
+  padding: 0 !important;
+}
+
+.center {
+  text-align: center;
+}
+
+.h-line {
+  height: 1px;
+  background-color: @xm-color-border;
+  padding: 0 !important;
+}
+
+.text-sub {
+  color: @text-sub;
+}
+
+.xm-tab {
+  height: 65px;
+  display: flex;
+  font-size: 14px;
+  align-items: center;
+  padding-left: 10px;
+  border-bottom: 1px solid @xm-color-border;
+
+  span {
+    text-align: center;
+    min-width: 100px;
+    height: 35px;
+    line-height: 35px;
+    cursor: pointer;
+    padding: 0 10px;
+
+    &:first-child {
+      border-top-left-radius: 3px;
+      border-bottom-left-radius: 3px;
+      border-left: 1px;
+    }
+
+    &:nth-child(2) {
+      border-left: none;
+      border-right: none;
+    }
+
+    &:last-child {
+      border-top-right-radius: 3px;
+      border-bottom-right-radius: 3px;
+      border-left: none;
+    }
+  }
+}
+
+.graph {
+  .header {
+    width: 100%;
+    height: 40px;
+    line-height: 40px;
+
+    .title {
+      margin-left: 18px;
+      margin-right: 30px;
+      font-size: 18px
+    }
+
+    .select {
+      font-size: 14px;
+      color: #333;
+    }
+  }
+
+  .content {
+    background-size: 100% 80px;
+  }
+
+  .ac-tooltip {
+    position: absolute;
+    visibility: hidden;
+    border-radius: 5px;
+    background-color: white;
+    padding: 0 20px 0 5px;
+    transition: top 200ms, left 200ms;
+    -moz-transition: top 200ms, left 200ms;
+    /* Firefox 4 */
+    -webkit-transition: top 200ms, left 200ms;
+    /* Safari 和 Chrome */
+    -o-transition: top 200ms, left 200ms;
+
+    .ac-title {
+      margin: 0;
+      padding: 5px 0;
+    }
+
+    .ac-list {
+      margin: 0;
+      padding: 0;
+      list-style: none;
+    }
+
+    li {
+      line-height: 22px;
+    }
+  }
+
+  //自定义html
+  .guideWapper {
+    span {
+      top: 10px;
+      width: 100px;
+      font-size: 11px;
+    }
+  }
+}
+
+.table-stats {
+  box-shadow: @xm-box-shadow-3;
+  margin-top: 20px;
+
+  .header {
+    width: 100%;
+    height: 40px;
+    line-height: 40px;
+    border-bottom: 1px solid @xm-color-border;
+
+    .title {
+      margin-left: 20px;
+      margin-right: 30px;
+      font-size: 18px
+    }
+
+    .select {
+      font-size: 14px;
+      color: #333;
+    }
+
+    .download {
+      float: right;
+      margin-right: 20px;
+      cursor: pointer;
+    }
+  }
+
+  table {
+    table-layout: fixed;
+    width: 100%;
+    text-align: left;
+
+    .right {
+      text-align: right;
+    }
+
+    .center {
+      text-align: center;
+    }
+
+    .text-center {
+      text-align: center;
+    }
+
+    tr {
+      th {
+        height: 40px;
+        line-height: 40px;
+        font-size: 14px;
+      }
+
+      td {
+        height: 40px;
+        line-height: 40px;
+      }
+
+      th,
+      td {
+        border: none;
+        padding: 0 20px;
+      }
+
+      th,
+      td {
+        border-right: 1px solid @xm-color-border;
+      }
+
+      th,
+      td {
+        &:last-child {
+          border-right: none;
+        }
+      }
+    }
+  }
+
+  .footer {
+    padding: 0px 15px;
+  }
+}
+
+table {
+
+  th,
+  tr,
+  td {
+    &.right {
+      text-align: right !important;
+    }
+  }
+}
+
+.table_disabled_line {
+  color: #ccc;
+  a {
+    color: #ccc;
+    cursor: not-allowed;
+    &:hover {
+      color: #ccc;
+    }
+  }
+}
+
+.table-control {
+  color: #Fc9C6B !important;
+  border: 1px solid #Fc9C6B !important;
+}
+
+.one-line-text {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+table .ant-btn {
+  padding: 0 5px;
+}
+
+.flex-on-line {
+  display: -webkit-flex;
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+}
+
+.ellipsis {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+::-webkit-textfield-decoration-container {}
+
+::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+}
+
+::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+}
+
+.class-info {
+  .form-group {
+    line-height: 30px;
+
+    >label {
+      width: 100px;
+      text-align: right;
+      padding-right: 10px;
+      float: left;
+    }
+
+    &:after {
+      content: ' ';
+      display: block;
+      clear: both;
+    }
+
+    >div.value {
+      float: left;
+    }
+
+    &.flex {
+      display: flex;
+      display: -webkit-flex;
+      flex-direction: row;
+      -webkit-flex-direction: row;
+
+      >div {
+        flex: 1;
+        -webkit-flex: 1;
+      }
+
+      textarea {
+        margin-top: 5px;
+        width: 100%;
+        min-height: 95px;
+      }
+    }
+  }
+}
+
+.xm-filter {
+  font-size: 14px;
+  font-family: PingFangSC-Regular;
+  font-weight: 400;
+  color: rgba(102, 102, 102, 1);
+  line-height: 20px;
+  width: 52px;
+}
+
+.ant-select-search--inline .ant-select-search__field {
+  padding: 0px !important;
+}
+
+.action-box {
+
+  .ant-checkbox-wrapper+span,
+  .ant-checkbox+span {
+    padding: 0 !important;
+  }
+}
+
+.no-warn-border {
+  border: 1px solid #d9d9d9 !important;
+}
+
+.ant-input-sm {
+  height: 24px;
+}
+
+.ant-input {
+  padding: 0 12px !important;
+}
+
+.dataBar {
+  background-color: #FFEEE4;
+  padding-left: 20px;
+  margin: 0px 0 0;
+  border-radius: 4px;
+
+  span {
+    a {
+      text-decoration: underline;
+      color: @primary
+    }
+  }
+
+  .data-label {
+    color: #666;
+  }
+
+  .data-content {
+    color: #333;
+  }
+}
+
+.ant-form-item-label label {
+  line-height: 30px;
+}
+
+.mainTextColor {
+  color: @primary
+}
+
+.statistic-tips {
+
+  .icon,
+  .tips-text {
+    color: #909090 !important;
+  }
+}
+
+.xm-disable {
+  &.ant-switch {
+    background-color: rgba(0, 0, 0, 0.1);
+  }
+
+  &.ant-switch-checked {
+    opacity: 0.5
+  }
+
+  &.ant-switch-checked {
+    background-color: #FF8534;
+  }
+}
+
+.xm-help-center {
+  float: right;
+  width: 80px;
+  height: 50px;
+  text-align: right;
+}
+
+.xm-help-center:hover {
+  .help-outer {
+    display: block;
+  }
+}
+
+pre {
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+
+pre {
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+
+.ant-modal-header {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  border-bottom: 1px solid @xm-color-border;
+}
+
+input:-webkit-autofill,
+input:focus {
+  background-color: #fff !important;
+}
+
+
+.courseToolTips {
+  width: 300px;
+}
+
+.ant-tooltip-inner {
+  max-width: 500px;
+}
+
+.player-box {
+  width: 544px;
+  height: 306px;
+  background: #000;
+
+  .video-react {
+    left: 0;
+    right: 0;
+    margin: 0 auto;
+  }
+}
+
+.zhiCustomBtn {
+  cursor: pointer;
+  position: fixed;
+  z-index: 120;
+  right:0px;
+  bottom:10px;
+  width: 34px;
+  height: 142px;
+  background-image: url(https://image.xiaomaiketang.com/xm/DJnRQNEFbB.png);
+  background-size: contain; 
+  background-repeat: no-repeat;
+  .badge {
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    line-height: 20px;
+    color: #fff;
+    background: red;
+    text-align: center;
+    right: 0;
+    display: none;
+    animation: blink 1s ease-in infinite;
+  }
+}
+
+@keyframes blink {
+  0% {
+    transform: scale(1);
+  }
+
+  50% {
+    transform: scale(1.2);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}
+
+.empty {
+  text-align: center;
+  margin: 80px 0;
+
+  img {
+    width: 180px;
+  }
+}
+
+.ant-calendar-range.ant-calendar-time .ant-calendar-footer .ant-calendar-time-picker-btn {
+  display: none;
+}
+
+.ant-pagination-item-link {
+  display: block;
+}
+
+.resetBtn {
+  cursor: pointer;
+  margin-right: 16px;
+}
+
+// .staticSelect{
+//   display: flex;
+//   width:auto;
+//   display: inline-block;
+//   flex:1 1;
+// }
+
+.ant-btn-primary.ant-btn:hover {
+  border-color: #ffa35c;
+}
+
+.noTitleModal {
+  .ant-modal-close {
+    display: none;
+  }
+}
+
+// .right-container .ant-checkbox-inner:after{
+//   top: 2px;
+// }
+
+.printModal {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0px;
+  z-index: 100000;
+  background-color: #fff;
+}
+
+.ant-modal {
+  height: 650px;
+
+  .ant-modal-content {
+    .ant-modal-body {
+      min-height: 130px;
+      max-height: 600px;
+      overflow: auto;
+      // padding-top:0px!important;
+      .xm-page-control {
+        margin-bottom: 0;
+        padding-bottom: 0;
+      }
+    }
+  }
+}
+
+.christmas.ant-btn-primary:before {
+  display: none !important;
+}
+
+.ant-btn.subButton {
+  border: 1px solid #fdb089;
+  color: #fdb089;
+}
+
+.ant-form-explain-holder[aria-hidden=true] {
+  display: none;
+}
+
+.ac-tooltip {
+  background: rgba(0, 0, 0, 0.7) !important;
+  border: none !important;
+
+  .ac-title {
+    color: #fff !important;
+  }
+
+  .ac-list {
+
+    span,
+    li {
+      color: #fff !important;
+    }
+  }
+}
+
+.g2-tooltip {
+  background: rgba(0, 0, 0, 0.7) !important;
+
+  .g2-tooltip-list {
+    li {
+      color: #fff !important;
+    }
+  }
+}
+
+.BMap_cpyCtrl {
+  display: none;
+}
+
+#print {
+  position: absolute;
+  top: -1000px;
+}
+
+#v_select {
+  height: 20px;
+
+  .apiVersion {
+    .ant-select-selection {
+      background: transparent;
+      border: none;
+      color: #fff;
+      text-align: center;
+
+      .ant-select-selection-selected-value {
+        float: none;
+        text-align: center;
+      }
+    }
+  }
+}
+
+// a {
+//   color: #FF7519 !important;
+//   &:active{
+//     border: none;
+//   }
+// }
+
+.xm_alert {
+  padding: 5px 11px;
+  font-size: 14px;
+  background: #FFF0E7;
+  color: #666666;
+
+  .icon {
+    margin-right: 11px;
+  }
+
+  span {
+    color: #FF7519;
+    cursor: pointer;
+  }
+}
+
+.page-scrollbar-thumb {
+  &::-webkit-scrollbar {
+    display: inline-block;
+    width: 8px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    width: 8px;
+    border-radius: 5px;
+    background: rgba(0, 0, 0, 0.2);
+  }
+}
+
+.select-placeholder-color {
+
+  .ant-select-selection__placeholder,
+  .ant-select-search__field__placeholder {
+    color: #333;
+  }
+}
+
+.setting-body {
+  margin-top: 15px;
+}
+
+.fwb {
+  font-weight: 500;
+}
+
+.fz16 {
+  font-size: 16px;
+}
+
+.tar {
+  text-align: right;
+}
+
+.status-dot {
+  position: relative;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  display: inline-block;
+  vertical-align: middle;
+  margin-right: 8px;
+  &.status-dot-animation{
+    &::after{
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+      animation: antStatusProcessing 1.2s ease-in-out infinite;
+      content: "";
+    }
+  }
+  &.status-dot-gray {
+    background-color: #CCCCCC;
+    &.status-dot-animation::after{
+      border: 1px solid #CCCCCC;
+    }
+  }
+
+  &.status-dot-blue {
+    background-color: #238FFF;
+    &.status-dot-animation::after{
+      border: 1px solid #238FFF;
+    }
+  }
+
+  &.status-dot-yellow {
+    background-color: #FDBE31;
+    &.status-dot-animation::after{
+      border: 1px solid #FDBE31;
+    }
+  }
+
+}
+@keyframes antStatusProcessing {
+  0% {
+      transform: scale(.8);
+      opacity: .5
+  }
+
+  to {
+      transform: scale(2.4);
+      opacity: 0
+  }
+}
+
+.editor-box{
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-weight: bold;
+    span{
+      font-size: inherit;
+    }
+  }
+  h1{
+    font-size: 2em;
+  }
+  h2{
+    font-size: 1.5em;
+  }
+  h3{
+    font-size: 1.17em;
+  }
+  h5{
+    font-size: .83em;
+  }
+  h6{
+    font-size: .67em;
+  }
+
+  ul,ol{
+    list-style-position: inside;
+  }
+  
+  ul{
+    list-style-type: disc;
+  }
+  ol{
+    list-style-type: decimal;
+  }
+}
+.tac {
+  text-align: center;
+}
+
+.bgf {
+  background-color: #fff;
+}
+
+// 提示性文字样式
+.info-box {
+  line-height: 32px;
+  background:rgba(255,240,231,1);
+  border-radius:4px;
+}
+
+.flexbox {
+  display: flex;
+
+  & > :not(.flex-fixed) {
+    flex: 1 1;
+  }
+}
+
+.fr {
+  float: right;
+}
+
+.fl {
+  float: left;
+}
+
+.page{
+  .box{
+    .xm-page-control{
+      padding-bottom: 0px;
+      margin-bottom: 0px;
+    }
+    
+  }
+}
+.ovh {
+  overflow: hidden;
+}
+
+.cup {
+  cursor: pointer;
+}
+
+.table-total-number-pagination {
+  position: relative;
+  height: 0;
+  top: -40px;
+  color: #666;
+}
+
+.label-required::before {
+  display: inline-block;
+  margin-right: 4px;
+  color: #f5222d;
+  font-size: 14px;
+  font-family: SimSun,sans-serif;
+  line-height: 1;
+  content: '*';
+}
+
+.max-wrapper {
+  max-width: 1248px;
+  width: 100%;
+  overflow-x: hidden;
+  margin: 0 auto !important;
+  display: flex;
+  flex-direction: column;
+  .xm-breadCrumb {
+    margin-left: 0;
+  }
+  .box {
+    margin-left: 0 !important;
+  }
+}
+
+.default-confirm-icon {
+  font-size: 22px !important;
+  line-height: 22px !important;
+  float: left !important;
+  color: #FC9C6B !important;
+  margin-right: 16px !important;
+}
+
+.m-content {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  box-sizing: border-box;
+  overflow-y: auto;
+  animation: all 0.75;
+  padding-bottom: 16px;
+
+  .box {
+    flex: 1;
+  }
+}
+.table-extra-line{
+  cursor: pointer;
+  color: #FF7519;
+  &:not(:last-of-type)::after{
+    content: '|';
+    display: inline-block;
+    width: 13px;
+    text-align: center;
+    color: #BFBFBF;
+  }
+}
+
+.fix-page{
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: #F4F6FA;
+  z-index: 999;
+}
+.ant-table-tbody > tr.ant-table-row-selected td {
+  background: transparent !important;
+}

public/index.html → src/index.html

@@ -10,19 +10,23 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
       content="Web site created using create-react-app"
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!-- <link rel="apple-touch-icon" href="../src/common/images/logo.png" /> -->
+    <link rel="shortcut icon" href="https://image.xiaomaiketang.com/xm/KGSYFEpcHT.png">
+
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="stylesheet" href="//at.alicdn.com/t/font_2223403_1wpr50mnvdo.css">
+
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
@@ -32,7 +36,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>小麦云课堂</title>
     <script type="text/javascript" src="https://image.xiaomaiketang.com/xm/PhotoClip.js"></script>
   </head>
   <body>

src/modules/root/Main.less

 @import '../../core/variables.less';
 @import '../../core/page.less';
 @import '../../core/table.less';
+@import '../../core/global.less';
 
 @top-height: 50px;
 

src/modules/test/index.jsx

-import React from 'react';
-
+import React from "react";
+import Breadcrumbs from "@/components/Breadcrumbs";
 class testPage extends React.Component {
-
   constructor(props) {
     super(props);
-    this.state = {}
+    this.state = {};
   }
 
-
   render() {
     return (
       <div className="prepare-lesson-page page">
-        <div className="content-header">测试</div>
+        <div className="content-header">
+          <Breadcrumbs
+            navList="选班调班"
+            goBack={() => {
+              RCHistory.goBack();
+            }}
+          />
+        </div>
         <div className="box content-body">
-          测试内容
+        <i class="iconfont icontanhao_caise"></i>
         </div>
       </div>
-    )
+    );
   }
 }
 
-export default testPage;
\ No newline at end of file
+export default testPage;