|
|
@@ -0,0 +1,720 @@
|
|
|
+<script setup lang="ts">
|
|
|
+import CpmdHeader from '@/components/CpmdHeader.vue';
|
|
|
+import CpmdFooter from '@/components/CpmdFooter.vue'
|
|
|
+import CpmdQuestionnaire from '@/components/CpmdQuestionnaire.vue'
|
|
|
+import { onMounted, onUnmounted, ref } from 'vue'
|
|
|
+import { menuStatusStore, userInfoStore } from '@/stores'
|
|
|
+import { useRouter } from 'vue-router'
|
|
|
+import { getUnread, planNumGet } from '../utils/test'
|
|
|
+import { queryIsQuestionApi, userPlanApi } from '@/api/home';
|
|
|
+const userInfo = userInfoStore()
|
|
|
+const router = useRouter()
|
|
|
+const menuStatus = menuStatusStore();
|
|
|
+menuStatus.saveActiveIndex('1')
|
|
|
+
|
|
|
+//是否需要做问卷调查
|
|
|
+const isNeed = ref<boolean>(false)
|
|
|
+//planId
|
|
|
+//需要问卷调查的计划ID
|
|
|
+const planId = ref<string>('')
|
|
|
+//调用子组件的ref
|
|
|
+const question = ref<any>()
|
|
|
+
|
|
|
+//点击查看更多展开科普乐园的标志
|
|
|
+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()
|
|
|
+ question.value.open(planId.value, '0')
|
|
|
+}
|
|
|
+//点击关闭按钮触发
|
|
|
+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()
|
|
|
+ getUnread()
|
|
|
+ planNumGet()
|
|
|
+ queryIsQuestion()
|
|
|
+ //查询是否需要填写问卷调查
|
|
|
+
|
|
|
+ //进到界面开始轮询
|
|
|
+})
|
|
|
+
|
|
|
+//
|
|
|
+const queryIsQuestion = async () => {
|
|
|
+ //判断用户是否登录
|
|
|
+ if (userInfo.token) {
|
|
|
+ let res: any = await queryIsQuestionApi()
|
|
|
+ planId.value = res.data;
|
|
|
+ if (planId.value == null) {
|
|
|
+ //设置标识不显示
|
|
|
+ isNeed.value = false
|
|
|
+ } else {
|
|
|
+ //设置标志显示
|
|
|
+ isNeed.value = true
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+//界面销毁函数
|
|
|
+
|
|
|
+
|
|
|
+//轮旋切换页面的方法
|
|
|
+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 = () => {
|
|
|
+ console.log('----------------------------------------------')
|
|
|
+ //-------设置背景图的高度---------//
|
|
|
+ const width = homeHeaderOut.value
|
|
|
+ height.value = width.offsetWidth * 1000 / 1920
|
|
|
+ xlts.value = height.value - 80
|
|
|
+ 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 father = () => {
|
|
|
+ queryIsQuestion()
|
|
|
+}
|
|
|
+//鼠标移出事件事件--调用轮询器
|
|
|
+const brightStatusLevel = () => {
|
|
|
+ forStatus()
|
|
|
+}
|
|
|
+
|
|
|
+//进来查看需不需要做问卷调查
|
|
|
+//查看是否需要测试
|
|
|
+
|
|
|
+//获取计划剩余多少个正在进行的
|
|
|
+//isHaveManage//
|
|
|
+//
|
|
|
+//先判断是否登录
|
|
|
+
|
|
|
+</script>
|
|
|
+
|
|
|
+<template>
|
|
|
+ <div class="home_header_out" ref="homeHeaderOut">
|
|
|
+
|
|
|
+ <!-- <video src="../assets/video/background.mp4" autoplay loop muted preload="true"
|
|
|
+ style="width: 100%;height: 100vh;object-fit: fill;position: absolute;z-index: -1;"></video> -->
|
|
|
+
|
|
|
+ <div class="home_header_inner">
|
|
|
+ <CpmdHeader />
|
|
|
+ <!-- <img src=" ../assets/home/grouo_yuan.png" alt="" style="width: 50%;margin-top: 20vh;"> -->
|
|
|
+ <div class="img_xf"></div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="home_mid">
|
|
|
+ <div style="text-align: center;">
|
|
|
+ <!-- <a href="https://work.weixin.qq.com/kfid/kfc5b0b163cebb4cbda" target="_blank" rel="noopener noreferrer">微信客服</a> -->
|
|
|
+ <!-- <img src="../assets/home/group_zc.png" style="width: 30vw;margin-bottom: 55px;" alt=""> -->
|
|
|
+ <div style="display: flex;flex-direction: column;align-items: center;padding-top: 20px;">
|
|
|
+ <img width="400px" src="../assets/home/fenge.png" alt="">
|
|
|
+ <span class="zc_des">职场心理问题频发</span>
|
|
|
+ </div>
|
|
|
+ <div style="margin-top:20px;color:#818996">工作压力逐渐成为每个人都无法回避的现实问题，这种压力</div>
|
|
|
+ <div style="color:#818996">往往会引发一系列心理问题。</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <el-carousel :interval="114000" type="card" indicator-position="outside" style="flex: 1;">
|
|
|
+ <el-carousel-item v-for="item in 3" :key="item">
|
|
|
+ <!-- <div>
|
|
|
+ <img src="../assets/home/group_slide_1.png" v-if="item == 1" style="object-fit: contain;" />
|
|
|
+ <img src="../assets/home/group_slide_2.png" v-if="item == 2" style="object-fit: contain;" />
|
|
|
+ <img src="../assets/home/group_slide_3.png" v-if="item == 3" style="object-fit: contain;" />
|
|
|
+ </div> -->
|
|
|
+ <div v-if="item == 1" class="home_mid_img_one">
|
|
|
+ <!-- <img src="../assets/home/group_slide_1.png" v-if="item == 1" style="object-fit: contain;" /> -->
|
|
|
+ </div>
|
|
|
+ <div v-if="item == 2" class="home_mid_img_two">
|
|
|
+
|
|
|
+ <!-- <img src="../assets/home/group_slide_2.png" v-if="item == 2" style="object-fit: contain;" /> -->
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div v-if="item == 3" class="home_mid_img_three">
|
|
|
+
|
|
|
+ <!-- <img src="../assets/home/group_slide_3.png" v-if="item == 3" style="object-fit: contain;" /> -->
|
|
|
+ </div>
|
|
|
+ </el-carousel-item>
|
|
|
+ </el-carousel>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="home_two">
|
|
|
+ <!-- <div style="text-align: center;"><img src="../assets/home/group_two.png" style="width: 30vw;margin-bottom: 55px;"
|
|
|
+ alt="">
|
|
|
+ </div> -->
|
|
|
+
|
|
|
+ <div style="text-align: center;">
|
|
|
+ <!-- <img src="../assets/home/group_zc.png" style="width: 30vw;margin-bottom: 55px;" alt=""> -->
|
|
|
+ <!-- <div>
|
|
|
+ <span class="zc_des"></span>
|
|
|
+ </div> -->
|
|
|
+ <div style="display: flex;flex-direction: column;align-items: center;padding-top: 20px;">
|
|
|
+ <img width="400px" src="../assets/home/fenge.png" alt="">
|
|
|
+ <span class="zc_des">职业心理健康需要引起重视</span>
|
|
|
+ </div>
|
|
|
+ <div style="margin-top:20px;color:#818996;margin-bottom: 40px;">健康、和谐的工作环境需要个人、企业和社会的共努力。</div>
|
|
|
+ <!-- <div style="color:#818996">往往会引发一系列心理问题。</div> -->
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ <div style="display: flex; justify-content: space-around;">
|
|
|
+ <div class="home_two_img">
|
|
|
+ <img src="../assets/home/group_six2.png"
|
|
|
+ style="width: 500px;height: 30vh;object-fit: cover;object-position: center;" alt="">
|
|
|
+ <div class="home_two_des">如果在工作中感到压力过大或情绪低落时，应及时与家人、领导沟通，寻求支持和理解。在自我调节的基础上 做到多休息，健康饮食，避免这些身心问题持续加重，
|
|
|
+ 进而对工作和生活造成负面影响。</div>
|
|
|
+ </div>
|
|
|
+ <div class="home_two_img">
|
|
|
+ <img src="../assets/home/group_senven1.png" alt=""
|
|
|
+ style="width: 500px;height: 30vh;object-fit: cover;object-position: center;">
|
|
|
+ <div class="home_two_des">
|
|
|
+ 对公司来说，关注员工的心理健康并积极进行心理疏导，制定合理的休假制度，不仅能激发员工更高的工作热情和创造力，还能确保员工在面对挑战时具备更强的韧性和适应力</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="home_two">
|
|
|
+
|
|
|
+ <div style="text-align: center;">
|
|
|
+ <!-- <img src="../assets/home/group_zc.png" style="width: 30vw;margin-bottom: 55px;" alt=""> -->
|
|
|
+ <!-- <div>
|
|
|
+ <span class="zc_des3">工作虽苦，解压有道</span>
|
|
|
+ </div> -->
|
|
|
+ <div style="display: flex;flex-direction: column;align-items: center;padding-top: 20px;">
|
|
|
+ <img width="400px" src="../assets/home/fenge.png" alt="">
|
|
|
+ <span class="zc_des3">职业心理健康需要引起重视</span>
|
|
|
+ </div>
|
|
|
+ <div style="margin-top:20px;color:#818996;">养成定期自我评估的习惯，关注自身的心理状态变化，适时</div>
|
|
|
+ <div style="color:#818996;margin-bottom: 40px;">进行调整，在忙碌的工作中找到身与心的平衡。</div>
|
|
|
+ <!-- <div style="color:#818996">往往会引发一系列心理问题。</div> -->
|
|
|
+ </div>
|
|
|
+ <div style="display: flex; justify-content: space-around;position: relative;">
|
|
|
+ <div class="home_two_img">
|
|
|
+ <img src="../assets/home/group_senven1.png" alt=""
|
|
|
+ style="width: 500px;height: 30vh;object-fit: cover;object-position: center;">
|
|
|
+ <div class="home_two_des">
|
|
|
+ 通过持续的自我监测和专业的评估工具，可以更早地发现潜在的心理问题，从而采取预防措施或寻求适当的帮助。这不仅有助于提高个人的情绪管理和应对压力的能力，还能显著提升工作效率和生活质量。</div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ style="height: 100px;background: linear-gradient(90deg, #C41416 0%, #E57117 100%);;position: absolute;width: 100%;z-index: -1;top:200px">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="home_mid_plan" v-show="isNeed" @click="openSquare" ref="plan_jihua">
|
|
|
+
|
|
|
+ <img style="width: 40px;" src="../assets/home/jihua_img1.png" />
|
|
|
+ <div class=" badge_custom">
|
|
|
+ 问卷调查
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <CpmdQuestionnaire ref="question" @fatherFun=father />
|
|
|
+ </div>
|
|
|
+ <div class="home_footer_out">
|
|
|
+ <CpmdFooter />
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<style lang="scss" scoped>
|
|
|
+html,
|
|
|
+body {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ height: 100%;
|
|
|
+ overflow-x: hidden;
|
|
|
+ /* 防止水平滚动 */
|
|
|
+}
|
|
|
+
|
|
|
+.home_mid_img_one {
|
|
|
+ width: auto;
|
|
|
+ height: 100%;
|
|
|
+ // background: url(../assets/home/group_slide_1.png) no-repeat;
|
|
|
+ // background-size: 100% 100%;
|
|
|
+ background-image: url(../assets/home/group_slide_1.png);
|
|
|
+ background-size: contain;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-position: center;
|
|
|
+}
|
|
|
+
|
|
|
+.home_mid_img_two {
|
|
|
+ width: auto;
|
|
|
+ height: 100%;
|
|
|
+ background: url(../assets/home/group_slide_22.png) no-repeat;
|
|
|
+ background-size: contain;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-position: center;
|
|
|
+}
|
|
|
+
|
|
|
+.home_mid_img_three {
|
|
|
+ width: auto;
|
|
|
+ height: 100%;
|
|
|
+ background: url(../assets/home/group_slide_3.png) no-repeat;
|
|
|
+ background-size: contain;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-position: center;
|
|
|
+}
|
|
|
+
|
|
|
+.home_mid {
|
|
|
+ // background: url(../assets/home/xf2.png);
|
|
|
+ // background-size: cover;
|
|
|
+ width: 1200px;
|
|
|
+
|
|
|
+ :deep(.el-carousel__container) {
|
|
|
+ height: calc(100vh - 300px) !important;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .zc_des {
|
|
|
+ margin-top: 10px;
|
|
|
+ display: inline-flex;
|
|
|
+ // padding-top: 10px;
|
|
|
+ font-size: 32px;
|
|
|
+ color: #D31E1B;
|
|
|
+ font-weight: 700;
|
|
|
+ // background: url(../assets/home/01.png) no-repeat;
|
|
|
+ background-size: auto 72px;
|
|
|
+ background-position: center;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+.home_two {
|
|
|
+ min-height: 1;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ margin: auto;
|
|
|
+ // height: 100px;
|
|
|
+ // width: 100%;
|
|
|
+ width: 1200px;
|
|
|
+ height: 100vh;
|
|
|
+ position: relative;
|
|
|
+ height: 100vh;
|
|
|
+ scroll-snap-align: center;
|
|
|
+
|
|
|
+
|
|
|
+ .zc_des {
|
|
|
+ margin-top: 10px;
|
|
|
+ display: inline-flex;
|
|
|
+ // padding-top: 40px;
|
|
|
+ font-size: 32px;
|
|
|
+ color: #D31E1B;
|
|
|
+ font-weight: 700;
|
|
|
+ // background: url(../assets/home/02.png) no-repeat;
|
|
|
+ background-size: auto 72px;
|
|
|
+ background-position: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .zc_des3 {
|
|
|
+ margin-top: 10px;
|
|
|
+ display: inline-flex;
|
|
|
+ // padding-top: 40px;
|
|
|
+ font-size: 32px;
|
|
|
+ color: #D31E1B;
|
|
|
+ font-weight: 700;
|
|
|
+ // background: url(../assets/home/03.png) no-repeat;
|
|
|
+ background-size: auto 72px;
|
|
|
+ background-position: bottom;
|
|
|
+ }
|
|
|
+
|
|
|
+ .home_two_img {
|
|
|
+ padding: 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ box-shadow: 0px 4px 32px 0px rgba(0, 0, 0, 0.17);
|
|
|
+ background-color: #ffffff;
|
|
|
+
|
|
|
+ .home_two_des {
|
|
|
+ width: 460px;
|
|
|
+ padding: 20px;
|
|
|
+ color: #818996;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 24px;
|
|
|
+
|
|
|
+ // margin-top: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+.box {
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100vh - 40px);
|
|
|
+ background-color: rgb(141, 130, 130);
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+video {
|
|
|
+ height: calc(100vh);
|
|
|
+ background-size: 100% 100%;
|
|
|
+ width: 100%;
|
|
|
+ position: absolute;
|
|
|
+ // filter: blur(3px);
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.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: 10px;
|
|
|
+ // color: #ffffff;
|
|
|
+ // border-radius: 30px;
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.home_header_out {
|
|
|
+ flex: 1;
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ min-width: 1200px;
|
|
|
+ // background-color: rgb(151, 163, 202);
|
|
|
+ // height: 600px;
|
|
|
+ background: url(../assets/home/xf2.png);
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: cover;
|
|
|
+
|
|
|
+ // height: 106.667vw;
|
|
|
+ // height: 41.667vw;
|
|
|
+ // height: calc(100% * 1000px / 1920px);
|
|
|
+ // height: calc(100vmax * 1000px / 1920px);
|
|
|
+ //估计是需要动态
|
|
|
+ //获取屏幕宽度home_header_out 这个div的宽度--然后宽度*1000再除1920即为当前div的宽度
|
|
|
+
|
|
|
+ .home_header_inner {
|
|
|
+
|
|
|
+ // position: absolute;
|
|
|
+ //需要水平居中
|
|
|
+ // top: 0;
|
|
|
+ // bottom: 0;
|
|
|
+ min-height: 1;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ margin: auto;
|
|
|
+ // height: 100px;
|
|
|
+ width: 100%;
|
|
|
+ height: 100vh;
|
|
|
+ position: relative;
|
|
|
+ scroll-snap-align: start;
|
|
|
+
|
|
|
+ /* 启用滚动捕捉对齐 */
|
|
|
+ .img_xf {
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100vh - 80px);
|
|
|
+ background: url(../assets/home/xf1.png);
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ object-fit: cover;
|
|
|
+ object-position: center;
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.home_mid {
|
|
|
+ // background-color: blanchedalmond;
|
|
|
+
|
|
|
+ width: 1200px;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ margin: auto;
|
|
|
+ // margin-top: 20px;
|
|
|
+ height: 100vh;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ /* 启用滚动捕捉对齐 */
|
|
|
+ scroll-snap-align: start;
|
|
|
+ // position: relative;
|
|
|
+
|
|
|
+ .book_self {
|
|
|
+ margin-top: 20px;
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .book_left {
|
|
|
+ text-align: center;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 20px;
|
|
|
+ height: 700px;
|
|
|
+ width: 520px;
|
|
|
+ background-color: rgb(216, 216, 216);
|
|
|
+
|
|
|
+ // box-shadow: 8px 0px 5px #111111;
|
|
|
+ box-shadow: inset -15px 0px 10px -15px #161616, -2px 0px 5px #858484;
|
|
|
+
|
|
|
+ .book_title {
|
|
|
+ font-weight: 700;
|
|
|
+ line-height: 25px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .kepu_title {
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ font-size: 22px;
|
|
|
+ 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 {
|
|
|
+ // scroll-snap-align: 'start';
|
|
|
+
|
|
|
+ width: 100%;
|
|
|
+ background-color: #1F2761;
|
|
|
+}
|
|
|
+
|
|
|
+.home_mid_plan {
|
|
|
+ background-color: #3B3B3B;
|
|
|
+ border: 2px solid #4D6AD5;
|
|
|
+ border-radius: 10px;
|
|
|
+ z-index: 1;
|
|
|
+ cursor: pointer;
|
|
|
+ // top: 1000px;
|
|
|
+ position: fixed;
|
|
|
+ width: 50px;
|
|
|
+ height: 64px;
|
|
|
+ top: 20vh;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+
|
|
|
+ right: 20px;
|
|
|
+ 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-weight: normal;
|
|
|
+ font-size: 18px;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 30px;
|
|
|
+ letter-spacing: 6px;
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+body {
|
|
|
+ scroll-snap-type: y mandatory;
|
|
|
+ /* 垂直方向上的强制滚动捕捉 */
|
|
|
+ scroll-behavior: smooth;
|
|
|
+}
|
|
|
+</style>
|
