<template>
  <div id="app-container-annual">
    <div class="annual-box">
      <div>
        <div class="m-7">
          <div class="m-7-k">
            <div class="m-7xz1 xzleft"></div>
            <div class="m-7xz2"></div>
            <div class="m-7xz3 xzleft"></div>
            <div class="m-7zt1">年产量</div>
            <div class="m-7zt2" id="sx1">60%</div>
          </div>
        </div>
      </div>
      <div style="margin:auto; top: 0; bottom: 0; margin-left: 0.5rem; right: 0;">
        <!--<div class="annual">2233 t</div>
        <dv-decoration-8 :reverse="true" style="width:150px;height:30px;" />-->
        <div style="margin-left: 0.75rem; margin-bottom: -0.2rem; font-weight:bold">C2H4</div>
        <dv-border-box-10 style="width:150px; height:0.7rem;">
          <div class="annual">2264 t</div>
        </dv-border-box-10>

        <div style="margin-left: 0.75rem; margin-bottom: -0.2rem; margin-top: 0.15rem; font-weight:bold">C3H6</div>
        <dv-border-box-10 :reverse="true" style="width:150px; height:0.7rem">
          <div class="annual">1149 t</div>
        </dv-border-box-10>
        <!--<div class="annual">650 t</div>
        <dv-decoration-8 :reverse="true" style="width:150px;height:30px;" />-->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {

  },
}
</script>

<style lang="scss">
  #app-container-annual {
    padding: 0.2rem 0.2rem 0;
    height: 2.9rem;
    min-width: 3.75rem;
    border-radius: 0.0625rem;
    .bg-color-black {
      height: 2.5rem;
      border-radius: 0.125rem;
    }
    .text {
      color: #c3cbde;
    }
  }
</style>
