Kaynağa Gözat

feat(home): home view change

lind 3 yıl önce
ebeveyn
işleme
30e137b0bd

+ 1 - 2
src/pages/home/index.tsx

@@ -24,9 +24,8 @@ const Home = () => {
         if (resp.result.length == 0) {
           setCurrent('init');
         } else {
-          // setCurrent(resp.result[0]?.content);
+          setCurrent(resp.result[0]?.content);
         }
-        // setCurrent('ops');
       }
     });
   }, []);

+ 17 - 0
src/pages/home/init/index.less

@@ -0,0 +1,17 @@
+.title {
+  margin-bottom: 10px;
+  font-weight: 400;
+  font-size: 26px;
+  text-align: center;
+}
+
+.item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  img {
+    width: 80%;
+    margin-bottom: 5px;
+  }
+}

+ 35 - 14
src/pages/home/init/index.tsx

@@ -1,30 +1,51 @@
-import { Button, Radio } from 'antd';
+import { Button, Col, Radio, Row } from 'antd';
 import { useState } from 'react';
 import { service } from '..';
+import styles from './index.less';
 
 interface Props {
   changeView: (view: any) => void;
 }
 
 const Init = (props: Props) => {
-  const options = [
-    { label: '设备接入视图', value: 'device' },
-    { label: '运维管理视图', value: 'ops' },
-    { label: '综合管理视图', value: 'comprehensive' },
-  ];
-
   const [value, setValue] = useState<string>('device');
 
+  const viewMap = [
+    {
+      title: '设备接入视图',
+      img: require('/public/images/home/device.png'),
+      value: 'device',
+    },
+    {
+      title: '运维管理视图',
+      img: require('/public/images/home/ops.png'),
+      value: 'ops',
+    },
+    {
+      title: '综合管理视图',
+      img: require('/public/images/home/comprehensive.png'),
+      value: 'comprehensive',
+    },
+  ];
   return (
     <div>
-      <Radio.Group
-        options={options}
-        value={value}
-        onChange={(e) => setValue(e.target.value)}
-        optionType="button"
-      />
-      <div>
+      <div className={styles.title}>请选择首页视图</div>
+      <Radio.Group value={value} onChange={(e) => setValue(e.target.value)}>
+        <Row gutter={24}>
+          {viewMap.map((item) => (
+            <Col span={8} key={item.value}>
+              <div className={styles.item}>
+                <img src={item.img} className={styles.item} />
+                <Radio value={item.value}>{item.title}</Radio>
+              </div>
+            </Col>
+          ))}
+        </Row>
+      </Radio.Group>
+
+      <div style={{ textAlign: 'center', marginTop: 30 }}>
         <Button
+          type="primary"
           onClick={() => {
             service
               .setView({