<template>
  <div class="wrapper">
    <header-nav :index_num="index_num"></header-nav>
    <div id="box">
      <h3>项目创建</h3>
      <!-- 导航 -->
      <div class="box">
        <div
          :class="sub == 0 ? 'color' : ''"
          :style="{'background-image': sub == 0 ? 'url('+imgUrl.bg0+')' : 'url('+imgUrl.bg1+')'}"
        >1 填写基本信息</div>
        <div
          :class="sub == 1 ? 'color' : ''"
          :style="{'background-image': sub == 1 ? 'url('+imgUrl.bg0+')' : 'url('+imgUrl.bg1+')'}"
        >2 填写详细信息</div>
      </div>
      <form action method enctype="multipart/form-data" onsubmit="return false">
        <div v-show="sub == 0">
          <h4>一、基本信息</h4>
          <!-- start -->
          <aside>
            <div>
              <label>项目名称:</label>
              <input type="text" name="name" value v-model="name" required />
            </div>
            <div>
              <label>项目申报单位:</label>
              <input type="text" name="company" v-model="company" value required />
            </div>
          </aside>
          <!-- end -->
          <!-- start -->
          <aside>
            <div>
              <label>项目类型:</label>
              <select name="tid" v-model="tid">
                <template v-for="(type,index) in types">
                  <option :key="index" :value="index">{{type}}</option>
                </template>
              </select>
            </div>
            <div>
              <label>项目落地区域:</label>
              <select name="rid" v-model="rid">
                <template v-for="(list,index) in area">
                  <option :key="index" :value="index">{{list}}</option>
                </template>
              </select>
            </div>
          </aside>
          <!-- end -->
          <!-- start -->
          <aside>
            <div>
              <label>一级项目方向:</label>
              <input type="text" name="first_level" v-model="first_level" value required />
            </div>
            <div>
              <label>二级项目方向:</label>
              <input type="text" name="secondary" v-model="secondary" value required />
            </div>
          </aside>
          <!-- end -->
          <!-- start -->
          <aside>
            <div>
              <label>项目服务领域:</label>
              <input type="text" name="fieldeara" v-model="fieldeara" value required />
            </div>
            <div>
              <label>申报单位属性:</label>
              <input type="text" name="attribute" v-model="attribute" value required />
            </div>
          </aside>
          <!-- end -->
          <!-- start -->
          <aside>
            <div>
              <label>申请日期:</label>
              <input type="date" name="aterm" v-model="aterm" value required />
              <!-- <select name="aterm">
                <option value>2019-01-31</option>
                <option value>2019-01-20</option>
              </select>-->
            </div>
            <div>
              <label>截止日期:</label>
              <input type="date" name="fterm" v-model="fterm" value required />
              <!-- <select name="fterm">
                <option value>2019-01-31</option>
                <option value>2019-01-20</option>
              </select>-->
            </div>
          </aside>
          <!-- end -->
          <!-- start -->
          <aside>
            <div>
              <label>通讯地址:</label>
              <input type="text" name="postaladdress" v-model="postaladdress" value required />
            </div>
            <div>
              <label>邮政编码:</label>
              <input type="text" name="postalcode" v-model="postalcode" value required />
            </div>
          </aside>
          <!-- end -->
          <!-- start -->
          <aside>
            <div>
              <label>电子信箱:</label>
              <input type="text" name="pmail" v-model="pmail" value required />
            </div>
            <div>
              <label>传真电话:</label>
              <input type="text" placeholder="非必填" name="fax_tel" v-model="fax_tel" value />
            </div>
          </aside>
          <!-- end -->
          <!-- start -->
          <aside>
            <div>
              <label>法定代表人:</label>
              <input type="text" name="plegal" v-model="plegal" value required />
            </div>
            <div>
              <label>法人代码:</label>
              <input type="text" name="plcode" v-model="plcode" value required />
            </div>
          </aside>
          <!-- end -->
          <!-- start -->
          <aside>
            <div>
              <label>负责人姓名:</label>
              <input class="i" type="text" name="pname" v-model="pname" value required />
            </div>
            <div>
              <label>职务:</label>
              <input class="i" type="text" name="poster" v-model="poster" value required />
            </div>
            <div>
              <label>办公电话:</label>
              <input class="i" type="text" name="poffice_tel" v-model="poffice_tel" value required />
            </div>
            <div>
              <label>手机:</label>
              <input class="i" type="text" name="aphone" v-model="aphone" value required />
            </div>
          </aside>
          <!-- end -->
          <aside>
            <div>
              <label>联系人姓名:</label>
              <input class="i" type="text" name="cname" v-model="cname" value required />
            </div>
            <div>
              <label>职务:</label>
              <input class="i" type="text" name="cpost" v-model="cpost" value required />
            </div>
            <div>
              <label>办公电话:</label>
              <input class="i" type="text" name="coffice_tel" v-model="coffice_tel" value required />
            </div>
            <div>
              <label>手机:</label>
              <input class="i" type="text" name="cphone" v-model="cphone" value required />
            </div>
          </aside>
          <!-- end -->
          <div class="btn" @click="btn(1)">下一步</div>
        </div>
        <div v-show="sub == 1">
          <div class="cc">
            <!-- start -->
            <aside>
              <div>
                <label>项目主责单位:</label>
                <input class="i-i" type="text" name="prespo" v-model="prespo" value required />
              </div>
            </aside>
            <!-- end -->
            <!-- start -->
            <aside>
              <div>
                <label>通讯地址:</label>
                <input type="text" name="respoadd" v-model="respoadd" value required />
              </div>
              <div>
                <label>邮政编码:</label>
                <input type="text" name="respopcode" v-model="respopcode" value required />
              </div>
            </aside>
            <!-- end -->
            <!-- start -->
            <aside>
              <div>
                <label>电子信箱:</label>
                <input type="text" name="respomail" v-model="respomail" value required />
              </div>
              <div>
                <label>传真电话:</label>
                <input type="text" placeholder="非必填" name="respophone" v-model="respophone" value />
              </div>
            </aside>
            <!-- end -->
            <!-- start -->
            <aside>
              <div>
                <label>负责人姓名:</label>
                <input class="i" type="text" name="respopname" v-model="respopname" value required />
              </div>
              <div>
                <label>职务:</label>
                <input class="i" type="text" name="respopost" v-model="respopost" value required />
              </div>
              <div>
                <label>办公电话:</label>
                <input
                  class="i"
                  type="text"
                  name="respoophone"
                  v-model="respoophone"
                  value
                  required
                />
              </div>
              <div>
                <label>手机:</label>
                <input class="i" type="text" name="respoptel" v-model="respoptel" value required />
              </div>
            </aside>
            <!-- end -->
            <aside>
              <div>
                <label>联系人姓名:</label>
                <input class="i" type="text" name="respocname" v-model="respocname" value required />
              </div>
              <div>
                <label>职务:</label>
                <input class="i" type="text" name="respocpost" v-model="respocpost" value required />
              </div>
              <div>
                <label>办公电话:</label>
                <input
                  class="i"
                  type="text"
                  name="respocophone"
                  v-model="respocophone"
                  value
                  required
                />
              </div>
              <div>
                <label>手机:</label>
                <input class="i" type="text" name="respoctel" v-model="respoctel" value required />
              </div>
            </aside>
            <!-- end -->
          </div>
          <div>
            <div class="xx">
              <h5>二、申报单位简介</h5>
              <textarea value name="decldes" v-model="decldes" required></textarea>
            </div>
            <div class="xx">
              <h5>三、项目简介</h5>
              <textarea value name="prodes" v-model="prodes" required></textarea>
            </div>
            <div class="xx">
              <h5>四、项目论证</h5>
              <h3>(一) 项目实施的必要性、可行性</h3>
              <textarea value name="prodemo" v-model="prodemo" required></textarea>

              <h3>(二) 项目实施的已有基础、具体方法和途径及进度安排、预期效果及完成时间</h3>
              <p>1.项目实施的已有基础</p>
              <textarea
                value
                name="prodemojc"
                v-model="prodemojc"
                required
                placeholder="(说明:包括但不限于项目实施已有的相关经验或有助于项目实施的资源支持等)"
              ></textarea>

              <p>2.具体方法和途径</p>
              <textarea
                name="prodemotj"
                value
                v-model="prodemotj"
                required
                placeholder="(说明:包括项目实施的具体方式、途径。明确项目的具体组成内容(子项目、各类服务等),每类、每次活动的具体内容、形式、对象、次数、人数等)"
              ></textarea>

              <p>3.进度安排</p>
              <textarea
                name="prodemojd"
                value
                v-model="prodemojd"
                required
                placeholder="(说明:可单独作为一部分,也可与“具体方法和途径”一并细化到子项目中说明。建议时间单元为月,不建议简单表述为“年内”、“上半年”“下半年”、“第*季度”等。)"
              ></textarea>

              <p>4.预期效果</p>
              <textarea
                value
                name="prodemoxg"
                v-model="prodemoxg"
                placeholder="(说明:具体明确项目实施所要达到的目标或预期的效果以及)"
              ></textarea>

              <p>5.项目团队及分工</p>
              <textarea
                value
                required
                v-model="prodemofg"
                name="prodemofg"
                placeholder="(说明:包括项目实施的组织管理机构组成,各子项目或各项服务活动的具体承接单位和负责人,各有关协作单位等。如有以主责单位名义申报的综合性、联合性项目,要细化各子项目的组织实施体系。如有涉及到委托管理(如财务委托管理)的,要在组织架构中予以说明。要把可能引起转包怀疑的所有事项交代清楚,避免在检查、审计和评估中产生误解。)"
              ></textarea>

              <h3>(三) 项目实施涵盖的范围、实施的规模、服务的人群，创新之处等</h3>
              <textarea required name="prodemotwo" v-model="prodemotwo" value></textarea>
            </div>
            <div class="xx">
              <h5>五、经费预算</h5>
              <!-- <textarea name="funds" v-model="funds" required value></textarea> -->
              <div id="rich">
                <rich-text-four @quillVal="getContent"></rich-text-four>
              </div>
            </div>
            <div class="xxx">
              <h5>六、申报单位承诺</h5>
              <div class="plpl">
                <span
                  @click="thf()"
                  :class="thff ? 'ic' : ''"
                  class="iconfont icon-fuxuankuang_xuanzhong"
                ></span>
                <label>我们确认项目中报内容的真实性,并愿意承担相应的责任</label>
              </div>
            </div>
            <div class="xxx">
              <h5>七、项目主责单位意见</h5>
              <div class="xxxx">
                <div class="btnn">
                  <!-- @change="getFile($event)" -->
                  <label>
                    上传文件
                    <input type="file" @change="getFile($event)" v-show="false" name="file" />
                  </label>
                </div>
                <span for>只能上传一张不同的图片</span>
              </div>
            </div>
          </div>
          <template v-if="file">
            <img class="img-img" :src="file" alt />
            <!-- <iframe class="img-img"  frameborder="0" scrolling="no" marginheight="0" marginwidth="0" :src="src"></iframe> -->
          </template>
          <div class="ll">
            <button type="button" @click="btn(0)">上一页</button>
            <button type="button" @click="submit(0)">保存</button>
            <button type="submit" @click="submit(1)">提交</button>
          </div>
        </div>
      </form>
    </div>
    <footer-nav class="footer"></footer-nav>
  </div>
