add panel

front/project/www/components/Panel/index.js

@@ -6,15 +6,17 @@ import Module from '../Module';
 import ProgressButton from '../ProgressButton';
 import Button from '../Button';
 
-function Panel(props) {
+export default function Panel(props) {
   const { style, message, data = {}, col = 3, title, onClick } = props;
   return (
     <Module style={style} className="panel">
       <div className="header">
         <span>{title}</span>
-        <Tooltip title={message} trigger="click">
-          <Assets className="qa" name="QA" svg />
-        </Tooltip>
+        {message && (
+          <Tooltip title={message} trigger="click">
+            <Assets className="qa" name="QA" svg />
+          </Tooltip>
+        )}
       </div>
       <div className="body">
         <div className="chart-info">
@@ -31,6 +33,13 @@ function Panel(props) {
                 </div>
               );
             })}
+            {(data.desc || []).length > 0 && (
+              <div className="desc-wrapper">
+                {(data.desc || []).map(row => {
+                  return <div className="desc">{row}</div>;
+                })}
+              </div>
+            )}
           </div>
         </div>
         <div className={`list col-${col}`}>
@@ -52,13 +61,92 @@ function Panel(props) {
     </Module>
   );
 }
-Panel.propTypes = {};
-export default Panel;
+export function WaitPanel(props) {
+  const { style, message, data = {}, col = 3, title, onClick } = props;
+  return (
+    <Module style={style} className="panel wait-panel">
+      <div className="header">
+        <span>{title}</span>
+        {message && (
+          <Tooltip title={message} trigger="click">
+            <Assets className="qa" name="QA" svg />
+          </Tooltip>
+        )}
+      </div>
+      <div className="body">
+        <div className="chart-info">
+          <div className="info">
+            <div className="text">您还未开通本月机经</div>
+            {(data.desc || []).length > 0 && (
+              <div className="desc-wrapper">
+                {(data.desc || []).map(row => {
+                  return <div className="desc">{row}</div>;
+                })}
+              </div>
+            )}
+            {(data.info || []).map(row => {
+              return (
+                <div className="item">
+                  <div className="title">{row.title}</div>
+                  <div className="data">
+                    <span className="text">{row.number}</span>
+                    {row.unit}
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+        <div className={`list col-${col}`}>
+          {(data.children || []).map(item => {
+            return (
+              <ProgressButton
+                className="item"
+                progress={item.progress}
+                onClick={() => {
+                  if (onClick) onClick(item);
+                }}
+              >
+                {item.title}
+              </ProgressButton>
+            );
+          })}
+        </div>
 
-export function TotalPanel(props) {
+        <Button size="lager" radius>
+          立即开通
+        </Button>
+      </div>
+    </Module>
+  );
+}
+export function BuyPanel(props) {
+  const { style, message, title } = props;
+  return (
+    <Module style={style} className="panel buy-panel">
+      <div className="header">
+        <span>{title}</span>
+        {message && (
+          <Tooltip title={message} trigger="click">
+            <Assets className="qa" name="QA" svg />
+          </Tooltip>
+        )}
+      </div>
+      <div className="body">
+        <Assets name="banner" />
+        <div className="text">您还未购买本月机经</div>
+        <Button radius size="small" width={80}>
+          立即购买
+        </Button>
+      </div>
+    </Module>
+  );
+}
+
+export function SmallPanel(props) {
   const { style, title, lock, data = {} } = props;
   return (
-    <Module style={style} className="panel total-panel">
+    <Module style={style} className="panel small-panel">
       <div className="header">
         <span>{title}</span>
         {lock && <Assets name="lock" />}
@@ -86,10 +174,10 @@ export function TotalPanel(props) {
   );
 }
 
-export function WaitPanel(props) {
+export function SmallWaitPanel(props) {
   const { style, title } = props;
   return (
-    <Module style={style} className="panel wait-panel">
+    <Module style={style} className="panel small-wait-panel">
       <div className="header">
         <span>{title}</span>
         <Assets name="lock" />
@@ -106,10 +194,10 @@ export function WaitPanel(props) {
   );
 }
 
-export function BuyPanel(props) {
+export function SmallBuyPanel(props) {
   const { style, title } = props;
   return (
-    <Module style={style} className="panel buy-panel">
+    <Module style={style} className="panel small-buy-panel">
       <div className="header">
         <span>{title}</span>
         <Assets name="lock" />

front/project/www/components/Panel/index.less

@@ -23,8 +23,9 @@
   }
 
   .body {
-    min-height: 356px;
+    min-height: 256px;
     padding: 32px 44px;
+    padding-right: 30px;
 
     .chart-info {
       height: 110px;
@@ -40,7 +41,16 @@
       .info {
         display: inline-block;
         vertical-align: top;
-        padding-top: 24px;
+        padding-top: 10px;
+
+        .desc-wrapper {
+          margin-bottom: 5px;
+
+          .desc {
+            font-size: 12px;
+            color: #8897A8;
+          }
+        }
 
         .item {
           display: inline-block;
@@ -96,7 +106,55 @@
   }
 }
 
-.module.total-panel {
+.module.wait-panel {
+  .body {
+    position: relative;
+
+    .chart-info {
+      .info {
+        padding-top: 0;
+
+        .text {
+          color: #050930;
+          font-size: 16px;
+          margin-bottom: 5px;
+        }
+      }
+    }
+
+    .button {
+      width: 120px;
+      position: absolute;
+      top: 30px;
+      right: 46px;
+    }
+  }
+}
+
+
+.module.buy-panel {
+  .body {
+    height: 256px;
+    padding: 40px 10px;
+    position: relative;
+
+    .text {
+      position: absolute;
+      right: 60px;
+      top: 90px;
+      font-size: 10px;
+      color: #fff;
+    }
+
+    .button {
+      position: absolute;
+      right: 68px;
+      top: 120px;
+    }
+  }
+}
+
+.module.small-panel {
   .body {
     min-height: 166px;
     padding: 20px 30px 0;
@@ -104,6 +162,8 @@
 
     .chart-info {
       .info {
+        padding-top: 20px;
+
         .item {
           margin-right: 20px;
         }
@@ -118,7 +178,7 @@
   }
 }
 
-.module.wait-panel {
+.module.small-wait-panel {
   .body {
     min-height: 166px;
     padding: 20px 30px;
@@ -143,7 +203,7 @@
   }
 }
 
-.module.buy-panel {
+.module.small-buy-panel {
   .body {
     min-height: 166px;
     padding: 10px 10px 20px;
@@ -154,11 +214,11 @@
       height: 100%;
     }
 
+
     .button {
       position: absolute;
       right: 25px;
       top: 60px;
     }
-
   }
 }

front/project/www/routes/page/demo/page.js

@@ -5,7 +5,7 @@ import Continue from '../../../components/Continue';
 import Tabs from '../../../components/Tabs';
 import Module from '../../../components/Module';
 import Division from '../../../components/Division';
-import Panel, { TotalPanel, WaitPanel, BuyPanel } from '../../../components/Panel';
+import Panel, { BuyPanel, WaitPanel, SmallPanel, SmallWaitPanel, SmallBuyPanel } from '../../../components/Panel';
 import Card, { Card1 } from '../../../components/Card';
 import List from '../../../components/List';
 import ListTable from '../../../components/ListTable';
@@ -22,13 +22,52 @@ export default class extends Page {
         <Continue date={'2019-04-29 16:30'} data={{}} />
         <div className="content">
           <Division col="3" type="compact">
-            <TotalPanel
+            <SmallPanel
               title="千行 CAT"
               lock
               data={{ info: [{ title: '123', number: '123', unit: '1' }, { title: '123', number: '123', unit: '1' }] }}
             />
-            <WaitPanel title="千行 CAT" />
-            <BuyPanel title="千行 CAT" />
+            <SmallWaitPanel title="千行 CAT" />
+            <SmallBuyPanel title="千行 CAT" />
+          </Division>
+          <Division col="2">
+            <WaitPanel
+              title="OG"
+              col="3"
+              data={{
+                info: [
+                  { title: '123', number: 123, unit: '%' },
+                  { title: '123', number: 123, unit: '%' },
+                  { title: '123', number: 123, unit: '%' },
+                  { title: '123', number: 123, unit: '%' },
+                ],
+                desc: ['最近换库：2019-07-20 ，已换库10天', '最后更新：2019-07-28 00:28:49'],
+                children: [
+                  { progress: 10, title: '测试' },
+                  { progress: 10, title: '测试' },
+                  { progress: 0, title: '测试' },
+                ],
+              }}
+            />
+            <Panel
+              title="OG"
+              col="3"
+              data={{
+                info: [
+                  { title: '123', number: 123, unit: '%' },
+                  { title: '123', number: 123, unit: '%' },
+                  { title: '123', number: 123, unit: '%' },
+                  { title: '123', number: 123, unit: '%' },
+                ],
+                desc: ['最近换库：2019-07-20 ，已换库10天', '最后更新：2019-07-28 00:28:49'],
+                children: [
+                  { progress: 10, title: '测试' },
+                  { progress: 10, title: '测试' },
+                  { progress: 0, title: '测试' },
+                ],
+              }}
+            />
+            <BuyPanel title="OG" />
           </Division>
           <QAList data={[]} />
           <Tabs
@@ -112,12 +151,37 @@ export default class extends Page {
             <Panel
               title="OG"
               col="3"
-              list={[{ progress: 10, title: '测试' }, { progress: 10, title: '测试' }, { progress: 0, title: '测试' }]}
+              data={{
+                info: [
+                  { title: '123', number: 123, unit: '%' },
+                  { title: '123', number: 123, unit: '%' },
+                  { title: '123', number: 123, unit: '%' },
+                  { title: '123', number: 123, unit: '%' },
+                ],
+                desc: ['最近换库：2019-07-20 ，已换库10天', '最后更新：2019-07-28 00:28:49'],
+                children: [
+                  { progress: 10, title: '测试' },
+                  { progress: 10, title: '测试' },
+                  { progress: 0, title: '测试' },
+                ],
+              }}
             />
             <Panel
               title="OG"
               col="4"
-              list={[{ progress: 10, title: '测试' }, { progress: 10, title: '测试' }, { progress: 10, title: '测试' }]}
+              data={{
+                info: [
+                  { title: '123', number: 123 },
+                  { title: '123', number: 123 },
+                  { title: '123', number: 123 },
+                  { title: '123', number: 123 },
+                ],
+                children: [
+                  { progress: 10, title: '测试' },
+                  { progress: 10, title: '测试' },
+                  { progress: 0, title: '测试' },
+                ],
+              }}
             />
           </Division>
           <Division col="3">