fix: 登录样式修改和logo相关调整

config/defaultSettings.ts

@@ -15,7 +15,7 @@ const Settings: LayoutSettings & {
   title: '投资项目云平台',
   pwa: false,
   // logo: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg',
-  logo: '/logo.svg',
+  logo: '/logo.png',
   iconfontUrl: '//at.alicdn.com/t/font_2906856_u986loe1g6.js'
 }
 

src/components/Footer/index.tsx

@@ -1,15 +1,15 @@
-import { useIntl } from 'umi';
-import { GithubOutlined } from '@ant-design/icons';
-import { DefaultFooter } from '@ant-design/pro-layout';
+import { useIntl } from 'umi'
+import { GithubOutlined } from '@ant-design/icons'
+import { DefaultFooter } from '@ant-design/pro-layout'
 
 export default () => {
-  const intl = useIntl();
+  const intl = useIntl()
   const defaultMessage = intl.formatMessage({
     id: 'app.copyright.produced',
-    defaultMessage: '蚂蚁集团体验技术部出品',
-  });
+    defaultMessage: '蚂蚁集团体验技术部出品'
+  })
 
-  const currentYear = new Date().getFullYear();
+  const currentYear = new Date().getFullYear()
 
   return (
     <DefaultFooter
@@ -19,21 +19,21 @@ export default () => {
           key: 'Ant Design Pro',
           title: 'Ant Design Pro',
           href: 'https://pro.ant.design',
-          blankTarget: true,
+          blankTarget: true
         },
         {
           key: 'github',
           title: <GithubOutlined />,
           href: 'https://github.com/ant-design/ant-design-pro',
-          blankTarget: true,
+          blankTarget: true
         },
         {
-          key: 'Ant Design',
-          title: 'Ant Design',
+          key: '投资项目云平台',
+          title: '投资项目云平台',
           href: 'https://ant.design',
-          blankTarget: true,
-        },
+          blankTarget: true
+        }
       ]}
     />
-  );
-};
+  )
+}

src/components/index.md

@@ -17,10 +17,10 @@ sidemenu: false
 /**
  * background: '#f0f2f5'
  */
-import React from 'react';
-import Footer from '@/components/Footer';
+import React from 'react'
+import Footer from '@/components/Footer'
 
-export default () => <Footer />;
+export default () => <Footer />
 ```
 
 ## HeaderDropdown 头部下拉列表
@@ -31,9 +31,9 @@ HeaderDropdown 是 antd Dropdown 的封装，但是增加了移动端的特殊
 /**
  * background: '#f0f2f5'
  */
-import { Button, Menu } from 'antd';
-import React from 'react';
-import HeaderDropdown from '@/components/HeaderDropdown';
+import { Button, Menu } from 'antd'
+import React from 'react'
+import HeaderDropdown from '@/components/HeaderDropdown'
 
 export default () => {
   const menuHeaderDropdown = (
@@ -43,13 +43,13 @@ export default () => {
       <Menu.Divider />
       <Menu.Item key="logout">退出登录</Menu.Item>
     </Menu>
-  );
+  )
   return (
     <HeaderDropdown overlay={menuHeaderDropdown}>
       <Button>hover 展示菜单</Button>
     </HeaderDropdown>
-  );
-};
+  )
+}
 ```
 
 ## HeaderSearch 头部搜索框
