Merge remote-tracking branch 'origin/master'

src/router/router_environment.js

@@ -157,9 +157,11 @@ const router = [
     {
         path: '/xjc-integratedmachine/environment/ai_career_interview2',
         component: () => import('@/views/xjc-integratedmachine/environment/ai_career_interview2.vue'),
+    },
+    {
+        path: '/xjc-integratedmachine/environment/contrast_data',
+        component: () => import('@/views/xjc-integratedmachine/environment/contrast_data.vue'),
     }
-
-
 ]
 export default {
     router

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

@@ -9,25 +9,28 @@
     <img @click="cancle_collection" v-if="collectionList.length >= 1" src="@/assets/images/environment/collaged.png">
     <p @click="cancle_collection" v-if="collectionList.length >= 1">取消收藏</p>
   </div>
-    <div class="item-img">
-      <img src="@/assets/images/environment/contrast.png">
-<!--      <img src="@/assets/images/environment/contrasted.png">-->
+    <div class="item-img" >
+      <img v-if="isContrastVal" @click="contrastCancel" src="@/assets/images/environment/contrasted.png">
+      <img v-else @click="contrastAdd" src="@/assets/images/environment/contrast.png">
       <p>对比</p>
     </div>
 </template>
 
 <script setup>
 import {addCollection, getCollection, removeCollection} from '@/api/xjc-integratedmachine/environment/university.js'
-
+import {ElMessage} from "element-plus";
+import {handleThemeStyle} from "@/utils/theme.js";
+import useSettingsStore from "@/store/modules/settings.js";
 const props = defineProps({
   collection: {
     contentType: null,
-    contentId: null
+    contentId: null,
+    contentVal:null,
   }
 })
 
 const collectionList = ref([])
-
+const isContrastVal = ref(false)
 function collection() {
   let data = {
     contentType: props.collection.contentType,
@@ -37,7 +40,72 @@ function collection() {
     queryConnection()
   })
 }
+//查询详情中学校是否被加入对比列表
+function isContrast (){
+  let isValA = sessionStorage.getItem('contrastA') && JSON.parse(sessionStorage.getItem('contrastA')) || false
+  let isValB = sessionStorage.getItem('contrastB') && JSON.parse(sessionStorage.getItem('contrastB')) || false
+  // console.log('isValA',isValA.id,isValB.id,"isValB",props.collection.contentId)
+  // debugger;
+  if(isValA && props.collection.contentId === isValA.id){
+    isContrastVal.value = true;
+  }else if(isValB && props.collection.contentId === isValB.id){
+    isContrastVal.value = true;
+  }else {
+    isContrastVal.value = false;
+  }
+  // console.log("isContrastVal.value",isContrastVal.value)
+}
+function contrastAdd(){
+  let isValA = sessionStorage.getItem('contrastA') || false;
+  let isValB = sessionStorage.getItem('contrastB')|| false;
+//加入对比；
+ if(isValA && isValB){
+   ElMessage({
+     type: 'success',
+     message: '对比列表已有两组学校数据',
+   })
+ }else if(isValA && !isValB){
+   sessionStorage.setItem('contrastB',JSON.stringify(props.collection.contentVal));
+   ElMessage({
+     type: 'success',
+     message: '加入对比成功，可以去对比列表查看',
+   })
+ }else if(!isValA){
+   sessionStorage.setItem('contrastA',JSON.stringify(props.collection.contentVal));
+   ElMessage({
+     type: 'success',
+     message: '成功加入对比列表',
+   })
+ }
+  isContrast()
+}
+function contrastCancel(){
+  let isValA = sessionStorage.getItem('contrastA') && JSON.parse(sessionStorage.getItem('contrastA')) || false;
+  let isValB = sessionStorage.getItem('contrastB') && JSON.parse(sessionStorage.getItem('contrastB'))|| false;
+  //取消对比；
 
+  if(isContrastVal.value){
+    // console.log("1",isValA,props.collection.contentId,)
+    if(isValA && props.collection.contentId === isValA.id){
+      sessionStorage.removeItem('contrastA');
+      isContrastVal.value = false;
+      // console.log("1")
+      ElMessage({
+        type: 'info',
+        message: '已取消对比',
+      })
+    }else if(isValB && props.collection.contentId === isValB.id){
+      sessionStorage.removeItem('contrastB');
+      isContrastVal.value = false;
+      // console.log("2")
+      ElMessage({
+        type: 'info',
+        message: '已取消对比',
+      })
+    }
+  }console.log("isContrastVal",isContrastVal.value)
+  isContrast()
+}
 function queryConnection() {
   let data = {
     contentType: props.collection.contentType,
@@ -47,7 +115,11 @@ function queryConnection() {
     collectionList.value = resp.collection
   })
 }
-
+onMounted(() => {
+  nextTick(() => {
+    isContrast()
+  })
+})
 function cancle_collection() {
   let data = {
     id: collectionList.value[0].id,
@@ -69,7 +141,7 @@ p,div{
   flex-direction: column;
   align-items: center;
   width: 400px;
-  border: 1px solid;
+  //border: 1px solid;
   p {
     font-weight: 400;
     font-size: 20px;
@@ -79,7 +151,7 @@ p,div{
   img {
     width: 36px;
     height: 36px;
-    border: 1px solid;
+    //border: 1px solid;
   }
 }
 </style>

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

@@ -7,6 +7,7 @@
       <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="head-right" v-if="!headinfo.isLogin">
         <div class="right-user">
           <img  src="@/assets/images/wakeup/user.png" @click="backTo" alt="404">
@@ -22,11 +23,14 @@
 
 <script setup>
 
+    import {ElMessage} from "element-plus";
+    import {defineEmits} from "vue";
     const {proxy} = getCurrentInstance()
     const router = useRouter()
     const props = defineProps({
       headinfo: {}
     })
+    const emit = defineEmits(['backTo']);
     function backTo() {
       if(props.headinfo.backUrlUse){
         router.push({
@@ -35,14 +39,29 @@
       }else {
         router.go(-1);
       }
+      emit('backTo');
+
     }
     function homeUrlTo() {
         router.push({
           path: props.headinfo.homeUrl
         })
-
-
-
+    }
+    function contrastTo(){
+      const isValA = sessionStorage.getItem('contrastA');
+      const isValB = sessionStorage.getItem('contrastB');
+      if(isValA && isValB){
+       //暂无
+      }else {
+        ElMessage({
+          type: 'info',
+          message: '对比列表不满两组数据',
+        })
+        return;
+      }
+      router.push({
+        path: '/xjc-integratedmachine/environment/contrast_data'
+      })
     }
     function exit() {
         proxy.$modal.confirm('您确认退出吗').then(function () {
@@ -52,10 +71,8 @@
         }).then(() => {
         }).catch(() => {
         })
-
     }
 
-
 </script>
 
 <style scoped lang='scss'>
@@ -71,7 +88,7 @@
       background-color: rgba(251,252,253,0.5);
       justify-content: space-between;
       .head-left{
-        width: 464px;
+        width: 750px;
       }
       .head-icon{
         width: 74px;
@@ -86,7 +103,13 @@
         font-size: 48px;
         color: #060606;
       }
+      .contrast{
+        width: 209px;
+        height: 80px;
+        margin-top: 15px;
+      }
       .head-right{
+          width:750px;
           display: flex;
           justify-content: space-around;
           align-items: center;
@@ -117,6 +140,7 @@
             height: 85px;
           }
         }
+
       }
     }
 </style>

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

@@ -0,0 +1,964 @@
+<template>
+  <div class="contrast_data">
+    <head-component :headinfo=headinfo @backTo="backTo"></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/score-h.png">
+            <img v-else src="@/assets/images/environment/score.png">
+            录取分数线
+          </div>
+        </div>
+      </div>
+      <div class="content-right">
+        <div class="one-page" v-show="onePage">
+          <table class="table">
+            <tr>
+              <td>大学名称</td>
+              <td>{{ contrastA.name }}</td>
+              <td>{{ contrastB.name }}</td>
+            </tr>
+            <tr>
+              <td>基本信息</td>
+              <td class="text-td">
+                <p>创建时间：<span>{{ contrastA.ctime }}</span></p>
+                <p>所在地区：<span>{{ contrastA.areaname }}</span></p>
+                <p>院校隶属：<span>{{ contrastA.subjection }}</span></p>
+                <p class="text-td-p">院校类型：<span>  <dict-tag :options="school_category" :value="contrastA.categoryid"/></span></p>
+              </td>
+              <td class="text-td">
+                <p>创建时间：<span>{{ contrastA.ctime }}</span></p>
+                <p>所在地区：<span>{{ contrastA.areaname }}</span></p>
+                <p>院校隶属：<span>{{ contrastA.subjection }}</span></p>
+                <p class="text-td-p">院校类型：<span>  <dict-tag :options="school_category" :value="contrastA.categoryid"/></span></p>
+              </td>
+
+            </tr>
+            <tr>
+              <td>院校特色</td>
+              <td>
+                <div class="school-level-box">
+                  <p class="school-level" style="background-color: #B3FC7C" v-show="contrastA.nef==='1'">985</p>
+                  <p class="school-level" style="background-color: #BBF88D" v-show="contrastA.too==='1'">211</p>
+                  <p class="school-level" style="background-color: #8CE349" v-show="contrastA.istopschool==='1'">
+                    一流大学</p>
+                  <p class="school-level" style="background-color: #9DFF51" v-show="contrastA.istopsubject==='1'">
+                    一流学科</p>
+                  <p class="school-level" style="background-color: #8ADFC4" v-show="contrastA.self==='1'">强</p>
+                  <p class="school-level" style="background-color: #1EC590" v-show="contrastA.graduate==='1'">研</p>
+                </div>
+              </td>
+              <td>
+                <div class="school-level-box">
+                  <p class="school-level" style="background-color: #B3FC7C" v-show="contrastA.nef==='1'">985</p>
+                  <p class="school-level" style="background-color: #BBF88D" v-show="contrastA.too==='1'">211</p>
+                  <p class="school-level" style="background-color: #8CE349" v-show="contrastA.istopschool==='1'">
+                    一流大学</p>
+                  <p class="school-level" style="background-color: #9DFF51" v-show="contrastA.istopsubject==='1'">
+                    一流学科</p>
+                  <p class="school-level" style="background-color: #8ADFC4" v-show="contrastA.self==='1'">强</p>
+                  <p class="school-level" style="background-color: #1EC590" v-show="contrastA.graduate==='1'">研</p>
+                </div>
+              </td>
+            </tr>
+            <tr>
+              <td>学校性质</td>
+              <td class="text-td "><dict-tag :options="property" :value="contrastA.property"/></td>
+              <td class="text-td"><dict-tag :options="property" :value="contrastA.property"/></td>
+            </tr>
+            <tr>
+              <td>学校地址</td>
+              <td class="text-td">{{ contrastA.address }}</td>
+              <td class="text-td">{{ contrastA.address }}</td>
+            </tr>
+          </table>
+        </div>
+        <div class="two-page" v-show="twoPage">
+          <table class="table">
+            <tr>
+              <td>大学名称</td>
+              <td>{{ contrastA.name }}</td>
+              <td>{{ contrastB.name }}</td>
+            </tr>
+            <tr>
+              <td>基本信息</td>
+              <td class="text-td">
+                <p>创建时间：<span>{{ contrastA.ctime }}</span></p>
+                <p>所在地区：<span>{{ contrastA.areaname }}</span></p>
+                <p>院校隶属：<span>{{ contrastA.subjection }}</span></p>
+                <p class="text-td-p">院校类型：<span>  <dict-tag :options="school_category" :value="contrastA.categoryid"/></span></p>
+              </td>
+              <td class="text-td">
+                <p>创建时间：<span>{{ contrastA.ctime }}</span></p>
+                <p>所在地区：<span>{{ contrastA.areaname }}</span></p>
+                <p>院校隶属：<span>{{ contrastA.subjection }}</span></p>
+                <p class="text-td-p">院校类型：<span>  <dict-tag :options="school_category" :value="contrastA.categoryid"/></span></p>
+              </td>
+
+            </tr>
+            <tr>
+              <td>院校特色</td>
+              <td>
+                <div class="school-level-box">
+                  <p class="school-level" style="background-color: #B3FC7C" v-show="contrastA.nef==='1'">985</p>
+                  <p class="school-level" style="background-color: #BBF88D" v-show="contrastA.too==='1'">211</p>
+                  <p class="school-level" style="background-color: #8CE349" v-show="contrastA.istopschool==='1'">
+                    一流大学</p>
+                  <p class="school-level" style="background-color: #9DFF51" v-show="contrastA.istopsubject==='1'">
+                    一流学科</p>
+                  <p class="school-level" style="background-color: #8ADFC4" v-show="contrastA.self==='1'">强</p>
+                  <p class="school-level" style="background-color: #1EC590" v-show="contrastA.graduate==='1'">研</p>
+                </div>
+              </td>
+              <td>
+                <div class="school-level-box">
+                  <p class="school-level" style="background-color: #B3FC7C" v-show="contrastA.nef==='1'">985</p>
+                  <p class="school-level" style="background-color: #BBF88D" v-show="contrastA.too==='1'">211</p>
+                  <p class="school-level" style="background-color: #8CE349" v-show="contrastA.istopschool==='1'">
+                    一流大学</p>
+                  <p class="school-level" style="background-color: #9DFF51" v-show="contrastA.istopsubject==='1'">
+                    一流学科</p>
+                  <p class="school-level" style="background-color: #8ADFC4" v-show="contrastA.self==='1'">强</p>
+                  <p class="school-level" style="background-color: #1EC590" v-show="contrastA.graduate==='1'">研</p>
+                </div>
+              </td>
+            </tr>
+            <tr>
+              <td>学校性质</td>
+              <td class="text-td "><dict-tag :options="property" :value="contrastA.property"/></td>
+              <td class="text-td"><dict-tag :options="property" :value="contrastA.property"/></td>
+            </tr>
+            <tr>
+              <td>学校地址</td>
+              <td class="text-td">{{ contrastA.address }}</td>
+              <td class="text-td">{{ contrastA.address }}</td>
+            </tr>
+          </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>
+    <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 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 onePage = ref(true)
+const twoPage = ref(false)
+const threePage = ref(false)
+const contrastList = ref(false)
+
+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 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}
+  })
+}
+function  backTo(){
+  sessionStorage.removeItem('contrastA');
+  sessionStorage.removeItem('contrastB');
+}
+onMounted(() => {
+  setHeadinfo()
+
+})
+const contrastA = ref({})
+const contrastB = ref({})
+
+function getData() {
+  const isValA = sessionStorage.getItem('contrastA') && JSON.parse(sessionStorage.getItem('contrastA'));
+  const isValB = sessionStorage.getItem('contrastB') && JSON.parse(sessionStorage.getItem('contrastB'));
+  contrastA.value = isValA;
+  contrastB.value = isValB;
+  console.log("{{contrastA.name}}", contrastA.value, contrastB.value)
+}
+
+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)
+      // 遍历数据数组，并处理每个字符串
+    })
+
+    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,school_category,property} = proxy.useDict('gk_province', 'educationlevel','school_category', 'characteristic','property')
+
+
+
+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
+  })
+}
+
+onMounted(() => {
+  setHeadinfo()
+  getData()
+  const contrastData = JSON.parse(sessionStorage.getItem('contrastList'));
+  if (contrastData) {
+    contrastList.value = contrastData
+  }
+})
+</script>
+
+
+<style scoped lang="scss">
+p, div {
+  margin: 0;
+  padding: 0;
+}
+
+.contrast_data {
+  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 {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        .table {
+          width: 1526px;
+          height: 887px;
+          margin-top: 25px;
+
+          tr:nth-child(1) {
+            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;
+
+            }
+          }
+
+          tr:nth-child(2) {
+            td:nth-child(1) {
+              height: 290px;
+              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;
+            }
+          }
+
+          tr:nth-child(3) {
+            td:nth-child(1) {
+              width: 290px;
+              height: 180px;
+              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;
+            }
+
+            td:nth-child(2) {
+              width: 620px;
+              height: 210px;
+              background: #FFFFFF;
+              border-radius: 4px 4px 4px 4px;
+              border-bottom: 8px solid #E0EEF4;
+              border-right: 8px solid #E0EEF4;
+            }
+
+            td:nth-child(3) {
+              width: 620px;
+              height: 210px;
+              background: #FFFFFF;
+              border-radius: 4px 4px 4px 4px;
+              border-bottom: 8px solid #E0EEF4;
+              border-right: 8px solid #E0EEF4;
+            }
+          }
+
+          tr:nth-child(4) {
+            td:nth-child(1) {
+              width: 290px;
+              height: 110px;
+              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;
+              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;
+            }
+
+            td:nth-child(3) {
+              width: 620px;
+              height: 119px;
+              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;
+            }
+          }
+
+          tr:nth-child(5) {
+            td:nth-child(1) {
+              width: 290px;
+              height: 100px;
+              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;
+              border-bottom: 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;
+              border-bottom: 8px solid #E0EEF4;
+              border-radius: 4px 4px 32px 4px;
+              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;
+            }
+          }
+
+          .text-td {
+            text-align: center;
+            .text-td-p{
+              display: flex;
+              justify-content: center;
+            }
+          }
+        }
+      }
+
+      .two-page {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        .table {
+          width: 1526px;
+          height: 887px;
+          margin-top: 25px;
+
+          tr:nth-child(1) {
+            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;
+
+            }
+          }
+
+          tr:nth-child(2) {
+            td:nth-child(1) {
+              height: 290px;
+              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;
+            }
+          }
+
+          tr:nth-child(3) {
+            td:nth-child(1) {
+              width: 290px;
+              height: 180px;
+              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;
+            }
+
+            td:nth-child(2) {
+              width: 620px;
+              height: 210px;
+              background: #FFFFFF;
+              border-radius: 4px 4px 4px 4px;
+              border-bottom: 8px solid #E0EEF4;
+              border-right: 8px solid #E0EEF4;
+            }
+
+            td:nth-child(3) {
+              width: 620px;
+              height: 210px;
+              background: #FFFFFF;
+              border-radius: 4px 4px 4px 4px;
+              border-bottom: 8px solid #E0EEF4;
+              border-right: 8px solid #E0EEF4;
+            }
+          }
+
+          tr:nth-child(4) {
+            td:nth-child(1) {
+              width: 290px;
+              height: 110px;
+              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;
+              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;
+            }
+
+            td:nth-child(3) {
+              width: 620px;
+              height: 119px;
+              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;
+            }
+          }
+
+          tr:nth-child(5) {
+            td:nth-child(1) {
+              width: 290px;
+              height: 100px;
+              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;
+              border-bottom: 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;
+              border-bottom: 8px solid #E0EEF4;
+              border-radius: 4px 4px 32px 4px;
+              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;
+            }
+          }
+
+          .text-td {
+            text-align: center;
+            .text-td-p{
+              display: flex;
+              justify-content: center;
+            }
+          }
+        }
+
+      }
+    }
+  }
+
+}
+
+.dialog-box {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+
+  div {
+    //border: 1px solid;
+
+  }
+
+  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/pro_details_video.vue

@@ -1,116 +1,638 @@
 <template>
-    专业详情视频
-    <collectionComponent :collection="collection"></collectionComponent>
-<br>
-    <div>
-        专业代码:{{entity.code}},
-        学历层次:
-        <dict-tag :options="educationlevel" :value="entity.bkzk"/>
-        ,休学年限{{entity.years}},{{entity.degree}}
-    </div>
-    <br>
-    开设课程
-    <br>
-    <div>
-    {{entity.course}}
-    </div>
-    <br>
-    相近专业
-    <br>
-    <div v-for="(item,index) in similar_list">
-        {{item.name}}
-    </div>
-    <br>
-
-    <el-card style="width:80%;">
-        <div @click="changeTab('zyjd')">专业解读</div>
-        <div @click="changeTab('ksyx')">开设院校</div>
-        <div @click="changeTab('xkpg')">学科评估</div>
-        <div @click="changeTab('jyqj')">就业前景</div>
-        <div @click="changeTab('zysp')">专业视频</div>
-    </el-card>
-
-    <div v-show="tabIndex == 'zyjd'" v-html="entity.describe"></div>
-    <div v-show="tabIndex == 'ksyx'">
-        <div v-for="(item,index) in kaishe_list">
-            {{entity.name}}
-        </div>
-    </div>
-    <div v-show="tabIndex == 'xkpg'">
-        <div v-for="(item,index) in pinggu_list">
-            {{item.name}}
+  <div class="pro_details_video">
+    <head-component :headinfo=headinfo></head-component>
+    <div class="page-content">
+      <div class="page-img-box">
+        <div class="top-content">
+          <div class="top-content-right">
+            <div class="right-top">
+              <p class="title">{{ entity.name }}</p>
+              <div class="right-top-icon">
+<!--                <collectionComponent :collection="collection_data"></collectionComponent>-->
+              </div>
+            </div>
+            <div class="content-info">
+              <p>专业代码:{{ entity.code }}</p>
+              <p>
+                学历层次:
+                <dict-tag :options="educationlevel" :value="entity.bkzk"/>
+              </p>
+              <p>修学年限:{{ entity.years }}</p>
+              <p>授予学位:{{ entity.degree }}</p>
+            </div>
+          </div>
+          <div class="info-box">
+            <p class="title">开设课程</p>
+            <div class="info-text" v-html="entity.course">
+            </div>
+          </div>
+          <div class="info-box">
+            <p class="title">相近专业</p>
+            <div class="info">
+              <div class="info-item" v-for="(item,index) in similar_list">
+                {{ item.name }}
+              </div>
+            </div>
+          </div>
         </div>
-    </div>
-    <div v-show="tabIndex == 'jyqj'" v-html="entity.employment">
-
-
-    </div>
-    <div v-show="tabIndex == 'zysp'">
-        <div ref="videoContainer" class="video-container">
-            <video ref="videoPlayer" id="playerId" class="video-js vjs-default-skin" controls preload="auto" :data-setup="{}">
+        <div class="bottom-content">
+          <div class="tab-box">
+            <div :class="[onePage?'item-box-active':'item-box']" @click="showPage(1)">
+              专业解读
+            </div>
+            <div :class="[twoPage?'item-box-active':'item-box']" @click="showPage(2)">
+              开设院校
+            </div>
+            <div :class="[threePage?'item-box-active':'item-box']" @click="showPage(3)">
+              学科评估
+            </div>
+            <div :class="[fourPage?'item-box-active':'item-box']" @click="showPage(4)">
+              就业前景
+            </div>
+            <div :class="[fivePage?'item-box-active':'item-box']" @click="showPage(5)">
+              专业视频
+            </div>
+          </div>
+          <div class="one-page" v-show="onePage">
+            <p class="title">专业解读</p>
+            <div  v-html="entity.describe"></div>
+          </div>
+          <div class="one-page" v-show="twoPage">
+            <p class="title">开设院校</p>
+            <div v-for="(item,index) in kaishe_list">
+              {{ entity.name }}
+            </div>
+          </div>
+          <div class="one-page" v-show="threePage">
+            <p class="title">学科评估</p>
+            <div v-for="(item,index) in pinggu_list">
+              {{ item.name }}
+            </div>
+          </div>
+          <div class="one-page" v-show="fourPage">
+            <p class="title">就业前景</p>
+            <div v-html="entity.employment">
+            </div>
+          </div>
+          <div class="one-page" v-show="fivePage">
+            <p class="title">专业视频</p>
+            <div ref="videoContainer" class="video-container">
+              <video ref="videoPlayer" id="playerId" class="video-js vjs-default-skin" controls preload="auto"
+                     :data-setup="{}">
                 <!-- 可以在这里插入source标签以指定你的视频源 -->
                 <source :src="entity.path" type="video/mp4">
-            </video>
+              </video>
+            </div>
+          </div>
         </div>
-    </div>
+        </div>
+
+<!--      专业详情视频-->
+<!--      <collectionComponent :collection="collection"></collectionComponent>-->
+<!--      <br>-->
+<!--      <div>-->
+<!--        专业代码:{{ entity.code }},-->
+<!--        学历层次:-->
+<!--        <dict-tag :options="educationlevel" :value="entity.bkzk"/>-->
+<!--        ,休学年限{{ entity.years }},{{ entity.degree }}-->
+<!--      </div>-->
+<!--      <br>-->
+<!--      开设课程-->
+<!--      <br>-->
+<!--      <div>-->
+<!--        {{ entity.course }}-->
+<!--      </div>-->
+<!--      <br>-->
+<!--      相近专业-->
+<!--      <br>-->
+<!--      <div v-for="(item,index) in similar_list">-->
+<!--        {{ item.name }}-->
+<!--      </div>-->
+<!--      <br>-->
 
+<!--      <el-card style="width:80%;">-->
+<!--        <div @click="changeTab('zyjd')">专业解读</div>-->
+<!--        <div @click="changeTab('ksyx')">开设院校</div>-->
+<!--        <div @click="changeTab('xkpg')">学科评估</div>-->
+<!--        <div @click="changeTab('jyqj')">就业前景</div>-->
+<!--        <div @click="changeTab('zysp')">专业视频</div>-->
+<!--      </el-card>-->
+
+<!--      <div v-show="tabIndex == 'zyjd'" v-html="entity.describe"></div>-->
+<!--      <div v-show="tabIndex == 'ksyx'">-->
+<!--        <div v-for="(item,index) in kaishe_list">-->
+<!--          {{ entity.name }}-->
+<!--        </div>-->
+<!--      </div>-->
+<!--      <div v-show="tabIndex == 'xkpg'">-->
+<!--        <div v-for="(item,index) in pinggu_list">-->
+<!--          {{ item.name }}-->
+<!--        </div>-->
+<!--      </div>-->
+<!--      <div v-show="tabIndex == 'jyqj'" v-html="entity.employment">-->
+<!--      </div>-->
+<!--      <div v-show="tabIndex == 'zysp'">-->
+<!--        <div ref="videoContainer" class="video-container">-->
+<!--          <video ref="videoPlayer" id="playerId" class="video-js vjs-default-skin" controls preload="auto"-->
+<!--                 :data-setup="{}">-->
+<!--            &lt;!&ndash; 可以在这里插入source标签以指定你的视频源 &ndash;&gt;-->
+<!--            <source :src="entity.path" type="video/mp4">-->
+<!--          </video>-->
+<!--        </div>-->
+<!--      </div>-->
+    </div>
+  </div>
 </template>
 
 <script setup>
-    import videojs from 'video.js';
-    import 'video.js/dist/video-js.css';
-    import collectionComponent from '@/views/xjc-integratedmachine/components/collection_component.vue'
-    import {specialtyDetail} from '@/api/xjc-integratedmachine/environment/specialty.js'
+import videojs from 'video.js';
+import 'video.js/dist/video-js.css';
+import collectionComponent from '@/views/xjc-integratedmachine/components/collection_component.vue'
+import {specialtyDetail} from '@/api/xjc-integratedmachine/environment/specialty.js'
+import {ref} from "vue";
+import headComponent from '@/views/xjc-integratedmachine/components/head_component.vue'
+import Drag_component from "@/views/xjc-integratedmachine/components/drag_component.vue";
+
+const {proxy} = getCurrentInstance()
+const {educationlevel} = proxy.useDict('educationlevel')
+
+
+const router = useRouter()
+const route = useRoute()
+const tabIndex = ref("zyjd")
+const headinfo = ref({})
+const onePage = ref(true)
+const twoPage = ref(false)
+const threePage = ref(false)
+const fourPage = ref(false)
+const fivePage = ref(false)
+function setHeadinfo(){
+  headinfo.value = {
+    title: '专业详情',
+    user: {
+      avatar: '头像路径',
+      nickName: '张三'
+    },
+    backUrl : '/xjc-integratedmachine/environment/query_universitydb_conditions',
+    homeUrl:'/xjc-integratedmachine/environment/index',
+    contrast:true,
+  }
+}
+onMounted(() => {
+  setHeadinfo()
+})
+function changeTab(path) {
+  tabIndex.value = path
+  if (path == 'zysp') {
+    const player = videojs(playerId, {autoplay: true});
+    player.src(entity.value.path);
+    player.on("ended", () => {
+    })
+  }
+}
+
+const param = route.query
+
+const collection = ref({
+  contentType: 2,
+  contentId: param.id
+})
+
+
+const entity = ref({})
+const kaishe_list = ref([])
+const pinggu_list = ref([])
+const similar_list = ref([])
+
+function detail() {
+  specialtyDetail({
+    id: param.id
+  }).then(resp => {
+    entity.value = resp.entity
+    kaishe_list.value = resp.kaishe_list
+    pinggu_list.value = resp.pinggu_list
+    similar_list.value = resp.similar_list
+  })
+}
+const showPage = (val) => {
+  if (val === 1) {
+    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;
+  } else if (val === 6) {
+    onePage.value = false;
+    twoPage.value = false;
+    threePage.value = false;
+    fourPage.value = false;
+    fivePage.value = false;
+  } else if (val === 7) {
+    onePage.value = false;
+    twoPage.value = false;
+    threePage.value = false;
+    fourPage.value = false;
+    fivePage.value = false;
+  } else if (val === 8) {
+    onePage.value = false;
+    twoPage.value = false;
+    threePage.value = false;
+    fourPage.value = false;
+    fivePage.value = false;
+  }
+  //清空数据
+  form.area = '';
+  form.areanam = '';
+  form.university = '';
+  form.categoryName = '';
+}
+detail()
+
+
+</script>
+
+<style scoped lang="scss">
+p, div {
+  margin: 0;
+  padding: 0;
+}
+
+.pro_details_video {
+  background: url('@/assets/images/environment/university-detail.png') no-repeat;
+  background-size: 1920px 1080px;
+  z-index: 10;
+  width: 100%;
+  height: 1080px;
+
+  .page-content {
+    width: 100%;
+    position: absolute;
+    top: 100px;
+    bottom: 0;
+    display: flex;
+    justify-content: center;
+  }
+
+  .page-img-box {
+    width: 1832px;
+    height: 922px;
+    margin-top: 13px;
+    background: rgba(255, 255, 255, 0.4);
+    border-radius: 35px 35px 35px 35px;
+    display: flex;
+    //justify-content: space-around;
+    flex-direction: column;
+    //align-items: center;
+
+    .top-content {
+      width: 1832px;
+      height: 300px;
+      display: flex;
+      justify-content: space-between;
+      //align-items: center;
+      flex-direction: column;
+      .top-content-right {
+        margin-left: 45px;
+        width: 1630px;
+        margin-left: 45px;
+
+        .title {
+          font-weight: bold;
+          font-size: 36px;
+          color: #1E410E;
+          line-height: 24px;
+          //margin-top: 63px;
+        }
+
+        .school-level-box {
+          display: flex;
+          justify-content: left;
+          //margin-top: 32px;
+
+          .school-level {
+            margin-right: 20px;
+            width: 174px;
+            height: 54px;
+            background: #B3FC7C;
+            border-radius: 5px 5px 5px 5px;
+            font-weight: bold;
+            font-size: 20px;
+            color: #000000;
+            line-height: 54px;
+            text-align: center;
+          }
+        }
+
+        .text-box {
+          width: 1124px;
+          border:1px solid;
+          //display: flex;
+          ////justify-content: space-between;
+          //align-items: center;
+          //flex-wrap: wrap;
+          //margin-top: 14px;
+
+          p {
+            margin-right: 20px;
+          }
+        }
+
+        .right-top {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+
+          .right-top-icon {
+            width: 200px;
+            height: 68px;
+            border: 1px solid;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 24px;
 
+            .item-img {
+              display: flex;
+              flex-direction: column;
+              align-items: center;
 
-    const {proxy} = getCurrentInstance()
-    const {educationlevel} = proxy.useDict('educationlevel')
+              p {
+                font-weight: 400;
+                font-size: 20px;
+                color: #515F6A;
 
+              }
 
+              img {
+                width: 36px;
+                height: 36px;
+                border: 1px solid;
+              }
+            }
+          }
+        }
+
+      }
+
+      .content-info{
+        display: flex;
 
+        //justify-content: space-around;
+        p{
+          width: 200px;
+          margin-right: 10px;
+          display: flex;
+          font-weight: 400;
+          font-size: 20px;
+          color: #333333;
+        }
+      }
+      .info-box{
+        margin-left: 33px;
+        height: 300px;
+        .title {
+          height: 40px;
+          border-left: 8px #8CE349 solid;
+          margin-top: 33px;
+          font-weight: 400;
+          font-size: 28px;
+          color: #333333;
+          line-height: 40px;
+          padding-left: 11px;
+        }
+        .info{
+           margin-top: 19px;
+           font-weight: 400;
+           font-size: 20px;
+           color: #333333;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
 
-    const router = useRouter()
-    const route = useRoute()
-    const tabIndex = ref("zyjd")
-    function changeTab(path) {
-        tabIndex.value = path
-        if(path == 'zysp'){
-            const player = videojs(playerId, {autoplay: true});
-            player.src(entity.value.path);
-            player.on("ended", () => {
-            })
+          .info-item{
+            width: 244px;
+            height: 80px;
+            background: #FFFFFF;
+            border-radius: 5px 5px 5px 5px;
+            border: 1px solid #A2F57F;
+            font-weight: 400;
+            font-size: 30px;
+            color: #000000;
+            line-height:  80px;
+            text-align: center;
+            margin-top: 14px;
+          }
         }
+        .info-text{
+          margin-top: 19px;
+          font-weight: 400;
+          font-size: 20px;
+          color: #333333;
+        }
+      }
+
     }
 
-    const param = route.query
+  }
 
-    const collection = ref({
-        contentType : 2,
-        contentId :param.id
-    })
 
+  .bottom-content {
+    margin-top: 10px;
+    //border: 1px solid;
+    //margin-top: 25px;
+    //width:100px;
+    height: 30px;
+    .tab-box {
+      display: flex;
+      padding-right: 279px;
 
-    const entity = ref({})
-    const kaishe_list = ref([])
-    const pinggu_list = ref([])
-    const similar_list = ref([])
-
-    function detail() {
-        specialtyDetail({
-            id: param.id
-        }).then(resp => {
-            entity.value = resp.entity
-            kaishe_list.value = resp.kaishe_list
-            pinggu_list.value = resp.pinggu_list
-            similar_list.value = resp.similar_list
-        })
+      img {
+        width: 36px;
+        height: 36px;
+        margin-right: 12px;
+      }
     }
 
-    detail()
 
+    .item-box {
+      text-align: center;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 202px;
+      height: 65px;
+      box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.09);
+      border-radius: 5px 5px 0px 0px;
+      font-weight: 400;
+      font-size: 32px;
+      color: #979797;
 
-</script>
+    }
+
+    .item-box-active {
+      text-align: center;
+      color: #000000;
+      background: #FFFFFF;
+      font-weight: bold;
+      font-size: 32px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 202px;
+      height: 65px;
+      background: #FFFFFF;
+      box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.09);
+      border-radius: 5px 5px 0px 0px;
+
+    }
+  }
+
+  //.editor-content div,
+  //.editor-content span,
+  //.editor-content p,
+  //.editor-content h1,
+  //.editor-content h2,
+  //.editor-content h3,
+  //.editor-content h4,
+  //.editor-content h5,
+  //.editor-content h6 {
+  //  font-size: 26px !important;
+  //  line-height: 37px !important;
+  //}
+  //
+  //.editor-content div,
+  //.editor-content span,
+  //.editor-content p {
+  //  text-indent: 2em !important;
+  //  text-align: left !important;
+  //}
+}
+
+.one-page {
+  width: 1832px;
+  height: 341px;
+  background: #FFFFFF;
+  border-radius: 0px 0px 35px 35px;
+  border: 1px solid #FFFFFF;
+  overflow: auto;
+  padding-left: 33px;
+  padding-right: 33px;
+  line-height: 32px;
+
+  .title {
+    height: 40px;
+    border-left: 8px #8CE349 solid;
+    margin-left: 33px;
+    font-weight: 400;
+    font-size: 28px;
+    color: #333333;
+    line-height: 40px;
+    padding-left: 11px;
+  }
+
+  .info {
+    text-indent: 2em;
+    font-weight: 400;
+    font-size: 28px;
+    color: #333333;
+    line-height: 40px;
+  }
+
+  .select-div {
+    width: 100%;
+    height: 100px;
+    font-weight: 400;
+    font-size: 30px;
+    color: #333333;
+    line-height: 40px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 21px;
+
+    .select-box {
+      width: 300px;
+      height: 90px;
+      border: 1px solid #CCCCCC;
+      line-height: 90px;
+      text-align: center;
+      margin-left: 10px;
+    }
+
+    .click-search {
+      width: 170px;
+      height: 90px;
+      background: linear-gradient(180deg, #73EE71 0%, #0ACB63 100%);
+      border-radius: 5px;
+      font-weight: 400;
+      font-size: 24px;
+      color: #FFFFFF;
+      margin-left: 20px;
+    }
+  }
+
+  ::v-deep .el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th {
+    height: 74px !important;
+    font-size: 24px;
+    color: #1E410E;
+  }
+
+  ::v-deep .el-table tr {
+    height: 74px !important;
+    font-size: 20px;
+  }
+
+  ::v-deep .el-dialog__title {
+    font-size: 34px !important;
+  }
+
+  ::v-deep .el-dialog {
+    margin-top: 0px !important;
+  }
+
+  ::v-deep .el-dialog__headerbtn .el-dialog__close {
+    font-size: 30px !important;
+  }
 
-<style scoped>
+}
+.dict-dialog{
+  max-width: 570px;
+  height: 800px;
+  overflow: auto;
+  .dict-box {
+    //border: 1px solid red;
+    //background: #1ab394;
+    font-size: 24px;
+    line-height: 34px;
+    color: #333333;
+  }
+}
 
 </style>

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

@@ -1,91 +1,657 @@
 <template>
-    专业库本科查询
-    <el-card style="width:200px">
-        <div @click="changeTab('bk')">
+  <div class="prodb_search_undergraduate">
+    <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="[threePage?'item-box-active':'item-box']" @click="showPage(3)">
+            <img v-if="threePage" src="@/assets/images/environment/keys-search-h.png">
+            <img v-else src="@/assets/images/environment/keys-search.png">
+            关键字查询
+          </div>
         </div>
-        <div @click="changeTab('zk')">
-            专科-专业大类
+      </div>
+      <div class="content-right">
+        <div class="one-page" v-show="onePage">
+          <div class="result-box">
+            <div class="two-page-result">
+              <div v-for="(item,index) in specialtyEntity.bk_list"
+                   :class="[item.selected?'item-result-box-active':'item-result-box']"
+                   @click="toSpecialty1(item)">
+                <div v-html="item.name"></div>
+              </div>
+            </div>
+          </div>
         </div>
-        <div @click="changeTab('gjz')">
-            关键字查询
-            <el-input v-model="form.name"></el-input>
-            <el-button @click="byKeyword">关键字查询</el-button>
+        <div class="two-page" v-show="twoPage">
+          <div class="result-box">
+            <div class="two-page-result">
+
+              <div v-for="(item,index) in specialtyEntity.zk_list"
+                   :class="[item.selected?'item-result-box-active':'item-result-box']"
+                   @click="toSpecialty1(item)">
+                <div v-html="item.name"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="three-page" v-show="threePage">
+          <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 data_list"
+                   :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 v-show="tab == 'bk'">
-        <div v-for="(item,index) in specialtyEntity.bk_list" @click="toSpecialty1(item)">
-            {{item.name}}
+      </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>
-    <div v-show="tab == 'zk'">
-        <div v-for="(item,index) in specialtyEntity.zk_list" @click="toSpecialty1(item)">
-            {{item.name}}
+    <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 v-show="tab == 'gjz'">
-        <div v-for="(item,index) in data_list" @click="toDetail(item)">
-            {{item.name}}
+    <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 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 onePage = ref(true)
+const twoPage = ref(false)
+const threePage = ref(false)
+
+const keyInput = ref(false);
+const headinfo = ref({})
+
+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}
+  })
+}
+
+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;
+}
+
+
+
+
+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')
 
