Junjie
2024-11-09 a2019ade7b884799e639150021c3cdeef27eea72
components/z-data-list/z-data-list.vue
@@ -2,11 +2,11 @@
   <view >
      <view class="main">
         <view class="main-left" >
            <view class="main-list" v-for="it in dataList" style="width: 100%;">
               <view class="left-key">{{it.key}}</view>
               <view>:</view>
            <view class="main-list" v-for="it in lable" style="width: 100%;">
               <view class="left-key">{{it.label}}</view>
               <view>:</view>
               <view class="left-val">
                  <text :class="it.valText">{{it.value}}</text>
                  <text :class="it.valText">{{fields[it.attribute]}}</text>
               </view>
            </view>
         </view>
@@ -51,10 +51,16 @@
         }
      },
      created() {
         this.dataList = this.list.detl
         // this.dataList = this.list.detl
      },
      props: {
         list: {
         lable: {
            type: Array,
            default() {
               return {}
            }
         },
         fields: {
            type: Object,
            default() {
               return {}
@@ -79,24 +85,24 @@
<style scoped>
   .main {
      position: relative;
      min-height: 70rpx;
      min-height: 35px;
      background-color: #f5f5f5;
      display: flex;
      align-items: stretch;
      margin: 8px 8px 8px 8px;
      border-radius: 16rpx;
      margin: 8px 12px 8px 12px;
      border-radius: 8px;
   }
   .main-left {
      flex: 7;
      display: flex;
      flex-direction: column;
      padding-top: 8rpx;
      padding-bottom: 8rpx;
      padding-top: 4px;
      padding-bottom: 4px;
      color: #606164;
      font-size: 14px;
   }
   .main-right {
      flex: 1;
      width: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
@@ -109,7 +115,7 @@
   .main-list {
      display: flex;
      align-items: center;
      margin: 8rpx 0;
      margin: 2px 0;
   }
   .list-options {
      display: flex;
@@ -124,20 +130,20 @@
      display: flex;
   }
   .left-key {
      width: 130rpx;
      padding-right: 8rpx;
      width: 65px;
      padding-right: 4px;
      text-align: end;
      font-weight: 700;
   }
   .left-val {
      flex: 1;
      padding-left: 8rpx;
      padding-left: 4px;
      color: #606266;
   }
   .val-text {
      background-color: #00aeec;
      padding: 2px 4px;
      border-radius: 8rpx;
      border-radius: 4px;
      color: #FFF;
   }
   .val-num {