860 lines
20 KiB
Vue
860 lines
20 KiB
Vue
<template>
|
|
<view class="dl-detail-box">
|
|
<navigation-bar-vue title="会员中心" style="width: 100%;" background-color="#ffffff"
|
|
title-color="#000000"></navigation-bar-vue>
|
|
<view class="notice-detail-last-box">
|
|
<!-- 博主信息 -->
|
|
<view class="info-box">
|
|
<image class="image" :src="userDetail.avatar?imageUrl+userDetail.avatar :'/static/images/profile.jpg'"
|
|
mode="aspectFit"></image>
|
|
<view class="name-info">
|
|
<view class="name">{{userDetail.nickName||''}}</view>
|
|
<view class="text">{{userDetail.identityType||''}}</view>
|
|
</view>
|
|
<view class="fork-info">
|
|
<view class="up-box">
|
|
<view class="item-dom-guanzhu" v-if="!isLove" @click="forkUser('1')">关注</view>
|
|
<view class="item-dom-yiguanzhu" v-if="isLove" @click="forkUser('0')">已关注</view>
|
|
<view class="item-dom-zhuye">主页</view>
|
|
</view>
|
|
<view class="down-box">举报</view>
|
|
</view>
|
|
</view>
|
|
<!-- 通告信息 -->
|
|
<view class="info-box notice-main">
|
|
<view class="dl-notice-title">
|
|
<image class="dl-image" :src="'/static/platform/'+noticeDetail.platformCode+'.png'"
|
|
mode="aspectFit"></image>
|
|
<view class="dl-text">{{noticeDetail.title||''}}</view>
|
|
</view>
|
|
<view class="end-time">截止日期：{{noticeDetail.endDate||''}}</view>
|
|
<view class="field-box">
|
|
<view class="dl-item">
|
|
<view class="dl-label">
|
|
奖励：
|
|
</view>
|
|
<view class="dl-value">
|
|
<text v-if="null==noticeDetail.feeUp">无稿费</text>
|
|
<text v-else>¥{{noticeDetail.feeDown||''}}-{{noticeDetail.feeUp||''}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="dl-item">
|
|
<view class="dl-label">
|
|
招募名额：
|
|
</view>
|
|
<view class="dl-value">{{noticeDetail.needNum||''}}人 </view>
|
|
</view>
|
|
<view class="dl-item">
|
|
<view class="dl-label">
|
|
产品品牌：
|
|
</view>
|
|
<view class="dl-value">{{noticeDetail.brand||''}} </view>
|
|
</view>
|
|
<view class="dl-item">
|
|
<view class="dl-label">
|
|
粉丝要求：
|
|
</view>
|
|
<view class="dl-value">
|
|
{{formatNumberWithUnits(noticeDetail.fansDown)||''}}-{{formatNumberWithUnits(noticeDetail.fansUp)||''}}
|
|
</view>
|
|
</view>
|
|
<view class="dl-item">
|
|
<view class="dl-label">
|
|
地区要求：
|
|
</view>
|
|
<view class="dl-value">{{noticeDetail.city||''}} </view>
|
|
</view>
|
|
<view class="dl-item">
|
|
<view class="dl-label">
|
|
博主类型：
|
|
</view>
|
|
<view class="dl-value">{{noticeDetail.bloggerTypes||''}}</view>
|
|
</view>
|
|
</view>
|
|
<view class="bottom-box">
|
|
<text class="update-text">{{calculateTimeDifference(noticeDetail.updateTime)||''}}更新</text>
|
|
<text class="view-text">{{noticeDetail.viewNum||''}} 阅读</text>
|
|
</view>
|
|
</view>
|
|
<!-- 通告详情 -->
|
|
<view class="info-box notice-detail">
|
|
<view class="detail-title">通告详情</view>
|
|
<view class="detail-content">
|
|
<rich-text style="width: 100%" :nodes="noticeDetail.detail" />
|
|
</view>
|
|
<view class="detail-images">
|
|
<image v-for="(item,index) in noticeDetail.imageArray" @click="preview(noticeDetail.imageArray)"
|
|
:src="imageUrl+item" mode="widthFix"></image>
|
|
</view>
|
|
</view>
|
|
<!-- 联系方式 -->
|
|
<view class="info-box notice-detail">
|
|
<view class="detail-title">联系方式</view>
|
|
<view class="field-box">
|
|
<view class="dl-item">
|
|
<view class="dl-label">
|
|
联系人：
|
|
</view>
|
|
<view class="dl-value">报名后可查看 </view>
|
|
</view>
|
|
<view class="dl-item">
|
|
<view class="dl-label">
|
|
微信号：
|
|
</view>
|
|
<view class="dl-value">报名后可查看 </view>
|
|
</view>
|
|
<view class="dl-item">
|
|
<view class="dl-label">
|
|
微信二维码：
|
|
</view>
|
|
<view class="dl-value">报名后可查看 </view>
|
|
</view>
|
|
<view class="dl-item">
|
|
<view class="dl-label">
|
|
加入通告二维码：
|
|
</view>
|
|
<view class="dl-value">报名后可查看 </view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 报名列表 -->
|
|
<view class="info-box notice-detail">
|
|
<view class="detail-title">已报名：{{imageArray.length||0}}人</view>
|
|
<view class="image-box" v-if="imageArray.length>0"
|
|
:style="{height:(imageArray.length*(imageWidth+10)+20)+'rpx'}">
|
|
<view class="image-row" v-for="(row,rowIndex) in imageArray">
|
|
<image v-for="(item,i) in row"
|
|
:style="{ top:(imageWidth+10)*rowIndex+'rpx',left:imageWidth*i+'rpx'}"
|
|
src="@/static/images/profile.jpg" mode="aspectFit">
|
|
</image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 去报名，始终浮动下方 -->
|
|
<view class="dl-bottom-box" v-show="showBottom">
|
|
<!-- 报名 -->
|
|
<view class="report-box">
|
|
<view @click="goHome()">
|
|
<image src="@/static/detail/home.png" mode="aspectFit"></image>
|
|
</view>
|
|
<view @click="shareFun()">
|
|
<image src="@/static/detail/share.png" mode="aspectFit"></image>
|
|
</view>
|
|
<view v-if="null==userInfo" class="join-report">请登录后报名</view>
|
|
<view v-else-if="ifBz" @click="goReport()" class="join-report">报名参加</view>
|
|
<view v-else class="join-report" @click="changeUserType()">切换博主后报名</view>
|
|
</view>
|
|
<!-- 通告发布人能操作的 -->
|
|
<view class="report-box" v-if="null!=userInfo && userInfo.userId==noticeDetail.userId&&ifBz==false">
|
|
<view v-if="'0'==noticeDetail.approvalStatus" class="close-notice">关闭</view>
|
|
<view v-if="'0'==noticeDetail.approvalStatus" class="waiting-approval">
|
|
<view>审核中</view>
|
|
<image @click="useCoupon()" src="@/static/detail/approval.png" mode="aspectFit"></image>
|
|
</view>
|
|
<view v-if="'2'==noticeDetail.approvalStatus" class="waiting-approval">已关闭</view>
|
|
<view v-if="'1'==noticeDetail.approvalStatus" class="waiting-approval" @click="closeNotice('2')">关闭
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 提示窗示例 -->
|
|
<uni-popup ref="alertDialog" type="dialog">
|
|
<uni-popup-dialog cancelText="取消" confirmText="创建" iconPath="/static/detail/card.png"
|
|
content="没有符合粉丝要求的名片,无法报名" @confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
|
|
</uni-popup>
|
|
<!-- 分享示例 -->
|
|
<uni-popup ref="share" type="share" safeArea backgroundColor="#fff">
|
|
<uni-popup-share @select="selectShare()"></uni-popup-share>
|
|
</uni-popup>
|
|
<!-- 海报 -->
|
|
<shareImages ref="canvas" :canvasWidth="canvasWidth" :canvasHeight="canvasHeight" :shareTitle="shareTitle"
|
|
:goodsTitle="goodsTitle" :shareImage="shareImage" :qrSize="qrSize" :qrUrl="qrUrl"
|
|
@success="shareSuccess()" />
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import navigationBarVue from '@/components/navigation/navigationBar.vue';
|
|
import html2canvas from 'html2canvas';
|
|
import shareImages from '@/components/hj-placard/shareImages.vue'
|
|
import constant from '@/utils/constant';
|
|
import {
|
|
changeUserType,
|
|
getUserType,
|
|
formatNumberWithUnits,
|
|
calculateTimeDifference
|
|
} from '@/utils/common.js'
|
|
import {
|
|
getJSONData
|
|
} from '@/utils/auth.js'
|
|
import {
|
|
getNoticeDetail,
|
|
addView,
|
|
closeNotice
|
|
} from '@/api/business/notice';
|
|
import {
|
|
postForkUser
|
|
} from '@/api/business/base.js'
|
|
import config from '@/config'
|
|
import {
|
|
getSignCard
|
|
} from '@/api/business/signCard.js'
|
|
export default {
|
|
components: {
|
|
shareImages,
|
|
navigationBarVue
|
|
},
|
|
data() {
|
|
return {
|
|
//通告ID
|
|
noticeId: null,
|
|
imageUrl: config.baseUrl,
|
|
//是否显示下方操作按钮--刚开始不显示
|
|
showBottom: false,
|
|
//当前用户
|
|
userInfo: null,
|
|
//报名的头像数组
|
|
imageArray: [
|
|
|
|
],
|
|
//每张图片的宽度rpx--堆叠后的宽度
|
|
imageWidth: 70,
|
|
//默认博主
|
|
ifBz: true,
|
|
//当前用户是否关注该博主
|
|
isLove: false,
|
|
//当前用户是否已报名该通告
|
|
isSign: false,
|
|
//通告主详情
|
|
userDetail: {
|
|
avatar: '',
|
|
identityType: "未认证",
|
|
nickName: "",
|
|
userId: null
|
|
},
|
|
//通告详情
|
|
noticeDetail: {
|
|
id: "",
|
|
title: "",
|
|
endDate: null,
|
|
feeDown: null,
|
|
feeUp: null,
|
|
needNum: null,
|
|
userId: null,
|
|
brand: null,
|
|
fansDown: null,
|
|
fansUp: null,
|
|
city: null,
|
|
bloggerTypes: null,
|
|
updateTime: null,
|
|
approvalStatus: '0',
|
|
viewNum: 0,
|
|
detail: null,
|
|
platformCode: "",
|
|
platformName: "",
|
|
//通告产品图
|
|
imageArray: []
|
|
},
|
|
canvasImages: '',
|
|
canvasWidth: 375, // 宽度
|
|
canvasHeight: 500, // 高度
|
|
shareTitle: '我是这张图片的标题', // 分享标题
|
|
goodsTitle: '我是这张图片的标题我是这张图片的标题我是这张图片的标', // 商品宣传标题
|
|
shareImage: '/static/bg.jpg', // 背景图片
|
|
qrSize: 100, // 二维码大小
|
|
qrUrl: 'https://ext.dcloud.net.cn/plugin?id=5747', // 生成二维码的链接
|
|
}
|
|
},
|
|
onReady() {
|
|
this.calculateImagesPerRow();
|
|
//通知
|
|
this.checkUserType()
|
|
this.showBottom = true
|
|
// this.$refs.alertDialog.open()
|
|
},
|
|
onLoad(params) {
|
|
this.noticeId = params.id
|
|
if (null != getJSONData(constant.userInfo)) {
|
|
this.userInfo = getJSONData(constant.userInfo)
|
|
}
|
|
this.getDetail()
|
|
this.viewNotice()
|
|
},
|
|
methods: {
|
|
preview(imageArray) {
|
|
let previewImages = []
|
|
imageArray.forEach(it => {
|
|
previewImages.push(this.imageUrl + it)
|
|
})
|
|
|
|
uni.previewImage({
|
|
urls: previewImages, // 需要预览的图片链接列表
|
|
});
|
|
},
|
|
/**
|
|
* 转换时间单位
|
|
* @param {Object} time
|
|
*/
|
|
calculateTimeDifference(time) {
|
|
return calculateTimeDifference(time)
|
|
},
|
|
/**
|
|
* 数值单位转换
|
|
* @param {Object} number
|
|
*/
|
|
formatNumberWithUnits(number) {
|
|
return formatNumberWithUnits(number)
|
|
},
|
|
/**
|
|
* 关闭通告
|
|
*/
|
|
closeNotice(status) {
|
|
closeNotice({
|
|
noticeId: this.noticeId,
|
|
publishTakeDown: status
|
|
}).then(res => {
|
|
if (res.code == 200) {
|
|
uni.showToast({
|
|
icon: 'success',
|
|
duration: 2000,
|
|
title: '操作成功'
|
|
});
|
|
this.getDetail(this.noticeId)
|
|
}
|
|
}).catch((e) => {
|
|
uni.showToast({
|
|
icon: 'error',
|
|
duration: 2000,
|
|
title: e
|
|
});
|
|
})
|
|
},
|
|
/**
|
|
* 关注、取消关注
|
|
* @param {Object} isLove
|
|
*/
|
|
forkUser(isLove) {
|
|
postForkUser({
|
|
userId: this.noticeDetail.userId,
|
|
isLove: isLove
|
|
}).then(res => {
|
|
if (res.code == 200) {
|
|
uni.showToast({
|
|
icon: 'success',
|
|
duration: 2000,
|
|
title: '操作成功'
|
|
});
|
|
this.getDetail(this.noticeId)
|
|
}
|
|
}).catch((e) => {
|
|
uni.showToast({
|
|
icon: 'error',
|
|
duration: 2000,
|
|
title: e
|
|
});
|
|
})
|
|
},
|
|
/**
|
|
* 查通告详情
|
|
*/
|
|
getDetail() {
|
|
getNoticeDetail({
|
|
noticeId: this.noticeId
|
|
}).then(res => {
|
|
if (res.code == 200) {
|
|
this.noticeDetail = res.data.noticeDetail
|
|
this.userDetail = res.data.userDetail
|
|
this.imageArray = res.data.signUserAvatarList
|
|
this.isLove = res.data.isLove
|
|
this.isSign = res.data.isSign
|
|
if (this.noticeDetail.images) {
|
|
this.noticeDetail.imageArray = this.noticeDetail.images.split(",")
|
|
}
|
|
}
|
|
}).catch((e) => {
|
|
this.isTriggered = false
|
|
uni.showToast({
|
|
icon: 'error',
|
|
duration: 2000,
|
|
title: e
|
|
});
|
|
})
|
|
},
|
|
/**
|
|
* 浏览通告
|
|
*/
|
|
viewNotice() {
|
|
let userId = null
|
|
if (null != this.userInfo) {
|
|
userId = this.userInfo.userId
|
|
}
|
|
addView({
|
|
noticeId: this.noticeId,
|
|
userId: userId
|
|
}).then(res => {
|
|
|
|
}).catch((e) => {
|
|
uni.showToast({
|
|
icon: 'error',
|
|
duration: 2000,
|
|
title: e
|
|
});
|
|
})
|
|
},
|
|
// 回调图片地址
|
|
shareSuccess(e) {
|
|
// console.log('地址',e)
|
|
this.canvasImages = e
|
|
uni.previewImage({
|
|
urls: [this.canvasImages],
|
|
});
|
|
},
|
|
/**
|
|
* 分享点击事件
|
|
* @param {Object} item
|
|
* @param {Object} index
|
|
*/
|
|
selectShare(dataObj) {
|
|
if ('hb' == dataObj.item.name) {
|
|
//海报
|
|
this.$refs.canvas.canvasCreate();
|
|
}
|
|
},
|
|
/**
|
|
* 微信分享
|
|
* @param {Object} res
|
|
*/
|
|
onShareAppMessage(res) {
|
|
if (res.from === 'button') { // 来自页面内分享按钮
|
|
console.log(res.target)
|
|
}
|
|
return {
|
|
title: '【' + this.noticeDetail.platformName + '】' + this.noticeDetail.title,
|
|
path: '/pages/notice/detail?id=' + this.noticeDetail.id
|
|
}
|
|
},
|
|
dialogConfirm() {
|
|
console.log('点击确认')
|
|
this.$tab.navigateTo('/pages/mine/card/my-card')
|
|
},
|
|
dialogClose() {
|
|
console.log('点击关闭')
|
|
},
|
|
/**
|
|
* 去首页
|
|
*/
|
|
goHome() {
|
|
this.$tab.reLaunch('/pages/index')
|
|
},
|
|
/**
|
|
* 报名
|
|
*/
|
|
goReport() {
|
|
getSignCard({
|
|
noticeId: this.noticeId
|
|
}).then(res => {
|
|
if (res.code == 200) {
|
|
if (res.data.canUserNum > 0) {
|
|
this.$tab.navigateTo('/pages/notice/report?noticeId=' + this.noticeId)
|
|
} else {
|
|
this.$refs.alertDialog.open()
|
|
}
|
|
console.log(res);
|
|
}
|
|
}).catch((e) => {
|
|
uni.showToast({
|
|
icon: 'error',
|
|
duration: 2000,
|
|
title: e
|
|
});
|
|
})
|
|
|
|
},
|
|
/**
|
|
* 分享
|
|
*/
|
|
shareFun() {
|
|
this.$refs.share.open()
|
|
},
|
|
/**
|
|
* 使用通告券加速
|
|
*/
|
|
useCoupon() {
|
|
|
|
},
|
|
/**
|
|
* 计算头像显示区域高度
|
|
*/
|
|
calculateImagesPerRow() {
|
|
const systemInfo = uni.getSystemInfoSync();
|
|
//1rpx 转换px 的单位
|
|
let rpxUnit = (systemInfo.screenWidth / 750)
|
|
// 显示头像区域的宽度--去掉多余的空间-px
|
|
let screenWidth = systemInfo.screenWidth - (86 * rpxUnit)
|
|
// 每张图片的宽度px
|
|
let imageWidthPx = this.imageWidth * rpxUnit;
|
|
//每行可以显示多少张图片
|
|
let imagesPerRow = Math.floor(screenWidth / imageWidthPx);
|
|
//设置测试数据
|
|
let thisArray = []
|
|
for (var i = 0; i < 50; i++) {
|
|
thisArray.push('/static/images/profile.jpg')
|
|
}
|
|
for (let i = 0; i < thisArray.length; i += imagesPerRow) {
|
|
this.imageArray.push(thisArray.slice(i, i + imagesPerRow));
|
|
}
|
|
console.log(this.imageArray, "imageArray")
|
|
},
|
|
/**
|
|
* 判断用户类型
|
|
*/
|
|
checkUserType() {
|
|
let userType = getUserType()
|
|
if (constant.bz != userType) {
|
|
//不是博主
|
|
this.ifBz = false
|
|
}
|
|
},
|
|
/**
|
|
* 切换当前用户类型为博主
|
|
*/
|
|
changeUserType() {
|
|
this.ifBz = true
|
|
changeUserType(constant.bz)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.dl-detail-box {
|
|
width: 100%;
|
|
padding-top: calc(90rpx + var(--status-bar-height));
|
|
background-color: white;
|
|
color: #363636;
|
|
font-size: 30rpx;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
|
|
.notice-detail-last-box {
|
|
height: calc(100vh - var(--status-bar-height) - var(--window-bottom) - 90rpx);
|
|
overflow-y: scroll;
|
|
padding: 30rpx 30rpx 115rpx 30rpx;
|
|
background-color: #F6F6F6;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: self-start;
|
|
justify-content: start;
|
|
position: relative;
|
|
|
|
.info-box {
|
|
width: 100%;
|
|
padding: 28rpx;
|
|
display: flex;
|
|
background-color: white;
|
|
border-radius: 30rpx;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 25rpx;
|
|
|
|
.image {
|
|
flex: none;
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.name-info {
|
|
width: calc(100% - 350rpx);
|
|
flex: 1;
|
|
padding-left: 30rpx;
|
|
text-align: left;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
justify-content: center;
|
|
|
|
.name {
|
|
width: 100%;
|
|
font-weight: bold;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
padding-bottom: 10rpx;
|
|
}
|
|
|
|
.text {
|
|
font-size: 24rpx;
|
|
color: #929292;
|
|
}
|
|
}
|
|
|
|
.fork-info {
|
|
flex: none;
|
|
width: 270rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.up-box {
|
|
padding-bottom: 5rpx;
|
|
display: flex;
|
|
font-size: 28rpx;
|
|
padding-left: 10rpx;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.item-dom-guanzhu {
|
|
padding: 5rpx 22rpx;
|
|
border-radius: 20rpx;
|
|
color: white;
|
|
background-color: #FC1F3E;
|
|
}
|
|
|
|
.item-dom-yiguanzhu {
|
|
padding: 5rpx 22rpx;
|
|
border: 1rpx solid #FC1F3E;
|
|
border-radius: 20rpx;
|
|
color: #FC1F3E;
|
|
background-color: white;
|
|
}
|
|
|
|
.item-dom-zhuye {
|
|
margin-left: 15rpx;
|
|
padding: 5rpx 22rpx;
|
|
border-radius: 20rpx;
|
|
background-color: #F4F4F4;
|
|
}
|
|
}
|
|
|
|
.down-box {
|
|
padding-top: 10rpx;
|
|
font-size: 24rpx;
|
|
color: #929292;
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
|
|
.notice-main {
|
|
align-items: flex-start;
|
|
flex-direction: column;
|
|
|
|
.dl-notice-title {
|
|
display: flex;
|
|
width: 100%;
|
|
padding-bottom: 10rpx;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.dl-image {
|
|
flex: none;
|
|
width: 70rpx;
|
|
height: 70rpx;
|
|
}
|
|
|
|
.dl-text {
|
|
margin-left: 10rpx;
|
|
flex: 1;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
width: 100%;
|
|
font-weight: bold;
|
|
|
|
}
|
|
}
|
|
|
|
.end-time {
|
|
border-radius: 15rpx;
|
|
background-color: #FFF4F5;
|
|
padding: 8rpx 20rpx;
|
|
color: #FC1F3E;
|
|
}
|
|
|
|
.field-box {
|
|
margin: 20rpx 0;
|
|
padding: 25rpx 20rpx;
|
|
background-color: #FAFAFA;
|
|
border-radius: 15rpx;
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: flex-start;
|
|
flex-direction: column;
|
|
|
|
.dl-item {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: flex-start;
|
|
margin-bottom: 10rpx;
|
|
|
|
.dl-label {}
|
|
|
|
.dl-value {
|
|
flex: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
.bottom-box {
|
|
width: 100%;
|
|
border-top: 1rpx solid #F7F7F7;
|
|
padding: 25rpx 30rpx 5rpx 30rpx;
|
|
color: #929292;
|
|
font-size: 24rpx;
|
|
|
|
.update-text {
|
|
float: left;
|
|
}
|
|
|
|
.view-text {
|
|
float: right;
|
|
}
|
|
}
|
|
}
|
|
|
|
.notice-detail {
|
|
align-items: flex-start;
|
|
flex-direction: column;
|
|
|
|
.detail-title {
|
|
border-left: 8rpx solid #FC1F3E;
|
|
font-weight: bold;
|
|
padding-left: 20rpx;
|
|
}
|
|
|
|
.detail-content {
|
|
width: 100%;
|
|
padding: 20rpx 0;
|
|
border-bottom: 1rpx solid #F7F7F7;
|
|
}
|
|
|
|
.detail-images {
|
|
width: 100%;
|
|
|
|
image {
|
|
width: 100%;
|
|
margin-top: 20rpx;
|
|
}
|
|
}
|
|
|
|
.field-box {
|
|
margin-top: 20rpx;
|
|
padding-top: 10rpx;
|
|
border-radius: 15rpx;
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: flex-start;
|
|
flex-direction: column;
|
|
|
|
.dl-item {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: flex-start;
|
|
margin-bottom: 10rpx;
|
|
|
|
.dl-label {}
|
|
|
|
.dl-value {
|
|
flex: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
.image-box {
|
|
width: 100%;
|
|
padding: 20rpx 0;
|
|
|
|
.image-row {
|
|
width: 100%;
|
|
position: relative;
|
|
|
|
image {
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
width: 90rpx;
|
|
height: 90rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.dl-bottom-box {
|
|
border-top: 1rpx solid #F7F7F7;
|
|
color: #363636;
|
|
position: fixed;
|
|
padding-bottom: 20rpx;
|
|
padding-top: 20rpx;
|
|
padding-left: 40rpx;
|
|
padding-right: 40rpx;
|
|
bottom: 0;
|
|
background-color: #F7F7F7;
|
|
width: 100%;
|
|
|
|
.report-box {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
.share-image {
|
|
pointer-events: none;
|
|
background-color: #F7F7F7;
|
|
}
|
|
|
|
|
|
image {
|
|
margin-right: 25rpx;
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
}
|
|
|
|
.join-report {
|
|
margin-left: 20rpx;
|
|
flex: 1;
|
|
padding: 15rpx;
|
|
text-align: center;
|
|
background-color: #FC1F3E;
|
|
border-radius: 14rpx;
|
|
color: white;
|
|
}
|
|
|
|
.close-notice {
|
|
padding: 15rpx 25rpx;
|
|
background-color: #F7F7F7;
|
|
border: 1rpx solid #E2E2E2;
|
|
border-radius: 10rpx;
|
|
margin-right: 20rpx;
|
|
}
|
|
|
|
.waiting-approval {
|
|
text-align: center;
|
|
padding: 15rpx 25rpx;
|
|
background-color: #E2E2E2;
|
|
border: 1rpx solid #D1D1D1;
|
|
border-radius: 10rpx;
|
|
position: relative;
|
|
flex: 1;
|
|
|
|
image {
|
|
position: absolute;
|
|
top: -30px;
|
|
margin: auto;
|
|
left: 200rpx;
|
|
width: 150rpx;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|