|
@@ -1,264 +1,517 @@
|
|
|
<template>
|
|
|
- <view class="activity-detail" v-if="info">
|
|
|
- <view class="top-wrap" :style="'background-image:url('+info.speakerBackgroundPic+')'">
|
|
|
- <view class="status status-before" v-if="info.activityState===1">未开始</view>
|
|
|
- <view class="status status-before" v-if="info.activityState===2">进行中</view>
|
|
|
- <view class="status status-before" v-if="info.activityState===3">已结束</view>
|
|
|
- <view class="title">{{info.activityTypeName}}</view>
|
|
|
- <view class="name">主讲人:{{info.speaker}}</view>
|
|
|
- <view class="time">活动时间:{{info.startTime| formatActivityTime(info.endTime)}}</view>
|
|
|
- <view class="flex city" v-if="info.activityTypeId===3">
|
|
|
- <image src="./static/position.png" model="aspectFill"></image>
|
|
|
- <text>{{info.city}}</text>
|
|
|
+ <view class="activity-detail" v-if="info">
|
|
|
+ <view
|
|
|
+ class="top-wrap"
|
|
|
+ :style="'background-image:url(' + info.speakerBackgroundPic + ')'"
|
|
|
+ >
|
|
|
+ <view class="status status-before" v-if="info.activityState === 1"
|
|
|
+ >未开始</view
|
|
|
+ >
|
|
|
+ <view class="status status-before" v-if="info.activityState === 2"
|
|
|
+ >进行中</view
|
|
|
+ >
|
|
|
+ <view class="status status-before" v-if="info.activityState === 3"
|
|
|
+ >已结束</view
|
|
|
+ >
|
|
|
+ <view class="title">{{ info.activityTypeName }}</view>
|
|
|
+ <view class="name">主讲人:{{ info.speaker }}</view>
|
|
|
+ <view class="time"
|
|
|
+ >活动时间:{{
|
|
|
+ info.startTime | formatActivityTime(info.endTime)
|
|
|
+ }}</view
|
|
|
+ >
|
|
|
+ <view class="flex city" v-if="info.city">
|
|
|
+ <image src="./static/position.png" model="aspectFill"></image>
|
|
|
+ <text>{{ info.city }}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class="intro-wrap">{{info.activityName}}</view>
|
|
|
+ <view class="intro-wrap">{{ info.activityName }}</view>
|
|
|
+
|
|
|
|
|
|
- <view class="info-wrap" v-if="info.activityState!==3">
|
|
|
- <view class="flex item" v-for="item in infoList" :key="item.label" @click="handleClickInfoItem(item)">
|
|
|
- <view class="label">{{item.label}}:</view>
|
|
|
- <view :class="['content',item.color&&'yellow-color']">{{item.text}}</view>
|
|
|
+ <!-- 音频 -->
|
|
|
+ <view class="audio-wrap" v-if="info.activityState === 3">
|
|
|
+ <view
|
|
|
+ class="audio-item"
|
|
|
+ v-for="item in audioList"
|
|
|
+ :key="item.voiceUrl"
|
|
|
+ >
|
|
|
+ <image
|
|
|
+ class="icon"
|
|
|
+ :src="activeAudioUrl==item.voiceUrl?'./static/audio-doing.png':'./static/audio-play.png'"
|
|
|
+ model="aspectFill"
|
|
|
+ @click="handlePlayAudio(item)">
|
|
|
+ </image>
|
|
|
+ <view class="name">{{ item.voiceName }}</view>
|
|
|
+ <view class="time">{{ item.voicePlaySeconds|formarVoiceTime }}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
- <!-- 音频 -->
|
|
|
- <view class="audio-wrap" v-if="info.activityState===3">
|
|
|
- <view class="audio-item" v-for="item in audioList" :key="item.voiceUrl">
|
|
|
- <image class="icon" src="./static/audio-play.png" model="aspectFill"></image>
|
|
|
- <view class="name">{{item.voiceName}}</view>
|
|
|
- <view class="time">{{item.voicePlaySeconds}}</view>
|
|
|
+ <view class="info-wrap">
|
|
|
+ <view
|
|
|
+ class="flex item"
|
|
|
+ v-for="item in infoList"
|
|
|
+ :key="item.label"
|
|
|
+ @click="handleClickInfoItem(item)"
|
|
|
+ >
|
|
|
+ <view class="label">{{ item.label }}:</view>
|
|
|
+ <view :class="['content', item.color && 'yellow-color']">
|
|
|
+ {{item.text}}
|
|
|
+ </view>
|
|
|
+ <view class="copy-btn" v-if="item.type == 'copy'" @click="handleCopyLink(item.text)">复制链接</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<!-- 报告链接 -->
|
|
|
<view class="info-wrap" v-if="info.reportLink">
|
|
|
- <view class="flex item" @click="handleOpenReport">
|
|
|
- <view class="label">相关报告:</view>
|
|
|
- <view class="yellow-color">查看报告链接</view>
|
|
|
- </view>
|
|
|
+ <view class="flex item" @click="handleOpenReport">
|
|
|
+ <view class="label">相关报告:</view>
|
|
|
+ <view class="yellow-color">查看报告链接</view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
|
|
|
- <view class="btn-wrap" v-if="info.activityState===1">
|
|
|
- <view class="global-btn-yellow-change btn">报名线下参会(15/20)</view>
|
|
|
- <view class="global-btn-yellow-change btn">会议提醒</view>
|
|
|
+ <view class="btn-wrap" v-if="info.activityState === 1">
|
|
|
+ <view
|
|
|
+ class="global-btn-yellow-change btn"
|
|
|
+ v-if="info.firstActivityTypeId === 3"
|
|
|
+ @click="handleSetRegister"
|
|
|
+ >{{
|
|
|
+ info.registerState == 0
|
|
|
+ ? "报名线下参会"
|
|
|
+ : "取消报名线下参会"
|
|
|
+ }}({{ info.isLimitPeople }}/{{ info.limitPeopleNum }})</view
|
|
|
+ >
|
|
|
+ <view
|
|
|
+ :class="[
|
|
|
+ info.hasRemind == 1
|
|
|
+ ? 'global-btn-disable'
|
|
|
+ : 'global-btn-yellow-change',
|
|
|
+ 'btn',
|
|
|
+ ]"
|
|
|
+ @click="handleSetRemind"
|
|
|
+ >{{ info.hasRemind == 1 ? "取消会议提醒" : "会议提醒" }}</view
|
|
|
+ >
|
|
|
<p class="tips">(会前15分钟推送微信消息提醒)</p>
|
|
|
</view>
|
|
|
- </view>
|
|
|
+
|
|
|
+ <!-- 弹窗 -->
|
|
|
+ <van-popup :show="pupData.show" @close="pupData.show = false">
|
|
|
+ <view class="global-pup">
|
|
|
+ <view class="content">
|
|
|
+ <rich-text :nodes="pupData.content"></rich-text>
|
|
|
+ </view>
|
|
|
+ <view class="flex bot" v-if="pupData.type == 'contact'">
|
|
|
+ <view @click="pupData.show = false" style="color: #a9afb8"
|
|
|
+ >取消</view
|
|
|
+ >
|
|
|
+ <view @click="handleCallPhone(pupData.mobile)">拨号</view>
|
|
|
+ </view>
|
|
|
+ <view class="flex bot" v-if="pupData.type == 'apply'">
|
|
|
+ <view @click="pupData.show = false" style="color: #a9afb8"
|
|
|
+ >取消</view
|
|
|
+ >
|
|
|
+ <view @click="handleApply">立即申请</view>
|
|
|
+ </view>
|
|
|
+ <view class="flex bot" v-else>
|
|
|
+ <view @click="pupData.show = false">知道了</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </van-popup>
|
|
|
+ </view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
// 活动详情
|
|
|
-import {apiActivityDetail,apiActivityAudios} from '@/api/activity'
|
|
|
+import {
|
|
|
+ apiActivityDetail,
|
|
|
+ apiActivityAudios,
|
|
|
+ apiActivityAddRemind,
|
|
|
+ apiActivityCancelRemind,
|
|
|
+ apiActivityRegister,
|
|
|
+ apiActivityCancelRegister
|
|
|
+} from "@/api/activity";
|
|
|
export default {
|
|
|
- name: "ActivityDetail",
|
|
|
- data() {
|
|
|
- return {
|
|
|
- id: 0, //活动id
|
|
|
- infoList:[],
|
|
|
- info:null,
|
|
|
- audioList:[],//音频数据
|
|
|
- };
|
|
|
- },
|
|
|
- onLoad(options) {
|
|
|
- this.id = options.id;
|
|
|
- this.getDetail()
|
|
|
- // setTimeout(()=>{
|
|
|
- // uni.redirectTo({
|
|
|
- // url: '/pages-activity/noAuthority'
|
|
|
- // });
|
|
|
- // },2000)
|
|
|
- },
|
|
|
- methods: {
|
|
|
- async getDetail(){
|
|
|
- const res=await apiActivityDetail({activity_id:Number(this.id)})
|
|
|
- // 无权限
|
|
|
- if(res.code===403){
|
|
|
-
|
|
|
- return
|
|
|
+ name: "ActivityDetail",
|
|
|
+ filters:{
|
|
|
+ formarVoiceTime(e){
|
|
|
+ let minus=parseInt(e/60)
|
|
|
+ let sec=e%60
|
|
|
+ return `${minus}分${sec}秒`
|
|
|
}
|
|
|
- if(res.code===200){
|
|
|
- this.info=res.data
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ id: 0, //活动id
|
|
|
+ infoList: [],
|
|
|
+ info: null,
|
|
|
+ audioList: [], //音频数据
|
|
|
|
|
|
- // 线上会议
|
|
|
- if(res.data.activityTypeId===1){
|
|
|
- this.infoList=[
|
|
|
- {
|
|
|
- label:'大陆拨号',
|
|
|
- text:res.data.mainlandTel,
|
|
|
- color:'yellow',
|
|
|
- type:'tel'
|
|
|
- },
|
|
|
- {
|
|
|
- label:'新加坡拨入',
|
|
|
- text:res.data.singaporeTel,
|
|
|
- color:'yellow',
|
|
|
- type:'tel'
|
|
|
- },
|
|
|
- {
|
|
|
- label:'香港拨入',
|
|
|
- text:res.data.hongKongTel,
|
|
|
- color:'yellow',
|
|
|
- type:'tel'
|
|
|
- },
|
|
|
- {
|
|
|
- label:'台湾拨入',
|
|
|
- text:res.data.taiwanTel,
|
|
|
- color:'yellow',
|
|
|
- type:'tel'
|
|
|
- },
|
|
|
- {
|
|
|
- label:'美国拨入',
|
|
|
- text:res.data.americaTel,
|
|
|
- color:'yellow',
|
|
|
- type:'tel'
|
|
|
- },
|
|
|
- {
|
|
|
- label:'拨入密码',
|
|
|
- text:res.data.participationCode
|
|
|
- },
|
|
|
- ]
|
|
|
- }
|
|
|
+ activeAudioUrl:'',//正在播放的背景音频地址
|
|
|
|
|
|
- if(res.data.activityState===3){
|
|
|
- this.getAudios()
|
|
|
- }
|
|
|
- }
|
|
|
+ pupData: {
|
|
|
+ show: false,
|
|
|
+ content: "", //弹窗html字符串
|
|
|
+ type: "",
|
|
|
+ mobile: "",
|
|
|
+ },
|
|
|
+ };
|
|
|
},
|
|
|
-
|
|
|
- // 获取活动音频
|
|
|
- async getAudios(){
|
|
|
- const res=await apiActivityAudios({activity_id:Number(this.id)})
|
|
|
- if(res.code===200){
|
|
|
- this.audioList=res.data
|
|
|
- }
|
|
|
+ onLoad(options) {
|
|
|
+ this.id = options.id;
|
|
|
+ this.getDetail();
|
|
|
},
|
|
|
+ methods: {
|
|
|
+ async getDetail() {
|
|
|
+ const res = await apiActivityDetail({ activity_id: Number(this.id) });
|
|
|
+ // 无权限
|
|
|
+ if (res.code === 403) {
|
|
|
+ uni.redirectTo({
|
|
|
+ url: "/pages-activity/noAuthority?data=" + JSON.stringify(res.data),
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (res.code === 200) {
|
|
|
+ this.info = res.data;
|
|
|
|
|
|
- // 点击信息项
|
|
|
- handleClickInfoItem(e){
|
|
|
- if(e.type==='tel'&&e.text){
|
|
|
- uni.makePhoneCall({
|
|
|
- phoneNumber: e.text
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
+ let arr = [
|
|
|
+ {
|
|
|
+ label: "大陆拨号",
|
|
|
+ text: res.data.mainlandTel,
|
|
|
+ color: "yellow",
|
|
|
+ type: "tel",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "新加坡拨入",
|
|
|
+ text: res.data.singaporeTel,
|
|
|
+ color: "yellow",
|
|
|
+ type: "tel",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "香港拨入",
|
|
|
+ text: res.data.hongKongTel,
|
|
|
+ color: "yellow",
|
|
|
+ type: "tel",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "台湾拨入",
|
|
|
+ text: res.data.taiwanTel,
|
|
|
+ color: "yellow",
|
|
|
+ type: "tel",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "美国拨入",
|
|
|
+ text: res.data.americaTel,
|
|
|
+ color: "yellow",
|
|
|
+ type: "tel",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "拨入密码",
|
|
|
+ text: res.data.participationCode,
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ this.infoList = arr.filter((item) => {
|
|
|
+ return item.text;
|
|
|
+ });
|
|
|
+ // 研究员线下沙龙
|
|
|
+ if (res.data.firstActivityTypeId === 3) {
|
|
|
+ this.infoList.push({label: "活动地址",text: res.data.city + res.data.address})
|
|
|
+ if(res.data.linkParticipants){
|
|
|
+ this.infoList.push({label: "网络参会",text: res.data.linkParticipants,color: "yellow",type: "copy"})
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- // 跳转webview 打开报告
|
|
|
- handleOpenReport(){
|
|
|
- uni.navigateTo({
|
|
|
- url:'/pages/webView?url='+this.info.reportLink
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
+ if (res.data.activityState === 3) {
|
|
|
+ this.getAudios();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 获取活动音频
|
|
|
+ async getAudios() {
|
|
|
+ const res = await apiActivityAudios({ activity_id: Number(this.id) });
|
|
|
+ if (res.code === 200) {
|
|
|
+ this.audioList = res.data;
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 点击信息项
|
|
|
+ handleClickInfoItem(e) {
|
|
|
+ if (e.type === "tel" && e.text) {
|
|
|
+ uni.makePhoneCall({
|
|
|
+ phoneNumber: e.text,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 播放音频
|
|
|
+ handlePlayAudio(e){
|
|
|
+ if(e.voiceUrl==this.activeAudioUrl){
|
|
|
+ this.globalBgMusic.pause()
|
|
|
+ }else{
|
|
|
+ this.globalBgMusic.title=e.voiceName
|
|
|
+ this.globalBgMusic.src=e.voiceUrl
|
|
|
+ this.globalBgMusic.play()
|
|
|
+ }
|
|
|
+
|
|
|
+ this.globalBgMusic.onPlay(res=>{
|
|
|
+ this.activeAudioUrl=e.voiceUrl
|
|
|
+ })
|
|
|
+ this.globalBgMusic.onPause(e=>{
|
|
|
+ this.activeAudioUrl=''
|
|
|
+ })
|
|
|
+ this.globalBgMusic.onStop(e=>{
|
|
|
+ this.activeAudioUrl=''
|
|
|
+ })
|
|
|
+ this.globalBgMusic.onEnded(e=>{
|
|
|
+ this.activeAudioUrl=''
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ // 跳转webview 打开报告
|
|
|
+ handleOpenReport() {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: "/pages/webView?url=" + this.info.reportLink,
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ // 复制链接
|
|
|
+ handleCopyLink(text){
|
|
|
+ uni.setClipboardData({
|
|
|
+ data: text,
|
|
|
+ success: function () {
|
|
|
+ uni.showToast({
|
|
|
+ title:"复制成功,可在浏览器内打开",
|
|
|
+ icon:"none"
|
|
|
+ })
|
|
|
+ },
|
|
|
+ fail:function(){
|
|
|
+ uni.showToast({
|
|
|
+ title:"复制失败",
|
|
|
+ icon:"none"
|
|
|
+ })
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ // 设置会议提醒
|
|
|
+ async handleSetRemind() {
|
|
|
+ if (this.info.hasRemind == 1) {
|
|
|
+ this.handleCancelRemind();
|
|
|
+ } else {
|
|
|
+ this.handleAddRemind();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 添加提醒
|
|
|
+ async handleAddRemind() {
|
|
|
+ const res = await apiActivityAddRemind({ activity_id: Number(this.info.activityId) });
|
|
|
+ if (res.code === 200) {
|
|
|
+ this.pupData.content = `<p style="margin-bottom:10px">设置成功,会前15分钟会为您推送微信消息提醒</p>
|
|
|
+ <p>请关注【弘则研究】公众号,以获取微信消息提醒</p>`;
|
|
|
+ this.pupData.show = true;
|
|
|
+ this.handleUpateRemindStatus();
|
|
|
+ } else if (res.code === 4001) {
|
|
|
+ if (res.data.type == "time") {
|
|
|
+ this.pupData.content = `<p style="margin-bottom:10px">会议开始前15分钟内</p>
|
|
|
+ <p>无法设置会议提醒</p>`;
|
|
|
+ this.pupData.type = "time";
|
|
|
+ }
|
|
|
+ this.pupData.show = true;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //取消提醒
|
|
|
+ async handleCancelRemind() {
|
|
|
+ const res = await apiActivityCancelRemind({ activity_id: Number(this.info.activityId) });
|
|
|
+ if (res.code === 200) {
|
|
|
+ uni.showToast({
|
|
|
+ title: "取消提醒成功",
|
|
|
+ icon: "none",
|
|
|
+ });
|
|
|
+ this.handleUpateRemindStatus();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 更新列表提醒状态
|
|
|
+ handleUpateRemindStatus() {
|
|
|
+ if (this.info.hasRemind == 1) {
|
|
|
+ this.info.hasRemind = 0
|
|
|
+ } else {
|
|
|
+ this.info.hasRemind = 1
|
|
|
+ }
|
|
|
+ uni.$emit('activityDetailSetRemind', { id: this.info.activityId })
|
|
|
+ },
|
|
|
+
|
|
|
+ // 设置报名
|
|
|
+ handleSetRegister() {
|
|
|
+ if (this.info.registerState == 1) {
|
|
|
+ this.handleCancelRegister();
|
|
|
+ } else {
|
|
|
+ this.handleAddRegister();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 线下报名
|
|
|
+ async handleAddRegister() {
|
|
|
+ const res = await apiActivityRegister({ activity_id: Number(this.info.activityId) })
|
|
|
+ if (res.code === 200) {
|
|
|
+ this.pupData.content = `<p style="margin-bottom:10px">报名成功,已加入您的活动日程</p>
|
|
|
+ <p>想要及时获取活动时间变更通知,请关注【弘则研究】公众号</p>`
|
|
|
+ this.pupData.show = true
|
|
|
+ this.handleUpdateRegister()
|
|
|
+ } else if (res.code === 4001) {
|
|
|
+ if (res.data.type == 'time') {
|
|
|
+ this.pupData.content = `<p style="margin-bottom:10px">活动开始前15分钟内</p>
|
|
|
+ <p>无法设置会议提醒</p>`
|
|
|
+ this.pupData.type = 'time'
|
|
|
+ } else if (res.data.type == 'full') {
|
|
|
+ this.pupData.content = `<p>此活动报名人数已满,请留意下期活动</p>`
|
|
|
+ this.pupData.type = 'full'
|
|
|
+ }
|
|
|
+ this.pupData.show = true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //取消线下报名
|
|
|
+ async handleCancelRegister() {
|
|
|
+ const res = await apiActivityCancelRegister({ activity_id: Number(this.info.activityId) })
|
|
|
+ if (res.code === 200) {
|
|
|
+ uni.showToast({
|
|
|
+ title: "取消报名成功",
|
|
|
+ icon: "none"
|
|
|
+ })
|
|
|
+ this.handleUpdateRegister()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //更新列表报名状态
|
|
|
+ handleUpdateRegister() {
|
|
|
+ if (this.info.registerState == 1) {
|
|
|
+ this.info.registerState = 0
|
|
|
+ } else {
|
|
|
+ this.info.registerState = 1
|
|
|
+ }
|
|
|
+ uni.$emit('activityDetailSetRegister', { id: this.info.activityId })
|
|
|
+ }
|
|
|
+ },
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
+.activity-detail {
|
|
|
+ background: #fff;
|
|
|
+}
|
|
|
.top-wrap {
|
|
|
- width: 100%;
|
|
|
- height: 370rpx;
|
|
|
- background: linear-gradient(312deg, rgba(0, 0, 0, 0.8) 0%, rgba(43, 43, 43, 0.8) 100%);
|
|
|
- color: $global-text-color-white;
|
|
|
- padding-top: 144rpx;
|
|
|
- padding-left: 40rpx;
|
|
|
- padding-right: 40rpx;
|
|
|
- background-size: cover;
|
|
|
- background-repeat: no-repeat;
|
|
|
- position: relative;
|
|
|
- .status {
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- width: 116rpx;
|
|
|
- line-height: 44rpx;
|
|
|
- border-radius: 0px 0px 16rpx 0px;
|
|
|
+ width: 100%;
|
|
|
+ height: 370rpx;
|
|
|
+ background: linear-gradient(
|
|
|
+ 312deg,
|
|
|
+ rgba(0, 0, 0, 0.8) 0%,
|
|
|
+ rgba(43, 43, 43, 0.8) 100%
|
|
|
+ );
|
|
|
color: $global-text-color-white;
|
|
|
- text-align: center;
|
|
|
- font-size: $global-font-size-sm;
|
|
|
- }
|
|
|
- .status-before {
|
|
|
- background-color: #e3b377;
|
|
|
- }
|
|
|
- .status-progress {
|
|
|
- background-color: #3385ff;
|
|
|
- }
|
|
|
- .status-end {
|
|
|
- background-color: #a2a2a2;
|
|
|
- }
|
|
|
- .title {
|
|
|
- font-size: 17px;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
- .name {
|
|
|
- margin-top: 15rpx;
|
|
|
- margin-bottom: 40rpx;
|
|
|
- }
|
|
|
- .time {
|
|
|
- opacity: 0.8;
|
|
|
- font-size: $global-font-size-sm;
|
|
|
- }
|
|
|
- .city{
|
|
|
- font-size: $global-font-size-sm;
|
|
|
- align-items: center;
|
|
|
- position: absolute;
|
|
|
- right: 40rpx;
|
|
|
- bottom: 59rpx;
|
|
|
- image{
|
|
|
- width: 32rpx;
|
|
|
- height: 32rpx;
|
|
|
+ padding-top: 144rpx;
|
|
|
+ padding-left: 40rpx;
|
|
|
+ padding-right: 40rpx;
|
|
|
+ background-size: cover;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ position: relative;
|
|
|
+ .status {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 116rpx;
|
|
|
+ line-height: 44rpx;
|
|
|
+ border-radius: 0px 0px 16rpx 0px;
|
|
|
+ color: $global-text-color-white;
|
|
|
+ text-align: center;
|
|
|
+ font-size: $global-font-size-sm;
|
|
|
+ }
|
|
|
+ .status-before {
|
|
|
+ background-color: #e3b377;
|
|
|
+ }
|
|
|
+ .status-progress {
|
|
|
+ background-color: #3385ff;
|
|
|
+ }
|
|
|
+ .status-end {
|
|
|
+ background-color: #a2a2a2;
|
|
|
+ }
|
|
|
+ .title {
|
|
|
+ font-size: 17px;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .name {
|
|
|
+ margin-top: 15rpx;
|
|
|
+ margin-bottom: 40rpx;
|
|
|
+ }
|
|
|
+ .time {
|
|
|
+ opacity: 0.8;
|
|
|
+ font-size: $global-font-size-sm;
|
|
|
+ }
|
|
|
+ .city {
|
|
|
+ font-size: $global-font-size-sm;
|
|
|
+ align-items: center;
|
|
|
+ position: absolute;
|
|
|
+ right: 40rpx;
|
|
|
+ bottom: 59rpx;
|
|
|
+ image {
|
|
|
+ width: 32rpx;
|
|
|
+ height: 32rpx;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
}
|
|
|
-.intro-wrap{
|
|
|
+.intro-wrap {
|
|
|
background-color: #fff;
|
|
|
box-shadow: 0px 3px 12px rgba(196, 196, 196, 0.16);
|
|
|
font-size: $global-font-size-lg;
|
|
|
font-weight: bold;
|
|
|
padding: 28rpx 34rpx;
|
|
|
}
|
|
|
-.info-wrap{
|
|
|
+.info-wrap {
|
|
|
padding: 30rpx 34rpx;
|
|
|
- .item{
|
|
|
+ .item {
|
|
|
margin-bottom: 30rpx;
|
|
|
- .label{
|
|
|
+ .label {
|
|
|
flex-shrink: 0;
|
|
|
}
|
|
|
+ .copy-btn {
|
|
|
+ background-color: #e3b377;
|
|
|
+ color: #fff;
|
|
|
+ padding: 4rpx 8rpx;
|
|
|
+ font-size: 12px;
|
|
|
+ margin-left: 4rpx;
|
|
|
+ }
|
|
|
}
|
|
|
- .yellow-color{
|
|
|
+ .yellow-color {
|
|
|
color: $global-text-color-main;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-.audio-wrap{
|
|
|
- .audio-item{
|
|
|
- padding: 36rpx 34rpx;
|
|
|
- border-bottom: 1px solid $global-border-color;
|
|
|
+.audio-wrap {
|
|
|
+ padding: 0 94rpx 0 34rpx;
|
|
|
+ .audio-item {
|
|
|
+ padding: 36rpx 0;
|
|
|
+ border-bottom: 1px solid #E8DED2;
|
|
|
position: relative;
|
|
|
- .icon{
|
|
|
+ .icon {
|
|
|
position: absolute;
|
|
|
top: 50%;
|
|
|
transform: translateY(-50%);
|
|
|
- right: 45rpx;
|
|
|
+ right: 0;
|
|
|
width: 48rpx;
|
|
|
height: 48rpx;
|
|
|
}
|
|
|
- .name{
|
|
|
+ .name {
|
|
|
margin-bottom: 10rpx;
|
|
|
}
|
|
|
- .time{
|
|
|
+ .time {
|
|
|
font-size: $global-font-size-mini;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-.btn-wrap{
|
|
|
- .btn{
|
|
|
+.btn-wrap {
|
|
|
+ .btn {
|
|
|
width: 380rpx;
|
|
|
line-height: 70rpx;
|
|
|
margin-left: auto;
|
|
|
margin-right: auto;
|
|
|
margin-top: 40rpx;
|
|
|
}
|
|
|
- .tips{
|
|
|
+ .tips {
|
|
|
font-size: $global-font-size-sm;
|
|
|
color: $global-text-color-999;
|
|
|
text-align: center;
|