修改样式

yangyin

2024-10-28 fb4d1107f546c683bf359ce892f8c646bbff6270

 src/views/project/ch/home/component/waterRight/center.vue

@@ -8,26 +8,29 @@
         </div>
         <div class="cursor-pointer">
            <span class="mr-1 changeBatch" @click="batchChange">换一批</span>
            <i class="iconfont icon-shuaxin"></i>
            <i class="myiconfont icon-shuaxin"></i>
         </div>
      </div>

      <div class="main">
         <div
            class="main_item flex items-center cursor-pointer"
            v-for="(item, index) in state.exampleContent"
            :key="index"
            :class="{ main_item_active: item.sample_id === activeSampleId }"
            @click="changeExample(item)"
         >
            <div class="left flex items-center justify-center" :class="['color' + index]">
               <img :src="item.Icon" alt="" />
            </div>
            <div class="right">
               <h4>{{ item.sample_title }}</h4>
               <p>{{ item.sample_question }}</p>
            </div>
         </div>
         <el-carousel height="80" :interval="6000" indicator-position="none">
            <el-carousel-item v-for="group in batchSourceData" :key="group" class="set-carousel-item">
               <div
                  class="main_item flex items-center cursor-pointer"
                  v-for="(item, index) in state.exampleContent"
                  :key="index"
                  :class="{ main_item_active: item.sample_id === activeSampleId }"
                  @click="changeExample(item)"
               >
                  <div class="left flex items-center justify-center" :class="['color' + index]">
                     <img :src="item.Icon" alt="" />
                  </div>
                  <div class="right">
                     <h4>{{ item.sample_title }}</h4>
                     <p>{{ item.sample_question }}</p>
                  </div>
               </div>
            </el-carousel-item>
         </el-carousel>
      </div>
   </div>
</template>
@@ -35,8 +38,7 @@
<script setup lang="ts">
import { computed, onMounted, reactive, ref } from 'vue';
import { getSelectSample } from '/@/api/ai/chat';
import { activeRoomId, activeSampleId, setRoomConfig } from '/@/stores/chatRoom';
import emitter from '/@/utils/mitt';
import { activeRoomId, activeSampleId, activeSectionAId, setRoomConfig } from '/@/stores/chatRoom';
let state = reactive({
   exampleContent: [],
   exampleRandomContent: [],
@@ -44,11 +46,12 @@
const exampleList = ref([]); //模版列表
const emits = defineEmits<{
   (event: 'advanceExampleClick', data): void;
   (event:'updateChatInput',val):void;
   (event: 'updateChatInput', val): void;
}>();
onMounted(() => {
   getSelectListSample();
});
//换一批数据源
const groupedArray = computed(() => {
   const groups = [];
   let i = 0;
@@ -57,14 +60,19 @@
   }
   return groups;
});
//自动播放
const batchSourceData = computed(() => {
   const batch = [];
   let i = 0;
   while (exampleList.value.length > i) {
      batch.push(exampleList.value.slice(i, (i += 4)));
   }
   return batch;
});
//获取模版列表
const getSelectListSample = async () => {
   const res = await getSelectSample({
      section_b_id: '',
   });
   // console.log(res, 63);
   const res = await getSelectSample({});
   state.exampleRandomContent = res.samples;

   const array = [];
   res.samples.forEach((sample, index) => {
      sample.Icon = '/static/images/wave/ChatImg.png';
@@ -78,9 +86,10 @@
};

const changeExample = (item) => {
   emits('updateChatInput',item.sample_question)
   emits('updateChatInput', item.sample_question);
   setRoomConfig(activeRoomId.value, 'isAnswerByLLM', false);
   activeSampleId.value = item.sample_id;
   activeSectionAId.value = item.section_a_id;
};
//换一批
const batchChange = () => {
@@ -91,7 +100,27 @@
const advanceExampleClick = () => {
   emits('advanceExampleClick', true);
};

const tagListClick = (group_item) => {
   const curGroupID = group_item.p_group_id;
   const curID = group_item.group_id;
   const exampleContent = exampleList.value;
   let curGroupIDs = [];
   if (!curGroupID) {
      curGroupIDs.push(curID);
   } else {
      exampleContent.forEach((item) => {
         curGroupIDs.push(item.group_id);
      });
   }
   let result = [];
   curGroupIDs.forEach((curItem) => {
      exampleContent.forEach((sample) => {
         if (curItem == sample.group_id) result.push(sample);
      });
   });
   console.log('🚀 ~ result:', result);
   batchChange();
};
//随机生成颜色
const randomHexColor = () => {
   return `#${Math.floor(Math.random() * 16777215)
@@ -100,6 +129,7 @@
};
defineExpose({
   getSelectListSample,
   tagListClick,
});
</script>
<style scoped lang="scss">
@@ -177,6 +207,9 @@
               font-weight: 500;
               height: 16px;
               transition: background-color 0.2s;
               overflow: hidden;
               text-overflow: ellipsis;
               white-space: nowrap;
            }
            p {
               font-size: 12px;
@@ -201,6 +234,10 @@
            }
         }
      }
      .set-carousel-item {
         display: flex;
         flex-wrap: wrap;
      }
   }
}

@@ -219,4 +256,11 @@
:deep(.el-drawer__body) {
   overflow-x: hidden;
}
:deep(.el-carousel--horizontal) {
   width: 100%;
}
:deep(.el-carousel__container) {
   width: 100%;
   height: 200px !important;
}
</style>