[feat] 环境探索 内容

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

@@ -1,49 +1,229 @@
+
 <template>
-    生涯故事1
-    <div v-for="(item,index) in list" @click="toDetail(item)">
-        <div v-html="item.title"></div>
-        <div v-html="item.content.substr(0,10)"></div>
-        <div @click="toDetail(item)">>>>></div>
+  <div class="university_details_video">
+    <head-component :headinfo=headinfo></head-component>
+    <div class="page-content">
+      <div class="page-img-box">
+<!--        生涯故事1-->
+        <div>
+          <div  class="item-box" v-for="(item,index) in list" @click="toDetail(item)">
+            <div class="top">
+              <p class="title" v-html="item.title"></p>
+              <p class="details">详情 ></p>
+            </div>
+
+            <div class="content" >{{ safeTruncate(item.content, 50) }}...</div>
+          </div>
+        </div>
+        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
+                    v-model:limit="queryParams.pageSize" @pagination="query"/>
+      </div>
+      <drag_component></drag_component>
     </div>
+  </div>
 
-    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
-                v-model:limit="queryParams.pageSize" @pagination="query"/>
 </template>
-
 <script setup>
-    import {careerinformation} from '@/api/xjc-integratedmachine/environment/tscareer.js'
-    const router = useRouter()
-    const route = useRoute()
-    const list = ref([])
-    const total = ref(0)
-
-    const queryParams = ref({
-        pageNum: 1,
-        pageSize: 10,
-        type: '5'
-    })
-
-    function query() {
-        careerinformation(queryParams.value).then(resp => {
-            console.log(resp.data_list.rows)
-            list.value = resp.data_list.rows
-            total.value = resp.data_list.total
-        })
-    }
+import headComponent from '@/views/xjc-integratedmachine/components/head_component.vue'
+import Drag_component from "@/views/xjc-integratedmachine/components/drag_component.vue";
+import {
+  universityDetail,
+  getPlanYearList,
+  getScoreList,
+  getPlanList,
+  getCollection
+} from '@/api/xjc-integratedmachine/environment/university.js'
+import videojs from 'video.js';
+import 'video.js/dist/video-js.css';
+
+import collectionComponent from '@/views/xjc-integratedmachine/components/collection_component.vue'
+import {ref} from "vue";
+import {getConfigKey} from "@/api/system/config.js";
+import {careerinformation} from '@/api/xjc-integratedmachine/environment/tscareer.js'
+const router = useRouter()
+const route = useRoute()
+const list = ref([])
+const total = ref(0)
+
+const showAreaChoose = ref(false)
+const showCategoryChoose = ref(false)
+const showGradeChoose = ref(false)
+
+const param = route.query
+const showIndex = ref(1)
+const baseUrl = ref()
+
+
+const grade = ref([])
+
+const {proxy} = getCurrentInstance()
+
+const {
+  gk_province,
+  category,
+  educationlevel,
+  property,
+  school_category
+} = proxy.useDict('gk_province', 'category', 'educationlevel', 'property', 'school_category')
+
+const form = ref({
+  area: null,
+  areaname: null,
+  university: param.name,
+})
+
+const entity = ref({})
+const collectionList = ref([])
+const headinfo = ref({})
+const onePage = ref(true)
+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)
+
 
-    function toDetail(item) {
-        router.push({
-            path : '/xjc-integratedmachine/environment/career_story2',
-            query :{
-                id : item.id
-            }
-        })
+const sixPage = ref(false)
+const senvenPage = ref(false)
+const eightPage = 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:'university',
+  }
+}
+function safeTruncate(text, length) {
+  // 使用 substring 方法截取字符串
+
+  // 这里可以添加额外的消毒步骤来确保文本安全
+  // 例如：使用正则表达式移除所有脚本标签等
+  // let reg = /[\u4e00-\u9fa5]|[\（\）\《\》\——\；\，\。\“\”\<\>\！]/g;
+  // const sanitizedText = text.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '');
+  const sanitizedText = text.replace(/[^\u4e00-\u9fa5；，。“”《》？！]+/g, '');
+  // const truncatedText = sanitizedText.substring(0, length);
+
+  const truncatedText = sanitizedText.substring(0, length);
+  console.log("truncatedText",truncatedText)
+  // 但为了简化示例，这里仅返回截取的文本
+  return truncatedText;
+}
+
+onMounted(() => {
+  setHeadinfo()
+
+})
+
+const queryParams = ref({
+  pageNum: 1,
+  pageSize: 10,
+  type: '5'
+})
+
+function query() {
+  careerinformation(queryParams.value).then(resp => {
+    console.log(resp.data_list.rows)
+    list.value = resp.data_list.rows
+    total.value = resp.data_list.total
+  })
+}
+
+function toDetail(item) {
+  router.push({
+    path : '/xjc-integratedmachine/environment/career_story2',
+    query :{
+      id : item.id
     }
+  })
+}
 
