演示1版本

suerprisePlus

2024-06-27 6ae4841b48665145aa469d574fbadb988a9c498c

 src/components/Chat/chatList.vue

@@ -1,10 +1,10 @@
<template>

  <div class="body">

    <div :style="pageConfig.width | setWidth">

  <div class="body webBody">

    <div :class="$store.state.setScreenFlag ? 'webmainBox_Active' : 'webmainBox'">

      <div class="web__main" ref="main">

        <div class="web__main-item" v-for="(item, index) in list" :key="loding(index)"

          :class="{ 'web__main-item--mine': item.mine }">

 


          <div class="web__main_content">

            <div>

              <img :src="item.img" />

@@ -44,6 +44,9 @@
                  </div>

                  <div v-else-if="res.type == 'loader'">

                    <span v-html="handleDetail(res.val)" ref="content"></span>

                  </div>

                  <div v-else-if="res.type == 'markdown'">

                    <vue-markdown :source="res.val" class="newConcentLeft my-markdown"></vue-markdown>

                  </div>

                  <div style="margin-bottom:10px" v-else-if="res.type == 'rag'">

                    <div v-show="res.acction">

@@ -271,6 +274,19 @@
}

</style>

<style scoped>

.webBody {

  display: flex;

  justify-content: center;

}



.webmainBox {

  width: 50%;

}



.webmainBox_Active {

  width: 90%;

}



.web__main-item {

  position: relative;

  font-size: 0;

@@ -278,6 +294,7 @@
  /* padding-left: 60px; */

  min-height: 68px;

  text-align: left;



}



.web__main-user,

@@ -544,6 +561,35 @@
    /* 结束旋转 div 元素 */

  }

}



.newConcentLeft {

  margin: 16px;

  font-family: PingFangSC, PingFang SC;

  font-weight: 400;

  font-size: 14px;



  line-height: 20px;

  text-align: left;

  font-style: normal;

  white-space: pre-wrap;

  word-wrap: break-word;









}



.newConcentLeft img {

  width: 75%;

}



.newConcentLeft table {

  width: 100%;

}



.newConcentLeft pre {

  white-space: normal;

}

</style>