Feat(云灵AI):对话接口对接完成

api/chat/index.js

@@ -7,3 +7,11 @@ export function getSseConfigV1(data) {
 export function getCompletions(params) {
   return request.get('/v1/chat/sse/completions', params, { login: true })
 }
+
+export function deleteChatItemByConversationId(id) {
+  return request.delete('/v1/chat/message/' + id, {}, { login: true })
+}
+
+export function getChatList(params) {
+  return request.get('/v1/chat', params, { login: true })
+}

api/http.js

@@ -0,0 +1,17 @@
+import request from '@/utils/request'
+
+export function getAction(url, params) {
+  return request.get(url, params)
+}
+
+export function postAction(url, data) {
+  return request.post(url, data)
+}
+
+export function putAction(url, data) {
+  return request.put(url, data)
+}
+
+export function deleteAction(url, data) {
+  return request.delete(url, data)
+}

api/public.js

@@ -217,3 +217,8 @@ export function pushSystemStatic(data) {
 export function getAiSystemInfoSetting() {
     return request.get('/ai/systemInfo', {}, { login: false })
 }
+
+// 获取AI系统预设话题列表
+export function getAiSystemInfoTopic() {
+    return request.get('/ai/systemTopic', {}, { login: false })
+}

assets/css/aiChat.less

@@ -11,6 +11,10 @@ page {
 	position: relative;
 	min-height: 100vh;
   background-color: #fff;
+	background-size: 100% 100vh;
+	background-image: url(https://wxapp.xdd618.com/api/file/pic/aiChat/bg.png);
+	background-repeat: no-repeat;
+	background-attachment: fixed;
 	.fix-tabbar-header {
 		position: fixed;
 		top: 0;
@@ -82,7 +86,6 @@ page {
     z-index: 2;
 		min-height: 100vh;
 		box-sizing: border-box;
-		background: linear-gradient(180deg, #FFF0DC 0%, rgba(255,234,216,0.67) 57%, rgba(255,255,255,0) 100%);
   }
 	.page-to-bottom {
 		position: fixed;
@@ -92,11 +95,32 @@ page {
 		z-index: 8;
 		display: flex;
 		align-items: center;
-		justify-content: center;
+		justify-content: flex-end;
+		padding: 0 24rpx;
+		.new-chat {
+			display: flex;
+			align-items: center;
+			height: 68rpx;
+			padding: 0 24rpx;
+			border-radius: 40rpx;
+			line-height: 68rpx;
+			font-size: 30rpx;
+			background-color: #fff;
+			box-shadow: 0rpx 6rpx 12rpx rgba(0,0,0,0.16);
+			.btn-icon {
+				display: block;
+				width: 40rpx;
+				height: 40rrpx;
+				margin: 0 8rpx 0 0;
+			}
+		}
 		.icon {
 			display: block;
 			width: 68rpx;
 			height: 68rpx;
+			margin: 0 0 0 24rpx;
+			border-radius: 50%;
+			box-shadow: 0rpx 6rpx 12rpx rgba(0,0,0,0.16);
 		}
 	}
 	.fix-page-bottom {
@@ -106,8 +130,6 @@ page {
 		right: 0;
 		z-index: 9;
 		padding: 24rpx 24rpx 48rpx 24rpx;
-		background-color: #fff;
-		box-shadow: 0rpx -20rpx 30rpx rgba(176,186,206,0.16);
 		transition: all 0.2s;
 		&.focus {
 			transform: translateY(-48rpx);
@@ -116,11 +138,34 @@ page {
 			position: relative;
 			z-index: 2;
 			min-height: 100rpx;
+			.history-wrap {
+				width: 98rpx;
+				height: 100rpx;
+				border-radius: 30rpx;
+				text-align: center;
+				line-height: 100rpx;
+				font-size: 30rpx;
+				color: #333;
+				background-color: #fff;
+				box-shadow: 0rpx 6rpx 20rpx rgba(19,27,65,0.16);
+			}
+			.input-container {
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				height: 100rpx;
+				width: calc(100% - 122rpx);
+				padding: 6rpx 6rpx 6rpx 24rpx;
+				border-radius: 30rpx;
+				box-sizing: border-box;
+				background-color: #fff;
+				box-shadow: 0rpx 6rpx 20rpx rgba(19,27,65,0.16);
+			}
 			.input-model {
 				.icon {
 					display: block;
-					width: 68rpx;
+					width: 40rpx;
-					height: 68rpx;
+					height: 40rpx;
 				}
 			}
 			.input-wrap {
@@ -130,21 +175,16 @@ page {
 					position: relative;
 					z-index: 5;
 					width: 100%;
-					max-height: 50vh;
+					height: 88rpx;
-					padding: 15rpx;
-					margin: 0 24rpx;
 					border: 0;
 					box-sizing: border-box;
-					border-radius: 20rpx;
+					line-height: 88rpx;
-					line-height: 50rpx;
 					color: #333;
 					font-size: 30rpx;
-					overflow-y: auto;
-					box-shadow: 0rpx 6rpx 20rpx rgba(19,27,65,0.16);
 				}
 				.placeholder-txt {
 					position: absolute;
-					left: 40rpx;
+					left: 0;
 					top: 50%;
 					z-index: 2;
 					color: #999;
@@ -155,8 +195,8 @@ page {
 			.send-btn {
 				.icon {
 					display: block;
-					width: 100rpx;
+					width: 88rpx;
-					height: 100rpx;
+					height: 88rpx;
 				}
 			}
 			.sound-input-wrap {
@@ -374,30 +414,32 @@ page {
 				}
 				.suggestion-list {
 					.item {
-						display: inline-flex;
+						display: flex;
-						min-height: 44rpx;
+						width: 100%;
-						padding: 12rpx 12rpx 12rpx 18rpx;
+						.item-cont {
-						border-radius: 30rpx;
-						margin: 24rpx 24rpx 0 0;
-						font-size: 26rpx;
-						color: #333;
-						line-height: 38rpx;
-						overflow: hidden;
-						text-overflow: ellipsis;
-						background-color: #fff;
-						.label {
 							display: flex;
-							justify-content: center;
 							align-items: center;
-							width: 44rpx;
+							justify-content: space-between;
 							height: 44rpx;
-							margin: 0 16rpx 0 0;
+							padding: 12rpx 20rpx;
-							border-radius: 16rpx;
+							border-radius: 30rpx;
-							background: rgba(249,248,246,0.39);
+							margin: 24rpx 0 0 0;
+							font-size: 26rpx;
+							color: #333;
+							line-height: 44rpx;
+							background-color: #fff;
+							box-shadow: 0rpx 6rpx 12rpx rgba(0,0,0,0.1);
+							.txt {
+								flex: 1;
+								max-width: calc(100% - 80rpx);
+								overflow: hidden;
+								text-overflow: ellipsis;
+								white-space: nowrap;
+							}
 							.pic {
 								display: block;
-								width: 28rpx;
+								width: 30rpx;
-								height: 28rpx;
+								height: 30rpx;
 							}
 						}
 					}
@@ -414,7 +456,7 @@ page {
 					color: #fff;
 					font-size: 30rpx;
 					line-height: 48rpx;
-					background: linear-gradient(270deg, #FA9108 0%, #FFC25C 100%);
+					background: #3D4CF1;
 					box-shadow: 0rpx 6rpx 12rpx rgba(0,0,0,0.16);
 					.copy-btn {
 						display: inline-block;
@@ -429,12 +471,12 @@ page {
 			}
 			.bottom-btns {
 				display: flex;
-				justify-content: flex-end;
+				justify-content: flex-start;
 				padding: 20rpx 0 0 0;
 				.item {
 					display: flex;
 					align-items: center;
-					margin: 0 0 0 48rpx;
+					margin: 0 48rpx 0 0;
 					padding: 0;
 					border: 0;
 					border-radius: 0;
@@ -592,13 +634,13 @@ page {
 	word-break: normal;
 	white-space: initial;
   .cursor {
-    color: #FA9108;
+    color: #3D4CF1;
 		opacity: 0;
   }
 }
 .show-cursor {
   .cursor {
-    color: #FA9108;
+    color: #3D4CF1;
 		opacity: 1;
 		animation: blinking 1s infinite;
   }
@@ -633,7 +675,7 @@ page {
   border-radius: 50%;
 }
 .loader::before {
-  border-color: #FA9108 #0000;
+  border-color: #3D4CF1 #0000;
   animation: inherit; 
   animation-duration: .5s;
   animation-direction: reverse;
@@ -661,7 +703,7 @@ page {
 		width: 8px;
 		margin: 0 24rpx;
 		border-radius: 6px;
-		background-color: #FA9108;
+		background-color: #3D4CF1;
 	}
 	.one {
 		height: 86rpx;

components/aiChat/bottomSend.vue

@@ -14,55 +14,61 @@
       <view class="item six" />
       <view class="item seven" />
     </view>
-    <view class="bottom-body flex-center-between">
+    <view v-if="inputModel === 'input'" class="bottom-body flex-center-between">
-      <!-- 输入模式切换 -->
+      <view class="history-wrap" @click="historyViewHandle">
-      <view
+        历史
-        class="input-model"
-        @click="toggleInputModel"
-      >
-        输入模式
       </view>
-      <!-- 输入框 -->
+      <view class="input-container">
-      <view
+        <!-- 输入模式切换 -->
-        v-if="inputModel === 'input'"
-        class="input-wrap flex-center-between"
-      >
-        <input
-          v-model.trim="prompt"
-          :show-confirm-bar="false"
-          :disabled="loading"
-          :maxlength="-1"
-          class="inp"
-          @confirm="sendHandle"
-          @focus="promptInputFocusHandle"
-          @blur="promptInputBlurHandle"
-        />
-        <view v-if="!prompt && !inputOnFocus" class="placeholder-txt">请输入关键字...</view>
-      </view>
-      <view
-        v-if="inputModel === 'input'"
-        class="send-btn"
-      >
         <view
+          class="input-model"
+          @click="toggleInputModel"
+        >
+          <image
+            :src="webUrl + '/aiChat/microphone.png'"
+            class="icon"
+            mode="widthFix"
+          />
+        </view>
+        <!-- 输入框 -->
+        <view class="input-wrap flex-center-between">
+          <input
+            v-model.trim="prompt"
+            :show-confirm-bar="false"
+            :disabled="loading"
+            :maxlength="-1"
+            class="inp"
+            @confirm="sendHandle"
+            @focus="promptInputFocusHandle"
+            @blur="promptInputBlurHandle"
+          />
+          <view v-if="!prompt && !inputOnFocus" class="placeholder-txt">发消息...</view>
+        </view>
+        <view
+          class="send-btn"
           @click="sendHandle"
         >
-          发送
+          <image
+            :src="webUrl + '/aiChat/send.png'"
+            class="icon"
+            mode="widthFix"
+          />
         </view>
       </view>
-      <!-- 语音输入 -->
+    </view>
-      <view
+    <!-- 语音输入 -->
-        v-if="inputModel === 'sound'"
+    <view
-        class="sound-input-wrap"
+      v-if="inputModel === 'sound'"
-        @touchstart="startRecord"
+      class="sound-input-wrap"
-        @touchend="stopRecord"
+      @touchstart="startRecord"
-      >
+      @touchend="stopRecord"
-        <image
+    >
-          :src="webUrl + '/icon-20.png'"
+      <image
-          class="icon"
+        :src="webUrl + '/icon-20.png'"
-          mode="widthFix"
+        class="icon"
-        />
+        mode="widthFix"
-        按住说话
+      />
-      </view>
+      按住说话
     </view>
   </view>
 </template>
@@ -87,10 +93,10 @@ export default {
     return {
       token: cookie.get('login_status'),
       userInfo: cookie.get('userInfo'),
-      webUrl: this.$webUrl,
+      webUrl: this.$VUE_APP_RESOURCES_URL,
       // 输入模式:input-键盘，sound-语音
       inputModel: 'input',
-      prompt: '今天天气',
+      prompt: '',
       recordManager: null,
       // 录音权限是否开通
       recordPermission: false,
@@ -262,6 +268,9 @@ export default {
       this.$emit('send', { prompt: this.prompt })
       this.prompt = ''
       this.inputOnFocus = false
+    },
+    historyViewHandle() {
+      this.$emit('history')
     }
   }
 }

mixins/chatMixins.js

@@ -1,6 +1,7 @@
 import {
   getSseConfigV1,
-  getCompletions
+  getCompletions,
+  deleteChatItemByConversationId
 } from '@/api/chat/index'
 import { VUE_APP_API_URL } from '@/config'
 import settings from '@/config/baseSetting.js'
@@ -12,7 +13,8 @@ export const chatMixins = {
     return {
       token: cookie.get('login_status'),
       userInfo: cookie.get('userInfo'),
-      webUrl: this.$webUrl,
+      webUrl: this.$VUE_APP_RESOURCES_URL,
+      scrollData: {},
       scrollTop: 0,
       isScrollToBottom: false,
       // 状态栏高度
@@ -49,6 +51,7 @@ export const chatMixins = {
     }
   },
   onPageScroll(e) {
+    this.scrollData = e
     const scrollTop = e.scrollTop
     this.scrollTop = scrollTop
     const query = wx.createSelectorQuery().in(this)
@@ -77,8 +80,6 @@ export const chatMixins = {
         _this.statusBarHeight = statusBar
       }
     })
-    console.log(this.token)
-    console.log(this.userInfo)
     _this.createdCallbak()
   },
   methods: {
@@ -133,6 +134,13 @@ export const chatMixins = {
         init: 0
       })
     },
+    // 大家都在问
+    topicItemClickHandle(question) {
+      this.streamReq({
+        prompt: question,
+        init: 0
+      })
+    },
     streamReq(params) {
       const _this = this
       // 需要校验登录状态

pages/aiChat/components/historyList.vue

@@ -0,0 +1,156 @@
+<template>
+  <view
+    :class="{
+      'show': showLayer
+    }"
+    class="history-wrap"
+  >
+    <view class="layer" @click="closeLayer" />
+    <view
+      :style="{
+        'padding-top': statusBarHeight + 'px'
+      }"
+      class="history-container"
+    >
+      <view class="history-type">
+        <view class="title">
+          <view class="txt">30天内</view>
+          <image
+            :src="webUrl + '/aiChat/delete.png'"
+            class="icon"
+            mode="widthFix"
+          />
+        </view>
+        <view class="list-cont">
+          <view
+            v-for="(item, index) in list"
+            :key="index"
+            class="item"
+          >
+            <view class="item-txt one-t">
+              {{ item.title }}
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import {
+  getChatList
+} from '@/api/chat/index'
+export default {
+  name: 'AiHistoryList',
+  props: {
+    statusBarHeight: {
+      type: Number,
+      default: 0
+    }
+  },
+  data() {
+    return {
+      webUrl: this.$VUE_APP_RESOURCES_URL,
+      showLayer: false,
+      list: [],
+      moreList: []
+    }
+  },
+  methods: {
+    showView() {
+      this.showLayer = true
+      getChatList().then(res => {
+        const { success, data } = res
+        if (success) {
+          this.list = data['今天']
+          this.moreList = data['超过30天']
+        }
+      })
+    },
+    closeLayer() {
+      this.showLayer = false
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.history-wrap {
+  position: fixed;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1001;
+  transform: translateX(-100%);
+  opacity: 0;
+  transition: all 0.3s;
+  .layer {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 2;
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+  .history-container {
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    z-index: 5;
+    width: 75%;
+    padding: 40rpx;
+    box-sizing: border-box;
+    border-top-right-radius: 60rpx;
+    border-bottom-right-radius: 60rpx;
+    overflow-y: auto;
+    background-color: #fff;
+    .history-type + .history-type {
+      padding: 40rpx 0 0 0;
+    }
+    .history-type {
+      .title {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        .txt {
+          font-size: 34rpx;
+          line-height: 50rpx;
+        }
+        .icon {
+          display: block;
+          width: 40rpx;
+          height: 40rpx;
+        }
+      }
+      .list-cont {
+        padding: 24rpx 0 0 0;
+        .item + .item {
+          margin: 12rpx 0 0 0;
+        }
+        .item {
+          .item-txt {
+            display: inline-block;
+            max-width: 100%;
+            height: 60rpx;
+            padding: 0 24rpx;
+            box-sizing: border-box;
+            border-radius: 30rpx;
+            color: #333;
+            font-size: 28rpx;
+            line-height: 60rpx;
+            background-color: #F1F2FF;
+          }
+        }
+      }
+    }
+  }
+  &.show {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+</style>

pages/aiChat/index.vue

@@ -6,9 +6,10 @@
     <hx-navbar
       :back="true"
       :fixed="true"
-      color="#333"
       :statusBar="true"
-      transparent="hidden"
+      :pageScroll.sync="scrollData"
+      color="#333"
+      transparent="auto"
       barPlaceholder="hidden"
       title="云灵AI智能助手"
     />
@@ -19,6 +20,56 @@
       }"
       class="fix-tabbar-body"
     >
+      <block v-if="chatMessageListLength < 1">
+        <view class="home-focus-wrap">
+          <view class="focus-guide-wrap">
+            <view class="guide-left">
+              <image
+                :src="webUrl + '/aiChat/logo-01.gif'"
+                class="avatar"
+                mode="widthFix"
+              />
+            </view>
+            <view class="guide-right">
+              <view class="title">{{ settingInfo.helloMessageTitle }}</view>
+              <view class="content">{{ settingInfo.helloMessageContent }}</view>
+            </view>
+          </view>
+        </view>
+        <view class="topic-wrap">
+          <view class="title">
+            <image
+              :src="webUrl + '/aiChat/icon-01.png'"
+              class="icon"
+              mode="widthFix"
+            />
+            <view class="txt">#大家都在问</view>
+            <image
+              :src="webUrl + '/aiChat/icon-01.png'"
+              class="icon"
+              mode="widthFix"
+            />
+          </view>
+          <view class="list-wrap">
+            <view class="list-cont">
+              <view
+                v-for="(item, index) in topicList"
+                :key="index"
+                class="list-item"
+                @click="topicItemClickHandle(item.title)"
+              >
+                <image
+                  v-if="item.isHot"
+                  :src="webUrl + '/aiChat/hot.png'"
+                  class="icon"
+                  mode="widthFix"
+                />
+                {{ item.title }}
+              </view>
+            </view>
+          </view>
+        </view>
+      </block>
       <view class="chat-wrap">
         <view v-if="chatMessageListLength > 0" class="chat-list-wrap">
           <view
@@ -36,7 +87,7 @@
             <view v-if="item.type === -2" class="chat-message-body">
               <view class="avatar">
                 <image
-                  :src="'http://resource.xdd618.com/v1ppYx3WizxJ72a1af114c9931828888d959066fa3e7-20240314125834.png'"
+                  :src="webUrl + '/aiChat/avatar.png'"
                   class="chat-avatar"
                   mode="widthFix"
                 />
@@ -59,6 +110,44 @@
                       <div class="loader" />
                     </view>
                   </view>
+                  <view
+                    v-if="!item.showCursor && item.nodes && item.nodes.length && !item.isError"
+                    class="bottom-btns"
+                  >
+                    <!-- <button
+                      open-type="share"
+                      plain="true"
+                      class="item"
+                      @click="shareHandle"
+                    >
+                      <image
+                        :src="webUrl + '/icon-25.png'"
+                        class="icon"
+                        mode="widthFix"
+                      />
+                      分享
+                    </button> -->
+                    <view class="item" @click="copyContentHandle(item.content)">
+                      <image
+                        :src="webUrl + '/aiChat/icon-02.png'"
+                        class="icon"
+                        mode="widthFix"
+                      />
+                      复制
+                    </view>
+                    <view
+                      v-if="index === (chatMessageListLength - 1)"
+                      class="item"
+                      @click="regenerateHandle(item)"
+                    >
+                      <image
+                        :src="webUrl + '/aiChat/icon-04.png'"
+                        class="icon"
+                        mode="widthFix"
+                      />
+                      重新生成
+                    </view>
+                  </view>
                 </view>
               </view>
               <view
@@ -72,14 +161,16 @@
                     class="item"
                     @click="suggestionItemClickHandle(question)"
                   >
-                    <view class="label">
+                    <view class="item-cont">
+                      <view class="txt">
+                        {{ question }}
+                      </view>
                       <image
-                        :src="webUrl + '/icon-30.png'"
+                        :src="webUrl + '/aiChat/icon-03.png'"
                         class="pic"
                         mode="widthFix"
                       />
                     </view>
-                    {{ question }}
                   </view>
                 </view>
               </view>
@@ -89,12 +180,22 @@
         <view id="bottom_postion" class="bottom-postion" />
       </view>
     </view>
-    <view
+    <view class="page-to-bottom">
-      v-if="chatMessageListLength > 0 && !isScrollToBottom && !loading"
+      <view
-      class="page-to-bottom"
+        v-if="chatNumber"
-    >
+        class="new-chat"
+        @click="createNewHandle"
+      >
+        <image
+          :src="webUrl + '/aiChat/icon-05.png'"
+          class="btn-icon"
+          mode="widthFix"
+        />
+        开启新对话
+      </view>
       <image
-        :src="webUrl + '/icon-29.png'"
+        v-if="chatMessageListLength > 0 && !isScrollToBottom && !loading"
+        :src="webUrl + '/aiChat/down.png'"
         class="icon"
         mode="widthFix"
         @click="scrollToBottomHandle"
@@ -105,19 +206,52 @@
       :loading="loading"
       @send="streamReq"
       @add="createNewHandle"
+      @history="historyViewHandle"
+    />
+    <AiHistoryList
+      ref="history"
+      :status-bar-height="statusBarHeight"
     />
   </view>
 </template>
 
 <script>
 import { chatMixins } from '@/mixins/chatMixins.js'
+import {
+  getAiSystemInfoSetting,
+  getAiSystemInfoTopic
+} from '@/api/public'
+import AiHistoryList from './components/historyList'
 export default {
   name: 'AiChatIndexPage',
+  components: {
+    AiHistoryList  
+  },
   mixins: [chatMixins],
+  data() {
+    return {
+      settingInfo: {},
+      topicList: [],
+      historyList: [],
+      moreList: []
+    }
+  },
   methods: {
     createdCallbak() {
       this.$nextTick(() => {
         this.scrollToBottomHandle()
+        getAiSystemInfoSetting().then(res => {
+          const { success, data } = res
+          if (success) {
+            this.settingInfo = data
+          }
+        })
+        getAiSystemInfoTopic().then(res => {
+          const { success, data } = res
+          if (success) {
+            this.topicList = data || []
+          }
+        })
       })
     },
     // 创建新会话
@@ -127,34 +261,15 @@ export default {
       this.showCursor = false
       this.loading = false
       this.getConfigLoading = false
-      this.infoResData = {}
       this.chatMessageList = []
+    },
+    historyViewHandle() {
+      this.$refs.history.showView()
     }
   }
 }
 </script>
 <style lang="scss" scoped>
-.guide-wrap {
-  position: relative;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-  width: 706rpx;
-	padding: 24rpx 0 0 0;
-  margin: 0 auto;
-	.pic {
-		display: block;
-		width: 706rpx;
-	}
-  .pic2 {
-    position: absolute;
-    top: 42rpx;
-    left: 68rpx;
-    display: block;
-    width: 120rpx;
-    height: 120rpx;
-  }
-}
 .chat-wrap {
 	padding: 0 0 180rpx 0;
 	.chat-info-wrap {
@@ -163,12 +278,6 @@ export default {
       padding: 0;
     }
 	}
-  .no-info-list {
-    height: 240rpx;
-    line-height: 240rpx;
-    text-align: center;
-    color: #999;
-  }
 }
 .loading-wrap {
 	text-align: center;
@@ -180,7 +289,7 @@ export default {
 }
 .show-cursor .cursor {
 	display: inline-block;
-	color: #FA9108;
+	color: #3D4CF1;
 	font-weight: bold;
 	animation: blinking 1s infinite;
 }
@@ -194,4 +303,83 @@ export default {
 		opacity: 0.0;
 	}
 }
+.focus-guide-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 60rpx 40rpx;
+  .guide-left {
+    .avatar {
+      display: block;
+      width: 267rpx;
+      height: 530rpx;
+    }
+  }
+  .guide-right {
+    padding: 30rpx;
+    margin: 0 0 0 40rpx;
+    border-radius: 20rpx;
+    font-size: 24rpx;
+    background-color: #fff;
+    box-shadow: 0rpx 12rpx 30rpx rgba(0,0,0,0.1);
+    .title {
+      font-weight: bold;
+    }
+    .content {
+      padding: 30rpx 0 0 0;
+      color: #999;
+    }
+  }
+}
+.topic-wrap {
+  width: 100%;
+  .title {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .txt {
+      width: 186rpx;
+      height: 46rpx;
+      margin: 0 20rpx;
+      border-radius: 24rpx;
+      text-align: center;
+      line-height: 46rpx;
+      color: #fff;
+      font-size: 26rpx;
+      background-color: #3D4CF1;
+    }
+    .icon {
+      display: flex;
+      width: 40rpx;
+    }
+  }
+  .list-wrap {
+    width: 100%;
+    margin: 60rpx 0 0 0;
+    overflow-x: auto;
+    .list-cont {
+      display: flex;
+      flex-wrap: wrap;
+      width: 150%;
+      .list-item {
+        display: flex;
+        align-items: center;
+        height: 40rpx;
+        padding: 0 12rpx;
+        margin: 0 30rpx 30rpx 0;
+        border-radius: 20rpx;
+        font-size: 24rpx;
+        color: #666;
+        background: rgba(255,255,255,0.39);
+        box-shadow: 0rpx 6rpx 12rpx rgba(0,0,0,0.1);
+        .icon {
+          display: block;
+          width: 24rpx;
+          height: 24rpx;
+          margin: 0 8rpx 0 0;
+        }
+      }
+    }
+  }
+}
 </style>