评论区样式

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 {
+    align-items: center;
-    font-size: 18px;
+    justify-content: center;
 
+    .left{
+        flex: 1;
+        margin-left: 15%;
     }
     
+    .right{
+        margin-right: 15%;
+    }
+}
+
+.list {
+    margin-left: 16.5%;
+    margin-right: 15%;
+    margin-bottom: 5px;
     .item {
-    font-size: 18px;
+        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,29 +34,54 @@ const List = (
         execute();
         //提交后清空输入框
         setNewCommentText('');
-    }
+    };
-
 
     return (
         <>
-            <h3 className={Styles.heading}>评论区</h3>
+            <h3 className={Styles.heading}>{t('CommentSection')}</h3>
 
-            {list && (
+            <div className={Styles.editor}>
-                <>
+                <div className={Styles.left}>
-                    {list.map((item) => {
-                        return <div key={item.id} className={Styles.item}>{item.id}:</div>;
-                    })}
-                </>
-            )}
                     {/* 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>
+                    >
+                        {t('common::submit')}
+                    </Button>
+                </div>
+            </div>
+            {list && (
+                <div className={Styles.list}>
+                    {list.map((item) => {
+                        return (
+                            <div key={item.id} className={`${Styles.item} ${Styles.messageArea}`}>
+                                {item.id}:{item.content}
+                            </div>
+                        );
+                    })}
+                </div>
+            )}
         </>
     );
 };

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",