Sfoglia il codice sorgente

修改创建问卷页的图标样式

lm 1 mese fa
parent
commit
fabf3148f4

File diff suppressed because it is too large
+ 5 - 0
src/assets/evaluateTeaching/EvaluateScoreIcon.vue


+ 20 - 0
src/assets/evaluateTeaching/MultipleChoiceIcon.vue

@@ -0,0 +1,20 @@
+<template>
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" 
+        xmlns="http://www.w3.org/2000/svg">
+        <g id="icon/&#229;&#164;&#154;&#233;&#128;&#137;&#233;&#162;&#152;">
+        <g id="icon/&#229;&#164;&#154;&#233;&#128;&#137;&#233;&#162;&#152;_2">
+        <path id="Vector" d="M16.2695 1.83496C17.3254 1.83496 18.1846 2.69416 18.1846 3.75V16.25C18.1846 17.3058 17.3257 18.165 16.2695 18.165H3.76953C2.71369 18.165 1.85449 17.3058 1.85449 16.25V3.75C1.85449 2.69416 2.71369 1.83496 3.76953 1.83496H16.2695ZM3.76953 3.16504C3.44725 3.16504 3.18457 3.42772 3.18457 3.75V16.25C3.18457 16.5729 3.44722 16.835 3.76953 16.835H16.2695C16.4247 16.835 16.5739 16.7738 16.6836 16.6641C16.7933 16.5544 16.8545 16.4052 16.8545 16.25V3.75C16.8545 3.42769 16.5924 3.16504 16.2695 3.16504H3.76953Z" 
+            fill="var(--icon-color)" stroke="var(--icon-color)" stroke-width="0.08"/>
+        <path id="Vector_2" d="M13.4012 7.21779C13.6774 6.9274 14.1247 6.9274 14.401 7.21779C14.6768 7.50818 14.6768 7.97856 14.401 8.26892L9.60962 13.3074C9.50178 13.4206 9.19266 13.6966 9.19266 13.6966C8.91516 13.952 8.52832 13.7583 8.2639 13.4799L5.20687 10.6352C4.93104 10.3448 4.93104 9.87403 5.20687 9.58361C5.48318 9.29372 5.9305 9.29372 6.20679 9.58361L8.82965 12.0251L13.4012 7.21779Z" 
+            fill="var(--icon-color)"/>
+        </g>
+        </g>
+    </svg>
+</template>
+
+
+<style lang="scss" scoped>
+svg{
+    --icon-color : #666666;   
+}
+</style>

+ 22 - 0
src/assets/evaluateTeaching/Q&Aicon.vue

@@ -0,0 +1,22 @@
+<template>
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" 
+        xmlns="http://www.w3.org/2000/svg">
+        <g id="icon/&#228;&#184;&#187;&#232;&#167;&#130;&#233;&#162;&#152;">
+            <g id="icon/&#228;&#184;&#187;&#232;&#167;&#130;&#233;&#162;&#152;_2">
+                <path id="Vector" d="M16.2695 1.83496C17.3254 1.83496 18.1846 2.69416 18.1846 3.75V16.25C18.1846 17.3058 17.3257 18.165 16.2695 18.165H3.76953C2.71369 18.165 1.85449 17.3058 1.85449 16.25V3.75C1.85449 2.69416 2.71369 1.83496 3.76953 1.83496H16.2695ZM3.76953 3.16504C3.44725 3.16504 3.18457 3.42772 3.18457 3.75V16.25C3.18457 16.5729 3.44722 16.835 3.76953 16.835H16.2695C16.4247 16.835 16.5739 16.7738 16.6836 16.6641C16.7933 16.5544 16.8545 16.4052 16.8545 16.25V3.75C16.8545 3.42769 16.5924 3.16504 16.2695 3.16504H3.76953Z" 
+                    fill="var(--icon-color)" stroke="var(--icon-color)" stroke-width="0.08"/>
+                <rect id="Rectangle 34625167" x="5" y="7" width="10" height="1.4" rx="0.7" 
+                    fill="var(--icon-color)"/>
+                <rect id="Rectangle 34625168" x="5" y="11" width="6" height="1.4" rx="0.7" 
+                    fill="var(--icon-color)"/>
+            </g>
+        </g>
+    </svg>
+</template>
+
+
+<style lang="scss" scoped>
+svg{
+    --icon-color : #666666;   
+}
+</style>

