mirror of
https://github.com/QingdaoU/OnlineJudgeFE.git
synced 2024-12-28 23:41:47 +00:00
add breadcrumb.
This commit is contained in:
zemal
parent
b690f5bae3
commit
eb9d3ce4bd
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "oj",
|
||||
"version": "1.0.0",
|
||||
"name": "onlinejudge",
|
||||
"version": "2.0.0",
|
||||
"description": "A Vue.js project",
|
||||
"author": "zemal <rawidn@163.com>",
|
||||
"private": true,
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<div>
|
||||
<Navbar></Navbar>
|
||||
<breadcrumb></breadcrumb>
|
||||
<div class="content-app">
|
||||
<router-view></router-view>
|
||||
<div class="footer">
|
||||
@ -12,7 +13,7 @@
|
||||
|
||||
<script>
|
||||
import Navbar from './NavBar.vue'
|
||||
// import api from './api.js'
|
||||
import breadcrumb from './Breadcrumb.vue'
|
||||
|
||||
export default {
|
||||
name: 'app',
|
||||
@ -22,7 +23,8 @@
|
||||
}
|
||||
},
|
||||
components: {
|
||||
Navbar
|
||||
Navbar,
|
||||
breadcrumb
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
@ -36,19 +38,18 @@
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
background-color: transparent;
|
||||
&:active, &:hover{
|
||||
outline-width:0 ;
|
||||
&:active, &:hover {
|
||||
outline-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
|
||||
font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
|
||||
overflow: auto;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
background-color: #edf0f2;;
|
||||
|
||||
58
oj/src/components/Breadcrumb.vue
Normal file
58
oj/src/components/Breadcrumb.vue
Normal file
@ -0,0 +1,58 @@
|
||||
<template>
|
||||
<div id="breadcrumb">
|
||||
<Breadcrumb>
|
||||
<Breadcrumb-item >Home</Breadcrumb-item>
|
||||
<Breadcrumb-item :key="b" v-for="b in breads">{{b}}</Breadcrumb-item>
|
||||
</Breadcrumb>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import bus from '../utils/eventBus'
|
||||
export default {
|
||||
name: 'bread',
|
||||
data() {
|
||||
return {
|
||||
breads: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 根据路由生成breadcrumb
|
||||
generateBread(route) {
|
||||
// 去重空导航
|
||||
this.breads = route.path.split('/').filter((element) => {
|
||||
return !!element
|
||||
})
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.generateBread(this.$route)
|
||||
// 可以通过eventbus传一个字符串，该字符串会替换掉最后一个breadcrumb项，如：Problem.vue
|
||||
bus.$on('changeBread', (res) => {
|
||||
let i = this.breads.length - 1
|
||||
this.breads.splice(i, 1)
|
||||
this.breads.push(res)
|
||||
})
|
||||
},
|
||||
watch: {
|
||||
'$route'(to, from) {
|
||||
this.generateBread(to)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
#breadcrumb {
|
||||
background: #f8f8f9;
|
||||
padding: 20px 30px;
|
||||
.ivu-breadcrumb{
|
||||
text-transform: capitalize;
|
||||
&>span:last-child{
|
||||
font-size: 20px;
|
||||
font-weight:300;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -1,25 +1,25 @@
|
||||
<template>
|
||||
<div style="margin: 25px 0px">
|
||||
<el-row class="header">
|
||||
<el-col :span=12>
|
||||
<Row class="header">
|
||||
<Col :span=12>
|
||||
<span>
|
||||
Language:
|
||||
<el-select v-model="lang" @change="onLangChange">
|
||||
<el-option v-for="item in languages" :label="item" :value="item">
|
||||
</el-option>
|
||||
</el-select>
|
||||
<Select v-model="lang" @change="onLangChange">
|
||||
<Option v-for="item in languages" :key="item" :value="item">{{item}}
|
||||
</Option>
|
||||
</Select>
|
||||
</span>
|
||||
</el-col>
|
||||
<el-col :span=12>
|
||||
</Col>
|
||||
<Col :span=12>
|
||||
<span style="float: right">
|
||||
Theme:
|
||||
<el-select v-model="options.theme">
|
||||
<el-option v-for="item in themes" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
<Select v-model="options.theme">
|
||||
<Option v-for="item in themes" :key="item.label" :value="item.value">{{item.label}}
|
||||
</Option>
|
||||
</Select>
|
||||
</span>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</Col>
|
||||
</Row>
|
||||
<codemirror :code="currentValue" :options="options" @change="onEditorCodeChange" ref="myEditor">
|
||||
</codemirror>
|
||||
</div>
|
||||
|
||||
@ -110,6 +110,6 @@
|
||||
|
||||
.btn-menu {
|
||||
font-size: 16px;
|
||||
margin-top: 12px;
|
||||
margin-top: 13px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -15,6 +15,11 @@ export default [
|
||||
// }
|
||||
// }
|
||||
},
|
||||
{
|
||||
name: 'problem-details',
|
||||
path: '/problem/:id',
|
||||
component: () => import('@/views/problem/Problem.vue')
|
||||
},
|
||||
{
|
||||
name: 'logout',
|
||||
path: '/logout',
|
||||
@ -25,11 +30,6 @@ export default [
|
||||
path: '/problems',
|
||||
component: ProblemList
|
||||
},
|
||||
{
|
||||
name: 'problem-details',
|
||||
path: '/problem/:id',
|
||||
component: Test
|
||||
},
|
||||
{
|
||||
path: '/test',
|
||||
name: 'Test',
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
// 这个文件用来做同级组件间的数据传递,见Login.vue
|
||||
// 这个文件用来做同级组件间的数据传递,例如Login.vue和navbar直接之间的传递
|
||||
|
||||
import Vue from 'vue'
|
||||
|
||||
|
||||
@ -1,92 +1,86 @@
|
||||
<template>
|
||||
<el-row type="flex" justify="space-around">
|
||||
<Row type="flex" justify="space-around">
|
||||
|
||||
<!--problem main-->
|
||||
<el-col :span=16>
|
||||
<panel :title="problem.title">
|
||||
<template slot="header">
|
||||
<el-button type="warning" icon="edit" @click="openDialog">Submit</el-button>
|
||||
</template>
|
||||
<h4>Description</h4>
|
||||
<p v-html=problem.description></p>
|
||||
<Col :span=16>
|
||||
<Card :padding="20" class="problem-main">
|
||||
<p class="title" style="margin-top: 0">Description</p>
|
||||
<p class="content" v-html=problem.description></p>
|
||||
|
||||
<h4>Input</h4>
|
||||
<p v-html=problem.input_description></p>
|
||||
<p class="title">Input</p>
|
||||
<p class="content" v-html=problem.input_description></p>
|
||||
|
||||
<h4>Output</h4>
|
||||
<p v-html=problem.output_description></p>
|
||||
<p class="title">Output</p>
|
||||
<p class="content" v-html=problem.output_description></p>
|
||||
|
||||
<div v-if="problem.hint">
|
||||
<h4>Hint</h4>
|
||||
<el-card :body-style=cardStyle>
|
||||
<div v-html=problem.hint></div>
|
||||
</el-card>
|
||||
</div>
|
||||
<div v-if="problem.hint">
|
||||
<p class="title">Hint</p>
|
||||
<Card dis-hover>
|
||||
<div class="content" v-html=problem.hint></div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div v-for="sample, index in problem.samples">
|
||||
<el-row>
|
||||
<el-col :span=9>
|
||||
<h4>Sample Input {{index + 1}}</h4>
|
||||
<el-card :body-style=cardStyle>
|
||||
<div>{{sample.input}}</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span=10 :offset=2>
|
||||
<h4>Sample Output {{index + 1}}</h4>
|
||||
<el-card :body-style=cardStyle>
|
||||
<div>{{sample.output}}</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</panel>
|
||||
</el-col>
|
||||
<div v-for="sample, index in problem.samples">
|
||||
<Row type="flex" justify="space-between">
|
||||
<Col :span=11>
|
||||
<p class="title">Sample Input {{index + 1}}</p>
|
||||
<Card dis-hover :padding="10">
|
||||
<div>{{sample.input}}</div>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col :span=11>
|
||||
<p class="title">Sample Output {{index + 1}}</p>
|
||||
<Card dis-hover :padding="10">
|
||||
<div>{{sample.output}}</div>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
</Card>
|
||||
</Col>
|
||||
<!--problem main end-->
|
||||
|
||||
<el-col :span=6>
|
||||
<Card>
|
||||
<div class="header">
|
||||
Problem Info
|
||||
</div>
|
||||
<dl>
|
||||
<dt>Time Limit</dt>
|
||||
<dd>{{problem.time_limit}}ms</dd>
|
||||
<Col :span=6>
|
||||
<Card style="overflow: hidden;">
|
||||
<div slot="title">
|
||||
Information
|
||||
</div>
|
||||
<dl>
|
||||
<dt>Time Limit</dt>
|
||||
<dd>{{problem.time_limit}}ms</dd>
|
||||
|
||||
<dt>Memory Limit</dt>
|
||||
<dd>{{problem.memory_limit}}MB</dd>
|
||||
<dt>Memory Limit</dt>
|
||||
<dd>{{problem.memory_limit}}MB</dd>
|
||||
|
||||
<dt>Created By</dt>
|
||||
<dd>{{problem.created_by.username}}</dd>
|
||||
<dt>Created By</dt>
|
||||
<dd>{{problem.created_by.username}}</dd>
|
||||
|
||||
<dt>Source</dt>
|
||||
<dd>{{problem.source}}</dd>
|
||||
</dl>
|
||||
</Card>
|
||||
</el-col>
|
||||
<dt>Source</dt>
|
||||
<dd>{{problem.source}}</dd>
|
||||
</dl>
|
||||
</Card>
|
||||
</Col>
|
||||
|
||||
<el-dialog title="Submit Code" :visible.sync="dialogVisible">
|
||||
Baidu INC.
|
||||
<!--<CodeMirror :value="code" @changeCode="onChangeCode" @changeLang="onChangeLang"></CodeMirror>-->
|
||||
<!--<span v-show="submissionId">Status: {{sumissionStatus}}</span>-->
|
||||
<!--<el-button type="warning" class="fl-right" @click="submitCode"> Submit </el-button>-->
|
||||
</el-dialog>
|
||||
</el-row>
|
||||
<!--<el-dialog title="Submit Code" :visible.sync="dialogVisible">-->
|
||||
<!--Baidu INC.-->
|
||||
<!--<!–<CodeMirror :value="code" @changeCode="onChangeCode" @changeLang="onChangeLang"></CodeMirror>–>-->
|
||||
<!--<!–<span v-show="submissionId">Status: {{sumissionStatus}}</span>–>-->
|
||||
<!--<!–<Button type="warning" class="fl-right" @click="submitCode"> Submit </Button>–>-->
|
||||
<!--</el-dialog>-->
|
||||
</Row>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CodeMirror from '../../components/CodeMirror'
|
||||
import Card from '../../components/Card'
|
||||
import api from '../../api'
|
||||
import {STATUS} from '../../utils/utils'
|
||||
import Panel from '../../components/Panel'
|
||||
import bus from '@/utils/eventBus'
|
||||
|
||||
export default {
|
||||
name: 'Problem',
|
||||
components: {
|
||||
Panel,
|
||||
CodeMirror,
|
||||
Card
|
||||
CodeMirror
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -104,15 +98,13 @@
|
||||
created_by: {
|
||||
username: ''
|
||||
}
|
||||
},
|
||||
cardStyle: {
|
||||
padding: '5px 10px'
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
api.getProblem(this.$route.params.id).then(res => {
|
||||
this.problem = res.data.data
|
||||
bus.$emit('changeBread', this.problem.title)
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
@ -123,7 +115,6 @@
|
||||
this.language = newLang
|
||||
},
|
||||
openDialog() {
|
||||
console.log(this.dialogVisible)
|
||||
this.dialogVisible = true
|
||||
},
|
||||
submitCode() {
|
||||
@ -156,39 +147,49 @@
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
||||
.el-card {
|
||||
box-shadow: none;
|
||||
background-color: #F9FAFC;
|
||||
.problem-main {
|
||||
.title {
|
||||
font-size: 19px;
|
||||
font-weight:500;
|
||||
margin: 25px 0 8px 0;
|
||||
}
|
||||
.content {
|
||||
text-indent: 1.3em;
|
||||
font-size: 15px
|
||||
}
|
||||
}
|
||||
/*.Card {*/
|
||||
/*box-shadow: none;*/
|
||||
/*background-color: #F9FAFC;*/
|
||||
/*}*/
|
||||
|
||||
h4 {
|
||||
color: #324057;
|
||||
font-weight: 500;
|
||||
}
|
||||
/*h4 {*/
|
||||
/*color: #324057;*/
|
||||
/*font-weight: 500;*/
|
||||
/*}*/
|
||||
|
||||
p {
|
||||
font-weight: 400;
|
||||
margin: 10px 10px;
|
||||
color: #475669;
|
||||
}
|
||||
/*p {*/
|
||||
/*font-weight: 400;*/
|
||||
/*margin: 10px 10px;*/
|
||||
/*color: #475669;*/
|
||||
/*}*/
|
||||
|
||||
hr {
|
||||
margin: 20px 5px;
|
||||
border: 0;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
/*hr {*/
|
||||
/*margin: 20px 5px;*/
|
||||
/*border: 0;*/
|
||||
/*border-top: 1px solid #eee;*/
|
||||
/*}*/
|
||||
|
||||
.fl-right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.header {
|
||||
line-height: 40px;
|
||||
font-size: 18px;
|
||||
margin-bottom: 10px;
|
||||
/*.header {*/
|
||||
/*line-height: 40px;*/
|
||||
/*font-size: 18px;*/
|
||||
/*margin-bottom: 10px;*/
|
||||
|
||||
}
|
||||
/*}*/
|
||||
|
||||
dl {
|
||||
margin: 0;
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<Row type="flex" justify="space-around">
|
||||
<Col :span=18>
|
||||
<Card dis-hover :padding="0">
|
||||
<Card :bordered="false" dis-hover :padding="0">
|
||||
<div slot="title">
|
||||
<Form id="filterForm" ref="filterForm" :model="filterForm">
|
||||
<Row type="flex" justify="space-between">
|
||||
@ -107,7 +107,7 @@
|
||||
|
||||
],
|
||||
problemList: [],
|
||||
pageSize: 1,
|
||||
pageSize: 2,
|
||||
total: 0,
|
||||
problemLoading: false,
|
||||
tagLoading: false,
|
||||
@ -173,7 +173,7 @@
|
||||
#filterForm {
|
||||
.ivu-form-item {
|
||||
margin-bottom: 0;
|
||||
margin-right: 30px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,20 +1,46 @@
|
||||
<template>
|
||||
<div>
|
||||
Hello world
|
||||
<div id="breadcrumb">
|
||||
<Breadcrumb>
|
||||
<Breadcrumb-item>Home</Breadcrumb-item>
|
||||
<Breadcrumb-item>Test</Breadcrumb-item>
|
||||
</Breadcrumb>
|
||||
</div>
|
||||
<CodeMirror :value="code" @changeCode="onChangeCode" @changeLang="onChangeLang"></CodeMirror>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import api from '@/api'
|
||||
// import api from '@/api'
|
||||
import CodeMirror from '../components/CodeMirror.vue'
|
||||
export default {
|
||||
name: 'test',
|
||||
components: {
|
||||
CodeMirror
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
code: ''
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// api.getProblem('1').then((res) => {
|
||||
// console.log(res.data)
|
||||
// })
|
||||
},
|
||||
methods: {
|
||||
onChangeCode(newCode) {
|
||||
this.code = newCode
|
||||
},
|
||||
onChangeLang(newLang) {
|
||||
this.language = newLang
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
<style scoped lang="less">
|
||||
#breadcrumb {
|
||||
outline: 1px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user