|
@@ -1,27 +1,62 @@
|
|
|
<template>
|
|
|
- 高中学科相关的大学专业<br>
|
|
|
- <el-card style="width:80%;">
|
|
|
- <span v-for="(item,index) in subject" @click="detail(item.value)">
|
|
|
- {{item.value}}
|
|
|
- </span>
|
|
|
- </el-card>
|
|
|
-
|
|
|
- <br><br><br><br><br>
|
|
|
- <span v-for="(item,index) in data_list" @click="jumpToPro_details_video(item)">
|
|
|
- {{item.major}}
|
|
|
- </span>
|
|
|
+ <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/decision/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) {
|
|
|
+ function detail(data, index) {
|
|
|
+ setActive(index)
|
|
|
subjectspecialdetail({
|
|
|
id: data
|
|
|
}).then(resp => {
|
|
@@ -29,19 +64,134 @@
|
|
|
})
|
|
|
}
|
|
|
|
|
|
+ function setActive(index) {
|
|
|
+ activeIndex.value = index; // 设置当前被激活的按钮的索引
|
|
|
+ }
|
|
|
+
|
|
|
function jumpToPro_details_video(item) {
|
|
|
router.push({
|
|
|
- path: '/xjc-integratedmachine/decision/disciplinary_professional_detail',
|
|
|
+ path: '/xjc-integratedmachine/environment/pro_details_video',
|
|
|
query: {
|
|
|
id: item.majorid
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
|
|
|
+ onMounted(() => {
|
|
|
+ setHeadinfo()
|
|
|
+ })
|
|
|
|
|
|
</script>
|
|
|
|
|
|
-<style scoped>
|
|
|
+<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;
|
|
|
|
|
|
-</style>
|
|
|
+ .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>
|