8个系统整合(未完成)

ui
jialong.yu 3 years ago
parent 8e717662d6
commit 7de73bad9d
  1. BIN
      src/assets/logo.png
  2. 17
      src/assets/style/common.scss
  3. 2
      src/assets/style/index.scss
  4. 379
      src/assets/style/reset.scss
  5. 5
      src/assets/style/theme/theme1.scss
  6. 5
      src/assets/style/theme/theme10.scss
  7. 1
      src/assets/styles/var.scss
  8. 24
      src/components/TestPanel.vue
  9. 109
      src/components/codemirror.vue
  10. 47
      src/config/index.js
  11. 12
      src/main.js
  12. 52
      src/views/Home.vue
  13. 3
      vue.config.js

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.7 KiB

@ -0,0 +1,17 @@
.flex {
display: flex;
}
.scrollbar ::-webkit-scrollbar {
width: 2px;
height: 6px;
}
.scrollbar ::-webkit-scrollbar-thumb {
background-color: #fdca17;
border-radius: 3px;
box-shadow: inset 0 0 5px #dddddd;
}
.scrollbar ::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px #dddddd;
border-radius: 0;
background: #dddddd;
}

@ -0,0 +1,2 @@
@import "./reset.scss";
@import "./common.scss";

@ -0,0 +1,379 @@
// reset 初始化浏览器样式
* {
box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
*:before,
*:after {
box-sizing: border-box;
}
html {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
form,
fieldset,
legend,
input,
textarea,
p,
blockquote,
th,
td,
hr,
button,
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
margin: 0;
padding: 0;
}
button,
input,
select,
textarea {
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
input::-ms-clear,
input::-ms-reveal {
display: none;
}
ol, ul {
li {
list-style: none;
}
}
h1 {
font-size: 2em;
margin: 0.67em 0;
}
article,
aside,
footer,
header,
nav,
section {
display: block;
}
figcaption,
figure,
main {
display: block;
}
figure {
margin: 1em 40px;
}
li:focus {
outline-width: 0;
}
i {
font-style: normal;
}
/**
* 1. Remove the gray background on active links in IE 10.
* 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
*/
a {
background-color: transparent;
-webkit-text-decoration-skip: objects;
text-decoration: none;
color: inherit;
}
a:active {
color: inherit;
}
a:active,
a:hover,
a:focus {
outline-width: 0;
}
abbr[title] {
border-bottom: none;
text-decoration: underline;
text-decoration: underline dotted;
}
/**
* Prevent the duplicate application of `bolder` by the next rule in Safari 6.
*/
b,
strong {
font-weight: inherit;
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
pre,
code,
kbd,
samp {
font-family: monospace, monospace;
font-size: 1em;
}
dfn {
font-style: italic;
}
mark {
background-color: #ff0;
color: #000;
}
small {
font-size: 80%;
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
audio,
video {
display: inline-block;
}
audio:not([controls]) {
display: none;
height: 0;
}
img {
border-style: none;
vertical-align: middle;
}
svg:not(:root) {
overflow: hidden;
}
button,
input,
optgroup,
select,
textarea {
font-size: 100%;
line-height: 1.15;
margin: 0;
}
button,
input {
overflow: visible;
}
button,
select {
text-transform: none;
}
button:focus {
outline: none;
}
button,
html [type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
* Change the border, margin, and padding in all browsers (opinionated).
*/
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend {
box-sizing: border-box; /* 1 */
color: inherit; /* 2 */
display: table; /* 1 */
max-width: 100%; /* 1 */
padding: 0; /* 3 */
white-space: normal; /* 1 */
}
/**
* 1. Add the correct display in IE 9-.
* 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
display: inline-block; /* 1 */
vertical-align: baseline; /* 2 */
}
/**
* Remove the default vertical scrollbar in IE.
*/
textarea {
overflow: auto;
resize: vertical;
}
/**
* 1. Add the correct box sizing in IE 10-.
* 2. Remove the padding in IE 10-.
*/
[type="checkbox"],
[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type="search"] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/**
* Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
*/
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
/*
* Add the correct display in IE 9-.
* 1. Add the correct display in Edge, IE, and Firefox.
*/
details, /* 1 */
menu {
display: block;
}
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item;
}
/**
* Add the correct display in IE 9-.
*/
canvas {
display: inline-block;
}

@ -1,8 +1,5 @@
/* 改变主题色变量 */ /* 改变主题色变量 */
$--color-primary: #fdf4d1;
$--color-primary: #fdca17;
/* 改变 icon 字体路径变量,必需 */ /* 改变 icon 字体路径变量,必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts'; $--font-path: '~element-ui/lib/theme-chalk/fonts';
@import "~element-ui/packages/theme-chalk/src/index"; @import "~element-ui/packages/theme-chalk/src/index";

@ -0,0 +1,5 @@
/* 改变主题色变量 */
$--color-primary: #ff6457;
/* 改变 icon 字体路径变量,必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';
@import "~element-ui/packages/theme-chalk/src/index";

@ -1 +0,0 @@
$main-color: #fdca17;

@ -536,7 +536,6 @@ export default {
margin: 0 5px 0 0; margin: 0 5px 0 0;
} }
::v-deep .el-icon-arrow-right:before { ::v-deep .el-icon-arrow-right:before {
// content: "\e78f";
font-size: 12px; font-size: 12px;
padding: 1px; padding: 1px;
margin-left: 10px; margin-left: 10px;
@ -570,12 +569,9 @@ export default {
::v-deep .el-tabs__header { ::v-deep .el-tabs__header {
padding: 5px 20px; padding: 5px 20px;
} }
//el-aside
.el-aside { .el-aside {
color: #333; color: #333;
} }
.el-aside ::v-deep [class*=" el-icon-"], .el-aside ::v-deep [class*=" el-icon-"],
[class^="el-icon-"] { [class^="el-icon-"] {
line-height: 40px; line-height: 40px;
@ -626,8 +622,6 @@ export default {
font-size: 12px; font-size: 12px;
color: #202020; color: #202020;
} }
//.el-header
.el-header { .el-header {
color: #333; color: #333;
padding: 0 12px; padding: 0 12px;
@ -737,24 +731,6 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
} }
//
.scrollbar ::-webkit-scrollbar {
width: 2px; //
height: 6px; //
}
//
.scrollbar ::-webkit-scrollbar-thumb {
background-color: #fdca17;
border-radius: 3px;
box-shadow: inset 0 0 5px #dddddd;
}
.scrollbar ::-webkit-scrollbar-track {
/*滚动条里面轨道*/
box-shadow: inset 0 0 5px #dddddd;
border-radius: 0;
background: #dddddd;
}
.right { .right {
color: #00af00; color: #00af00;
font-size: 20px; font-size: 20px;

@ -1,5 +1,5 @@
<template> <template>
<div style="display:flex;"> <div class="flex">
<div class="left"> <div class="left">
<codemirror <codemirror
v-model="codeVal" v-model="codeVal"
@ -10,10 +10,10 @@
></codemirror> ></codemirror>
<div v-if="isSubmit" class="code-mask"></div> <div v-if="isSubmit" class="code-mask"></div>
<el-button <el-button
class="run"
type="warning" type="warning"
@click="runCode(false)" @click="runCode(false)"
:disabled="runEnable" :disabled="runEnable"
style="width:100px;position:absolute;z-index:99;background:#FDCA17;color:black;right: 50px;bottom:15px;"
>运行</el-button> >运行</el-button>
</div> </div>
<div class="code-right answer"> <div class="code-right answer">
@ -97,6 +97,7 @@ export default {
token: util.getCookie('admin-token'), token: util.getCookie('admin-token'),
assessmentId: util.getCookie('assessmentId'), // id assessmentId: util.getCookie('assessmentId'), // id
courseId: util.getCookie('courseId'), // id courseId: util.getCookie('courseId'), // id
systemId: util.getCookie('systemId'),
showTips: false, // showTips: false, //
answer: '', // answer: '', //
codeVal: this.code, codeVal: this.code,
@ -359,58 +360,47 @@ export default {
.text-wrapper { .text-wrapper {
white-space: pre-wrap; white-space: pre-wrap;
} }
// /deep/.answer {
.answer ::v-deep .el-tab-pane { .el-tab-pane {
padding: 0 10px; padding: 0 10px;
height: 340px; height: 340px;
overflow: hidden; overflow: hidden;
overflow-y: auto; overflow-y: auto;
white-space: pre-wrap; white-space: pre-wrap;
} }
.answer ::v-deep .el-dialog--center { .el-dialog--center {
width: 500px; width: 500px;
height: 500px; height: 500px;
} }
.answer ::v-deep .el-dialog__title { .el-dialog__title {
font-size: 22px; font-size: 22px;
font-weight: 500; font-weight: 500;
} }
.answer ::v-deep .el-tabs__nav-wrap::after { .el-tabs__nav-wrap::after {
background-color: #333; background-color: #333;
} }
.answer ::v-deep .el-tabs__active-bar { .el-tabs__active-bar {
background-color: #fff;
height: 0; height: 0;
background-color: #fff;
} }
.answer ::v-deep .el-tabs__header { .el-tabs__header {
background-color: #333; background-color: #333;
} }
.answer ::v-deep .el-dialog--center .el-dialog__body { .el-dialog--center .el-dialog__body {
padding: 0; padding: 0;
} }
.answer ::v-deep .el-tabs__item { .el-tabs__item {
color: #fff;
width: 80px; width: 80px;
color: #fff;
} }
.answer ::v-deep .el-tabs--top .el-tabs__item.is-top:nth-child(2) { .el-tabs--top .el-tabs__item.is-top:nth-child(2) {
padding-left: 20px; padding-left: 20px;
} }
.answer ::v-deep .el-tabs__item.is-active { .el-tabs__item.is-active {
color: #fff !important; color: #fff !important;
background-color: #333 !important; background-color: #333 !important;
} }
.tips-btn {
::v-deep .CodeMirror-wrap pre.CodeMirror-line,
.CodeMirror-wrap pre.CodeMirror-line-like {
height: 30px;
line-height: 30px;
}
.cm-s-monokai .CodeMirror-linenumber {
height: 30px;
line-height: 30px;
}
.code-right ::v-deep .tips-btn {
margin-top: 10px; margin-top: 10px;
height: 40px; height: 40px;
width: 90px; width: 90px;
@ -419,13 +409,19 @@ export default {
right: 0; right: 0;
background: rgba(255, 49, 49, 1); background: rgba(255, 49, 49, 1);
color: rgba(255, 255, 255, 1); color: rgba(255, 255, 255, 1);
} &:hover,
.code-right ::v-deep .tips-btn:hover, &:focus,
.tips-btn:focus, &:active {
.tips-btn:active {
background: rgba(255, 49, 49, 1); background: rgba(255, 49, 49, 1);
color: rgba(255, 255, 255, 1); color: rgba(255, 255, 255, 1);
} }
}
}
::v-deep .CodeMirror-wrap pre.CodeMirror-line,
.CodeMirror-wrap pre.CodeMirror-line-like {
height: 30px;
line-height: 30px;
}
.code_error img { .code_error img {
width: 40px; width: 40px;
height: 40px; height: 40px;
@ -454,17 +450,8 @@ export default {
left: 20px; left: 20px;
right: 20px; right: 20px;
padding: 0 10px; padding: 0 10px;
// padding-right: 20px;
box-sizing: border-box; box-sizing: border-box;
} }
.code-right p {
font-size: 18px;
margin: 10px;
position: absolute;
width: calc(100% - 14px);
height: calc(100vh - 230px);
overflow: auto;
}
.code-right { .code-right {
width: 500px; width: 500px;
color: #ffffff; color: #ffffff;
@ -472,6 +459,14 @@ export default {
display: inline-block; display: inline-block;
position: relative; position: relative;
overflow-x: auto; overflow-x: auto;
p {
font-size: 18px;
margin: 10px;
position: absolute;
width: calc(100% - 14px);
height: calc(100vh - 230px);
overflow: auto;
}
} }
.button ::v-deep .el-button--warning:hover, .button ::v-deep .el-button--warning:hover,
.el-button--warning:focus, .el-button--warning:focus,
@ -479,26 +474,6 @@ export default {
background: #fdca17; background: #fdca17;
color: #333; color: #333;
} }
.flex {
display: flex;
}
//
.scrollbar ::-webkit-scrollbar {
width: 2px; //
height: 6px; //
}
//
.scrollbar ::-webkit-scrollbar-thumb {
background-color: #fdca17;
border-radius: 3px;
box-shadow: inset 0 0 5px #dddddd;
}
.scrollbar ::-webkit-scrollbar-track {
/*滚动条里面轨道*/
box-shadow: inset 0 0 5px #dddddd;
border-radius: 0;
background: #dddddd;
}
.pic-wrap{ .pic-wrap{
position: absolute; position: absolute;
left: 0; left: 0;
@ -518,27 +493,21 @@ export default {
bottom: 0; bottom: 0;
right: 0; right: 0;
} }
.func-btn{ .run{
width:100px;
position:absolute;
z-index:99; z-index:99;
background:$main-color; position:absolute;
color:#fff !important;
right: 50px; right: 50px;
bottom:15px; bottom:15px;
border-color: $main-color; width:100px;
color:#fff !important;
} }
.download-btn{ .download-btn{
background:$main-color;
color:#fff; color:#fff;
border-color: $main-color
} }
/deep/.answer-wrap{ /deep/.answer-wrap{
pre{ pre{
width: 100%; width: 100%;
white-space: pre-wrap; white-space: pre-wrap;
// height: 320px;
// overflow-x: scroll;
} }
img{ img{
max-width: 100%; max-width: 100%;

@ -25,17 +25,44 @@ export default {
/** /**
* @description 配置显示在浏览器标签的title * @description 配置显示在浏览器标签的title
*/ */
title: isHh ? 'Python程序设计教学系统' : 'Python程序设计教学系统', title: 'Python程序设计教学系统',
/** /**
* @description 是否使用国际化默认为false * python子系统
* 如果不使用则需要在路由中给需要在菜单中展示的路由设置meta: {title: 'xxx'} **/
* 用来在菜单中显示文字 pythonList: [
*/ {
locale: 'zh', id: 1,
/** name: 'Python程序设计教学系统'
* @description 跳转子系统链接 },
*/ {
systemId: 1, id: 4,
name: 'pyFinance'
},
{
id: 5,
name: 'pyProjects'
},
{
id: 6,
name: 'pyRandom'
},
{
id: 7,
name: 'pyQuantification'
},
{
id: 8,
name: 'pyAnalysis'
},
{
id: 9,
name: 'pyDataclean'
},
{
id: 10,
name: 'pyAcquisition'
}
],
/** /**
* @description 长时间未操作自动退出登录时间 * @description 长时间未操作自动退出登录时间
*/ */

@ -3,7 +3,15 @@ import App from "./App.vue";
import router from "./router"; import router from "./router";
import store from "./store"; import store from "./store";
import ElementUI from 'element-ui' import ElementUI from 'element-ui'
import './assets/element-variables.scss' import util from '@/util'
import './assets/style/index.scss';
const systemId = util.getCookie('systemId')
if (systemId == 1) {
console.log(systemId)
require('./assets/style/theme/theme1.scss')
} else {
require('./assets/style/theme/theme10.scss')
}
import api from './api'; import api from './api';
import { import {
post, post,
@ -17,8 +25,6 @@ import vuescroll from "vuescroll"; //引入vuescroll
import "vuescroll/dist/vuescroll.css"; //引入vuescroll样式 import "vuescroll/dist/vuescroll.css"; //引入vuescroll样式
import VueDraggableResizable from 'vue-draggable-resizable' import VueDraggableResizable from 'vue-draggable-resizable'
import config from '@/config' import config from '@/config'
// optionally import default styles
import 'vue-draggable-resizable/dist/VueDraggableResizable.css' import 'vue-draggable-resizable/dist/VueDraggableResizable.css'
Vue.component('vue-draggable-resizable', VueDraggableResizable) Vue.component('vue-draggable-resizable', VueDraggableResizable)

@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<div class="flex header" :class="{hh: $config.isHh}"> <div class="header" :class="{hh: $config.isHh}">
<img v-if="$config.isHh" src="../assets/img/logo-hh.png" alt="" class="logo"> <img v-if="$config.isHh" src="../assets/img/logo-hh.png" alt="" class="logo">
<p v-else>{{$config.title}}</p> <p v-else>{{$config.title}}</p>
<div class="bt"> <div class="bt">
@ -55,6 +55,7 @@ export default {
return { return {
courseId: util.getCookie("courseId"), // id courseId: util.getCookie("courseId"), // id
assessmentId: util.getCookie("assessmentId"), // id assessmentId: util.getCookie("assessmentId"), // id
systemId: util.getCookie('systemId'),
projectPermissions: 0, // (0 1 2) projectPermissions: 0, // (0 1 2)
language: 'Python', // language: 'Python', //
curTab: '', // curTab: '', //
@ -138,12 +139,10 @@ export default {
z-index: 1000; z-index: 1000;
} }
.code-right { .code-right {
/* height: 800px; */
width: 230px; width: 230px;
background: #1b1b1b; background: #1b1b1b;
display: inline-block; display: inline-block;
} }
//
::v-deep .el-form-item { ::v-deep .el-form-item {
margin-bottom: 0px; margin-bottom: 0px;
} }
@ -162,8 +161,6 @@ export default {
.select1 { .select1 {
margin: 0; margin: 0;
} }
//tabs
.tab ::v-deep .el-tabs__header { .tab ::v-deep .el-tabs__header {
margin-bottom: 0; margin-bottom: 0;
} }
@ -190,8 +187,6 @@ export default {
border-left: none; border-left: none;
border-bottom: none; border-bottom: none;
} }
//
.center p { .center p {
font-size: 16px; font-size: 16px;
margin-left: 15px; margin-left: 15px;
@ -205,7 +200,6 @@ export default {
width: 10%; width: 10%;
} }
.center ::v-deep .el-input.is-disabled .el-input__inner { .center ::v-deep .el-input.is-disabled .el-input__inner {
// border-color: #fdca17;
border-radius: 30px; border-radius: 30px;
} }
// //
@ -224,18 +218,18 @@ export default {
border-radius: 0; border-radius: 0;
border: none; border: none;
} }
.header p {
font-size: 16px;
font-weight: 700;
color: rgba(51, 51, 51, 1);
margin-left: 18px;
}
.header { .header {
background-color: #f8f8f8; display: flex;
justify-content: space-between; justify-content: space-between;
height: 40px; height: 40px;
line-height: 40px; line-height: 40px;
background-color: #f8f8f8;
p {
margin-left: 18px;
font-size: 16px;
font-weight: 700;
color: rgba(51, 51, 51, 1);
}
&.hh{ &.hh{
padding: 10px 0; padding: 10px 0;
line-height: normal; line-height: normal;
@ -245,30 +239,6 @@ export default {
margin-left: 10px; margin-left: 10px;
} }
} }
//
p {
margin: 0;
}
.flex {
display: flex;
}
//
::v-deep ::-webkit-scrollbar {
width: 6px; //
height: 6px; //
}
//
::v-deep ::-webkit-scrollbar-thumb {
background-color: #fdca17;
border-radius: 3px;
-webkit-box-shadow: inset 0 0 5px #dddddd;
}
::v-deep ::-webkit-scrollbar-track {
/*滚动条里面轨道*/
-webkit-box-shadow: inset 0 0 5px #dddddd;
border-radius: 0;
background: #dddddd;
}
//placeholder //placeholder
::v-deep input::-webkit-input-placeholder { ::v-deep input::-webkit-input-placeholder {
color: #333; color: #333;
@ -279,11 +249,9 @@ p {
::v-deep input::-ms-input-placeholder { ::v-deep input::-ms-input-placeholder {
color: #333; color: #333;
} }
//icon
::v-deep .el-input__icon { ::v-deep .el-input__icon {
line-height: 60px; line-height: 60px;
} }
//
::v-deep .el-select__caret:before { ::v-deep .el-select__caret:before {
content: "\e78f"; content: "\e78f";
font-size: 16px; font-size: 16px;

@ -12,9 +12,6 @@ module.exports = {
lintOnSave: true, lintOnSave: true,
css: { css: {
loaderOptions: { loaderOptions: {
sass: {
prependData: `@import "@/assets/styles/var.scss";`
},
postcss: { postcss: {
plugins: [ plugins: [
postcss postcss

Loading…
Cancel
Save