pbl-student-table/src/components/classRoomHelper/component/dialogArea.vue

<template>
	<div class="dialog">
		<div v-show="cardType == 0">
			<div class="d_top" ref="chatRef">
				<div class="d_t_chat" v-for="(item,index) in chatList" :key="index">
					<div class="d_t_c_user" v-if="item.role =='user'">
						<div class="d_t_c_u_left">
							<div class="d_t_c_u_l_content">{{item.content}}</div>
							<div class="d_t_c_u_l_time">{{item.time}}</div>
						</div>
						<div class="d_t_c_u_right">
							<span>我</span>
						</div>
					</div>

					<div class="d_t_c_ai" v-if="item.role =='ai'">
						<div class="d_t_c_a_left">
							<span>Ai</span>
						</div>
						<div class="d_t_c_a_right">
							<div class="d_t_c_a_r_content"  v-loading="loading && index==chatList.length-1">{{ item.content }}</div>
							<div class="d_t_c_a_r_time">{{item.time}}</div>
						</div>
						
					</div>
				</div>
				
			</div>
			<div class="d_bottom">
				<div class="d_b_btnArea">
					<div class="d_b_ba-item" @click.stop="choiceRole()">
					<img style="width: 20px;" src="../../../assets/icon/course/role.png" alt="">
					选择角色
				</div>
				</div>
				<div class="d_b_inputArea">
					<div class="d_b_tape" @click="goTape()"></div>
					<div class="d_b_input">
						<el-input :disabled="loading" @keyup.enter.native="send()" class="d_b_i_left" v-model="text"></el-input>
						<div class="d_b_i_right" @click="sendFile()">
							<span></span>
						</div>
					</div>
					<div class="d_b_btn" @click="send()">
						<span></span>
					</div>
				</div>
			</div>
		</div>
		<div class="" v-show="cardType == 1">
			<div class="choiceTop">
				<div class="choiceRoleHeader">
					<div>切换角色：</div>
					<span>您希望以下哪个角色回答您的问题，请选择：</span>
				</div>

				<div class="characterBlock" v-for="(item,index) in roleList" :key="item.id" @click.stop="roleType=index">
					<div class="imgLeft">
						<div class="img">
							<img style="width: 100%;height: 100%;" :src="item.avatar">
						</div>
					</div>
					<div class="txtRight">
						<div class="bir">{{ item.bir }}</div>
						<div :style="{color: '#fff',display: roleType ==index?'block':'none'  }">已选择</div>
						<!-- <span></span> -->
					</div>
				</div>
				<div class="characterBlock" @click="addCharacter">
					<div class="imgLeft">
						<div class="img2">
							<img style="width: 100%;height: 100%;" src="https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/basil_add-outline1715564539170.png">
						</div>
					</div>
					<div class="txtRight">
						<div style="color: #fff;margin-left: 5px;">添加新角色</div>
					</div>
				</div>

				<!-- <div class="filterSubjects">
					<div class="fs_title">筛选科目</div>
					<div class="fs_box">
						<div :class="['fs_b_item',subjectsType==index?'fs_b_itemActive':'']" v-for="(item,index) in subjectsList" :key="index" @click="subjectsType = index">{{ item }}</div>
					</div>
				</div>

				<div class="roleList">
					<div class="r_title">角色列表 ({{ roleList.length }})</div>
					<div class="r_box">
						<div :class="['r_b_item',roleType==index?'r_b_itemActive':'']" v-for="(item,index) in roleList" :key="item.id" @click.stop="roleType=index">
							<img :src="item.avatar">
							<span>{{ item.name }}</span>
						</div>
					</div>
				</div> -->
			</div>
			<div class="choiceBottom">
				<el-button class="cb_btn" size="mini" @click="noChangeRole()">取消</el-button>
				<el-button class="cb_btn" size="mini" type="primary"  @click="changeRole()">确定</el-button>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data(){
			return{
				cardType:0,//0-对话 1-选角色
				text:"",
				subjectsList:['语文',"数学","英语","科学","信息","历史","地理","政治","生物","化学","物理","其他"],
				subjectsType:-1,
				rightSubjects:-1,
				roleType:-1,
				rightRole:-1,
				loading:false,
				roleList:[
					{id:0,avatar:require("../../../assets/icon/course/aiAvatar.png"),name:"爱因斯坦",bir:'我是爱因斯坦'},
					{id:1,avatar:require("../../../assets/icon/course/aiAvatar.png"),name:"居里夫人",bir:'我是居里夫人'},
					{id:2,avatar:require("../../../assets/icon/course/aiAvatar.png"),name:"达尔文",bir:'我是达尔文'},
					// {id:3,avatar:require("../../../assets/icon/course/aiAvatar.png"),name:"莱昂纳多·达芬奇"},
					// {id:4,avatar:require("../../../assets/icon/course/aiAvatar.png"),name:"列文虎克"},
					// {id:5,avatar:require("../../../assets/icon/course/aiAvatar.png"),name:"詹姆斯·瓦特"},
					// {id:6,avatar:require("../../../assets/icon/course/aiAvatar.png"),name:"瑞秋·卡森"},
					// {id:7,avatar:require("../../../assets/icon/course/aiAvatar.png"),name:"尼古拉·特斯拉"},
					// {id:8,avatar:require("../../../assets/icon/course/aiAvatar.png"),name:"约翰·穆尔"},
					// {id:9,avatar:require("../../../assets/icon/course/aiAvatar.png"),name:"艾萨克·牛顿"},
					// {id:10,avatar:require("../../../assets/icon/course/aiAvatar.png"),name:"伽利略"},
					// {id:11,avatar:require("../../../assets/icon/course/aiAvatar.png"),name:"格雷戈尔·孟德尔"},
					// {id:12,avatar:require("../../../assets/icon/course/aiAvatar.png"),name:"张衡"},
					// {id:13,avatar:require("../../../assets/icon/course/aiAvatar.png"),name:"李时珍"},
					// {id:14,avatar:require("../../../assets/icon/course/aiAvatar.png"),name:"钱学森"},
					// {id:15,avatar:require("../../../assets/icon/course/aiAvatar.png"),name:"阿基米德"},
					// {id:16,avatar:require("../../../assets/icon/course/aiAvatar.png"),name:"霍金"},
					// {id:17,avatar:require("../../../assets/icon/course/aiAvatar.png"),name:"蔡伦"},
					// {id:18,avatar:require("../../../assets/icon/course/aiAvatar.png"),name:"詹姆斯·瓦特"},
					// {id:19,avatar:require("../../../assets/icon/course/aiAvatar.png"),name:"路易·巴斯德"},
					// {id:20,avatar:require("../../../assets/icon/course/aiAvatar.png"),name:"阿尔弗雷德·诺贝尔"},
					// {id:21,avatar:require("../../../assets/icon/course/aiAvatar.png"),name:"詹姆斯·麦克斯韦"},
					// {id:22,avatar:require("../../../assets/icon/course/aiAvatar.png"),name:"亚历山大·格拉汉姆·贝尔"},
					// {id:23,avatar:require("../../../assets/icon/course/aiAvatar.png"),name:"约翰内斯·开普勒"},
					// {id:24,avatar:require("../../../assets/icon/course/aiAvatar.png"),name:"安德烈·安培"},
				],
				chatList:[
					{
						role:"ai",
						content:`您好，有什么可以帮助您的吗？`,
						time:new Date().toLocaleString().replace(/\//ig,'-')
					},
				],
			}
		},
		methods: {
			addCharacter(){
				this.$message.info("点击了添加新角色")
			},
			choiceRole(){
				if(this.loading)return this.$message.info("请稍等")
				this.cardType = 1;
			},
			sendFile(){
				if(this.loading)return this.$message.info("请稍等")
				this.$message.info("点击了附件")
			},
			goTape(){
				if(this.loading)return this.$message.info("请稍等")
				this.$message.info(`点击了语音`)
			},
			send(){
				if (this.loading) return this.$message.info("请稍等");
				if(this.text.trim().length==0)return this.$message.info("请输入内容")
				this.loading = true;
				this.chatList.push({
					role:"user",
					content:this.text,
					time:new Date().toLocaleString().replace(/\//ig,'-')
				})
				
				this.chatList.push({
					role:"ai",
					content:"",//这里需要调用接口
					time:new Date().toLocaleString().replace(/\//ig,'-')
				})
				this.$nextTick(() => {
				  	this.$refs.chatRef.scrollTop = this.$refs.chatRef.scrollHeight;
					});;
				setTimeout(()=>{
					let aiContent="对不起，这个问题我回答不了。"
					switch(this.text){
						case "为什么要进行垃圾分类？":
							aiContent=`想象一下，我们的家里如果有很多东西乱丢一团，找东西的时候会很麻烦对吧？而且如果不清理，家里会变得很脏，还可能招来小虫子。垃圾也是一样的，如果我们把所有的垃圾都扔在一起，不仅会污染环境，还会浪费很多可以再利用的资源。
垃圾分类就是把不同类型的垃圾分开扔。比如，有的垃圾是可以再回收利用的，像纸张、塑料瓶、玻璃瓶等，这些如果分开收集，就可以送到特殊的地方去重新处理，变成新的东西再次使用。还有一些垃圾是厨余垃圾，比如剩饭剩菜，这种可以做成肥料帮助植物生长。而其他一些不能回收的垃圾，就需要另外处理，确保它们不会对环境造成伤害。
通过垃圾分类，我们可以减少污染，节约资源，让我们的城市更干净，也保护了我们的地球。所以，学会正确的垃圾分类，是每个人都应该做的一件重要的事情哦！`
							break;
						case "玻璃是可回收垃圾吗？为什么？":
							aiContent=`是的，玻璃是可以回收的垃圾。因为玻璃可以被融化后重新制成新的玻璃制品，比如瓶子和罐子。这样做可以减少我们从自然中取材料来制造新玻璃，也可以减少垃圾的数量，保护我们的环境。所以，当我们用完玻璃制品后，应该把它们放到回收箱里，而不是扔到普通垃圾桶里。这样我们就可以帮助地球更健康。`
							break;
					}
					if(this.rightRole==1){
						switch(this.text){
							case "为什么要进行垃圾分类":
								aiContent=`
								尊敬的小朋友们，今天我们要探讨一个非常重要的话题——为什么我们要进行垃圾分类。我是居里夫人，虽然我的主要研究领域是放射性元素，但我一直相信科学可以改善我们的生活环境和保护我们的地球。
首先，我们要知道地球是我们共同的家，保护环境就是保护我们自己的家园。在我的研究生涯中，我发现了镭和钋这样的放射性元素，这些发现不仅推动了科学的进步，也让我们更加意识到科学研究与环境保护之间的联系。
垃圾分类，简单来说，就是将垃圾分成几类，比如可回收物、有害垃圾、湿垃圾（厨余垃圾）和干垃圾。这样做的目的是让垃圾能够更有效地被回收和处理，减少对环境的污染。
想象一下，如果我们把所有的垃圾都混在一起，那么回收和处理这些垃圾就会变得非常困难。有些有害垃圾可能会释放出有毒物质，污染土壤和水源，这对我们的健康是非常不利的。而且，混合的垃圾很难进行有效的资源回收，这意味着更多的资源会被浪费。
通过垃圾分类，我们可以将可回收的材料如纸张、塑料、金属和玻璃分开收集，这些材料可以被再利用，制成新的产品。这不仅可以减少对自然资源的开采，还可以减少能源消耗和碳排放，帮助我们对抗全球变暖。
此外，有害垃圾如废电池和废药品需要特殊处理，防止它们对环境造成伤害。通过正确分类，我们可以确保这些有害物质得到安全处理，保护我们的地球。
我在研究放射性元素时，深刻体会到科学与环境之间的密切关系。每一次实验，我都尽可能地减少对环境的影响。这种对环境负责的态度，也是我们进行垃圾分类的原因之一。
亲爱的小朋友们，通过垃圾分类，我们不仅可以保护环境，还可以学习到责任感和科学的方法。希望你们从小培养保护环境的意识，用实际行动为保护我们的地球贡献自己的力量。记住，每一个小小的行动，都是对未来的投资。
								`
								break;
						}
					}
					// this.chatList.push({
					// 	role:"ai",
					// 	content:aiContent,//这里需要调用接口
					// 	time:new Date().toLocaleString().replace(/\//ig,'-')
					// })
					this.chatList[this.chatList.length - 1].content = aiContent;
          this.chatList[
            this.chatList.length - 1
          ].time = new Date().toLocaleString().replace(/\//gi, "-");
					this.loading = false;
					this.$nextTick(() => {
				  	this.$refs.chatRef.scrollTop = this.$refs.chatRef.scrollHeight;
					});
					this.text = "";
					
				},5000)
				// this.chatList.push({
				// 	role:"user",
				// 	content:this.text,
				// 	time:"2023-11-11 11:10:11"
				// },{
				// 	role:"ai",
				// 	content:`小朋友，你真棒！`,//这里需要调用接口
				// 	time:"2023-11-11 11:10:11"
				// })
				// this.text = "";
				// // 元素滚动条触底
				
			},
			changeRole(){
				this.loading = true;
				this.cardType = 0;
				this.rightSubjects = this.subjectsType;
				this.rightRole = this.roleType;
				this.chatList = [];
				this.chatList.push({
					role:"ai",
					content:"",//这里需要调用接口
					time:new Date().toLocaleString().replace(/\//ig,'-')
				})
				setTimeout(()=>{
					let aiContent = "你好";
					switch(this.rightRole){
						case 0:
							aiContent = "你好，我是爱因斯坦，相对论的提出者，相信科学的力量可以揭示宇宙的奥秘。"
							break;
						case 1:
							aiContent = "你好，我是居里夫人，放射性研究的先驱，第一位获得两次诺贝尔奖的女性。"
							break;
						case 2:
							aiContent = "你好，我是查尔斯·达尔文，进化论的创立者，相信物种通过自然选择不断进化。"
							break;
						case 3:
							aiContent = "你好，我是达芬奇，文艺复兴的象征，艺术与科学的多面手。"
							break;
						case 4:
							aiContent = "你好，我是列文虎克，通过我的简单显微镜，开启了微生物学的大门。"
							break;
						case 5:
							aiContent = "你好，我是詹姆斯·瓦特，改良了蒸汽机，为工业革命提供了动力。"
							break;
						case 6:
							aiContent = "你好，我是瑞秋·卡森，环保运动的先驱，通过《寂静的春天》提醒世界关注环境保护。"
							break;
						case 7:
							aiContent = "你好，我是特斯拉，交流电的推广者，致力于无线电和电力传输的研究。"
							break;
						case 8:
							aiContent = "你好，我是约翰·穆尔，自然保护的倡导者，努力保护美国的森林和野生地区。"
							break;
						case 9:
							aiContent = "你好，我是牛顿，万有引力和三大运动定律的发现者，为现代物理学奠定了基础。"
							break;
						case 10:
							aiContent = "你好，我是伽利略，通过望远镜观测支持了日心说，被誉为现代观测天文学之父。"
							break;
						case 11:
							aiContent = "你好，我是孟德尔，遗传学的奠基人，通过豌豆实验发现了遗传的基本规律。"
							break;
						case 12:
							aiContent = "你好，我是张衡，东汉杰出的天文学家和科学家，发明了地动仪。"
							break;
						case 13:
							aiContent = "你好，我是李时珍，中国古代著名的医学家，编纂了《本草纲目》。"
							break;
						case 14:
							aiContent = "你好，我是钱学森，现代火箭科学的奠基人之一，被誉为“中国航天之父”。"
							break;
						case 15:
							aiContent = "你好，我是阿基米德，古希腊的数学家和物理学家，提出了浮力原理。"
							break;
						case 16:
							aiContent = "你好，我是斯蒂芬·霍金，研究黑洞和宇宙起源，致力于解释宇宙的奥秘。"
							break;
						case 17:
							aiContent = "你好，我是蔡伦，东汉时期改进了造纸术，使纸张更加广泛地应用于社会。"
							break;
						case 18:
							aiContent = "你好，我是詹姆斯·瓦特，改良了蒸汽机，为工业革命提供了动力。"
							break;
						case 19:
							aiContent = "你好，我是路易·巴斯德，微生物学的奠基人，发现了疫苗和巴斯德消毒法。"
							break;
						case 20:
							aiContent = "你好，我是诺贝尔，发明了炸药，为和平与科学的贡献设立了诺贝尔奖。"
							break;
						case 21:
							aiContent = "你好，我是麦克斯韦，统一了电磁理论，提出了麦克斯韦方程组。"
							break;
						case 22:
							aiContent = "你好，我是贝尔，电话的发明者，致力于通信技术的发展和听力障碍人士的教育。"
							break;
						case 23:
							aiContent = "你好，我是开普勒，行星运动三大定律的发现者，为天文学和物理学的发展做出了重要贡献。"
							break;
						case 24:
							aiContent = "你好，我是安培，电磁学的先驱之一，提出了电流的磁效应。"
							break;
					}
					this.chatList[this.chatList.length - 1].content = aiContent;
          this.chatList[
            this.chatList.length - 1
          ].time = new Date().toLocaleString().replace(/\//gi, "-");
					this.loading = false;
				},2000)

			},
			noChangeRole(){
				this.cardType = 0;
				this.subjectsType = this.rightSubjects;
				this.roleType = this.rightRole;
			}
		},
	}
</script>

<style scoped>
.dialog{
	width: 100%;
	height: 100%;
	box-sizing: border-box;
}

.dialog>div{
	width: 100%;
	height: 100%;
}

.characterBlock{
	display: flex;
	background: rgba(54, 169, 252, 1);
	width: 80%;
	height: 80px;
	margin: 0 auto;
	border-radius: 10px;
	margin-bottom: 15px;
	cursor: pointer;
}
.characterBlock > .imgLeft{
	width: 100px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.characterBlock > .imgLeft > .img{
	width: 60px;
	height: 60px;
	overflow: hidden;
	border-radius: 50%;	
}
.characterBlock > .imgLeft > .img2{
	width: 70px;
	height: 70px;
	overflow: hidden;
	border-radius: 50%;	
}
.characterBlock > .txtRight{
	flex: 1;
	display: flex;
	justify-content: flex-start;
	align-items: center;
}
.characterBlock > .txtRight > .bir{
	width: 150px;
	height: 35px;
	display: flex;
	align-items: center;
	background-color: #fff;
	border-radius: 10px;
	box-sizing: border-box;
	padding: 5px 10px;
	box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
	margin-right: 10px;
}

.d_top{
	width: 100%;
	height: calc(100% - 90px);
	overflow: auto;
	box-sizing: border-box;
	padding: 20px 0;
}

.d_t_chat{
	width: 100%;
	display: flex;
	box-sizing: border-box;
	padding: 10px;
}

.d_t_chat>div{
	display: flex;
	align-items: flex-start;
	width: 100%;
}

.d_t_c_user{
	box-sizing: border-box;
	padding-left: 35px;
}

.d_t_c_u_left{
	width: 90%;
	height: auto;
}

.d_t_c_u_l_content{
	width: auto;
	max-width: 100%;
	height: auto;
	box-sizing: border-box;
	padding: 10px;
	color: white;
	background-color: #3681FC;
	border-radius: 8px 2px 8px 8px;
  white-space: pre-line
}

.d_t_c_u_l_time{
	width: 100%;
	display: flex;
	justify-content: flex-end;
	font-size: 12px;
	color: #9F9F9F;
	margin-top: 5px;
}

.d_t_c_u_right{
	width: 35px;
	height: 35px;
	display: flex;
	justify-content: center;
	margin-left: 5px
}

.d_t_c_u_right>span{
	width: 32px;
	height: 32px;
	display: flex;
	justify-content: center;
	align-items: center;
	color: white;
	background-color: #3681FC;
	border-radius: 50%;;
}

.d_t_c_ai{
	box-sizing: border-box;
	padding-right: 35px;
}

.d_t_c_a_right{
	min-width: 90%;
	height: auto;
}

.d_t_c_a_r_content{
	width: auto;
	max-width: 100%;
	height: auto;
	box-sizing: border-box;
	padding: 10px;
	background-color: #F6F8FF;
	border-radius: 2px 8px 8px 8px;
  white-space: pre-line;
	word-break: break-all;
}

.d_t_c_a_r_time{
	width: 100%;
	display: flex;
	justify-content: flex-start;
	font-size: 12px;
	color: #9F9F9F;
	margin-top: 5px;
}

.d_t_c_a_left{
	width: 35px;
	height: 35px;
	display: flex;
	justify-content: center;
	margin-right: 5px
}

.d_t_c_a_left>span{
	width: 32px;
	height: 32px;
	display: flex;
	justify-content: center;
	align-items: center;
	color: white;
	background-color: #3681FC;
	border-radius: 50%;
}

.d_bottom{
	width: 100%;
	height: 90px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.d_b_btnArea{
	width: 100%;
	height: 30px;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	padding: 0 10px;
}

.d_b_ba-item{
	width: auto;
	box-sizing: border-box;
	padding: 0 10px;
	height: 25px;
	background-color: white;
	display: flex;
	justify-content: center;
	align-items: center;
	/* 阴影 */
	box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.363);
	border-radius: 15px;
	font-size: 14px;
	cursor: pointer;
}


.d_b_inputArea{
	width: 100%;
	height: 55px;
	box-sizing: border-box;
	border-top: solid 1px #EDEDED;
	display: flex;
	justify-content: center;
	align-items: center;
}

.d_b_tape{
	width: 35px;
	height: 35px;
	background: url("../../../assets/icon/course/tape.png") no-repeat;
	background-size: 50% 60%;
	background-position: center;
	cursor: pointer;
}

.d_b_input{
	width: 65%;
	height: 45px;
	background-color: #F3F3F3;
	border-radius: 50px;
	margin: 0 10px;
	display: flex;
	align-items: center;
}

.d_b_i_left{
	width: calc(100% - 45px);
	height: 100%;
}

.d_b_i_left>>>.el-input__inner{
	border: none;
	background-color: #F3F3F3;
	outline: none;
	border-radius: 50px 0 0 50px;
}


.d_b_i_right{
	width: 45px;
	height: 45px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.d_b_i_right>span{
	width: 35px;
	height: 35px;
	background: url("../../../assets/icon/course/file.png") no-repeat;
	background-size: 50% 60%;
	background-position: center;
	cursor: pointer;
}

.d_b_btn{
	width: 40px;
	height: 40px;
	background-color: #3681FC;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	cursor: pointer;
}

.d_b_btn>span{
	width: 30px;
	height: 30px;
	background: url("../../../assets/icon/course/send.png") no-repeat;
	background-size: 70% 70%;
	background-position: center;
	
}

.choiceTop{
	width: 100%;
	height: 95%;
	overflow-x: hidden;
}

.choiceBottom{
	width: 100%;
	height: 5%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.cb_btn{
	margin: 0 10px;
}

.choiceRoleHeader{
	width: 100%;
	margin: 10px;
	margin-bottom: 20px;
}

.choiceRoleHeader>div{
	font-size: 16px;
	font-weight: bold;
}

.choiceRoleHeader>span{
	font-size: 14px;
}

.filterSubjects{
	margin: 10px;
	width: 100%;
	height: auto;
}

.fs_box{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	margin-top: 10px;
}

.fs_b_item{
	width: auto;
	height: 35px;
	font-size: 14px;
	box-sizing: border-box;
	padding: 0 9px;
	background-color: #F3F7FD;
	border: solid 1px #F3F7FD;
	border-radius: 5px;
	margin-right:8px;
	margin-bottom: 8px;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
}

.fs_b_itemActive{
	border: solid 1px #4D8FFC;
	color: #4D8FFC;
	background-color: #F3F7FD;
}

.roleList{
	width: 100%;
	height: auto;
	margin: 10px;
}

.r_box{
	width: 100%;
	height: auto;
	display: flex;
	flex-wrap: wrap;
}

.r_b_item{
	height: 40px;
	font-size: 14px;
	display: flex;
	/* justify-content: center; */
	align-items: center;
	background-color: #F0F2F5;
	border-radius: 5px;
	margin: 5px;
	cursor: pointer;
	box-sizing: border-box;
	padding: 0 4px;
	border: solid 1px #F0F2F5;
}

.r_b_itemActive{
	box-sizing: border-box;
	border: solid 1px #AECCFE;
	color: #4D8FFB;
}

.r_b_item>img{
	min-width: 24px;
	min-height: 24px;
	width: 24px;
	height: 24px;
	border-radius:50%;
	margin-right: 10px;
	/* margin-left: 10px; */
}



</style>