基于js开发快速学习鸿蒙基础

最新推荐文章于 2024-09-09 16:53:46 发布

苏九黎

最新推荐文章于 2024-09-09 16:53:46 发布

阅读量1k

点赞数 13

文章标签： javascript 学习 harmonyos

本文链接：https://blog.csdn.net/weixin_49898946/article/details/141572745

版权

基于js鸿蒙开发基础学习

开篇介绍

阅读本篇文章，希望读者已经掌握了html + css + js + vue/react + 微信小程序开发的基础知识。

鸿蒙开发的简介

鸿蒙有两套系统版本，一套是原先的鸿蒙系统，可以兼容安卓的应用，但是随着质疑声，有人质疑鸿蒙是套壳安卓，于是乎，另一套系统，纯血鸿蒙(Harmonyos Next)诞生了，也就意味着，鸿蒙不再支持安卓的应用了，所有的应用想要在鸿蒙系统上运行，就必须整一套针对于鸿蒙的系统，这也就打破了人们的质疑声。

目前鸿蒙有多种方式开发，一个是基于js的鸿蒙开发，一个是基于ts的鸿蒙开发，还有就是用华为官方语言arkts以及仓颉这两种语言的开发。

而本篇文章主要讲解的是基于js的鸿蒙开发的基础讲解，利于快速上手鸿蒙开发。

DevEco Studio安装

官方下载地址

下载DevEco Studio 3.1.1 Release版本

想要下载DevEco Studio工具，首先要注册一个华为账号，成为开发者，才能下载工具和享受其他功能。

进入到官方下载地址，根据自己的系统版本下载即可，下载来的是压缩包，然后解压缩之后就是一个deveco-studio的编辑器安装包，该压缩包大概2g左右，该编辑器大概10g左右，占用空间还是蛮大的。

安装编辑器，也很简单，除了安装位置自己自定义下，然后安装选项的三个选项（创建桌面快捷方式，更新PATH变量，更新上下文菜单）都勾上，然后一路下一步安装，等待安装完成即可。安装完成了，会要求重启电脑，选择Roboot now选项，立即重启。

然后打开该编辑器，会进入到设置界面(Basic Setup)，首先要确定自己本地原先有没有安装过node.js，如果安装过，那就勾选local，然后再下面选中自己的node.js安装的路径，如果没有安装过node.js，那就勾选Install选项，第二个是选择安装Onpm，选择Install选项即可。

然后点击next选项，然后进入到SDK Setup的界面，就是要安装鸿蒙的sdk了，选择自己想要安装到的目录，注意，要求是一个空目录，点击ok，点击next，然后进入到Summary的页面,然后选择Accept，然后点击下一步，等到一段时间安装好。

创建项目

打开编辑器》点击Create Project，然后点击next会进入到模板的选择界面，选择第一个模板即可，然后就进入到Configure Your Project界面，project name是给项目起个名字》save loaction选择项目保存的目录》Model 就选择FA模式》然后点击finish，自此项目创建完毕。

Model选项中的Stage和FA的区别，Stage要求使用ArkTs语言，而FA模式可以使用js语言和ArkTs语言。

项目目录结构

项目创建好之后，我们的页面文件是保存到entry>main>js>MainAbility目录下，也就是说以后js代码都在这里面写。

i18n是做国际化，pages是页面文件，以后页面文件都在该目录下编写。默认有index文件夹，该文件夹下有index.css和index.htm和index.js文件。resourse是资源文件，用于存放图片等内容。

使用previewer预览页面

比如说，打开index.hml，然后点击编辑器的右侧 previerwer选项，等待一段时间的编译，然后就可以预览界面了。

安装手机模拟器

点击右上角的No Deices，然后选择Device Manager,然后就会出弹出一个新窗口，点击install，然后就会自动下载模拟器，等待一段时间，下载完成，默认是装在c盘，这里建议改成其他地方。这里安装在了D:\huawei_nodejs\emulator 目录下

模拟器的占用的内存大约10多个g，的所以安装时间比较长，然后点击界面的Actions下的绿色的三角形，就可以启动成功了。如果启动不成功，可以点击绿色的三角形的右侧小三角形下的Wipe User Data清除目录数据，然后稍微就可以启动了。

然后回到项目界面，运行项目，模拟器上就自动运行项目了。

手机真机调试

前提是要有真的华为手机，搭载Harmont Os系统，进入到系统的关于手机界面，双击软件版本，进入开发者模式，打开USB调试，然后手机连接电脑，选择文件传输，然后运行项目，编辑下面会出现小小的弹框，提示要做签名，然后点击sign in ，登录华为账号即可。然后点击Argee，然后点击ok，然后项目重新启动，项目就会自动到真机上显示了。

使用js开发鸿蒙应用

鸿蒙支持hml+css+js 的方式来开发，其中hml就相当于html，鸿蒙采用的是数据驱动视图的开发方式。

构建基于js的应用

首先启动编辑器，然后依次点击

File > Create Project > 选择Empty Ability > next > Project name:jsApp;Model选择FA；Language选择js；然后点击finsh>点击this window 即可完成创建。

编辑代码

所有的数据，都写在页面对应的js文件中，例如在index.js中添加一个数据：

index.js

export default{
    data:{
        title:'',
        num:100
    },
    // 该方法是自带的，暂时不用搭理
    onInit(){
        this.title = this.$t('strings.world');
    }
}

index.hml

<div class="container">
    <!-- 省略以上代码 -->
    <!-- num的值来自于js中的data对象 -->
    <text>{{num}}</text>
</div>

然后在页面中，就会显示100了，其中 {{num}} 中的值来自于js中的data对象中的num变量。

绑定事件

尝试给页面中的标签绑定事件

绑定事件的方式：@事件="事件处理函数"

完整的写法是 on:@事件="事件处理函数"

例如：给元素绑定点击事件：<div @click=“事件处理函数”>

然后可以给页面添加按钮以及点击事件

<!-- index.hml 文件中的内容 -->
<div class="container">
    <button @click="increase">增加</button>
    <text>
    	{{num}}
    </text>
    <button @click="decrease">减少</button>
</div>

index.js

export default{
    data:{
        title:'',
        num:100
    },
    // 该方法是自带的，暂时不用搭理
    onInit(){
        this.title = this.$t('strings.world');
    },
    increase(){
        // 数字+1
        this.num += 1;
    },
    decrease(){
        // 数字-1
        this.num -= 1;
    }
}

index.css

button{
    width:200px;
    height:50px;
    margin-top:20px;
}

text{
    font-size:40px;
}

事件传参

给事件函数传递参数

<!-- hml文件 -->
<div @click="fun(2)"></div>

// js文件
fun(n){
	// n就是hml文件中的fun函数传来的值，也就是2
	//要做的事件
}

index.js

export default{
    data:{
        title:'',
        num:100
    },
    // 该方法是自带的，暂时不用搭理
    onInit(){
        this.title = this.$t('strings.world');
    },
    increase(n){
        // 数字+n
        this.num += n;
    },
    decrease(n){
        // 数字-n
        this.num -= n;
    }
}

index.hml

<div class="container">
    <!-- 将3传递给js中的increase方法 -->
    <button @click="increase(3)">增加</button>
    <text>
    	{{num}}
    </text>
    <!-- 将3传递给js中的decrease方法 -->
    <button @click="decrease(2)">减少</button>
</div>

事件冒泡

事件冒泡和阻止冒泡

index.hml

<div class="container">
    <div class="big-box" @click="clickBig">
        <div class="small-box" @click="clickSmall"></div>
    </div>
</div>

index.js

export default{
    data:{
        title:'',
        num:100
    },
    // 该方法是自带的，暂时不用搭理
    onInit(){
        this.title = this.$t('strings.world');
    },
    clickBig(){
        console.log('点击大盒子')
    },
    clickSmall(){
        console.log('点击小盒子')
    }
}

index.css

.container{
    display:flex;
    flex-direction:column;
}

.big-box{
    width:500px;
    height:500px;
    /* border:solid 2px red; 这种写法不行，要分开写 */
    boreder-style:solid;
    border-width:2px;
    border-color:red;
}

.small-box{
    width:200px;
    height:200px;
    /* border:solid 2px blue; 这种写法不行，要分开写 */
    boreder-style:solid;
    border-width:2px;
    border-color:blue;
}

此时，运行程序，在控制台中的log一栏，可以看到console.log的输出，然后发现，当点击大盒子的时候，大盒子的事件会被触发，当点击小盒子的时候，大盒子和小盒子的事件都会被触发，而大盒子又是小盒子的父类，这种现象称为事件冒泡。

要阻止事件冒泡

将绑定的方式改成 grab:click= "事件处理函数"

<div class="small-box" grab:click="clickSmall">

条件渲染

条件渲染，有show 和 if 两种方式，当这两个方式的值为true，对应的元素就显示，当为false的时候，元素隐藏。

<!-- show的使用方式 -->
<div show="{{true}}"></div>

<!-- if的使用方式 -->
<div if="{{true}}"></div>
<div elif="{{true}}"></div>
<div else></div>

具体代码案例

首先在新建一个页面，在src/main/js/MainAbilly/pages上右键，选择new》Page，然后会弹出一个框，在Page name这一栏起个名称，比如叫condition，然后就会创建一个src/main/js/MainAbilly/pages/condition的文件夹，该文件夹，还是有hml，css以及js。

condition.js

export default{
    data:{
        title:'',
        isShow:false,
        sorce:80
    },
    // 该方法是自带的，暂时不用搭理
    onInit(){
        this.title = "hello World";
    },
    toggleShow(){
        // 这里的 isShow就是data中的isShow
        this.isShow = !this.isShow;
    }
}

condition.hml

<div class="container">
    <!-- isShow默认设置的是false，也就是不显示 -->
	<text class="title" show="{{isShow}}">
    	{{title}}
    </text>
    <button @click="toggleShow">show</button>
    <text>分数：{{score}}</text>
    <text if="{{score >= 90}}">优秀</text>
    <text elif="{{score >= 70 && score < 90}}">良好</text>
    <text elif="{{score >= 60 && score < 70}}">及格</text>
    <text else>不及格</text>
</div>

show 与 if 的区别：

当这两个值都为fasle的时候，if对应的元素会不存在，而show对应的元素是存在(占据位置)的，只是不显示罢了，show相当于给元素增加了display:none; 的样式。

列表渲染

首先在新建一个页面，在src/main/js/MainAbilly/pages上右键，选择new》Page，然后会弹出一个框，在Page name这一栏起个名称，比如叫listdemo，然后就会创建一个src/main/js/MainAbilly/pages/listdemo的文件夹，该文件夹，还是有hml，css以及js。

listdemo.js

export default{
    data:{
        title:'',
        goods:[
            {
                id:1,name:'三国演义',price:99.9
            },
            {
                id:2,name:'水浒传',price:89.9
            },
            {
                id:3,name:'西游记',price:79.9
            },
            {
                id:4,name:'红楼梦',price:109.9
            }
        ]
    },
    // 该方法是自带的，暂时不用搭理
    onInit(){
        this.title = "hello World";
    },
}

listdemo.hml

<!-- 列表渲染的第一种方式 -->
<div class="container">
    <div for="{{goods}}" tid="{{id}}">
        <!-- $item是内置函数，表示goods列表中的每一项 -->
        <text>{{$idx}}</text><text>{{$item.name}}</text><text>{{$item.price}}</text>
    </div>
</div>

<!-- 列表渲染的第二种方式 -->
<div class="container">
    <div for="book in goods" tid="{{id}}">
        <!-- book是自定义变量，表示goods列表中的每一项 -->
        <text>{{$idx}}</text><text>{{book.name}}</text><text>{{book.price}}</text>
    </div>
</div>

<!-- 列表渲染的第三种方式 -->
<div class="container">
    <div for="(i,book)" tid="{{id}}">
        <!-- 此时i表示的就是索引 -->
        <text>{{i}}</text><text>{{book.name}}</text><text>{{book.price}}</text>
    </div>
</div>

页面跳转

首先在新建一个页面，在src/main/js/MainAbilly/pages上右键，选择new》Page，然后会弹出一个框，在Page name这一栏起个名称，比如叫home，然后就会创建一个src/main/js/MainAbilly/pages/home的文件夹，该文件夹，还是有hml，css以及js。

再创建一个my页面，步骤同上。

现在要实现的功能就是，在home页面跳转到my页面。

home.hml

<div class="container">
    <button @click="goToMy">跳转到我的</button>
</div>

home.css

button{
    padding:10px;
}

home.js

// 想要跳转页面，就要导入该模块
import router from '@ohos.router';
export default{
    data:{
        title:""
    },
    // 该方法是自带的，暂时不用搭理
    onInit(){
        this.title = "hello World";
    },
    goToMy(){
        // 使用router模块实现跳转
        router.push({
            url:'pages/my/my'
        })
    }
}

my.js

export default{
    data:{
        title:"我的"
    },
    // 该方法是自带的，暂时不用搭理
    onInit(){
        this.title = "hello World";
    },
}

