<template>
|
<div class="scene-switch relative ">
|
<div class="flex-items-center space-x-2" :class="isHome ? 'set-next-group-type' : ''">
|
<div
|
class="border border-gray-400 border-solid h-8 flex-items-center px-3 py-2 rounded-2xl cursor-pointer space-x-1 hover:bg-[#cae3ff]"
|
:class="{ 'bg-[#c5e0ff]': activeGroupType === item, '!text-[#1c86ff]': activeGroupType === item }"
|
v-for="item in groupTypeList"
|
:key="item"
|
@click="groupTypeClick(item)"
|
>
|
<span :class="['ywifont', groupTypeMapIcon[item]]"></span>
|
<div class="">{{ item }}</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup lang="ts" name="SceneSwitch">
|
import { activeGroupType, groupTypeList, groupTypeMapIcon } from '/@/stores/chatRoom';
|
const props = defineProps({
|
isHome: Boolean,
|
});
|
const emit = defineEmits(['change']);
|
|
let preGroupType = activeGroupType.value;
|
const groupTypeClick = (item) => {
|
if (preGroupType === item) return;
|
activeGroupType.value = item;
|
preGroupType = item;
|
emit('change', item);
|
};
|
</script>
|
<style scoped lang="scss"></style>
|