-    const router = useRouter()
-    import {specialtyQuery, getSpecialtyByKeyword} from '@/api/xjc-integratedmachine/environment/specialty.js'
 
-    const tab = ref("bk")
+function showAreaChooseHandler() {
+  showAreaChoose.value = true
+}
 
-    function changeTab(path) {
-        tab.value = path
+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
+  })
+}
+
+import {specialtyQuery, getSpecialtyByKeyword} from '@/api/xjc-integratedmachine/environment/specialty.js'
+
+const tab = ref("bk")
+
+function changeTab(path) {
+  tab.value = path
+}
+
+const specialtyEntity = ref({})
+
+function specialty() {
+  specialtyQuery().then(resp => {
+    specialtyEntity.value = resp
+  })
+}
+
+function toSpecialty1(item) {
+  router.push({
+    path: '/xjc-integratedmachine/environment/prodb_specialtylist1',
+    query: {
+      oldid: item.oldid
+    }
+  })
+}
+
+function toDetail(item) {
+  router.push({
+    path: '/xjc-integratedmachine/environment/pro_details_video',
+    query: {
+      id: item.id
     }
+  })
+}
+
+
+const form = ref({
+  name: null
+})
 
-    const specialtyEntity = ref({})
+const data_list = ref([])
+
+function byKeyword() {
+  getSpecialtyByKeyword(form.value).then(resp => {
+    data_list.value = resp.list
+  })
+}
+
+specialty()
+
+</script>
 
-    function specialty() {
-        specialtyQuery().then(resp => {
-            specialtyEntity.value = resp
-        })
+
+<style scoped lang="scss">
+.prodb_search_undergraduate {
+  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;
+        }
+      }
     }
 
-    function toSpecialty1(item) {
-        router.push({
-            path: '/xjc-integratedmachine/environment/prodb_specialtylist1',
-            query: {
-                oldid: item.oldid
+    .content-right {
+      width: 1615px;
+      height: 926px;
+      background: #FFFFFF;
+      border-radius: 35px 35px 35px 35px;
+      margin-top: 13px;
+      margin-right: 24px;
+      .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;
+          }
+        }
+      }
+      .one-page {
+      }
+
+      .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;
             }
-        })
-    }
 
-    function toDetail(item) {
-        router.push({
-            path: '/xjc-integratedmachine/environment/pro_details_video',
-            query: {
-                id: item.id
+            .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;
+            }
+          }
+        }
+
+      }
+      .three-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;
+          }
+        }
 
-    const form = ref({
-        name: null
-    })
+        .result-box {
+          width: 1484px;
+          height: 750px;
+          overflow: auto;
 
-    const data_list = ref([])
+          .two-page-result {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: space-between;
+            align-items: center;
 
-    function byKeyword() {
-        getSpecialtyByKeyword(form.value).then(resp => {
-            data_list.value = resp.list
-        })
+            .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;
+            }
+          }
+        }
+
+      }
     }