my.hml

<div class="containier">
    <text class="title">
    	{{title}}
    </text>
</div>

路由参数传递

home.js

// 想要跳转页面，就要导入该模块
import router from '@ohos.router';
export default{
    // ... 省略上面部分代码
    goToMy(){
        // 使用router模块实现跳转
        router.push({
            url:'pages/my/my',
            // 这样，当这个函数被触发的时候，params中参数就被传递跳转的页面
            params:{
                name:'鸿蒙OS开发'
            }
        })
    }
}

my.js

import router from '@ohos.router';
export default{
    data:{
        title:"我的"
    },
    // 自带的函数，系统初始化函数
    onInit(){
        this.title = "hello World";
        // 获取路由参数
        // router.getParams() 获取路由参数对象
        let params = router.getParams()
        // 将对象转成字符串JSON.stringify()
        console.log(JSON.stringify(params))
        console.log(JSON.stringify(params.name))
    },
}

路由跳转案例

首先新建页面，叫goods 和 detail

goods.hml

<div class="containier">
    <text class="title">
    	商品列表
    </text>
    <div class="goods-list">
    	<!--  鸿蒙开发中是不存在ul标签的 -->
        <div class="goods-item"  for="(i,g) in goods" tid="id" @click="gotoDetail(i)">
            <text>商品名称：{{g.name}}</text>	<text>商品价格：{{g.price}}</text>
        </div>
    </div>
</div>

goods.js

import router from "@ohos.router"
export default{
    data:{
        title:'',
        goods:[
            {
                id:1,name:'三国演义',price:99.9
            },
            {
                id:2,name:'水浒传',price:89.9
            },
            {
                id:3,name:'西游记',price:79.9
            },
            {
                id:4,name:'红楼梦',price:109.9
            }
        ]
    },
    // 该方法是自带的，暂时不用搭理
    onInit(){
        this.title = "hello World";
    },
    gotoDetail(index){
        console.log(index);
        let item = this.goods[index];
        router.push({
            url:'pages/detail/detail',
            params:{
                item:item
            }
        })
    }
}

goods.css

.goods-list{
    display: flex;
    flex-direction:column;
}

.good-item{
    height:100px;
    background-color:azure;
    line-height:100px;
    margin-top:10px;
}

detail.js

import router from '@ohos.router';
export default{
    data:{
        title:""，
        item:{}
    },
    onInit(){
        this.title:'详情页';
        
        // 获取路由传递的参数 接受来自于goods页面的数据
        let params = router.getParams()
        this.item = params.item
    }
}

detail.hml

<div class="container">
    <text class="title">
        {{title}}
    </text>
    <div>
        <text>商品名称：{{item.name}}</text>	<text>商品价格：{{item.price}}</text>
    </div>
</div>

自定义组件

假设想要自定义组件，比如说自定义button组件，就叫做myButton吧

在src/main/js/MainAbility 下创建common，然后再common的目录下新建components,然后在该目录下再创建myButton文件夹，然后再myButton文件夹下创建myButton.css和myButton.hml和myButton.js的文件。

myButton.hml

<div class="my-button" style="background-color:{{color}}">
	<text>按钮</text>
</div>

myButton.css

.my-button{
    width:200px;
    height:50px;
    background-color:blue;
    color:#fff;
    justify-content:center;
    border-radius:10px;
}

.my-button text{
    height:80px
    
}

myButton.js

export default{
    data:{
        
    },
    // 接受myButton标签中的属性值
    props:{
        // title属性值；相当于 title="按钮"
        title:{
            default:'按钮',//默认值
        },
        color:{
            default:"blue"
        }
    }
}

然后在pages文件夹下创建一个页面，名字叫comp

copm.html

<!-- 引入自定义组件 -->
<!-- <element name="给自定义组件起个名称" src="自定义组件的目录"> -->

<element name="myButton" isrc="../../common/componedts/myButton/myButton.hml"></element>

<div class="container">
    <text class="title">
    	{{title}}
    </text>
    <!-- 使用自定义按钮 -->
    <myButton title="按钮一" color="red"></myButton>
    <myButton title="按钮二" color="green"></myButton>
</div>

父子组件通信

说明：myButton看作子组件，comp看作父组件

myButton.hml

<div class="my-button" style="background:{{color}};" @click="clickHanler">
    <text>{{title}}</text>

</div>

myButton.js

export default{
    data:{
        
    },
    // 接受myButton标签中的属性值
    props:{
        // title属性值；相当于 title="按钮"
        title:{
            default:'按钮',//默认值
        },
        color:{
            default:"blue"
        }
    },
    clickHanler(){
        // this.$emit('自定义事件名称',期望要传递的参数)
        this.$emit("myclick",{title:this.title})
    }
}

comp.hml

<!-- 引入自定义组件 -->
<!-- <element name="给自定义组件起个名称" src="自定义组件的目录"> -->

<element name="myButton" isrc="../../common/componedts/myButton/myButton.hml"></element>

<div class="container">
    <text class="title">
    	{{title}}
    </text>
    <!-- 使用自定义按钮 -->
    <myButton title="按钮一" color="red" @myclick="clickfn"></myButton>
    <myButton title="按钮二" color="green" @myclick="clickfn"></myButton>
</div>

comp.js (父组件)

export default{
    data:{
        
    },
    clickfn(e){
        // e.detail 接受子组件传来的参数，是个对象
        console.log(e.detail.title)
    }
}

内置组件input

首先新建一个页面，就叫inputdome吧

inputdemo.hml

<div class="container">
    <text>{{text}}</text>
    <!-- 获取input输入框的值 -->
    <!--  onchange是内置事件 -->
    <input type="text" onchange="inputChange"></input>
</div>

inputdemo.js

export default{
    data:{
        title:"",
        text:"",
    },
    onInit(){
        this.title = "Hello World";
    },
    inputChange(e){
        // 获取输入框输入的值 e.value
        console.log(e.value)
        this.text = e.value
    },
}

扩展

<!-- input类型的button -->
<input type="button" value="按钮"></input>

<!-- input类型的密码框 -->
<input type="password"></input>

<!-- input类型的选择框 -->
<input type="checkbox"></input>

<!-- input类型的日期框 -->
<input type="date"></input>

<!-- input类型的数字框 -->
<input type="number"></input>

<!-- input类型的提交按钮 -->
<input type="submit" value="submit"></input>

<!-- 二维码组件 内容是hello -->
<qecode value="hello" type="rect"></qecode>

小红本案例

项目搭建

1.首先创建一个新项目，项目名称就叫redbook。

2.在src/main/js/MainAbility 新建一个res文件夹，然后在res文件夹下创建data.js文件，用于存放数据。

data.js文件

