商户详情模块开发完毕

src/components/CommentList/Item/index.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import Star from '../../Star';
+import './style.scss';
+
+// 无状态组件可以直接使用函数形式创建
+const Item = props => {
+ // 获取数据
+ const item = props.data;
+
+ return (
+ <div className="comment-item">
+ <h3>
+ <i className="icon-user"></i>
+ &nbsp;
+ {item.username}
+ </h3>
+ <Star star={item.star} />
+ <p>{item.comment}</p>
+ </div>
+ );
+};
+
+export default Item;

src/components/CommentList/Item/style.scss

@@ -0,0 +1,14 @@
+.comment-item {
+ border-bottom: 1px solid #f1f1f1;
+ padding-bottom: 10px;
+ margin-bottom: 10px;
+ h3 {
+ font-size: 18px;
+ line-height: 1.5;
+ color: #666;
+ }
+ p {
+ color: #999;
+ line-height: 1.5;
+ }
+}

src/components/CommentList/index.js

@@ -1,13 +1,20 @@
 import React from 'react';
+import CommentItem from './Item';
 
 import './style.scss';
 
 const CommentList = props => {
  const data = props.data;
- console.log(data)
+
  return (
- <div>
- CommentList
+ <div className="comment-list">
+ {
+ data.map((item, index) => {
+ return (
+ <CommentItem key={index} data={item} />
+ );
+ })
+ }
  </div>
  )
 };

src/components/CommentList/style.scss

@@ -0,0 +1,3 @@
+.comment-list {
+ padding: 10px;
+}

src/containers/Detail/subpage/style.scss

@@ -1,8 +1,10 @@
-.detail-comment-subpage{
-
-}
-h2 {
- margin: 10px;
- font-size: 16px;
- color: #666;
+.detail-comment-subpage {
+ background-color: #fff;
+ margin-top: 20px;
+
+ h2 {
+ font-size: 18px;
+ padding: 5px 10px;
+ border-bottom: 1px solid #f1f1f1;
+ }
 }