增加报修图片和处理图片的展示

src/custom/ShowPicture.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="ShowPicture">
+    <div class="label">报修图片</div>
+    <div class="imgs-container" v-if="repairImgs.length">
+      <img :src="img.previewUrl" v-for="(img, index) in repairImgs" :key="index" class="imgs" @click="showImgs(repairImgs)" />
+    </div>
+    <div class="label">处理图片</div>
+    <div class="imgs-container" v-if="handlerImgs.length">
+      <img :src="img.previewUrl" v-for="(img, index) in handlerImgs" :key="index" class="imgs" @click="showImgs(handlerImgs)" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ShowPicture',
+  data(){
+    return {
+      repairImgs: [], //报修图片
+      handlerImgs: [], //处理图片
+    }
+  },
+  props:['processInstanceId'],
+  methods:{
+    // 获取报修图片
+    getRepairImgs() {
+      var that = this;
+      that.$http
+        .get(
+          "service/common/common/listAttachment/wechatRequesterIncident/" +
+            that.processInstanceId,
+          {}
+        )
+        .then(function (res) {
+          console.log(res.data);
+          res.data.data = res.data.data || [];
+          res.data.data.forEach(v => {
+            v.previewUrl = location.origin + "/file" + v.relativeFilePath;
+          })
+          that.repairImgs = res.data.data;
+        });
+    },
+    // 获取处理图片
+    getHandlerImgs() {
+      var that = this;
+      that.$http
+        .get(
+          "service/common/common/listAttachment/incident/" +
+            that.processInstanceId,
+          {}
+        )
+        .then(function (res) {
+          console.log(res.data);
+          res.data.data = res.data.data || [];
+          res.data.data.forEach(v => {
+            v.previewUrl = location.origin + "/file" + v.relativeFilePath;
+          })
+          that.handlerImgs = res.data.data;
+        });
+    },
+    //展示图片
+    showImgs(imgs){
+      this.$createImagePreview({
+        imgs:imgs.map(v=>v.previewUrl)
+      }).show()
+    },
+  },
+  created(){
+    this.getRepairImgs();
+    this.getHandlerImgs();
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.ShowPicture{
+  .label {
+    background-color: #eeeeee;
+    height: 0.6rem;
+    line-height: 0.58rem;
+    padding-left: 0.2rem;
+    font-size: 0.24rem;
+    color: #666666;
+    span {
+      font-size: 0.2rem;
+      display: inline-block;
+      margin-left: 0.08rem;
+      color: #999999;
+    }
+    &.formLabel {
+      background-color: #fff;
+    }
+  }
+
+  .imgs-container {
+    display: flex;
+    flex-wrap: wrap;
+    img {
+      width: 1.5rem;
+      height: 1.5rem;
+      margin: 1%;
+      border: 1px dotted #ccc;
+    }
+  }
+}
+</style>

src/views/againAssign.vue

@@ -41,26 +41,7 @@
               >隐藏详情<<</span
             >
           </p>
-          <div class="imgs-container" v-if="imgs.length">
-            <div class="imgs-cont" @click="showImgs(imgs)">
-              <img
-                v-if="
-                  img.suffix == 'jpeg' ||
-                  img.suffix == 'jpg' ||
-                  img.suffix == 'gif' ||
-                  img.suffix == 'png' ||
-                  img.suffix == 'svg' ||
-                  img.suffix == 'pdf'
-                "
-                :src="img.previewUrl"
-                v-for="(img, index) in imgs"
-                class="imgs"
-              />
-              <p v-else>
-                <a :href="[img.previewUrl]">{{ img.name }}</a>
-              </p>
-            </div>
-          </div>
+          <ShowPicture :processInstanceId="processInstanceId"></ShowPicture>
           <div class="label" id="assignee">重新指派</div>
           <div class="info">
             <p>
@@ -155,6 +136,7 @@
 import LoadIng from "./../views/loading.vue";
 import PrompTing from "./../views/prompting.vue";
 import EventInformation from './../components/EventInformation/index.vue'
+import ShowPicture from './../custom/ShowPicture.vue'
 export default {
   data() {
     return {
@@ -166,7 +148,6 @@ export default {
       actives: "info",
       processInstanceId: "",
       progressInfo: [], //处理进度
-      imgs: [], //图片
       model: {}, //提交数据
       handleUserOrGroup: false, //处理人/处理组
       handlerUserArr: [], //处理人
@@ -180,6 +161,7 @@ export default {
     LoadIng,
     PrompTing,
     EventInformation,
+    ShowPicture,
   },
   methods: {
     //   获取事件数据
@@ -201,27 +183,6 @@ export default {
           that.getProgressInfo();
         });
     },
-    //展示图片
-    showImgs(imgs){
-      this.$createImagePreview({
-        imgs:imgs.map(v=>v.previewUrl)
-      }).show()
-    },
-    // 获取图片
-    getImgs() {
-      var that = this;
-      that.$http
-        .get(
-          "service/common/common/listAttachment/incident/" +
-            that.processInstanceId,
-          {}
-        )
-        .then(function (res) {
-          console.log(res.data);
-          that.imgs = res.data.data.splice(0, 3);
-          console.log(that.imgs);
-        });
-    },
     // 获取处理进度
     getProgressInfo() {
       var that = this;
@@ -394,7 +355,6 @@ export default {
     this.processInstanceId = this.$route.params.data.processInstanceId;
     this.id = this.$route.params.data.id;
     this.getParamsData();
-    this.getImgs();
     this.getHandlerUser();
     this.getCandidateGroups();
   },
@@ -530,22 +490,6 @@ i.iconfont.blue {
             color: #00559d;
           }
         }
-        .imgs-container {
-          a {
-            color: #03c !important;
-            &:visited {
-              color: #551a8b !important;
-            }
-          }
-          img {
-            width: 1.5rem;
-            height: 1.5rem;
-            margin-right: 0.7rem;
-            &:nth-child(1) {
-              margin-left: 0.75rem;
-            }
-          }
-        }
         .progress {
           padding: 0.2rem 0.2rem;
           overflow: hidden;

src/views/closed.vue

@@ -49,26 +49,7 @@
               >隐藏详情<<</span
             >
           </p>
-          <div class="imgs-container" v-if="imgs.length">
-            <div class="imgs-cont" @click="showImgs(imgs)">
-              <img
-                v-if="
-                  img.suffix == 'jpeg' ||
-                  img.suffix == 'jpg' ||
-                  img.suffix == 'gif' ||
-                  img.suffix == 'png' ||
-                  img.suffix == 'svg' ||
-                  img.suffix == 'pdf'
-                "
-                :src="img.previewUrl"
-                v-for="(img, index) in imgs"
-                class="imgs"
-              />
-              <p v-else>
-                <a :href="[img.previewUrl]">{{ img.name }}</a>
-              </p>
-            </div>
-          </div>
+          <ShowPicture :processInstanceId="processInstanceId"></ShowPicture>
 
           <div class="label" id="handlerInfo">处理信息</div>
           <!-- <p>
@@ -187,6 +168,7 @@
 <script>
 import LoadIng from "./../views/loading.vue";
 import EventInformation from './../components/EventInformation/index.vue'
+import ShowPicture from './../custom/ShowPicture.vue'
 export default {
   data() {
     return {
@@ -209,7 +191,6 @@ export default {
       actives: "info",
       processInstanceId: "",
       progressInfo: [], //处理进度
-      imgs: [], //图片
       model: {}, //提交数据
       pro_hides: false, //展开/收起处理进度
     };
@@ -217,6 +198,7 @@ export default {
   components: {
     LoadIng,
     EventInformation,
+    ShowPicture,
   },
   methods: {
     // 查看汇总单
@@ -254,27 +236,6 @@ export default {
           that.getProgressInfo();
         });
     },
-    //展示图片
-    showImgs(imgs){
-      this.$createImagePreview({
-        imgs:imgs.map(v=>v.previewUrl)
-      }).show()
-    },
-    // 获取图片
-    getImgs() {
-      var that = this;
-      that.$http
-        .get(
-          "service/common/common/listAttachment/incident/" +
-            that.processInstanceId,
-          {}
-        )
-        .then(function (res) {
-          console.log(res.data);
-          that.imgs = res.data.data.splice(0, 3);
-          console.log(that.imgs);
-        });
-    },
     // 获取处理进度
     getProgressInfo() {
       var that = this;
@@ -364,7 +325,6 @@ export default {
       ? this.$route.params.data.id
       : JSON.parse(localStorage.getItem("modelData")).incident.id;
     this.getParamsData();
-    this.getImgs();
   },
 };
 </script>
@@ -507,22 +467,6 @@ i.iconfont {
             color: #00559d;
           }
         }
-        .imgs-container {
-          a {
-            color: #03c !important;
-            &:visited {
-              color: #551a8b !important;
-            }
-          }
-          img {
-            width: 1.5rem;
-            height: 1.5rem;
-            margin-right: 0.7rem;
-            &:nth-child(1) {
-              margin-left: 0.75rem;
-            }
-          }
-        }
         .progress {
           padding: 0.2rem 0.2rem;
           overflow: hidden;

src/views/grabSheet.vue

@@ -34,26 +34,7 @@
                 >隐藏详情<<</span
               >
             </p>
-            <div class="imgs-container" v-if="imgs.length">
-              <div class="imgs-cont" @click="showImgs(imgs)">
-                <img
-                  v-if="
-                    img.suffix == 'jpeg' ||
-                    img.suffix == 'jpg' ||
-                    img.suffix == 'gif' ||
-                    img.suffix == 'png' ||
-                    img.suffix == 'svg' ||
-                    img.suffix == 'pdf'
-                  "
-                  :src="img.previewUrl"
-                  v-for="(img, index) in imgs"
-                  class="imgs"
-                />
-                <p v-else>
-                  <a :href="[img.previewUrl]">{{ img.name }}</a>
-                </p>
-              </div>
-            </div>
+            <ShowPicture :processInstanceId="processInstanceId"></ShowPicture>
 
             <div class="label" id="progress">处理进度</div>
             <div
@@ -103,6 +84,7 @@
 <script>
 import LoadIng from "./../views/loading.vue";
 import EventInformation from './../components/EventInformation/index.vue'
+import ShowPicture from './../custom/ShowPicture.vue'
 export default {
   data() {
     return {
@@ -126,7 +108,6 @@ export default {
       actives: "info",
       processInstanceId: "",
       progressInfo: [], //处理进度
-      imgs: [], //图片
       model: {}, //提交数据
       jurisdiction: false, //是否有抢单权限
       pro_hides: false, //展开/收起处理进度
@@ -164,27 +145,6 @@ export default {
           that.getProgressInfo();
         });
     },
-    //展示图片
-    showImgs(imgs){
-      this.$createImagePreview({
-        imgs:imgs.map(v=>v.previewUrl)
-      }).show()
-    },
-    // 获取图片
-    getImgs() {
-      var that = this;
-      that.$http
-        .get(
-          "service/common/common/listAttachment/incident/" +
-            that.processInstanceId,
-          {}
-        )
-        .then(function (res) {
-          console.log(res.data);
-          that.imgs = res.data.data.splice(0, 3);
-          console.log(that.imgs);
-        });
-    },
     // 获取处理进度
     getProgressInfo() {
       var that = this;
@@ -316,6 +276,7 @@ export default {
   components: {
     LoadIng,
     EventInformation,
+    ShowPicture,
   },
   created() {
     if(this.menu){
@@ -330,7 +291,6 @@ export default {
       ? this.$route.params.data.id
       : JSON.parse(localStorage.getItem("modelData")).incident.id;
     this.getParamsData();
-    this.getImgs();
   },
 };
 </script>
@@ -469,22 +429,6 @@ export default {
             color: #00559d;
           }
         }
-        .imgs-container {
-          a {
-            color: #03c !important;
-            &:visited {
-              color: #551a8b !important;
-            }
-          }
-          img {
-            width: 1.5rem;
-            height: 1.5rem;
-            margin-right: 0.7rem;
-            &:nth-child(1) {
-              margin-left: 0.75rem;
-            }
-          }
-        }
         .progress {
           padding: 0.2rem 0.2rem;
           overflow: hidden;

src/views/newIncident.vue

@@ -275,7 +275,7 @@ export default {
       valid: undefined,
       action: {
         target:
-          this.$host + "/service/common/common/uploadAttachment/incident/",
+          this.$host + "/service/common/common/uploadAttachment/wechatRequesterIncident/",
         data: {}
       },
       isUploading: false,

src/views/order.vue

@@ -58,26 +58,7 @@
                 >隐藏详情 <<</span
               >
             </p>
-            <div class="imgs-container" v-if="imgs.length">
-              <div class="imgs-cont" @click="showImgs(imgs)">
-                <img
-                  v-if="
-                    img.suffix == 'jpeg' ||
-                    img.suffix == 'jpg' ||
-                    img.suffix == 'gif' ||
-                    img.suffix == 'png' ||
-                    img.suffix == 'svg' ||
-                    img.suffix == 'pdf'
-                  "
-                  :src="img.previewUrl"
-                  v-for="(img, index) in imgs"
-                  class="imgs"
-                />
-                <p v-else>
-                  <a :href="[img.previewUrl]">{{ img.name }}</a>
-                </p>
-              </div>
-            </div>
+            <ShowPicture :processInstanceId="processInstanceId"></ShowPicture>
             <!-- <HandlerLog :data="model.incident.handlerLogs" id="handlerLog"></HandlerLog> -->
             <div class="label" id="progress">处理进度</div>
             <div
@@ -153,6 +134,7 @@
 import LoadIng from "./../views/loading.vue";
 import PrompTing from "./../views/prompting.vue";
 import EventInformation from './../components/EventInformation/index.vue'
+import ShowPicture from './../custom/ShowPicture.vue'
 export default {
   data() {
     return {
@@ -176,7 +158,6 @@ export default {
       actives: "info",
       processInstanceId: "",
       progressInfo: [], //处理进度
-      imgs: [], //图片
       model: {}, //提交数据
       pro_hides: false, //展开/收起处理进度
     };
@@ -185,6 +166,7 @@ export default {
     LoadIng,
     PrompTing,
     EventInformation,
+    ShowPicture,
   },
   methods: {
     //   获取事件数据
@@ -208,27 +190,6 @@ export default {
           that.getProgressInfo();
         });
     },
-    //展示图片
-    showImgs(imgs){
-      this.$createImagePreview({
-        imgs:imgs.map(v=>v.previewUrl)
-      }).show()
-    },
-    // 获取图片
-    getImgs() {
-      var that = this;
-      that.$http
-        .get(
-          "service/common/common/listAttachment/incident/" +
-            that.processInstanceId,
-          {}
-        )
-        .then(function (res) {
-          console.log(res.data);
-          that.imgs = res.data.data.splice(0, 3);
-          console.log(that.imgs);
-        });
-    },
     // 获取处理进度
     getProgressInfo() {
       var that = this;
@@ -371,7 +332,6 @@ export default {
       ? this.$route.params.data.id
       : JSON.parse(localStorage.getItem("modelData")).incident.id;
     this.getParamsData();
-    this.getImgs();
   },
 };
 </script>
@@ -509,22 +469,6 @@ i.iconfont.blue {
             color: #00559d;
           }
         }
-        .imgs-container {
-          a {
-            color: #03c !important;
-            &:visited {
-              color: #551a8b !important;
-            }
-          }
-          img {
-            width: 1.5rem;
-            height: 1.5rem;
-            margin-right: 0.7rem;
-            &:nth-child(1) {
-              margin-left: 0.75rem;
-            }
-          }
-        }
         .progress {
           padding: 0.2rem 0.2rem;
           overflow: hidden;

src/views/processing.vue

@@ -61,26 +61,7 @@
               >隐藏详情<<</span
             >
           </p>
-          <div class="imgs-container" v-if="imgs.length">
-            <div class="imgs-cont" @click="showImgs(imgs)">
-              <img
-                v-if="
-                  img.suffix == 'jpeg' ||
-                    img.suffix == 'jpg' ||
-                    img.suffix == 'gif' ||
-                    img.suffix == 'png' ||
-                    img.suffix == 'svg' ||
-                    img.suffix == 'pdf'
-                "
-                :src="img.previewUrl"
-                v-for="(img, index) in imgs"
-                class="imgs"
-              />
-              <p v-else>
-                <a :href="[img.previewUrl]">{{ img.name }}</a>
-              </p>
-            </div>
-          </div>
+          <ShowPicture :processInstanceId="processInstanceId"></ShowPicture>
           <!-- <HandlerLog :data="modelData.incident.handlerLogs" id="handlerLog"></HandlerLog> -->
           <div class="label" id="progress">处理进度</div>
           <div
@@ -218,7 +199,7 @@
                   </cube-form-item>
 
                   <div class="label formLabel" v-if="order == 1">
-                    报修图片
+                    处理图片
                     <span>(最多可上传3张JPG或PNG,每张不能超过10M)</span>
                   </div>
                   <div class="uplod" v-if="order == 1">
@@ -333,6 +314,7 @@ import CubeExtendPopup from "./../components/extend-popup.vue";
 import LoadIng from "./../views/loading.vue";
 import PrompTing from "./../views/prompting.vue";
 import EventInformation from "./../components/EventInformation/index.vue";
+import ShowPicture from './../custom/ShowPicture.vue'
 // import HandlerLog from "./../views/handlerLog.vue";
 // import host from '../request/host'
 
@@ -453,7 +435,6 @@ export default {
       actives: "info",
       processInstanceId: "",
       progressInfo: [], //处理进度
-      imgs: [], //图片
       model: {}, //提交数据
       validity: {},
       valid: undefined,
@@ -989,25 +970,6 @@ export default {
           this.model.description = this.modelData.incident.description;
         });
     },
-    //展示图片
-    showImgs(imgs) {
-      this.$createImagePreview({
-        imgs: imgs.map(v => v.previewUrl)
-      }).show();
-    },
-    // 获取图片
-    getImgs() {
-      var that = this;
-      that.$http
-        .get(
-          "service/common/common/listAttachment/incident/" +
-            that.processInstanceId,
-          {}
-        )
-        .then(function(res) {
-          that.imgs = res.data.data.splice(0, 3);
-        });
-    },
     // 故障现象回显
     setCategory() {
       let that = this;
@@ -2020,7 +1982,6 @@ export default {
     this.action.target += this.processInstanceId;
     this.getParamsData();
     this.getHcs();
-    this.getImgs();
     // 处理方式
     this.getHandleCategory();
     // 关闭代码
@@ -2069,7 +2030,8 @@ export default {
     CubeExtendPopup,
     LoadIng,
     PrompTing,
-    EventInformation
+    EventInformation,
+    ShowPicture,
     // HandlerLog
   }
 };
@@ -2368,22 +2330,6 @@ i.iconfont.blue {
             color: #00559d;
           }
         }
-        .imgs-container {
-          a {
-            color: #03c !important;
-            &:visited {
-              color: #551a8b !important;
-            }
-          }
-          img {
-            width: 1.5rem;
-            height: 1.5rem;
-            margin-right: 0.7rem;
-            &:nth-child(1) {
-              margin-left: 0.75rem;
-            }
-          }
-        }
         .progress {
           padding: 0.2rem 0.2rem;
           overflow: hidden;

src/views/solved.vue

@@ -49,26 +49,7 @@
               >隐藏详情<<</span
             >
           </p>
-          <div class="imgs-container" v-if="imgs.length">
-            <div class="imgs-cont" @click="showImgs(imgs)">
-              <img
-                v-if="
-                  img.suffix == 'jpeg' ||
-                  img.suffix == 'jpg' ||
-                  img.suffix == 'gif' ||
-                  img.suffix == 'png' ||
-                  img.suffix == 'svg' ||
-                  img.suffix == 'pdf'
-                "
-                :src="img.previewUrl"
-                v-for="(img, index) in imgs"
-                class="imgs"
-              />
-              <p v-else>
-                <a :href="[img.previewUrl]">{{ img.name }}</a>
-              </p>
-            </div>
-          </div>
+          <ShowPicture :processInstanceId="processInstanceId"></ShowPicture>
 
           <div class="label" id="handlerInfo">处理信息</div>
           <p>
@@ -212,6 +193,7 @@
 <script>
 import LoadIng from "./../views/loading.vue";
 import EventInformation from './../components/EventInformation/index.vue'
+import ShowPicture from './../custom/ShowPicture.vue'
 // import HandlerLog from "./../views/handlerLog.vue";
 export default {
   data() {
@@ -241,13 +223,13 @@ export default {
       actives: "info",
       processInstanceId: "",
       progressInfo: [], //处理进度
-      imgs: [], //图片
       model: {}, //提交数据
     };
   },
   components: {
     LoadIng,
     EventInformation,
+    ShowPicture,
     // HandlerLog
   },
   methods: {
@@ -287,27 +269,6 @@ export default {
           that.getProgressInfo();
         });
     },
-    //展示图片
-    showImgs(imgs){
-      this.$createImagePreview({
-        imgs:imgs.map(v=>v.previewUrl)
-      }).show()
-    },
-    // 获取图片
-    getImgs() {
-      var that = this;
-      that.$http
-        .get(
-          "service/common/common/listAttachment/incident/" +
-            that.processInstanceId,
-          {}
-        )
-        .then(function (res) {
-          console.log(res.data);
-          that.imgs = res.data.data.splice(0, 3);
-          console.log(that.imgs);
-        });
-    },
     // 获取处理进度
     getProgressInfo() {
       var that = this;
@@ -493,7 +454,6 @@ export default {
       : JSON.parse(localStorage.getItem("modelData")).incident.id;
     this.getParamsData();
 
-    this.getImgs();
     this.getHandlerRes();
     this.getDegree();
   },
@@ -656,22 +616,6 @@ i.iconfont {
             color: #00559d;
           }
         }
-        .imgs-container {
-          a {
-            color: #03c !important;
-            &:visited {
-              color: #551a8b !important;
-            }
-          }
-          img {
-            width: 1.5rem;
-            height: 1.5rem;
-            margin-right: 0.7rem;
-            &:nth-child(1) {
-              margin-left: 0.75rem;
-            }
-          }
-        }
 
         .progress {
           padding: 0.2rem 0.2rem;

src/views/waitConfirm.vue

@@ -157,26 +157,7 @@
               >隐藏详情<<</span
             >
           </p>
-          <div class="imgs-container" v-if="imgs.length">
-            <div class="imgs-cont" @click="showImgs(imgs)">
-              <img
-                v-if="
-                  img.suffix == 'jpeg' ||
-                    img.suffix == 'jpg' ||
-                    img.suffix == 'gif' ||
-                    img.suffix == 'png' ||
-                    img.suffix == 'svg' ||
-                    img.suffix == 'pdf'
-                "
-                :src="img.previewUrl"
-                v-for="(img, index) in imgs"
-                class="imgs"
-              />
-              <p v-else>
-                <a :href="[img.previewUrl]">{{ img.name }}</a>
-              </p>
-            </div>
-          </div>
+          <ShowPicture :processInstanceId="processInstanceId"></ShowPicture>
 
           <div class="label" id="handlerInfo">处理信息</div>
           <p>
@@ -247,6 +228,7 @@
   </div>
 </template>
 <script>
+import ShowPicture from './../custom/ShowPicture.vue'
 export default {
   data() {
     return {
@@ -269,7 +251,6 @@ export default {
       actives: "info",
       processInstanceId: "",
       progressInfo: [], //处理进度
-      imgs: [], //图片
       model: {} //提交数据
     };
   },
@@ -290,27 +271,6 @@ export default {
           that.model = res.data.model;
         });
     },
-    //展示图片
-    showImgs(imgs){
-      this.$createImagePreview({
-        imgs:imgs.map(v=>v.previewUrl)
-      }).show()
-    },
-    // 获取图片
-    getImgs() {
-      var that = this;
-      that.$http
-        .get(
-          "service/common/common/listAttachment/incident/" +
-            that.processInstanceId,
-          {}
-        )
-        .then(function(res) {
-          console.log(res.data);
-          that.imgs = res.data.data.splice(0, 3);
-          console.log(that.imgs);
-        });
-    },
     // 获取处理进度
     getHandlerInfo() {
       var that = this;
@@ -353,7 +313,9 @@ export default {
     this.processInstanceId = this.$route.params.data.processInstanceId;
     this.getParamsData();
     this.getHandlerInfo();
-    this.getImgs();
+  },
+  components:{
+    ShowPicture,
   }
 };
 </script>
@@ -496,22 +458,6 @@ i.iconfont {
             color: #00559d;
           }
         }
-        .imgs-container {
-          a {
-            color: #03c !important;
-            &:visited {
-              color: #551a8b !important;
-            }
-          }
-          img {
-            width: 1.5rem;
-            height: 1.5rem;
-            margin-right: 0.7rem;
-            &:nth-child(1) {
-              margin-left: 0.75rem;
-            }
-          }
-        }
         .progress {
           padding: 0.2rem 0.2rem;
           overflow: hidden;