954 lines
23 KiB
Vue
954 lines
23 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 notice-detail" v-if="viewMy">
|
||
<view class="detail-title">已报名：{{allImgNum||0}}人</view>
|
||
<view class="image-box" v-if="imageArray.length>0"
|
||
:style="{height:(imageArray.length*(imageWidth*2))+'rpx'}">
|
||
<view class="image-row" v-for="(row,rowIndex) in imageArray">
|
||
<image v-for="(item,i) in row" v-if="!item"
|
||
:style="{ top:(imageWidth+10)*rowIndex+'rpx',left:imageWidth*i+'rpx'}"
|
||
src="@/static/images/profile.jpg" mode="aspectFit">
|
||
</image>
|
||
|
||
<image v-for="(item,i) in row" v-else
|
||
:style="{ top:(imageWidth+10)*rowIndex+'rpx',left:imageWidth*i+'rpx'}" :src="item"
|
||
mode="aspectFit">
|
||
</image>
|
||
</view>
|
||
</view>
|
||
<!-- <view class="view-report-button" v-if="imageArray.length>0" @click="goReportList()">查看报名</view> -->
|
||
<view class="view-report-button" @click="goReportList()">查看报名</view>
|
||
</view>
|
||
<!-- 博主信息 -->
|
||
<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" @click="goMemberIndex()">主页</view>
|
||
</view>
|
||
<view class="down-box" @click="goReportForm()">
|
||
<image src="@/static/detail/jubao.png" mode="aspectFit"></image>举报
|
||
</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||'0'}}-{{noticeDetail.feeUp||''}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="dl-item">
|
||
<view class="dl-label">
|
||
招募名额：
|
||
</view>
|
||
<view class="dl-value">{{noticeDetail.needNum||'0'}}人 </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)||'0'}}-{{formatNumberWithUnits(noticeDetail.fansUp)||''}}
|
||
</view>
|
||
</view>
|
||
<view class="dl-item" v-if='noticeDetail.province'>
|
||
<view class="dl-label">
|
||
地区要求：
|
||
</view>
|
||
<view class="dl-value">{{noticeDetail.province+(noticeDetail.city?('-'+noticeDetail.city):'')}}
|
||
</view>
|
||
</view>
|
||
<view class="dl-item" v-if='noticeDetail.bloggerTypes'>
|
||
<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" v-if="passSign">
|
||
|
||
|
||
<view class="dl-item">
|
||
<view class="dl-label">
|
||
微信群码图片：
|
||
</view>
|
||
|
||
<view class="dl-value">
|
||
<image v-if="noticeDetail.groupImage" @click="preview([noticeDetail.groupImage])"
|
||
:src="imageUrl+noticeDetail.groupImage" mode="widthFix"></image>
|
||
<text v-else>未上传，请等待通告主联系</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="field-box" v-else>
|
||
|
||
<view class="dl-item">
|
||
<view class="dl-label">
|
||
微信群码图片：
|
||
</view>
|
||
<view class="dl-value">报名后可查看 </view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 报名列表 -->
|
||
<view class="info-box notice-detail" v-if="!viewMy">
|
||
<view class="detail-title">已报名：{{allImgNum}}人</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">
|
||
<span v-for=" (item,i) in row">
|
||
<image v-if="item" :style="{ top:(imageWidth+10)*rowIndex+'rpx',left:imageWidth*i+'rpx'}"
|
||
:src="item" mode="aspectFit">
|
||
</image>
|
||
<image v-else :style="{ top:(imageWidth+10)*rowIndex+'rpx',left:imageWidth*i+'rpx'}"
|
||
src="@/static/images/profile.jpg" mode="aspectFit">
|
||
</image>
|
||
</span>
|
||
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 去报名，始终浮动下方 -->
|
||
<view class="dl-bottom-box" v-show="showBottom&&type=='common'">
|
||
<!-- 报名 -->
|
||
<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="!isSign && ifBz" @click="goReport()" class="join-report">报名参加</view>
|
||
<view v-else-if="isSign && ifBz" 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 {
|
||
//是否是看自己的通告-通告主
|
||
viewMy: false,
|
||
//通告ID
|
||
noticeId: null,
|
||
imageUrl: config.baseUrl,
|
||
//是否显示下方操作按钮--刚开始不显示
|
||
showBottom: false,
|
||
//当前用户
|
||
userInfo: null,
|
||
//报名的头像数组
|
||
imageArray: [
|
||
|
||
],
|
||
//所有报名的数组
|
||
allImgNum: 0,
|
||
//每张图片的宽度rpx--堆叠后的宽度
|
||
imageWidth: 70,
|
||
//默认博主
|
||
ifBz: true,
|
||
//当前用户是否关注该博主
|
||
isLove: false,
|
||
//当前用户是否已报名该通告
|
||
passSign: false,
|
||
isSign: true,
|
||
//通告主详情
|
||
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', // 生成二维码的链接
|
||
type: 'common'
|
||
}
|
||
},
|
||
onReady() {
|
||
|
||
//通知
|
||
this.checkUserType()
|
||
this.showBottom = true
|
||
// this.$refs.alertDialog.open()
|
||
},
|
||
onLoad(params) {
|
||
if (params.viewMy) {
|
||
this.viewMy = true
|
||
}
|
||
if (params.type) {
|
||
this.type = params.type
|
||
}
|
||
this.noticeId = params.id
|
||
if (null != getJSONData(constant.userInfo)) {
|
||
this.userInfo = getJSONData(constant.userInfo)
|
||
}
|
||
|
||
},
|
||
onShow() {
|
||
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
|
||
});
|
||
})
|
||
},
|
||
goReportForm() {
|
||
this.$tab.navigateTo('/pages/mine/set/report-form?userId=' + this.userDetail.userId + '¬iceId=' + this
|
||
.noticeId)
|
||
},
|
||
goMemberIndex() {
|
||
this.$tab.navigateTo('/pages/mine/member/member-index?userId='+this.userDetail.userId)
|
||
},
|
||
/**
|
||
* 去报名列表
|
||
*/
|
||
goReportList() {
|
||
this.$tab.navigateTo('/pages/notice/report-list?noticeId=' + this.noticeId)
|
||
},
|
||
/**
|
||
* 查通告详情
|
||
*/
|
||
getDetail() {
|
||
getNoticeDetail({
|
||
noticeId: this.noticeId
|
||
}).then(res => {
|
||
if (res.code == 200) {
|
||
this.noticeDetail = res.data.noticeDetail
|
||
this.userDetail = res.data.userDetail
|
||
this.isLove = res.data.isLove
|
||
this.passSign = res.data.passSign
|
||
this.isSign = res.data.isSign
|
||
if (this.noticeDetail.images) {
|
||
this.noticeDetail.imageArray = this.noticeDetail.images.split(",")
|
||
}
|
||
this.allImgNum = res.data.signUserAvatarList.length
|
||
this.calculateImagesPerRow(res.data.signUserAvatarList)
|
||
}
|
||
}).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();
|
||
} else if ('wx' == dataObj.item.name) {
|
||
this.onShareAppMessage()
|
||
}
|
||
},
|
||
/**
|
||
* 微信分享
|
||
* @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(imgs) {
|
||
this.imageArray = []
|
||
let tempImg = []
|
||
imgs.forEach(it => {
|
||
tempImg.push(this.imageUrl + it)
|
||
})
|
||
console.log(tempImg);
|
||
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 = tempImg
|
||
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 {
|
||
width: 100%;
|
||
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 {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding-top: 10rpx;
|
||
font-size: 24rpx;
|
||
color: #929292;
|
||
|
||
image {
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
margin-right: 5rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
}
|
||
|
||
.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: start;
|
||
align-items: center;
|
||
margin-bottom: 10rpx;
|
||
|
||
.dl-label {
|
||
width: 300rpx;
|
||
display: flex;
|
||
justify-content: start;
|
||
align-items: center;
|
||
}
|
||
|
||
.dl-value {
|
||
flex: 1;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
image {
|
||
width: 200rpx;
|
||
height: 80rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.image-box {
|
||
width: 100%;
|
||
padding: 20rpx 0;
|
||
|
||
.image-row {
|
||
width: 100%;
|
||
position: relative;
|
||
|
||
image {
|
||
position: absolute;
|
||
border-radius: 50%;
|
||
width: 90rpx;
|
||
height: 90rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.view-report-button {
|
||
text-align: center;
|
||
margin: auto;
|
||
border-radius: 40rpx;
|
||
width: 75%;
|
||
background-color: #FC1F3E;
|
||
color: white;
|
||
padding: 15rpx 0;
|
||
}
|
||
}
|
||
|
||
.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> |