开发任务分组收索侧边栏完成

fhKeeper/formulahousekeeper/timesheet/src/views/project/projectInside.vue

@@ -66,11 +66,12 @@
                         <i class="el-icon-d-arrow-left" ></i>
                     </span> -->
 
-                    <!--可删除 -->
-                    <!-- <div class="div2">
-                        <span class="sapn2" @click="ok()"></span>
-                    </div> -->
-                    <!--可删除 -->
+                    <!-- 增加侧边栏的点击效果 -->
+                    <div class="sidebar" @click="retract()">
+                        <div class="etui">
+                            <i class="el-icon-arrow-left" ref="box"></i>
+                        </div>
+                    </div>
                     
                     <el-main style="background:#f7f7f7;padding:0px;">
                         <el-row style="color:#999;margin-top:10px;padding: 0px 10px;">
@@ -495,9 +496,14 @@ toolbar: 'bold italic underline strikethrough | fontsizeselect | forecolor backc
             };
         },
         methods: {
-            // 可刪除
-            ok() {
-                console.log(123)
+            // 侧边栏的点击事件
+            retract() {
+                if (this.$refs.box.className == 'el-icon-arrow-left') {
+                    this.$refs.box.className = 'el-icon-arrow-right'
+                } else {
+                    this.$refs.box.className = 'el-icon-arrow-left'
+                }
+                // this.$refs.box.className === 'el-icon-arrow-left' ? this.$refs.box.className = 'el-icon-arrow-right' || this.$refs.box.className = 'el-icon-arrow-left'
                 this.toggleGroup()
             },
             // 
@@ -1429,25 +1435,35 @@ toolbar: 'bold italic underline strikethrough | fontsizeselect | forecolor backc
     margin:20px 0px;
 }
 
-/* 可删除 */
-.div2 {
-   width: 2px;
-   background: #e5e5e5;
-   position: relative;
+/* 项目阶段侧边栏样式 */
+.sidebar {
+    width: 2px;
+    background: #dddddd;
+    position: relative;
 }
-.div2:hover {
-   background: blue;
+.sidebar:hover {
+    background: #20a0ff;
 }
-.div2:hover .sapn2 {
-   border: 1px solid blue;
-   background: blue;
+.sidebar:hover .etui {
+    background: #20a0ff;
+    border: #20a0ff;
+    color: #fff;
 }
-.sapn2 {
-    width: 14px;
-    height: 30px;
+.etui {
+    width: 24px;
+    height: 40px;
     background: #fff;
-    border: 1px solid #e5e5e5;
+    border: 1px solid #dddddd;
     position: absolute;
-    top: 49%;
+    top: 50%;
+    left: 0%;
+    transform: translate(6%, -50%);
+    color: rgb(192, 191, 191);
+}
+.etui i {
+    display: inline-block;
+    padding-top: 50%;
+    padding-left: 15%;
+    font-weight: bold;
 }
 </style>