Skip to content

H
hnyc-data
Commit fc2a6539 by zhaochengxiang
Options

修改内页

parent dc7019be
Showing with 142 additions and 59 deletions
config/webpack.config.js
......@@ -362,7 +362,15 @@ module.exports = function(webpackEnv) {
{
loader: "less-loader",
options: {
"javascriptEnabled": true
modifyVars: {
"text-color": "#000",
"heading-color":"#000",
"text-color-secondary": "rgba(0, 0, 0, 0.85)",
"primary-color": "#249aec",
"error-color": "#f19687",
"warning-color": "#f4c660",
},
javascriptEnabled: true,
}
}]
},
......
src/global.less
......@@ -29,10 +29,6 @@
overflow: hidden;
}
.bg-primary {
background-color: #0168cf;
}
.d-flex {
display: flex;
}
......@@ -87,4 +83,87 @@
}
::-webkit-scrollbar-thumb:hover {
background-color:#bbb;
}
\ No newline at end of file
}
.ant-table-thead > tr > th {
background: #e8f5fb !important;
text-align: center !important;
}
.ant-table-tbody > tr > td {
text-align: center !important;
}
.ant-table-title {
border: none !important;
}
.ant-table-bordered .ant-table-header > table,.ant-table-bordered .ant-table-thead > tr > th, .ant-table-bordered .ant-table-body > table, .ant-table-bordered .ant-table-tbody > tr, .ant-table-bordered .ant-table-tbody > tr > td {
border-color: rgba(36, 154, 236, 0.2) !important;
}
.ant-table-pagination.ant-pagination {
float: none !important;
text-align: center;
margin: 15px 0 !important;
}
.ant-menu {
background-color: transparent;
border-bottom: none;
}
.ant-menu-horizontal {
border-bottom: none !important;
}
.ant-menu-horizontal .ant-menu-submenu-title,
.ant-menu-horizontal .ant-menu-submenu-title:hover {
color: #fff !important;
}
.ant-menu-horizontal .ant-menu-submenu-title .anticon {
margin-right: 0 !important;
font-size: 18px !important;
}
.ant-layout-sider .ant-menu-item:after {
border: 0 !important;
}
.ant-layout-sider .ant-menu-item-selected {
background-color: #249aec !important;
color: #fff !important;
}
.ant-layout-sider .ant-menu-item-selected > a, .ant-layout-sider .ant-menu-item-selected > a:hover {
color: #fff !important;
}
.ant-layout-sider .ant-menu-submenu-open .ant-menu-submenu-title {
box-shadow:0px 2px 2px 0px rgba(0, 0, 0, 0.1);
}
.ant-layout-sider .ant-menu-sub {
background-color: #f7f7f7 !important;
}
// .ant-btn-primary {
// background-color: #249aec !important;
// }
// .ant-btn-danger {
// background-color: #f19687 !important;
// }
.ant-tabs-bar {
margin: 0 !important;
}
.ant-tabs-nav-scroll {
text-align: center !important;
}
.ant-form-item {
margin-bottom: 10px !important;
}
\ No newline at end of file
src/index.less
......@@ -29,7 +29,3 @@ code {
monospace;
}
.ant-form-item {
margin-bottom: 10px !important;
}
src/layout/PageHeaderWrapper.js
......@@ -50,20 +50,20 @@ export default class PageHeaderWrapper extends React.Component {
return (
<div className="page-container">
<div className="page-container-header">
<div className="pl-4 page-container-header-title">
<div className="pl-3 page-container-header-title">
{
curRoute && <span>{curRoute.text}</span>
}
</div>
{
extra&&(
<div className="ml-auto pr-4">
<div className="ml-auto pr-3">
{ extra }
</div>
)
}
</div>
<div className="m-3 page-container-content">
<div className="mt-3 page-container-content">
{ children }
</div>
</div>
......
src/layout/index.js
import React, { useState, Fragment } from "react";
import { Link } from 'react-router-dom';
import { Layout, Menu, Icon, message } from 'antd';
import { Layout, Menu, Icon, message, Avatar } from 'antd';
import { connect } from 'react-redux';
import { ContextPath, Open } from '../util';
......@@ -10,7 +10,7 @@ import { routes, routeMap } from '../routes';
import './index.less';
import { dispatchLatest } from "../model";
import logo from '../assets/logo_hnyc.png';
import logo from '../assets/logo.png';
const { Header, Sider, Content } = Layout;
const { SubMenu } = Menu;
......@@ -21,8 +21,8 @@ const _Logout = ({session, location}) => session ?
<SubMenu
title={
<Fragment>
<Icon type="user" />
<span>{`${session.userDName}/${session.userName}`}</span>
<Avatar icon="user" />
<span className="ml-2">{`${session.userDName}/${session.userName}`}</span>
</Fragment>
}
>
......@@ -66,41 +66,45 @@ export const ManageLayout = function ({ content, location }) {
const [collapsed, toggle] = useState(false);
return <Layout style={{ minHeight: '100vh' }}>
<Sider trigger={null} collapsible collapsed={collapsed}>
<Link to={`${ContextPath}/home`} className="manage-sider-logo">
<img
src={logo}
className="mx-1"
alt=""
style={{ maxHeight: '2rem' }}
/>
</Link>
<Menu theme="dark" mode="inline"
defaultSelectedKeys={[location.pathname]}
selectedKeys={[location.pathname]}
defaultOpenKeys={[openKey]} >
{subMenus}
</Menu>
</Sider>
<Layout>
<Header className={'bg-primary d-flex manage-header'} >
<Link to={`${ContextPath}/home`} className="manage-sider-logo">
<img
src={logo}
alt=""
style={{ width: '150px', marginLeft: '24px' }}
/>
</Link>
<Icon
className="trigger"
type={collapsed ? 'menu-unfold' : 'menu-fold'}
onClick={() => toggle(!collapsed)}
style={{ marginLeft: '16px' }}
/>
<Logout />
</Header>
<Content>
{content}
</Content>
<Layout>
<Sider trigger={null} collapsible collapsed={collapsed} style={{ backgroundColor: '#fff' }}>
<Menu mode="inline"
defaultSelectedKeys={[location.pathname]}
selectedKeys={[location.pathname]}
defaultOpenKeys={[openKey]} >
{subMenus}
</Menu>
</Sider>
<Content className="m-4" style={{ backgroundColor: '#eee' }}>
{content}
</Content>
</Layout>
</Layout>
</Layout>
}
export const HomeLayout = function ({ content, location }) {
......
src/layout/index.less
......@@ -37,7 +37,6 @@
display: flex;
align-items: center;
height: 64px;
padding: 0 24px;
overflow: hidden;
}
......
src/mixins.less
@paddingArray: 0 0, 1 2px, 2 5px, 3 10px, 4 20px, 5 30px, 6 50px, 7 100px;
@paddingArray: 0 0, 1 2px, 2 5px, 3 10px, 4 15px, 5 20px, 6 30px, 7 50px, 8 100px;
.paddingNmargin(@iterator:1) when(@iterator <= length(@paddingArray)) {
@name: extract(extract(@paddingArray, @iterator), 1);
......@@ -56,7 +56,7 @@
}
.paddingNmargin();
@colorArray: primary #0168cf, success @success-color, warning @warning-color, error @error-color,
@colorArray: primary @primary-color, success @success-color, warning @warning-color, error @error-color,
muted @normal-color, white @white, transparent transparent;
.color(@iterator:1) when(@iterator <= length(@colorArray)) {
......
src/view/Home/HomeHelper.js
......@@ -11,7 +11,6 @@ import menuImg1 from '../../assets/home/menu1.png';
import menuImg2 from '../../assets/home/menu2.png';
import menuImg3 from '../../assets/home/menu3.png';
import menuImg4 from '../../assets/home/menu4.png';
import menuImg5 from '../../assets/home/menu5.png';
import nodeImg1 from '../../assets/home/node1.png';
import nodeImg2 from '../../assets/home/node2.png';
......@@ -109,7 +108,6 @@ const homeMenu = [
{ title: '元数据', img: menuImg2, url: `${ContextPath}/manage/metadata` },
{ title: '数据指标', img: menuImg3, url: `${ContextPath}/manage/indicator` },
{ title: '数据标准', img: menuImg4, url: `${ContextPath}/manage/standard` },
// { title: '数据质量', img: menuImg5 },
];
export class HomeMenu extends Component {
......
src/view/Home/index.jsx
......@@ -4,7 +4,7 @@ import { connect } from 'react-redux';
import { GetSession } from '../../util';
import { HomeLayout } from '../../layout';
import { HomeSearch, HomeMenu, HomeGrid } from './HomeHelper';
import { HomeSearch, HomeMenu } from './HomeHelper';
class Home extends Component {
......@@ -18,7 +18,6 @@ class Home extends Component {
<div className="home-container overflow-hidden">
<HomeSearch {...this.props} />
<HomeMenu />
<HomeGrid />
</div>
)
: <GetSession {...this.props} />}
......
src/view/Manage/Assets/index.jsx
......@@ -76,7 +76,7 @@ class Assets extends Component {
/>
}
>
<Row gutter={16} className="manage-asset">
<Row gutter={10} className="manage-asset">
<Col md={6}>
<AssetTreeCOM treeData={treeData} onSelect={this.getList} />
</Col>
......
src/view/Manage/Assets/style.less
.asset-list {
height: calc(100vh - 148px - 48px - 42px) !important;
height: calc(100vh - 168px - 48px - 42px) !important;
overflow: auto;
margin-bottom: 10px;
& .ant-list-item-action {
......@@ -11,12 +11,12 @@
}
.asset-table {
height: calc(100vh - 148px);
height: calc(100vh - 168px);
overflow: auto;
}
.asset-tree {
height: calc(100vh - 148px);
height: calc(100vh - 168px);
overflow: auto;
border-right: 1px solid #ededed;
}
......
src/view/Manage/Search/style.less
.asset-search {
.asset-list {
height: calc(100vh - 148px - 48px - 42px - 133px) !important;
height: calc(100vh - 168px - 48px - 42px - 117px) !important;
}
}
\ No newline at end of file
src/view/Metadata/Indicator/index.jsx
......@@ -66,7 +66,7 @@ export default class Indicator extends Component {
/>
}
>
<Row gutter={16} className="indicator-container" >
<Row gutter={10} className="indicator-container" >
<Col md={6}>
<MetadataTreeCOM type="IndicatorCatalog" onSelect={this.onTreeSelect} />
</Col>
......
src/view/Metadata/Indicator/style.less
.metadata-tree {
height: calc(100vh - 148px);
height: calc(100vh - 168px);
overflow: auto;
}
.metadata-list {
height: calc(100vh - 148px - 48px - 42px) !important;
height: calc(100vh - 168px - 48px - 42px) !important;
overflow: auto;
margin-bottom: 10px;
}
\ No newline at end of file
src/view/Signin/index.jsx
import React, { Component } from "react";
import { Card, Form, Input, Button, message, Icon } from 'antd';
import { Form, Input, Button, message, Icon } from 'antd';
import { connect } from 'react-redux';
import CryptoJS from "crypto-js";
......@@ -9,8 +9,6 @@ import { dispatchLatest } from '../../model';
import loginBG from "../../assets/login_bg.png";
import loginLogo from "../../assets/login_logo.png";
import classnames from 'classnames';
class _Signin extends Component{
signin = (e) => {
......@@ -45,8 +43,8 @@ class _Signin extends Component{
return (
<>
<img className="position-absolute" src={loginBG} style={{ objectFit: 'cover', top: 0, left: 0, right: 0 ,bottom: 0, width: '100%', height:'100%' }} />
<img className="position-absolute" src={loginLogo} style={{ objectFit: 'cover',top: 20, left: 20, width: 304, height: 43 }} />
<img className="position-absolute" src={loginBG} style={{ objectFit: 'cover', top: 0, left: 0, right: 0 ,bottom: 0, width: '100%', height:'100%' }} alt="" />
<img className="position-absolute" src={loginLogo} style={{ objectFit: 'cover',top: 20, left: 20, width: 304, height: 43 }} alt="" />
<div className="position-absolute" style={{ top: '50%', right: '10%', backgroundColor: '#fff', width: 350, transform: 'translateY(-50%)'}}>
<div style={{ padding: '30px' }}>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment