<template>
  <div class="productdetails">
    <div class="productdetailsMsg">
      <div class="productdetailsToP">
        <div class="productdetailsToP-right">
          <img src="../../../assets/imgs/icplicense/u3.png" alt="" />
          <h4>ICP许可证</h4>
          <p>助力企业资质安全 合规合法经营</p>
        </div>
        <div class="productdetailsToP-left">
          <h1>互联网信息经营（ICP）许可证办理</h1>
          <h2>
            ICP许可证 / ICP牌照 / 互联网经营许可证 / 互联网信息服务业务许可证
          </h2>
          <div class="priceMsg">
            <div class="priceMsgLeft">
              <p>价格：<span>¥1000</span></p>
              <p>折扣价格：<b>¥1000</b></p>
            </div>
            <div class="priceMsgRight">
              <p>42人正在使用</p>
              <el-rate v-model="countXin" disabled text-color="#FFCC01">
              </el-rate>
            </div>
          </div>
          <div class="typeJiao">
            <p><b>交付方式</b><span>线上交付</span></p>
          </div>
          <div class="typeJiaoFu">
            <p>
              <b>规格</b
              ><span
                v-for="(item, index) in typeList"
                :key="index"
                @click="typeClick(index)"
                :class="typeIndex == index ? 'active' : ''"
                >{{ item }}</span
              >
            </p>
          </div>
          <button>立即购买</button>
        </div>
      </div>
      <div class="productdetailsMain">
        <div class="productdetailsMain-tabs">
          <p
            :class="index == tabsIndex ? 'actived' : ''"
            v-for="(item, index) in tabsList"
            :key="index"
            @click="tabsClick(index)"
          >
            {{ item }}
          </p>
        </div>
        <div class="productdetailsMain-title">
          <p>办理须知</p>
        </div>
        <div class="productdetailsMain-items">
          <div class="itemmsg">
            <div class="items">
              <div></div>
              <h3>行业</h3>
              <p>
                如网站中含有前置审批（特殊行业）内容，则需要首先通过行业前置审批后才可以申请
              </p>
            </div>
            <div class="items">
              <div></div>
              <h3>地域</h3>
              <p>
                ICP许可证由企业注册所在地的通信管理局审批，各地区政策有区别。
              </p>
            </div>
            <div class="items">
              <div></div>
              <h3>盈利模式</h3>
              <p>
                在线盈利模式包括互联网有偿信息服务，包括在线销售、在线支付、广告招商、会员收费、企业合作、项目投标等。
              </p>
            </div>
          </div>
        </div>
        <div class="productdetailsMain-title">
          <p>办理条件</p>
        </div>
        <div class="productdetailsMain-items">
          <div class="conditions">
            <p v-for="(item, index) in conditionsList" :key="index">
              <span>{{ index + 1 }}</span
              >{{ item }}
            </p>
          </div>
        </div>
        <div class="productdetailsMain-title">
          <p>办理流程</p>
        </div>
        <div class="productdetailsMain-items">
          <div class="flow">
            <div class="line"></div>
            <div class="flowItem">
              <div></div>
              <p>提交资料</p>
            </div>
            <div class="flowItem">
              <div></div>
              <p>提交资料</p>
            </div>
            <div class="flowItem">
              <div></div>
              <p>提交资料</p>
            </div>
            <div class="flowItem">
              <div></div>
              <p>提交资料</p>
            </div>
          </div>
        </div>
        <div class="productdetailsMain-title">
          <p>所需材料</p>
        </div>
        <div class="productdetailsMain-items">
          <div class="materials">
            <div class="materialsMain">
              <p v-for="(item, index) in materialsList" :key="index">
                <span>{{ index + 1 }}. </span>
                {{ item }}
              </p>
            </div>
          </div>
        </div>
        <div class="productdetailsMain-title">
          <p>服务优势</p>
        </div>
        <div class="productdetailsMain-items">
          <div class="advantages"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      countXin: 5.0,
      tabsIndex: 0,
      typeIndex: 0,
      typeList: ['自助注册', '专家辅助注册'],
      tabsList: [
        '产品内容',
        '办理须知',
        '办理条件',
        '办理流程',
        '所需材料',
        '服务优势'
      ],
      conditionsList: [
        '经营者为依法设立的公司，注册资金大于等于100万的内资公司；',
        '有与开发经营活动相适应的资金和专业人员；',
        '有业务发展计划及相关技术方案；',
        '有为用户提供长期服务的荣誉或者能力；',
        '健全的网络与信息安全保障措施，包括网站安全保障措施、信息安全保密管理制度、用户信息安全管理制度；',
        '涉及到ICP管理办法中规定需要前置审批的信息服务内容的，已取得有关主管部门同意的文件；',
        '国家规定的其他条件。'
      ],
      materialsList: [
        '营业执照副本原件彩色扫描件 ',
        '公司法人、股东为自然人，准备其身份证原件扫描件； ',
        '公司股东为企业法人，提交其企信网截图, 申请公司为上市公司的，需提供其十大股东截图，并提供其十大股东中的自然人身份证彩色扫描 件或企业法人的企信网截图； ',
        '3名社保人员身份证原件彩色扫描件（身份证正反面都扫描）及近期一个月社保证明； ',
        '托管协议原件彩色扫描件及托管商IDC证书复印件； ',
        '域名注册证书原件彩色扫描件（域名所有人必须公司全称）； '
      ]
    };
  },
  methods: {
    tabsClick(index) {
      this.tabsIndex = index;
    },
    typeClick(index) {
      this.typeIndex = index;
    }
  }
};
</script>

<style lang="scss" scoped>
.productdetails {
  width: 100%;
  .productdetailsMsg {
    width: 1314px;
    margin: 0 auto;
    background: #fff;
  }
}
.productdetailsToP {
  padding: 30px 17px;
  display: flex;
  .productdetailsToP-right {
    width: 450px;
    height: 330px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    h4 {
      position: relative;
      z-index: 3;
      font-size: 40px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: rgba(255, 255, 255, 1);
      line-height: 56px;
      letter-spacing: 3px;
      text-shadow: 0px 2px 4px rgba(237, 100, 15, 1);
      margin-bottom: 56px;
    }
    p {
      position: relative;
      z-index: 3;
      width: 176px;
      height: 60px;
      font-size: 22px;
      font-family: ArialMT;
      color: rgba(255, 255, 255, 1);
      line-height: 40px;
      text-align: center;
    }
  }
  .productdetailsToP-left {
    flex: 1;
    padding-left: 34px;
    h1 {
      font-size: 20px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(55, 61, 65, 1);
      line-height: 28px;
      margin-bottom: 10px;
    }
    h2 {
      font-size: 16px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(55, 61, 65, 1);
      line-height: 22px;
      margin-bottom: 20px;
    }
    .priceMsg {
      width: 100%;
      height: 110px;
      background: rgba(248, 248, 248, 1);
      border-radius: 1px;
      display: flex;
      padding: 11px 0 9px;
      .priceMsgLeft {
        flex: 1;
        padding: 10px 11px 0 11px;
        p {
          font-size: 16px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: rgba(55, 61, 65, 1);
          line-height: 22px;
          margin-bottom: 18px;
          span {
            color: #616669;
            text-decoration: line-through;
          }
          b {
            font-size: 30px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: rgba(254, 106, 1, 1);
          }
        }
      }
      .priceMsgRight {
        width: 160px;
        border-left: 1px solid #d6d6d6;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        p {
          font-size: 16px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: rgba(55, 61, 65, 1);
          line-height: 22px;
          margin-bottom: 10px;
        }
      }
    }
    .typeJiao {
      margin-top: 16px;
      p {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        b {
          color: rgba(155, 158, 160, 1);
          line-height: 20px;
          display: inline-block;
          width: 78px;
        }
        span {
          color: #fe6a01;
          display: inline-block;
          padding: 7px 29px;
          border: 1px solid rgba(254, 106, 1, 1);
        }
      }
    }
    .typeJiaoFu {
      margin-top: 16px;
      p {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        b {
          color: rgba(155, 158, 160, 1);
          line-height: 20px;
          display: inline-block;
          width: 78px;
        }
        span {
          color: #7f8285;
          display: inline-block;
          padding: 7px 29px;
          border: 1px solid #dddddd;
          margin-right: 30px;
          cursor: pointer;
        }
        .active {
          color: #fe6a01;
          border: 1px solid rgba(254, 106, 1, 1);
        }
      }
    }
    button {
      margin-top: 35px;
      width: 158px;
      height: 47px;
      background: rgba(254, 106, 1, 1);
      border: none;
      font-size: 16px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
      line-height: 22px;
    }
  }
}
.productdetailsMain {
  width: 100%;
  .productdetailsMain-tabs {
    width: 100%;
    border-bottom: 1px solid #d7d8d9;
    display: flex;
    p {
      padding: 20px 0;
      margin: 0 20px;
      font-size: 16px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #373d41;
      line-height: 22px;
      cursor: pointer;
    }
    .actived {
      border-bottom: 2px solid #fe6a01;
      color: #fe6a01;
    }
  }
  .productdetailsMain-title {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    p {
      padding: 20px 0 10px 0;
      font-size: 28px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(54, 60, 64, 1);
      line-height: 40px;
      border-bottom: 2px solid rgba(254, 106, 1, 1);
    }
  }
  .productdetailsMain-items {
    width: 100%;
    padding: 40px 0 50px;
    .itemmsg {
      padding: 0 40px;
      display: flex;
      justify-content: space-between;
      .items {
        width: 275px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        div {
          width: 64px;
          height: 64px;
          background: #ccc;
          margin-bottom: 45px;
        }
        h3 {
          font-size: 22px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: rgba(55, 61, 65, 1);
          line-height: 30px;
          margin-bottom: 18px;
        }
        p {
          height: 110px;
          font-size: 16px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: rgba(55, 61, 65, 1);
          line-height: 22px;
          text-align: center;
        }
      }
    }
    .conditions {
      width: 100%;
      padding: 0 40px;
      p {
        font-size: 18px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(89, 95, 111, 1);
        line-height: 24px;
        letter-spacing: 1px;
        display: flex;
        margin-bottom: 23px;
        span {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 25px;
          height: 25px;
          background: rgba(254, 106, 1, 1);
          border-radius: 50px;
          font-size: 16px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: rgba(255, 255, 255, 1);
          line-height: 22px;
          margin-right: 15px;
        }
      }
    }
    .flow {
      width: 100%;
      position: relative;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      .line {
        position: absolute;
        top: 45px;
        left: 0;
        margin-top: -1px;
        width: 100%;
        height: 2px;
        background: linear-gradient(
          90deg,
          rgba(255, 255, 255, 1) 0%,
          rgba(254, 106, 1, 1) 49%,
          rgba(255, 255, 255, 1) 100%
        );
        border-radius: 1px;
        z-index: 1;
      }
      .flowItem {
        width: 90px;
        position: relative;
        z-index: 2;
        div {
          width: 90px;
          height: 90px;
          background: #fff;
          border-radius: 100px;
          margin-bottom: 20px;
          box-shadow: 0px 0px 8px 0px rgba(249, 111, 13, 0.42);
        }
        p {
          font-size: 22px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: rgba(55, 61, 65, 1);
          line-height: 30px;
        }
      }
    }
    .materials {
      padding: 0 30px;
      .materialsMain {
        width: 100%;
        background: #f9f9f9;
        padding: 40px 47px;
        p {
          font-size: 18px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: rgba(64, 69, 73, 1);
          line-height: 22px;
          margin-bottom: 23px;
          display: flex;
          span {
            margin-right: 10px;
            display: block;
          }
        }
      }
    }
    .advantages {
      width: 100%;
      height: 470px;
    }
  }
}
</style>
