cpdm_pc/src/views/1.vue

<script setup lang="ts">
import CpmdHeader from '@/components/CpmdHeader.vue';
import { onMounted, onUnmounted, ref } from 'vue'
import { menuStatusStore, userInfoStore } from '@/stores'
import { useRouter } from 'vue-router'
import { userPlanApi } from '@/api/home';
const userInfo = userInfoStore()
const router = useRouter()
const menuStatus = menuStatusStore();
menuStatus.saveActiveIndex('1')

//点击查看更多展开科普乐园的标志
const moreFlag = ref<boolean>(false)

const homeHeaderOut = ref<any>()
const height = ref<number>()
//心灵探索高度
const xlts = ref<number>()

//计划提醒的高度
const plan_jihua = ref<number>()

//显示标题及文本的标志
const flag_text = ref<number>(1)
//定时器标志
const flag_time = ref<any>()

//测试任务显示图标  圆图标
const taskCircleFlag = ref<boolean>(true)

//打开任务去看看
const openSquare = () => {
    // taskSequareFlag.value = true
    goView()
}
//点击关闭按钮触发
const closeSquare = () => {
    taskSequareFlag.value = false
}
//点击按钮去看看触发
const goView = () => {
    //应该跳转到测试计划页面
    router.push({ name: 'plan' })
}
//点击查看更多==跳转到科普乐园
const goMore = () => {
    //点击查看更多跳转到科普乐园
    // router.push({ name: 'popularizationScience' })
    //查看更多
    moreFlag.value = true;

}

//点击圆型图标--显示任务--去看看
const taskSequareFlag = ref<boolean>(false)


//刚进入页面就将高度设置为页面需要的
onMounted(() => {
    setHeight()
    window.addEventListener('resize', setHeight);
    forStatus()
    planNumGet()
    //进到界面开始轮询
})


//界面销毁函数


//轮旋切换页面的方法
const forStatus = () => {
    clearInterval(flag_time.value)
    // flag_text.value == 2
    flag_time.value = setInterval(() => {
        flag_text.value = flag_text.value + 1
        if (flag_text.value > 4) {
            flag_text.value = 1

        }


    }, 3000)
}

const setHeight = () => {
    //-------设置背景图的高度---------//
    const width = homeHeaderOut.value
    height.value = width.offsetWidth * 1000 / 1920
    xlts.value = height.value - 100
    plan_jihua.value = height.value + 100
}
//退出页面销毁 方法
onUnmounted(() => {
    clearInterval(flag_time.value)
    window.removeEventListener('resize', setHeight)
})

//鼠标移入事件--状态进行切换
const brightStatus = (val: number) => {
    clearInterval(flag_time.value)
    flag_text.value = val
}

//鼠标移出事件事件--调用轮询器
const brightStatusLevel = () => {
    forStatus()
}



//获取计划剩余多少个正在进行的
//isHaveManage//
//先判断是否登录
const planNumGet = async () => {
    //如果在就是登录了
    if (userInfo.token) {
        let userNo = ''
        //登录的话
        //判断当前是否有后台管理

        userNo = userInfo.userInfo.userNo

        //调用根据用户查询计划的API
        let res: any = await userPlanApi(userNo)
        if (res.data.length > 0) {
            taskCircleFlag.value = true
        } else {
            taskCircleFlag.value = false
        }
        userInfo.savePlanCurrentNum(res.data.length)

    }
}
</script>

