<template>
  <div class="fishbone">
    <div class="main-line"></div>
    <div class="top-bone">
      <div class="left-bone">
        <div class="left-bone-item">
          <div class="icon">
            <img src="../assets/images/company-logo1.png" alt="" />
          </div>
          <div class="text">{{ "商汤科技" }}</div>
          <div class="line"></div>
        </div>
        <div class="left-bone-item">
          <div class="icon">
            <img src="../assets/images/company-logo1.png" alt="" />
          </div>

          <div class="text">{{ "商汤科技" }}</div>
          <div class="line"></div>
        </div>
        <div class="left-bone-item">
          <div class="icon">
            <img src="../assets/images/company-logo1.png" alt="" />
          </div>

          <div class="text">{{ "商汤科技" }}</div>
          <div class="line"></div>
        </div>
        <div class="left-bone-item">
          <div class="icon">
            <img src="../assets/images/company-logo1.png" alt="" />
          </div>
          <div class="text">{{ "商汤科技" }}</div>
          <div class="line"></div>
        </div>
        <div class="left-bone-item">
          <div class="icon">
            <img src="../assets/images/company-logo1.png" alt="" />
          </div>
          <div class="text">{{ "商汤科技" }}</div>
          <div class="line"></div>
        </div>
      </div>
      <div class="right-bone">
        <div class="right-bone-item">
          <div class="line"></div>
          <div class="text">{{ "华为" }}</div>
          <div class="icon">
            <img src="../assets/images/company-logo2.png" alt="" />
          </div>
        </div>
        <div class="right-bone-item">
          <div class="line"></div>
          <div class="text">{{ "华为" }}</div>
          <div class="icon">
            <img src="../assets/images/company-logo2.png" alt="" />
          </div>
        </div>
        <div class="right-bone-item">
          <div class="line"></div>
          <div class="text">{{ "华为" }}</div>
          <div class="icon">
            <img src="../assets/images/company-logo2.png" alt="" />
          </div>
        </div>
        <div class="right-bone-item">
          <div class="line"></div>
          <div class="text">{{ "华为" }}</div>
          <div class="icon">
            <img src="../assets/images/company-logo2.png" alt="" />
          </div>
        </div>
        <div class="right-bone-item">
          <div class="line"></div>
          <div class="text">{{ "华为" }}</div>
          <div class="icon">
            <img src="../assets/images/company-logo2.png" alt="" />
          </div>
        </div>
      </div>
    </div>
    <div class="top-bone1">
      <div class="left-bone">
        <div class="left-bone-item">
          <div class="icon">
            <img src="../assets/images/company-logo1.png" alt="" />
          </div>
          <div class="text">{{ "商汤科技" }}</div>
          <div class="line"></div>
        </div>
        <div class="left-bone-item">
          <div class="icon">
            <img src="../assets/images/company-logo1.png" alt="" />
          </div>

          <div class="text">{{ "商汤科技" }}</div>
          <div class="line"></div>
        </div>
        <div class="left-bone-item">
          <div class="icon">
            <img src="../assets/images/company-logo1.png" alt="" />
          </div>

          <div class="text">{{ "商汤科技" }}</div>
          <div class="line"></div>
        </div>
        <div class="left-bone-item">
          <div class="icon">
            <img src="../assets/images/company-logo1.png" alt="" />
          </div>
          <div class="text">{{ "商汤科技" }}</div>
          <div class="line"></div>
        </div>
        <div class="left-bone-item">
          <div class="icon">
            <img src="../assets/images/company-logo1.png" alt="" />
          </div>
          <div class="text">{{ "商汤科技" }}</div>
          <div class="line"></div>
        </div>
      </div>
      <div class="right-bone">
        <div class="right-bone-item">
          <div class="line"></div>
          <div class="text">{{ "华为" }}</div>
          <div class="icon">
            <img src="../assets/images/company-logo2.png" alt="" />
          </div>
        </div>
        <div class="right-bone-item">
          <div class="line"></div>
          <div class="text">{{ "华为" }}</div>
          <div class="icon">
            <img src="../assets/images/company-logo2.png" alt="" />
          </div>
        </div>
        <div class="right-bone-item">
          <div class="line"></div>
          <div class="text">{{ "华为" }}</div>
          <div class="icon">
            <img src="../assets/images/company-logo2.png" alt="" />
          </div>
        </div>
        <div class="right-bone-item">
          <div class="line"></div>
          <div class="text">{{ "华为" }}</div>
          <div class="icon">
            <img src="../assets/images/company-logo2.png" alt="" />
          </div>
        </div>
        <div class="right-bone-item">
          <div class="line"></div>
          <div class="text">{{ "华为" }}</div>
          <div class="icon">
            <img src="../assets/images/company-logo2.png" alt="" />
          </div>
        </div>
      </div>
    </div>
    <div class="top-bone2">
      <div class="left-bone">
        <div class="left-bone-item">
          <div class="icon">
            <img src="../assets/images/company-logo1.png" alt="" />
          </div>
          <div class="text">{{ "商汤科技" }}</div>
          <div class="line"></div>
        </div>
        <div class="left-bone-item">
          <div class="icon">
            <img src="../assets/images/company-logo1.png" alt="" />
          </div>

          <div class="text">{{ "商汤科技" }}</div>
          <div class="line"></div>
        </div>
        <div class="left-bone-item">
          <div class="icon">
            <img src="../assets/images/company-logo1.png" alt="" />
          </div>

          <div class="text">{{ "商汤科技" }}</div>
          <div class="line"></div>
        </div>
        <div class="left-bone-item">
          <div class="icon">
            <img src="../assets/images/company-logo1.png" alt="" />
          </div>
          <div class="text">{{ "商汤科技" }}</div>
          <div class="line"></div>
        </div>
        <div class="left-bone-item">
          <div class="icon">
            <img src="../assets/images/company-logo1.png" alt="" />
          </div>
          <div class="text">{{ "商汤科技" }}</div>
          <div class="line"></div>
        </div>
      </div>
      <div class="right-bone">
        <div class="right-bone-item">
          <div class="line"></div>
          <div class="text">{{ "华为" }}</div>
          <div class="icon">
            <img src="../assets/images/company-logo2.png" alt="" />
          </div>
        </div>
        <div class="right-bone-item">
          <div class="line"></div>
          <div class="text">{{ "华为" }}</div>
          <div class="icon">
            <img src="../assets/images/company-logo2.png" alt="" />
          </div>
        </div>
        <div class="right-bone-item">
          <div class="line"></div>
          <div class="text">{{ "华为" }}</div>
          <div class="icon">
            <img src="../assets/images/company-logo2.png" alt="" />
          </div>
        </div>
        <div class="right-bone-item">
          <div class="line"></div>
          <div class="text">{{ "华为" }}</div>
          <div class="icon">
            <img src="../assets/images/company-logo2.png" alt="" />
          </div>
        </div>
        <div class="right-bone-item">
          <div class="line"></div>
          <div class="text">{{ "华为" }}</div>
          <div class="icon">
            <img src="../assets/images/company-logo2.png" alt="" />
          </div>
        </div>
      </div>
    </div>
    <div class="bottom-bone">
      <div class="left-bone">
        <div class="left-bone-item">
          <div class="icon">
            <img src="../assets/images/company-logo1.png" alt="" />
          </div>
          <div class="text">{{ "商汤科技" }}</div>
          <div class="line"></div>
        </div>
        <div class="left-bone-item">
          <div class="icon">
            <img src="../assets/images/company-logo1.png" alt="" />
          </div>
          <div class="text">{{ "商汤科技" }}</div>
          <div class="line"></div>
        </div>
        <div class="left-bone-item">
          <div class="icon">
            <img src="../assets/images/company-logo1.png" alt="" />
          </div>

          <div class="text">{{ "商汤科技" }}</div>
          <div class="line"></div>
        </div>
        <div class="left-bone-item">
          <div class="icon">
            <img src="../assets/images/company-logo1.png" alt="" />
          </div>
          <div class="text">{{ "商汤科技" }}</div>
          <div class="line"></div>
        </div>
        <div class="left-bone-item">
          <div class="icon">
            <img src="../assets/images/company-logo1.png" alt="" />
          </div>
          <div class="text">{{ "商汤科技" }}</div>
          <div class="line"></div>
        </div>
      </div>
      <div class="right-bone">
        <div class="right-bone-item">
          <div class="line"></div>
          <div class="text">{{ "华为" }}</div>
          <div class="icon">
            <img src="../assets/images/company-logo2.png" alt="" />
          </div>
        </div>
        <div class="right-bone-item">
          <div class="line"></div>
          <div class="text">{{ "华为" }}</div>
          <div class="icon">
            <img src="../assets/images/company-logo2.png" alt="" />
          </div>
        </div>
        <div class="right-bone-item">
          <div class="line"></div>
          <div class="text">{{ "华为" }}</div>
          <div class="icon">
            <img src="../assets/images/company-logo2.png" alt="" />
          </div>
        </div>
        <div class="right-bone-item">
          <div class="line"></div>
          <div class="text">{{ "华为" }}</div>
          <div class="icon">
            <img src="../assets/images/company-logo2.png" alt="" />
          </div>
        </div>
        <div class="right-bone-item">
          <div class="line"></div>
          <div class="text">{{ "华为" }}</div>
          <div class="icon">
            <img src="../assets/images/company-logo2.png" alt="" />
          </div>
        </div>
      </div>
    </div>
    <div class="bottom-bone1">
      <div class="left-bone">
        <div class="left-bone-item">
          <div class="icon">
            <img src="../assets/images/company-logo1.png" alt="" />
          </div>
          <div class="text">{{ "商汤科技" }}</div>
          <div class="line"></div>
        </div>
        <div class="left-bone-item">
          <div class="icon">
            <img src="../assets/images/company-logo1.png" alt="" />
          </div>

          <div class="text">{{ "商汤科技" }}</div>
          <div class="line"></div>
        </div>
        <div class="left-bone-item">
          <div class="icon">
            <img src="../assets/images/company-logo1.png" alt="" />
          </div>

          <div class="text">{{ "商汤科技" }}</div>
          <div class="line"></div>
        </div>
        <div class="left-bone-item">
          <div class="icon">
            <img src="../assets/images/company-logo1.png" alt="" />
          </div>
          <div class="text">{{ "商汤科技" }}</div>
          <div class="line"></div>
        </div>
        <div class="left-bone-item">
          <div class="icon">
            <img src="../assets/images/company-logo1.png" alt="" />
          </div>
          <div class="text">{{ "商汤科技" }}</div>
          <div class="line"></div>
        </div>
      </div>
      <div class="right-bone">
        <div class="right-bone-item">
          <div class="line"></div>
          <div class="text">{{ "华为" }}</div>
          <div class="icon">
            <img src="../assets/images/company-logo2.png" alt="" />
          </div>
        </div>
        <div class="right-bone-item">
          <div class="line"></div>
          <div class="text">{{ "华为" }}</div>
          <div class="icon">
            <img src="../assets/images/company-logo2.png" alt="" />
          </div>
        </div>
        <div class="right-bone-item">
          <div class="line"></div>
          <div class="text">{{ "华为" }}</div>
          <div class="icon">
            <img src="../assets/images/company-logo2.png" alt="" />
          </div>
        </div>
        <div class="right-bone-item">
          <div class="line"></div>
          <div class="text">{{ "华为" }}</div>
          <div class="icon">
            <img src="../assets/images/company-logo2.png" alt="" />
          </div>
        </div>
        <div class="right-bone-item">
          <div class="line"></div>
          <div class="text">{{ "华为" }}</div>
          <div class="icon">
            <img src="../assets/images/company-logo2.png" alt="" />
          </div>
        </div>
      </div>
    </div>
    <div class="bottom-bone2">
      <div class="left-bone">
        <div class="left-bone-item">
          <div class="icon">
            <img src="../assets/images/company-logo1.png" alt="" />
          </div>
          <div class="text">{{ "商汤科技" }}</div>
          <div class="line"></div>
        </div>
        <div class="left-bone-item">
          <div class="icon">
            <img src="../assets/images/company-logo1.png" alt="" />
          </div>

          <div class="text">{{ "商汤科技" }}</div>
          <div class="line"></div>
        </div>
        <div class="left-bone-item">
          <div class="icon">
            <img src="../assets/images/company-logo1.png" alt="" />
          </div>

          <div class="text">{{ "商汤科技" }}</div>
          <div class="line"></div>
        </div>
        <div class="left-bone-item">
          <div class="icon">
            <img src="../assets/images/company-logo1.png" alt="" />
          </div>
          <div class="text">{{ "商汤科技" }}</div>
          <div class="line"></div>
        </div>
        <div class="left-bone-item">
          <div class="icon">
            <img src="../assets/images/company-logo1.png" alt="" />
          </div>
          <div class="text">{{ "商汤科技" }}</div>
          <div class="line"></div>
        </div>
      </div>
      <div class="right-bone">
        <div class="right-bone-item">
          <div class="line"></div>
          <div class="text">{{ "华为" }}</div>
          <div class="icon">
            <img src="../assets/images/company-logo2.png" alt="" />
          </div>
        </div>
        <div class="right-bone-item">
          <div class="line"></div>
          <div class="text">{{ "华为" }}</div>
          <div class="icon">
            <img src="../assets/images/company-logo2.png" alt="" />
          </div>
        </div>
        <div class="right-bone-item">
          <div class="line"></div>
          <div class="text">{{ "华为" }}</div>
          <div class="icon">
            <img src="../assets/images/company-logo2.png" alt="" />
          </div>
        </div>
        <div class="right-bone-item">
          <div class="line"></div>
          <div class="text">{{ "华为" }}</div>
          <div class="icon">
            <img src="../assets/images/company-logo2.png" alt="" />
          </div>
        </div>
        <div class="right-bone-item">
          <div class="line"></div>
          <div class="text">{{ "华为" }}</div>
          <div class="icon">
            <img src="../assets/images/company-logo2.png" alt="" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<style lang="scss" scoped>
