|
|
@@ -0,0 +1,813 @@
|
|
|
+<template>
|
|
|
+ <view class="container_box">
|
|
|
+ <view class="header-nav"
|
|
|
+ :style="{height: `calc(88rpx + ${statusBarHeight}px)`,paddingTop: statusBarHeight + 'px'}">
|
|
|
+ </view>
|
|
|
+ <view class="conbox">
|
|
|
+ <image class="activity_yh_right" src="https://cdn.his.cdwjyyh.com/minapp/course/activity_yh_right.png"
|
|
|
+ mode="widthFix"></image>
|
|
|
+ <image class="activity_yh_left" src="https://cdn.his.cdwjyyh.com/minapp/course/activity_yh_left.png"
|
|
|
+ mode="widthFix"></image>
|
|
|
+ <image class="activity_title" v-if="collectType!=1&&isExpiry" src="https://cdn.his.cdwjyyh.com/minapp/course/activity_title.png" mode="widthFix"></image>
|
|
|
+ <view class="activity_title2" v-if="!isExpiry&&collectType!=1">
|
|
|
+ 福袋已经失效了~
|
|
|
+ </view>
|
|
|
+ <template v-if="collectType==1">
|
|
|
+ <view class="activity_title3">
|
|
|
+ 您已经领取过本次福袋啦~
|
|
|
+ </view>
|
|
|
+ <view class="activity_title4">
|
|
|
+ 赶紧前往芳华未来APP,兑换好物吧
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ <view class="ybg_box">
|
|
|
+ <view class="ybg"></view>
|
|
|
+ <image class="activity_lucky_bag" src="https://cdn.his.cdwjyyh.com/minapp/course/activity_lucky_bag.png"
|
|
|
+ mode="heightFix"></image>
|
|
|
+ <image class="activity_ysx" v-show="!isExpiry&&collectType!=1"
|
|
|
+ src="https://cdn.his.cdwjyyh.com/minapp/course/activity_ysx.png" mode="widthFix"></image>
|
|
|
+ <image class="activity_ylq" v-show="collectType==1"
|
|
|
+ src="https://cdn.his.cdwjyyh.com/minapp/course/activity_ylq.png" mode="widthFix"></image>
|
|
|
+ </view>
|
|
|
+ <view class="activity_btn animation" v-if="collectType!=1&&isExpiry" @click="handleReceive">
|
|
|
+ <view class="btn">领取福袋</view>
|
|
|
+ <image src="https://cdn.his.cdwjyyh.com/minapp/course/activity_btn.png" mode="heightFix"></image>
|
|
|
+ <view class="exsct"></view>
|
|
|
+ </view>
|
|
|
+ <view class="activity_btn_down x-c" v-else @click="navTo">
|
|
|
+ <text>如何下载芳华未来APP</text>
|
|
|
+ <image src="https://cdn.his.cdwjyyh.com/minapp/course/activity_more.png" mode="aspectFill"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <image class="footer_img" src="https://cdn.his.cdwjyyh.com/minapp/course/activity_xy.png" mode="widthFix">
|
|
|
+ </image>
|
|
|
+ <u-popup :show="show" mode="center" bgColor="transparent" :closeOnClickOverlay="false" overlayOpacity="0.7">
|
|
|
+ <view class="popup-box">
|
|
|
+ <image class="activity_jb" src="https://cdn.his.cdwjyyh.com/minapp/course/activity_jb.png"
|
|
|
+ mode="heightFix"></image>
|
|
|
+ <text class="popup-tit">恭喜您获得</text>
|
|
|
+ <view class="con">
|
|
|
+ <view class="numbox color_FB2205"><text class="num">+{{coinAmount||0}}</text>芳华币</view>
|
|
|
+ <view>您的芳华币总额:<text class="color_FB2205" style="font-weight: 600;">{{balance||0}}</text></view>
|
|
|
+ </view>
|
|
|
+ <view class="popup-tips">赶紧去芳华未来APP,兑换好物吧~</view>
|
|
|
+ <view class="popbtn x-c" @click="show=false">我知道啦</view>
|
|
|
+ </view>
|
|
|
+ <view class="popup-tips" style="color: #FFFFFF;margin-top: 60rpx;">兑换提示:请前往芳华未来APP兑换</view>
|
|
|
+ <view class="popup-tips" style="color: #FFC05C;text-decoration-line: underline;" @click="navTo">如何下载芳华未来APP?
|
|
|
+ </view>
|
|
|
+ </u-popup>
|
|
|
+ <u-popup :show="userlogo" mode="bottom" round='12'>
|
|
|
+ <view class="userlogo column">
|
|
|
+ <view class="mtb30 justify-start align-center ml20">
|
|
|
+ <u-avatar src="/static/logo.png" size="50"></u-avatar>
|
|
|
+ <view class="bold mlr20">丝路佳选</view>
|
|
|
+ <view>申请</view>
|
|
|
+ </view>
|
|
|
+ <view class="bold fs36 ml20">授权你的昵称头像信息</view>
|
|
|
+ <view class="mtb20 justify-between align-center plr20">
|
|
|
+ <view class="justify-start align-center">
|
|
|
+ <view class="boxweixin" :class="userinfos.nickname==''?'boxnosel':'boxsel'">
|
|
|
+ <view v-if="userinfos.nickname">
|
|
|
+ <u-icon name="checkbox-mark" color="#00aa00" size="22"></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="ml20">
|
|
|
+ <view class="base-color-3 bold">第一步</view>
|
|
|
+ <view class="fs32 base-color-9">请点击授权微信昵称</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="button-container">
|
|
|
+ <input
|
|
|
+ type="nickname"
|
|
|
+ class="hidden-input"
|
|
|
+ @blur="onNickNameInput"
|
|
|
+ @input="onNickNameInput"
|
|
|
+ />
|
|
|
+ <button class="custom-button" :class="nameuser==''?'subname':'subavt'">{{nameuser?"已授权":'允许授权'}}</button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- <view class="mtb20 justify-between align-center plr20 mt40">
|
|
|
+ <view class="justify-start align-center">
|
|
|
+ <view class="boxweixin" :class="userinfos.nickname==''?'boxnosel':'boxsel'">
|
|
|
+ <view v-if="userinfos.avatar">√</view>
|
|
|
+ </view>
|
|
|
+ <view class="ml20">
|
|
|
+ <view class="base-color-3 bold">第二步</view>
|
|
|
+ <view class="fs32 base-color-9">请点击授权微信头像</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="button-container">
|
|
|
+ <button open-type="chooseAvatar" @chooseavatar="onChooseAvatar" class="hidden-input"
|
|
|
+ v-if="nameuser">
|
|
|
+ 允许授权
|
|
|
+ </button>
|
|
|
+ <button class="custom-button sub" @click="shouquan" v-if="nameuser==''">允许授权</button>
|
|
|
+ <button class="custom-button " :class="avataruser==''?'subname':'subavt'"
|
|
|
+ v-else>{{avataruser?"已授权":'允许授权'}}</button>
|
|
|
+ </view>
|
|
|
+ </view> -->
|
|
|
+ <view class="submitname" @click="confimrname" :class="nameuser&&avataruser?'subact':'sub'">确定</view>
|
|
|
+ </view>
|
|
|
+ </u-popup>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import {mapGetters} from 'vuex';
|
|
|
+ import { getLuckyBagInfo, receiveLuckyBag,loginByMp,editUser,isAddCompanyUser,registerQwFsUserFinish}from '@/api/course.js'
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
|
|
|
+ show: false,
|
|
|
+ status: 0,
|
|
|
+ recordId: '',
|
|
|
+ urlOption: {},
|
|
|
+ sortLink: '',
|
|
|
+ isLogin: false,
|
|
|
+ isLoginH5: 0, // 1服务号授权
|
|
|
+ collectType: 0, // 领取状态(0-已发放 1-已领取 2-已失效)
|
|
|
+ isExpiry: true, // false 失效 true 有效
|
|
|
+ coinAmount: 0,
|
|
|
+ balance: 0,
|
|
|
+ chatId: '',
|
|
|
+ userlogo:false,
|
|
|
+ imgname:'',
|
|
|
+ userinfos:{
|
|
|
+ nickname:"",
|
|
|
+ avatar:""
|
|
|
+ },
|
|
|
+ btnLoading: false,
|
|
|
+ registerLoading: false,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapGetters(['coureLogin']),
|
|
|
+ nameuser() {
|
|
|
+ return this.userinfos.nickname
|
|
|
+ },
|
|
|
+ avataruser() {
|
|
|
+ return this.userinfos.avatar
|
|
|
+ },
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ coureLogin: {
|
|
|
+ immediate: true, // 页面一进入就检查一次
|
|
|
+ handler(val) {
|
|
|
+ if (val == 2 && this.isLogin) {
|
|
|
+ console.log("注册AppToken失效,请重新登录")
|
|
|
+ uni.removeStorageSync('web_userInfo');
|
|
|
+ uni.removeStorageSync('TOKEN_WEXIN');
|
|
|
+ this.isLogin = false
|
|
|
+ if (this.isLoginH5 == 0) {
|
|
|
+ this.goWXLogin()
|
|
|
+ } else {
|
|
|
+ this.goLogin()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(option) {
|
|
|
+ this.urlOption = option.link ? JSON.parse(decodeURIComponent(option.link)) : {};
|
|
|
+ this.sortLink = this.urlOption.link || ''
|
|
|
+ this.chatId = this.urlOption.chatId || ''
|
|
|
+ this.recordId =this.urlOption.businessId || ''
|
|
|
+ console.log(this.sortLink)
|
|
|
+ uni.$on('usercode',(data)=>{
|
|
|
+ if(data) {
|
|
|
+ this.goLogin(data)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.getLuckyBagInfo()
|
|
|
+ },
|
|
|
+ beforeDestroy() {
|
|
|
+ uni.$off('usercode')
|
|
|
+ },
|
|
|
+ onUnload() {
|
|
|
+ uni.$off('usercode')
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ registerQwFsUserFinish() {
|
|
|
+ uni.showLoading({
|
|
|
+ title: '领取中...'
|
|
|
+ });
|
|
|
+ registerQwFsUserFinish(this.urlOption).then(res=>{
|
|
|
+ uni.hideLoading()
|
|
|
+ if(res.code==200) {
|
|
|
+ this.receiveLuckyBag()
|
|
|
+ } else {
|
|
|
+ if (this.chatId) {
|
|
|
+ this.userlogo = true
|
|
|
+ } else {
|
|
|
+ this.getAddCompanyUser()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }).catch(()=>{
|
|
|
+ uni.hideLoading()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getAddCompanyUser() {
|
|
|
+ if(this.registerLoading) return;
|
|
|
+ uni.showLoading({
|
|
|
+ title: '注册中'
|
|
|
+ })
|
|
|
+ this.registerLoading = true
|
|
|
+ isAddCompanyUser(this.urlOption).then(res=>{
|
|
|
+ this.registerLoading = false
|
|
|
+ uni.hideLoading()
|
|
|
+ if(res.code==200) {
|
|
|
+ this.receiveLuckyBag()
|
|
|
+ } else {
|
|
|
+ uni.showToast({
|
|
|
+ title: res.msg,
|
|
|
+ icon: 'none'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }).catch(()=>{
|
|
|
+ this.registerLoading = false
|
|
|
+ uni.hideLoading()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //修改用户昵称以及头像
|
|
|
+ editUserA(){
|
|
|
+ this.userinfos=uni.getStorageSync('web_userInfo')?uni.getStorageSync('web_userInfo'):this.userinfos
|
|
|
+ const data={
|
|
|
+ nickName:this.userinfos.nickname,
|
|
|
+ // avatar:this.userinfos.avatar,
|
|
|
+ }
|
|
|
+ editUser(data).then(res=>{
|
|
|
+ if(res.code==200){
|
|
|
+ this.isLogin = true
|
|
|
+ uni.showToast({
|
|
|
+ icon:'none',
|
|
|
+ title:'修改成功!',
|
|
|
+ });
|
|
|
+ setTimeout(()=>{
|
|
|
+ this.getAddCompanyUser()
|
|
|
+ },100)
|
|
|
+ }else{
|
|
|
+ uni.removeStorageSync('web_userInfo')
|
|
|
+ uni.showToast({
|
|
|
+ icon:'none',
|
|
|
+ title:res.msg+'请重新领取福袋',
|
|
|
+ });
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ shouquan(){
|
|
|
+ if(this.userinfos.nickname==''){
|
|
|
+ uni.showToast({
|
|
|
+ icon:'none',
|
|
|
+ title: "请先授权微信昵称",
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ confimrname(){
|
|
|
+ if(this.userinfos.nickname==''){
|
|
|
+ uni.showToast({
|
|
|
+ icon:'none',
|
|
|
+ title: "请授权微信昵称",
|
|
|
+ });
|
|
|
+ return
|
|
|
+ }
|
|
|
+ // if(this.userinfos.avatar==''){
|
|
|
+ // uni.showToast({
|
|
|
+ // icon:'none',
|
|
|
+ // title: "请授权微信头像",
|
|
|
+ // });
|
|
|
+ // return
|
|
|
+ // }
|
|
|
+ uni.setStorageSync('web_userInfo',this.userinfos)
|
|
|
+ this.editUserA()
|
|
|
+ this.userlogo=false
|
|
|
+ },
|
|
|
+ onNickNameInput(e){
|
|
|
+ console.log(e)
|
|
|
+ this.userinfos.nickname=e.detail.value
|
|
|
+ },
|
|
|
+ onChooseAvatar(e){
|
|
|
+ this.userinfos.avatar=e.detail.avatarUrl
|
|
|
+ uni.uploadFile({
|
|
|
+ url: 'https://h5api.his.cdwjyyh.com'+'/app/common/uploadOSS', //仅为示例,非真实的接口地址
|
|
|
+ filePath: e.detail.avatarUrl,
|
|
|
+ name: 'file',
|
|
|
+ formData: {
|
|
|
+ 'user': 'test' // 上传附带参数
|
|
|
+ },
|
|
|
+ success: (uploadFileRes) => {
|
|
|
+ console.log(uploadFileRes)
|
|
|
+ // 根据接口具体返回格式 赋值具体对应url
|
|
|
+ var data=JSON.parse(uploadFileRes.data)
|
|
|
+ this.headImg=uni.getStorageSync('requestPath')+data.fileName
|
|
|
+ this.userinfos.avatar=data.url
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handleReceive() {
|
|
|
+ if (this.isLoginH5 == 0) {
|
|
|
+ this.utils.isLoginCourse().then(
|
|
|
+ isLogin => {
|
|
|
+ this.isLogin = isLogin
|
|
|
+ if (this.isLogin) {
|
|
|
+ this.registerQwFsUserFinish()
|
|
|
+ } else {
|
|
|
+ this.goLogin()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ rej => {}
|
|
|
+ );
|
|
|
+ }
|
|
|
+ },
|
|
|
+ receiveLuckyBag() {
|
|
|
+ if(this.btnLoading) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ uni.showLoading({
|
|
|
+ title: '领取中...',
|
|
|
+ });
|
|
|
+ this.btnLoading = true
|
|
|
+ const param = {
|
|
|
+ ...this.urlOption,
|
|
|
+ recordId: this.recordId
|
|
|
+ }
|
|
|
+ receiveLuckyBag(param).then(res => {
|
|
|
+ uni.hideLoading()
|
|
|
+ this.btnLoading = false
|
|
|
+ if(res.code == 200) {
|
|
|
+ this.coinAmount = res.data.coinAmount || 0
|
|
|
+ this.balance = res.data.balance || 0
|
|
|
+ this.collectType = 1
|
|
|
+ this.show = true
|
|
|
+ } else {
|
|
|
+ uni.showModal({
|
|
|
+ title: '领取失败',
|
|
|
+ content: res.msg,
|
|
|
+ showCancel: false,
|
|
|
+ success: function (res) {
|
|
|
+ if (res.confirm) {
|
|
|
+ console.log('用户点击确定');
|
|
|
+ } else if (res.cancel) {
|
|
|
+ console.log('用户点击取消');
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }).catch(()=>{
|
|
|
+ this.btnLoading = false
|
|
|
+ })
|
|
|
+ },
|
|
|
+ navTo() {
|
|
|
+ this.show = false
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages_course/appDownload'
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getLuckyBagInfo() {
|
|
|
+ uni.hideLoading()
|
|
|
+ getLuckyBagInfo({
|
|
|
+ recordId: this.recordId
|
|
|
+ }).then(res => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.collectType = res.data.collectType || 0; //领取状态(0-已发放 1-已领取 2-已失效)
|
|
|
+ this.isExpiry = res.data.isExpiry; //false 失效 true 有效
|
|
|
+ } else {
|
|
|
+ uni.showToast({
|
|
|
+ title: res.msg,
|
|
|
+ icon: 'none'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ goLogin(data) {
|
|
|
+ if (this.isLoginH5 == 0) {
|
|
|
+ this.goWXLogin(1)
|
|
|
+ return
|
|
|
+ }
|
|
|
+ },
|
|
|
+ goWXLogin() {
|
|
|
+ this.utils.getProvider().then(provider => {
|
|
|
+ console.log('当前的环境商', provider)
|
|
|
+ if (!provider) {
|
|
|
+ reject()
|
|
|
+ }
|
|
|
+ uni.login({
|
|
|
+ provider: provider,
|
|
|
+ success: async loginRes => {
|
|
|
+ console.log(loginRes)
|
|
|
+ uni.getUserInfo({
|
|
|
+ provider: provider,
|
|
|
+ success: (infoRes) => {
|
|
|
+ uni.showToast({
|
|
|
+ title: '登录中...',
|
|
|
+ icon: 'loading'
|
|
|
+ });
|
|
|
+ loginByMp({
|
|
|
+ code: loginRes.code,
|
|
|
+ encryptedData: infoRes.encryptedData,
|
|
|
+ iv: infoRes.iv,
|
|
|
+ appId: getApp().globalData.appId
|
|
|
+ }).then(res => {
|
|
|
+ uni.hideLoading();
|
|
|
+ if (res.code == 200) {
|
|
|
+ // this.checkUserInfoA()
|
|
|
+ this.$store.commit('setCoureLogin', 1);
|
|
|
+ uni.setStorageSync(
|
|
|
+ 'AppTokenmini_RTCourse', res
|
|
|
+ .token);
|
|
|
+ uni.setStorageSync('auto_userInfo',
|
|
|
+ JSON.stringify(res.user));
|
|
|
+ this.isLogin = true
|
|
|
+ this.registerQwFsUserFinish()
|
|
|
+ } else {
|
|
|
+ uni.showToast({
|
|
|
+ title: res.msg,
|
|
|
+ icon: 'none'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }).catch(err => {
|
|
|
+ uni.hideLoading();
|
|
|
+ uni.showToast({
|
|
|
+ icon: 'none',
|
|
|
+ title: "登录失败,请重新登录",
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }).catch(err => {})
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+ .subname{
|
|
|
+ background-color: #00aa00;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ .subavt{
|
|
|
+ background-color: #fff;
|
|
|
+ border: 2rpx #0a0 solid;
|
|
|
+ color: #00aa00;
|
|
|
+ }
|
|
|
+ .boxweixin{
|
|
|
+ width: 44rpx;
|
|
|
+ height: 44rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 34rpx;
|
|
|
+ color: #0a0;
|
|
|
+ }
|
|
|
+ .boxnosel{
|
|
|
+ border: #757575 4rpx solid;
|
|
|
+ }
|
|
|
+ .boxsel{
|
|
|
+ border: #0a0 4rpx solid;
|
|
|
+ }
|
|
|
+ .button-container {
|
|
|
+ position: relative;
|
|
|
+ width: 240rpx;
|
|
|
+ }
|
|
|
+ .hidden-input {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ opacity: 0;
|
|
|
+ z-index: 2;
|
|
|
+ }
|
|
|
+ .custom-button {
|
|
|
+ position: relative;
|
|
|
+ z-index: 1;
|
|
|
+ /* 其他样式 */
|
|
|
+ width:100%;
|
|
|
+ margin: 0 auto;
|
|
|
+ height: 80rpx;
|
|
|
+ line-height: 60rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ padding: 10rpx 20rpx;
|
|
|
+ }
|
|
|
+ .submitname{
|
|
|
+ width: 90%;
|
|
|
+
|
|
|
+ margin: 0 auto;
|
|
|
+ text-align: center;
|
|
|
+ padding: 30rpx;
|
|
|
+ margin-top: 40rpx;
|
|
|
+ }
|
|
|
+ .sub{
|
|
|
+ background-color: #f0f0f0;
|
|
|
+ color: #0a0;
|
|
|
+ }
|
|
|
+ .subact{
|
|
|
+ background-color: #0a0;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ .userlogo{
|
|
|
+ height: 760rpx;
|
|
|
+ }
|
|
|
+ .exsct {
|
|
|
+ height: 92rpx;
|
|
|
+ width: 437rpx;
|
|
|
+ background-color: transparent;
|
|
|
+ border-radius: 69rpx;
|
|
|
+ position: absolute;
|
|
|
+ top: 27rpx;
|
|
|
+ left: 28rpx;
|
|
|
+ box-shadow: inset -57rpx 0px 40rpx -26rpx rgba(255, 255, 255, 0.7);
|
|
|
+ will-change: left, opacity;
|
|
|
+ animation: leftFade 2s linear infinite;
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .color_FB2205 {
|
|
|
+ color: #FB2205;
|
|
|
+ }
|
|
|
+
|
|
|
+ .activity_title2,
|
|
|
+ .activity_title3,
|
|
|
+ .activity_title4 {
|
|
|
+ margin-top: 8vh;
|
|
|
+ margin-bottom: 56rpx;
|
|
|
+ font-family: PingFang SC, PingFang SC;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 48rpx;
|
|
|
+ line-height: 80rpx;
|
|
|
+ filter: drop-shadow(0px 4rpx 8rpx rgba(174, 0, 25, 0.8));
|
|
|
+ text-align: center;
|
|
|
+ font-style: normal;
|
|
|
+ text-transform: none;
|
|
|
+ background: linear-gradient(270deg, #FFF5EE 0%, #FFE2B3 100%);
|
|
|
+ -webkit-background-clip: text;
|
|
|
+ background-clip: text;
|
|
|
+ -webkit-text-fill-color: transparent;
|
|
|
+ text-fill-color: transparent;
|
|
|
+ display: inline-block
|
|
|
+ }
|
|
|
+
|
|
|
+ .activity_title3 {
|
|
|
+ font-size: 48rpx;
|
|
|
+ line-height: 80rpx;
|
|
|
+ margin-top: 6vh;
|
|
|
+ margin-bottom: 8rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .activity_title4 {
|
|
|
+ font-size: 32rpx;
|
|
|
+ line-height: 44rpx;
|
|
|
+ margin-top: 0;
|
|
|
+ margin-bottom: 48rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .container_box {
|
|
|
+ min-height: 100vh;
|
|
|
+ position: relative;
|
|
|
+ background: linear-gradient(180deg, #FD2F3C 0%, #FFE7CE 100%);
|
|
|
+ }
|
|
|
+
|
|
|
+ .activity_yh_right {
|
|
|
+ width: 100rpx;
|
|
|
+ position: absolute;
|
|
|
+ top: 25%;
|
|
|
+ right: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .activity_yh_left {
|
|
|
+ width: 114rpx;
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .header-nav {
|
|
|
+ height: 88rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ overflow: hidden;
|
|
|
+ box-sizing: border-box;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .conbox {
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-start;
|
|
|
+ z-index: 3;
|
|
|
+
|
|
|
+ .activity_title {
|
|
|
+ width: 632rpx;
|
|
|
+ height: auto;
|
|
|
+ margin-top: 28rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ybg_box {
|
|
|
+ width: 566rpx;
|
|
|
+ height: 580rpx;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .activity_ysx,
|
|
|
+ .activity_ylq {
|
|
|
+ position: absolute;
|
|
|
+ left: 242rpx;
|
|
|
+ top: 215rpx;
|
|
|
+ width: 300rpx;
|
|
|
+ height: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ybg {
|
|
|
+ width: 616rpx;
|
|
|
+ height: 616rpx;
|
|
|
+
|
|
|
+ background: #FFE7CE;
|
|
|
+ border-radius: 0rpx 0rpx 0rpx 0rpx;
|
|
|
+
|
|
|
+ filter: blur(94.30000305175781px);
|
|
|
+ }
|
|
|
+
|
|
|
+ image {
|
|
|
+ height: 580rpx;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ z-index: 99;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .activity_btn_down {
|
|
|
+ width: 416rpx;
|
|
|
+ height: 88rpx;
|
|
|
+ margin-top: 94rpx;
|
|
|
+ background: rgba(0, 0, 0, 0.3);
|
|
|
+ border-radius: 56rpx 56rpx 56rpx 56rpx;
|
|
|
+ font-family: PingFang SC, PingFang SC;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 32rpx;
|
|
|
+ height: 32rpx;
|
|
|
+ margin-left: 16rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .activity_btn {
|
|
|
+ height: 137rpx;
|
|
|
+ width: 502rpx;
|
|
|
+ margin-top: 48rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 44rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ position: relative;
|
|
|
+ z-index: 2;
|
|
|
+ overflow: hidden;
|
|
|
+ border-radius: 137rpx;
|
|
|
+
|
|
|
+ image {
|
|
|
+ height: 137rpx;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 12rpx;
|
|
|
+ z-index: -1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .popup-box {
|
|
|
+ width: 518rpx;
|
|
|
+ min-height: 568rpx;
|
|
|
+ background: linear-gradient(180deg, #FFE7AC 0%, #FFFFFF 100%);
|
|
|
+ border-radius: 56rpx 56rpx 56rpx 56rpx;
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex-direction: column;
|
|
|
+ box-shadow: 0 0 30px -6px rgba(255, 231, 206, 1);
|
|
|
+
|
|
|
+ .activity_jb {
|
|
|
+ height: 184rpx;
|
|
|
+ margin-top: -130rpx;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ .popup-tit {
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 40rpx;
|
|
|
+ color: #000000;
|
|
|
+ line-height: 80rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .con {
|
|
|
+ margin-top: 16rpx;
|
|
|
+ width: 438rpx;
|
|
|
+ min-height: 170rpx;
|
|
|
+ padding: 16rpx 0;
|
|
|
+ background: #FFE8AE;
|
|
|
+ border-radius: 16rpx 16rpx 16rpx 16rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #333333;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .numbox {
|
|
|
+ font-weight: 600;
|
|
|
+ margin-bottom: 12rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .num {
|
|
|
+ font-size: 68rpx;
|
|
|
+ margin-right: 10rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .popbtn {
|
|
|
+ width: 358rpx;
|
|
|
+ height: 88rpx;
|
|
|
+ background: linear-gradient(90deg, #F82D31 0%, #FD6C05 100%);
|
|
|
+ box-shadow: 0rpx 8rpx 0rpx 0rpx #FEBC92;
|
|
|
+ border-radius: 64rpx 64rpx 64rpx 64rpx;
|
|
|
+ margin-top: 32rpx;
|
|
|
+ font-family: PingFang SC, PingFang SC;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .popup-tips {
|
|
|
+ margin-top: 20rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #666666;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .footer_img {
|
|
|
+ width: 100%;
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .animation {
|
|
|
+ will-change: transform;
|
|
|
+ animation: scaleAnimation 2s ease infinite;
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes leftFade {
|
|
|
+ 0% {
|
|
|
+ left: -464rpx;
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ 25% {
|
|
|
+ opacity: 1;
|
|
|
+ left: -249rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ 50% {
|
|
|
+ opacity: 0;
|
|
|
+ left: 16rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ 100% {
|
|
|
+ opacity: 0;
|
|
|
+ left: 490rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes scaleAnimation {
|
|
|
+ 0% {
|
|
|
+ transform: scale(1);
|
|
|
+ }
|
|
|
+
|
|
|
+ // 30% {
|
|
|
+ // transform: scale(1.05);
|
|
|
+ // }
|
|
|
+
|
|
|
+ 50% {
|
|
|
+ transform: scale(1.05);
|
|
|
+ }
|
|
|
+
|
|
|
+ 100% {
|
|
|
+ transform: scale(1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|