+  }
 
-    specialty()
+}
 
-</script>
+.dialog-box {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
 
-<style scoped>
+  div {
+    //border: 1px solid;
 
+  }
+
+  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/prodb_specialtylist1.vue

@@ -1,47 +1,170 @@
 <template>
-
-    <div v-for="(item,index) in data_rows" @click="toSpecialty2(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_rows"
+                 :class="[item.selected?'item-result-box-active':'item-result-box']"
+                 @click="toSpecialty2(item)">
+              <div v-html="item.name"></div>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
-    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
-                v-model:limit="queryParams.pageSize" @pagination="list1"/>
+    <drag_component></drag_component>
+  </div>
+
+<!--  <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"-->
+<!--              v-model:limit="queryParams.pageSize" @pagination="list1"/>-->
 </template>
 
 <script setup>
+import headComponent from '@/views/xjc-integratedmachine/components/head_component.vue'
+import Drag_component from "@/views/xjc-integratedmachine/components/drag_component.vue";
+import {specialtyList1} from '@/api/xjc-integratedmachine/environment/specialty.js'
 
-    import {specialtyList1} from '@/api/xjc-integratedmachine/environment/specialty.js'
-
-    const router = useRouter()
-    const route = useRoute()
-    const total = ref(0)
-    const param = route.query
-    const data_rows = ref([])
-
-    const queryParams = ref({
-        pageNum: 1,
-        pageSize: 10,
-        oldid: param.oldid
-    })
-
-    function list1() {
-        specialtyList1(queryParams.value).then(resp => {
-            data_rows.value = resp.data.rows
-            total.value = resp.data.total
-        })
-    }
+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,
+  oldid: param.oldid
+})
 
