WebcrawlerProject
/
index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="tree">
    <div class="row row-0">
      <div class="ul-container">
        <ul class="bottom-line">
          <li>
            <span>净资产收益率</span>
            <span>9.16%</span>
            <div title="数据与计算不一致？&#13;该指标取自上市公司定期报告披露值">?</div>
          </li>
        </ul>
      </div>
    </div>
    <div class="row row-1">
      <div class="ul-container">
        <ul class="bottom-line top-line-after">
          <li>
            <span>总资产净利率</span>
            <span>2.81%</span>
            <div title="数据与计算不一致？&#13;总资产净利率-净利润/[(期初总资产+期末总资产)/2]">?</div>
          </li>
        </ul>
      </div>
      <div class="ul-container">
        <ul class="top-line-after"  style="width: 240px;">
          <li>
            <span>归属母公司股东的净利润占比</span>
            <span >100.00%</span>
          </li>
        </ul>
      </div>
      <div class="ul-container">
        <ul class="bottom-line top-line-after">
          <li>
            <span>权益乘数</span>
            <span>3.26%</span>
          </li>
        </ul>
      </div>
    </div>
    <div class="row row-2">
      <div class="ul-container">
        <ul class="bottom-line top-line-after">
          <li>
            <span>营业净利润率</span>
            <span>73.15%</span>
          </li>
        </ul>
      </div>
      <div class="ul-container">
        <ul class="bottom-line top-line-after">
          <li>
            <span>总资产周转率</span>
            <span>0.04次</span>
            <div title="数据与计算不一致？&#13;总资产周转率一营业总收入[(期初总资产+期末总资产)/2]">?</div>
          </li>
        </ul>
      </div>
      <div class="ul-container">
        <ul class="bottom-line top-line-after">
          <li>
            <span>资产负债率</span>
            <span>69.37%</span>
          </li>
        </ul>
      </div>
    </div>
    <div class="row row-3">
      <div class="ul-container">
        <ul class="bottom-line top-line-after">
          <li>
            <span>净利润</span>
            <span>2.18亿</span>
          </li>
        </ul>
      </div>
      <div class="ul-container" style="width: 340px">
        <ul class="top-line-after">
          <li>
            <span>营业总收入</span>
            <span>34.88亿</span>
          </li>
        </ul>
        <ul class="top-line-after">
          <li>
            <span>营业总收入</span>
            <span>2.88亿</span>
          </li>
        </ul>
      </div>
      <div class="ul-container">
        <ul class="bottom-line top-line-after">
          <li>
            <span>资产总额</span>
            <span>81.18亿</span>
          </li>
        </ul>
      </div>
      <div class="ul-container" style="width: 340px">
        <ul class="top-line-after">
          <li>
            <span>负债总额</span>
            <span>3.82亿</span>
          </li>
        </ul>
        <ul class="top-line-after">
          <li>
            <span>资产总额</span>
            <span>11.2亿</span>
          </li>
        </ul>
      </div>
      <div class="lines">
        <div></div>
        <div></div>
        <div></div>
        <div>÷</div>
        <div>÷</div>
        <div>÷</div>
      </div>
    </div>
    <div class="row row-4">
      <div class="ul-container">
        <ul class="bottom-line top-line-after">
          <li>
            <span>收入总额</span>
            <span>12.23亿</span>
            <div title="收入总额营业总收入+(其他收益+投资收益+汇兑收益+净敞口套期收益+公允价值变动收益+资产处置收益）+营业外收入">?</div>
          </li>
        </ul>
      </div>
      <div class="ul-container" style="width: 340px">
        <ul class="bottom-line top-line-after">
          <li>
            <span>成本总额</span>
            <span>12.32亿</span>
            <div title="成本总额-营业总成本-资产减值损失(损失为负数)-信用减值损失(损失为负数)+所得税费用">?</div>
          </li>
        </ul>
      </div>
      <div class="ul-container">
        <ul class="bottom-line top-line-after">
          <li>
            <span>流动资产</span>
            <span>11.21亿</span>
          </li>
        </ul>
      </div>
      <div class="ul-container" style="width: 340px">
        <ul class="bottom-line top-line-after">
          <li>
            <span>非流动资产</span>
            <span>51.22亿</span>
          </li>
        </ul>
      </div>
      <div class="lines">
        <div></div>
        <div></div>
        <div>-</div>
        <div>+</div>
      </div>
    </div>
    <div class="row">
      <div class="ul-container width-border" style="height: 360px;">
        <ul>
          <li>
            <span>营业总收入</span>
            <span>11.65亿</span>
          </li>
          <li>
            <span>投资收益</span>
            <span>24.35亿</span>
          </li>
          <li>
            <span>公允价值变动收益</span>
            <span>56.32亿</span>
          </li>
          <li>
            <span>资产处置收益</span>
            <span>12.32亿</span>
          </li>
          <li>
            <span>汇兑收益</span>
            <span>21.12亿</span>
          </li>
          <li>
            <span>· · ·</span>
          </li>
        </ul>
      </div>
      <div class="ul-container width-border" style="height: 420px; width: 340px">
        <ul>
          <li>
            <span>营业成本</span>
            <span>12.38亿</span>
          </li>
          <li>
            <span>税金及附加</span>
            <span>34.78亿</span>
          </li>
          <li>
            <span>所得税费用</span>
            <span>67.34亿</span>
          </li>
          <li>
            <span>资产减值损失</span>
            <span>23.48亿</span>
          </li>
          <li>
            <span>信用减值损失</span>
            <span>65.43亿</span>
          </li>
          <li>
            <span>营业外支出</span>
            <span>83.08亿</span>
          </li>
          <li>
            <span>· · ·</span>
          </li>
        </ul>
        <div>
          <ul class="bottom-line" style="margin-bottom: 20px">
            <li>
              <span>期间费用</span>
              <span>12.83亿</span>
            </li>
          </ul>
          <ul class="top-line width-border">
            <li>
              <span>财务费用</span>
              <span>34.32亿</span>
            </li>
            <li>
              <span>销售费用</span>
              <span>12.34亿</span>
            </li>
            <li>
              <span>管理费用</span>
              <span>45.43亿</span>
            </li>
            <li>
              <span>研发费用</span>
              <span>12.55亿</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="ul-container width-border" style="height: 480px;">
        <ul>
          <li>
            <span>货币资金</span>
            <span>21.32亿</span>
          </li>
          <li>
            <span>交易性金融资产</span>
            <span>1.24亿</span>
          </li>
          <li>
            <span>应收票据</span>
            <span>3.45亿</span>
          </li>
          <li>
            <span>应收账款</span>
            <span>0.88亿</span>
          </li>
          <li>
            <span>应收款项融资</span>
            <span>1.88亿</span>
          </li>
          <li>
            <span>其他应收款</span>
            <span>84.88亿</span>
          </li>
          <li>
            <span>存货</span>
            <span>4.66亿</span>
          </li>
          <li>
            <span>· · ·</span>
          </li>
        </ul>
      </div>
      <div class="ul-container width-border" style="height: 540px; width: 340px"">
        <ul>
          <li>
            <span>债权投资</span>
            <span>4.88亿</span>
          </li>
          <li>
            <span>其他债权投资</span>
            <span>23.33亿</span>
          </li>
          <li>
            <span>其他权益工具投资</span>
            <span>12.23亿</span>
          </li>
          <li>
            <span>长期应收款</span>
            <span>43.21亿</span>
          </li>
          <li>
            <span>长期股权投资</span>
            <span>12.23亿</span>
          </li>
          <li>
            <span>投资性房地产</span>
            <span>21.45亿</span>
          </li>
          <li>
            <span>固定资产</span>
            <span>1.24亿</span>
          </li>
          <li>
            <span>在建工程</span>
            <span>2.38亿</span>
          </li>
          <li>
            <span>· · ·</span>
          </li>
        </ul>
        <div>
          <ul>
            <li>
              <span>使用权资产</span>
              <span>12.88亿</span>
            </li>
            <li>
              <span>无形资产</span>
              <span>85.8亿</span>
            </li>
            <li>
              <span>开发支出</span>
              <span>4.88亿</span>
            </li>
            <li>
              <span>商誉</span>
              <span>83.8亿</span>
            </li>
            <li>
              <span>长期待摊费用</span>
              <span>12.87亿</span>
            </li>
            <li>
              <span>递延所得税资产</span>
              <span>12.00亿</span>
            </li>
            <li>
              <span>可供出售金融资产</span>
              <span>1.28亿</span>
            </li>
            <li>
              <span>持有至到期投资</span>
              <span>54.8亿</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="lines">
      <div></div>
      <div></div>
      <div>×</div>
      <div>1÷(1-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;)</div>
      <div>单位: 元</div>
    </div>
  </div>
