cpdm_pc/src/views/Scale.vue

<script setup lang="ts">
import CpmdHeader from '@/components/CpmdHeader.vue';
import { onMounted, onUnmounted, ref } from 'vue'
import { Check } from '@element-plus/icons-vue'
import { number } from 'echarts';
import { ElMessage } from 'element-plus';
//持久化设置 菜单状态
// import { menuStatusStore } from '@/stores'
// const menuStatus = menuStatusStore();
// menuStatus.saveActiveIndex('3')

const homeHeaderOut = ref<any>()

//获取到的题目数组
const scaleList = ref([
    {
        ti: '1.在学校做作业或者其他活动时，无法专注于细节的 部分或出现粗心的错误',
        radio: '没有；一点；常是；总是',
        isCheck: ''

    }, {
        ti: '2.在学校做作业或者其他活动时，无法专注于细节的 部分或出现粗心的错误',
        radio: '没有；一点；常是；总是',
        isCheck: ''
    }, {
        ti: '3.在学校做作业或者其他活动时，无法专注于细节的 部分或出现粗心的错误',
        radio: '没有；一点；常是；总是',
        isCheck: ''
    }, {
        ti: '4.在学校做作业或者其他活动时，无法专注于细节的 部分或出现粗心的错误',
        radio: '没有；一点；常是；总是',
        isCheck: ''
    }
])
//当前题的对象

//做过题的数组
const completeList = ref([])


//刚进页面时第几题
const topicIndex = ref<number>(1)

//下一题的方法
const nextTopic = () => {

    //判断当前索引下的数组中是否有isCheck为空
    //先判断这个是不是

    if (scaleList.value[topicIndex.value - 1].isCheck == '') {
        ElMessage({
            message: '请选择当前题目',
            type: "warning",
        })
        return
    }
    //判断当前是不是最后一题
    //如果是最后一题就不++了
    if (topicIndex.value == scaleList.value.length) {
        // ElMessage({
        //     message: '已经是最后一题了',
        //     type: "warning",
        // })
        return
    }
    topicIndex.value++

}
//上一题的方法
const lastTopic = () => {
    if (topicIndex.value == 1) {
        ElMessage({
            message: '已经是第一题了',
            type: "warning",
        })
        return
    }
    topicIndex.value--
}
//点击选中选项的事件
const radioFun = () => {
    console.log(JSON.stringify(scaleList.value))
    nextTopic()
}

//刚进入页面就将高度设置为页面需要的
onMounted(() => {

    //进到界面开始轮询
})
//界面销毁函数


//轮旋切换页面的方法



//退出页面销毁 方法
onUnmounted(() => {

})




</script>

<template>
    <div class="home_header_out" ref="homeHeaderOut">
        <div class=" home_header_inner">
            <CpmdHeader />
            <div class="report_top">
                <div class="report_jt">
                    <span>心灵万花筒</span>
                    <span class="des">请根据您的表现回答下列问题，每道题请选择最符合您的情况的选项。</span>
                </div>
                <img class="xlts_img" src="../assets/scale/scale.png" />
            </div>
            <el-progress :text-inside="true" :stroke-width="20" :percentage="(topicIndex / scaleList.length) * 100"
                color="#48D68E">
                <!-- <el-button type="success" :icon="Check" circle style='z-index: 10;' /> -->
                {{ topicIndex }}/{{ scaleList.length }}
            </el-progress>
        </div>
        <div class="kply">
            <div class="kply_inner">
                <div style="padding :20px 40px">
                    <div>
                        <div>{{ scaleList[topicIndex - 1].ti }}</div>
                        <!-- <div v-for="item in scaleList[topicIndex - 1].radio.split('；')">
                            {{ item }}
                        </div> -->
                        <el-radio-group v-model="scaleList[topicIndex - 1].isCheck">

                            <el-radio v-for="item in scaleList[topicIndex - 1].radio.split('；')" @change="radioFun"
                                :value="item" size="large" border>{{ item }}</el-radio>

                        </el-radio-group>
                        <div>
                            <div style="background-color: aqua;margin-bottom: 10px;" @click="lastTopic">上一题</div>
                            <div style="background-color: aqua;" @click="nextTopic">下一题</div>
                        </div>
                    </div>


                </div>

            </div>

        </div>

    </div>


</template>
<style lang="scss" scoped>
:deep(.el-progress-bar__outer) {
    background-color: #ffffff;
    border-radius: 100px;
    height: 6px;
    overflow: hidden;
    position: relative;
    vertical-align: middle;
}

