修改bug

hejianhao

1 天以前 137bb06f7dc711f72abbd5311fa064e0c6a5fc1a

 H5/pages/result-entry/index.vue

@@ -4,12 +4,12 @@
         :class="unfoldFlag ? 'max-9999' : 'max-300'">
         <view>
            <view class="flex a-center j-between fs-23 lh-33 font-bold">
               <view>诉求号：{{ info.serialNumber }}</view>
               <view>诉求号：{{ info.serialNumber || '-' }}</view>
               <view class="color1">{{ ["正在办理", "延期办理", "超时办理", "已办结", "群众撤销", "上报待审核", "上级驳回"][info.status] }}
               </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">{{ info.detailedAddress }}</view>
               <view class="fs-27 lh-38 color2">{{ info.location }}</view>
               <image src="@/static/detailImg/dwei.png" class="w-31 h-31 shrink0" />
            </view>
            <view v-if="!unfoldFlag" class="flex a-center j-between mt-31 mx-13">
@@ -19,12 +19,18 @@
                     info.problemType }}</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">
                  <view class="fs-27 lh-38 font-bold">联系电话</view>
                  <view class="fs-27 lh-38 mt-10">{{ info.contactNumber }}</view>
                  <view class="flex a-center">
                     <view>
                        <view class="fs-27 lh-38 font-bold">联系电话</view>
                        <view class="fs-27 lh-38 mt-10">{{ info.contactNumber }}</view>
                     </view>
                     <image @click.stop="callPhone(info.contactNumber)" src="../../static/tell.png"
                        class="w-58 h-58 shrink0 " />
                  </view>
               </view>
            </view>
            <view v-else class="mt-33">
@@ -32,12 +38,12 @@
                  <view class="shrink0 color2 font-w400">
                     <view>创建时间</view>
                     <view>问题类型</view>
                     <view>群众</view>
                     <view>群众姓名</view>
                     <view>联系电话</view>
                     <view>详细地址</view>
                  </view>
                  <view class="font-bold txt-aligin-r" style="max-width: 404rpx;">
                     <view>{{ info.createTime }}</view>
                     <view>{{ info.createTime | formatTime }}</view>
                     <view>{{ info.problemType }}</view>
                     <view>{{ info.name }}</view>
                     <view>{{ info.contactNumber }}</view>
@@ -55,8 +61,8 @@
               </view>
               <view class="fs-27 mt-35 lh-38 font-bold">描述图片</view>
               <view class="flex wrap mt-27">
                  <view @tap="viewImage(item)" class="relative mr-15" v-for="item in info.images.split(',')"
                     :key="item">
                  <view @tap="viewImage(item)" class="relative mr-15"
                     v-for="item in info.images && info.images.split(',')" :key="item">
                     <image :src="item" class="w-140 h-140 shrink0 br-8" />
                     <view class="absolute w-140 h-140 bgcolor5 top0 left0 br-8 flex a-center j-center">
                        <image @tap="viewImage(item)" src="@/static/Appeal/amplify.png" class="w-19 h-19" />
@@ -65,8 +71,8 @@
               </view>
               <view class="fs-27 mt-37 lh-38 font-bold">描述视频</view>
               <view class="flex wrap mt-27">
                  <view @tap="openVideo(item)" class="relative mr-15" v-for="item in info.videos.split(',')"
                     :key="item">
                  <view @tap="openVideo(item)" class="relative mr-15"
                     v-for="item in info.videos && info.videos.split(',')" :key="item">
                     <video id="myVideo" class="w-140 h-140 mt-19 shrink0" disabled :controls="false"
                        :show-center-play-btn="false" :src="item" />
                     <view class="videoOpen" @click.stop="openVideo(item)">
