fix: fix overview page style when no-cinder

1. Fix cards styles in no-cinder overview page
2. Fix resource card style in no-cinder administra overview page
3. Fix overview cards border-radius, shadow, margin

Change-Id: Ifc44a923300074c07c6ff2eff449b1cfe0d003b1

src/pages/base/containers/AdminOverview/components/ResourceOverview.jsx

@@ -14,7 +14,7 @@
 
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { Badge, Row, Col, Card, Descriptions } from 'antd';
+import { Badge, Row, Col, Card } from 'antd';
 import { inject, observer } from 'mobx-react';
 import adminInstance from 'asset/image/admin-instance.svg';
 import adminVolume from 'asset/image/admin-volume.svg';
@@ -119,10 +119,11 @@ export class virtualResourceInfo extends Component {
 
   renderCard() {
     const { virtualResource } = this.props.store;
+    const span = this.card.length === 1 ? 24 : 12;
     return (
-      <Row>
+      <Row gutter={20}>
         {this.card.map((item) => (
-          <Col span={12} style={{ textAlign: 'center' }} key={item.key}>
+          <Col span={span} style={{ textAlign: 'center' }} key={item.key}>
             <Card className={styles.card}>
               <Link to={item.to} style={{ color: '#000000' }}>
                 <Row>
@@ -194,12 +195,7 @@ export class virtualResourceInfo extends Component {
         title={t('Virtual Resource Overview')}
         bordered={false}
       >
-        <Descriptions column={1}>
-          <div className="site-card-wrapper">
-            {this.renderCard()}
-            {/* {this.renderSmallCard()} */}
-          </div>
-        </Descriptions>
+        <div>{this.renderCard()}</div>
       </Card>
     );
   }

src/pages/base/containers/AdminOverview/style.less

@@ -45,7 +45,6 @@
   .resource-overview {
     .card {
       height: 100%;
-      margin-right: 20px;
 
       .label {
         display: block;

src/pages/base/containers/Overview/index.jsx

@@ -60,8 +60,15 @@ export class Overview extends Component {
     return actions;
   }
 
+  get span() {
+    if (!globalRootStore.checkEndpoint('cinder')) {
+      return 8;
+    }
+    return 6;
+  }
+
   renderAction = (item) => (
-    <Row className={styles['action-button']} gutter={[8]}>
+    <Row className={styles['action-button']}>
       <Col span={8} className={styles['main-icon']}>
         <img alt="avatar" src={item.avatar} className={styles['action-icon']} />
       </Col>
@@ -73,7 +80,7 @@ export class Overview extends Component {
 
   renderActions() {
     return this.filterActions.map((item) => (
-      <Col span={6} key={item.key}>
+      <Col span={this.span} key={item.key}>
         <Link to={item.to}>{this.renderAction(item)}</Link>
       </Col>
     ));
@@ -96,8 +103,8 @@ export class Overview extends Component {
       <div className={styles.container}>
         <Row
           justify="space-between"
-          gutter={[22, 22]}
-          style={{ marginBottom: '22px' }}
+          gutter={16}
+          style={{ marginBottom: '16px' }}
         >
           {this.renderActions()}
         </Row>

src/pages/base/containers/Overview/style.less

@@ -1,4 +1,5 @@
 @import '~antd/lib/style/themes/default.less';
+@import '~styles/variables';
 
 .container {
   height: 100%;
@@ -16,8 +17,8 @@
     font-size: 18px;
     line-height: 88px;
     background: #fff;
-    border-radius: 9px;
-    box-shadow: 0 0 4px 1px rgba(175, 175, 175, 50%);
+    border-radius: @border-radius;
+    box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 9%);
     opacity: 0.9;
   }
 
@@ -109,6 +110,8 @@
 }
 
 .bottom {
+  border-radius: @border-radius;
+
   :global {
     .ant-card {
       box-shadow: unset;