</body>
<style>
  body {
    --bg-color: rgb(34,34,34);
    --font-color: rgb(204,209,115);
    --font-color-grey: rgb(90,90,90);
    background-color: black;
    min-width: 1100px;
  }
  ul li div {
    position: absolute;
    right:4px;
    top: 9px;
    width: 14px;
    height: 14px;
    font-size: 12px;
    text-align: center;
    line-height: 14px;
    border-radius: 50%;
    background-color: red;
  }
  .row {
    display: flex;
    position: relative;
  }
  .lines {
    flex: none;
  }
  .lines div {
    position: absolute;
    height: 2px;
    background-color: red;
  }
  #tree>.lines div:nth-child(1) {
    top: 79px;
    left: 356px;
    width: 543px;
  }
  #tree>.lines div:nth-child(2) {
    top: 159px;
    left: 177px;
    width: 362px;
  }
  #tree>.lines div:nth-child(3) {
    height: 20px;
    font-size: 50px;
    background-color: transparent;
    color: var(--font-color-grey);
    top: 164px;
    left: 342px;
    width: 362px;
  }
  #tree>.lines div:nth-child(4) {
    height: 20px;
    font-size: 50px;
    background-color: transparent;
    color: var(--font-color-grey);
    top: 164px;
    left: 690px;
    width: 362px;
  }
  #tree>.lines div:nth-child(5) {
    height: 20px;
    font-size: 18px;
    background-color: transparent;
    color: #fff;
    top: 0;
    right: 0;
  }
  .row-0 {
    display: flex;
    justify-content: center;
  }
  .row-1 {
    display: flex;
    justify-content: space-between;
    padding: 0 90px 0 270px;
  }
  .row-2 {
    display: flex;
    justify-content: space-between;
    padding: 0 90px;
  }
  .row-2 .lines div:nth-child(1) {
    top:0;
    left: 179px;
    width: 299px;
  }
  .row-3 .lines div:nth-child(1) {
    top: -1px;
    left: 89px;
    width: 180px;
  }
  .row-3 .lines div:nth-child(2) {
    top:-1px;
    left: 449px;
    width: 180px;
  }
  .row-3 .lines div:nth-child(3) {
    top:-1px;
    left: 809px;
    width: 180px;
  }
  .row-3 .lines div:nth-child(4) {
    top: 2px;
    left: 880px;
    height: 20px;
    font-size: 50px;
    background-color: transparent;
    color: var(--font-color-grey);
    width: 362px;
  }
  .row-3 .lines div:nth-child(5) {
    top: 2px;
    left: 520px;
    height: 20px;
    font-size: 50px;
    background-color: transparent;
    color: var(--font-color-grey);
    width: 362px;
  }
  .row-3 .lines div:nth-child(6) {
    top: 2px;
    left: 160px;
    height: 20px;
    font-size: 50px;
    background-color: transparent;
    color: var(--font-color-grey);
    width: 362px;
  }
  .row-4 .lines div:nth-child(1) {
    top:0;
    left: 89px;
    width: 180px;
  }
  .row-4 .lines div:nth-child(2) {
    top:-1px;
    left: 629px;
    width: 180px;
  }
  .row-4 .lines div:nth-child(3) {
    top: 2px;
    left: 169px;
    height: 20px;
    font-size: 50px;
    background-color: transparent;
    color: var(--font-color-grey);
  }
  .row-4 .lines div:nth-child(4) {
    top: 2px;
    left: 700px;
    height: 20px;
    font-size: 50px;
    background-color: transparent;
    color: var(--font-color-grey);
  }
  .ul-container {
    margin: 0 10px 0px 10px;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
  }
  #tree {
    display: flex;
    flex-direction: column;
    width: 1080px;
    position: relative;
    margin: 0 auto;
  }
  #tree ul {
    list-style: none;
    width: 140px;
    margin: 0;
    padding: 0;
    position: relative;
    box-sizing: border-box;
  }
  #tree ul.bottom-line:before, #tree ul.top-line:before {
    content:'';
    position: absolute;
    width: 2px;
    height: 11px;
    right: 50%;
    transform: translateX(-50%);
    background-color: red;
  }
  #tree ul.bottom-line:before {
    bottom: -11px;
  }
  #tree ul.top-line:before {
    top: -11px;
  }
  #tree ul.bottom-line-after:after, #tree ul.top-line-after:after {
    content:'';
    position: absolute;
    width: 2px;
    height: 11px;
    right: 50%;
    transform: translateX(-50%);
    background-color: red;
  }
  #tree ul.bottom-line-after:after {
    bottom: -11px;
  }
  #tree ul.top-line-after:after {
    top: -11px;
  }
  .width-border {
    border: 1px solid red;
  }
  #tree li {
    box-sizing: border-box;
    background-color: var(--bg-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #fff;
  }
  #tree li span {
    height: 30px;
    text-align: center;
    display: block;
    width: 100%;
    height: 50%;
    line-height: 30px;
  }
  #tree li span:not(:first-child) {
    background-color: black;
    border: 3px solid var(--bg-color);
    border-top: none;
    color: var(--font-color);
    line-height: 28px;
    box-sizing: border-box;
  }
</style>
</html>