@@ -77,14 +83,15 @@
               </view>
            </view>
         </view>
         <view @tap="unfold" class="bgcolor3 absolute w-100 txt-center"
            style="bottom:-58rpx;left: 50%;transform: translate(-50%,-50%);">
            <image src="/static/location/back.png" class="h-23 w-15" style="transform: rotate(-90deg);" />
         <view @tap="unfold" class="absolute" style="bottom:-90rpx;left: 50%;transform: translate(-50%,-50%);">
            <image v-if="!unfoldFlag" src="@/static/unfold.png" class="h-54 w-156" />
            <image v-if="unfoldFlag" src="@/static/packUp.png" class="h-54 w-156" />
         </view>
      </view>
      <view class="br-19 mt-76 bs-1 pt-35 pb-33">
         <view class="fs-27 lh-38 font-bold ml-31">处理状态</view>
         <view @tap="showList = true" class="br-15 py-15 pl-31 mx-31 pr-27 mt-27 flex j-between a-center border2" :class="(rulsFlag && !status) && 'bgcolor-border'">
         <view @tap="showList = true" class="br-15 py-15 pl-31 mx-31 pr-27 mt-27 flex j-between a-center border2"
            :class="(rulsFlag && !status) && 'bgcolor-border'">
            <view :class="!status && 'color6'">{{ status ? status : '请选择当前处理状态' }}</view>
            <image src="/static/location/back.png" class="h-23 w-15" style="transform: rotate(-90deg);" />
         </view>
@@ -93,7 +100,7 @@
            <view class="fs-23 color99">处理状态不能为空</view>
         </view>
         <view class="fs-27 lh-38 font-bold ml-31 mt-38">办结结果描述</view>
         <view class="mt-23 br-38 pt-31 pb-16 pl-31 pr-29 fs-23 color5 bgcolor8">
         <!-- <view class="mt-23 br-38 pt-31 pb-16 pl-31 pr-29 fs-23 color5 bgcolor8">
            <view class="flex mb-15">
               <view class="w-8 h-8 br50 shrink0 mr-12 mt-12 bgcolor7"></view>
               <view>处理措施：记录为解决该问题所采取的具体措施，包括政策宣传、沟通协调、现场处理等方式。</view>
@@ -114,7 +121,7 @@
               <view class="w-8 h-8 br50 shrink0 mr-12 mt-12 bgcolor7"></view>
               <view>后续跟进：如需进一步跟进或处理，记录后续跟进的计划、时间节点及责任人员。</view>
            </view>
         </view>
         </view> -->
         <view class="mx-31">
            <textarea v-model="completionDescription" class="pt-25 pl-31 mt-27 fs-27 br-8 bgcolor4"
               :class="(rulsFlag && !completionDescription) && 'bgcolor-border'"
@@ -123,7 +130,7 @@
               <image src="@/static/noNull.png" class="w-35 h-35 mr-13 shrink0" />
               <view class="fs-23 color99">办结结果描述不能为空</view>
            </view>
            <view class="fs-27 mt-38 lh-38 font-bold">图片</view>
            <view class="fs-27 mt-38 lh-38 font-bold">上传图片</view>
            <view class="flex wrap mt-27">
               <view class="relative mr-15" v-for="(item, index) in localImageUrls" :key="index">
                  <image v-if="item != 'loading'" :src="item" class="w-140 h-140 shrink0 br-8" />
@@ -141,7 +148,7 @@
               </view>
               <image @tap="uploadImg(1)" src="/static/Appeal/add.png" class="w-140 h-140 shrink0" />
            </view>
            <view class="fs-27 mt-37 lh-38 font-bold">视频</view>
            <view class="fs-27 mt-37 lh-38 font-bold">上传视频</view>
            <view class="flex wrap mt-27">
               <view class="imgOrVedio" v-for="(ite, ind) in completionVideos" :key="ind">
                  <video v-if="ite != 'loading'" id="myVideo" class="videoImg shrink0" disabled :controls="false"
@@ -162,155 +169,257 @@
               </view>
               <image @tap="uploadImg(2)" src="@/static/Appeal/add.png" class="w-140 h-140 shrink0" />
            </view>
            <view class="fs-27 lh-38 mt-40 font-bold">其他说明</view>
            <!-- <view class="fs-27 lh-38 mt-40 font-bold">其他说明</view>
            <textarea v-model="completionOtherDescription" class="pt-25 pl-31 mt-27 fs-27 br-8 bgcolor4"
               style="height: 365rpx;width: calc(100% - 31rpx);" placeholder="请输入补充说明内容" />
               style="height: 365rpx;width: calc(100% - 31rpx);" placeholder="请输入补充说明内容" /> -->
         </view>
      </view>
      <view @click.stop="submit" class="mt-38 fs-35 lh-96 br-48 txt-center font-bold bgcolor6 color4">提交办结结果</view>
      <view @click.stop="submit" class="mt-38 fs-35 lh-96 br-48 txt-center font-bold bgcolor6 color4 fixed"
         style="width: calc(100% - 62rpx);bottom: calc(env(safe-area-inset-bottom) + 10rpx);">提交办理结果</view>
      <view class="btn-box"></view>
      <view class="safe-box"></view>
      <u-picker :show="showList" :columns="columns" @confirm="confirm" @cancel="cancel"></u-picker>
   </view>
</template>

<script>
import { saveResult, getComplaintDetail } from './service'
import config from '@/config/index.js'
export default {
   data() {
      return {
         showList: false,
         columns: [['已办结', '群众撤销']],
         unfoldFlag: false, //是否展开
         id: '',//诉求id
         info: {},//工单详情
         completionDescription: '',//办结结果描述
         localImageUrls: [], //本地回显的图片
         completionImages: [],//办结结果图片
         completionOtherDescription: '',//其他说明
         completionVideos: [],//办结结果视频
         status: '',//处理状态
         againCklicFlag: true,
         rulsFlag: false,
      }
   },
   onLoad(params) {
      this.id = params.id
      getComplaintDetail({ id: params.id }).then(res => {
         this.info = res.data
      })
   },
   methods: {
      submit() {
         if (!this.status) {
            this.rulsFlag = true
            return uni.showToast({
               title: '请选择当前处理状态',
               icon: 'none',
               mask: true
   import {
      saveResult,
      getComplaintDetail,
      saveAndComplete
   } from './service'
   import dayjs from '../../uni_modules/uview-ui/libs/util/dayjs'
   import config from '@/config/index.js'
   export default {
      data() {
         return {
            showList: false,
            columns: [
               ['已办结', '群众撤销']
            ],
            unfoldFlag: false, //是否展开
            id: '', //诉求id
            info: {}, //工单详情
            completionDescription: '', //办结结果描述
            localImageUrls: [], //本地回显的图片
            completionImages: [], //办结结果图片
            completionOtherDescription: '', //其他说明
            completionVideos: [], //办结结果视频
            status: '', //处理状态
            againCklicFlag: true,
            rulsFlag: false,
            appealData: {}, //述求录入数据
         }
      },
      onLoad(params) {
         if (params.data) {
            this.appealData = JSON.parse(params.data)
            this.info = JSON.parse(params.data)
         }
         if (params.id) {
            this.id = params.id
            getComplaintDetail({
               id: params.id
            }).then(res => {
               this.info = res.data
            })
         }
         if (!this.completionDescription) {
            this.rulsFlag = true
            return uni.showToast({
               title: '请填写办结结果描述',
               icon: 'none',
               mask: true
            })
      },
      filters: {
         formatTime(val) {
            if (!val) return ''
            return dayjs(val).format('YYYY-MM-DD HH:mm:ss')
         }
         if (this.completionImages.length == 0) {
            return uni.showToast({
               title: '请上传办结结果图片',
               icon: 'none',
               mask: true
            })
         }
         if (this.completionVideos.length == 0) {
            return uni.showToast({
               title: '请上传办结结果视频',
               icon: 'none',
               mask: true
            })
         }
         saveResult({
            id: this.id,
            status: this.status == '已办结' ? 3 : 4,
            completionDescription: this.completionDescription,
            completionImages: this.completionImages.join(','),
            completionOtherDescription: this.completionOtherDescription,
            completionVideos: this.completionVideos.join(',')
         }).then(res => {
            if (res.code == 200) {
               uni.showToast({
                  title: '提交成功',
                  icon: 'success',
                  mask: true
               })
               setTimeout(() => {
                  uni.navigateBack()
               }, 1500)
            } else {
               uni.showToast({
                  title: res.msg,
      },
      methods: {
         callPhone(phoneNumber) {
            uni.makePhoneCall({
               phoneNumber
            });
         },
         comfirm() {
            this.appealData = {}
            uni.navigateBack()
         },
         submit() {
            if (!this.status) {
               this.rulsFlag = true
               return uni.showToast({
                  title: '请选择当前处理状态',
                  icon: 'none',
                  mask: true
               })
            }
         })
      },
      confirm({ value }) {
         this.status = value[0]
         this.showList = false
      },
      cancel() {
         this.showList = false
      },
      unfold() {
         this.unfoldFlag = !this.unfoldFlag
      },
      delImg(item) {
         this.localImageUrls = this.localImageUrls.filter(i => i != item)
         this.completionImages = this.completionImages.filter(i => i != item)
      },
      delVideo(item) {
         this.completionVideos = this.completionVideos.filter(i => i != item)
      },
      viewImage(item) {
         uni.previewImage({
            urls: [item]
         })
      },
      uploadImg(type) {
         if (!this.againCklicFlag) return
         this.againCklicFlag = false
         if (type == 1) {
            uni.chooseImage({
               count: 1,
               success: (chooseImageRes) => {
                  this.completionImages.push('loading')
                  this.againCklicFlag = true
                  let imgPathList = chooseImageRes.tempFilePaths;
                  if (imgPathList.length > 0) {
            if (!this.completionDescription) {
               this.rulsFlag = true
               return uni.showToast({
                  title: '请填写办结结果描述',
                  icon: 'none',
                  mask: true
               })
            }
            let data = {
               status: this.status == '已办结' ? 3 : 4,
               completionDescription: this.completionDescription,
               completionImages: this.completionImages.join(','),
               completionOtherDescription: this.completionOtherDescription,
               completionVideos: this.completionVideos.join(',')
            }

            // 述求录入并办结
            if (Object.keys(this.appealData).length != 0) {
               saveAndComplete({
                  complaintCompletionDTO: data,
                  ...this.appealData
               }).then(res => {
                  if (res.code == 200) {
                     uni.showToast({
                        title: '提交成功',
                        icon: 'success',
                        mask: true
                     })
                     setTimeout(() => {
                        uni.navigateBack({
                           delta: 2,
                           success: () => {
                              this.$store.commit('SET_ISLIST', true)
                           }
                        })
                     }, 1500)
                  }
               })
               return
            }
            saveResult({
               id: this.id,
               ...data
            }).then(res => {
               if (res.code == 200) {
                  uni.showToast({
                     title: '提交成功',
                     icon: 'success',
                     mask: true
                  })
                  setTimeout(() => {
                     uni.navigateBack()
                  }, 1500)
               } else {
                  uni.showToast({
                     title: res.msg,
                     icon: 'none',
                     mask: true
                  })
               }
            })
         },
         confirm({
            value
         }) {
            this.status = value[0]
            this.showList = false
         },
         cancel() {
            this.showList = false
         },
         unfold() {
            this.unfoldFlag = !this.unfoldFlag
         },
         delImg(item) {
            this.localImageUrls = this.localImageUrls.filter(i => i != item)
            this.completionImages = this.completionImages.filter(i => i != item)
         },
         delVideo(item) {
            this.completionVideos = this.completionVideos.filter(i => i != item)
         },
         viewImage(item) {
            uni.previewImage({
               urls: [item]
            })
         },
         uploadImg(type) {
            if (type == 1) {
               uni.chooseImage({
                  count: 1,
                  success: (chooseImageRes) => {
                     this.completionImages.push('loading')
                     let imgPathList = chooseImageRes.tempFilePaths;
                     if (imgPathList.length > 0) {
                        uni.uploadFile({
                           url: config.imageUrl,
                           filePath: imgPathList[0],
                           timeout: 1000 * 45,
                           name: 'file',
                           header: {
                              Authorization: uni.getStorageSync('token')
                           },
                           success: (res) => {
                              if (JSON.parse(res.data).code == 200) {
                                 this.completionImages = this.completionImages.filter(
                                    item => item !=
                                    'loading')
                                 this.$nextTick(() => {
                                    this.completionImages.push(JSON.parse(res
                                          .data)
                                       .data)
                                    this.localImageUrls.push(imgPathList[0])
                                 })
                              } else {
                                 this.completionImages = this.completionImages.filter(
                                    item => item != 'loading')
                                 uni.showToast({
                                    title: '上传失败，请重新上传',
                                    icon: 'none',
                                    mask: true
                                 })
                              }
                           },
                           fail: (err) => {
                              this.completionImages = this.completionImages.filter(
                                 item => item != 'loading')
                              uni.showToast({
                                 title: '上传失败，请重新上传',
                                 icon: 'none',
                                 mask: true
                              })
                           }
                        })
                     }
                  }
               })
            } else {
               uni.chooseVideo({
                  count: 1, //默认9
                  success: (res) => {
                     const videoExtensions = /\.(mp4|avi|rmvb)$/i;
                     if (!videoExtensions.test(res.name)) {
                        uni.showToast({
                           title: '请上传mp4, avi, rmvb格式的视频',
                           icon: 'none',
                           duration: 3000
                        })
                        return
                     }
                     this.completionVideos.push('loading')
                     const tempFilePath = res.tempFilePath;
                     uni.uploadFile({
                        url: config.imageUrl,
                        filePath: imgPathList[0],
                        filePath: tempFilePath,
                        timeout: 1000 * 45,
                        name: 'file',
                        header: {
                           Authorization: config.uploadToken
                           Authorization: uni.getStorageSync('token')
                        },
                        success: (res) => {
                           if (JSON.parse(res.data).code == 200) {
                              this.completionImages = this.completionImages.filter(item => item !=
                              this.completionVideos = this.completionVideos.filter(
                                 item => item !=
                                 'loading')
                              this.$nextTick(() => {
                                 this.completionImages.push(JSON.parse(res.data)
                                 this.completionVideos.push(JSON.parse(res.data)
                                    .data)
                                 this.localImageUrls.push(imgPathList[0])
                              })
                           } else {
                              this.againCklicFlag = true
                              this.completionImages = this.completionImages.filter(
                              this.completionVideos = this.completionVideos.filter(
                                 item => item != 'loading')
                              uni.showToast({
                                 title: '上传失败，请重新上传',
@@ -320,8 +429,7 @@
                           }
                        },
                        fail: (err) => {
                           this.againCklicFlag = true
                           this.completionImages = this.completionImages.filter(
                           this.completionVideos = this.completionVideos.filter(
                              item => item != 'loading')
                           uni.showToast({
                              title: '上传失败，请重新上传',
@@ -331,195 +439,117 @@
                        }
                     })
                  }
               },
               })
            }
         },
         // 去大屏播放视频
         openVideo(url) {
            uni.navigateTo({
               url: `/pages/work-detail/maxVideo?url=${url}`
            })
         } else {
            uni.chooseVideo({
               camera: 'back',
               success: (res) => {
                  this.completionVideos.push('loading')
                  this.againCklicFlag = true
                  const tempFilePath = res.tempFilePath;
                  uni.uploadFile({
                     url: config.imageUrl,
                     filePath: tempFilePath,
                     timeout: 1000 * 45,
                     name: 'file',
                     header: {
                        Authorization: config.uploadToken
                     },
                     success: (res) => {
                        if (JSON.parse(res.data).code == 200) {
                           this.completionVideos = this.completionVideos.filter(item => item !=
                              'loading')
                           this.$nextTick(() => {
                              this.completionVideos.push(JSON.parse(res.data).data)
                           })
                        } else {
                           this.againCklicFlag = true
                           this.completionVideos = this.completionVideos.filter(
                              item => item != 'loading')
                           uni.showToast({
                              title: '上传失败，请重新上传',
                              icon: 'none',
                              mask: true
                           })
                        }
                     },
                     fail: (err) => {
                        this.againCklicFlag = true
                        this.completionVideos = this.completionVideos.filter(
                           item => item != 'loading')
                        uni.showToast({
                           title: '上传失败，请重新上传',
                           icon: 'none',
                           mask: true
                        })
                     }
                  })
               }
            })
         }
      },
      // 去大屏播放视频
      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;
}

.color5 {
   color: #FC8D55;
}

.color6 {
   color: rgba(0, 0, 0, 0.24);
}

.color99 {
   color: #FB9A0E;
}

.bgcolor-border {
   background: rgba(255, 253, 241, 1) !important;
   border: 2rpx solid #FFE58F !important;
}

.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) 91rpx);
}

.bgcolor3 {
   background: #FFFBE6;
}

.bgcolor4 {
   background: #F8F8F8;
}

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

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

.bgcolor7 {
   background-color: rgba(252, 141, 85, 1);
}

.bgcolor8 {
   background: #FFFBE6;
}

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

.border2 {
   border: 2rpx solid rgba(0, 0, 0, 0.15);
}

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

.line-box {
   box-shadow: 0rpx 0rpx 27rpx 0rpx rgba(0, 0, 0, 0.1);
   height: 2rpx;
   background: rgba(0, 10, 26, 0.07);
}

.transition-h {
   transition: max-height 0.5s ease-out;
}

.max-300 {
   max-height: 300rpx;
}

.max-9999 {
   max-height: 9999rpx;
}

.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;
   .bs-1 {
      box-shadow: 0rpx 0rpx 27rpx 0rpx rgba(0, 0, 0, 0.1);
   }
}

.imgOrVedio {
   margin-right: 17rpx;
   position: relative;
   .color1 {
      color: #FF4948;
   }

   .img {
      width: 140rpx;
      height: 140rpx;
      border-radius: 8rpx;
      margin-top: 19rpx;
   .color2 {
      color: rgba(0, 0, 0, .8);
   }

   .color3 {
      color: #FAAD14;
   }

   .color4 {
      color: #FFFFFF;
   }

   .color5 {
      color: #FC8D55;
   }

   .color6 {
      color: rgba(0, 0, 0, 0.24);
   }

   .color99 {
      color: #FB9A0E;
   }

   .bgcolor-border {
      background: rgba(255, 253, 241, 1) !important;
      border: 2rpx solid #FFE58F !important;
   }

   .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) 91rpx);
   }

   .bgcolor3 {
      background: #FFFBE6;
   }

   .bgcolor4 {
      background: #F8F8F8;
   }

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

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

   .bgcolor7 {
      background-color: rgba(252, 141, 85, 1);
   }

   .bgcolor8 {
      background: #FFFBE6;
   }

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

   .border2 {
      border: 2rpx solid rgba(0, 0, 0, 0.15);
   }

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

   .line-box {
      box-shadow: 0rpx 0rpx 27rpx 0rpx rgba(0, 0, 0, 0.1);
      height: 2rpx;
      background: rgba(0, 10, 26, 0.07);
   }

   .transition-h {
      transition: max-height 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
   }

   .max-300 {
      max-height: 300rpx;
   }

   .max-9999 {
      max-height: 9999rpx;
   }

   .videoOpen {
@@ -533,6 +563,7 @@
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 19rpx;

      .video {
         z-index: 999;
@@ -540,40 +571,74 @@
         height: 140rpx;
      }
   }
}

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

#myVideo {
   z-index: 1;
}
      .img {
         width: 140rpx;
         height: 140rpx;
         border-radius: 8rpx;
         margin-top: 19rpx;
      }

.zIndex999 {
   z-index: 999;
}
      .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;

/deep/.u-popup__content {
   border-radius: 16rpx 16rpx 0rpx 0rpx;
}
         .video {
            z-index: 999;
            width: 140rpx;
            height: 140rpx;
         }
      }
   }

/deep/ .u-toolbar {
   border-bottom: 2rpx solid RGBA(243, 243, 243, 1);
}
   .videoImg {
      width: 140.38rpx;
      height: 140.38rpx;
      border-radius: 7.69rpx;
      position: relative;
   }

/deep/ .u-toolbar__wrapper__cancel {
   font-weight: 400;
   font-size: 30rpx;
   color: #FF4948 !important;
}
   #myVideo {
      z-index: 1;
   }

/deep/ .u-toolbar__wrapper__confirm {
   font-weight: 400;
   font-size: 30rpx;
   color: #FF4948 !important;
}
   .zIndex999 {
      z-index: 999;
   }

   /deep/.u-popup__content {
      border-radius: 16rpx 16rpx 0rpx 0rpx;
   }

   /deep/ .u-toolbar {
      border-bottom: 2rpx solid RGBA(243, 243, 243, 1);
   }

   /deep/ .u-toolbar__wrapper__cancel {
      font-weight: 400;
      font-size: 30rpx;
      color: #FF4948 !important;
   }

   /deep/ .u-toolbar__wrapper__confirm {
      font-weight: 400;
      font-size: 30rpx;
      color: #FF4948 !important;
   }

   .btn-box {
      height: 120rpx;
   }
</style>