Bladeren bron

修改模板管理排序(3045)

zhangxc 5 jaren geleden
bovenliggende
commit
a80fee2bfc

BIN
src/common/images/folderDown.png


BIN
src/common/images/folderDownSelect.png


BIN
src/common/images/folderUp.png


BIN
src/common/images/folderUpSelect.png


+ 5 - 4
src/components/FolderOrder/index.jsx

@@ -13,7 +13,7 @@ class FolderOrder extends React.Component {
         this.state = {
             folderModal:false,
             selectIndex: -1,
-            folderList: null
+            folderList: null,
         }
         this.textInput = React.createRef();
         this.orderFolder = this.orderFolder.bind(this)
@@ -136,7 +136,8 @@ class FolderOrder extends React.Component {
                     <div className={style.floderItem} onClick={(e)=>{tmpItm.templateInfo&&tmpItm.templateInfo.length>0 ?this.floderSlide(e,i) :''}}>
                         <img src={selectIndex == i?floderD:floderR} className={style.floderRD}/>
                         {tmpItm.name}({tmpItm.templateInfoCount})
-                        <img  class={style.orderIcon} src={i===0?diagDown:diagUp} alt="排序" onClick={this.orderFolder.bind(this, i)}/>
+                        <span class={`${i ===0 ? style.arrowDown : style.arrowUp}`} onClick={this.orderFolder.bind(this, i)}></span>
+                        {/* <img  class={style.orderIcon} src={i===0?diagDown:diagUp} alt="排序" onClick={this.orderFolder.bind(this, i)}/> */}
                         {/* <span className={`${style.floderPartAction}`} id="floderActionBtn" onClick={(e)=>{this.floderAction(e,i)}}>...</span> */}
                     </div>
                     {
@@ -144,8 +145,8 @@ class FolderOrder extends React.Component {
                            { tmpItm.templateInfo.map((templateItem, index) => {
                                return (<div class={style.templateItem}>
                                    {templateItem.name}
-                                   {/* <span class={style.arrow}>11</span> */}
-                                   <img class={style.orderIcon} src={index===0?diagDown:diagUp} alt="排序" onClick={this.orderTemplate.bind(this, i, index)}/>
+                                   <span class={`${index===0 ? style.arrowDown : style.arrowUp}`} onClick={this.orderTemplate.bind(this, i, index)}></span>
+                                   {/* <img class={style.orderIcon} src={index===0?diagDown:diagUp} alt="排序" onClick={this.orderTemplate.bind(this, i, index)}/> */}
                                </div>)
                             })}
                         </div>

+ 45 - 7
src/components/FolderOrder/index.less

@@ -111,7 +111,7 @@
         pointer-events: none;
     }
     .orderIcon{
-        width: 20px;
+        // width: 20px;
         position: absolute;
         top: 11px;
         right: 25px;
@@ -122,13 +122,51 @@
         line-height: 45px;
         padding: 0 40px 0 10px;;
     }
-    .templateItem:hover {
+    .arrowDown{
+        position: absolute;
+        top: 13px;
+        right: 25px;
+        display: inline-block;
+        width: 12px;
+        height: 17px;
+        background: url("../../common/images/folderDown.png") no-repeat center ;
+        background-size: 12px 17px;
+    }
+    .arrowUp{
+        position: absolute;
+        top: 13px;
+        right: 25px;
+        display: inline-block;
+        width: 12px;
+        height: 17px;
+        background: url("../../common/images/folderUp.png") no-repeat center ;
+        background-size: 12px 17px;
+    }
+    .floderItem:hover,.templateItem:hover {
         border: 1px solid #3B9ED0;
+        .arrowDown{
+            position: absolute;
+            top: 13px;
+            right: 25px;
+            display: inline-block;
+            width: 12px;
+            height: 17px;
+            background: url("../../common/images/folderDownSelect.png") no-repeat center ;
+            background-size: 12px 17px;
+        }
+        .arrowUp{
+            position: absolute;
+            top: 13px;
+            right: 25px;
+            display: inline-block;
+            width: 12px;
+            height: 17px;
+            background: url("../../common/images/folderUpSelect.png") no-repeat center ;
+            background-size: 12px 17px;
+        }
     }
-    // .arrow{
-    //     display: inline-block;
-    //     width: 15px;
-    //     height: 20px;
-    //     background: url("../../common/images/diagDown.png")no-repeat center;
+    // .floderItem:hover{
+    //     border: 1px solid #3B9ED0;
     // }
+    
 }