艺术戏剧（选择题完成）

user1

2024-06-24 8ce5acd0a7a61de43cbd2d3d1ece2c6c9287779a

 src/components/choice/choice.vue

@@ -12,14 +12,14 @@
                        xmlns:xlink="http://www.w3.org/1999/xlink" width="170" height="170">
                        <path
                            d="M1299.772238 471.021724a366.045786 366.045786 0 0 0-97.270943-99.189942 379.484778 379.484778 0 0 0-29.436982-123.509928 398.682766 398.682766 0 0 0-89.591948-127.986925 405.722762 405.722762 0 0 0-133.107922-91.511946A409.56176 409.56176 0 0 0 794.859534 0.026 401.242765 401.242765 0 0 0 568.319667 67.85896a411.481759 411.481759 0 0 0-97.909943 91.511947 261.735847 261.735847 0 0 0-63.994962-7.679996 247.656855 247.656855 0 0 0-176.623897 71.033958 245.736856 245.736856 0 0 0-72.312957 202.860882 325.729809 325.729809 0 0 0-84.471951 72.953957A309.731819 309.731819 0 0 0 0.053 703.959588a311.010818 311.010818 0 0 0 97.269943 229.099865 323.80981 323.80981 0 0 0 231.659864 90.871947h660.418613a360.926789 360.926789 0 0 0 255.97585-104.949938 360.926789 360.926789 0 0 0 81.272953-116.469932 355.166792 355.166792 0 0 0 27.516984-138.866919 345.567798 345.567798 0 0 0-54.394969-192.622887z"
                            fill="rgb(245, 130, 32)" p-id="87383"></path>
                            fill="rgb(245, 130, 32)" :style="{ fill: primaryColor }" p-id="87383"></path>
                    </svg>
                    <svg v-else t="1718282816195" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="87529" xmlns:xlink="http://www.w3.org/1999/xlink"
                        width="170" height="170">
                        <path
                            d="M829.248 420.576C815.264 274.56 693.696 160 544 160c-115.808 0-214.944 68.736-260.672 167.36A142.72 142.72 0 0 0 240.032 320a144.032 144.032 0 0 0-144 144c0 15.808 3.168 30.752 7.872 44.928C42.048 544.992 0.032 611.168 0.032 687.936a208 208 0 0 0 208 208V896H784v-0.064c132.576 0 240-107.424 240-240 0-116.992-83.872-214.176-194.752-235.36zM784 831.936V832H208.032a144.256 144.256 0 0 1-144-144.064c0-51.2 26.976-97.44 72.128-123.744 43.872-25.184 46.88-30.176 28.48-75.424a78.56 78.56 0 0 1-4.608-24.736c0-44.128 35.872-80 80-80 0 0 20.992-1.504 43.296 7.36 36.704 14.624 40.704 0.64 58.048-37.088C378.08 275.168 457.6 224 544 224c115.2 0 210.432 87.136 221.568 202.688 3.936 45.824 3.936 45.824 51.68 56.736A175.872 175.872 0 0 1 960 655.936c0 97.056-78.944 176-176 176z"
                            fill="rgb(245, 130, 32)" p-id="87530"></path>
                            fill="rgb(245, 130, 32)" :style="{ fill: primaryColor }" p-id="87530"></path>
                    </svg>
                    <span class="option-text">{{ option.value }}、{{option.txt }}</span>
                </span>
@@ -42,10 +42,10 @@
        </div>
        <!-- 题目按钮部分 -->
        <div class="btn-button">
            <button v-if="currentIndex > 0" @click="prevQuestion">上一题</button>
            <button v-if="currentIndex < questions.length - 1" @click="nextQuestion">下一题</button>
            <button @click="resetQuestion">重做</button>
            <button @click="submitQuestion">提交</button>
            <button v-if="currentIndex > 0" @click="prevQuestion" :style="mergedStyles">上一题</button>
            <button v-if="currentIndex < questions.length - 1" @click="nextQuestion" :style="mergedStyles">下一题</button>
            <button @click="resetQuestion" :style="mergedStyles">重做</button>
            <button @click="submitQuestion" :style="mergedStyles">提交</button>
        </div>
    </div>
</template>
@@ -196,6 +196,7 @@
            choiceData: {
                isCorrect: false,
            },
            isPrimary: true,
        };
    },
    props: {
@@ -203,11 +204,36 @@
            type: Array,
            required: true
        },
        primaryColor: {
            type: String,
            default: "#F58220",
        },
        hoverBackgroundColor: {
            type: String,
            default: 'rgb(245, 130, 32)' // 默认值  
        },
        hoverColor: {
            type: String,
            default: 'white' // 默认值  
        }
    },
    computed: {
        currentQuestion() {
            return this.questions[this.currentIndex];
        },
        setHoverStyles() {
            return {
                '--hover-bg-color': this.hoverBackgroundColor,
                '--hover-color': this.hoverColor
            };
        },
        mergedStyles() {
            // 合并直接样式和计算属性样式  
            return {
                borderColor: this.primaryColor,
                ...this.setHoverStyles
            };
        }
    },
    methods: {
        toggleOption(index) {
@@ -217,7 +243,6 @@
                // 多选时切换选中状态 
                console.log(this.selectedOptions, index)
                const isAlreadySelected = this.selectedOptions.includes(index);

                if (isAlreadySelected) {
                    this.selectedOptions = this.selectedOptions.filter(i => i !== index);
                } else {
@@ -225,6 +250,10 @@
                }
             
            }
        },
        getOptionColor(index) {
            // 根据选项是否被选中返回相应的颜色  
            return this.optionColors[index] || this.defaultColor; // 如果没有设置颜色，则返回默认颜色  
        },
        getSelectedOptions() {
            return this.selectedOptions.map(index => {
@@ -386,11 +415,13 @@
}

.btn-button>button:hover {
    background-color: rgb(245, 130, 32);
    /* 鼠标悬停时背景色变为红色 */
    color: white;
    /* 鼠标悬停时字体颜色变为白色 */
    /* 其他你想要的悬停样式... */
    // background-color: rgb(245, 130, 32);
    // /* 鼠标悬停时背景色变为红色 */
    // color: white;
    // /* 鼠标悬停时字体颜色变为白色 */
    // /* 其他你想要的悬停样式... */
    background-color: var(--hover-bg-color);
    color: var(--hover-color);
}

.active {