提交首页

css/cross.min.css

@@ -0,0 +1,2042 @@
@charset "utf-8";
html,
body,
div,
span,
object,
iframe,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
input,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video,
h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	padding: 0;
	border: 0;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	-webkit-touch-callout: none
}
html,
body {
	min-height: 100%
}
html {
	font-size: 20px;
	font-family: sans-serif;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%
}
@media only screen and (min-width:360px) {
	html {
		font-size: 22.5px
	}
}
@media only screen and (min-width:375px) {
	html {
		font-size: 23.5px
	}
}
@media only screen and (min-width:400px) {
	html {
		font-size: 25px
	}
}
@media only screen and (min-width:414px) {
	html {
		font-size: 25.875px
	}
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
main,
nav,
section,
summary {
	display: block
}
audio,
canvas,
progress,
video {
	display: inline-block;
	vertical-align: baseline
}
audio:not([controls]) {
	display: none;
	height: 0
}
template {
	display: none
}
a {
	background-color: transparent;
	text-decoration: none
}
abbr[title] {
	border-bottom: 1px dotted
}
b,
strong {
	font-weight: bold
}
dfn {
	font-style: italic
}
mark {
	background: #ff0;
	color: #000
}
small {
	font-size: 80%
}
sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline
}
sup {
	top: -0.5em
}
sub {
	bottom: -0.25em
}
img {
	border: 0;
	font-size: 0;
	vertical-align: top
}
svg:not(:root) {
	overflow: hidden
}
figure {
	margin: 1em 40px
}
hr {
	box-sizing: content-box;
	height: 0
}
pre {
	overflow: auto
}
code,
kbd,
pre,
samp {
	font-family: monospace, monospace;
	font-size: 1em
}
button,
input,
optgroup,
select,
textarea {
	color: inherit;
	font: inherit;
	margin: 0;
	-webkit-appearance: none;
	appearance: none;
	background-color: #fff
}
button {
	overflow: visible
}
button,
select {
	text-transform: none
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
	-webkit-appearance: button;
	cursor: pointer
}
button[disabled],
html input[disabled] {
	cursor: default
}
button::-moz-focus-inner,
input::-moz-focus-inner {
	border: 0;
	padding: 0
}
input {
	line-height: normal
}
input[type="checkbox"],
input[type="radio"] {
	box-sizing: border-box;
	padding: 0
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
	height: auto
}
input[type="search"] {
	-webkit-appearance: textfield;
	box-sizing: content-box
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none
}
fieldset {
	border: 1px solid #c0c0c0;
	margin: 0 2px;
	padding: .35em .625em .75em
}
legend {
	border: 0;
	padding: 0
}
textarea {
	overflow: auto;
	resize: none
}
optgroup {
	font-weight: bold
}
table {
	border-collapse: collapse;
	border-spacing: 0
}
td,
th {
	padding: 0
}
a,
input,
textarea,
select,
button {
	outline: 0
}
h1,
h2,
h3,
h4,
h5,
h6 {
	font-size: 100%;
	font-weight: normal
}
ul,
ol {
	list-style: none
}
i,
em,
s {
	font-style: normal
}
body {
	/*position: relative;*/
	font-size: .6rem;
	line-height: 1.5
}
.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: ".";
	clear: both;
	height: 0
}
.clearfix {
	zoom: 1
}
.fl,
.fr {
	display: inline
}
.fl {
	float: left
}
.fr {
	float: right
}
.c-position-a {
	position: absolute
}
.c-position-r {
	position: relative
}
.c-position-f {
	position: fixed
}
.c-hide {
	display: none
}
.c-hidden {
	overflow: hidden;
	zoom: 1
}
.c-boxs {
	-webkit-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box
}
.c-main {
	margin: 0 auto
}
.c-nowrap {
	max-width: 100%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis
}
.c-nowrap-multi {
	display: -webkit-box;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2
}
.c-break {
	word-break: break-all
}
.c-block {
	display: block
}
.c-abox {
	display: -webkit-box;
	display: box;
	width: 100%
}
.c-border,
.c-border-t,
.c-border-b,
.c-border-l,
.c-border-r,
.c-border-tb {
	border-color: #e1e1e1;
	border-style: solid
}
.c-border {
	border-width: 1px
}
.c-border-t {
	border-top-width: 1px
}
.c-border-b {
	border-bottom-width: 1px
}
.c-border-l {
	border-left-width: 1px
}
.c-border-r {
	border-right-width: 1px
}
.c-border-tb {
	border-top-width: 1px;
	border-bottom-width: 1px
}
.c-border-d {
	border-style: dashed
}
.c-radius-2 {
	border-radius: .1rem
}
.c-radius-4 {
	border-radius: .2rem
}
.c-images-rounded,
.border-radius-rounded,
.c-radius-5 {
	border-radius: .25rem
}
.c-images-cycle,
.border-radius-circle,
.c-radius-50 {
	border-radius: 50%
}
.border-radius-pill,
.c-radius-pill {
	border-radius: 100rem
}
.c-images-thumbnail {
	padding: .25rem
}
.c-images-block {
	display: block;
	width: 100%;
	height: 100%
}
.m0 {
	margin: 0
}
.m5 {
	margin: .25rem
}
.m10 {
	margin: .5rem
}
.m15 {
	margin: .75rem
}
.m20 {
	margin: 1rem
}
.m25 {
	margin: 1.25rem
}
.m30 {
	margin: 1.5rem
}
.m35 {
	margin: 1.75rem
}
.m40 {
	margin: 2rem
}
.m45 {
	margin: 2.25rem
}
.m50 {
	margin: 2.5rem
}
.m100 {
	margin: 5rem
}
.mb0 {
	margin-bottom: 0
}
.mb5 {
	margin-bottom: .25rem
}
.mb10 {
	margin-bottom: .5rem
}
.mb15 {
	margin-bottom: .75rem
}
.mb20 {
	margin-bottom: 1rem
}
.mb25 {
	margin-bottom: 1.25rem
}
.mb30 {
	margin-bottom: 1.5rem
}
.mb35 {
	margin-bottom: 1.75rem
}
.mb40 {
	margin-bottom: 2rem
}
.mb45 {
	margin-bottom: 2.25rem
}
.mb50 {
	margin-bottom: 2.5rem
}
.mb100 {
	margin-bottom: 5rem
}
.mt0 {
	margin-top: 0
}
.mt5 {
	margin-top: .25rem
}
.mt10 {
	margin-top: .5rem
}
.mt15 {
	margin-top: .75rem
}
.mt20 {
	margin-top: 1rem
}
.mt25 {
	margin-top: 1.25rem
}
.mt30 {
	margin-top: 1.5rem
}
.mt35 {
	margin-top: 1.75rem
}
.mt40 {
	margin-top: 2rem
}
.mt45 {
	margin-top: 2.25rem
}
.mt50 {
	margin-top: 2.5rem
}
.mt100 {
	margin-top: 5rem
}
.ml0 {
	margin-left: 0
}
.ml5 {
	margin-left: .25rem
}
.ml10 {
	margin-left: .5rem
}
.ml15 {
	margin-left: .75rem
}
.ml20 {
	margin-left: 1rem
}
.ml25 {
	margin-left: 1.25rem
}
.ml30 {
	margin-left: 1.5rem
}
.ml35 {
	margin-left: 1.75rem
}
.ml40 {
	margin-left: 2rem
}
.ml45 {
	margin-left: 2.25rem
}
.ml50 {
	margin-left: 2.5rem
}
.ml100 {
	margin-left: 5rem
}
.mr0 {
	margin-right: 0
}
.mr5 {
	margin-right: .25rem
}
.mr10 {
	margin-right: .5rem
}
.mr15 {
	margin-right: .75rem
}
.mr20 {
	margin-right: 1rem
}
.mr25 {
	margin-right: 1.25rem
}
.mr30 {
	margin-right: 1.5rem
}
.mr35 {
	margin-right: 1.75rem
}
.mr40 {
	margin-right: 2rem
}
.mr45 {
	margin-right: 2.25rem
}
.mr50 {
	margin-right: 2.5rem
}
.mr100 {
	margin-right: 5rem
}
.mlr0 {
	margin-left: 0;
	margin-right: 0
}
.mlr5 {
	margin-left: .25rem;
	margin-right: .25rem
}
.mlr10 {
	margin-left: .5rem;
	margin-right: .5rem
}
.mlr15 {
	margin-left: .75rem;
	margin-right: .75rem
}
.mlr20 {
	margin-left: 1rem;
	margin-right: 1rem
}
.mlr25 {
	margin-left: 1.25rem;
	margin-right: 1.25rem
}
.mlr30 {
	margin-left: 1.5rem;
	margin-right: 1.5rem
}
.mlr35 {
	margin-left: 1.75rem;
	margin-right: 1.75rem
}
.mlr40 {
	margin-left: 2rem;
	margin-right: 2rem
}
.mlr45 {
	margin-left: 2.25rem;
	margin-right: 2.25rem
}
.mlr50 {
	margin-left: 2.5rem;
	margin-right: 2.5rem
}
.mlr100 {
	margin-left: 5rem;
	margin-right: 5rem
}
.mtb0 {
	margin-top: 0;
	margin-bottom: 0
}
.mtb5 {
	margin-top: .25rem;
	margin-bottom: .25rem
}
.mtb10 {
	margin-top: .5rem;
	margin-bottom: .5rem
}
.mtb15 {
	margin-top: .75rem;
	margin-bottom: .75rem
}
.mtb20 {
	margin-top: 1rem;
	margin-bottom: 1rem
}
.mtb25 {
	margin-top: 1.25rem;
	margin-bottom: 1.25rem
}
.mtb30 {
	margin-top: 1.5rem;
	margin-bottom: 1.5rem
}
.mtb35 {
	margin-top: 1.75rem;
	margin-bottom: 1.75rem
}
.mtb40 {
	margin-top: 2rem;
	margin-bottom: 2rem
}
.mtb45 {
	margin-top: 2.25rem;
	margin-bottom: 2.25rem
}
.mtb50 {
	margin-top: 2.5rem;
	margin-bottom: 2.5rem
}
.mtb100 {
	margin-top: 5rem;
	margin-bottom: 5rem
}
.p0 {
	padding: 0
}
.p5 {
	padding: .25rem
}
.p10 {
	padding: .5rem
}
.p15 {
	padding: .75rem
}
.p20 {
	padding: 1rem
}
.p25 {
	padding: 1.25rem
}
.p30 {
	padding: 1.5rem
}
.p35 {
	padding: 1.75rem
}
.p40 {
	padding: 2rem
}
.p45 {
	padding: 2.25rem
}
.p50 {
	padding: 2.5rem
}
.p100 {
	padding: 5rem
}
.pb0 {
	padding-bottom: 0
}
.pb5 {
	padding-bottom: .25rem
}
.pb10 {
	padding-bottom: .5rem
}
.pb15 {
	padding-bottom: .75rem
}
.pb20 {
	padding-bottom: 1rem
}
.pb25 {
	padding-bottom: 1.25rem
}
.pb30 {
	padding-bottom: 1.5rem
}
.pb35 {
	padding-bottom: 1.75rem
}
.pb40 {
	padding-bottom: 2rem
}
.pb45 {
	padding-bottom: 2.25rem
}
.pb50 {
	padding-bottom: 2.5rem
}
.pb100 {
	padding-bottom: 5rem
}
.pt0 {
	padding-top: 0
}
.pt5 {
	padding-top: .25rem
}
.pt10 {
	padding-top: .5rem
}
.pt15 {
	padding-top: .75rem
}
.pt20 {
	padding-top: 1rem
}
.pt25 {
	padding-top: 1.25rem
}
.pt30 {
	padding-top: 1.5rem
}
.pt35 {
	padding-top: 1.75rem
}
.pt40 {
	padding-top: 2rem
}
.pt45 {
	padding-top: 2.25rem
}
.pt50 {
	padding-top: 2.5rem
}
.pt100 {
	padding-top: 5rem
}
.pl0 {
	padding-left: 0
}
.pl5 {
	padding-left: .25rem
}
.pl10 {
	padding-left: .5rem
}
.pl15 {
	padding-left: .75rem
}
.pl20 {
	padding-left: 1rem
}
.pl25 {
	padding-left: 1.25rem
}
.pl30 {
	padding-left: 1.5rem
}
.pl35 {
	padding-left: 1.75rem
}
.pl40 {
	padding-left: 2rem
}
.pl45 {
	padding-left: 2.25rem
}
.pl50 {
	padding-left: 2.5rem
}
.pl100 {
	padding-left: 5rem
}
.pr0 {
	padding-right: 0
}
.pr5 {
	padding-right: .25rem
}
.pr10 {
	padding-right: .5rem
}
.pr15 {
	padding-right: .75rem
}
.pr20 {
	padding-right: 1rem
}
.pr25 {
	padding-right: 1.25rem
}
.pr30 {
	padding-right: 1.5rem
}
.pr35 {
	padding-right: 1.75rem
}
.pr40 {
	padding-right: 2rem
}
.pr45 {
	padding-right: 2.25rem
}
.pr50 {
	padding-right: 2.5rem
}
.pr100 {
	padding-right: 5rem
}
.ptb0 {
	padding-top: 0;
	padding-bottom: 0
}
.ptb5 {
	padding-top: .25rem;
	padding-bottom: .25rem
}
.ptb10 {
	padding-top: .5rem;
	padding-bottom: .5rem
}
.ptb15 {
	padding-top: .75rem;
	padding-bottom: .75rem
}
.ptb20 {
	padding-top: 1rem;
	padding-bottom: 1rem
}
.ptb25 {
	padding-top: 1.25rem;
	padding-bottom: 1.25rem
}
.ptb30 {
	padding-top: 1.5rem;
	padding-bottom: 1.5rem
}
.ptb35 {
	padding-top: 1.75rem;
	padding-bottom: 1.75rem
}
.ptb40 {
	padding-top: 2rem;
	padding-bottom: 2rem
}
.ptb45 {
	padding-top: 2.25rem;
	padding-bottom: 2.25rem
}
.ptb50 {
	padding-top: 2.5rem;
	padding-bottom: 2.5rem
}
.ptb100 {
	padding-top: 5rem;
	padding-bottom: 5rem
}
.plr0 {
	padding-left: 0;
	padding-right: 0
}
.plr10 {
	padding-left: .5rem;
	padding-right: .5rem
}
.plr15 {
	padding-left: .75rem;
	padding-right: .75rem
}
.plr20 {
	padding-left: 1rem;
	padding-right: 1rem
}
.plr25 {
	padding-left: 1.25rem;
	padding-right: 1.25rem
}
.plr30 {
	padding-left: 1.5rem;
	padding-right: 1.5rem
}
.plr35 {
	padding-left: 1.75rem;
	padding-right: 1.75rem
}
.plr40 {
	padding-left: 2rem;
	padding-right: 2rem
}
.plr45 {
	padding-left: 2.25rem;
	padding-right: 2.25rem
}
.plr50 {
	padding-left: 2.5rem;
	padding-right: 2.5rem
}
.plr100 {
	padding-left: 5rem;
	padding-right: 5rem
}
.c-list-disc {
	list-style-type: disc
}
.c-list-circle {
	list-style-type: circle
}
.c-list-square {
	list-style-type: square
}
.c-list-decimal {
	list-style-type: decimal
}
.c-list-alpha {
	list-style-type: lower-alpha
}
.c-list-roman {
	list-style-type: lower-roman
}
.c-list-inline {
	padding-left: 0;
	margin-left: -5px;
	list-style: none
}
.c-list-inline li {
	display: inline-block;
	padding-right: 5px;
	padding-left: 5px
}
.c-family-HelveticaNeue {
	font-family: Helvetica Neue
}
.c-family-Helvetica {
	font-family: Helvetica
}
.c-bold {
	font-weight: bold
}
.c-f10 {
	font-size: .5rem
}
.c-f12 {
	font-size: .6rem
}
.c-f13 {
	font-size: .65rem
}
.c-f14 {
	font-size: .7rem
}
.c-f15 {
	font-size: .75rem
}
.c-f16 {
	font-size: .8rem
}
.c-f17 {
	font-size: .85rem
}
.c-f18 {
	font-size: .9rem
}
.c-f20 {
	font-size: 1rem
}
.c-f22 {
	font-size: 1.1rem
}
.c-f24 {
	font-size: 1.2rem
}
.c-f28 {
	font-size: 1.4rem
}
.c-f30 {
	font-size: 1.5rem
}
.c-f32 {
	font-size: 1.6rem
}
.c-f36 {
	font-size: 1.8rem
}
.c-f40 {
	font-size: 2rem
}
.c-f48 {
	font-size: 2.4rem
}
.c-t-left {
	text-align: left
}
.c-t-center {
	text-align: center
}
.c-t-right {
	text-align: right
}
.c-line-h1 {
	line-height: 1.88
}
.c-line-h2 {
	line-height: 2.26
}
.c-fff {
	color: #fff
}
.c-222 {
	color: #222
}
.c-333 {
	color: #333
}
.c-555 {
	color: #555
}
.c-666 {
	color: #666
}
.c-999 {
	color: #999
}
.c-f00 {
	color: #f00
}
.c-f60 {
	color: #f60
}
.c-f90 {
	color: #f90
}
.c-37a6ed {
	color: #37a6ed
}
.c-5b5b5b {
	color: #5b5b5b
}
.c-909090 {
	color: #909090
}
.c-ff8100 {
	color: #ff8100
}
.c-007cd9 {
	color: #007cd9
}
.c-4dcd70 {
	color: #4dcd70
}
.bgc-fff {
	background-color: #fff
}
.bgc-f3f3f3 {
	background-color: #f3f3f3
}
.bgc-f9f9f9 {
	background-color: #f9f9f9
}
.c-container:after,
.c-row:after {
	content: "";
	display: table;
	clear: both
}
.c-container {
	padding-top: 1px;
	margin-top: -1px
}
.c-row {
	zoom: 1
}
.width-100,
.c-100 {
	width: 100%
}
.width-90,
.c-90 {
	width: 90%
}
.width-80,
.c-80 {
	width: 80%
}
.width-75,
.c-75 {
	width: 75%
}
.width-70,
.c-70 {
	width: 70%
}
.width-66,
.c-66 {
	width: 66.6%
}
.width-65,
.c-65 {
	width: 65%
}
.width-60,
.c-60 {
	width: 60%
}
.width-50,
.c-50 {
	width: 50%
}
.width-40,
.c-40 {
	width: 40%
}
.width-35,
.c-35 {
	width: 35%
}
.width-33,
.c-33 {
	width: 33.3%
}
.width-30,
.c-30 {
	width: 30%
}
.width-25,
.c-25 {
	width: 25%
}
.width-20,
.c-20 {
	width: 20%
}
.width-10,
.c-10 {
	width: 10%
}
.c-row .c-90,
.c-row .c-80,
.c-row .c-75,
.c-row .c-70,
.c-row .c-66,
.c-row .c-65,
.c-row .c-60,
.c-row .c-50,
.c-row .c-40,
.c-row .c-35,
.c-row .c-33,
.c-row .c-30,
.c-row .c-25,
.c-row .c-20,
.c-row .c-10 {
	float: left;
	margin-left: 3%
}
.c-row .c-90:first-child,
.c-row .c-80:first-child,
.c-row .c-75:first-child,
.c-row .c-70:first-child,
.c-row .c-66:first-child,
.c-row .c-65:first-child,
.c-row .c-60:first-child,
.c-row .c-50:first-child,
.c-row .c-40:first-child,
.c-row .c-35:first-child,
.c-row .c-33:first-child,
.c-row .c-30:first-child,
.c-row .c-25:first-child,
.c-row .c-20:first-child,
.c-row .c-10:first-child {
	margin-left: 0
}
.c-row .c-90 {
	width: 89.7%
}
.c-row .c-80 {
	width: 79.4%
}
.c-row .c-75 {
	width: 74.25%
}
.c-row .c-70 {
	width: 69.1%
}
.c-row .c-66 {
	width: 65.66666666666666%
}
.c-row .c-65 {
	width: 65.66666666666666%
}
.c-row .c-60 {
	width: 58.800000000000004%
}
.c-row .c-50 {
	width: 48.5%
}
.c-row .c-40 {
	width: 38.2%
}
.c-row .c-35 {
	width: 31.333333333333332%
}
.c-row .c-33 {
	width: 31.333333333333332%
}
.c-row .c-30 {
	width: 27.9%
}
.c-row .c-25 {
	width: 22.75%
}
.c-row .c-20 {
	width: 17.6%
}
.c-row .c-10 {
	width: 7.3%
}
.c-push-90,
.c-push-80,
.c-push-75,
.c-push-70,
.c-push-66,
.c-push-65,
.c-push-60,
.c-push-50,
.c-push-40,
.c-push-35,
.c-push-33,
.c-push-30,
.c-push-25,
.c-push-20,
.c-push-10 {
	position: relative
}
.c-push-90 {
	left: 92.7%
}
.c-push-80 {
	left: 82.4%
}
.c-push-75 {
	left: 77.25%
}
.c-push-70 {
	left: 72.1%
}
.c-push-66 {
	left: 68.66666666666666%
}
.c-push-65 {
	left: 68.66666666666666%
}
.c-push-60 {
	left: 61.800000000000004%
}
.c-push-50 {
	left: 51.5%
}
.c-push-40 {
	left: 41.2%
}
.c-push-35 {
	left: 34.33333333333333%
}
.c-push-33 {
	left: 34.33333333333333%
}
.c-push-30 {
	left: 30.9%
}
.c-push-25 {
	left: 25.75%
}
.c-push-20 {
	left: 20.6%
}
.c-push-10 {
	left: 10.3%
}
.c-row .c-push-right {
	float: right
}
.c-row .c-role-right {
	margin-left: 3%;
	float: right
}
.c-row .c-role-left {
	margin-left: 0
}
.c-centered {
	float: none!important;
	margin: 0 auto!important
}
.c-padding {
	padding: 20px
}
.c-padding .c-100,
.c-padding .c-90,
.c-padding .c-80,
.c-padding .c-75,
.c-padding .c-70,
.c-padding .c-66,
.c-padding .c-65,
.c-padding .c-60,
.c-padding .c-50,
.c-padding .c-40,
.c-padding .c-35,
.c-padding .c-33,
.c-padding .c-30,
.c-padding .c-25,
.c-padding .c-20,
.c-padding .c-10 {
	padding: 20px
}
.c-split .c-90,
.c-split .c-80,
.c-split .c-75,
.c-split .c-70,
.c-split .c-66,
.c-split .c-65,
.c-split .c-60,
.c-split .c-50,
.c-split .c-40,
.c-split .c-35,
.c-split .c-33,
.c-split .c-30,
.c-split .c-25,
.c-split .c-20,
.c-split .c-10 {
	margin-left: 0
}
.c-split .c-90 {
	width: 90%
}
.c-split .c-80 {
	width: 80%
}
.c-split .c-75 {
	width: 75%
}
.c-split .c-70 {
	width: 70%
}
.c-split .c-66 {
	width: 66.6%
}
.c-split .c-65 {
	width: 65%
}
.c-split .c-60 {
	width: 60%
}
.c-split .c-50 {
	width: 50%
}
.c-split .c-40 {
	width: 40%
}
.c-split .c-35 {
	width: 35%
}
.c-split .c-33 {
	width: 33.3%
}
.c-split .c-30 {
	width: 30%
}
.c-split .c-25 {
	width: 25%
}
.c-split .c-20 {
	width: 20%
}
.c-split .c-10 {
	width: 10%
}
.c-blocks-2,
.c-blocks-3,
.c-blocks-4,
.c-blocks-5,
.c-blocks-6 {
	padding-left: 0;
	list-style: none
}
.c-blocks-2:after,
.c-blocks-3:after,
.c-blocks-4:after,
.c-blocks-5:after,
.c-blocks-6:after {
	content: "";
	display: table;
	clear: both
}
.c-blocks-2>li,
.c-blocks-3>li,
.c-blocks-4>li,
.c-blocks-5>li,
.c-blocks-6>li,
.c-blocks-2>div,
.c-blocks-3>div,
.c-blocks-4>div,
.c-blocks-5>div,
.c-blocks-6>div {
	height: auto;
	float: left
}
.c-blocks-2>li,
.c-blocks-2>div {
	width: 50%
}
.c-blocks-3>li,
.c-blocks-3>div {
	width: 33.333333333333332%
}
.c-blocks-4>li,
.c-blocks-4>div {
	width: 25%
}
.c-blocks-5>li,
.c-blocks-5>div {
	width: 20%
}
.c-blocks-6>li,
.c-blocks-6>div {
	width: 16.666666666666666%
}
.ui-grid {
	display: -webkit-box;
	display: box
}
.ui-grid-middle {
	-webkit-box-pack: center;
	-webkit-box-align: center;
	box-pack: center;
	box-align: center
}
.ui-grid-vertical {
	-webkit-box-orient: vertical;
	box-orient: vertical
}
.ui-grid-label {
	-webkit-box-flex: 0;
	box-flex: 0;
	width: 100px;
	font-weight: 600
}
.ui-col-0 {
	-webkit-box-flex: 0;
	box-flex: 0
}
.ui-col-1 {
	-webkit-box-flex: 1;
	box-flex: 1
}
.ui-col-2 {
	-webkit-box-flex: 2;
	box-flex: 2
}
.ui-col-3 {
	-webkit-box-flex: 3;
	box-flex: 3
}
.ui-col-4 {
	-webkit-box-flex: 4;
	box-flex: 3
}
.ui-col-5 {
	-webkit-box-flex: 5;
	box-flex: 5
}
.ui-col-6 {
	-webkit-box-flex: 6;
	box-flex: 6
}
.ui-arrow,
.ui-arrow s {
	position: relative;
	display: block;
	font-size: 0;
	line-height: 0;
	width: 0;
	height: 0;
	border-color: transparent;
	border-style: dashed;
	border-width: 7px
}
.ui-arrow-r,
.ui-arrow-r s {
	border-left-color: #cdcdcd;
	border-left-style: solid
}
.ui-arrow-r:empty {
	border-left-color: #ddd
}
.ui-arrow-r s {
	border-left-color: #fff;
	position: absolute;
	left: -9px;
	top: -7px
}
.ui-arrow-l,
.ui-arrow-l s {
	border-right-color: #cdcdcd;
	border-right-style: solid
}
.ui-arrow-l:empty {
	border-right-color: #ddd
}
.ui-arrow-l s {
	border-right-color: #fff;
	position: absolute;
	right: -9px;
	top: -7px
}
.ui-arrow-t,
.ui-arrow-t s {
	border-bottom-color: #cdcdcd;
	border-bottom-style: solid
}
.ui-arrow-t:empty {
	border-bottom-color: #ddd
}
.ui-arrow-t s {
	border-bottom-color: #fff;
	position: absolute;
	left: -7px;
	top: -5px
}
.ui-arrow-b,
.ui-arrow-b s {
	border-top-color: #cdcdcd;
	border-top-style: solid
}
.ui-arrow-b:empty {
	border-top-color: #ddd
}
.ui-arrow-b s {
	border-top-color: #fff;
	position: absolute;
	left: -7px;
	bottom: -5px
}
.ui-arrow-circle {
	line-height: 100%;
	overflow: hidden;
	font-family: Tahoma, Helvetica;
	font-size: 18px;
	color: #cdcdcd
}