.home_header_out {
    // position: relative;
    padding-bottom: 60px;
    width: 100%;
    min-width: 1200px;
    background-image: url('../assets/home/bg_ty.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-color: #FAFAFA; //估计是需要动态

    //获取屏幕宽度home_header_out 这个div的宽度--然后宽度*1000再除1920即为当前div的宽度
    .home_header_inner {
        min-height: 1;
        left: 0;
        right: 0;
        margin: auto;
        // height: 100px;
        width: 1200px;



        .report_top {
            margin-top: 50px;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 40px;

            .xlts_img {
                margin-right: 100px;
                width: 200px;
            }

            .report_jt {
                display: flex;
                flex-direction: column;
                font-size: 50px;
                font-weight: 700;
                letter-spacing: 3px;

                .des {
                    color: #888888;
                    // opacity: 0.4;
                    font-size: 20px;
                    letter-spacing: 0px;
                    margin-top: 10px;
                }
            }
        }
    }

    .kply {
        width: 100%;
        margin-top: 40px;
        // background-color: #FAFAFA;

        .kply_inner {
            border: 8px solid #B2F2D2;
            min-height: 500px;
            left: 0;
            right: 0;
            margin: auto;
            width: 1200px;
            // padding: 20px 20px;
            background-color: #ffffff;
            border-radius: 40px;
            // height: 1000px;

            // margin-bottom: 60px;
            .kepu_title {

                display: flex;
                flex-direction: row;
                justify-content: space-between;
                align-items: center;

                .kepu_title_des {
                    font-family: Alibaba PuHuiTi 2.0;
                    font-weight: 600;
                    font-size: 30px;
                    color: #000000;

                }

                .home_mid_plan_button {
                    width: 100%;
                    display: flex;
                    flex-direction: row;
                    justify-content: end;

                    // text-align: right;
                    .pub_button {
                        cursor: pointer;
                        // width: 100px;
                        border-radius: 12px;
                        border: 3px solid #48D68E;
                        color: #ffffff;
                        background-color: #000000;

                        padding: 8px 30px;
                        cursor: pointer;
                        display: flex;
                        align-items: center;
                    }
                }

            }

            .com_out {
                min-height: 500px;


                .com_title {
                    margin-top: 40px;
                    display: flex;
                    flex-direction: row;
                    align-items: center;

                    img {
                        width: 66px
                    }

                    .com_des {
                        margin-left: 5px;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                        height: 66px;

                        .com_name {

                            font-weight: normal;
                            font-size: 20px;
                            color: #222222;

                        }

                        .com_time {
                            font-weight: normal;
                            font-size: 16px;
                            color: #000000;
                            opacity: 0.4;

                        }

                    }


                }

                .com_content {
                    letter-spacing: 3px;
                    margin-top: 20px;
                    background-color: #F7F7F7;
                    padding: 10px 20px;
                    border-radius: 15px;
                    line-height: 24px;
                }

                .com_yan {

                    margin-top: 20px;
                    display: flex;
                    align-items: center;
                    justify-content: end;

                    span {
                        margin-left: 8px;
                    }
                }
            }
        }
    }


}



.home_mid {
    // background-color: blanchedalmond;
    width: 1200px;
    left: 0;
    right: 0;
    margin: auto;
    margin-top: 40px;
    // position: relative;




    .kepu_title {
        text-align: center;

        font-size: 50px;
        color: #111111;
        line-height: 95px;

        // width: 100%;
        // left: 0;
        // right: 0;
        // margin: auto
    }

    .kepu_title_sub {
        margin-top: 30px;
        text-align: center;
        font-size: 28px;
        color: #48D68E;
        line-height: 26px;
    }

    .man1_group {
        margin-top: 60px;
        height: 100%;
        display: flex;

        .man1 {
            position: relative;
            width: 327px;
            // height: 100%;

            // height: 100%
            .man1_img {
                position: absolute;
                bottom: 0;
                /* bottom: 0px; */
                /* height: auto; */
                width: 100%;
                left: 100px
            }

        }

        .des {
            border: #48D68E solid 5px;
            border-radius: 40px;
            padding: 20px;
            letter-spacing: 6px;
            flex: 1;

            .des_inner {
                border: 1px dashed #48D68E;
                border-radius: 40px;
                padding-bottom: 40px;
                padding-top: 30px;
                padding-left: 100px;
                padding-right: 20px;
                letter-spacing: 6px;
                font-weight: normal;
                font-size: 24px;
                color: #333333;
                line-height: 40px;
            }
        }
    }

    .man2_group {
        margin-top: 60px;
        height: 100%;
        display: flex;

        .man2 {
            position: relative;
            width: 327px;
            // height: 100%;

            // height: 100%
            .man2_img {
                position: absolute;
                bottom: 0;
                /* bottom: 0px; */
                /* height: auto; */
                width: 100%;
                left: -100px
            }

        }

        .des2 {
            border: #48D68E solid 5px;
            border-radius: 40px;
            padding: 20px;
            letter-spacing: 6px;
            flex: 1;

            .des2_inner {
                border: 1px dashed #48D68E;
                border-radius: 40px;
                padding-bottom: 40px;
                padding-top: 30px;
                padding-left: 20px;
                padding-right: 100px;
                letter-spacing: 6px;
                font-weight: normal;
                font-size: 24px;
                color: #333333;
                line-height: 40px;
            }
        }
    }

    .get_more {
        text-align: center;

        img {
            width: 300px;
            margin-top: 60px;
            margin-bottom: 60px;
        }
    }
}

// .home_footer_out {
//     width: 100%;
//     background-color: #000000;
// }</style>