feat: 调整售后评价组件布局

src/pages/afterService/components/Score/index.less

@@ -2,15 +2,17 @@
 
 .evaluate {
   .score {
-    position: absolute;
+    position: relative;
+    padding-right: 90px;
+    display: inline-block;
 
     &-left {
-      padding-right: 90px;
+      display: inline-block;
     }
   
     &-right {
       position: absolute;
-      top: -50%;
+      top: -76%;
       right: 0;
       width: 80px;
       flex-shrink: 0;

src/pages/afterService/components/Score/index.tsx

@@ -7,7 +7,7 @@
  */
 import React from 'react';
 import { useIntl } from 'umi';
-import { Row, Col, Descriptions } from 'antd';
+import { Row, Col, Form } from 'antd';
 import MellowCard, { MellowCardProps } from '@/components/MellowCard';
 import { Gauge } from '@/components/Charts';
 import styles from './index.less';
@@ -48,6 +48,11 @@ const Score: React.FC<ScoreProps> = ({
   ...rest
 }) => {
   const intl = useIntl();
+
+  const formItemLayout = {
+    labelCol: { span: 6 },
+    wrapperCol: { span: 18 },
+  };
   
   return (
     <MellowCard
@@ -56,40 +61,40 @@ const Score: React.FC<ScoreProps> = ({
       {...rest}
     >
       <Row gutter={40}>
-        <Col span={8}>
-          <div className={styles.score}>
-            <div className={styles['score-left']}>
-              <Descriptions column={1}>
-                <Descriptions.Item
-                  label={intl.formatMessage({ id: 'afterService.components.Score.score' }, { default: '售后满意度' })}
-                >
-                  <span className={styles['score-star']}>
-                    {`${score}${intl.formatMessage({ id: 'afterService.components.Score.score.unit' }, { default: '分' })}`}
-                  </span>
-                </Descriptions.Item>
-              </Descriptions>
-            </div>
-            <div className={styles['score-right']}>
-              <Gauge 
-                title=""
-                height={90}
-                percent={+(score/FULL_SCORE * 100).toFixed(2)}
-                formatter={() => ''}
-                formatContent={() => ''}
-                color={COLOR_MAP[score]}
-                strokeWidth={5}
-              />
+        <Col span={12}>
+          <Form.Item
+            label={intl.formatMessage({ id: 'afterService.components.Score.score' }, { default: '售后满意度' })}
+            labelAlign="left"
+            {...formItemLayout}
+          >
+            <div className={styles.score}>
+              <div className={styles['score-left']}>
+                <span className={styles['score-star']}>
+                  {`${score}${intl.formatMessage({ id: 'afterService.components.Score.score.unit' }, { default: '分' })}`}
+                </span>
+              </div>
+              <div className={styles['score-right']}>
+                <Gauge 
+                  title=""
+                  height={90}
+                  percent={+(score/FULL_SCORE * 100).toFixed(2)}
+                  formatter={() => ''}
+                  formatContent={() => ''}
+                  color={COLOR_MAP[score]}
+                  strokeWidth={5}
+                />
+              </div>
             </div>
-          </div>
+          </Form.Item>
         </Col>
-        <Col span={16}>
-          <Descriptions column={1}>
-            <Descriptions.Item
-              label={intl.formatMessage({ id: 'afterService.components.Score.content' }, { default: '售后评价' })}
-            >
-              {content}
-            </Descriptions.Item>
-          </Descriptions>
+        <Col span={12}>
+          <Form.Item
+            label={intl.formatMessage({ id: 'afterService.components.Score.content' }, { default: '售后评价' })}
+            labelAlign="left"
+            {...formItemLayout}
+          >
+            {content}
+          </Form.Item>
         </Col>
       </Row>
     </MellowCard>