css/paging.css

@@ -0,0 +1,68 @@
.page_div {
	margin-top: 20px;
	margin-bottom: 20px;
	font-size: 14px;
	font-family: "microsoft yahei";
	color: #666666;
	margin-right: 10px;
	padding-left: 20px;
	text-align: center;
}
.page_div a {
	min-width: 30px;
	height: 28px;
	border: 1px solid #ddd;
	text-align: center;
	margin: 0 4px;
	cursor: pointer;
	line-height: 28px;
	color: #666666;
	font-size: 14px;
	display: inline-block;
}
#firstPage,
#lastPage {
	width: 50px;
}
#firstPage,
#lastPage,
{
	width: 50px;
	color: #666;
	border: 1px solid #ddd;
}
#prePage,
#nextPage {
	width: 70px;
	color: #666;
	border: 1px solid #ddd;
}
#firstPage:hover,
#lastPage:hover,
#prePage:hover,
#nextPage:hover {
	color: #fff;
}
.page_div .current,
.page_div a:hover {
	background-color: #0AD9C9;
	border-color: #0AD9C9;
	color: #FFFFFF;
}
.totalPages {
	margin: 0 10px;
}
.totalPages span,
.totalSize span {
	color: #0AD9C9;
	margin: 0 5px;
	font-size: 14px;
}

