bigdata_WX/pages/cb/shuifeizs/components/rotationCard.vue

<template>
  <view class="rotation-card" @click="actionChecked">
    <view class="rotation-card__header">
      {{ item.sfDisplayname || item.sfName }}
      <u-icon
        name="checkmark-circle-fill"
        :color="item.isChecked ? '#14A478' : '#C9CDD4'"
        size="30rpx"
      ></u-icon>
    </view>
    <view class="rotation-card__content" v-if="tktype === 2">
      <view class="rotation-card__content-left">配方</view>
      <view class="rotation-card__content-right">
        <u-input
          maxlength="36"
          v-model="item.pfCode"
          placeholder="请输入配方"
          :border="false"
          input-align="right"
        />
      </view>
    </view>
    <view class="rotation-card__footer">
      <view class="rotation-card__footer-left">时长(分钟)</view>
      <view class="rotation-card__footer-right">
        <u-input
          type="number"
          maxlength="6"
          :max="999999"
          :value="item.ti"
          @input="changeTi"
          v-model="item.ti"
          placeholder="请输入时长"
          :border="false"
          input-align="right"
        /> </view
    ></view>
  </view>
</template>
<script>
export default {
  props: {
    item: {
      type: Object,
      default: () => {},
    },
    tktype: {
      type: Number,
      default: 1,
    },
  },
  data() {
    return {
      value: '',
      action: true,
    };
  },
  methods: {
    actionChecked() {
      this.$emit('actionChecked', this.item);
    },
    changeTi(value) {
      this.$emit('changeTi', this.item);
    },
  },
};
</script>
<style scoped lang="scss">
.rotation-card {
  border-radius: 16rpx;
  background-color: #fff;
  margin-bottom: 22rpx;
  &__header {
    height: 64rpx;
    line-height: 64rpx;
    border-bottom: 2rpx solid #e4e7ed;
    color: #333333;
    font-family: 'Source Han Sans CN VF';
    font-size: 28rpx;
    font-weight: 500;
    padding-left: 32rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 32rpx;
  }
  &__content {
    display: flex;
    justify-content: space-between;
    padding: 20rpx 30rpx;
    height: 40rpx;
  }
  &__content-left {
    width: 250rpx;
    font-size: 28rpx;
  }
  &__content-right {
  }
  &__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 30rpx;
    height: 40rpx;
  }
  &__footer-left {
    width: 250rpx;
    font-size: 28rpx;
  }
  &__footer-right {
  }
}
</style>