Commit 59946673 authored by 秦文海's avatar 秦文海

chore: tip样式统一处理

parent a859eb97
Pipeline #37587 failed with stages
in 1 minute 26 seconds
...@@ -4,13 +4,16 @@ import { ...@@ -4,13 +4,16 @@ import {
ZoomOutOutlined, ZoomOutOutlined,
MinusCircleOutlined, MinusCircleOutlined,
MinusOutlined, MinusOutlined,
MonitorOutlined,
} from '@ant-design/icons'; } from '@ant-design/icons';
import { useState } from 'react'; import { useState, useContext } from 'react';
import classNames from 'classnames';
import { ConfigProvider } from 'antd';
import './index.less'; import './index.less';
const Header = (props) => { const Header = (props) => {
const [showIcon, setShowIcon] = useState(true); const [showIcon, setShowIcon] = useState(true);
const [windowStatus, setWindowStatus] = useState(true); const [windowStatus, setWindowStatus] = useState(true);
const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
const prefixCls = getPrefixCls('panda-gis-tipHeader');
const { headerSetting, events, changeStyle, changeScale } = props; const { headerSetting, events, changeStyle, changeScale } = props;
const { scaleChange, windowChange, smallChange, tipClose } = events; const { scaleChange, windowChange, smallChange, tipClose } = events;
const getWinChange = (icon) => { const getWinChange = (icon) => {
...@@ -37,10 +40,10 @@ const Header = (props) => { ...@@ -37,10 +40,10 @@ const Header = (props) => {
} }
}; };
return ( return (
<div className="Tiphead"> <div className={classNames(`${prefixCls}-Tiphead`)}>
<div <div
onClick={getWindowStatus.bind(this, true)} onClick={getWindowStatus.bind(this, true)}
className="TipheadTitle" className={classNames(`${prefixCls}-TipheadTitle`)}
style={iconStyle().header} style={iconStyle().header}
> >
<span>{headerSetting.layerName}</span> <span>{headerSetting.layerName}</span>
...@@ -48,20 +51,26 @@ const Header = (props) => { ...@@ -48,20 +51,26 @@ const Header = (props) => {
<span>{headerSetting.oid}</span> <span>{headerSetting.oid}</span>
</div> </div>
<div className="iconList" style={iconStyle().other}> <div className={classNames(`${prefixCls}-iconList`)} style={iconStyle().other}>
<div style={iconStyle().icon}> <div style={iconStyle().icon}>
<span className="icons" title="缩放" onClick={scaleChange}> <span className={classNames(`${prefixCls}-icons`)} title="缩放" onClick={scaleChange}>
<ZoomOutOutlined /> <ZoomOutOutlined />
<span className="words">缩放至</span> <span className={classNames(`${prefixCls}-words`)}>缩放至</span>
</span> </span>
<span className="icons" onClick={getWinChange.bind(this, showIcon)}> <span
className={classNames(`${prefixCls}-icons`)}
onClick={getWinChange.bind(this, showIcon)}
>
{showIcon ? <PlusCircleOutlined /> : <MinusCircleOutlined />} {showIcon ? <PlusCircleOutlined /> : <MinusCircleOutlined />}
</span> </span>
<span className="icons" onClick={getWindowStatus.bind(this, false)}> <span
className={classNames(`${prefixCls}-icons`)}
onClick={getWindowStatus.bind(this, false)}
>
<MinusOutlined /> <MinusOutlined />
</span> </span>
</div> </div>
<span className="icons" onClick={tipClose}> <span className={classNames(`${prefixCls}-icons`)} onClick={tipClose}>
<CloseOutlined /> <CloseOutlined />
</span> </span>
</div> </div>
......
.icons { @import '~antd/es/style/themes/default';
margin-right: 10px; @panda-gis-tipHeader-prefix-cls: ~'@{ant-prefix}-panda-gis-tipHeader';
margin-right: 8px;
color: #fff; .@{panda-gis-tipHeader-prefix-cls} {
font-size: 20px; &-icons {
cursor: pointer; margin-right: 10px;
} margin-right: 8px;
.Tiphead { color: #fff;
display: flex; font-size: 20px;
width: 100%;
min-height: 45px;
background-color: #001529;
.TipheadTitle {
cursor: pointer; cursor: pointer;
} }
> div:nth-child(1) { &-Tiphead {
display: flex; display: flex;
align-items: center; width: 100%;
width: 30%; min-height: 45px;
overflow: hidden; background-color: #001529;
color: white; > div:nth-child(1) {
font-size: 20px; display: flex;
white-space: nowrap; align-items: center;
text-indent: 5px; width: 30%;
text-overflow: ellipsis; overflow: hidden;
color: white;
font-size: 20px;
white-space: nowrap;
text-indent: 5px;
text-overflow: ellipsis;
}
} }
.iconList { &-iconList {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-end; justify-content: flex-end;
width: 70%; width: 70%;
} }
} &-TipheadTitle {
.words { cursor: pointer;
font-size: 16px; }
vertical-align: text-bottom; &-words {
font-size: 16px;
vertical-align: text-bottom;
}
} }
import React, { useState } from 'react'; import React, { useState, useContext } from 'react';
import classNames from 'classnames';
import { ConfigProvider } from 'antd';
import { Header } from './header'; import { Header } from './header';
import { LeftList } from './leftList'; import { LeftList } from './leftList';
import './index.less'; import './index.less';
...@@ -6,7 +8,8 @@ import './index.less'; ...@@ -6,7 +8,8 @@ import './index.less';
const TipTool = (props) => { const TipTool = (props) => {
const { style } = props; const { style } = props;
const { leftSetting, headerSetting, events } = props.dataList; const { leftSetting, headerSetting, events } = props.dataList;
const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
const prefixCls = getPrefixCls('panda-gis-tip');
const data = [ const data = [
{ {
name: 'middle', name: 'middle',
...@@ -67,20 +70,20 @@ const TipTool = (props) => { ...@@ -67,20 +70,20 @@ const TipTool = (props) => {
} }
}; };
return ( return (
<div className="Tipwripconter" style={computedStyle()}> <div className={classNames(`${prefixCls}-Tipwripconter`)} style={computedStyle()}>
<Header <Header
headerSetting={headerSetting} headerSetting={headerSetting}
events={events} events={events}
changeStyle={changeStyle} changeStyle={changeStyle}
changeScale={changeScale} changeScale={changeScale}
/> />
<div className="TipAll" style={displayComput()}> <div className={classNames(`${prefixCls}-TipAll`)} style={displayComput()}>
<div className="Tipconter"> <div className={classNames(`${prefixCls}-Tipconter`)}>
<div className="Tipleft"> <div className={classNames(`${prefixCls}-Tipleft`)}>
<LeftList leftSetting={leftSetting} /> <LeftList leftSetting={leftSetting} />
</div> </div>
</div> </div>
<div className="tipfooter"></div> <div className={classNames(`${prefixCls}-tipfooter`)}></div>
</div> </div>
</div> </div>
); );
......
.Tipwripconter { @import '~antd/es/style/themes/default';
width: 100%; @panda-gis-tip-prefix-cls: ~'@{ant-prefix}-panda-gis-tip';
height: 100%;
.TipAll { .@{panda-gis-tip-prefix-cls} {
&-Tipwripconter {
width: 100%;
height: 100%;
}
&-TipAll {
height: 100%; height: 100%;
} }
.Tipconter { &-Tipconter {
display: flex; display: flex;
width: 100%; width: 100%;
height: 85%; height: 85%;
background-color: white; background-color: white;
.Tipleft { &-Tipleft {
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: #f5f6f7; background-color: #f5f6f7;
} }
} }
.tipfooter { &-tipfooter {
position: relative; position: relative;
width: 100%; width: 100%;
height: 10px; height: 10px;
.tipfooterar { &-tipfooterar {
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
......
import './index.less'; import './index.less';
import { FileTextOutlined, PlaySquareOutlined } from '@ant-design/icons'; import { FileTextOutlined, PlaySquareOutlined } from '@ant-design/icons';
import { TableContent } from '../tableContent'; import { TableContent } from '../tableContent';
import { Tabs } from 'antd'; import { Tabs, ConfigProvider } from 'antd';
import classNames from 'classnames';
import React, { useContext } from 'react';
const { TabPane } = Tabs; const { TabPane } = Tabs;
const LeftList = (props) => { const LeftList = (props) => {
const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
const prefixCls = getPrefixCls('panda-gis-tipLeft');
const { leftSetting } = props; const { leftSetting } = props;
return ( return (
<div className="ullist"> <div className={classNames(`${prefixCls}-ullist`)}>
<Tabs tabPosition="left"> <Tabs tabPosition="left">
{leftSetting.map((item, index) => { {leftSetting.map((item, index) => {
if (!item.active) return; if (!item.active) return;
......
.ullist { @import '~antd/es/style/themes/default';
display: flex; @panda-gis-tipLeft-prefix-cls: ~'@{ant-prefix}-panda-gis-tipLeft';
flex-direction: column;
width: 100%; .@{panda-gis-tipLeft-prefix-cls} {
height: 100%; &-ullist {
margin: 0;
padding: 0;
list-style: none;
.ant-tabs {
height: 100%;
.ant-tabs-content-holder {
background-color: #fff;
}
}
.ant-tabs-tab {
display: flex; display: flex;
justify-content: center; flex-direction: column;
} width: 100%;
.ant-tabs-tab .anticon {
margin-right: 0px;
font-size: 16px;
}
.ant-tabs-left > .ant-tabs-content-holder > .ant-tabs-content > .ant-tabs-tabpane {
padding-left: 0;
}
.ant-tabs-left > .ant-tabs-nav .ant-tabs-tab + .ant-tabs-tab {
margin: 5px 0 0 0;
}
.ant-tabs-tab-active {
background-color: #ebf3fe;
}
.ant-tabs-content {
height: 100%; height: 100%;
margin: 0;
padding: 0;
list-style: none;
.ant-tabs {
height: 100%;
.ant-tabs-content-holder {
background-color: #fff;
}
}
.ant-tabs-tab {
display: flex;
justify-content: center;
}
.ant-tabs-tab .anticon {
margin-right: 0px;
font-size: 16px;
}
.ant-tabs-left > .ant-tabs-content-holder > .ant-tabs-content > .ant-tabs-tabpane {
padding-left: 0;
}
.ant-tabs-left > .ant-tabs-nav .ant-tabs-tab + .ant-tabs-tab {
margin: 5px 0 0 0;
}
.ant-tabs-tab-active {
background-color: #ebf3fe;
}
.ant-tabs-content {
height: 100%;
}
} }
} }
import './index.less'; import './index.less';
import { getVisibleAttribues } from '../demos'; import { getVisibleAttribues } from '../demos';
import classNames from 'classnames';
import { ConfigProvider } from 'antd';
import React, { useContext } from 'react';
const TableContent = (props) => { const TableContent = (props) => {
const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
const prefixCls = getPrefixCls('panda-gis-tipContent');
const { data } = props; const { data } = props;
const handleData = () => { const handleData = () => {
return getVisibleAttribues([data.attributes], data.fields); return getVisibleAttribues([data.attributes], data.fields);
}; };
let tableArr = handleData()[0].show; let tableArr = handleData()[0].show;
return ( return (
<div className="contentAll"> <div className={classNames(`${prefixCls}-contentAll`)}>
<div className="wriper"> <div className={classNames(`${prefixCls}-wriper`)}>
<div className="header"> <div className={classNames(`${prefixCls}-header`)}>
<span>属性列表</span> <span>属性列表</span>
</div> </div>
<div className="contaner"> <div className={classNames(`${prefixCls}-contaner`)}>
<ul> <ul>
{Object.getOwnPropertyNames(tableArr).map((key, index) => { {Object.getOwnPropertyNames(tableArr).map((key, index) => {
return ( return (
...@@ -24,7 +29,7 @@ const TableContent = (props) => { ...@@ -24,7 +29,7 @@ const TableContent = (props) => {
})} })}
</ul> </ul>
</div> </div>
<div className="footer"></div> <div className={classNames(`${prefixCls}-foot`)}></div>
</div> </div>
</div> </div>
); );
......
.wriper .contaner::-webkit-scrollbar { @import '~antd/es/style/themes/default';
width: 5px; @panda-gis-tipContent-prefix-cls: ~'@{ant-prefix}-panda-gis-tipContent';
height: 5px;
}
.wriper .contaner::-webkit-scrollbar-thumb {
background: #1685ff;
border-radius: 10px;
}
.wriper .contaner::-webkit-scrollbar-track { .@{panda-gis-tipContent-prefix-cls} {
background: #2c4154; &-contentAll {
border-radius: 10px; width: 100%;
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); height: 100%;
} }
.contentAll { &-header {
width: 100%;
height: 100%;
}
.wriper {
width: 100%;
height: 100%;
.header {
display: flex; display: flex;
align-items: center; align-items: center;
width: 100%; width: 100%;
...@@ -29,7 +15,24 @@ ...@@ -29,7 +15,24 @@
padding-left: 15px; padding-left: 15px;
font-size: 16px; font-size: 16px;
} }
.contaner { &-contaner::-webkit-scrollbar {
width: 5px;
height: 5px;
}
&-contaner::-webkit-scrollbar-thumb {
background: #1685ff;
border-radius: 10px;
}
&-contaner::-webkit-scrollbar-track {
background: #2c4154;
border-radius: 10px;
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
}
&-wriper {
width: 100%;
height: 100%;
}
&-contaner {
width: 100%; width: 100%;
height: 90%; height: 90%;
overflow: scroll; overflow: scroll;
......
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