-    query()
+query()
 
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+p, div {
+  margin: 0;
+  padding: 0;
+}
+
+.university_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;
+    overflow: auto;
+    .item-box{
+      width: 1750px;
+      height: 204px;
+      border-left: 10px solid #1EC590;
+      background: #FFFFFF;
+      box-shadow: 0px 2px 4px 2px rgba(0,0,0,0.09);
+      border-radius: 5px 5px 5px 5px;
+      margin-left: 40px;
+      margin-top: 46px;
+      padding-left: 40px;
+      padding-right: 40px;
+      .top{
+        display: flex;
+        justify-content: space-between;
+        padding-top: 40px;
+        .title{
+          font-weight: bold;
+          font-size: 32px;
+          color: #000000;
+          line-height: 52px;
+          //margin-left: 25px;
+        }
+        .details{
+          font-weight: 400;
+          font-size: 20px;
+          color: #515F6A;
+          //margin-right: 40px;
+          //margin-top: 40px;
+        }
+      }
+      .content{
+        border-top: #E6E6E6 1px solid;
+        height: 100px;
+        overflow: auto;
+        padding-top: 30px;
+        font-weight: 400;
+        font-size: 30px;
+        color: #333333;
+      }
+    }
+  }
+
+}
 
 </style>
+

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

@@ -1,26 +1,151 @@
 <template>
-    <div v-html="data.title"></div>
-    <div v-html="data.content"></div>
-</template>
+  <div class="university_details_video">
+    <head-component :headinfo=headinfo></head-component>
+    <div class="page-content">
+      <div class="page-img-box">
+        <!--        生涯故事1-->
+<!--        <div>-->
+<!--          <div  class="item-box" v-for="(item,index) in list" @click="toDetail(item)">-->
+<!--            <div class="top">-->
+<!--              <p class="title" v-html="item.title"></p>-->
+<!--              <p class="details">详情 ></p>-->
+<!--            </div>-->
+
+<!--            <div class="content" v-html="item.content"></div>-->
+<!--            &lt;!&ndash;            <div @click="toDetail(item)">>>>></div>&ndash;&gt;-->
+<!--          </div>-->
+<!--        </div>-->
+<!--        <div v-html="data.title"></div>-->
+        <div  v-html="data.content"></div>
+
+<!--        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"-->
+<!--                    v-model:limit="queryParams.pageSize" @pagination="query"/>-->
+      </div>
+      <drag_component></drag_component>
+    </div>
+  </div>
 
+</template>
 <script setup>
-    import {careerdetail} from '@/api/xjc-integratedmachine/environment/tscareer.js'
-    const router = useRouter()
-    const route = useRoute()
-    const param = route.query
-
-    const data = ref({})
-    function detail() {
-        careerdetail({
-            id : param.id
-        }).then(resp =>{
-            data.value = resp.entity
-        })
-    }
-    detail()
+import headComponent from '@/views/xjc-integratedmachine/components/head_component.vue'
+import Drag_component from "@/views/xjc-integratedmachine/components/drag_component.vue";
+import {careerdetail} from '@/api/xjc-integratedmachine/environment/tscareer.js'
+const router = useRouter()
+const route = useRoute()
+const param = route.query
+
+const data = ref({})
+function detail() {
+  careerdetail({
+    id : param.id
+  }).then(resp =>{
+    data.value = resp.entity
+  })
+}
+detail()
+import {ref} from "vue";
+
+
+
+
+const headinfo = ref({})
+
+function setHeadinfo(){
+  headinfo.value = {
+    title: '学职资讯',
+    user: {
+      avatar: '头像路径',
+      nickName: '张三'
+    },
+    backUrl : '/xjc-integratedmachine/environment/query_universitydb_conditions',
+    homeUrl:'/xjc-integratedmachine/environment/index',
+    contrast:true,
+    contrastType:'university',
+  }
+}
+
+onMounted(() => {
+  setHeadinfo()
+})
+
+
 
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+p, div {
+  margin: 0;
+  padding: 0;
+}
+
+.university_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: white;
+    //border-radius: 35px 35px 35px 35px;
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
+    border-top: 10px solid #1EC590;
+    padding-left: 157px;
+    padding-right: 157px;
+    padding-top: 20px;
+    .item-box{
+      width: 1750px;
+      height: 204px;
+      border-left: 10px solid #1EC590;
+      background: #FFFFFF;
+      box-shadow: 0px 2px 4px 2px rgba(0,0,0,0.09);
+      border-radius: 5px 5px 5px 5px;
+      margin-left: 40px;
+      margin-top: 46px;
+      padding-left: 40px;
+      padding-right: 40px;
+      .top{
+        display: flex;
+        justify-content: space-between;
+        padding-top: 40px;
+        .title{
+          font-weight: bold;
+          font-size: 32px;
+          color: #000000;
+          line-height: 52px;
+          //margin-left: 25px;
+        }
+        .details{
+          font-weight: 400;
+          font-size: 20px;
+          color: #515F6A;
+          //margin-right: 40px;
+          //margin-top: 40px;
+        }
+      }
+      .content{
+        border-top: #E6E6E6 1px solid;
+        height: 100px;
+        overflow: auto;
+      }
+    }
+  }
+
+}
 
 </style>
+

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

@@ -5,28 +5,28 @@
       <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">
+            <img v-if="onePage" src="@/assets/images/environment/contrast/01-active.png">
+            <img v-else src="@/assets/images/environment/contrast/01.png">
             基本信息
           </div>
           <div :class="[twoPage?'item-box-active':'item-box']" @click="showPage(2)">
-            <img v-if="twoPage" src="@/assets/images/environment/score-h.png">
-            <img v-else src="@/assets/images/environment/score.png">
+            <img v-if="twoPage" src="@/assets/images/environment/contrast/02-active.png">
+            <img v-else src="@/assets/images/environment/contrast/02.png">
             主修课程
           </div>
           <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">
+            <img v-if="threePage" src="@/assets/images/environment/contrast/03.png">
+            <img v-else src="@/assets/images/environment/contrast/03-active.png">
             专业解读
           </div>
           <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">
+            <img v-if="fourPage" src="@/assets/images/environment/contrast/04-active.png">
+            <img v-else src="@/assets/images/environment/contrast/04.png">
             就业前景与方向
           </div>
           <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">
+            <img v-if="fivePage" src="@/assets/images/environment/contrast/05-active.png">
+            <img v-else src="@/assets/images/environment/contrast/05.png">
             开设院校
           </div>
         </div>

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

@@ -5,18 +5,18 @@
       <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">
+            <img v-if="onePage" src="@/assets/images/environment/career/01-active.png">
+            <img v-else src="@/assets/images/environment/career/01-active.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">
+            <img v-if="twoPage" src="@/assets/images/environment/career/02-active.png">
+            <img v-else src="@/assets/images/environment/career/02.png">
             霍兰徳码查询
           </div>
           <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">
+            <img v-if="threePage" src="@/assets/images/environment/career/03-active.png">
+            <img v-else src="@/assets/images/environment/career/03.png">
             关键字查询
           </div>
         </div>

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

@@ -29,7 +29,7 @@
           <div class="info-box">
             <p class="title">相近专业</p>
             <div class="info">
-              <div class="info-item" v-for="(item,index) in similar_list">
+              <div class="info-item"  v-for="(item,index) in similar_list" @click="toDetail(item)">
                 {{ item.name }}
               </div>
             </div>
@@ -169,9 +169,9 @@ function setCollection_data(){
   }
   console.log("entity.value",entity.value)
 }