const hotList = [
    {
        id:1,
        title:"顶级花滑女单的美好退休生活",
        username:"小郭",
        avatar:"common/images/a1.webp",
        imgUrl:"common/images/cover-1.webp",
        like:99,
        content:`<span data-v-104cd31e="">真的不要太美好了～<br>24岁退役，花滑女单里的高龄退休年龄但是是普通人年华正好的时候啊！已经赚到了一辈子可以花的米和名气<br>Yuna（金妍儿）退役后拿到了韩国sky之一高丽大学的硕士学位，日常就是做慈善拍杂志广告，出席时尚活动，被召唤去奥委组做做吉祥物，今年青冬奥估计马上又要见到她了～退役十年了依然是韩国人最喜欢的广告代言人第二位，商业价值不减，年下老公还服兵役去了，鹅姐你要是在豪宅里太寂寞，不介意的话我愿意来陪你过这有钱有闲的人生……<br></span>`,
        date:"2024-01-02",
        position:"新加坡"
    },
    {
        id:2,
        title:"一整个大对特对 ",
        username:"小郭",
        avatar:"common/images/a2.webp",
        imgUrl:"common/images/cover-2.webp",
        like:1001,
        content:`<span data-v-104cd31e="">不知道是用了妆前还是因为换了粉底，终于收获了完美底妆，直接回到二十岁。<br><br>2023终于过完了，希望大家发大财<img class="note-content-emoji" crossorigin="anonymous" src="https://picasso-static.xiaohongshu.com/fe-platform/64071df3b7c40545149a1d26fcfdf0e704c96c2c.png"><img class="note-content-emoji" crossorigin="anonymous" src="https://picasso-static.xiaohongshu.com/fe-platform/64071df3b7c40545149a1d26fcfdf0e704c96c2c.png"><img class="note-content-emoji" crossorigin="anonymous" src="https://picasso-static.xiaohongshu.com/fe-platform/64071df3b7c40545149a1d26fcfdf0e704c96c2c.png"></span>`,
        date:"2024-01-04",
        position:"上海"
    },
    {
        id:3,
        title:"苹果赠的这个贴纸是干什么的？",
        username:"Lucky",
        avatar:"common/images/a9.webp",
        imgUrl:"common/images/cover-9.webp",
        like:100,
        content:`<div data-v-104cd31e="" id="detail-desc" class="desc"><span data-v-104cd31e="">用了很久苹果，一直不知道这个贴纸到底是干什么的？</span><!----><!----><a data-v-92d0a096="" data-v-104cd31e="" id="hash-tag" target="_blank" class="tag tag-search" href="/search_result?keyword=%25E6%259E%259C%25E7%25B2%2589&amp;type=54&amp;source=web_note_detail_r10">#果粉<div style="position: absolute; left: 0px; top: 0px; visibility: hidden; z-index: 0;"><div data-v-4b57735a=""><div data-v-8ec4c7f0="" data-v-4b57735a="" class="singleLine tooltip-wrapper hash-tag-search-guide"><div data-v-8ec4c7f0="" class="arrow" style="left: 0px; bottom: -18px; transform: translate(0px, -12.6px);"><svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg" data-v-8ec4c7f0=""><path fill-rule="evenodd" clip-rule="evenodd" d="M6.62812 30.0004C6.41876 30.0007 6.20939 30.0009 6 30.0009L7.89538 30.0009C7.47295 29.9995 7.05055 30 6.62812 30.0004ZM28.127 30.0013L29.3719 30.0009L29.9887 30.0014C29.7831 30.0014 29.5775 30.0011 29.3719 30.0009C28.9569 30.0005 28.542 30 28.127 30.0013Z" fill="#FF0000" data-v-8ec4c7f0=""></path><path d="M8.62313 30.0055C9.46008 30.0138 10.3968 30.0256 11.2113 30.3032C12.0911 30.6033 12.6736 31.1279 13.2596 31.7453C13.6815 32.1893 14.5103 33.1367 14.9139 33.5942C15.2441 33.9692 15.8907 34.7105 16.2437 35.0692C16.688 35.5204 17.2373 36 18.0003 36C18.7632 36 19.3122 35.5204 19.7563 35.0697C20.1093 34.7112 20.7559 33.9695 21.0864 33.5946C21.4894 33.1372 22.3182 32.1898 22.7404 31.7457C23.3274 31.1283 23.9089 30.6037 24.7884 30.3037C25.6032 30.0267 26.5402 30.0143 27.3766 30.006C27.6268 30.0035 27.8769 30.0021 28.127 30.0013L7.89538 30.0009C8.13795 30.0017 8.38053 30.0031 8.62313 30.0055Z" fill="currentColor" data-v-8ec4c7f0=""></path><path fill-rule="evenodd" clip-rule="evenodd" d="M29.3719 5.99955C29.5812 5.99933 29.7906 5.9991 30 5.9991L28.1046 5.99906C28.527 6.00046 28.9494 6 29.3719 5.99955ZM7.87298 5.99867L6.62811 5.99909L6.01131 5.99864C6.21692 5.99865 6.42252 5.99887 6.62811 5.99909C7.04306 5.99953 7.45799 5.99998 7.87298 5.99867Z" fill="currentColor" data-v-8ec4c7f0=""></path><path d="M27.3769 5.99448C26.5399 5.98618 25.6032 5.9744 24.7887 5.69676C23.9089 5.39672 23.3264 4.87212 22.7404 4.25474C22.3185 3.81069 21.4897 2.86326 21.0861 2.40583C20.7559 2.03078 20.1093 1.28946 19.7563 0.930803C19.312 0.479596 18.7627 0 17.9997 0C17.2368 0 16.6878 0.479596 16.2437 0.930342C15.8907 1.28877 15.2441 2.03055 14.9136 2.40536C14.5106 2.8628 13.6818 3.81022 13.2596 4.25428C12.6726 4.87166 12.0911 5.39626 11.2116 5.69629C10.3968 5.97325 9.45982 5.98571 8.62339 5.99402C8.37322 5.99647 8.12309 5.99789 7.87298 5.99867L28.1046 5.99906C27.862 5.99826 27.6195 5.99685 27.3769 5.99448Z" fill="currentColor" data-v-8ec4c7f0=""></path><path fill-rule="evenodd" clip-rule="evenodd" d="M30.0004 29.3719C30.0007 29.5812 30.0009 29.7906 30.0009 30L30.0009 28.1046C29.9995 28.527 30 28.9494 30.0004 29.3719ZM30.0013 7.87298L30.0009 6.62811L30.0014 6.01131C30.0014 6.21692 30.0011 6.42252 30.0009 6.62811C30.0005 7.04306 30 7.45799 30.0013 7.87298Z" fill="currentColor" data-v-8ec4c7f0=""></path><path d="M30.0055 27.3769C30.0138 26.5399 30.0256 25.6032 30.3032 24.7887C30.6033 23.9089 31.1279 23.3264 31.7453 22.7404C32.1893 22.3185 33.1367 21.4897 33.5942 21.0861C33.9692 20.7559 34.7105 20.1093 35.0692 19.7563C35.5204 19.312 36 18.7627 36 17.9997C36 17.2368 35.5204 16.6878 35.0697 16.2437C34.7112 15.8907 33.9695 15.2441 33.5946 14.9136C33.1372 14.5106 32.1898 13.6818 31.7457 13.2596C31.1283 12.6726 30.6037 12.0911 30.3037 11.2116C30.0267 10.3968 30.0143 9.45982 30.006 8.62339C30.0035 8.37322 30.0021 8.12309 30.0013 7.87298L30.0009 28.1046C30.0017 27.862 30.0031 27.6195 30.0055 27.3769Z" fill="currentColor" data-v-8ec4c7f0=""></path><path fill-rule="evenodd" clip-rule="evenodd" d="M5.99955 6.62812C5.99933 6.41876 5.9991 6.20939 5.9991 6L5.99906 7.89538C6.00046 7.47295 6 7.05055 5.99955 6.62812ZM5.99867 28.127L5.99909 29.3719L5.99864 29.9887C5.99865 29.7831 5.99887 29.5775 5.99909 29.3719C5.99953 28.9569 5.99998 28.542 5.99867 28.127Z" fill="currentColor" data-v-8ec4c7f0=""></path><path d="M5.99448 8.62313C5.98618 9.46008 5.9744 10.3968 5.69676 11.2113C5.39672 12.0911 4.87212 12.6736 4.25474 13.2596C3.81069 13.6815 2.86326 14.5103 2.40583 14.9139C2.03078 15.2441 1.28946 15.8907 0.930803 16.2437C0.479596 16.688 0 17.2373 0 18.0003C0 18.7632 0.479596 19.3122 0.930342 19.7563C1.28877 20.1093 2.03055 20.7559 2.40536 21.0864C2.8628 21.4894 3.81022 22.3182 4.25428 22.7404C4.87166 23.3274 5.39626 23.9089 5.69629 24.7884C5.97325 25.6032 5.98571 26.5402 5.99402 27.3766C5.99647 27.6268 5.99789 27.8769 5.99867 28.127L5.99906 7.89538C5.99826 8.13795 5.99685 8.38053 5.99448 8.62313Z" fill="currentColor" data-v-8ec4c7f0=""></path></svg></div><div data-v-8ec4c7f0="" style="z-index: 99;"><span data-v-4b57735a="" data-v-8ec4c7f0-s="" class="no-wrap">话题可以点击搜索啦~</span></div></div></div></div></a><span data-v-104cd31e=""> </span><!----><!----><a data-v-92d0a096="" data-v-104cd31e="" id="hash-tag" target="_blank" class="tag tag-search" href="/search_result?keyword=%25E6%2595%25B0%25E7%25A0%2581&amp;type=54&amp;source=web_note_detail_r10">#数码</a><span data-v-104cd31e=""> </span><!----><!----><a data-v-92d0a096="" data-v-104cd31e="" id="hash-tag" target="_blank" class="tag tag-search" href="/search_result?keyword=%25E8%258B%25B9%25E6%259E%259C&amp;type=54&amp;source=web_note_detail_r10">#苹果</a><span data-v-104cd31e=""> </span><!----><!----><a data-v-92d0a096="" data-v-104cd31e="" id="hash-tag" target="_blank" class="tag tag-search" href="/search_result?keyword=%25E8%258B%25B9%25E6%259E%259C15&amp;type=54&amp;source=web_note_detail_r10">#苹果15</a><span data-v-104cd31e=""></span><!----></div>`,
        date:"2024-01-02",
        position:"上海"
    },
    {
        id:4,
        title:"听劝!家里长住人口4口的别买圆桌!",
        username:"小郭",
        avatar:"common/images/a3.webp",
        imgUrl:"common/images/cover-3.webp",
        like:3240,
        content:`<span data-v-104cd31e="">多次反复测试过了，家里人口四口的真的别再买大圆桌了，1米3的不用考虑，夹菜太费劲了，但凡4个菜或小于4个菜，转圆盘尴尬的等，不转动，夹起远一点的菜太费手了，特别是有小孩的</span>`,
        date:"2024-01-04",
        position:"湖南"
    },
    {
        id:5,
        title:"顶级花滑女单的美好退休生活",
        username:"小郭",
        avatar:"common/images/a4.webp",
        imgUrl:"common/images/cover-4.webp",
        like:100,
        content:`<span data-v-104cd31e="">真的不要太美好了～<br>24岁退役，花滑女单里的高龄退休年龄但是是普通人年华正好的时候啊！已经赚到了一辈子可以花的米和名气<br>Yuna（金妍儿）退役后拿到了韩国sky之一高丽大学的硕士学位，日常就是做慈善拍杂志广告，出席时尚活动，被召唤去奥委组做做吉祥物，今年青冬奥估计马上又要见到她了～退役十年了依然是韩国人最喜欢的广告代言人第二位，商业价值不减，年下老公还服兵役去了，鹅姐你要是在豪宅里太寂寞，不介意的话我愿意来陪你过这有钱有闲的人生……<br></span>`,
        date:"2024-01-02",
        position:"新加坡"
    },
    {
        id:6,
        title:"官宣了",
        username:"小郭爱p图",
        avatar:"common/images/a5.webp",
        imgUrl:"common/images/cover-5.webp",
        like:100,
        content:`<div data-v-104cd31e="" id="detail-desc" class="desc"><span data-v-104cd31e="">王鹤棣是我男朋友 证据在这</span><!----><!----><a data-v-92d0a096="" data-v-104cd31e="" id="hash-tag" target="_blank" class="tag tag-search" href="/search_result?keyword=%25E7%258E%258B%25E9%25B9%25A4%25E6%25A3%25A3&amp;type=54&amp;source=web_note_detail_r10">#王鹤棣<div style="position: absolute; left: 0px; top: 0px; visibility: hidden; z-index: 0;"><div data-v-4b57735a=""><div data-v-8ec4c7f0="" data-v-4b57735a="" class="singleLine tooltip-wrapper hash-tag-search-guide"><div data-v-8ec4c7f0="" class="arrow" style="left: 0px; bottom: -18px; transform: translate(0px, -12.6px);"><svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg" data-v-8ec4c7f0=""><path fill-rule="evenodd" clip-rule="evenodd" d="M6.62812 30.0004C6.41876 30.0007 6.20939 30.0009 6 30.0009L7.89538 30.0009C7.47295 29.9995 7.05055 30 6.62812 30.0004ZM28.127 30.0013L29.3719 30.0009L29.9887 30.0014C29.7831 30.0014 29.5775 30.0011 29.3719 30.0009C28.9569 30.0005 28.542 30 28.127 30.0013Z" fill="#FF0000" data-v-8ec4c7f0=""></path><path d="M8.62313 30.0055C9.46008 30.0138 10.3968 30.0256 11.2113 30.3032C12.0911 30.6033 12.6736 31.1279 13.2596 31.7453C13.6815 32.1893 14.5103 33.1367 14.9139 33.5942C15.2441 33.9692 15.8907 34.7105 16.2437 35.0692C16.688 35.5204 17.2373 36 18.0003 36C18.7632 36 19.3122 35.5204 19.7563 35.0697C20.1093 34.7112 20.7559 33.9695 21.0864 33.5946C21.4894 33.1372 22.3182 32.1898 22.7404 31.7457C23.3274 31.1283 23.9089 30.6037 24.7884 30.3037C25.6032 30.0267 26.5402 30.0143 27.3766 30.006C27.6268 30.0035 27.8769 30.0021 28.127 30.0013L7.89538 30.0009C8.13795 30.0017 8.38053 30.0031 8.62313 30.0055Z" fill="currentColor" data-v-8ec4c7f0=""></path><path fill-rule="evenodd" clip-rule="evenodd" d="M29.3719 5.99955C29.5812 5.99933 29.7906 5.9991 30 5.9991L28.1046 5.99906C28.527 6.00046 28.9494 6 29.3719 5.99955ZM7.87298 5.99867L6.62811 5.99909L6.01131 5.99864C6.21692 5.99865 6.42252 5.99887 6.62811 5.99909C7.04306 5.99953 7.45799 5.99998 7.87298 5.99867Z" fill="currentColor" data-v-8ec4c7f0=""></path><path d="M27.3769 5.99448C26.5399 5.98618 25.6032 5.9744 24.7887 5.69676C23.9089 5.39672 23.3264 4.87212 22.7404 4.25474C22.3185 3.81069 21.4897 2.86326 21.0861 2.40583C20.7559 2.03078 20.1093 1.28946 19.7563 0.930803C19.312 0.479596 18.7627 0 17.9997 0C17.2368 0 16.6878 0.479596 16.2437 0.930342C15.8907 1.28877 15.2441 2.03055 14.9136 2.40536C14.5106 2.8628 13.6818 3.81022 13.2596 4.25428C12.6726 4.87166 12.0911 5.39626 11.2116 5.69629C10.3968 5.97325 9.45982 5.98571 8.62339 5.99402C8.37322 5.99647 8.12309 5.99789 7.87298 5.99867L28.1046 5.99906C27.862 5.99826 27.6195 5.99685 27.3769 5.99448Z" fill="currentColor" data-v-8ec4c7f0=""></path><path fill-rule="evenodd" clip-rule="evenodd" d="M30.0004 29.3719C30.0007 29.5812 30.0009 29.7906 30.0009 30L30.0009 28.1046C29.9995 28.527 30 28.9494 30.0004 29.3719ZM30.0013 7.87298L30.0009 6.62811L30.0014 6.01131C30.0014 6.21692 30.0011 6.42252 30.0009 6.62811C30.0005 7.04306 30 7.45799 30.0013 7.87298Z" fill="currentColor" data-v-8ec4c7f0=""></path><path d="M30.0055 27.3769C30.0138 26.5399 30.0256 25.6032 30.3032 24.7887C30.6033 23.9089 31.1279 23.3264 31.7453 22.7404C32.1893 22.3185 33.1367 21.4897 33.5942 21.0861C33.9692 20.7559 34.7105 20.1093 35.0692 19.7563C35.5204 19.312 36 18.7627 36 17.9997C36 17.2368 35.5204 16.6878 35.0697 16.2437C34.7112 15.8907 33.9695 15.2441 33.5946 14.9136C33.1372 14.5106 32.1898 13.6818 31.7457 13.2596C31.1283 12.6726 30.6037 12.0911 30.3037 11.2116C30.0267 10.3968 30.0143 9.45982 30.006 8.62339C30.0035 8.37322 30.0021 8.12309 30.0013 7.87298L30.0009 28.1046C30.0017 27.862 30.0031 27.6195 30.0055 27.3769Z" fill="currentColor" data-v-8ec4c7f0=""></path><path fill-rule="evenodd" clip-rule="evenodd" d="M5.99955 6.62812C5.99933 6.41876 5.9991 6.20939 5.9991 6L5.99906 7.89538C6.00046 7.47295 6 7.05055 5.99955 6.62812ZM5.99867 28.127L5.99909 29.3719L5.99864 29.9887C5.99865 29.7831 5.99887 29.5775 5.99909 29.3719C5.99953 28.9569 5.99998 28.542 5.99867 28.127Z" fill="currentColor" data-v-8ec4c7f0=""></path><path d="M5.99448 8.62313C5.98618 9.46008 5.9744 10.3968 5.69676 11.2113C5.39672 12.0911 4.87212 12.6736 4.25474 13.2596C3.81069 13.6815 2.86326 14.5103 2.40583 14.9139C2.03078 15.2441 1.28946 15.8907 0.930803 16.2437C0.479596 16.688 0 17.2373 0 18.0003C0 18.7632 0.479596 19.3122 0.930342 19.7563C1.28877 20.1093 2.03055 20.7559 2.40536 21.0864C2.8628 21.4894 3.81022 22.3182 4.25428 22.7404C4.87166 23.3274 5.39626 23.9089 5.69629 24.7884C5.97325 25.6032 5.98571 26.5402 5.99402 27.3766C5.99647 27.6268 5.99789 27.8769 5.99867 28.127L5.99906 7.89538C5.99826 8.13795 5.99685 8.38053 5.99448 8.62313Z" fill="currentColor" data-v-8ec4c7f0=""></path></svg></div><div data-v-8ec4c7f0="" style="z-index: 99;"><span data-v-4b57735a="" data-v-8ec4c7f0-s="" class="no-wrap">话题可以点击搜索啦~</span></div></div></div></div></a><span data-v-104cd31e=""><br>不要反驳我 除非你也有证据</span><!----></div>`,
        date:"2024-01-11",
        position:"黑龙江"
    },
    {
        id:7,
        title:"《狂飙》:坐着奔驰，穿着18万的大衣，却说“我并不知道两个哥哥做什么的?”你不知",
        username:"小郭爱p图",
        avatar:"common/images/a6.webp",
        imgUrl:"common/images/cover-6.webp",
        like:2342,
        content:`<div data-v-104cd31e="" id="detail-desc" class="desc"><span data-v-104cd31e="">《狂飙》:坐着奔驰，穿着18万的大衣，却说“我并不知道两个哥哥做什么的?”你不知道的这些心机才她安全落地的<br>在《狂飙》续集里，高启兰医生一亮相，就如同一道闪电划破黑夜，让人目不暇接<br>坐在价值280万的豪华奔驰里，披着10多万一件的高级大衣，简直就是时尚界的一股清流，这与她21年前截然不同的形象形成鲜明对比，那时的她衣着朴素站在JC大门前，小心翼翼，仿佛怕打破那脆弱的和平<br>可如今，随着她哥哥高启强在京海成名，一时无两，她也沐浴在了这份名利之中，表面上看，高启兰似乎是个专注于医学事业的女性，与高启强的江湖恩怨似乎无关，给人感觉就像是那种读过书的人，绅士风度，不沾尘埃<br>安欣甚至建议她远离京海和高启强，重新开始一个新生活。他担心，这个看似单纯的女人会被高启强打打杀杀的江湖影响，毁了她美好的未来。然而这一切都是表象。高启兰其实远比我们看到的要复杂得多，她心机深沉，隐藏得极好。安欣也因此被她的外表所误导<br>她曾多次对安欣示好，但都没有结果。甚至她还振振有词地说:“我是我，我哥是我哥。你做jc的，追查我哥哥这么多年，算什么意思?”<br>这让人不得不思考，高启兰是否真的一无所知，或者她其实清楚得很?<br>事实上高启兰早就知道哥哥高启强的所有暗中操作，她只是选择睁一只眼闭一只眼<br>当她的侄子高晓晨陷入麻烦，高启兰迅速进入“戏剧模式”在与执法部门沟通的过程中，她表现得如同被吓坏了一样。拿到了认可后她马上就问能不能用金钱来解决问题<br>这凸显了一个事实:在她的心底里，高家的财富如山稳固，没有什么金钱解决不了的。当公司的黄瑶暗示有一笔资金转向香港时，虽然并没有明说具体细节，但高启兰敏锐地察觉到其中的问题，并迅速作出决断让高晓晨迅速离开。高启兰甚至联想到，高启强是不是有意伤害自己的儿子，虽然这个想法有些夸张，但也反映了她对哥哥高启强深层次的了解<br>出乎安欣意料的是，在一个关键时刻电梯突然失控，高启兰毫不犹豫地展示了她真正的一面。她高声宣称自己是高家的一份子，如果有人敢伤害她，高启强绝对不会轻易放过<br>这才是真正的高启兰，一个了解自己地位和家庭影响力的女人<br>她一直知道哥哥的所作所为，但却装作一无所知，享受着这一切带给她的好处<br>最后，她选择出国，避开了所有的是非纷扰，将自己的心机和隐藏能力发挥到了极致</span><!----><!----><a data-v-92d0a096="" data-v-104cd31e="" id="hash-tag" target="_blank" class="tag tag-search" href="/search_result?keyword=%25E8%25AE%25A4%25E7%259F%25A5&amp;type=54&amp;source=web_note_detail_r10">#认知<div style="position: absolute; left: 0px; top: 0px; visibility: hidden; z-index: 0;"><div data-v-4b57735a=""><div data-v-8ec4c7f0="" data-v-4b57735a="" class="singleLine tooltip-wrapper hash-tag-search-guide"><div data-v-8ec4c7f0="" class="arrow" style="left: 0px; bottom: -18px; transform: translate(0px, -12.6px);"><svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg" data-v-8ec4c7f0=""><path fill-rule="evenodd" clip-rule="evenodd" d="M6.62812 30.0004C6.41876 30.0007 6.20939 30.0009 6 30.0009L7.89538 30.0009C7.47295 29.9995 7.05055 30 6.62812 30.0004ZM28.127 30.0013L29.3719 30.0009L29.9887 30.0014C29.7831 30.0014 29.5775 30.0011 29.3719 30.0009C28.9569 30.0005 28.542 30 28.127 30.0013Z" fill="#FF0000" data-v-8ec4c7f0=""></path><path d="M8.62313 30.0055C9.46008 30.0138 10.3968 30.0256 11.2113 30.3032C12.0911 30.6033 12.6736 31.1279 13.2596 31.7453C13.6815 32.1893 14.5103 33.1367 14.9139 33.5942C15.2441 33.9692 15.8907 34.7105 16.2437 35.0692C16.688 35.5204 17.2373 36 18.0003 36C18.7632 36 19.3122 35.5204 19.7563 35.0697C20.1093 34.7112 20.7559 33.9695 21.0864 33.5946C21.4894 33.1372 22.3182 32.1898 22.7404 31.7457C23.3274 31.1283 23.9089 30.6037 24.7884 30.3037C25.6032 30.0267 26.5402 30.0143 27.3766 30.006C27.6268 30.0035 27.8769 30.0021 28.127 30.0013L7.89538 30.0009C8.13795 30.0017 8.38053 30.0031 8.62313 30.0055Z" fill="currentColor" data-v-8ec4c7f0=""></path><path fill-rule="evenodd" clip-rule="evenodd" d="M29.3719 5.99955C29.5812 5.99933 29.7906 5.9991 30 5.9991L28.1046 5.99906C28.527 6.00046 28.9494 6 29.3719 5.99955ZM7.87298 5.99867L6.62811 5.99909L6.01131 5.99864C6.21692 5.99865 6.42252 5.99887 6.62811 5.99909C7.04306 5.99953 7.45799 5.99998 7.87298 5.99867Z" fill="currentColor" data-v-8ec4c7f0=""></path><path d="M27.3769 5.99448C26.5399 5.98618 25.6032 5.9744 24.7887 5.69676C23.9089 5.39672 23.3264 4.87212 22.7404 4.25474C22.3185 3.81069 21.4897 2.86326 21.0861 2.40583C20.7559 2.03078 20.1093 1.28946 19.7563 0.930803C19.312 0.479596 18.7627 0 17.9997 0C17.2368 0 16.6878 0.479596 16.2437 0.930342C15.8907 1.28877 15.2441 2.03055 14.9136 2.40536C14.5106 2.8628 13.6818 3.81022 13.2596 4.25428C12.6726 4.87166 12.0911 5.39626 11.2116 5.69629C10.3968 5.97325 9.45982 5.98571 8.62339 5.99402C8.37322 5.99647 8.12309 5.99789 7.87298 5.99867L28.1046 5.99906C27.862 5.99826 27.6195 5.99685 27.3769 5.99448Z" fill="currentColor" data-v-8ec4c7f0=""></path><path fill-rule="evenodd" clip-rule="evenodd" d="M30.0004 29.3719C30.0007 29.5812 30.0009 29.7906 30.0009 30L30.0009 28.1046C29.9995 28.527 30 28.9494 30.0004 29.3719ZM30.0013 7.87298L30.0009 6.62811L30.0014 6.01131C30.0014 6.21692 30.0011 6.42252 30.0009 6.62811C30.0005 7.04306 30 7.45799 30.0013 7.87298Z" fill="currentColor" data-v-8ec4c7f0=""></path><path d="M30.0055 27.3769C30.0138 26.5399 30.0256 25.6032 30.3032 24.7887C30.6033 23.9089 31.1279 23.3264 31.7453 22.7404C32.1893 22.3185 33.1367 21.4897 33.5942 21.0861C33.9692 20.7559 34.7105 20.1093 35.0692 19.7563C35.5204 19.312 36 18.7627 36 17.9997C36 17.2368 35.5204 16.6878 35.0697 16.2437C34.7112 15.8907 33.9695 15.2441 33.5946 14.9136C33.1372 14.5106 32.1898 13.6818 31.7457 13.2596C31.1283 12.6726 30.6037 12.0911 30.3037 11.2116C30.0267 10.3968 30.0143 9.45982 30.006 8.62339C30.0035 8.37322 30.0021 8.12309 30.0013 7.87298L30.0009 28.1046C30.0017 27.862 30.0031 27.6195 30.0055 27.3769Z" fill="currentColor" data-v-8ec4c7f0=""></path><path fill-rule="evenodd" clip-rule="evenodd" d="M5.99955 6.62812C5.99933 6.41876 5.9991 6.20939 5.9991 6L5.99906 7.89538C6.00046 7.47295 6 7.05055 5.99955 6.62812ZM5.99867 28.127L5.99909 29.3719L5.99864 29.9887C5.99865 29.7831 5.99887 29.5775 5.99909 29.3719C5.99953 28.9569 5.99998 28.542 5.99867 28.127Z" fill="currentColor" data-v-8ec4c7f0=""></path><path d="M5.99448 8.62313C5.98618 9.46008 5.9744 10.3968 5.69676 11.2113C5.39672 12.0911 4.87212 12.6736 4.25474 13.2596C3.81069 13.6815 2.86326 14.5103 2.40583 14.9139C2.03078 15.2441 1.28946 15.8907 0.930803 16.2437C0.479596 16.688 0 17.2373 0 18.0003C0 18.7632 0.479596 19.3122 0.930342 19.7563C1.28877 20.1093 2.03055 20.7559 2.40536 21.0864C2.8628 21.4894 3.81022 22.3182 4.25428 22.7404C4.87166 23.3274 5.39626 23.9089 5.69629 24.7884C5.97325 25.6032 5.98571 26.5402 5.99402 27.3766C5.99647 27.6268 5.99789 27.8769 5.99867 28.127L5.99906 7.89538C5.99826 8.13795 5.99685 8.38053 5.99448 8.62313Z" fill="currentColor" data-v-8ec4c7f0=""></path></svg></div><div data-v-8ec4c7f0="" style="z-index: 99;"><span data-v-4b57735a="" data-v-8ec4c7f0-s="" class="no-wrap">话题可以点击搜索啦~</span></div></div></div></div></a><span data-v-104cd31e=""></span><!----><!----><a data-v-92d0a096="" data-v-104cd31e="" id="hash-tag" target="_blank" class="tag tag-search" href="/search_result?keyword=%25E6%25B7%25B1%25E5%25BA%25A6%25E8%25A7%25A3%25E8%25AF%25BB&amp;type=54&amp;source=web_note_detail_r10">#深度解读</a><span data-v-104cd31e=""></span><!----><!----><a data-v-92d0a096="" data-v-104cd31e="" id="hash-tag" target="_blank" class="tag tag-search" href="/search_result?keyword=%25E8%2587%25AA%25E6%2588%2591%25E6%258F%2590%25E5%258D%2587&amp;type=54&amp;source=web_note_detail_r10">#自我提升</a><span data-v-104cd31e=""></span><!----><!----><a data-v-92d0a096="" data-v-104cd31e="" id="hash-tag" target="_blank" class="tag tag-search" href="/search_result?keyword=%25E7%258B%2582%25E9%25A3%2599&amp;type=54&amp;source=web_note_detail_r10">#狂飙</a><span data-v-104cd31e=""> </span><!----><!----><a data-v-92d0a096="" data-v-104cd31e="" id="hash-tag" target="_blank" class="tag tag-search" href="/search_result?keyword=%25E4%25B8%258D%25E6%2587%2582%25E5%25B0%25B1%25E9%2597%25AE%25E6%259C%2589%25E9%2597%25AE%25E5%25BF%2585%25E7%25AD%2594&amp;type=54&amp;source=web_note_detail_r10">#不懂就问有问必答</a><span data-v-104cd31e=""></span><!----></div>`,
        date:"2024-12-26",
        position:"新加坡"
    },
    {
        id:8,
        title:"妈耶‼️终于要播‼️这是什么王炸阵容‼️",
        username:"asrtw",
        avatar:"common/images/a7.webp",
        imgUrl:"common/images/cover-7.webp",
        like:8654,
        content:`<div data-v-104cd31e="" id="detail-desc" class="desc"><span data-v-104cd31e="">📺: 《永夜星河》<br>🌟:🐧播出<br>✅啊啊啊这次造型真的美疯了‼️全员美女谁会不爱‼️该剧由虞书欣、丁禹兮、祝绪丹、杨仕泽主演，改编自白羽摘雕弓现象级IP《黑莲花攻略手册》，剧集也透露出轻松欢乐的喜剧氛围。在片花中，作为现代人的主角凌妙妙穿书成为郡守千金，与系统绑定，不完成派发任务就无法回归现实<img class="note-content-emoji" crossorigin="anonymous" src="https://picasso-static.xiaohongshu.com/fe-platform/ca75b2fc85b0a3e171fe5df1cbf90efdcd3ba571.png">她尝试与系统对抗却惨遭多次“重置”，喜感满满<img class="note-content-emoji" crossorigin="anonymous" src="https://picasso-static.xiaohongshu.com/fe-platform/7a6287c7f65fabdc15fa8f06b2696cccc21e86f2.png"><br>.<br>✨虞书欣饰演鬼马精灵、机智可爱的少女凌妙妙，气质贴合形象，丁禹兮饰演强大却冷酷偏执的慕家少年慕声，少年感的长相与腹黑的人设相得益彰；一段搞笑和危险并存的故事<img class="note-content-emoji" crossorigin="anonymous" src="https://picasso-static.xiaohongshu.com/fe-platform/364ad5d3e0d5c3b1aa101c9243f488be97d9e8d7.png">还有陈都灵、钟欣潼、徐海乔、保剑锋、张晨光、温峥嵘、海陆、于朦胧、费启鸣、王晓晨、车保罗、赖艺等阵容亮相，开启万物有爱新世界观，寓意着即使在黑暗的时刻，也有爱与希望的存在<img class="note-content-emoji" crossorigin="anonymous" src="https://picasso-static.xiaohongshu.com/fe-platform/1b81c5ec3f7006f6b8baf7c006773f5f9d1ab6d7.png">集美们赶紧冲起来<img class="note-content-emoji" crossorigin="anonymous" src="https://picasso-static.xiaohongshu.com/fe-platform/6062be312a922da7998f99fb773e06cea0a640df.png"><br></span><!----><!----><a data-v-92d0a096="" data-v-104cd31e="" id="hash-tag" target="_blank" class="tag tag-search" href="/search_result?keyword=%25E8%25BF%25BD%25E5%2589%25A7&amp;type=54&amp;source=web_note_detail_r10">#追剧<div style="position: absolute; left: 0px; top: 0px; visibility: hidden; z-index: 0;"><div data-v-4b57735a=""><div data-v-8ec4c7f0="" data-v-4b57735a="" class="singleLine tooltip-wrapper hash-tag-search-guide"><div data-v-8ec4c7f0="" class="arrow" style="left: 0px; bottom: -18px; transform: translate(0px, -12.6px);"><svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg" data-v-8ec4c7f0=""><path fill-rule="evenodd" clip-rule="evenodd" d="M6.62812 30.0004C6.41876 30.0007 6.20939 30.0009 6 30.0009L7.89538 30.0009C7.47295 29.9995 7.05055 30 6.62812 30.0004ZM28.127 30.0013L29.3719 30.0009L29.9887 30.0014C29.7831 30.0014 29.5775 30.0011 29.3719 30.0009C28.9569 30.0005 28.542 30 28.127 30.0013Z" fill="#FF0000" data-v-8ec4c7f0=""></path><path d="M8.62313 30.0055C9.46008 30.0138 10.3968 30.0256 11.2113 30.3032C12.0911 30.6033 12.6736 31.1279 13.2596 31.7453C13.6815 32.1893 14.5103 33.1367 14.9139 33.5942C15.2441 33.9692 15.8907 34.7105 16.2437 35.0692C16.688 35.5204 17.2373 36 18.0003 36C18.7632 36 19.3122 35.5204 19.7563 35.0697C20.1093 34.7112 20.7559 33.9695 21.0864 33.5946C21.4894 33.1372 22.3182 32.1898 22.7404 31.7457C23.3274 31.1283 23.9089 30.6037 24.7884 30.3037C25.6032 30.0267 26.5402 30.0143 27.3766 30.006C27.6268 30.0035 27.8769 30.0021 28.127 30.0013L7.89538 30.0009C8.13795 30.0017 8.38053 30.0031 8.62313 30.0055Z" fill="currentColor" data-v-8ec4c7f0=""></path><path fill-rule="evenodd" clip-rule="evenodd" d="M29.3719 5.99955C29.5812 5.99933 29.7906 5.9991 30 5.9991L28.1046 5.99906C28.527 6.00046 28.9494 6 29.3719 5.99955ZM7.87298 5.99867L6.62811 5.99909L6.01131 5.99864C6.21692 5.99865 6.42252 5.99887 6.62811 5.99909C7.04306 5.99953 7.45799 5.99998 7.87298 5.99867Z" fill="currentColor" data-v-8ec4c7f0=""></path><path d="M27.3769 5.99448C26.5399 5.98618 25.6032 5.9744 24.7887 5.69676C23.9089 5.39672 23.3264 4.87212 22.7404 4.25474C22.3185 3.81069 21.4897 2.86326 21.0861 2.40583C20.7559 2.03078 20.1093 1.28946 19.7563 0.930803C19.312 0.479596 18.7627 0 17.9997 0C17.2368 0 16.6878 0.479596 16.2437 0.930342C15.8907 1.28877 15.2441 2.03055 14.9136 2.40536C14.5106 2.8628 13.6818 3.81022 13.2596 4.25428C12.6726 4.87166 12.0911 5.39626 11.2116 5.69629C10.3968 5.97325 9.45982 5.98571 8.62339 5.99402C8.37322 5.99647 8.12309 5.99789 7.87298 5.99867L28.1046 5.99906C27.862 5.99826 27.6195 5.99685 27.3769 5.99448Z" fill="currentColor" data-v-8ec4c7f0=""></path><path fill-rule="evenodd" clip-rule="evenodd" d="M30.0004 29.3719C30.0007 29.5812 30.0009 29.7906 30.0009 30L30.0009 28.1046C29.9995 28.527 30 28.9494 30.0004 29.3719ZM30.0013 7.87298L30.0009 6.62811L30.0014 6.01131C30.0014 6.21692 30.0011 6.42252 30.0009 6.62811C30.0005 7.04306 30 7.45799 30.0013 7.87298Z" fill="currentColor" data-v-8ec4c7f0=""></path><path d="M30.0055 27.3769C30.0138 26.5399 30.0256 25.6032 30.3032 24.7887C30.6033 23.9089 31.1279 23.3264 31.7453 22.7404C32.1893 22.3185 33.1367 21.4897 33.5942 21.0861C33.9692 20.7559 34.7105 20.1093 35.0692 19.7563C35.5204 19.312 36 18.7627 36 17.9997C36 17.2368 35.5204 16.6878 35.0697 16.2437C34.7112 15.8907 33.9695 15.2441 33.5946 14.9136C33.1372 14.5106 32.1898 13.6818 31.7457 13.2596C31.1283 12.6726 30.6037 12.0911 30.3037 11.2116C30.0267 10.3968 30.0143 9.45982 30.006 8.62339C30.0035 8.37322 30.0021 8.12309 30.0013 7.87298L30.0009 28.1046C30.0017 27.862 30.0031 27.6195 30.0055 27.3769Z" fill="currentColor" data-v-8ec4c7f0=""></path><path fill-rule="evenodd" clip-rule="evenodd" d="M5.99955 6.62812C5.99933 6.41876 5.9991 6.20939 5.9991 6L5.99906 7.89538C6.00046 7.47295 6 7.05055 5.99955 6.62812ZM5.99867 28.127L5.99909 29.3719L5.99864 29.9887C5.99865 29.7831 5.99887 29.5775 5.99909 29.3719C5.99953 28.9569 5.99998 28.542 5.99867 28.127Z" fill="currentColor" data-v-8ec4c7f0=""></path><path d="M5.99448 8.62313C5.98618 9.46008 5.9744 10.3968 5.69676 11.2113C5.39672 12.0911 4.87212 12.6736 4.25474 13.2596C3.81069 13.6815 2.86326 14.5103 2.40583 14.9139C2.03078 15.2441 1.28946 15.8907 0.930803 16.2437C0.479596 16.688 0 17.2373 0 18.0003C0 18.7632 0.479596 19.3122 0.930342 19.7563C1.28877 20.1093 2.03055 20.7559 2.40536 21.0864C2.8628 21.4894 3.81022 22.3182 4.25428 22.7404C4.87166 23.3274 5.39626 23.9089 5.69629 24.7884C5.97325 25.6032 5.98571 26.5402 5.99402 27.3766C5.99647 27.6268 5.99789 27.8769 5.99867 28.127L5.99906 7.89538C5.99826 8.13795 5.99685 8.38053 5.99448 8.62313Z" fill="currentColor" data-v-8ec4c7f0=""></path></svg></div><div data-v-8ec4c7f0="" style="z-index: 99;"><span data-v-4b57735a="" data-v-8ec4c7f0-s="" class="no-wrap">话题可以点击搜索啦~</span></div></div></div></div></a><span data-v-104cd31e=""> </span><!----><!----><a data-v-92d0a096="" data-v-104cd31e="" id="hash-tag" target="_blank" class="tag tag-search" href="/search_result?keyword=%25E7%2594%259C%25E5%2589%25A7&amp;type=54&amp;source=web_note_detail_r10">#甜剧</a><span data-v-104cd31e=""> </span><!----><!----><a data-v-92d0a096="" data-v-104cd31e="" id="hash-tag" target="_blank" class="tag tag-search" href="/search_result?keyword=%25E6%2588%2591%25E6%25AD%25A3%25E5%259C%25A8%25E8%25BF%25BD%25E7%259A%2584%25E5%2589%25A7&amp;type=54&amp;source=web_note_detail_r10">#我正在追的剧</a><span data-v-104cd31e=""> </span><!----><!----><a data-v-92d0a096="" data-v-104cd31e="" id="hash-tag" target="_blank" class="tag tag-search" href="/search_result?keyword=%25E5%2589%25A7%25E8%258D%2592&amp;type=54&amp;source=web_note_detail_r10">#剧荒</a><span data-v-104cd31e=""> </span><!----><!----><a data-v-92d0a096="" data-v-104cd31e="" id="hash-tag" target="_blank" class="tag tag-search" href="/search_result?keyword=%25E5%2589%25A7%25E8%258D%2592%25E6%258E%25A8%25E8%258D%2590&amp;type=54&amp;source=web_note_detail_r10">#剧荒推荐</a><span data-v-104cd31e=""> </span><!----><!----><a data-v-92d0a096="" data-v-104cd31e="" id="hash-tag" target="_blank" class="tag tag-search" href="/search_result?keyword=%25E7%2594%259C%25E7%2594%259C%25E7%259A%2584%25E6%2581%258B%25E7%2588%25B1&amp;type=54&amp;source=web_note_detail_r10">#甜甜的恋爱</a><span data-v-104cd31e=""> </span><!----><!----><a data-v-92d0a096="" data-v-104cd31e="" id="hash-tag" target="_blank" class="tag tag-search" href="/search_result?keyword=%25E7%2599%25BE%25E4%25BA%25BF%25E5%2589%25A7%25E5%25A5%25BD%25E7%259C%258B%25E8%25AE%25A1%25E5%2588%2592&amp;type=54&amp;source=web_note_detail_r10">#百亿剧好看计划</a><span data-v-104cd31e=""> </span><!----><!----><a data-v-92d0a096="" data-v-104cd31e="" id="hash-tag" target="_blank" class="tag tag-search" href="/search_result?keyword=%25E5%25A5%25BD%25E5%2589%25A7%25E6%258E%25A8%25E8%258D%2590&amp;type=54&amp;source=web_note_detail_r10">#好剧推荐</a><span data-v-104cd31e=""> </span><!----><!----><a data-v-92d0a096="" data-v-104cd31e="" id="hash-tag" target="_blank" class="tag tag-search" href="/search_result?keyword=%25E8%25BF%25BD%25E5%2589%25A7%25E6%2589%2593%25E5%258D%25A1&amp;type=54&amp;source=web_note_detail_r10">#追剧打卡</a><span data-v-104cd31e=""> </span><!----><!----><a data-v-92d0a096="" data-v-104cd31e="" id="hash-tag" target="_blank" class="tag tag-search" href="/search_result?keyword=%25E8%25BF%25BD%25E5%2589%25A7%25E6%2597%25A5%25E5%25B8%25B8&amp;type=54&amp;source=web_note_detail_r10">#追剧日常</a><span data-v-104cd31e=""> </span><!----><!----><a data-v-92d0a096="" data-v-104cd31e="" id="hash-tag" target="_blank" class="tag tag-search" href="/search_result?keyword=%25E4%25B8%2580%25E8%25B5%25B7%25E8%25BF%25BD%25E5%2589%25A7&amp;type=54&amp;source=web_note_detail_r10">#一起追剧</a><span data-v-104cd31e=""> </span><!----><!----><a data-v-92d0a096="" data-v-104cd31e="" id="hash-tag" target="_blank" class="tag tag-search" href="/search_result?keyword=%25E5%25AE%2585%25E5%25AE%25B6%25E8%25BF%25BD%25E5%2589%25A7&amp;type=54&amp;source=web_note_detail_r10">#宅家追剧</a><span data-v-104cd31e=""> </span><!----><!----><a data-v-92d0a096="" data-v-104cd31e="" id="hash-tag" target="_blank" class="tag tag-search" href="/search_result?keyword=%25E6%2596%25B0%25E5%2589%25A7%25E6%258E%25A8%25E9%2580%2581&amp;type=54&amp;source=web_note_detail_r10">#新剧推送</a><span data-v-104cd31e=""> </span><!----><!----><a data-v-92d0a096="" data-v-104cd31e="" id="hash-tag" target="_blank" class="tag tag-search" href="/search_result?keyword=%25E5%2585%2588%25E5%25A9%259A%25E5%2590%258E%25E7%2588%25B1&amp;type=54&amp;source=web_note_detail_r10">#先婚后爱</a><span data-v-104cd31e=""> </span><!----><!----><a data-v-92d0a096="" data-v-104cd31e="" id="hash-tag" target="_blank" class="tag tag-search" href="/search_result?keyword=%25E7%25BD%2591%25E5%2589%25A7&amp;type=54&amp;source=web_note_detail_r10">#网剧</a><span data-v-104cd31e=""> </span><!----><!----><a data-v-92d0a096="" data-v-104cd31e="" id="hash-tag" target="_blank" class="tag tag-search" href="/search_result?keyword=%25E7%2594%25B5%25E8%25A7%2586%25E5%2589%25A7%25E8%25A7%25A3%25E8%25AF%25B4&amp;type=54&amp;source=web_note_detail_r10">#电视剧解说</a><span data-v-104cd31e=""> </span><!----><!----><a data-v-92d0a096="" data-v-104cd31e="" id="hash-tag" target="_blank" class="tag tag-search" href="/search_result?keyword=%25E7%2594%25B5%25E8%25A7%2586%25E5%2589%25A7&amp;type=54&amp;source=web_note_detail_r10">#电视剧</a><span data-v-104cd31e=""> </span><!----><!----><a data-v-92d0a096="" data-v-104cd31e="" id="hash-tag" target="_blank" class="tag tag-search" href="/search_result?keyword=%25E7%2583%25AD%25E6%2592%25AD%25E7%2594%25B5%25E8%25A7%2586%25E5%2589%25A7&amp;type=54&amp;source=web_note_detail_r10">#热播电视剧</a><span data-v-104cd31e=""> </span><!----><!----><a data-v-92d0a096="" data-v-104cd31e="" id="hash-tag" target="_blank" class="tag tag-search" href="/search_result?keyword=%25E7%2594%25B5%25E8%25A7%2586%25E5%2589%25A7%25E6%258E%25A8%25E8%258D%2590&amp;type=54&amp;source=web_note_detail_r10">#电视剧推荐</a><span data-v-104cd31e=""> </span><!----><!----><a data-v-92d0a096="" data-v-104cd31e="" id="hash-tag" target="_blank" class="tag tag-search" href="/search_result?keyword=%25E7%2594%25B5%25E8%25A7%2586%25E5%2589%25A7&amp;type=54&amp;source=web_note_detail_r10">#电视剧</a><span data-v-104cd31e=""> </span><!----><!----><a data-v-92d0a096="" data-v-104cd31e="" id="hash-tag" target="_blank" class="tag tag-search" href="/search_result?keyword=%25E5%259B%25BD%25E4%25BA%25A7%25E7%2594%25B5%25E8%25A7%2586%25E5%2589%25A7&amp;type=54&amp;source=web_note_detail_r10">#国产电视剧</a><span data-v-104cd31e=""> </span><!----><!----><a data-v-92d0a096="" data-v-104cd31e="" id="hash-tag" target="_blank" class="tag tag-search" href="/search_result?keyword=%25E5%259B%25BD%25E4%25BA%25A7%25E5%25A5%25BD%25E5%2589%25A7%25E5%25AE%2589%25E5%2588%25A9&amp;type=54&amp;source=web_note_detail_r10">#国产好剧安利</a><span data-v-104cd31e=""> </span><!----><!----><a data-v-92d0a096="" data-v-104cd31e="" id="hash-tag" target="_blank" class="tag tag-search" href="/search_result?keyword=%25E5%25BD%25B1%25E8%25A7%2586&amp;type=54&amp;source=web_note_detail_r10">#影视</a><span data-v-104cd31e=""> </span><!----><!----><a data-v-92d0a096="" data-v-104cd31e="" id="hash-tag" target="_blank" class="tag tag-search" href="/search_result?keyword=%25E5%2589%25A7%25E6%2583%2585&amp;type=54&amp;source=web_note_detail_r10">#剧情</a><span data-v-104cd31e=""> </span><!----><!----><a data-v-92d0a096="" data-v-104cd31e="" id="hash-tag" target="_blank" class="tag tag-search" href="/search_result?keyword=%25E5%259B%25BD%25E4%25BA%25A7%25E5%2589%25A7&amp;type=54&amp;source=web_note_detail_r10">#国产剧</a><span data-v-104cd31e=""> </span><!----><!----><a data-v-92d0a096="" data-v-104cd31e="" id="hash-tag" target="_blank" class="tag tag-search" href="/search_result?keyword=%25E5%258F%25A4%25E8%25A3%2585%25E5%2589%25A7&amp;type=54&amp;source=web_note_detail_r10">#古装剧</a><span data-v-104cd31e=""> </span><!----><!----><a data-v-92d0a096="" data-v-104cd31e="" id="hash-tag" target="_blank" class="tag tag-search" href="/search_result?keyword=%25E7%2588%25B1%25E6%2583%2585%25E5%2589%25A7&amp;type=54&amp;source=web_note_detail_r10">#爱情剧</a><span data-v-104cd31e=""> </span><!----><!----><a data-v-92d0a096="" data-v-104cd31e="" id="hash-tag" target="_blank" class="tag tag-search" href="/search_result?keyword=%25E5%258F%25A4%25E8%25A3%2585%25E7%2594%25B5%25E8%25A7%2586%25E5%2589%25A7&amp;type=54&amp;source=web_note_detail_r10">#古装电视剧</a><span data-v-104cd31e=""> </span><!----><!----><a data-v-92d0a096="" data-v-104cd31e="" id="hash-tag" target="_blank" class="tag tag-search" href="/search_result?keyword=%25E9%259C%25B8%25E9%2581%2593%25E6%2580%25BB%25E8%25A3%2581&amp;type=54&amp;source=web_note_detail_r10">#霸道总裁</a><span data-v-104cd31e=""> </span><!----><!----><a data-v-92d0a096="" data-v-104cd31e="" id="hash-tag" target="_blank" class="tag tag-search" href="/search_result?keyword=%25E5%25B0%258F%25E5%25A5%25B6%25E7%258B%2597&amp;type=54&amp;source=web_note_detail_r10">#小奶狗</a><span data-v-104cd31e=""> </span><!----><!----><a data-v-92d0a096="" data-v-104cd31e="" id="hash-tag" target="_blank" class="tag tag-search" href="/search_result?keyword=%25E5%25B0%258F%25E7%258B%25BC%25E7%258B%2597&amp;type=54&amp;source=web_note_detail_r10">#小狼狗</a><span data-v-104cd31e=""> </span><!----><!----><a data-v-92d0a096="" data-v-104cd31e="" id="hash-tag" target="_blank" class="tag tag-search" href="/search_result?keyword=%25E7%259F%25AD%25E5%2589%25A7&amp;type=54&amp;source=web_note_detail_r10">#短剧</a><span data-v-104cd31e=""> </span><!----><!----><a data-v-92d0a096="" data-v-104cd31e="" id="hash-tag" target="_blank" class="tag tag-search" href="/search_result?keyword=%25E8%25B6%2585%25E7%2594%259C%25E7%25BD%2591%25E5%2589%25A7&amp;type=54&amp;source=web_note_detail_r10">#超甜网剧</a><span data-v-104cd31e=""> </span><!----><!----><a data-v-92d0a096="" data-v-104cd31e="" id="hash-tag" target="_blank" class="tag tag-search" href="/search_result?keyword=%25E8%2589%25AF%25E5%25BF%2583%25E7%25BD%2591%25E5%2589%25A7%25E6%258E%25A8%25E8%258D%2590&amp;type=54&amp;source=web_note_detail_r10">#良心网剧推荐</a><span data-v-104cd31e=""> </span><!----><!----><a data-v-92d0a096="" data-v-104cd31e="" id="hash-tag" target="_blank" class="tag tag-search" href="/search_result?keyword=%25E5%25AE%259D%25E8%2597%258F%25E7%2594%25B5%25E8%25A7%2586%25E5%2589%25A7&amp;type=54&amp;source=web_note_detail_r10">#宝藏电视剧</a><span data-v-104cd31e=""> </span><!----><!----><a data-v-92d0a096="" data-v-104cd31e="" id="hash-tag" target="_blank" class="tag tag-search" href="/search_result?keyword=%25E9%25AB%2598%25E7%2594%259C%25E5%2590%25BB%25E6%2588%258F%25E7%2589%2587%25E6%25AE%25B5&amp;type=54&amp;source=web_note_detail_r10">#高甜吻戏片段</a><span data-v-104cd31e=""> </span><!----><!----><a data-v-92d0a096="" data-v-104cd31e="" id="hash-tag" target="_blank" class="tag tag-search" href="/search_result?keyword=%25E4%25B8%258B%25E9%25A5%25AD%25E5%2589%25A7&amp;type=54&amp;source=web_note_detail_r10">#下饭剧</a><span data-v-104cd31e=""> </span><!----><!----><a data-v-92d0a096="" data-v-104cd31e="" id="hash-tag" target="_blank" class="tag tag-search" href="/search_result?keyword=%25E6%2588%2591%25E6%2598%25AF%25E8%25BF%25BD%25E5%2589%25A7%25E5%2585%259A&amp;type=54&amp;source=web_note_detail_r10">#我是追剧党</a><span data-v-104cd31e=""> </span><!----><!----><a data-v-92d0a096="" data-v-104cd31e="" id="hash-tag" target="_blank" class="tag tag-search" href="/search_result?keyword=%25E6%25B0%25B8%25E5%25A4%259C%25E6%2598%259F%25E6%25B2%25B3&amp;type=54&amp;source=web_note_detail_r10">#永夜星河</a><span data-v-104cd31e=""> </span><!----><!----><a data-v-92d0a096="" data-v-104cd31e="" id="hash-tag" target="_blank" class="tag tag-search" href="/search_result?keyword=%25E5%2587%258C%25E5%25A6%2599%25E5%25A6%2599&amp;type=54&amp;source=web_note_detail_r10">#凌妙妙</a><span data-v-104cd31e=""> </span><!----><!----><a data-v-92d0a096="" data-v-104cd31e="" id="hash-tag" target="_blank" class="tag tag-search" href="/search_result?keyword=%25E8%2599%259E%25E4%25B9%25A6%25E6%25AC%25A3&amp;type=54&amp;source=web_note_detail_r10">#虞书欣</a><span data-v-104cd31e=""> </span><!----><!----><a data-v-92d0a096="" data-v-104cd31e="" id="hash-tag" target="_blank" class="tag tag-search" href="/search_result?keyword=%25E4%25B8%2581%25E7%25A6%25B9%25E5%2585%25AE&amp;type=54&amp;source=web_note_detail_r10">#丁禹兮</a><span data-v-104cd31e=""> </span><!----><!----><a data-v-92d0a096="" data-v-104cd31e="" id="hash-tag" target="_blank" class="tag tag-search" href="/search_result?keyword=%25E7%25A5%259D%25E7%25BB%25AA%25E4%25B8%25B9&amp;type=54&amp;source=web_note_detail_r10">#祝绪丹</a><span data-v-104cd31e=""> </span><!----><!----><a data-v-92d0a096="" data-v-104cd31e="" id="hash-tag" target="_blank" class="tag tag-search" href="/search_result?keyword=%25E6%259D%25A8%25E4%25BB%2595%25E6%25B3%25BD&amp;type=54&amp;source=web_note_detail_r10">#杨仕泽</a><span data-v-104cd31e=""> </span><!----><!----><a data-v-92d0a096="" data-v-104cd31e="" id="hash-tag" target="_blank" class="tag tag-search" href="/search_result?keyword=%25E9%2599%2588%25E9%2583%25BD%25E7%2581%25B5&amp;type=54&amp;source=web_note_detail_r10">#陈都灵</a><span data-v-104cd31e=""> </span><!----><!----><a data-v-92d0a096="" data-v-104cd31e="" id="hash-tag" target="_blank" class="tag tag-search" href="/search_result?keyword=%25E9%2592%259F%25E6%25AC%25A3%25E6%25BD%25BC&amp;type=54&amp;source=web_note_detail_r10">#钟欣潼</a><span data-v-104cd31e=""> </span><!----><!----><a data-v-92d0a096="" data-v-104cd31e="" id="hash-tag" target="_blank" class="tag tag-search" href="/search_result?keyword=%25E5%25B0%258F%25E7%25BA%25A2%25E4%25B9%25A6%25E8%25BF%25BD%25E5%2589%25A7%25E4%25BA%25BA&amp;type=54&amp;source=web_note_detail_r10">#小红书追剧人</a><span data-v-104cd31e=""> </span><!----><!----><a data-v-92d0a096="" data-v-104cd31e="" id="hash-tag" target="_blank" class="tag tag-search" href="/search_result?keyword=%25E5%2596%259C%25E5%2589%25A7&amp;type=54&amp;source=web_note_detail_r10">#喜剧</a><span data-v-104cd31e=""> </span><!----><!----><a data-v-92d0a096="" data-v-104cd31e="" id="hash-tag" target="_blank" class="tag tag-search" href="/search_result?keyword=%25E6%2590%259E%25E7%25AC%2591&amp;type=54&amp;source=web_note_detail_r10">#搞笑</a><span data-v-104cd31e=""> </span><!----><!----><a data-v-92d0a096="" data-v-104cd31e="" id="hash-tag" target="_blank" class="tag tag-search" href="/search_result?keyword=%25E5%2589%25A7&amp;type=54&amp;source=web_note_detail_r10">#剧</a><span data-v-104cd31e=""></span><!----></div>`,
        date:"2024-01-03",
        position:"广东"
    },
    {
        id:9,
        title:"科研去魅 ",
        username:"科研小助手_Lucky",
        avatar:"common/images/a8.webp",
        imgUrl:"common/images/cover-8.webp",
        like:100,
        content:`<div data-v-104cd31e="" id="detail-desc" class="desc"><span data-v-104cd31e=""><img class="note-content-emoji" crossorigin="anonymous" src="https://picasso-static.xiaohongshu.com/fe-platform/d968308cfaf571fbc75cbcd7ec0cefe9150a390a.png"><img class="note-content-emoji" crossorigin="anonymous" src="https://picasso-static.xiaohongshu.com/fe-platform/d968308cfaf571fbc75cbcd7ec0cefe9150a390a.png">CNAS认证-国家认可委员会实验室<br>基础医学研究联合实验室<br>提供国自然、省级课题、指导教培服务、实验（W）包、经费基金/硕博课题设计指导、SCI/核心期刊协助发表、著作出版、生信分析、网络药理学分析、高通测序等服务， 可承接动物实验，细胞实验，分子实验等生物医学、药学等相关专业，技术外包服务， sci 发文服务等，有需要的老师和同学可联系我~<img class="note-content-emoji" crossorigin="anonymous" src="https://picasso-static.xiaohongshu.com/fe-platform/84320b00dda66dcb661b5fb5d75ded2de4754b0a.png"><img class="note-content-emoji" crossorigin="anonymous" src="https://picasso-static.xiaohongshu.com/fe-platform/84320b00dda66dcb661b5fb5d75ded2de4754b0a.png"><br>_<br>导师不是你的唯一<br>科研也不是生活的全部<br>心态很重要<br></span><!----><!----><a data-v-92d0a096="" data-v-104cd31e="" id="hash-tag" target="_blank" class="tag tag-search" href="/search_result?keyword=%25E7%25A7%2591%25E7%25A0%2594&amp;type=54&amp;source=web_note_detail_r10">#科研<div style="position: absolute; left: 0px; top: 0px; visibility: hidden; z-index: 0;"><div data-v-4b57735a=""><div data-v-8ec4c7f0="" data-v-4b57735a="" class="singleLine tooltip-wrapper hash-tag-search-guide"><div data-v-8ec4c7f0="" class="arrow" style="left: 0px; bottom: -18px; transform: translate(0px, -12.6px);"><svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg" data-v-8ec4c7f0=""><path fill-rule="evenodd" clip-rule="evenodd" d="M6.62812 30.0004C6.41876 30.0007 6.20939 30.0009 6 30.0009L7.89538 30.0009C7.47295 29.9995 7.05055 30 6.62812 30.0004ZM28.127 30.0013L29.3719 30.0009L29.9887 30.0014C29.7831 30.0014 29.5775 30.0011 29.3719 30.0009C28.9569 30.0005 28.542 30 28.127 30.0013Z" fill="#FF0000" data-v-8ec4c7f0=""></path><path d="M8.62313 30.0055C9.46008 30.0138 10.3968 30.0256 11.2113 30.3032C12.0911 30.6033 12.6736 31.1279 13.2596 31.7453C13.6815 32.1893 14.5103 33.1367 14.9139 33.5942C15.2441 33.9692 15.8907 34.7105 16.2437 35.0692C16.688 35.5204 17.2373 36 18.0003 36C18.7632 36 19.3122 35.5204 19.7563 35.0697C20.1093 34.7112 20.7559 33.9695 21.0864 33.5946C21.4894 33.1372 22.3182 32.1898 22.7404 31.7457C23.3274 31.1283 23.9089 30.6037 24.7884 30.3037C25.6032 30.0267 26.5402 30.0143 27.3766 30.006C27.6268 30.0035 27.8769 30.0021 28.127 30.0013L7.89538 30.0009C8.13795 30.0017 8.38053 30.0031 8.62313 30.0055Z" fill="currentColor" data-v-8ec4c7f0=""></path><path fill-rule="evenodd" clip-rule="evenodd" d="M29.3719 5.99955C29.5812 5.99933 29.7906 5.9991 30 5.9991L28.1046 5.99906C28.527 6.00046 28.9494 6 29.3719 5.99955ZM7.87298 5.99867L6.62811 5.99909L6.01131 5.99864C6.21692 5.99865 6.42252 5.99887 6.62811 5.99909C7.04306 5.99953 7.45799 5.99998 7.87298 5.99867Z" fill="currentColor" data-v-8ec4c7f0=""></path><path d="M27.3769 5.99448C26.5399 5.98618 25.6032 5.9744 24.7887 5.69676C23.9089 5.39672 23.3264 4.87212 22.7404 4.25474C22.3185 3.81069 21.4897 2.86326 21.0861 2.40583C20.7559 2.03078 20.1093 1.28946 19.7563 0.930803C19.312 0.479596 18.7627 0 17.9997 0C17.2368 0 16.6878 0.479596 16.2437 0.930342C15.8907 1.28877 15.2441 2.03055 14.9136 2.40536C14.5106 2.8628 13.6818 3.81022 13.2596 4.25428C12.6726 4.87166 12.0911 5.39626 11.2116 5.69629C10.3968 5.97325 9.45982 5.98571 8.62339 5.99402C8.37322 5.99647 8.12309 5.99789 7.87298 5.99867L28.1046 5.99906C27.862 5.99826 27.6195 5.99685 27.3769 5.99448Z" fill="currentColor" data-v-8ec4c7f0=""></path><path fill-rule="evenodd" clip-rule="evenodd" d="M30.0004 29.3719C30.0007 29.5812 30.0009 29.7906 30.0009 30L30.0009 28.1046C29.9995 28.527 30 28.9494 30.0004 29.3719ZM30.0013 7.87298L30.0009 6.62811L30.0014 6.01131C30.0014 6.21692 30.0011 6.42252 30.0009 6.62811C30.0005 7.04306 30 7.45799 30.0013 7.87298Z" fill="currentColor" data-v-8ec4c7f0=""></path><path d="M30.0055 27.3769C30.0138 26.5399 30.0256 25.6032 30.3032 24.7887C30.6033 23.9089 31.1279 23.3264 31.7453 22.7404C32.1893 22.3185 33.1367 21.4897 33.5942 21.0861C33.9692 20.7559 34.7105 20.1093 35.0692 19.7563C35.5204 19.312 36 18.7627 36 17.9997C36 17.2368 35.5204 16.6878 35.0697 16.2437C34.7112 15.8907 33.9695 15.2441 33.5946 14.9136C33.1372 14.5106 32.1898 13.6818 31.7457 13.2596C31.1283 12.6726 30.6037 12.0911 30.3037 11.2116C30.0267 10.3968 30.0143 9.45982 30.006 8.62339C30.0035 8.37322 30.0021 8.12309 30.0013 7.87298L30.0009 28.1046C30.0017 27.862 30.0031 27.6195 30.0055 27.3769Z" fill="currentColor" data-v-8ec4c7f0=""></path><path fill-rule="evenodd" clip-rule="evenodd" d="M5.99955 6.62812C5.99933 6.41876 5.9991 6.20939 5.9991 6L5.99906 7.89538C6.00046 7.47295 6 7.05055 5.99955 6.62812ZM5.99867 28.127L5.99909 29.3719L5.99864 29.9887C5.99865 29.7831 5.99887 29.5775 5.99909 29.3719C5.99953 28.9569 5.99998 28.542 5.99867 28.127Z" fill="currentColor" data-v-8ec4c7f0=""></path><path d="M5.99448 8.62313C5.98618 9.46008 5.9744 10.3968 5.69676 11.2113C5.39672 12.0911 4.87212 12.6736 4.25474 13.2596C3.81069 13.6815 2.86326 14.5103 2.40583 14.9139C2.03078 15.2441 1.28946 15.8907 0.930803 16.2437C0.479596 16.688 0 17.2373 0 18.0003C0 18.7632 0.479596 19.3122 0.930342 19.7563C1.28877 20.1093 2.03055 20.7559 2.40536 21.0864C2.8628 21.4894 3.81022 22.3182 4.25428 22.7404C4.87166 23.3274 5.39626 23.9089 5.69629 24.7884C5.97325 25.6032 5.98571 26.5402 5.99402 27.3766C5.99647 27.6268 5.99789 27.8769 5.99867 28.127L5.99906 7.89538C5.99826 8.13795 5.99685 8.38053 5.99448 8.62313Z" fill="currentColor" data-v-8ec4c7f0=""></path></svg></div><div data-v-8ec4c7f0="" style="z-index: 99;"><span data-v-4b57735a="" data-v-8ec4c7f0-s="" class="no-wrap">话题可以点击搜索啦~</span></div></div></div></div></a><span data-v-104cd31e="">&nbsp;&nbsp;</span><!----><!----><a data-v-92d0a096="" data-v-104cd31e="" id="hash-tag" target="_blank" class="tag tag-search" href="/search_result?keyword=%25E7%25A7%2591%25E7%25A0%2594%25E6%2597%25A5%25E5%25B8%25B8&amp;type=54&amp;source=web_note_detail_r10">#科研日常</a><span data-v-104cd31e="">&nbsp;&nbsp;</span><!----><!----><a data-v-92d0a096="" data-v-104cd31e="" id="hash-tag" target="_blank" class="tag tag-search" href="/search_result?keyword=%25E7%2595%2599%25E5%25AD%25A6%25E7%25A7%2591%25E7%25A0%2594%25E9%25A1%25B9%25E7%259B%25AE&amp;type=54&amp;source=web_note_detail_r10">#留学科研项目</a><span data-v-104cd31e=""></span><!----></div>`,
        date:"2024-01-02",
        position:"新加坡"
    },

    {
        id:10,
        title:"想要换圆桌的心达到顶峰",
        username:"Jsff",
        avatar:"common/images/a10.webp",
        imgUrl:"common/images/cover-10.webp",
        like:100,
        content:`<div data-v-104cd31e="" id="detail-desc" class="desc"><span data-v-104cd31e="">听说小红书出二手快，有没有喜欢这款餐桌的朋友，打算低价出售<br><br>———更新——<br><br>解释下一开始为什么要换哈，不是不喜欢这个桌子，是觉得这块空间更适合放圆桌，因为我们家没有dining room，（但凡有地方放我都不会想换，最多再买一张圆的）<br>只有厨房边上的这个空间，北美的习惯就是这里放个小圆桌，长桌放正式餐厅。<br><br>后来为什么不出了呢是因为觉得买来也不便宜，不应该这么任性为了想好看就随便换掉<img class="note-content-emoji" crossorigin="anonymous" src="https://picasso-static.xiaohongshu.com/fe-platform/ca75b2fc85b0a3e171fe5df1cbf90efdcd3ba571.png"><img class="note-content-emoji" crossorigin="anonymous" src="https://picasso-static.xiaohongshu.com/fe-platform/ca75b2fc85b0a3e171fe5df1cbf90efdcd3ba571.png">而且长桌的实用性比圆桌强能容纳更多的人（圆桌我只考虑1.2）所以我打算就一直留着吧，以后搬家大不了就找个有dinning room的房子放着继续用<img class="note-content-emoji" crossorigin="anonymous" src="https://picasso-static.xiaohongshu.com/fe-platform/124387198d229cb5aa2be5dd74db4af820e85dcd/xhs_theme_xy_emotion_redmoji_jimei.png"><br><br></span><!----><!----><a data-v-92d0a096="" data-v-104cd31e="" id="hash-tag" target="_blank" class="tag tag-search" href="/search_result?keyword=%25E5%258C%2597%25E7%25BE%258E%25E7%2594%259F%25E6%25B4%25BB&amp;type=54&amp;source=web_note_detail_r10">#北美生活<div style="position: absolute; left: 0px; top: 0px; visibility: hidden; z-index: 0;"><div data-v-4b57735a=""><div data-v-8ec4c7f0="" data-v-4b57735a="" class="singleLine tooltip-wrapper hash-tag-search-guide"><div data-v-8ec4c7f0="" class="arrow" style="left: 0px; bottom: -18px; transform: translate(0px, -12.6px);"><svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg" data-v-8ec4c7f0=""><path fill-rule="evenodd" clip-rule="evenodd" d="M6.62812 30.0004C6.41876 30.0007 6.20939 30.0009 6 30.0009L7.89538 30.0009C7.47295 29.9995 7.05055 30 6.62812 30.0004ZM28.127 30.0013L29.3719 30.0009L29.9887 30.0014C29.7831 30.0014 29.5775 30.0011 29.3719 30.0009C28.9569 30.0005 28.542 30 28.127 30.0013Z" fill="#FF0000" data-v-8ec4c7f0=""></path><path d="M8.62313 30.0055C9.46008 30.0138 10.3968 30.0256 11.2113 30.3032C12.0911 30.6033 12.6736 31.1279 13.2596 31.7453C13.6815 32.1893 14.5103 33.1367 14.9139 33.5942C15.2441 33.9692 15.8907 34.7105 16.2437 35.0692C16.688 35.5204 17.2373 36 18.0003 36C18.7632 36 19.3122 35.5204 19.7563 35.0697C20.1093 34.7112 20.7559 33.9695 21.0864 33.5946C21.4894 33.1372 22.3182 32.1898 22.7404 31.7457C23.3274 31.1283 23.9089 30.6037 24.7884 30.3037C25.6032 30.0267 26.5402 30.0143 27.3766 30.006C27.6268 30.0035 27.8769 30.0021 28.127 30.0013L7.89538 30.0009C8.13795 30.0017 8.38053 30.0031 8.62313 30.0055Z" fill="currentColor" data-v-8ec4c7f0=""></path><path fill-rule="evenodd" clip-rule="evenodd" d="M29.3719 5.99955C29.5812 5.99933 29.7906 5.9991 30 5.9991L28.1046 5.99906C28.527 6.00046 28.9494 6 29.3719 5.99955ZM7.87298 5.99867L6.62811 5.99909L6.01131 5.99864C6.21692 5.99865 6.42252 5.99887 6.62811 5.99909C7.04306 5.99953 7.45799 5.99998 7.87298 5.99867Z" fill="currentColor" data-v-8ec4c7f0=""></path><path d="M27.3769 5.99448C26.5399 5.98618 25.6032 5.9744 24.7887 5.69676C23.9089 5.39672 23.3264 4.87212 22.7404 4.25474C22.3185 3.81069 21.4897 2.86326 21.0861 2.40583C20.7559 2.03078 20.1093 1.28946 19.7563 0.930803C19.312 0.479596 18.7627 0 17.9997 0C17.2368 0 16.6878 0.479596 16.2437 0.930342C15.8907 1.28877 15.2441 2.03055 14.9136 2.40536C14.5106 2.8628 13.6818 3.81022 13.2596 4.25428C12.6726 4.87166 12.0911 5.39626 11.2116 5.69629C10.3968 5.97325 9.45982 5.98571 8.62339 5.99402C8.37322 5.99647 8.12309 5.99789 7.87298 5.99867L28.1046 5.99906C27.862 5.99826 27.6195 5.99685 27.3769 5.99448Z" fill="currentColor" data-v-8ec4c7f0=""></path><path fill-rule="evenodd" clip-rule="evenodd" d="M30.0004 29.3719C30.0007 29.5812 30.0009 29.7906 30.0009 30L30.0009 28.1046C29.9995 28.527 30 28.9494 30.0004 29.3719ZM30.0013 7.87298L30.0009 6.62811L30.0014 6.01131C30.0014 6.21692 30.0011 6.42252 30.0009 6.62811C30.0005 7.04306 30 7.45799 30.0013 7.87298Z" fill="currentColor" data-v-8ec4c7f0=""></path><path d="M30.0055 27.3769C30.0138 26.5399 30.0256 25.6032 30.3032 24.7887C30.6033 23.9089 31.1279 23.3264 31.7453 22.7404C32.1893 22.3185 33.1367 21.4897 33.5942 21.0861C33.9692 20.7559 34.7105 20.1093 35.0692 19.7563C35.5204 19.312 36 18.7627 36 17.9997C36 17.2368 35.5204 16.6878 35.0697 16.2437C34.7112 15.8907 33.9695 15.2441 33.5946 14.9136C33.1372 14.5106 32.1898 13.6818 31.7457 13.2596C31.1283 12.6726 30.6037 12.0911 30.3037 11.2116C30.0267 10.3968 30.0143 9.45982 30.006 8.62339C30.0035 8.37322 30.0021 8.12309 30.0013 7.87298L30.0009 28.1046C30.0017 27.862 30.0031 27.6195 30.0055 27.3769Z" fill="currentColor" data-v-8ec4c7f0=""></path><path fill-rule="evenodd" clip-rule="evenodd" d="M5.99955 6.62812C5.99933 6.41876 5.9991 6.20939 5.9991 6L5.99906 7.89538C6.00046 7.47295 6 7.05055 5.99955 6.62812ZM5.99867 28.127L5.99909 29.3719L5.99864 29.9887C5.99865 29.7831 5.99887 29.5775 5.99909 29.3719C5.99953 28.9569 5.99998 28.542 5.99867 28.127Z" fill="currentColor" data-v-8ec4c7f0=""></path><path d="M5.99448 8.62313C5.98618 9.46008 5.9744 10.3968 5.69676 11.2113C5.39672 12.0911 4.87212 12.6736 4.25474 13.2596C3.81069 13.6815 2.86326 14.5103 2.40583 14.9139C2.03078 15.2441 1.28946 15.8907 0.930803 16.2437C0.479596 16.688 0 17.2373 0 18.0003C0 18.7632 0.479596 19.3122 0.930342 19.7563C1.28877 20.1093 2.03055 20.7559 2.40536 21.0864C2.8628 21.4894 3.81022 22.3182 4.25428 22.7404C4.87166 23.3274 5.39626 23.9089 5.69629 24.7884C5.97325 25.6032 5.98571 26.5402 5.99402 27.3766C5.99647 27.6268 5.99789 27.8769 5.99867 28.127L5.99906 7.89538C5.99826 8.13795 5.99685 8.38053 5.99448 8.62313Z" fill="currentColor" data-v-8ec4c7f0=""></path></svg></div><div data-v-8ec4c7f0="" style="z-index: 99;"><span data-v-4b57735a="" data-v-8ec4c7f0-s="" class="no-wrap">话题可以点击搜索啦~</span></div></div></div></div></a><span data-v-104cd31e=""> </span><!----><!----><a data-v-92d0a096="" data-v-104cd31e="" id="hash-tag" target="_blank" class="tag tag-search" href="/search_result?keyword=%25E5%25AE%259E%25E6%259C%25A8%25E9%25A4%2590%25E6%25A1%258C&amp;type=54&amp;source=web_note_detail_r10">#实木餐桌</a><span data-v-104cd31e=""> </span><!----><!----><a data-v-92d0a096="" data-v-104cd31e="" id="hash-tag" target="_blank" class="tag tag-search" href="/search_result?keyword=Crateandbarrel&amp;type=54&amp;source=web_note_detail_r10">#Crateandbarrel</a><span data-v-104cd31e=""> </span><!----><!----><a data-v-92d0a096="" data-v-104cd31e="" id="hash-tag" target="_blank" class="tag tag-search" href="/search_result?keyword=%25E5%258C%2597%25E7%25BE%258E%25E5%25AE%25B6%25E8%25A3%2585&amp;type=54&amp;source=web_note_detail_r10">#北美家装</a><span data-v-104cd31e=""></span><!----></div>`,
        date:"2024-01-02",
        position:"美国"
    }
]

export  default  hotList;

3.在src/main/js/MainAbility 下新建一个common的文件夹，然后再在该文件夹下新建一个images文件夹，将项目要用到的图片资源放在该目录下。

页面设计

inedx页面

4.编写index页面

index.hml

<div class="container">
    <div class="header">
        <text class="logo">小红本</text>
    </div>
<!--列表容器-->
    <div class="hot-list">
    <!-- 左边列 -->
        <div class="list-column">
            <div class="list-item" if="{{$idx % 2 == 0}}"  for="{{hotList}}" tid="id" @click="toDetail($item.id)">
                <image src="{{$item.imgUrl}}" class="cover"></image>
                <text class="item-title">{{$item.title}}</text>
                <div class="item-footer">
                    <div>
                        <image class="avatar" src="{{$item.avatar}}"></image>
                        <text class="username">{{$item.username}}</text>
                        <text>❤<span>{{$item.username}}</span></text>
                    </div>
                </div>
            </div>
        </div>
        <!-- 右边列 -->
        <div class="list-column">
            <div class="list-item" if="{{$idx % 2 == 0}}"  for="{{hotList}}" tid="id" @click="toDetail($item.id)">
                <image src="{{$item.imgUrl}}" class="cover"></image>
                <text class="item-title">{{$item.title}}</text>
                <div class="item-footer">
                    <div>
                        <image class="avatar" src="{{$item.avatar}}"></image>
                        <text class="username">{{$item.username}}</text>
                        <text>❤<span>{{$item.username}}</span></text>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

index.css

.container{
    display:flex;
    flex-firection:column;
    width:100%;
}
.header{
    width:100%;
    padding:30px 20px;
    background-color:#fff;
    position:fixed;
    top:0;
}
.logo{
    font-size:60px;
    color:red;
    font-weight:bold;
}

.hot-list{
    margin-top:120px;
    width:100%;
    display:flex;
    padding:20px;
    flex-direction:row;
    justify-content:space-between;
}

.list-column{
    width:330px;
    display:flex;
    flex-direction:column;
}

.list-item{
    width:100%;
    display:flex;
    flex-direction:column;
    margin-top:20px;
}

.list-item .cover{
    width:100%;
    border-radius:20px;
    /* 保持图片的原始比例 */
    fit-original-size:true;
}

.list-item .item-title{
    width:100%;
    font-size:40px;
    margin-top:20px;
    /* 设置显示行数，这里显示两行 */
    max-lines:2;
    /* 超出2行，其余部分设置成...的形式 */
    text-overflow:ellipsis;
}

.list-item .item-footer{
    display:flex;
    flex-direction:row;
    width:100%;
    height:60px;
    font-size:30px;
    margin-top:40px;
}

.list-item .item-footer .avatar{
    width:40px;
    height:40px;
    border-radius:20px;
}

