Merge remote-tracking branch 'origin/master'

index.html

@@ -210,6 +210,13 @@
     </div>
   </div>
   <script type="module" src="/src/main.js"></script>
+<!--  <script src="src/utils/ai/iat/dist/index.cjs.js"></script>
+  <script src="src/utils/ai/iat/dist/index.d.ts"></script>
+  <script src="src/utils/ai/iat/dist/index.esm.js"></script>-->
+
+<!--  <script src="src/utils/ai/iat/dist/processor.worker.js"></script>-->
+<!--  <script src="src/utils/ai/iat/dist/processor.worklet.js"></script>-->
+
 </body>
 
 </html>

package.json

@@ -21,6 +21,7 @@
     "@vueuse/core": "13.3.0",
     "axios": "1.9.0",
     "clipboard": "2.0.11",
+    "crypto-js": "^4.2.0",
     "echarts": "^5.6.0",
     "element-plus": "2.9.9",
     "fabric": "^6.7.0",

src/api/xjc-integratedmachine/wakeup/index.js

@@ -18,21 +18,21 @@ export function exampleList(query) {
 //成熟度测评题目
 export function maturityAppraisalList(query) {
     return request({
-        url: '/platform/appraisal/common',
+        url: '/platform/ytj/appraisal/common',
         method: 'post',
         data: query
     })
 }
 export function insertAppraisalAnswer(query) {
     return request({
-        url: '/platform/appraisal/insertAppraisalAnswer',
+        url: '/platform/ytj/appraisal/insertAppraisalAnswer',
         method: 'post',
         data: query
     })
 }
 export function maturityReport(query) {
     return request({
-        url: '/platform/appraisal/report/3001',
+        url: '/platform/ytj/appraisal/report/3001',
         method: 'post',
         data: query
     })

src/components/HeaderSearch/index.vue

@@ -58,7 +58,7 @@ const activeIndex = ref(-1)
 const show = ref(false)
 const fuse = ref(undefined)
 const headerSearchSelectRef = ref(null)
-const router = useRouter()
+
 const theme = computed(() => useSettingsStore().theme)
 const routes = computed(() => usePermissionStore().defaultRoutes)
 

src/main.js

@@ -16,6 +16,7 @@ import directive from './directive' // directive
 // 注册指令
 import plugins from './plugins' // plugins
 import { download } from '@/utils/request'
+// import * as RecorderManager from '@/utils/ai/iat/dist/index.d.ts'
 
 // svg图标
 import 'virtual:svg-icons-register'

src/views/system/user/authRole.vue

@@ -15,7 +15,6 @@
             </el-col>
          </el-row>
       </el-form>
-
       <h4 class="form-header h4">角色信息</h4>
       <el-table v-loading="loading" :row-key="getRowKey" @row-click="clickRow" ref="roleRef" @selection-change="handleSelectionChange" :data="roles.slice((pageNum - 1) * pageSize, pageNum * pageSize)">
          <el-table-column label="序号" width="55" type="index" align="center">

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

@@ -15,7 +15,7 @@
         <div class="main-content">
             <div class="chat-container">
                 <div class="message-list">
-                    <div v-for="item in chatRecordList" :key="item.id">
+                    <div v-for="(item, index) in chatRecordList" :key="item.id">
                         <!-- 会话图标 -->
                         <!--<div :class="item.isUser == 1? 'user-image' : 'system-image' "></div>-->
                         <div v-if="item.isUser == 1" class="user-message">
@@ -24,7 +24,10 @@
                         </div>
                         <div v-else class="message bot-message">
                             <img src="@/assets/images/common/ai/system.png" alt="icon"/>
-                            <div class="bot-message-content" v-html="item.content"></div>
+                            <div v-show="!expandIndexList.includes(index)" class="bot-message-content" v-html="item.content.substring(0, 80)"></div>
+                            <div v-show="expandIndexList.includes(index)" class="bot-message-content" v-html="item.content"></div>
+                            <el-button v-if="item.content.length>80" @click="foldOrExpandMessage(index, expandIndexList.includes(index))">{{expandIndexList.includes(index)?'折叠':'展开'}}</el-button>
+                            <el-button>播放</el-button>
                         </div>
                     </div>
                 </div>
@@ -56,7 +59,7 @@
                     <el-button style="width:140px">退出</el-button>
                 </div>
                 <div class="control-button">
-                    <el-button style="width:140px">静音</el-button>
+                    <el-button style="width:140px" @click="startVoice">静音</el-button>
                 </div>
                 <div class="control-button">
                     <el-button style="width:140px">新会话</el-button>
@@ -70,9 +73,14 @@
 </template>
 
 <script setup>
+    import {nextTick, onMounted} from 'vue'
     import {aiChatRecordList} from '@/api/xjc-integratedmachine/common/aiChat.js'
     import { getToken } from '@/utils/auth'
+    // md转换为html
     import { marked } from 'marked'
+    // 语音识别
+    import CryptoJS from 'crypto-js';
+    import * as RecorderManager from "/public/ai/iat/dist/index.umd.js"
 
     // 聊天记录
     let chatRecordList = ref([])
@@ -90,6 +98,11 @@
     let inputMessage = ref('')
     // 发送标识
     let isSending = ref(false)
+    // 选中的消息，用于展开折叠
+    let expandIndexList = ref([])
+    // 展开状态
+    let activeIndex = ref(0);
+
     // 查看所有聊天记录
     list();
     function list() {
@@ -103,10 +116,10 @@
     }
 
     const sendMessage = () => {
-/*        if (inputMessage.value.trim()) {
+        if (inputMessage.value.trim()) {
             sendRequest(inputMessage.value.trim())
             inputMessage.value = ''
-        }*/
+        }
     }
 
     const sendRequest = async(message) => {
@@ -163,7 +176,6 @@
         } finally {
             streamHtmlData.value = marked(streamMarkdownData.value)
             isLoading.value = false;
-            console.log("==============");
         }
     }
 
@@ -181,8 +193,280 @@
         isLoading.value = false;
     }
 