js/paging.js

@@ -0,0 +1,121 @@
(function($, window, document, undefined) {
	//定义分页类
	function Paging(element, options) {
		this.element = element;
		//传入形参
		this.options = {
			pageNo: options.pageNo||1,
			totalPage: options.totalPage,
			totalSize:options.totalSize,
			callback:options.callback
		};
		//根据形参初始化分页html和css代码
		this.init();
	}
	//对Paging的实例对象添加公共的属性和方法
	Paging.prototype = {
		constructor: Paging,
		init: function() {
			this.creatHtml();
			this.bindEvent();
		},
		creatHtml: function() {
			var me = this;
			var content = "";
			var current = me.options.pageNo;
			var total = me.options.totalPage;
			var totalNum = me.options.totalSize;
			content += "<a id=\"firstPage\">首页</a><a id='prePage'>上一页</a>";
			//总页数大于6时候
			if(total > 6) {
				//当前页数小于5时显示省略号
				if(current < 5) {
					for(var i = 1; i < 6; i++) {
						if(current == i) {
							content += "<a class='current'>" + i + "</a>";
						} else {
							content += "<a>" + i + "</a>";
						}
					}
					content += ". . .";
					content += "<a>"+total+"</a>";
				} else {
					 //判断页码在末尾的时候
					if(current < total - 3) {
						for(var i = current - 2; i < current + 3; i++) {
							if(current == i) {
								content += "<a class='current'>" + i + "</a>";
							} else {
								content += "<a>" + i + "</a>";
							}
						}
						content += ". . .";
						content += "<a>"+total+"</a>";
					//页码在中间部分时候	
					} else {
						content += "<a>1</a>";
						content += ". . .";
						for(var i = total - 4; i < total + 1; i++) {
							if(current == i) {
								content += "<a class='current'>" + i + "</a>";
							} else {
								content += "<a>" + i + "</a>";
							}
						}
					}
				}
				//页面总数小于6的时候
			} else {
				for(var i = 1; i < total + 1; i++) {
					if(current == i) {
						content += "<a class='current'>" + i + "</a>";
					} else {
						content += "<a>" + i + "</a>";
					}
				}
			}
			content += "<a id='nextPage'>下一页</a>";
			content += "<a id=\"lastPage\">尾页</a>";
			content += "<span class='totalPages'> 共<span>"+total+"</span>页 </span>";
			content += "<span class='totalSize'> 共<span>"+totalNum+"</span>条记录 </span>";
			me.element.html(content);
		},
		//添加页面操作事件
		bindEvent: function() {
			var me = this;
			me.element.off('click', 'a');
			me.element.on('click', 'a', function() {
				var num = $(this).html();
				var id=$(this).attr("id");
				if(id == "prePage") {
					if(me.options.pageNo == 1) {
						me.options.pageNo = 1;
					} else {
						me.options.pageNo = +me.options.pageNo - 1;
					}
				} else if(id == "nextPage") {
					if(me.options.pageNo == me.options.totalPage) {
						me.options.pageNo = me.options.totalPage
					} else {
						me.options.pageNo = +me.options.pageNo + 1;
					}
				} else if(id =="firstPage") {
					me.options.pageNo = 1;
				} else if(id =="lastPage") {
					me.options.pageNo = me.options.totalPage;
				}else{
					me.options.pageNo = +num;
				}
				me.creatHtml();
				if(me.options.callback) {
					me.options.callback(me.options.pageNo);
				}
			});
		}
	};
	//通过jQuery对象初始化分页对象
	$.fn.paging = function(options) {
		return new Paging($(this), options);
	}
})(jQuery, window, document);