-    function toSpecialty2(item) {
-        router.push({
-            path : '/xjc-integratedmachine/environment/prodb_specialtylist2',
-            query:{
-                oldid : item.oldid
-            }
-        })
+function list1() {
+  specialtyList1(queryParams.value).then(resp => {
+    data_rows.value = resp.data.rows
+    total.value = resp.data.total
+  })
+}
+
+function toSpecialty2(item) {
+  router.push({
+    path: '/xjc-integratedmachine/environment/prodb_specialtylist2',
+    query: {
+      oldid: item.oldid
     }
-    list1()
+  })
+}
+
+list1()
 
 </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/prodb_specialtylist2.vue

@@ -1,46 +1,167 @@
 <template>
-    <div v-for="(item,index) in data_rows" @click="toDetail(item)">
-        {{item.name}}
+  <div class="prodb_specialtylist2">
+    <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_rows" @click="toDetail(item)"
+                 :class="[item.selected?'item-result-box-active':'item-result-box']"
+            >
+              <div v-html="item.name"></div>
+            </div>
+          </div>
+        </div>
+        <!--    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"-->
+        <!--                v-model:limit="queryParams.pageSize" @pagination="list2"/>-->
+      </div>
     </div>
-    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
-                v-model:limit="queryParams.pageSize" @pagination="list2"/>
+  </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 {specialtyList2} from '@/api/xjc-integratedmachine/environment/specialty.js'
 
-    import {specialtyList2} from '@/api/xjc-integratedmachine/environment/specialty.js'
-
-    const router = useRouter()
-    const route = useRoute()
-    const total = ref(0)
-    const param = route.query
-    const data_rows = ref([])
-
-    const queryParams = ref({
-        pageNum: 1,
-        pageSize: 10,
-        oldid: param.oldid
-    })
-
-    function list2() {
-        specialtyList2(queryParams.value).then(resp => {
-            data_rows.value = resp.data.rows
-            total.value = resp.data.total
-        })
-    }
+const router = useRouter()
+const route = useRoute()
+const total = ref(0)
+const param = route.query
+const data_rows = ref([])
+
+const queryParams = ref({
+  pageNum: 1,
+  pageSize: 10,
+  oldid: param.oldid
+})
+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()
+})
+function list2() {
+  specialtyList2(queryParams.value).then(resp => {
+    data_rows.value = resp.data.rows
+    total.value = resp.data.total
+  })
+}
 