</template>

<script>
/* eslint-disable */
import HeaderNav from "../../components/HeaderNav";
/* eslint-disable */
import FooterNav from "../../components/FooterNav";
import RichTextFour from "../../components/RichTextFour";
const T_T = new Date()
export default {
  components: {
    HeaderNav,
    FooterNav,
    RichTextFour
  },
  props: {},
  data() {
    return {
      index_num: 2,
      sub: 0,
      imgUrl: {
        bg0: require("../../../static/img/bg0.png"),
        bg1: require("../../../static/img/bg1.png"),
        xa: require("../../../static/img/xa.png")
      },
      thff: false,
      types: [],
      area: [],
      name: '',
      company: '',
      tid: Number,
      rid: Number,
      first_level: '',
      secondary: '',
      fieldeara: '',
      attribute: '',
      aterm: '',
      fterm: '',
      postaladdress: '',
      postalcode: '',
      pmail: '',
      fax_tel: '',
      plegal: '',
      plcode: '',
      pname: '',
      poster: '',
      poffice_tel: '',
      aphone: '',
      cname: '',
      cpost: '',
      coffice_tel: '',
      cphone: '',
      prespo: '',
      respoadd: '',
      respopcode: '',
      respomail: '',
      respophone: '',
      respoctel: '',
      respopname: '',
      respopost: '',
      respoophone: '',
      respoptel: '',
      respocname: '',
      respocpost: '',
      respocophone: '',
      decldes: '',
      prodes: '',
      prodemo: '',
      prodemojc: '',
      prodemotj: '',
      prodemojd: '',
      prodemoxg: '',
      prodemofg: '',
      prodemotwo: '',
      funds: '',
      proimages: '',
      file: '',
      subStatus: 0,
      src: ''
    };
  },
  computed: {},
  watch: {},
  methods: {
    /** 获取富文本内容 */
    getContent(data) {
      this.funds = data
    },
    /** 申报单位承诺 */
    thf() {
      this.thff = !this.thff;
    },
    /** 下一步 */
    btn(index) {
      let s = this.sub;
      s = index;

      if (s == 0) {
        this.sub = s
      }

      // this.sub = s

      if (s == 1) {
        if (this.name == '' || this.company == '' || this.tid == '' ||
          this.rid == '' || this.first_level == '' || this.secondary == '' ||
          this.fieldeara == '' || this.attribute == '' || this.aterm == '' ||
          this.fterm == '' || this.postaladdress == '' || this.postalcode == '' ||
          this.pmail == '' || this.plegal == '' || this.plcode == '' ||
          this.pname == '' || this.poster == '' || this.poffice_tel == '' ||
          this.aphone == '' || this.cname == '' || this.cpost == '' || this.coffice_tel == '' ||
          this.cphone == ''
        ) {
          alert('以上内容不可为空！')
          return
        } else {
          this.sub = s
        }
      }
    },
    /** 上传文件 */
    getFile(event) {
      let _this = this
      let file = event.target.files[0];
/*
      let reader = new FileReader()
      reader.readAsDataURL(file) // 这里是最关键的一步，转换就在这里
      reader.onloadend = function () {
        _this.src = this.result
      }
*/

      let param = new FormData(); //创建form对象
      param.append('file', file);//通过append向form对象添加数据
      // console.log(param.get('file')); //FormData私有类对象，访问不到，可以通过get判断值是否传进去
      let config = {
        headers: { 'Content-Type': 'multipart/form-data' }
      }; //添加请求头
      this.$http.post('v1/file/files', param, config)
        .then(response => {
          let url = response.data.data.url
          this.file = url
        })
      console.log(this.file)
    },
    /** 保存和提交 */
    submit(index) {
      if (this.sub == 1) {
        if (this.prespo == '' || this.respoadd == '' || this.respopcode == '' ||
          this.respomail == '' || this.respopname == '' ||
          this.respopost == '' || this.respoophone == '' || this.respoptel == '' ||
          this.respocname == '' || this.respocpost == '' || this.respocophone == '' ||
          this.respoctel == '' || this.decldes == '' || this.prodes == '' ||
          this.prodemo == '' || this.prodemojc == '' || this.prodemotj == '' ||
          this.prodemojd == '' || this.prodemoxg == '' || this.prodemofg == '' ||
          this.prodemotwo == '' || this.funds == ''
        ) {
          alert('以上内容不可为空！')
          return
        } else if (this.thff == false) {
          alert('请同意：申报单位承诺')
          return
        } else if (this.file == '') {
          alert('未上传文件！')
          return
        }
      } else {
        alert('数据出错！')
        return
      }

      let s = this.subStatus;
      s = index;
      this.subStatus = s
      this.proimages = this.file
      if (this.proimages === '') {
        alert('文件还未上传！')
        return
      }
      let _this = this
      this.$http({
        method: 'post',
        url: 'v1/project/apply',
        data: {
          subStatus: _this.subStatus,
          name: _this.name,
          company: _this.company,
          tid: _this.tid,
          rid: _this.rid,
          first_level: _this.first_level,
          secondary: _this.secondary,
          fieldeara: _this.fieldeara,
          attribute: _this.attribute,
          aterm: _this.aterm,
          fterm: _this.fterm,
          postaladdress: _this.postaladdress,
          postalcode: _this.postalcode,
          pmail: _this.pmail,
          fax_tel: _this.fax_tel,
          plegal: _this.plegal,
          plcode: _this.plcode,
          pname: _this.pname,
          poster: _this.poster,
          poffice_tel: _this.poffice_tel,
          aphone: _this.aphone,
          cname: _this.cname,
          cpost: _this.cpost,
          coffice_tel: _this.coffice_tel,
          cphone: _this.cphone,
          prespo: _this.prespo,
          respoadd: _this.respoadd,
          respopcode: _this.respopcode,
          respomail: _this.respomail,
          respophone: _this.respophone,
          respoctel: _this.respoctel,
          respopname: _this.respopname,
          respopost: _this.respopost,
          respoophone: _this.respoophone,
          respoptel: _this.respoptel,
          respocname: _this.respocname,
          respocpost: _this.respocpost,
          respocophone: _this.respocophone,
          decldes: _this.decldes,
          prodes: _this.prodes,
          prodemo: _this.prodemo,
          prodemojc: _this.prodemojc,
          prodemotj: _this.prodemotj,
          prodemojd: _this.prodemojd,
          prodemoxg: _this.prodemoxg,
          prodemofg: _this.prodemofg,
          prodemotwo: _this.prodemotwo,
          funds: _this.funds,
          proimages: _this.proimages
        }
      }).then(res => {
        if (res.data.code === 200) {
          alert(res.data.data.msg)
          _this.proimages = ''
        } else {
          alert(res.data.message)
        }
      })
        // eslint-disable-next-line handle-callback-err
        .catch(err => {
          console.log(err)
        })
    },
    /** 获取下拉框的数据 */
    getData() {
      let _this = this
      this.$http({
        method: 'get',
        url: 'v1/project/get-info',
        data: {}
      }).then(res => {
        if (res.data.code === 200) {
          _this.types = res.data.data.type
          _this.area = res.data.data.area
        } else {
          _this.$message.error('请求数据有问题！')
        }
      })
        // eslint-disable-next-line handle-callback-err
        .catch(err => {
          console.log(err)
        })
    },
    /** 判断是否有权限进行项目申报 */
    status() {
      let id = sessionStorage.id
      let _this = this
      this.$http({
        method: 'post',
        url: 'v1/society/get-status',
        data: { id: id }
      }).then(res => {
        if (res.data.code === 200) {
          if (res.data.data.status === 0) {
            alert('您当前的社会状态为：黑名单！')
            _this.$router.push({
              name: 'project'
            })
          } else if (res.data.data.status === 3) {
            alert('您当前的社会状态为：待审核！')
            _this.$router.push({
              name: 'project'
            })
          } else {
            _this.getData()
          }
        } else {
          _this.$message.error('请求数据有问题！')
        }
      })
        // eslint-disable-next-line handle-callback-err
        .catch(err => {
          console.log(err)
        })
    }
  },
  created() { },
  mounted() {
    this.status()
  }
};
</script>

<style lang='scss' scoped>
#rich {
  margin: 30px auto 30px;
}
.img-img {
  margin-top: 25px;
  width: 150px;
  height: 250px;

  &::-webkit-scrollbar {
    width: 0px;
    height: 00x;
  }
}

.wrapper {
  min-width: 1280px;
  box-sizing: border-box;

  #box {
    margin: 40px auto 0;
    padding: 34px 32px 100px 28px;
    box-sizing: border-box;
    width: 1200px;
    background-color: #ffffff;

    form {
      .ll {
        margin-top: 80px;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

        button[type="button"] {
          margin-right: 152px;
          width: 197px;
          height: 63px;
          background-color: #ff9800;
          border-radius: 5px;
          font-family: "MicrosoftYaHei";
          font-size: 26px;
          font-weight: normal;
          font-stretch: normal;
          line-height: 63px;
          letter-spacing: 0px;
          color: #ffffff;
          text-align: center;
          outline: none;
          border: 0;
        }

        button[type="submit"] {
          width: 197px;
          height: 63px;
          background-color: #e60012;
          border-radius: 5px;
          font-family: "MicrosoftYaHei";
          font-size: 26px;
          font-weight: normal;
          font-stretch: normal;
          line-height: 63px;
          text-align: center;
          letter-spacing: 0px;
          color: #ffffff;
          outline: none;
          border: 0;
        }
      }

      .xxx {
        margin-top: 60px;
        width: 100%;
        height: 72px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;

        .plpl {
          display: flex;
          align-items: center;
          label {
            margin-left: 16px;
            font-family: "MicrosoftYaHei";
            font-size: 16px;
            font-weight: normal;
            font-stretch: normal;
            line-height: 25px;
            letter-spacing: 0px;
            color: #323232;
          }

          .iconfont {
            font-size: 22px;
            color: #999;
          }
          .ic {
            color: #e60012;
          }
        }

        .xxxx {
          display: flex;
          align-items: center;
          justify-content: flex-start;
          span {
            display: inline-block;
            height: 32px;
            line-height: 32px;
            text-align: center;
            margin-left: 25px;
            font-family: "MicrosoftYaHei";
            font-size: 16px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #000;
          }
        }

        .btnn {
          cursor: pointer;
          width: 96px;
          height: 32px;
          background-image: linear-gradient(
              69deg,
              #cc263f 0%,
              #f42b47 100%,
              #ed162d 100%,
              #e60012 100%
            ),
            linear-gradient(#e60012, #e60012);
          background-blend-mode: normal, normal;
          border-radius: 4px;
          display: flex;
          justify-content: center;
          align-items: center;

          label {
            font-family: "MicrosoftYaHei";
            font-size: 16px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #ffffff;
          }
        }
      }

      .xx {
        margin-top: 60px;
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;

        textarea {
          margin-top: 30px;
          width: 1139px;
          height: 138px;
          background-color: #ffffff;
          border: solid 1px #c7c7c7;
          resize: none;

          font-family: "MicrosoftYaHei";
          font-size: 18px;
          font-weight: normal;
          font-stretch: normal;
          line-height: 39px;
          letter-spacing: 0px;
          color: #999999;
        }

        p {
          margin-top: 38px;
          font-family: "MicrosoftYaHei";
          font-size: 20px;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0px;
          color: #333333;
        }

        h5 {
          width: 100%;
          font-family: "MicrosoftYaHei";
          font-size: 20px;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0px;
          color: #333333;
        }

        h3 {
          width: 100%;
          font-family: "MicrosoftYaHei";
          font-size: 20px;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0px;
          color: #333333;
          margin-top: 38px;
        }
      }

      .cc {
        width: 1140px;
        margin: 0 auto 0px;
        aside {
          width: 100%;
          height: 43px;
          div {
            display: flex;
            align-items: center;

            label {
              display: inline-block;
              width: 101px;
              height: 43px;
              font-family: "MicrosoftYaHei";
              font-size: 16px;
              font-weight: normal;
              font-stretch: normal;
              line-height: 43px;
              text-align: right;
              letter-spacing: 0px;
              color: #323232;
            }

            .i-i {
              width: 1009px;
              height: 43px;
              background-color: #ffffff;
              border: solid 1px #c7c7c7;
              outline: none;
              margin-left: 30px;
              font-family: "MicrosoftYaHei";
              font-size: 18px;
              font-weight: normal;
              font-stretch: normal;
              letter-spacing: 0px;
              color: #323232;
            }
          }
        }
      }

      .btn {
        margin: 60px auto 0;
        width: 230px;
        height: 63px;
        background-color: #e60012;
        border-radius: 5px;
        font-family: "MicrosoftYaHei";
        font-size: 26px;
        font-weight: normal;
        font-stretch: normal;
        line-height: 63px;
        letter-spacing: 0px;
        text-align: center;
        color: #ffffff;
      }

      aside {
        width: 1138px;
        height: 43px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 25px;

        label {
          display: inline-block;
          width: 101px;
          height: 43px;
          font-family: "MicrosoftYaHei";
          font-size: 16px;
          font-weight: normal;
          font-stretch: normal;
          line-height: 43px;
          text-align: right;
          letter-spacing: 0px;
          color: #323232;
        }

        select {
          /* 清除默认的箭头样式 */
          appearance: none;
          -moz-appearance: none;
          -webkit-appearance: none;
          /* 右侧添加小箭头的背景图 */
          background: url("../../../static/img/xa.png") 360px center no-repeat;
          background-size: 14px 8px;
          width: 386px;
          height: 43px;
          background-color: #ffffff;
          border: solid 1px #c7c7c7;
          padding-left: 83px;
          box-sizing: border-box;
          outline: none;
          margin-left: 30px;
          font-family: "MicrosoftYaHei";
          font-size: 18px;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0px;
          color: #323232;
        }

        input {
          box-sizing: border-box;
          width: 386px;
          height: 43px;
          background-color: #ffffff;
          border: solid 1px #c7c7c7;
          outline: none;
          margin-left: 30px;
          font-family: "MicrosoftYaHei";
          font-size: 18px;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0px;
          color: #323232;
        }

        .i {
          width: 151px;
          height: 43px;
          background-color: #ffffff;
          border: solid 1px #c7c7c7;
          outline: none;
          margin-left: 30px;
          font-family: "MicrosoftYaHei";
          font-size: 18px;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0px;
          color: #323232;
        }
      }

      h4 {
        width: 1138px;
        height: 38px;
        font-family: "MicrosoftYaHei";
        font-size: 20px;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0px;
        color: #333333;
        padding-left: 30px;
        box-sizing: border-box;
        border-bottom: 1px solid #ccc;
        margin-bottom: 54px;
      }
    }

    .box {
      width: 395px;
      height: 34px;
      margin: 44px auto 70px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      div {
        width: 192px;
        height: 34px;
        background-size: 100% 100%;
        font-family: "MicrosoftYaHei";
        font-size: 14px;
        font-weight: normal;
        font-stretch: normal;
        line-height: 34px;
        text-align: center;
        letter-spacing: 0px;
        color: #333333;
      }

      .color {
        color: #fff;
      }
    }

    h3 {
      width: 89px;
      height: 23px;
      margin: 0 auto;
      font-family: "MicrosoftYaHei";
      font-size: 22px;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0px;
      color: #333333;
    }
  }

  .footer {
    margin-top: 80px;
  }
}
</style>
