vue双层进度条效果

进度条用的是elemen-ui的进度条组件。本来打算用css实现，但是没有找到双层的示例，，，被迫用进度条组件完成双层的进度条。

         <el-col :span="12" id="getHeight" ref="getHeight">
              <div style="text-align: center" class="process">
                <div>
                  <span class="process_text1">年累计&nbsp;&nbsp;</span>
                  <span class="process_text2">{{ fdl.bnlj }}&nbsp;</span>
                  <span class="process_text3">亿千瓦时</span>
                </div>
                <div style="margin-top: 5%">
                  <span class="process_text1">同比&nbsp;&nbsp;</span>
                  <span class="process_text4" v-if="fdl.isMoreYear"
                    >+&nbsp;{{ fdl.tbnlj }}</span
                  >
                  <span class="process_text6" v-else
                    >&nbsp;{{ fdl.tbnlj }}</span
                  >
                </div>
                <!-- :width="bigPro" :width="smallPro"-->
                <div style="text-align: center;margin-top:8%;position:relative;">
                  <div style="">
                    <el-progress
                      type="circle"
                      :percentage="fdl.rljd"
                      stroke-width="8"
                      color="#2264FF"
                      class="bigCircle"
                    ></el-progress>
                  </div>
                  <div style="position:absolute;top:9%;bottom:0;left:0;right:0;">
                    <el-progress
                      id="circle_two"
                      type="circle"
                      :percentage="fdl.njhwcl"
                      
                      stroke-width="8"
                      color="#FF6469"
                      class="smallCircle"
                    ></el-progress>
                  </div>
                </div>

主要是样式，开始也用定位把小圈定位到了大圈里面，但是页面缩小的时候我的两个圈位置就乱了，经过样式调整终于不会乱了，！！！！！实现了要的效果

在这里插入代码片