<template>
    <div class="home_header_out" ref="homeHeaderOut">
        <div class="home_reset">
            <div class="home_header_inner">
                <CpmdHeader />
                <!-- <div :style="{ height: xlts + 'px' }"></div> -->
                <!-- <div :style="{ height: xlts + 'px' }"> -->
                <!-- style="padding-top:40px" -->
                <div class="home_header_inner_one">
                    <img class="xlts_img" src="../assets/home/home_text.png" />
                    <div class="chart_student">
                        <div class="student1_group">
                            <img class="student1_text" v-show="flag_text == 1" src="../assets/home/student1_text.png" />
                            <img class="student1" v-on:mouseenter="brightStatus(1)" v-on:mouseleave="brightStatusLevel"
                                v-show="flag_text !== 1" src="../assets/home/student1_default.png" />
                            <img class="student1" v-on:mouseenter="brightStatus(1)" v-on:mouseleave="brightStatusLevel"
                                v-show="flag_text == 1" src="../assets/home/student1_active.png" />
                        </div>
                        <div class="student2_group">
                            <img class="student2_text" v-show="flag_text == 2" src="../assets/home/student2_text.png" />
                            <img class="student2" v-on:mouseenter="brightStatus(2)" v-on:mouseleave="brightStatusLevel"
                                v-show="flag_text !== 2" src="../assets/home/student2_default.png" />
                            <img class="student2" v-on:mouseenter="brightStatus(2)" v-on:mouseleave="brightStatusLevel"
                                v-show="flag_text == 2" src="../assets/home/student2_active.png" />
                        </div>

                        <img class="student3_text" v-show="flag_text == 3" src="../assets/home/student3_text.png" />
                        <img class="student3" v-on:mouseenter="brightStatus(3)" v-on:mouseleave="brightStatusLevel"
                            v-show="flag_text !== 3" src="../assets/home/student3_default.png" />
                        <img class="student3" v-on:mouseenter="brightStatus(3)" v-on:mouseleave="brightStatusLevel"
                            v-show="flag_text == 3" src="../assets/home/student3_active.png" />

                        <img class="student4_text" v-show="flag_text == 4" src="../assets/home/student4_text.png" />
                        <img class="student4" v-on:mouseenter="brightStatus(4)" v-on:mouseleave="brightStatusLevel"
                            v-show="flag_text !== 4" src="../assets/home/student4_default.png" />
                        <img class="student4" v-on:mouseenter="brightStatus(4)" v-on:mouseleave="brightStatusLevel"
                            v-show="flag_text == 4" src="../assets/home/student4_active.png" />
                    </div>
                </div>
            </div>

        </div>

        <!-- <div class="home_mid_plan_des" v-show="taskSequareFlag">
      <div class="home_mid_plan_close">
        <img style="right:0" width="20px" src="../assets/home/close.png" @click="closeSquare" />
      </div>

      <div class="home_mid_plan_title">测试任务</div>
      <div class="home_mid_plan_d">你的<span class="home_mid_plan_font">测试计划</span>中有新的<span
          class="home_mid_plan_font">测试任务</span>，赶紧点击下方按钮去看看吧！
      </div>
      <div class="home_mid_plan_button">
        <div class="see_button" @click="goView">去看看</div>
      </div>
    </div> -->
        <div class="home_mid">
            <div class="kepu_title">科普小课堂</div>
            <div class="kepu_title_sub">心灵成长不迷茫，科普小课堂为你点亮前行的方向</div>
            <div class="man1_group">
                <div class="man1">
                    <img class="man1_img" src="../assets/home/people1.png" />
                </div>
                <div class="des">
                    <div class="des_inner">
                        &nbsp;&nbsp;&nbsp;&nbsp;大学生的焦虑情绪往往源自多重压力的叠加效应，其中学业负担与未来职业的不确定性占据主导地位。
                        一方面，大学教育的高标准与快节奏，如繁重的课程任务、竞争激烈的考试、科研项目的压力，以及对学术成就的追求,
                        都无形中增加了学生的心理负担，让他们时常处于紧张与不安之中。另一方面，步入社会的临近，使得就业市场的严酷现实成为心头大石，
                        学生们担忧自己的能力是否足够，能否在毕业后顺利找到理想工作，这种对未来的不确定感进一步加剧了焦虑情绪。
                    </div>

                </div>
            </div>
            <div class="man2_group">

                <div class="des2">
                    <div class="des2_inner">
                        &nbsp;&nbsp;&nbsp;&nbsp;
                        失眠，对于许多大学生而言，已成为一种常见的困扰，它不仅影响睡眠质量，还可能波及到日常的学习效率与生活质量。
                        究其原因，多重因素交织其中。首先，学业压力无疑是首当其冲的罪魁祸首。
                        大学生活充满了挑战，无论是课程作业的紧迫、考试复习的重负，还是科研项目的压力，都可能让学生陷入焦虑与紧张之中，这种心理状态直接转化为夜晚辗转反侧的失眠。
                        其次，快节奏的生活方式与不规律的作息习惯也难辞其咎。深夜赶工、晨早赶课，加上社交媒体与电子产品的诱惑，打乱了生物钟的正常节律，使身体难以在需要的时候自然进入睡眠状态。
                        再者，生活环境的噪音与光线污染，或是室友的作息差异，也可能成为影响睡眠质量的外部因素。
                    </div>

                </div>
                <div class="man2">
                    <img class="man2_img" src="../assets/home/people2.png" />
                </div>
            </div>
            <div class="man1_group">
                <div class="man1">
                    <img class="man1_img" src="../assets/home/people3.png" />
                </div>
                <div class="des">
                    <div class="des_inner">
                        &nbsp;&nbsp;&nbsp;&nbsp;刚刚步入大学校园的萌新们，是不是感觉到有些迷茫？
                        刚刚步入大学，周围的一切都充满了未知与惊喜，你可能会觉得有点晕头转向，就像是第一次迷路在了巨大的游乐场里。面对全新的环境、自由的时间管理以及未来的不确定性，感到迷茫是非常正常的情绪反应。
                        这是人生旅程中的一个重要转折点，意味着你需要从高中时期的被指导模式过渡到自主学习和自我管理的新阶段。
                    </div>

                </div>
            </div>
            <div v-show="!moreFlag" class="get_more">
                <img src="../assets/home/get_more.png" @click="goMore" />
            </div>
            <div v-show="moreFlag">
                <div class="kepu_title_more" style="text-align: left;">
                    <div class="kepu_title_des">
                        失眠抑郁问题科普
                    </div>
                    <!-- <div>
            <img src="../assets/kepu/title_right.png" />
          </div> -->
                </div>
                <div class="kply_inner_duan1">
                    &nbsp; &nbsp; &nbsp;对于患有抑郁症的人群并不在少数，每一个人或多或少都会有纠结的时候，
                    所以为了预防和及时了解自己的情况，医学界给出来很多测量方式，
                    像最常见的自我测量答题表，专业的他测量表，以及日常行为的观察，就变得极其普遍和有效。（示例）
                </div>
                <div class="kply_inner_duan1">
                    &nbsp; &nbsp; &nbsp;睡眠监测适用于各种睡眠障碍相关性疾病的诊断，比如失眠症、发作性睡病、
                    阻塞性睡眠呼吸暂停综合征、不安腿综合征等。睡眠监测仪器主要包括脑电图仪、
                    眼动图仪、肌电图仪等，需要进行睡眠检测的患者可以在医生的帮助下，将检查仪器穿戴完毕，然后入睡。
                </div>

                <img width="100%" style="margin-top:40px;" src="../assets/kepu/bg1.png" />

                <div class="kply_inner_duan1">
                    &nbsp; &nbsp; &nbsp;对于患有抑郁症的人群并不在少数，每一个人或多或少都会有纠结的时候，
                    所以为了预防和及时了解自己的情况，医学界给出来很多测量方式，
                    像最常见的自我测量答题表，专业的他测量表，以及日常行为的观察，就变得极其普遍和有效。（示例）
                </div>
                <div class="kply_inner_duan1">
                    &nbsp; &nbsp; &nbsp; 睡眠监测适用于各种睡眠障碍相关性疾病的诊断，比如失眠症、发作性睡病、
                    阻塞性睡眠呼吸暂停综合征、不安腿综合征等。睡眠监测仪器主要包括脑电图仪、
                    眼动图仪、肌电图仪等，需要进行睡眠检测的患者可以在医生的帮助下，将检查仪器穿戴完毕，然后入睡。
                </div>

                <img width="100%" style="margin-top:40px;" src="../assets/kepu/bg2.png" />

            </div>
            <div class="home_mid_plan" v-show="taskCircleFlag && userInfo.planCurrentNum != 0" @click="openSquare"
                ref="plan_jihua">
                <div class=" badge_custom">
                    {{ userInfo.planCurrentNum }}
                </div>
                <img src="../assets/home/jihua_img.png" />
            </div>
        </div>
    </div>

</template>
<style lang="scss" scoped>
.badge_custom {
    position: absolute;
    background-color: #ED2626;
    // left: 90px;
    right: 0;
    top: 0px;
    height: 30px;
    width: 30px;
    line-height: 30px;
    text-align: center;
    // line-height: 18px;
    color: 10px;
    padding: 8px;
    font-weight: 300;
    font-size: 16px;
    color: #ffffff;
    border-radius: 30px;
}



.home_header_out {
    flex: 1;
    position: relative;
    width: 100%;
    min-width: 1200px;
    // height: 100vh;
    // background-color: rgb(151, 163, 202);
    // height: 600px;
    // background-image: url('../assets/home/header_bg.png');
    // background-repeat: no-repeat;
    // background-size: auto 100vh;
    // background-size: cover;
    // background-position: center;
    // background-size: contain;

    // height: 106.667vw;
    // height: 41.667vw;
    // height: calc(100% * 1000px / 1920px);
    // height: calc(100vmax * 1000px / 1920px);
    //估计是需要动态
    //获取屏幕宽度home_header_out 这个div的宽度--然后宽度*1000再除1920即为当前div的宽度
    .home_reset {
        width: 100%;
        height: 100vh;
        background-image: url('../assets/home/header_bg.png');
        background-size: cover;

    }

    .home_mid_plan_des {
        border-top-left-radius: 30px;
        padding: 10px 5px 20px 10px;
        position: absolute;
        right: 0;
        // bottom: 26px;
        bottom: 0;
        width: 600px;
        background-color: #ffffff;

        .home_mid_plan_close {
            cursor: pointer;
            text-align: right;
        }

        .home_mid_plan_title {
            height: 38px;
            font-weight: normal;
            font-size: 20px;
            font-weight: 700;
            color: #000000;
            // line-height: 95px;
        }

        .home_mid_plan_d {
            height: 38px;
            font-weight: normal;
            font-size: 16px;
            font-weight: 500;
            color: #000000;

            // line-height: 95px;
            .home_mid_plan_font {
                color: #48D68E
            }
        }

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

            .see_button {
                cursor: pointer;
                // width: 100px;
                border-radius: 12px;
                border: 3px solid #48D68E;
                color: #ffffff;
                background-color: #000000;
                margin-right: 20px;
                padding: 8px 30px;
                cursor: pointer;
                display: flex;
                align-items: center;
            }
        }

    }



    .home_header_inner {
        // position: absolute;
        //需要水平居中
        // top: 0;
        // bottom: 0;
        height: 100vh;
        min-height: 1;
        left: 0;
        right: 0;
        margin: auto;
        // height: 100px;
        width: 1200px;

        .home_header_inner_one {
            height: calc(100vh - 80px);

            .xlts_img {
                padding-top: 40px;
                height: calc(36% - 40px) //还剩百分之64%
                    // width: 100%;
            }

            .chart_student {
                height: 64%;
                position: relative;

                .student1_group {
                    position: absolute;
                    bottom: 50%;
                    left: 22%;
                    height: 200px;
                    width: 200px;

                    .student1 {
                        cursor: pointer;
                        position: absolute;
                        bottom: -62%;
                        left: -8%;
                        height: 52%;
                    }

                    .student1_text {
                        cursor: pointer;
                        position: absolute;
                        bottom: -42%;
                        left: -86%;
                        height: 80%;
                    }
                }


                .student2_group {
                    position: absolute;
                    bottom: 27%;
                    left: 34%;
                    height: 200px;
                    width: 200px;

                    .student2 {
                        cursor: pointer;
                        position: absolute;

                        bottom: -1%;
                        left: 72%;
                        height: 76%;
                    }

                    .student2_text {
                        cursor: pointer;
                        position: absolute;
                        bottom: 60%;

                        left: -8%;
                        height: 77%;
                    }
                }


                .student3 {
                    cursor: pointer;
                    position: absolute;
                    bottom: 6%;
                    left: 62%; // w
                    height: 40%;
                }

                .student3_text {
                    cursor: pointer;
                    position: absolute;
                    bottom: 44%;
                    left: 61%;
                    height: 40%;
                }

                .student4 {
                    cursor: pointer;
                    position: absolute;
                    bottom: 30%;
                    left: 89%; // w
                    height: 40%;
                }

                .student4_text {
                    cursor: pointer;
                    position: absolute;
                    bottom: 61%;
                    left: 89%;
                    height: 40%;
                }
            }

        }




    }
}

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

    // .home_mid_plan {
    //   z-index: 111;
    //   cursor: pointer;
    //   // top: 1000px;
    //   position: fixed;
    //   width: 100%;
    //   height: 200px;
    //   top: 10px;

    //   bottom: 0px;

    //   left: 0px;

    //   right: 0px;
    //   // right: 200px;

    //   // top: -30px;
    //   img {
    //     width: 100px;
    //   }
    // }



    .kepu_title {
        text-align: center;

        font-size: 30px;
        color: #111111;
        line-height: 40px;
        display: block;
        margin-top: 40px;

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

    .kepu_title_sub {
        margin-top: 20px;
        text-align: center;
        font-size: 20px;
        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: 20px;
                padding-left: 100px;
                padding-right: 20px;
                letter-spacing: 6px;
                font-weight: normal;
                font-size: 18px;
                color: #333333;
                line-height: 30px;
            }
        }
    }

    .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: 20px;
                padding-left: 20px;
                padding-right: 100px;
                letter-spacing: 6px;
                font-weight: normal;
                font-size: 19px;
                color: #333333;
                line-height: 30px;
            }
        }
    }

    .get_more {
        text-align: center;

        img {
            width: 150px;
            margin-top: 20px;
            // margin-bottom: 20px;
        }
    }
}

.home_footer_out {
    width: 100%;
    background-color: #000000;
}

.home_mid_plan {
    z-index: 1;
    cursor: pointer;
    // top: 1000px;
    position: fixed;
    width: 100px;
    height: 100px;
    top: 0;


    right: 0;
    margin: auto;

    img {
        width: 100px;
    }
}


.kepu_title_more {
    margin-top: 20px;

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

    .kepu_title_des {
        // width: 406px;
        // font-family: Alibaba PuHuiTi 2.0;
        // font-weight: 600;
        font-size: 30px;
        // color: #48D68E;
        margin-bottom: 20px;
    }

    img {
        width: 480px;
    }
}

.kply_inner_duan1 {
    margin-top: 0px;
    // font-family: Alibaba PuHuiTi 2.0;
    font-weight: normal;
    font-size: 18px;
    color: #333333;
    line-height: 30px;
    letter-spacing: 6px;

}
</style>