caimei-authentic-www/pages/_template/app/form/components/form-club-device.vue

<template>
  <div class="club-device">
    <template v-for="i in 2">
      <div :key="i">
        <el-form :model="formData" :rules="rules">
          <el-form-item :label="`设备名称${i}:`">
            <el-select
              v-model="formData.deviceName"
              filterable
              allow-create
              placeholder="请输入新设备名称或选择已有设备"
            >
              <el-option label="中国" :value="1"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="mobile" label="设备图片:">
            <br />
            <el-input v-show="false"></el-input>
            <SimpleUploadImage :limit="1" />
          </el-form-item>
          <el-form-item label="所属品牌:">
            <el-select v-model="formData.deviceName" placeholder="请选择品牌">
              <el-option label="中国" :value="1"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="mobile" label="购买渠道:">
            <el-input placeholder="请输入购买渠道"></el-input>
          </el-form-item>
          <el-form-item prop="mobile" label="发票:">
            <br />
            <el-input v-show="false"></el-input>
            <SimpleUploadImage :limit="1" />
          </el-form-item>
          <el-form-item prop="mobile" label="设备SN码:">
            <el-input placeholder="请输入设备SN码"></el-input>
          </el-form-item>
          <el-form-item prop="mobile" label="设备参数:">
            <br />
            <div class="device-param-list">
              <span class="add-param">添加参数</span>
              <template v-for="i in 3">
                <div :key="i">
                  <div class="param flex justify-between mb-4">
                    <el-input placeholder="例如：品牌" class="mr-2"></el-input>
                    <el-input placeholder="请输入参数信息"></el-input>
                    <span class="remove el-icon-close"></span>
                  </div>
                </div>
              </template>
            </div>
          </el-form-item>
        </el-form>
        <el-divider></el-divider>
      </div>
    </template>

    <div class="add-device">
      <div class="add-icon"></div>
      添加设备
    </div>
  </div>
</template>

<script>
import SimpleUploadImage from '@/components/SimpleUploadImage'
export default {
  components: {
    SimpleUploadImage,
  },
  data() {
    return {
      formData: {
        deviceName: '',
      },
      rules: {},
    }
  },
}
</script>

<style lang="scss" scoped>
.el-select {
  width: 100%;
}
.device-param-list {
  position: relative;
  .add-param {
    position: absolute;
    cursor: pointer;
    top: -40px;
    right: 0;
    text-decoration: underline;
    font-size: 14px;
    @include themify($themes) {
      color: themed('color');
    }
  }

  .param {
    position: relative;
    .remove {
      position: absolute;
      right: 0;
      top: 0;
      width: 20px;
      height: 20px;
      background: #f94b4b;
      border-radius: 2px;
      cursor: pointer;
      color: #fff;
      font-size: 14px;
      text-align: center;
      line-height: 20px;
    }
  }
}

.add-device {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 162px;
  height: 46px;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 18px;
  margin: 0 auto;
  cursor: pointer;

  @include themify($themes) {
    border: 1px solid themed('color');
    color: themed('color');
  }

  .add-icon {
    width: 20px;
    height: 20px;
    position: relative;
    margin-right: 16px;

    &::before,
    &::after {
      position: absolute;
      width: 3px;
      height: 20px;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      border-radius: 1px;
      content: '';
      display: block;
      @include themify($themes) {
        background: themed('color');
      }
    }
    &::after {
      transform: translate(-50%, -50%) rotateZ(90deg);
    }
  }
}
</style>