Skip to content

F
frontend
Commit 0305756c authored by 熊成伟's avatar 熊成伟
Browse files
Options

debug

parent eaaff6b8
Hide whitespace changes
Inline Side-by-side
Showing with 516 additions and 0 deletions
src/Pages/Communicate/Communicate.jsx
View file @ 0305756c
...@@ -5,6 +5,7 @@ import TopSearch from '../../components/TopSearch' ...@@ -5,6 +5,7 @@ import TopSearch from '../../components/TopSearch'
const Item = List.Item; const Item = List.Item;
class Communicate extends Component { class Communicate extends Component {
render() { render() {
return ( return (
<div> <div>
......
src/components/List/index.jsx 0 → 100644
View file @ 0305756c
import React from 'react';
import './index.less'
const Index = (props) => {
return (
<div className="auto-list-card">
{props.title && (
<div className="auto-list-item auto-list-item-title">{props.title}</div>
)}
{props.listData.map((item, index) => (
<div key={index} className={`auto-list-item ${item.line ? 'auto-list-item-line-feed' : 'auto-list-item-line'}`}>
<div className="auto-list-title">
{item.title}：
</div>
<div className="auto-list-content">
{item.content}
</div>
</div>
))}
</div>
);
};
export default Index;
src/components/List/index.less 0 → 100644
View file @ 0305756c
.auto-list-card{
width: 100%;
}
.auto-list-item-line{
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
.auto-list-item-line-feed{
display: flex;
flex-direction: column;
}
.auto-list-item{
padding: 5px 15px;
min-height: 43px;
background: #ffffff;
margin-bottom: 1px;
}
.auto-list-card > .auto-list-item:first-child{
border-radius: 6px 6px 0 0;
}
.auto-list-card > .auto-list-item:last-child{
border-radius: 0 0 6px 6px;
}
.auto-list-item-title{
display: flex;
align-items: center;
font-size: 17px;
font-weight: bold;
}
.auto-list-title{
padding: 10px 0;
font-size: 14px;
min-width: 100px;
}
.auto-list-content{
padding: 10px 20px;
font-size: 14px;
line-height: 22px;
}
src/components/StepCard/index.jsx 0 → 100644
View file @ 0305756c
import React from 'react';
import './index.less'
const Index = () => {
return (
<div>
<ul>
{
[{}, {}, {}, {}].map(item => (
<li>1111111</li>
))
}
</ul>
</div>
);
};
export default Index;
src/components/StepCard/index.less 0 → 100644
View file @ 0305756c
ul li{
width:100%;
&:after {
content: '';
display: block;
//clear: both;
width: 1px;
min-height: 115px;
background-color: #D8D8D8;
//margin: 8px auto;
}
}
src/components/Steps/index.jsx 0 → 100644
View file @ 0305756c
import React from 'react';
import {Steps, Icon} from 'antd-mobile'
const Step = Steps.Step;
// const data = [{}, {current: true}, {}]
const Index = (props) => {
return (
<Steps direction={props.direction} current={3}>
<Step icon={<Icon type="check-circle" size="xxs"/>} />
<Step icon={<Icon type="check-circle" size="xxs"/>}/>
<Step status="error" icon={<Icon type="check-circle" size="xxs"/>}/>
{/*<Step icon={<div style={{width: 17, height: 17, borderRadius: '50%', background: 'gray'}}/>}/>*/}
</Steps>
);
};
export default Index;
src/components/Steps/index.less 0 → 100644
View file @ 0305756c
.step_success{
width: 16.7px;
height: 16.7px;
border-radius: 50%;
}
src/components/TodoCard/index.jsx 0 → 100644
View file @ 0305756c
import React from 'react';
import './index.less'
const Index = (props) => {
return (
<div className="todo-card" onClick={props.onCLick}>
<div className="todo-title pos-aline">
<div className="pos-aline">
<div className="todo-tag pos-aline">
<img
alt=""
className="todo-tag-png"
src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591252471425&di=85236ae603ca74553adaca6e8c161a39&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2Fb912bf96dc19b3b23530ae2259b60eb6cf70083f6680b-H9l0ri_fw658"
/>
收文管理
</div>
<p>《2020年上级党委文件7号》</p>
</div>
<span>
<img
alt=""
className="todo-read-png"
src={props.data && props.data.read ? '/img/read.png' : '/img/unread.png'}
/>
</span>
</div>
<div className="todo-content">
<p>当前状态：排版套头</p>
<p style={{marginTop: 15}}>发送人员：杜莹莹</p>
</div>
<div className="todo-footer">
<div>
<p>更新时间：2020-05-26 17:51</p>
<p style={{marginTop: 15}}>停滞时间：24h</p>
</div>
<img
alt=""
className="todo-footer-img"
src={props.data && props.data.read ? '/img/serious.png' : '/img/urgency.png'}
/>
</div>
</div>
);
};
export default Index;
src/components/TodoCard/index.less 0 → 100644
View file @ 0305756c
.todo-card{
}
.todo-title{
padding: 10px 15px;
background:rgba(255,255,255,1);
border-radius:6px 6px 0 0;
justify-content: space-between;
margin-bottom: 1px;
}
.todo-tag{
line-height: 18px;
//width: 60px;
font-size: 9px;
padding: 0 5px;
background: #2087ED;
color: #ffffff;
border-radius:3px;
}
.todo-tag-png{
width: 12px;
height: 12px;
margin-right: 3px;
}
.todo-read-png{
width: 18px;
height: 18px;
}
.pos-aline{
display: flex;
align-items: center;
}
.todo-content{
padding: 15px 15px;
background:rgba(255,255,255,1);
margin-bottom: 1px;
}
.todo-footer{
display: flex;
justify-content: space-between;
padding: 15px 15px;
background:rgba(255,255,255,1);
border-radius: 0 0 6px 6px;
}
.todo-footer-img{
width: 40px;
height: 40px;
}
src/components/TopNotice/index.jsx 0 → 100644
View file @ 0305756c
import React from 'react';
import {Tabs, Icon} from 'antd-mobile'
import './index.less'
const tabs = [
{ title: '已读', sub: '1' },
{ title: '未读', sub: '2' },
]
const Index = () => {
return (
<div className="pos-line">
<div className="search-notice-box">
<Icon type="search" size="xs" className="search-svg"/>
<input className="top-search" placeholder="请输入关键字搜索" />
</div>
<div className="search-tab">
<Tabs
tabs={tabs}
initialPage={'1'}
onChange={(tab, index) => { console.log('onChange', index, tab); }}
/>
</div>
</div>
);
};
export default Index;
src/components/TopNotice/index.less 0 → 100644
View file @ 0305756c
.search-notice-box{
width: 100%;
height: 43.5px;
margin-bottom: 1px;
display: flex;
align-items: center;
}
.search-svg{
position: absolute;
padding-left: 10px;
}
.top-search{
width: 100%;
height: 100%;
border:0 solid rgba(38, 104, 255, 0.2);
border-radius: 6px 6px 0 0;
padding: 0 0 0 40px;
}
.am-tabs-default-bar-tab-active{
color: #0185FB;
}
.am-tabs-default-bar-underline{
border: 1px #0185FB solid;
}
.search-tab{
width: 100%;
}
.pos-line{
display: flex;
flex-direction: column;
align-items: center;
}
.am-tabs-default-bar-top, .am-tabs-default-bar-bottom{
border-radius:0 0 6px 6px !important;
}
src/components/TopSearch/index.jsx 0 → 100644
View file @ 0305756c
import React from 'react';
import {Icon} from 'antd-mobile'
import './index.less'
const Index = (props) => {
const topSearch = () => {
const input = document.getElementsByClassName("top-single-search");
props.onSearch(input[0].value)
}
return (
<div className="search-box">
<Icon type="search" size="xs" className="search-svg"/>
<input onChange={topSearch} className="top-single-search" placeholder="请输入关键字搜索" />
</div>
);
};
export default Index;
src/components/TopSearch/index.less 0 → 100644
View file @ 0305756c
.search-box{
width: 100%;
height: 42px;
display: flex;
align-items: center;
}
.search-svg{
position: absolute;
padding-left: 10px;
}
.top-single-search{
width: 100%;
height: 100%;
border:0 solid rgba(38, 104, 255, 0.2);
border-radius:6px;
padding: 0 0 0 40px;
}
src/components/TopTabs/index.jsx 0 → 100644
View file @ 0305756c
import React from 'react';
import {Tabs} from 'antd-mobile'
import './index.less'
const tabs = [
{ title: '基本信息', sub: 'basic' },
{ title: '详情附件', sub: 'adjunct' },
{ title: '流程信息', sub: 'flow' },
{ title: '流转意见', sub: 'option' },
]
const Index = (props) => {
return (
<div>
<Tabs
tabs={tabs}
initialPage={"basic"}
onChange={(tab, index) => props.onClick(tab.sub)}
/>
</div>
);
};
export default Index;
src/components/TopTabs/index.less 0 → 100644
View file @ 0305756c
.am-tabs-default-bar-tab-active{
color: #0185FB;
}
.am-tabs-default-bar-underline{
border: 1px #0185FB solid;
}
.am-tabs-default-bar-top, .am-tabs-default-bar-bottom{
border-radius:0 0 6px 6px !important;
}
src/components/WorkCard/CardItem.jsx 0 → 100644
View file @ 0305756c
import React, {Component} from 'react';
import './index.less'
class CardItem extends Component {
state = {
addStatus: false
}
componentWillReceiveProps(nextProps, nextContext) {
if (this.props.addStatus !== nextProps.addStatus) {
this.setState({ addStatus: nextProps.addStatus });
}
};
contentCLick = () => {
const {data, addCommon} = this.props;
const {addStatus} = this.state
!addStatus && !data.iconAdd && console.log(data.text);
data.iconAdd && addCommon()
};
iconClick = () => {
const { iconAction} = this.props;
iconAction()
}
render() {
const {data, type} = this.props;
const {addStatus} = this.state
return (
<div className="card-content" onClick={this.contentCLick}>
{data.text && (
<div className="card-content-box">
<div className="card-content-img">
{
addStatus && !data.iconAdd && (
<img
src={type === 'edit' ? '/img/common-d.png' : '/img/common-a.png'}
className="card-content-img-icon"
alt=""
onClick={this.iconClick}
/>
)
}
<img src={data.icon} className="card-content-img-svg" alt="" />
</div>
<div className="card-content-title">
{data.text}
</div>
</div>
)}
</div>
);
}
}
export default CardItem;
src/components/WorkCard/index.jsx 0 → 100644
View file @ 0305756c
import React, {Component} from 'react';
import './index.less'
import CardItem from './CardItem'
class Index extends Component {
render() {
const {title, type, addStatus, addCommon, data, iconAction} = this.props;
const emptyIcon = type === 'edit' ? {
text: addStatus ? '完成添加' :'添加常用', icon: addStatus ? '/img/finish-work.png' : '/img/add-work.png', iconAdd: true
} : {};
const empty = data.length % 3;
empty === 0 && data.push(emptyIcon, {}, {});
empty === 1 && data.push(emptyIcon, {});
empty === 2 && data.push(emptyIcon);
return (
<div>
<div className="work-card-title">
{title}
</div>
<div className="work-card-body">
{data.map((item, index) => (
<CardItem
type={type}
key={index}
data={item}
addStatus={addStatus}
addCommon={addCommon}
iconAction={iconAction}
/>
))}
</div>
</div>
);
}
}
export default Index;
src/components/WorkCard/index.less 0 → 100644
View file @ 0305756c
.work-card-body{
display:flex;
flex-direction: row;
flex-wrap: wrap;
//justify-content: center;
align-items: center;
//background: #ffffff;
}
.work-card-title{
line-height: 43px;
border-radius: 6px 6px 0 0;
padding-left: 20px;
background: #ffffff;
margin-bottom: 1px;
color: rgba(50, 50, 50, 0.6);
}
.card-content{
width: 33.1%;
height: 115px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: #ffffff;
margin-bottom: 1px;
//border: 1px solid rgba(38, 104, 255, 0.1);
}
.card-content-box{
display: flex;
align-items: center;
flex-direction: column;
}
.work-card-body > .card-content:nth-child(3n + 2){
margin-left: 1px;
}
.work-card-body > .card-content:nth-child(3n + 3){
margin-left: 1px;
}
.work-card-body > .card-content:last-child{
border-radius: 0 0 6px 0;
}
.work-card-body > .card-content:nth-last-child(3){
border-radius: 0 0 0 6px;
}
.card-content:active{
background: rgba(248, 248, 248, 1);
}
.card-content-img{
width: 35px;
height: 35px;
margin-bottom: 14px;
}
.card-content-img-svg{
width: 35px;
height: 35px;
}
.card-content-img-icon{
width: 30px;
height: 30px;
position: absolute;
margin-top: -15px;
margin-left: 20px;
}
.card-content-title{
text-align: center;
}
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