flat: 暂存

components/expected-station/expected-station.vue

@@ -14,12 +14,18 @@
                     @click="changeStationLog(item)"
                 >
                     {{ item.label }}
-                    <view class="positionNum" v-show="item.checkednumber">
+                    <!-- <view class="positionNum" v-show="item.checkednumber">
                         {{ item.checkednumber }}
-                    </view>
+                    </view> -->
                 </view>
             </scroll-view>
-            <scroll-view :show-scrollbar="false" :scroll-y="true" class="sex-content-right">
+            <scroll-view
+                :show-scrollbar="false"
+                :scroll-top="scrollTop"
+                @scroll="scrollTopBack"
+                :scroll-y="true"
+                class="sex-content-right"
+            >
                 <view v-for="item in rightValue" :key="item.id">
                     <view class="secondary-title">{{ item.label }}</view>
                     <view class="grid-sex">
@@ -50,6 +56,7 @@ export default {
             rightValue: [],
             stationCateLog: 0,
             copyTree: [],
+            scrollTop: 0,
         };
     },
     props: {
@@ -86,9 +93,14 @@ export default {
         changeStationLog(item) {
             this.leftValue = item;
             this.rightValue = item.children;
+            this.scrollTop = 0;
+        },
+        scrollTopBack(e) {
+            this.scrollTop = e.detail.scrollTop;
         },
         addItem(item) {
             let titiles = [];
+            let labels = [];
             let count = 0;
 
             // 先统计已选中的职位数量
@@ -121,13 +133,18 @@ export default {
                         // 统计被选中的第三层节点
                         if (thirdLayer.checked) {
                             titiles.push(`${thirdLayer.id}`);
+                            labels.push(`${thirdLayer.label}`);
                             firstLayer.checkednumber++; // 累加计数器
                         }
                     }
                 }
             }
             titiles = titiles.join(',');
-            this.$emit('onChange', titiles);
+            labels = labels.join(',');
+            this.$emit('onChange', {
+                ids: titiles,
+                labels,
+            });
         },
     },
 };
@@ -135,7 +152,8 @@ export default {
 
 <style lang="stylus" scoped>
 .secondary-title{
-    font-weight: bold;
+    color: #333333
+    font-size: 28rpx
     padding: 40rpx 0 10rpx 30rpx;
 }
 .expected-station{
@@ -143,6 +161,7 @@ export default {
     overflow: hidden;
     display: flex;
     flex-direction: column;
+    height: 100%
 }
 .sex-search
     width: calc(100% - 28rpx - 28rpx);
@@ -160,15 +179,16 @@ export default {
         padding: 10rpx 0 10rpx 58rpx;
 .sex-content
     background: #FFFFFF;
-    border-radius: 20rpx;
+    // border-radius: 20rpx;
     width: 100%;
     margin-top: 20rpx;
     display: flex;
     border-bottom: 2px solid #D9D9D9;
     overflow: hidden;
-    height: 100%
+    height: 100%;
     .sex-content-left
-        width: 250rpx;
+        width: 198rpx;
+        padding: 20rpx 0 0 0;
         .left-list-btn
             padding: 0 40rpx 0 24rpx;
             display: grid;
@@ -178,49 +198,57 @@ export default {
             color: #606060;
             font-size: 28rpx;
             position: relative
-        .positionNum
-            position: absolute
-            right: 0
-            top: 50%;
-            transform: translate(0, -50%)
-            color: #FFFFFF
-            background: #4778EC
-            border-radius: 50%
-            width: 36rpx;
-            height: 36rpx;
+            margin-top: 60rpx
+        .left-list-btn:first-child
+            margin-top: 0
+        // .positionNum
+        //     position: absolute
+        //     right: 0
+        //     top: 50%;
+        //     transform: translate(0, -50%)
+        //     color: #FFFFFF
+        //     background: #4778EC
+        //     border-radius: 50%
+        //     width: 36rpx;
+        //     height: 36rpx;
         .left-list-btned
             color: #4778EC;
             position: relative;
-        .left-list-btned::after
-            position: absolute;
-            left: 20rpx;
-            content: '';
-            width: 7rpx;
-            height: 38rpx;
-            background: #4778EC;
-            border-radius: 0rpx 0rpx 0rpx 0rpx;
+        // .left-list-btned::after
+        //     position: absolute;
+        //     left: 20rpx;
+        //     content: '';
+        //     width: 7rpx;
+        //     height: 38rpx;
+        //     background: #4778EC;
+        //     border-radius: 0rpx 0rpx 0rpx 0rpx;
 
     .sex-content-right
-        border-left: 2px solid #D9D9D9;
+        // border-left: 2px solid #D9D9D9;
+        background: #F6F6F6;
         flex: 1;
         .grid-sex
             display: grid;
             grid-template-columns: 50% 50%;
             place-items: center;
-            padding: 0 0 40rpx 0;
+            padding: 0 20rpx 40rpx 20rpx;
             .sex-right-btn
-                width: 211rpx;
-                height: 84rpx;
-                font-size: 32rpx;
+                width: 228rpx;
+                height: 80rpx;
+                font-size: 28rpx;
                 line-height: 41rpx;
                 text-align: center;
                 display: grid;
                 place-items: center;
-                background: #D9D9D9;
-                border-radius: 20rpx;
-                margin-top:30rpx;
+                border-radius: 12rpx;
+                margin-top: 30rpx;
+                background: #E8EAEE;
                 color: #606060;
             .sex-right-btned
-                color: #FFFFFF;
-                background: #4778EC;
+                font-weight: 500
+                width: 224rpx;
+                height: 76rpx;
+                background: rgba(37,107,250,0.06);
+                border: 2rpx solid #256BFA;
+                color: #256BFA
 </style>