|
@@ -0,0 +1,532 @@
|
|
|
+// dark
|
|
|
+$midDark: #666;
|
|
|
+$dark: #555;
|
|
|
+$gray: #999;
|
|
|
+$midgray: #a38888;
|
|
|
+
|
|
|
+// main
|
|
|
+$mainColor: rgba(67, 80, 136, 1);
|
|
|
+$purple: rgba(151, 94, 229, 1);
|
|
|
+$blue: rgba(61, 160, 255, 1);
|
|
|
+$cyan: rgba(48, 203, 203, 1);
|
|
|
+$green: rgba(75, 203, 116, 1);
|
|
|
+$yellow: rgba(250, 212, 68, 1);
|
|
|
+$lightGray: rgba(217, 217, 217, 1);
|
|
|
+// bold
|
|
|
+$darkBlue: #3589d8;
|
|
|
+
|
|
|
+// struct
|
|
|
+$boxShadow: #d7dae3;
|
|
|
+$borderColor: rgba(233, 233, 233, 1);
|
|
|
+$lightBackground: rgba(250, 250, 250, 1);
|
|
|
+
|
|
|
+body,
|
|
|
+div,
|
|
|
+dl,
|
|
|
+dt,
|
|
|
+dd,
|
|
|
+ul,
|
|
|
+ol,
|
|
|
+li,
|
|
|
+h1,
|
|
|
+h2,
|
|
|
+h3,
|
|
|
+h4,
|
|
|
+h5,
|
|
|
+h6,
|
|
|
+p,
|
|
|
+blockquote,
|
|
|
+tr,
|
|
|
+th,
|
|
|
+td,
|
|
|
+span {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+body {
|
|
|
+ font-size: 19px;
|
|
|
+ color: $midDark;
|
|
|
+ font-family: "PingFang SC", Tahoma, Helvetica, Arial, sans-serif;
|
|
|
+}
|
|
|
+.font-normal {
|
|
|
+ font-family: "PingFang SC Regular", "Microsoft YaHei", Tahoma, Helvetica,
|
|
|
+ Arial, sans-serif;
|
|
|
+}
|
|
|
+.font-bold {
|
|
|
+ font-family: "PingFang SC Semibold", "Microsoft YaHei", Tahoma, Helvetica,
|
|
|
+ Arial, sans-serif;
|
|
|
+}
|
|
|
+li {
|
|
|
+ list-style: none;
|
|
|
+}
|
|
|
+em,
|
|
|
+i,
|
|
|
+u {
|
|
|
+ font-style: normal;
|
|
|
+}
|
|
|
+h1,
|
|
|
+h2,
|
|
|
+h3,
|
|
|
+h4,
|
|
|
+h5,
|
|
|
+h6 {
|
|
|
+ font-size: 100%;
|
|
|
+ font-weight: normal;
|
|
|
+}
|
|
|
+fieldset,
|
|
|
+img {
|
|
|
+ border: 0;
|
|
|
+}
|
|
|
+abbr {
|
|
|
+ border: 0;
|
|
|
+ font-variant: normal;
|
|
|
+}
|
|
|
+a {
|
|
|
+ text-decoration: none;
|
|
|
+ color: inherit;
|
|
|
+ *color: #999999;
|
|
|
+}
|
|
|
+
|
|
|
+img {
|
|
|
+ vertical-align: middle;
|
|
|
+}
|
|
|
+.page-error {
|
|
|
+ color: $purple;
|
|
|
+ font-size: 25px;
|
|
|
+ text-align: center;
|
|
|
+ padding: 150px 30px;
|
|
|
+}
|
|
|
+
|
|
|
+/* page-box */
|
|
|
+.page-box {
|
|
|
+ width: 1160px;
|
|
|
+ height: 1639px;
|
|
|
+ margin: 0 auto;
|
|
|
+ position: relative;
|
|
|
+ padding: 37px 58px 70px;
|
|
|
+ page-break-after: always;
|
|
|
+
|
|
|
+ .page-body {
|
|
|
+ background: #fff;
|
|
|
+ height: 1530px;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ .page-content {
|
|
|
+ margin-top: 39px;
|
|
|
+ height: 1388px;
|
|
|
+ border: 2px dotted rgba(221, 221, 221, 1);
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ &::before {
|
|
|
+ content: "";
|
|
|
+ display: block;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ z-index: auto;
|
|
|
+ width: 100%;
|
|
|
+ border-bottom: 4px solid $mainColor;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .page-foot {
|
|
|
+ position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ height: 70px;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ padding: 5px 58px;
|
|
|
+ color: $gray;
|
|
|
+ .foot-left {
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+ .foot-right {
|
|
|
+ float: right;
|
|
|
+ padding-right: 180px;
|
|
|
+ background-image: url(../images/bg-footer.png);
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-position: right 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .page-chart {
|
|
|
+ min-height: 200px;
|
|
|
+ max-height: 100%;
|
|
|
+ }
|
|
|
+ .page-table {
|
|
|
+ margin: 0 39px;
|
|
|
+ padding: 1px;
|
|
|
+
|
|
|
+ &.teacher-table {
|
|
|
+ padding-top: 30px;
|
|
|
+ }
|
|
|
+ &.page-table-pad {
|
|
|
+ padding-top: 100px;
|
|
|
+ }
|
|
|
+ &.level-table {
|
|
|
+ padding-top: 100px;
|
|
|
+
|
|
|
+ th,
|
|
|
+ td {
|
|
|
+ font-size: 16px;
|
|
|
+ padding: 7px 3px;
|
|
|
+ }
|
|
|
+ td[rowspan] {
|
|
|
+ padding: 7px 10px;
|
|
|
+ width: 60px;
|
|
|
+ background-color: $lightBackground;
|
|
|
+ word-break: break-all;
|
|
|
+ }
|
|
|
+ td.td-group-name-1 {
|
|
|
+ padding: 0px 2px;
|
|
|
+ font-size: 15px;
|
|
|
+ line-height: 1;
|
|
|
+ p {
|
|
|
+ text-align: center;
|
|
|
+ margin: 0 auto;
|
|
|
+ width: 60px;
|
|
|
+ max-height: 30px;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ td.td-group-name-2 {
|
|
|
+ padding: 0px 2px;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 1.25;
|
|
|
+ p {
|
|
|
+ text-align: center;
|
|
|
+ margin: 0 auto;
|
|
|
+ width: 50px;
|
|
|
+ max-height: 60px;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ td.td-name {
|
|
|
+ width: 130px;
|
|
|
+ p {
|
|
|
+ text-align: center;
|
|
|
+ margin: 0 auto;
|
|
|
+ width: 120px;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // icon
|
|
|
+ .page-icon {
|
|
|
+ display: inline-block;
|
|
|
+ vertical-align: middle;
|
|
|
+ width: 30px;
|
|
|
+ height: 30px;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ .icon-star {
|
|
|
+ background-image: url(../images/common/icon-star.png);
|
|
|
+ }
|
|
|
+
|
|
|
+ // page-title
|
|
|
+ .page-title-1 {
|
|
|
+ font-size: 39px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: $mainColor;
|
|
|
+ line-height: 70px;
|
|
|
+ }
|
|
|
+ .page-title-2 {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ z-index: auto;
|
|
|
+ font-size: 27px;
|
|
|
+ font-weight: 600;
|
|
|
+ background: $mainColor;
|
|
|
+ color: #fff;
|
|
|
+ line-height: 39px;
|
|
|
+ padding: 10px 39px;
|
|
|
+ height: 58px;
|
|
|
+
|
|
|
+ &::after {
|
|
|
+ content: "";
|
|
|
+ display: block;
|
|
|
+ position: absolute;
|
|
|
+ width: 0;
|
|
|
+ height: 0;
|
|
|
+ right: -1px;
|
|
|
+ bottom: -1px;
|
|
|
+ border-width: 14px;
|
|
|
+ border-style: solid;
|
|
|
+ border-color: transparent #fff #fff transparent;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* table */
|
|
|
+.table {
|
|
|
+ width: 100%;
|
|
|
+ border-spacing: 0;
|
|
|
+ border-collapse: collapse;
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ th {
|
|
|
+ padding: 10px;
|
|
|
+ background-color: $blue;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ td {
|
|
|
+ padding: 10px;
|
|
|
+ color: $dark;
|
|
|
+ }
|
|
|
+
|
|
|
+ &-border {
|
|
|
+ th {
|
|
|
+ border: 1px solid $darkBlue;
|
|
|
+ }
|
|
|
+ td {
|
|
|
+ border: 1px solid $borderColor;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// .cover
|
|
|
+.cover {
|
|
|
+ &-box {
|
|
|
+ background-image: url(../images/cover-bg.png);
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ background-position: left top;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 29px;
|
|
|
+ }
|
|
|
+ &-title {
|
|
|
+ position: absolute;
|
|
|
+ width: 745px;
|
|
|
+ height: 117px;
|
|
|
+ left: 160px;
|
|
|
+ top: 263px;
|
|
|
+ background-image: url(../images/cover-title.png);
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ &-footer {
|
|
|
+ position: absolute;
|
|
|
+ width: 1000px;
|
|
|
+ left: 58px;
|
|
|
+ bottom: 156px;
|
|
|
+ padding-left: 98px;
|
|
|
+ line-height: 58px;
|
|
|
+ p {
|
|
|
+ overflow: hidden;
|
|
|
+ span:first-child {
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+ span:last-child {
|
|
|
+ display: block;
|
|
|
+ margin-left: 87px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:first-child {
|
|
|
+ span:last-child {
|
|
|
+ display: block;
|
|
|
+ margin-left: 145px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// teacher
|
|
|
+.chart-teachers {
|
|
|
+ height: 550px;
|
|
|
+}
|
|
|
+
|
|
|
+.chart-teacher-grade {
|
|
|
+ height: 420px;
|
|
|
+}
|
|
|
+.page-chart-legend {
|
|
|
+ margin-top: 20px;
|
|
|
+ text-align: center;
|
|
|
+ li {
|
|
|
+ display: inline-block;
|
|
|
+ vertical-align: middle;
|
|
|
+ margin: 0 20px;
|
|
|
+ font-size: 18px;
|
|
|
+
|
|
|
+ &::before {
|
|
|
+ content: "";
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ display: inline-block;
|
|
|
+ vertical-align: middle;
|
|
|
+ margin-right: 10px;
|
|
|
+ border-radius: 3px;
|
|
|
+ }
|
|
|
+ &:nth-of-type(1) {
|
|
|
+ &::before {
|
|
|
+ background: #3da0ff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &:nth-of-type(2) {
|
|
|
+ &::before {
|
|
|
+ background: #4bcb74;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &:nth-of-type(3) {
|
|
|
+ &::before {
|
|
|
+ background: #975ee5;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &:nth-of-type(4) {
|
|
|
+ &::before {
|
|
|
+ background: #999999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &:nth-of-type(5) {
|
|
|
+ &::before {
|
|
|
+ background-image: url(../images/icon-circle-bule.png);
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &:nth-of-type(6) {
|
|
|
+ &::before {
|
|
|
+ background-image: url(../images/icon-circle-yellow.png);
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.chart-line {
|
|
|
+ height: 580px;
|
|
|
+}
|
|
|
+// table-other
|
|
|
+.question-table {
|
|
|
+ td.td-ques-name {
|
|
|
+ width: 310px;
|
|
|
+ }
|
|
|
+ .question-name {
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ margin: 0 auto;
|
|
|
+
|
|
|
+ span {
|
|
|
+ display: inline-block;
|
|
|
+ vertical-align: middle;
|
|
|
+ &:first-child {
|
|
|
+ margin-right: 8px;
|
|
|
+ max-width: 240px;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.classes-table {
|
|
|
+ td.td-class-name {
|
|
|
+ width: 240px;
|
|
|
+ }
|
|
|
+ .class-name {
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ margin: 0 auto;
|
|
|
+ max-width: 230px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.teacher-class-table {
|
|
|
+ td.td-class-name {
|
|
|
+ width: 200px;
|
|
|
+ }
|
|
|
+ .class-name {
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ margin: 0 auto;
|
|
|
+ max-width: 190px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.table-level {
|
|
|
+ th,
|
|
|
+ td {
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 16px;
|
|
|
+ padding: 7px 2px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.table-ave-5 {
|
|
|
+ th,
|
|
|
+ td {
|
|
|
+ font-size: 18px;
|
|
|
+ width: 20%;
|
|
|
+ padding: 6px 3px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.table-range-long {
|
|
|
+ th,
|
|
|
+ td {
|
|
|
+ font-size: 18px;
|
|
|
+ padding: 4px 3px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.table-ave-6 {
|
|
|
+ th,
|
|
|
+ td {
|
|
|
+ font-size: 18px;
|
|
|
+ width: 177px;
|
|
|
+ padding: 6px 3px;
|
|
|
+ }
|
|
|
+ td[rowspan] {
|
|
|
+ padding: 13px;
|
|
|
+ background: $lightBackground;
|
|
|
+ width: auto !important;
|
|
|
+ word-break: break-all;
|
|
|
+ }
|
|
|
+ .th-empty {
|
|
|
+ width: auto;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.table-tips {
|
|
|
+ margin: 30px 39px 0;
|
|
|
+ font-size: 21px;
|
|
|
+
|
|
|
+ span {
|
|
|
+ display: inline-block;
|
|
|
+ vertical-align: middle;
|
|
|
+ margin-right: 10px;
|
|
|
+ line-height: 39px;
|
|
|
+
|
|
|
+ &.tips-tag {
|
|
|
+ color: #fff;
|
|
|
+ padding: 0 20px 0 10px;
|
|
|
+ background-image: url(../images/tips-bg.png);
|
|
|
+ background-size: 100% 100%;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.range-tips {
|
|
|
+ margin: 15px 39px 0;
|
|
|
+ padding-left: 40px;
|
|
|
+ position: relative;
|
|
|
+ color: rgba(102, 102, 102, 1);
|
|
|
+ line-height: 31px;
|
|
|
+ &::before {
|
|
|
+ content: "";
|
|
|
+ display: block;
|
|
|
+ position: absolute;
|
|
|
+ width: 30px;
|
|
|
+ height: 30px;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ background-image: url(../images/icon-star.png);
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+}
|