+    function foldOrExpandMessage(index, flag){
+        activeIndex.value = index;
+        if(flag){
+            expandIndexList.value = expandIndexList.value.filter((item)=>{
+                return item !== index;
+            })
+        }else{
+            expandIndexList.value.push(index)
+        }
+    }
+
+    /* 语音识别 ↓*/
+    // 控制录音弹窗
+    let voiceOpen = false
+    // 是否开始录音
+    let startVoiceStatus = false
+    // 识别中状态
+    let identifyStatus = false
+    let recorder = null
+    let transcription = ''
+    let btnStatus = ''
+    let resultText = ''
+    let resultTextTemp = ''
+    let countdownInterval = null
+    let iatWS = null
+    let recognition = null
+    let buttonDisabled = true
+    let loading = false
+    let xfIatKeys = {
+        APPID: '5a2643f4',
+        APISecret: 'MTg4MWIzY2VmYTg2YTEwMjliMDY1N2Iz',
+        APIKey: '8b1a53486bec887eb817b4410aa743ed',
+    }
+    // 初始化语音识别
+    function initRecognize(){
+        recorder = new window.RecorderManager('/ai/iat/dist');
+        recorder.onStart = () => {
+            changeBtnStatus('OPEN');
+        };
+        recorder.onFrameRecorded = ({ isLastFrame, frameBuffer }) => {
+            if (iatWS.readyState === iatWS.OPEN) {
+                iatWS.send(
+                    JSON.stringify({
+                        data: {
+                            status: isLastFrame ? 2 : 1,
+                            format: 'audio/L16;rate=16000',
+                            encoding: 'raw',
+                            audio: toBase64(frameBuffer),
+                        },
+                    }),
+                );
+                if (isLastFrame) {
+                    changeBtnStatus('CLOSING');
+                }
+            }
+        };
+        recorder.onStop = () => {
+            console.log('录音结束，停止定时器');
+            clearInterval(countdownInterval);
+            startVoiceStatus = false;
+        };
+
+    }
+
+    async function startVoice() {
+        if (loading) {
+            return;
+        }
+        voiceOpen = true;
+        await playIatVoice();
+    }
+
+    async function playIatVoice() {
+        if (loading) {
+            return;
+        }
+        startVoiceStatus = !startVoiceStatus;
+        // 浏览器自带的识别
+        if (recognition) {
+            if (startVoiceStatus) {
+                recognition.start();
+            } else {
+                recognition.stop();
+            }
+            return;
+        }
+        if (startVoiceStatus) {
+            connectWebSocket();
+        } else {
+            recorder.stop();
+        }
+    }
+
+    /**
+     * 关闭录音弹窗
+     */
+    function closeVoiceOpen() {
+        voiceOpen = false;
+        startVoiceStatus = false;
+        if (recorder) {
+            recorder.stop();
+        }
+        if (recognition) {
+            recognition.stop();
+        }
+        transcription = '';
+    }
+
+    function renderResult(resultData) {
+        // 识别结束
+        const jsonData = JSON.parse(resultData);
+        if (jsonData.data && jsonData.data.result) {
+            const data = jsonData.data.result;
+            let str = '';
+            const { ws } = data;
+            for (let i = 0; i < ws.length; i += 1) {
+                str += ws[i].cw[0].w;
+            }
+            // 开启wpgs会有此字段(前提：在控制台开通动态修正功能)
+            // 取值为 "apd"时表示该片结果是追加到前面的最终结果；取值为"rpl" 时表示替换前面的部分结果，替换范围为rg字段
+            if (data.pgs) {
+                if (data.pgs === 'apd') {
+                    // 将resultTextTemp同步给resultText
+                    resultText = resultTextTemp;
+                }
+                // 将结果存储在resultTextTemp中
+                resultTextTemp = resultText + str;
+            } else {
+                resultText += str;
+            }
+            transcription = resultTextTemp || resultText || '';
+            console.log("识别："+transcription);
+        }
+        if (jsonData.code === 0 && jsonData.data.status === 2) {
+            iatWS.close();
+        }
+        if (jsonData.code !== 0) {
+            iatWS.close();
+            console.error(jsonData);
+        }
+    }
+
+    function connectWebSocket() {
+        const websocketUrl = getWebSocketUrl();
+        if ('WebSocket' in window) {
+            iatWS = new window.WebSocket(websocketUrl);
+        } else if ('MozWebSocket' in window) {
+            iatWS = new window.MozWebSocket(websocketUrl);
+        } else {
+            message.error('浏览器不支持WebSocket');
+            return;
+        }
+        changeBtnStatus('CONNECTING');
+        iatWS.onopen = e => {
+            console.log('iatWS.onopen', e);
+            // 开始录音
+            recorder.start({
+                sampleRate: 16000,
+                frameSize: 1280,
+            });
+            const params = {
+                common: {
+                    app_id: xfIatKeys.APPID,
+                },
+                business: {
+                    language: 'zh_cn',
+                    domain: 'iat',
+                    accent: 'mandarin',
+                    vad_eos: 5000,
+                    dwa: 'wpgs',
+                    nbest: 1,
+                    wbest: 1,
+                },
+                data: {
+                    status: 0,
+                    format: 'audio/L16;rate=16000',
+                    encoding: 'raw',
+                },
+            };
+            iatWS.send(JSON.stringify(params));
+        };
+        iatWS.onmessage = e => {
+            renderResult(e.data);
+        };
+        iatWS.onerror = e => {
+            console.error(e);
+            recorder.stop();
+            changeBtnStatus('CLOSED');
+        };
+        iatWS.onclose = e => {
+            console.log(e);
+            recorder.stop();
+            changeBtnStatus('CLOSED');
+        };
+    }
+
+    function getWebSocketUrl() {
+        const { APIKey, APISecret } = xfIatKeys;
+        if (!APIKey) {
+            message.error('语音识别配置未生效');
+            return null;
+        }
+        // 请求地址根据语种不同变化
+        let url = 'wss://iat-api.xfyun.cn/v2/iat';
+        const host = 'iat-api.xfyun.cn';
+        const apiKey = APIKey;
+        const apiSecret = APISecret;
+        const date = new Date().toGMTString();
+        const algorithm = 'hmac-sha256';
+        const headers = 'host date request-line';
+        const signatureOrigin = `host: ${host}\ndate: ${date}\nGET /v2/iat HTTP/1.1`;
+        const signatureSha = CryptoJS.HmacSHA256(signatureOrigin, apiSecret);
+        const signature = CryptoJS.enc.Base64.stringify(signatureSha);
+        const authorizationOrigin = `api_key="${apiKey}", algorithm="${algorithm}", headers="${headers}", signature="${signature}"`;
+        const authorization = btoa(authorizationOrigin);
+        url = `${url}?authorization=${authorization}&date=${date}&host=${host}`;
+        return url;
+    }
+
+    function countdown() {
+        let seconds = 10;
+        console.log(`录音中（${seconds}s）`);
+        countdownInterval = setInterval(() => {
+            seconds -= 1;
+            if (seconds <= 0) {
+                clearInterval(countdownInterval);
+                recorder.stop();
+            } else {
+                console.log(`录音中（${seconds}s）`);
+            }
+        }, 1000);
+    }
+
+    function changeBtnStatus(status) {
+        btnStatus = status;
+        if (status === 'CONNECTING') {
+            console.log('建立连接中');
+            resultText = '';
+            resultTextTemp = '';
+        } else if (status === 'OPEN') {
+            if (recorder) {
+                countdown();
+            }
+        } else if (status === 'CLOSING') {
+            console.log('关闭连接中');
+        } else if (status === 'CLOSED') {
+            console.log('开始录音');
+        }
+    }
+
+    function toBase64(buffer) {
+        let binary = '';
+        const bytes = new Uint8Array(buffer);
+        const len = bytes.byteLength;
+        for (let i = 0; i < len; i += 1) {
+            binary += String.fromCharCode(bytes[i]);
+        }
+        return window.btoa(binary);
+    }
+
+    // 发送消息
+    function sendMsg(text) {
+        // $emit('sendMsg', text);
+        // transcription = '';
+    }
+    /* 语音识别 ↑*/
+
+
     onMounted(()=>{
-        sendMessage()
+        nextTick(()=>{
+            initRecognize();
+            sendMessage()
+        })
+
     })
 
 </script>

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

@@ -1,51 +1,85 @@
 <template>
-    <el-button @click="collection" v-if="collectionList.length == 0">收藏</el-button>
-    <el-button @click="cancle_collection" v-if="collectionList.length >= 1">取消收藏</el-button>
+
+
+    <div class="item-img" v-if="collectionList.length == 0">
+      <img @click="collection" v-if="collectionList.length == 0" src="@/assets/images/environment/collage.png">
+      <p @click="collection" v-if="collectionList.length == 0">收藏</p>
+    </div>
+  <div class="item-img" v-if="collectionList.length >= 1">
+    <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">-->
+      <p>对比</p>
+    </div>
 </template>
 
 <script setup>
-    import {addCollection, getCollection, removeCollection} from '@/api/xjc-integratedmachine/environment/university.js'
-
-    const props = defineProps({
-        collection: {
-            contentType: null,
-            contentId: null
-        }
-    })
-
-    const collectionList = ref([])
-
-    function collection() {
-        let data = {
-            contentType: props.collection.contentType,
-            contentId: props.collection.contentId
-        }
-        addCollection(data).then(resp => {
-            queryConnection()
-        })
-    }
-
-    function queryConnection() {
-        let data = {
-            contentType: props.collection.contentType,
-            contentId: props.collection.contentId
-        }
-        getCollection(data).then(resp => {
-            collectionList.value = resp.collection
-        })
-    }
-
-    function cancle_collection() {
-        let data = {
-            id: collectionList.value[0].id,
-        }
-        removeCollection(data).then(resp => {
-            queryConnection()
-        })
-    }
+import {addCollection, getCollection, removeCollection} from '@/api/xjc-integratedmachine/environment/university.js'
+
+const props = defineProps({
+  collection: {
+    contentType: null,
+    contentId: null
+  }
+})
+
+const collectionList = ref([])
+
+function collection() {
+  let data = {
+    contentType: props.collection.contentType,
+    contentId: props.collection.contentId
+  }
+  addCollection(data).then(resp => {
+    queryConnection()
+  })
+}
+
+function queryConnection() {
+  let data = {
+    contentType: props.collection.contentType,
+    contentId: props.collection.contentId
+  }
+  getCollection(data).then(resp => {
+    collectionList.value = resp.collection
+  })
+}
+
+function cancle_collection() {
+  let data = {
+    id: collectionList.value[0].id,
+  }
+  removeCollection(data).then(resp => {
+    queryConnection()
+  })
+}
 
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+p,div{
+  margin: 0;
+  padding: 0;
+}
+.item-img {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 400px;
+  border: 1px solid;
+  p {
+    font-weight: 400;
+    font-size: 20px;
+    color: #515F6A;
+  }
 
+  img {
+    width: 36px;
+    height: 36px;
+    border: 1px solid;
+  }
+}
 </style>

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

@@ -0,0 +1,63 @@
+<template>
+  <div>
+    <el-dialog v-model="centerDialogVisible" :show-close="false" width="500" center>
+      <div class="dialog-box">
+        {{ dialogInfo.content }}
+      </div>
+      <div class="footer-box">
+        <el-button type="primary" @click=""handClick>
+          {{dialogInfo.confirm}}
+        </el-button>
+        <el-button type="primary" @click="centerDialogVisible = false">
+          关闭
+        </el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import { defineEmit } from 'vue';
+const centerDialogVisible = ref(false)
+const props = defineProps({
+  dialogInfo: {}
+})
+function handClick(){
+  emit('notify');
+}
+const emit = defineEmit(['notify']);
+</script>
+
+
+
+<style scoped lang="scss">
+.dialog-box{
+  width: 463px;
+  height: 188px;
+  font-weight: bold;
+  font-size: 32px;
+  color: #000000;
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.footer-box{
+  width: 100%;
+  display: flex;
+  justify-content: space-around;
+  ::v-deep .el-button:nth-child(1){
+    width: 136px;
+    height: 60px;
+    background: #2BC17B;
+  }
+  ::v-deep .el-button:nth-child(2){
+    width: 136px;
+    height: 60px;
+    background: #FB5451;
+  }
+  ::v-deep .el-button>span{
+    font-size: 24px;
+  }
+}
+</style>

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

@@ -11,7 +11,8 @@
         <div class="right-user">
           <img  src="@/assets/images/wakeup/user.png" @click="backTo" alt="404">
         </div>
-        <el-button class="head-right-btn1" >使用说明</el-button>
+        <el-button class="head-right-btn1" v-if="headinfo.isHome">使用说明</el-button>
+        <el-button class="head-right-btn1" v-else @click="homeUrlTo">首页</el-button>
         <el-button class="head-right-btn2" @click="exit">退出登录</el-button>
       </div>
 <!--      </div>-->
@@ -26,14 +27,23 @@
     const props = defineProps({
       headinfo: {}
     })
-
     function backTo() {
-        // router.push({
-        //     path: props.headinfo.backUrl
-        // })
-      router.go(-1);
+      if(props.headinfo.backUrlUse){
+        router.push({
+            path: props.headinfo.backUrl
+        })
+      }else {
+        router.go(-1);
+      }
     }
+    function homeUrlTo() {
+        router.push({
+          path: props.headinfo.homeUrl
+        })
 
+
+
+    }
     function exit() {
         proxy.$modal.confirm('您确认退出吗').then(function () {
             router.push({
@@ -98,6 +108,7 @@
           font-weight: 400;
           font-size: 24px;
           color: #FFFFFF;
+          margin-right: 48px;
         }
         .right-user{
 

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

@@ -1,29 +1,164 @@
 <template>
-    数字化生涯学习系列资源<br>
-    环境探索学习系统<br>
-    生涯学习不仅要对自我进行认知，还要对家庭和社会环境进行探索，对学职世界的外部环境进行探索，即对高校、专业、职业的探究。<br>
-    <button @click="jumpTo('/xjc-integratedmachine/environment/query_universitydb_conditions')">高校库</button>
-    <button @click="jumpTo('/xjc-integratedmachine/environment/prodb_search_undergraduate')">专业库</button>
-    <button @click="jumpTo('/xjc-integratedmachine/environment/occdb_search_industry')">职业库</button>
-    <button @click="jumpTo('/xjc-integratedmachine/environment/studyocc_information')">学职资讯</button>
-    <button>AI生涯访谈</button>
-
-
+  <div class="wake-up-page">
+    <head-component :headinfo=headinfo></head-component>
+    <div class="page-content">
+      <div class="page-img-box">
+        <div class="img-box">
+          <img src="@/assets/images/environment/card1.png" @click="jumpTo('/xjc-integratedmachine/environment/query_universitydb_conditions')">
+          <img src="@/assets/images/environment/card2.png" @click="jumpTo('/xjc-integratedmachine/environment/prodb_search_undergraduate')">
+          <img src="@/assets/images/environment/card3.png" @click="jumpTo('/xjc-integratedmachine/environment/occdb_search_industry')">
+          <img src="@/assets/images/environment/card4.png" @click="jumpTo('/xjc-integratedmachine/environment/studyocc_information')">
+        </div>
+        <div class="bottom-img">
+          <img src="@/assets/images/environment/ai-img.png">
+        </div>
+      </div>
+      <drag_component></drag_component>
+    </div>
+  </div>
 
 </template>
 
 <script setup>
-    const route = useRoute()
-    const router = useRouter()
-    const {proxy} = getCurrentInstance()
-
-    function jumpTo(path) {
-        router.push({
-            path : path
-        })
-    }
+import headComponent from '@/views/xjc-integratedmachine/components/head_component.vue'
+import Drag_component from "@/views/xjc-integratedmachine/components/drag_component.vue";
+
+const router = useRouter()
+
+const headinfo = ref({})
+
+function setHeadinfo(){
+  headinfo.value = {
+    title: '环境探索学习系统',
+    user: {
+      avatar: '头像路径',
+      nickName: '张三'
+    },
+    backUrl : '/xjc-integratedmachine/index',
+    isHome:true,
+  }
+}
+
+
+function jumpTo(path) {
+  router.push({
+    path: path,
+    query: {name: 123}
+  })
+}
+onMounted(() => {
+  setHeadinfo()
+})
 </script>
 
-<style scoped>
+
+<style scoped lang="scss">
+.wake-up-page{
+  background: url('@/assets/images/login/login-home-background.png') no-repeat;
+  background-size: 1920px 1080px;
+  z-index:10;
+  width: 100%;
+  height: 1080px;
+  .page-content{
+    width: 100%;
+    position: absolute;
+    top: 123px;
+    bottom: 0;
+    p{
+      padding-left: 44px;
+      padding-right: 44px;
+      font-weight: 400;
+      font-size: 30px;
+      color: #333333;
+      line-height: 52px;
+      letter-spacing: 3px;
+      text-indent: 2em;
+    }
+  }
+  .content-text-box{
+    width: 100%;
+    height: 126px;
+    background: url('@/assets/images/wakeup/background-content-style.png') no-repeat;
+    background-size: 1920px 126px;
+    margin-top:23px;
+    display: flex;
+    align-items: center;
+  }
+  .page-img-box{
+    width: 100%;
+    display: flex;
+    justify-content:space-around;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 40px;
+    .img-box{
+      width: 1520px;
+      display: flex;
+      justify-content: space-around;
+      img{
+        width: 350px;
+        height: 500px;
+      }
+    }
+    .bottom-img{
+      width: 1520px;
+      height: 316px;
+      margin-top: 63px;
+      img{
+        width: 1520px;
+        height: 316px;
+      }
+    }
+  }
+
+  .content-bottom{
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    position: relative;
+    .draw{
+      width: 109px;
+      height: 170px;
+      margin-left: 100px;
+      img{
+        width: 109px;
+        height: 170px;
+      }
+    }
+
+    .ai-rabit{
+      position: absolute;
+      right: 100px;
+      top: -50px;
+      display: flex;
+      align-items: center;
+      .ai-rabit-text{
+        width: 345px;
+        height: 89px;
+        background: #E8EEF7;
+        font-weight: 300;
+        margin-bottom: 20px;
+        font-size: 22px;
+        color: #000000;
+        padding:16px;
+        border-radius: 24px 24px 24px 24px;
+      }
+      img{
+        width: 178px;
+        height: 270px;
+      }
+    }
+  }
+
+}
+.temp{
+  width:20vw;
+  height: 10vh;
+  background: #85eff5;
+  border: solid 1px #a2fffc;
+  border-radius: 10px;
+  cursor: pointer;
+}
 
 </style>
+

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

@@ -1,150 +1,507 @@
 <template>
-    高校库条件查询
-
-    <el-card style="width:200px">
-        <div @click="changeTab('tj')">
+  <div class="query_universitydb_conditions">
+    <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 @click="changeTab('gjz')">
+          </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>
-    </el-card>
-
-
-    <div v-show="tab == 'tj'">
-        <div @click="showAreaChooseHandler">院校属地::{{form.areaname}}</div>
-        <div @click="showEducationlevelHandler">学历层次:: {{form.educationlevelName}}</div>
-        <div @click="showCharacteristicHandler">特色::{{form.characteristicName}}</div>
-        <div>
-            <!--院校属地-->
-            <el-dialog v-model="showAreaChoose" width="600px" append-to-body>
-                <div v-for="dict in gk_province" :key="dict.value" @click="chooseArea(dict)">{{dict.label}}</div>
-            </el-dialog>
+      </div>
+      <div class="content-right">
+        <div class="one-page" v-show="onePage">
+          <div class="top">
+            <img src="@/assets/images/environment/search-card1.png" @click="showAreaChooseHandler">
+            <img src="@/assets/images/environment/search-card2.png" @click="showEducationlevelHandler">
+            <img src="@/assets/images/environment/search-card3.png" @click="showCharacteristicHandler">
+          </div>
+          <div class="search-btn">
+            <p v-show="form.educationlevelName || form.areaname || form.characteristicName">
+              <span style="margin-right: 3px;margin-left: 3px">已选择条件:</span>
+              <span style="margin-right: 3px;margin-left: 3px">{{form.educationlevelName}}</span>
+              <span v-show="form.areaname">|</span>
+              <span style="margin-right: 3px;margin-left: 3px">{{form.areaname}}</span>
+              <span v-show="form.characteristicName">|</span>
+              <span style="margin-right: 3px;margin-left: 3px">{{form.characteristicName}}</span>
+            </p>
+            <img @click="search" style="z-index:10" src="@/assets/images/environment/search-btn.png">
+          </div>
         </div>
-        <div>
-            <!--学历层次-->
-            <el-dialog v-model="showEducationlevel" width="600px" append-to-body>
-                <div v-for="dict in educationlevel" :key="dict.value" @click="chooseEducationlevel(dict)">
-                    {{dict.label}}
-                </div>
-            </el-dialog>
+        <div class="two-page" v-show="twoPage">
+          <div class="two-page-search">
+            <el-input
+                v-model="form.name"
+                style="width: 1484px;height: 84px"
+                placeholder="请输入"
+                @change="byKeyword"
+            >
+              <template #suffix>
+                <span style="font-size: 38px;color: #444040;margin-left: 37px;">
+                  X
+                </span>
+              </template>
+            </el-input>
+          </div>
+          <div class="result-box">
+            <div class="two-page-result">
+
+              <div v-for="(item,index) in universityList"
+                   :class="[item.selected?'item-result-box-active':'item-result-box']"
+                   @click="toDetail(item)">
+                <div v-html="item.name"></div>
+              </div>
+            </div>
+          </div>
         </div>
-        <div>
-            <!--特色-->
-            <el-dialog v-model="showCharacteristic" width="600px" append-to-body>
-                <div v-for="dict in characteristic" :key="dict.value" @click="chooseCharacteristic(dict)">
-                    {{dict.label}}
-                </div>
-            </el-dialog>
+      </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>
 
-        <el-button @click="search">开始查询</el-button>
     </div>
-    <div v-show="tab == 'gjz'">
-        <el-input v-model="form.name"></el-input>
-        <el-button @click="byKeyword">关键字</el-button>
-        <div v-for="(item,index) in universityList">
-            <div @click="toDetail(item)">{{item.name}}</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";
 
-    import {getUniversityByKeyword} from '@/api/xjc-integratedmachine/environment/university.js'
+const router = useRouter()
 
-    const tab = ref("tj")
 
-    function changeTab(path) {
-        tab.value = path
-    }
+const onePage = ref(true)
+const twoPage = ref(false)
+const threePage = 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;
+  }
+}
 
-    const router = useRouter()
+function jumpTo(path) {
+  router.push({
+    path: path,
+    query: {name: 123}
+  })
+}
 
-    const showAreaChoose = ref(false)
-    const showEducationlevel = ref(false)
-    const showCharacteristic = ref(false)
+onMounted(() => {
+  setHeadinfo()
+})
+const universityList = ref([])
 
-    const {proxy} = getCurrentInstance()
-    const {gk_province, educationlevel, characteristic} = proxy.useDict('gk_province', 'educationlevel', 'characteristic')
+// 定义一个函数，用于将关键词变为红色
+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 form = ref({
-        areaid: null,
-        areaname: null,
-        educationlevel: null,
-        educationlevelName: null,
-        characteristic: null,
-        characteristicName: null,
-        name : null
+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)
+      // 遍历数据数组，并处理每个字符串
     })
 
-    function showAreaChooseHandler() {
-        showAreaChoose.value = true
-    }
+    universityList.value = resp.list
+  })
+}
 
-    function chooseArea(item) {
-        form.value.areaid = item.value
-        form.value.areaname = item.label
-        showAreaChoose.value = false
-    }
 
-    function showEducationlevelHandler() {
-        showEducationlevel.value = true
+function toDetail(row) {
+  router.push({
+    path: '/xjc-integratedmachine/environment/university_details_video',
+    query: {
+      id: row.id,
+      name: row.name,
     }
+  })
+}
 
-    function chooseEducationlevel(item) {
-        form.value.educationlevel = item.value
-        form.value.educationlevelName = item.label
-        showEducationlevel.value = false
-    }
 
-    function showCharacteristicHandler() {
-        showCharacteristic.value = true
-    }
+const tab = ref("tj")
 
-    function chooseCharacteristic(item) {
-        form.value.characteristic = item.value
-        form.value.characteristicName = item.label
-        showCharacteristic.value = false
-    }
+function changeTab(path) {
+  tab.value = path
+}
 
-    function search() {
-        router.push({
-            path: '/xjc-integratedmachine/environment/university_list',
-            query: form.value
-        })
-    }
 
-    const universityList = ref([])
-    function byKeyword() {
-        getUniversityByKeyword(form.value).then(resp => {
-            universityList.value = resp.list
-        })
+const showAreaChoose = ref(false)
+const showEducationlevel = ref(false)
+const showCharacteristic = ref(false)
+
+const {proxy} = getCurrentInstance()
+const {gk_province, educationlevel, characteristic} = proxy.useDict('gk_province', 'educationlevel', 'characteristic')
+
+
+function showAreaChooseHandler() {
+  showAreaChoose.value = true
+}
+
+function chooseArea(item) {
+  form.value.areaid = item.value
+  form.value.areaname = item.label
+  showAreaChoose.value = false
+}
+
+function showEducationlevelHandler() {
+  showEducationlevel.value = true
+}
+
+function chooseEducationlevel(item) {
+  form.value.educationlevel = item.value
+  form.value.educationlevelName = item.label
+  showEducationlevel.value = false
+}
+
+function showCharacteristicHandler() {
+  showCharacteristic.value = true
+}
+
+function chooseCharacteristic(item) {
+  form.value.characteristic = item.value
+  form.value.characteristicName = item.label
+  showCharacteristic.value = false
+}
+
+function search() {
+  router.push({
+    path: '/xjc-integratedmachine/environment/university_list',
+    query: form.value
+  })
+}
+
+</script>
+
+
+<style scoped lang="scss">
+.query_universitydb_conditions {
+  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 toDetail(row) {
-        router.push({
-            path : '/xjc-integratedmachine/environment/university_details_video',
-            query : {
-                id : row.id,
-                name : row.name,
+    .content-right {
+      width: 1615px;
+      height: 926px;
+      background: #FFFFFF;
+      border-radius: 35px 35px 35px 35px;
+      margin-top: 13px;
+      margin-right: 24px;
+
+      .one-page {
+        .top {
+          display: flex;
+          justify-content: space-around;
+          align-items: center;
+          img {
+            width: 446px;
+            height: 239px;
+            margin-top: 271px;
+          }
+        }
+
+        .search-btn {
+          display: flex;
+          align-items: center;
+          flex-direction: column;
+          justify-content: space-around;
+          margin-top: 271px;
+          img {
+            width: 244px;
+            height: 100px;
+          }
+          p{
+
+          }
+          span{
+            margin-left: 3px;
+          }
+        }
+      }
+
+      .two-page {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .two-page-search {
+          margin-top: 57px;
+
+          ::v-deep .el-input__inner {
+            width: 1300px;
+            height: 84px;
+            font-size: 24px;
+            margin-left: 34px;
+          }
+
+          ::v-deep .el-input__suffix {
+            font-size: 100px;
+            width: 100px;
+            height: 100px;
+
+          }
+
+          ::v-deep .el-input__wrapper {
+            background: #F5F9FA;
+            box-shadow: none;
+          }
+        }
+
+        .result-box {
+          width: 1484px;
+          height: 750px;
+          overflow: auto;
+
+          .two-page-result {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: space-between;
+            align-items: center;
+
+            .item-result-box-active {
+              min-width: 320px;
+              height: 92px;
+              background: linear-gradient(180deg, #B6FFEF 0%, #C5EEFF 100%);
+              box-shadow: inset 0px -2px 7px 0px #1E410E;
+              border-radius: 5px 5px 5px 5px;
+              border: 1px solid #A2F57F;
+              font-weight: 400;
+              font-size: 30px;
+              color: #0DE6A1;
+              line-height: 90px;
+              text-align: center;
+              margin-left: 50px;
+              margin-right: 50px;
+              margin-top: 32px;
+              padding-left: 20px;
+              padding-right: 20px;
+            }
+
+            .item-result-box {
+              min-width: 320px;
+              height: 92px;
+              background: #E0EEF4;
+              border-radius: 5px 5px 5px 5px;
+              font-weight: 400;
+              font-size: 30px;
+              color: #000000;
+              line-height: 90px;
+              text-align: center;
+              margin-left: 50px;
+              margin-right: 50px;
+              margin-top: 32px;
+              padding-left: 20px;
+              padding-right: 20px;
             }
-        })
+
+            .item-result-box:hover {
+              min-width: 320px;
+              height: 92px;
+              background: linear-gradient(180deg, #B6FFEF 0%, #C5EEFF 100%);
+              box-shadow: inset 0px -2px 7px 0px #1E410E;
+              border-radius: 5px 5px 5px 5px;
+              border: 1px solid #A2F57F;
+              font-weight: 400;
+              font-size: 30px;
+              color: #000000;
+              line-height: 90px;
+              text-align: center;
+              margin-left: 50px;
+              margin-top: 32px;
+              padding-left: 20px;
+              padding-right: 20px;
+            }
+          }
+        }
+
+      }
+
     }
-    // function showAreaChooseHandler() {
-    //     showAreaChoose.value = true
-    // }
-    //
-    // function chooseArea(item) {
-    //     form.value.areaid = item.value
-    //     form.value.areaname = item.label
-    //     showAreaChoose.value = false
-    // }
+  }
 
-</script>
+}
 
-<style scoped>
+.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/wakeup/career_cinema/index.vue

@@ -156,7 +156,8 @@ p{
         height:850px;
         overflow:auto;
         margin-left: 26px;
-        scrollbar-color: #9be9fa #ffffff;
+        scrollbar-color: #D9D9D9 #9feafa0f;
+        scrollbar-width: thin;
         .box-item{
           margin-top: 29px;
           width: 1786px;
@@ -189,7 +190,8 @@ p{
             height: 314px;
             .text-box{
               overflow:auto;
-              //scrollbar-color: #9be9fa #ffffff;
+              scrollbar-color: #D9D9D9 #9feafa0f;
+              scrollbar-width: thin;
               height: 314px;
               //border: 1px solid;
               .text{

src/views/xjc-integratedmachine/wakeup/career_example/index.vue

@@ -3,8 +3,8 @@
     <head-component :headinfo=headinfo></head-component>
     <div class="page-content">
       <div class="content-left">
-        <p>{{exampleInfo.shortIntroduce}}</p>
-        <p>{{exampleInfo.name}}：{{exampleInfo.type}}</p>
+<!--        <p>{{exampleInfo.shortIntroduce}}</p>-->
+<!--        <p>{{exampleInfo.name}}：{{exampleInfo.type}}</p>-->
         <div class="left-main">
           <div class="text-box" v-html="exampleInfo.introduce">
           </div>
@@ -12,10 +12,8 @@
       </div>
 
       <div class="content-right">
-          <div v-for="(item,index) in exampleData" class="item-box" :class="{ 'active-button': isActive }" @click="showInfo(item,index)">
+          <div v-for="(item,index) in exampleData" class="item-box" :class="[item.selected?'active-button':'']" @click="showInfo(item,index)">
             <img :src= "`${baseUrl}`+ item.picPath" />
-          {{exampleId===item.id}}
-            {{item.id}}
             <div>{{item.name}}</div>
             <p >{{item.type}}</p>
             <p >{{item.shortIntroduce}}</p>
@@ -95,14 +93,17 @@ onMounted(() => {
 function getExampleList() {
   pageLoading = true;
   exampleList().then(res => {
-    // console
     if(res.exampleList.length > 0){
       exampleInfo.value = res.exampleList[0];
     }
+    res.exampleList.map(item =>{
+      item.selected = false;
+    })
+    console.log("res.exampleList",res.exampleList)
+
     exampleData.value = res.exampleList;
     pageLoading = false;
   }).catch((err)=>{
-    console.log("error")
     pageLoading = false;
   })
 }
@@ -116,14 +117,16 @@ function dialogBeforeClose(){
 }
 
 
-function showInfo(val){
+function showInfo(val,index){
   console.log("11111111",val)
   exampleId.value = val.id
-  isActive = !isActive;
   console.log("exampleId0".exampleId,"val.id",val.id)
   exampleInfo.value = val
-  // exampleData[index].selected.value = true;
-
+  exampleData.value.map(item =>{
+    item.selected = false;
+  })
+  exampleData.value[index].selected = true;
+  console.log("exampleData.value",exampleData.value)
   console.log("11111111",exampleInfo)
 
 }
@@ -150,10 +153,11 @@ p{
     display: flex;
     justify-content: space-around;
     .content-left{
-      width: 1290px;
+      width: 1330px;
       height: 919px;
       background: #FFFFFF;
       border-radius: 35px 35px 35px 35px;
+      margin-left: 20px;
       p:nth-child(1){
         font-weight: bold;
         font-size: 32px;
@@ -186,48 +190,56 @@ p{
           }
         }
         .text-box{
-          width: 1290px;
+          width: 1385px;
           height: 777px;
           font-weight: 400;
-          font-size: 30px;
           color: #333333;
-          line-height: 52px;
-          //border: 1px solid;
           text-indent: 2em;
           overflow: auto;
+          scrollbar-color: #D9D9D9 #9feafa0f;
+          scrollbar-width: thin;
           padding-right: 52px;
+          margin-top: 20px;
           padding-left: 52px;
+          p{
+            line-height: 22px;
+            font-size: 40px;
+          }
         }
       }
     }
     .content-right{
-      width: 521px;
+      width: 460px;
       height: 910px;
       background: #FFFFFF;
+      margin-right: 20px;
       border-radius: 35px 35px 35px 35px;
       overflow: auto;
+      scrollbar-color: #D9D9D9 #9feafa0f;
+      scrollbar-width: thin;
       .item-box{
-        width: 470px;
+        width: 410px;
         height: 370px;
         //border: 1px solid;
         background: #F8F8F8;
-        margin: 17px auto;
+        margin: 17px;
         border-radius: 35px 35px 35px 35px;
         img{
           width: 115px;
           height: 115px;
           border-radius: 50%;
           //border: 1px solid;
-          margin-left: 192px;
+          margin-left: 144px;
           margin-top: 28px;
         }
         p
         {
           font-weight: bold;
-          font-size: 32px;
+          font-size: 30px;
           color: #333333;
           line-height: 52px;
           padding-left: 10px;
+          text-align: center;
           //background: #EAFAFF;
         }
         div{
@@ -244,10 +256,11 @@ p{
       .item-box:hover{
         background: #EAFAFF;
       }
-      //.active-button{
-      //  background: red;
-      //}
+      .active-button{
+        background: #EAFAFF;
+      }
     }
+
   }
 }
 //{

src/views/xjc-integratedmachine/wakeup/career_maturity/evaluation.vue

@@ -5,18 +5,30 @@
       <div class="page-box">
         <div>
           <div class="tab-box">
-            <div :class="[onePage?'item-box-active':'item-box']" @click="showPage(1)">数据汇总</div>
-            {{ onePage }}
-            <div :class="[twoPage?'item-box-active':'item-box']" @click="showPage(2)">生涯决策知识</div>
-            {{ twoPage }}
-            <div :class="[threePage?'item-box-active':'item-box']" @click="showPage(3)">生涯决策态度</div>
-            {{ threePage }}
+            <div :class="[onePage?'item-box-active':'item-box']" @click="showPage(1)">
+              <img v-if="onePage" src="@/assets/images/wakeup/maturity/report-icon1-active.png">
+              <img v-else src="@/assets/images/wakeup/maturity/report-icon1.png">
+              数据汇总
+            </div>
+            <div :class="[twoPage?'item-box-active':'item-box']" @click="showPage(2)">
+              <img v-if="twoPage" src="@/assets/images/wakeup/maturity/report-icon2-active.png">
+              <img v-else src="@/assets/images/wakeup/maturity/report-icon2.png">
+              生涯决策知识
+            </div>
+            <div :class="[threePage?'item-box-active':'item-box']" @click="showPage(3)">
+              <img v-if="threePage" src="@/assets/images/wakeup/maturity/report-icon3-active.png">
+              <img v-else src="@/assets/images/wakeup/maturity/report-icon3.png">
+              生涯决策态度
+            </div>
           </div>
         </div>
         <div class="one-page" v-show="onePage">
-          <p class="maturity-text">生涯成熟度：<span>中等</span></p>
+          <p class="maturity-text">{{ resultObj.devision }}
+            ：<span :style="{ color: computedColor(resultObj.devisionResult)  }">{{ resultObj.score }}</span>
+            <span :style="{ color: computedColor(resultObj.devisionResult)  }"
+                  style="margin-left: 22px">{{ resultObj.devisionResult }}</span></p>
           <p class="text-info">
-            综合来看，你对生涯发展有一定认知，但心理准备不足，缺乏系统规划，面对生涯选择时容易迷茫，易受周围同学或家长影响，尚未形成稳定的生涯发展思路。
+            {{ resultObj.devisionResultDetail }}
           </p>
           <div class="table-box">
             <div class="main">
@@ -24,8 +36,60 @@
             </div>
           </div>
         </div>
-        <div class="two-page" v-show="twoPage">112</div>
-        <div class="three-page" v-show="threePage">11112</div>
+        <div class="two-page" v-show="twoPage">
+          <div v-for="(item,index) in resultList2">
+            <div v-if="index===0?true:false">
+              <p class="maturity-text">{{ item.devision }}
+                ：<span :style="{ color: computedColor(item.devisionResult)  }">{{ item.score }}</span>
+                <span :style="{ color: computedColor(item.devisionResult)  }"
+                      style="margin-left: 22px">{{ item.devisionResult }}</span></p>
+              <p class="text-info">
+                {{ item.devisionResultDetail }}
+              </p>
+            </div>
+            <div v-else class="description-box">
+              <p class="maturity-text">{{item.devision}}
+                <p>得分：
+                  <span :style="{ color: computedColor(item.devisionResult)  }">{{ item.score }}</span>
+                  <span :style="{ color: computedColor(item.devisionResult)  }"
+                        style="margin-left: 22px">{{ item.devisionResult }}</span>
+                </p>
+              </p>
+              <p class="text-info">
+                {{ item.devisionResultDetail }}
+              </p>
+              <p class="text-description">描述：{{item.devisionResultDetail}}</p>
+              <p class="text-description">建议：{{item.devisionAdvice}}</p>
+            </div>
+          </div>
+        </div>
+        <div class="three-page" v-show="threePage">
+          <div v-for="(item,index) in resultList3">
+            <div v-if="index===0?true:false">
+              <p class="maturity-text">{{ item.devision }}
+                ：<span :style="{ color: computedColor(item.devisionResult)  }">{{ item.score }}</span>
+                <span :style="{ color: computedColor(item.devisionResult)  }"
+                      style="margin-left: 22px">{{ item.devisionResult }}</span></p>
+              <p class="text-info">
+                {{ item.devisionResultDetail }}
+              </p>
+            </div>
+            <div v-else class="description-box">
+              <p class="maturity-text">{{item.devision}}
+                <p>得分：
+                  <span :style="{ color: computedColor(item.devisionResult)  }">{{ item.score }}</span>
+                  <span :style="{ color: computedColor(item.devisionResult)  }"
+                        style="margin-left: 22px">{{ item.devisionResult }}</span>
+                </p>
+              </p>
+              <p class="text-info">
+                {{ item.devisionResultDetail }}
+              </p>
+              <p class="text-description">描述：{{item.devisionResultDetail}}</p>
+              <p class="text-description">建议：{{item.devisionAdvice}}</p>
+            </div>
+          </div>
+        </div>
       </div>
 
     </div>
@@ -48,13 +112,23 @@
 <script setup>
 import headComponent from '@/views/xjc-integratedmachine/components/head_component.vue'
 import {Calendar} from '@element-plus/icons-vue'
-import {ref,onMounted} from "vue";
+import {ref, onMounted} from "vue";
 import {maturityReport} from "@/api/xjc-integratedmachine/wakeup/index.js";
 import * as echarts from 'echarts';
 
+const router = useRouter()
+const route = useRoute()
+
 const headinfo = ref({})
 const describeInfo = ref('')
-const evaluationList =  ref([])
+const resultObj = ref('')
+const resultList2 = ref('')
+const resultList3 = ref('')
+
+const evaluationList = ref([])
+const evalKey = ref([])
+const evalValue = ref([])
+
 let pageLoading = ref(false)
 
 function setHeadinfo() {
@@ -64,7 +138,8 @@ function setHeadinfo() {
       avatar: '头像路径',
       nickName: '张三'
     },
-    backUrl: '/xjc-integratedmachine/wakeup/career_recognize/index'
+    backUrl: '/xjc-integratedmachine/wakeup/career_maturity/index',
+    backUrlUse:true
   }
 }
 
@@ -77,29 +152,54 @@ const describe = (val) => {
   describeInfo.value = val;
   centerDialogVisible.value = true;
 };
+
 //请求页面数据
 function getMaturityReport() {
-  // pageLoading = true;
-  let id = "60f384a7-4970-44cb-a9da-0ce00519eee9"
-  maturityReport({id :id }).then(res => {
-
-    //
-    pageLoading = false;
-    // if(res.data.eval.length > 0){
+  pageLoading = true;
+  let id = route.query.id;
+  maturityReport({id: id}).then(res => {//
     evaluationList.value = res.data.eval;
-    console.log("evaluationList.value",evaluationList.value)
-    // }
-    // exampleData.value = res.data.exampleList;
-
-  }).catch((err)=>{
+    resultObj.value = res.data.resultList1[0];
+    resultList2.value = res.data.resultList2;
+    resultList3.value = res.data.resultList3;
+    //处理echats中的数据显示
+    evaluationList.value = evaluationList.value.reverse()
+    evaluationList.value.map((item) => {
+      evalKey.value.push({value: item.devision});
+      let obj = {
+        itemStyle: {},
+        value: ''
+      }
+      if (item.devision === '稳定性' ||
+          item.devision === '功利性' ||
+          item.devision === '自信心' ||
+          item.devision === '独立性' ||
+          item.devision === '主动性' ||
+          item.devision === '生涯决策态度') {
+        obj.itemStyle.color = '#3FD4CF'
+      } else if (item.devision === '职业自我知识' ||
+          item.devision === '职业世界知识' ||
+          item.devision === '生涯决策知识'
+      ) {
+        obj.itemStyle.color = '#F9CC44'
+      } else if (item.devision === '生涯成熟度') {
+        obj.itemStyle.color = '#3C7EFF'
+      }
+      obj.value = parseFloat(item.score)
+      evalValue.value.push(obj);
+    })
+    initChart();
+    pageLoading = false;
+  }).catch((err) => {
     console.log("error")
-    alert("111111111")
     pageLoading = false;
   })
 }
+
 onMounted(() => {
   setHeadinfo()
   getMaturityReport()
+
 })
 
 // 定义一个ref来引用图表的容器
@@ -117,13 +217,13 @@ const chartOptions = {
   },
   yAxis: {
     type: 'category', // 修改为类目轴，用于显示柱状图的类别
-    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子','11','23','34','34'],
+    data: evalKey.value,
   },
   series: [
     {
       name: '销量',
       type: 'bar', // 仍然使用柱状图，但方向会由ECharts根据xAxis和yAxis的配置自动调整
-      data: [5, 20, 36, 10, 10, 20,23,33,33,44],
+      data: evalValue.value,
     },
   ],
 };
@@ -131,14 +231,50 @@ const chartOptions = {
 // 初始化图表
 const initChart = () => {
   if (chartContainer.value) {
+    chartContainer.value.style.width = '1040px';
+    chartContainer.value.style.height = '640px';
     chartInstance = echarts.init(chartContainer.value);
     chartInstance.setOption(chartOptions);
   }
 };
+// 模拟一个包含devisionResult的对象
+const resultObjStyle = reactive({
+  devisionResult: '中等' // 你可以根据需要改变这个值来测试颜色变化
+});
+
+// 定义一个计算属性来计算颜色
+function computedColor(devisionResult) {
+  switch (devisionResult) {
+    case '中等':
+      return '#3A57F8'; // 当devisionResult为“中等”时返回蓝色
+    case '较低':
+      return '#FF7D59'; // 当devisionResult为“较低”时返回橙色
+    case '较高':
+      return '#14CB8B'; // 当devisionResult为“较高”时返回绿色
+    default:
+      return '#000000'; // 默认返回黑色（或者你可以根据需要返回其他颜色）
+  }
+}
 
+//切换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;
+  }
+}
 // 组件挂载时初始化图表
 onMounted(() => {
-  initChart();
+
 });
 
 </script>
@@ -173,30 +309,37 @@ p {
     padding-top: 25px;
     position: relative;
     overflow: auto;
+    scrollbar-color: #9be9fa #ffffff;
 
     .tab-box {
       display: flex;
       justify-content: center;
       padding-left: 279px;
       padding-right: 279px;
+      img{
+         width: 36px;
+         height: 36px;
+         margin-right: 12px;
+      }
     }
 
     .item-box {
       width: 422px;
       height: 136px;
       border: 1px dashed gray;
-      text-align: center;
       line-height: 136px;
       font-weight: 400;
       font-size: 32px;
       margin-left: 3px;
       color: #A8A8A8;
+      display: flex;
+      justify-content: center;
+      align-items: center;
     }
 
     .item-box-active {
       width: 422px;
       height: 136px;
-
       text-align: center;
       line-height: 136px;
       font-weight: 400;
@@ -206,94 +349,99 @@ p {
       background: #CFF7FF;
       border: 1px dashed gray;
       border-top: 3px solid #0088FF;
+      display: flex;
+      justify-content: center;
+      align-items: center;
     }
 
     .one-page {
-      .maturity-text{
+      .maturity-text {
         font-weight: bold;
         font-size: 32px;
         color: #333333;
         line-height: 52px;
-        margin: 95px;
+        margin: 95px 0 35px;
       }
-      .text-info{
+
+      .text-info {
         font-weight: 400;
         font-size: 30px;
         color: #333333;
         line-height: 52px;
       }
-      .table-box{
+
+      .table-box {
         width: 1525px;
         height: 720px;
-        background:rgba(192, 231, 255, 0.20);
+        display: flex;
+        justify-content: center;
+        background: rgba(192, 231, 255, 0.20);
         //opacity: 0.2;
         margin-top: 26px;
-        z-index:10;
-      }
-
-    }
-    .one-page ,.two-page,.three-page{
-      padding-left: 157px;
-      padding-right: 157px;
-    }
-  }
-
-  .fixed-box {
-    width: 100%;
-    height: 100px;
-    position: absolute;
-    bottom: 125px;
-  }
-
-  .content-bottom {
-    width: 100%;
-    height: 270px;
-    display: flex;
-    justify-content: space-between;
-    position: relative;
-    align-items: center;
+        margin-top: 26px;
 
-    .draw {
-      width: 109px;
-      height: 170px;
+        z-index: 10;
+        margin-bottom:  25px;
+        .main {
+          margin-top: 58px;
 
-      img {
-        width: 109px;
-        height: 170px;
+        }
       }
+
     }
 
-    .ai-rabit {
-      position: absolute;
-      right: -27px;
-      display: flex;
-      align-items: center;
+    .two-page,.three-page{
+      margin-top: 95px;
+      margin-bottom: 45px;
+      //.description-box{
+      //  margin-top: 5px;
+      //}
+      .maturity-text {
+        font-weight: bold;
+        font-size: 32px;
+        color: #333333;
+        line-height: 52px;
+        margin: 25px 0 15px;
+      }
 
-      .ai-rabit-text {
-        width: 345px;
-        height: 89px;
-        background: #E8EEF7;
-        font-weight: 300;
-        margin-bottom: 20px;
-        font-size: 22px;
-        color: #000000;
-        padding: 16px;
-        border-radius: 24px 24px 24px 24px;
+      .text-info {
+        font-weight: 400;
+        font-size: 30px;
+        color: #333333;
+        line-height: 52px;
       }
+      .text-description{
+        text-indent: 2em;
+        font-weight: 400;
+        font-size: 30px;
+        color: #333333;
+        line-height: 52px;
+        margin-top: 12px;
+      }
+      .table-box {
+        width: 1525px;
+        height: 720px;
+        display: flex;
+        justify-content: center;
+        background: rgba(192, 231, 255, 0.20);
+        //opacity: 0.2;
+        margin-top: 26px;
+        z-index: 10;
 
-      img {
-        width: 178px;
-        height: 270px;
+        .main {
+          margin-top: 58px;
+        }
       }
+
     }
-  }
 
-  .draggable-ball {
-    position: absolute;
-    cursor: pointer;
-    user-select: none; /* 防止拖拽时选中文字 */
+    .one-page, .two-page, .three-page {
+      padding-left: 157px;
+      padding-right: 157px;
+    }
   }
 
+
   ::v-deep .el-dialog {
     width: 632px;
     height: 343px;
@@ -327,9 +475,10 @@ p {
     color: #266EFF;
   }
 }
+
 .chart-container {
   width: 1040px;
   height: 620px; /* 可以根据需要调整高度 */
-  border: 1px solid;
+  //border: 1px solid;
 }
 </style>

src/views/xjc-integratedmachine/wakeup/career_maturity/index.vue

@@ -7,24 +7,22 @@
       </div>
       <div class="bottom">
         <img src="@/assets/images/wakeup/maturity/maturity-game-left.png" @click="jumpTo('/xjc-integratedmachine/wakeup/career_maturity/knowledge_explanation')">
-        <img src="@/assets/images/wakeup/maturity/maturity-game-right.png" @click="jumpTo('/xjc-integratedmachine/wakeup/career_maturity/evaluation')">
+        <img src="@/assets/images/wakeup/maturity/maturity-game-right.png" @click="jumpTo('/xjc-integratedmachine/wakeup/career_maturity/maturity_game')">
       </div>
       <drag_component></drag_component>
     </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 {onMounted} from "vue";
 
 
 const router = useRouter()
 
 const headinfo = ref({})
-
-
 const draggedItem = ref(null);
 
 function dragStart(event) {
@@ -48,10 +46,13 @@ function setHeadinfo(){
       avatar: '头像路径',
       nickName: '张三'
     },
-    backUrl : '/index'
+    backUrl: '/xjc-integratedmachine/wakeup/index',
+    backUrlUse:true,
   }
 }
-
+onMounted(() => {
+  setHeadinfo()
+})
 
 function jumpTo(path) {
   router.push({
@@ -60,10 +61,6 @@ function jumpTo(path) {
   })
 }
 
-onMounted(() => {
-  setHeadinfo()
-})
-
 
 
 </script>

src/views/xjc-integratedmachine/wakeup/career_maturity/maturity_game.vue

@@ -12,27 +12,22 @@
             </div>
           </div>
           <div class="group-btn">
-            <img src="@/assets/images/wakeup/maturity/btn1.png" @click="selectBtn(questionAnswerA)">{{
-              questionAnswerA
-            }}
-            <img src="@/assets/images/wakeup/maturity/btn2.png" @click="selectBtn(questionAnswerB)">{{
-              questionAnswerB
-            }}
-            <img src="@/assets/images/wakeup/maturity/btn3.png" @click="selectBtn(questionAnswerC)">{{
-              questionAnswerC
-            }}
-            <img src="@/assets/images/wakeup/maturity/btn4.png" @click="selectBtn(questionAnswerD)">{{
-              questionAnswerD
-            }}
-            <img src="@/assets/images/wakeup/maturity/btn5.png" @click="selectBtn(questionAnswerE)">{{
-              questionAnswerE
-            }}
+
+            <img  src="@/assets/images/wakeup/maturity/btn1.png"  @click="selectBtn(questionAnswerA,1)" class="icon" :class="{ shake: isShaking1 }">
+
+            <img src="@/assets/images/wakeup/maturity/btn2.png" @click="selectBtn(questionAnswerB,2)" class="icon" :class="{ shake: isShaking2 }">
+            <img src="@/assets/images/wakeup/maturity/btn3.png" @click="selectBtn(questionAnswerC,3)" class="icon" :class="{ shake: isShaking3 }">
+            <img src="@/assets/images/wakeup/maturity/btn4.png" @click="selectBtn(questionAnswerD,4)" class="icon" :class="{ shake: isShaking4 }">
+            <img src="@/assets/images/wakeup/maturity/btn5.png" @click="selectBtn(questionAnswerE,5)" class="icon" :class="{ shake: isShaking5 }">
+
           </div>
           <div class="progress-container">
-            <div class="progress-bar" :style="{ width: progress + '%' }">
+            <div class="bar-box">
+              <div class="progress-bar" :style="{ width: progress + '%' }">
+              </div>
             </div>
             <div class="progress-info">
-              {{ newData.length }} / {{ questionSize }}
+              {{ current }} / {{ questionSize }}
             </div>
           </div>
         </div>
@@ -43,14 +38,27 @@
             <img src="@/assets/images/wakeup/maturity/time.png">
             <p> {{ formattedTime(elapsedTime) }}</p>
           </div>
-          <img class="btn-img" @click="submitAnswer" v-show="newData.length >= questionSize"
+          <img class="btn-img" @click="messageDislog()" v-show="newData.length >= questionSize"
                src="@/assets/images/wakeup/maturity/submit.png">
         </div>
         <drag_component></drag_component>
       </div>
     </div>
-  </div>
+    <el-dialog v-model="centerDialogVisible" :show-close="false" width="500" center>
 
+      <div class="dialog-box">
+         {{ dialogInfo }}
+      </div>
+      <div class="footer-box">
+        <el-button type="primary" @click="submitAnswer()">
+          提交
+        </el-button>
+        <el-button type="primary" @click="centerDialogVisible = false">
+          关闭
+        </el-button>
+      </div>
+    </el-dialog>
+  </div>
 </template>
 
 <script setup>
@@ -61,6 +69,8 @@ import drag_component from "@/views/xjc-integratedmachine/components/drag_compon
 
 
 const router = useRouter()
+const route = useRoute()
+
 let pageLoading = ref(false)
 const headinfo = ref({})
 // const progress = ref(0)
@@ -71,12 +81,15 @@ const questionAnswerB = ref(null)
 const questionAnswerC = ref(null)
 const questionAnswerD = ref(null)
 const questionAnswerE = ref(null)
-
 const itemScore = ref('')
 const newData = ref([])
 const appraisalId = ref(null)
 const questionSize = ref(null);
+// 定义当前完成题目数量和总题目数量
+const current = ref(null);
 const useTime = ref(0);
+const centerDialogVisible = ref(false)
+const dialogInfo = ref('')
 
 function dragStart(event) {
   draggedItem.value = event.target;
@@ -185,22 +198,22 @@ onMounted(() => {
 onUnmounted(() => {
   stopTimer();
 });
-// 定义当前完成题目数量和总题目数量
-const current = ref(34);
-const total = ref(100); // 假设总共有10道题
+
 
 // 计算进度
 const progress = computed(() => {
-  return Math.floor((current.value / total.value) * 100);
+  return Math.floor((current.value / questionSize.value) * 100);
 });
 
 // 更新当前完成题目数量的函数（例如，当用户完成一道题时调用）
 const updateCurrent = (newCurrent) => {
-  if (newCurrent >= 0 && newCurrent <= total.value) {
+  if (newCurrent >= 0 && newCurrent <= questionSize.value) {
     current.value = newCurrent;
   }
 };
-const selectBtn = (val) => {
+const selectBtn = (val,index) => {
+  //调用动画效果
+  triggerShake(index)
   //将当前题目加入新数组，
   // 拼接选项数据
   if (newData.value.length != questionSize.value) {
@@ -213,6 +226,8 @@ const selectBtn = (val) => {
     //给按钮赋值；
     questionAnswerValue();
   }
+  current.value = newData.value.length
+  updateCurrent(current.value);
 };
 const previousQuestion = (val) => {
   //新数组中的最后一位从头插入旧数组
@@ -234,12 +249,12 @@ function questionAnswerValue() {
   questionAnswerE.value = maturityAppraisalData.value[0].questionAnswer[4]
 }
 
+function messageDislog() {
+  dialogInfo.value = '确定提交生成报告?'
+  centerDialogVisible.value = true;
+}
+
 function submitAnswer() {
-  ElMessageBox.confirm('确定提交生成报告', '提示', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'info'
-  }).then(() => {
     pageLoading = true;
     let appraisalCode = "3001"
     let params = {
@@ -252,15 +267,73 @@ function submitAnswer() {
     insertAppraisalAnswer(params).then(res => {
       console.log(res);
       pageLoading = false;
+      console.log("res", res.data.appraisalAnswerId)
+
+      router.push({
+        path: '/xjc-integratedmachine/wakeup/career_maturity/evaluation',
+        query: {
+          id: res.data.appraisalAnswerId
+        }
+      })
     }).catch((err) => {
       console.log("error")
       pageLoading = false;
     })
-  }).catch(() => {
 
-  })
 
 }
+// 定义一个响应式变量来控制抖动效果
+const isShaking1 = ref(false);
+const isShaking2 = ref(false);
+const isShaking3 = ref(false);
+const isShaking4 = ref(false);
+const isShaking5 = ref(false);
+
+// 定义一个函数来触发抖动效果
+const triggerShake = (val) => {
+  if(val === 1 ){
+    // 先将isShaking设置为true以触发抖动动画
+    isShaking1.value = true;
+
+    // 动画结束后，将isShaking设置为false以便下次点击可以重新触发
+    setTimeout(() => {
+      isShaking1.value = false;
+    }, 300); // 这里的300毫秒应该与CSS中定义的动画时长相匹配
+  }else if(val === 2){
+    // 先将isShaking设置为true以触发抖动动画
+    isShaking2.value = true;
+
+    // 动画结束后，将isShaking设置为false以便下次点击可以重新触发
+    setTimeout(() => {
+      isShaking2.value = false;
+    }, 300); // 这里的300毫秒应该与CSS中定义的动画时长相匹配
+  }else if(val === 3){
+    // 先将isShaking设置为true以触发抖动动画
+    isShaking3.value = true;
+
+    // 动画结束后，将isShaking设置为false以便下次点击可以重新触发
+    setTimeout(() => {
+      isShaking3.value = false;
+    }, 300); // 这里的300毫秒应该与CSS中定义的动画时长相匹配
+  }else if(val === 4){
+    // 先将isShaking设置为true以触发抖动动画
+    isShaking4.value = true;
+
+    // 动画结束后，将isShaking设置为false以便下次点击可以重新触发
+    setTimeout(() => {
+      isShaking4.value = false;
+    }, 300); // 这里的300毫秒应该与CSS中定义的动画时长相匹配
+  }else if(val === 5){
+    // 先将isShaking设置为true以触发抖动动画
+    isShaking5.value = true;
+
+    // 动画结束后，将isShaking设置为false以便下次点击可以重新触发
+    setTimeout(() => {
+      isShaking5.value = false;
+    }, 300); // 这里的300毫秒应该与CSS中定义的动画时长相匹配
+  }
+
+};
 </script>
 
 
@@ -283,12 +356,19 @@ p {
     top: 123px;
     bottom: 0;
     display: flex;
-    justify-content: space-around;
+    justify-content: space-between;
 
     .content-left {
       width: 244px;
     }
 
+    .page-box {
+      display: flex;
+      position: absolute;
+      width: 100%;
+      justify-content: space-between;
+    }
+
     .content-center {
       height: 910px;
       display: flex;
@@ -297,7 +377,6 @@ p {
       .content-img {
         width: 1187px;
         height: 424px;
-        //border: 1px solid;
         margin-top: 40px;
         position: relative;
 
@@ -309,13 +388,14 @@ p {
         p {
           width: 930px;
           position: absolute;
-          top: 150px;
+          top: 130px;
           left: 130px;
           font-weight: 400;
           font-size: 30px;
           color: #000000;
           letter-spacing: 4px;
-          text-align: center;
+          text-align: left;
+          text-indent: 2em;
         }
       }
 
@@ -326,9 +406,15 @@ p {
         margin-bottom: 10px;
         overflow: hidden;
         display: flex;
-        justify-content: center;
+        justify-content: left;
         align-items: center;
         margin-top: 200px;
+
+        .bar-box {
+          background-color: #f3f3f3;
+          border-radius: 4px;
+          width: 1082px;
+        }
       }
 
       .progress-bar {
@@ -350,10 +436,11 @@ p {
     }
 
     .content-right {
+      width: 244px;
       display: flex;
       flex-direction: column;
       align-items: center;
-
+      margin-right: 48px;
       .btn-img {
         width: 244px;
         height: 77px;
@@ -396,12 +483,64 @@ p {
     }
   }
 }
-
+::v-deep .el-dialog:not(.is-fullscreen) {
+  margin-top: 20vh !important;
+}
 .el-message-box {
   max-width: none;
   width: 632px;
   height: 289px;
 }
+.dialog-box{
+  width: 463px;
+  height: 188px;
+  font-weight: bold;
+  font-size: 32px;
+  color: #000000;
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.footer-box{
+  width: 100%;
+  display: flex;
+  justify-content: space-around;
+  ::v-deep .el-button:nth-child(1){
+    width: 136px;
+    height: 60px;
+    background: #2BC17B;
+  }
+  ::v-deep .el-button:nth-child(2){
+    width: 136px;
+    height: 60px;
+    background: #FB5451;
+  }
+  ::v-deep .el-button>span{
+   font-size: 24px;
+  }
+
+}
+//按钮动画效果
+.icon {
+  display: inline-block;
+  cursor: pointer; /* 鼠标悬停时显示为手形 */
+  transition: transform 0.1s ease-in-out; /* 添加过渡效果使动画更平滑 */
+}
+
+/* 定义shake动画的关键帧 */
+@keyframes shake {
+  0% { transform: translateX(0); }
+  25% { transform: translateX(-5px); }
+  50% { transform: translateX(5px); }
+  75% { transform: translateX(-5px); }
+  100% { transform: translateX(0); }
+}
+
+/* 当isShaking为true时，应用shake动画 */
+.shake {
+  animation: shake 0.3s ease-in-out;
+}
 
 </style>
 

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

@@ -43,7 +43,8 @@
                 avatar: '头像路径',
                 nickName: '张三'
             },
-            backUrl : '/index'
+            backUrl : '/index',
+          backUrlUse:true,
         }
     }
 
@@ -54,8 +55,9 @@
             query: {name: 123}
         })
     }
-
-
+    onMounted(() => {
+      setHeadinfo()
+    })
 
 </script>
 
@@ -87,7 +89,7 @@
     width: 100%;
     //height: 126px;
     background: url('@/assets/images/wakeup/background-content-style.png') no-repeat;
-    background-size: 1920px 126px;
+    background-size: 1920px 182px;
     margin-top:23px;
     display: flex;
     align-items: center;