815 lines
20 KiB
Vue
815 lines
20 KiB
Vue
<template>
|
||
<view class="assist">
|
||
<!-- 背景图片 -->
|
||
<image src="../static/assist/zlBg.png" class="bg" mode="widthFix"></image>
|
||
<!-- 内容 -->
|
||
<view class="content">
|
||
<!-- #ifdef H5 -->
|
||
<image v-if="isBack" src="/static/images/index/left.png" class="left_viewimage" @tap="goBack"></image>
|
||
<!-- #endif -->
|
||
|
||
<!-- 标题 -->
|
||
<view class="content-title">
|
||
邀好友助力
|
||
</view>
|
||
<!-- 副标题 -->
|
||
<view class="content-titles">
|
||
免费领会员
|
||
</view>
|
||
<!-- 邀请好友展示框 -->
|
||
<view class="content-hy flex align-center justify-center">
|
||
<view class="content-hy-box">
|
||
<view class="content-hy-box-title1" v-if="rlueList[rlueIndex] && rlueList[rlueIndex].inviteMonth>0">
|
||
{{userName}},再邀请<span>{{getUserPeopNum}}</span>位好友,可再得{{rlueList[rlueIndex].inviteMonth}}个月会员
|
||
</view>
|
||
<view class="content-hy-box-title1" v-else>
|
||
{{userName}},再邀请<span>{{getUserPeopNum}}</span>位好友,可升级永久免费无限会员
|
||
</view>
|
||
<view class="" v-for="(item,index) in rlueList" :key="index">
|
||
<view v-if="index>rlueIndex" class="content-hy-box-title2">
|
||
<block v-if="item.inviteMonth>0">
|
||
再邀请{{item.inviteCount - nowPeopNum}}位好友，可再得{{item.inviteMonth}}个月会员
|
||
</block>
|
||
<block v-else>
|
||
再邀请{{item.inviteCount - nowPeopNum}}位好友，可升级永久免费无限会员
|
||
</block>
|
||
</view>
|
||
</view>
|
||
<view class="content-hy-box-peop">
|
||
<view class="content-hy-box-peop-my flex align-center justify-center">
|
||
<image :src="avatar?avatar:'../../static/images/logo.png'" mode=""></image>
|
||
</view>
|
||
<view class="content-hy-box-peop-title">
|
||
您已注册成功，还需邀请
|
||
</view>
|
||
<view class="content-hy-box-peop-list flex align-center justify-between flex-wrap">
|
||
<view class="content-hy-box-peop-list-i flex align-center justify-center"
|
||
v-for="(item,index) in getPeopNum" :key="index">
|
||
<block v-if="getPeopList[index]">
|
||
<view class="content-hy-box-peop-list-ia flex align-center justify-center"
|
||
style="border: none;">
|
||
<image style="width: 100%;height: 100%;border-radius: 50%;"
|
||
:src="getPeopList[index].avatar?getPeopList[index].avatar:'../../static/images/logo.png'"
|
||
mode=""></image>
|
||
</view>
|
||
<view class="content-hy-box-peop-list-it flex align-center justify-center">
|
||
{{getPeopList[index].userName}}
|
||
</view>
|
||
</block>
|
||
<block v-else>
|
||
<view @click="onSaveImg()"
|
||
class="content-hy-box-peop-list-ia flex align-center justify-center">
|
||
<u-icon name="plus" color="#ffffff" size="28"></u-icon>
|
||
</view>
|
||
<view class="content-hy-box-peop-list-it flex align-center justify-center">
|
||
待助力
|
||
</view>
|
||
</block>
|
||
|
||
</view>
|
||
<view class="content-hy-box-peop-list-i flex align-center justify-center"
|
||
style="height: 0;">
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<block v-if="getPeopList.length>0">
|
||
<!-- 进度条 -->
|
||
<view class="content-hy-box-schedule">
|
||
<u-line-progress height="16" inactive-color="#f5e0b0" active-color="#edb840"
|
||
:show-percent="false" :percent="getMathNum()" :round="true"></u-line-progress>
|
||
</view>
|
||
<view class="content-hy-box-schedulet">
|
||
距离领取会员仅差<span>{{getUserPeopNum}}</span>位好友
|
||
</view>
|
||
<view class="content-hy-box-peops">
|
||
<swiper class="content-hy-box-peopss" next-margin="80px" :circular="true"
|
||
:indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000">
|
||
<swiper-item class="content-hy-box-peopssi" v-for="(item,index) in getPeopList"
|
||
:key="index">
|
||
<view class="content-hy-box-peopssis flex align-center">
|
||
<image :src="item.avatar?item.avatar:'../../static/images/logo.png'" mode="">
|
||
</image>
|
||
<view class="content-hy-box-peopssit">
|
||
{{item.userName}}已为您助力
|
||
</view>
|
||
</view>
|
||
</swiper-item>
|
||
</swiper>
|
||
</view>
|
||
</block>
|
||
|
||
</view>
|
||
</view>
|
||
<!-- 助力按钮 -->
|
||
<!-- #ifndef MP-KUAISHOU -->
|
||
<view class="content-btn flex align-center justify-center" @click="onSaveImg()">
|
||
{{getPeopList.length==0?'开始助力':'继续助力'}}
|
||
</view>
|
||
<!-- #endif -->
|
||
<!-- #ifdef MP-KUAISHOU -->
|
||
<view class="content-btn flex align-center justify-center">
|
||
<u-button open-type="share" :custom-style="customStyle" :hair-line="false"
|
||
style="width: 100%;height: 100%;" shape="circle"
|
||
:ripple="true">{{getPeopList.length==0?'开始助力':'继续助力'}}</u-button>
|
||
</view>
|
||
|
||
<!-- #endif -->
|
||
|
||
<!-- 活动流程 -->
|
||
<view class="content-lc">
|
||
<view class="content-lc-title flex align-center justify-center">
|
||
活动流程
|
||
</view>
|
||
<view class="content-lc-ls flex justify-between">
|
||
<view class="content-lc-ls-i">
|
||
<image src="../static/assist/as1.png" mode=""></image>
|
||
<view class="content-lc-ls-it">
|
||
点击发起助力
|
||
</view>
|
||
</view>
|
||
<image class="content-lc-ls-ir" src="../static/assist/asr.png" mode=""></image>
|
||
<view class="content-lc-ls-i">
|
||
<image src="../static/assist/as2.png" mode=""></image>
|
||
<view class="content-lc-ls-it">
|
||
邀请对应数量好友
|
||
</view>
|
||
</view>
|
||
<image class="content-lc-ls-ir" src="../static/assist/asr.png" mode=""></image>
|
||
<view class="content-lc-ls-i">
|
||
<image src="../static/assist/as3.png" mode=""></image>
|
||
<view class="content-lc-ls-it">
|
||
每位好友注册成功
|
||
</view>
|
||
</view>
|
||
<image class="content-lc-ls-ir" src="../static/assist/asr.png" mode=""></image>
|
||
<view class="content-lc-ls-i">
|
||
<image src="../static/assist/as4.png" mode=""></image>
|
||
<view class="content-lc-ls-it">
|
||
领取对应时间会员
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 活动规则 -->
|
||
<view class="content-rule">
|
||
<view class="content-rule-title flex align-center justify-center">
|
||
活动规则
|
||
</view>
|
||
<view class="content-rule-list">
|
||
<view class="content-rule-list-i flex align-center" v-for="(item,index) in rlueList" :key="index">
|
||
<image :src="item.inviteImg" mode=""></image>
|
||
<view class="content-rule-list-i-r">
|
||
<view class="content-rule-list-i-r-t" v-if="item.inviteMonth>0">
|
||
领取{{item.inviteMonth}}个月会员
|
||
</view>
|
||
<view class="content-rule-list-i-r-t" v-else>
|
||
领取永久会员
|
||
</view>
|
||
<view class="content-rule-list-i-r-b" v-if="item.inviteMonth>0">
|
||
邀请{{item.inviteCount}}位好友,您可以免费{{item.inviteMonth}}个月无限看短剧。
|
||
</view>
|
||
<view class="content-rule-list-i-r-b" v-else>
|
||
邀请{{item.inviteCount}}位好友,您可以永久免费无限看短剧。
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- <image src="../../static/images/logo.png" mode=""></image> -->
|
||
|
||
<tki-qrcode ref="qrcode" :val="erweima" :size="100" background="#ffffff" foreground="#000000" pdground="#000000"
|
||
:onval="true" :loadMake="true" @result="qrR" :show="false"></tki-qrcode>
|
||
|
||
<view class="cu-modal" :class="modalName == 'Image' ? 'show' : ''" @tap="hideModal">
|
||
<view class="cu-dialog" v-if="bgImg && erweimapath && haibaoShow" @tap="hideModal">
|
||
<view class="bg-img">
|
||
<wm-poster @success="posterSuccess" @successH5="successH5" :imgSrc="bgImg"
|
||
:Referrer="'我的邀请码:'+invitationCode" :QrSrc="erweimapath" :LineType="false"></wm-poster>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import tkiQrcode from '../../components/tki-qrcode/tki-qrcode.vue';
|
||
import wmPoster from '../components/wm-poster/wm-posterordershd.vue';
|
||
import config from '../../common/config.js'
|
||
export default {
|
||
components: {
|
||
tkiQrcode,
|
||
wmPoster
|
||
},
|
||
data() {
|
||
return {
|
||
customStyle: {
|
||
width: '100%',
|
||
height: '98rpx',
|
||
border: 'none',
|
||
background: 'transparent',
|
||
color: '#ffffff',
|
||
fontSize: '12px',
|
||
fontWeight: '500',
|
||
|
||
// padding: '24px 20px',
|
||
},
|
||
avatar: '',
|
||
inviteAwardId: '', //等级id
|
||
rlueList: [], //规则列表
|
||
getPeopNum: 0, //当前需要邀请的人数
|
||
getUserPeopNum: 0, //还需要邀请的人数
|
||
rlueIndex: 0, //当前等级对应的下标
|
||
nowPeopNum: 0, //已经邀请的人数
|
||
getPeopList: [], //已经邀请的人列表
|
||
userName: '', //用户名称
|
||
avatar: '', //用户头像
|
||
erweima: '',
|
||
modalName: '',
|
||
bgImg: '',
|
||
erweimapath: '',
|
||
haibaoShow: false,
|
||
invitationCode: 0,
|
||
erweimapath: '',
|
||
haibaoImgH5: '',
|
||
qdCode: '', //渠道码
|
||
isBack: false,
|
||
bgImgs: '',
|
||
tuiguang: '',
|
||
}
|
||
},
|
||
onShareAppMessage(res) {
|
||
return {
|
||
path: '/pages/index/index?invitation=' + this.invitationCode + '&qdCode=' + this
|
||
.qdCode, //这是为了传参 onload(data){let id=data.id;}
|
||
title: this.tuiguang,
|
||
imageUrl: this.bgImgs
|
||
}
|
||
},
|
||
onShareTimeline(res) {
|
||
return {
|
||
path: '/pages/index/index?invitation=' + this.invitationCode + '&qdCode=' + this
|
||
.qdCode, //这是为了传参 onload(data){let id=data.id;}
|
||
title: this.tuiguang,
|
||
imageUrl: this.bgImgs
|
||
}
|
||
},
|
||
onLoad() {
|
||
// #ifdef H5
|
||
let ua = navigator.userAgent.toLowerCase();
|
||
if (ua.indexOf('micromessenger') !== -1) {
|
||
this.isBack = false
|
||
} else {
|
||
this.isBack = true
|
||
}
|
||
// #endif
|
||
|
||
if (uni.getStorageSync('qdCode')) {
|
||
this.qdCode = uni.getStorageSync('qdCode')
|
||
}
|
||
this.getBgImg()
|
||
this.invitationCode = uni.getStorageSync('invitationCode')
|
||
// h5携带邀请码去首页
|
||
// #ifdef H5
|
||
this.erweima = config.APIHOST2 + '/?invitation=' + this
|
||
.invitationCode + '&qdCode=' + this.qdCode
|
||
// #endif
|
||
// app直接去app注册页面
|
||
// #ifdef APP
|
||
this.erweima = config.APIHOST2 + '/pages/login/registerApp?invitation=' + this
|
||
.invitationCode + '&qdCode=' + this.qdCode
|
||
// #endif
|
||
// #ifdef MP-WEIXIN
|
||
this.getWxEq()
|
||
// #endif
|
||
// #ifdef MP-TOUTIAO
|
||
this.getTouTiao()
|
||
// #endif
|
||
this.getUserInfo()
|
||
this.getActivity()
|
||
},
|
||
methods: {
|
||
goBack() {
|
||
uni.navigateBack();
|
||
},
|
||
//获取头条二维码
|
||
getTouTiao() {
|
||
let that = this
|
||
uni.downloadFile({
|
||
url: config.APIHOST +
|
||
'/app/invite/dyCreateQr?invitationCode=' + that
|
||
.invitationCode + ',' + that.qdCode + '&page=/pages/index/index',
|
||
success: (res) => {
|
||
console.log(res)
|
||
if (res.statusCode === 200) {
|
||
that.erweimapath = res.tempFilePath
|
||
} else {
|
||
uni.hideLoading();
|
||
uni.showToast({
|
||
title: '海报制作失败，图片下载失败',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
},
|
||
fail: err => {
|
||
console.log(err)
|
||
uni.hideLoading();
|
||
uni.showToast({
|
||
title: '海报制作失败，图片下载失败',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
});
|
||
},
|
||
//获取微信二维码
|
||
getWxEq() {
|
||
let that = this
|
||
uni.downloadFile({
|
||
url: config.APIHOST +
|
||
'/app/invite/mpCreateQr?invitationCode=' + that
|
||
.invitationCode + ',' + that.qdCode,
|
||
success: (res) => {
|
||
console.log(res)
|
||
if (res.statusCode === 200) {
|
||
that.erweimapath = res.tempFilePath
|
||
} else {
|
||
uni.hideLoading();
|
||
uni.showToast({
|
||
title: '海报制作失败，图片下载失败',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
},
|
||
fail: err => {
|
||
console.log(err)
|
||
uni.hideLoading();
|
||
uni.showToast({
|
||
title: '海报制作失败，图片下载失败',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
});
|
||
},
|
||
//获取背景图
|
||
getBgImg() {
|
||
this.$Request.get('/app/common/type/812').then(res => {
|
||
if (res.code == 0 && res.data.value) {
|
||
this.bgImg = res.data.value
|
||
}
|
||
})
|
||
this.$u.get('app/banner/selectBannerList?classify=5').then(res => {
|
||
if (res.code == 0) {
|
||
this.bgImgs = res.data[0].imageUrl
|
||
this.tuiguang = res.data[0].describes
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
duration: 1000,
|
||
icon: 'none'
|
||
});
|
||
}
|
||
});
|
||
},
|
||
showModal() {
|
||
console.log(this.erweima, '二维码地址')
|
||
// #ifndef H5
|
||
if (!this.haibaoImg) {
|
||
this.haibaoShow = true;
|
||
uni.showLoading({
|
||
title: '海报生成中'
|
||
});
|
||
} else {
|
||
this.modalName = 'Image';
|
||
}
|
||
// #endif
|
||
// #ifdef H5
|
||
let ua = navigator.userAgent.toLowerCase();
|
||
if (ua.indexOf('micromessenger') !== -1) {
|
||
//微信浏览器
|
||
if (!this.haibaoImg) {
|
||
this.haibaoShow = true;
|
||
uni.showLoading({
|
||
title: '海报生成中'
|
||
});
|
||
} else {
|
||
this.modalName = 'Image';
|
||
}
|
||
} else {
|
||
if (!this.haibaoImgH5) {
|
||
this.haibaoShow = true;
|
||
uni.showLoading({
|
||
title: '海报生成中'
|
||
});
|
||
} else {
|
||
uni.previewImage({
|
||
urls: [this.haibaoImgH5],
|
||
current: 1,
|
||
})
|
||
}
|
||
|
||
}
|
||
// #endif
|
||
},
|
||
onSaveImg() {
|
||
this.showModal();
|
||
},
|
||
posterSuccess(haibaoImg) {
|
||
this.haibaoImg = haibaoImg;
|
||
this.modalName = 'Image';
|
||
uni.hideLoading();
|
||
},
|
||
successH5(haibaoImg) {
|
||
this.haibaoImgH5 = haibaoImg
|
||
uni.previewImage({
|
||
urls: [haibaoImg],
|
||
current: 1,
|
||
})
|
||
},
|
||
hideModal() {
|
||
this.modalName = null;
|
||
},
|
||
qrR(path) {
|
||
console.log(path, '二维码回调地址')
|
||
this.erweimapath = path;
|
||
},
|
||
//计算百分比
|
||
getMathNum() {
|
||
return (this.getPeopList.length / this.getPeopNum).toFixed(2) * 100
|
||
},
|
||
//获取登录用户信息
|
||
getUserInfo() {
|
||
this.$u.api.userinfo().then(res => {
|
||
if (res.code == 0) {
|
||
this.userName = res.data.userName;
|
||
this.avatar = res.data.avatar;
|
||
}
|
||
})
|
||
},
|
||
// 获取活动等级
|
||
getActivity() {
|
||
this.$Request.getT('/app/invite/selectInviteAwardByUserId').then(res => {
|
||
if (res.code == 0) {
|
||
if (res.data) {
|
||
this.inviteAwardId = res.data.inviteAwardId
|
||
this.getPeopNum = res.data.inviteCount
|
||
this.getActivityrule()
|
||
}
|
||
}
|
||
})
|
||
},
|
||
//获取活动规则列表
|
||
getActivityrule() {
|
||
this.$Request.getT('/app/invite/selectInviteAwardList', {
|
||
page: 1,
|
||
limit: 100
|
||
}).then(res => {
|
||
if (res.code == 0) {
|
||
if (res.data) {
|
||
this.rlueList = res.data.records
|
||
this.rlueIndex = this.rlueList.findIndex(item => item.inviteAwardId === this
|
||
.inviteAwardId)
|
||
this.getActivityList()
|
||
}
|
||
}
|
||
})
|
||
},
|
||
//获取邀请人列表
|
||
getActivityList() {
|
||
this.$Request.getT('/app/invite/selectInviteUserListByUserId').then(res => {
|
||
if (res.code == 0) {
|
||
if (res.data) {
|
||
this.nowPeopNum = res.data.length
|
||
|
||
this.getPeopList = res.data
|
||
this.getUserPeopNum = Number(this.getPeopNum) - Number(res.data.length)
|
||
}
|
||
}
|
||
})
|
||
},
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.assist {
|
||
background-color: #F22947;
|
||
position: relative;
|
||
}
|
||
|
||
page {
|
||
background-color: #f8cfc3;
|
||
}
|
||
|
||
.left_viewimage {
|
||
width: 50rpx;
|
||
height: 50rpx;
|
||
position: absolute;
|
||
top: 60rpx;
|
||
left: 40rpx;
|
||
z-index: 99;
|
||
}
|
||
|
||
.bg {
|
||
width: 100%;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
}
|
||
|
||
.content {
|
||
width: 100%;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
}
|
||
|
||
.content-title {
|
||
width: 100%;
|
||
text-align: center;
|
||
font-size: 78rpx;
|
||
font-weight: bold;
|
||
color: #FFF4E4;
|
||
text-shadow: 0rpx 6rpx 9rpx rgba(118, 4, 17, 0.26);
|
||
margin-top: 40rpx;
|
||
}
|
||
|
||
.content-titles {
|
||
width: 100%;
|
||
text-align: center;
|
||
font-size: 100rpx;
|
||
font-weight: bold;
|
||
color: #FFF4E4;
|
||
text-shadow: 0rpx 6rpx 9rpx rgba(118, 4, 17, 0.26);
|
||
}
|
||
|
||
.content-hy {
|
||
width: 100%;
|
||
height: auto;
|
||
margin-top: 40rpx;
|
||
|
||
.content-hy-box {
|
||
padding: 40rpx 0;
|
||
width: 615rpx;
|
||
height: 100%;
|
||
background: linear-gradient(0deg, #FBEDCC 0%, #FFF7F0 98%);
|
||
border-radius: 48rpx 48rpx 24rpx 24rpx;
|
||
|
||
.content-hy-box-title1 {
|
||
width: 90%;
|
||
margin: 0 auto;
|
||
text-align: center;
|
||
color: #F22947;
|
||
font-size: 30rpx;
|
||
font-weight: bold;
|
||
|
||
span {
|
||
font-size: 54rpx;
|
||
}
|
||
}
|
||
|
||
.content-hy-box-title2 {
|
||
width: 100%;
|
||
text-align: center;
|
||
margin-top: 16rpx;
|
||
color: #F22947;
|
||
font-size: 26rpx;
|
||
}
|
||
|
||
.content-hy-box-peop {
|
||
width: 550rpx;
|
||
height: auto;
|
||
background: linear-gradient(45deg, #f27e8c 0%, #fa3653 100%);
|
||
border-radius: 24rpx;
|
||
margin: 0 auto;
|
||
margin-top: 20rpx;
|
||
padding: 30rpx 0;
|
||
}
|
||
|
||
.content-hy-box-peop-my {
|
||
width: 100%;
|
||
height: 90rpx;
|
||
|
||
image {
|
||
width: 90rpx;
|
||
height: 90rpx;
|
||
border-radius: 50%;
|
||
}
|
||
}
|
||
|
||
.content-hy-box-peop-title {
|
||
width: 100%;
|
||
text-align: center;
|
||
margin-top: 20rpx;
|
||
color: #ffffff;
|
||
font-weight: 500;
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.content-hy-box-peop-list {
|
||
width: calc(100% - 60rpx);
|
||
margin: 0 auto;
|
||
margin-top: 30rpx;
|
||
}
|
||
|
||
.content-hy-box-peop-list-i {
|
||
width: 32%;
|
||
flex-direction: column;
|
||
margin-bottom: 20rpx;
|
||
font-size: 24rpx;
|
||
|
||
.content-hy-box-peop-list-ia {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
border-radius: 50%;
|
||
border: 1px dashed #ffffff;
|
||
}
|
||
|
||
.content-hy-box-peop-list-it {
|
||
color: #ffffff;
|
||
margin-top: 14rpx;
|
||
}
|
||
}
|
||
|
||
.content-hy-box-schedule {
|
||
width: 550rpx;
|
||
margin: 0 auto;
|
||
margin-top: 26rpx;
|
||
}
|
||
|
||
.content-hy-box-schedulet {
|
||
width: 550rpx;
|
||
margin: 0 auto;
|
||
font-size: 22rpx;
|
||
|
||
span {
|
||
color: #F22A48;
|
||
font-size: 26rpx;
|
||
}
|
||
}
|
||
|
||
.content-hy-box-peops {
|
||
width: 550rpx;
|
||
margin: 0 auto;
|
||
margin-top: 26rpx;
|
||
height: 50rpx;
|
||
}
|
||
|
||
.content-hy-box-peopss {
|
||
width: 100%;
|
||
height: 100%;
|
||
|
||
.content-hy-box-peopssi {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.content-hy-box-peopssis {
|
||
width: 90%;
|
||
// width: 300rpx;
|
||
height: 100%;
|
||
background-color: green;
|
||
padding: 0 10rpx;
|
||
background: linear-gradient(-90deg, #FCE9A4 0%, #FDFBD4 100%);
|
||
border-radius: 25rpx;
|
||
|
||
image {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.content-hy-box-peopssit {
|
||
width: 80%;
|
||
font-size: 24rpx;
|
||
margin-left: 10rpx;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.content-btn {
|
||
width: 666rpx;
|
||
height: 98rpx;
|
||
background: linear-gradient(-90deg, #F22C49 0%, #FF7989 100%);
|
||
border: 1px solid #FFD4CF;
|
||
border-radius: 49rpx;
|
||
margin: 0 auto;
|
||
margin-top: 50rpx;
|
||
color: #FFFFFF;
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.content-lc {
|
||
width: 666rpx;
|
||
height: 344rpx;
|
||
background-color: #FFFFFF;
|
||
border-radius: 24rpx;
|
||
margin: 0 auto;
|
||
margin-top: 50rpx;
|
||
|
||
.content-lc-title {
|
||
width: 434rpx;
|
||
height: 80rpx;
|
||
background: linear-gradient(90deg, #FF969B 0%, #FF345B 100%);
|
||
border-radius: 0rpx 0rpx 50rpx 50rpx;
|
||
margin: 0 auto;
|
||
color: #FFFFFF;
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.content-lc-ls {
|
||
width: calc(100% - 40rpx);
|
||
margin: 0 auto;
|
||
margin-top: 50rpx;
|
||
|
||
.content-lc-ls-ir {
|
||
width: 26rpx;
|
||
height: 16rpx;
|
||
margin-top: 50rpx;
|
||
}
|
||
|
||
.content-lc-ls-i {
|
||
width: 100rpx;
|
||
|
||
image {
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.content-lc-ls-it {
|
||
width: 100%;
|
||
text-align: center;
|
||
font-size: 26rpx;
|
||
color: #9C2A2A;
|
||
font-weight: bold;
|
||
margin-top: 14rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.content-rule {
|
||
width: 666rpx;
|
||
height: auto;
|
||
background-color: #FFFFFF;
|
||
border-radius: 24rpx;
|
||
margin: 0 auto;
|
||
margin-top: 50rpx;
|
||
|
||
.content-rule-title {
|
||
width: 434rpx;
|
||
height: 80rpx;
|
||
background: linear-gradient(90deg, #FF969B 0%, #FF345B 100%);
|
||
border-radius: 0rpx 0rpx 50rpx 50rpx;
|
||
margin: 0 auto;
|
||
color: #FFFFFF;
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.content-rule-list {
|
||
width: 626rpx;
|
||
height: auto;
|
||
margin: 0 auto;
|
||
margin-top: 40rpx;
|
||
padding-bottom: 20rpx;
|
||
|
||
}
|
||
|
||
.content-rule-list-i {
|
||
padding: 18rpx 12rpx;
|
||
background-color: #FFF8E6;
|
||
border-radius: 14rpx;
|
||
margin-bottom: 30rpx;
|
||
|
||
image {
|
||
width: 106rpx;
|
||
height: 82rpx;
|
||
}
|
||
|
||
.content-rule-list-i-r {
|
||
margin-left: 18rpx;
|
||
|
||
.content-rule-list-i-r-t {
|
||
color: #9C2A2A;
|
||
font-size: 30rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.content-rule-list-i-r-b {
|
||
font-size: 24rpx;
|
||
color: #9C2A2A;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |