xjc-vue/src/views/xjc-integratedmachine/environment/subject_evaluation_report1.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 data_list" @click="detail(item.sepeialitt)"
               :class="[item.selected?'item-result-box-active':'item-result-box']"
          >
            <div v-html="item.sepeialitt"></div>
          </div>
        </div>
        <p class="title">专业</p>
        <div class="two-page-result">
          <div v-for="(item,index) in subjectreportdetail_list" @click="jumpToReport2(item)"
               :class="[item.selected?'item-result-box-active':'item-result-box']"
          >
            <div v-html="item.subjectname"></div>
          </div>
        </div>
      </div>
    </div>
<!--    <drag_component></drag_component>-->
  </div>

</template>

<script setup>
import {onMounted} from "vue";
import {subjectreportlist,subjectreportdetail} from '@/api/xjc-integratedmachine/environment/tscareer.js'
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 data_list = ref([])
function list() {
  subjectreportlist().then(resp =>{
    console.log(resp)
    data_list.value = resp.getsepeiality
  })
}
const subjectreportdetail_list = ref([])
function detail(data){
  subjectreportdetail({
    id : data
  }).then(resp =>{
    subjectreportdetail_list.value = resp.subjectreportdetail
  })
}

function jumpToReport2(item){
  router.push({
    path : '/xjc-integratedmachine/environment/subject_evaluation_report2',
    query :{
      id : item.subjectcode
    }
  })
}

list()
</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-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: #0DE6A1;
      line-height: 90px;
      text-align: center;
      margin-left: 50px;
      margin-right: 50px;
      margin-top: 32px;
      padding-left: 20px;
      padding-right: 20px;
    }

    .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-top: 32px;
      padding-left: 20px;
      padding-right: 20px;
    }

  }
}

</style>