-function detail() {
+function detail(id) {
   specialtyDetail({
-    id: param.id
+    id: id || param.id
   }).then(resp => {
     entity.value = resp.entity
     kaishe_list.value = resp.kaishe_list
@@ -253,7 +253,15 @@ function dialogBeforeClose() {
   senvenPage.value = false
   eightPage.value = false;
 }
-
+function toDetail(item){
+  // router.push({
+  //   path:'/xjc-integratedmachine/environment/pro_details_video',
+  //   query : {
+  //     id : item.id
+  //   }
+  // })
+  detail(item.id)
+}
 
 </script>
 

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

@@ -5,18 +5,18 @@
       <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">
+            <img v-if="onePage" src="@/assets/images/environment/major/01-active.png">
+            <img v-else src="@/assets/images/environment/major/01.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">
+            <img v-if="twoPage" src="@/assets/images/environment/major/02-active.png">
+            <img v-else src="@/assets/images/environment/major/02.png">
             专科-学科门类
           </div>
           <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">
+            <img v-if="threePage" src="@/assets/images/environment/major/03-active.png">
+            <img v-else src="@/assets/images/environment/major/03.png">
             关键字查询
           </div>
         </div>

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

@@ -479,7 +479,12 @@ function search() {
 
   div {
     //border: 1px solid;
-
+    //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;
   }
 
   p {
@@ -495,12 +500,15 @@ function search() {
     color: #333333;
     text-align: center;
     line-height: 60px;
-    border-radius: 10px;
+    //border-radius: 10px;
   }
 }
 .dialog-box2{
      display: flex;
      justify-content: space-around;
 }
+.el-dialog{
+  border-radius: 35px 35px 35px 35px !important;
+}
 </style>
 

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

@@ -21,7 +21,7 @@
         </div>
       </div>
     </div>
-    <drag_component></drag_component>
+<!--    <drag_component></drag_component>-->
   </div>
 
 </template>

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

@@ -1,45 +1,309 @@
-<template>
-    学科评估报告2<br>
+<!--<template>-->
+<!--    学科评估报告2<br>-->
+
+<!--    本一级学科中......<br>-->
+
+<!--    <div v-for="(item,index) in evaluationresults_list">-->
+<!--        {{item.university}}-{{item.univercode}}=={{item.result}}&#45;&#45;-->
+<!--        <div @click="jumpToPro_details_video(item)">-->
+<!--            详情>>-->
+<!--        </div>-->
+<!--    </div>-->
+<!--</template>-->
+
+<!--<script setup>-->
+
+<!--    import {evaluationresults} from '@/api/xjc-integratedmachine/environment/tscareer.js'-->
+<!--    const router = useRouter()-->
+<!--    const route = useRoute()-->
 
-    本一级学科中......<br>
+<!--    const param = route.query-->
 
-    <div v-for="(item,index) in evaluationresults_list">
-        {{item.university}}-{{item.univercode}}=={{item.result}}--
-        <div @click="jumpToPro_details_video(item)">
-            详情>>
+<!--    const evaluationresults_list = ref([])-->
+<!--    function results(){-->
+<!--        evaluationresults({-->
+<!--            id : param.id-->
+<!--        }).then(resp =>{-->
+<!--            evaluationresults_list.value = resp.evaluationresults-->
+<!--        })-->
+<!--    }-->
+<!--    function jumpToPro_details_video(item){-->
+<!--        console.log("-&#45;&#45;&#45;&#45;&#45;&#45;",item.id)-->
+<!--        router.push({-->
+<!--            path : '/xjc-integratedmachine/environment/university_details_video',-->
+<!--            query :{-->
+<!--                id : item.id-->
+<!--            }-->
+<!--        })-->
+<!--    }-->
+
+<!--    results()-->
+<!--</script>-->
+
+<!--<style scoped>-->
+
+<!--</style>-->
+<template>
+  <div class="university_details_video">
+    <head-component :headinfo=headinfo></head-component>
+    <div class="page-content">
+      <div class="page-img-box">
+        <div class="box-content">
+          <p class="title-info">
+            本一级学科中，全国具有“博士授权”的高校共48所，本次参评38所;部分具有“硕士授权”的高校也参加了评估;参评高校共计84所。(注:评估结果相同的高校排序不分先后，按学校代码排列)</p>
+          <div class="school-box" v-for="(item,index) in evaluationresults_list" :key="index"
+               @click="jumpToPro_details_video(item)">
+            <img src="@/assets/images/environment/contrast.png"/>
+            <div class="right-box">
+              <div class="right-top">
+                <div class="right-top-title">{{ item.university }}</div>
+                <div class="right-top-details">详情
+                  <img style="width: 24px;height: 24px" src="@/assets/images/environment/details_icon.png"/>
+                </div>
+              </div>
+              <p class="info">学校编码：{{item.universitycode }}</p>
+              <p class="info">学科得分： <span class="info-result" :style="{ color: computedColor(item.result)  }">{{item.result}}</span></p>
+              <!--              <p class="info"><span>创建时间:</span><span>{{-->
+              <!--                  item.ctime-->
+              <!--                }}</span><span style="margin-left: 46px">所在地区:</span><span>{{ item.areaname }}</span></p>-->
+              <!--              <p class="info"><span>院校隶属:</span><span>{{ item.subjection }}</span>-->
+              <!--                <span style="margin-left: 46px">院校类型:</span><span>-->
+              <!--                <dict-tag :options="school_category"-->
+              <!--                          :value="item.categoryid"/></span>-->
+              <!--              </p>-->
+            </div>
+          </div>
+          <!--          <div v-for="(item,index) in evaluationresults_list">&ndash;&gt;-->
+          <!--            {{ item.university }}-{{ item.univercode }}=={{ item.result }}-->
+          <!--            <div @click="jumpToPro_details_video(item)">-->
+          <!--              详情>>-->
+          <!--            </div>-->
+          <!--          </div>-->
         </div>
+      </div>
+      <drag_component></drag_component>
     </div>
-</template>
+  </div>
 
+</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 {universityList} from '@/api/xjc-integratedmachine/environment/university.js'
+import {ref} from "vue";
+import {evaluationresults} from '@/api/xjc-integratedmachine/environment/tscareer.js'
+
+const router = useRouter()
+const route = useRoute()
+const headinfo = ref({})
+const param = route.query
+const {proxy} = getCurrentInstance()
+const {school_category} = proxy.useDict('school_category')
+import {rankinglist} from '@/api/xjc-integratedmachine/environment/tscareer.js'
+
+const total = ref(0)
+
+
+const evaluationresults_list = ref([])
+
+
+onMounted(() => {
+  setHeadinfo()
+})
+
+function setHeadinfo() {
+  headinfo.value = {
+    title: '高校列表',
+    user: {
+      avatar: '头像路径',
+      nickName: '张三'
+    },
+    backUrl: '/xjc-integratedmachine/environment/query_universitydb_conditions',
+    homeUrl: '/xjc-integratedmachine/environment/index',
+    contrast: true,
+    contrastType: 'university',
+  }
+}
+
+
+const data_list = ref([])
 
-    import {evaluationresults} from '@/api/xjc-integratedmachine/environment/tscareer.js'
-    const router = useRouter()
-    const route = useRoute()
+function list() {
+  rankinglist().then(resp => {
+    console.log("##", resp)
+    data_list.value = resp.data_list.rows
+  })
+}
 
-    const param = route.query
+list()
 
-    const evaluationresults_list = ref([])
-    function results(){
-        evaluationresults({
-            id : param.id
-        }).then(resp =>{
-            evaluationresults_list.value = resp.evaluationresults
-        })
+function results() {
+  evaluationresults({
+    id: param.id
+  }).then(resp => {
+    evaluationresults_list.value = resp.evaluationresults
+  })
+}
+
+function jumpToPro_details_video(item) {
+  console.log("-&#45;&#45;&#45;&#45;&#45;&#45;", item.id)
+  router.push({
+    path: '/xjc-integratedmachine/environment/university_details_video',
+    query: {
+      id: item.id
     }
-    function jumpToPro_details_video(item){
-        console.log("-------",item.id)
-        router.push({
-            path : '/xjc-integratedmachine/environment/university_details_video',
-            query :{
-                id : item.id
+  })
+}
+// 定义一个计算属性来计算颜色
+function computedColor(devisionResult) {
+  switch (devisionResult) {
+    case 'A+':
+    case 'A':
+    case 'A-':
+      return '#14CB8B'; // 当devisionResult为“中等”时返回蓝色
+    case 'B+':
+    case 'B':
+    case 'B-':
+      return '#3A57F8'; // 当devisionResult为“中等”时返回蓝色
+    case 'C+':
+    case 'C':
+    case 'C-':
+      return '#FF7D59'; // 当devisionResult为“中等”时返回蓝色
+  }
+}
+results()
+</script>
+
+<style scoped lang="scss">
+p, div {
+  margin: 0;
+  padding: 0;
+}
+
+.university_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%;
+    height: 922px;
+    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;
+
+      .box-content {
+        width: 1832px;
+        height: 922px;
+        display: flex;
+        padding-left: 20px;
+        padding-top: 30px;
+        padding-bottom: 55px;
+        //justify-content: space-between;
+        //margin-left: 41px;
+        //margin-right: 41px;
+        align-items: center;
+        flex-wrap: wrap;
+        overflow: auto;
+        //border: 1px solid red;
+        .school-box {
+          width: 570px;
+          height: 204px;
+          background: #FFFFFF;
+          margin-left: 20px;
+          box-shadow: 0px 2px 4px 2px rgba(0, 0, 0, 0.09);
+          border-radius: 5px 5px 5px 5px;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          margin-bottom: 45px;
+
+          img {
+            width: 154px;
+            height: 154px;
+            //border: 1px solid;
+            margin-left: 13px;
+          }
+
+          .right-box {
+            width: 384px;
+            height: 204px;
+            margin-left: 35px;
+            //border: 1px solid;
+            .right-top {
+              height: 90px;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+              border-bottom: 1px solid #E6E6E6;
+
+              .right-top-title {
+                font-weight: bold;
+                font-size: 32px;
+                color: #1E410E;
+                line-height: 24px;
+              }
+
+              .right-top-details {
+                font-weight: 400;
+                font-size: 20px;
+                color: #515F6A;
+                display: flex;
+                justify-content: space-around;
+                align-items: center;
+                margin-right: 30px;
+              }
             }
-        })
-    }
 
-    results()
-</script>
+            .info {
+              margin-top: 14px;
+              font-weight: 400;
+              font-size: 20px;
+              color: #333333;
+              line-height: 25px;
+              display: flex;
+
+              span {
+                margin-left: 4px;
+              }
+            }
+            .info-result{
+              font-weight: bold;
+              font-size: 48px;
+              color: #14CB8B;
+            }
+          }
+        }
+
+        .title-info {
+          font-weight: bold;
+          font-size: 32px;
+          color: #333333;
+          line-height: 52px;
+          text-indent: 2em;
+          //text-align: center;
+          margin-left: 57px;
+          margin-right: 57px;
+          margin-bottom: 30px;
+        }
+      }
+    }
+  }
+}
 
-<style scoped>
 
 </style>
+

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

@@ -6,8 +6,11 @@
         <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)">
+               :class="{
+      'item-result-box-active': activeIndex === index,
+      'item-result-box': activeIndex !== index
+    }"
+               @click="detail(item.value,index)">
             <div v-html="item.value"></div>
           </div>
         </div>
@@ -21,7 +24,7 @@
         </div>
       </div>
     </div>
-    <drag_component></drag_component>
+<!--    <drag_component></drag_component>-->
   </div>
 
 </template>
@@ -30,37 +33,46 @@
 import {onMounted} from "vue";
 import headComponent from '@/views/xjc-integratedmachine/components/head_component.vue'
 import Drag_component from "@/views/xjc-integratedmachine/components/drag_component.vue";
+
 const headinfo = ref({})
 
-function setHeadinfo(){
+function setHeadinfo() {
   headinfo.value = {
     title: '学科适合专业',
     user: {
       avatar: '头像路径',
       nickName: '张三'
     },
-    backUrl : '/xjc-integratedmachine/wakeup/career_recognize/index'
+    backUrl: '/xjc-integratedmachine/wakeup/career_recognize/index'
   }
 }
+
 import {subjectspecialdetail} from '@/api/xjc-integratedmachine/environment/tscareer.js'
+
 const router = useRouter()
 const {proxy} = getCurrentInstance()
 const {subject} = proxy.useDict('subject')
-
+const activeIndex = ref(null)
 const data_list = ref([])
-function detail(data) {
+
+function detail(data, index) {
+  setActive(index)
   subjectspecialdetail({
-    id : data
-  }).then(resp =>{
+    id: data
+  }).then(resp => {
     data_list.value = resp.subjectspecialdetail
   })
 }
 
-function jumpToPro_details_video(item){
+function setActive(index) {
+  activeIndex.value = index; // 设置当前被激活的按钮的索引
+}
+
+function jumpToPro_details_video(item) {
   router.push({
-    path : '/xjc-integratedmachine/environment/pro_details_video',
-    query :{
-      id : item.majorid
+    path: '/xjc-integratedmachine/environment/pro_details_video',
+    query: {
+      id: item.majorid
     }
   })
 }
@@ -72,16 +84,18 @@ onMounted(() => {
 </script>
 
 <style scoped lang="scss">
-p{
+p {
   margin: 0;
   padding: 0;
 }
-.development_stage{
+
+.development_stage {
   background: url('@/assets/images/login/login-home-background.png') no-repeat;
   background-size: 1920px 1080px;
-  z-index:10;
+  z-index: 10;
   width: 100%;
   height: 1080px;
+
   .page-content {
     width: 100%;
     height: 980px;
@@ -89,7 +103,8 @@ p{
     top: 100px;
     bottom: 0;
   }
-  .page-box{
+
+  .page-box {
     width: 1832px;
     height: 910px;
     background: #FFFFFF;
@@ -99,6 +114,7 @@ p{
     position: relative;
     overflow: auto;
     padding-bottom: 30px;
+
     .title {
       height: 40px;
       border-left: 8px #8CE349 solid;
@@ -111,6 +127,7 @@ p{
       padding-left: 11px;
     }
   }
+
   .two-page-result {
     //width: 1276px;
     //height: 337px;
@@ -118,16 +135,15 @@ p{
     display: flex;
     flex-wrap: wrap;
     align-items: center;
-    .item-result-box-active {
+
+    .item-result-box {
       min-width: 244px;
       height: 92px;
-      background: linear-gradient(180deg, #B6FFEF 0%, #C5EEFF 100%);
-      box-shadow: inset 0px -2px 7px 0px #1E410E;
+      background: #E0EEF4;
       border-radius: 5px 5px 5px 5px;
-      border: 1px solid #A2F57F;
       font-weight: 400;
       font-size: 30px;
-      color: #0DE6A1;
+      color: #000000;
       line-height: 90px;
       text-align: center;
       margin-left: 50px;
@@ -137,11 +153,13 @@ p{
       padding-right: 20px;
     }
 
-    .item-result-box {
+    .item-result-box:hover {
       min-width: 244px;
       height: 92px;
-      background: #E0EEF4;
+      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;
@@ -154,7 +172,7 @@ p{
       padding-right: 20px;
     }
 
-    .item-result-box:hover {
+    .item-result-box-active {
       min-width: 244px;
       height: 92px;
       background: linear-gradient(180deg, #B6FFEF 0%, #C5EEFF 100%);
@@ -167,6 +185,7 @@ p{
       line-height: 90px;
       text-align: center;
       margin-left: 50px;
+      margin-right: 50px;
       margin-top: 32px;
       padding-left: 20px;
       padding-right: 20px;

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

@@ -22,6 +22,7 @@
                           :value="item.categoryid"/></span>
               </p>
             </div>
+
           </div>
         </div>
       </div>

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

@@ -1,19 +1,109 @@
 <template>
-    高校排名查询1<br>
-    软科中国大学排名..........................
-    <el-button @click="jumpTo">点击查询</el-button>
+  <div class="university_ranking_query1">
+    <head-component :headinfo=headinfo></head-component>
+    <div class="page-content">
+      <div class="page-box">
+        <div class="content">
+          软科中国大学排名(Best Chinese Universities Ranking)，
+          前称软科中国最好大学排名，是由上海软科教育信息咨询有限公司(简称软科)发布的年度中国大学排名，
+          首次发布于2015年。“软科中国大学排名”的评价体系源自自主研发的可视化评价专利技术，
+          依托“大学360度数据监测平台”的大数据支持，
+          设置办学层次、学科水平、办学资源、师资规模与结构、人才培养、科学研究、服务社会、高端人才、重大项目与成果、国际竞争力共十个评价模块，
+          细分36个评价维度，内嵌104项评价指标，涉及320个评价变量，是对中国大学办学水平的立体化监测式评价。
+        </div>
+        <div class="bottom-box">
+          <img class="bottom-btn" @click="jumpTo" style="z-index:10;  width: 244px; height: 100px;" src="@/assets/images/environment/search-btn.png">
+        </div>
+      </div>
+    </div>
+    <!--    <drag_component></drag_component>-->
+  </div>
 </template>
 
 <script setup>
-    const router = useRouter()
-    function jumpTo() {
-        router.push({
-            path : '/xjc-integratedmachine/environment/university_ranking_query2'
-        })
-    }
+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() {
+  router.push({
+    path: '/xjc-integratedmachine/environment/university_ranking_query2'
+  })
+}
+onMounted(()=>{
+  setHeadinfo();
+})
 </script>
 
-<style scoped>
+
+<style scoped lang="scss">
+.university_ranking_query1 {
+  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;
+    }
+
+    .page-box {
+      width: 1832px;
+      height: 910px;
+      background: #FFFFFF;
+      border-radius: 35px 35px 35px 35px;
+      margin: 13px auto 0;
+      padding-top: 25px;
+      position: relative;
+      padding-bottom: 30px;
+
+      .content {
+        text-indent: 2em;
+        font-size: 30px;
+        color: #333333;
+        line-height: 52px;
+        margin-top: 100px;
+      }
+    }
+    .bottom-box{
+      width: 100%;
+      display: flex;
+      justify-content: space-around;
+      .bottom-btn {
+        margin-top: 420px;
+      }
+    }
+
+  }
+}
+
 
 </style>
+

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

@@ -1,32 +1,234 @@
 <template>
-    高校排名查询2<br>
-    <div v-for="(item,index) in data_list">
-        {{item.logo}}--{{item.schoolname}}--
-        创建时间:{{item.ctime}},所在地区{{item.areaname}},院校隶属{{item.subjection}},院校类型:<dict-tag :options="school_category" :value="item.categoryid"/>
+  <div class="university_details_video">
+    <head-component :headinfo=headinfo></head-component>
+    <div class="page-content">
+      <div class="page-img-box">
+        <div class="box-content">
+          <div class="school-box" v-for="(item,index) in data_list" :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.schoolname }}</div>
+                <div class="right-top-details">详情
+                  <img style="width: 24px;height: 24px" src="@/assets/images/environment/details_icon.png"/>
+                </div>
+              </div>
+<!--              <p class="info">学校编码：</p>-->
+<!--              <p class="info">学科得分：</p>-->
+              <p class="info"><span>创建时间:</span><span>{{
+                  item.ctime
+                }}</span><span style="margin-left: 46px">所在地区:</span><span>{{ item.areaname }}</span></p>
+              <p class="info"><span>院校隶属:</span><span>{{ item.subjection }}</span>
+                <span style="margin-left: 46px">院校类型:</span><span>
+                <dict-tag :options="school_category"
+                          :value="item.categoryid"/></span>
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <drag_component></drag_component>
     </div>
-
+  </div>
 
 </template>
-
 <script setup>
-    const {proxy} = getCurrentInstance()
-    const {school_category} = proxy.useDict('school_category')
-    import {rankinglist} from '@/api/xjc-integratedmachine/environment/tscareer.js'
-    const router = useRouter()
-    const route = useRoute()
-
-
-    const data_list = ref([])
-    function list() {
-        rankinglist().then(resp =>{
-            console.log("##",resp)
-            data_list.value = resp.data_list.rows
-        })
+import headComponent from '@/views/xjc-integratedmachine/components/head_component.vue'
+import Drag_component from "@/views/xjc-integratedmachine/components/drag_component.vue";
+import {universityList} from '@/api/xjc-integratedmachine/environment/university.js'
+import {ref} from "vue";
+
+const router = useRouter()
+const route = useRoute()
+const headinfo = ref({})
+const params = route.query
+const {proxy} = getCurrentInstance()
+const {school_category} = proxy.useDict('school_category')
+import {rankinglist} from '@/api/xjc-integratedmachine/environment/tscareer.js'
+const total = ref(0)
+const tableData = ref(null)
+
+const data = reactive({
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    areaid: params.areaid,
+    educationlevel: params.educationlevel,
+    characteristic: params.characteristic,
+  },
+})
+const {queryParams} = toRefs(data)
+
+
+function getList() {
+  universityList(proxy.addDateRange(queryParams.value)).then(resp => {
+    tableData.value = resp.data.rows
+    total.value = resp.data.total
+  })
+}
+
+function handleDetail(row) {
+  router.push({
+    path: '/xjc-integratedmachine/environment/university_details_video',
+    query: {
+      id: row.id,
+      name: row.name,
+      oldid: row.oldid,
     }
-    list()
+  })
+}
+
+onMounted(() => {
+  setHeadinfo()
+})
+getList()
+
+function setHeadinfo() {
+  headinfo.value = {
+    title: '中国大学百强榜',
+    user: {
+      avatar: '头像路径',
+      nickName: '张三'
+    },
+    backUrl: '/xjc-integratedmachine/environment/query_universitydb_conditions',
+    homeUrl: '/xjc-integratedmachine/environment/index',
+  }
+}
+
+
+
+const data_list = ref([])
+function list() {
+  rankinglist().then(resp =>{
+    console.log("##",resp)
+    data_list.value = resp.data_list.rows
+  })
+}
+list()
 
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+p, div {
+  margin: 0;
+  padding: 0;
+}
+
+.university_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%;
+    height: 922px;
+    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;
+      .box-content{
+        width: 1832px;
+        height: 922px;
+        display: flex;
+        padding-left: 20px;
+        padding-top: 30px;
+        padding-bottom: 55px;
+        //justify-content: space-between;
+        //margin-left: 41px;
+        //margin-right: 41px;
+        align-items: center;
+        flex-wrap: wrap;
+        overflow: auto;
+        //border: 1px solid red;
+        .school-box {
+          width: 570px;
+          height: 204px;
+          background: #FFFFFF;
+          margin-left: 20px;
+          box-shadow: 0px 2px 4px 2px rgba(0, 0, 0, 0.09);
+          border-radius: 5px 5px 5px 5px;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          margin-bottom: 45px;
+          img {
+            width: 154px;
+            height: 154px;
+            //border: 1px solid;
+            margin-left: 13px;
+          }
+
+          .right-box {
+            width: 384px;
+            height: 204px;
+            //border: 1px solid;
+
+            .right-top {
+              height: 90px;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+              border-bottom: 1px solid #E6E6E6;
+
+              .right-top-title {
+                font-weight: bold;
+                font-size: 32px;
+                color: #1E410E;
+                line-height: 24px;
+              }
+
+              .right-top-details {
+                font-weight: 400;
+                font-size: 20px;
+                color: #515F6A;
+                display: flex;
+                justify-content: space-around;
+                align-items: center;
+                margin-right: 30px;
+              }
+            }
+
+            .info {
+              margin-top: 14px;
+              font-weight: 400;
+              font-size: 20px;
+              color: #333333;
+              line-height: 25px;
+              display: flex;
+              span {
+                margin-left: 4px;
+              }
+            }
+          }
+        }
+        .title-info{
+          font-weight: bold;
+          font-size: 32px;
+          color: #333333;
+          line-height: 52px;
+          text-indent: 2em;
+          //text-align: center;
+          margin-left: 57px;
+          margin-right: 57px;
+          margin-bottom: 30px;
+        }
+      }
+    }
+  }
+}
+
 
 </style>
+

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

@@ -46,7 +46,7 @@
             <p class="title">工科基地</p>
             <div class="info"  v-html="data_list[4].content"></div>
           </div>
-          <div class="one-page" v-show="fivePage">
+          <div class="one-page" v-show="sixPage">
             <p class="title">珠峰计划</p>
             <div class="info"  v-html="data_list[5].content"></div>
           </div>
@@ -91,8 +91,6 @@ function setHeadinfo(){
     },
     backUrl : '/xjc-integratedmachine/environment/query_universitydb_conditions',
     homeUrl:'/xjc-integratedmachine/environment/index',
-    contrast:true,
-    contrastType:'major'
   }
 }
 
@@ -174,6 +172,14 @@ const showPage = (val) => {
     threePage.value = false;
     fourPage.value = false;
     fivePage.value = true;
+    sixPage.value = false;
+  }else if (val === 6) {
+    onePage.value = false;
+    twoPage.value = false;
+    threePage.value = false;
+    fourPage.value = false;
+    fivePage.value = false;
+    sixPage.value = true;
   }
 }
 detail()
@@ -241,7 +247,7 @@ p, div {
 
   .bottom-content {
     //margin-top: 10px;
-    border: 1px solid;
+    //border: 1px solid;
     height: 922px;
     .tab-box {
       display: flex;