-    function toDetail(item){
-        router.push({
-            path:'/xjc-integratedmachine/environment/pro_details_video',
-            query : {
-                id : item.id
-            }
-        })
+function toDetail(item){
+  router.push({
+    path:'/xjc-integratedmachine/environment/pro_details_video',
+    query : {
+      id : item.id
     }
+  })
+}
 
-    list2()
+list2()
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+div,p{
+  margin: 0;
+  padding: 0;
+}
+.prodb_specialtylist2 {
+  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/query_universitydb_conditions.vue

@@ -52,7 +52,6 @@
           </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)">

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

@@ -5,7 +5,6 @@
       <div class="page-img-box">
         <div class="top-content">
           <img :src="`${baseUrl}`+ entity.logo"/>
-          <!--          <div style="width: 154px;height: 154px;border: 1px solid;margin-left: 48px"></div>-->
           <div class="top-content-right">
             <div class="right-top">
               <p class="title">{{ entity.name }}</p>
@@ -29,7 +28,7 @@
               办学性质:
               <dict-tag :options="property" :value="entity.property"/>
               院校类型:
-              <dict-tag :options="school_category" :value="entity.school_category"/>
+              <dict-tag :options="school_category" :value="entity.categoryid"/>
             </div>
             <div class="text-box">
               <p style="width: 200px">院校隶属:{{ entity.subjection }}:</p>
@@ -289,10 +288,7 @@ const param = route.query
 const showIndex = ref(1)
 const baseUrl = ref()
 
-const collection_data = ref({
-  contentType: 1,
-  contentId: param.id
-})
+
 const grade = ref([])
 
 const {proxy} = getCurrentInstance()
@@ -331,7 +327,17 @@ function setHeadinfo(){
       nickName: '张三'
     },
     backUrl : '/xjc-integratedmachine/environment/query_universitydb_conditions',
-    homeUrl:'/xjc-integratedmachine/environment/index'
+    homeUrl:'/xjc-integratedmachine/environment/index',
+    contrast:true,
+  }
+}
+
+const collection_data = ref({})
+function setCollection_data(){
+  collection_data.value = {
+    contentType: 1,
+    contentId: param.id,
+    contentVal: entity.value,
   }
 }
 
