jiliangxiaochengxu/pages/assay/assayForm.vue

<!-- @format -->

<template>
  <view class="container">
    <view style="margin: 15rpx 0">
      <view class="contentItems">
        <u-form labelPosition="left" labelWidth="160rpx">
          <view class="content">
            <u-form-item label="选择器具：">
              <u-input
                border="none"
                placeholder="请输入申请单位"
                value="血氧仪器"
              ></u-input>
            </u-form-item>
          </view>
          <view class="content">
            <u-form-item label="申请单位：">
              <u-input border="none" placeholder="请输入申请单位"></u-input>
            </u-form-item>
          </view>
          <view class="content">
            <u-form-item label="申请日期：">
              <u-input border="none" placeholder="请输入申请日期"></u-input>
            </u-form-item>
          </view>
          <view class="content">
            <u-form-item label="申请人：">
              <u-input border="none" placeholder="请输入申请人"></u-input>
            </u-form-item>
          </view>
          <view class="content">
            <u-form-item label="联系电话：">
              <u-input border="none" placeholder="请输入联系电话"> </u-input>
            </u-form-item>
          </view>
        </u-form>
        <u-checkbox-group
          style="margin-top: 20rpx"
          v-model="checkboxValue1"
          placement="column"
          @change="checkboxChange"
        >
          <u-checkbox
            style="color: red"
            v-for="item in checkBoxList"
            :key="item"
            :label="item.name"
            :name="item.label"
          >
          </u-checkbox>
        </u-checkbox-group>
      </view>
    </view>
    <view style="width: 95%; margin: 20rpx auto 0">
      <u-button type="primary"> 提交 </u-button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      checked: null,
      checkBoxList: [
        {
          name: "我单位承诺，本次提交备案的计量器具的相关信息均真实准确，经过自我严格审核，均符合《市场监管总局关于调整实施强制管理的计量器具目录的公告》（国家市场监督管理总局公告2020年第42号)中《实施强制管理的计量器具目录》的规定。",
          label: false,
        },
      ],
      checkboxValue1: [],
    };
  },
  methods: {
    checkboxChange(value) {
      console.log("Checkbox changed:", value);
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .u-checkbox {
  display: flex;
  flex-direction: row;
  /* overflow: hidden; */
  flex-direction: row;
  align-items: flex-start;
}

::v-deep uni-text[data-v-c4a74aee] span {
  font-size: 26rpx;
  color: red;
  line-height: 40rpx;
}

.createFixed {
  background: #2979ff;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 90rpx;
  height: 90rpx;
  border-radius: 50%;
  position: fixed;
  right: 30rpx;
  bottom: 200rpx;
}

.createNew {
  font-size: 30rpx;
  margin: 20rpx 0 20rpx 20rpx;
  color: #3c9ff3;
}

.container {
  height: 100vh;
  background: rgb(243, 244, 249);

  .contentItems {
    width: 93%;
    border-radius: 6px;
    background: #fff;
    margin: 0rpx auto 20rpx;
    padding: 20rpx 30rpx 20rpx;

    .content {
      border-bottom: 1px solid rgb(242, 242, 242);
      display: flex;
      justify-content: space-between;
    }

    // .content:last-child {
    //   border-bottom: none;
    // }

    .title {
      font-size: 26rpx;
      color: black;
      letter-spacing: 3rpx;
    }

    .message {
      font-size: 26rpx;
      color: rgb(146, 146, 146);
    }
  }
}
</style>