评论区样式

src/components/frontend/home/comment/list/locales/zh_CN.json

@@ -1,3 +1,3 @@
 {
-    
+    "CommentSection":"评论区"
 }

src/components/frontend/home/comment/list/styles.module.less

@@ -1,15 +1,39 @@
+*{
+    font-size: 18px;
+}
 .heading{
-    color:rgb(97, 218, 251);
+    font-size: 25px;
+    color:rgb( 22,119,255);
+    text-indent: 7em;
+    font-family: Microsoft YaHei;
+}
+.messageArea{
     text-indent: 2em;
 }
+.editor {
+    display: flex;
+    flex-direction: row;
 
-.id {
-    font-size: 18px;
+    align-items: center;
+    justify-content: center;
+
+    .left{
+        flex: 1;
+        margin-left: 15%;
+    }
     
+    .right{
+        margin-right: 15%;
+    }
 }
 
-.item {
-    font-size: 18px;
-
-}
-
+.list {
+    margin-left: 16.5%;
+    margin-right: 15%;
+    margin-bottom: 5px;
+    .item {
+        border: 1px solid rgb(60, 134, 236);
+        padding: 20px;
+        border-radius: 20px;
+    }
+}

src/components/frontend/home/comment/list/web.pc.tsx

@@ -8,7 +8,6 @@ import useFeatures from '@project/hooks/useFeatures';
 
 const { TextArea } = Input;
 
-
 const List = (
     props: WebComponentProps<
         EntityDict,
@@ -20,7 +19,6 @@ const List = (
         }
     >
 ) => {
-    
     const { list } = props.data;
     const { t, addItem, execute } = props.methods;
     const features = useFeatures();
@@ -36,31 +34,56 @@ const List = (
         execute();
         //提交后清空输入框
         setNewCommentText('');
-    }
-
+    };
 
     return (
         <>
-            <h3 className={Styles.heading}>评论区</h3>
-                
+            <h3 className={Styles.heading}>{t('CommentSection')}</h3>
+
+            <div className={Styles.editor}>
+                <div className={Styles.left}>
+                    {/* textarea*/}
+                    <TextArea
+                        showCount
+                        style={{
+                            width: '95%',
+                            height: '100px',
+                            resize: 'none',
+                            margin:'30px'
+                        }}
+                        placeholder='请输入评论'
+                        value={newCommentText}
+                        onChange={(e) => setNewCommentText(e.target.value)}
+                    ></TextArea>
+                </div>
+                <div className={Styles.right}>
+                    {/* button */}
+                    <Button
+                        style={{
+                            width: "80px",
+                            height: "100px"
+                        }}
+                        type='primary'
+                        size='large'
+                        onClick={handleSubmit}
+                    >
+                        {t('common::submit')}
+                    </Button>
+                </div>
+            </div>
             {list && (
-                <>
+                <div className={Styles.list}>
                     {list.map((item) => {
-                        return <div key={item.id} className={Styles.item}>{item.id}:</div>;
+                        return (
+                            <div key={item.id} className={`${Styles.item} ${Styles.messageArea}`}>
+                                {item.id}:{item.content}
+                            </div>
+                        );
                     })}
-                </>
+                </div>
             )}
-            {/* textarea*/}
-            <TextArea
-                value={newCommentText}
-                onChange={(e)=>setNewCommentText(e.target.value)}
-            ></TextArea>
-            {/* button */}
-            <Button
-                onClick={handleSubmit}
-            >{t('common::submit')}</Button>
         </>
     );
 };
 
-export default List;
+export default List;

src/data/i18n.ts

@@ -242,7 +242,9 @@ const i18ns: I18n[] = [
         language: "zh-CN",
         module: "new-demo",
         position: "src/components/frontend/home/comment/list",
-        data: {}
+        data: {
+            "CommentSection": "评论区"
+        }
     },
     {
         id: "6fd812246bb915f692124fc05bb9ffd4",