@@ -344,6 +350,7 @@ function detail() {
     entity.value = resp.entity
     //看看收藏
     queryConnection()
+    setCollection_data()
   })
 }
 
@@ -550,7 +557,9 @@ onMounted(() => {
   proxy.getConfigKey('sys_resource_root2').then(res => {
     baseUrl.value = res.msg;
   })
+
   setHeadinfo()
+
 })
 </script>
 
@@ -590,7 +599,6 @@ p, div {
     .top-content {
       width: 1832px;
       height: 282px;
-      border: 1px solid;
       display: flex;
       justify-content: space-between;
       align-items: center;
@@ -599,7 +607,6 @@ p, div {
         margin-left: 45px;
         width: 1630px;
         height: 281px;
-        border: 1px solid;
         margin-left: 45px;
 
         .title {
@@ -650,7 +657,6 @@ p, div {
           .right-top-icon {
             width: 200px;
             height: 68px;
-            border: 1px solid;
             display: flex;
             justify-content: space-between;
             margin-top: 24px;
@@ -728,25 +734,25 @@ p, div {
     }
   }
 
-  .editor-content div,
-  .editor-content span,
-  .editor-content p,
-  .editor-content h1,
-  .editor-content h2,
-  .editor-content h3,
-  .editor-content h4,
-  .editor-content h5,
-  .editor-content h6 {
-    font-size: 26px !important;
-    line-height: 37px !important;
-  }
-
-  .editor-content div,
-  .editor-content span,
-  .editor-content p {
-    text-indent: 2em !important;
-    text-align: left !important;
-  }
+  //.editor-content div,
+  //.editor-content span,
+  //.editor-content p,
+  //.editor-content h1,
+  //.editor-content h2,
+  //.editor-content h3,
+  //.editor-content h4,
+  //.editor-content h5,
+  //.editor-content h6 {
+  //  font-size: 26px !important;
+  //  line-height: 37px !important;
+  //}
+  //
+  //.editor-content div,
+  //.editor-content span,
+  //.editor-content p {
+  //  text-indent: 2em !important;
+  //  text-align: left !important;
+  //}
 }
 
 .one-page {

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

@@ -1,81 +1,206 @@
 <template>
-    高校列表页
-    <el-table :data="tableData">
-        <el-table-column label="地区" align="center" key="areaname" prop="areaname"/>
-        <el-table-column label="名称" align="center" key="name" prop="name"/>
-        <el-table-column label="隶属" align="center" key="subjection" prop="subjection"/>
-        <el-table-column label="创建时间" align="center" key="ctime" prop="ctime"/>
-        <el-table-column label="详情">
-            <template #default="scope">
-                <el-tooltip content="详情>>" placement="top">
-                    <el-button link type="primary" icon="Edit" @click="handleDetail(scope.row)"></el-button>
-                </el-tooltip>
-            </template>
-        </el-table-column>
-    </el-table>
-
-    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
-                v-model:limit="queryParams.pageSize" @pagination="getList"/>
-</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">
+          <div class="school-box" v-for="(item,index) in tableData" :key="index">
+            <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>
+              <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>
-    import {universityList} from '@/api/xjc-integratedmachine/environment/university.js'
-    const router = useRouter()
-    const route = useRoute()
-
-    const params = route.query
-
-    const total = ref(0)
-    const tableData = ref(null)
-
-
-    // const queryParams = ref({
-    //     pageNum: 1,
-    //     pageSize: 10,
-    //     areaid: params.areaid,
-    //     educationlevel: params.educationlevel,
-    //     characteristic: params.characteristic,
-    // })
-
-    const data = reactive({
-        queryParams: {
-            pageNum: 1,
-            pageSize: 10,
-            areaid: params.areaid,
-            educationlevel: params.educationlevel,
-            characteristic: params.characteristic,
-        },
-    })
-    const {proxy} = getCurrentInstance()
-    const {queryParams} = toRefs(data)
-
-
-
-
-    function getList() {
-        universityList(proxy.addDateRange(queryParams.value)).then(resp => {
-            tableData.value = resp.data.rows
-            total.value = resp.data.total
-        })
+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 total = ref(0)
+const tableData = ref(null)
+const {proxy} = getCurrentInstance()
+const {
+  school_category
+} = proxy.useDict('school_category')
+
+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,
     }
+  })
+}
+
+onMounted(() => {
+  setHeadinfo()
+})
+getList()
+
+function setHeadinfo() {
+  headinfo.value = {
+    title: '高校列表',
+    user: {
+      avatar: '头像路径',
+      nickName: '张三'
+    },
+    backUrl: '/xjc-integratedmachine/environment/query_universitydb_conditions',
+    homeUrl: '/xjc-integratedmachine/environment/index',
+    contrast:true,
+  }
+}
+
+</script>
 
-    function handleDetail(row) {
-        router.push({
-            path : '/xjc-integratedmachine/environment/university_details_video',
-            query : {
-                id : row.id,
-                name : row.name,
-                oldid : row.oldid,
+<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: 55px;
+        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;
+          }
+
+          .right-box {
+            width: 400px;
+            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;
+              }
             }
-        })
 
+            .info {
+              margin-top: 14px;
+              font-weight: 400;
+              font-size: 20px;
+              color: #333333;
+              line-height: 25px;
+              display: flex;
+              span {
+                margin-left: 4px;
+              }
+            }
+          }
+        }
+      }
     }
-
-    getList()
+  }
+}
 
 
-</script>
-
-<style scoped>
-
 </style>
+

vite.config.js

@@ -46,8 +46,8 @@ export default defineConfig(({ mode, command }) => {
       proxy: {
         // https://cn.vitejs.dev/config/#server-proxy
         '/dev-api': {
-          target: 'http://localhost:8080',
-          // target: 'http://192.168.3.100:8080',//临时11
+          // target: 'http://localhost:8080',
+          target: 'http://192.168.3.100:8080',//临时11
           changeOrigin: true,
           rewrite: (p) => p.replace(/^\/dev-api/, '')
         }