<template>
  <div class="jdtrademark">
    <!-- 轮播图 -->
    <div class="jdtrademark-banner">
      <div>
        <div @click="goIndentList">我的订单</div>
      </div>
    </div>
    <!-- 商标检索 -->
    <Jdtmsearch />
    <!-- 商标注册 -->
    <Jdtmbrandreg />
    <!-- 服务优势 -->
    <div class="jdtrademark-services">
      <div class="jdtrademark-services-title">服务优势</div>
      <div class="wrap">
        <ul>
          <li v-for="(item, index) in serviceData" :key="index">
            <div>
              <img :src="item.img" alt />
            </div>
            <p>{{item.name}}</p>
            <p>{{item.text}}</p>
          </li>
        </ul>
      </div>
    </div>
    <!-- 注册流程 -->
    <div class="jdtrademark-flow"></div>
    <!-- 常见问题 -->
    <div class="jdtrademark-FAQ-warpper">
      <div class="jdtrademark-FAQ">
        <div class="jdtrademark-FAQ-title">
          常见问题
          <div>聚集常见问答，解决商标申请时遇到的困难</div>
        </div>
        <ul>
          <li v-for="(item, index) in issue" :key="index">
            <div>
              <div>
                <img :src="item.img" alt />
              </div>
              <div>{{item.title}}</div>
            </div>
            <div>{{item.text}}</div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import Jdtmsearch from "./Jdtmsearch";
import Jdtmbrandreg from "./Jdtmbrandreg";

// 服务优势图片
import simg1 from "../../../assets/imgs/services1.png";
import simg2 from "../../../assets/imgs/services2.png";
import simg3 from "../../../assets/imgs/services3.png";
import simg4 from "../../../assets/imgs/services4.png";
import simg5 from "../../../assets/imgs/services5.png";
import simg6 from "../../../assets/imgs/services6.png";
// 常见问题FAQ图片
import fimg1 from "../../../assets/imgs/FAQ1.png";
import fimg2 from "../../../assets/imgs/FAQ2.png";
import fimg3 from "../../../assets/imgs/FAQ3.png";

export default {
  name: "jdtrademark",
  components: {
    Jdtmsearch,
    Jdtmbrandreg
  },
  data() {
    return {
      // 服务优势展示图文数据
      serviceData: [
        {
          img: simg1,
          name: "注册评估低风险",
          text:
            "商标注册存在驳回失败风险，京东云利用大数据分析和智能检索工具可快速查出近似商标注册信息及状态，帮助提高通过率"
        },
        {
          img: simg2,
          name: "简化流程高效注册",
          text:
            "京东云提供商标自助申报系统，可自定义选择注册类别，同事利用工商大数据查询企业信息功能，提高申请效率"
        },
        {
          img: simg3,
          name: "最快1分钟提交商标局",
          text:
            "京东云支持商标自助线上提交申请、线上跟进商标订单，利用人工智能提交机器人，最快实现1分钟提交至商标局"
        },
        {
          img: simg4,
          name: "申请进度实时掌握",
          text:
            "京东云提供在线标准化服务，流程透明可视化，关键流程通过短信、邮件通知，申请进度一目了然"
        },
        {
          img: simg5,
          name: "简单管理易维护",
          text:
            "在京东云商标管理控制台，数据在线保存实时同步到云端，各类进度随时掌握，方便查找各类商标订单"
        },
        {
          img: simg6,
          name: "多种服务供您选择",
          text:
            "行业合作伙伴为您提供专业服务，可一对一进行问题解答与业务建议，满足您多元的商标需求"
        }
      ],

      // 常见问题图文数据
      issue: [
        {
          img: fimg1,
          title: "什么是商标？什么是注册商标？",
          text:
            "商标是指任何能够将自然人、法人或者其他组织的商品/服务与他人的商品/服务区别开的标志，包括文字、图形、字母、数字、三维标志、颜色组合和声音等，以及上述要素的组合。 注册商标是指经过商标主管机关依照法定程序及标准进行审查并通过，经《初步审定公告》无人提出异议的商标。"
        },
        {
          img: fimg2,
          title: "商标注册有风险吗？",
          text:
            "商标注册存在被商标局驳回导致申请失败的风险。申请驳回失败原因可能有：受可用文字、标识资源限制，新的商标申请容易与在先申请的商标产生近似；法律法规的相关限制等。据不完全的统计，2017年我国商标申请的驳回率约50%，2018年我国商标申请的驳回率约40%。为提高商标注册成功率，申请人可在申请时提前做好应对准备。 建议： (1) 若申请人不具有一定的专业能力，尽量选择有专业顾问指导的“专家辅助申请”和“担保注册申请”。 (2)申请时将中文、英文、图形等分开申请，通过后可以组合使用,以避免因某一部分近似而被商标局整体驳回的情况，且分开申请可以根据场景灵活组合使用。 (3) 准备备用方案，申请时可以在主要商标申请方案的基础上，增加一到两件备用商标，以便在主商标无法通过或全部通过的情况下，有其他可以使用的商标。"
        },
        {
          img: fimg3,
          title: "商标申请费用的标准？",
          text:
            "商标局规费收取标准为： 300元/类·件，即：1件商标在1个类别中申请10个（含10个）以内的商品。超过10个商品，每超过1个商品，每个商品加收30元。 即：在一个类别中指定15项商品，规费为：300+（15-10）×30=450元"
        }
      ]
    };
  },
  methods: {
    /*点击 我的订单 去订单列表页jdindentlist */
    goIndentList() {
      location.href =
        "https://oauth2.jdcloud.com/authorize?response_type=token&redirect_uri=https://tm.plus.jdcloud.com/jdtm/getUser&state=jdindentlist&client_id=9491577327154697";
    }
  }
};
</script>

<style lang="scss" scoped>
.jdtrademark {
  width: 100%;
}
/* 轮播图 */
.jdtrademark-banner {
  min-height: 480px;
  background: yellowgreen;
  /* assets的别名？ */
  background: url(../../../assets/imgs/banner.png) center center no-repeat;
  background-size: cover;
  > div {
    width: 1200px;
    margin: 0 auto;
    position: relative;
    min-height: 480px;
    > div {
      padding: 10px 40px;
      border: 1px solid #cfebfc;
      color: #cfebfc;
      position: absolute;
      left: 0;
      top: 66%;
      cursor: pointer;
      font-size: 16px;
    }
  }
}

/* 服务优势 */
.jdtrademark-services {
  width: 100%;
  height: 530px;
  background: rgba(243, 246, 253, 1);
  box-sizing: border-box;
  padding-top: 50px;

  .jdtrademark-services-title {
    width: 112px;
    font-size: 28px;
    font-family: PingFangSC-Regular, PingFangSC;
    font-weight: 400;
    color: rgba(66, 71, 83, 1);
    line-height: 40px;
    margin: 0 auto 59px;
  }

  .wrap {
    width: 1200px;
    margin: 0 auto;

    ul {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      > li {
        box-sizing: border-box;
        text-align: center;
        width: 340px;
        margin-bottom: 26px;

        div {
          width: 55px;
          margin: 0 auto;
          height: 55px;
          img {
            width: 100%;
            height: 100%;
          }
        }

        p:nth-of-type(1) {
          margin-top: 20px;
          margin-bottom: 15px;
          font-family: PingFangSC-Medium, PingFangSC;
          font-weight: 500;
          color: rgba(55, 61, 67, 1);
        }

        p:nth-of-type(2) {
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFangSC;
          font-weight: 400;
          color: rgba(76, 81, 87, 1);
        }
      }
    }
  }
}

/* 注册流程 */
.jdtrademark-flow {
  width: 100%;
  height: 500px;
  background: url(../../../assets/imgs/flow.png) center center no-repeat;
  background-size: cover;
}

/* 常见问题 */
.jdtrademark-FAQ-warpper {
  width: 100%;
  height: 570px;
  box-sizing: border-box;
  padding-top: 50px;

  .jdtrademark-FAQ {
    width: 1200px;
    margin: 0 auto;
    text-align: center;

    .jdtrademark-FAQ-title {
      font-size: 28px;
      font-family: PingFangSC-Regular, PingFangSC;
      font-weight: 400;
      color: rgba(66, 71, 83, 1);

      > div {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFangSC;
        font-weight: 400;
        color: rgba(105, 111, 127, 1);
        margin-top: 10px;
      }
    }

    > ul {
      width: 1200px;
      margin: 0 auto;
      text-align: left;

      > li {
        margin-top: 30px;

        > div:nth-child(1) {
          display: flex;
          margin-bottom: 7px;
          font-size: 16px;
          font-family: PingFangSC-Medium, PingFangSC;
          font-weight: 500;
          color: rgba(66, 71, 83, 1);
          align-items: center;

          > div:nth-child(1) {
            width: 20px;
            height: 20px;
            margin-right: 11px;
            margin-top: 2px;

            > img {
              width: 100%;
              height: 100%;
            }
          }
        }

        > div:nth-child(2) {
          box-sizing: border-box;
          padding-left: 30px;
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFangSC;
          font-weight: 400;
          color: rgba(120, 128, 133, 1);
          line-height: 20px;
        }
      }
    }
  }
}
</style>