.fishbone {
  position: relative;
  width: 100%;
  height: 100%;
  background: #fafbfc;
  // background: pink;
  margin: 20px;
  .main-line {
    position: absolute;
    top: 280px;
    right: 0;
    width: 888px;
    height: 3px;
    background: rgba(174, 208, 255, 1);
  }
}
.top-bone {
  position: absolute;
  top: 20px;
  right: 200px;
  width: 3px;
  height: 260px;
  background: #90caf9;
  transform: skew(30deg);
  z-index: 1;
  .left-bone {
    color: #777;
    position: absolute;
    top: 0;
    left: -150px;
    width: 150px;
    height: 260px;
    // background: orange;
    .left-bone-item {
      transform: skew(-30deg);
      height: 35px;
      margin-bottom: 5px;
      margin-top: 15px;
      // background: #fff;
      display: flex;
      justify-content: flex-end;
      .icon {
        margin-top: 7px;
        width: 20px;
        height: 20px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .text {
        margin-left: 4px;
        height: 35px;
        line-height: 35px;
      }
      .line {
        margin-left: 7px;
        margin-top: 16px;
        width: 30px;
        height: 2px;
        background: rgba(174, 208, 255, 1);
      }
    }
  }
  .right-bone {
    color: #777;
    position: absolute;
    top: 0;
    right: -150px;
    width: 150px;
    height: 260px;
    // background: pink;
    .right-bone-item {
      transform: skew(-30deg);
      height: 35px;
      margin-bottom: 15px;
      margin-top: 5px;
      display: flex;
      justify-content: flex-start;

      .line {
        margin-right: 7px;
        margin-top: 16px;
        width: 30px;
        height: 2px;
        background: rgba(174, 208, 255, 1);
      }

      .text {
        margin-right: 4px;
        height: 35px;
        line-height: 35px;
      }
      .icon {
        margin-top: 7px;
        width: 20px;
        height: 20px;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
.top-bone1 {
  position: absolute;
  top: 20px;
  right: 500px;
  width: 3px;
  height: 260px;
  background: #90caf9;
  transform: skew(30deg);
  z-index: 1;
  .left-bone {
    color: #777;
    position: absolute;
    top: 0;
    left: -150px;
    width: 150px;
    height: 260px;
    // background: orange;
    .left-bone-item {
      transform: skew(-30deg);
      height: 35px;
      margin-bottom: 5px;
      margin-top: 15px;
      // background: #fff;
      display: flex;
      justify-content: flex-end;
      .icon {
        margin-top: 7px;
        width: 20px;
        height: 20px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .text {
        margin-left: 4px;
        height: 35px;
        line-height: 35px;
      }
      .line {
        margin-left: 7px;
        margin-top: 16px;
        width: 30px;
        height: 2px;
        background: rgba(174, 208, 255, 1);
      }
    }
  }
  .right-bone {
    color: #777;
    position: absolute;
    top: 0;
    right: -150px;
    width: 150px;
    height: 260px;
    // background: pink;
    .right-bone-item {
      transform: skew(-30deg);
      height: 35px;
      margin-bottom: 15px;
      margin-top: 5px;
      display: flex;
      justify-content: flex-start;

      .line {
        margin-right: 7px;
        margin-top: 16px;
        width: 30px;
        height: 2px;
        background: rgba(174, 208, 255, 1);
      }

      .text {
        margin-right: 4px;
        height: 35px;
        line-height: 35px;
      }
      .icon {
        margin-top: 7px;
        width: 20px;
        height: 20px;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
.top-bone2 {
  position: absolute;
  top: 20px;
  right: 800px;
  width: 3px;
  height: 260px;
  background: #90caf9;
  transform: skew(30deg);
  z-index: 1;
  .left-bone {
    color: #777;
    position: absolute;
    top: 0;
    left: -150px;
    width: 150px;
    height: 260px;
    // background: orange;
    .left-bone-item {
      transform: skew(-30deg);
      height: 35px;
      margin-bottom: 5px;
      margin-top: 15px;
      // background: #fff;
      display: flex;
      justify-content: flex-end;
      .icon {
        margin-top: 7px;
        width: 20px;
        height: 20px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .text {
        margin-left: 4px;
        height: 35px;
        line-height: 35px;
      }
      .line {
        margin-left: 7px;
        margin-top: 16px;
        width: 30px;
        height: 2px;
        background: rgba(174, 208, 255, 1);
      }
    }
  }
  .right-bone {
    color: #777;
    position: absolute;
    top: 0;
    right: -150px;
    width: 150px;
    height: 260px;
    // background: pink;
    .right-bone-item {
      transform: skew(-30deg);
      height: 35px;
      margin-bottom: 15px;
      margin-top: 5px;
      display: flex;
      justify-content: flex-start;

      .line {
        margin-right: 7px;
        margin-top: 16px;
        width: 30px;
        height: 2px;
        background: rgba(174, 208, 255, 1);
      }

      .text {
        margin-right: 4px;
        height: 35px;
        line-height: 35px;
      }
      .icon {
        margin-top: 7px;
        width: 20px;
        height: 20px;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
.bottom-bone {
  position: absolute;
  top: 280px;
  right: 360px;
  width: 3px;
  height: 260px;
  background: #90caf9;
  transform: skew(-30deg);
  z-index: 1;
  .left-bone {
    color: #777;
    position: absolute;
    top: 0;
    left: -150px;
    width: 150px;
    height: 260px;
    // background: orange;
    .left-bone-item {
      transform: skew(30deg);
      height: 35px;
      margin-bottom: 5px;
      margin-top: 15px;
      // background: #fff;
      display: flex;
      justify-content: flex-end;
      .icon {
        margin-top: 7px;
        width: 20px;
        height: 20px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .text {
        margin-left: 4px;
        height: 35px;
        line-height: 35px;
      }
      .line {
        margin-left: 7px;
        margin-top: 16px;
        width: 30px;
        height: 2px;
        background: rgba(174, 208, 255, 1);
      }
    }
  }
  .right-bone {
    color: #777;
    position: absolute;
    top: 0;
    right: -150px;
    width: 150px;
    height: 260px;
    // background: pink;
    .right-bone-item {
      transform: skew(30deg);
      height: 35px;
      margin-bottom: 15px;
      margin-top: 5px;
      display: flex;
      justify-content: flex-start;

      .line {
        margin-right: 7px;
        margin-top: 16px;
        width: 30px;
        height: 2px;
        background: rgba(174, 208, 255, 1);
      }

      .text {
        margin-right: 4px;
        height: 35px;
        line-height: 35px;
      }
      .icon {
        margin-top: 7px;
        width: 20px;
        height: 20px;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
.bottom-bone1 {
  position: absolute;
  top: 280px;
  right: 660px;
  width: 3px;
  height: 260px;
  background: #90caf9;
  transform: skew(-30deg);
  z-index: 1;
  .left-bone {
    color: #777;
    position: absolute;
    top: 0;
    left: -150px;
    width: 150px;
    height: 260px;
    // background: orange;
    .left-bone-item {
      transform: skew(30deg);
      height: 35px;
      margin-bottom: 5px;
      margin-top: 15px;
      // background: #fff;
      display: flex;
      justify-content: flex-end;
      .icon {
        margin-top: 7px;
        width: 20px;
        height: 20px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .text {
        margin-left: 4px;
        height: 35px;
        line-height: 35px;
      }
      .line {
        margin-left: 7px;
        margin-top: 16px;
        width: 30px;
        height: 2px;
        background: rgba(174, 208, 255, 1);
      }
    }
  }
  .right-bone {
    color: #777;
    position: absolute;
    top: 0;
    right: -150px;
    width: 150px;
    height: 260px;
    // background: pink;
    .right-bone-item {
      transform: skew(30deg);
      height: 35px;
      margin-bottom: 15px;
      margin-top: 5px;
      display: flex;
      justify-content: flex-start;

      .line {
        margin-right: 7px;
        margin-top: 16px;
        width: 30px;
        height: 2px;
        background: rgba(174, 208, 255, 1);
      }

      .text {
        margin-right: 4px;
        height: 35px;
        line-height: 35px;
      }
      .icon {
        margin-top: 7px;
        width: 20px;
        height: 20px;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
.bottom-bone2 {
  position: absolute;
  top: 280px;
  right: 960px;
  width: 3px;
  height: 260px;
  background: #90caf9;
  transform: skew(-30deg);
  z-index: 1;
  .left-bone {
    color: #777;
    position: absolute;
    top: 0;
    left: -150px;
    width: 150px;
    height: 260px;
    // background: orange;
    .left-bone-item {
      transform: skew(30deg);
      height: 35px;
      margin-bottom: 5px;
      margin-top: 15px;
      // background: #fff;
      display: flex;
      justify-content: flex-end;
      .icon {
        margin-top: 7px;
        width: 20px;
        height: 20px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .text {
        margin-left: 4px;
        height: 35px;
        line-height: 35px;
      }
      .line {
        margin-left: 7px;
        margin-top: 16px;
        width: 30px;
        height: 2px;
        background: rgba(174, 208, 255, 1);
      }
    }
  }
  .right-bone {
    color: #777;
    position: absolute;
    top: 0;
    right: -150px;
    width: 150px;
    height: 260px;
    // background: pink;
    .right-bone-item {
      transform: skew(30deg);
      height: 35px;
      margin-bottom: 15px;
      margin-top: 5px;
      display: flex;
      justify-content: flex-start;

      .line {
        margin-right: 7px;
        margin-top: 16px;
        width: 30px;
        height: 2px;
        background: rgba(174, 208, 255, 1);
      }

      .text {
        margin-right: 4px;
        height: 35px;
        line-height: 35px;
      }
      .icon {
        margin-top: 7px;
        width: 20px;
        height: 20px;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
</style>