Browse Source

[feat][ai生涯访谈][聊天静态页面]

hizhangling 3 days ago
parent
commit
956038e01e

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

@@ -4,8 +4,8 @@
         <div class="page-content">
             <div class="page-box">
                 <div>
-                    <div class="two-page">
-                        <div class="two-page-search">
+                    <div class="input-component">
+                        <div class="input-search">
                             <el-input
                                     v-model="form.name"
                                     style="width: 1484px;height: 84px"
@@ -194,12 +194,12 @@
     }
 
 
-    .two-page {
+    .input-component {
         display: flex;
         flex-direction: column;
         align-items: center;
 
-        .two-page-search {
+        .input-search {
             display: flex;
 
             margin-top: 57px;

+ 64 - 8
src/views/xjc-integratedmachine/environment/ai_interview/ai_career_interview_chat.vue

@@ -83,14 +83,23 @@
                     </div>
                 </div>
             </div>
-            <div class="input-container">
-                <el-input
-                        v-model="inputMessage"
-                        type="textarea"
-                        placeholder="请输入消息"
-                        @keyup.enter="sendMessage"
-                ></el-input>
-                <el-button @click="sendMessage" :disabled="isSending" type="primary">发送</el-button>
+            <div class="input-component">
+                <div class="input-search">
+                    <el-input
+                            v-model="inputMessage"
+                            style="width: 1220px;height: 84px"
+                            type="textarea"
+                            placeholder="请输入消息"
+                            @keyup.enter="sendMessage"
+                    >
+                        <template #suffix>
+                                    <span style="font-size: 38px;color: #444040;margin-left: 37px;">
+                                      X
+                                    </span>
+                        </template>
+                    </el-input>
+                    <div @click="sendMessage" :disabled="isSending" type="primary">发送</div>
+                </div>
             </div>
         </div>
     </div>
@@ -908,4 +917,51 @@
             opacity: 1;
         }
     }
+
+    /*输入框*/
+
+    .input-component {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .input-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: 1220px;
+            }
+            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;
+            }
+        }
+    }
+
 </style>