Vue.js 代码优化：将 HTML 代码转换为 Vue 组件

<template>
  <div class='Polaris-Layout__Section Polaris-Layout__Section--oneHalf'>
    <div class='Polaris-Card'>
      <div class='Polaris-Card__Section'>
        <div class='Polaris-Stack Polaris-Stack--vertical Polaris-Stack--spacingTight'>
          <div class='Polaris-Stack__Item'>
            <h2 class='Polaris-Heading'>追购总收入</h2>
          </div>
          <div class='Polaris-Stack__Item'>
            <div class='Polaris-Stack Polaris-Stack--distributionEqualSpacing'>
              <div class='Polaris-Stack__Item'>
                <span class='Polaris-TextStyle--variationStrong'>
                  <p id='upselltotalOrderAmount2' class='Polaris-DisplayText Polaris-DisplayText--sizeSmall'>$0</p>
                </span>
              </div>
              <div class='Polaris-Stack__Item'>
                <div class='sc-1annaye-0 zMMfK' style='color: rgb(69, 79, 91);'>
                  <p class='Polaris-DisplayText Polaris-DisplayText--sizeSmall'>
                    <span class='Polaris-TextStyle--variationStrong'></span>
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <br>
        <h3 aria-label='Revenue over time' class='Polaris-Subheading'>随时间变化的收入</h3>
      </div>
      <div style='margin-bottom: 0.75rem;'>
        <div id='lineChart2' style='width: 500px; height: 300px;'></div>
      </div>
    </div>
  </div>
  <div class='Polaris-Layout__Section Polaris-Layout__Section--oneThird'>
    <div class='Polaris-Card'>
      <div class='Polaris-Card__Section'>
        <div class='Polaris-Stack Polaris-Stack--vertical Polaris-Stack--spacingTight'>
          <div class='Polaris-Stack__Item'>
            <h2 class='Polaris-Heading'>总订单数</h2>
          </div>
          <div class='Polaris-Stack__Item'>
            <div class='Polaris-Stack Polaris-Stack--distributionEqualSpacing'>
              <div class='Polaris-Stack__Item'>
                <span class='Polaris-TextStyle--variationStrong'>
                  <p id='orderCount2' class='Polaris-DisplayText Polaris-DisplayText--sizeSmall'>0</p>
                </span>
              </div>
              <div class='Polaris-Stack__Item'>
                <div class='sc-1annaye-0 zMMfK' style='color: rgb(69, 79, 91);'>
                  <p class='Polaris-DisplayText Polaris-DisplayText--sizeSmall'>
                    <span class='Polaris-TextStyle--variationStrong'></span>
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <br>
        <h3 aria-label='Order over time' class='Polaris-Subheading'>随时间变化的订单</h3>
      </div>
      <div style='margin-bottom: 0.75rem;'>
        <div id='lineChart3' style='width: 350px; height: 300px;'></div>
      </div>
    </div>
  </div>
  <div class='Polaris-Layout__Section Polaris-Layout__Section--oneThird'>
    <div class='Polaris-Card'>
      <div class='Polaris-Card__Section'>
        <div class='Polaris-Stack Polaris-Stack--vertical Polaris-Stack--spacingTight'>
          <div class='Polaris-Stack__Item'>
            <h2 class='Polaris-Heading'>追购总订单数</h2>
          </div>
          <div class='Polaris-Stack__Item'>
            <div class='Polaris-Stack Polaris-Stack--distributionEqualSpacing'>
              <div class='Polaris-Stack__Item'>
                <span class='Polaris-TextStyle--variationStrong'>
                  <p id='upsellorderCount2' class='Polaris-DisplayText Polaris-DisplayText--sizeSmall'>0</p>
                </span>
              </div>
              <div class='Polaris-Stack__Item'>
                <div class='sc-1annaye-0 zMMfK' style='color: rgb(69, 79, 91);'>
                  <p class='Polaris-DisplayText Polaris-DisplayText--sizeSmall'>
                    <span class='Polaris-TextStyle--variationStrong'></span>
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <br>
        <h3 aria-label='Post-Upsell over time' class='Polaris-Subheading'>随时间变化的订单</h3>
      </div>
      <div style='margin-bottom: 0.75rem;'>
        <div id='lineChart4' style='width: 350px; height: 300px;'></div>
      </div>
    </div>
  </div>
  <div class='Polaris-Layout__Section Polaris-Layout__Section--oneThird'>
    <div class='Polaris-Card'>
      <div class='Polaris-Card__Header'>
        <h2 class='Polaris-Heading'>转换率</h2>
      </div>
      <div class='Polaris-Card__Section'>
        <div class='Polaris-Stack Polaris-Stack--vertical Polaris-Stack--spacingTight'>
          <div class='Polaris-Stack__Item'>
            <div class='Polaris-Stack Polaris-Stack--vertical Polaris-Stack--spacingTight'>
              <div class='Polaris-Stack__Item'>
                <div class='sc-1trh3dk-0 itwiyM'>ORDER CR</div>
              </div>
              <div class='Polaris-Stack__Item'>
                <div class='Polaris-Stack Polaris-Stack--distributionEqualSpacing'>
                  <div class='Polaris-Stack__Item'>
                    <span class='Polaris-TextStyle--variationStrong'>
                      <p class='Polaris-DisplayText Polaris-DisplayText--sizeSmall'>40%</p>
                    </span>
                  </div>
                  <div class='Polaris-Stack__Item'>
                    <div class='sc-1annaye-0 zMMfK' style='color: rgb(69, 79, 91);'>
                      <p class='Polaris-DisplayText Polaris-DisplayText--sizeSmall'></p>
                    </div>
                  </div>
                </div>
              </div>
              <div class='Polaris-Stack__Item'>
                <div width='40' class='sc-1trh3dk-1 dbckVR'></div>
              </div>
              <div class='layui-progress layui-progress-big'>
                <div class='layui-progress-bar' lay-percent='25%'></div>
              </div>
              <div class='Polaris-Stack__Item'>
                <span class=''>8 / 20</span>
              </div>
              <div class='Polaris-Stack__Item'>
                <div class='Polaris-Stack Polaris-Stack--distributionTrailing'>
                  <div class='Polaris-Stack__Item'>
                    <div>
                      <div class='sc-1trh3dk-2 fKPuES'></div>Order
                    </div>
                  </div>
                  <div class='Polaris-Stack__Item'>
                    <div>
                      <div class='sc-1trh3dk-3 ja-dLnX'></div>Checkout
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class='Polaris-Stack__Item'>
            <div class='sc-49955h-0 eGaizf' style='margin-bottom: 0.7rem;'></div>
          </div>
          <div class='Polaris-Stack__Item'>
            <div class='Polaris-Stack Polaris-Stack--vertical Polaris-Stack--spacingTight'>
              <div class='Polaris-Stack__Item'>
                <div class='sc-1trh3dk-0 itwiyM'>追购订单转化率</div>
              </div>
              <div class='Polaris-Stack__Item'>
                <div class='Polaris-Stack Polaris-Stack--distributionEqualSpacing'>
                  <div class='Polaris-Stack__Item'>
                    <span class='Polaris-TextStyle--variationStrong'>
                      <p id='upsellCr2' class='Polaris-DisplayText Polaris-DisplayText--sizeSmall'>0%</p>
                    </span>
                  </div>
                  <div class='Polaris-Stack__Item'>
                    <div class='sc-1annaye-0 zMMfK' style='color: rgb(69, 79, 91);'>
                      <p class='Polaris-DisplayText Polaris-DisplayText--sizeSmall'></p>
                    </div>
                  </div>
                </div>
              </div>
              <div class='Polaris-Stack__Item'>
                <div width='0' class='sc-1trh3dk-1 iZDNqt'></div>
              </div>
              <div class='layui-progress layui-progress-big'>
                <div class='layui-progress-bar' lay-percent='25%'></div>
              </div>
              <div class='Polaris-Stack__Item'>
                <span id='order_crCount' class=''>0 / 8</span>
              </div>
              <div class='Polaris-Stack__Item'>
                <div class='Polaris-Stack Polaris-Stack--distributionTrailing'>
                  <div class='Polaris-Stack__Item'>
                    <div>
                      <div class='sc-1trh3dk-2 fKPuES'></div>追购/订单
                    </div>
                  </div>
<pre><code>              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>
  </div>
</template>
<script>
// eslint-disable-next-line vue/multi-word-component-names
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Home',
};
</script>
<style>
@import '../style.css'; 
</style>