#

whycq

2023-10-07 e3a9edfa7a5fe7be708eaf84ea534bbde700d1e0

 components/z-data-list/z-data-list.vue

@@ -3,17 +3,20 @@
      <view class="main">
         <view class="main-left" >
            <view class="main-list" v-for="it in dataList" style="width: 100%;">
               <view style="flex: 1;padding-left: 8rpx;">{{it.key}}</view>
               <view class="left-key">{{it.key}}</view>
               <view>:</view>
               <view style="flex: 3;padding-left: 8rpx;">{{it.value}}</view>
               <view class="left-val">
                  <text class="val-text" style="">{{it.value}}</text>
            </view>
         </view>
         <view class="main-right" @click="goDetail">
         </view>
         <uni-badge class="main-right uni-badge-left-margin" :text="index" absolute="rightTop" size="small" type="primary">
            <view @click="goDetail">
            <view class="list-options">
               <view class="list-number">1</view>
               <uni-icons class="opt-icon" type="right" size="20" color="#707070"></uni-icons>
            </view>
         </view>
         </uni-badge>
      </view>
   </view>
</template>
@@ -55,6 +58,10 @@
            default() {
               return {}
            }
         },
         index: {
            type: Number,
            default: 2
         }
      }
   }
@@ -78,16 +85,20 @@
      flex-direction: column;
      padding-top: 8rpx;
      padding-bottom: 8rpx;
      color: #444;
      font-size: 14px;
   }
   .main-right {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      border-left: 1px solid #ffffff;
   }
   .main-list {
      display: flex;
      align-items: center;
      margin: 8rpx 0;
   }
   .list-options {
      display: flex;
@@ -101,4 +112,21 @@
   .opt-icon {
      display: flex;
   }
   .left-key {
      width: 130rpx;
      padding-right: 8rpx;
      text-align: end;
      font-weight: 700;
   }
   .left-val {
      flex: 1;
      padding-left: 8rpx;
      color: #666;
   }
   .val-text {
      background-color: blue;
      padding: 2px 4px;
      border-radius: 8rpx;
      color: white;
   }
</style>