xjc-vue/src/views/xjc-integratedmachine/environment/subject_suitable_profession.vue

<template>
  <div class="development_stage">
    <head-component :headinfo=headinfo></head-component>
    <div class="page-content">
      <div class="page-box">
        <p class="title">高中学科</p>
        <div class="two-page-result">
          <div v-for="(item,index) in subject"
               :class="{
      'item-result-box-active': activeIndex === index,
      'item-result-box': activeIndex !== index
    }"
               @click="detail(item.value,index)">
            <div v-html="item.value"></div>
          </div>
        </div>
        <p class="title">大学专业</p>
        <div class="two-page-result">
          <div v-for="(item,index) in data_list"
               :class="[item.selected?'item-result-box-active':'item-result-box']"
               @click="jumpToPro_details_video(item)">
            <div v-html="item.major"></div>
          </div>
        </div>
      </div>
    </div>
<!--    <drag_component></drag_component>-->
  </div>

</template>

<script setup>
import {onMounted} from "vue";
import headComponent from '@/views/xjc-integratedmachine/components/head_component.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'
  }
}

import {subjectspecialdetail} from '@/api/xjc-integratedmachine/environment/tscareer.js'

const router = useRouter()
const {proxy} = getCurrentInstance()
const {subject} = proxy.useDict('subject')
const activeIndex = ref(null)
const data_list = ref([])

function detail(data, index) {
  setActive(index)
  subjectspecialdetail({
    id: data
  }).then(resp => {
    data_list.value = resp.subjectspecialdetail
  })
}

function setActive(index) {
  activeIndex.value = index; // 设置当前被激活的按钮的索引
}

function jumpToPro_details_video(item) {
  router.push({
    path: '/xjc-integratedmachine/environment/pro_details_video',
    query: {
      id: item.majorid
    }
  })
}

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

</script>

<style scoped lang="scss">
p {
  margin: 0;
  padding: 0;
}

.development_stage {
  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;
    overflow: auto;
    padding-bottom: 30px;

    .title {
      height: 40px;
      border-left: 8px #8CE349 solid;
      margin-top: 33px;
      margin-left: 33px;
      font-weight: 400;
      font-size: 28px;
      color: #333333;
      line-height: 40px;
      padding-left: 11px;
    }
  }

  .two-page-result {
    //width: 1276px;
    //height: 337px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    .item-result-box {
      min-width: 244px;
      height: 92px;
      background: #E0EEF4;
      border-radius: 5px 5px 5px 5px;
      font-weight: 400;
      font-size: 30px;
      color: #000000;
      line-height: 90px;
      text-align: center;
      margin-left: 50px;
      margin-right: 50px;
      margin-top: 32px;
      padding-left: 20px;
      padding-right: 20px;
    }

    .item-result-box:hover {
      min-width: 244px;
      height: 92px;
      background: linear-gradient(180deg, #B6FFEF 0%, #C5EEFF 100%);
      box-shadow: inset 0px -2px 7px 0px #1E410E;
      border-radius: 5px 5px 5px 5px;
      border: 1px solid #A2F57F;
      font-weight: 400;
      font-size: 30px;
      color: #000000;
      line-height: 90px;
      text-align: center;
      margin-left: 50px;
      margin-right: 50px;
      margin-top: 32px;
      padding-left: 20px;
      padding-right: 20px;
    }

    .item-result-box-active {
      min-width: 244px;
      height: 92px;
      background: linear-gradient(180deg, #B6FFEF 0%, #C5EEFF 100%);
      box-shadow: inset 0px -2px 7px 0px #1E410E;
      border-radius: 5px 5px 5px 5px;
      border: 1px solid #A2F57F;
      font-weight: 400;
      font-size: 30px;
      color: #000000;
      line-height: 90px;
      text-align: center;
      margin-left: 50px;
      margin-right: 50px;
      margin-top: 32px;
      padding-left: 20px;
      padding-right: 20px;
    }

  }
}

</style>