[feat] 环境探索 职业查询

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

@@ -1,113 +1,568 @@
 <template>
-    <collectionComponent :collection="collection"></collectionComponent>
-    职业详情视频<br>
-    职业图片:
-    {{entity.picture}}
-    <br>
-    {{entity.name}}
-    <br>
-    所属行业<br>
-    {{entity.industryname}}
-    感兴趣类型码<br>
-    {{entity.interestcode}}
-
-    <el-card style="width:80%;">
-        <div style="display: flex;flex-direction: row;justify-content: space-between">
-            <div @click="changeTab('zygs')">职业概述</div>
-            <div @click="changeTab('gznr')">工作内容</div>
-            <div @click="changeTab('zyqj')">职业前景</div>
-            <div @click="changeTab('bkzy')">本科专业</div>
-            <div @click="changeTab('zkzy')">专科专业</div>
-            <div @click="changeTab('zysp')">职业视频</div>
+  <div class="pro_details_video">
+    <head-component :headinfo=headinfo></head-component>
+    <div class="page-content">
+      <div class="page-img-box">
+        <div class="top-content">
+          <img class="top-content-left" src="@/assets/images/environment/keys-search-h.png">
+          <div class="top-content-right">
+            <div class="right-top">
+              <p class="title">{{ entity.name }}</p>
+              <div class="right-top-icon">
+                <collectionComponent ref="collectionRef" :collection="collection_data"></collectionComponent>
+              </div>
+            </div>
+            <div class="info-box">
+              <p class="title"> 所属行业</p>
+              <p>{{entity.industryname}}</p>
+            </div>
+            <div class="info-box">
+              <p class="title"> 职业兴趣类代码</p>
+              <p>{{entity.industryname}}</p>
+            </div>
+          </div>
         </div>
-    </el-card>
-
-    <div v-show="tab == 'zygs'" v-html="entity.definition">
-
-    </div>
-    <div v-show="tab == 'gznr'" v-html="entity.normalwork">
-
-    </div>
-    <div v-show="tab == 'zyqj'" v-html="entity.normalwork">
-    </div>
-    <div v-show="tab == 'bkzy'">
-        <div v-for="(item,index) in bk_list" @click="jumpZY(item)">
-            {{item.name}}
-        </div>
-    </div>
-    <div v-show="tab == 'zkzy'">
-        <div v-for="(item,index) in zk_list" @click="jumpZY(item)">
-            {{item.name}}
-        </div>
-    </div>
-    <div v-show="tab == 'zysp'">
-        <div ref="videoContainer" class="video-container">
-            <video ref="videoPlayer" id="playerId" class="video-js vjs-default-skin" controls preload="auto"
-                   :data-setup="{}">
+        <div class="bottom-content">
+          <div class="tab-box">
+            <div :class="[onePage?'item-box-active':'item-box']" @click="showPage(1)">
+              职业概述
+            </div>
+            <div :class="[twoPage?'item-box-active':'item-box']" @click="showPage(2)">
+              工作内容
+            </div>
+            <div :class="[threePage?'item-box-active':'item-box']" @click="showPage(3)">
+              职业前景
+            </div>
+            <div :class="[fourPage?'item-box-active':'item-box']" @click="showPage(4)">
+              本科专业
+            </div>
+            <div :class="[fivePage?'item-box-active':'item-box']" @click="showPage(5)">
+              专科专业
+            </div>
+            <div :class="[sixPage?'item-box-active':'item-box']" @click="showPage(6)">
+              职业视频
+            </div>
+          </div>
+          <div class="one-page" v-show="onePage">
+            <p class="title">专业解读</p>
+            <div class="info"  v-html="entity.describe"></div>
+          </div>
+          <div class="one-page" v-show="twoPage">
+            <p class="title">开设院校</p>
+            <div class="info"  v-for="(item,index) in kaishe_list">
+              {{ item.name }}
+            </div>
+          </div>
+          <div class="one-page" v-show="threePage">
+            <p class="title">学科评估</p>
+            <div class="info"   v-for="(item,index) in pinggu_list">
+              {{ item.name }}
+            </div>
+          </div>
+          <div class="one-page" v-show="fourPage">
+            <p class="title">就业前景</p>
+            <div class="info"   v-html="entity.employment">
+            </div>
+          </div>
+          <div class="one-page" v-show="fivePage">
+            <p class="title">专业视频</p>
+            <div  ref="videoContainer" class="video-container"  v-if="entity.path">
+              <video ref="videoPlayer" id="playerId" class="video-js vjs-default-skin" controls preload="auto"
+                     :data-setup="{}">
                 <!-- 可以在这里插入source标签以指定你的视频源 -->
                 <source :src="entity.path" type="video/mp4">
-            </video>
+              </video>
+            </div>
+          </div>
         </div>
+      </div>
     </div>
-
-
+    <el-dialog
+        v-model="fivePage"
+        @before-close="dialogBeforeClose"
+        destroy-on-close
+        title="专业视频"
+        width="1832px"
+        height="915px"
+        center
+        align-center
+        v-if="entity.path"
+    >
+      <div class="video-content" >
+        <video ref="videoPlayer" video preload="auto" autoplay muted controls width="1798" height="900">
+          <source :src="entity.path" type="video/mp4">
+        </video>
+      </div>
+    </el-dialog>
+  </div>
 </template>
 
 <script setup>
