列表组件样式调整

src/components/lanju/lj-list-row/index.vue

@@ -1,6 +1,18 @@
 <template>
   <view class="row-list">
-    <view>
+    <view v-if="type === 'input'" class="row-input">
+      <label class="row-label"> {{ label }}:</label>
+      <input :disabled="disabled" class="row-input-item" v-model="localValue" :placeholder="'请填写'+label"  />
+    </view>
+
+    <view v-else-if="type === 'picker'" class="row-input">
+      <label class="row-label"> {{ label }}</label>
+      <view class="row-input-item">
+        <jPicker :disabled="disabled" @bindpicker="bindPicker" sureColor="#ff0000" showKey="label" valKey="value" :val="localValue" :options="pickerOptions" />
+      </view>
+    </view>
+
+    <view v-else>
       <label class="row-label"> {{ label }}</label>
       <label class="row-value"> {{ value }}</label>
     </view>
@@ -8,22 +20,88 @@
 </template>
 
 <script>
+import jPicker from "@/components/J-Picker/jPicker.vue";
+
 export default {
   name: 'ljListRow',
-  props: ['label', 'value'],
+  components: {jPicker},
-  data() {
+  props: {
-    return {};
+    label: {
+      type: String,
+      default: ''
+    },
+    value: {
+      type: [Number, String],
+      default: ''
+    },
+    type: {
+      type: String,
+      default: ''
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    pickerOptions: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
   },
+  data() {
+    return {
+      localValue:this.value
+    };
+  },
+  methods:{
+    bindPicker(e) {
+      this.localValue = e.pickerVal
+    }
+  },
+  watch: {
+    localValue(newVal) {
+      this.$emit('update:value', newVal);
+    },
+    value(newVal) {
+      this.localValue = newVal;
+    }
+  }
 };
 </script>
 
 <style scoped lang="scss">
 .row-list {
+  font-size: 28rpx !important;
   display: flex;
   flex-direction: row;
+  margin-bottom: 7rpx;
 
   .row-label {
-    margin-right: 30rpx;
+    margin-right: 10rpx;
   }
+
+  .row-input{
+    display: flex ;
+    width: 100%;
+    align-items: center;
+
+    .row-label {
+      flex-shrink: 0;
+    }
+
+    .row-input-item{
+      font-size: 28rpx;
+      border: black 1rpx solid;
+      border-radius: 8rpx;
+      flex-grow: 0;
+      flex-shrink: 1;
+      width: 100%;
+      box-sizing: border-box;
+    }
+  }
+
+
+
 }
 </style>

src/static/styles/index.scss

@@ -6,6 +6,19 @@
   min-height: 100%;
 }
 
+//查询条件
+.queryFrom {
+  background-color: #fff;
+  margin-top: 10px;
+  padding: 20rpx;
+  border-radius: 10rpx;
+  box-shadow: 0 0 20rpx 0 rgba(128, 128, 128, 0.2);
+
+  .u-form-item {
+    line-height: 35rpx;
+  }
+}
+
 //表单样式
 .page-form {
   background-color: #fff;
@@ -19,6 +32,30 @@
   }
 }
 
+//页面列表样式
+.page-list {
+  margin-top: 20rpx;
+  box-shadow: 0 0 20rpx 0 rgba(128, 128, 128, 0.2);
+
+  .page-list-item {
+    margin-bottom: 20rpx;
+    background-color: #fff;
+    padding: 20rpx 20rpx 25rpx;
+    border-radius: 10rpx;
+
+  }
+
+  /* 奇数行背景色 */
+  .page-list-item:nth-child(odd) {
+    background-color: #ffffff;
+  }
+
+  /* 偶数行背景色 */
+  .page-list-item:nth-child(even) {
+    background-color: #f5f5f5;
+  }
+}
+
 
 //底部按钮
 .bottom-bar {