.list-item .item-footer .username{
    margin-left:10px;
    
}

数据渲染

index.js

import hotList from "../../res/data"
import router from "@ohos.router"

export default{
    data:{
        title:"",
        hotList:[]
    },
    onInit(){
        this.hotList = hotList;
    },
    // 跳转至详情页
    toDetail(id){
        router.push({
            url:'pages/detail/detail',
            params:{
                id:id
            }
        })
    }
}

详情页面设计

创建一个详情页，名字就叫detail

detail.js

import hotList from "../../res/data"
import router from "@ohos.router"

export default{
    data:{
        title:"",
        noteData:{}
    },
    onInit(){
        // 接受上一页面传来的参数
        let id = router.getParms()['id'];
        
        // fliter是内置函数，过滤器，是用来查询数据的
        this.noteData = hotList.fliter((item)=> item.id == id)[0];
    },
    // 返回上一页
    back(){
        router.back();
    }
}

detail.hml

<div class="container">
    <div class="header">
        <div class="close-btn" @click="back"><text>x</text></div>
        	<div class="user">
        		<image class="avatar" src="{{noteData.avatar}}"></image>
        		<text>{{noteData.username}}</text>
    		</div>
    </div>
    
    <div class="main">
        <image class="cover"  src="{{noteData.imgUrl}}"></image>
        <text>{{noteData.title}}</text>
        <div class="content">
            <!-- richtext是内置的富文本标签 -->
            <richtext>{{noteData.content}}</richtext>
        </div>
        <text>
        	<span>{{noteData.data}}</span>	<span>{{noteData.position}}</span>
        </text>
    </div>

</div>

detail.css

.container{
    display:flex;
    flex-direction:column;
    width:100%;
}

.header{
    display:flex;
    flex-direction:row;
    justify-content:space-between;
    with:100%;
    padding:30px 20px;
    background-color:#fff;
    color:#333;
}

.close-btn{
    width:60px;
    height:60px;
    line-height:60px;
    font-size:50px;
    margin-left:20px;
}

.user{
    height:60px;
    line-height:60px;
    margin-right:20px;
}

.user .avatar{
    width:60px;
    height:60px;
    border-radius:30px;
    margin-right:20px;
    
}

.main{
    width:100%;
    display:flex;
    flex-direction:column;
    padding:20px;
}

.main .title{
    font-size:60px;
    margin-top:20px;
}