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

<template>
  <div class="maturity-game-page">
    <head-component :headinfo=headinfo></head-component>
    <div class="page-content">
      <div class="top">
        <img src="@/assets/images/wakeup/maturity/maturity-game-title.png" >
      </div>
      <div class="bottom">
        <img src="@/assets/images/wakeup/maturity/maturity-game-left.png" @click="jumpTo('/xjc-integratedmachine/wakeup/career_maturity/knowledge_explanation')">
        <img src="@/assets/images/wakeup/maturity/maturity-game-right.png" @click="jumpTo('/xjc-integratedmachine/wakeup/career_maturity/maturity_game')">
      </div>
      <drag_component></drag_component>
    </div>
  </div>
</template>

<script setup>
import headComponent from '@/views/xjc-integratedmachine/components/head_component.vue'
import drag_component from "@/views/xjc-integratedmachine/components/drag_component.vue";
import {onMounted} from "vue";


const router = useRouter()

const headinfo = ref({})
const draggedItem = ref(null);

function dragStart(event) {
  draggedItem.value = event.target;
}

function drop(event) {
  event.preventDefault(); // 防止默认处理（例如打开链接）
  if (event.target !== draggedItem.value) {
    const target = event.target; // 获取放置的目标元素
    const item = draggedItem.value; // 获取被拖拽的元素
    // 交换位置或进行其他操作
    item.parentNode.insertBefore(item, target); // 将被拖拽的元素插入到目标元素之前
  }
}

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

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



</script>


<style scoped lang="scss">
.maturity-game-page{
  background: url('@/assets/images/wakeup/maturity/maturity-game-bg.png') no-repeat;
  background-size: 1920px 1080px;
  z-index:10;
  width: 100%;
  height: 1080px;
  .page-content{
    width: 100%;
    position: absolute;
    top: 123px;
    bottom: 0;
    .top{
      width: 100%;
      height: 212px;
      display: flex;
      justify-content: center;
      margin-top: 104px;
      img{
        width: 864px;
        height: 212px;
      }
    }
    .bottom{
      width: 100%;
      height: 248px;
      display: flex;
      justify-content: space-around;
      margin-top:186px;
      img{
        width: 398px;
        height: 248px;
      }
    }
  }

}

</style>