@@ -60,9 +60,9 @@ export default () => {
 /**
  * background: '#f0f2f5'
  */
-import { Button, Menu } from 'antd';
-import React from 'react';
-import HeaderSearch from '@/components/HeaderSearch';
+import { Button, Menu } from 'antd'
+import React from 'react'
+import HeaderSearch from '@/components/HeaderSearch'
 
 export default () => {
   return (
@@ -72,24 +72,24 @@ export default () => {
       options={[
         { label: 'Ant Design Pro', value: 'Ant Design Pro' },
         {
-          label: 'Ant Design',
-          value: 'Ant Design',
+          label: '投资项目云平台',
+          value: '投资项目云平台'
         },
         {
           label: 'Pro Table',
-          value: 'Pro Table',
+          value: 'Pro Table'
         },
         {
           label: 'Pro Layout',
-          value: 'Pro Layout',
-        },
+          value: 'Pro Layout'
+        }
       ]}
-      onSearch={(value) => {
-        console.log('input', value);
+      onSearch={value => {
+        console.log('input', value)
       }}
     />
-  );
-};
+  )
+}
 ```
 
 ### API
@@ -112,9 +112,9 @@ export default () => {
 /**
  * background: '#f0f2f5'
  */
-import { message } from 'antd';
-import React from 'react';
-import NoticeIcon from '@/components/NoticeIcon/NoticeIcon';
+import { message } from 'antd'
+import React from 'react'
+import NoticeIcon from '@/components/NoticeIcon/NoticeIcon'
 
 export default () => {
   const list = [
@@ -123,29 +123,28 @@ export default () => {
       avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png',
       title: '你收到了 14 份新周报',
       datetime: '2017-08-09',
-      type: 'notification',
+      type: 'notification'
     },
     {
       id: '000000002',
       avatar: 'https://gw.alipayobjects.com/zos/rmsportal/OKJXDXrmkNshAMvwtvhu.png',
       title: '你推荐的 曲妮妮 已通过第三轮面试',
       datetime: '2017-08-08',
-      type: 'notification',
-    },
-  ];
+      type: 'notification'
+    }
+  ]
   return (
     <NoticeIcon
       count={10}
-      onItemClick={(item) => {
-        message.info(`${item.title} 被点击了`);
+      onItemClick={item => {
+        message.info(`${item.title} 被点击了`)
       }}
       onClear={(title: string, key: string) => message.info('点击了清空更多')}
       loading={false}
       clearText="清空"
       viewMoreText="查看更多"
       onViewMore={() => message.info('点击了查看更多')}
-      clearClose
-    >
+      clearClose>
       <NoticeIcon.Tab
         tabKey="notification"
         count={2}
@@ -171,8 +170,8 @@ export default () => {
         showViewMore
       />
     </NoticeIcon>
-  );
-};
+  )
+}
 ```
 
 ### NoticeIcon API
@@ -212,17 +211,17 @@ export default () => {
 
 ```tsx | pure
 export interface NoticeIconData {
-  id: string;
-  key: string;
-  avatar: string;
-  title: string;
-  datetime: string;
-  type: string;
-  read?: boolean;
-  description: string;
-  clickClose?: boolean;
-  extra: any;
-  status: string;
+  id: string
+  key: string
+  avatar: string
+  title: string
+  datetime: string
+  type: string
+  read?: boolean
+  description: string
+  clickClose?: boolean
+  extra: any
+  status: string
 }
 ```
 
@@ -238,26 +237,25 @@ RightContent 是以上几个组件的组合，同时新增了 plugins 的 `Selec
     options={[
       { label: <a href="https://umijs.org/zh/guide/umi-ui.html">umi ui</a>, value: 'umi ui' },
       {
-        label: <a href="next.ant.design">Ant Design</a>,
-        value: 'Ant Design',
+        label: <a href="next.ant.design">投资项目云平台</a>,
+        value: '投资项目云平台'
       },
       {
         label: <a href="https://protable.ant.design/">Pro Table</a>,
-        value: 'Pro Table',
+        value: 'Pro Table'
       },
       {
         label: <a href="https://prolayout.ant.design/">Pro Layout</a>,
-        value: 'Pro Layout',
-      },
+        value: 'Pro Layout'
+      }
     ]}
   />
   <Tooltip title="使用文档">
     <span
       className={styles.action}
       onClick={() => {
-        window.location.href = 'https://pro.ant.design/docs/getting-started';
-      }}
-    >
+        window.location.href = 'https://pro.ant.design/docs/getting-started'
+      }}>
       <QuestionCircleOutlined />
     </span>
   </Tooltip>

src/locales/zh-CN/pages.ts

@@ -1,5 +1,5 @@
 export default {
-  'pages.layouts.userLayout.title': '投资项目云平台',
+  'pages.layouts.userLayout.title': '珠海市财政投资控制云平台',
   'pages.login.accountLogin.tab': '账户密码登录',
   'pages.login.accountLogin.errorMessage': '错误的用户名和密码(admin/ant.design)',
   'pages.login.failure': '登录失败，请重试！',

src/pages/Admin.tsx

@@ -11,8 +11,7 @@ export default (): React.ReactNode => {
       content={intl.formatMessage({
         id: 'pages.admin.subPage.title',
         defaultMessage: 'This page can only be viewed by admin'
-      })}
-    >
+      })}>
       <Card>
         <Alert
           message={intl.formatMessage({
@@ -28,7 +27,7 @@ export default (): React.ReactNode => {
           }}
         />
         <Typography.Title level={2} style={{ textAlign: 'center' }}>
-          <SmileTwoTone /> Ant Design Pro <HeartTwoTone twoToneColor="#eb2f96" /> You
+          <SmileTwoTone /> 投资项目云平台 <HeartTwoTone twoToneColor="#eb2f96" /> You
         </Typography.Title>
       </Card>
     </PageHeaderWrapper>

src/pages/document.ejs

@@ -21,8 +21,8 @@
       name="viewport"
       content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
     />
-    <title>Ant Design Pro</title>
-    <link rel="icon" href="<%= context.config.publicPath +'faviconOne.ico'%>" type="image/x-icon" />
+    <title>投资项目云平台</title>
+    <link rel="icon" href="<%= context.config.publicPath +'faviconTwo.ico'%>" type="image/x-icon" />
   </head>
   <body>
     <noscript>
@@ -212,7 +212,7 @@
           min-height: 420px;
         "
       >
-        <img src="<%= context.config.publicPath +'pro_icon.svg'%>" alt="logo" width="256" />
+        <img src="<%= context.config.publicPath +'logo.png'%>" alt="logo" width="256" />
         <div class="page-loading-warp">
           <div class="ant-spin ant-spin-lg ant-spin-spinning">
             <span class="ant-spin-dot ant-spin-dot-spin"

src/pages/user/Login/index.less

@@ -10,7 +10,7 @@
 
 .lang {
   width: 100%;
-  height: 40px;
+  height: 30px;
   line-height: 44px;
   text-align: right;
   :global(.ant-dropdown-trigger) {
@@ -19,20 +19,32 @@
 }
 
 .content {
-  flex: 1;
-  padding: 32px 0;
+  // flex: 1;
+  margin: 0 auto;
+  // padding: 32px 0;
 }
 
 @media (min-width: @screen-md-min) {
   .container {
-    background-image: url('https://gw.alipayobjects.com/zos/rmsportal/TVYTbAXWheQpRcWDaDMu.svg');
-    background-repeat: no-repeat;
-    background-position: center 110px;
-    background-size: 100%;
+    background: url('https://d4.smartcost.com.cn/iamge_login_bg.png') no-repeat center 0;
+    // background-repeat: no-repeat;
+    // background-position: center 110px;
+    // background-position: center 0;
+    background-size: 100% 100%;
+  }
+  .smallBox {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 400px;
+    margin-top: -200px;
+    margin-left: -200px;
+    // margin: 0 auto;
+    background: rgba(255, 255, 255, 0.8999999761581421);
   }
 
   .content {
-    padding: 32px 0 24px;
+    padding: 0 0 35px;
   }
 }
 

src/pages/user/Login/index.tsx

@@ -111,121 +111,123 @@ const Login: React.FC = () => {
 
   return (
     <div className={styles.container}>
-      <div className={styles.lang} data-lang>
-        {SelectLang && <SelectLang />}
-      </div>
-      <div className={styles.content}>
-        <div className={styles.top}>
-          <div className={styles.header}>
-            <Link to="/" className="flex justify-center">
-              <img alt="logo" className={styles.logo} src="/logo.svg" />
-              <span className={styles.title}>投资项目云平台</span>
-            </Link>
-          </div>
-          <div className={styles.desc}>
-            {intl.formatMessage({ id: 'pages.layouts.userLayout.title' })}
-          </div>
+      <div className={[styles.smallBox, 'border rounded-xl'].join(' ')}>
+        <div className={styles.lang} data-lang>
+          {SelectLang && <SelectLang />}
         </div>
-        <div className={styles.main}>
-          <ProForm
-            initialValues={{
-              autoLogin: true
-            }}
-            submitter={{
-              searchConfig: {
-                submitText: intl.formatMessage({
-                  id: 'pages.login.submit',
-                  defaultMessage: '登录'
-                })
-              },
-              render: (_, dom) => dom.pop(),
-              submitButtonProps: {
-                loading,
-                size: 'large',
-                style: {
-                  width: '100%'
+        <div className={styles.content}>
+          <div className={styles.top}>
+            <div className={styles.header}>
+              <Link to="/" className="flex justify-center">
+                <img alt="logo" className={styles.logo} src="/logo.png" />
+                <span className={styles.title}>珠海市财政局</span>
+              </Link>
+            </div>
+            <div className={styles.desc}>
+              {intl.formatMessage({ id: 'pages.layouts.userLayout.title' })}
+            </div>
+          </div>
+          <div className={styles.main}>
+            <ProForm
+              initialValues={{
+                autoLogin: true
+              }}
+              submitter={{
+                searchConfig: {
+                  submitText: intl.formatMessage({
+                    id: 'pages.login.submit',
+                    defaultMessage: '登录'
+                  })
+                },
+                render: (_, dom) => dom.pop(),
+                submitButtonProps: {
+                  loading,
+                  size: 'large',
+                  style: {
+                    width: '100%'
+                  }
                 }
-              }
-            }}
-            onFinish={async values => {
-              handleSubmit(values as API.LoginParams)
-            }}>
-            <Tabs activeKey={type} onChange={setType}>
-              <Tabs.TabPane
-                key="account"
-                tab={intl.formatMessage({
-                  id: 'pages.login.accountLogin.tab',
-                  defaultMessage: '账户密码登录'
-                })}
-              />
-            </Tabs>
-
-            {code === consts.RET_CODE.ERROR && <LoginMessage content={'账户或密码错误'} />}
-            {type === 'account' && (
-              <>
-                <ProFormText
-                  name="account"
-                  fieldProps={{
-                    size: 'large',
-                    prefix: <UserOutlined className={styles.prefixIcon} />
-                  }}
-                  placeholder={intl.formatMessage({
-                    id: 'pages.login.username.placeholder',
-                    defaultMessage: '请输入用户名'
-                  })}
-                  rules={[
-                    {
-                      required: true,
-                      message: (
-                        <FormattedMessage
-                          id="pages.login.username.required"
-                          defaultMessage="请输入用户名!"
-                        />
-                      )
-                    }
-                  ]}
-                />
-                <ProFormText.Password
-                  name="password"
-                  fieldProps={{
-                    size: 'large',
-                    prefix: <LockOutlined className={styles.prefixIcon} />
-                  }}
-                  placeholder={intl.formatMessage({
-                    id: 'pages.login.password.placeholder',
-                    defaultMessage: '请输入密码！'
+              }}
+              onFinish={async values => {
+                handleSubmit(values as API.LoginParams)
+              }}>
+              {/* <Tabs activeKey={type} onChange={setType}>
+                <Tabs.TabPane
+                  key="account"
+                  tab={intl.formatMessage({
+                    id: 'pages.login.accountLogin.tab',
+                    defaultMessage: '账户密码登录'
                   })}
-                  rules={[
-                    {
-                      required: true,
-                      message: (
-                        <FormattedMessage
-                          id="pages.login.password.required"
-                          defaultMessage="请输入密码！"
-                        />
-                      )
-                    }
-                  ]}
                 />
-              </>
-            )}
+              </Tabs> */}
 
-            {/* {status === 'error' && loginType === 'mobile' && <LoginMessage content="验证码错误" />} */}
-            <div
-              style={{
-                marginBottom: 24
-              }}>
-              <ProFormCheckbox noStyle name="autoLogin">
-                <FormattedMessage id="pages.login.rememberMe" defaultMessage="自动登录" />
-              </ProFormCheckbox>
-              <a
+              {code === consts.RET_CODE.ERROR && <LoginMessage content={'账户或密码错误'} />}
+              {type === 'account' && (
+                <>
+                  <ProFormText
+                    name="account"
+                    fieldProps={{
+                      size: 'large',
+                      prefix: <UserOutlined className={styles.prefixIcon} />
+                    }}
+                    placeholder={intl.formatMessage({
+                      id: 'pages.login.username.placeholder',
+                      defaultMessage: '请输入用户名'
+                    })}
+                    rules={[
+                      {
+                        required: true,
+                        message: (
+                          <FormattedMessage
+                            id="pages.login.username.required"
+                            defaultMessage="请输入用户名!"
+                          />
+                        )
+                      }
+                    ]}
+                  />
+                  <ProFormText.Password
+                    name="password"
+                    fieldProps={{
+                      size: 'large',
+                      prefix: <LockOutlined className={styles.prefixIcon} />
+                    }}
+                    placeholder={intl.formatMessage({
+                      id: 'pages.login.password.placeholder',
+                      defaultMessage: '请输入密码！'
+                    })}
+                    rules={[
+                      {
+                        required: true,
+                        message: (
+                          <FormattedMessage
+                            id="pages.login.password.required"
+                            defaultMessage="请输入密码！"
+                          />
+                        )
+                      }
+                    ]}
+                  />
+                </>
+              )}
+
+              {/* {status === 'error' && loginType === 'mobile' && <LoginMessage content="验证码错误" />} */}
+              <div
                 style={{
-                  float: 'right'
+                  marginBottom: 24
                 }}>
-                <FormattedMessage id="pages.login.forgotPassword" defaultMessage="忘记密码" />
-              </a>
-            </div>
-          </ProForm>
+                <ProFormCheckbox noStyle name="autoLogin">
+                  <FormattedMessage id="pages.login.rememberMe" defaultMessage="自动登录" />
+                </ProFormCheckbox>
+                <a
+                  style={{
+                    float: 'right'
+                  }}>
+                  <FormattedMessage id="pages.login.forgotPassword" defaultMessage="忘记密码" />
+                </a>
+              </div>
+            </ProForm>
+          </div>
         </div>
       </div>
     </div>