<template>
  <div class="part-building">
    <div style="height:104rem;"></div>
    <div class="screen1">
      <img
        :src="screen1.bannerUrl"
        alt=""
        style="width:100%;"
      />
    </div>
    <div class="screen11">
      <div class="wrapper1680">
        <div class="list-wrapper">
          <div
            v-for="(item, index) in screen1.Partner"
            :key="'itemkey' + index"
            class="list-item"
          >
            <transition name="scale">
              <div
                class="list-img"
                :style="`--tde:${0.6 + index * 0.05}s;`"
              >
                <img
                  :src="item.imageurl"
                  alt=""
                >
              </div>
            </transition>
          </div>
        </div>
      </div>
    </div>
    <div class="screen2">
      <div class="wrapper1680">
        <div class="formContent">
          <div class="formBarContent">
            <div class="formBar"></div>
            <div class="formTitle">
              成为合作伙伴
            </div>
          </div>
          <el-form
            ref="Partnerform"
            :model="form1"
            :rules="form1Rules"
            label-width="130rem"
            style="margin-top: 40rem"
          >
            <div class="formBarContent">
              <el-row>
                <el-col :span="6">
                  <el-form-item label="公司名称(个人)" prop="companyName">
                    <el-input v-model="form1.companyName" />
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="地址" prop="address">
                    <el-input v-model="form1.address" />
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="联系电话" prop="phoneNumber">
                    <el-input v-model="form1.phoneNumber" />
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="电子邮箱" prop="email">
                    <el-input v-model="form1.email" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-form-item label="擅长方向">
                <el-checkbox-group v-model="form1.fieldType">
                  <el-checkbox
                    v-for="(item, index) in excelInList"
                    :key="'excelIn' + index"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-checkbox-group>
              </el-form-item>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="优势概念">
                    <el-input
                      v-model="form1.advantageConcept"
                      :autosize="{ minRows: 6, maxRows: 6 }"
                      type="textarea"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="合作意向概述">
                    <el-input
                      v-model="form1.cooperationIntention"
                      :autosize="{ minRows: 6, maxRows: 6 }"
                      type="textarea"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-form-item label="附件">
                <div class="upload-file">
                  <el-upload
                    multiple
                    :action="uploadFileUrl"
                    :before-upload="handleBeforeUpload"
                    :file-list="fileList"
                    :limit="limit"
                    :on-error="handleUploadError"
                    :on-exceed="handleExceed"
                    :on-success="handleUploadSuccess"
                    :show-file-list="false"
                    class="upload-file-uploader"
                    ref="fileUpload"
                  >
                    <!-- 上传按钮 -->
                    <el-button size="small" type="primary">上传</el-button>
                    <!-- 上传提示 -->
                    <div class="el-upload__tip" slot="tip" v-if="isShowTip">
                      请上传
                      <template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b> </template>
                      <template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b> </template>
                      的文件
                    </div>
                  </el-upload>

                  <!-- 文件列表 -->
                  <transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul">
                    <li :key="file.url" class="el-upload-list__item ele-upload-list__item-content" v-for="(file, index) in fileList">
                      <el-link :href="`${file.url}`" :underline="false" target="_blank">
                        <span class="el-icon-document"> {{ getFileName(file.name) }} </span>
                      </el-link>
                      <div class="ele-upload-list__item-content-action">
                        <el-link :underline="false" @click="handleDelete(index)" type="danger">删除</el-link>
                      </div>
                    </li>
                  </transition-group>
                </div>
              </el-form-item>
            </div>
            <el-form-item style="text-align: center;border-top:1rem solid #B0B0B0;padding: 20rem 0rem">
              <el-button class="subBtn" @click="handleAddPartner">
                提交
              </el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <div class="screen3">
      <div class="wrapper1680">
        <div class="formContent">
          <div class="formBarContent">
            <div class="formBar"></div>
            <div class="formTitle">
              成为供应商
            </div>
          </div>
          <el-form
            :model="form"
            :rules="formRules"
            ref="Supperform"
            label-width="140rem"
            style="margin-top: 40rem"
          >
            <div class="formBarContent">
              <el-row>
                <el-col :span="6">
                  <el-form-item label="公司名称" prop="companyName">
                    <el-input v-model="form.companyName" />
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="公司地址" prop="address">
                    <el-input v-model="form.address" />
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="统一社会信用代码" prop="identifierCode">
                    <el-input v-model="form.identifierCode" />
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="电子邮箱" prop="email">
                    <el-input v-model="form.email" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="企业性质">
                    <el-checkbox-group :max="1" v-model="form.businessNature">
                      <el-checkbox
                        v-for="(item, index) in enterprisePropertyList"
                        :key="'enterpriseProperty' + index"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-checkbox-group>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="行业领域">
                    <el-input v-model="form.fieldIndustry" />
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="主要产品">
                    <el-input v-model="form.mainProducts" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="6">
                  <el-form-item label="联系电话" prop="phoneNumber">
                    <el-input v-model="form.phoneNumber" />
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="网址" >
                    <el-input v-model="form.webAddress" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="设计开发能力">
                    <el-checkbox-group v-model="form.developmentCapability">
                      <el-checkbox
                        v-for="(item, index) in designCapabilityList"
                        :key="'designCapability' + index"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-checkbox-group>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="遵守标准">
                    <el-checkbox-group v-model="form.complianceStandards">
                      <el-checkbox
                        v-for="(item, index) in standardsList"
                        :key="'standards' + index"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-checkbox-group>
                  </el-form-item>
                </el-col>
                <el-col :span="7">
                  <el-form-item label="产品已获得的认证">
                    <el-checkbox-group :max="1" v-model="form.productCertification">
                      <el-checkbox
                        v-for="(item, index) in authenticationList"
                        :key="'authentication' + index"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-checkbox-group>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="" label-width="0rem">
                    <el-input v-show="form.productCertification[0] == '其他说明'" v-model="form.otherNotes" placeholder="请输入其他说明" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-form-item label="质量体系情况">
                <el-checkbox-group v-model="form.qualitySystem">
                  <el-checkbox
                    v-for="(item, index) in qualitySystemList"
                    :key="'qualitySystem' + index"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-checkbox-group>
              </el-form-item>
              <el-form-item label="是否具备相关资质">
                <el-checkbox-group v-model="form.relevantQualifications">
                  <el-checkbox
                    v-for="(item, index) in relevantQualificationList"
                    :key="'relevantQualification' + index"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-checkbox-group>
              </el-form-item>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="优势概念">
                    <el-input
                      v-model="form.advantageConcept"
                      :autosize="{ minRows: 6, maxRows: 6 }"
                      type="textarea"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="合作意向概述">
                    <el-input
                      v-model="form.cooperationIntention"
                      :autosize="{ minRows: 6, maxRows: 6 }"
                      type="textarea"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-form-item label="附件">
                <div class="upload-file">
                  <el-upload
                    multiple
                    :action="uploadFileUrl"
                    :before-upload="handleBeforeUpload1"
                    :file-list="fileList1"
                    :limit="limit"
                    :on-error="handleUploadError1"
                    :on-exceed="handleExceed1"
                    :on-success="handleUploadSuccess1"
                    :show-file-list="false"
                    class="upload-file-uploader"
                    ref="fileUpload1"
                  >
                    <!-- 上传按钮 -->
                    <el-button size="small" type="primary">上传</el-button>
                    <!-- 上传提示 -->
                    <div class="el-upload__tip" slot="tip" v-if="isShowTip">
                      请上传
                      <template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b> </template>
                      <template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b> </template>
                      的文件
                    </div>
                  </el-upload>

                  <!-- 文件列表 -->
                  <transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul">
                    <li :key="file.url" class="el-upload-list__item ele-upload-list__item-content" v-for="(file, index) in fileList1">
                      <el-link :href="`${file.url}`" :underline="false" target="_blank">
                        <span class="el-icon-document"> {{ getFileName(file.name) }} </span>
                      </el-link>
                      <div class="ele-upload-list__item-content-action">
                        <el-link :underline="false" @click="handleDelete1(index)" type="danger">删除</el-link>
                      </div>
                    </li>
                  </transition-group>
                </div>
              </el-form-item>
            </div>
            <el-form-item style="text-align: center;border-top:1rem solid #B0B0B0;padding: 20rem 0rem">
              <el-button class="subBtn" @click="handleAddSupper">
                提交
              </el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <FootBar theme="dark"></FootBar>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import FootBar from '@/components/FootBar.vue';

export default {
  components: {
    FootBar,
  },
  data () {
    return {
      screen1: {
        bannerUrl: '',
        Partner: [],
      },
      fileList1: [],
      fileList2: [],
      excelInList: [
        { label: '项目合作', value: '项目合作' },
        { label: '人脉资源', value: '人脉资源' },
        { label: '创新技术', value: '创新技术' },
        { label: '法律咨询', value: '法律咨询' },
        { label: '投融资', value: '投融资' },
        { label: '行业经验', value: '行业经验' },
        { label: '产品', value: '产品' },
        { label: '资质优势', value: '资质优势' },
      ],
      enterprisePropertyList: [
        { label: '国营', value: '国营' },
        { label: '私营', value: '私营' },
        { label: '合资', value: '合资' },
        { label: '其他', value: '其他' },
      ],
      designCapabilityList: [
        { label: '自主设计开发', value: '自主设计开发' },
        { label: '来料加工', value: '来料加工' },
        { label: '贸易代理', value: '贸易代理' },
      ],
      standardsList: [
        { label: '国际标准', value: '国际标准' },
        { label: '国家标准', value: '国家标准' },
        { label: '行业标准', value: '行业标准' },
        { label: '企业标准', value: '企业标准' },
      ],
      authenticationList: [
        { label: '3C', value: '3C' },
        { label: 'ROHS', value: 'ROHS' },
        { label: '其他说明', value: '其他说明' },
      ],
      qualitySystemList: [
        { label: 'IS09001', value: 'IS09001' },
        { label: 'ISO14001', value: 'ISO14001' },
        { label: 'ISO27001', value: 'ISO27001' },
        { label: 'QS9000', value: 'QS9000' },
        { label: 'TS16849', value: 'TS16849' },
      ],
      relevantQualificationList: [
        { label: '专利', value: '专利' },
        { label: '软件著作权', value: '软件著作权' },
        { label: '食品生产许可证', value: '食品生产许可证' },
        { label: '食品经营许可证', value: '食品经营许可证' },
        { label: '其他证书', value: '其他证书' },
      ],
      form1Rules: {
        companyName: [
          { required: true, message: '请输入公司名称(个人)', trigger: 'blur' },
        ],
        address: [
          { required: true, message: '请输入地址', trigger: 'blur' },
        ],
        phoneNumber: [
          { required: true, message: '请输入联系电话', trigger: 'blur' },
          {
            validator: function (rule, value, callback) {
              const reg = /^1[3456789]\d{9}$/;
              if (!reg.test(value)) {
                callback(new Error('请输入手机号'));
              } else {
                callback();
              }
            },
            trigger: 'blur',
          },
        ],
        email: [
          { required: true, message: '请输入电子邮箱', trigger: 'blur' },
          {
            validator: function (rule, value, callback) {
              const reg3 = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
              if (!reg3.test(value)) {
                callback(new Error('请输入邮箱'));
              } else {
                callback();
              }
            },
            trigger: 'blur',
          },
        ],
      },
      form1: {
        propertiesType: 1,
        companyName: '',
        address: '',
        phoneNumber: '',
        email: '',
        fieldType: [],
        advantageConcept: '',
        cooperationIntention: '',
        imageurl: ''
      },
      formRules: {
        companyName: [
          { required: true, message: '请输入公司名称', trigger: 'blur' },
        ],
        address: [
          { required: true, message: '请输入地址', trigger: 'blur' },
        ],
        identifierCode: [
          { required: true, message: '请输入统一社会信用代码', trigger: 'blur' },
          {
            validator: function (rule, value, callback) {
              const reg = /^[0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}$/;
              if (!reg.test(value)) {
                callback(new Error('请输入统一社会信用代码'));
              } else {
                callback();
              }
            },
            trigger: 'blur',
          },
        ],
        phoneNumber: [
          { required: true, message: '请输入联系电话', trigger: 'blur' },
          {
            validator: function (rule, value, callback) {
              const reg = /^1[3456789]\d{9}$/;
              if (!reg.test(value)) {
                callback(new Error('请输入手机号'));
              } else {
                callback();
              }
            },
            trigger: 'blur',
          },
        ],
        email: [
          { required: true, message: '请输入电子邮箱', trigger: 'blur' },
          {
            validator: function (rule, value, callback) {
              const reg3 = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
              if (!reg3.test(value)) {
                callback(new Error('请输入邮箱'));
              } else {
                callback();
              }
            },
            trigger: 'blur',
          },
        ]
      },
      form: {
        propertiesType: 2,
        companyName: '',
        address: '',
        identifierCode: '',
        email: '',
        businessNature: [],
        fieldIndustry: '',
        mainProducts: '',
        phoneNumber: '',
        webAddress: '',
        developmentCapability: [],
        complianceStandards: [],
        productCertification: [],
        otherNotes: '',
        qualitySystem: [],
        relevantQualifications: [],
        advantageConcept: '',
        cooperationIntention: '',
        imageurl: ''
      },
      // 数量限制
      limit: 10,
      // 大小限制(MB)
      fileSize: 10,
      // 文件类型, 例如['png', 'jpg', 'jpeg']
      fileType:  ["doc", "docx", "xls","xlsx", "ppt","pptx", "txt", "pdf"],
      // 是否显示提示
      isShowTip: true,
      number: 0,
      uploadList: [],
      uploadList1: [],
      // 上传文件服务器地址
      uploadFileUrl: process.env.VUE_APP_API_TARGET_URL + "system/oss/addFilesUpload", 
      fileList: [],
      fileList1: [],
      loadingModal: undefined,
    };
  },
  computed: {
    ...mapState({
      scrollTop: state => state.scroll.scrollTop,
      webScale: state => state.web.scale,
    }),
  },
  created () {
    this.$event.$emit('nav-theme', 'light');
    this.getScreen1Banner();
    this.getScreen1Partner();
  },
  methods: {
    async getScreen1Banner () {
      try {
        const res = await this.$request.get(
          '/official/index/list',
          { params: { pageNum: 1, pageSize: 1, captionName: '投资与合作/合作伙伴/banner' } },
        );
        this.screen1.bannerUrl = res.rows[0].imageurl;
      } catch (error) {}
    },
    async getScreen1Partner () {
      try {
        const res = await this.$request.get(
          '/official/index/list',
          { params: { pageNum: 1, pageSize: 10, captionName: '投资与合作/合作伙伴/合伙人' } },
        );
        this.screen1.Partner = res.rows.sort((a, b) => a.orders - b.orders);
      } catch (error) {}
    },
    handleAddPartner() {
      try {
        this.$refs["Partnerform"].validate(valid => {
          if (valid) {
            this.form1.fieldType = this.form1.fieldType.toString();
            this.form1.imageurl = this.fileList.map(item => item.url).toString();
            this.$request.post(
              '/official/companymessage/add',
              this.form1,
            ).then(res => {
              if(res.code == 200) {
                this.form1= {
                  propertiesType: 1,
                  companyName: '',
                  address: '',
                  phoneNumber: '',
                  email: '',
                  fieldType: [],
                  advantageConcept: '',
                  cooperationIntention: '',
                  imageurl: ''
                }
                this.fileList = []
              }
            });
          }
        });
      } catch (error) {}
    },
    handleAddSupper() {
      try {
        this.$refs["Supperform"].validate(valid => {
          if (valid) {
            this.form.businessNature = this.form.businessNature.toString();
            this.form.developmentCapability = this.form.developmentCapability.toString();
            this.form.complianceStandards = this.form.complianceStandards.toString();
            this.form.productCertification = this.form.productCertification.toString();
            this.form.qualitySystem = this.form.qualitySystem.toString();
            this.form.relevantQualifications = this.form.relevantQualifications.toString();
            this.form.imageurl = this.fileList1.map(item => item.url).toString()
            this.$request.post(
              '/official/companymessage/add',
              this.form,
            ).then(res => {
              if(res.code == 200) {
                this.form= {
                  propertiesType: 2,
                  companyName: '',
                  address: '',
                  identifierCode: '',
                  email: '',
                  businessNature: [],
                  fieldIndustry: '',
                  mainProducts: '',
                  phoneNumber: '',
                  webAddress: '',
                  developmentCapability: [],
                  complianceStandards: [],
                  productCertification: [],
                  otherNotes: '',
                  qualitySystem: [],
                  relevantQualifications: [],
                  advantageConcept: '',
                  cooperationIntention: '',
                  imageurl: ''
                }
                this.fileList1 = []
              }
            });
          }
        });
      } catch (error) {}
    },
     // 上传前校检格式和大小
    handleBeforeUpload(file) {
      // 校检文件类型
      if (this.fileType) {
        const fileName = file.name.split('.');
        const fileExt = fileName[fileName.length - 1];
        const isTypeOk = this.fileType.indexOf(fileExt) >= 0;
        if (!isTypeOk) {
          this.$message.error(`文件格式不正确, 请上传${this.fileType.join("/")}格式文件!`);
          return false;
        }
      }
      // 校检文件大小
      if (this.fileSize) {
        const isLt = file.size / 1024 / 1024 < this.fileSize;
        if (!isLt) {
          this.$message.error(`上传文件大小不能超过 ${this.fileSize} MB!`);
          return false;
        }
      }
      this.loadingModal = this.$loading({
        lock: true,
        text: '正在上传文件，请稍候...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      this.number++;
      return true;
    },
    // 文件个数超出
    handleExceed() {
      this.$message.error(`上传文件数量不能超过 ${this.limit} 个!`);
    },
    // 上传失败
    handleUploadError(err) {
      this.$message.error(`上传文件失败，请重试`, err);
      this.loadingModal.close();
    },
    // 上传成功回调
    handleUploadSuccess(res, file) {
      if (res.code === 200) {
        this.uploadList.push({ name: res.data.fileName, url: res.data.url, ossId: res.data.ossId });
        this.uploadedSuccessfully();
      } else {
        this.number--;
        this.loadingModal.close();
        this.$message.error(res.msg);
        this.$refs.fileUpload.handleRemove(file);
        this.uploadedSuccessfully();
      }
    },
    // 删除文件
    handleDelete(index) {
      // let ossId = this.fileList[index].ossId;
      // delOss(ossId);
      this.fileList.splice(index, 1);
    },
    // 上传结束处理
    uploadedSuccessfully() {
      if (this.number > 0 && this.uploadList.length === this.number) {
        this.fileList = this.fileList.concat(this.uploadList);
        this.uploadList = [];
        this.number = 0;
        this.loadingModal.close();
      }
    },
    // 获取文件名称
    getFileName(name) {
      // 如果是url那么取最后的名字 如果不是直接返回
      if (name.lastIndexOf("/") > -1) {
        return name.slice(name.lastIndexOf("/") + 1);
      } else {
        return name;
      }
    },
    // 上传前校检格式和大小
    handleBeforeUpload1(file) {
      // 校检文件类型
      if (this.fileType) {
        const fileName = file.name.split('.');
        const fileExt = fileName[fileName.length - 1];
        const isTypeOk = this.fileType.indexOf(fileExt) >= 0;
        if (!isTypeOk) {
          this.$message.error(`文件格式不正确, 请上传${this.fileType.join("/")}格式文件!`);
          return false;
        }
      }
      // 校检文件大小
      if (this.fileSize) {
        const isLt = file.size / 1024 / 1024 < this.fileSize;
        if (!isLt) {
          this.$message.error(`上传文件大小不能超过 ${this.fileSize} MB!`);
          return false;
        }
      }
      this.loadingModal = this.$loading({
        lock: true,
        text: '正在上传文件，请稍候...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      this.number++;
      return true;
    },
    // 文件个数超出
    handleExceed1() {
      this.$message.error(`上传文件数量不能超过 ${this.limit} 个!`);
    },
    // 上传失败
    handleUploadError1(err) {
      this.$message.error(`上传文件失败，请重试`, err);
      this.loadingModal.close();
    },
    // 上传成功回调
    handleUploadSuccess1(res, file) {
      if (res.code === 200) {
        this.uploadList1.push({ name: res.data.fileName, url: res.data.url, ossId: res.data.ossId });
        this.uploadedSuccessfully1();
      } else {
        this.number--;
        this.loadingModal.close();
        this.$message.error(res.msg);
        this.$refs.fileUpload1.handleRemove(file);
        this.uploadedSuccessfully1();
      }
    },
    // 删除文件
    handleDelete1(index) {
      this.fileList1.splice(index, 1);
    },
    // 上传结束处理
    uploadedSuccessfully1() {
      if (this.number > 0 && this.uploadList1.length === this.number) {
        this.fileList1 = this.fileList1.concat(this.uploadList1);
        this.uploadList1 = [];
        this.number = 0;
        this.loadingModal.close();
      }
    },
  },
};
</script>

<style scoped>
.part-building {
  width: 100%;
}
.screen11 {
  width: 100%;
  position: absolute;
  top: 0;
}
.screen11 .wrapper1680 {
  height: 100%;
  position: relative;
}
.screen11 .list-wrapper {
  position: absolute;
  top: 240rem;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 0px 140rem;
  box-sizing: border-box;
}
.screen11 .list-item {
  border-radius: 20rem;
  background: #ffffff;
  margin: 0 20rem;
  width: 240rem;
  height: 160rem;
  margin-bottom: 40rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.screen11 .list-item:hover {
  transform: scale(1.1, 1.1);
}
.screen11 .list-img {
  width: 160rem;
  height: 760rem;
  display: contents;
}
.screen2 {
  padding: 80rem 120rem;
  background: #F5F5F7;
}
.screen2 .wrapper1680 {
  box-sizing: border-box;
  background: #FFFFFF;
  border-radius: 10rem 10rem 10rem 10rem;
}
.screen3 {
  padding: 0rem 120rem 80rem;
  background: #F5F5F7;
}
.screen3 .wrapper1680 {
  background: #FFFFFF;
  border-radius: 10rem 10rem 10rem 10rem;
}
.el-form-item {
  margin-bottom: 22rem !important;
}
/deep/.el-form-item__label {
  font-size: 14rem;
  line-height: 40rem;
  padding: 0 12rem 0 0;
}
/deep/.el-form-item__content {
  line-height: 40rem;
  font-size: 14rem;
}
/deep/.el-input {
  font-size: 14rem;
}
/deep/.el-input__inner {
  border-radius: 4rem;
  border: 1rem solid #DCDFE6;
  height: 40rem;
  line-height: 40rem;
  padding: 0 15rem;
}
/deep/.el-checkbox {
  font-size: 14rem;
  margin-right: 30rem;
}
/deep/.el-checkbox__inner {
  border: 1rem solid #DCDFE6;
  border-radius: 2rem;
  width: 14rem;
  height: 14rem;
}
/deep/.el-checkbox__label {
  padding-left: 10rem;
  line-height: 19rem;
  font-size: 14rem;
}
/deep/.el-textarea {
  font-size: 14rem;
}
/deep/.el-textarea__inner {
  padding: 5rem 15rem;
  border: 1rem solid #DCDFE6;
  border-radius: 4rem;
  height: 138rem !important;
  min-height: 138rem !important;
}
/deep/.el-upload-list__item {
  font-size: 14rem;
  margin-top: 5rem;
  border-radius: 4rem;
}
/deep/.el-button--small {
  padding: 9rem 15rem;
  font-size: 12rem;
  border-radius: 3rem;
}
/deep/.el-upload-list__item-name {
  margin-right: 40rem;
  padding-left: 4rem;
}
/deep/.el-upload-list__item-status-label {
  right: 5rem;
}
/deep/.el-upload__tip {
  font-size: 12rem;
  color: #606266;
  margin-top: 7rem;
}
.formContent {
  padding: 20rem 0rem 0rem;
}
.formBarContent {
  padding: 0rem 30rem;
}
.formBar {
  display: inline-block;
  width: 4rem;
  height: 20rem;
  background: #014DB5;
}
.formTitle {
  display: inline-block;
  padding-left: 10rem;
  font-family: MicrosoftYaHeiSemibold;
  font-size: 24rem;
  color: #014DB5;
  line-height: 64rem;
  text-align: justifyLeft;
  font-style: normal;
  text-transform: none;
}
.subBtn {
  width: 140rem;
  height: 50rem;
  background: #014DB5;
  border-radius: 4rem;
  font-family: MicrosoftYaHei;
  font-size: 18rem;
  color: #FFFFFF;
  text-align: center;
  font-style: normal;
  text-transform: none;
  padding: 12rem 20rem;
}
.upload-file-uploader {
  margin-bottom: 5rem;
}
.upload-file-list .el-upload-list__item {
  line-height: 2rem;
  margin-bottom: 10rem;
  position: relative;
}
.upload-file-list .ele-upload-list__item-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: inherit;
}
.ele-upload-list__item-content-action .el-link {
  margin-right: 10rem;
}
</style>
