From 294863a578999bbc237090710f17364c27555b56 Mon Sep 17 00:00:00 2001
From: YM <479443481@qq.com>
Date: 星期三, 23 四月 2025 19:47:31 +0800
Subject: [PATCH] 1
---
src/views/Start.vue | 713 ++++++++++++++++++++++++++++++----------------------------
1 files changed, 371 insertions(+), 342 deletions(-)
diff --git a/src/views/Start.vue b/src/views/Start.vue
index 33ba4d7..abd9c6c 100644
--- a/src/views/Start.vue
+++ b/src/views/Start.vue
@@ -52,12 +52,8 @@
<img src="../assets/images/tianjia2.png" alt="" />
</div>
<div class="chat-text">
- <el-input
- type="textarea"
- :autosize="{ minRows: 2, maxRows: 10 }"
- placeholder="璇疯緭鍏ユ偍鐨勯棶棰�"
- v-model="inputValue"
- />
+ <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 10 }" placeholder="璇疯緭鍏ユ偍鐨勯棶棰�"
+ v-model="inputValue" />
</div>
<div class="select">
<div class="select-left">
@@ -75,7 +71,7 @@
<img src="../assets/images/fujian1.png" alt="" />
</div>
<div class="select-item">
- <img src="../assets/images/shangchuan2.png" alt="" />
+ <img @click="sendMsg()" src="../assets/images/shangchuan2.png" alt="" />
</div>
</div>
</div>
@@ -84,370 +80,403 @@
</div>
</template>
<script lang="ts" setup>
-import { ref } from 'vue'
-const inputValue = ref('')
+ import { ref, inject } from 'vue'
+ const request = inject('request')
+ const inputValue = ref('')
+
+ const sendMsg = () => {
+ console.log(inputValue.value);
+ request({
+ url: '/chat-messages',
+ method: 'post',
+ data: {
+ query: inputValue.value,
+ inputs: {},
+ response_mode: "blocking",
+ user: "test",
+ files: []
+ }
+ }).then(res => {
+ console.log(res, "res");
+ })
+ }
+ // import { ref } from 'vue'
+ // import { useRouter } from 'vue-router'
+
+ // const router = useRouter()
+ // const inputValue = ref('')
+
+ // const handleChat = () => {
+ // router.push('/chat')
+ // }
</script>
<style lang="less" scoped>
-@media screen and (max-width: 750px) {
- .chat-box {
- width: 100%;
- height: auto;
- background-image: url('@/assets/images/beijing2.png');
- background-position: center;
- background-size: cover;
- .chat-box-content {
+ @media screen and (max-width: 750px) {
+ .chat-box {
width: 100%;
- display: flex;
- flex-direction: column;
- justify-content: flex-start;
- align-items: flex-start;
+ height: auto;
+ background-image: url('@/assets/images/beijing2.png');
+ background-position: center;
+ background-size: cover;
- .chat-date {
- width: 100%;
- text-align: center;
- margin-bottom: 30px;
- }
-
- .chat-send {
+ .chat-box-content {
width: 100%;
display: flex;
- justify-content: flex-end;
- margin-bottom: 20px;
-
- .chat-send-info {
- width: 263px;
- height: 40px;
- background: #af8b56;
- border-radius: 20px;
- line-height: 40px;
- padding: 0 20px;
- color: #fff;
- }
- }
-
- .chat-back-info {
- margin-bottom: 20px;
- display: flex;
+ flex-direction: column;
justify-content: flex-start;
+ align-items: flex-start;
- .back-avator {
- margin-right: 10px;
-
- img {
- width: 40px;
- }
+ .chat-date {
+ width: 100%;
+ text-align: center;
+ margin-bottom: 30px;
}
- .base-book-box {
- width: 300px;
- padding: 20px;
- box-sizing: border-box;
- background-color: #fff;
- border-radius: 20px;
- }
- }
-
- .back-item {
- width: 300px;
- background: #ffffff;
- border-radius: 20px;
- margin-left: 50px;
- margin-bottom: 20px;
-
- .back-item-title {
- width: 80%;
- height: 60px;
- display: flex;
- align-items: center;
- padding: 0 10px;
- margin: auto;
- border-bottom: 1px solid #e9d8bf;
- }
-
- img {
- margin-right: 10px;
- }
-
- ul {
- padding: 0 25px;
- li {
- list-style: none;
- margin: 10px 0 10px 0;
- display: flex;
- justify-content: flex-start;
- align-items: center;
- }
- }
-
- .chat-change {
- display: flex;
- justify-content: flex-end;
- align-items: center;
- padding: 10px 20px;
- color: #d2a25b;
-
- img {
- cursor: pointer;
- }
- }
- }
-
- .chat-footer {
- width: 300px;
- background-color: #fff;
- border-radius: 20px;
- padding: 20px;
- box-sizing: border-box;
- margin-left: 50px;
- margin-bottom: 20px;
-
- .icon-list img {
- margin-right: 10px;
- cursor: pointer;
- }
-
- ::v-deep(.chat-text) {
- margin-bottom: 10px;
- .el-textarea__inner {
- border: none !important;
- outline: none !important;
- box-shadow: none !important;
- background-color: transparent !important;
- resize: none !important;
- }
- }
-
- .select {
+ .chat-send {
width: 100%;
display: flex;
- align-items: center;
- justify-content: space-between;
+ justify-content: flex-end;
+ margin-bottom: 20px;
- .select-left,
- .select-right {
- display: flex;
- align-items: center;
- justify-content: flex-start;
-
- .select-item {
- display: flex;
- align-items: center;
- box-sizing: border-box;
- border: 1px solid #e9d8bf;
- border-radius: 15px;
- font-size: 12px;
- font-family:
- Microsoft YaHei,
- Microsoft YaHei-Regular;
- font-weight: 400;
- color: #e1c49a;
-
- img {
- margin-right: 5px;
- cursor: pointer;
- }
- }
- }
-
- .select-left {
- .select-item {
- min-width: 70px;
- padding: 5px 8px;
- }
- }
-
- .select-right {
- display: flex;
- align-items: center;
- justify-content: flex-end;
-
- .select-item {
- border: 0;
- }
- }
- }
- }
- }
- }
-}
-@media screen and (min-width: 750px) {
- .chat-box {
- width: 100%;
- height: 100%;
- background-image: url('@/assets/images/beijing2.png');
- background-size: 100% 100%;
- background-position: center;
- background-repeat: no-repeat;
- display: flex;
- justify-content: center;
- align-items: center;
- .chat-box-content {
- width: 1200px;
- display: flex;
- flex-direction: column;
- justify-content: flex-start;
- align-items: flex-start;
-
- .chat-date {
- width: 100%;
- text-align: center;
- margin-bottom: 30px;
- }
-
- .chat-send {
- width: 100%;
- display: flex;
- justify-content: flex-end;
- margin-bottom: 20px;
-
- .chat-send-info {
- width: 263px;
- height: 40px;
- background: #af8b56;
- border-radius: 20px;
- line-height: 40px;
- padding: 0 20px;
- color: #fff;
- }
- }
-
- .chat-back-info {
- margin-bottom: 20px;
- display: flex;
- justify-content: flex-start;
-
- .back-avator {
- margin-right: 37px;
-
- img {
- width: 60px;
+ .chat-send-info {
+ width: 263px;
+ height: 40px;
+ background: #af8b56;
+ border-radius: 20px;
+ line-height: 40px;
+ padding: 0 20px;
+ color: #fff;
}
}
- .base-book-box {
- width: 800px;
- padding: 20px 47px;
- box-sizing: border-box;
- background-color: #fff;
- border-radius: 20px;
- }
- }
-
- .back-item {
- width: 349px;
- height: 391px;
- background: #ffffff;
- border-radius: 20px;
- margin-left: 100px;
- margin-bottom: 20px;
-
- .back-item-title {
- width: 80%;
- height: 60px;
- display: flex;
- align-items: center;
- padding: 0 10px;
- margin: auto;
- border-bottom: 1px solid #e9d8bf;
- }
-
- img {
- margin-right: 10px;
- }
-
- ul li {
- list-style: none;
- margin: 20px 0 20px 0;
+ .chat-back-info {
+ margin-bottom: 20px;
display: flex;
justify-content: flex-start;
- align-items: center;
- }
- .chat-change {
- display: flex;
- justify-content: flex-end;
- align-items: center;
- padding: 0 20px;
- color: #d2a25b;
+ .back-avator {
+ margin-right: 10px;
- img {
- cursor: pointer;
- }
- }
- }
-
- .chat-footer {
- width: 800px;
- height: 170px;
- background-color: #fff;
- border-radius: 20px;
- padding: 20px;
- box-sizing: border-box;
- margin-left: 103px;
-
- .icon-list img {
- margin-right: 10px;
- cursor: pointer;
- }
-
- ::v-deep(.chat-text) {
- margin-bottom: 10px;
- .el-textarea__inner {
- border: none !important;
- outline: none !important;
- box-shadow: none !important;
- background-color: transparent !important;
- resize: none !important;
- }
- }
-
- .select {
- width: 100%;
- display: flex;
- align-items: center;
- justify-content: space-between;
-
- .select-left,
- .select-right {
- flex: 1;
- display: flex;
- align-items: center;
- justify-content: flex-start;
-
- .select-item {
- display: flex;
- align-items: center;
- padding: 2px 10px;
- box-sizing: border-box;
- border: 1px solid #e9d8bf;
- border-radius: 15px;
- margin-right: 10px;
- font-size: 14px;
- font-family:
- Microsoft YaHei,
- Microsoft YaHei-Regular;
- font-weight: 400;
- color: #e1c49a;
-
- img {
- margin-right: 10px;
- cursor: pointer;
- }
+ img {
+ width: 40px;
}
}
- .select-right {
+ .base-book-box {
+ width: 300px;
+ padding: 20px;
+ box-sizing: border-box;
+ background-color: #fff;
+ border-radius: 20px;
+ }
+ }
+
+ .back-item {
+ width: 300px;
+ background: #ffffff;
+ border-radius: 20px;
+ margin-left: 50px;
+ margin-bottom: 20px;
+
+ .back-item-title {
+ width: 80%;
+ height: 60px;
display: flex;
align-items: center;
- justify-content: flex-end;
+ padding: 0 10px;
+ margin: auto;
+ border-bottom: 1px solid #e9d8bf;
+ }
- .select-item {
- border: 0;
+ img {
+ margin-right: 10px;
+ }
+
+ ul {
+ padding: 0 25px;
+
+ li {
+ list-style: none;
+ margin: 10px 0 10px 0;
+ display: flex;
+ justify-content: flex-start;
+ align-items: center;
+ }
+ }
+
+ .chat-change {
+ display: flex;
+ justify-content: flex-end;
+ align-items: center;
+ padding: 10px 20px;
+ color: #d2a25b;
+
+ img {
+ cursor: pointer;
+ }
+ }
+ }
+
+ .chat-footer {
+ width: 300px;
+ background-color: #fff;
+ border-radius: 20px;
+ padding: 20px;
+ box-sizing: border-box;
+ margin-left: 50px;
+ margin-bottom: 20px;
+
+ .icon-list img {
+ margin-right: 10px;
+ cursor: pointer;
+ }
+
+ ::v-deep(.chat-text) {
+ margin-bottom: 10px;
+
+ .el-textarea__inner {
+ border: none !important;
+ outline: none !important;
+ box-shadow: none !important;
+ background-color: transparent !important;
+ resize: none !important;
+ }
+ }
+
+ .select {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+
+ .select-left,
+ .select-right {
+ display: flex;
+ align-items: center;
+ justify-content: flex-start;
+
+ .select-item {
+ display: flex;
+ align-items: center;
+ box-sizing: border-box;
+ border: 1px solid #e9d8bf;
+ border-radius: 15px;
+ font-size: 12px;
+ font-family:
+ Microsoft YaHei,
+ Microsoft YaHei-Regular;
+ font-weight: 400;
+ color: #e1c49a;
+
+ img {
+ margin-right: 5px;
+ cursor: pointer;
+ }
+ }
+ }
+
+ .select-left {
+ .select-item {
+ min-width: 70px;
+ padding: 5px 8px;
+ }
+ }
+
+ .select-right {
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+
+ .select-item {
+ border: 0;
+ }
}
}
}
}
}
}
-}
-</style>
+
+ @media screen and (min-width: 750px) {
+ .chat-box {
+ width: 100%;
+ height: 100%;
+ background-image: url('@/assets/images/beijing2.png');
+ background-size: 100% 100%;
+ background-position: center;
+ background-repeat: no-repeat;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ .chat-box-content {
+ width: 1200px;
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+ align-items: flex-start;
+
+ .chat-date {
+ width: 100%;
+ text-align: center;
+ margin-bottom: 30px;
+ }
+
+ .chat-send {
+ width: 100%;
+ display: flex;
+ justify-content: flex-end;
+ margin-bottom: 20px;
+
+ .chat-send-info {
+ width: 263px;
+ height: 40px;
+ background: #af8b56;
+ border-radius: 20px;
+ line-height: 40px;
+ padding: 0 20px;
+ color: #fff;
+ }
+ }
+
+ .chat-back-info {
+ margin-bottom: 20px;
+ display: flex;
+ justify-content: flex-start;
+
+ .back-avator {
+ margin-right: 37px;
+
+ img {
+ width: 60px;
+ }
+ }
+
+ .base-book-box {
+ width: 800px;
+ padding: 20px 47px;
+ box-sizing: border-box;
+ background-color: #fff;
+ border-radius: 20px;
+ }
+ }
+
+ .back-item {
+ width: 349px;
+ height: 391px;
+ background: #ffffff;
+ border-radius: 20px;
+ margin-left: 100px;
+ margin-bottom: 20px;
+
+ .back-item-title {
+ width: 80%;
+ height: 60px;
+ display: flex;
+ align-items: center;
+ padding: 0 10px;
+ margin: auto;
+ border-bottom: 1px solid #e9d8bf;
+ }
+
+ img {
+ margin-right: 10px;
+ }
+
+ ul li {
+ list-style: none;
+ margin: 20px 0 20px 0;
+ display: flex;
+ justify-content: flex-start;
+ align-items: center;
+ }
+
+ .chat-change {
+ display: flex;
+ justify-content: flex-end;
+ align-items: center;
+ padding: 0 20px;
+ color: #d2a25b;
+
+ img {
+ cursor: pointer;
+ }
+ }
+ }
+
+ .chat-footer {
+ width: 800px;
+ height: 170px;
+ background-color: #fff;
+ border-radius: 20px;
+ padding: 20px;
+ box-sizing: border-box;
+ margin-left: 103px;
+
+ .icon-list img {
+ margin-right: 10px;
+ cursor: pointer;
+ }
+
+ ::v-deep(.chat-text) {
+ margin-bottom: 10px;
+
+ .el-textarea__inner {
+ border: none !important;
+ outline: none !important;
+ box-shadow: none !important;
+ background-color: transparent !important;
+ resize: none !important;
+ }
+ }
+
+ .select {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+
+ .select-left,
+ .select-right {
+ flex: 1;
+ display: flex;
+ align-items: center;
+ justify-content: flex-start;
+
+ .select-item {
+ display: flex;
+ align-items: center;
+ padding: 2px 10px;
+ box-sizing: border-box;
+ border: 1px solid #e9d8bf;
+ border-radius: 15px;
+ margin-right: 10px;
+ font-size: 14px;
+ font-family:
+ Microsoft YaHei,
+ Microsoft YaHei-Regular;
+ font-weight: 400;
+ color: #e1c49a;
+
+ img {
+ margin-right: 10px;
+ cursor: pointer;
+ }
+ }
+ }
+
+ .select-right {
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+
+ .select-item {
+ border: 0;
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+</style>
\ No newline at end of file
--
Gitblit v1.9.1