new page + fix bug
|
@ -14909,9 +14909,9 @@
|
|||
}
|
||||
},
|
||||
"react-monaco-editor": {
|
||||
"version": "0.36.0",
|
||||
"resolved": "https://registry.npmjs.org/react-monaco-editor/-/react-monaco-editor-0.36.0.tgz",
|
||||
"integrity": "sha512-JVA5SZhOoYZ0DCdTwYgagtRb3jHo4KN7TVFiJauG+ZBAJWfDSTzavPIrwzWbgu8ahhDqDk4jUcYlOJL2BC/0UA==",
|
||||
"version": "0.37.0",
|
||||
"resolved": "https://registry.npmjs.org/react-monaco-editor/-/react-monaco-editor-0.37.0.tgz",
|
||||
"integrity": "sha512-4fbmTIPOfEdmAlslYPVXt+TRSd975XwgfxuSEL32efjXQwTzPZWA/Wf5qn8nYBMl+Lfdhu1DGDTLE6CZ4UOjzw==",
|
||||
"requires": {
|
||||
"@types/react": "^16.x",
|
||||
"monaco-editor": "*",
|
||||
|
|
|
@ -85,7 +85,7 @@
|
|||
"react-hot-loader": "^4.12.20",
|
||||
"react-infinite-scroller": "^1.2.4",
|
||||
"react-loadable": "^5.3.1",
|
||||
"react-monaco-editor": "0.36",
|
||||
"react-monaco-editor": "0.37",
|
||||
"react-player": "^1.15.3",
|
||||
"react-redux": "5.0.7",
|
||||
"react-router": "^4.2.0",
|
||||
|
|
|
@ -5,6 +5,48 @@
|
|||
"css_prefix_text": "icon-",
|
||||
"description": "",
|
||||
"glyphs": [
|
||||
{
|
||||
"icon_id": "15792809",
|
||||
"name": "准备中",
|
||||
"font_class": "zhunbeizhong",
|
||||
"unicode": "e797",
|
||||
"unicode_decimal": 59287
|
||||
},
|
||||
{
|
||||
"icon_id": "15792805",
|
||||
"name": "运行中",
|
||||
"font_class": "yunhangzhong",
|
||||
"unicode": "e796",
|
||||
"unicode_decimal": 59286
|
||||
},
|
||||
{
|
||||
"icon_id": "15792803",
|
||||
"name": "已通过",
|
||||
"font_class": "yitongguo",
|
||||
"unicode": "e795",
|
||||
"unicode_decimal": 59285
|
||||
},
|
||||
{
|
||||
"icon_id": "15792796",
|
||||
"name": "未通过",
|
||||
"font_class": "weitongguo",
|
||||
"unicode": "e794",
|
||||
"unicode_decimal": 59284
|
||||
},
|
||||
{
|
||||
"icon_id": "15762732",
|
||||
"name": "工作流",
|
||||
"font_class": "gongzuoliu",
|
||||
"unicode": "e793",
|
||||
"unicode_decimal": 59283
|
||||
},
|
||||
{
|
||||
"icon_id": "15689245",
|
||||
"name": "更新成绩",
|
||||
"font_class": "gengxinchengji",
|
||||
"unicode": "e790",
|
||||
"unicode_decimal": 59280
|
||||
},
|
||||
{
|
||||
"icon_id": "15605136",
|
||||
"name": "文件",
|
||||
|
|
|
@ -20,6 +20,24 @@ Created by iconfont
|
|||
/>
|
||||
<missing-glyph />
|
||||
|
||||
<glyph glyph-name="zhunbeizhong" unicode="" d="M512 384m-480 0a480 480 0 1 1 960 0 480 480 0 1 1-960 0ZM512-128c-281.6 0-512 230.4-512 512s230.4 512 512 512 512-230.4 512-512-230.4-512-512-512zM512 832C262.4 832 64 633.6 64 384s198.4-448 448-448 448 198.4 448 448-198.4 448-448 448zM320 384m-64 0a64 64 0 1 1 128 0 64 64 0 1 1-128 0ZM512 384m-64 0a64 64 0 1 1 128 0 64 64 0 1 1-128 0ZM704 384m-64 0a64 64 0 1 1 128 0 64 64 0 1 1-128 0Z" horiz-adv-x="1024" />
|
||||
|
||||
|
||||
<glyph glyph-name="yunhangzhong" unicode="" d="M512 384m-480 0a480 480 0 1 1 960 0 480 480 0 1 1-960 0ZM512-128c-281.6 0-512 230.4-512 512s230.4 512 512 512 512-230.4 512-512-230.4-512-512-512zM512 832C262.4 832 64 633.6 64 384s198.4-448 448-448 448 198.4 448 448-198.4 448-448 448zM505.6 640v-313.6h294.4c-19.2-128-134.4-230.4-268.8-230.4-153.6 0-275.2 121.6-275.2 268.8C256 512 364.8 627.2 505.6 640z" horiz-adv-x="1024" />
|
||||
|
||||
|
||||
<glyph glyph-name="yitongguo" unicode="" d="M512 384m-480 0a480 480 0 1 1 960 0 480 480 0 1 1-960 0ZM512-128c-281.6 0-512 230.4-512 512s230.4 512 512 512 512-230.4 512-512-230.4-512-512-512zM512 832C262.4 832 64 633.6 64 384s198.4-448 448-448 448 198.4 448 448-198.4 448-448 448zM486.4 172.8c-6.4 0-19.2 6.4-25.6 12.8L294.4 358.4c-12.8 12.8-12.8 32 0 44.8 12.8 12.8 32 12.8 44.8 0L486.4 256l262.4 281.6c12.8 12.8 32 12.8 44.8 0 12.8-12.8 12.8-32 0-44.8L512 185.6c-6.4-6.4-12.8-6.4-25.6-12.8z" horiz-adv-x="1024" />
|
||||
|
||||
|
||||
<glyph glyph-name="weitongguo" unicode="" d="M512 384m-480 0a480 480 0 1 1 960 0 480 480 0 1 1-960 0ZM512-128c-281.6 0-512 230.4-512 512s230.4 512 512 512 512-230.4 512-512-230.4-512-512-512zM512 832C262.4 832 64 633.6 64 384s198.4-448 448-448 448 198.4 448 448-198.4 448-448 448zM678.4 172.8L544 332.8l-134.4-160-51.2 38.4L499.2 384 358.4 556.8l51.2 38.4 134.4-160 134.4 160 51.2-38.4L588.8 384l140.8-172.8z" horiz-adv-x="1024" />
|
||||
|
||||
|
||||
<glyph glyph-name="gongzuoliu" unicode="" d="M837.270588 600.847059H499.952941C421.647059 600.847059 355.388235 667.105882 355.388235 745.411765 349.364706 829.741176 415.623529 896 499.952941 896H843.294118c78.305882 0 144.564706-66.258824 144.564706-144.564706-6.023529-84.329412-72.282353-150.588235-150.588236-150.588235zM499.952941 805.647059c-30.117647 0-54.211765-24.094118-54.211765-54.211765s24.094118-54.211765 54.211765-54.211765H843.294118c30.117647 0 54.211765 24.094118 54.211764 54.211765s-24.094118 54.211765-54.211764 54.211765H499.952941zM548.141176-128H204.8C126.494118-128 60.235294-61.741176 60.235294 16.564706s66.258824 144.564706 144.564706 144.564706h343.341176c78.305882 0 144.564706-66.258824 144.564706-144.564706S626.447059-128 548.141176-128z m-343.341176 204.8c-30.117647 0-54.211765-24.094118-54.211765-54.211765s24.094118-54.211765 54.211765-54.211764h343.341176c30.117647 0 54.211765 24.094118 54.211765 54.211764s-24.094118 54.211765-54.211765 54.211765H204.8zM903.529412-49.694118h-210.82353v90.352942H903.529412c42.164706 0 72.282353 36.141176 72.282353 72.282352v150.588236c0 42.164706-36.141176 72.282353-72.282353 72.282353H180.705882C90.352941 335.811765 12.047059 408.094118 12.047059 498.447059V655.058824C12.047059 745.411765 84.329412 823.717647 180.705882 823.717647h168.658824v-90.352941H180.705882C138.541176 727.341176 108.423529 697.223529 108.423529 655.058824v-144.564706c0-42.164706 36.141176-72.282353 72.282353-72.282353h722.82353c90.352941 0 168.658824-72.282353 168.658823-162.635294v-150.588236c0-102.4-78.305882-174.682353-168.658823-174.682353zM493.929412 384a120.470588 120.470588 0 1 1 240.941176 0 120.470588 120.470588 0 1 1-240.941176 0Z" horiz-adv-x="1084" />
|
||||
|
||||
|
||||
<glyph glyph-name="gengxinchengji" unicode="" d="M768-84.8c-96 0-166.4 70.4-166.4 166.4v25.6l64-6.4v-12.8c0-57.6 44.8-102.4 102.4-102.4 19.2 0 44.8 6.4 57.6 19.2l38.4-57.6c-25.6-25.6-64-32-96-32z m147.2 89.6l-57.6 25.6c6.4 19.2 12.8 32 12.8 51.2 0 57.6-44.8 102.4-102.4 102.4-19.2 0-32-6.4-44.8-12.8l-32 57.6c25.6 12.8 51.2 19.2 76.8 19.2 89.6 0 166.4-76.8 166.4-166.4 0-25.6-6.4-57.6-19.2-76.8zM633.6 158.4l57.6-76.8H569.6zM908.8-14.4l64 76.8h-128zM544-57.6H64V864h537.6L864 601.6v-275.2h-64V576L576 800h-448v-793.6H544zM243.2 614.4h198.4v-64H243.2zM242.624 438.08l383.936 6.976 1.152-64-383.936-6.912zM243.2 275.2h326.4v-64H243.2zM857.6 550.4h-320l6.4 320 313.6-320z m-256 64h102.4L601.6 716.8v-102.4z" horiz-adv-x="1024" />
|
||||
|
||||
|
||||
<glyph glyph-name="wenjian1" unicode="" d="M574.330435-119.095652H151.373913c-44.521739 0-84.591304 40.069565-84.591304 84.591304V811.408696C66.782609 855.930435 106.852174 896 151.373913 896h681.182609c44.521739 0 84.591304-40.069565 84.591304-84.591304v-436.313044c0-26.713043-17.808696-44.521739-44.521739-44.521739s-44.521739 17.808696-44.521739 44.521739V806.956522H155.826087v-837.008696h418.504348c26.713043 0 44.521739-17.808696 44.521739-44.521739s-22.26087-44.521739-44.521739-44.521739zM249.321739 410.713043h471.930435v-66.782608H249.321739zM512 148.034783m-44.521739 0a44.521739 44.521739 0 1 1 89.043478 0 44.521739 44.521739 0 1 1-89.043478 0ZM690.086957 148.034783m-44.52174 0a44.521739 44.521739 0 1 1 89.043479 0 44.521739 44.521739 0 1 1-89.043479 0ZM850.365217 148.034783m-44.521739 0a44.521739 44.521739 0 1 1 89.043479 0 44.521739 44.521739 0 1 1-89.043479 0ZM249.321739 655.582609h471.930435v-66.782609H249.321739zM249.321739 188.104348h146.921739v-66.782609H249.321739z" horiz-adv-x="1024" />
|
||||
|
||||
|
||||
|
|
Before Width: | Height: | Size: 502 KiB After Width: | Height: | Size: 506 KiB |
15
src/App.js
|
@ -46,6 +46,11 @@ const Projects = Loadable({
|
|||
loader: () => import('./forge/Index'),
|
||||
loading: Loading,
|
||||
})
|
||||
//forge项目-devOps详情
|
||||
const OpsDetail = Loadable({
|
||||
loader: () => import('./forge/DevOps/opsDetail'),
|
||||
loading: Loading,
|
||||
})
|
||||
//403页面
|
||||
const Shixunauthority = Loadable({
|
||||
loader: () => import('./modules/403/Shixunauthority'),
|
||||
|
@ -217,6 +222,15 @@ class App extends Component {
|
|||
<Certifiedprofessional {...this.props} {...this.state} ModalCancelsy={this.ModalCancelsy} ModalshowCancelsy={this.ModalshowCancelsy} />
|
||||
<Router>
|
||||
<Switch>
|
||||
{/*项目*/}
|
||||
<Route
|
||||
path={"/projects/:projectId/ops/:opsId/detail"}
|
||||
render={
|
||||
(props) => {
|
||||
return (<OpsDetail {...this.props} {...props} {...this.state} />)
|
||||
}
|
||||
}>
|
||||
</Route>
|
||||
{/*项目*/}
|
||||
<Route
|
||||
path={"/projects"}
|
||||
|
@ -226,6 +240,7 @@ class App extends Component {
|
|||
}
|
||||
}>
|
||||
</Route>
|
||||
|
||||
{/*403*/}
|
||||
<Route path="/403" component={Shixunauthority} />
|
||||
|
||||
|
|
|
@ -64,3 +64,28 @@ li.ant-menu-item{
|
|||
bottom: 10px;
|
||||
}
|
||||
}
|
||||
.statusColor{
|
||||
display: inline-block;
|
||||
padding:0px 10px;
|
||||
height:20px;
|
||||
line-height: 20px;
|
||||
border-radius:11px;
|
||||
color: #fff;
|
||||
margin-left: 5px;
|
||||
&.running{
|
||||
background:#5091FF;
|
||||
color: #F1F8FF;
|
||||
}
|
||||
&.Preparing{
|
||||
background:rgba(255,110,33,1);
|
||||
color:rgba(255,248,244,1);
|
||||
}
|
||||
&.pass{
|
||||
background:#28BD6C;
|
||||
color: #EEFDF5;
|
||||
}
|
||||
&.failed{
|
||||
background:#F73030;
|
||||
color:#FCEEEE ;
|
||||
}
|
||||
}
|
|
@ -0,0 +1,23 @@
|
|||
import React from 'react';
|
||||
import './Component.scss';
|
||||
|
||||
export const Tags = (status)=>{
|
||||
switch(status){
|
||||
case 1:
|
||||
return(
|
||||
<span className="statusColor running">运行中</span>
|
||||
);
|
||||
case 2:
|
||||
return (
|
||||
<span className="statusColor failed">未通过</span>
|
||||
);
|
||||
case 3:
|
||||
return (
|
||||
<span className="statusColor pass">已通过</span>
|
||||
);
|
||||
default:
|
||||
return (
|
||||
<span className="statusColor Preparing">准备中</span>
|
||||
);
|
||||
}
|
||||
}
|
|
@ -89,6 +89,17 @@ export const Greenback = styled.a`{
|
|||
min-width:80px;
|
||||
text-align:center;
|
||||
}`
|
||||
export const Blueback = styled.a`{
|
||||
height:30px;
|
||||
line-height:30px;
|
||||
border-radius:2px;
|
||||
background-color:rgba(80,145,255,1);
|
||||
color:#fff;
|
||||
padding:0px 12px;
|
||||
display:inline-block;
|
||||
min-width:80px;
|
||||
text-align:center;
|
||||
}`
|
||||
export const Redback = styled.a`{
|
||||
height:30px;
|
||||
line-height:30px;
|
||||
|
|
|
@ -0,0 +1,69 @@
|
|||
import React , { forwardRef , useCallback } from 'react';
|
||||
import activate from '../Images/activate.png';
|
||||
import { Blueback } from '../Component/layout';
|
||||
import styled from 'styled-components';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { Form , Input } from 'antd';
|
||||
|
||||
const P = styled.p`{
|
||||
width:200px;
|
||||
line-height:30px;
|
||||
font-size:16px;
|
||||
color:#333;
|
||||
text-align:center;
|
||||
margin-top:30px;
|
||||
margin-bottom:30px!important;
|
||||
}`;
|
||||
export default Form.create()(
|
||||
forwardRef(({ form })=>{
|
||||
const { getFieldDecorator , validateFields } = form;
|
||||
|
||||
const helper = useCallback(
|
||||
(label, name, rules, widget, isRequired) => (
|
||||
<React.Fragment>
|
||||
<span className={isRequired?"required":""}>{label}</span>
|
||||
<Form.Item>
|
||||
{getFieldDecorator(name, { rules, validateFirst: true })(widget)}
|
||||
</Form.Item>
|
||||
</React.Fragment>
|
||||
),
|
||||
[]
|
||||
);
|
||||
|
||||
function startActive(){
|
||||
validateFields((error,value)=>{
|
||||
if(!error){
|
||||
console.log(value);
|
||||
}
|
||||
})
|
||||
}
|
||||
return(
|
||||
<div className="activatePanel">
|
||||
<img src={activate} alt="" width="250px"/>
|
||||
<P>定义DevOps工作流,帮助您检测bug、发布代码…</P>
|
||||
<Link to={""} style={{color:"#5091FF",marginTop:"20px"}}>了解什么是DevOps?</Link>
|
||||
<Form>
|
||||
{helper(
|
||||
"服务器IP地址:",
|
||||
"IP",
|
||||
[{ required: true, message: "请输入服务器IP地址" }],
|
||||
<Input placeholder="请输入服务器IP地址" style={{width:"368px"}} size="large" />,true
|
||||
)}
|
||||
{helper(
|
||||
"服务器用户名:",
|
||||
"username",
|
||||
[{ required: true, message: "请输入服务器用户名" }],
|
||||
<Input placeholder="请输入服务器用户名" size="large" />,true
|
||||
)}
|
||||
{helper(
|
||||
"服务器密码:",
|
||||
"password",
|
||||
[{ required: true, message: "请输入服务器密码" }],
|
||||
<Input.Password placeholder="请输入服务器密码" size="large" />,true
|
||||
)}
|
||||
</Form>
|
||||
<Blueback onClick={startActive}>开始激活</Blueback>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
)
|
|
@ -0,0 +1,81 @@
|
|||
import React , { forwardRef , useCallback , useState } from 'react';
|
||||
import { Form , AutoComplete } from 'antd';
|
||||
import { Blueback } from '../Component/layout';
|
||||
import Editor from "react-monaco-editor";
|
||||
import Modals from './DisposeModal';
|
||||
|
||||
import docker from '../Images/docker.png';
|
||||
import gradle from '../Images/gradle.png';
|
||||
import java from '../Images/java.png';
|
||||
import js from '../Images/js.png';
|
||||
import php from '../Images/php.png';
|
||||
import python from '../Images/python.png';
|
||||
|
||||
|
||||
const Option = AutoComplete.Option;
|
||||
export default Form.create()(
|
||||
forwardRef(({ form })=>{
|
||||
const [ visible , setVisible ] = useState(false);
|
||||
const { getFieldDecorator } = form;
|
||||
const helper = useCallback(
|
||||
(label, name, rules, widget, isRequired = false) => (
|
||||
<React.Fragment>
|
||||
<span required={isRequired}>{label}</span>
|
||||
<Form.Item>
|
||||
{getFieldDecorator(name, { rules, validateFirst: true })(widget)}
|
||||
</Form.Item>
|
||||
</React.Fragment>
|
||||
),
|
||||
[]
|
||||
)
|
||||
// 修改文件内容
|
||||
function changeEditor(){}
|
||||
|
||||
// 切换语言
|
||||
function changeAuto(){}
|
||||
return(
|
||||
<React.Fragment>
|
||||
<Modals visible={visible} closeFunc={(flag)=>setVisible(flag)}></Modals>
|
||||
<Form>
|
||||
<p>编程语言:</p>
|
||||
<ul className="language">
|
||||
<li><img alt="" src={docker} /></li>
|
||||
<li><img alt="" src={gradle} /></li>
|
||||
<li><img alt="" src={java} /></li>
|
||||
<li><img alt="" src={js} /></li>
|
||||
<li><img alt="" src={php} /></li>
|
||||
<li><img alt="" src={python} /></li>
|
||||
</ul>
|
||||
{helper(
|
||||
"",
|
||||
"tag_name",
|
||||
[{ required: true, message: "请选择语言" }],
|
||||
<AutoComplete
|
||||
placeholder="更多语言"
|
||||
onChange={changeAuto}
|
||||
style={{ width: "300px",margin:"15px 0px" }}
|
||||
>
|
||||
</AutoComplete>
|
||||
)}
|
||||
<p>配置脚本:</p>
|
||||
<div className="editorBody">
|
||||
<p className="editorHead">
|
||||
<span>trustie-pipeline.yml</span>
|
||||
<a><i className="iconfont icon-bianji6 font-14"></i></a>
|
||||
</p>
|
||||
<Editor
|
||||
height="300px"
|
||||
language={"plaintext"}
|
||||
theme={"vs-grey"}
|
||||
defaultValue="请输入内容"
|
||||
value={"editorValue"}
|
||||
options={"editor_options"}
|
||||
onChange={changeEditor}
|
||||
></Editor>
|
||||
</div>
|
||||
<Blueback>确定提交</Blueback>
|
||||
</Form>
|
||||
</React.Fragment>
|
||||
)
|
||||
})
|
||||
)
|
|
@ -0,0 +1,28 @@
|
|||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import { Modal ,Button } from 'antd';
|
||||
|
||||
const Div = styled.div`{
|
||||
height:130px;
|
||||
line-height:130px;
|
||||
text-align:center;
|
||||
color:#333;
|
||||
}`
|
||||
export default (({visible , closeFunc})=>{
|
||||
return(
|
||||
<Modal
|
||||
title="提示"
|
||||
visible={visible}
|
||||
closable={true}
|
||||
footer={
|
||||
<div>
|
||||
<Button onClick={()=>closeFunc(false)}>取消</Button>
|
||||
<Button type={"primary"} onClick={()=>closeFunc(false)} style={{marginLeft:"20px"}}>确定</Button>
|
||||
</div>
|
||||
}
|
||||
onCancel={()=>closeFunc(false)}
|
||||
>
|
||||
<Div>工作流配置完成,您的DevOps之旅即刻开启!</Div>
|
||||
</Modal>
|
||||
)
|
||||
})
|
|
@ -0,0 +1,39 @@
|
|||
import React from 'react';
|
||||
import { WhiteBack } from '../Component/layout';
|
||||
import './ops.scss';
|
||||
|
||||
import { Route, Switch } from 'react-router-dom';
|
||||
import Loadable from 'react-loadable';
|
||||
import Loading from '../../Loading';
|
||||
|
||||
const About = Loadable({
|
||||
loader: () => import('./About'),
|
||||
loading: Loading,
|
||||
})
|
||||
const Infos = Loadable({
|
||||
loader: () => import('./Infos'),
|
||||
loading: Loading,
|
||||
})
|
||||
export default ((props)=>{
|
||||
return(
|
||||
<WhiteBack className="opsPanel">
|
||||
<Switch {...props}>
|
||||
<Route path="/projects/:projectsId/ops/dispose"
|
||||
render={
|
||||
() => (<Infos {...props} />)
|
||||
}
|
||||
></Route>
|
||||
<Route path="/projects/:projectsId/ops/list"
|
||||
render={
|
||||
() => (<Infos {...props} />)
|
||||
}
|
||||
></Route>
|
||||
<Route path="/projects/:projectsId/ops"
|
||||
render={
|
||||
() => (<About {...props} />)
|
||||
}
|
||||
></Route>
|
||||
</Switch>
|
||||
</WhiteBack>
|
||||
)
|
||||
})
|
|
@ -0,0 +1,39 @@
|
|||
import React , { useEffect , useState } from 'react';
|
||||
import { Banner } from '../Component/layout';
|
||||
|
||||
import Dispost from './Dispose';
|
||||
import Structure from './Structure';
|
||||
|
||||
import styled from 'styled-components';
|
||||
|
||||
const Div = styled.div`{
|
||||
padding:24px 30px;
|
||||
}`;
|
||||
export default ((props)=>{
|
||||
const [ menu , setMenu ] = useState(false);
|
||||
|
||||
useEffect(()=>{
|
||||
const path = props.location.pathname;
|
||||
console.log(props.match.params.projectsId)
|
||||
if(path === `/projects/${props.match.params.projectsId}/ops/list`){
|
||||
setMenu(true);
|
||||
}
|
||||
},[])
|
||||
|
||||
return(
|
||||
<div className="disposePanel">
|
||||
<Banner>
|
||||
<span>工作流配置</span>
|
||||
<span style={{marginLeft:"66px",color:`${ menu ? "#5091FF":"#333" }`}}>构建列表</span>
|
||||
</Banner>
|
||||
<Div>
|
||||
{
|
||||
menu ?
|
||||
<Structure {...props}/>
|
||||
:
|
||||
<Dispost {...props}/>
|
||||
}
|
||||
</Div>
|
||||
</div>
|
||||
)
|
||||
})
|
|
@ -0,0 +1,204 @@
|
|||
import React , { useState } from 'react';
|
||||
import { FlexAJ , Blueback } from '../Component/layout';
|
||||
import { Table , Pagination } from 'antd';
|
||||
import styled from 'styled-components';
|
||||
const STATUS = [
|
||||
{name:"所有",value:"1"},
|
||||
{name:"准备中",value:"2"},
|
||||
{name:"运行中",value:"3"},
|
||||
{name:"已完成",value:"4"}
|
||||
]
|
||||
const LIMIT = 15;
|
||||
const datasource = [
|
||||
{
|
||||
status:2,
|
||||
author:"caishi",
|
||||
message:{
|
||||
branch:"master",
|
||||
sha:"8b3476f5",
|
||||
image:"https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2034740944,4251903193&fm=26&gp=0.jpg",
|
||||
message:"将分支“ 221063-improve-buy-ci-minutes-link”"
|
||||
},
|
||||
begin:"2020-07-08",
|
||||
run:"20s"
|
||||
},
|
||||
{
|
||||
status:1,
|
||||
author:"caishi",
|
||||
message:{
|
||||
branch:"master",
|
||||
sha:"8b3476f5",
|
||||
image:"https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2034740944,4251903193&fm=26&gp=0.jpg",
|
||||
message:"将分支“ 221063-improve-buy-ci-minutes-link”"
|
||||
},
|
||||
begin:"2020-07-08",
|
||||
run:""
|
||||
}
|
||||
];
|
||||
|
||||
const Img = styled.img`{
|
||||
border-radius:50%;
|
||||
margin-rigth:10px;
|
||||
width:25px;
|
||||
height:25px;
|
||||
}`
|
||||
export default (()=>{
|
||||
const [ status ,setStatus ] = useState("1");
|
||||
const [ page ,setPage ] = useState(1);
|
||||
const [ total ,setTotal ] = useState(10);
|
||||
|
||||
|
||||
function ChangeStatus(value){
|
||||
setStatus(value)
|
||||
}
|
||||
// 切换分页
|
||||
function ChangePage(page){
|
||||
setPage(page)
|
||||
}
|
||||
function renderStatus() {
|
||||
return(
|
||||
<ul className="listNav">
|
||||
{
|
||||
STATUS.map((item,key)=>{
|
||||
return <li onClick={()=>ChangeStatus(item.value)} className={ status === item.value ? "active":""}>{item.name}</li>
|
||||
})
|
||||
}
|
||||
</ul>
|
||||
)
|
||||
}
|
||||
function renderStatusBtn(status){
|
||||
if(status >1 && status <=3){
|
||||
return(
|
||||
<a className="color-blue">重新构建</a>
|
||||
)
|
||||
}else{
|
||||
return(
|
||||
<a className="color-red">撤销构建</a>
|
||||
)
|
||||
}
|
||||
}
|
||||
function renderTableStatus (status){
|
||||
switch (status){
|
||||
case 1:
|
||||
return(
|
||||
<span className="statusTag running"><i className="iconfont icon-yunhangzhong"></i>运行中</span>
|
||||
);
|
||||
case 2:
|
||||
return (
|
||||
<span className="statusTag failed"><i className="iconfont icon-weitongguo"></i>未通过</span>
|
||||
);
|
||||
case 3:
|
||||
return (
|
||||
<span className="statusTag pass"><i className="iconfont icon-yitongguo"></i>已通过</span>
|
||||
);
|
||||
default:
|
||||
return (
|
||||
<span className="statusTag Preparing"><i className="iconfont icon-zhunbeizhong"></i>准备中</span>
|
||||
);
|
||||
}
|
||||
}
|
||||
const column = [
|
||||
{
|
||||
title:'序号',
|
||||
dataIndex:"No",
|
||||
key:"No",
|
||||
width:"8%",
|
||||
render:(item,value,key)=>{
|
||||
return(
|
||||
<span>#{key+1}</span>
|
||||
)
|
||||
}
|
||||
},
|
||||
{
|
||||
title:'状态',
|
||||
dataIndex:"status",
|
||||
key:"status",
|
||||
width:"12%",
|
||||
render:(value,item,key)=>{
|
||||
return(renderTableStatus(value))
|
||||
}
|
||||
},
|
||||
{
|
||||
title:'构建人',
|
||||
dataIndex:"author",
|
||||
key:"author",
|
||||
width:"12%",
|
||||
align:"center"
|
||||
},
|
||||
{
|
||||
title:'提交信息',
|
||||
dataIndex:"message",
|
||||
key:"message",
|
||||
width:"30%",
|
||||
render:(value,item,key)=>{
|
||||
let meg = item.message;
|
||||
return (
|
||||
<React.Fragment>
|
||||
<div>
|
||||
{ meg.branch && <span className="mr10 color-grey-8"><i className="iconfont icon-fenzhi1 font-16 mr5"></i>分支{meg.branch}</span>}
|
||||
{ meg.sha && <span className="color-orange">{meg.sha}</span>}
|
||||
</div>
|
||||
<FlexAJ>
|
||||
<Img src={meg.image} />
|
||||
<div className="task-hide" style={{maxWidth:"300px"}}>{meg.message}</div>
|
||||
</FlexAJ>
|
||||
</React.Fragment>
|
||||
)
|
||||
}
|
||||
},
|
||||
{
|
||||
title:'开始时间',
|
||||
dataIndex:"begin",
|
||||
key:"begin",
|
||||
width:"15%",
|
||||
render:(value,item,key)=>{
|
||||
return (
|
||||
<span>{value || "--"}</span>
|
||||
)
|
||||
}
|
||||
},
|
||||
{
|
||||
title:'运行时间',
|
||||
dataIndex:"run",
|
||||
key:"run",
|
||||
width:"15%",
|
||||
render:(value,item,key)=>{
|
||||
return (
|
||||
<span>{value || "--"}</span>
|
||||
)
|
||||
}
|
||||
},
|
||||
{
|
||||
title:'操作',
|
||||
dataIndex:"operation",
|
||||
key:"operation",
|
||||
render:(value,item,key)=>{
|
||||
return(renderStatusBtn(item.status));
|
||||
}
|
||||
}
|
||||
]
|
||||
return(
|
||||
<div className="listPart">
|
||||
<FlexAJ>
|
||||
{renderStatus()}
|
||||
<span>
|
||||
<Blueback className="mr30">手动创建</Blueback>
|
||||
<span className="mr30"><i className="iconfont icon-fenzhi1 font-16 mr5 color-blue"></i>分支</span>
|
||||
<span><i className="iconfont icon-biaoqian3 font-16 mr5 color-blue"></i>标签</span>
|
||||
</span>
|
||||
</FlexAJ>
|
||||
<Table
|
||||
columns={column}
|
||||
className="normalTable"
|
||||
dataSource={datasource}
|
||||
pagination={false}
|
||||
></Table>
|
||||
{
|
||||
total > LIMIT ?
|
||||
<div style={{textAlign:'center',margin:"30px 50px"}}>
|
||||
<Pagination showQuickJumper defaultCurrent={page} total={total} pageSize={LIMIT} onChange={ChangePage}></Pagination>
|
||||
</div>:""
|
||||
}
|
||||
</div>
|
||||
)
|
||||
})
|
|
@ -0,0 +1,121 @@
|
|||
.opsPanel
|
||||
{
|
||||
margin:20px auto;
|
||||
width: 1200px;
|
||||
// 开始激活页面
|
||||
.activatePanel{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding:60px 0px;
|
||||
}
|
||||
.disposePanel{
|
||||
.language{
|
||||
display: flex;
|
||||
li{
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
.editorBody{
|
||||
border:1px solid #ddd;
|
||||
margin:20px 0px;
|
||||
.editorHead{
|
||||
background-color: #F1F8FF;
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding:0px 20px;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
.monaco-editor{
|
||||
width:1138px!important;
|
||||
}
|
||||
}
|
||||
.ant-modal-close{
|
||||
top:7px;
|
||||
}
|
||||
.listPart{
|
||||
.listNav{
|
||||
display: flex;
|
||||
li{
|
||||
background-color: #fafafa;
|
||||
border:1px solid #eee;
|
||||
border-radius: 5px;
|
||||
height: 38px;
|
||||
line-height:38px;
|
||||
padding:0px 20px;
|
||||
color: #333;
|
||||
margin-right: 20px;
|
||||
cursor: pointer;
|
||||
&:last-child{
|
||||
margin-right: 0px;
|
||||
}
|
||||
&.active{
|
||||
border:1px solid #5091FF;
|
||||
color: #5091FF;
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.normalTable{
|
||||
margin-top: 20px;
|
||||
.ant-table-thead > tr > th, .ant-table-tbody > tr > td{
|
||||
padding:10px 5px;
|
||||
color:#333;
|
||||
}
|
||||
.ant-table-thead{
|
||||
border:1px solid rgba(238,238,238,1)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 列表
|
||||
.listPart{
|
||||
.statusTag{
|
||||
display: flex;
|
||||
padding:0px 16px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
border-radius:20px;
|
||||
float: left;
|
||||
i{
|
||||
font-size: 20px!important;
|
||||
margin-right: 7px;
|
||||
}
|
||||
&.running{
|
||||
background:#F1F8FF;
|
||||
border:1px solid #5091FF;
|
||||
color: #5091FF;
|
||||
}
|
||||
&.Preparing{
|
||||
background:rgba(255,248,244,1);
|
||||
border:1px solid rgba(255,110,33,1);
|
||||
color:rgba(255,110,33,1) ;
|
||||
}
|
||||
&.pass{
|
||||
background:#EEFDF5;
|
||||
border:1px solid #28BD6C;
|
||||
color:#28BD6C ;
|
||||
}
|
||||
&.failed{
|
||||
background:#FCEEEE;
|
||||
border:1px solid #F73030;
|
||||
color:#F73030 ;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
// ops详情
|
||||
.opsDetailPanel{
|
||||
height: 100vh;
|
||||
background-color: #114879;
|
||||
.opsInfos{
|
||||
height: 60px;
|
||||
background-color: #114879;
|
||||
color:#fff;
|
||||
padding:0px 20px;
|
||||
}
|
||||
}
|
|
@ -0,0 +1,19 @@
|
|||
import React from 'react';
|
||||
import './ops.scss';
|
||||
import { FlexAJ, AlignCenter } from '../Component/layout';
|
||||
import { Tags } from '../Component/OpsStatus';
|
||||
|
||||
export default (()=>{
|
||||
return(
|
||||
<div className="opsDetailPanel">
|
||||
<FlexAJ className="opsInfos">
|
||||
<AlignCenter>
|
||||
<span>#1</span>
|
||||
<span className="ml10">将分支“221063-improve-buy-ci-minutes-link”合并到“221063-improve-buy-ci-minutes-link"</span>
|
||||
{Tags(1)}
|
||||
</AlignCenter>
|
||||
<a style={{color:"#ddd"}}><i className="iconfont icon-yiguanbi font-15 mr5"></i>退出</a>
|
||||
</FlexAJ>
|
||||
</div>
|
||||
)
|
||||
});
|
After Width: | Height: | Size: 6.7 KiB |
After Width: | Height: | Size: 6.5 KiB |
After Width: | Height: | Size: 5.8 KiB |
After Width: | Height: | Size: 5.1 KiB |
After Width: | Height: | Size: 5.1 KiB |
After Width: | Height: | Size: 5.6 KiB |
After Width: | Height: | Size: 4.1 KiB |
|
@ -344,55 +344,25 @@ class CoderRootDirectory extends Component {
|
|||
readOnly
|
||||
})
|
||||
}
|
||||
render(){
|
||||
const { branchLastCommit , lastCommitAuthor , rootList , branch ,filePath , fileDetail , subFileType , readMeContent, isSpin , zip_url , tar_url} = this.state;
|
||||
const { isManager , isDeveloper , projectDetail } = this.props;
|
||||
const { projectsId } = this.props.match.params;
|
||||
|
||||
const columns = [
|
||||
{
|
||||
dataIndex: 'name',
|
||||
width:"30%",
|
||||
render: (text,item) => (
|
||||
<a onClick={()=>this.goToSubRoot(item.path,item.type,text)} className="ml12 task-hide" style={{ display: "block", maxWidth: "345px" }}>
|
||||
<i className={ item.type === "file" ? "iconfont icon-wenjia font-15 color-green-file mr5":"iconfont icon-wenjianjia1 color-green-file font-15 mr5"}></i>{text}
|
||||
</a>
|
||||
),
|
||||
},
|
||||
{
|
||||
dataIndex: "commit",
|
||||
width: "60%",
|
||||
render: (text, item) =>
|
||||
item.commit && item.commit.message ? (
|
||||
<span
|
||||
className="task-hide"
|
||||
style={{ display: "block", maxWidth: "670px" }}
|
||||
>
|
||||
{item.commit.message}
|
||||
</span>
|
||||
) : (
|
||||
""
|
||||
),
|
||||
},
|
||||
{
|
||||
dataIndex: "commit",
|
||||
width: "10%",
|
||||
className: "edu-txt-right",
|
||||
render: (text, item) =>
|
||||
item.commit && item.commit.time_from_now ? (
|
||||
<a
|
||||
title={item.commit.created_at}
|
||||
className="mr12"
|
||||
style={{ cursor: "default", color: "#888" }}
|
||||
>
|
||||
{item.commit.time_from_now}
|
||||
</a>
|
||||
) : (
|
||||
""
|
||||
),
|
||||
},
|
||||
];
|
||||
const title = () => {
|
||||
downloadUrl = (zip_url,tar_url) => {
|
||||
return(
|
||||
<Menu>
|
||||
{zip_url && (
|
||||
<Menu.Item>
|
||||
<a href={zip_url}>ZIP</a>
|
||||
</Menu.Item>
|
||||
)}
|
||||
{tar_url && (
|
||||
<Menu.Item>
|
||||
<a href={tar_url}>TAR.GZ</a>
|
||||
</Menu.Item>
|
||||
)}
|
||||
</Menu>
|
||||
)
|
||||
}
|
||||
|
||||
title = (branchLastCommit,lastCommitAuthor) => {
|
||||
if (branchLastCommit) {
|
||||
return (
|
||||
<div className="f-wrap-alignCenter">
|
||||
|
@ -428,25 +398,46 @@ class CoderRootDirectory extends Component {
|
|||
</span>
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
return undefined;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
const downloadUrl = () => (
|
||||
<Menu>
|
||||
{zip_url && (
|
||||
<Menu.Item>
|
||||
<a href={zip_url}>ZIP</a>
|
||||
</Menu.Item>
|
||||
)}
|
||||
{tar_url && (
|
||||
<Menu.Item>
|
||||
<a href={tar_url}>TAR.GZ</a>
|
||||
</Menu.Item>
|
||||
)}
|
||||
</Menu>
|
||||
);
|
||||
render(){
|
||||
const { branchLastCommit , lastCommitAuthor , rootList , branch ,filePath , fileDetail , subFileType , readMeContent, isSpin , zip_url , tar_url} = this.state;
|
||||
const { isManager , isDeveloper , projectDetail } = this.props;
|
||||
const { projectsId } = this.props.match.params;
|
||||
|
||||
const columns = [
|
||||
{
|
||||
dataIndex: 'name',
|
||||
width:"30%",
|
||||
render: (text,item) => (
|
||||
<a onClick={()=>this.goToSubRoot(item.path,item.type,text)} className="ml12 task-hide" style={{ display: "block", maxWidth: "345px" }}>
|
||||
<i className={ item.type === "file" ? "iconfont icon-wenjia font-15 color-green-file mr5":"iconfont icon-wenjianjia1 color-green-file font-15 mr5"}></i>{text}
|
||||
</a>
|
||||
),
|
||||
},
|
||||
{
|
||||
dataIndex: "commit",
|
||||
width: "60%",
|
||||
render: (text, item) =>
|
||||
item.commit && item.commit.message ?
|
||||
<span className="task-hide" style={{ display: "block", maxWidth: "670px" }} >
|
||||
{item.commit.message}
|
||||
</span>
|
||||
: ""
|
||||
},
|
||||
{
|
||||
dataIndex: "commit",
|
||||
width: "10%",
|
||||
className: "edu-txt-right",
|
||||
render: (text, item) =>
|
||||
item.commit && item.commit.time_from_now ?
|
||||
<a title={item.commit.created_at} className="mr12" style={{ cursor: "default", color: "#888" }} >
|
||||
{item.commit.time_from_now}
|
||||
</a>
|
||||
:""
|
||||
},
|
||||
];
|
||||
|
||||
const urlRoot = filePath === undefined ? "" : `/${filePath}`;
|
||||
let array = filePath && filePath.split("/");
|
||||
|
@ -487,7 +478,7 @@ class CoderRootDirectory extends Component {
|
|||
)}
|
||||
</div>
|
||||
<div className="f-wrap-alignCenter">
|
||||
{subFileType && parseInt(projectDetail.type) !== 2 && (isManager || isDeveloper) && (
|
||||
{subFileType && (projectDetail && parseInt(projectDetail.type)) !== 2 && (isManager || isDeveloper) && (
|
||||
<div>
|
||||
<span>
|
||||
<Link
|
||||
|
@ -508,7 +499,7 @@ class CoderRootDirectory extends Component {
|
|||
{projectDetail && projectDetail.clone_url && (
|
||||
<CloneAddress
|
||||
http_url={projectDetail.clone_url}
|
||||
downloadUrl={downloadUrl}
|
||||
downloadUrl={this.downloadUrl(zip_url,tar_url)}
|
||||
showNotification={this.props.showNotification}
|
||||
></CloneAddress>
|
||||
)}
|
||||
|
@ -519,7 +510,7 @@ class CoderRootDirectory extends Component {
|
|||
<RootTable
|
||||
columns={columns}
|
||||
data={rootList}
|
||||
title={() => title()}
|
||||
title={() => this.title(branchLastCommit,lastCommitAuthor)}
|
||||
></RootTable>
|
||||
)}
|
||||
{/* 子目录列表、文件 */}
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import React, { Component, Fragment } from 'react';
|
||||
import React, { Component } from 'react';
|
||||
import { Spin, Tooltip } from 'antd';
|
||||
import { Link, Route, Switch } from 'react-router-dom';
|
||||
import { Content } from '../Component/layout';
|
||||
|
@ -114,6 +114,10 @@ const TrendsIndex = Loadable({
|
|||
loading: Loading,
|
||||
})
|
||||
|
||||
const DevIndex = Loadable({
|
||||
loader: () => import('../DevOps/Index'),
|
||||
loading: Loading,
|
||||
})
|
||||
/**
|
||||
* permission:Manager:管理员,Reporter:报告人员(只有读取权限),Developer:开发人员(除不能设置仓库信息外)
|
||||
*/
|
||||
|
@ -419,7 +423,7 @@ class Detail extends Component {
|
|||
<img alt="" src={img_1} width="18" />代码库
|
||||
</Link>
|
||||
</li>
|
||||
<li className={(url.indexOf("orders") > -1 && !(url.indexOf("Milepost") > 0 || url.indexOf("meilpost") > 0 || url.indexOf("tags") > 0)) ? "active" : ""}>
|
||||
<li className={(url.indexOf("/orders") > -1 && !(url.indexOf("Milepost") > 0 || url.indexOf("meilpost") > 0 || url.indexOf("tags") > 0)) ? "active" : ""}>
|
||||
<Link to={{ pathname: `/projects/${projectsId}/orders`, state }}>
|
||||
<img alt="" src={img_2} width="12" />任务
|
||||
{projectDetail && projectDetail.issues_count ? <span>{projectDetail.issues_count}</span> : ""}
|
||||
|
@ -434,20 +438,26 @@ class Detail extends Component {
|
|||
</Link>
|
||||
</li>
|
||||
}
|
||||
<li className={(url.indexOf("Milepost") > -1 || url.indexOf("meilpost") > -1) ? "active" : ""}>
|
||||
<li className={url.indexOf("/ops") > -1 ? "active" : ""}>
|
||||
<Link to={{ pathname: `/projects/${projectsId}/ops`, state }}>
|
||||
<i className="iconfont icon-gongzuoliu font-13 mr8"></i>工作流
|
||||
{/* {projectDetail && projectDetail.pull_requests_count ? <span>{projectDetail.pull_requests_count}</span> : ""} */}
|
||||
</Link>
|
||||
</li>
|
||||
<li className={(url.indexOf("/Milepost") > -1 || url.indexOf("meilpost") > -1) ? "active" : ""}>
|
||||
<Link to={{ pathname: `/projects/${projectsId}/orders/Milepost`, state }}>
|
||||
<img alt="" src={img_milepost} width="16" />里程碑
|
||||
{projectDetail && projectDetail.version_count && <span>{projectDetail.version_count}</span>}
|
||||
</Link>
|
||||
</li>
|
||||
<li className={url.indexOf("trends") > -1 ? "active" : ""}>
|
||||
<li className={url.indexOf("/trends") > -1 ? "active" : ""}>
|
||||
<Link to={{ pathname: `/projects/${projectsId}/trends`, state }}>
|
||||
<img alt="" src={img_6} width="16" />动态
|
||||
</Link>
|
||||
</li>
|
||||
{
|
||||
isManager &&
|
||||
<li className={url.indexOf("setting") > 0 ? "active" : ""}><Link to={`/projects/${projectsId}/setting`}><img alt="" src={img_7} width="19" />仓库设置</Link></li>
|
||||
<li className={url.indexOf("/setting") > 0 ? "active" : ""}><Link to={`/projects/${projectsId}/setting`}><img alt="" src={img_7} width="19" />仓库设置</Link></li>
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
|
@ -463,6 +473,12 @@ class Detail extends Component {
|
|||
:
|
||||
<Spin spinning={secondSync} className="spinstyle" tip="正在同步镜像" size="large">
|
||||
<Switch {...this.props}>
|
||||
{/* 工作流 */}
|
||||
<Route path="/projects/:projectsId/ops"
|
||||
render={
|
||||
() => (<DevIndex {...this.props} {...this.state} {...common} />)
|
||||
}
|
||||
></Route>
|
||||
{/* 标签列表 */}
|
||||
<Route path="/projects/:projectsId/orders/tags"
|
||||
render={
|
||||
|
|
|
@ -246,6 +246,9 @@
|
|||
align-items: center;
|
||||
margin-left: 30px
|
||||
}
|
||||
.ant-tooltip {
|
||||
max-width: fit-content!important;
|
||||
}
|
||||
.detail_tag_btn_name{
|
||||
padding:0px 10px;
|
||||
display: flex;
|
||||
|
|
|
@ -267,7 +267,7 @@ class NewMerge extends Component {
|
|||
</div>
|
||||
</div>
|
||||
{show_message ? (
|
||||
<div className="mb50 mt50">
|
||||
<div className="mb20">
|
||||
<Alert description={withHtml(default_message)} type="error" />
|
||||
</div>
|
||||
) : (
|
||||
|
|
|
@ -409,7 +409,7 @@ class merge extends Component {
|
|||
</div>
|
||||
|
||||
{data && data.search_count && data.search_count > 0 ? (
|
||||
<div>
|
||||
<div style={{minHeight:"400px"}}>
|
||||
<Spin spinning={isSpin}>
|
||||
<OrderItem
|
||||
issues={issues}
|
||||
|
|
|
@ -235,7 +235,7 @@ class MergeForm extends Component {
|
|||
return (
|
||||
<div>
|
||||
<Spin spinning={isSpin}>
|
||||
<div className="mt20 mb20">
|
||||
<div className="mb20">
|
||||
<span className="font-16 fwb mr10 ver-middle">
|
||||
{merge_type === "new" ? "新建" : "编辑"}合并请求:
|
||||
</span>
|
||||
|
|
|
@ -109,6 +109,11 @@ form.ant-form{
|
|||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
form{
|
||||
.ant-row.ant-form-item{
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1000px){
|
||||
.main{
|
||||
width: 750px;
|
||||
|
|