huoran
/
FE_python_trial
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 8 Wiki Activity

样式修复

Browse Source
develop
jialong.yu 3 years ago
parent 97cb6729dc
commit f80956ac8c
6 changed files with 121 additions and 169 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 173
      src/components/TestPanel.vue
  2. 43
      src/components/codemirror.vue
  3. 19
      src/store/index.js
  4. 9
      src/styles/common.scss
  5. 7
      src/styles/theme/theme1.scss
  6. 33
      src/views/Home.vue

173
src/components/TestPanel.vue
Unescape View File

@ -2,8 +2,8 @@
<div class="panel">
<el-container class="scrollbar" v-if="pannelVisible">
<el-header>
<div class="flex between">
<div class="flex" style="width: 28%">
<div class="panel-header">
<div class="project">
<p>实训项目</p>
<el-select
v-model="projectId"
@ -21,18 +21,16 @@
></el-option>
</el-select>
</div>
<div class="countDownBox">
<div style="margin-left: -40px;">
<div>
<div class="item">
<div class="count">
实训{{text}}时间
<span class="timeSpan">{{day}}</span>天
<span class="timeSpan">{{hour}}</span>小时
<span class="timeSpan">{{minutes}}</span>分
<span class="timeSpan">{{seconds}}</span>秒
</div>
<span>{{day}}</span>天
<span>{{hour}}</span>小时
<span>{{minutes}}</span>分
<span>{{seconds}}</span>秒
</div>
</div>
<div class="countDownBox">
<div class="item">
<div>
总得分：
<span class="total-score">{{grade}}</span>
@ -51,12 +49,10 @@
<i class="el-icon-s-order"></i>
<p>实验目标</p>
</div>
<div class="font_css">
<div class="experimentTarget">
<div class="goal">
<div class="break-all" v-html="experimentTarget"></div>
</div>
</div>
</div>
<div class="aside-footer">
<div class="p-title color">
<i class="el-icon-s-management"></i>
@ -505,42 +501,85 @@ export default {
height: 150px;
}
}
::v-deep .el-collapse-item__wrap {
.panel-header {
display: flex;
justify-content: space-between;
align-items: center;
.project {
display: inline-flex;
align-items: center;
width: 28%;
}
.item {
font-size: 16px;
margin: 0 10px;
padding: 20px 0;
}
.count {
margin-left: -40px;
span {
padding: 5px 15px;
margin: 0 5px;
color: #333;
font-size: 14px;
text-align: center;
background: #fff;
border-radius: 18px;
}
}
.total-score {
padding: 10px;
font-size: 14px;
text-align: center;
border-radius: 6px;
}
.submit {
padding: 12px 30px;
margin: 5px 7px 5px 5px;
font-size: 16px;
}
.reload {
color: #d0d0d0;
font-size:14px;
background-color: #202020;
}
}
/deep/.el-collapse-item__wrap {
border-bottom: none;
}
::v-deep .el-collapse-item__header {
/deep/.el-collapse-item__header {
border-bottom: none;
}
::v-deep .el-tabs__content {
/deep/.el-tabs__content {
margin: 0 20px;
}
::v-deep .el-icon-s-ticket:before {
/deep/.el-icon-s-ticket:before {
padding: 5px;
font-size: 16px;
}
::v-deep .el-collapse-item__arrow {
/deep/.el-collapse-item__arrow {
margin: 0 5px 0 0;
}
::v-deep .el-icon-arrow-right:before {
/deep/.el-icon-arrow-right:before {
padding: 1px;
margin-left: 10px;
font-size: 12px;
color: #fff;
border-radius: 50%;
}
::v-deep .el-tabs__item {
/deep/.el-tabs__item {
font-size: 16px;
}
::v-deep .el-tabs--card > .el-tabs__header .el-tabs__nav {
/deep/.el-tabs--card > .el-tabs__header .el-tabs__nav {
border: none;
}
::v-deep .el-tabs--card > .el-tabs__header .el-tabs__item {
/deep/.el-tabs--card > .el-tabs__header .el-tabs__item {
border-left: none;
}
::v-deep .el-tabs--card > .el-tabs__header {
/deep/.el-tabs--card > .el-tabs__header {
border-bottom: none;
}
::v-deep .el-collapse {
/deep/.el-collapse {
border-bottom: none;
border-top: none;
height: 500px;
@ -550,13 +589,13 @@ export default {
/deep/.el-tabs__item.is-active {
color: #fff;
}
::v-deep .el-tabs__header {
/deep/.el-tabs__header {
padding: 5px 20px;
}
.el-aside {
color: #333;
}
.el-aside ::v-deep [class*=" el-icon-"],
.el-aside /deep/[class*=" el-icon-"],
[class^="el-icon-"] {
line-height: 40px;
font-size: 16px;
@ -583,48 +622,28 @@ export default {
color: #fff;
}
}
::v-deep .el-card__body {
/deep/.el-card__body {
padding: 0;
}
::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td {
background: #fff9e6;
}
::v-deep .el-table td,
.el-table th.is-leaf {
border-bottom: 0;
}
::v-deep .el-table th > .cell {
font-weight: 100;
}
::v-deep .el-table thead {
color: #fff;
font-size: 10px;
}
/deep/.el-table {
font-size: 12px;
}
.el-header {
padding: 0 12px;
.submit {
padding: 12px 30px;
margin: 5px 7px 5px 5px;
font-size: 16px;
thead {
color: #fff;
font-size: 10px;
}
.reload {
color: #d0d0d0;
font-size:14px;
background-color: #202020;
th > .cell {
font-weight: 100;
}
td,
th.is-leaf {
border-bottom: 0 !important;
}
}
.between {
justify-content: space-between;
}
.font_css {
.goal {
padding: 10px 0;
margin: 0 10px;
text-indent: 2em;
font-size: 14px;
padding: 10px 0;
}
/deep/.select {
.el-select__caret:before {
@ -640,47 +659,19 @@ export default {
.el-input {
padding: 10px 0;
}
input::-webkit-input-placeholder {
color: #333;
}
input::-moz-input-placeholder {
color: #333;
}
input::-ms-input-placeholder {
color: #333;
}
.el-input--suffix .el-input__inner {
padding-right: 50px;
margin-left: 15px;
color: #333;
font-size: 14px;
border-radius: 30px;
border: none;
background-color: #fff;
margin-left: 15px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.countDownBox {
font-size: 16px;
margin: 0 10px;
padding: 20px 0;
}
.timeSpan {
color: #333333;
padding: 5px 15px;
font-size: 14px;
background: #fff;
border-radius: 18px;
margin: 0 5px;
text-align: center;
}
.total-score {
padding: 10px;
font-size: 14px;
text-align: center;
border-radius: 6px;
}
/deep/.el-container {
height: 80%;
&.is-vertical {
@ -693,10 +684,6 @@ export default {
left: 0;
}
}
.flex {
display: flex;
align-items: center;
}
.right {
color: #00af00;
font-size: 20px;

43
src/components/codemirror.vue
Unescape View File

@ -25,10 +25,10 @@
<el-button class="download-btn btn" type="primary" size="mini" @click="$refs.picLink.click()">下载图片</el-button>
<a ref="picLink" style="display: none;" download="运行结果.png" :href="picSrc">下载图片</a>
</div>
<div class="code_yes t-color" v-show="isError">
<div class="result-right t-color" v-show="isError">
<img :src="require(`@/assets/images/system/${systemId}/yes.png`)" alt />运行成功
</div>
<div class="code_error" v-show="isError === 0">
<div class="result-wrong" v-show="isError === 0">
<img src="@/assets/images/error.png" alt />
第{{errLine}}行出现错误
<el-button class="tips-btn" @click="getTips" v-show="showTips">提示</el-button>
@ -162,7 +162,7 @@ export default {
methods: {
// 页面加载完后重置编辑框大小
ready() {
this.$refs.myCmGenerate.codemirror.setSize("auto", "calc(100vh - 149px)");
this.$refs.myCmGenerate.codemirror.setSize("auto", "calc(100vh - 167px)");
},
/**
* python代码里如果有input函数的话，是做了单独的处理的，原理是先把所有input函数都替换成exit函数，再在exit函数里加上特定标识，再通过接口传给后端去执行
@ -421,39 +421,32 @@ export default {
}
}
}
::v-deep .CodeMirror-wrap pre.CodeMirror-line,
/deep/.CodeMirror-wrap pre.CodeMirror-line,
.CodeMirror-wrap pre.CodeMirror-line-like {
height: 30px;
line-height: 30px;
}
.code_error img {
width: 40px;
height: 40px;
margin-top: 5px;
margin-right: 10px;
}
.code_yes img {
width: 40px;
height: 40px;
margin-top: 5px;
margin-right: 10px;
}
.code_yes {
.result-right {
background-color: rgba(43, 40, 22, 1);
}
.code_error {
.result-wrong {
background-color: rgba(43, 22, 22, 1);
color: red;
color: #f00;
}
.code_error,
.code_yes {
display: flex;
bottom: 10px;
.result-wrong,
.result-right {
position: absolute;
left: 20px;
right: 20px;
display: flex;
bottom: 10px;
padding: 0 10px;
box-sizing: border-box;
img {
width: 40px;
height: 40px;
margin-top: 5px;
margin-right: 10px;
}
}
.code-right {
width: 500px;
@ -467,7 +460,7 @@ export default {
margin: 10px;
position: absolute;
width: calc(100% - 14px);
height: calc(100vh - 230px);
height: calc(100vh - 247px);
overflow: auto;
}
}

19
src/store/index.js
Unescape View File

@ -2,22 +2,7 @@ import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
projectId: '',
codeid: '',
code: '',
judgmentPointsId: '',
workbench: []
},
mutations: {
projectData(state, payload){
state.projectId = payload.projectId
state.codeid = payload.codeid
state.code = payload.code
state.judgmentPointsId = payload.judgmentPointsId
state.workbench = payload.workbench
}
}
state: {},
mutations: {}
});
export default store;

9
src/styles/common.scss
Unescape View File

@ -21,3 +21,12 @@
border-radius: 0;
background: #dddddd;
}
input::-webkit-input-placeholder {
color: #333;
}
input::-moz-input-placeholder {
color: #333;
}
input::-ms-input-placeholder {
color: #333;
}

7
src/styles/theme/theme1.scss
Unescape View File

@ -28,8 +28,13 @@ $--font-path: '~element-ui/lib/theme-chalk/fonts';
.el-icon-s-ticket:before {
color: $--color-primary;
}
.el-table th {
.el-table {
th {
background-color: #202020 !important;
}
.el-table__row--striped td {
background-color: #fff9e6 !important;
}
}
.total-score {
color: #fff;

33
src/views/Home.vue
Unescape View File

@ -35,7 +35,7 @@
<div class="menu">
<testPanel
@tell="getQueryIndex"
@tell="setPoints"
@recoveryCode="recoveryCode"
ref="mainindex"
:workbench.sync="workbench"
@ -122,8 +122,8 @@ export default {
back() {
history.back()
},
// 赋值项目id、权限、项目列表
getQueryIndex(projectId, workbench) {
// 赋值项目id、项目列表
setPoints(projectId, workbench) {
this.projectId = projectId
this.workbench = workbench
},
@ -207,31 +207,4 @@ export default {
border-bottom: none;
}
}
::v-deep input::-webkit-input-placeholder {
color: #333;
}
::v-deep input::-moz-input-placeholder {
color: #333;
}
::v-deep input::-ms-input-placeholder {
color: #333;
}
::v-deep .el-input__icon {
line-height: 60px;
}
::v-deep .el-select__caret:before {
content: "\e78f";
font-size: 16px;
padding: 3px;
border-radius: 50%;
color: #fff;
}
::v-deep .el-input--suffix .el-input__inner {
color: #333;
font-size: 14px;
border-radius: 30px;
border: none;
background-color: #f5f5f5;
margin-left: 10px;
}
</style>
Write Preview
Loading…
Cancel
Save