xjc-vue/src/views/xjc-integratedmachine/wakeup/career_recognize/plan_steps.vue

<template>
  <div class="plan_steps">
    <head-component :headinfo=headinfo></head-component>
    <div class="page-content">
      <div class="page-box">
        <p class="text-info">生涯规划步骤包括“生涯唤醒”“认识自我”“环境探索”“确立目标”“规划行动”“评估修正”。 简要介绍如下：</p>
        <p class="title">
          1.生涯唤醒（觉悟）——推荐使用“生涯唤醒学习系统”
        </p>
        <p class="answer">
          关注未来发展方向，适应当下生活学业，思考要走哪条路、成为什么样的人。</p>
        <p  class="title"> 2.自我认知（知己）——推荐使用“自我认知学习系统”</p>
        <p class="answer"> 探索与认识自己的兴趣、能力、性格、价值观，评估学业状况、健康状况等，清晰定位“我是怎样一个人？我要做什么？”</p>
        <p  class="title">3.环境探索（知彼）——推荐使用“环境探索学习系统”</p>
        <p class="answer">外在世界给我的机会是什么？包括对升学路径、大学专业、未来职业发展与工作内容、产业结构变迁等的探索和体验，对家庭资源的探索，对社会环境状况的了解，分析自身与环境的关系。</p>
        <p  class="title">4.确立目标（决策）——推荐使用“生涯决策学习系统”</p>
        <p class="answer">通过对自我认知与环境探索的组合分析，发展决策能力，做出生涯决策，确立自己的人生目标、职业目标、学业目标，同时根据长远目标，分解出中期目标和短期目标。</p>
        <p  class="title">5.规划行动（实践）——推荐使用“规划管理学习系统”</p>
        <p class="answer">通过对自我认知与环境探索的组合分析，发展决策能力，做出生涯决策，确立自己的人生目标、职业目标、学业目标，同时根据长远目标，分解出中期目标和短期目标。</p>
        <p  class="title">6.反思改进（评估）</p>
        <p class="answer">行动的结果如何？是否适合我？坚持省察与批判的态度，评估目标的达成度、计划的可行性等，根据环境和自身的发展，适当调整和修正目标，让生涯历程既有规划又有变通，即人和环境均衡协调。</p>
        <drag_component></drag_component>
      </div>
    </div>
  </div>

</template>

<script setup>
import headComponent from '@/views/xjc-integratedmachine/components/head_component.vue'
import {onMounted, reactive} from "vue";
import Drag_component from "@/views/xjc-integratedmachine/components/drag_component.vue";
const headinfo = ref({})

function setHeadinfo(){
  headinfo.value = {
    title: '生涯唤醒学习系统',
    user: {
      avatar: '头像路径',
      nickName: '张三'
    },
    backUrl : '/xjc-integratedmachine/wakeup/career_recognize/index'
  }
}
const position = reactive({ x: 10, y: 10 });
let isDragging = false;
let originX, originY;

const startDrag = (e) => {
  console.log("e",e)
  isDragging = true;
  originX = e.clientX - position.x;
  originY = e.clientY - position.y;
  console.log("originX",originX,originY,"originY")
  document.addEventListener('mousemove', onMouseMove);
  document.addEventListener('mouseup', stopDrag);
};

const onMouseMove = (e) => {
  if (isDragging) {
    position.x = e.clientX - originX;
    position.y = e.clientY - originY;
    console.log("position.x",position.x,"position.y",position.y)
  }
};

const stopDrag = () => {
  isDragging = false;
  document.removeEventListener('mousemove', onMouseMove);
  document.removeEventListener('mouseup', stopDrag);
};
onMounted(() => {
  setHeadinfo()
})

</script>

<style scoped lang="scss">
p{
  margin: 0;
  padding: 0;
}
.plan_steps{
  background: url('@/assets/images/login/login-home-background.png') no-repeat;
  background-size: 1920px 1080px;
  z-index:10;
  width: 100%;
  height: 1080px;
  .page-content {
    width: 100%;
    height: 980px;
    position: absolute;
    top: 100px;
    bottom: 0;
  }
  .page-box{
    width: 1832px;
    height: 910px;
    background: #FFFFFF;
    border-radius: 35px 35px 35px 35px;
    margin: 13px auto 0;
    padding-top: 25px;
    position: relative;
    .text-info{
      font-weight: bold;
      font-size: 32px;
      color: #333333;
      line-height: 42px;
      padding: 0 150px;
    }
    .title{
      font-weight: bold;
      font-size: 30px;
      color: #333333;
      line-height: 52px;
      margin-top: 6px;
      padding: 0 150px;
    }

    .answer{
      font-size: 30px;
      color: #333333;
      line-height: 42px;
      text-indent: 2em;
      padding: 0 150px;
    }
  }
}

</style>