[feat][ai生涯访谈][角色静态页面]

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

@@ -1,9 +1,86 @@
 <template>
-    <div class="development_stage">
+    <div class="ai_career_interview">
         <head-component :headinfo=headinfo></head-component>
         <div class="page-content">
             <div class="page-box">
+                <div>
+                    <div class="two-page">
+                        <div class="two-page-search">
+                            <el-input
+                                    v-model="form.name"
+                                    style="width: 1484px;height: 84px"
+                                    placeholder="请输入你要访谈的职业"
+                                    @change="byKeyword"
+                            >
+                                <template #suffix>
+                                    <span style="font-size: 38px;color: #444040;margin-left: 37px;">
+                                      X
+                                    </span>
+                                </template>
+                            </el-input>
+                            <div>
+                                开始查询
+                            </div>
+<!--                            <img @click="search" style="z-index:10" src="@/assets/images/environment/search-btn.png">-->
+                        </div>
+ <!--                       <div class="result-box">
+                            <div class="two-page-result">
+                                <div v-for="(item,index) in universityList"
+                                     :class="[item.selected?'item-result-box-active':'item-result-box']"
+                                     @click="toDetail(item)">
+                                    <div v-html="item.name"></div>
+                                </div>
+                            </div>
+                        </div>-->
 
+                    </div>
+                    <div style="overflow: auto;height: 720px;margin-top: 16px">
+                        <div class="hot-search">
+                            <div class="title">热门搜索：</div>
+                            <div style="display: flex;flex-wrap:wrap;
+                        margin-top: 11px;margin-left: 119px;margin-right: 91px">
+                                <div class="search-item">计算机软件工程技术人员</div>
+                                <div class="search-item">教师</div>
+                                <div class="search-item">心理咨询师</div>
+                                <div class="search-item">实施运维工程师</div>
+                                <div class="search-item">计算机软件工程技术人员</div>
+                                <div class="search-item">计算机软件工程技术人员</div>
+                                <div class="search-item">计算机软件工程技术人员</div>
+                                <div class="search-item">计算机软件工程技术人员</div>
+                                <div class="search-item">计算机软件工程技术人员</div>
+                                <div class="search-item">教师</div>
+                                <div class="search-item">心理咨询师</div>
+                                <div class="search-item">实施运维工程师</div>
+                                <div class="search-item">计算机软件工程技术人员</div>
+                                <div class="search-item">计算机软件工程技术人员</div>
+                                <div class="search-item">计算机软件工程技术人员</div>
+                                <div class="search-item">计算机软件工程技术人员</div>
+                            </div>
+                        </div>
+                        <div class="hot-search">
+                            <div class="title">历史查询：</div>
+                            <div style="display: flex;flex-wrap:wrap;
+                        margin-top: 11px;margin-left: 119px;margin-right: 91px">
+                                <div class="search-item">计算机软件工程技术人员</div>
+                                <div class="search-item">教师</div>
+                                <div class="search-item">心理咨询师</div>
+                                <div class="search-item">实施运维工程师</div>
+                                <div class="search-item">计算机软件工程技术人员</div>
+                                <div class="search-item">计算机软件工程技术人员</div>
+                                <div class="search-item">计算机软件工程技术人员</div>
+                                <div class="search-item">计算机软件工程技术人员</div>
+                                <div class="search-item">教师</div>
+                                <div class="search-item">心理咨询师</div>
+                                <div class="search-item">实施运维工程师</div>
+                                <div class="search-item">计算机软件工程技术人员</div>
+                                <div class="search-item">计算机软件工程技术人员</div>
+                                <div class="search-item">计算机软件工程技术人员</div>
+                                <div class="search-item">计算机软件工程技术人员</div>
+                            </div>
+                        </div>
+                    </div>
+
+                </div>
                 <drag_component></drag_component>
             </div>
         </div>
@@ -12,14 +89,24 @@
 </template>
 
 <script setup>
-    import {onMounted} from "vue";
+    import {onMounted, ref} from "vue";
     import headComponent from '@/views/xjc-integratedmachine/components/head_component.vue'
     import Drag_component from "@/views/xjc-integratedmachine/components/drag_component.vue";
     const headinfo = ref({})
 
+    const form = ref({
+        areaid: null,
+        areaname: null,
+        educationlevel: null,
+        educationlevelName: null,
+        characteristic: null,
+        characteristicName: null,
+        name: null
+    })
+
     function setHeadinfo(){
         headinfo.value = {
-            title: '生涯唤醒学习系统',
+            title: 'AI生涯访谈',
             user: {
                 avatar: '头像路径',
                 nickName: '张三'
@@ -39,7 +126,7 @@
         margin: 0;
         padding: 0;
     }
-    .development_stage{
+    .ai_career_interview{
         background: url('@/assets/images/login/login-home-background.png') no-repeat;
         background-size: 1920px 1080px;
         z-index:10;
@@ -60,31 +147,156 @@
             margin: 13px auto 0;
             padding-top: 25px;
             position: relative;
-            .text-info{
-                font-weight: bold;
-                font-size: 32px;
-                color: #333333;
-                line-height: 52px;
-                padding: 0 150px;
+
+        }
+
+    }
+
+
+    .two-page {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .two-page-search {
+            display: flex;
+
+            margin-top: 57px;
+
+            ::v-deep .el-input__inner {
+                font-size: 24px;
+                margin-left: 34px;
+            }
+
+            ::v-deep .el-input__suffix {
+                font-size: 100px;
+                width: 100px;
+                height: 100px;
+
+            }
+
+            ::v-deep .el-input__wrapper {
+                background: #E2E2E2;
+                box-shadow: none;
+                height: 84px;
+                width: 1484px;
             }
-            .title{
-                font-weight: bold;
-                font-size: 30px;
-                color: #333333;
-                line-height: 52px;
-                margin-top: 10px;
-                padding: 0 150px;
+            div{
+                width: 170px;
+                height: 84px;
+                background: linear-gradient( 180deg, #73EE71 0%, #0ACB63 100%);
+                border-radius: 0px 5px 5px 0px;
+
+                font-weight: 400;
+                font-size: 24px;
+                color: #FFFFFF;
+                display: flex;
+                align-items: center;
+                justify-content: center;
             }
+        }
+
+        .result-box {
+            width: 1484px;
+            height: 750px;
+            overflow: auto;
+
+            .two-page-result {
+                display: flex;
+                flex-wrap: wrap;
+                justify-content: space-between;
+                align-items: center;
 
-            .answer{
-                font-size: 30px;
-                color: #333333;
-                line-height: 52px;
-                text-indent: 2em;
-                padding: 0 150px;
+                .item-result-box-active {
+                    min-width: 320px;
+                    height: 92px;
+                    background: linear-gradient(180deg, #B6FFEF 0%, #C5EEFF 100%);
+                    box-shadow: inset 0px -2px 7px 0px #1E410E;
+                    border-radius: 5px 5px 5px 5px;
+                    border: 1px solid #A2F57F;
+                    font-weight: 400;
+                    font-size: 30px;
+                    color: #0DE6A1;
+                    line-height: 90px;
+                    text-align: center;
+                    margin-left: 50px;
+                    margin-right: 50px;
+                    margin-top: 32px;
+                    padding-left: 20px;
+                    padding-right: 20px;
+                }
+
+                .item-result-box {
+                    min-width: 320px;
+                    height: 92px;
+                    background: #E0EEF4;
+                    border-radius: 5px 5px 5px 5px;
+                    font-weight: 400;
+                    font-size: 30px;
+                    color: #000000;
+                    line-height: 90px;
+                    text-align: center;
+                    margin-left: 50px;
+                    margin-right: 50px;
+                    margin-top: 32px;
+                    padding-left: 20px;
+                    padding-right: 20px;
+                }
+
+                .item-result-box:hover {
+                    min-width: 320px;
+                    height: 92px;
+                    background: linear-gradient(180deg, #B6FFEF 0%, #C5EEFF 100%);
+                    box-shadow: inset 0px -2px 7px 0px #1E410E;
+                    border-radius: 5px 5px 5px 5px;
+                    border: 1px solid #A2F57F;
+                    font-weight: 400;
+                    font-size: 30px;
+                    color: #000000;
+                    line-height: 90px;
+                    text-align: center;
+                    margin-left: 50px;
+                    margin-top: 32px;
+                    padding-left: 20px;
+                    padding-right: 20px;
+                }
             }
         }
 
     }
 
+    .hot-search {
+        .title{
+            height: 52px;
+            /*margin-top: 16px;*/
+            margin-left: 123px;
+            font-weight: bold;
+            font-size: 24px;
+            color: #333333;
+            line-height: 52px;
+            letter-spacing: 3px;
+            text-align: left;
+            font-style: normal;
+            text-transform: none;
+
+        }
+    }
+
+    .search-item{
+        height: 80px;
+        border-radius: 5px;
+        border: 1px solid #B3B3B3;
+        margin-right: 26px;
+        margin-bottom: 26px;
+        padding: 0 44px;
+        font-weight: 400;
+        font-size: 24px;
+        color: #333333;
+        display: flex;
+        align-items: center;
+        letter-spacing: 3px;
+        text-align: left;
+        font-style: normal;
+        text-transform: none;
+    }
 </style>