Merge remote-tracking branch 'origin/master'

# Conflicts:
#	vite.config.js

src/assets/styles/global.css

@@ -0,0 +1,3 @@
+.common-img-button{
+    cursor: pointer;
+}

src/router/router_environment.js

@@ -148,15 +148,15 @@ const router = [
         path: '/xjc-integratedmachine/environment/info_detail',
         component: () => import('@/views/xjc-integratedmachine/environment/info_detail.vue'),
     },
-    //AI生涯访谈1
+    //AI生涯访谈角色
     {
-        path: '/xjc-integratedmachine/environment/ai_career_interview1',
-        component: () => import('@/views/xjc-integratedmachine/environment/ai_career_interview1.vue'),
+        path: '/xjc-integratedmachine/environment/ai_career_interview',
+        component: () => import('@/views/xjc-integratedmachine/environment/ai_interview/ai_career_interview.vue'),
     },
-    //AI生涯访谈2
+    //AI生涯访谈聊天
     {
-        path: '/xjc-integratedmachine/environment/ai_career_interview2',
-        component: () => import('@/views/xjc-integratedmachine/environment/ai_career_interview2.vue'),
+        path: '/xjc-integratedmachine/environment/ai_career_interview_chat',
+        component: () => import('@/views/xjc-integratedmachine/environment/ai_interview/ai_career_interview_chat.vue'),
     },
     //高校对比
     {

src/views/xjc-integratedmachine/common/ai/chat.vue

@@ -51,7 +51,7 @@
                                     {{expandIndexList.includes(index)?'折叠':'展开'}}
                                 </el-button>
                             </div>
-                            <el-button @click="ttsStartPlay(item.content, index)">{{playActiveIndex === index ?'停止':'播放'}}</el-button>
+                            <el-button @click="ttsStartPlay(item.content, index)">{{playActiveIndex === index && playButtonFlag ?'停止':'播放'}}</el-button>
                         </div>
                     </div>
                 </div>
@@ -598,6 +598,7 @@
 
     function ttsStartPlay(text, index) {
         playActiveIndex.value = index
+        playButtonFlag.value = !playButtonFlag.value;
         if (btnStatus === "UNDEFINED") {
             // 开始合成
             connectWebSocket(text.replace(/<\/?.+?\/?>/g,''));

src/views/xjc-integratedmachine/components/head_component.vue

@@ -7,7 +7,9 @@
       <div class="head-title">
         <div v-if="headinfo.title">{{headinfo.title}}</div>
       </div>
-      <img v-show="headinfo.contrast" class="contrast" src="@/assets/images/environment/contrast-btn.png" @click="contrastTo">
+      <div class="contrast-box">
+        <img  v-show="headinfo.contrast" class="contrast" src="@/assets/images/environment/contrast-btn.png" @click="contrastTo">
+      </div>
       <div class="head-right" v-if="!headinfo.isLogin">
         <div class="right-user">
           <img  src="@/assets/images/wakeup/user.png" @click="backTo" alt="404">
@@ -36,7 +38,24 @@
       }else {
         router.go(-1);
       }
-      emit('backTo');
+      // emit('backTo');
+      clearData()
+    }
+    function clearData(){
+      let contrastList = [];
+      console.log("props.headinfo.contrastType",props.headinfo.contrastType)
+      if(props.headinfo.contrastType === 'major'){
+        contrastList = JSON.parse(sessionStorage.getItem('majorList'));
+        if(contrastList && contrastList.length >= 2 ){
+          sessionStorage.removeItem('majorList');
+        }
+      }else if(props.headinfo.contrastType === 'university'){
+        contrastList = JSON.parse(sessionStorage.getItem('contrastList'));
+        if(contrastList && contrastList.length >= 2 ){
+          sessionStorage.removeItem('contrastList');
+        }
+      }
+
     }
     function homeUrlTo() {
         router.push({
@@ -46,13 +65,11 @@
     function contrastTo(){
       let contrastList = [];
       if(props.headinfo.contrastType === 'major'){
-        console.log("major")
          contrastList = JSON.parse(sessionStorage.getItem('majorList'));
       }else if(props.headinfo.contrastType === 'university'){
-        console.log("university")
          contrastList = JSON.parse(sessionStorage.getItem('contrastList'));
       }
-      if(contrastList.length <= 2 ){
+      if(contrastList && contrastList.length <= 2 ){
        //暂无
       }else {
         ElMessage({
@@ -115,10 +132,13 @@
         font-size: 48px;
         color: #060606;
       }
-      .contrast{
+      .contrast-box{
         width: 209px;
         height: 80px;
-        margin-top: 15px;
+        img{
+          width: 209px;
+          height: 80px;
+        }
       }
       .head-right{
           width:750px;

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

@@ -1,11 +0,0 @@
-<template>
-    AI生涯访谈2
-</template>
-
-<script setup>
-
-</script>
-
-<style scoped>
-
-</style>

src/views/xjc-integratedmachine/environment/ai_interview/ai_career_interview.vue

@@ -0,0 +1,302 @@
+<template>
+    <div class="ai_career_interview">
+        <head-component :headinfo=headinfo></head-component>
+        <div class="page-content">
+            <div class="page-box">
+                <div>
+                    <div class="two-page">
+                        <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>
+                                开始查询
+                            </div>
+<!--                            <img @click="search" style="z-index:10" src="@/assets/images/environment/search-btn.png">-->
+                        </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>-->
+
+                    </div>
+                    <div style="overflow: auto;height: 720px;margin-top: 16px">
+                        <div class="hot-search">
+                            <div class="title">热门搜索：</div>
+                            <div style="display: flex;flex-wrap:wrap;
+                        margin-top: 11px;margin-left: 119px;margin-right: 91px">
+                                <div class="search-item">计算机软件工程技术人员</div>
+                                <div class="search-item">教师</div>
+                                <div class="search-item">心理咨询师</div>
+                                <div class="search-item">实施运维工程师</div>
+                                <div class="search-item">计算机软件工程技术人员</div>
+                                <div class="search-item">计算机软件工程技术人员</div>
+                                <div class="search-item">计算机软件工程技术人员</div>
+                                <div class="search-item">计算机软件工程技术人员</div>
+                                <div class="search-item">计算机软件工程技术人员</div>
+                                <div class="search-item">教师</div>
+                                <div class="search-item">心理咨询师</div>
+                                <div class="search-item">实施运维工程师</div>
+                                <div class="search-item">计算机软件工程技术人员</div>
+                                <div class="search-item">计算机软件工程技术人员</div>
+                                <div class="search-item">计算机软件工程技术人员</div>
+                                <div class="search-item">计算机软件工程技术人员</div>
+                            </div>
+                        </div>
+                        <div class="hot-search">
+                            <div class="title">历史查询：</div>
+                            <div style="display: flex;flex-wrap:wrap;
+                        margin-top: 11px;margin-left: 119px;margin-right: 91px">
+                                <div class="search-item">计算机软件工程技术人员</div>
+                                <div class="search-item">教师</div>
+                                <div class="search-item">心理咨询师</div>
+                                <div class="search-item">实施运维工程师</div>
+                                <div class="search-item">计算机软件工程技术人员</div>
+                                <div class="search-item">计算机软件工程技术人员</div>
+                                <div class="search-item">计算机软件工程技术人员</div>
+                                <div class="search-item">计算机软件工程技术人员</div>
+                                <div class="search-item">教师</div>
+                                <div class="search-item">心理咨询师</div>
+                                <div class="search-item">实施运维工程师</div>
+                                <div class="search-item">计算机软件工程技术人员</div>
+                                <div class="search-item">计算机软件工程技术人员</div>
+                                <div class="search-item">计算机软件工程技术人员</div>
+                                <div class="search-item">计算机软件工程技术人员</div>
+                            </div>
+                        </div>
+                    </div>
+
+                </div>
+                <drag_component></drag_component>
+            </div>
+        </div>
+    </div>
+
+</template>
+
+<script setup>
+    import {onMounted, ref} 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({})
+
+    const form = ref({
+        areaid: null,
+        areaname: null,
+        educationlevel: null,
+        educationlevelName: null,
+        characteristic: null,
+        characteristicName: null,
+        name: null
+    })
+
+    function setHeadinfo(){
+        headinfo.value = {
+            title: 'AI生涯访谈',
+            user: {
+                avatar: '头像路径',
+                nickName: '张三'
+            },
+            backUrl : '/xjc-integratedmachine/environment/index'
+        }
+    }
+
+    onMounted(() => {
+        setHeadinfo()
+    })
+
+</script>
+
+<style scoped lang="scss">
+    p{
+        margin: 0;
+        padding: 0;
+    }
+    .ai_career_interview{
+        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;
+
+        }
+
+    }
+
+
+    .two-page {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .two-page-search {
+            display: flex;
+
+            margin-top: 57px;
+
+            ::v-deep .el-input__inner {
+                font-size: 24px;
+                margin-left: 34px;
+            }
+
+            ::v-deep .el-input__suffix {
+                font-size: 100px;
+                width: 100px;
+                height: 100px;
+
+            }
+
+            ::v-deep .el-input__wrapper {
+                background: #E2E2E2;
+                box-shadow: none;
+                height: 84px;
+                width: 1484px;
+            }
+            div{
+                width: 170px;
+                height: 84px;
+                background: linear-gradient( 180deg, #73EE71 0%, #0ACB63 100%);
+                border-radius: 0px 5px 5px 0px;
+
+                font-weight: 400;
+                font-size: 24px;
+                color: #FFFFFF;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+            }
+        }
+
+        .result-box {
+            width: 1484px;
+            height: 750px;
+            overflow: auto;
+
+            .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;
+                }
+
+                .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;
+                }
+            }
+        }
+
+    }
+
+    .hot-search {
+        .title{
+            height: 52px;
+            /*margin-top: 16px;*/
+            margin-left: 123px;
+            font-weight: bold;
+            font-size: 24px;
+            color: #333333;
+            line-height: 52px;
+            letter-spacing: 3px;
+            text-align: left;
+            font-style: normal;
+            text-transform: none;
+
+        }
+    }
+
+    .search-item{
+        height: 80px;
+        border-radius: 5px;
+        border: 1px solid #B3B3B3;
+        margin-right: 26px;
+        margin-bottom: 26px;
+        padding: 0 44px;
+        font-weight: 400;
+        font-size: 24px;
+        color: #333333;
+        display: flex;
+        align-items: center;
+        letter-spacing: 3px;
+        text-align: left;
+        font-style: normal;
+        text-transform: none;
+    }
+</style>

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

@@ -14,18 +14,18 @@
             <img v-else src="@/assets/images/environment/score.png">
             主修课程
           </div>
-          <div :class="[twoPage?'item-box-active':'item-box']" @click="showPage(3)">
-            <img v-if="twoPage" src="@/assets/images/environment/score-h.png">
+          <div :class="[threePage?'item-box-active':'item-box']" @click="showPage(3)">
+            <img v-if="threePage" src="@/assets/images/environment/score-h.png">
             <img v-else src="@/assets/images/environment/score.png">
             专业解读
           </div>
-          <div :class="[twoPage?'item-box-active':'item-box']" @click="showPage(4)">
-            <img v-if="twoPage" src="@/assets/images/environment/score-h.png">
+          <div :class="[fourPage?'item-box-active':'item-box']" @click="showPage(4)">
+            <img v-if="fourPage" src="@/assets/images/environment/score-h.png">
             <img v-else src="@/assets/images/environment/score.png">
             就业前景与方向
           </div>
-          <div :class="[twoPage?'item-box-active':'item-box']" @click="showPage(5)">
-            <img v-if="twoPage" src="@/assets/images/environment/score-h.png">
+          <div :class="[fivePage?'item-box-active':'item-box']" @click="showPage(5)">
+            <img v-if="fivePage" src="@/assets/images/environment/score-h.png">
             <img v-else src="@/assets/images/environment/score.png">
             开设院校
           </div>
@@ -45,86 +45,118 @@
             <tr class="two-tr">
               <td>专业代码</td>
               <td class="text-td" v-for="(item,index) in contrastData" :key="index">
-                <p>创建时间：<span>{{ item.ctime }}</span></p>
-                <p>所在地区：<span>{{ item.areaname }}</span></p>
-                <p>院校隶属：<span>{{ item.subjection }}</span></p>
-                <p class="text-td-p">院校类型：<span>  <dict-tag :options="school_category"
-                                                                :value="item.categoryid"/></span></p>
+                <p style="text-align: center">{{ item.code }}</p>
               </td>
             </tr>
             <tr>
               <td>学科门类</td>
-              <td v-for="(item,index) in contrastData" :key="index">
-                <div class="school-level-box">
-                  <p class="school-level" style="background-color: #B3FC7C" v-show="item.nef==='1'">985</p>
-                  <p class="school-level" style="background-color: #BBF88D" v-show="item.too==='1'">211</p>
-                  <p class="school-level" style="background-color: #8CE349" v-show="item.istopschool==='1'">
-                    一流大学</p>
-                  <p class="school-level" style="background-color: #9DFF51" v-show="item.istopsubject==='1'">
-                    一流学科</p>
-                  <p class="school-level" style="background-color: #8ADFC4" v-show="item.self==='1'">强</p>
-                  <p class="school-level" style="background-color: #1EC590" v-show="item.graduate==='1'">研</p>
-                </div>
+              <td class="text-td" v-for="(item,index) in contrastData" :key="index">
+                <p style="text-align: center">{{ item.subjectcategories }}</p>
               </td>
             </tr>
             <tr>
               <td>一级学科</td>
-              <td v-for="(item,index) in contrastData" class="text-td ">
-                <dict-tag :options="property" :value="item.property"/>
+              <td class="text-td" v-for="(item,index) in contrastData" :key="index">
+                <p style="text-align: center">{{ item.firstsubject }}</p>
               </td>
             </tr>
             <tr>
               <td>授权学位</td>
-              <td v-for="(item,index) in contrastData" :key="index" class="text-td">{{ item.address }}</td>
+              <td v-for="(item,index) in contrastData" :key="index" >
+                <p>{{ item.degree }}</p>
+                </td>
             </tr>
             <tr>
               <td>修学年限</td>
-              <td v-for="(item,index) in contrastData" :key="index" class="text-td">{{ item.address }}</td>
+              <td v-for="(item,index) in contrastData" :key="index" class="text-td">{{ item.years }}</td>
             </tr>
             </tbody>
           </table>
         </div>
         <div class="two-page" v-show="twoPage">
+          <table class="table table-bordered">
+            <thead>
+            <tr class="one-tr">
+              <td class="first-title">专业名称</td>
+              <td v-for="(item,index) in contrastData" :key="index">{{ item.name }}</td>
+            </tr>
+            </thead>
+            <tbody>
+            <tr v-show="false"></tr>
+            <tr class="two-tr">
+              <td>主修课程</td>
+              <td class="text-td" v-for="(item,index) in contrastData" :key="index">
+                <p style="text-align: center" v-html="item.course"></p>
+              </td>
+            </tr>
+            </tbody>
+          </table>
         </div>
-      </div>
-      <drag_component></drag_component>
-    </div>
-    <div>
-      <!--院校属地-->
-      <el-dialog v-model="showAreaChoose" width="1000px" append-to-body>
-        <div class="dialog-box">
-          <div v-for="dict in gk_province" :key="dict.value" @click="chooseArea(dict)">
-            <p>
-              {{ dict.label }}
-            </p>
-          </div>
-        </div>
-      </el-dialog>
+        <div class="three-page" v-show="threePage">
+          <table class="table table-bordered">
+            <thead>
+            <tr class="one-tr">
+              <td class="first-title">专业名称</td>
+              <td v-for="(item,index) in contrastData" :key="index">{{ item.name }}</td>
+            </tr>
+            </thead>
+            <tbody>
+            <tr v-show="false"></tr>
+            <tr class="two-tr">
+              <td>专业解读</td>
+              <td class="text-td" v-for="(item,index) in contrastData" :key="index">
+                <div class="info" v-if="!item.describe"  v-html="item.describe"></div>
+                <div class="info" v-else >暂无</div>
 
-    </div>
-    <div>
-      <!--学历层次-->
-      <el-dialog v-model="showEducationlevel" width="1000px" append-to-body>
-        <div class="dialog-box dialog-box2">
-          <div v-for="dict in educationlevel" :key="dict.value" @click="chooseEducationlevel(dict)">
-            <p>
-              {{ dict.label }}
-            </p>
-          </div>
+<!--                <p style="text-align: center" >{{ item.code }}</p>-->
+              </td>
+            </tr>
+            </tbody>
+          </table>
         </div>
-      </el-dialog>
-    </div>
-    <div>
-      <!--特色-->
-      <el-dialog v-model="showCharacteristic" width="1000px" append-to-body>
-        <div class="dialog-box">
-          <div v-for="dict in characteristic" :key="dict.value" @click="chooseCharacteristic(dict)">
-            <p>
-              {{ dict.label }}
-            </p>
-          </div>
+        <div class="four-page" v-show="fourPage">
+          <table class="table table-bordered">
+            <thead>
+            <tr class="one-tr">
+              <td class="first-title">专业名称</td>
+              <td v-for="(item,index) in contrastData" :key="index">{{ item.name }}</td>
+            </tr>
+            </thead>
+            <tbody>
+            <tr v-show="false"></tr>
+            <tr class="two-tr">
+              <td>就业前景与方向</td>
+              <td class="text-td" v-for="(item,index) in contrastData" :key="index">
+                <div class="info"  v-html="item.describe"></div>
+                <!--                <p style="text-align: center" >{{ item.code }}</p>-->
+              </td>
+            </tr>
+            </tbody>
+          </table>
+        </div>
+        <div class="five-page" v-show="fivePage">
+          <table class="table table-bordered">
+            <thead>
+            <tr class="one-tr">
+              <td class="first-title">专业名称</td>
+              <td v-for="(item,index) in contrastData" :key="index">{{ item.name }}</td>
+            </tr>
+            </thead>
+            <tbody>
+            <tr v-show="false"></tr>
+            <tr class="two-tr">
+              <td>开设院校</td>
+              <td class="school-box" v-for="(item,index) in contrastData" :key="index">
+                <div class="info"  v-for="(item,index) in item.kaishe_list">
+                  {{ item.name }}
+                </div>
+              </td>
+            </tr>
+            </tbody>
+          </table>
         </div>
-      </el-dialog>
+      </div>
+      <drag_component></drag_component>
     </div>
   </div>
 
@@ -142,6 +174,8 @@ const router = useRouter()
 const onePage = ref(true)
 const twoPage = ref(false)
 const threePage = ref(false)
+const fourPage = ref(false)
+const fivePage = ref(false)
 const contrastList = ref(false)
 
 const form = ref({
@@ -158,7 +192,7 @@ const headinfo = ref({})
 
 function setHeadinfo() {
   headinfo.value = {
-    title: '高校信息查询',
+    title: '',
     user: {
       avatar: '头像路径',
       nickName: '张三'
@@ -174,14 +208,32 @@ const showPage = (val) => {
     onePage.value = true;
     twoPage.value = false;
     threePage.value = false;
+    fourPage.value = false;
+    fivePage.value = false;
   } else if (val === 2) {
     onePage.value = false;
     twoPage.value = true;
     threePage.value = false;
+    fourPage.value = false;
+    fivePage.value = false;
   } else if (val === 3) {
     onePage.value = false;
     twoPage.value = false;
     threePage.value = true;
+    fourPage.value = false;
+    fivePage.value = false;
+  }else if (val === 4) {
+    onePage.value = false;
+    twoPage.value = false;
+    threePage.value = false;
+    fourPage.value = true;
+    fivePage.value = false;
+  }else if (val === 5) {
+    onePage.value = false;
+    twoPage.value = false;
+    threePage.value = false;
+    fourPage.value = false;
+    fivePage.value = true;
   }
 }
 
@@ -204,7 +256,7 @@ onMounted(() => {
 
 const contrastData = ref({})
 function getData() {
-  const contrastList = sessionStorage.getItem('contrastList') && JSON.parse(sessionStorage.getItem('contrastList'));
+  const contrastList = sessionStorage.getItem('majorList') && JSON.parse(sessionStorage.getItem('majorList'));
   contrastData.value = contrastList;
   console.log("{{contrastA.name}}", contrastData.value)
 }
@@ -340,7 +392,6 @@ p, div {
     bottom: 0;
     display: flex;
     justify-content: space-between;
-
     .content-left {
       width: 244px;
       height: 957px;
@@ -397,7 +448,7 @@ p, div {
       border-radius: 35px 35px 35px 35px;
       margin-top: 13px;
       margin-right: 24px;
-
+      overflow: auto;
       .one-page {
         display: flex;
         justify-content: center;
@@ -576,6 +627,7 @@ p, div {
               font-size: 32px;
               color: #333333;
               line-height: 52px;
+              text-align: center;
             }
 
             td:nth-child(3) {
@@ -587,6 +639,7 @@ p, div {
               font-size: 32px;
               color: #333333;
               line-height: 52px;
+              text-align: center;
             }
           }
           tr:nth-child(6) {
@@ -613,6 +666,7 @@ p, div {
               font-size: 32px;
               color: #333333;
               line-height: 52px;
+              text-align: center;
             }
 
             td:nth-child(3) {
@@ -625,12 +679,12 @@ p, div {
               font-size: 32px;
               color: #333333;
               line-height: 52px;
+              text-align: center;
             }
           }
           .school-level-box {
             display: flex;
             justify-content: left;
-            //margin-top: 32px;
             flex-wrap: wrap;
             width: 620px;
             padding-left: 30px;
@@ -651,13 +705,9 @@ p, div {
           }
 
           .text-td {
-            //text-align: center;
             width: 300px;
-            //border: 1px solid;
-            padding-left: 150px;
             .text-td-p {
               display: flex;
-              //justify-content: center;
             }
           }
         }
@@ -749,61 +799,181 @@ p, div {
             }
           }
 
-          tr:nth-child(3) {
+
+          .text-td {
+            text-align: center;
+
+            .text-td-p {
+              display: flex;
+              justify-content: center;
+            }
+          }
+        }
+
+      }
+       .three-page {
+         display: flex;
+         flex-direction: column;
+         align-items: center;
+
+         .table {
+           width: 1526px;
+           height: 887px;
+           margin-top: 25px;
+
+           .one-tr {
+             font-weight: 400;
+             font-size: 32px;
+             color: #FFFFFF;
+             text-align: center;
+
+             td:nth-child(1) {
+               width: 290px;
+               height: 100px;
+               background: #1E410E;
+               border-radius: 32px 4px 4px 4px;
+               border: 8px solid #E0EEF4;
+
+             }
+
+             td:nth-child(2) {
+               width: 620px;
+               height: 100px;
+               background: #1EC590;
+               border-top: 8px solid #E0EEF4;
+               border-right: 8px solid #E0EEF4;
+               border-bottom: 8px solid #E0EEF4;
+             }
+
+             td:nth-child(3) {
+               width: 616px;
+               height: 119px;
+               background: #8CE349;
+               border-radius: 4px 32px 4px 4px;
+               border-top: 8px solid #E0EEF4;
+               border-right: 8px solid #E0EEF4;
+               border-bottom: 8px solid #E0EEF4;
+
+             }
+           }
+
+           .two-tr {
+             td:nth-child(1) {
+               height: 100px;
+               border-radius: 0px 0px 0px 0px;
+               background: #1E410E;
+               border-left: 8px solid #E0EEF4;
+               border-right: 8px solid #E0EEF4;
+               border-bottom: 8px solid #E0EEF4;
+               font-weight: 400;
+               font-size: 32px;
+               color: #FFFFFF;
+               text-align: center;
+             }
+             td:nth-child(2) {
+               width: 620px;
+               height: 290px;
+               background: #FFFFFF;
+               border-radius: 4px 4px 4px 4px;
+               //border-top: 8px solid #E0EEF4;
+               border-bottom: 8px solid #E0EEF4;
+               border-right: 8px solid #E0EEF4;
+               font-weight: 400;
+               font-size: 32px;
+               color: #333333;
+               line-height: 52px;
+             }
+             td:nth-child(3) {
+               width: 620px;
+               height: 290px;
+               background: #FFFFFF;
+               border-radius: 4px 4px 4px 4px;
+               border-bottom: 8px solid #E0EEF4;
+               border-right: 8px solid #E0EEF4;
+               font-weight: 400;
+               font-size: 32px;
+               color: #333333;
+               line-height: 52px;
+             }
+           }
+
+
+           .text-td {
+             text-align: center;
+
+             .text-td-p {
+               display: flex;
+               justify-content: center;
+             }
+           }
+         }
+
+       }
+      .four-page{
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .table {
+          width: 1526px;
+          height: 887px;
+          margin-top: 25px;
+
+          .one-tr {
+            font-weight: 400;
+            font-size: 32px;
+            color: #FFFFFF;
+            text-align: center;
+
             td:nth-child(1) {
               width: 290px;
-              height: 180px;
+              height: 100px;
               background: #1E410E;
-              border-radius: 4px 4px 4px 4px;
-              border-left: 8px solid #E0EEF4;
-              border-right: 8px solid #E0EEF4;
-              border-bottom: 8px solid #E0EEF4;
-              font-weight: 400;
-              font-size: 32px;
-              color: #FFFFFF;
-              text-align: center;
+              border-radius: 32px 4px 4px 4px;
+              border: 8px solid #E0EEF4;
+
             }
 
             td:nth-child(2) {
               width: 620px;
-              height: 210px;
-              background: #FFFFFF;
-              border-radius: 4px 4px 4px 4px;
-              border-bottom: 8px solid #E0EEF4;
+              height: 100px;
+              background: #1EC590;
+              border-top: 8px solid #E0EEF4;
               border-right: 8px solid #E0EEF4;
+              border-bottom: 8px solid #E0EEF4;
             }
 
             td:nth-child(3) {
-              width: 620px;
-              height: 210px;
-              background: #FFFFFF;
-              border-radius: 4px 4px 4px 4px;
-              border-bottom: 8px solid #E0EEF4;
+              width: 616px;
+              height: 119px;
+              background: #8CE349;
+              border-radius: 4px 32px 4px 4px;
+              border-top: 8px solid #E0EEF4;
               border-right: 8px solid #E0EEF4;
+              border-bottom: 8px solid #E0EEF4;
+
             }
           }
 
-          tr:nth-child(4) {
+          .two-tr {
             td:nth-child(1) {
-              width: 290px;
-              height: 110px;
+              height: 100px;
+              border-radius: 0px 0px 0px 0px;
               background: #1E410E;
-              border-radius: 4px 4px 4px 4px;
               border-left: 8px solid #E0EEF4;
               border-right: 8px solid #E0EEF4;
               border-bottom: 8px solid #E0EEF4;
               font-weight: 400;
               font-size: 32px;
               color: #FFFFFF;
-              line-height: 16px;
               text-align: center;
             }
-
             td:nth-child(2) {
               width: 620px;
-              height: 119px;
+              height: 290px;
               background: #FFFFFF;
               border-radius: 4px 4px 4px 4px;
+              //border-top: 8px solid #E0EEF4;
               border-bottom: 8px solid #E0EEF4;
               border-right: 8px solid #E0EEF4;
               font-weight: 400;
@@ -811,10 +981,9 @@ p, div {
               color: #333333;
               line-height: 52px;
             }
-
             td:nth-child(3) {
               width: 620px;
-              height: 119px;
+              height: 290px;
               background: #FFFFFF;
               border-radius: 4px 4px 4px 4px;
               border-bottom: 8px solid #E0EEF4;
@@ -825,108 +994,114 @@ p, div {
               line-height: 52px;
             }
           }
-          tr:nth-child(5) {
+
+
+          .text-td {
+            text-align: center;
+
+            .text-td-p {
+              display: flex;
+              justify-content: center;
+            }
+          }
+        }
+
+      }
+      .five-page{
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .table {
+          width: 1526px;
+          height: 887px;
+          margin-top: 25px;
+
+          .one-tr {
+            font-weight: 400;
+            font-size: 32px;
+            color: #FFFFFF;
+            text-align: center;
+
             td:nth-child(1) {
               width: 290px;
-              height: 110px;
+              height: 100px;
               background: #1E410E;
-              border-radius: 4px 4px 4px 4px;
-              border-left: 8px solid #E0EEF4;
-              border-right: 8px solid #E0EEF4;
-              border-bottom: 8px solid #E0EEF4;
-              font-weight: 400;
-              font-size: 32px;
-              color: #FFFFFF;
-              line-height: 16px;
-              text-align: center;
+              border-radius: 32px 4px 4px 4px;
+              border: 8px solid #E0EEF4;
+
             }
 
             td:nth-child(2) {
-              width: 290px;
+              width: 620px;
               height: 100px;
+              background: #1EC590;
+              border-top: 8px solid #E0EEF4;
               border-right: 8px solid #E0EEF4;
               border-bottom: 8px solid #E0EEF4;
-              font-weight: 400;
-              font-size: 32px;
-              color: #333333;
-              line-height: 52px;
             }
 
             td:nth-child(3) {
-              width: 290px;
-              height: 100px;
+              width: 616px;
+              height: 119px;
+              background: #8CE349;
+              border-radius: 4px 32px 4px 4px;
+              border-top: 8px solid #E0EEF4;
               border-right: 8px solid #E0EEF4;
               border-bottom: 8px solid #E0EEF4;
-              border-radius: 4px 4px 32px 4px;
-              font-weight: 400;
-              font-size: 32px;
-              color: #333333;
-              line-height: 52px;
+
             }
           }
-          tr:nth-child(6) {
+
+          .two-tr {
             td:nth-child(1) {
-              width: 290px;
               height: 100px;
+              border-radius: 0px 0px 0px 0px;
               background: #1E410E;
-              border-radius: 4px 4px 4px 32px;
               border-left: 8px solid #E0EEF4;
               border-right: 8px solid #E0EEF4;
               border-bottom: 8px solid #E0EEF4;
               font-weight: 400;
               font-size: 32px;
               color: #FFFFFF;
-              line-height: 16px;
               text-align: center;
             }
-
             td:nth-child(2) {
-              width: 290px;
-              height: 100px;
-              border-right: 8px solid #E0EEF4;
+              width: 620px;
+              background: #FFFFFF;
+              border-radius: 4px 4px 4px 4px;
+              //border-top: 8px solid #E0EEF4;
               border-bottom: 8px solid #E0EEF4;
+              border-right: 8px solid #E0EEF4;
               font-weight: 400;
               font-size: 32px;
               color: #333333;
               line-height: 52px;
             }
-
             td:nth-child(3) {
-              width: 290px;
-              height: 100px;
-              border-right: 8px solid #E0EEF4;
+              width: 620px;
+              background: #FFFFFF;
+              border-radius: 4px 4px 4px 4px;
               border-bottom: 8px solid #E0EEF4;
-              border-radius: 4px 4px 32px 4px;
+              border-right: 8px solid #E0EEF4;
               font-weight: 400;
               font-size: 32px;
               color: #333333;
               line-height: 52px;
             }
-          }
-
-          .school-level-box {
-            display: flex;
-            justify-content: left;
-            //margin-top: 32px;
-            flex-wrap: wrap;
-            width: 620px;
-            padding-left: 30px;
-
-            .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;
-              margin-top: 10px;
+            .school-box{
+               //display: flex;
+               //justify-content: space-around;
+              //flex-wrap: wrap;
+               .info{
+                 //width: 200px;
+                 //height: 200px;
+                 margin-left: 30px;
+               }
             }
           }
 
+
           .text-td {
             text-align: center;
 

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

@@ -9,8 +9,8 @@
           <img src="@/assets/images/environment/card3.png" @click="jumpTo('/xjc-integratedmachine/environment/occdb_search_industry')">
           <img src="@/assets/images/environment/card4.png" @click="jumpTo('/xjc-integratedmachine/environment/studyocc_information')">
         </div>
-        <div class="bottom-img">
-          <img src="@/assets/images/environment/ai-img.png">
+        <div class="bottom-img common-img-button">
+          <img src="@/assets/images/environment/ai-img.png" @click="jumpTo('/xjc-integratedmachine/environment/ai_career_interview')">
         </div>
       </div>
       <drag_component></drag_component>
@@ -34,8 +34,9 @@ function setHeadinfo(){
       avatar: '头像路径',
       nickName: '张三'
     },
-    backUrl : '/xjc-integratedmachine/index',
+    backUrl : '/index',
     isHome:true,
+    backUrlUse:true,
   }
 }
 

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

@@ -1,7 +1,6 @@
 <template>
     <collectionComponent :collection="collection"></collectionComponent>
     职业详情视频<br>
-
     职业图片:
     {{entity.picture}}
     <br>

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

@@ -1,52 +1,173 @@
 <template>
-    职业列表
-
-    <div v-for="(item,index) in data_list.rows" @click="toDetail(item)">
-        {{item.name}}
+  <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 data_list.rows"
+                 :class="[item.selected?'item-result-box-active':'item-result-box']"
+                 @click="toDetail(item)">
+              <div>{{item.name}}</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="list"/>
+  <!--  <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"-->
+  <!--              v-model:limit="queryParams.pageSize" @pagination="list1"/>-->
 </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 {occupationList} from '@/api/xjc-integratedmachine/environment/occupation.js'
 
-    import {occupationList} from '@/api/xjc-integratedmachine/environment/occupation.js'
-
-    const router = useRouter()
-    const route = useRoute()
-    const total = ref(0)
-    const param = route.query
+const router = useRouter()
+const route = useRoute()
+const total = ref(0)
+const param = route.query
+const data_rows = ref([])
+const headinfo = ref({})
+function setHeadinfo() {
+  headinfo.value = {
+    title: '职业分类列表',
+    user: {
+      avatar: '头像路径',
+      nickName: '张三'
+    },
+    backUrl: '/xjc-integratedmachine/environment/index',
+    homeUrl: '/xjc-integratedmachine/environment/index',
+    contrast:true,
+  }
+}
+onMounted(() => {
+  setHeadinfo()
+})
 
 
-    const queryParams = ref({
-        pageNum: 1,
-        pageSize: 10,
-        industryparent : param.industryparent
-    })
+const queryParams = ref({
+  pageNum: 1,
+  pageSize: 10,
+  industryparent : param.industryparent
+})
 
-    const data_list = ref({})
+const data_list = ref({})
 
-    function list() {
-        occupationList(queryParams.value).then(resp =>{
-            data_list.value = resp.data_list
-            total.value = resp.data_list.total
-        })
-    }
-    function toDetail(item){
-        router.push({
-            path : '/xjc-integratedmachine/environment/occ_details_video',
-            query :{
-                id :  item.id
-            }
-        })
+function list() {
+  occupationList(queryParams.value).then(resp =>{
+    data_list.value = resp.data_list
+    total.value = resp.data_list.total
+  })
+}
+function toDetail(item){
+  router.push({
+    path : '/xjc-integratedmachine/environment/occ_details_video',
+    query :{
+      id :  item.id
     }
+  })
+}
 
-    list()
+list()
+list()
 </script>
 
-<style scoped>
+<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;
 
+      .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;
+        }
+
+        .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;
+        }
+      }
+    }
+  }
 
+}
 </style>

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

@@ -1,88 +1,498 @@
 <template>
-    职业信息查询
-
-    <el-card style="width:200px">
-        <div @click="changeTab('hyfl')">
-            <el-button @click="jumpTo('/xjc-integratedmachine/environment/occdb_search_industry_list')">点击查询</el-button>
+  <div class="occdb_search_industry">
+    <head-component :headinfo=headinfo></head-component>
+    <div class="page-content">
+      <div class="content-left">
+        <div class="tab-box">
+          <div :class="[onePage?'item-box-active':'item-box']" @click="showPage(1)">
+            <img v-if="onePage" src="@/assets/images/environment/condition-search-h.png">
+            <img v-else src="@/assets/images/environment/condition-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">
+            <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">
+            <img v-else src="@/assets/images/environment/keys-search.png">
+            关键字查询
+          </div>
         </div>
-        <div @click="changeTab('hldm')">
-            霍兰德码查询
-            <el-button @click="jumpTo('/xjc-integratedmachine/environment/occdb_interestcode')">点击查询s</el-button>
+      </div>
+      <div class="content-right">
+        <div class="one-page" v-show="onePage">
+          <div class="top">
+            行业分类是把从事国民经济生产和服务的单位或个体，按生产同类产品或具有相同工艺或提供同类服务的经济活动类别，划分的结构体系。未来社会需要各式各样的人才，在每个行业领域都能为社会做出贡献，实现自己的人生价值。
+            <div class="search-btn">
+              <img @click="jumpTo('/xjc-integratedmachine/environment/occdb_search_industry_list')" style="z-index:10" src="@/assets/images/environment/search-btn.png">
+            </div>
+          </div>
         </div>
-        <div @click="changeTab('gjz')">
-            关键字查询
-            <el-input v-model="form.name"></el-input>
-            <el-button @click="byKeyWord">关键字查询</el-button>
-
-            <el-table :data="data_list">
-                <el-table-column label="名称" align="center" key="name" prop="name"/>
-                <el-table-column label="详情">
-                    <template #default="scope">
-                        <el-tooltip content="详情>>" placement="top">
-                            <el-button link type="primary" icon="Edit" @click="toDetail(scope.row)"></el-button>
-                        </el-tooltip>
-                    </template>
-                </el-table-column>
-            </el-table>
+        <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>
+          <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>
         </div>
-    </el-card>
+      </div>
+      <drag_component></drag_component>
 
-    <div v-show="tab == 'hyfl'">
-        行业分类是把.............................
     </div>
-    <div v-show="tab == 'hldm'">
+    <div>
+      <!--院校属地-->
+      <el-dialog v-model="showAreaChoose" width="1000px" append-to-body>
+        <div class="dialog-box">
+          <div v-for="dict in gk_province" :key="dict.value" @click="chooseArea(dict)">
+            <p>
+              {{ dict.label }}
+            </p>
+          </div>
+        </div>
+      </el-dialog>
 
     </div>
-    <div v-show="tab == 'gjz'">
-
+    <div>
+      <!--学历层次-->
+      <el-dialog v-model="showEducationlevel" width="1000px" append-to-body>
+        <div class="dialog-box dialog-box2">
+          <div v-for="dict in educationlevel" :key="dict.value" @click="chooseEducationlevel(dict)">
+            <p>
+              {{ dict.label }}
+            </p>
+          </div>
+        </div>
+      </el-dialog>
+    </div>
+    <div>
+      <!--特色-->
+      <el-dialog v-model="showCharacteristic" width="1000px" append-to-body>
+        <div class="dialog-box">
+          <div v-for="dict in characteristic" :key="dict.value" @click="chooseCharacteristic(dict)">
+            <p>
+              {{ dict.label }}
+            </p>
+          </div>
+        </div>
+      </el-dialog>
     </div>
+  </div>
 
 </template>
 
 <script setup>
-    import {getOccupationByKeyword} 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";
+import {ref} from "vue";
+import {getUniversityByKeyword} from "@/api/xjc-integratedmachine/environment/university.js";
 
-    const router = useRouter()
-    const route = useRoute()
-    const total = ref(0)
-    const param = route.query
+const router = useRouter()
 
 
-    const tab = ref("hyfl")
+const onePage = ref(true)
+const twoPage = ref(false)
+const threePage = ref(false)
 
-    function changeTab(path) {
-        tab.value = path
-    }
+const form = ref({
+  areaid: null,
+  areaname: null,
+  educationlevel: null,
+  educationlevelName: null,
+  characteristic: null,
+  characteristicName: null,
+  name: null
+})
+const keyInput = ref(false);
+const headinfo = ref({})
 
-    function jumpTo(path) {
-        router.push({
-            path: path
-        })
-    }
+function setHeadinfo() {
+  headinfo.value = {
+    title: '职业信息查询',
+    user: {
+      avatar: '头像路径',
+      nickName: '张三'
+    },
+    backUrl: '/xjc-integratedmachine/environment/index',
+    homeUrl: '/xjc-integratedmachine/environment/index'
+  }
+}
+
+//切换tabs
+const showPage = (val) => {
+  if (val === 1) {
+    onePage.value = true;
+    twoPage.value = false;
+    threePage.value = false;
+  } else if (val === 2) {
+    onePage.value = false;
+    twoPage.value = true;
+    threePage.value = false;
+  } else if (val === 3) {
+    onePage.value = false;
+    twoPage.value = false;
+    threePage.value = true;
+  }
+}
+
+function jumpTo(path) {
+  router.push({
+    path: path,
+    query: {name: 123}
+  })
+}
 
-    const form = ref({
-        name: ''
+onMounted(() => {
+  setHeadinfo()
+})
+const universityList = ref([])
+
+// 定义一个函数，用于将关键词变为红色
+function highlightKeywords(text, keywords) {
+  // 遍历关键词列表
+  keywords.forEach(keyword => {
+    // 使用正则表达式匹配关键词，并替换为带有红色样式的HTML标签
+    // 这里使用全局匹配标志'g'，以确保替换所有出现的关键词
+    console.log("keywords", keywords)
+    let regex = new RegExp(keyword, 'g');
+    text = text.replace(regex, `<span style="color: #0DE6A1;">${keyword}</span>`);
+    console.log("text", text)
+  });
+  return text;
+}
+
+function byKeyword() {
+  getUniversityByKeyword(form.value).then(resp => {
+    resp.list.map(item => {
+      item.selected = false;
+      let keyWord = form.value.name
+      item.name = highlightKeywords(item.name, [keyWord]);
+      console.log(" item.name", item.name)
+      // 遍历数据数组，并处理每个字符串
     })
 
-    const data_list = ref([])
-    function byKeyWord() {
-        getOccupationByKeyword(form.value).then(resp =>{
-            console.log("sss",resp)
-            data_list.value = resp.list
-        })
+    universityList.value = resp.list
+  })
+}
+
+
+function toDetail(row) {
+  router.push({
+    path: '/xjc-integratedmachine/environment/university_details_video',
+    query: {
+      id: row.id,
+      name: row.name,
     }
+  })
+}
+
+
+const tab = ref("tj")
+
+function changeTab(path) {
+  tab.value = path
+}
+
+
+const showAreaChoose = ref(false)
+const showEducationlevel = ref(false)
+const showCharacteristic = ref(false)
+
+const {proxy} = getCurrentInstance()
+const {gk_province, educationlevel, characteristic} = proxy.useDict('gk_province', 'educationlevel', 'characteristic')
+
+
+function showAreaChooseHandler() {
+  showAreaChoose.value = true
+}
+
+function chooseArea(item) {
+  form.value.areaid = item.value
+  form.value.areaname = item.label
+  showAreaChoose.value = false
+}
+
+function showEducationlevelHandler() {
+  showEducationlevel.value = true
+}
+
+function chooseEducationlevel(item) {
+  form.value.educationlevel = item.value
+  form.value.educationlevelName = item.label
+  showEducationlevel.value = false
+}
+
+function showCharacteristicHandler() {
+  showCharacteristic.value = true
+}
+
+function chooseCharacteristic(item) {
+  form.value.characteristic = item.value
+  form.value.characteristicName = item.label
+  showCharacteristic.value = false
+}
+
+function search() {
+  router.push({
+    path: '/xjc-integratedmachine/environment/university_list',
+    query: form.value
+  })
+}
+
+</script>
 
-    function toDetail(item){
-        router.push({
-            path : '/xjc-integratedmachine/environment/occ_details_video',
-            query :{
-                id :  item.id
+
+<style scoped lang="scss">
+.occdb_search_industry {
+  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: space-between;
+
+    .content-left {
+      width: 244px;
+      height: 957px;
+      background: rgba(255, 255, 255, 0.26);
+
+      ::v-deep .el-menu-item .is-active {
+        background: red !important;
+      }
+
+      .item-box {
+        width: 244px;
+        height: 80px;
+        color: #B3B3B3;
+        display: flex;
+        align-items: center;
+        margin-right: 5px;
+        font-weight: bold;
+        font-size: 20px;
+        background: #C8FFED;
+
+        img {
+          width: 28px;
+          height: 28px;
+          margin-right: 10px;
+          margin-left: 40px;
+        }
+      }
+
+      .item-box-active {
+        width: 244px;
+        height: 80px;
+        background: #1EC590;
+        font-weight: bold;
+        font-size: 20px;
+        display: flex;
+        color: #FFFFFF;
+        line-height: 40px;
+        margin-right: 5px;
+        align-items: center;
+
+        img {
+          width: 28px;
+          height: 28px;
+          margin-right: 10px;
+          margin-left: 40px;
+        }
+      }
+    }
+
+    .content-right {
+      width: 1615px;
+      height: 926px;
+      background: #FFFFFF;
+      border-radius: 35px 35px 35px 35px;
+      margin-top: 13px;
+      margin-right: 24px;
+
+      .one-page {
+        .top {
+          font-weight: 400;
+          font-size: 30px;
+          color: #333333;
+          line-height: 52px;
+          margin:46px 40px 40px;
+          text-indent: 2em;
+        }
+
+        .search-btn {
+          display: flex;
+          align-items: center;
+          flex-direction: column;
+          justify-content: space-around;
+          margin-top: 613px;
+          img {
+            width: 244px;
+            height: 100px;
+          }
+          p{
+
+          }
+          span{
+            margin-left: 3px;
+          }
+        }
+      }
+
+      .two-page {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .two-page-search {
+          margin-top: 57px;
+
+          ::v-deep .el-input__inner {
+            width: 1300px;
+            height: 84px;
+            font-size: 24px;
+            margin-left: 34px;
+          }
+
+          ::v-deep .el-input__suffix {
+            font-size: 100px;
+            width: 100px;
+            height: 100px;
+
+          }
+
+          ::v-deep .el-input__wrapper {
+            background: #F5F9FA;
+            box-shadow: none;
+          }
+        }
+
+        .result-box {
+          width: 1484px;
+          height: 750px;
+          overflow: auto;
+
+          .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;
+            }
+
+            .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;
+            }
+          }
+        }
+
+      }
+
     }
+  }
 
-</script>
+}
+
+.dialog-box {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+
+  div {
+    //border: 1px solid;
 
-<style scoped>
+  }
 
+  p {
+    min-width: 120px;
+    padding-left: 10px;
+    padding-right:10px;
+    height: 60px;
+    margin-left: 10px;
+    margin-right: 10px;
+    border: 1px solid;
+    font-weight: 400;
+    font-size: 30px;
+    color: #333333;
+    text-align: center;
+    line-height: 60px;
+    border-radius: 10px;
+  }
+}
+.dialog-box2{
+  display: flex;
+  justify-content: space-around;
+}
 </style>

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

@@ -0,0 +1,84 @@
+<template>
+  职业信息查询
+  <el-card style="width:200px">
+    <div @click="changeTab('hyfl')">
+      <el-button @click="jumpTo('/xjc-integratedmachine/environment/occdb_search_industry_list')">点击查询</el-button>
+    </div>
+    <div @click="changeTab('hldm')">
+      霍兰德码查询
+      <el-button @click="jumpTo('/xjc-integratedmachine/environment/occdb_interestcode')">点击查询s</el-button>
+    </div>
+    <div @click="changeTab('gjz')">
+      关键字查询
+      <el-input v-model="form.name"></el-input>
+      <el-button @click="byKeyWord">关键字查询</el-button>
+
+      <el-table :data="data_list">
+        <el-table-column label="名称" align="center" key="name" prop="name"/>
+        <el-table-column label="详情">
+          <template #default="scope">
+            <el-tooltip content="详情>>" placement="top">
+              <el-button link type="primary" icon="Edit" @click="toDetail(scope.row)"></el-button>
+            </el-tooltip>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+  </el-card>
+  <div v-show="tab == 'hyfl'">
+    行业分类是把.............................
+  </div>
+  <div v-show="tab == 'hldm'">
+  </div>
+  <div v-show="tab == 'gjz'">
+  </div>
+
+</template>
+
+<script setup>
+import {getOccupationByKeyword} from '@/api/xjc-integratedmachine/environment/occupation.js'
+
+const router = useRouter()
+const route = useRoute()
+const total = ref(0)
+const param = route.query
+
+
+const tab = ref("hyfl")
+
+function changeTab(path) {
+  tab.value = path
+}
+
+function jumpTo(path) {
+  router.push({
+    path: path
+  })
+}
+
+const form = ref({
+  name: ''
+})
+
+const data_list = ref([])
+function byKeyWord() {
+  getOccupationByKeyword(form.value).then(resp =>{
+    console.log("sss",resp)
+    data_list.value = resp.list
+  })
+}
+
+function toDetail(item){
+  router.push({
+    path : '/xjc-integratedmachine/environment/occ_details_video',
+    query :{
+      id :  item.id
+    }
+  })
+}
+
+</script>
+
+<style scoped>
+
+</style>

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

@@ -1,46 +1,169 @@
 <template>
-    职业库行业分类列表
-    <div v-for="(item,index) in data_list.rows" @click="jumpToZY(item)">
-        {{item.name}}
+  <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 data_list.rows"
+                 :class="[item.selected?'item-result-box-active':'item-result-box']"
+                 @click="jumpToZY(item)">
+              <div>{{item.name}}</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="list"/>
+  <!--  <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"-->
+  <!--              v-model:limit="queryParams.pageSize" @pagination="list1"/>-->
 </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 {categoryList1} from '@/api/xjc-integratedmachine/environment/occupation.js'
+const router = useRouter()
+const data_list = ref([])
+const route = useRoute()
+const total = ref(0)
+const param = route.query
+const data_rows = ref([])
+const headinfo = ref({})
+function setHeadinfo() {
+  headinfo.value = {
+    title: '行业分类列表',
+    user: {
+      avatar: '头像路径',
+      nickName: '张三'
+    },
+    backUrl: '/xjc-integratedmachine/environment/index',
+    homeUrl: '/xjc-integratedmachine/environment/index',
+    contrast:true,
+  }
+}
+onMounted(() => {
+  setHeadinfo()
+})
 
-    import {categoryList1} from '@/api/xjc-integratedmachine/environment/occupation.js'
-    const router = useRouter()
-    const data_list = ref([])
-    const total = ref(0)
-
-    const queryParams = ref({
-        pageNum: 1,
-        pageSize: 10,
-    })
-
-    function list() {
-        categoryList1(queryParams.value).then(resp =>{
-            data_list.value = resp.data_list
-            total.value = resp.data_list.total
-        })
+
+const queryParams = ref({
+  pageNum: 1,
+  pageSize: 10,
+})
+
+function list() {
+  categoryList1(queryParams.value).then(resp =>{
+    data_list.value = resp.data_list
+    total.value = resp.data_list.total
+  })
+}
+function jumpToZY(item){
+  router.push({
+    path : '/xjc-integratedmachine/environment/occdb_list',
+    query:{
+      industryparent : item.oldid
     }
-    function jumpToZY(item){
-        router.push({
-            path : '/xjc-integratedmachine/environment/occdb_list',
-            query:{
-                industryparent : item.oldid
-            }
-
-        })
+
+  })
+}
+list()
+</script>
+
+<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/pro_details_video.vue

@@ -60,7 +60,7 @@
           <div class="one-page" v-show="twoPage">
             <p class="title">开设院校</p>
             <div class="info"  v-for="(item,index) in kaishe_list">
-              {{ entity.name }}
+              {{ item.name }}
             </div>
           </div>
           <div class="one-page" v-show="threePage">
@@ -91,7 +91,7 @@
         v-model="fivePage"
         @before-close="dialogBeforeClose"
         destroy-on-close
-        title="学校视频"
+        title="专业视频"
         width="1832px"
         height="915px"
         center
@@ -177,6 +177,7 @@ function detail() {
     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();

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

@@ -133,7 +133,7 @@ const headinfo = ref({})
 
 function setHeadinfo() {
   headinfo.value = {
-    title: '高校信息查询',
+    title: '专业信息查询',
     user: {
       avatar: '头像路径',
       nickName: '张三'

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

@@ -26,11 +26,11 @@
           <div class="search-btn">
             <p v-show="form.educationlevelName || form.areaname || form.characteristicName">
               <span style="margin-right: 3px;margin-left: 3px">已选择条件:</span>
-              <span style="margin-right: 3px;margin-left: 3px">{{form.educationlevelName}}</span>
-              <span v-show="form.areaname">|</span>
-              <span style="margin-right: 3px;margin-left: 3px">{{form.areaname}}</span>
-              <span v-show="form.characteristicName">|</span>
-              <span style="margin-right: 3px;margin-left: 3px">{{form.characteristicName}}</span>
+              <span style="margin-left: 3px">{{form.areaname}}</span>
+
+              <span ><span v-show="form.educationlevelName" style="margin-right: 3px;margin-left: 3px">|</span>{{form.educationlevelName}}</span>
+
+              <span ><span style="margin-right: 3px;margin-left: 3px" v-show="form.characteristicName">|</span>{{form.characteristicName}}</span>
             </p>
             <img @click="search" style="z-index:10" src="@/assets/images/environment/search-btn.png">
           </div>

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

@@ -139,6 +139,11 @@
           </div>
           <div class="one-page" v-show="eightPage">
             <p class="title">学校视频</p>
+            <div class="video-content" style="display: flex;justify-content: center" v-if="entity.path">
+              <video ref="videoPlayer" video preload="auto" autoplay muted controls width="1000" height="400">
+                <source :src="entity.path" type="video/mp4">
+              </video>
+            </div>
           </div>
         </div>
       </div>
@@ -146,7 +151,7 @@
     </div>
   </div>
   <el-dialog
-      v-model="sixPage"
+      v-model="sixPageDialog"
       destroy-on-close
       title=""
       width="90%"
@@ -154,9 +159,9 @@
       style="width: 90%;height: 910px;"
       center
       align-center
-      close-on-click-modal="false"
+      :show-close="false"
   >
-    <div class="one-page" style="width: 1658px" v-show="sixPage">
+    <div class="one-page" style="width: 1658px;height: 880px;" v-show="sixPage">
       <div class="select-div">
         <p>招生地区:</p>
         <p class="select-box" @click="showAreaChooseHandler">
@@ -173,7 +178,7 @@
         </p>
         <p class="select-box click-search" @click="getPlan">点击查询</p>
       </div>
-      <el-table :data="jh_tableData">
+      <el-table :data="jh_tableData" style="height: 640px;margin-bottom: 20px;">
         <el-table-column label="招生年份" align="center" key="years" prop="years"/>
         <el-table-column label="专业名称" align="center" key="enrollname" prop="enrollname"/>
         <el-table-column label="大学学制" align="center" key="studyyears" prop="studyyears"/>
@@ -181,20 +186,22 @@
         <el-table-column label="计划招生人数" align="center" key="plannum" prop="plannum"/>
         <el-table-column label="学费" align="center" key="fee" prop="fee"/>
       </el-table>
+      <div class="footer-div">
+        <el-button type="success" class="close-box click-close" @click="sixPageDialog = false">关闭</el-button>
+      </div>
     </div>
   </el-dialog>
   <el-dialog
-      v-model="fivePage"
-      destroy-on-close
+      v-model="fivePageDialog"
       title=""
       width="90%"
       height="910px"
       style="width: 90%;height: 910px;"
       center
       align-center
-      close-on-click-modal="false"
+      :show-close="false"
   >
-    <div class="one-page" style="width: 1658px" v-show="fivePage">
+    <div class="one-page" style="width: 1658px;height: 880px;" v-show="fivePage">
       <div class="select-div">
         <p>招生地区:</p>
         <p class="select-box" @click="showAreaChooseHandler">
@@ -209,13 +216,32 @@
         </p>
         <p class="select-box click-search" @click="getScore">点击查询</p>
       </div>
-      <el-table :data="kf_tableData">
+      <el-table :data="kf_tableData" style="height: 640px;margin-bottom: 20px;">
         <el-table-column label="招生年份" align="center" key="years" prop="years" style="height: 95px"/>
         <el-table-column label="录取批次" align="center" key="batchname" prop="batchname" style="height: 95px"/>
         <el-table-column label="最低分" align="center" key="lowscore" prop="lowscore" style="height: 95px"/>
         <el-table-column label="最低分位次" align="center" key="totalorder" prop="totalorder" style="height: 95px"
                          ya/>
       </el-table>
+      <div class="footer-div">
+        <el-button type="success" class="close-box click-close" @click="fivePageDialog = false">关闭</el-button>
+      </div>
+    </div>
+  </el-dialog>
+  <el-dialog
+      v-model="eightPageDialog"
+      @before-close="dialogBeforeClose"
+      destroy-on-close
+      title="学校视频"
+      width="1832px"
+      height="915px"
+      center
+      align-center
+  >
+    <div class="video-content" v-if="entity.path">
+      <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>
@@ -243,22 +269,6 @@
         <div class="dict-box" v-for="item in grade" :key="item" @click="chooseGrade(item)">{{ item }}</div>
       </div>
     </el-dialog>
-    <el-dialog
-        v-model="eightPage"
-        @before-close="dialogBeforeClose"
-        destroy-on-close
-        title="学校视频"
-        width="1832px"
-        height="915px"
-        center
-        align-center
-    >
-      <div class="video-content" v-if="entity.path">
-        <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>
@@ -317,6 +327,11 @@ const twoPage = ref(false)
 const threePage = ref(false)
 const fourPage = ref(false)
 const fivePage = ref(false)
+const fivePageDialog = ref(false)
+const sixPageDialog = ref(false)
+const eightPageDialog = ref(false)
+
+
 const sixPage = ref(false)
 const senvenPage = ref(false)
 const eightPage = ref(false)
@@ -523,6 +538,7 @@ const showPage = (val) => {
     sixPage.value = false
     senvenPage.value = false
     eightPage.value = false;
+    fivePageDialog.value = true;
   } else if (val === 6) {
     onePage.value = false;
     twoPage.value = false;
@@ -532,6 +548,7 @@ const showPage = (val) => {
     sixPage.value = true
     senvenPage.value = false
     eightPage.value = false;
+    sixPageDialog.value = true;
   } else if (val === 7) {
     onePage.value = false;
     twoPage.value = false;
@@ -550,6 +567,7 @@ const showPage = (val) => {
     sixPage.value = false
     senvenPage.value = false;
     eightPage.value = true;
+    eightPageDialog.value = true;
   }
   //清空数据
   form.area = '';
@@ -658,9 +676,10 @@ p, div {
           align-items: center;
 
           .right-top-icon {
-            width: 200px;
+            width: 130px;
             height: 68px;
             display: flex;
+            margin-right: 30px;
             justify-content: space-between;
             margin-top: 24px;
 
@@ -668,18 +687,17 @@ p, div {
               display: flex;
               flex-direction: column;
               align-items: center;
-
+              width:68px;
               p {
                 font-weight: 400;
                 font-size: 20px;
                 color: #515F6A;
-
               }
 
               img {
                 width: 36px;
                 height: 36px;
-                border: 1px solid;
+                //border: 1px solid;
               }
             }
           }
@@ -800,7 +818,7 @@ p, div {
     justify-content: center;
     align-items: center;
     margin-bottom: 21px;
-
+    margin-top: 10px;
     .select-box {
       width: 300px;
       height: 90px;
@@ -821,7 +839,30 @@ p, div {
       margin-left: 20px;
     }
   }
+  .footer-div{
+    width:100%;
+    display: flex;
+    justify-content: space-around;
+    .close-box {
+      width: 300px;
+      height: 90px;
+      border: 1px solid #CCCCCC;
+      line-height: 90px;
+      text-align: center;
+      margin-left: 10px;
+    }
 
+    .click-close {
+      width: 170px;
+      height: 66px;
+      //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;

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

@@ -4,12 +4,14 @@
     <div class="page-content">
       <div class="page-img-box">
         <div class="box-content">
-          <div class="school-box" v-for="(item,index) in tableData" :key="index">
+          <div class="school-box" v-for="(item,index) in tableData" :key="index" @click="handleDetail(item)">
             <img src="@/assets/images/environment/contrast.png"/>
             <div class="right-box">
               <div class="right-top">
                 <div class="right-top-title">{{ item.name }}</div>
-                <div class="right-top-details" @click="handleDetail(item)">详情 ></div>
+                <div class="right-top-details">详情
+                  <img style="width: 24px;height: 24px" src="@/assets/images/environment/details_icon.png"/>
+                  </div>
               </div>
               <p class="info"><span>创建时间:</span><span>{{
                   item.ctime
@@ -91,6 +93,7 @@ function setHeadinfo() {
     backUrl: '/xjc-integratedmachine/environment/query_universitydb_conditions',
     homeUrl: '/xjc-integratedmachine/environment/index',
     contrast:true,
+    contrastType:'university',
   }
 }
 
@@ -155,6 +158,7 @@ p, div {
             width: 154px;
             height: 154px;
             //border: 1px solid;
+            margin-left: 13px;
           }
 
           .right-box {
@@ -180,6 +184,10 @@ p, div {
                 font-weight: 400;
                 font-size: 20px;
                 color: #515F6A;
+                display: flex;
+                justify-content: space-around;
+                align-items: center;
+                margin-right: 30px;
               }
             }