From cf4bbfabdd5da60ac78cc43a4febbb7e7d559f92 Mon Sep 17 00:00:00 2001
From: 闫增涛 <1829501689@qq.com>
Date: 星期五, 22 十一月 2024 11:11:40 +0800
Subject: [PATCH] 公式输入框样式
---
src/views/examination/components/list.vue | 340 +++++++++++++++++++++++++-------------------------------
1 files changed, 153 insertions(+), 187 deletions(-)
diff --git a/src/views/examination/components/list.vue b/src/views/examination/components/list.vue
index bedf9a3..ab6ba44 100644
--- a/src/views/examination/components/list.vue
+++ b/src/views/examination/components/list.vue
@@ -7,12 +7,21 @@
v-show="item.infoList.length"
>
<p class="catalogName" :style="{ color: primaryColor }">
- <span v-if="nindex == 0">涓�銆�</span>
- <span v-if="nindex == 1">浜屻��</span>
- <span v-if="nindex == 2">涓夈��</span>
- <span v-if="nindex == 3">鍥涖��</span>
- <span v-if="nindex == 4">浜斻��</span>
- <span>{{ item.catalogName }}</span>
+ <span class="catalogName-box" >
+ <span v-if="nindex == 0">涓�銆�</span>
+ <span v-if="nindex == 1">浜屻��</span>
+ <span v-if="nindex == 2">涓夈��</span>
+ <span v-if="nindex == 3">鍥涖��</span>
+ <span v-if="nindex == 4">浜斻��</span>
+ <span>{{ item.catalogName }}</span>
+ </span>
+ <img
+ :src="item.isCollect ? isHeart : heart"
+ alt=""
+ class="collect-png"
+ @click="handleCollect(nindex)"
+ v-if="item.type == 'material'"
+ />
</p>
<ul>
<li v-for="(value, index) in item.infoList" :key="value.id" :id="'listItem-' + value.id">
@@ -46,7 +55,7 @@
></el-image>
<!-- 鏂囧瓧鍔犲浘鐗� -->
<p class="stemTxtAndImage titleText" v-else-if="value.stemStyle == 'TxtAndImage'">
- <span> {{ value.stem.stemTxt }}</span>
+ <span v-html="value.stem.stemTxt" ></span>
<el-image
:src="getPublicImage(value.stem.stemImage, 150)"
:preview-src-list="[getPublicImage(value.stem.stemImage)]"
@@ -56,16 +65,20 @@
<!-- 濉┖棰橀骞� -->
<p class="titleText" v-if="value.questionType == 'completion'">
<span v-for="(itemText, indexText) in value.stem" :key="indexText">
- <span v-if="typeof itemText == 'string'" v-html="itemText"></span>
+ <span style="display: flex;align-items: center;" v-if="typeof itemText == 'string'" v-html="itemText"></span>
<!-- -->
- <input
+ <!-- <input
v-else
type="text"
class="input"
v-model.trim="value.userAnswer[itemText.num]"
:disabled="value.isComplete"
:style="{ backgroundColor: inputBc }"
- />
+ /> -->
+ <math-field v-else @input="onChangeInput($event,nindex,index,indexText)" class="mathField" :menuItems="[]">
+ {{ value.userAnswer[itemText.num] }}
+ </math-field
+ >
<!-- -->
</span>
</p>
@@ -77,14 +90,14 @@
v-cloak
></p>
</div>
+ <!-- 鏀惰棌 -->
<img
:src="value.isCollect ? isHeart : heart"
alt=""
class="collect-png"
@click="handleCollect(nindex, index)"
- v-if="!(hideCollect && value.questionType == 'shortAnswer')"
+ v-if="item.type != 'material'"
/>
- <!-- 鏀惰棌 -->
</div>
<div class="questionContent">
<!-- 鍗曢�� -->
@@ -98,7 +111,7 @@
v-for="content in value.option"
:key="content.value"
:label="content.value"
- @change="onChangeRadio(nindex,index)"
+ @change="onChangeRadio(nindex, index)"
border
:class="
value.optionStyle == 'Image' ||
@@ -118,7 +131,7 @@
:preview-src-list="[getPublicImage(content.img)]"
v-if="isReal"
></el-image>
- <img :src="content.img" alt="" v-if="value.isJson" class="radio-img" />
+ <img :src="content.img" alt="" v-if="value.isJson" class="radio-img" />
<el-image
v-else
:src="getPublicImage(content.img, 115)"
@@ -202,7 +215,7 @@
<el-input
:disabled="value.isComplete"
style="width: 94%; margin: 0 auto"
- v-else-if="value.questionType == 'shortAnswer'"
+ v-else-if="value.questionType == 'shortAnswer' ||value.questionType =='formula'"
type="textarea"
:rows="6"
placeholder="璇疯緭鍏ュ唴瀹�"
@@ -217,10 +230,47 @@
value.questionType == 'completion')
"
>
- <el-button @click="onChangeRadio(nindex,index)" style="margin-top: 10px">鏌ョ湅瑙ｆ瀽</el-button>
+ <el-button @click="onChangeRadio(nindex, index)" style="margin-top: 10px"
+ >鏌ョ湅瑙ｆ瀽</el-button
+ >
</div>
<!-- 鎻愪氦鍚庤В鏋� -->
<div class="analysis" v-if="value.isComplete">
+ <ul class="analysis-box">
+ <li class="headerConent" style="width: 60%">
+ <!-- 姝ｇ‘閿欒鏍囪瘑 -->
+ <ul class="mark">
+ <li v-if="value.isRight" class="mark-correct">姝ｇ‘</li>
+ <li v-if="value.isRight == false" class="mark-error">閿欒</li>
+ </ul>
+ <p :title="arrayToString(value.answer)">
+ <span>銆愭纭瓟妗堛�戯細</span>
+ <span v-html="arrayToString(value.answer)" class="correctBox"></span>
+ </p>
+ <p
+ :class="value.isRight ? 'correct textOverFlow' : 'error textOverFlow'"
+ :title="arrayToString(value.userAnswer)"
+ style="margin-left: 20px"
+ >
+ <span>鎮ㄧ殑绛旀锛�</span>
+ <span class="errorBox">{{
+ arrayToString(value.userAnswer) ? arrayToString(value.userAnswer) : '-'
+ }}</span>
+ </p>
+ </li>
+ <li>
+ <div class="difficulty" v-if="value.difficulty">
+ <span style="color: #333">闅惧害绛夌骇锛�</span>
+ <el-rate
+ v-model="value.difficulty"
+ :max="3"
+ size="large"
+ disabled
+ disabled-void-color="#949494"
+ />
+ </div>
+ </li>
+ </ul>
<el-collapse
v-model="value.isUnfold"
@change="handleChange(value)"
@@ -230,81 +280,15 @@
<el-collapse-item :name="value.id" class="objective">
<template #title>
<div class="headerBox">
- <div class="headerConent">
- <!-- 姝ｇ‘閿欒鏍囪瘑 -->
- <ul class="mark">
- <li v-if="value.isRight" class="mark-correct">姝ｇ‘</li>
- <li v-if="value.isRight == false" class="mark-error">閿欒</li>
- </ul>
- <p class="correct" :title="arrayToString(value.answer)">
- <span>姝ｇ‘绛旀锛�</span>
- <span v-html="arrayToString(value.answer)" class="correctBox"></span>
- </p>
- <p
- :class="value.isRight ? 'correct textOverFlow' : 'error textOverFlow'"
- :title="arrayToString(value.userAnswer)"
- style="margin-left: 20px"
- >
- <span>鎮ㄧ殑绛旀锛�</span>
- <span class="errorBox" v-if="isHaveAnswer(value.userAnswer)">{{
- arrayToString(value.userAnswer)
- }}</span>
- </p>
- </div>
- <p class="difficulty" v-if="value.difficulty">
- <span style="color: #333">闅惧害绛夌骇锛�</span>
- <el-rate
- v-model="value.difficulty"
- :max="3"
- size="large"
- disabled
- disabled-void-color="#949494"
- />
- </p>
- <!-- 姝ｇ‘閿欒鍥炬爣 -->
- <!-- <span class="mr-10">
- <svg
- v-if="value.isRight"
- t="1716986419862"
- class="icon"
- viewBox="0 0 1820 1024"
- version="1.1"
- xmlns="http://www.w3.org/2000/svg"
- p-id="18767"
- xmlns:xlink="http://www.w3.org/1999/xlink"
- width="40"
- height="20"
- >
- <path
- d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
- fill="#1AFA29"
- p-id="18768"
- ></path>
- </svg>
- <svg
- v-if="value.isRight == false"
- t="1716987085767"
- class="icon"
- viewBox="0 0 1024 1024"
- version="1.1"
- xmlns="http://www.w3.org/2000/svg"
- p-id="25745"
- xmlns:xlink="http://www.w3.org/1999/xlink"
- width="20"
- height="20"
- >
- <path
- d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
- fill="#d81e06"
- p-id="25746"
- ></path>
- </svg>
- </span> -->
<div class="headerConent sitgBox">
- <p v-if="!value.isUnfold">
+ <p v-if="!value.isUnfold" class="al-cn">
<span class="analysisColor">灞曞紑瑙ｆ瀽</span>
+ <img :src="openIcon" alt="" class="analysis-icon" />
</p>
- <p v-else><span class="analysisColor">鏀惰捣瑙ｆ瀽</span></p>
+ <p v-else>
+ <span class="analysisColor">鏀惰捣瑙ｆ瀽</span>
+ <img :src="closeIcon" alt="" class="analysis-icon" />
+ </p>
</div>
</div>
</template>
@@ -318,11 +302,13 @@
<el-collapse-item :name="value.id" class="objective">
<template #title>
<div class="headerBox">
- <p v-if="!value.isUnfold">
+ <p v-if="!value.isUnfold" class="al-cn">
<span class="analysisColor">灞曞紑绛旀涓庤В鏋�</span>
+ <img :src="openIcon" alt="" class="analysis-icon" />
</p>
- <p v-else>
+ <p v-else class="al-cn">
<span class="analysisColor">鏀惰捣绛旀涓庤В鏋�</span>
+ <img :src="closeIcon" alt="" class="analysis-icon" />
</p>
</div>
</template>
@@ -346,62 +332,6 @@
</div>
</el-collapse-item>
</el-collapse>
- <!-- <div
- v-if="value.questionType == 'shortAnswer'"
- class="subjective subjectiveItem"
- >
- <div class="questionAnalysis">
- <p class="difficulty" v-if="value.difficulty">
- <span style="color: #333">闅惧害绛夌骇锛�</span>
- <el-rate
- v-model="value.difficulty"
- :max="3"
- size="large"
- disabled
- disabled-void-color="#949494"
- />
- </p>
- <p class="difficulty" @click="watchParsing(value)">
- <span class="analysisColor"
- >{{
- value.isUnfold ? "鏀惰捣绛旀鍜岃В鏋�" : "鏌ョ湅绛旀涓庤В鏋�"
- }}
- </span>
- </p>
- </div>
- <div
- :class="
- [
- 'analysisDetailBox',
- value.isUnfold ? 'cartoon' : 'downCartoon',
- ].join(' ')
- "
- >
- <div class="referBox">
- <span>鍙傝�冪瓟妗堬細</span>
- <p
- v-html="arrayToString(value.answer)"
- :class="[
- 'subjectiveBox',
- value.isUnfold ? 'showText' : 'hideText',
- ]"
- ></p>
- </div>
- <div class="referBox">
- <span>瑙ｆ瀽锛�</span>
- <p
- v-if="value.analysisCon"
- v-html="value.analysisCon"
- :class="
- ['subjectiveBox', value.isUnfold ? 'yincang' : ''].join(
- ' '
- )
- "
- ></p>
- <p v-else>鏆傛棤鏁版嵁</p>
- </div>
- </div>
- </div> -->
</div>
</div>
</li>
@@ -411,18 +341,20 @@
</template>
<script setup lang="ts">
-import { defineProps, onMounted, ref,reactive } from 'vue'
+import { defineProps, onMounted, ref, reactive } from 'vue'
import { getPublicImage } from '@/assets/js/middleGround/tool.js'
import heart from '@/assets/images/examination/collectIcon.png'
import isHeart from '@/assets/images/examination/collectClickIcon.png'
+import openIcon from '@/assets/images/examination/open.png'
+import closeIcon from '@/assets/images/examination/close.png'
const props = defineProps({ cardList: Array, collectList: Array })
-const emits = defineEmits([ 'onChangeRadio','setCollect'])
+const emits = defineEmits(['onChangeRadio', 'setCollect','onChangeInput'])
// const presentId = ref<Number>(props.collectList[0])
onMounted(() => {
// if (props.collectList) presentId.value = props.collectList[0]
})
// 鏁扮粍杞负瀛楃涓叉柟娉�
-const arrayToString = (data) => {
+const arrayToString = (data: any) => {
// 妫�鏌ユ槸鍚︿负鏁扮粍
if (Array.isArray(data)) {
// 浣跨敤 join 鏂规硶灏嗘暟缁勮浆鎹负瀛楃涓诧紝榛樿浣跨敤閫楀彿鍒嗛殧
@@ -432,7 +364,7 @@
return data.replace(/<[^>]*>/g, '')
}
}
-const isHaveAnswer = (data) => {
+const isHaveAnswer = (data: any) => {
if (typeof data == 'string') {
data = data
.replace(/<[^>]*>/g, '')
@@ -453,16 +385,26 @@
}
}
// 鏀惰棌鎸夐挳
-const handleCollect = (num,number) => {
- emits('setCollect',num,number)
+const handleCollect = (num: number, number: number) => {
+ emits('setCollect', num, number)
}
// 鍗曢�夋杈撳叆
-const onChangeRadio = (num:number,number:number) => {
- emits('onChangeRadio', num,number)
+const onChangeRadio = (num: number, number: number) => {
+ emits('onChangeRadio', num, number)
+}
+const onChangeInput = (event: any,index:number,cindex:number,dindex:number) => {
+ emits('onChangeInput',event.target.value,index,cindex,dindex)
}
</script>
<style lang="less" scoped>
+.catalogName {
+ display: flex;
+ margin-top: 40px;
+ .catalogName-box {
+ width: 94%;
+ }
+}
.collect-png {
cursor: pointer;
width: 24px;
@@ -527,12 +469,12 @@
margin-top: 20px;
display: flex;
justify-content: space-between;
+ align-items: flex-start;
.titleContent {
width: 95%;
display: flex;
align-items: flex-start;
span {
- height: 24px;
line-height: 24px;
text-align: center;
font-size: 16px;
@@ -540,6 +482,9 @@
font-weight: bold;
}
.titleText {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
padding: 0 10px 10px 10px;
min-width: 90%;
font-size: 14px;
@@ -620,34 +565,8 @@
width: 100%;
padding: 0 20px;
font-size: 14px;
- background-color: #f4f4f4;
- .headerBox {
- width: 100%;
- height: 100%;
- display: flex;
- justify-content: space-between;
- .headerConent {
- height: 100%;
- display: flex;
- align-items: center;
- .el-image {
- width: 9px;
- height: 9px;
- }
- .correct {
- color: #1fbc1f;
- width: 200px;
- text-align: left;
- }
- .error {
- text-align: left;
- margin-left: 40px;
- width: 200px;
- color: #ee1818;
- }
- }
- }
-
+ background-color: #e0f2ff;
+ color: #3b93fe;
.checkAnalysis {
cursor: pointer;
height: 100%;
@@ -658,7 +577,7 @@
/deep/ .el-collapse-item__content {
width: 100%;
padding: 0 20px;
- background-color: #f4f4f4;
+ background-color: #e0f2ff;
font-size: 14px;
color: #333;
}
@@ -699,9 +618,10 @@
.mark {
font-size: 14px;
color: #fff;
- .mark-error,.mark-correct {
+ .mark-error,
+ .mark-correct {
white-space: nowrap;
- height: 20px;
+ min-height: 20px;
line-height: 18px;
padding: 2px 8px;
margin-right: 5px;
@@ -710,7 +630,53 @@
background-color: #1fbc1f;
}
.mark-error {
- background-color: #ee1818;
+ background-color: #ff5e5e;
}
}
+.headerConent {
+ height: 100%;
+ display: flex;
+ align-items: center;
+ .el-image {
+ width: 9px;
+ height: 9px;
+ }
+ .correct {
+ color: #70b503;
+ width: 200px;
+ text-align: left;
+ }
+ .error {
+ text-align: left;
+ margin-left: 40px;
+ width: 200px;
+ color: #ff5e5e;
+ }
+}
+.difficulty {
+ display: flex;
+ align-items: center;
+}
+.analysis-box {
+ padding: 10px 0;
+}
+.al-cn {
+ display: flex;
+ align-items: center;
+}
+.analysis-icon {
+ width: 10px;
+ margin-left: 3px;
+}
+.el-collapse {
+ background-color: red;
+}
+.primary-text-color {
+ color: #3b93fe;
+}
+.mathField {
+ min-width: 200px;
+ max-width: 518px;
+ margin-top: 10px;
+}
</style>
--
Gitblit v1.9.1