From 8b6d79d198707624b1aa3ee004bed3991ac454f3 Mon Sep 17 00:00:00 2001
From: zhangxiao <898441624@qq.com>
Date: 星期四, 08 八月 2024 20:13:41 +0800
Subject: [PATCH] Merge branch 'master' of http://192.168.5.5:10010/r/web/flow_web
---
src/views/session/sessionManager/index.vue | 732 ++++++++++++++++++++++++++++++-------------------------
1 files changed, 398 insertions(+), 334 deletions(-)
diff --git a/src/views/session/sessionManager/index.vue b/src/views/session/sessionManager/index.vue
index 4c3b45a..1ab6516 100644
--- a/src/views/session/sessionManager/index.vue
+++ b/src/views/session/sessionManager/index.vue
@@ -1,357 +1,421 @@
<script setup lang="ts">
- import { IconMoreVertical,IconQuestionCircleFill,IconPoweroff,IconCommon ,IconSend} from '@arco-design/web-vue/es/icon';
- import img1 from '@/assets/images/u64.png'
- import img2 from '@/assets/images/u69.png'
- import img3 from '@/assets/images/u74.png';
- import AddSession from './components/addSession.vue'
- import { ref, onMounted, computed, reactive, nextTick,watch } from 'vue';
- import { useUserStore,useAppStore } from '@/store';
- import { sessionListApi, deleteSessionApi,getSessionDetailsApi,chatApi }from '@/api/session';
- import { Message } from '@arco-design/web-vue';
- const userStore = useUserStore();
- const appStore = useAppStore();
- const theme = computed(() => {
- return appStore.theme;
- });
- const sessionList=ref([]);//浼氳瘽鍒楄〃
- const sessionDetailList=ref([]);//鏍规嵁浼氳瘽id鍑烘潵鐨勪細璇濊鎯�
- const activeSessionId=ref('');
- const inputMsg=ref('');
- const scrollbar = ref(null);
+ import {
+ IconMoreVertical,
+ IconQuestionCircleFill,
+ IconPoweroff,
+ IconCommon,
+ IconSend,
+ } from '@arco-design/web-vue/es/icon';
+ import img1 from '@/assets/images/u64.png';
+ import img2 from '@/assets/images/u69.png';
+ import img3 from '@/assets/images/u74.png';
+ import AddSession from './components/addSession.vue';
+ import { ref, onMounted, computed, reactive, nextTick, watch } from 'vue';
+ import { useUserStore, useAppStore } from '@/store';
+ import {
+ sessionListApi,
+ deleteSessionApi,
+ getSessionDetailsApi,
+ chatApi,
+ } from '@/api/session';
+ import { Message } from '@arco-design/web-vue';
+ const userStore = useUserStore();
+ const appStore = useAppStore();
+ const theme = computed(() => {
+ return appStore.theme;
+ });
+ const sessionList = ref([]); //浼氳瘽鍒楄〃
+ const sessionDetailList = ref([]); //鏍规嵁浼氳瘽id鍑烘潵鐨勪細璇濊鎯�
+ const activeSessionId = ref('');
+ const inputMsg = ref('');
+ const scrollbar = ref(null);
- const currIndex = ref(0)
- const displayedText = ref('');// 姝ｅ湪鏄剧ず鐨勬枃瀛�
- let timer: number|null = null;
- const streamStr=ref('');
- const modalObj=reactive({ add:false });
- //鏌ヨ浼氳瘽鍒楄〃
- const querySessionList = async () => {
- const { code, data } =await sessionListApi();
- if (code === 200) {
- sessionList.value = data;
- if(Array.isArray(data)&&data.length>0){
- activeSessionId.value=data[0].id;
- const res= await getSessionDetailsApi(data[0].id);
- if(res.code===200){
- sessionDetailList.value=res.data.message;
- refreshScroll();
- }
- }
- }else{
- Message.warning('鏌ヨ澶辫触');
+ const currIndex = ref(0);
+ const displayedText = ref(''); // 姝ｅ湪鏄剧ず鐨勬枃瀛�
+ let timer: number | null = null;
+ const streamStr = ref('');
+ const modalObj = reactive({ add: false });
+ //鏌ヨ浼氳瘽鍒楄〃
+ const querySessionList = async () => {
+ const { code, data } = await sessionListApi();
+ if (code === 200) {
+ sessionList.value = data;
+ if (Array.isArray(data) && data.length > 0) {
+ activeSessionId.value = data[0].id;
+ const res = await getSessionDetailsApi(data[0].id);
+ if (res.code === 200) {
+ sessionDetailList.value = res.data.message;
+ refreshScroll();
}
- };
- //鏍规嵁浼氳瘽id鍒犻櫎浼氳瘽
- const deleteSession=async (session)=>{
- const {code}=await deleteSessionApi([session.id]);
- if(code===200){
- Message.success('鍒犻櫎鎴愬姛');
- querySessionList();
- }
- };
- // eslint-disable-next-line prettier/prettier
- // 鏂板浼氳瘽涔嬪悗鍒锋柊浼氳瘽鍒楄〃
- const addSession=()=>{
- querySessionList();
- };
- // 鍒濆鍖栨暟鎹�
- const initData =()=>{
- querySessionList();
- };
- // 鑾峰彇鐧诲綍淇℃伅
- const userName=computed(()=>{
- return userStore.name;
- });
- const avatar = computed(() => {
- return userStore.avatar;
- });
- const refreshScroll=()=>{
- nextTick(()=>{
- const container = document.getElementById('home');
- scrollbar.value.scrollTop(container.scrollHeight);
- });
- };
- // 鏍规嵁浼氳瘽id 鏌ヨ浼氳瘽璇︽儏
- const querySessionDetail=async (session)=>{
- activeSessionId.value=session.id;
- const {code,data}= await getSessionDetailsApi(session.id);
- if(code===200){
- sessionDetailList.value=data.message;
- refreshScroll();//鍒锋柊婊氬姩鏉′綅缃�
- }
- };
- const sendMessage= async ()=>{
- if(inputMsg.value){
- const {code,data} =await chatApi({conversation_id:activeSessionId.value,messages:inputMsg.value});
- const res= await getSessionDetailsApi(activeSessionId.value);
- if(res.code===200){
- sessionDetailList.value=res.data.message.map((item,index)=>{
- if(index===res.data.message.length-1){
- item.role='last';
- displayedText.value='';
- currIndex.value=0;
- streamStr.value=item.content;
- startDisplayStr();
- }
- return item;
- });
- refreshScroll();
- }
- inputMsg.value='';
- }else{
- Message.warning('娑堟伅涓嶈兘涓虹┖');
- }
- };
- onMounted(()=>{
- initData();
- });
- //鏂囧瓧鍔ㄦ�佽緭鍑�
- const startDisplayStr = () => {
- if (timer) {
- clearTimeout(timer!);
- }
- const res = streamStr.value;
- // 灏嗘暟缁勪腑鐨勫瓧绗︿覆鎷兼帴璧锋潵
- if (currIndex.value < res.length) {
- displayedText.value += res[currIndex.value];
- currIndex.value++;
- setTimeout(startDisplayStr, 100);
- } else {
- clearTimeout(timer!);
- timer = null
- }
+ }
+ } else {
+ Message.warning('鏌ヨ澶辫触');
}
- watch(() => scrollbar.value, (newScroll, oldScroll) => {
+ };
+ //鏍规嵁浼氳瘽id鍒犻櫎浼氳瘽
+ const deleteSession = async (session) => {
+ const { code } = await deleteSessionApi([session.id]);
+ if (code === 200) {
+ Message.success('鍒犻櫎鎴愬姛');
+ querySessionList();
+ }
+ };
+ // eslint-disable-next-line prettier/prettier
+ // 鏂板浼氳瘽涔嬪悗鍒锋柊浼氳瘽鍒楄〃
+ const addSession = () => {
+ querySessionList();
+ };
+ // 鍒濆鍖栨暟鎹�
+ const initData = () => {
+ querySessionList();
+ };
+ // 鑾峰彇鐧诲綍淇℃伅
+ const userName = computed(() => {
+ return userStore.name;
+ });
+ const avatar = computed(() => {
+ return userStore.avatar;
+ });
+ const refreshScroll = () => {
+ nextTick(() => {
+ const container = document.getElementById('home');
+ scrollbar.value.scrollTop(container.scrollHeight);
+ });
+ };
+ // 鏍规嵁浼氳瘽id 鏌ヨ浼氳瘽璇︽儏
+ const querySessionDetail = async (session) => {
+ activeSessionId.value = session.id;
+ const { code, data } = await getSessionDetailsApi(session.id);
+ if (code === 200) {
+ sessionDetailList.value = data.message;
+ refreshScroll(); //鍒锋柊婊氬姩鏉′綅缃�
+ }
+ };
+ const sendMessage = async () => {
+ if (inputMsg.value) {
+ const { code, data } = await chatApi({
+ conversation_id: activeSessionId.value,
+ messages: inputMsg.value,
+ });
+ const res = await getSessionDetailsApi(activeSessionId.value);
+ if (res.code === 200) {
+ sessionDetailList.value = res.data.message.map((item, index) => {
+ if (index === res.data.message.length - 1) {
+ item.role = 'last';
+ displayedText.value = '';
+ currIndex.value = 0;
+ streamStr.value = item.content;
+ startDisplayStr();
+ }
+ return item;
+ });
+ refreshScroll();
+ }
+ inputMsg.value = '';
+ } else {
+ Message.warning('娑堟伅涓嶈兘涓虹┖');
+ }
+ };
+ onMounted(() => {
+ initData();
+ });
+ //鏂囧瓧鍔ㄦ�佽緭鍑�
+ const startDisplayStr = () => {
+ if (timer) {
+ clearTimeout(timer!);
+ }
+ const res = streamStr.value;
+ // 灏嗘暟缁勪腑鐨勫瓧绗︿覆鎷兼帴璧锋潵
+ if (currIndex.value < res.length) {
+ displayedText.value += res[currIndex.value];
+ currIndex.value++;
+ setTimeout(startDisplayStr, 100);
+ } else {
+ clearTimeout(timer!);
+ timer = null;
+ }
+ };
+ watch(
+ () => scrollbar.value,
+ (newScroll, oldScroll) => {
if (newScroll) {
// 鑾峰彇a-scroll鐨勯珮搴�
const height = newScroll.$el.offsetHeight;
console.log('a-scroll height changed to:', height);
}
- },{deep:true})
+ },
+ { deep: true }
+ );
</script>
<template>
- <div class="container">
- <AddSession :modalObj="modalObj" @addSession="addSession"></AddSession>
- <a-row :gutter="[0,0]">
- <a-col :span="5">
- <a-card class="left">
- <template #cover>
- <a-button type="outline" class="card-btn" @click="modalObj.add=true">
- +鏂板缓浼氳瘽
- </a-button>
- </template>
- <a-scrollbar class="left-list" style="height: 60vh;overflow-y: auto;">
- <div class="item" :class="{ isLeftActive:activeSessionId===session.id }" v-for="session in sessionList" :key="session.id" @click="querySessionDetail(session)">
- <div class="item-left">
- <IconQuestionCircleFill/>銆�
- {{session.name}}
- </div>
- <div class="item-right">
- <a-popover position="bottom">
- <icon-more-vertical></icon-more-vertical>
- <template #content>
- <!--<div>
+ <div class="container">
+ <AddSession :modalObj="modalObj" @addSession="addSession"></AddSession>
+ <a-row :gutter="[0, 0]">
+ <a-col :span="5">
+ <a-card class="left">
+ <template #cover>
+ <a-button
+ type="outline"
+ class="card-btn"
+ @click="modalObj.add = true"
+ >
+ +鏂板缓浼氳瘽
+ </a-button>
+ </template>
+ <a-scrollbar class="left-list" style="height: 60vh; overflow-y: auto">
+ <div
+ class="item"
+ :class="{ isLeftActive: activeSessionId === session.id }"
+ v-for="session in sessionList"
+ :key="session.id"
+ @click="querySessionDetail(session)"
+ >
+ <div class="item-left">
+ <IconQuestionCircleFill />銆�
+ {{ session.name }}
+ </div>
+ <div class="item-right">
+ <a-popover position="bottom">
+ <icon-more-vertical></icon-more-vertical>
+ <template #content>
+ <!--<div>
<a-button type="text" size="mini">缂栬緫</a-button>
</div>-->
- <div>
- <a-button type="text" size="mini" @click="deleteSession(session)">鍒犻櫎</a-button>
- </div>
- </template>
- </a-popover>
- </div>
- </div>
- </a-scrollbar>
- <div class="left-bottom">
- <div class="item"><IconCommon/>銆�<span>鍚戞湅鍙嬫帹鑽�</span></div>
- <div class="item"><IconCommon/>銆�<span>鏈�鏂版秷鎭�</span></div>
- <div class="item"><IconCommon/>銆�<span>闂鍙嶉</span></div>
- <div class="item"><IconCommon/>銆�<span>甯歌闂</span></div>
- <div class="item"><IconPoweroff/>銆�<span>閫�鍑�</span></div>
+ <div>
+ <a-button
+ type="text"
+ size="mini"
+ @click="deleteSession(session)"
+ >鍒犻櫎</a-button
+ >
</div>
- </a-card>
- </a-col>
- <a-col :span="19">
- <a-card class="right">
- <div v-if="sessionDetailList.length===0">
- <div class="right-title">ChatAI</div>
- <a-row justify="center" class="right-middle">
- <a-col :span="5" class="item">
- <p><a-image :src="img1" width="50px"></a-image></p>
- <p>绀轰緥</p>
- </a-col>
- <a-col :span="5" class="item">
- <p><a-image :src="img2" width="50px"></a-image></p>
- <p>鏍稿績鍔熻兘</p>
- </a-col>
- <a-col :span="5" class="item">
- <p><a-image :src="img3" width="50px"></a-image></p>
- <p>灞�闄愭��</p>
- </a-col>
- </a-row>
- <a-row justify="center" class="right-middle-list">
- <a-col :span="6" class="item">鈥滆鐢ㄧ畝鍗曠殑鏈瑙ｉ噴閲忓瓙璁＄畻鈥�</a-col>
- <a-col :span="6" class="item">鍙互瀵瑰巻鍙插璇濊繘琛岃蹇�</a-col>
- <a-col :span="6" class="item">鍙兘浼氬嚭鐜伴敊璇殑鍐呭</a-col>
- </a-row>
- <a-row justify="center" class="right-middle-list">
- <a-col :span="6" class="item">鈥滄彁渚涗竴浜涘簡绁�10宀佸瀛愮敓鏃ョ殑鍒涙剰锛熲��</a-col>
- <a-col :span="6" class="item">鍏佽鐢ㄦ埛瀵圭瓟妗堣繘琛屼慨姝�</a-col>
- <a-col :span="6" class="item">鍙兘浼氫骇鐢熸湁瀹虫垨铏氬亣鐨勫唴瀹�</a-col>
- </a-row>
- <a-row justify="center" class="right-middle-list">
- <a-col :span="6" class="item">鈥滃浣曞湪Javascript涓彂鍑篽ttp璇锋眰锛熲��</a-col>
- <a-col :span="6" class="item">鍙互鎺ュ彈鎴栨嫆缁濅笉鎭板綋鐨勮缁�</a-col>
- <a-col :span="6" class="item">瀵�2023骞翠互鍚庡緱涓栫晫鍜屼簨浠朵簡瑙ｆ湁闄�</a-col>
- </a-row>
- </div>
- <a-scrollbar ref="scrollbar" id="home" v-else class="chat-list" style="width:90%;overflow:auto;height: 70vh;margin: 0px auto">
- <div class="chat-item" v-for="sessionDetail in sessionDetailList">
- <a-comment
- v-if="sessionDetail.role==='user'"
- avatar="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp"
- >
- <template #content>
- <div :class="{light:theme==='light'}">{{sessionDetail.content}}</div>
- </template>
- </a-comment>
- <a-comment
- v-else-if="sessionDetail.role==='assistant'"
- avatar="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/9eeb1800d9b78349b24682c3518ac4a3.png~tplv-uwbnlip3yd-webp.webp"
- >
- <template #content>
- <a-card class="chat-item-answer" style="background-color: rgba(63, 64, 79, 1);">
- <div :class="{light:theme==='light'}">{{sessionDetail.content}}</div>
- </a-card>
- </template>
- </a-comment>
- <a-comment
- v-else-if="sessionDetail.role==='last'"
- avatar="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/9eeb1800d9b78349b24682c3518ac4a3.png~tplv-uwbnlip3yd-webp.webp"
- >
- <template #content>
- <a-textarea readonly auto-size v-model="displayedText" class="chat-item-answer" style="background-color: rgba(63, 64, 79, 1);">
- </a-textarea>
- </template>
- </a-comment>
- </div>
- </a-scrollbar>
- <div class="bottom">
- <div class="input">
- <a-input v-model="inputMsg" @keydown.enter="sendMessage" placeholder="杈撳叆鎮ㄦ兂浜嗚В鐨勫唴瀹癸紝鎸塃nter鍙戦��">
- <template #suffix>
- <icon-send style="cursor: pointer" @click="sendMessage"/>
- </template>
- </a-input></div>
- <div class="text">鍐呭鐢盇I鐢熸垚锛屼粎渚涘弬鑰冿紝璇烽伒瀹堛�婄敤鎴峰崗璁�嬨�併�婁釜浜轰俊鎭繚鎶よ鍒欍�嬶紝鍩轰簬ChatGPT澶фā鍨嬶紝鐗堟湰锛歏3.3.0</div>
- </div>
- </a-card>
- </a-col>
- </a-row>
- </div>
+ </template>
+ </a-popover>
+ </div>
+ </div>
+ </a-scrollbar>
+ <div class="left-bottom">
+ <div class="item"><IconCommon />銆�<span>鍚戞湅鍙嬫帹鑽�</span></div>
+ <div class="item"><IconCommon />銆�<span>鏈�鏂版秷鎭�</span></div>
+ <div class="item"><IconCommon />銆�<span>闂鍙嶉</span></div>
+ <div class="item"><IconCommon />銆�<span>甯歌闂</span></div>
+ <div class="item"><IconPoweroff />銆�<span>閫�鍑�</span></div>
+ </div>
+ </a-card>
+ </a-col>
+ <a-col :span="19">
+ <a-card class="right">
+ <div v-if="sessionDetailList.length === 0">
+ <div class="right-title">ChatAI</div>
+ <a-row justify="center" class="right-middle">
+ <a-col :span="5" class="item">
+ <p><a-image :src="img1" width="50px"></a-image></p>
+ <p>绀轰緥</p>
+ </a-col>
+ <a-col :span="5" class="item">
+ <p><a-image :src="img2" width="50px"></a-image></p>
+ <p>鏍稿績鍔熻兘</p>
+ </a-col>
+ <a-col :span="5" class="item">
+ <p><a-image :src="img3" width="50px"></a-image></p>
+ <p>灞�闄愭��</p>
+ </a-col>
+ </a-row>
+ <a-row justify="center" class="right-middle-list">
+ <a-col :span="6" class="item">鈥滆鐢ㄧ畝鍗曠殑鏈瑙ｉ噴閲忓瓙璁＄畻鈥�</a-col>
+ <a-col :span="6" class="item">鍙互瀵瑰巻鍙插璇濊繘琛岃蹇�</a-col>
+ <a-col :span="6" class="item">鍙兘浼氬嚭鐜伴敊璇殑鍐呭</a-col>
+ </a-row>
+ <a-row justify="center" class="right-middle-list">
+ <a-col :span="6" class="item"
+ >鈥滄彁渚涗竴浜涘簡绁�10宀佸瀛愮敓鏃ョ殑鍒涙剰锛熲��</a-col
+ >
+ <a-col :span="6" class="item">鍏佽鐢ㄦ埛瀵圭瓟妗堣繘琛屼慨姝�</a-col>
+ <a-col :span="6" class="item">鍙兘浼氫骇鐢熸湁瀹虫垨铏氬亣鐨勫唴瀹�</a-col>
+ </a-row>
+ <a-row justify="center" class="right-middle-list">
+ <a-col :span="6" class="item"
+ >鈥滃浣曞湪Javascript涓彂鍑篽ttp璇锋眰锛熲��</a-col
+ >
+ <a-col :span="6" class="item">鍙互鎺ュ彈鎴栨嫆缁濅笉鎭板綋鐨勮缁�</a-col>
+ <a-col :span="6" class="item"
+ >瀵�2023骞翠互鍚庡緱涓栫晫鍜屼簨浠朵簡瑙ｆ湁闄�</a-col
+ >
+ </a-row>
+ </div>
+ <a-scrollbar
+ ref="scrollbar"
+ id="home"
+ v-else
+ class="chat-list"
+ style="width: 90%; overflow: auto; height: 70vh; margin: 0px auto"
+ >
+ <div class="chat-item" v-for="sessionDetail in sessionDetailList">
+ <a-comment
+ v-if="sessionDetail.role === 'user'"
+ avatar="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp"
+ >
+ <template #content>
+ <div :class="{ light: theme === 'light' }">{{
+ sessionDetail.content
+ }}</div>
+ </template>
+ </a-comment>
+ <a-comment
+ v-else-if="sessionDetail.role === 'assistant'"
+ avatar="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/9eeb1800d9b78349b24682c3518ac4a3.png~tplv-uwbnlip3yd-webp.webp"
+ >
+ <template #content>
+ <a-card
+ class="chat-item-answer"
+ style="background-color: rgba(63, 64, 79, 1)"
+ >
+ <div :class="{ light: theme === 'light' }">{{
+ sessionDetail.content
+ }}</div>
+ </a-card>
+ </template>
+ </a-comment>
+ <a-comment
+ v-else-if="sessionDetail.role === 'last'"
+ avatar="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/9eeb1800d9b78349b24682c3518ac4a3.png~tplv-uwbnlip3yd-webp.webp"
+ >
+ <template #content>
+ <a-textarea
+ readonly
+ auto-size
+ v-model="displayedText"
+ class="chat-item-answer"
+ style="background-color: rgba(63, 64, 79, 1)"
+ >
+ </a-textarea>
+ </template>
+ </a-comment>
+ </div>
+ </a-scrollbar>
+ <div class="bottom">
+ <div class="input">
+ <a-input
+ v-model="inputMsg"
+ @keydown.enter="sendMessage"
+ placeholder="杈撳叆鎮ㄦ兂浜嗚В鐨勫唴瀹癸紝鎸塃nter鍙戦��"
+ >
+ <template #suffix>
+ <icon-send style="cursor: pointer" @click="sendMessage" />
+ </template> </a-input
+ ></div>
+ <div class="text"
+ >鍐呭鐢盇I鐢熸垚锛屼粎渚涘弬鑰冿紝璇烽伒瀹堛�婄敤鎴峰崗璁�嬨�併�婁釜浜轰俊鎭繚鎶よ鍒欍�嬶紝鍩轰簬ChatGPT澶фā鍨嬶紝鐗堟湰锛歏3.3.0</div
+ >
+ </div>
+ </a-card>
+ </a-col>
+ </a-row>
+ </div>
</template>
<style scoped lang="scss">
- .isLeftActive{
- background-color:rgba(52, 53, 66, 1) ;
+ .isLeftActive {
+ background-color: rgba(52, 53, 66, 1);
+ }
+ .light {
+ color: white !important;
+ }
+ .container {
+ background-color: #1d2129;
+ .left,
+ .right {
+ color: white;
+ height: calc(100vh - 60px);
+ border: 0px;
}
- .light{
- color: white !important;
- }
- .container{
- background-color: #1d2129;
- .left,.right{
- color: white;
- height: calc(100vh - 60px);
- border: 0px;
- }
- .left{
- position: relative;
- background-color: rgba(30, 33, 34, 1);
- .card-btn {
- width: 90%;
- margin: 15px auto;
- border: 1px solid white;
- color: white;
- }
- .left-list{
- .item{
- display: flex;
- justify-content: space-between;
- padding-left: 30px;
- color: white;
- cursor: pointer;
- line-height: 40px;
- .item-right{
- margin-right: 10px;
- }
- &:hover{
- background-color:rgba(52, 53, 66, 1) ;
- }
- }
- }
- .left-bottom{
- position: absolute;
- bottom: 30px;
- left:40px;
- .item{
- text-align: left;
- color: white;
- font-size: 12px;
- line-height: 30px;
- }
- }
- }
- .right{
- position: relative;
+ .left {
+ position: relative;
+ background-color: rgba(30, 33, 34, 1);
+ .card-btn {
+ width: 90%;
+ margin: 15px auto;
+ border: 1px solid white;
+ color: white;
+ }
+ .left-list {
+ .item {
+ display: flex;
+ justify-content: space-between;
+ padding-left: 30px;
+ color: white;
+ cursor: pointer;
+ line-height: 40px;
+ .item-right {
+ margin-right: 10px;
+ }
+ &:hover {
background-color: rgba(52, 53, 66, 1);
- .right-title{
- font-size: 30px;
- color: white;
- text-align: center;
- margin-top: 100px;
- }
- .right-middle{
- margin-top: 40px;
- text-align: center;
- color: white;
- }
- .right-middle-list{
- color: white;
- .item{
- padding-top:15px;
- text-align: center;
- height: 50px;
- background-color: rgba(63, 64, 79, 1);
- margin:8px 20px;
- border-radius: 10px;
- }
- }
- .bottom{
- width: 100%;
- position: absolute;
- bottom: 40px;
- left:20%;
- .input{
- width: 60%;
- }
- .text{
- font-size: 12px;
- color: lightgrey;
- line-height: 40px;
- }
- }
- .chat-list{
- width: 90%;
- margin: 0px auto;
- .chat-item{
- margin-top: 20px;
- .chat-item-answer{
- color: white;
- }
- }
- }
-
+ }
}
+ }
+ .left-bottom {
+ position: absolute;
+ bottom: 30px;
+ left: 40px;
+ .item {
+ text-align: left;
+ color: white;
+ font-size: 12px;
+ line-height: 30px;
+ }
+ }
}
+ .right {
+ position: relative;
+ background-color: rgba(52, 53, 66, 1);
+ .right-title {
+ font-size: 30px;
+ color: white;
+ text-align: center;
+ margin-top: 100px;
+ }
+ .right-middle {
+ margin-top: 40px;
+ text-align: center;
+ color: white;
+ }
+ .right-middle-list {
+ color: white;
+ .item {
+ padding-top: 15px;
+ text-align: center;
+ height: 50px;
+ background-color: rgba(63, 64, 79, 1);
+ margin: 8px 20px;
+ border-radius: 10px;
+ }
+ }
+ .bottom {
+ width: 100%;
+ position: absolute;
+ bottom: 40px;
+ left: 20%;
+ .input {
+ width: 60%;
+ }
+ .text {
+ font-size: 12px;
+ color: lightgrey;
+ line-height: 40px;
+ }
+ }
+ .chat-list {
+ width: 90%;
+ margin: 0px auto;
+ .chat-item {
+ margin-top: 20px;
+ .chat-item-answer {
+ color: white;
+ }
+ }
+ }
+ }
+ }
</style>
--
Gitblit v1.8.0