<template>
<view class="container activity-detail">
<view class="" v-if="haveAuth == 1">
<block v-if="detailData.YidongActivityUrl">
<web-view :src="detailData.YidongActivityUrl"></web-view>
</block>
<block v-else>
<!-- 头部滚动显示 -->
<view class="notice" v-if="detailData.IsLimitPeople == 1">
<van-notice-bar color="#FFFFFF" background="#FE9000" text="该活动参与名额有限，报名客户请按时参加，若不能按时参加请及时取消报名，爽约会影响您的后续报名资格" />
</view>
<!-- 内容部分 -->
<view class="content">
<view v-if="detailData.ActivityName" class="dialog-title" :class="1 == 1 ? 'brackets-title' : ''">{{ detailData.ActivityName }}</view>
<block v-if="detailData.FileType == 1">
<view class="audio-card" v-if="detailData.VoiceList && detailData.VoiceList.Url">
<view class="slider-paly">
<view style="flex: 1; padding-top: 20rpx">
<slider
activeColor="#3385FF"
:max="detailData.VoiceList.PlaySeconds"
:value="curTime"
@touchstart="touchstartHandler"
@change="handleAudioSliderChange($event)"
@changing="handleAudioSliderChangeing($event)"
block-size="16"
class="slider"
/>
<view class="card-time">
<view class="time">{{ curTime | formatVoiceTime }}</view>
<view class="time">{{ detailData.VoiceList.PlaySeconds | formatVoiceTime }}</view>
</view>
</view>
<view class="is-paly-card">
<image
@click.stop="audioPlayBack"
class=""
:src="
curVoiceId === detailData.ActivityId && !curAudioPaused
? 'https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/play_icon.gif'
: 'https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/pause_icon.png'
"
></image>
</view>
</view>
<view class="fast-reverse">
<image @click="speedReverseHandler('reverse')" class="speed-img" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/fastReverse_icon.png"></image>
<block v-for="(item, index) in timesTheSpeed" :key="item.value">
<view class="speed-button" v-if="isTimes == item.value" @click="isTimesHandler(index)">
{{ item.name }}
</view>
</block>
<image @click="speedReverseHandler('speed')" class="speed-img" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/speed_icon.png"></image>
</view>
<view class="card-title text_twoLine">
{{ detailTitle(detailData.VoiceList.Name) }}
<view class="title-image">
<image @click="myLeavingMessageHandler" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/multimedia/leaving_message.png"></image>
<image
@click="isCollectionHandeler"
:src="
detailData.IsCollect
? 'https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/multimedia/collected_icon.png'
: 'https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/multimedia/not_collected.png'
"
></image>
</view>
</view>
</view>
</block>
<block v-if="detailData.FileType == 2">
<view class="video-play" v-if="detailData.VideoDetail && detailData.VideoDetail.ResourceUrl">
<video
:id="detailData.ActivityId"
:src="detailData.VideoDetail.ResourceUrl"
enable-play-gesture
:custom-cache="false"
object-fit="contain"
show-mute-btn
@ended="handleVideoEnd"
@play="handelVideoPlay"
@loadedmetadata="loadedmetadataHandle"
@timeupdate="handleVideoTimeUpdate"
></video>
<view class="title text_twoLine">
{{ detailTitle(detailData.VideoDetail.Title) }}
<view class="title-image">
<image @click="myLeavingMessageHandler" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/multimedia/leaving_message.png"></image>
<image
@click="isCollectionHandeler"
:src="
detailData.IsCollect
? 'https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/multimedia/collected_icon.png'
: 'https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/multimedia/not_collected.png'
"
></image>
</view>
</view>
</view>
</block>
<view class="city-box">
<text v-if="detailData.ActivityTypeName">活动类型：</text>
<view class="city">
<text style="color: #333">
<block v-if="detailData.ChartPermissionName !== '买方研选'">（{{ detailData.ChartPermissionName }}）</block>
{{ detailData.ActivityTypeName }}
</text>
<view class="choose-limit" @click="strictSelection">
<image v-if="detailData.ChartPermissionName.includes('研选')" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/purchaser.png" mode=""></image>
<image v-if="detailData.IsShowSustainable" class="limit-img" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/limit_icon.png" mode=""></image>
</view>
<image v-if="detailData.City" style="margin-left: 15rpx" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/location.png" mode=""></image>
<text v-if="detailData.City">{{ detailData.City }}</text>
</view>
</view>
<view v-if="detailData.Listndustrial.length" class="network dustrial-ui">
<view class="network-left">产业标签：</view>
<view class="network-right dustrial-content">
<view class="item" v-for="item in detailData.Listndustrial" :key="item.IndustrialManagementId">
<view :class="['dustrial-li', item.IsJump && 'dustrial-item']" @click="goDustrialHandler(item)">{{ item.IndustryName }} </view>
<image v-if="item.IndustryNewLabel" class="new_icon" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/new_report.png" mode=""></image>
</view>
</view>
</view>
<view v-if="detailData.ActivityTimeText" class="network">
<view class="network-left">活动时间：</view>
<view class="network-right">{{ detailData.ActivityTimeText }}</view>
</view>
<view v-if="detailData.DistinguishedGuest" class="network">
<view class="network-left">嘉 宾：</view>
<view class="network-right">{{ detailData.DistinguishedGuest }}</view>
</view>
<view v-if="detailData.Host" class="network">
<view class="network-left">主 持 人：</view>
<view class="network-right">{{ detailData.Host }}</view>
</view>
<view v-if="detailData.Speaker" class="network">
<view class="network-left">主 讲 人：</view>
<view class="network-right">{{ detailData.Speaker }}</view>
</view>
<view v-if="detailData.Expert" class="network">
<view class="network-left">专家背景：</view>
<view class="network-right">
<rich-text :nodes="detailData.Expert"></rich-text>
</view>
</view>
<view v-if="detailData.MainlandTell" class="network">
<view class="network-left">大陆拨入：</view>
<view class="network-right" style="color: #2c83ff" @click="phonebtn(detailData.MainlandTell)">{{ detailData.MainlandTell }}</view>
</view>
<view v-if="detailData.HongKongTell" class="network">
<view class="network-left">香港拨入：</view>
<view class="network-right" style="color: #2c83ff" @click="phonebtn(detailData.HongKongTell)">{{ detailData.HongKongTell }}</view>
</view>
<view v-if="detailData.TaiwanTell" class="network">
<view class="network-left">台湾拨入：</view>
<view class="network-right" style="color: #2c83ff" @click="phonebtn(detailData.TaiwanTell)">{{ detailData.TaiwanTell }}</view>
</view>
<view v-if="detailData.AmericaTell" class="network">
<view class="network-left">美国拨入：</view>
<view class="network-right" style="color: #2c83ff" @click="phonebtn(detailData.AmericaTell)">{{ detailData.AmericaTell }}</view>
</view>
<view v-if="detailData.ParticipationCode" class="network">
<view class="network-left">拨入密码：</view>
<view class="network-right">{{
detailData.ActivityTypeName == "公司调研电话会" && detailData.IsLimitPeople == 1 && detailData.IsSignup == 0 ? "请报名获取" : detailData.ParticipationCode
}}</view>
</view>
<view class="network" v-if="detailData.OnlineParticipation">
<view class="network-left">网络参会：</view>
<view class="network-right network-link" style="color: #2c83ff">
<view class="">
<text class="default text_oneLine" @click="networkBtn">{{ detailData.OnlineParticipation }}</text>
<text class="default copy-link" @click="copyLink">复制链接</text>
</view>
</view>
</view>
<view class="network" v-if="detailData.LinkParticipants">
<view class="network-left">链接参会：</view>
<view class="network-right network-zoom" style="color: #2c83ff">
<view>
<text class="default text_zoom">{{ detailData.LinkParticipants }}</text>
<view> 点击<text class="default copy-link copy-zoom" @click="copyLink">复制链接</text>在手机浏览器打开，并输入会议密码 </view>
</view>
</view>
</view>
<view v-if="detailData.AppAttendance" class="network">
<view class="network-left">App参会： </view>
<view class="network-right">
<rich-text :nodes="detailData.AppAttendance"></rich-text>
</view>
</view>
<view v-if="detailData.ConferencePassword" class="network">
<view class="network-left">拨入密码：</view>
<view class="network-right">{{
detailData.ActivityTypeName == "公司调研电话会" && detailData.IsLimitPeople == 1 && detailData.IsSignup == 0 ? "请报名获取" : detailData.ConferencePassword
}}</view>
</view>
<view v-if="detailData.Address" class="network">
<view class="network-left">活动地址：</view>
<view class="network-right" v-if="detailData.IsSignup == 0 && detailData.ActivityTypeName == '公司线下调研' && detailData.IsLimitPeople == 1">请报名获取 </view>
<view class="network-right" v-else>{{ detailData.Address }}</view>
</view>
<view v-if="detailData.Highlights" class="network">
<view class="network-left">活动亮点： </view>
<view class="network-right">
<rich-text :nodes="detailData.Highlights"></rich-text>
</view>
</view>
<view class="network" v-if="detailData.ArticleList.length">
<view class="network-left">相关报告：</view>
<view class="network-right" style="color: #2c83ff">
<view style="margin-left: -20rpx" class="text_oneLine" @click="goDetail(item.ArticleId)" v-for="item in detailData.ArticleList" :key="item.ArticleId"> {{ item.ReportLink }}</view>
</view>
</view>
<view v-if="detailData.Theme" class="network">
<view class="network-left">主 题： </view>
<view class="network-right">
<rich-text :nodes="detailData.Theme"></rich-text>
</view>
</view>
<view v-if="detailData.Remarks" class="network">
<view class="network-left">备 注： </view>
<view class="network-right">
<rich-text :nodes="detailData.Remarks"></rich-text>
</view>
</view>
</view>
<view class="" style="height: 50rpx"></view>
<!-- 操作按钮部分 -->
<view class="content-bottom">
<block v-if="detailData.ActiveState == 1">
<view class="make-outbound" @click="signupIsAddOfCancel(1)" v-if="detailData.IsShowOutboundCall">{{ detailData.IsSignup == 1 ? "取消外呼" : "预约外呼" }} </view>
<view @click="meetingReminderCancel" class="make-conference" v-if="detailData.IsShowMeetingReminder">
{{ detailData.IsCancelMeetingReminder == 1 ? "取消会议提醒" : "会议提醒" }}
<text>(会前15分钟推送微信消息提醒)</text>
</view>
<view v-if="detailData.IsShowAppointment" @click="summaryIsHandel" class="make-generation make-conference">{{ detailData.IsAppointment == 1 ? "取消纪要" : "预约纪要" }}</view>
<view v-if="detailData.IsShowHelpSsk" class="make-generation make-conference" @click="askingGo"> 帮我带问 </view>
<view class="make-outbound" @click="wanttosignup" v-if="detailData.IsSignup == 0 && detailData.IsShowSignup">
{{ detailData.LimitPeopleNum > 0 ? `我要报名(${detailData.SignupNum}/${detailData.LimitPeopleNum})` : "我要报名" }}
</view>
<view v-if="detailData.IsSignup != 0 && detailData.IsShowSignup" class="make-outbound" @click="signupIsAddOfCancel(2)">
{{ detailData.LimitPeopleNum > 0 ? `${showWay}(${detailData.SignupNum}/${detailData.LimitPeopleNum})` : showWay }}
</view>
</block>
<view class="content-bottom" v-if="detailData.ActiveState == 2 && detailData.ActivityTypeId == 1">
<view class="make-conference" @click="askingGo('提问')">
实时提问
<text>会议过程中，分析师可替您提问专家</text>
</view>
</view>
</view>
</block>
<!-- 参会方式的弹出层 -->
<view class="select-box">
<u-popup v-model="selectShow" mode="bottom">
<view style="color: #333333; font-size: 28rpxrpx">请选择参会方式</view>
<view style="color: #2c83ff" @click="signupIsAddOfCancel(1)">预约外呼</view>
<view style="color: #2c83ff" @click="signupIsAddOfCancel(2)">自主拨入</view>
<view style="color: #a9afb8" @click="selectShow = false">取消</view>
</u-popup>
</view>
<!-- 各种弹框部分 -->
<modalDialog
:isShow="isShow"
:signupType="signupType"
:goFollow="goFollow"
:isCancelShow="isCancelShow"
:idTypeCancel="idTypeCancel"
@cancelShowBtn="cancelEnsure"
:editIsShow="editIsShow"
:countryCode="countryCode"
:mobileEdit="mobileEdit"
:goOnNextStep="goOnNextStep"
:jurisdictionList="jurisdictionList"
:mailboxBinding="mailboxBinding"
/>
</view>
<!-- 权限部分 -->
<view v-else>
<jurisdiction :idAct="id" :jurisdictionList="jurisdictionList"></jurisdiction>
</view>
<freeCharge class="free-charge" :isShowFreeBtn="isShowFree" />
<view v-show="false">
<audioModule ref="childrenAudio" :showAudioPop="showAudioPop" />
</view>
</view>
</template>
<script>
import { activity, User, Home } from "@/config/api.js";
import modalDialog from "@/components/modalDialog.vue";
import jurisdiction from "./jurisdiction/components.vue";
import freeCharge from "@/components/freeCharge";
import audioModule from "@/components/audioModule/index";
import manageMixin from "./manageMixin";
let app = getApp({ allowDefault: true });
export default {
filters: {
formatVoiceTime(e) {
let m = parseInt(e / 60);
let s = parseInt(e % 60);
return `${m > 9 ? m : "0" + m}:${s > 9 ? s : "0" + s}`;
},
},
data() {
return {
id: "",
detailData: {},
isShowJurisdiction: false,
isGain: true,
signupType: "", //关注类型
goFollow: false, //是否关注公众号
isShow: false, //弹框
isCancelShow: false,
idTypeCancel: {
id: "",
type: 1,
cutId: "",
state: "",
},
selectShow: false,
haveAuth: "",
jurisdictionList: {},
editIsShow: false, //外呼莫泰框
countryCode: "", //外呼区号
mobileEdit: "", //外呼手机号
goOnNextStep: "", //设置外呼号后弹出哪个
mailboxBinding: false, //是否绑定邮箱
play: false,
timesTheSpeed: [
{ name: "倍速", value: 1 },
{ name: "1.25倍", value: 1.25 },
{ name: "1.5倍", value: 1.5 },
{ name: "2倍", value: 2 },
],
curTime: 0,
videoContext: null,
isVideoPlay: false,
};
},
mixins: [manageMixin],
computed: {
curVoiceId() {
//当前正在播放的音频id
return this.$store.state.audioBg.activityId;
},
curAudioPaused() {
//当前音频是否暂停状态
return this.$store.state.audioBg.paused;
},
//视频的id
activityVideoId() {
return this.$store.state.videoPlay.playVideoActId;
},
//报名的显示
showWay() {
let text = this.detailData.SignupType == 1 ? "取消外呼" : "取消报名";
return text;
},
//几倍的播放数度
isTimes() {
let isMultiple = this.curVoiceId === this.detailData.ActivityId ? this.$store.state.audioBg.multiple : 1;
return isMultiple;
},
showAudioPop() {
return this.$store.state.audioBg.show;
},
},
components: {
modalDialog,
jurisdiction,
freeCharge,
audioModule,
},
watch: {
haveAuth: {
handler() {
if (this.haveAuth == 1) {
this.$store.dispatch("statistics", { PageType: "ActivitParticulars", DetailId: this.id });
}
},
immediate: true,
},
"$store.state.audioBg.curTime": {
handler(newVal) {
this.curTime = this.curVoiceId === this.detailData.ActivityId ? newVal : 0;
},
immediate: true,
deep: true,
},
},
methods: {
// 获取详情
getActivityDetail() {
activity
.getActivityDetail({
ActivityId: this.id,
})
.then((res) => {
if (res.Ret == 200) {
this.haveAuth = res.Data.HasPermission;
this.jurisdictionList = res.Data;
if (res.Data.HasPermission == 1) {
this.detailData = res.Data.Detail;
let pages = getCurrentPages();
let prevPage = pages[pages.length - 2];
let path = prevPage ? prevPage.$page.fullPath : "";
if (path.includes("/activityPages/themeActivity/themeActivity") || path.includes("/pages-search/indedxSearch/indedxSearch")) {
const index = prevPage.$vm.collectList.findIndex((item) => item.ActivityId == this.id);
prevPage.$vm.collectList[index].IsSignup = this.detailData.IsSignup;
prevPage.$vm.collectList[index].SignupNum = this.detailData.SignupNum;
prevPage.$vm.collectList[index].IsAppointment = this.detailData.IsAppointment;
prevPage.$vm.collectList[index].IsCancelMeetingReminder = this.detailData.IsCancelMeetingReminder;
}
}
}
});
},
// 拨打电话
phonebtn(phone) {
uni.makePhoneCall({
phoneNumber: phone,
});
},
// 跳转新的小程序
networkBtn() {
if (this.detailData.OnlineParticipation.includes("http")) {
uni.navigateTo({
url: "/activityPages/networkAttend/networkAttend?url=" + this.detailData.OnlineParticipation,
});
} else {
uni.navigateToMiniProgram({
appId: "wxade30ff0c4ee757d",
path: this.detailData.OnlineParticipation,
});
}
},
// 弹框的回调事件
cancelEnsure() {
this.getActivityDetail();
},
// 跳转
goDetail(id) {
uni.navigateTo({
url: "/pageMy/reportDetail/reportDetail?id=" + id,
});
},
// 提问
askingGo(type = "") {
uni.navigateTo({
url: "/activityPages/generationAsk/generationAsk?id=" + this.id + "&type=" + type,
});
},
//点击了严选
strictSelection() {
activity.descriptionOfResearch().then((res) => {
if (res.Ret == 200) {
uni.showModal({
content: res.Data.Item.ConfigValue,
confirmText: "知道了",
showCancel: false,
confirmColor: "#3385FF",
success: function (res) {},
});
}
});
},
// 复制的操作
copyLink() {
uni.setClipboardData({
data: this.detailData.LinkParticipants || this.detailData.OnlineParticipation,
success: function () {
uni.showToast({
title: "复制成功,可在浏览器打开",
icon: "none",
duration: 2000,
});
},
});
},
// 跳转产业标签
goDustrialHandler(item) {
if (!item.IsJump) return;
if (item.IsResearch) {
//严选
this.$store.dispatch("checkHandle", "/reportPages/researchTheme/researchTheme?id=" + item.IndustrialManagementId);
} else {
//非严选
this.$store.dispatch("checkHandle", "/reportPages/IndustryReport/IndustryReport?id=" + item.IndustrialManagementId);
}
},
// 音频点击暂停播放
audioPlayBack() {
if (this.$store.state.audioBg.activityId == this.detailData.ActivityId) {
if (this.globalBgAudioManager.paused) {
this.globalBgAudioManager.play();
} else {
this.globalBgAudioManager.pause();
}
} else {
this.$store.commit("audioBg/addAudio", { list: this.detailData.VoiceList, activityId: this.detailData.ActivityId, activityTitle: this.detailData.ActivityName });
}
},
// 拖动进度条
handleAudioSliderChangeing(e) {
this.curTime = e.detail.value;
},
// 拖动进度条
handleAudioSliderChange(e) {
const value = e.detail.value;
this.globalBgAudioManager.seek(value);
this.$refs.childrenAudio.isRecord = false;
setTimeout(() => {
this.$store.commit("audioBg/setSlide", false);
}, 300);
},
// 手指离开拖动进度条
touchstartHandler() {
this.$store.commit("audioBg/setSlide", true);
},
//倍速播放
isTimesHandler(i) {
if (this.$store.state.audioBg.activityId == this.detailData.ActivityId) {
let index = i == 3 ? 0 : i + 1;
this.$store.commit("audioBg/setMultiple", this.timesTheSpeed[index].value);
this.globalBgAudioManager.playbackRate = this.isTimes;
this.globalBgAudioManager.startTime = this.curTime;
if (this.globalBgAudioManager.paused) {
this.globalBgAudioManager.play();
}
} else {
this.$store.commit("audioBg/removeAudio");
this.$store.commit("audioBg/addAudio", { list: this.detailData.VoiceList, activityId: this.detailData.ActivityId, activityTitle: this.detailData.ActivityName });
}
this.$refs.childrenAudio.isRecord = false;
},
//快进 快退
speedReverseHandler(type) {
let isTime = type == "reverse" ? this.curTime - 15 : this.curTime + 15;
isTime = isTime <= 0 ? 0 : isTime >= this.detailData.VoiceList.PlaySeconds ? this.detailData.VoiceList.PlaySeconds - 1 : isTime;
this.globalBgAudioManager.seek(isTime);
this.$refs.childrenAudio.isRecord = false;
},
//视频元数据加载完成时触发
loadedmetadataHandle() {
this.videoContext = wx.createVideoContext(this.detailData.ActivityId.toString(), this);
let curVideoTime = 0;
if (this.activityVideoId == this.detailData.ActivityId) {
curVideoTime = this.$store.state.videoPlay.palyCurrentTime;
} else {
this.$store.commit("videoPlay/playVideoActivity", this.detailData.ActivityId);
}
this.videoContext.seek(curVideoTime);
},
//视频播放结束
handleVideoEnd() {
// 此处因为如果不调用退出全屏方法 安卓和ios页面均会表现异常，安卓横屏不恢复竖屏，ios底部tabbar渲染异常
this.videoContext.exitFullScreen();
},
//视频时间的更新
handleVideoTimeUpdate(e) {
let time = parseInt(e.detail.currentTime);
this.$store.commit("videoPlay/palyTimeUpdate", time);
},
//视频的播放事件
handelVideoPlay() {
if (!this.isVideoPlay) {
Home.microAideoHistoryAdd({ VideoId: this.detailData.ActivityId, SourceType: 2 });
}
this.isVideoPlay = true;
},
// 标题超出省略...
detailTitle(val) {
console.log(val.length);
let str = val.length > 41 ? val.slice(0, 41) + "..." : val;
return str;
},
// 微路演留言
myLeavingMessageHandler() {
uni.navigateTo({
url: "/activityPages/generationAsk/generationAsk?id=" + this.detailData.ActivityId + "&type=文章&roadshow=" + 1 + "&roadshowTitle=" + this.detailData.Title,
});
},
// 微路演收藏
async isCollectionHandeler() {
const res = await Home.microRoadshowCollect({
Id: this.detailData.ActivityId,
SourceType: this.detailData.FileType == 1 ? 2 : 1,
});
if (res.Ret === 200) {
uni.showToast({
title: res.Msg,
duration: 2000,
});
this.getActivityDetail();
}
},
},
async onLoad(option) {
this.id = option.id || "";
await this.$store.dispatch("checkHandle");
// this.listenAudio()
if (!this.$store.state.isAuth && !this.$store.state.isBind) {
//已授权已绑定
this.getActivityDetail();
}
},
/**
* 用户点击分享
*/
onShareAppMessage: function (res) {
return {
title: this.isHorzMobile ? "好友向您推荐此内容，上传名片享查研观向免费月卡！" : "活动详情",
path: "/activityPages/activityDetail/activityDetail?id=" + this.id,
success: (res) => {},
fail: (err) => {},
};
},
};
</script>
<style lang="scss">
.activity-detail {
padding-bottom: 100rpx;
.notice {
height: 60rpx;
width: 100%;
}
.content {
padding: 34rpx 34rpx 0rpx;
margin-bottom: -20rpx;
color: #333333;
font-size: 28rpx;
view {
padding-left: 20rpx;
}
text {
line-height: 80rpx;
padding-left: 20rpx;
}
.phone {
padding: 0;
display: inline-block;
color: #2c83ff;
}
.new_icon {
width: 60rpx;
height: 30rpx;
margin: 0 20rpx 20rpx 0;
}
.dialog-title {
width: 682rpx;
padding: 20rpx;
background: #f2f2f2;
opacity: 0.8;
font-size: 30rpx;
font-weight: bold;
margin-bottom: 15rpx;
color: #000;
}
.brackets-title {
padding-left: 20rpx;
}
.city-box {
display: flex;
align-items: center;
text {
padding: 0;
}
.city {
display: flex;
color: #2088ff;
align-items: center;
image {
width: 27rpx;
height: 32rpx;
margin-right: 12rpx;
}
.choose-limit {
position: relative;
display: flex;
align-items: center;
margin-right: 20rpx;
image {
width: 130rpx;
height: 38rpx;
}
.limit-img {
position: absolute;
top: -13rpx;
right: -30rpx;
width: 46rpx;
height: 26rpx;
}
}
}
}
}
.network {
margin-bottom: 30rpx;
padding: 0 !important;
display: flex;
.network-left {
width: 160rpx;
text-align-last: justify;
text-align: justify;
flex-shrink: 0;
}
.network-right {
width: 480rpx;
}
.dustrial-content {
display: flex;
flex-wrap: wrap;
.item {
display: flex;
align-items: center;
padding-left: 0;
margin-left: 0;
}
}
.network-zoom {
.text_zoom {
width: 100%;
word-break: break-all;
color: #333333;
}
view {
padding: 0 !important;
margin: 0 !important;
}
.copy-zoom {
display: inline-block;
padding: 5rpx 17rpx !important;
border-radius: 34rpx;
background-color: #ebf4ff;
font-size: 24rpx;
color: #2c83ff;
margin: 0 10rpx;
margin-top: 30rpx;
}
}
.network-link {
width: 520rpx !important;
view {
padding: 0 !important;
margin: 0 !important;
width: 100%;
display: flex;
justify-content: space-between;
:first-child {
width: 350rpx;
}
.copy-link {
padding: 5rpx 17rpx !important;
border-radius: 34rpx;
background-color: #ebf4ff;
font-size: 24rpx;
color: #2c83ff;
}
}
}
}
.default {
// padding: 0 !important;
// margin: 0;
padding-left: 0 !important;
line-height: 40rpx !important;
}
.content-bottom {
margin: 50rpx 0 30rpx;
.make-outbound {
margin: 0 auto;
width: 368rpx;
height: 80rpx;
background: linear-gradient(268deg, #2ddbff 0%, #1599ff 49%, #005eff 100%);
opacity: 1;
border-radius: 4rpx;
color: #ffffff;
font-size: 34rpx;
line-height: 80rpx;
text-align: center;
}
.make-generation {
padding-top: 0rpx !important;
line-height: 76rpx;
}
.make-conference {
margin: 30rpx auto;
width: 368rpx;
height: 80rpx;
border: 2px solid #2c83ff;
opacity: 1;
border-radius: 4rpx;
padding-top: 5rpx;
text-align: center;
color: #2c83ff;
font-size: 30rpx;
text {
font-size: 16rpx;
}
}
}
.bottom-env {
position: fixed;
bottom: 0;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
left: 0;
width: 100%;
background-color: #ffffff;
}
.apply-box {
width: 100%;
height: 100rpx;
display: flex;
font-size: 32rpx;
color: #333333;
line-height: 100rpx;
.cancel-apply {
display: flex;
padding-left: 50rpx;
flex: 1;
border: 2rpx solid #005eff;
background-color: #fff;
text {
color: #005eff;
}
}
.ok-apply {
flex: 1;
background: linear-gradient(268deg, #2ddbff 0%, #1599ff 49%, #005eff 100%);
text-align: center;
color: #ffffff;
}
}
.select-box {
width: 100%;
view {
height: 95prx;
line-height: 95rpx;
text-align: center;
font-size: 32rpx;
border-bottom: 1rpx solid #ebebeb;
}
}
.dustrial-ui {
margin-bottom: 10rpx !important;
}
.dustrial-li {
display: flex;
align-items: center;
padding: 0 13rpx;
margin: 0 20rpx 20rpx 0;
}
.dustrial-item {
background: #edf4ff;
border: 1px solid #3385ff;
border-radius: 4rpx;
color: #3385ff;
}
.audio-card {
width: 100%;
height: 334rpx;
background: #fff;
box-shadow: 0px 3rpx 8rpx 0rpx rgba(0, 0, 0, 0.05);
border-radius: 8rpx;
margin: 0 auto;
padding: 30rpx;
padding-left: 30rpx;
view {
padding-left: 0;
}
.slider {
width: 100%;
margin: 0;
}
.slider-paly {
display: flex;
height: 80rpx;
align-items: center;
padding-left: 20rpx;
}
.card-title {
margin-top: 20rpx;
font-size: 28rpx;
padding: 15rpx 0 0 15rpx;
line-height: 44rpx;
height: 100rpx;
position: relative;
}
.card-time {
display: flex;
justify-content: space-between;
color: #999999;
font-size: 20rpx;
}
.title-image {
position: absolute;
bottom: 0;
right: 0;
width: 150rpx;
height: 40rpx;
padding-left: 15rpx;
display: flex;
justify-content: space-between;
image {
width: 40rpx;
height: 40rpx;
}
}
.is-paly-card {
width: 70rpx;
height: 70rpx;
flex-shrink: 0;
margin-left: 30rpx;
image {
width: 70rpx;
height: 70rpx;
}
}
.fast-reverse {
display: flex;
align-items: center;
justify-content: center;
margin-top: 30rpx;
.speed-button {
width: 96rpx;
height: 47rpx;
background: #eaeaea;
border-radius: 8rpx;
text-align: center;
line-height: 47rpx;
margin: 0 70rpx;
padding-left: 0;
}
.speed-img {
width: 50rpx;
height: 50rpx;
}
}
}
.video-play {
width: 100%;
padding-left: 0rpx !important;
height: 456rpx;
border-radius: 8rpx;
overflow: hidden;
box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.05);
font-size: 28rpx;
color: #333333;
margin-top: 20rpx;
video {
height: 340rpx;
width: 100%;
}
.title {
padding: 15rpx 0 0 15rpx !important;
font-size: 28rpx;
line-height: 44rpx;
height: 100rpx;
position: relative;
.title-flat {
float: right;
width: 150rpx;
height: 40rpx;
margin-top: -36rpx;
background-color: #f00;
}
.title-image {
position: absolute;
bottom: 0;
right: 0;
width: 150rpx;
height: 40rpx;
padding-left: 15rpx;
display: flex;
justify-content: space-between;
image {
width: 40rpx;
height: 40rpx;
}
}
}
}
}
</style>