master
parent
b50840c6fe
commit
8790213d02
2 changed files with 1186 additions and 0 deletions
@ -0,0 +1,521 @@ |
||||
<template> |
||||
<!-- 交易类 --> |
||||
<div class="content"> |
||||
<div class="header flex"> |
||||
<i class="el-icon-arrow-left" @click="Back()" style="cursor:pointer"> |
||||
<span>Back</span> |
||||
</i> |
||||
<p>判分点设置</p> |
||||
<button class="button" @click="Savejump()">保存</button> |
||||
</div> |
||||
<div class="footer"> |
||||
<div> |
||||
<div class="flex footer_h"> |
||||
<div class="black"></div> |
||||
<p>基本信息</p> |
||||
</div> |
||||
<div class="flex footer_input"> |
||||
<p>判分点名称</p> |
||||
<el-input placeholder="请输入内容" v-model="input" clearable></el-input> |
||||
</div> |
||||
<div class="flex footer_inputs"> |
||||
<p>实验要求</p> |
||||
<textarea id="memo" style="outline:none;"></textarea> |
||||
</div> |
||||
</div> |
||||
<div class="flex footer_b"> |
||||
<div class="black"></div> |
||||
<p>判分规则</p> |
||||
<button class="button">新增</button> |
||||
</div> |
||||
|
||||
<el-row> |
||||
<el-col :span="24"> |
||||
<el-card shadow="hover"> |
||||
<el-table |
||||
:data="tableData" |
||||
:stripe="true" |
||||
:cell-style="rowClass" |
||||
header-align="center" |
||||
:header-cell-style="headClass" |
||||
:row-class-name="tableRowClassName" |
||||
> |
||||
<el-table-column prop="id" type="index" label="序号" width="80"></el-table-column> |
||||
<el-table-column label="流程判分正确答案"> |
||||
<template slot-scope="scope"> |
||||
<p class="p">操作一致性规则：用户完成的功能操作与下方设置的操作点一致</p> |
||||
<div class="box"> |
||||
<div class="flex box_p"> |
||||
<p>一级栏目</p> |
||||
<el-select v-model="value1" clearable placeholder="币币交易"> |
||||
<el-option |
||||
v-for="item in options1" |
||||
:key="item.value" |
||||
:label="item.label" |
||||
:value="item.value" |
||||
></el-option> |
||||
</el-select> |
||||
</div> |
||||
<div class="flex box_p"> |
||||
<p>二级栏目</p> |
||||
<el-select v-model="value2" clearable placeholder="限价交易"> |
||||
<el-option |
||||
v-for="item in options2" |
||||
:key="item.value" |
||||
:label="item.label" |
||||
:value="item.value" |
||||
></el-option> |
||||
</el-select> |
||||
</div> |
||||
<div class="flex box_p"> |
||||
<p>操作按钮</p> |
||||
<el-select v-model="value3" clearable placeholder="买入BTC"> |
||||
<el-option |
||||
v-for="item in options3" |
||||
:key="item.value" |
||||
:label="item.label" |
||||
:value="item.value" |
||||
></el-option> |
||||
</el-select> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label=" " width="150"> |
||||
<template slot-scope="scope"> |
||||
<div class="border"> |
||||
<p v-show="scope.row.isQie" @click="getQie(scope.row)" style="cursor:pointer">且</p> |
||||
<p v-show="!scope.row.isQie" @click="getHuo(scope.row)" style="cursor:pointer">或</p> |
||||
</div> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="交易结果正确答案"> |
||||
<template slot-scope="scope"> |
||||
<p class="p">交易结果一致性规则：用户交易结果需要与下面设置的交易结果指标要求一致</p> |
||||
<div class="box"> |
||||
<div class="flex box_p"> |
||||
<p>指标类别</p> |
||||
<el-select v-model="value4" clearable placeholder="交易结果指标"> |
||||
<el-option |
||||
v-for="item in values1" |
||||
:key="item.value" |
||||
:label="item.label" |
||||
:value="item.value" |
||||
></el-option> |
||||
</el-select> |
||||
</div> |
||||
<div class="flex box_p"> |
||||
<p>交易指标</p> |
||||
<el-select v-model="value5" clearable placeholder="BTC买入量"> |
||||
<el-option |
||||
v-for="item in values2" |
||||
:key="item.value" |
||||
:label="item.label" |
||||
:value="item.value" |
||||
></el-option> |
||||
</el-select> |
||||
</div> |
||||
<div class="flex box_p box_right" style="padding-left: 30px;"> |
||||
<p>交易结果区间</p> |
||||
<el-select v-model="value6" clearable placeholder="("> |
||||
<el-option |
||||
v-for="item in values3" |
||||
:key="item.value" |
||||
:label="item.label" |
||||
:value="item.value" |
||||
></el-option> |
||||
</el-select> |
||||
<el-input |
||||
placeholder="100" |
||||
style="width:80px;margin:8px 10px 0 10px;" |
||||
v-model="input1" |
||||
clearable |
||||
></el-input> |
||||
<el-input |
||||
placeholder="100" |
||||
v-model="input2" |
||||
style="width:80px;margin:8px 10px 0 0;" |
||||
clearable |
||||
></el-input> |
||||
<el-select v-model="value7" clearable placeholder=")"> |
||||
<el-option |
||||
v-for="item in values4" |
||||
:key="item.value" |
||||
:label="item.label" |
||||
:value="item.value" |
||||
></el-option> |
||||
</el-select> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="操作" width="300"> |
||||
<template slot-scope="scope"> |
||||
<el-button size="mini" type="text" v-show="isShow" @click="handleEdit()">编辑</el-button> |
||||
<el-button |
||||
type="text" |
||||
size="mini" |
||||
v-show="!isShow" |
||||
@click="addTab(scope.$index, scope.row)" |
||||
>保存</el-button> |
||||
<el-button |
||||
size="mini" |
||||
type="text" |
||||
v-show="!isShow" |
||||
@click="dialogFormVisible()" |
||||
>取消</el-button> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
</el-card> |
||||
</el-col> |
||||
</el-row> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
data() { |
||||
return { |
||||
input: "", |
||||
textarea: "", |
||||
tableData: [ |
||||
{ |
||||
qie: "且", |
||||
huo: "或" |
||||
} |
||||
], |
||||
options1: [ |
||||
{ |
||||
value: "选项1", |
||||
label: "币币交易" |
||||
}, |
||||
{ |
||||
value: "选项2", |
||||
label: "网络交易" |
||||
} |
||||
], |
||||
options2: [ |
||||
{ |
||||
value: "选项1", |
||||
label: "限价交易" |
||||
} |
||||
], |
||||
options3: [ |
||||
{ |
||||
value: "选项1", |
||||
label: "买入BTC" |
||||
} |
||||
], |
||||
values1: [ |
||||
{ |
||||
value: "选项1", |
||||
label: "交易结果指标" |
||||
}, |
||||
{ |
||||
value: "选项2", |
||||
label: "交易过程指标" |
||||
} |
||||
], |
||||
values2: [ |
||||
{ |
||||
value: "选项1", |
||||
label: "BTC买入量" |
||||
}, |
||||
{ |
||||
value: "选项2", |
||||
label: "总资产收益率" |
||||
} |
||||
], |
||||
values3: [ |
||||
{ |
||||
value: "选项1", |
||||
label: "(" |
||||
}, |
||||
{ |
||||
value: "选项2", |
||||
label: "[" |
||||
} |
||||
], |
||||
values4: [ |
||||
{ |
||||
value: "选项1", |
||||
label: ")" |
||||
}, |
||||
{ |
||||
value: "选项2", |
||||
label: "]" |
||||
} |
||||
], |
||||
value1: "", |
||||
value2: "", |
||||
value3: "", |
||||
value4: "", |
||||
value5: "", |
||||
value6: "", |
||||
value7: "", |
||||
input1: "", |
||||
input2: "", |
||||
isShow: true, |
||||
isQie: true |
||||
}; |
||||
}, |
||||
|
||||
methods: { |
||||
Savejump() { |
||||
this.$router.push({ path: "/" }); |
||||
}, |
||||
Back() { |
||||
this.$router.push({ path: "/" }); |
||||
}, |
||||
getQie() { |
||||
this.isQie = false; |
||||
}, |
||||
getHuo() { |
||||
this.isQie = true; |
||||
}, |
||||
handleEdit() { |
||||
this.isShow = false; |
||||
}, |
||||
addTab(tabName, targetName) { |
||||
let newTabName = ++this.tabIndex + ""; |
||||
this.editableTabs.push({ |
||||
title: tabName, |
||||
name: newTabName, |
||||
content: "New Tab content" |
||||
}); |
||||
this.editableTabsValue = newTabName; |
||||
this.dialogFormVisible = false; |
||||
}, |
||||
dialogFormVisible() { |
||||
this.isShow = true; |
||||
}, |
||||
// 表头样式设置 |
||||
headClass() { |
||||
return "text-align: center;"; |
||||
}, |
||||
// 表格样式设置 |
||||
rowClass() { |
||||
return "text-align: center;"; |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
// 第二部分 |
||||
//或 且的边框 |
||||
.border { |
||||
width: 50px; |
||||
height: 50px; |
||||
border: 1px solid #9278ff; |
||||
border-radius: 50%; |
||||
margin: auto; |
||||
} |
||||
// 表格盒子 |
||||
.box { |
||||
border: 1px solid #9278ff; |
||||
width: 500px; |
||||
margin: 0 auto; |
||||
} |
||||
.box /deep/ .el-input { |
||||
width: 150px; |
||||
} |
||||
.box_right /deep/ .el-input { |
||||
width: 51px; |
||||
margin-right: 0; |
||||
} |
||||
.box /deep/ .el-input--suffix .el-input__inner { |
||||
height: 25px; |
||||
padding-right: 0; |
||||
} |
||||
.box /deep/ .el-input--suffix .el-input__inner { |
||||
border: 1px solid #9278ff; |
||||
} |
||||
.box /deep/ .el-input--suffix .el-input__inner:focus, |
||||
.el-input--suffix .el-input__inner:hover { |
||||
border: 1px solid #9278ff; |
||||
} |
||||
/deep/ .el-table .cell { |
||||
line-height: 1; |
||||
} |
||||
.box_p { |
||||
padding-left: 50px; |
||||
} |
||||
.box_p p { |
||||
padding-right: 20px; |
||||
} |
||||
|
||||
// 表格里面的内容 |
||||
.p { |
||||
font-size: 12px; |
||||
font-weight: 600; |
||||
} |
||||
/deep/ .el-select { |
||||
padding-top: 10px; |
||||
} |
||||
/deep/ .el-table td, |
||||
.el-table th { |
||||
padding-top: 0; |
||||
} |
||||
.box /deep/ [class*=" el-icon-"], |
||||
[class^="el-icon-"] { |
||||
line-height: 1; |
||||
padding-left: 0; |
||||
} |
||||
/deep/ .el-select__caret:before { |
||||
content: "\e78f"; |
||||
font-size: 8px; |
||||
padding: 1px; |
||||
background-color: #9278ff; |
||||
border-radius: 50%; |
||||
color: #ffffff; |
||||
} |
||||
/deep/ .el-row { |
||||
padding: 0 20px; |
||||
} |
||||
/deep/ .el-card__body { |
||||
padding: 0; |
||||
} |
||||
/deep/ .el-card { |
||||
border: none; |
||||
} |
||||
|
||||
// 滚动条的宽度 |
||||
/deep/ ::-webkit-scrollbar { |
||||
width: 6px; // 横向滚动条 |
||||
height: 6px; // 纵向滚动条 必写 |
||||
} |
||||
// 滚动条的滑块 |
||||
/deep/ ::-webkit-scrollbar-thumb { |
||||
background-color: #9278ff; |
||||
border-radius: 3px; |
||||
-webkit-box-shadow: inset 0 0 5px #dddddd; |
||||
} |
||||
/deep/ ::-webkit-scrollbar-track { |
||||
/*滚动条里面轨道*/ |
||||
-webkit-box-shadow: inset 0 0 5px #dddddd; |
||||
border-radius: 0; |
||||
background: #dddddd; |
||||
} |
||||
|
||||
/deep/ .el-table th { |
||||
font-size: 14px; |
||||
font-family: Microsoft YaHei; |
||||
color: rgba(255, 255, 255, 1); |
||||
background-color: #9278ff; |
||||
} |
||||
|
||||
.footer_b p { |
||||
// padding-right: 800px; |
||||
margin: 0; |
||||
padding-left: 10px; |
||||
font-size: 12px; |
||||
} |
||||
.footer_b { |
||||
padding: 10px 0; |
||||
border-top: 1px dashed #cccccc; |
||||
margin: 0 15px; |
||||
height: 45px; |
||||
line-height: 45px; |
||||
} |
||||
|
||||
// 第一部分 |
||||
#memo { |
||||
margin-left: 10px; |
||||
height: 200px; |
||||
width: 800px; |
||||
resize: none; |
||||
border: 1px solid #9278ff; |
||||
font-size: 12px; |
||||
border-radius: 5px; |
||||
} |
||||
/deep/ .el-input--suffix .el-input__inner { |
||||
border: 1px solid #9278ff; |
||||
} |
||||
.footer_input p { |
||||
font-size: 12px; |
||||
padding-right: 20px; |
||||
} |
||||
.footer_input { |
||||
padding: 30px 0 20px 80px; |
||||
} |
||||
.footer_inputs { |
||||
padding: 30px 0 20px 80px; |
||||
} |
||||
.footer_inputs p { |
||||
font-size: 12px; |
||||
padding-right: 20px; |
||||
} |
||||
/deep/ .el-input { |
||||
width: 30%; |
||||
} |
||||
.button { |
||||
height: 30px; |
||||
width: 80px; |
||||
margin-top: 7px; |
||||
border: none; |
||||
background-color: #9278ff; |
||||
color: #ffffff; |
||||
border-radius: 20px; |
||||
position: absolute; |
||||
right: 30px; |
||||
} |
||||
.button:focus { |
||||
outline: 0; |
||||
} |
||||
/deep/ [class*=" el-icon-"], |
||||
[class^="el-icon-"] { |
||||
line-height: 3; |
||||
padding-left: 10px; |
||||
} |
||||
.header { |
||||
background-color: #ffffff; |
||||
height: 45px; |
||||
line-height: 45px; |
||||
font-size: 14px; |
||||
font-weight: 600; |
||||
position: relative; |
||||
} |
||||
.header span { |
||||
font-size: 14px; |
||||
font-weight: 600; |
||||
padding-left: 5px; |
||||
} |
||||
.header p { |
||||
padding-left: 20px; |
||||
margin: 0; |
||||
} |
||||
.footer_h { |
||||
// padding: 10px 0; |
||||
border-top: 1px dashed #cccccc; |
||||
border-bottom: 1px dashed #cccccc; |
||||
margin: 0 15px; |
||||
height: 45px; |
||||
line-height: 45px; |
||||
} |
||||
.flex { |
||||
display: flex; |
||||
justify-content: flex-start; |
||||
} |
||||
.footer { |
||||
background-color: #ffffff; |
||||
} |
||||
.footer_h p { |
||||
padding-left: 10px; |
||||
font-size: 12px; |
||||
margin: 0; |
||||
} |
||||
.black { |
||||
width: 8px; |
||||
height: 18px; |
||||
background-color: #333; |
||||
margin-top: 10px; |
||||
} |
||||
.content { |
||||
background-color: #f2f6fc; |
||||
position: relative; |
||||
top: 10px; |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue