<template>
  <div class="about">
    <div class="root">
      <div class="quality-list">
        <div class="secondary">
          <div>
            <svg xmlns="http://www.w3.org/2000/svg" width="40" height="45" viewBox="0 0 40 45"><g fill="none" fill-rule="evenodd"><path fill="#D6BA8C" fill-rule="nonzero" d="M33.333 14.445c-3.884 0-7.768-3.88-7.777-7.765v-.013.013c-.01 3.885-3.894 7.765-7.778 7.765 3.889 0 7.778 3.888 7.778 7.777 0-3.889 3.888-7.777 7.777-7.777zm0 10.555c-1.387 0-2.774-1.386-2.777-2.773v-.005.005C30.551 23.614 29.164 25 27.777 25c1.389 0 2.778 1.389 2.778 2.778 0-1.39 1.388-2.778 2.777-2.778z"></path><path stroke="#D6BA8C" stroke-linecap="square" stroke-width="2.5" d="M9.444 2.504v40"></path><rect width="37.5" height="42.5" x="1.25" y="1.25" stroke="#D6BA8C" stroke-width="2.5" rx="4"></rect></g></svg>
          </div>
          <div class="content">
            <h2 class="name brand">全新</h2>
            <p class="desc">在多抓鱼收到时必须是全新且未拆封的（拆封审核后会重新塑封）</p>
          </div>
        </div>
        <div class="secondary">
          <div>
            <svg xmlns="http://www.w3.org/2000/svg" width="40" height="45" viewBox="0 0 40 45"><g fill="none" fill-rule="evenodd" stroke="#18C3AA" stroke-width="2.5"><path stroke-linecap="square" d="M9.167 1.925v40"></path><rect width="37.5" height="42.5" x="1.25" y="1.25" rx="4"></rect><path stroke-linecap="round" stroke-linejoin="round" d="M17.778 21.642l5.347 4.758 7.986-9.9"></path></g></svg>
          </div>
          <div class="content">
            <h2 class="name well">品相良好</h2>
            <p class="desc">有不明显的使用痕迹或瑕疵（扉页/衬页可能存在少量文字或盖章）</p>
          </div>
        </div>
        <div class="secondary rule-rows">
          <div>
           <svg xmlns="http://www.w3.org/2000/svg" width="40" height="45" viewBox="0 0 40 45"><g fill="none" fill-rule="evenodd" stroke="#F28181" stroke-width="2.5"><path stroke-linecap="square" d="M9.167 1.944v40"></path><rect width="37.5" height="42.5" x="1.25" y="1.25" rx="4"></rect><path stroke-linecap="round" d="M25.556 12.222l3.571 5.63m-8.016-2.296l3.572 5.629"></path></g></svg>
          </div>
          <div class="content">
            <h2 class="name medium">品相中等</h2>
            <p class="desc">有较明显的使用痕迹和轻度瑕疵，但不影响正常阅读。</p>
          </div>
        </div>
      </div>
      <h2 class="additional-info-header">补充说明：</h2>
      <div class="additional-info">
        除全新品相外，不保证有腰封。
        <br />一些外版书籍的内页纸张本身就是微黄并带有凹凸质感的，不属于瑕疵。
      </div>
      <h2 class="fine-header">品相良好图片示例：</h2>
      <div class="fine-images">
        <div class="fine-condition-images">
          <div
            class="appearance"
            :style="{'margin-bottom': '12px', 
            'background-image': 'url('+require('../../../assets/img/liangpin_group01.jpg')+')',
            'background-size': 'cover', 
            'border-radius':'4px',
            'padding-top': '47.8%'}">
         
          </div>
        </div>
        <div class="picture fine-row">
          <div class="picture fine-item">
            <div
              :style="{'background-image': 'url('+require('../../../assets/img/liangpin06.jpg')+')','background-size': 'cover', 'border-radius': '4px', 'padding-top': '100%'}"
            ></div>
          </div>
          <div class="picture fine-item">
            <div
            :style="{'background-image': 'url('+require('../../../assets/img/liangpin07.jpg')+')','background-size': 'cover', 'border-radius': '4px', 'padding-top': '100%'}"
            ></div>
          </div>
        </div>
        <div class="picture fine-row">
          <div class="picture fine-item">
            <div
            :style="{'background-image': 'url('+require('../../../assets/img/liangpin08.jpg')+')','background-size': 'cover', 'border-radius': '4px', 'padding-top': '100%'}"
            ></div>
          </div>
          <div class="picture fine-item">
            <div
            :style="{'background-image': 'url('+require('../../../assets/img/liangpin09.jpg')+')','background-size': 'cover', 'border-radius': '4px', 'padding-top': '100%'}"
            ></div>
          </div>
        </div>
      </div>
      <h2 class="medium-header">品相中等的瑕疵类型包括：</h2>
      <p
        class="medium-desc"
      >有划线或标注（包含切口盖章）、轻度污渍、轻度磨损或破损（包含空白页/广告页被撕除）、轻度变形、轻度折痕、泛黄或褪色、可拆卸外封套缺失、缺失附件、印刷问题、附着胶带或标签等。</p>
      <p class="flaw-samples">图片示例：</p>
      <div class="condition-images">
        <div class="flaw-row">
          <div class="flaw-item">
            <div
              class="jsx-2421865174 root"
              :style="{'background-image': 'url('+require('../../../assets/img/waifengpi.jpg')+')','background-size': 'cover', 'border-radius': '4px', 'padding-top': '100%'}"
            ></div>
            <p class="flaw-desc">可拆卸外封套缺失</p>
          </div>
          <div class="flaw-item">
            <div
              class="jsx-2421865174 root"
              :style="{'background-image': 'url('+require('../../../assets/img/jiaodai_biaoqian02.png')+')','background-size': 'cover', 'border-radius': '4px', 'padding-top': '100%'}"
            ></div>
            <p class="flaw-desc">附着胶带或标签</p>
          </div>
        </div>
        <div class="flaw-row">
          <div class="flaw-item">
            <div
              class="jsx-2421865174 root"
              :style="{'background-image': 'url('+require('../../../assets/img/huaxian_biaozhu4.png')+')','background-size': 'cover', 'border-radius': '4px', 'padding-top': '100%'}"
            ></div>
            <p class="flaw-desc">有划线或标注</p>
          </div>
          <div class="flaw-item">
            <div
              class="jsx-2421865174 root"
              :style="{'background-image': 'url('+require('../../../assets/img/huaxian_biaozhu3.jpg')+')','background-size': 'cover', 'border-radius': '4px', 'padding-top': '100%'}"
            ></div>
            <p class="flaw-desc">有划线或标注</p>
          </div>
        </div>
        <div class="flaw-row">
          <div class="flaw-item">
            <div
              class="jsx-2421865174 root"
              :style="{'background-image': 'url('+require('../../../assets/img/posun02.jpg')+')','background-size': 'cover', 'border-radius': '4px', 'padding-top': '100%'}"
            ></div>
            <p class="flaw-desc">轻度磨损或破损</p>
          </div>
          <div class="flaw-item">
            <div
              class="jsx-2421865174 root"
              :style="{'background-image': 'url('+require('../../../assets/img/posun01.jpg')+')','background-size': 'cover', 'border-radius': '4px', 'padding-top': '100%'}"
            ></div>
            <p class="flaw-desc">轻度磨损或破损</p>
          </div>
        </div>
        <div class="flaw-row">
          <div class="flaw-item">
            <div
              class="jsx-2421865174 root"
              :style="{'background-image': 'url('+require('../../../assets/img/posun02.jpg')+')','background-size': 'cover', 'border-radius': '4px', 'padding-top': '100%'}"
            ></div>
            <p class="flaw-desc">轻度磨损或破损</p>
          </div>
          <div class="flaw-item">
            <div
              class="jsx-2421865174 root"
              :style="{'background-image': 'url('+require('../../../assets/img/mosun01.jpg')+')','background-size': 'cover', 'border-radius': '4px', 'padding-top': '100%'}"
            ></div>
            <p class="flaw-desc">轻度磨损或破损</p>
          </div>
        </div>
      </div>
     
      <div class="flaw-row">
        <div class="flaw-item">
          <div
            class="jsx-2421865174 root"
            :style="{'background-image': 'url('+require('../../../assets/img/meidian01.jpg')+')','background-size': 'cover', 'border-radius': '4px', 'padding-top': '100%'}"
          ></div>
          <p class="flaw-desc">轻度污渍</p>
        </div>
        <div class="flaw-item">
          <div
            class="jsx-2421865174 root"
            :style="{'background-image': 'url('+require('../../../assets/img/meidian02.jpg')+')','background-size': 'cover', 'border-radius': '4px', 'padding-top': '100%'}"
          ></div>
          <p class="flaw-desc">轻度污渍</p>
        </div>
      </div>
      <div class="flaw-row">
        <div class="flaw-item">
          <div
            class="jsx-2421865174 root"
            :style="{'background-image': 'url('+require('../../../assets/img/bianxing03.jpg')+')','background-size': 'cover', 'border-radius': '4px', 'padding-top': '100%'}"
          ></div>
          <p class="flaw-desc">轻度变形</p>
        </div>
        <div class="flaw-item">
          <div
            class="jsx-2421865174 root"
            :style="{'background-image': 'url('+require('../../../assets/img/bianxing02.jpg')+')','background-size': 'cover', 'border-radius': '4px', 'padding-top': '100%'}"
          ></div>
          <p class="flaw-desc">轻度变形</p>
        </div>
      </div>
      <div class="flaw-row">
        <div class="flaw-item">
          <div
            class="jsx-2421865174 root"
            :style="{'background-image': 'url('+require('../../../assets/img/fanhuang03.jpg')+')','background-size': 'cover', 'border-radius': '4px', 'padding-top': '100%'}"
          ></div>
          <p class="flaw-desc">泛黄或褪色</p>
        </div>
        <div class="flaw-item">
          <div
            class="jsx-2421865174 root"
            :style="{'background-image': 'url('+require('../../../assets/img/fanhuang04.jpg')+')','background-size': 'cover', 'border-radius': '4px', 'padding-top': '100%'}"
          ></div>
          <p class="flaw-desc">泛黄或褪色</p>
        </div>
      </div>
      <div class="flaw-row">
        <div class="flaw-item">
          <div
            class="jsx-2421865174 root"
            :style="{'background-image': 'url('+require('../../../assets/img/zhehen03.jpg')+')','background-size': 'cover', 'border-radius': '4px', 'padding-top': '100%'}"
          ></div>
          <p class="flaw-desc">轻度折痕</p>
        </div>
        <div class="flaw-item">
          <div
            class="root"
            :style="{'background-image': 'url('+require('../../../assets/img/gaizhang.png')+')','background-size': 'cover', 'border-radius': '4px', 'padding-top': '100%'}"
          ></div>
          <p class="flaw-desc">有划线或标注（切口盖章）</p>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
body {
  margin: 0;
  color: rgb(51, 51, 51);
  background: rgb(242, 242, 242);
}
.root {
  background-color: rgb(255, 255, 255);
  color: rgb(51, 51, 51);
  padding: 28px 16px 40px;
}

.secondary {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  margin-top: 38px;
}
.secondary:first-child {
  margin-top: 0px;
}

.well {
  color: rgb(24, 195, 170);
}
.brand {
  color: rgb(214, 186, 140);
}
.medium {
  color: rgb(242, 129, 129);
}
.content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-left: 14px;
  margin-top: -2px;
}
.name {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 2px;
  font-size: 15px;
  font-weight: normal;
  line-height: 1.6;
}
.desc {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.47;
  text-align: left;
}
.rule-rows {
  margin-bottom: 30px;
}
.h1,
h2,
h3,
p {
  margin: 0;
  font: inherit;
}
.additional-info-header {
  padding-top: 18px;
  margin-bottom: 12px;
  border-top: 1px solid rgb(230, 230, 230);
  color: #929292;
  text-align: left;
}
.additional-info {
  margin-bottom: 17px;
  line-height: 1.5;
  color: #929292;
  text-align: left;
}
.fine-header {
  margin-bottom: 15px;
  padding-top: 18px;
  border-top: 1px solid rgb(230, 230, 230);
}
.fine-images {
  padding-bottom: 12px;
}
.fine-row.picture {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.fine-item.picture {
  flex-grow: 1;
  position: relative;
  margin: 0px 13px 13px 0px;
}
.fine-row.picture {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.fine-item.picture:last-child {
  margin-right: 0px;
}
.fine-item.picture {
  flex-grow: 1;
  position: relative;
  margin: 0px 13px 13px 0px;
}
.medium-header {
  padding-top: 23px;
  border-top: 1px solid rgb(230, 230, 230);
  text-align: left;
}
.medium-desc {
  line-height: 1.5;
  text-align: left;
  font-size: 15px;
  font-weight: 300;
  margin: 12px 0px;
}
.flaw-samples {
  font-size: 15px;
  font-weight: 300;
  margin: 18px 0px 15px;
  text-align: left;
}
.flaw-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.flaw-item {
  flex-grow: 1;
  position: relative;
  margin: 0px 13px 33px 0px;
}
.flaw-desc {
  width: 100%;
  margin-top: 2px;
  position: absolute;
  top: 100%;
  font-size: 12px;
  font-weight: 300;
  line-height: normal;
  text-align: center;
  color: rgb(51, 51, 51);
}
</style>


