update detail

src/components/Charts/TagCloud/index.js

@@ -6,6 +6,9 @@ import Cloud from 'g-cloud';
 /* eslint no-param-reassign: 0 */
 /* eslint no-return-assign: 0 */
 
+const imgUrl = 'https://gw.alipayobjects.com/zos/rmsportal/SQlwcHhAbFVjjbDCLROB.png';
+// const imgUrl = 'https://zos.alipayobjects.com/rmsportal/EEFqYWuloqIHRnh.jpg';
+
 class TagCloud extends PureComponent {
   componentDidMount() {
     this.initTagCloud();
@@ -25,7 +28,8 @@ class TagCloud extends PureComponent {
       const textAttrs = Util.mix(true, {}, {
         fillOpacity: cfg.opacity,
         fontSize: cfg.size,
-        rotate: 0, // cfg.origin._origin.rotate,
+        // rotate: 0, // cfg.origin._origin.rotate,
+        rotate: cfg.origin._origin.rotate,
         text: cfg.origin._origin.text,
         textAlign: 'center',
         fill: cfg.color,
@@ -78,45 +82,47 @@ class TagCloud extends PureComponent {
       height,
 
       // 设定文字大小配置函数(默认为12-40px的随机大小)
-      size: words => (((words.value - min) / (max - min)) * 12) + 6,
+      size: words => (((words.value - min) / (max - min)) * 4) + 10,
 
       // 设定文字内容
       text: words => words.name,
     });
 
-    // 执行词云布局函数，并在回调函数中调用G2对结果进行绘制
-    layout.exec((texts) => {
-      const chart = new G2.Chart({
-        container: this.node,
-        width,
-        height,
-        plotCfg: {
-          margin: 0,
-        },
-      });
-
-      chart.legend(false);
-      chart.axis(false);
-      chart.tooltip(false);
-
-      chart.source(texts);
-
-      // 将词云坐标系调整为G2的坐标系
-      chart.coord().reflect();
-
-      chart
-        .point()
-        .position('x*y')
-        .color('text')
-        .size('size', size => size)
-        .shape('cloud')
-        .style({
-          fontStyle: texts[0].style,
-          fontFamily: texts[0].font,
-          fontWeight: texts[0].weight,
+    layout.image(imgUrl, (imageCloud) => {
+      // 执行词云布局函数，并在回调函数中调用G2对结果进行绘制
+      imageCloud.exec((texts) => {
+        const chart = new G2.Chart({
+          container: this.node,
+          width,
+          height,
+          plotCfg: {
+            margin: 0,
+          },
         });
 
-      chart.render();
+        chart.legend(false);
+        chart.axis(false);
+        chart.tooltip(false);
+
+        chart.source(texts);
+
+        // 将词云坐标系调整为G2的坐标系
+        chart.coord().reflect();
+
+        chart
+          .point()
+          .position('x*y')
+          .color('text')
+          .size('size', size => size)
+          .shape('cloud')
+          .style({
+            fontStyle: texts[0].style,
+            fontFamily: texts[0].font,
+            fontWeight: texts[0].weight,
+          });
+
+        chart.render();
+      });
     });
   }
 

src/components/DescriptionList/index.less

@@ -10,6 +10,7 @@
   }
 
   .title {
+    font-size: 14px;
     color: @heading-color;
     font-weight: 500;
     margin-bottom: 16px;
@@ -59,10 +60,7 @@
   }
 }
 .descriptionListLarge {
-  .large {
-    margin-bottom: 24px;
-  }
-  .term {
-    padding-bottom: 24px;
+  .title {
+    font-size: 16px;
   }
 }

src/routes/Profile/BasicProfile.js

@@ -127,14 +127,14 @@ export default class BasicProfile extends Component {
     return (
       <PageHeaderLayout title="基础详情页">
         <Card bordered={false}>
-          <DescriptionList title="退款申请" style={{ marginBottom: 32 }}>
+          <DescriptionList size="large" title="退款申请" style={{ marginBottom: 32 }}>
             <Description term="取货单号">1000000000</Description>
             <Description term="状态">已取货</Description>
             <Description term="销售单号">1234123421</Description>
             <Description term="子订单">3214321432</Description>
           </DescriptionList>
           <Divider style={{ marginBottom: 32 }} />
-          <DescriptionList title="用户信息" style={{ marginBottom: 32 }}>
+          <DescriptionList size="large" title="用户信息" style={{ marginBottom: 32 }}>
             <Description term="用户姓名">付小小</Description>
             <Description term="联系电话">18100000000</Description>
             <Description term="常用快递">菜鸟仓储</Description>

src/routes/Profile/BasicProfile.less

@@ -2,6 +2,7 @@
 
 .title {
   color: @heading-color;
+  font-size: 16px;
   font-weight: 500;
   margin-bottom: 16px;
 }