xjc-vue/src/views/xjc-integratedmachine/wakeup/index.vue

<template>
  <div class="wake-up-page">
    <head-component :headinfo=headinfo></head-component>
    <div class="page-content">
      <div class="content-text-box">
<!--         <img  class="head-icon" src="@/assets/images/wakeup/background-content-style.png" alt="404">-->
        <p>
          生涯是个人有目的、连续不断的生活模式，由我们选择扮演的各种生活角色、所从事的活动组成。生涯不仅仅是职业，对我们每个人而言，最大的幸福不只是在职业上的成功，更在于一生中是否能拥有一个多彩、平衡、充盈的生涯。
        </p>
      </div>
      <div class="page-img-box">
        <div class="img-box">
          <img src="@/assets/images/wakeup/card1.png" @click="jumpTo('/xjc-integratedmachine/wakeup/career_recognize/index')">
        </div>
        <div class="img-box">
          <img src="@/assets/images/wakeup/card2.png" @click="jumpTo('/xjc-integratedmachine/wakeup/rainbow/paint')">
        </div>
        <div class="img-box">
          <img src="@/assets/images/wakeup/card3.png" @click="jumpTo('/xjc-integratedmachine/wakeup/rainbow/knowledge_explanation_1')">
        </div>
        <div class="img-box">
          <img src="@/assets/images/wakeup/card4.png" @click="jumpTo('/xjc-integratedmachine/wakeup/career_example/index')">
        </div>
        <div class="img-box">
          <img src="@/assets/images/wakeup/card5.png"  @click="jumpTo('/xjc-integratedmachine/wakeup/career_cinema/index')">
        </div>
      </div>
      <div class="content-bottom">
        <div class="draw draggable-ball" ref="draggableBox" @touchstart.native="startDrag" :style="{ left: position.x + 'px', top: position.y + 'px' }">
          <img src="@/assets/images/wakeup/float-box.png" />
        </div>
        <div class="ai-rabit">
          <div class="ai-rabit-text">
            你好，同学欢迎进入生涯学习系统
          </div>
          <img  src="@/assets/images/wakeup/ai-rabit.png" />
        </div>
      </div>
    </div>
  </div>

</template>

<script setup>
    import headComponent from '@/views/xjc-integratedmachine/components/head_component.vue'


    const router = useRouter()

    const headinfo = ref({})

    // const isDragging = ref(false)
    const offset = ref({ x: 0, y: 0 })
    // const startX = ref(0)
    // const startY = ref(0)

    function setHeadinfo(){
        headinfo.value = {
            title: '生涯唤醒学习系统',
            user: {
                avatar: '头像路径',
                nickName: '张三'
            },
            backUrl : '/index'
        }
    }


    function jumpTo(path) {
        router.push({
            path: path,
            query: {name: 123}
        })
    }

    onMounted(() => {
        setHeadinfo()
    })

    import { reactive, onMounted } from 'vue';

    const position = reactive({ x: 100, y: 10 });
    let isDragging = false;
    let originX, originY;

    const startDrag = (e) => {
      console.log("e",e);
      // let chartDiv = document.getElementById("ring-chart");

      isDragging = true;
      originX = e.clientX - position.x;
      originY = e.clientY - position.y;
      document.addEventListener('touchmove', onMouseMove);
      document.addEventListener('touchend', stopDrag);
    };

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

    const stopDrag = () => {
      isDragging = false;
      document.removeEventListener('touchmove', onMouseMove);
      document.removeEventListener('touchend', stopDrag);
    };
    const draggableBox = ref(null);
    let startX = 0;
    let startY = 0;
    let currentX = 0;
    let currentY = 0;
    const handleTouchStart = (event) => {
      startX = event.touches[0].clientX - draggableBox.value.offsetLeft;
      startY = event.touches[0].clientY - draggableBox.value.offsetTop;
    };

    const handleTouchMove = (event) => {
      currentX = event.touches[0].clientX - startX;
      currentY = event.touches[0].clientY - startY;
      draggableBox.value.style.transform = `translate3D(${currentX}px, ${currentY}px, 0)`;
    };

    const handleTouchEnd = () => {
      // 可以添加触摸结束后的处理逻辑，比如设置一个最终的拖拽位置等
    };
</script>


<style scoped lang="scss">
.wake-up-page{
  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%;
    position: absolute;
    top: 123px;
    bottom: 0;
    p{
      padding-left: 44px;
      padding-right: 44px;
      font-weight: 400;
      font-size: 30px;
      color: #333333;
      line-height: 52px;
      letter-spacing: 3px;
      text-indent: 2em;
    }
    }
  .content-text-box{
    width: 100%;
    //height: 126px;
    background: url('@/assets/images/wakeup/background-content-style.png') no-repeat;
    background-size: 1920px 126px;
    margin-top:23px;
    display: flex;
    align-items: center;
  }
  .page-img-box{
      width: 100%;
      display: flex;
      justify-content:space-around;
      align-items: center;
      margin-top: 49px;
      .img-box{
        width: 366px;
        height: 501px;
        img{
          width: 350px;
          height: 501px;
        }
      }
    }

  .content-bottom{
    width: 100%;
    //height: 37px;
    display: flex;
    justify-content: space-between;
    position: relative;
    .draw{
      width: 109px;
      height: 170px;
      margin-left: -76px;
      img{
        width: 109px;
        height: 170px;
      }
    }

    .ai-rabit{
      //width: 178px;
      //height: 274px;
      position: absolute;
      right: 45px;
      top: -50px;
      display: flex;
      //justify-content: space-between;
      align-items: center;
      .ai-rabit-text{
        width: 345px;
        height: 89px;
        //border: 1px solid;
        background: #E8EEF7;
        font-weight: 300;
        margin-bottom: 20px;
        font-size: 22px;
        color: #000000;
        padding:16px;
        border-radius: 24px 24px 24px 24px;
      }
      img{
        width: 178px;
        height: 270px;
      }
    }
  }

}
    .temp{
       width:20vw;
        height: 10vh;
        background: #85eff5;
        border: solid 1px #a2fffc;
        border-radius: 10px;
        cursor: pointer;
    }
.draggable-ball {
  touch-action: none;
  position: absolute;
  //width: 50px;
  //height: 50px;
  //background-color: blue;
  //border-radius: 50%;
  cursor: pointer;
  user-select: none; /* 防止拖拽时选中文字 */
}


</style>