<template>
|
<view class="content">
|
<u-navbar title="诉求详情" :bgColor="scoreTopHeight>300?'#ffffff':'transparent'" autoBack>
|
</u-navbar>
|
<view class="topColor">
|
</view>
|
<view class="allContent">
|
<view class="topStatus">
|
<view class="status">上报待上级审核</view>
|
<view class="flex a-center j-between mb-17">
|
<view class="tit">当前状态</view>
|
<!-- 延期状态 -->
|
<view v-if="false" class="flex a-center">
|
<image src="../../static/detailImg/explain.png" class="plainIcon shrink0"></image>
|
<view class="explain">延期情况说明</view>
|
</view>
|
<!-- 超时状态 -->
|
<view v-if="true" class="flex a-center">
|
<image src="../../static/detailImg/notice.png" class="overTimeIcon shrink0"></image>
|
<view class="overTime">已超时</view>
|
<view class="day">12</view>
|
<view class="overTime">天</view>
|
</view>
|
|
</view>
|
</view>
|
<!-- 已完结诉求信息 -->
|
<view class="mt-19 flex a-center j-between topMore">
|
<view class="name">诉求信息</view>
|
<view class="flex a-center">
|
<view class="more">办理进度</view>
|
<image src="../../static/detailImg/right1.png" class="moreIcon shrink0"></image>
|
</view>
|
</view>
|
|
<!-- 上报待上级审核--待审核状态显示 -->
|
<view class="card1" v-if="status==3">
|
<image src="../../static/detailImg/Ovaled.png" class="topIcon shrink0"></image>
|
<view class="infoCard">
|
<view class="flex j-between">
|
<view class="label">上报人</view>
|
<view class="value">张三</view>
|
</view>
|
<view class="flex j-between">
|
<view class="label">联系电话</view>
|
<view class="value">13987654321</view>
|
</view>
|
<view class="flex j-between">
|
<view class="label">所属部门</view>
|
<view class="value">XXXXXXX部门</view>
|
</view>
|
<view class="flex j-between">
|
<view class="label">上报时间</view>
|
<view class="value">2025-09-09 11:09:09</view>
|
</view>
|
<view class="flex j-between">
|
<view class="label">上报说明</view>
|
<view class="value">上报说明上报说明上报说明上报上报说明上报说明上报说明上报上报说明上报说明上报说明上报</view>
|
</view>
|
</view>
|
</view>
|
|
<!-- -->
|
<view class="cardInfo">
|
<view class="flex j-between a-center">
|
<view class="title">诉求号：7843523454</view>
|
<view class="flex a-center" v-if="true" @click.stop="applyOverTime">
|
<view class="apply">延期申请</view>
|
<image src="../../static/detailImg/right.png" class="rightIcon shrink0"></image>
|
</view>
|
</view>
|
<view class="addressCard">
|
<view class="address">江苏省常州市溧阳市牛顿大道172号</view>
|
<image src="../../static/detailImg/dwei.png" class="addressIcon shrink0" mode="aspectFill"></image>
|
</view>
|
<view class="flex j-between">
|
<view class="label">创建时间</view>
|
<view class="value">2025-09-09 11:09:09</view>
|
</view>
|
<view class="flex j-between">
|
<view class="label">问题类型</view>
|
<view class="value">教育</view>
|
</view>
|
<view class="flex j-between">
|
<view class="label">群众</view>
|
<view class="value">张三</view>
|
</view>
|
<view class="flex j-between">
|
<view class="label"> 联系电话</view>
|
<view class="value">13987654321</view>
|
</view>
|
<view class="flex j-between">
|
<view class="label">详细地址</view>
|
<view class="value">上报说明上报说明上报说明上报
|
上报说明上报说明上报说明上报说</view>
|
</view>
|
<!-- 上级端需要的字段 -->
|
<view class="flex j-between">
|
<view class="label">录入人</view>
|
<view class="value">上报说明上报说明上报说明</view>
|
</view>
|
<view class="flex j-between">
|
<view class="label">录入人联系方式</view>
|
<view class="value">13987654321</view>
|
</view>
|
<!-- 上级端需要的字段-->
|
</view>
|
|
<!-- 问题描述 -->
|
<view class="problem">
|
<view class="title">问题描述</view>
|
<view class="desc">
|
<view class="top">问题标题问题标题问题标题问题标题</view>
|
<view class="line1"></view>
|
<view class="context">问题描述内容问题描述内容问题描述内容问题描述内容问题描述内容问题描述内容问题描述内容问题描述内容问题描述内容问题描述内容问题描述内容</view>
|
|
</view>
|
<view class="title">描述图片</view>
|
<view class="descPic">
|
<view class="picItem" v-for="(item,index) in 3">
|
<image src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
|
class="img shrink0" mode="aspectFill">
|
</image>
|
</view>
|
</view>
|
<view class="title">描述视频</view>
|
<view class="descPic">
|
<view class="picItem relative" v-for="(item,index) in 3">
|
<!-- <image src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
|
class="img shrink0" mode="aspectFill">
|
</image> -->
|
<!-- <video :autoplay="true" src="https://www.w3schools.com/tags/movie.mp4"
|
class="img shrink0"></video> -->
|
|
|
<video id="myVideo" class="videoImg shrink0" disabled :controls="false"
|
:show-center-play-btn="false" :src="src">
|
|
</video>
|
<view class="videoOpen" @click.stop="openVideo(src)">
|
<image src="../../static/detailImg/open.png" class="video shrink0" mode="aspectFill">
|
</image>
|
</view>
|
|
|
|
</view>
|
</view>
|
</view>
|
|
<!-- 办结情况 -->
|
<view class=" flex a-center j-between topMore topMore1 ">
|
<view class="name">办结情况</view>
|
<view class="flex a-center">
|
</view>
|
</view>
|
<!-- 办结结果描述 -->
|
<view class="resultDesc">
|
<view class="topInfo">
|
<view class="flex a-center j-between mb-15">
|
<view class="flex a-center">
|
<view class="name">办结人员：</view>
|
<view class="value">13987654321</view>
|
</view>
|
<view class="flex a-center">
|
<view class="name">联系电话：</view>
|
<view class="value">13987654321</view>
|
</view>
|
</view>
|
<view class="flex a-center">
|
<view class="name">办结时间：</view>
|
<view class="value">13987654321</view>
|
</view>
|
</view>
|
<view class="title">办结结果描述</view>
|
<view class="context">
|
1、处理措施：记录为解决该问题所采取的具体措施，包括政策宣传、处理沟通、现场处理等方式。
|
2、处理时间：记录处理该问题的时间节点，包括开始处理时间、处理完成时间等。
|
3、参与人员：记录参与处理该问题的人员名单，包括走访人员、相关部门工作人员等。
|
4、结果概述：简要描述问题的处理结果，是否得到有效解决，是否达到走访对象的期望等。
|
5、后续跟进：如需进一步跟进或处理，记录后续跟进的计划、时间节点及责任人员。
|
</view>
|
<view class="title">描述图片</view>
|
<view class="descPic">
|
<view class="picItem" v-for="(item,index) in 3">
|
<image src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
|
class="img shrink0" mode="aspectFill">
|
</image>
|
</view>
|
</view>
|
<view class="title">描述视频</view>
|
<view class="descPic" v-if="false">
|
<view class="picItem" v-for="(item,index) in 3">
|
<image src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
|
class="img shrink0" mode="aspectFill">
|
</image>
|
</view>
|
</view>
|
<view v-else class="noData">暂无数据</view>
|
</view>
|
|
<!-- 详情/办理进度 --正在办理显示-->
|
<view class="progress">
|
<view class="title">当前办理进度</view>
|
<view class="proCard">
|
<view class="proItem" v-for="(item,index) in 3">
|
<view class="mr-31 flex flex-column a-center">
|
<image src="../../static/detailImg/Ovaled.png" class="proIcon shrink0" mode="aspectFill">
|
</image>
|
<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">
|
<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>
|
</view>
|
</view>
|
</view>
|
|
<!-- 详情/诉求流转 --正在办理显示-->
|
<view class="careRequire">
|
<view class="title">诉求流转</view>
|
<view class="proCard">
|
<view class="proItem" v-for="(item,index) in 3">
|
<view class="mr-34 flex flex-column a-center">
|
<image v-if="item==3" src="../../static/detailImg/Ovaled.png" class="proIcon shrink0"
|
mode="aspectFill">
|
</image>
|
<image v-else src="../../static/detailImg/Ovaled.png" class="proIcon shrink0"
|
mode="aspectFill">
|
</image>
|
|
<view v-if="item!=3" class="proLine">
|
</view>
|
</view>
|
<view class="requireItem">
|
<view class="flex a-center j-between mb-23">
|
<view class="name" :class="item==3?'opt1':''">市级下派</view>
|
<view class="time" :class="item==3?'opt1':''">2024年9月29日11:09:09</view>
|
</view>
|
<view class="name fs-23" :class="item==3?'opt1':''">上报</view>
|
|
</view>
|
</view>
|
</view>
|
|
</view>
|
</view>
|
|
<!-- 上级显示 -->
|
<view class="btnButtom" v-if="false">
|
<view class="btnDown">问题上报</view>
|
<view class="btnDown">诉求下派</view>
|
<view class="btnAdd">添加办理进度</view>
|
<view class="btnAdd">办理结果录入</view>
|
</view>
|
<view class="btnButtom" v-if="false">
|
<view class="cancel" @click.stop="showPop=true">驳回</view>
|
<view class="sure">审核通过</view>
|
</view>
|
<!-- 上级显示 -->
|
|
<!-- 党员显示 -->
|
<view class="btnButtom" v-if="true">
|
<view class="btnDown partyUp">问题上报</view>
|
<view class="btnAdd partyDown">添加办理进度</view>
|
<view class="btnAdd partyDown">办理结果录入</view>
|
</view>
|
<!-- 党员显示 -->
|
|
|
|
|
<u-popup round="19rpx" :show="showPop" mode="center" @close="close" @open="open">
|
<view class="popup-content">
|
<view class="title-pop">操作驳回</view>
|
<view class="pop-textArea">
|
<u--textarea v-model="rejectText" placeholder="请输入驳回原因"></u--textarea>
|
</view>
|
<view class="botton-btn">
|
<view class="cancle" @click.stop="showPop=false">取消</view>
|
<view class="sure" @click.stop="submitReject">确定</view>
|
</view>
|
</view>
|
</u-popup>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
showPop: false, //弹窗驳回
|
rejectText: "", //驳回原因
|
|
status: '2', //1 正在办理2已完结
|
|
scoreTopHeight: 0, //距离顶部多高
|
|
src: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4'
|
|
};
|
},
|
onPageScroll(e) {
|
this.scoreTopHeight = e.scrollTop
|
|
},
|
onShow() {
|
|
},
|
methods: {
|
open() {},
|
close() {},
|
// 去大屏播放视频
|
openVideo(url) {
|
uni.navigateTo({
|
url: `/pages/work-detail/maxVideo?url=${'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4'}`
|
})
|
},
|
// 获取订单详情信息
|
getDetailInfo() {
|
|
},
|
// 确认驳回
|
submitReject() {
|
this.showPop = false
|
},
|
//延期申请
|
applyOverTime() {
|
uni.navigateTo({
|
url: `/pages/work-detail/postpone-apply`
|
})
|
},
|
}
|
}
|
</script>
|
<style>
|
page {
|
background: linear-gradient(180deg, #FFFFFF 0%, #F9F9F9 6%, #F8F8F8 100%);
|
}
|
</style>
|
|
<style lang="scss" scoped>
|
.topColor {
|
height: 346rpx;
|
background: linear-gradient(180deg, #FFDCDB 0%, rgba(255, 255, 255, 0) 100%);
|
// padding: 176rpx 27rpx 17rpx 27rpx;
|
}
|
|
.allContent {
|
margin-top: -243rpx;
|
padding: 0 31rpx 178rpx 31rpx;
|
|
|
.topStatus {
|
.status {
|
font-weight: 600;
|
font-size: 44rpx;
|
color: #000000;
|
line-height: 62rpx;
|
margin-bottom: 15rpx;
|
}
|
|
.tit {
|
font-size: 27rpx;
|
color: rgba(0, 0, 0, 0.8);
|
line-height: 38rpx;
|
// margin-bottom: 17rpx;
|
}
|
|
.plainIcon {
|
width: 36rpx;
|
height: 36rpx;
|
}
|
|
.explain {
|
font-weight: 600;
|
font-size: 23rpx;
|
color: rgba(0, 0, 0, 0.6);
|
line-height: 33rpx;
|
margin-left: 8rpx;
|
}
|
|
.overTimeIcon {
|
width: 30.77rpx;
|
height: 30.77rpx;
|
margin-right: 15rpx;
|
}
|
|
.overTime {
|
font-weight: 400;
|
font-size: 23rpx;
|
color: #FF4948;
|
line-height: 33rpx;
|
}
|
|
.day {
|
margin: -11rpx 12rpx 0 9rpx;
|
background: #FFEAEA;
|
border-radius: 19rpx;
|
border: 2rpx solid #FF4948;
|
padding: 4rpx 24rpx;
|
font-weight: 600;
|
font-size: 42rpx;
|
color: #FF4948;
|
line-height: 42rpx;
|
}
|
}
|
|
.topMore {
|
padding: 8rpx 31rpx;
|
margin: 19rpx -31rpx 0 -31rpx;
|
background: linear-gradient(270deg, rgba(102, 102, 102, 0) 0%, rgba(102, 102, 102, 0.14) 100%);
|
|
.name {
|
font-weight: 600;
|
font-size: 23rpx;
|
color: rgba(0, 0, 0, 0.8);
|
line-height: 33rpx;
|
}
|
|
.more {
|
font-weight: 600;
|
font-size: 23rpx;
|
color: rgba(0, 0, 0, 0.6);
|
line-height: 33rpx;
|
}
|
|
.moreIcon {
|
width: 19.23rpx;
|
height: 19.23rpx;
|
margin-left: 15rpx;
|
}
|
}
|
|
.topMore1 {
|
margin-top: 38rpx !important;
|
}
|
|
.card1 {
|
margin-top: 21rpx;
|
display: flex;
|
justify-content: space-between;
|
|
.topIcon {
|
margin-top: 17rpx;
|
width: 26.23rpx;
|
height: 26.23rpx;
|
margin-right: 46rpx;
|
}
|
|
.infoCard {
|
flex: 1;
|
background: #FFFFFF;
|
box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(0, 0, 0, 0.06);
|
padding: 13rpx 30.77rpx 19rpx 31rpx;
|
border-radius: 27rpx;
|
|
.label {
|
font-weight: 400;
|
font-size: 27rpx;
|
color: rgba(0, 0, 0, 0.88);
|
line-height: 77rpx;
|
}
|
|
.value {
|
max-width: 403rpx;
|
font-weight: 500;
|
font-size: 27rpx;
|
color: rgba(0, 0, 0, 0.88);
|
line-height: 77rpx;
|
}
|
}
|
|
}
|
|
.cardInfo {
|
margin-top: 38.46rpx;
|
background: #FFFFFF;
|
box-shadow: 0rpx 0rpx 27rpx 0rpx rgba(0, 0, 0, 0.1);
|
border-radius: 8rpx;
|
padding: 21rpx 31rpx 38rpx 31rpx;
|
border-radius: 27rpx;
|
background: linear-gradient(180deg, #FFDCDB 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0) 100%);
|
|
.title {
|
font-weight: 600;
|
font-size: 23rpx;
|
color: rgba(0, 0, 0, 0.88);
|
line-height: 33rpx;
|
text-shadow: 0px 0px 27px rgba(0, 0, 0, 0.1);
|
}
|
|
.apply {
|
font-weight: 600;
|
font-size: 23rpx;
|
color: #FF4948;
|
line-height: 33rpx;
|
margin-right: 15rpx;
|
}
|
|
.rightIcon {
|
width: 19.23rpx;
|
height: 19.23rpx;
|
}
|
|
.addressCard {
|
margin: 33rpx 10rpx;
|
padding: 33rpx 27rpx;
|
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%);
|
border-radius: 19rpx;
|
display: flex;
|
justify-content: space-between;
|
|
.address {
|
font-weight: 500;
|
font-size: 27rpx;
|
color: #000000;
|
line-height: 38rpx;
|
text-shadow: 0px 0px 27px rgba(0, 0, 0, 0.1);
|
}
|
|
.addressIcon {
|
width: 23.08rpx;
|
height: 25.64rpx;
|
}
|
}
|
|
.label {
|
font-weight: 400;
|
font-size: 27rpx;
|
color: rgba(0, 0, 0, 0.88);
|
line-height: 77rpx;
|
}
|
|
.value {
|
max-width: 403rpx;
|
font-weight: 500;
|
font-size: 27rpx;
|
color: rgba(0, 0, 0, 0.88);
|
line-height: 77rpx;
|
}
|
|
}
|
|
.problem {
|
border-radius: 27rpx;
|
margin-top: 38.46rpx;
|
background: #FFFFFF;
|
box-shadow: 0rpx 0rpx 27rpx 0rpx rgba(0, 0, 0, 0.1);
|
padding: 0 31rpx 34rpx 31rpx;
|
|
.title {
|
padding-top: 34rpx;
|
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: 27rpx;
|
}
|
|
.desc {
|
background: #F8F8F8;
|
// box-shadow: 0rpx 0rpx 27rpx 0rpx rgba(0, 0, 0, 0.1);
|
border-radius: 8rpx;
|
padding: 29rpx 0 121rpx 0;
|
|
.top {
|
padding: 0 31rpx;
|
font-size: 27rpx;
|
color: rgba(0, 0, 0, 0.8);
|
line-height: 38rpx;
|
}
|
|
.line1 {
|
margin: 27rpx 0;
|
height: 2rpx;
|
background: rgba(0, 10, 26, 0.07);
|
}
|
|
.context {
|
padding: 0 31rpx;
|
font-size: 27rpx;
|
color: rgba(0, 0, 0, 0.8);
|
line-height: 38rpx;
|
}
|
}
|
|
.descPic {
|
display: flex;
|
flex-wrap: wrap;
|
|
.picItem {
|
margin-right: 15rpx;
|
|
.img {
|
width: 140.38rpx;
|
height: 140.38rpx;
|
border-radius: 7.69rpx;
|
}
|
}
|
}
|
}
|
|
.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: 46rpx;
|
|
.proIcon {
|
width: 26.23rpx;
|
height: 26.23rpx;
|
margin: 10rpx 0;
|
}
|
|
.proLine {
|
flex: 1;
|
width: 4rpx;
|
min-height: 50rpx;
|
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;
|
}
|
}
|
}
|
}
|
|
.careRequire {
|
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: 38rpx;
|
}
|
|
.proCard {
|
.proItem {
|
display: flex;
|
|
|
.proIcon {
|
width: 26.23rpx;
|
height: 26.23rpx;
|
margin: 23rpx 0 19rpx 0;
|
}
|
|
.proLine {
|
flex: 1;
|
width: 4rpx;
|
min-height: 50rpx;
|
background: rgba(0, 0, 0, 0.06);
|
border-radius: 3rpx;
|
}
|
|
.requireItem {
|
flex: 1;
|
background: #F9F9F9;
|
box-shadow: 0rpx 0rpx 27rpx 0rpx rgba(0, 0, 0, 0.1);
|
border-radius: 8rpx;
|
padding: 31rpx;
|
margin-bottom: 46rpx;
|
|
.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;
|
}
|
|
.opt1 {
|
color: rgba(0, 0, 0, 0.10) !important;
|
}
|
}
|
|
|
|
}
|
|
.proItem:last-child {
|
.proLine {
|
display: none;
|
}
|
}
|
}
|
}
|
|
.resultDesc {
|
background: #FFFFFF;
|
box-shadow: 0rpx 0rpx 27rpx 0rpx rgba(0, 0, 0, 0.1);
|
margin-top: 27rpx;
|
padding: 31rpx 31rpx 31rpx 27rpx;
|
border-radius: 27rpx;
|
|
.topInfo {
|
background: rgba(252, 141, 85, 0.1);
|
border-radius: 8rpx;
|
padding: 19rpx 27rpx;
|
|
.name {
|
font-size: 23rpx;
|
color: #000000;
|
line-height: 33rpx;
|
margin-right: 8rpx;
|
}
|
|
.value {
|
font-size: 23rpx;
|
color: #000000;
|
line-height: 33rpx;
|
}
|
}
|
|
.title {
|
font-weight: 600;
|
font-size: 27rpx;
|
color: rgba(0, 0, 0, 0.88);
|
line-height: 38rpx;
|
margin-top: 38rpx;
|
margin-bottom: 27rpx;
|
}
|
|
.context {
|
padding: 25rpx 30rpx 29rpx 31rpx;
|
|
font-size: 27rpx;
|
color: rgba(0, 0, 0, 0.8);
|
line-height: 38rpx;
|
}
|
|
|
}
|
}
|
|
.descPic {
|
display: flex;
|
flex-wrap: wrap;
|
|
.picItem {
|
margin-right: 15rpx;
|
|
|
.img {
|
width: 140.38rpx;
|
height: 140.38rpx;
|
border-radius: 7.69rpx;
|
}
|
}
|
|
.videoImg {
|
width: 140.38rpx;
|
height: 140.38rpx;
|
border-radius: 7.69rpx;
|
position: relative;
|
}
|
|
.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;
|
|
.video {
|
z-index: 999;
|
width: 140rpx;
|
height: 140rpx;
|
}
|
}
|
}
|
|
.noData {
|
font-size: 27rpx;
|
color: rgba(0, 0, 0, 0.40);
|
line-height: 38rpx;
|
}
|
|
#myVideo {
|
z-index: 1;
|
}
|
|
.btnButtom {
|
z-index: 99;
|
position: fixed;
|
bottom: 0;
|
width: 100vw;
|
box-sizing: border-box;
|
padding: 33rpx 31rpx;
|
display: flex;
|
background-color: #ffffff;
|
justify-content: space-between;
|
|
.cancel {
|
background: #FFFFFF;
|
border: 2rpx solid;
|
box-shadow: 0 0 0 5px linear-gradient(270deg, rgba(252, 141, 85, 1), rgba(255, 73, 72, 1));
|
border-image-slice: 1;
|
border-radius: 38rpx;
|
font-size: 27rpx;
|
color: #FF4948;
|
line-height: 38rpx;
|
padding: 19rpx 138rpx;
|
}
|
|
.sure {
|
background: linear-gradient(270deg, #FC8D55 0%, #FF4948 100%);
|
border-radius: 38rpx;
|
font-size: 27rpx;
|
color: #FFFFFF;
|
line-height: 38rpx;
|
padding: 19rpx 119rpx 19rpx 119rpx;
|
}
|
|
.btnDown {
|
background: #FFFFFF;
|
border: 2rpx solid;
|
box-shadow: 0 0 0 5px linear-gradient(270deg, rgba(252, 141, 85, 1), rgba(255, 73, 72, 1));
|
border-image-slice: 1;
|
border-radius: 38rpx;
|
font-size: 27rpx;
|
color: #FF4948;
|
line-height: 38rpx;
|
padding: 19rpx 13rpx;
|
}
|
|
.btnAdd {
|
background: linear-gradient(270deg, #FC8D55 0%, #FF4948 100%);
|
border-radius: 38rpx;
|
font-size: 27rpx;
|
color: #FFFFFF;
|
line-height: 38rpx;
|
padding: 19rpx 15rpx 19rpx 15rpx;
|
}
|
|
.partyUp {
|
padding: 19rpx 52rpx !important;
|
}
|
|
.partyDown {
|
padding: 19rpx 25rpx 19rpx 25rpx !important;
|
}
|
|
|
}
|
|
.popup-content {
|
background: url('/static/pop@2x.png') no-repeat center center;
|
width: 576.92rpx;
|
// height: 425rpx;
|
border-radius: 19rpx;
|
|
.title-pop {
|
font-family: PingFangSC, PingFang SC;
|
font-weight: 600;
|
font-size: 35rpx;
|
color: rgba(0, 0, 0, 0.8);
|
line-height: 35rpx;
|
text-align: center;
|
margin-top: 46.15rpx;
|
}
|
|
.pop-textArea {
|
padding: 34rpx 44rpx 0 44rpx;
|
|
::v-deep .u-textarea {}
|
|
}
|
|
.pop-label {
|
font-family: PingFang-SC, PingFang-SC;
|
font-weight: 500;
|
font-size: 31rpx;
|
color: rgba(0, 0, 0, 0.6);
|
margin-top: 46.15rpx;
|
margin-left: 64.54rpx;
|
}
|
|
.pop-select {
|
height: 77rpx;
|
background: #FFFFFF;
|
border-radius: 15rpx;
|
border: 2rpx solid rgba(0, 0, 0, 0.15);
|
margin-left: 61.54rpx;
|
margin-top: 19.23rpx;
|
margin-right: 61.54rpx;
|
display: flex;
|
align-items: center;
|
padding-left: 30.77rpx;
|
font-family: PingFangSC, PingFang SC;
|
font-weight: 400;
|
font-size: 31rpx;
|
color: rgba(0, 0, 0, 0.24);
|
cursor: pointer;
|
}
|
|
.botton-btn {
|
display: flex;
|
margin-top: 44.23rpx;
|
justify-content: center;
|
padding-bottom: 55rpx;
|
}
|
|
.cancle {
|
width: 212rpx;
|
height: 77rpx;
|
border-radius: 48rpx;
|
border: 2rpx solid rgba(0, 0, 0, 0.8);
|
font-family: PingFangSC, PingFang SC;
|
font-weight: 500;
|
font-size: 27rpx;
|
color: rgba(0, 0, 0, 0.8);
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
margin-right: 32.69rpx;
|
cursor: pointer;
|
}
|
|
.sure {
|
width: 212rpx;
|
height: 77rpx;
|
background: linear-gradient(270deg, #FC8D55 0%, #FF4948 100%);
|
border-radius: 48rpx;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
font-family: PingFangSC, PingFang SC;
|
font-weight: 600;
|
font-size: 27rpx;
|
color: #FFFFFF;
|
cursor: pointer;
|
}
|
}
|
|
.preview-full {
|
width: 100vw;
|
height: 100vh;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
background-color: #000000;
|
|
.maxVideo {
|
width: 100%;
|
}
|
}
|
</style>
|
