You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
113 lines
3.1 KiB
113 lines
3.1 KiB
import './index.css'
|
|
import avatar from './images/avatar.png'
|
|
// 依赖的数据
|
|
const state = {
|
|
// hot: 热度排序 time: 时间排序
|
|
tabs: [
|
|
{
|
|
id: 1,
|
|
name: '热度',
|
|
type: 'hot'
|
|
},
|
|
{
|
|
id: 2,
|
|
name: '时间',
|
|
type: 'time'
|
|
}
|
|
],
|
|
active: 'hot',
|
|
list: [
|
|
{
|
|
id: 1,
|
|
author: '刘德华',
|
|
comment: '给我一杯忘情水',
|
|
time: new Date('2021-10-10 09:09:00'),
|
|
// 1: 点赞 0：无态度 -1:踩
|
|
attitude: 1
|
|
},
|
|
{
|
|
id: 2,
|
|
author: '周杰伦',
|
|
comment: '哎哟，不错哦',
|
|
time: new Date('2021-10-11 09:09:00'),
|
|
// 1: 点赞 0：无态度 -1:踩
|
|
attitude: 0
|
|
},
|
|
{
|
|
id: 3,
|
|
author: '五月天',
|
|
comment: '不打扰，是我的温柔',
|
|
time: new Date('2021-10-11 10:09:00'),
|
|
// 1: 点赞 0：无态度 -1:踩
|
|
attitude: -1
|
|
}
|
|
]
|
|
}
|
|
// 格式化时间文本
|
|
function getTime (time) {
|
|
return `${time.getFullYear()}-${time.getMonth() + 1}-${time.getDate()}`
|
|
}
|
|
function App () {
|
|
return (
|
|
<div className="App">
|
|
<div className="comment-container">
|
|
{/* 评论数 */}
|
|
<div className="comment-head">
|
|
<span>5 评论</span>
|
|
</div>
|
|
{/* 排序 */}
|
|
<div className="tabs-order">
|
|
<ul className="sort-container">
|
|
{state.tabs.map(item => <li key={item.id} className={item.type === state.active ? 'on' : ''}>按{item.name}排序</li>)}
|
|
</ul>
|
|
</div>
|
|
|
|
{/* 添加评论 */}
|
|
<div className="comment-send">
|
|
<div className="user-face">
|
|
<img className="user-head" src={avatar} alt="" />
|
|
</div>
|
|
<div className="textarea-container">
|
|
<textarea
|
|
cols="80"
|
|
rows="5"
|
|
placeholder="发条友善的评论"
|
|
className="ipt-txt"
|
|
/>
|
|
<button className="comment-submit">发表评论</button>
|
|
</div>
|
|
<div className="comment-emoji">
|
|
<i className="face"></i>
|
|
<span className="text">表情</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 评论列表 */}
|
|
<div className="comment-list">
|
|
{state.list.map(item => (<div className="list-item" key={item.id}>
|
|
<div className="user-face">
|
|
<img className="user-head" src={avatar} alt="" />
|
|
</div>
|
|
<div className="comment">
|
|
<div className="user">{item.author}</div>
|
|
<p className="text">{item.comment}</p>
|
|
<div className="info">
|
|
<span className="time">{getTime(item.time)}</span>
|
|
<span className={item.attitude === 1 ? 'like liked' : 'like'}>
|
|
<i className="icon" />
|
|
</span>
|
|
<span className={item.attitude === -1 ? 'hate hated' : 'hate'}>
|
|
<i className="icon" />
|
|
</span>
|
|
<span className="reply btn-hover">删除</span>
|
|
</div>
|
|
</div>
|
|
</div>))}
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default App
|