Browse Source

卡片样式调整

zhuth 7 years ago
parent
commit
65ca486775

+ 4 - 3
src/components/chart/list.jsx

@@ -50,8 +50,8 @@ class ChartList extends React.Component {
      * 设置卡片容器宽度 = 每行最大卡片数量 * 卡片宽度
      */
     setBodyWidth() {
-        const chartBody = document.getElementsByClassName('chart-body')[0]; // 卡片容器
-        const parent = chartBody.parentNode; // 父级容器
+        const cardBody = document.getElementsByClassName('chart-body')[0]; // 卡片容器
+        const parent = cardBody.parentNode; // 父级容器
         const pWidth = parent.offsetWidth; // 父级容器宽度
         const pPadding = 10 + 10; // 父级容器左右padding
         const cWidth = 207; // 每个卡片宽度
@@ -59,8 +59,9 @@ class ChartList extends React.Component {
         const pTrueWidth = pWidth - pPadding; // 父容器实际可用宽度
         const cTrueWidth = cWidth + cMargin; // 卡片实际占用宽度
         const count = Math.floor(pTrueWidth/cTrueWidth); // 每行最大卡片数量
+        const cardBodyWidth = count * cTrueWidth;
 
-        chartBody.style.width = count * cTrueWidth  + 'px';
+        cardBodyWidth > 0 ? cardBody.style.width = cardBodyWidth + 'px' : void(0);
     }
 
     generateCard() {

+ 1 - 0
src/components/chart/list.less

@@ -4,6 +4,7 @@
             &>.ant-card-head {
                 padding: 0 10px;
                 .tools {
+                    flex: 1;
                     .anticon-bars {
                         cursor: pointer;
                         line-height: 1.6;

+ 1 - 1
src/components/common/login/login.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import Login from 'ant-design-pro/lib/Login'
 import { Alert, Checkbox, Icon } from 'antd'
-import { Link, Redirect } from 'dva/router'
+import { Redirect } from 'dva/router'
 import { connect } from 'dva'
 import * as service from '../../../services/index'
 import URLS from '../../../constants/url'

+ 4 - 3
src/components/dashboard/list.jsx

@@ -40,8 +40,8 @@ class DashboardList extends React.Component {
      * 设置卡片容器宽度 = 每行最大卡片数量 * 卡片宽度
      */
     setBodyWidth() {
-        const chartBody = document.getElementsByClassName('dashboard-body')[0]; // 卡片容器
-        const parent = chartBody.parentNode; // 父级容器
+        const cardBody = document.getElementsByClassName('dashboard-body')[0]; // 卡片容器
+        const parent = cardBody.parentNode; // 父级容器
         const pWidth = parent.offsetWidth; // 父级容器宽度
         const pPadding = 10 + 10; // 父级容器左右padding
         const cWidth = 512; // 每个卡片宽度
@@ -49,8 +49,9 @@ class DashboardList extends React.Component {
         const pTrueWidth = pWidth - pPadding; // 父容器实际可用宽度
         const cTrueWidth = cWidth + cMargin; // 卡片实际占用宽度
         const count = Math.floor(pTrueWidth/cTrueWidth); // 每行最大卡片数量
+        const cardBodyWidth = count * cTrueWidth;
 
-        chartBody.style.width = count * cTrueWidth  + 'px';
+        cardBodyWidth > 0 ? cardBody.style.width = cardBodyWidth + 'px' : void(0);
     }
 
     generateCard() {

+ 1 - 0
src/components/dashboard/list.less

@@ -2,6 +2,7 @@
     .ant-card-head {
         padding: 0 10px;
         .tools {
+            flex: 1;
             .anticon-bars {
                 cursor: pointer;
                 line-height: 1.6;

+ 1 - 0
src/components/dataSource/list.less

@@ -4,6 +4,7 @@
         .ant-card-head {
             padding: 0 10px;
             .datasource-tools {
+                flex: 1;
                 .anticon-bars {
                     cursor: pointer;
                     line-height: 1.6;

+ 5 - 0
src/components/user/userInfo.jsx

@@ -0,0 +1,5 @@
+const UserInfo = () => {
+    return <div cl></div>
+}
+
+export default UserInfo;