Merge branch 'master' of http://120.76.84.145:10101/gitblit/r/H5/threeSide

落日与鲸

2025-02-25 61baff2c6d976f64f34ed8f152854e3031462897

 H5/pages/progress/progress.vue

@@ -17,7 +17,7 @@
               </view>
            </view>
            <view class="flex-column a-center">
               <view class="fs-27 lh-38 font-bold">群众</view>
               <view class="fs-27 lh-38 font-bold">群众姓名</view>
               <view class="fs-27 lh-38 mt-10">{{ info.name }}</view>
            </view>
            <view class="flex-column a-center">
@@ -72,231 +72,231 @@
</template>

<script>
import {
   getComplaintDetail
} from './service'
export default {
   data() {
      return {
         id: '',
         info: {},
         type: true,
   import {
      getComplaintDetail
   } from './service'
   export default {
      data() {
         return {
            id: '',
            info: {},
            type: true,
         }
      },
      onLoad(params) {
         this.id = params.id
         if (params.type) {
            this.type = false
            uni.setNavigationBarTitle({
               title: '办理进度'
            })
         }
         getComplaintDetail({
            id: params.id
         }).then(res => {
            this.info = res.data
         })
      },
      methods: {
         toAdd() {
            uni.navigateTo({
               url: `/pages/add-progress/index?id=${this.id}`
            })
         },
         viewImage(item) {
            uni.previewImage({
               urls: [item]
            })
         },
         // 去大屏播放视频
         openVideo(url) {
            uni.navigateTo({
               url: `/pages/work-detail/maxVideo?url=${url}`
            })
         },
      }
   },
   onLoad(params) {
      this.id = params.id
      if (params.type) {
         this.type = false
         uni.setNavigationBarTitle({
            title: '办理进度'
         })
      }
      getComplaintDetail({
         id: params.id
      }).then(res => {
         this.info = res.data
      })
   },
   methods: {
      toAdd() {
         uni.navigateTo({
            url: `/pages/add-progress/index?id=${this.id}`
         })
      },
      viewImage(item) {
         uni.previewImage({
            urls: [item]
         })
      },
      // 去大屏播放视频
      openVideo(url) {
         uni.navigateTo({
            url: `/pages/work-detail/maxVideo?url=${url}`
         })
      },
   }
}
</script>

<style scoped lang="scss">
.bs-1 {
   box-shadow: 0rpx 0rpx 27rpx 0rpx rgba(0, 0, 0, 0.1);
}

.color1 {
   color: #FF4948;
}

.color2 {
   color: rgba(0, 0, 0, .8);
}

.color3 {
   color: #FAAD14;
}

.color4 {
   color: #FFFFFF;
}

.bgcolor1 {
   background: linear-gradient(270deg, rgba(255, 241, 0, 0.5) 0%, rgba(255, 249, 172, 0.25) 48%, rgba(255, 255, 255, 0.2) 100%, #FFFFFF 100%);
}

.bgcolor2 {
   background: linear-gradient(180deg, #FFDCDB 0%, rgba(255, 255, 255, 0) 25%);
}

.bgcolor3 {
   background: #FFFBE6;
}

.bgcolor4 {
   background: #F8F8F8;
}

.bgcolor5 {
   background: rgba(0, 0, 0, .23);
}

.bgcolor6 {
   background: linear-gradient(270deg, #FC8D55 0%, #FF4948 100%);
}

.border1 {
   border: 2rpx solid #FFF1B8;
}

.border2 {
   border: 2rpx solid #F8F8F8;
}

.safe-box {
   height: env(safe-area-inset-bottom);
}

.progress {
   border-radius: 27rpx;
   margin-top: 38.46rpx;
   background: #FFFFFF;
   box-shadow: 0rpx 0rpx 27rpx 0rpx rgba(0, 0, 0, 0.1);
   padding: 34rpx 31rpx;

   .title {
      font-weight: 600;
      font-size: 27rpx;
      color: rgba(0, 0, 0, 0.88);
      line-height: 38rpx;
      text-shadow: 0px 0px 27px rgba(0, 0, 0, 0.1);
      margin-bottom: 48rpx;
   .bs-1 {
      box-shadow: 0rpx 0rpx 27rpx 0rpx rgba(0, 0, 0, 0.1);
   }

   .proCard {
      .proItem {
         display: flex;
         padding-bottom: 38rpx;
   .color1 {
      color: #FF4948;
   }

         .dot {
            width: 19rpx;
            height: 19rpx;
            background: linear-gradient(180deg, #FD8D3C 0%, #FA541C 100%);
            box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(252, 141, 85, 0.4);
            border-radius: 50%;
            margin: 10rpx 0;
   .color2 {
      color: rgba(0, 0, 0, .8);
   }

   .color3 {
      color: #FAAD14;
   }

   .color4 {
      color: #FFFFFF;
   }

   .bgcolor1 {
      background: linear-gradient(270deg, rgba(255, 241, 0, 0.5) 0%, rgba(255, 249, 172, 0.25) 48%, rgba(255, 255, 255, 0.2) 100%, #FFFFFF 100%);
   }

   .bgcolor2 {
      background: linear-gradient(180deg, #FFDCDB 0%, rgba(255, 255, 255, 0) 25%);
   }

   .bgcolor3 {
      background: #FFFBE6;
   }

   .bgcolor4 {
      background: #F8F8F8;
   }

   .bgcolor5 {
      background: rgba(0, 0, 0, .23);
   }

   .bgcolor6 {
      background: linear-gradient(270deg, #FC8D55 0%, #FF4948 100%);
   }

   .border1 {
      border: 2rpx solid #FFF1B8;
   }

   .border2 {
      border: 2rpx solid #F8F8F8;
   }

   .safe-box {
      height: env(safe-area-inset-bottom);
   }

   .progress {
      border-radius: 27rpx;
      margin-top: 38.46rpx;
      background: #FFFFFF;
      box-shadow: 0rpx 0rpx 27rpx 0rpx rgba(0, 0, 0, 0.1);
      padding: 34rpx 31rpx;

      .title {
         font-weight: 600;
         font-size: 27rpx;
         color: rgba(0, 0, 0, 0.88);
         line-height: 38rpx;
         text-shadow: 0px 0px 27px rgba(0, 0, 0, 0.1);
         margin-bottom: 48rpx;
      }

      .proCard {
         .proItem {
            display: flex;
            align-items: center;
            justify-content: center;
            padding-bottom: 38rpx;

            .box {
               width: 7rpx;
               height: 7rpx;
               background-color: #fff;
            .dot {
               width: 19rpx;
               height: 19rpx;
               background: linear-gradient(180deg, #FD8D3C 0%, #FA541C 100%);
               box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(252, 141, 85, 0.4);
               border-radius: 50%;
            }
         }

         .proLine {
            flex: 1;
            width: 4rpx;
            background: rgba(0, 0, 0, 0.06);
            border-radius: 3rpx;
         }


         .name {
            font-weight: 400;
            font-size: 27rpx;
            color: rgba(0, 0, 0, 0.8);
            line-height: 38rpx;
         }

         .time {
            font-weight: 400;
            font-size: 23rpx;
            color: rgba(0, 0, 0, 0.4);
            line-height: 33rpx;
         }

         .context {
            font-size: 27rpx;
            color: rgba(0, 0, 0, 0.8);
            line-height: 38rpx;
         }

         .proImg {
            display: flex;
            flex-wrap: wrap;

            .imgOrVedio {
               margin-right: 17rpx;
               position: relative;

               .img {
                  width: 140rpx;
                  height: 140rpx;
                  border-radius: 8rpx;
                  margin-top: 19rpx;
               }
            }

            .videoOpen {
               position: absolute;
               top: 10rpx;
               left: 0;
               z-index: 99;
               width: 140rpx;
               height: 140rpx;
               border-radius: 8rpx;
               margin: 10rpx 0;
               display: flex;
               align-items: center;
               justify-content: center;
               margin-top: 19rpx;

               .video {
                  z-index: 999;
               .box {
                  width: 7rpx;
                  height: 7rpx;
                  background-color: #fff;
                  border-radius: 50%;
               }
            }

            .proLine {
               flex: 1;
               width: 4rpx;
               background: rgba(0, 0, 0, 0.06);
               border-radius: 3rpx;
            }


            .name {
               font-weight: 400;
               font-size: 27rpx;
               color: rgba(0, 0, 0, 0.8);
               line-height: 38rpx;
            }

            .time {
               font-weight: 400;
               font-size: 23rpx;
               color: rgba(0, 0, 0, 0.4);
               line-height: 33rpx;
            }

            .context {
               font-size: 27rpx;
               color: rgba(0, 0, 0, 0.8);
               line-height: 38rpx;
            }

            .proImg {
               display: flex;
               flex-wrap: wrap;

               .imgOrVedio {
                  margin-right: 17rpx;
                  position: relative;

                  .img {
                     width: 140rpx;
                     height: 140rpx;
                     border-radius: 8rpx;
                     margin-top: 19rpx;
                  }
               }

               .videoOpen {
                  position: absolute;
                  top: 10rpx;
                  left: 0;
                  z-index: 99;
                  width: 140rpx;
                  height: 140rpx;
                  border-radius: 8rpx;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  margin-top: 19rpx;

                  .video {
                     z-index: 999;
                     width: 140rpx;
                     height: 140rpx;
                  }
               }
            }
         }
      }

      .proItem:last-child {
         .proLine {
            display: none;
         .proItem:last-child {
            .proLine {
               display: none;
            }
         }
      }
   }
}

.videoImg {
   width: 140.38rpx;
   height: 140.38rpx;
   border-radius: 7.69rpx;
   position: relative;
}
   .videoImg {
      width: 140.38rpx;
      height: 140.38rpx;
      border-radius: 7.69rpx;
      position: relative;
   }

#myVideo {
   z-index: 1;
}
   #myVideo {
      z-index: 1;
   }
</style>