feat: update dashbord card style

app/containers/DataManagerOverview/index.less

@@ -18,6 +18,12 @@
       padding: 20px;
       display: flex;
       flex-direction: column;
+      border-radius: 6px;
+      transition: all .2s ease;
+
+      &:hover {
+        box-shadow: 0 3px 8px -3px rgba(0,0,0,0.1);
+      }
       &:last-child {
         margin-right: 0;
       }
@@ -44,6 +50,15 @@
       padding: 10px 20px;
       flex: 1;
       margin-right: 20px;
+      position: relative;
+      background-repeat: no-repeat;
+      background-position: center;
+      background-size: cover;
+      border-radius: 6px;
+      transition: all .2s ease;
+      &:hover {
+        box-shadow: 0 3px 8px -3px rgba(0,0,0,0.1);
+      }
       &:last-child {
         margin-right: 0;
       }
@@ -52,9 +67,16 @@
         padding-bottom: 10px;
       }
       .num {
-        font-size: 24px  ;
+        font-size: 30px  ;
         font-weight: bold;
-        color: @blue;
+        color: #fff;
+        padding-right: 8px;
+      }
+      img {
+        position: absolute;
+        right: 20px;
+        bottom: 30px;
+        width: 40px;
       }
     }
   }

app/containers/DataManagerOverview/index.tsx

@@ -5,6 +5,14 @@ import { init, EChartOption, ECharts } from 'echarts'
 import styles from './index.less'
 import api from 'utils/api'
 import request from 'utils/request'
+import ICON_BM from 'assets/images/icon_bm.png'
+import ICON_ML from 'assets/images/icon_mulu.png'
+import ICON_XT from 'assets/images/icon_xl.png'
+import ICON_ZY from 'assets/images/icon_zy.png'
+import IMG_BG_BM from 'assets/images/img_bg_bm.png'
+import IMG_BG_ML from 'assets/images/img_bg_mulu.png'
+import IMG_BG_XT from 'assets/images/img_bg_xl.png'
+import IMG_BG_ZY from 'assets/images/img_bg_zy.png'
 
 const DEFAULT_COLORS = [
   '#5470c6',
@@ -120,26 +128,35 @@ export default function DataOverview() {
           {[
             {
               title: '数据资源数量',
-              num: overview.dataSource
+              num: overview.dataSource,
+              icon: ICON_ZY,
+              bg: IMG_BG_ZY
             },
             {
               title: '来源部门数量',
-              num: overview.originDept
+              num: overview.originDept,
+              icon:  ICON_BM,
+              bg: IMG_BG_BM
             },
             {
               title: '来源系统数量',
-              num: overview.originSystem
+              num: overview.originSystem,
+              icon: ICON_XT,
+              bg: IMG_BG_XT
             },
             {
               title: '近一月目录新增数量',
-              num: overview.countCatalogue
+              num: overview.countCatalogue,
+              icon: ICON_ML,
+              bg: IMG_BG_ML
             }
           ].map((item) => (
-            <div className={styles.item} key={item.title}>
+            <div className={styles.item} key={item.title} style={{backgroundImage: `url("${item.bg}")` }}>
               <div className={styles.title}>{item.title}</div>
               <div>
                 <span className={styles.num}>{item.num}</span> 个
               </div>
+              <img src={item.icon} alt={item.title} />
             </div>
           ))}
         </div>

app/containers/Display/components/Layer/Content/LayerBox.tsx

@@ -34,6 +34,7 @@ import { ContextMenuProxyContext } from '../ContextMenu'
 import { useSelector } from 'react-redux'
 import { makeSelectCurrentOperateItemParams } from 'app/containers/Display/selectors'
 import { SecondaryGraphTypes } from '../../Setting'
+import { ASSETS_HOST } from 'app/globalConstants'
 
 interface ILayerBoxProps {
   children?: ReactNode
@@ -57,7 +58,7 @@ const LayerBox: React.FC = (props: ILayerBoxProps) => {
         : layer.params,
     [dragging, operateItemParams, layer.params]
   )
-  
+
   const labelText = useMemo(
     (): boolean => subType === SecondaryGraphTypes.Label,
     [subType]
@@ -101,11 +102,11 @@ const LayerBox: React.FC = (props: ILayerBoxProps) => {
       style.borderRadius = `${borderRadius}px`
     }
     if (backgroundImage) {
-      style.background = `url("${backgroundImage}") 0% 0% / ${backgroundSize} ${backgroundRepeat}`
+      style.background = `url("${ASSETS_HOST}${backgroundImage}") 0% 0% / ${backgroundSize} ${backgroundRepeat}`
     } else if (backgroundColor) {
       style.backgroundColor = `rgba(${backgroundColor.join()})`
     }
-    if(labelText) {
+    if (labelText) {
       style.height = 'auto'
     }
     return style

app/containers/Viz/components/SlideThumbnail/Item.tsx

@@ -27,6 +27,7 @@ import { MenuProps } from 'antd/lib/menu'
 import { ISlideFormed } from '../types'
 
 import styles from './SlideThumbnail.less'
+import { ASSETS_HOST } from 'app/globalConstants'
 
 interface ISlideThumbnailProps {
   className?: string
@@ -130,7 +131,7 @@ const SlideThumbnail: React.FC<ISlideThumbnailProps> = (props) => {
   })
 
   const slideStyle: React.CSSProperties = {
-    background: avatar && `url(${avatar}) center/cover`,
+    background: avatar && `url(${ASSETS_HOST}${avatar}) center/cover`,
     backgroundColor: `rgba(${backgroundColor.join()})`
   }
 

app/globalConstants.ts

@@ -22,7 +22,8 @@ export const CLIENT_VERSION = '0.3-rc'
 const isProd = process.env.NODE_ENV === 'production'
 export const HOST1 = isProd ? 'http://thgateway.xt.wenhq.top:8083/' : '/'
 export const API_HOST = isProd ? `${HOST1}taihu-analysis/api/v3` : '/api/v3'
-export const ASSETS_HOST = `${HOST1}taihu-analysis`
+export const ASSETS_HOST = isProd ? `${HOST1}taihu-analysis` : ''
+// export const ASSETS_HOST = `http://thgateway.xt.wenhq.top:8083/taihu-analysis`
 export const SHARE_HOST = `${location.origin}/share.html`
 export const EXTERNAL_LOG_OUT_URL = '/login/oauth2/logout'