+ 24 - 0
src/assets/evaluateTeaching/RightCircle.vue

@@ -0,0 +1,24 @@
+<template>
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" 
+        xmlns="http://www.w3.org/2000/svg">
+        <g id="Frame" clip-path="url(#clip0_14750_31535)">
+            <path id="Vector" d="M7.2312 10.1696C7.09284 10.17 6.95972 10.1167 6.8598 10.021L5.05337 8.29329C5.00144 8.24485 4.95964 8.18658 4.9304 8.12187C4.90117 8.05716 4.88506 7.98729 4.88303 7.91631C4.881 7.84532 4.89308 7.77464 4.91857 7.70837C4.94406 7.64209 4.98246 7.58153 5.03153 7.5302C5.0806 7.47888 5.13938 7.4378 5.20444 7.40936C5.26951 7.38092 5.33958 7.36568 5.41058 7.36452C5.48158 7.36336 5.5521 7.37631 5.61806 7.40262C5.68402 7.42892 5.7441 7.46806 5.79482 7.51776L7.22731 8.8872L10.2008 5.98428C10.2512 5.93504 10.3108 5.89621 10.3762 5.87001C10.4416 5.84381 10.5116 5.83075 10.582 5.83158C10.6525 5.83241 10.7221 5.84711 10.7869 5.87484C10.8517 5.90257 10.9104 5.94279 10.9596 5.9932C11.0088 6.04361 11.0477 6.10322 11.0739 6.16864C11.1001 6.23406 11.1131 6.304 11.1123 6.37446C11.1115 6.44492 11.0968 6.51453 11.0691 6.57932C11.0413 6.6441 11.0011 6.70279 10.9507 6.75203L7.60595 10.017C7.50583 10.1149 7.37128 10.1697 7.2312 10.1696Z" 
+                fill="var(--icon-color)"/>
+            <path id="Vector_2" d="M8.00637 3.07364C9.3294 3.07364 10.567 3.58333 11.4913 4.50881C11.9484 4.96675 12.3108 5.51034 12.5576 6.10848C12.8044 6.70661 12.9309 7.34754 12.9297 7.9946C12.9286 8.64165 12.7998 9.28213 12.5509 9.87938C12.302 10.4766 11.9377 11.0189 11.4789 11.4753L11.4717 11.4825C10.5532 12.4143 9.3172 12.9275 7.99175 12.9275C6.66992 12.9275 5.43326 12.4187 4.50939 11.4948C4.05195 11.0355 3.68962 10.4904 3.44314 9.89078C3.19667 9.29117 3.07089 8.64884 3.07302 8.00055C3.07302 6.6853 3.5866 5.44636 4.51905 4.51122C4.97872 4.05409 5.52329 3.69118 6.12214 3.4429C6.71967 3.19719 7.35976 3.07166 8.00583 3.07351M8.00583 2.00049C6.40515 2.00049 4.90748 2.61748 3.76163 3.75045C2.63147 4.88289 2 6.39759 2 8.00055C2 9.60351 2.61699 11.1035 3.74755 12.2505C4.87824 13.383 6.3904 14.0005 7.99162 14.0005C9.59283 14.0005 11.105 13.3835 12.2358 12.2358C14.5856 9.89765 14.5856 6.0887 12.2506 3.75059C11.1197 2.61815 9.60718 2.00062 8.00637 2.00062L8.00583 2.00049Z" 
+                fill="var(--icon-color)"/>
+        </g>
+        <defs>
+            <clipPath id="clip0_14750_31535">
+                <rect width="16" height="16" fill="white"/>
+            </clipPath>
+        </defs>
+    </svg>
+</template>
+
+<script setup lang="ts"></script>
+
+<style lang="scss" scoped>
+svg{
+    --icon-color : #999999;   
+}
+</style>

