<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<u-navbar back-text=""  title="聊天信息" :background="{ background: 'transparent' }" :title-style="{ fontweight:'bold'}" ></u-navbar>

		<!-- 功能菜单区域 -->
		<u-cell-group class="cell-group">
			<u-cell-item bg-color="#fff" class="u-m-b-20" style="margin-bottom: 40px;font-weight: bold;" title="查找聊天记录" :arrow="true"
				:border-bottom="false"></u-cell-item>
		</u-cell-group>
		
		<u-cell-group class="cell-group u-m-b-20" style="font-weight: bold;">
			<u-cell-item bg-color="#fff" title="消息免打扰" :arrow="false"><u-switch v-model="disturb"></u-switch></u-cell-item>
			<u-cell-item bg-color="#fff" title="置顶聊天" :arrow=" false"><u-switch v-model="topChat"></u-switch></u-cell-item>
			<u-cell-item bg-color="#fff" title="项目提醒" :arrow=" false"><u-switch v-model="projectRemind"></u-switch></u-cell-item>
		</u-cell-group>
		
		<u-cell-group class="cell-group" style="font-weight: bold;">
			<u-cell-item bg-color="#fff" class="u-m-b-20" style="margin-bottom: 40px;" title="清空聊天记录" :arrow="true"
				:border-bottom="false"></u-cell-item>
		</u-cell-group>
		
		<u-cell-group class="cell-group" style="font-weight: bold;">
			<u-cell-item bg-color="#fff" class="u-m-b-20" style="margin-bottom: 40px;" title="联系客服" :arrow="true"
				:border-bottom="false"></u-cell-item>
		</u-cell-group>
		
		<u-cell-group class="cell-group" style="font-weight: bold;">
			<u-cell-item bg-color="#fff" class="u-m-b-20" style="margin-bottom: 40px;" title="投诉" :arrow="true"
				:border-bottom="false"></u-cell-item>
		</u-cell-group>

		
		<u-link href="#" :under-line="false" class="u-m-b-44" style="position: absolute;bottom: 0;left: 0;right: 0;text-align: center;">标记为 不感兴趣</u-link>
	
	</view>
</template>

<script setup lang="ts">
import { ref } from 'vue'

// 为每个 switch 创建响应式数据
const disturb = ref(false) 
const topChat = ref(false)
const projectRemind = ref(false) 
</script>

<style lang="scss" scoped>
	.container {
		background: var(--bottom, #F0F3FF);
		background-blend-mode: lighten;
		width: 100%;
		height: 100%;

	    ::v-deep .cell-group {
			.u-cell-item-box{
				background-color: transparent;
			}
		}

		
	}
</style>