new

src/forge/Issues/index.scss

@@ -3,10 +3,12 @@
   margin:0px auto;
 }
 // 可公用样式（在issue的页面中）
-// 有向下箭头且点击出现下拉框的按钮样式
+// 可点击(有向下箭头且点击出现下拉框，移入灰色背景加深)的灰色按钮样式
 .dorpdownButton{
-  padding:0px 17px 0px 16px;
+  padding:0px 15px;
   height:32px;
+  color: #333333!important;
+  cursor: pointer;
   line-height: 32px;
   background-color:#fafbfc;
   border:1px solid #d0d0d0;
@@ -16,8 +18,24 @@
     background-color: #f3f4f6;
   }
 }
+// 操作按钮-蓝色
+.operateButton{
+  padding:0px 15px;
+  height:32px;
+  color: #fff!important;
+  cursor: pointer;
+  line-height: 32px;
+  background-color:rgba(70, 106, 255, 1);
+  border:1px solid rgba(70, 106, 255, 1);
+  border-radius: 4px;
+  display: block;
+  &:hover{
+    background-color:#708cff;
+    border-color:#708cff;
+  }
+}
 // 列表页面样式
-.listheader{
+.pageheader{
   display: flex;
   justify-content: space-between;
   padding:30px 0px;
@@ -26,4 +44,59 @@
     display: flex;
     align-items: center;
   }
+}
+.listheader{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height:50px;
+  background-color:#fafcff;
+  border:1px solid;
+  border-color:rgba(42, 97, 255, 0.23);
+  border-radius:4px 4px 0px 0px;
+  padding-left: 18px;
+  ul{
+    display: flex;
+    align-items: center;
+    &:first-child{
+      li{
+        width: 106px;
+        &>span{
+          height:19px;
+          line-height: 19px;
+          color: #666;
+          background-color:rgba(70, 106, 255, 0.09);
+          border-radius:10px;
+          margin-left: 5px;
+          padding:0px 6px;
+          font-size: 13px;
+          display: block;
+        }
+      }
+    }
+    li{
+      color: #898d9d;
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+      &.active{
+        color: #333;
+      }
+    }
+  }
+  .dropboxul{
+    padding-right: 20px;
+    li{
+      min-width: 106px;
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      &>span{
+        width: 80px;
+        display: block;
+        text-align: right;
+      }
+    }
+  }
+  
 }

src/forge/Issues/list.jsx

@@ -1,5 +1,11 @@
 import React from 'react';
-import { Dropdown , Menu , Icon } from 'antd';
+import { Dropdown , Menu , Icon , Input , Checkbox } from 'antd';
+import bj from './Img/biaoji.png';
+import create from './Img/create.png';
+import { Link } from 'react-router-dom';
+import ListDrop from './listDrop';
+const { Search } = Input;
+
 
 function List(props){
 
@@ -12,16 +18,37 @@ function List(props){
       <Menu.Item key={4}>@我的</Menu.Item>
     </Menu>
   )
+
     
   return(
     <div>
-      <div className="listheader">
+      <div className="pageheader">
         <div>
           <Dropdown overlay={menu} trigger={['click']} placement="bottomLeft" arrow={{pointAtCenter: true}}>
             <span className="dorpdownButton">与我相关<Icon type="caret-down" className="ml5 color-grey-6" /></span>
           </Dropdown>
+          <Search
+            placeholder="输入关键字搜索疑修"
+            onSearch={value => console.log(value)}
+            style={{ width: 354 , height : 32 , marginLeft: 20 }}
+          />
+          <a className="color-blue ml25" style={{ display: "flex" , alignItems: "center"}}><i className="iconfont icon-roundclose font-16 mr5"></i>清除筛选条件</a>
+        </div>
+        <div>
+          <Link to="" className="dorpdownButton"><img src={bj} alt="" className="mr5" />标记管理</Link>
+          <Link to="" className="operateButton ml20"><img src={create} alt="" className="mr5" />创建疑修</Link>
+        </div>
+      </div>
+      <div className="lists">
+        <div className="listheader">
+          <ul>
+            <Checkbox style={{marginRight: "16px"}}></Checkbox>
+            <li className="active">全部<span>111</span></li>
+            <li>开启中<span>111</span></li>
+            <li>已关闭<span>111</span></li>
+          </ul>
+          <ListDrop />
         </div>
-        <div></div>
       </div>
     </div>
   )

src/forge/Issues/listDrop.jsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { Dropdown , Icon , Menu } from 'antd';
+
+function ListDrop(){
+  const dropmenu=[
+    {
+      name:"发布人",
+      menu:["caishi","he","xiao","jiang"]
+    },
+    {
+      name:"标记",
+      menu:["caishi","he","xiao","jiang"]
+    },
+    {
+      name:"里程碑",
+      menu:["caishi","he","xiao","jiang"]
+    },
+    {
+      name:"负责人",
+      menu:["caishi","he","xiao","jiang"]
+    },
+    {
+      name:"状态",
+      menu:["caishi","he","xiao","jiang"]
+    },
+    {
+      name:"排序",
+      menu:["caishi","he","xiao","jiang"]
+    }
+  ]
+
+  function menu(menu){
+    if(menu && menu.length>0){
+      return <Menu>
+        {
+          menu.map((i,j)=>{
+            return <Menu.Item key={j}>{i}</Menu.Item>
+          })
+        }
+        </Menu>
+      }
+    else{
+      return "";
+    }
+  }
+  return(
+    dropmenu && dropmenu.length >0 ?
+      <ul className="dropboxul">
+      {
+        dropmenu.map((item,i)=>{
+          return(
+            <Dropdown overlay={menu(item.menu)} trigger={['click']} placement="bottomRight" arrow={{pointAtCenter: true}}>
+              <li><span className="task-hide">{item.name}</span><Icon type="caret-down" className="ml5 color-grey-6" /></li>
+            </Dropdown>
+          )
+        })
+      }
+      </ul>
+    :<div></div>
+  )
+}
+export default ListDrop;