+ 22 - 0
src/assets/evaluateTeaching/SingleChoiceIcon.vue

@@ -0,0 +1,22 @@
+<template>
+   <svg width="20" height="20" viewBox="0 0 20 20" fill="none" 
+        xmlns="http://www.w3.org/2000/svg">
+        <g id="icon/&#229;&#141;&#149;&#233;&#128;&#137;&#233;&#162;&#152;">
+            <g id="icon/&#229;&#141;&#149;&#233;&#128;&#137;&#233;&#162;&#152;_2">
+                <g id="Group 13">
+                    <path id="Vector" d="M13.825 7.11232C14.1012 6.82193 14.5485 6.82193 14.8248 7.11232C15.1006 7.40271 15.1007 7.87309 14.8248 8.16345L10.0334 13.2019C9.92561 13.3151 9.61649 13.5912 9.61649 13.5912C9.33899 13.8465 8.95215 13.6528 8.68773 13.3744L5.6307 10.5297C5.35487 10.2394 5.35487 9.76856 5.6307 9.47814C5.90701 9.18825 6.35432 9.18825 6.63062 9.47814L9.25348 11.9196L13.825 7.11232Z" 
+                        fill="var(--icon-color)"/>
+                    <circle id="Ellipse 3" cx="10" cy="10" r="8" 
+                        stroke="var(--icon-color)" stroke-width="1.3"/>
+                </g>
+            </g>
+        </g>
+    </svg>
+</template>
+
+
+<style lang="scss" scoped>
+svg{
+    --icon-color : #666666;   
+}
+</style>

BIN
src/assets/evaluateTeaching/questionnaire_card_upload_file_icon.png


+ 11 - 13
src/components/questionConfig/questionTypeList.ts

@@ -1,31 +1,31 @@
 import { ref } from "vue"
-import confirmIcon from '@/assets/icon/confirm.svg'
+import SingleChoiceIcon from "@/assets/evaluateTeaching/SingleChoiceIcon.vue"
+import QAIcon from "@/assets/evaluateTeaching/Q&AIcon.vue"
+import MultipleChoiceIcon from "@/assets/evaluateTeaching/MultipleChoiceIcon.vue"
+import EvaluateScoreIcon from "@/assets/evaluateTeaching/EvaluateScoreIcon.vue"
 
 interface QuestionTypeItm {
     label:String,
     value:String,
-    icon:String,
-    activeIcon:String
+    icon:null | any,
+    activeIcon?:String
 }
 
 export const statisticQuestionType = ref<QuestionTypeItm[]>([
     {
         label:'单选题',
         value:'0',
-        icon:confirmIcon,
-        activeIcon:confirmIcon
+        icon:SingleChoiceIcon,
     },
     {
         label:'多选题',
         value:'1',
-        icon:confirmIcon,
-        activeIcon:confirmIcon
+        icon:MultipleChoiceIcon,
     },
     {
         label:'问答题',
         value:'2',
-        icon:confirmIcon,
-        activeIcon:confirmIcon
+        icon:QAIcon,
     },
 ])
 
@@ -33,14 +33,12 @@ export const scoredQuestionType = ref<QuestionTypeItm[]>([
     {
         label:'评分单选题',
         value:'3',
-        icon:confirmIcon,
-        activeIcon:confirmIcon
+        icon:SingleChoiceIcon,
     },
     {
         label:'评价题',
         value:'5',
-        icon:confirmIcon,
-        activeIcon:confirmIcon
+        icon:EvaluateScoreIcon,
     },
 ])
 

+ 7 - 40
src/components/questionnaireCard/QuestionnaireCard.vue

@@ -35,10 +35,8 @@
                     {{ typeNumToName(questionnaire.evaluationType).title }}
                 </span>
                 <!-- 状态文本:根据 cardStatus 动态变色 -->
-
-                <!-- ???? -->
-                <span :class="['status_text', statusNumToName(questionnaire.cardStatus)?.themeClass ,'']">
-                    <img src="" alt="">
+                <span :class="['status_text','icon_text', statusNumToName(questionnaire.cardStatus)?.themeClass ,'']">
+                    <RightCircle :style="{'--icon-color':statusNumToName(questionnaire.cardStatus)?.iconColor }" />
                     {{ statusNumToName(questionnaire.cardStatus)?.title  }}
                 </span>
             </div>
@@ -66,12 +64,11 @@
 import peopleIcon from '@/assets/evaluateTeaching/people_icon.png'
 import timeIcon from '@/assets/evaluateTeaching/time_icon.png'
 import writeLineIcon from '@/assets/evaluateTeaching/write_line_icon.png'
-
 import onlineDektopIcon from '@/assets/evaluateTeaching/online_desktop.png'
 import questionnaireCardIcon from '@/assets/evaluateTeaching/questionnaire_card_icon.png'
-
 import scoreIcon from '@/assets/evaluateTeaching/score_icon.png'
 
+import RightCircle from '@/assets/evaluateTeaching/RightCircle.vue'
 
 
 interface QuestionnaireItm {
@@ -89,7 +86,8 @@ interface QuestionnaireItm {
 interface StatusItm {
   statusFlag:Number | String,
   title:String,
-  themeClass?:'used' | 'unused' | 'ongoing' | 'end' | String
+  themeClass?:'used' | 'unused' | 'ongoing' | 'end' | String,
+  iconColor?:string,
 }
 interface TypeItm {
   type:Number | String,
@@ -138,7 +136,8 @@ const statusNumToName=(status:String|Number|null|undefined)=>{
   }else{
     return {
       title:'',
-      themeClass:''
+      themeClass:'',
+      iconColor:'',
     }
   }
 }
@@ -233,38 +232,6 @@ const typeNumToName=(type:String|Number|null|undefined)=>{
                 display: flex;
                 align-items: center;
 
-                &::before {
-                    content: "";
-                    display: inline-block;
-                    width: 6px;
-                    height: 6px;
-                    border-radius: 50%;
-                    margin-right: 6px;
-                }
-
-                /* 已使用 (蓝色) */
-                &.used {
-                    color: #1890ff;
-                    &::before {
-                        background-color: #1890ff;
-                    }
-                }
-                /* 未使用 (灰色) */
-                &.unused,
-                &.end {
-                    color: #999;
-                    &::before {
-                        background-color: #ccc;
-                    }
-                }
-
-                &.ongoing {
-                    color: #2BC644;
-                    &::before {
-                        background-color: #2BC644;
-                    }
-                }
-
             }
         }
         .time_row {

+ 8 - 4
src/components/statusDict.ts

@@ -17,12 +17,14 @@ export const surveyManagementCardStatusMsg = [
     {
         statusFlag:0,
         title:'未使用',
-        themeClass:'unused'
+        themeClass:'unused',
+        iconColor:'#999999'
     },
     {
         statusFlag:1,
         title:'已使用',
-        themeClass:'used'
+        themeClass:'used',
+        iconColor:'#2E64FA'
     },
 ]
 
@@ -57,12 +59,14 @@ export const reviewManageCardStatusMsg = [
     {
         statusFlag:1,
         title:'进行中',
-        themeClass:'ongoing'
+        themeClass:'ongoing',
+        iconColor:'#2BC644'
     },
     {
         statusFlag:2,
         title:'已结束',
-        themeClass:'end'
+        themeClass:'end',
+        iconColor:'#999999'
     },
 ]
 

+ 15 - 1
src/views/reviewManagement/ReviewManagement.vue

@@ -14,7 +14,10 @@
                             @searchChange="HandleSearchChange"></FormSearchGroup>
                     </div>
                     <div class="conent_right">
-                        <el-button class="button_background" @click="OpenQuestionnaireDialog">创建评价</el-button>
+                        <el-button class="button_background" @click="OpenQuestionnaireDialog">
+                            <img :src="questionnaireCardUploadFileIcon" alt="">
+                            创建评价
+                        </el-button>
                     </div>
                 </div>
             </div>
@@ -168,6 +171,9 @@ import { questionnaireTableColumns } from './table';
 
 import { formDialogItmList } from './formDialog'
 
+import questionnaireCardUploadFileIcon from '@/assets/evaluateTeaching/questionnaire_card_upload_file_icon.png'
+
+
 interface QuestionnaireItm {
     id:Number | String,
     evaluationName:String,  //标题
@@ -496,6 +502,14 @@ onMounted(async()=>{
     }
 }
 
+.conent_right{
+    :deep(.el-button){
+        img{
+            margin-right: 4px;
+        }
+    } 
+}
+
 :deep(.box_tab){
    .selected{
         &.prefix{

+ 12 - 11
src/views/surveyManagement/CreateQuestionnaire.vue

@@ -27,7 +27,7 @@
                         <template v-for="typeItm in statisticQuestionType" :key="typeItm.value">
                             <el-button class="button_refresh" 
                                         @click="CheckedQuestionType(typeItm.value)" >
-                                <img :src="typeItm.icon" alt="">
+                                <component :is="typeItm.icon"  class="img_icon"></component>
                                  {{ typeItm.label }}
                             </el-button>
                         </template>
@@ -41,7 +41,7 @@
                         <template v-for="typeItm in scoredQuestionType" :key="typeItm.value">
                             <el-button class="button_refresh"
                                      @click="CheckedQuestionType(typeItm.value)">
-                                <img :src="typeItm.icon" alt="">
+                                <component :is="typeItm.icon" ></component>
                                  {{ typeItm.label }}
                             </el-button>
                         </template>
@@ -629,7 +629,7 @@ onMounted(async ()=>{
                 flex-direction: column;
                 gap: 16px;
                                 
-                .el-button {
+                :deep(.el-button) {
                     display: flex;
                     justify-content: flex-start;
                     align-items: center;
@@ -637,19 +637,20 @@ onMounted(async ()=>{
                     margin: 0;
                     font-size: 14px;
                     color:#666666;
-                    img{
-                        vertical-align: middle;
-                        width: 14px;
-                        height: 14px;
-                        border-radius: 50%;
-                        margin-right: 8px;
-                        position: relative;
+                    >span{
+                        display: flex;
+                        justify-content: flex-start;
+                        align-items: center;
+                        gap:8px;
                     }
+                 
                     &:hover{
                         color:#2E64FA;
                         border:solid #2E64FA 1px;
+                        .img_icon{
+                            --icon-color:#2E64FA;
+                        }
                     }
-                    
                 }
             }
         }

+ 12 - 4
src/views/surveyManagement/SurveyManagement.vue

@@ -12,7 +12,10 @@
                         />
                     </div>
                     <div class="conent_right">
-                        <el-button class="button_background" @click="GoToCreateQuestionnaire">创建问卷</el-button>
+                        <el-button class="button_background" @click="GoToCreateQuestionnaire">
+                            <img :src="questionnaireCardUploadFileIcon" alt="">
+                            创建问卷
+                        </el-button>
                     </div>
                 </div>
             </div>
@@ -100,16 +103,17 @@ import { useRouter } from 'vue-router';
 import Table from '@/baseComponents/Table.vue';
 import TabSearch from '@/baseComponents/TabSearch.vue';
 import TableRowStatus from '@/baseComponents/TableRowStatus.vue';
-
 import QuestionnaireCard from '@/components/questionnaireCard/QuestionnaireCard.vue';
 
 import { getQuestionnaireListApi , copyQuestionnaireApi,deleteQuestionnaireApi} from '@/api/surveyManagement'
 
-
 import { viewModeTabList } from './tabSearch';  //视图项配置
 import { questionnaireTableColumns } from './table';
 import {surveyManagementCardStatusMsg,surveyManagementRowStatusConvert} from '@/components/statusDict'
 
+import questionnaireCardUploadFileIcon from '@/assets/evaluateTeaching/questionnaire_card_upload_file_icon.png'
+
+
 
 
 import { ElMessage } from 'element-plus';
@@ -248,7 +252,11 @@ onMounted(async()=>{
     }
 }
 
-
+.el-button{
+    img{
+        margin-right: 4px;
+    }
+}
 
 
 

Some files were not shown because too many files changed in this diff