Skip to content

X
xiaomai-cloud-class-web
Commit 8cbd2a07 by wufan
Options

feat:增加PageControl组件并引入iconfont

parent 2bb97039
Showing with 2004 additions and 15 deletions
config/paths.js
...@@ -62,7 +62,7 @@ module.exports = { ...@@ -62,7 +62,7 @@ module.exports = {
appPath: resolveApp('.'), appPath: resolveApp('.'),
appBuild: resolveApp('dist'), appBuild: resolveApp('dist'),
appPublic: resolveApp('public'), appPublic: resolveApp('public'),
appHtml: resolveApp('public/index.html'), appHtml: resolveApp('src/index.html'),
appIndexJs: resolveModule(resolveApp, 'src/index'), appIndexJs: resolveModule(resolveApp, 'src/index'),
appPackageJson: resolveApp('package.json'), appPackageJson: resolveApp('package.json'),
appSrc: resolveApp('src'), appSrc: resolveApp('src'),
......
config/webpack.config.js
...@@ -160,7 +160,7 @@ module.exports = function(webpackEnv) { ...@@ -160,7 +160,7 @@ module.exports = function(webpackEnv) {
// to bring better experience for Create React App users. You can replace // 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: // the line below with these two lines if you prefer the stock client:
// require.resolve('webpack-dev-server/client') + '?/', // require.resolve('webpack-dev-server/client') + '?/',
// require.resolve('webpack/hot/dev-server'), require.resolve('webpack/hot/dev-server'),
isEnvDevelopment && isEnvDevelopment &&
require.resolve('react-dev-utils/webpackHotDevClient'), require.resolve('react-dev-utils/webpackHotDevClient'),
// Finally, this is your app's code: // Finally, this is your app's code:
......
src/components/Breadcrumbs.less 0 → 100644
@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 0 → 100644
/*
* @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 0 → 100644
@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 0 → 100644
/*
* @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 0 → 100644
@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 @@ ...@@ -10,19 +10,23 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <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="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" /> <meta name="theme-color" content="#000000" />
<meta <meta
name="description" name="description"
content="Web site created using create-react-app" 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 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/ 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="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. Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build. It will be replaced with the URL of the `public` folder during the build.
...@@ -32,7 +36,7 @@ ...@@ -32,7 +36,7 @@
work correctly both with client-side routing and a non-root public URL. 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`. 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> <script type="text/javascript" src="https://image.xiaomaiketang.com/xm/PhotoClip.js"></script>
</head> </head>
<body> <body>
......
src/modules/root/Main.less
@import '../../core/variables.less'; @import '../../core/variables.less';
@import '../../core/page.less'; @import '../../core/page.less';
@import '../../core/table.less'; @import '../../core/table.less';
@import '../../core/global.less';
@top-height: 50px; @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 { class testPage extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = {} this.state = {};
} }
render() { render() {
return ( return (
<div className="prepare-lesson-page page"> <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"> <div className="box content-body">
测试内容 <i class="iconfont icontanhao_caise"></i>
</div> </div>
</div> </div>
) );
} }
} }
export default testPage; export default testPage;
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment