Skip to content

X
xzksxt
Commit 1e77bb6a by 宋珺琪
Options

阴影

parent 07b7c6ee
Showing with 121 additions and 45 deletions
src/components/student/answer.vue
......@@ -8,8 +8,8 @@
<ul class="item">
<li><i class="iconfont icon-menufold icon20" ref="toggle" @click="slider_flag = !slider_flag"></i></li>
<div style="display: flex;">
<img src="@/assets/img/jinhui.png" style=" width: 35px;margin-right: 5px;" alt="" />
<li >{{examData.type}}-{{examData.source}}</li>
<img class="jinhuiClass" src="@/assets/img/jinhui.png" alt="" />
<li style=" font-family:'youshe';color: black;font-size: 45px; text-shadow: 8px 1px 1px #888888;">{{examData.type}}-{{examData.source}}</li>
</div>
<li>（{{userInfo.name}}）</li>
<li>
......@@ -47,10 +47,10 @@
<p class="topic">{{showQuestion}}</p>
<div v-if=" optionValue == '单选题'">
<el-radio-group v-model="radio[index]" @change="getChangeLabel" >
<el-radio :label="1" :disabled='radioFlag' :class="[isradio ? (this.reduceAnswer.rightAnswer==='A' ? 'checkboxTrueStyle' : 'checkboxFlaseStyle'):'noStyle']">{{showAnswer.answerA}}</el-radio>
<el-radio :label="2" :disabled='radioFlag' :class="[isradio ? (this.reduceAnswer.rightAnswer==='B' ? 'checkboxTrueStyle' : 'checkboxFlaseStyle'):'noStyle']">{{showAnswer.answerB}}</el-radio>
<el-radio :label="3" :disabled='radioFlag' :class="[isradio ? (this.reduceAnswer.rightAnswer==='C' ? 'checkboxTrueStyle' : 'checkboxFlaseStyle'):'noStyle']">{{showAnswer.answerC}}</el-radio>
<el-radio :label="4" :disabled='radioFlag' :class="[isradio ? (this.reduceAnswer.rightAnswer==='D' ? 'checkboxTrueStyle' : 'checkboxFlaseStyle'):'noStyle']">{{showAnswer.answerD}}</el-radio>
<el-radio :label="1" :disabled='radioFlag' :class="[isradio ? (this.reduceAnswer.rightAnswer==='A' ? 'checkboxTrueStyle' : 'radioFlaseStyle'):'noStyle']">{{showAnswer.answerA}}</el-radio>
<el-radio :label="2" :disabled='radioFlag' :class="[isradio ? (this.reduceAnswer.rightAnswer==='B' ? 'checkboxTrueStyle' : 'radioFlaseStyle'):'noStyle']">{{showAnswer.answerB}}</el-radio>
<el-radio :label="3" :disabled='radioFlag' :class="[isradio ? (this.reduceAnswer.rightAnswer==='C' ? 'checkboxTrueStyle' : 'radioFlaseStyle'):'noStyle']">{{showAnswer.answerC}}</el-radio>
<el-radio :label="4" :disabled='radioFlag' :class="[isradio ? (this.reduceAnswer.rightAnswer==='D' ? 'checkboxTrueStyle' : 'radioFlaseStyle'):'noStyle']">{{showAnswer.answerD}}</el-radio>
</el-radio-group>
<div class="analysis" id="topic1Right" style="display: none">
<ul>
......@@ -94,8 +94,8 @@
</div>
<div class="judge" v-if=" optionValue == '判断题'">
<el-radio-group v-model="judgeAnswer[index]" @change="getJudgeLabel">
<el-radio :label="1" :disabled='radioFlag' :class="[isradio ? (this.reduceAnswer.answer==='T' ? 'checkboxTrueStyle' : 'checkboxFlaseStyle'):'noStyle']">正确</el-radio>
<el-radio :label="2" :disabled='radioFlag' :class="[isradio ? (this.reduceAnswer.answer==='F' ? 'checkboxTrueStyle' : 'checkboxFlaseStyle'):'noStyle']">错误</el-radio>
<el-radio :label="1" :disabled='radioFlag' :class="[isradio ? (this.reduceAnswer.answer==='T' ? 'checkboxTrueStyle' : 'radioFlaseStyle'):'noStyle']">正确</el-radio>
<el-radio :label="2" :disabled='radioFlag' :class="[isradio ? (this.reduceAnswer.answer==='F' ? 'checkboxTrueStyle' : 'radioFlaseStyle'):'noStyle']">错误</el-radio>
</el-radio-group>
<div class="analysis" id="topic3Right" style="display: none">
<ul>
......@@ -481,10 +481,16 @@ export default {
</script>
<style lang="less">
/* @font-face {
.jinhuiClass{
height: 80px;
margin-right: 5px;
margin-top: -15px;
margin-bottom: -15px
}
@font-face {
font-family: "youshe";
src: url("../../assets/fonts/YouSheBiaoTiHei-2.ttf");
}*/
}
/*放大的图片*/
.el-image-viewer__img{
height: 500px;
......@@ -500,7 +506,7 @@ export default {
.checkboxTrueStyle::before{
content: "";
position: absolute;
top: -10px;
top: -14px;
left: 3px;
width: 12px;
height: 25px;
......@@ -510,7 +516,7 @@ export default {
transform: rotate(45deg);
z-index: 2;
}
//错号
//多选题错号
.checkboxFlaseStyle::before{
content: "×";
position: absolute;
......@@ -525,6 +531,21 @@ export default {
1px 1px 0 #f50808;
z-index: 2;
}
//判断题错号
.radioFlaseStyle::before{
content: "×";
position: absolute;
top: -25px;
left: -8px;
color: #f50808;
font-size: 30px;
text-shadow:
-1px -1px 0 #f50808,
1px -1px 0 #f50808,
-1px 1px 0 #f50808,
1px 1px 0 #f50808;
z-index: 2;
}
.iconfont.icon-time {
color: #2776df;
......@@ -532,8 +553,10 @@ export default {
}
.analysis {
margin-top: 20px;
//正确选项后边的字体
.right {
color: #fff;
color: black;
font-weight: bold;
font-size: 24px;
border: 1px solid #2776df;
padding: 0px 6px;
......@@ -541,7 +564,7 @@ export default {
margin-left: 20px;
}
ul li:nth-child(2) {
margin: 10px 0px;
margin: 90px 0px;
display: flex;
}
/*最后一个li标签*/
......@@ -557,28 +580,31 @@ export default {
}
}
.second{
/*align-items: center;*/
align-items: flex-end;
position: absolute;
bottom: 0px;
align-items: center;
/*align-items: flex-end;*/
/*position: absolute;*/
/*bottom: 0px;*/
margin-right: 10px;
margin-top: 30px;
.el-tag{
background-color: #2776df;
color:white;
}
//题目解析后边的样式
.li2right{
margin-left: 25px;
margin-right: 20px;
letter-spacing: 4px;
letter-spacing: 5px;
line-height: 1.5;
/*padding: 10px;*/
/*background-color: #fff;*/
border-radius: 4px;
/*border: 1px solid #2776df;*/
color: white;
max-height: 150px; /* 设置固定高度，根据需要调整 */
color: black;
font-weight: bold;
max-height: 250px; /* 设置固定高度，根据需要调整 */
overflow: auto; /* 添加滚动条 */
}
......@@ -677,13 +703,16 @@ export default {
.content {
padding: 0px 20px;
}
//题干的样式
.content .topic {
padding: 20px 0px;
padding-top: 30px;
color: #fff;
/*padding-top: 20px;*/
color: black;
font-weight: bold;
font-size: 25px;
font-family: 'SimSun', sans-serif;
line-height: 1.5;
letter-spacing: 5px;
}
.right .content {
margin: 10px;
......@@ -695,9 +724,13 @@ export default {
letter-spacing:1px;//字间距
}
//判断题的选项
.content .el-radio-group label {
color: #fff;
color: black;
font-weight: bold;
margin: 10px 0px;
letter-spacing: 5px;
line-height: 2;
}
.el-radio{
......@@ -718,9 +751,10 @@ export default {
.el-radio__input{
vertical-align: baseline;
}
/*前边的小圆圈*/
.el-radio__input.is-disabled.is-checked .el-radio__inner{
background-color:rgb(39, 118, 223);
border-color:white;
background-color:black;
border: 1px solid black;
margin-right: 10px;
}
......@@ -735,7 +769,10 @@ export default {
box-sizing: border-box;
padding: 2px;
}
/*title的样式*/
.right .title p {
color: black;
font-weight: bold;
margin-left: 20px;
font-size: 25px;
font-family: 'SimSun', sans-serif;
......@@ -884,20 +921,28 @@ export default {
background-color: rgb(39, 118, 223);
}
#answer .item {
color: #fff;
display: flex;
padding: 20px;
font-size: 24px;
font-family: 'SimSun', sans-serif;
font-size: 26px;
letter-spacing: 1px;
}
#answer .top .item li:nth-child(1) {
margin-right: 10px;
}
//名称
#answer .top .item li:nth-child(3) {
position: relative;
margin-left: auto;
font-weight: bold;
display: flex;
align-items: center;
}
//个人统计
#answer .top .item li:nth-child(4) {
font-weight: bold;
display: flex;
align-items: center;
}
#answer {
padding-bottom: 30px;
}
......@@ -921,30 +966,36 @@ export default {
text-align: left;
}
.router1 {
color: #fff;
border-style: solid;
border-color: #fff;
color: black;
font-weight: bold;
border: 2px solid black;
border-radius: 10px;
}
//背景
.bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('../../assets/img/dtbj.png')center top / cover no-repeat;
background: url('../../assets/img/beijing111.jpg')center top / cover no-repeat;
background-color: #b6bccdd1 !important;
background-size: 100% 100%;
max-height: 100%; /* 设置固定高度，根据需要调整 */
overflow: auto; /* 添加滚动条 */
}
/*多选的*/
.el-checkbox__input .el-checkbox__inner {
width: 14px;
height: 14px;
width: 16px;
height: 16px;
border-radius: 100%;
border: 1px solid #dcdfe6;
background-color: #fff;
border: 1px solid black;
/*background-color: #fff;*/
}
//多选选中的样式
.el-checkbox__label{
/*color: red;*/
color: black;
font-weight: bold;
font-size: 25px !important;
font-family: 'SimSun', sans-serif;
white-space:normal;
......@@ -962,18 +1013,19 @@ export default {
vertical-align: baseline;
}
.el-checkbox__input.is-checked .el-checkbox__inner{
background-color:rgb(39, 118, 223);
border-color:#E4E7ED;
background-color:black;
/*border-color:#E4E7ED;*/
margin-right: 10px;
}
.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner{
background-color:rgb(39, 118, 223);
border-color:white;
background-color:black;
/*border-color:white;*/
margin-right: 10px;
}
//多选选中
//多选点击后未选中的样式
.el-checkbox__input.is-checked+.el-checkbox__label{
color: #E4E7ED;
color: black;
font-weight: bold;
background-color: rgb(39, 118, 223);
/*right: 50px;*/
border-radius: 4px;
......@@ -983,4 +1035,28 @@ export default {
padding: 2px;
}
//判断和单选选中后选项的样式
.el-radio__input.is-disabled+span.el-radio__label{
color: black;
font-weight: bold;
}
//多选提交后选项的样式
.el-checkbox__input.is-disabled+span.el-checkbox__label{
color: black;
font-weight: bold;
}
//选项前边的小圆圈未选中
.el-radio__inner {
border: 1px solid black;
}
//选项前边的小圆圈选中 单选和判断
.el-radio__input.is-disabled .el-radio__inner{
border: 1px solid black;
background: black ;
}
//多选前面的圆点
.el-checkbox__input.is-disabled .el-checkbox__inner{
border: 1px solid black;
background: black;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment