| | |
| | | <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"> |
| | |
| | | <img src="../assets/images/fujian1.png" alt="" /> |
| | | </div> |
| | | <div class="select-item"> |
| | | <img src="../assets/images/shangchuan2.png" @click="handleChat" alt="" /> |
| | | <img @click="sendMsg()" src="../assets/images/shangchuan2.png" alt="" /> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | </div> |
| | | </template> |
| | | <script lang="ts" setup> |
| | | import { ref } from 'vue' |
| | | import { useRouter } from 'vue-router' |
| | | import { ref } from 'vue' |
| | | const inputValue = ref('') |
| | | |
| | | const router = useRouter() |
| | | const inputValue = ref('') |
| | | const sendMsg = () => { |
| | | |
| | | } |
| | | // import { ref } from 'vue' |
| | | // import { useRouter } from 'vue-router' |
| | | |
| | | const handleChat = () => { |
| | | router.push('/chat') |
| | | } |
| | | // 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> |