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

pyt

2025-02-24 d99a437b547fbb313ddf15f1a97c25e865f71c91

 H5/pages/progress/progress.vue

@@ -1,55 +1,67 @@
<template>
   <view class="pt-38">
      <view class="shadow1 ml-31 mr-31 br-16 pt-31 pl-31 pr-31 fs-27 pb-28">

         <view class="flex">

            <view class="flex flex-column j-between">

               <view class="shrink0 point mt-14 mr-31">

                  <view class="center">

   <view class="px-31 pt-38">
      <view class="br-19 bs-1 pt-21 pb-35 px-27 bgcolor2">
         <view class="flex a-center j-between fs-23 lh-33 font-bold">
            <view>诉求号：7843523454</view>
            <view class="color1">正在办理</view>
         </view>
         <view class="mx-13 mt-33 pt-35 pb-33 px-27 br-19 flex a-center j-between bgcolor1">
            <view class="fs-27 lh-38 color2">江苏省常州市溧阳市牛顿大道172号</view>
            <image src="@/static/public/gps.png" class="w-31 h-31 shrink0" />
         </view>
         <view class="flex a-center j-between mt-31 mx-13">
            <view class="flex-column a-center">
               <view class="fs-27 lh-38 font-bold">问题类型</view>
               <view class="mt-8 fs-23 lh-42 txt-center px-31 font-w400 color3 bgcolor3 border1">教育</view>
            </view>
            <view class="flex-column a-center">
               <view class="fs-27 lh-38 font-bold">群众</view>
               <view class="fs-27 lh-38 mt-10">沙振</view>
            </view>
            <view class="flex-column a-center">
               <view class="fs-27 lh-38 font-bold">联系电话</view>
               <view class="fs-27 lh-38 mt-10">14225874426</view>
            </view>
         </view>
      </view>

      <view class="progress">
         <view class="proCard">
            <view class="proItem" v-for="(item,index) in 3" :key="index">
               <view class="mr-31 flex flex-column a-center">
                  <view class="dot">
                     <view class="box"></view>
                  </view>
                  <view class="proLine">
                  </view>
               </view>
               <view>
                  <view class="flex a-center j-between mb-10">
                     <view class="name">李雷</view>
                     <view class="time">2024年9月29日11:09:09</view>
                  </view>
                  <view class="context">处理进度说明处理进度说明处理进度说明处理进
                     度说明处理进度说明处理进度说明处理进度说明处理进度说明</view>
                  <view class="proImg">
                     <view class="imgOrVedio" v-for="(item,index) in 4" :key="index">
                        <image
                           src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
                           class="img shrink0" mode="aspectFill">
                        </image>
                        <view class="openVideo" v-if="item==4">
                           <image src="../../static/detailImg/open.png" class="video shrink0"
                              mode="aspectFill">
                           </image>
                        </view>
                     

                  </view>

               </view>

               <view class="flex1 w-3 bgColor1 ml-8 mt-10">

						
               </view>

            </view>

            <view class="flex1 pb-46">

               <view class="flex a-center j-between lh-38">

                  <text class="color1">李雷</text>

                  <text class="color2">2024年9月29日11:09:09</text>

               </view>

               <view class="lh-38 mt-10 fs-27">

                  处理进度说明处理进度说明处理进度说明处理进度说明处理进度说明处理进度说明处理进度说明处理进度说明

               </view>

            </view>

         </view>

         <view class="flex">

            <view class="flex flex-column j-between">

               <view class="shrink0 point mt-14 mr-31">

                  <view class="center">

							
                  </view>

               </view>

            <!--    <view class="flex1 w-3 bgColor1 ml-8 mt-10">

						
               </view> -->

            </view>

            <view class="flex1">

               <view class="flex a-center j-between lh-38">

                  <text class="color1">李雷</text>

                  <text class="color2">2024年9月29日11:09:09</text>

               </view>

               <view class="lh-38 mt-10 fs-27">

                  处理进度说明处理进度说明处理进度说明处理进度说明处理进度说明处理进度说明处理进度说明处理进度说明

               </view>

               <view class="flex wrap mt-19">

                  <image v-for="item in 5" :key="index" src="../../static/logo.png" class="mb-19 w-140 h-140 br-8 shrink0 mr-17" mode=""></image>

               </view>

            </view>

         </view>

      </view>

      <view class="h-10 safe-b">

			
      </view>
      <view @tap="toAdd" class="mt-38 fs-35 lh-96 br-48 txt-center font-bold bgcolor6 color4">添加办理进度</view>
      <view class="safe-box"></view>
   </view>
</template>

@@ -57,46 +69,187 @@
   export default {
      data() {
         return {
				
            id: ''
         }
      },
      onLoad(params) {
         this.id = params.id
      },
      methods: {
			
         toAdd() {
            uni.navigateTo({
               url: `/pages/add-progress/index`
            })
         }
      }
   }
</script>

<style scoped lang="scss">

   .color1 {

      color: #505050;

   }

   .color2{

       color: #999999;

   }
   .shadow1 { 
   .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 {

      width: 3rpx;

      background: #000;

      border: 2rpx solid #FFF1B8;
   }

   .bgColor1 {

      background-color: #F0F0F0;


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

   .point {


   .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;
            padding-bottom: 38rpx;

            .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%;

      width: 19rpx;

      height: 19rpx;

               margin: 10rpx 0;
      display: flex;

      align-items: center;

      justify-content: center;

      .center {

         width: 9rpx;

         height: 9rpx;

         border-radius: 50%;


               .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;
                  }

                  .openVideo {
                     position: absolute;
                     top: 19rpx;
                     left: 0;
                     width: 140rpx;
                     height: 140rpx;
                     border-radius: 8rpx;
                     display: flex;
                     align-items: center;
                     justify-content: center;

                     .video {
                        width: 140rpx;
                        height: 140rpx;
                     }
                  }
               }
            }
         }

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

   }
</style>