894 lines
22 KiB
Vue
894 lines
22 KiB
Vue
<template>
|
||
<view class="content">
|
||
<swiper class="swiper" :autoplay="true" :circular="true">
|
||
<swiper-item class="swiper-item" v-for="(item,index) in bannerList" :key="index">
|
||
<image :src="'https://xyb.wlkjwl.cn/'+item.imageUrl" mode="aspectFill"></image>
|
||
<view class="text" v-if="item.title">
|
||
<view class="title">{{item.title}}</view>
|
||
<view class="name">{{item.remark}}</view>
|
||
</view>
|
||
</swiper-item>
|
||
<!-- <swiper-item class="swiper-item">
|
||
<ad unit-id="adunit-edf130ab482cfb31"></ad>
|
||
</swiper-item> -->
|
||
</swiper>
|
||
<view class="input-wrap" @tap="goSearch">
|
||
<input type="text" placeholder="输入爱豆全名搜索">
|
||
<image src="../../static/r.png" mode="aspectFit"></image>
|
||
</view>
|
||
<view class="end-text">
|
||
离{{endText}}结束还剩余：<uni-countdown :showColon="false" :splitorColor="'#5680E6'" :color="'#5680E6'" :day="time.days" :hour="time.hours" :minute="time.minutes" :second="time.seconds"></uni-countdown>
|
||
</view>
|
||
<view class="ranking">
|
||
<view class="ranking-left-text">
|
||
<view @tap="init(index+1)" :key="index" v-for="(item,index) in rankingText" :class="index == rankingZero?'active':''" class="text-item">{{item}}</view>
|
||
</view>
|
||
<view class="ranking-right-text">
|
||
<view @tap="previewImage">{{endText}}规则</view>
|
||
</view>
|
||
<view class="ranking-top">
|
||
<view class="ranking-top-left" v-if="ranklist.length>0">
|
||
<image :src="'https://xyb.wlkjwl.cn/'+ranklist[1].head" mode="aspectFill"></image>
|
||
<image class="h2" src="../../static/h2.png" mode="aspectFit"></image>
|
||
<view class="bgv">{{ranklist[1].rankIngNum}}</view>
|
||
<view class="center-bottom">
|
||
<view class="tickname">{{ranklist[1].name}}</view>
|
||
<view class="ticket">{{ranklist[1].much}}</view>
|
||
<view @tap="goSupports(ranklist[1])" class="goSupport">去打榜</view>
|
||
</view>
|
||
</view>
|
||
<view class="ranking-top-center" v-if="ranklist.length>0">
|
||
<image :src="'https://xyb.wlkjwl.cn/'+ranklist[0].head" mode="aspectFill"></image>
|
||
<image class="h1" src="../../static/h1.png" mode="aspectFit"></image>
|
||
<view class="bgv">{{ranklist[0].rankIngNum}}</view>
|
||
<view class="center-bottom">
|
||
<view class="tickname">{{ranklist[0].name}}</view>
|
||
<view class="ticket">{{ranklist[0].much}}</view>
|
||
<view @tap="goSupports(ranklist[0])" class="goSupport">去打榜</view>
|
||
</view>
|
||
</view>
|
||
<view class="ranking-top-right" v-if="ranklist.length>0">
|
||
<image :src="'https://xyb.wlkjwl.cn/'+ranklist[2].head" mode="aspectFill"></image>
|
||
<image class="h3" src="../../static/h3.png" mode="aspectFit"></image>
|
||
<view class="bgv">{{ranklist[2].rankIngNum}}</view>
|
||
<view class="center-bottom">
|
||
<view class="tickname">{{ranklist[2].name}}</view>
|
||
<view class="ticket">{{ranklist[2].much}}</view>
|
||
<view @tap="goSupports(ranklist[2])" class="goSupport">去打榜</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="ranking-list">
|
||
<view class="ranking-list-item" v-for="(item,index) in nRanklist" :key="index">
|
||
<view>{{(index+4)}}</view><!-- {{item.rankIngNum}} -->
|
||
<view><image :src="'https://xyb.wlkjwl.cn/'+item.head" mode="aspectFill"></image></view>
|
||
<view>{{item.name}}</view>
|
||
<view>{{item.much}}</view>
|
||
<view @tap="goSupports(item)">去打榜</view>
|
||
</view>
|
||
</view>
|
||
<!-- <button class="getUserInfo" open-type="getUserInfo" @getuserinfo="wxGetUserInfo" withCredentials="true">微信登录</button> -->
|
||
</view>
|
||
<view class="show-wrap" v-if="isLogin">
|
||
<view class="show-model">
|
||
<view class="title">未登录</view>
|
||
<view class="content">请允许微信授权登录</view>
|
||
<view class="btn-group">
|
||
<button @tap="hideIsLogin" class="button-default">取消</button>
|
||
<button class="button-default button-blue getUserInfo" open-type="getUserInfo" @getuserinfo="wxGetUserInfo" withCredentials="true">确认</button>
|
||
</view>
|
||
</view>
|
||
<view class="show-model-mask">
|
||
</view>
|
||
</view>
|
||
<view class="show-mask-last show-wrap" v-if="isShow">
|
||
<view class="mask-last-top">
|
||
<image :src="'https://xyb.wlkjwl.cn/'+isShowObj.image" mode="scaleToFill"></image>
|
||
<view class="text" v-if="isShowObj.remark">
|
||
{{isShowObj.remark}}
|
||
</view>
|
||
<view @tap="hideIsShow" class="btn-bottom"><image src="../../static/cha.png" mode="scaleToFill"></image></view>
|
||
</view>
|
||
<view @tap="hideIsShow" class="show-model-mask">
|
||
</view>
|
||
</view>
|
||
<uniPopup ref="hongbao">
|
||
<view class="hongbao">
|
||
<image src="/static/106.png"></image>
|
||
<view class="title">超级奖励发放</view>
|
||
<view class="button" v-if="lingqu" @click="lq">领取</view>
|
||
<view v-else>
|
||
<view class="text">今天赠送给你的每日权益票</view>
|
||
<view class="piao">{{piao}}票</view>
|
||
</view>
|
||
|
||
</view>
|
||
</uniPopup>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
import { mapState,mapMutations } from 'vuex';
|
||
import uniCountdown from '@/components/uni-countdown/uni-countdown.vue'
|
||
import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue'
|
||
import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
|
||
import uniPopupShare from '@/components/uni-popup/uni-popup-share.vue'
|
||
import uniPopup from '@/components/uni-popup/uni-popup.vue'
|
||
export default {
|
||
components:{
|
||
uniCountdown,
|
||
uniPopupMessage,
|
||
uniPopupDialog,
|
||
uniPopupShare,
|
||
uniPopup,
|
||
},
|
||
computed: {
|
||
...mapState(['hasLogin','userInfo']),
|
||
nRanklist(){
|
||
let list = this.ranklist;
|
||
return list.slice(3,list.length-1)
|
||
}
|
||
// newRankList(){
|
||
// let list = this.ranklist;
|
||
// return list.splice(3,list.length-1)
|
||
// }
|
||
},
|
||
data() {
|
||
return {
|
||
endText:"周榜",
|
||
rankingText:['周榜','月榜'],
|
||
rankingZero:0,
|
||
isLogin:false,
|
||
isShow:false,
|
||
isShowObj:'',
|
||
bannerList:'',//banner
|
||
time:'',//time
|
||
// maskUrl:'../../static/head.png',
|
||
rulesImgs:'',
|
||
page:1,
|
||
ranklist:[],
|
||
isLoad:true,
|
||
imgPath:'',
|
||
// nRanklist:[]
|
||
lingqu:true,
|
||
piao: '',
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.imgPath = this.path;
|
||
this.getKeep();
|
||
let userInfo = uni.getStorageSync('userInfo') || '';
|
||
if (userInfo.token) {
|
||
this.getContent();
|
||
}
|
||
},
|
||
onShow() {
|
||
this.init(1);
|
||
},
|
||
onPullDownRefresh() {
|
||
console.log('refresh');
|
||
setTimeout(()=>{
|
||
this.init(this.rankingZero + 1)
|
||
uni.stopPullDownRefresh();
|
||
}, 1500);
|
||
},
|
||
onReachBottom(){
|
||
console.log('到底了')
|
||
if(this.isLoad){
|
||
this.getDataList(this.rankingZero + 1)
|
||
}
|
||
},
|
||
methods: {
|
||
// 领取
|
||
lq(){
|
||
this.request({
|
||
url:this.path + "/api/xyb/star/getMuch",
|
||
data:{
|
||
typeId: 12,
|
||
much: this.piao,
|
||
},
|
||
success:(res)=>{
|
||
let d = res.data;
|
||
if(d.code == 0){
|
||
this.lingqu = false;
|
||
}
|
||
}
|
||
})
|
||
},
|
||
...mapMutations(['login']),
|
||
getContent(){
|
||
uni.getClipboardData({
|
||
success: (res)=> {
|
||
console.log(res.data);
|
||
try{
|
||
let str = res.data.match(/邀请码(\S*)进入/)[1];
|
||
this.request({
|
||
url:this.path+'/api/xyb/banner/addChoujiangOrderByYqm',
|
||
data:{
|
||
yaoqingma:str
|
||
},
|
||
success:(res)=>{
|
||
let d = res.data;
|
||
if(d.code == 0){
|
||
uni.showToast({
|
||
title:'奖励抽奖次数+1',
|
||
icon:"none"
|
||
})
|
||
|
||
}
|
||
}
|
||
})
|
||
|
||
}catch(e){
|
||
//TODO handle the exception
|
||
}
|
||
|
||
}
|
||
});
|
||
|
||
},
|
||
init(type){
|
||
this.defaultDataList();
|
||
this.judgeShowHong();
|
||
//周榜
|
||
if(type == 1){
|
||
this.rankingZero = 0;
|
||
this.getBanner(1);
|
||
this.getLeaveTime(1);
|
||
// this.getRulesImgs(1);
|
||
this.getDataList(1);
|
||
this.endText = this.rankingText[this.rankingZero];
|
||
this.getKeepWeekAndMoth(3)
|
||
}else{
|
||
//月榜
|
||
this.rankingZero = 1;
|
||
this.getBanner(2)
|
||
this.getLeaveTime(2);
|
||
// this.getRulesImgs(2)
|
||
this.getDataList(2);
|
||
this.endText = this.rankingText[this.rankingZero];
|
||
this.getKeepWeekAndMoth(4)
|
||
}
|
||
},
|
||
judgeShowHong() {
|
||
let that = this;
|
||
that.request({
|
||
url:that.path + "/api/xyb/star/isHaveRedPackgeToday",
|
||
method:"GET",
|
||
success(res){
|
||
if(res.data.data.code == 1) {
|
||
that.piao = res.data.data.num;
|
||
that.$refs.hongbao.open();
|
||
}
|
||
}
|
||
})
|
||
},
|
||
getKeepWeekAndMoth(id){
|
||
this.request({
|
||
url:this.path+'/api/xyb/banner/list',
|
||
data:{
|
||
typeId:id
|
||
},
|
||
success:(res)=>{
|
||
let d = res.data;
|
||
console.log(d)
|
||
if(d.code == 0){
|
||
let url = d.rows[0].imageUrl;
|
||
this.rulesImgs = 'https://xyb.wlkjwl.cn/'+url
|
||
}
|
||
}
|
||
});
|
||
},
|
||
defaultDataList(){
|
||
this.page = 1;
|
||
this.ranklist = [];
|
||
this.isLoad = true;
|
||
},
|
||
previewImage: function(e) {
|
||
var current = this.rulesImgs;
|
||
console.log(current)
|
||
uni.previewImage({
|
||
current: current,
|
||
urls: [this.rulesImgs]
|
||
})
|
||
},
|
||
getKeep(){
|
||
this.request({
|
||
url:this.path+'/api/xyb/banner/lockping',
|
||
success:(res)=>{
|
||
let d = res.data;
|
||
if(d.data && d.data.image){
|
||
this.isShow = true;
|
||
this.isShowObj = d.data;
|
||
}
|
||
}
|
||
})
|
||
},
|
||
getDataList(type){
|
||
//api/xyb/star/weekRankingList
|
||
if(!this.isLoad) return
|
||
let path = type == 1?this.path+'/api/xyb/banner/weekRankingList':this.path+'/api/xyb/banner/monthRankingList';
|
||
|
||
this.request({
|
||
url:path,
|
||
data:{
|
||
typeId:1,
|
||
pageNum:this.page,
|
||
pageSize:20
|
||
},
|
||
success:(res)=>{
|
||
let d = res.data;
|
||
if(d.rows.length>0){
|
||
this.page++;
|
||
this.ranklist = this.ranklist.concat(d.rows);
|
||
if(d.rows.length<20){
|
||
this.isLoad = false;
|
||
}
|
||
}else{
|
||
this.isLoad = false;
|
||
}
|
||
}
|
||
})
|
||
},
|
||
getLeaveTime(type){
|
||
this.request({
|
||
url:this.path+'/api/xyb/banner/timeLeave',
|
||
data:{
|
||
typeId:type
|
||
},
|
||
success:(res)=>{
|
||
let d = res.data;
|
||
let t = this.timeSaveChange(d.data/1000)
|
||
this.time = t;
|
||
}
|
||
})
|
||
},
|
||
getBanner(type){
|
||
this.request({
|
||
url:this.path+'/api/xyb/banner/list',
|
||
data:{
|
||
typeId:type
|
||
},
|
||
success:(res)=>{
|
||
let d = res.data;
|
||
this.bannerList = d.rows;
|
||
}
|
||
})
|
||
},
|
||
getRulesImgs(type){
|
||
if(type == 1){
|
||
this.rulesImgs = '/static/z.png'
|
||
}else{
|
||
this.rulesImgs = '/static/y.png'
|
||
}
|
||
},
|
||
timeSaveChange(shijiancha){
|
||
var days = Math.floor(shijiancha / 60 / 60 / 24);
|
||
var daysRound = Math.floor(days);
|
||
var hours = Math.floor(shijiancha / 60 / 60 - (24 * daysRound));
|
||
var hoursRound = Math.floor(hours);
|
||
var minutes = Math.floor(shijiancha /60 - (24 * 60 * daysRound) - (60 * hoursRound));
|
||
var minutesRound = Math.floor(minutes);
|
||
var seconds = Math.floor(shijiancha - (24 * 60 * 60 * daysRound) - (60 * 60 * hoursRound) - (60 * minutesRound));
|
||
return {
|
||
days:days,
|
||
hours:hours,
|
||
minutes:minutes,
|
||
seconds:seconds
|
||
}
|
||
},
|
||
wxGetUserInfo(){
|
||
//api/xyb/wechat/wxLogin
|
||
let that = this;
|
||
uni.showLoading({
|
||
title: '加载中'
|
||
});
|
||
uni.login({
|
||
provider: 'weixin',
|
||
success: loginRes => {//获取用户code
|
||
// if(!that.hasLogin){
|
||
//授权获取用户信息
|
||
uni.getUserInfo({
|
||
provider: 'weixin',
|
||
success: function(infoRes) {
|
||
console.log(infoRes)
|
||
that.request({
|
||
url: that.path + '/api/xyb/wechat/wxLogin',
|
||
data: {
|
||
code: loginRes.code,
|
||
sex:infoRes.userInfo.gender,
|
||
head:infoRes.userInfo.avatarUrl,
|
||
nick:infoRes.userInfo.nickName,
|
||
encryptedData:infoRes.encryptedData,
|
||
iv:infoRes.iv
|
||
},
|
||
success: function(res) {
|
||
let d = res.data;
|
||
if(d.code == 0){
|
||
uni.hideLoading()
|
||
infoRes.userInfo.token = d.data.openid;
|
||
that.login(infoRes.userInfo)
|
||
that.isLogin = false;
|
||
that.getContent();
|
||
}else{
|
||
uni.showToast({
|
||
title: '登录失败！服务器状态码'+d.code,
|
||
duration: 2000,
|
||
icon: 'none'
|
||
});
|
||
}
|
||
}
|
||
});
|
||
|
||
}
|
||
});
|
||
|
||
// }
|
||
}
|
||
});
|
||
},
|
||
hideIsShow(){
|
||
this.isShow = false;
|
||
},
|
||
hideIsLogin(){
|
||
this.isLogin = false;
|
||
},
|
||
goSupports(item){
|
||
if(!this.hasLogin){
|
||
this.isLogin = true;
|
||
}else{
|
||
uni.navigateTo({
|
||
url: '/pages/support/support?id='+item.id
|
||
});
|
||
}
|
||
},
|
||
goAdd(){
|
||
uni.navigateTo({
|
||
url: '/pages/ad/ad'
|
||
});
|
||
},
|
||
goSearch(){
|
||
uni.navigateTo({
|
||
url: '/pages/search/search'
|
||
});
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page,.content{
|
||
background-color: #F6F6F6;
|
||
}
|
||
.show-mask-last{
|
||
.mask-last-top{
|
||
z-index: 11;
|
||
position: fixed;
|
||
top: 7.5vh;
|
||
left: 10vw;
|
||
box-sizing: border-box;
|
||
background-color: #FFFFFF;
|
||
.text{
|
||
width: 50rpx;
|
||
margin: 0 10rpx;
|
||
font-size: 50rpx;
|
||
height: 100%;
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
color: #FFFFFF;
|
||
font-family: "楷体";
|
||
display: flex;
|
||
align-items: center;
|
||
text-align: center;
|
||
}
|
||
.btn-bottom{
|
||
position: absolute;
|
||
bottom: -100rpx;
|
||
left: 50%;
|
||
width: 78rpx;
|
||
height: 78rpx;
|
||
background-color: #FFFFFF;
|
||
border-radius: 50%;
|
||
margin-left: -40rpx;
|
||
image{
|
||
width: 82rpx;
|
||
height: 82rpx;
|
||
margin: -1rpx;
|
||
}
|
||
}
|
||
&>image{
|
||
width: 80vw;
|
||
height: calc(85vh - 80rpx);
|
||
float: left;
|
||
}
|
||
}
|
||
}
|
||
.show-wrap{
|
||
border-radius: 10rpx;
|
||
.show-model-mask{
|
||
width: 100vw;
|
||
height: 100vh;
|
||
z-index: 10;
|
||
background-color: rgba(0,0,0,0.3);
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
}
|
||
.show-model{
|
||
z-index: 11;
|
||
position: fixed;
|
||
top: 50%;
|
||
left: 50%;
|
||
width: 80vw;
|
||
height: auto;
|
||
margin:-150rpx -40vw ;
|
||
box-sizing: border-box;
|
||
background-color: #FFFFFF;
|
||
.title{
|
||
background-color: #4A67D6;
|
||
color: #FFFFFF;
|
||
text-align: center;
|
||
height: 80rpx;
|
||
line-height: 80rpx;
|
||
font-size: 30rpx;
|
||
}
|
||
.content{
|
||
background-color: #FFFFFF;
|
||
font-size: 28rpx;
|
||
padding: 15rpx;
|
||
box-sizing: border-box;
|
||
text-align: center;
|
||
height: 100rpx;
|
||
line-height: 70rpx;
|
||
}
|
||
.btn-group{
|
||
display: flex;
|
||
align-items: center;
|
||
text-align: center;
|
||
box-shadow: 0 -4rpx 4rpx #F2F2F2;
|
||
padding: 0 30rpx;
|
||
.button-blue{
|
||
color: #4A67D6;
|
||
}
|
||
.button-default{
|
||
background-color: #FFFFFF;
|
||
height: 80rpx;
|
||
line-height: 80rpx;
|
||
text-align: center;
|
||
padding: 0 30rpx;
|
||
font-size: 28rpx;
|
||
flex: 1;
|
||
}
|
||
button{
|
||
width: auto;
|
||
height: auto;
|
||
border: none;
|
||
padding: 0;
|
||
margin: 0;
|
||
border-radius: 0;
|
||
line-height: inherit;
|
||
background-color: #FFFFFF;
|
||
display: inline-block;
|
||
}
|
||
button::after{display: none;}
|
||
button + button{
|
||
border-left: 1px solid #F2F2F2;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.content{
|
||
.ranking{
|
||
position: relative;
|
||
.ranking-right-text{
|
||
position: absolute;
|
||
right: 0;
|
||
top: -80rpx;
|
||
font-size: 30rpx;
|
||
padding: 0 30rpx;
|
||
color: #5680E6;
|
||
margin: 10rpx;
|
||
}
|
||
.ranking-left-text{
|
||
position: absolute;
|
||
left: 0;
|
||
top: -80rpx;
|
||
font-size: 30rpx;
|
||
color: grey;
|
||
display: flex;
|
||
padding: 0 30rpx;
|
||
.text-item{
|
||
margin: 10rpx;
|
||
padding-right: 20rpx;
|
||
}
|
||
.text-item:nth-child(1){
|
||
border-right: 1px solid grey;
|
||
}
|
||
.active{
|
||
color: #5680E6;
|
||
font-weight: 700;
|
||
}
|
||
}
|
||
.ranking-list{
|
||
background-color: #FFFFFF;
|
||
margin: 0 20rpx 30rpx;
|
||
box-shadow: 0 10rpx 10rpx #F1E2D5;
|
||
padding:50rpx 30rpx 15rpx;
|
||
border-bottom-left-radius: 30rpx;
|
||
border-bottom-right-radius: 30rpx;
|
||
.ranking-list-item{
|
||
display: flex;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
margin-bottom: 20rpx;
|
||
view:nth-child(1){
|
||
font-size: 28rpx;
|
||
}
|
||
view:nth-child(2){
|
||
image{
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
border-radius: 50%;
|
||
}
|
||
}
|
||
view:nth-child(3){
|
||
font-size: 28rpx;
|
||
width: 160rpx;
|
||
}
|
||
view:nth-child(4){
|
||
font-size: 30rpx;
|
||
color: #FF8802;
|
||
}
|
||
view:nth-child(5){
|
||
height: 50rpx;
|
||
line-height: 50rpx;
|
||
border-radius: 30rpx;
|
||
color: #FFFFFF;
|
||
font-size: 26rpx;
|
||
font-weight: 500;
|
||
width: 120rpx;
|
||
text-align: center;
|
||
background-color: #5680E6;
|
||
box-shadow: 0 5rpx 5rpx #9599B5;
|
||
}
|
||
}
|
||
}
|
||
.ranking-top{
|
||
background-color: #5680E6;
|
||
margin: 100rpx 30rpx 0;
|
||
padding: 50rpx 30rpx;
|
||
min-height: 430rpx;
|
||
border-top-left-radius: 18rpx;
|
||
border-top-right-radius: 18rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
box-sizing: border-box;
|
||
.ranking-top-right,.ranking-top-center,.ranking-top-left{
|
||
text-align: center;
|
||
position: relative;
|
||
box-sizing: border-box;
|
||
font-size: 26rpx;
|
||
margin-bottom: 100rpx;
|
||
flex: 1;
|
||
.center-bottom{
|
||
position: absolute;
|
||
bottom: -100rpx;
|
||
left: 0;
|
||
width: 100%;
|
||
}
|
||
.tickname{
|
||
font-size: 28rpx;
|
||
color: #FFFFFF;
|
||
margin-top: 20rpx;
|
||
}
|
||
.ticket{
|
||
color: #FFF100;
|
||
font-size: 28rpx;
|
||
margin: 10rpx 0;
|
||
}
|
||
.goSupport{
|
||
width: 120rpx;
|
||
height: 50rpx;
|
||
margin: 0 auto;
|
||
line-height: 50rpx;
|
||
border-radius: 30rpx;
|
||
border: 1px solid #8D6BE1;
|
||
color: #844B13;
|
||
background-color: #FFFFFF;
|
||
font-size: 22rpx;
|
||
box-shadow: 0 10rpx 10rpx #9599B5;
|
||
}
|
||
.h1,.h2,.h3{
|
||
position: absolute;
|
||
top: -18rpx;
|
||
right: 0;
|
||
width: 50rpx;
|
||
height: 50rpx;
|
||
border: 0;
|
||
transform:rotate(40deg);
|
||
}
|
||
.bgv{
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
line-height: 40rpx;
|
||
border-radius: 50%;
|
||
font-size: 24rpx;
|
||
position: absolute;
|
||
color: #854B07;
|
||
}
|
||
image{
|
||
width: 160rpx;
|
||
height: 160rpx;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
}
|
||
.ranking-top-left{
|
||
image{
|
||
border: 6rpx solid #CCFEFF;
|
||
}
|
||
.bgv{
|
||
top: 170rpx;
|
||
left: 50%;
|
||
background-color: #CCFEFF;
|
||
margin: -20rpx;
|
||
}
|
||
}
|
||
.ranking-top-center{
|
||
top: -120rpx;
|
||
border: 18rpx solid;
|
||
border-color: #5680E6;
|
||
background-color: #5680E6;
|
||
border-radius: 50%;
|
||
.center-bottom{
|
||
bottom: -160rpx;
|
||
}
|
||
.h1{
|
||
top: -22rpx;
|
||
right: 0;
|
||
}
|
||
image{
|
||
border: 6rpx solid #FFEB44;
|
||
width: 180rpx;
|
||
height: 180rpx;
|
||
}
|
||
.bgv{
|
||
top: 190rpx;
|
||
left: 50%;
|
||
margin:-20rpx;
|
||
background-color: #FFEB44;
|
||
}
|
||
}
|
||
.ranking-top-right{
|
||
image{
|
||
border: 6rpx solid #D7FFCC;
|
||
}
|
||
.bgv{
|
||
background-color: #D7FFCC;
|
||
top: 170rpx;
|
||
left: 50%;
|
||
background-color: #D7FFCC;
|
||
margin: -20rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.swiper{
|
||
width: 100%;
|
||
height:340rpx;
|
||
.swiper-item{
|
||
position: relative;
|
||
ad{
|
||
height: 340rpx!important;
|
||
}
|
||
image{
|
||
width: 100%;
|
||
height: 340rpx;
|
||
}
|
||
.text{
|
||
position: absolute;
|
||
top: 30rpx;
|
||
left: 30rpx;
|
||
.title{
|
||
color: #FF558A;
|
||
font-size: 36rpx;
|
||
font-family: "楷体";
|
||
font-weight: 700;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
.name{
|
||
color: #FFFFFF;
|
||
padding:8rpx 15rpx;
|
||
font-size: 32rpx;
|
||
font-weight: 700;
|
||
font-family: '楷体';
|
||
background-color: #5680E6;
|
||
text-align: center;
|
||
// border-radius: 30rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.end-text{
|
||
display: flex;
|
||
font-size: 26rpx;
|
||
height: 50rpx;
|
||
line-height: 50rpx;
|
||
margin: 0 30rpx;
|
||
color: #5680E6;
|
||
}
|
||
.input-wrap{
|
||
font-size: 28rpx;
|
||
background: #fff;
|
||
border: 1px solid #5680E6;
|
||
border-radius: 30px;
|
||
position: relative;
|
||
display: flex;
|
||
padding: 10rpx 20rpx;
|
||
margin: 30rpx 30rpx 15rpx;
|
||
input{
|
||
height: 40rpx;
|
||
line-height: 40rpx;
|
||
flex: 1;
|
||
font-size: 28rpx;
|
||
}
|
||
image{
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
}
|
||
}
|
||
.input-wrap::after{
|
||
content:'';
|
||
position: absolute;
|
||
top: -2px; bottom: -2px;
|
||
left: -2px; right: -2px;
|
||
background: linear-gradient(135deg,#E7DCA1, #0AA6E0);
|
||
border-radius: 30px;
|
||
content: '';
|
||
z-index: -1;
|
||
}
|
||
}
|
||
.hongbao{
|
||
width: 550rpx;
|
||
height: 678rpx;
|
||
position: relative;
|
||
>image{
|
||
width: 100%;
|
||
height: 100%;
|
||
position: absolute;
|
||
z-index: -1;
|
||
}
|
||
.title{
|
||
font-size: 36rpx;
|
||
color: #fff;
|
||
padding-top: 300rpx;
|
||
text-align: center;
|
||
}
|
||
.button{
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
background-color: #ED9C00;
|
||
border-radius: 50%;
|
||
font-size: 34rpx;
|
||
color: #333;
|
||
text-align: center;
|
||
line-height: 100rpx;
|
||
margin: 60rpx auto;
|
||
|
||
}
|
||
.text{
|
||
font-size: 30rpx;
|
||
text-align: center;
|
||
color: #fff;
|
||
margin-top: 53rpx;
|
||
padding: 0 60rpx;
|
||
}
|
||
.piao{
|
||
font-size: 63rpx;
|
||
color: #fff;
|
||
margin-top: 66rpx;
|
||
text-align: center;
|
||
}
|
||
}
|
||
</style>
|