page/home/html/home.html

@@ -0,0 +1,46 @@
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>首页</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="renderer" content="webkit">
		<meta http-equiv="Cache-Control" content="no-siteapp" />
		<meta name="keywords" content="首页">
		<meta name="description" content="首页">
		<link rel="shortcut icon" href="../../../favicon.ico">
		<link rel="stylesheet" type="text/css" href="../../../css/font-awesome.min.css"/>
        <link rel="stylesheet" type="text/css" href="../../../css/bootstrap.min.css"/>
        <link rel="stylesheet" type="text/css" href="../../../plugins/artDialog/6.0.5/api/css/ui-dialog.css"/>
        <link rel="stylesheet" type="text/css" href="../../../css/style.min.css"/>
        <link rel="stylesheet" type="text/css" href="../../../css/cross.css"/>
		<link rel="stylesheet" type="text/css" href="../../../css/paging.css" />
		<link rel="stylesheet" type="text/css" href="../css/home.css" />
	</head>
	<body>
		<div id="main">
			<page-header></page-header>
            <page-footer></page-footer>
			<div id="page" class="page_div"></div>
		</div>
		<script src="../../../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../../js/jquery-2.2.4.js"></script>
		<script src="../../../js/bootstrap.min.js"></script>
		<script src="../../../js/validate/jquery.validate.min.js"></script>
		<script src="../../../js/validate/messages_zh.min.js"></script>
		<script src="../../../js/security.js"></script>
		<script src="../../../js/es6-promise.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../../js/underscore.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../../js/util.js" type="text/javascript" charset="utf-8"></script>
		<!--<script src="../../../api/http-request.js" type="text/javascript" charset="utf-8"></script>-->
		<script src="../../../plugins/artDialog/6.0.5/api/js/dialog-plus.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../../js/paging.js"></script>
		<script src="../../../component/common/header.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../component/common/footer.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../component/common/event-bus.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/home.js"></script>
	</body>
</html>

page/home/js/home.js

@@ -0,0 +1,17 @@
new Vue({
    el: "#main",
    data: {
        
    },
    mounted:function(){
    	//分页初始化
		$("#page").paging({
			pageNo: 1,
			totalPage: 50,
			totalSize: 20,
			callback: function(num) {
				//回调的页数
			}
		})
    }
})