-    import {occupationDetail} from '@/api/xjc-integratedmachine/environment/occupation.js'
-    import videojs from 'video.js';
-    import 'video.js/dist/video-js.css';
-    import collectionComponent from '@/views/xjc-integratedmachine/components/collection_component.vue'
-
-    const router = useRouter()
-    const route = useRoute()
-    const param = route.query
-
-    const entity = ref({})
-    const bk_list = ref([])
-    const zk_list = ref([])
-
-    const tab = ref('zygs')
-
-    function changeTab(path) {
-        tab.value = path
-        if (path == 'zysp') {
-            if (path == 'zysp') {
-                const player = videojs(playerId, {autoplay: true});
-                player.src(entity.value.path);
-                player.on("ended", () => {
-                })
+import videojs from 'video.js';
+import 'video.js/dist/video-js.css';
+import collectionComponent from '@/views/xjc-integratedmachine/components/collection_component.vue'
+import {specialtyDetail} from '@/api/xjc-integratedmachine/environment/specialty.js'
+import {ref} from "vue";
+import headComponent from '@/views/xjc-integratedmachine/components/head_component.vue'
+import Drag_component from "@/views/xjc-integratedmachine/components/drag_component.vue";
+import {handleThemeStyle} from "@/utils/theme.js";
+import useSettingsStore from "@/store/modules/settings.js";
+
+const {proxy} = getCurrentInstance()
+const {educationlevel} = proxy.useDict('educationlevel')
+
+
+const router = useRouter()
+const route = useRoute()
+const tabIndex = ref("zyjd")
+const headinfo = ref({})
+const onePage = ref(true)
+const twoPage = ref(false)
+const threePage = ref(false)
+const fourPage = ref(false)
+const fivePage = ref(false)
+const sixPage = ref(false)
+
+function setHeadinfo(){
+  headinfo.value = {
+    title: '职业详情',
+    user: {
+      avatar: '头像路径',
+      nickName: '张三'
+    },
+    backUrl : '/xjc-integratedmachine/environment/query_universitydb_conditions',
+    homeUrl:'/xjc-integratedmachine/environment/index',
+    contrast:true,
+    contrastType:'major'
+  }
+}
+
+onMounted(() => {
+  setHeadinfo()
+
+})
+
+const param = route.query
+
+
+
+const entity = ref({})
+const kaishe_list = ref([])
+const pinggu_list = ref([])
+const similar_list = ref([])
+const collectionRef = ref(null)
+const collection_data = ref({})
+function setCollection_data(){
+  collection_data.value = {
+    contentType: 2,
+    contentId: param.id,
+    contentVal: entity.value,
+    source:'pro_details_video'
+  }
+  console.log("entity.value",entity.value)
+}
+function detail() {
+  specialtyDetail({
+    id: param.id
+  }).then(resp => {
+    entity.value = resp.entity
+    kaishe_list.value = resp.kaishe_list
+    pinggu_list.value = resp.pinggu_list
+    similar_list.value = resp.similar_list
+    entity.value.kaishe_list = kaishe_list
+  })
+  setTimeout(() => {
+    setCollection_data();
+    collectionRef.value.isContrast(entity.value);
+    collectionRef.value.getSource('pro_details_video');
+  }, 500);
+}
+
+
+const showPage = (val) => {
+  if (val === 1) {
+    onePage.value = true;
+    twoPage.value = false;
+    threePage.value = false;
+    fourPage.value = false;
+    fivePage.value = false;
+    sixPage.value = false;
+
+  } else if (val === 2) {
+    onePage.value = false;
+    twoPage.value = true;
+    threePage.value = false;
+    fourPage.value = false;
+    fivePage.value = false;
+    sixPage.value = false;
+  } else if (val === 3) {
+    onePage.value = false;
+    twoPage.value = false;
+    threePage.value = true;
+    fourPage.value = false;
+    fivePage.value = false;
+    sixPage.value = false;
+  } else if (val === 4) {
+    onePage.value = false;
+    twoPage.value = false;
+    threePage.value = false;
+    fourPage.value = true;
+    fivePage.value = false;
+    sixPage.value = false;
+  } else if (val === 5) {
+    onePage.value = false;
+    twoPage.value = false;
+    threePage.value = false;
+    fourPage.value = false;
+    fivePage.value = true;
+  } else if (val === 6) {
+    onePage.value = false;
+    twoPage.value = false;
+    threePage.value = false;
+    fourPage.value = false;
+    fivePage.value = false;
+    sixPage.value = true;
+  }
+}
+detail()
+function dialogBeforeClose() {
+  onePage.value = true;
+  twoPage.value = false;
+  threePage.value = false;
+  fourPage.value = false;
+  fivePage.value = false;
+  sixPage.value = false
+  senvenPage.value = false
+  eightPage.value = false;
+}
+
+
+</script>
+
+<style scoped lang="scss">
+p, div {
+  margin: 0;
+  padding: 0;
+}
+
+.pro_details_video {
+  background: url('@/assets/images/environment/university-detail.png') no-repeat;
+  background-size: 1920px 1080px;
+  z-index: 10;
+  width: 100%;
+  height: 1080px;
+
+  .page-content {
+    width: 100%;
+    position: absolute;
+    top: 100px;
+    bottom: 0;
+    display: flex;
+    justify-content: center;
+  }
+
+  .page-img-box {
+    width: 1832px;
+    height: 922px;
+    margin-top: 13px;
+    background: rgba(255, 255, 255, 0.4);
+    border-radius: 35px 35px 35px 35px;
+    display: flex;
+    flex-direction: column;
+
+    .top-content {
+      width: 1832px;
+      display: flex;
+      justify-content: space-between;
+      .top-content-left{
+        width: 764px;
+        height: 500px;
+        background: #D9D9D9;
+        border-radius: 5px 5px 5px 5px;
+        margin-top:15px;
+        margin-left: 34px;
+      }
+      .top-content-right {
+        margin-left: 45px;
+        width: 1782px;
+        margin-left: 45px;
+        border: 1px solid;
+        .title {
+          font-weight: bold;
+          font-size: 36px;
+          color: #1E410E;
+          line-height: 24px;
+        }
+
+        .school-level-box {
+          display: flex;
+          justify-content: left;
+          .school-level {
+            margin-right: 20px;
+            width: 174px;
+            height: 54px;
+            background: #B3FC7C;
+            border-radius: 5px 5px 5px 5px;
+            font-weight: bold;
+            font-size: 20px;
+            color: #000000;
+            line-height: 54px;
+            text-align: center;
+          }
+        }
+
+        .text-box {
+          width: 1124px;
+          p {
+            margin-right: 20px;
+          }
+        }
+
+        .right-top {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+
+          .right-top-icon {
+            width: 200px;
+            height: 68px;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 24px;
+
+            .item-img {
+              display: flex;
+              flex-direction: column;
+              align-items: center;
+
+              p {
+                font-weight: 400;
+                font-size: 20px;
+                color: #515F6A;
+
+              }
+
+              img {
+                width: 36px;
+                height: 36px;
+              }
             }
+          }
+        }
+
+      }
+
+      .info-box{
+        border: 1px solid;
+        margin-left: 33px;
+        .title {
+          height: 40px;
+          border-left: 8px #8CE349 solid;
+          margin-top: 33px;
+          font-weight: 400;
+          font-size: 28px;
+          color: #333333;
+          line-height: 40px;
+          padding-left: 11px;
+        }
+        .info{
+          margin-top: 19px;
+          font-weight: 400;
+          font-size: 20px;
+          color: #333333;
+          display: flex;
+          flex-wrap: wrap;
+
+          .info-item{
+            width: 244px;
+            height: 80px;
+            margin-left: 10px;
+            background: #FFFFFF;
+            border-radius: 5px 5px 5px 5px;
+            border: 1px solid #A2F57F;
+            font-weight: 400;
+            font-size: 30px;
+            color: #000000;
+            line-height:  80px;
+            text-align: center;
+            margin-top: 14px;
+          }
         }
+        .info-text{
+          margin-top: 19px;
+          font-weight: 400;
+          font-size: 20px;
+          color: #333333;
+        }
+      }
+
     }
 
-    const collection = ref({
-        contentType : 3,
-        contentId :param.id
-    })
-
-    function detail() {
-        occupationDetail({
-            id: param.id
-        }).then(resp => {
-            entity.value = resp.entity
-            bk_list.value = resp.bk_list
-            zk_list.value = resp.zk_list
-        })
+  }
+
+
+  .bottom-content {
+    margin-top: 10px;
+    height: 500px;
+    .tab-box {
+      display: flex;
+      padding-right: 279px;
+      img {
+        width: 36px;
+        height: 36px;
+        margin-right: 12px;
+      }
     }
-    function jumpZY(item){
-        router.push({
-            path : '/xjc-integratedmachine/environment/pro_details_video',
-            query :{
-                id : item.id
-            }
-        })
+
+
+    .item-box {
+      text-align: center;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 202px;
+      height: 65px;
+      box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.09);
+      border-radius: 5px 5px 0px 0px;
+      font-weight: 400;
+      font-size: 32px;
+      color: #979797;
+
     }
 
-    detail()
+    .item-box-active {
+      text-align: center;
+      color: #000000;
+      background: #FFFFFF;
+      font-weight: bold;
+      font-size: 32px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 202px;
+      height: 65px;
+      background: #FFFFFF;
+      box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.09);
+      border-radius: 5px 5px 0px 0px;
 
-</script>
+    }
+  }
+
+  //.editor-content div,
+  //.editor-content span,
+  //.editor-content p,
+  //.editor-content h1,
+  //.editor-content h2,
+  //.editor-content h3,
+  //.editor-content h4,
+  //.editor-content h5,
+  //.editor-content h6 {
+  //  font-size: 26px !important;
+  //  line-height: 37px !important;
+  //}
+
+  .editor-content div,
+  .editor-content span,
+  .editor-content p {
+    text-indent: 2em !important;
+    text-align: left !important;
+  }
+}
+
+.one-page {
+  width: 1832px;
+  height: 341px;
+  background: #FFFFFF;
+  border-radius: 0px 0px 35px 35px;
+  border: 1px solid #FFFFFF;
+  overflow: auto;
+  line-height: 32px;
+  padding-top: 10px;
+  .title {
+    height: 40px;
+    border-left: 8px #8CE349 solid;
+    margin-left: 33px;
+    font-weight: 400;
+    font-size: 28px;
+    color: #333333;
+    line-height: 40px;
+    padding-left: 11px;
+  }
+
+  .info {
+    text-indent: 2em;
+    font-weight: 400;
+    font-size: 28px;
+    color: #333333;
+    line-height: 40px;
+  }
+
+  .select-div {
+    width: 100%;
+    height: 100px;
+    font-weight: 400;
+    font-size: 30px;
+    color: #333333;
+    line-height: 40px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 21px;
+
+    .select-box {
+      width: 300px;
+      height: 90px;
+      border: 1px solid #CCCCCC;
+      line-height: 90px;
+      text-align: center;
+      margin-left: 10px;
+    }
+
+    .click-search {
+      width: 170px;
+      height: 90px;
+      background: linear-gradient(180deg, #73EE71 0%, #0ACB63 100%);
+      border-radius: 5px;
+      font-weight: 400;
+      font-size: 24px;
+      color: #FFFFFF;
+      margin-left: 20px;
+    }
+  }
+
+  ::v-deep .el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th {
+    height: 74px !important;
+    font-size: 24px;
+    color: #1E410E;
+  }
+
+  ::v-deep .el-table tr {
+    height: 74px !important;
+    font-size: 20px;
+  }
+
+  ::v-deep .el-dialog__title {
+    font-size: 34px !important;
+  }
+
+  ::v-deep .el-dialog {
+    margin-top: 0px !important;
+  }
+
+  ::v-deep .el-dialog__headerbtn .el-dialog__close {
+    font-size: 30px !important;
+  }
 
-<style scoped>
+}
+.dict-dialog{
+  max-width: 570px;
+  height: 800px;
+  overflow: auto;
+  .dict-box {
+    font-size: 24px;
+    line-height: 34px;
+    color: #333333;
+  }
+}
 
-</style>
+</style>

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

@@ -1,25 +1,208 @@
 <template>
-    霍兰德码查询
-    <div v-for="(item,index) in interestcode" @click="jumpToList(item)">
-        {{item.label}}
+  <div class="occdb_interestcode">
+    <head-component :headinfo=headinfo></head-component>
+    <div class="page-content">
+      <div class="content">
+        <div class="result-box">
+          <div class="two-page-result">
+            <div v-for="(item,index) in interestcode"
+                 :class="[item.selected?'item-result-box-active':'item-result-box']"
+                 @click="addItem(item,index)">{{ item.selected }}
+              <div v-html="item.label"></div>
+            </div>
+          </div>
+          <div class="search-btn">
+            <img @click="jumpToList('/xjc-integratedmachine/environment/occdb_search_industry_list')" style="z-index:10" src="@/assets/images/environment/search-btn.png">
+          </div>
+        </div>
+      </div>
     </div>
+    <drag_component></drag_component>
+  </div>
 </template>
 
 <script setup>
-    const {proxy} = getCurrentInstance()
-    const {interestcode} = proxy.useDict('interestcode')
-    const router = useRouter()
-
-    function jumpToList(item) {
-        router.push({
-            path : '/xjc-integratedmachine/environment/occdb_interestcode_list',
-            query:{
-                code : item.value
-            }
-        })
+import headComponent from '@/views/xjc-integratedmachine/components/head_component.vue'
+import Drag_component from "@/views/xjc-integratedmachine/components/drag_component.vue";
+import {specialtyList1} from '@/api/xjc-integratedmachine/environment/specialty.js'
+
+const router = useRouter()
+const route = useRoute()
+const total = ref(0)
+const param = route.query
+const data_rows = ref([])
+const headinfo = ref({})
+const resultVal =ref([])
+const resultValCode =ref('')
+function setHeadinfo() {
+  headinfo.value = {
+    title: '专业类',
+    user: {
+      avatar: '头像路径',
+      nickName: '张三'
+    },
+    backUrl: '/xjc-integratedmachine/environment/index',
+    homeUrl: '/xjc-integratedmachine/environment/index',
+    contrast:true,
+  }
+}
+const {proxy} = getCurrentInstance()
+const {interestcode} = proxy.useDict('interestcode')
+function jumpToList(item) {
+  router.push({
+    path : '/xjc-integratedmachine/environment/occdb_interestcode_list',
+    query:{
+      code : resultValCode.value
     }
+  })
+}
+onMounted(() => {
+  setHeadinfo()
+  // interestList.value = interestcode.value.map(item =>{
+  //   console.log("item",item.selected);
+  //   item.selected = false;
+  // })
+})
+const queryParams = ref({
+  pageNum: 1,
+  pageSize: 10,
+  oldid: param.oldid
+})
+function addItem (val,index){
+  resultVal.value.push(val);
+  resultVal.value.map(item =>{
+    resultValCode.value += item.code
+  })
+  resultVal.value[index].selected = true;
+
+  if( resultVal.value.length >=3 ){
+    resultVal.value = resultVal.value.shift();
+  }
+}
+function list1() {
+  specialtyList1(queryParams.value).then(resp => {
+    data_rows.value = resp.data.rows
+    total.value = resp.data.total
+  })
+}
+
+
+list1()
+
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+div,p{
+  margin: 0;
+  padding: 0;
+}
+.occdb_interestcode {
+  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: 100px;
+    bottom: 0;
+    display: flex;
+    justify-content: center;
+    .content{
+      width: 1832px;
+      height: 922px;
+      background: #FFFFFF;
+      border-radius: 35px 35px 35px 35px;
+      margin-top:13px;
+    }
+    .result-box {
+      width: 100%;
+      overflow: auto;
+
+      .two-page-result {
+        width: 1276px;
+        height: 337px;
+        margin: 0 auto;
+        border: 1px solid;
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        margin-top: 195px;
+        .item-result-box-active {
+          min-width: 320px;
+          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: 320px;
+          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: 320px;
+          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;
+        }
+
+      }
+      .search-btn {
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+        justify-content: space-around;
+        margin-top: 280px;
+        img {
+          width: 244px;
+          height: 100px;
+        }
+        p{
+
+        }
+        span{
+          margin-left: 3px;
+        }
+      }
+    }
+  }
 
+}
 </style>

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

@@ -1,51 +1,187 @@
 <template>
-    <div v-for="(item,index) in code_list">
-        {{item.code}}---{{item.name}}
-        <div v-for="(it,ind) in code_map">
-            <div v-for="(i,d) in it">
-                <div v-if="i.code==item.code">
+  <div class="prodb_specialtylist1">
+    <head-component :headinfo=headinfo></head-component>
+    <div class="page-content">
+      <div class="content">
+        <div class="result-box">
+          <div class="two-page-result">
+<!--            <div v-for="(item,index) in code_list"-->
+<!--                 :class="[item.selected?'item-result-box-active':'item-result-box']"-->
+<!--                 @click="toSpecialty2(item)">-->
+<!--              <div v-html="item.name"></div>-->
+<!--            </div>-->
+            <div v-for="(item,index) in code_list">
+              {{item.code}}---{{item.name}}
+              <div v-for="(it,ind) in code_map" >
+                <div v-for="(i,d) in it">
+                  <div v-if="i.code==item.code">
                     {{i.name}}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div v-for="(item,index) in code_list">
+            {{item.code}}---{{item.name}}
+            <div v-for="(it,ind) in code_map">
+              <div v-for="(i,d) in it">
+                <div v-if="i.code==item.code">
+                  {{i.name}}
                 </div>
+              </div>
             </div>
+          </div>
         </div>
+      </div>
     </div>
+    <drag_component></drag_component>
+  </div>
+
+  <!--  <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"-->
+  <!--              v-model:limit="queryParams.pageSize" @pagination="list1"/>-->
 </template>
 
 <script setup>
-    import {codeList} from '@/api/xjc-integratedmachine/environment/occupation.js'
-
-    const router = useRouter()
-    const route = useRoute()
-
-    const param = route.query
-    //
-    const code_list = ref([])
-    const code_map = ref([])
-
-    function list() {
-        codeList({
-            code: param.code
-        }).then(resp => {
-            code_list.value = resp.code_list
-            console.log("ssssss", code_list.value)
-            code_map.value = resp.code_map
-        })
+import {codeList} from '@/api/xjc-integratedmachine/environment/occupation.js'
+import headComponent from '@/views/xjc-integratedmachine/components/head_component.vue'
+import Drag_component from "@/views/xjc-integratedmachine/components/drag_component.vue";
+
+const router = useRouter()
+const route = useRoute()
+const param = route.query
+const headinfo = ref({})
+const code_list = ref([])
+const code_map = ref([])
+function setHeadinfo() {
+  headinfo.value = {
+    title: '专业类',
+    user: {
+      avatar: '头像路径',
+      nickName: '张三'
+    },
+    backUrl: '/xjc-integratedmachine/environment/index',
+    homeUrl: '/xjc-integratedmachine/environment/index',
+    contrast:true,
+  }
+}
+onMounted(() => {
+  setHeadinfo()
+})
+
+function list() {
+  codeList({
+    code: param.code
+  }).then(resp => {
+    code_list.value = resp.code_list
+    console.log("ssssss", code_list.value)
+    code_map.value = resp.code_map
+  })
+}
+
+function toDetail(item) {
+  router.push({
+    path: '/xjc-integratedmachine/environment/occ_details_video',
+    query: {
+      id: item.id
     }
+  })
+}
+
+list()
+</script>
 
-    function toDetail(item) {
-        router.push({
-            path: '/xjc-integratedmachine/environment/occ_details_video',
-            query: {
-                id: item.id
-            }
-        })
+<style scoped lang="scss">
+div,p{
+  margin: 0;
+  padding: 0;
+}
+.prodb_specialtylist1 {
+  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: 100px;
+    bottom: 0;
+    display: flex;
+    justify-content: center;
+    .content{
+      width: 1832px;
+      height: 922px;
+      background: #FFFFFF;
+      border-radius: 35px 35px 35px 35px;
+      margin-top:13px;
     }
+    .result-box {
+      width: 100%;
+      height: 750px;
+      overflow: auto;
 
-    list()
+      .two-page-result {
+        display: flex;
+        flex-wrap: wrap;
+        //justify-content: space-between;
+        align-items: center;
 
+        .item-result-box-active {
+          min-width: 320px;
+          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;
+        }
 
-</script>
+        .item-result-box {
+          min-width: 320px;
+          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;
+        }
 
-<style scoped>
+        .item-result-box:hover {
+          min-width: 320px;
+          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>

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

@@ -0,0 +1,51 @@
+<template>
+  <div v-for="(item,index) in code_list">
+    {{item.code}}---{{item.name}}
+    <div v-for="(it,ind) in code_map">
+      <div v-for="(i,d) in it">
+        <div v-if="i.code==item.code">
+          {{i.name}}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {codeList} from '@/api/xjc-integratedmachine/environment/occupation.js'
+
+const router = useRouter()
+const route = useRoute()
+
+const param = route.query
+//
+const code_list = ref([])
+const code_map = ref([])
+
+function list() {
+  codeList({
+    code: param.code
+  }).then(resp => {
+    code_list.value = resp.code_list
+    console.log("ssssss", code_list.value)
+    code_map.value = resp.code_map
+  })
+}
+
+function toDetail(item) {
+  router.push({
+    path: '/xjc-integratedmachine/environment/occ_details_video',
+    query: {
+      id: item.id
+    }
+  })
+}
+
+list()
+
+
+</script>
+
+<style scoped>
+
+</style>

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

@@ -14,8 +14,8 @@
             <img v-else src="@/assets/images/environment/keys-search.png">
             霍兰徳码查询
           </div>
-          <div :class="[twoPage?'item-box-active':'item-box']" @click="showPage(2)">
-            <img v-if="twoPage" src="@/assets/images/environment/keys-search-h.png">
+          <div :class="[threePage?'item-box-active':'item-box']" @click="showPage(3)">
+            <img v-if="threePage" src="@/assets/images/environment/keys-search-h.png">
             <img v-else src="@/assets/images/environment/keys-search.png">
             关键字查询
           </div>
@@ -30,28 +30,19 @@
             </div>
           </div>
         </div>
-        <div class="two-page" v-show="twoPage">
-          <div class="two-page-search">
-            <el-input
-                v-model="form.name"
-                style="width: 1484px;height: 84px"
-                placeholder="请输入"
-                @change="byKeyword"
-            >
-              <template #suffix>
-                <span style="font-size: 38px;color: #444040;margin-left: 37px;">
-                  X
-                </span>
-              </template>
-            </el-input>
+        <div class="one-page" v-show="twoPage">
+          <div class="top">
+            心理学家霍兰德归纳了六种职业兴趣类型:现实型(R)、研究型(I)、艺术型(A)、社会型(S)、企业型(E)常规型(C)。个体完成职业兴趣测评后，可査询与霍兰德代码(一码、二码、三码)相对应的职业，详细了解相关的职业信息。(注：点击顺序即为霍兰德代码顺序，请按兴趣强弱依次选择类型)-->
+            <div class="search-btn">
+              <img @click="jumpTo('/xjc-integratedmachine/environment/occdb_interestcode')" style="z-index:10" src="@/assets/images/environment/search-btn.png">
+            </div>
           </div>
-          <div class="result-box">
-            <div class="two-page-result">
-              <div v-for="(item,index) in universityList"
-                   :class="[item.selected?'item-result-box-active':'item-result-box']"
-                   @click="toDetail(item)">
-                <div v-html="item.name"></div>
-              </div>
+        </div>
+        <div class="one-page" v-show="threePage">
+          <div class="top">
+            心理学家霍兰德归纳了六种职业兴趣类型:现实型(R)、研究型(I)、艺术型(A)、社会型(S)、企业型(E)常规型(C)。个体完成职业兴趣测评后，可査询与霍兰德代码(一码、二码、三码)相对应的职业，详细了解相关的职业信息。(注：点击顺序即为霍兰德代码顺序，请按兴趣强弱依次选择类型)-->
+            <div class="search-btn">
+              <img @click="jumpTo('/xjc-integratedmachine/environment/occdb_interestcode')" style="z-index:10" src="@/assets/images/environment/search-btn.png">
             </div>
           </div>
         </div>
@@ -370,7 +361,13 @@ function search() {
 
         .two-page-search {
           margin-top: 57px;
-
+          font-weight: 400;
+          font-size: 30px;
+          color: #333333;
+          line-height: 52px;
+          margin-left:40px;
+          margin-top:100px;
+          text-indent:2em;
           ::v-deep .el-input__inner {
             width: 1300px;
             height: 84px;

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

@@ -1,37 +1,124 @@
+<!--<template>-->
+<!--    学职资讯<br>-->
+<!--    <div @click="jumpTo('/xjc-integratedmachine/environment/subject_suitable_profession')">-->
+<!--        学科适合专业-->
+<!--    </div>-->
+<!--    <div @click="jumpTo('/xjc-integratedmachine/environment/subject_evaluation_report1')">-->
+<!--        学科评估报告-->
+<!--    </div>-->
+<!--    <div @click="jumpTo('/xjc-integratedmachine/environment/university_ranking_query1')">-->
+<!--高校排名-->
+<!--    </div>-->
+<!--    <div @click="jumpTo('/xjc-integratedmachine/environment/university_talent_base')">-->
+<!--高校人才基地-->
+<!--    </div>-->
+<!--    <div @click="jumpTo('/xjc-integratedmachine/environment/career_story1')">-->
+<!--生涯故事-->
+<!--    </div>-->
+<!--    <div @click="jumpTo('/xjc-integratedmachine/environment/mycos_info')">-->
+<!--MYcos资讯-->
+<!--    </div>-->
+<!--</template>-->
+
+<!--<script setup>-->
+<!--    const router = useRouter()-->
+<!--    const route = useRoute()-->
+
+<!--    function jumpTo(path) {-->
+<!--        router.push({-->
+<!--            path : path-->
+<!--        })-->
+<!--    }-->
+
+<!--</script>-->
+
+<!--<style scoped>-->
+
+<!--</style>-->
 <template>
-    学职资讯<br>
-    <div @click="jumpTo('/xjc-integratedmachine/environment/subject_suitable_profession')">
-        学科适合专业
-    </div>
-    <div @click="jumpTo('/xjc-integratedmachine/environment/subject_evaluation_report1')">
-        学科评估报告
-    </div>
-    <div @click="jumpTo('/xjc-integratedmachine/environment/university_ranking_query1')">
-高校排名
-    </div>
-    <div @click="jumpTo('/xjc-integratedmachine/environment/university_talent_base')">
-高校人才基地
-    </div>
-    <div @click="jumpTo('/xjc-integratedmachine/environment/career_story1')">
-生涯故事
-    </div>
-    <div @click="jumpTo('/xjc-integratedmachine/environment/mycos_info')">
-MYcos资讯
+  <div class="wake-up-page">
+    <head-component :headinfo=headinfo></head-component>
+    <div class="page-content">
+      <div>
+        <img @click="jumpTo('/xjc-integratedmachine/environment/subject_suitable_profession')" src="@/assets/images/environment/study/card-01.png">
+        <img @click="jumpTo('/xjc-integratedmachine/environment/subject_evaluation_report1')" src="@/assets/images/environment/study/card-02.png">
+        <img @click="jumpTo('/xjc-integratedmachine/environment/university_ranking_query1')" src="@/assets/images/environment/study/card-03.png">
+        <img @click="jumpTo('/xjc-integratedmachine/environment/university_talent_base')" src="@/assets/images/environment/study/card-04.png">
+        <img @click="jumpTo('/xjc-integratedmachine/environment/career_story1')" src="@/assets/images/environment/study/card-05.png">
+        <img @click="jumpTo('/xjc-integratedmachine/environment/mycos_info')" src="@/assets/images/environment/study/card-06.png">
+      </div>
+
     </div>
+<!--    <drag_component></drag_component>-->
+  </div>
 </template>
 
 <script setup>
-    const router = useRouter()
-    const route = useRoute()
+import headComponent from '@/views/xjc-integratedmachine/components/head_component.vue'
+const router = useRouter()
+const headinfo = ref({})
+import { ref, onMounted, onUnmounted } from 'vue';
+import drag_component from "@/views/xjc-integratedmachine/components/drag_component.vue";
+
+function setHeadinfo(){
+  headinfo.value = {
+    title: '学职资讯',
+    user: {
+      avatar: '头像路径',
+      nickName: '张三'
+    },
+    backUrl : '/index',
+    backUrlUse:true,
+  }
+}
+
 
-    function jumpTo(path) {
+function jumpTo(path) {
         router.push({
-            path : path
-        })
-    }
+           path : path
+       })
+  }
+
+onMounted(() => {
+  setHeadinfo()
+})
 
 </script>
 
-<style scoped>
+
+<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;
+   div{
+     width: 1600px;
+     margin: 0 auto;
+     //border: 1px solid;
+     display:flex;
+     justify-content: space-between;
+     flex-wrap: wrap;
+     img{
+       width: 420px;
+       height: 300px;
+       margin-right: 50px;
+       margin-left: 50px;
+       margin-top: 98px;
+       //border: 1px solid;
+
+     }
+   }
+  }
+
+}
+
 
 </style>
+

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

@@ -1,51 +1,184 @@
 <template>
-    学科评估报告1
-    <br>
-    学科门类<br><br><br><br><br>
-    <div v-for="(item,index) in data_list" @click="detail(item.sepeialitt)">
-        {{item.sepeialitt}}
+  <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>
-    <br>----------------<br>
-    专业<br><br><br><br><br>
-    <div v-for="(item,index) in subjectreportdetail_list" @click="jumpToReport2(item)">
-        {{item.subjectname}}
-    </div>
-
+    <drag_component></drag_component>
+  </div>
 
 </template>
 
 <script setup>
-    import {subjectreportlist,subjectreportdetail} from '@/api/xjc-integratedmachine/environment/tscareer.js'
-    const router = useRouter()
-    const data_list = ref([])
-    function list() {
-        subjectreportlist().then(resp =>{
-            console.log(resp)
-            data_list.value = resp.getsepeiality
-
-        })
+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
     }
-    const subjectreportdetail_list = ref([])
-    function detail(data){
-        subjectreportdetail({
-            id : data
-        }).then(resp =>{
-            subjectreportdetail_list.value = resp.subjectreportdetail
-        })
+  })
+}
+
+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;
     }
 
-    function jumpToReport2(item){
-        router.push({
-            path : '/xjc-integratedmachine/environment/subject_evaluation_report2',
-            query :{
-                id : item.subjectcode
-            }
-        })
+    .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;
     }
 
-    list()
-</script>
+    .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 scoped>
+  }
+}
 
 </style>

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

@@ -1,42 +1,178 @@
 <template>
-    学科适合专业<br>
-    高中学科<br><br><br><br>
-    <div v-for="(item,index) in subject" @click="detail(item.value)">
-        {{item.value}}
-    </div>
-<br><br><br><br><br>
-    <div v-for="(item,index) in data_list" @click="jumpToPro_details_video(item)">
-        {{item.major}}
+  <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.selected?'item-result-box-active':'item-result-box']"
+               @click="detail(item.value)">
+            <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 {subjectspecialdetail} from '@/api/xjc-integratedmachine/environment/tscareer.js'
-    const router = useRouter()
-    const {proxy} = getCurrentInstance()
-    const {subject} = proxy.useDict('subject')
-
-    const data_list = ref([])
-    function detail(data) {
-        subjectspecialdetail({
-            id : data
-        }).then(resp =>{
-            data_list.value = resp.subjectspecialdetail
-        })
-    }
+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 jumpToPro_details_video(item){
-        router.push({
-            path : '/xjc-integratedmachine/environment/pro_details_video',
-            query :{
-                id : item.majorid
-            }
-        })
+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 detail(data) {
+  subjectspecialdetail({
+    id : data
+  }).then(resp =>{
+    data_list.value = resp.subjectspecialdetail
+  })
+}
+
+function jumpToPro_details_video(item){
+  router.push({
+    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;
+  .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>

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

@@ -1,56 +1,408 @@
+
 <template>
-    高校人才基地
-    <el-el-card>
-        <div @click="changeTab('zygcs')">卓越工程师</div>
-        <div @click="changeTab('zdsys')">重点实验室</div>
-        <div @click="changeTab('lkjd')">理科基地</div>
-        <div @click="changeTab('wkjd')">文科基地</div>
-        <div @click="changeTab('gkjd')">工科基地</div>
-        <div @click="changeTab('zfjh')">珠峰计划</div>
-    </el-el-card>
-    <div v-show="tab == 'zygcs'" v-html="data_list[0].content">
-    </div>
-    <div v-show="tab == 'zdsys'" v-html="data_list[1].content">
+  <div class="pro_details_video">
+    <head-component :headinfo=headinfo></head-component>
+    <div class="page-content">
+      <div class="page-img-box">
 
+        <div class="bottom-content">
+          <div class="tab-box">
+            <div :class="[onePage?'item-box-active':'item-box']" @click="showPage(1)">
+              卓越工程师
+            </div>
+            <div :class="[twoPage?'item-box-active':'item-box']" @click="showPage(2)">
+              重点实验室
+            </div>
+            <div :class="[threePage?'item-box-active':'item-box']" @click="showPage(3)">
+              理科基地
+            </div>
+            <div :class="[fourPage?'item-box-active':'item-box']" @click="showPage(4)">
+              文科基地
+            </div>
+            <div :class="[fivePage?'item-box-active':'item-box']" @click="showPage(5)">
+              工科基地
+            </div>
+            <div :class="[sixPage?'item-box-active':'item-box']" @click="showPage(6)">
+              珠峰计划
+            </div>
+          </div>
+          <div class="one-page" v-show="onePage">
+            <p class="title">卓越工程师</p>
+            <div class="info"  v-html="data_list[0].content"></div>
+          </div>
+          <div class="one-page" v-show="twoPage">
+            <p class="title">重点实验室</p>
+            <div class="info"  v-html="data_list[1].content"></div>
+          </div>
+          <div class="one-page" v-show="threePage">
+            <p class="title">理科基地</p>
+            <div class="info"  v-html="data_list[2].content"></div>
+          </div>
+          <div class="one-page" v-show="fourPage">
+            <p class="title">文科基地</p>
+            <div class="info"  v-html="data_list[3].content"></div>
+          </div>
+          <div class="one-page" v-show="fivePage">
+            <p class="title">工科基地</p>
+            <div class="info"  v-html="data_list[4].content"></div>
+          </div>
+          <div class="one-page" v-show="fivePage">
+            <p class="title">珠峰计划</p>
+            <div class="info"  v-html="data_list[5].content"></div>
+          </div>
+        </div>
+      </div>
     </div>
-    <div v-show="tab == 'lkjd'" v-html="data_list[2].content">
+  </div>
+</template>
 
-    </div>
-    <div v-show="tab == 'wkjd'" v-html="data_list[3].content">
+<script setup>
+import videojs from 'video.js';
+import 'video.js/dist/video-js.css';
+import collectionComponent from '@/views/xjc-integratedmachine/components/collection_component.vue'
+import {specialtyDetail} from '@/api/xjc-integratedmachine/environment/specialty.js'
+import {ref} from "vue";
+import headComponent from '@/views/xjc-integratedmachine/components/head_component.vue'
+import Drag_component from "@/views/xjc-integratedmachine/components/drag_component.vue";
+import {handleThemeStyle} from "@/utils/theme.js";
+import useSettingsStore from "@/store/modules/settings.js";
 
-    </div>
-    <div v-show="tab == 'gkjd'" v-html="data_list[4].content">
+const {proxy} = getCurrentInstance()
+const {educationlevel} = proxy.useDict('educationlevel')
+import {talentbase} from '@/api/xjc-integratedmachine/environment/tscareer.js'
 
-    </div>
-    <div v-show="tab == 'zfjh'" v-html="data_list[5].content">
+const router = useRouter()
+const route = useRoute()
+const tabIndex = ref("zyjd")
+const headinfo = ref({})
+const onePage = ref(true)
+const twoPage = ref(false)
+const threePage = ref(false)
+const fourPage = ref(false)
+const fivePage = ref(false)
+const sixPage = ref(false)
 
-    </div>
+function setHeadinfo(){
+  headinfo.value = {
+    title: '学职资讯',
+    user: {
+      avatar: '头像路径',
+      nickName: '张三'
+    },
+    backUrl : '/xjc-integratedmachine/environment/query_universitydb_conditions',
+    homeUrl:'/xjc-integratedmachine/environment/index',
+    contrast:true,
+    contrastType:'major'
+  }
+}
 
+onMounted(() => {
+  setHeadinfo()
 
+})
 
+const param = route.query
 
 
-</template>
 
-<script setup>
+const entity = ref({})
+const kaishe_list = ref([])
+const pinggu_list = ref([])
+const similar_list = ref([])
+const collectionRef = ref(null)
+const collection_data = ref({})
+function setCollection_data(){
+  collection_data.value = {
+    contentType: 2,
+    contentId: param.id,
+    contentVal: entity.value,
+    source:'pro_details_video'
+  }
+  console.log("entity.value",entity.value)
+}
+function detail() {
+  specialtyDetail({
+    id: param.id
+  }).then(resp => {
+    entity.value = resp.entity
+    kaishe_list.value = resp.kaishe_list
+    pinggu_list.value = resp.pinggu_list
+    similar_list.value = resp.similar_list
+    entity.value.kaishe_list = kaishe_list
+  })
+  setTimeout(() => {
+    setCollection_data();
+    collectionRef.value.isContrast(entity.value);
+    collectionRef.value.getSource('pro_details_video');
+  }, 500);
+}
+
+
+const showPage = (val) => {
+  if (val === 1) {
+    onePage.value = true;
+    twoPage.value = false;
+    threePage.value = false;
+    fourPage.value = false;
+    fivePage.value = false;
+    sixPage.value = false;
+
+  } else if (val === 2) {
+    onePage.value = false;
+    twoPage.value = true;
+    threePage.value = false;
+    fourPage.value = false;
+    fivePage.value = false;
+    sixPage.value = false;
+  } else if (val === 3) {
+    onePage.value = false;
+    twoPage.value = false;
+    threePage.value = true;
+    fourPage.value = false;
+    fivePage.value = false;
+    sixPage.value = false;
+  } else if (val === 4) {
+    onePage.value = false;
+    twoPage.value = false;
+    threePage.value = false;
+    fourPage.value = true;
+    fivePage.value = false;
+    sixPage.value = false;
+  } else if (val === 5) {
+    onePage.value = false;
+    twoPage.value = false;
+    threePage.value = false;
+    fourPage.value = false;
+    fivePage.value = true;
+  }
+}
+detail()
+function dialogBeforeClose() {
+  onePage.value = true;
+  twoPage.value = false;
+  threePage.value = false;
+  fourPage.value = false;
+  fivePage.value = false;
+  sixPage.value = false
+  senvenPage.value = false
+  eightPage.value = false;
+}
+
+
+
+const tab = ref("zygcs")
+
+function changeTab(path) {
+  tab.value = path
+}
+const data_list = ref([])
+function base() {
+  talentbase({}).then(resp =>{
+    data_list.value = resp.talentbase
+  })
+}
+base();
+</script>
+
+<style scoped lang="scss">
+p, div {
+  margin: 0;
+  padding: 0;
+}
+
+.pro_details_video {
+  background: url('@/assets/images/environment/university-detail.png') no-repeat;
+  background-size: 1920px 1080px;
+  z-index: 10;
+  width: 100%;
+  height: 1080px;
+
+  .page-content {
+    width: 100%;
+    position: absolute;
+    top: 100px;
+    bottom: 0;
+    display: flex;
+    justify-content: center;
+  }
+
+  .page-img-box {
+    width: 1832px;
+    height: 922px;
+    margin-top: 13px;
+    //background: rgba(255, 255, 255, 0.4);
+    border-radius: 35px 35px 35px 35px;
+    display: flex;
+    flex-direction: column;
 
-    import {talentbase} from '@/api/xjc-integratedmachine/environment/tscareer.js'
 
-    const tab = ref("zygcs")
+  }
 
-    function changeTab(path) {
-        tab.value = path
+
+  .bottom-content {
+    //margin-top: 10px;
+    border: 1px solid;
+    height: 922px;
+    .tab-box {
+      display: flex;
+      padding-right: 279px;
+      //height: 922px;
+      img {
+        width: 36px;
+        height: 36px;
+        margin-right: 12px;
+      }
     }
-    const data_list = ref([])
-    function base() {
-        talentbase({}).then(resp =>{
-            data_list.value = resp.talentbase
-        })
+
+
+    .item-box {
+      text-align: center;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 202px;
+      height: 65px;
+      box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.09);
+      border-radius: 5px 5px 0px 0px;
+      font-weight: 400;
+      font-size: 32px;
+      color: #979797;
+
     }
-    base();
 
-</script>
+    .item-box-active {
+      text-align: center;
+      color: #000000;
+      background: #FFFFFF;
+      font-weight: bold;
+      font-size: 32px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 202px;
+      height: 65px;
+      background: #FFFFFF;
+      box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.09);
+      border-radius: 5px 5px 0px 0px;
+
+    }
+  }
+
+  //.editor-content div,
+  //.editor-content span,
+  //.editor-content p,
+  //.editor-content h1,
+  //.editor-content h2,
+  //.editor-content h3,
+  //.editor-content h4,
+  //.editor-content h5,
+  //.editor-content h6 {
+  //  font-size: 26px !important;
+  //  line-height: 37px !important;
+  //}
+
+  .editor-content div,
+  .editor-content span,
+  .editor-content p {
+    text-indent: 2em !important;
+    text-align: left !important;
+  }
+}
+
+.one-page {
+  width: 1832px;
+  height: 836px;
+  background: #FFFFFF;
+  border-radius: 0px 0px 35px 35px;
+  border: 1px solid #FFFFFF;
+  overflow: auto;
+  line-height: 32px;
+  padding-top: 10px;
+  .title {
+    height: 40px;
+    border-left: 8px #8CE349 solid;
+    margin-left: 33px;
+    font-weight: 400;
+    font-size: 28px;
+    color: #333333;
+    line-height: 40px;
+    padding-left: 11px;
+  }
+
+  .info {
+    text-indent: 2em;
+    font-weight: 400;
+    font-size: 28px;
+    color: #333333;
+    line-height: 40px;
+  }
+
+  .select-div {
+    width: 100%;
+    height: 100px;
+    font-weight: 400;
+    font-size: 30px;
+    color: #333333;
+    line-height: 40px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 21px;
+
+    .select-box {
+      width: 300px;
+      height: 90px;
+      border: 1px solid #CCCCCC;
+      line-height: 90px;
+      text-align: center;
+      margin-left: 10px;
+    }
+
+    .click-search {
+      width: 170px;
+      height: 90px;
+      background: linear-gradient(180deg, #73EE71 0%, #0ACB63 100%);
+      border-radius: 5px;
+      font-weight: 400;
+      font-size: 24px;
+      color: #FFFFFF;
+      margin-left: 20px;
+    }
+  }
+
+  ::v-deep .el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th {
+    height: 74px !important;
+    font-size: 24px;
+    color: #1E410E;
+  }
+
+  ::v-deep .el-table tr {
+    height: 74px !important;
+    font-size: 20px;
+  }
+
+  ::v-deep .el-dialog__title {
+    font-size: 34px !important;
+  }
+
+  ::v-deep .el-dialog {
+    margin-top: 0px !important;
+  }
+
+  ::v-deep .el-dialog__headerbtn .el-dialog__close {
+    font-size: 30px !important;
+  }
 
-<style scoped>
+}
+.dict-dialog{
+  max-width: 570px;
+  height: 800px;
+  overflow: auto;
+  .dict-box {
+    font-size: 24px;
+    line-height: 34px;
+    color: #333333;
+  }
+}
 
-</style>
+</style>