fix: progress cricleprogress taro 适配

src/packages/__VUE/circleprogress/index.scss

@@ -7,13 +7,38 @@
     left: 50%;
     transform: translate(-50%, -50%);
   }
+  .nut-circleprogress__right {
+    width: 50%;
+    height: 100%;
+    position: relative;
+    overflow: hidden;
+    float: right;
+  }
+  .nut-circleprogress__left {
+    width: 50%;
+    height: 100%;
+    position: relative;
+    overflow: hidden;
+    float: left;
+  }
 
   .nut-circleprogress__line {
     position: absolute;
-    width: 50%;
+    width: 100%;
     height: 100%;
     top: 0;
     overflow: hidden;
+    &.nut-circleprogress__l {
+      top: 0px;
+      transform: rotate(0deg);
+      left: 0px;
+    }
+
+    &.nut-circleprogress__r {
+      top: 0px;
+      transform: rotate(180deg);
+      right: 0px;
+    }
   }
 
   .nut-circleprogress__progress {
@@ -27,18 +52,6 @@
     color: rgba(29, 29, 33, 1);
   }
 
-  .nut-circleprogress__l {
-    top: 0px;
-    transform: rotate(0deg);
-    left: 0px;
-  }
-
-  .nut-circleprogress__r {
-    top: 0px;
-    transform: rotate(180deg);
-    right: 0px;
-  }
-
   .nut-circleprogress__line__c {
     width: 200%;
     height: 100%;

src/packages/__VUE/circleprogress/index.taro.vue

@@ -1,12 +1,16 @@
 <template>
   <div :class="classes" :style="pieStyle">
-    <div v-if="!isMobile">
-      <div class="nut-circleprogress__line nut-circleprogress__r">
-        <div class="nut-circleprogress__line__c" :style="RightStyle"></div>
+    <div :style="mobileStyle" v-if="!isMobile">
+      <div class="nut-circleprogress__right">
+        <div class="nut-circleprogress__line nut-circleprogress__r">
+          <div class="nut-circleprogress__line__c" :style="RightStyle"></div>
+        </div>
       </div>
-      <div class="nut-circleprogress__progress">{{ progress }}%</div>
-      <div class="nut-circleprogress__line nut-circleprogress__l">
-        <div class="nut-circleprogress__line__c" :style="LeftStyle"></div>
+      <div class="nut-circleprogress__progress">{{ progress }} %</div>
+      <div class="nut-circleprogress__left">
+        <div class="nut-circleprogress__line nut-circleprogress__l">
+          <div class="nut-circleprogress__line__c" :style="LeftStyle"></div>
+        </div>
       </div>
     </div>
     <div v-else>
@@ -120,11 +124,17 @@ export default create({
         height: (cricleData.radius + cricleData.strokeOutWidth) * 2 + 'px'
       };
     });
+    const mobileStyle = computed(() => {
+      return {
+        width: '100%',
+        height: '100%'
+      };
+    });
     const RightStyle = computed(() => {
       // taro转的h5不支持使用border-top这种边框属性，目前解决方案，taro转的h5使用svg实现
       return {
         transform: `rotate(${rotateRight.value + 'deg'})`,
-        transition: `all 0.2s`,
+        transition: `all 0.3s`,
         borderTop: `${InnerWidth.value + 'px'} solid ${cricleData.backColor};`,
         borderLeft: `${InnerWidth.value + 'px'} solid  ${
           cricleData.backColor
@@ -141,7 +151,7 @@ export default create({
       // taro转的h5不支持使用border-top这种边框属性
       return {
         transform: `rotate(${rotateLeft.value + 'deg'})`,
-        transition: `all 0.2s`,
+        transition: `all 0.3s`,
         borderTop: `${InnerWidth.value + 'px'} solid ${cricleData.backColor};`,
         borderLeft: `${InnerWidth.value + 'px'} solid  ${
           cricleData.backColor
@@ -191,7 +201,8 @@ export default create({
       RightStyle,
       LeftStyle,
       option,
-      arcLength
+      arcLength,
+      mobileStyle
     };
   }
 });

src/packages/__VUE/progress/index.scss

@@ -92,7 +92,7 @@
     border-radius: 5px;
     position: absolute;
     transition: all 0.4s;
-    top: -26%;
+    top: -42%;
   }
   .nut-icon-success,
   .nut-icon-fail {

src/packages/__VUE/progress/index.taro.vue

@@ -97,7 +97,7 @@ export default create({
   },
   setup(props, { emit }) {
     const height = ref(props.strokeWidth + 'px');
-    const progressOuter = ref();
+    const progressOuter = ref<any>();
     const left = ref();
     const bgStyle = computed(() => {
       return {
@@ -112,13 +112,13 @@ export default create({
     });
     const slideLeft = async (values: String | Number) => {
       if (Taro.getEnv() === 'WEB') {
-        left.value =
-          progressOuter.value.offsetWidth * Number(values) * 0.01 - 4 + 'px';
+        setTimeout(() => {
+          left.value =
+            progressOuter.value.offsetWidth * Number(values) * 0.01 - 4 + 'px';
+        }, 200);
       } else {
         setTimeout(() => {
-          const query = (Taro.createSelectorQuery() as any).in(
-            getCurrentInstance
-          );
+          const query = Taro.createSelectorQuery() as any;
           query
             .select('.nut-progress-outer')
             .boundingClientRect((rec: any) => {

src/packages/__VUE/progress/index.vue

@@ -120,13 +120,13 @@ export default create({
         console.log('values', values);
 
         left.value =
-          progressOuter.value.offsetWidth * Number(values) * 0.01 - 4 + 'px';
+          progressOuter.value.offsetWidth * Number(values) * 0.01 - 5 + 'px';
       }
     );
     onMounted(() => {
       left.value =
         progressOuter.value.offsetWidth * Number(props.percentage) * 0.01 -
-        4 +
+        5 +
         'px';
     });
     return {