Vue3+TS(uniapp)手撸一个聊天页面

前言

最近在自己的小程序中做了一个智能客服，API使用的是云厂商的API，然后聊天页面...嗯，找了一下关于UniApp(vite/ts)版本的好像不多，有一个官方的但其中的其他代码太多了，去看懂再删除那些对我无用的代码不如自己手撸一个，先看效果：

好，下面开始介绍如何一步一步实现

重难点调研

1. 如何编写气泡

可以发现一般的气泡是有个“小箭头”，一般是指向用户的头像，所以这里我们的初步思路就是通过before与after伪类来放置这个小三角形，这个小三角形通过隐藏border的其余三边来实现。

(资料图)

然后其中一个细节就是聊天气泡的最大宽度不超过对方的头像，超过就换行。这个简单，设置一个max-width: cacl(100vw - XX)就可以了

2. 如何编写输入框

考虑到用户可能输入多行文字，这里使用的是</code>标签，点开微信发个消息试试，发现它是自适应的，这里去调研了解了一下，发现小程序自带组件有这个实现，好，那直接用：</p><p>然后我们继续注意到发送按钮与输入框的底线保持水平，这个<code>flex</code>里有对应属性可以实现，跳过...</p><h3 data-id="heading-5">3.如何实现滚动条始终居于底部</h3><p>当聊天消息较多时，我们发现我们继续输入消息，页面并没有更新（滚动）。打开微信聊天框一看，当消息过多时，你发一条消息，页面就自动滚动到了最新的消息，这又是怎实现的呢？</p><p>继续调研，发现小程序自带的<code><scroll-view></code>标签中有个属性<code>scroll-into-view</code>可以自动跳转：</p><pre class="brush:html;gutter:true;"><scroll-view scroll-y="true" :scroll-into-view="`msg${messages.length-1}`" :scroll-with-animation="true"><view class="msg-list" :id="`msg${index}`" v-for="(msg, index) in messages" :key="msg.time"><view class="msg-item">略</view></view></scroll-view></pre><h2 data-id="heading-6">概述</h2><p>简单分析下来好像一点都不难，如下是我的文件列表，话不多说，开始撸代码!</p><pre class="brush:html;gutter:true;">chat├─ chat.vue├─ leftBubble.vue└─ rightBubble.vue </pre><h2 data-id="heading-7">左气泡模块</h2><p>左气泡模块就是刚刚分析的那一部分，然后增加一点点细节，如下：</p><pre class="brush:html;gutter:true;"><template><view class="left-bubble-container"><view class="left"><image :src="props.avatarUrl"></image></view><view class="right"><view class="bubble"><text>{{ props.message }}</text></view></view></view></template><script setup lang="ts">import { userDefaultData } from "@/const";interface propsI {message: string;avatarUrl: string;}const props = withDefaults(defineProps<propsI>(), {avatarUrl: userDefaultData.avatarUrl,});</script><style lang="scss" scoped>.left-bubble-container { margin: 10px 0;display: flex;.left {image {height: 50px;width: 50px;border-radius: 5px;}}}.bubble {max-width: calc(100vw - 160px);min-height: 25px;border-radius: 10px;background-color: #ffffff;position: relative;margin-left: 20px;padding: 15px;text {height: 25px;line-height: 25px;}}.bubble::before {position: absolute;top: 15px;left: -20px;content: "";width: 0;height: 0;border-right: 10px solid #ffffff;border-bottom: 10px solid transparent;border-left: 10px solid transparent;border-top: 10px solid transparent;}</style></pre><h2 data-id="heading-8">右气泡模块</h2><p>右气泡模块我们需要将三角形放在右边，这个好实现。然后这整个气泡我们需要让它处于水平居右，所以这里我使用了：</p><pre class="brush:html;gutter:true;">display: flex;direction: rtl;</pre><p>这个属性，但使用的过程中发现气泡中的内容(符号与文字)会出现翻转，“遇事不决，再加一层”，所以我们在内容节点外再套一层：</p><pre class="brush:html;gutter:true;"><span><text>{{ props.message }}</text></span></pre><p>然后继续增加一点点细节：</p><pre class="brush:html;gutter:true;"><template><view class="left-bubble-container"><view class="right"><image :src="props.avatarUrl"></image></view><view class="left"><view class="bubble"><span><text>{{ props.message }}</text></span></view></view></view></template><script setup lang="ts">import { userDefaultData } from "@/const";interface propsI {message: string;avatarUrl: string;}const props = withDefaults(defineProps<propsI>(), {avatarUrl: userDefaultData.avatarUrl,});</script><style lang="scss" scoped>.left-bubble-container {display: flex;direction: rtl;margin: 10px 0;.right {image {height: 50px;width: 50px;border-radius: 5px;}}}.bubble {max-width: calc(100vw - 160px);min-height: 25px;border-radius: 10px;background-color: #ffffff;position: relative;margin-right: 20px;padding: 15px;text-align: left;text {height: 25px;line-height: 25px;}}.bubble::after {position: absolute;top: 15px;right: -20px;content: "";width: 0;height: 0;border-right: 10px solid transparent;border-bottom: 10px solid transparent;border-left: 10px solid #ffffff;border-top: 10px solid transparent;}</style></pre><h2 data-id="heading-9">输入模块</h2><p>没啥说的，需要注意的是：<code>Button</code>记得防抖</p><pre class="brush:html;gutter:true;"><view class="bottom-input"><view class="textarea-container"><textareaauto-heightfixed="true"confirm-type="send"v-model="input"@confirm="submit"/></view><buttonstyle="width: 70px;height: 40px;line-height: 34px;margin: 0 10px;background-color: #ffffff;border: 3px solid #0256ff;color: #0256ff;"@click="submit">发送</button></pre><h2 data-id="heading-10">整体</h2><p>1）考虑如何存储消息</p><blockquote><p>这里仅考虑内存中如何存储，不考虑本地存储，后续思考中会聊到。</p></blockquote><pre class="brush:html;gutter:true;">export interface messagesI { left: boolean; text: string; time: number;}</pre><p>如上是消息列表中的一项，为了区分是渲染到左气泡还是右气泡，这里用<code>left</code>来区分了一下；</p><pre class="brush:html;gutter:true;">const messages: Ref<messagesI[]> = ref([]);</pre><p>2）如何推荐消息</p><p>这边我封装的服务端接口是这样的：</p><pre class="brush:html;gutter:true;">mutation chat{ customerChat(talk: "你好啊"){ knowledge text recommend }}</pre><p><code>recommend</code>是用户可能输入了错误的消息，这里是预测用户的输入字符串，所以我们需要在得到这个字符串后直接显示，然后用户可以一键通过这条消息回复：</p><pre class="brush:html;gutter:true;">function submit(){// 略...const finalMsg = receive?.knowledge || receive?.text || "你是否想问: " + receive?.recommend;// 略...if (receive?.recommend) {input.value = receive?.recommend;} else {input.value = "";}}</pre><p>如上，得益于Vue框架，这里实现起来也非常简单，当用户提交之后，如果有推荐的消息，就直接修改<code>input.value</code>从而修改输入框的文字；如果没有就直接清空方便下一次输入。</p><p>接下来继续增加一点点细节（<code>chat.vue</code>文件）</p><pre class="brush:html;gutter:true;"><template><view class="chat-container"><view class="msg-container"><scroll-view scroll-y="true" :scroll-into-view="`msg${messages.length-1}`" :scroll-with-animation="true"><view class="msg-list" :id="`msg${index}`" v-for="(msg, index) in messages" :key="msg.time"><view class="msg-item"><left-bubble v-if="msg.left" :message="msg.text" :avatar-url="meStore.user?.avatarUrl"></left-bubble><right-bubble v-else :message="msg.text" :avatar-url="logoUrl"></right-bubble></view></view></scroll-view></view><view class="bottom-input"><view class="textarea-container"><textareaauto-heightfixed="true"confirm-type="send"v-model="input"@confirm="submit"/></view><buttonstyle="width: 70px;height: 40px;line-height: 34px;margin: 0 10px;background-color: #ffffff;border: 3px solid #0256ff;color: #0256ff;"@click="submit">发送</button></view></view></template><script setup lang="ts">import { ref, type Ref } from "vue";import leftBubble from "./leftBubble.vue";import rightBubble from "./rightBubble.vue";import type { messagesI } from "./chat.interface";import { chatGQL } from "@/graphql/me.graphql";import { useMutation } from "villus";import { logoUrl } from "@/const";import { useMeStore } from "@/stores/me.store";const meStore = useMeStore();const messages: Ref<messagesI[]> = ref([]);const input = ref("");async function submit() {if (input.value === "") return;messages.value.push({left: true,text: input.value,time: new Date().getTime(),});const { execute } = useMutation(chatGQL);const { error, data } = await execute({ talk: input.value })if (error) {uni.showToast({title: `加载错误`,icon: "error",duration: 3000,});throw new Error(`加载错误: ${error}`);}const receive = data?.customerChat;const finalMsg = receive?.knowledge || receive?.text || "你是否想问: " + receive?.recommend;messages.value.push({left: false,text: finalMsg,time: new Date().getTime(),});if (receive?.recommend) {input.value = receive?.recommend;} else {input.value = "";}}</script><style lang="scss" scoped>.chat-container {.msg-container {padding: 20px 5px 100px 5px;height: calc(100vh - 120px);scroll-view {height: 100%;}}.bottom-input {display: flex;align-items: flex-end;position: fixed;bottom: 0px;background-color: #fbfbfb;padding: 20px;box-shadow: 0px -10px 30px #eeeeee;.textarea-container {background-color: #ffffff;padding: 10px;textarea {width: calc(100vw - 146px);background-color: #ffffff;}}}}</style></pre><h2 data-id="heading-11">思考</h2><p>如何保存到本地，然后每次加载最新消息，然后向上滚动进行懒加载?</p><p>我这里没有实现该功能，毕竟只是一个客服，前端没必要保存消息记录到本地如Localstorage。</p><p>这里抛砖引玉，想到了一个最基础的数据结构--链表，用Localstorage-key/value的形式来实现消息队列在本地的多段存储：</p><p>当然，有效性有待验证，这里仅仅属于一些想法</p><h2 data-id="heading-12">最后</h2><p>然后，我撸了小半天的页面，准备给朋友看看来着，他告诉我微信小程序自带一个客服系统，只需要让<code>button</code>的<code>open-type</code>属性等于<code>contract</code>；</p><h3 id="tid-A8dYk6">本文转载于:</h3><h3 id="tid-SwZPdd">https://juejin.cn/post/7224059698911641658</h3><h3 id="tid-D8HBxE">如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。</h3> <div class="keywords mdt20 flex"> <span>标签：</span> </div> </div> <div class="paging flex mdt40 mdb20"> </div> <div class="title-5 mdt20"> <a href="#">最近更新</a> </div> <div class="list-list mdt20"> <ul> <li> <a href="http://www.kuaibao.mbahome.com/huati/2023/0511/12082.html"> <h1>记录--Vue3+TS(uniapp)手撸一个聊天页面-全球观速讯</h1> <div class="flex"> <div class="txt flex no-img"> <h3> 这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助Vue... </h3> <span>2023-05-11 </span> </div> </div> </a> </li> <li> <a href="http://www.kuaibao.mbahome.com/huati/2023/0511/12081.html"> <h1>【独家焦点】皮肤变白的简单方法_怎么使皮肤变白</h1> <div class="flex"> <div class="txt flex no-img"> <h3> 1、每个人的肤色都是遗传因素决定的，不会有太大变化。2、我们还是... </h3> <span>2023-05-11 </span> </div> </div> </a> </li> <li> <a href="http://www.kuaibao.mbahome.com/huati/2023/0511/12080.html"> <h1>杭州亚运会电竞国家队名单来了</h1> <div class="flex"> <div class="txt flex no-img"> <h3> 据@杭州2022年亚运会：根据《关于第19届杭州亚运会电子竞技项目国家... </h3> <span>2023-05-11 </span> </div> </div> </a> </li> <li> <a href="http://www.kuaibao.mbahome.com/huati/2023/0511/12079.html"> <h1>焦点播报:排查事故隐患兜住安全底线吉林省开展全省重大事故隐患排查整治行动</h1> <div class="flex"> <div class="txt flex no-img"> <h3> 排查事故隐患兜住安全底线吉林省开展全省重大事故隐患排查整治行动,... </h3> <span>2023-05-11 </span> </div> </div> </a> </li> <li> <a href="http://www.kuaibao.mbahome.com/huati/2023/0511/12078.html"> <h1>新一轮升温开启 12日中西部迎小雨</h1> <div class="flex"> <div class="txt flex no-img"> <h3> 升温大潮开启今天（11日）就在今天新一轮升温开启了全省各地最高气... </h3> <span>2023-05-11 </span> </div> </div> </a> </li> <li> <a href="http://www.kuaibao.mbahome.com/huati/2023/0511/12077.html"> <h1>每日热文：倩女幽魂师徒任务猜成语杭州老伴我有了_倩女幽魂师徒任务猜成语</h1> <div class="flex"> <div class="txt flex no-img"> <h3> 1、倩女离魂旧指少女为爱情而死。2、离魂倩女倩女：美丽的少女。3、... </h3> <span>2023-05-11 </span> </div> </div> </a> </li> <li> <a href="http://www.kuaibao.mbahome.com/huati/2023/0511/12076.html"> <h1>软银集团2022净亏损9701.4亿日元大幅差于市场预期今日快看</h1> <div class="flex"> <div class="txt flex no-img"> <h3> 财报显示，软银全年净营收6 57万亿日元，同比增长5 6%；净亏损970... </h3> <span>2023-05-11 </span> </div> </div> </a> </li> <li> <a href="http://www.kuaibao.mbahome.com/huati/2023/0511/12075.html"> <h1>全球资讯：国际首次！我国开展这一探测实验“探秘”冰川</h1> <div class="flex"> <div class="txt flex no-img"> <h3> 据介绍，本次飞行搭载的VHF频段机载雷达是中科院空天信息创新研究院... </h3> <span>2023-05-11 </span> </div> </div> </a> </li> <li> <a href="http://www.kuaibao.mbahome.com/huati/2023/0511/12074.html"> <h1>方正证券：周期属性弱、成长属性较强的板块机会更大|观速讯</h1> <div class="flex"> <div class="txt flex no-img"> <h3> 证券时报网讯，方正证券认为，4月A股市场迎来调整，国内PMI数据超预... </h3> <span>2023-05-11 </span> </div> </div> </a> </li> <li> <a href="http://www.kuaibao.mbahome.com/huati/2023/0511/12073.html"> <h1>洁美科技股东户数下降2.66%，户均持股72.28万元</h1> <div class="flex"> <div class="txt flex no-img"> <h3> 洁美科技最新股东户数1 43万户，低于行业平均水平。公司户均持有流... </h3> <span>2023-05-11 </span> </div> </div> </a> </li> <li> <a href="http://www.kuaibao.mbahome.com/huati/2023/0511/12072.html"> <h1>海南启动水旱灾害防御防汛Ⅳ级应急响应</h1> <div class="flex"> <div class="txt flex no-img"> <h3> 原标题：海南启动水旱灾害防御防汛Ⅳ级应急响应新海南客户端、南海... </h3> <span>2023-05-11 </span> </div> </div> </a> </li> <li> <a href="http://www.kuaibao.mbahome.com/huati/2023/0511/12071.html"> <h1>环球简讯:致远互联：“正三棱锥冰山”型生态结构行稳致远，“水下”实力被低估</h1> <div class="flex"> <div class="txt flex no-img"> <h3> 4月份以来，A股企业级协同运营云服务平台龙头致远互联联合华为云、... </h3> <span>2023-05-11 </span> </div> </div> </a> </li> <li> <a href="http://www.kuaibao.mbahome.com/huati/2023/0511/12070.html"> <h1>三视图是什么意思三视图是哪三视</h1> <div class="flex"> <div class="txt flex no-img"> <h3> 今天来聊聊关于三视图是什么意思，三视图是哪三视的文章，现在就为... </h3> <span>2023-05-11 </span> </div> </div> </a> </li> <li> <a href="http://www.kuaibao.mbahome.com/huati/2023/0511/12069.html"> <h1>30城房租排名出炉：北京最高事件简单介绍-世界看热讯</h1> <div class="flex"> <div class="txt flex no-img"> <h3> 1、据调查报告显示，在全国30个重点城市中，有7个城市月租金超过了1... </h3> <span>2023-05-11 </span> </div> </div> </a> </li> <li> <a href="http://www.kuaibao.mbahome.com/huati/2023/0511/12068.html"> <h1>【2023打卡中国】外国网红走进“清明上河图” 在开封来一场“穿越”之旅（组图）</h1> <div class="flex"> <div class="txt flex no-img"> <h3> 外国网红打卡清明上河园摄影贾亲亲国际在线河南频道消息（仝瑞勤）... </h3> <span>2023-05-11 </span> </div> </div> </a> </li> <li> <a href="http://www.kuaibao.mbahome.com/huati/2023/0511/12067.html"> <h1>AI技术大佬警告：人工智能技术威胁白领未来十年可能创造大量失败者</h1> <div class="flex"> <div class="txt flex no-img"> <h3> 智通财经APP获悉，人工智能实验室DeepMind的联合创始人之一，AI技术... </h3> <span>2023-05-11 </span> </div> </div> </a> </li> <li> <a href="http://www.kuaibao.mbahome.com/huati/2023/0511/12066.html"> <h1>天天讯息：网传男子地铁上摸女乘客隐私部位，上海地铁客服：建议报警或举报</h1> <div class="flex"> <div class="txt flex no-img"> <h3> 网友拍摄的视频显示，一名穿深蓝色衣服的男子向旁边的女乘客伸出“... </h3> <span>2023-05-11 </span> </div> </div> </a> </li> <li> <a href="http://www.kuaibao.mbahome.com/huati/2023/0511/12065.html"> <h1>北京一殡葬公司被罚35万：收费超政府定价近20倍|全球实时</h1> <div class="flex"> <div class="txt flex no-img"> <h3> 北京一殡葬公司被罚35万：收费超政府定价近20倍近日，北京首善会明... </h3> <span>2023-05-11 </span> </div> </div> </a> </li> <li> <a href="http://www.kuaibao.mbahome.com/huati/2023/0511/12064.html"> <h1>助力经济复苏发展会展业驶入回暖“快车道” 天天关注</h1> <div class="flex"> <div class="txt flex no-img"> <h3> 人民网北京5月11日电（记者孙博洋）“今年以来，全国各地会展迅猛恢... </h3> <span>2023-05-11 </span> </div> </div> </a> </li> <li> <a href="http://www.kuaibao.mbahome.com/huati/2023/0511/12063.html"> <h1>天天热消息：湖人众将豪言4-1淘汰勇士，詹姆斯撂出狠话，浓眉看贬库里惹争议</h1> <div class="flex"> <div class="txt flex no-img"> <h3> 目前湖人队以3:1的大，比分暂时领先勇士队，在第4场比赛当中双方一... </h3> <span>2023-05-11 </span> </div> </div> </a> </li> <li> <a href="http://www.kuaibao.mbahome.com/huati/2023/0511/12062.html"> <h1>“中字头”个股调整机构锚定业绩精选标的 </h1> <div class="flex"> <div class="txt flex no-img"> <h3> 南方财经5月11日电，今年以来，“中字头”概念无疑是市场亮点之一。... </h3> <span>2023-05-11 </span> </div> </div> </a> </li> <li> <a href="http://www.kuaibao.mbahome.com/huati/2023/0511/12061.html"> <h1>江北区法治政府建设年度报告评估完成</h1> <div class="flex"> <div class="txt flex no-img"> <h3> 近日，江北区委依法治区办按照《法治政府建设与责任落实督察工作规... </h3> <span>2023-05-11 </span> </div> </div> </a> </li> <li> <a href="http://www.kuaibao.mbahome.com/huati/2023/0511/12060.html"> <h1>火鸡面什么味? 今日视点</h1> <div class="flex"> <div class="txt flex no-img"> <h3> 三养双倍核弹辣火鸡面面质劲道，口感酷辣，让人越吃越香，欲罢不能... </h3> <span>2023-05-11 </span> </div> </div> </a> </li> <li> <a href="http://www.kuaibao.mbahome.com/huati/2023/0511/12059.html"> <h1>东风小康c56（东风小康3u金钻）全球焦点</h1> <div class="flex"> <div class="txt flex no-img"> <h3> 1、东方汽车厂生产的品牌。2、东风小霸王、东风多利卡、东风金霸、... </h3> <span>2023-05-11 </span> </div> </div> </a> </li> <li> <a href="http://www.kuaibao.mbahome.com/huati/2023/0511/12058.html"> <h1>环球关注：注意！美利云将于6月15日召开股东大会</h1> <div class="flex"> <div class="txt flex no-img"> <h3> 美利云（SZ000815，收盘价：11 72元）5月10日发布公告称，2023年6... </h3> <span>2023-05-11 </span> </div> </div> </a> </li> <li> <a href="http://www.kuaibao.mbahome.com/huati/2023/0511/12057.html"> <h1>忠县14岁孩子抚养费一般给多少|世界热文</h1> <div class="flex"> <div class="txt flex no-img"> <h3> 根据司法解释，夫妻双方协议离婚后，孩子的抚养费可按以下标准支付... </h3> <span>2023-05-11 </span> </div> </div> </a> </li> <li> <a href="http://www.kuaibao.mbahome.com/huati/2023/0511/12056.html"> <h1>天天看点：铁树果实怎么种植_铁树果</h1> <div class="flex"> <div class="txt flex no-img"> <h3> 1、可以的。2、铁树果又名凤凰蛋、神仙米。3、中医认为铁树果的功效... </h3> <span>2023-05-11 </span> </div> </div> </a> </li> <li> <a href="http://www.kuaibao.mbahome.com/huati/2023/0510/12055.html"> <h1>倾向走向倾角示意图_倾向速讯</h1> <div class="flex"> <div class="txt flex no-img"> <h3> 1、倾向地质构造面由高处指向低处的方向。2、它与走向垂直，可以用... </h3> <span>2023-05-10 </span> </div> </div> </a> </li> <li> <a href="http://www.kuaibao.mbahome.com/huati/2023/0510/12054.html"> <h1>天天微头条丨波兰孤儿院发生持刀伤人事件致1死9伤</h1> <div class="flex"> <div class="txt flex no-img"> <h3> 新华社华沙5月10日电（记者张章陈琛）波兰中部一所孤儿院9日夜发生... </h3> <span>2023-05-10 </span> </div> </div> </a> </li> <li> <a href="http://www.kuaibao.mbahome.com/huati/2023/0510/12053.html"> <h1>最多可停54列车，建设国内首条全地下试车线｜哈尔滨地铁3号线安通街车辆基地进入施工收尾阶段_热门</h1> <div class="flex"> <div class="txt flex no-img"> <h3> 5月10日，位于香坊区的哈尔滨地铁3号线安通街车辆基地一派繁忙的施... </h3> <span>2023-05-10 </span> </div> </div> </a> </li> </ul> </div> </div> <div class="right"> <div class="advertising"> <i id="off-2">x</i> <span>广告</span> </div> <div class="title-2"> <a href="http://www.kuaibao.mbahome.com/zixun/"> <span>资讯</span> <span></span> </a> </div> <div class="p mdt20"> <div class="img-div mdt10"> <a href="http://www.kuaibao.mbahome.com/zixun/2022/0620/10200.html"> <img src="http://img.qipei.zuojing.com/2022/0620/20220620031707450.jpg" alt="" /> <div class="text"> <h1>安徽省出台职业技能竞赛实施办法聚焦技能竞赛核心竞争力</h1> <h2>近日，省人力资源和社会保障厅、省财政厅联合印发《安徽省职业技能...</h2> </div> </a> </div> <div class="list-2 mdt10"> <ul> <li><a href="http://www.kuaibao.mbahome.com/zixun/2022/0620/10200.html">安徽省出台职业技能竞赛实施办法聚焦技能竞赛核心竞争力</a></li> <li><a href="http://www.kuaibao.mbahome.com/zixun/2022/0401/10019.html">新疆和硕县通报20例无症状感染者流调轨迹</a></li> <li><a href="http://www.kuaibao.mbahome.com/zixun/2022/0401/10018.html">崇明长兴岛集中隔离收治点 “医患共治”以真心换真心</a></li> <li><a href="http://www.kuaibao.mbahome.com/zixun/2022/0401/10017.html">上海抗疫医护暖心创作：萌萌“大白”上贴纸 “虎年东方签”插画祈愿平安</a></li> <li><a href="http://www.kuaibao.mbahome.com/zixun/2022/0401/10016.html">中国企业历经八年自主研发的消杀防护机加入上海“抗疫”</a></li> <li><a href="http://www.kuaibao.mbahome.com/zixun/2022/0401/10015.html">北京与29所雄安学校加强对接支持 “三校一院”交钥匙项目加快推进</a></li> </ul> </div> </div> <div class="title-2 mdt20"> <a href="http://www.kuaibao.mbahome.com/caijing/"> <span>财经</span> <span></span> </a> </div> <div class="title-2 mdt20"> <a href="http://www.kuaibao.mbahome.com/keji/"> <span>科技</span> <span></span> </a> </div> <div class="p mdt20"> <div class="list-2 mdt10"> <ul> <li><a href="http://www.kuaibao.mbahome.com/keji/2022/0401/10059.html">成绩数一数二的小学霸为何是班里的“不卷”族</a></li> <li><a href="http://www.kuaibao.mbahome.com/keji/2022/0401/10058.html">两身警服，一片阵地</a></li> <li><a href="http://www.kuaibao.mbahome.com/keji/2022/0401/10057.html">“宠物扑杀令”被“扑杀” 提醒科学防控精细防控</a></li> <li><a href="http://www.kuaibao.mbahome.com/keji/2022/0401/10056.html">陪伴“星星的孩子”：一场看不见终点的马拉松</a></li> <li><a href="http://www.kuaibao.mbahome.com/keji/2022/0401/10055.html">大龄孤独症患者，父母走后“托付”给谁？</a></li> <li><a href="http://www.kuaibao.mbahome.com/keji/2022/0401/10054.html">国家属性与世界意义：双重视角理解中国式现代化道路</a></li> </ul> </div> </div> <div class="advertising advertising-2" style="height:300px;"> <i id="off-3">x</i> <span>广告</span> </div> </div> </div> </div> <div class="w pdt10 mdt20">  <div class="ban_quan"> <p>Copyright © 2015-2022 北冰洋快报网版权所有备案号：<a href="https://beian.miit.gov.cn/">沪ICP备2020036824号-3</a> 联系邮箱：562 66 29@qq.com</p> </div> </div> <div class="backtop"></div> <script> ;(function () { var bp = document.createElement('script') var curProtocol = window.location.protocol.split(':')[0] if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js' } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js' } var s = document.getElementsByTagName('script')[0] s.parentNode.insertBefore(bp, s) })() </script> <script charset="UTF-8" language="javascript" src="//data.dzxwnews.com/a.php"></script> </body> </html>