Skip to content

梁建民 / h5

Go to a project
Commit 6850ccb1 by 施宇
Options

1

parent ae91e156
Expand all
Inline Side-by-side
Showing with 875 additions and 4 deletions
src/api/index.js
......@@ -445,7 +445,23 @@ export const apis = {
/**
* 获取banner
*/
getsamplebanner: url + '/getsamplebanner'
getsamplebanner: url + '/getsamplebanner',
/**
* 示波器页面访问数据统计
*/
invited:urlApi+'/activity/invited',
/**
* 示波器页面广告文字轮播数据
*/
rotation:urlApi+'/activity/rotation',
/**
* 示波器页面奖品信息
*/
yaoHaoYouJP:urlApi+'/activity/yaoHaoYouJP',
/**
* 示波器页面获取示波器商品id
*/
getYaoHaoYouGoodId:urlApi+'/activity/getYaoHaoYouGoodId',
}
......@@ -754,5 +770,21 @@ export const services = {
},
getsamplebanner(params){
return axios.post(apis.getsamplebanner, params)
},
oscilloscopeinvited(params){
return axios.post(apis.invited,params)
},
getBannerData(params){
return axios.post(apis.rotation,params)
},
yaoHaoYouJP(params){
return axios.post(apis.yaoHaoYouJP ,params)
},
getYaoHaoYouGoodId(params){
return axios.get(apis.getYaoHaoYouGoodId, {
params: {
...params
}
})
}
};
\ No newline at end of file
src/assets/css/oscilloscope/oscilloscope.css 0 → 100644
.oscilloscope {
padding-top: 1.067rem;
padding-bottom: 1.513rem;
}
.oscilloscope .top-users {
height: 1.067rem;
background-color: #5267ff;
font-size: 15px;
color: #fff;
position: fixed;
top: 44px;
left: 0;
right: 0;
overflow: hidden;
z-index: 2;
}
.oscilloscope .top-users ul {
position: absolute;
top: 0;
left: 0;
right: 0;
}
.oscilloscope .top-users ul.animate-ul {
top: -1.067rem;
transition: all 0.5s;
}
.oscilloscope .top-users ul li {
height: 1.067rem;
line-height: 1.067rem;
text-align: center;
}
.oscilloscope .oscilloscope-wrapper .banner-div {
height: 5.333rem;
}
.oscilloscope .oscilloscope-wrapper .banner-div .my-swipe .swiper-img {
height: 5.333rem;
width: 100%;
}
.oscilloscope .oscilloscope-wrapper .prize-div {
padding: 0.667rem 0.4rem 0;
background-color: #edf6ff;
}
.oscilloscope .oscilloscope-wrapper .prize-div .title {
margin: 0 auto;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.oscilloscope .oscilloscope-wrapper .prize-div .title.title1 {
width: 7.28rem;
height: 0.827rem;
background-image: url('../../images/oscilloscope/title1.png');
margin-bottom: 0.21rem;
}
.oscilloscope .oscilloscope-wrapper .prize-div .title.title2 {
width: 6.6rem;
height: 0.84rem;
background-image: url('../../images/oscilloscope/title2.png');
margin-bottom: 0.21rem;
margin-top: 0.853rem;
}
.oscilloscope .oscilloscope-wrapper .prize-div .title.title3 {
width: 6.613rem;
height: 0.827rem;
background-image: url('../../images/oscilloscope/title3.png');
margin-bottom: 0.533rem;
margin-top: 0.853rem;
}
.oscilloscope .oscilloscope-wrapper .prize-div .prize-items-wrapper {
background-color: #ffffff;
box-shadow: 0rem 0rem 0.24rem 0rem rgba(131, 189, 246, 0.31);
border-radius: 0.053rem;
}
.oscilloscope .oscilloscope-wrapper .prize-div .prize-items-wrapper .prize-title {
text-align: center;
padding: 0.333rem 0 0.373rem;
font-size: 15px;
color: #333333;
}
.oscilloscope .oscilloscope-wrapper .prize-div .prize-items-wrapper .prize-items {
text-align: center;
}
.oscilloscope .oscilloscope-wrapper .prize-div .prize-items-wrapper .prize-items .prize-item {
margin-bottom: 1.04rem;
}
.oscilloscope .oscilloscope-wrapper .prize-div .prize-items-wrapper .prize-items .prize-item:nth-child(even) {
margin-left: 1.773rem;
}
.oscilloscope .oscilloscope-wrapper .prize-div .prize-items-wrapper .prize-items .prize-item .item-top {
box-sizing: border-box;
width: 2.933rem;
height: 2.187rem;
border-radius: 0.053rem;
border: solid 0.08rem #bcf3f9;
text-align: center;
line-height: 2.187rem;
position: relative;
}
.oscilloscope .oscilloscope-wrapper .prize-div .prize-items-wrapper .prize-items .prize-item .item-top img {
width: 2.427rem;
height: 1.747rem;
margin-top: 0.12rem;
}
.oscilloscope .oscilloscope-wrapper .prize-div .prize-items-wrapper .prize-items .prize-item .item-top .text {
display: block;
width: 0.827rem;
height: 0.827rem;
background-color: #5267ff;
border-radius: 50% 50%;
color: #fff;
text-align: center;
line-height: 0.827rem;
font-size: 18px;
position: absolute;
right: -0.28rem;
top: -0.253rem;
}
.oscilloscope .oscilloscope-wrapper .prize-div .prize-items-wrapper .prize-items .prize-item .item-bottom {
position: relative;
}
.oscilloscope .oscilloscope-wrapper .prize-div .prize-items-wrapper .prize-items .prize-item .item-bottom .arrow-bottom {
display: block;
width: 0;
height: 0;
border-right: 0.313rem solid transparent;
border-left: 0.313rem solid transparent;
border-top: 0.52rem solid #bcf3f9;
}
.oscilloscope .oscilloscope-wrapper .prize-div .prize-items-wrapper .prize-items .prize-item .item-bottom .num {
position: absolute;
font-size: 14px;
color: #fff;
padding: 0.1rem 0.25rem;
min-width: 2rem;
max-width: 2.5rem;
background-color: #cfa972;
border-radius: 0.053rem;
top: -0.2rem;
left: 1rem;
white-space: nowrap;
text-align: center;
box-sizing: border-box;
text-overflow: ellipsis;
overflow: hidden;
}
.oscilloscope .oscilloscope-wrapper .prize-div .reward-div {
box-shadow: 0rem 0rem 0.24rem 0rem rgba(131, 189, 246, 0.31);
border-radius: 0.053rem;
font-size: 14px;
color: #333;
padding: 0.093rem;
background-color: #fff;
}
.oscilloscope .oscilloscope-wrapper .prize-div .reward-div .reward-div-header {
padding: 0.2rem 0;
background-color: #fffbf4;
}
.oscilloscope .oscilloscope-wrapper .prize-div .reward-div .reward-div-header div {
width: 33.33%;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.oscilloscope .oscilloscope-wrapper .prize-div .reward-div .reward-datas {
padding: 0.2rem 0;
}
.oscilloscope .oscilloscope-wrapper .prize-div .reward-div .reward-datas .reward-data div {
width: 33.33%;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 0.387rem 0;
box-sizing: border-box;
}
.oscilloscope .oscilloscope-wrapper .prize-div .reward-div .reward-datas .reward-data div.no-data {
width: 100%;
}
.oscilloscope .oscilloscope-wrapper .prize-div .rule-datas {
font-size: 12px;
color: #333;
padding-bottom: 1.333rem;
}
.oscilloscope .oscilloscope-wrapper .prize-div .rule-datas p {
line-height: 0.801rem;
}
.oscilloscope .oscilloscope-wrapper .prize-div .rule-datas p span {
color: #3247e1;
}
.oscilloscope .oscilloscope-wrapper .footer-btns {
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
.oscilloscope .oscilloscope-wrapper .footer-btns .btn {
width: 50%;
height: 1.513rem;
text-align: center;
line-height: 1.513rem;
font-size: 20px;
color: #fff;
}
.oscilloscope .oscilloscope-wrapper .footer-btns .btn.gm-btn {
background-color: #869fff;
}
.oscilloscope .oscilloscope-wrapper .footer-btns .btn.fx-btn {
background-color: #3c5fe3;
}
src/assets/css/oscilloscope/oscilloscope.less 0 → 100644
.oscilloscope {
padding-top: 1.067rem;
padding-bottom: 1.513rem;
.top-users {
height: 1.067rem;
background-color: #5267ff;
font-size: 15px;
color: #fff;
position: fixed;
top: 44px;
left: 0;
right: 0;
overflow: hidden;
z-index: 2;
ul {
position: absolute;
top: 0;
left: 0;
right: 0;
&.animate-ul{
top:-1.067rem;
transition: all 0.5s;
}
li {
height: 1.067rem;
line-height: 1.067rem;
text-align: center;
}
}
}
.oscilloscope-wrapper {
.banner-div {
height: 5.333rem;
.my-swipe {
.swiper-img{
height: 5.333rem;
width:100%;
}
}
}
.prize-div {
padding: 0.667rem .4rem 0 ;
background-color: #edf6ff;
.title{
margin:0 auto;
&.title1{
width: 7.28rem;
height: 0.827rem;
background-image: url('../../images/oscilloscope/title1.png');
margin-bottom: .21rem;
}
&.title2{
width: 6.6rem;
height: 0.84rem;
background-image: url('../../images/oscilloscope/title2.png');
margin-bottom: .21rem;
margin-top: .853rem;
}
&.title3{
width: 6.613rem;
height: 0.827rem;
background-image: url('../../images/oscilloscope/title3.png');
margin-bottom: .533rem;
margin-top: .853rem;
}
background-repeat: no-repeat;
background-size: 100% 100%;
}
.prize-items-wrapper {
background-color: #ffffff;
box-shadow: 0rem 0rem 0.24rem 0rem rgba(131, 189, 246, 0.31);
border-radius: 0.053rem;
.prize-title {
text-align: center;
padding: 0.333rem 0 0.373rem;
font-size: 15px;
color: #333333;
}
.prize-items {
text-align: center;
.prize-item {
margin-bottom: 1.04rem;
&:nth-child(even){
margin-left: 1.773rem;
}
.item-top {
box-sizing: border-box;
width: 2.933rem;
height: 2.187rem;
border-radius: 0.053rem;
border: solid 0.08rem #bcf3f9;
text-align: center;
line-height: 2.187rem;
position: relative;
img {
width: 2.427rem;
height: 1.747rem;
margin-top: .12rem;
}
.text {
display: block;
width: 0.827rem;
height: 0.827rem;
background-color: #5267ff;
border-radius: 50% 50%;
color: #fff;
text-align: center;
line-height: 0.827rem;
font-size: 18px;
position: absolute;
right: -0.28rem;
top: -0.253rem;
}
}
.item-bottom {
position: relative;
.arrow-bottom {
display: block;
width: 0;
height: 0;
border-right: 0.313rem solid transparent;
border-left: 0.313rem solid transparent;
border-top: 0.52rem solid #bcf3f9;
}
.num{
position: absolute;
font-size: 14px;
color:#fff;
padding:.1rem .25rem;
min-width: 2rem;
max-width: 2.5rem;
background-color: #cfa972;
border-radius: 0.053rem;
top:-.2rem;
left:1rem;
white-space: nowrap;
text-align: center;
box-sizing: border-box;
text-overflow: ellipsis;
overflow: hidden;
}
}
}
}
}
.reward-div{
box-shadow: 0rem 0rem 0.24rem 0rem
rgba(131, 189, 246, 0.31);
border-radius: 0.053rem;
font-size: 14px;
color:#333;
padding:.093rem;
background-color: #fff;
.reward-div-header{
padding:.2rem 0;
background-color: #fffbf4;
div{
width:33.33%;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
.reward-datas{
padding:.2rem 0;
.reward-data{
div{
width:33.33%;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding:.387rem 0 ;
box-sizing: border-box;
&.no-data{
width:100%;
}
}
}
}
}
.rule-datas{
font-size: 12px;
color:#333;
padding-bottom: 1.333rem;
p{
line-height: 0.801rem;
span{
color:#3247e1 ;
}
}
}
}
.footer-btns{
position: fixed;
bottom: 0;
left:0;
right:0;
.btn{
width: 50%;
height:1.513rem;
text-align: center;
line-height: 1.513rem;
font-size: 20px;
color:#fff;
&.gm-btn{
background-color: #869fff;
}
&.fx-btn{
background-color: #3c5fe3;
}
}
}
}
}
\ No newline at end of file
src/main.js
......@@ -87,6 +87,8 @@ Services.wxaccess(params).then((res) => {
//路由页面回跳处理 mate里面参数 back：true 开启登录态回跳
router.beforeEach((to, from, next) => {
const title = to.meta && to.meta.title;
const noLoginArr = ['/oscilloscope'];//不需要跳转到登入的页面
let path = to.path;
if (title) {
document.title = title;
}
......@@ -94,7 +96,7 @@ router.beforeEach((to, from, next) => {
var backurl_g = to.meta.back || "";
if (backurl_g) {
var loginpta = Util.isLogin() ? true : false;
if (!loginpta) {
if (!loginpta&&(noLoginArr.indexOf(path)==-1)) {
window.location.href = '/v3/login?referer=' + encodeURIComponent(window.location.href);
} else {
next();
......
src/router.js
......@@ -46,7 +46,7 @@ const sampleapply = resolve => require(['@/views/sample/sampleapply'], resolve);
const Special = resolve => require(['@/views/special/Index'], resolve);
const Risk = resolve => require(['@/views/risk/Index'], resolve);
const RiskSuccess = resolve => require(['@/views/risk/Success'], resolve);
const oscilloscope = resolve => require(['@/views/oscilloscope/Index'], resolve);
Vue.use(Router);
......@@ -363,6 +363,15 @@ const routes = [{
}
},
{
path: '/oscilloscope',
name: "oscilloscope",
component: oscilloscope,
meta: {
title: '示波器',
back: true
}
},
{
path: '/creditest',
component: Risk,
meta: {
......
src/store/modules/oscilloscope/index.js 0 → 100644
import Vue from 'vue'
import {
Toast
} from 'vant';
import {
services as Services
} from '../../../api/index'
import Util from "../../../util";
Vue.use(Toast);
const state = {
bannerData: [],
isLodingFinishData: false,
prizeData: {},
goodId: "",
}
const mutations = {
getBannerData(state, payload) {
state.bannerData = payload.data
},
changeBannerData(state) {
let data = state.bannerData;
data.push(data[0]);
data.shift();
state.bannerData = data;
},
changeIsLodingFinishData(state, payload) {
state.isLodingFinishData = payload.bool
},
yaoHaoYouJP(state, payload) {
state.prizeData = payload.obj
},
changeGoodId(state, payload) {
state.goodId = payload.id
}
}
const actions = {
oscilloscopeinvited({
commit
}, payload) {
let obj = {
...payload.data,
};
let params = Util.getParams(obj);
Services.oscilloscopeinvited(params).then((res) => {
}).catch(function (err) {
});
},
getbannerdata({
commit
}, payload) {
let obj = {
...payload.data,
};
commit({
type: 'changeIsLodingFinishData',
bool: false
})
let params = Util.getParams(obj);
Services.getBannerData(params).then((res) => {
let data = res.data;
if (data.err_code == 0) {
commit({
type: 'getBannerData',
data: data.data
});
commit({
type: 'changeIsLodingFinishData',
bool: true
})
}
}).catch(function (err) {
});
},
yaoHaoYouJP({
commit
}, payload) {
Toast.loading({
message: '加载中...',
forbidClick: true,
loadingType: 'spinner'
});
let obj = {
...payload.data
};
let params = Util.getParams(obj);
Services.yaoHaoYouJP(params).then((res) => {
Toast.clear();
let data = res.data;
if (data.err_code == 0) {
commit({
type: 'yaoHaoYouJP',
obj: data.data,
});
}
}).catch(function (err) {
Toast.clear();
});
},
getYaoHaoYouGoodId({
commit
}, payload) {
let obj = {
...payload.data,
};
commit({
type: 'changeGoodId',
id: ''
})
Services.getYaoHaoYouGoodId(obj).then((res) => {
let data = res.data;
if (data.err_code == 0) {
commit({
type: 'changeGoodId',
id: data.data.id
});
}else {
Toast({
message: data.err_msg,
duration: 3000
});
}
}).catch(function (err) {
});
},
}
export default {
state,
actions,
mutations
}
src/store/store.js
......@@ -30,6 +30,7 @@ import download from './modules/download/index'
import sample from './modules/sample/index'
import sampleapply from './modules/sample/sampleapply'
import special from './modules/special/index'
import oscilloscope from './modules/oscilloscope/index'
Vue.use(Vuex)
......@@ -65,6 +66,7 @@ export default new Vuex.Store({
download,
sample,
sampleapply,
special
special,
oscilloscope
}
})
src/views/oscilloscope/Index.vue 0 → 100644
<template>
<section class="oscilloscope">
<Header :title="title" :meaushow="meaushow" :bgcolor="bgcolor"></Header>
<wxShare :link="shareUrl" :isSbq="true" :isLogin="false" title="DS1104示波器年中惊爆价3299，速抢！" desc="示波器年中狂欢，ZDS1104仅需3299，邀请好友还能拿奖励〜" imgUrl="http://img.ichunt.com/images/ichunt/self_sample/sbq-icon.jpg"></wxShare>
<div class="top-users">
<ul :class="{'animate-ul':animate}">
<li v-for="item in bannerData">{{item}}</li>
</ul>
</div>
<div class="oscilloscope-wrapper">
<div class="banner-div">
<van-swipe class="my-swipe" :autoplay="3000" :show-indicators="false">
<van-swipe-item>
<img src="../../assets/images/oscilloscope/banner1.jpg" alt="" class="swiper-img">
</van-swipe-item>
<van-swipe-item>
<img src="../../assets/images/oscilloscope/banner1.jpg" alt="" class="swiper-img">
</van-swipe-item>
</van-swipe>
</div>
<div class="prize-div">
<h3 class="title1 title"></h3>
<div class="prize-items-wrapper">
<h3 class="prize-title">好友成功购买ZDS1104台数</h3>
<div class="prize-items lbBox">
<div class="prize-item lineBlock">
<div class="item-top">
<img src="../../assets/images/oscilloscope/30.jpg" alt />
<span class="text">奖</span>
</div>
<div class="item-bottom">
<span class="arrow-bottom"></span>
<p class="num">1台</p>
</div>
</div>
<div class="prize-item lineBlock">
<div class="item-top">
<img src="../../assets/images/oscilloscope/100.jpg" alt />
<span class="text">奖</span>
</div>
<div class="item-bottom">
<span class="arrow-bottom"></span>
<p class="num">2-4台</p>
</div>
</div>
<div class="prize-item lineBlock">
<div class="item-top">
<img src="../../assets/images/oscilloscope/300.jpg" alt />
<span class="text">奖</span>
</div>
<div class="item-bottom">
<span class="arrow-bottom"></span>
<p class="num">5-9台</p>
</div>
</div>
<div class="prize-item lineBlock">
<div class="item-top">
<img src="../../assets/images/oscilloscope/800.jpg" alt />
<span class="text">奖</span>
</div>
<div class="item-bottom">
<span class="arrow-bottom"></span>
<p class="num">10台及以上</p>
</div>
</div>
</div>
</div>
<h3 class="title2 title"></h3>
<div class="reward-div">
<div class="reward-div-header clr">
<div class="fl">邀请好友数</div>
<div class="fl">好友购买台数</div>
<div class="fl">奖励</div>
</div>
<div class="reward-datas">
<div class="reward-data clr">
<template v-if="prizeData.goodsNums||prizeData.peopleNums||prizeData.prize">
<div class="fl">{{prizeData.peopleNums}}人</div>
<div class="fl">{{prizeData.goodsNums}}台</div>
<div class="fl">{{prizeData.prize}}元京东卡</div>
</template>
<template v-else>
<div class="no-data">您还没有相关奖品数据</div>
</template>
</div>
</div>
</div>
<h3 class="title3 title"></h3>
<div class="rule-datas">
<p>1，活动时间：2020年6月15日-6月28日；</p>
<p>2，京东E卡将在活动结束<span>7个</span>工作日内分发，卡号卡密将直接发送到用户注册猎芯网账号【会员中心】-<span>【我的消息】</span>；</p>
<p>3，在法律允许范围内，本活动最终解释权归猎芯网所有，详情可致电4008-755-881。</p>
</div>
</div>
<div class="footer-btns clr">
<div class="btn fl gm-btn" @click="buyFun">立即购买</div>
<div class="btn fl fx-btn" v-shareMask="'sbq'">立即分享</div>
</div>
</div>
</section>
</template>
<script>
import Header from "@/views/common/Header.vue";
import util from "../../util/index";
import {mapState,mapMutations } from "vuex";
import wxShare from "@/views/common/wxShare.vue";
import Vue from 'vue';
import {Swipe, SwipeItem} from 'vant';
Vue.use(Swipe).use(SwipeItem)
export default {
name: "oscilloscope",
data() {
return {
invitedId:"",
title: "",
meaushow: true,
bgcolor: "#fafafa",
animate:false,
shareUrl: window.location.origin + window.location.pathname + ((util.getCookie("Yo4teW_uid"))?('#/oscilloscope?invitedId='+util.getCookie("Yo4teW_uid")):"#/oscilloscope")
};
},
created(){
console.log(this.shareUrl)
let {invitedId} = this.$route.query;
if(invitedId){
SetCookie('sbqinvitedId',invitedId,1);
this.invitedId=invitedId
}else{
getCookie('sbqinvitedId')&&( this.invitedId = getCookie('sbqinvitedId'));
}
this.oscilloscopeinvited();
this.getBannerData();
this.yaoHaoYouJP();
this.getYaoHaoYouGoodId()
},
computed: {
...mapState({
bannerData: state => state.oscilloscope.bannerData,
isLodingFinishData:state => state.oscilloscope.isLodingFinishData,
prizeData:state => state.oscilloscope.prizeData,
goodId:state => state.oscilloscope.goodId
})
},
watch:{
isLodingFinishData(now){
let me = this
if(now){
setInterval(this.showMarquee, 2000)
}
}
},
methods:{
...mapMutations([
'changeBannerData'
]),
getYaoHaoYouGoodId:function(){
//获取商品id
this.$store.dispatch({
type: "getYaoHaoYouGoodId",
data: {
"type_id":1
}
});
},
yaoHaoYouJP:function(){
//获取奖品信息
this.$store.dispatch({
type: "yaoHaoYouJP"
});
},
showMarquee: function () {
        this.animate = true;
setTimeout(()=>{
this.changeBannerData();
this.animate = false;
     },500)},
oscilloscopeinvited() {
let userId = util.getCookie("Yo4teW_uid");
let data = {};
this.invitedId&&(data['invited_uid '] = this.invitedId);
userId&&(data['user_id '] = userId);
//统计邀请的人数和页面访问统计
this.$store.dispatch({
type: "oscilloscopeinvited",
data: {
...data
}
});
},
getBannerData:function(){
//获取广告文字轮播
this.$store.dispatch({
type: "getbannerdata",
data: {
'is_liexin':1
}
});
},
buyFun:function(){
//立即购买
this.judgeLogin(()=>{
if(!this.goodId){
return
}
let datax = {
id: this.goodId,
num:1,
buy: 1
};
this.$store.dispatch({
type: "addGoods",
data: { datax: datax },
invitedId:this.invitedId
});
})
},
judgeLogin(callback) {
if (util.isLogin()==1) {
//已登入
callback()
} else {
//未登入
window.location.href = '/v3/login?referer=' + encodeURIComponent(window.location.href)+'&ptag=oscilloscope';
}
},
},
components: {
Header,
wxShare
}
};
</script>
<style scoped>
@import "../../assets/css/oscilloscope/oscilloscope.css";
</style>
\ No newline at end of file
view/css/chunk-feca4acc.519384fc.css 0 → 100644
.oscilloscope{padding-top:1.067rem;padding-bottom:1.513rem}.oscilloscope .top-users{height:1.067rem;background-color:#5267ff;font-size:15px;color:#fff;position:fixed;top:44px;left:0;right:0;overflow:hidden;z-index:2}.oscilloscope .top-users ul{position:absolute;top:0;left:0;right:0}.oscilloscope .top-users ul.animate-ul{top:-1.067rem;-webkit-transition:all .5s;transition:all .5s}.oscilloscope .top-users ul li{height:1.067rem;line-height:1.067rem;text-align:center}.oscilloscope .oscilloscope-wrapper .banner-div{height:5.333rem}.oscilloscope .oscilloscope-wrapper .banner-div .my-swipe .swiper-img{height:5.333rem;width:100%}.oscilloscope .oscilloscope-wrapper .prize-div{padding:.667rem .4rem 0;background-color:#edf6ff}.oscilloscope .oscilloscope-wrapper .prize-div .title{margin:0 auto;background-repeat:no-repeat;background-size:100% 100%}.oscilloscope .oscilloscope-wrapper .prize-div .title.title1{width:7.28rem;height:.827rem;background-image:url(../img/title1.2f5905c1.png);margin-bottom:.21rem}.oscilloscope .oscilloscope-wrapper .prize-div .title.title2{width:6.6rem;height:.84rem;background-image:url(../img/title2.30382b4e.png);margin-bottom:.21rem;margin-top:.853rem}.oscilloscope .oscilloscope-wrapper .prize-div .title.title3{width:6.613rem;height:.827rem;background-image:url(../img/title3.5795accf.png);margin-bottom:.533rem;margin-top:.853rem}.oscilloscope .oscilloscope-wrapper .prize-div .prize-items-wrapper{background-color:#fff;-webkit-box-shadow:0 0 .24rem 0 rgba(131,189,246,.31);box-shadow:0 0 .24rem 0 rgba(131,189,246,.31);border-radius:.053rem}.oscilloscope .oscilloscope-wrapper .prize-div .prize-items-wrapper .prize-title{text-align:center;padding:.333rem 0 .373rem;font-size:15px;color:#333}.oscilloscope .oscilloscope-wrapper .prize-div .prize-items-wrapper .prize-items{text-align:center}.oscilloscope .oscilloscope-wrapper .prize-div .prize-items-wrapper .prize-items .prize-item{margin-bottom:1.04rem}.oscilloscope .oscilloscope-wrapper .prize-div .prize-items-wrapper .prize-items .prize-item:nth-child(2n){margin-left:1.773rem}.oscilloscope .oscilloscope-wrapper .prize-div .prize-items-wrapper .prize-items .prize-item .item-top{-webkit-box-sizing:border-box;box-sizing:border-box;width:2.933rem;height:2.187rem;border-radius:.053rem;border:.08rem solid #bcf3f9;text-align:center;line-height:2.187rem;position:relative}.oscilloscope .oscilloscope-wrapper .prize-div .prize-items-wrapper .prize-items .prize-item .item-top img{width:2.427rem;height:1.747rem;margin-top:.12rem}.oscilloscope .oscilloscope-wrapper .prize-div .prize-items-wrapper .prize-items .prize-item .item-top .text{display:block;width:.827rem;height:.827rem;background-color:#5267ff;border-radius:50% 50%;color:#fff;text-align:center;line-height:.827rem;font-size:18px;position:absolute;right:-.28rem;top:-.253rem}.oscilloscope .oscilloscope-wrapper .prize-div .prize-items-wrapper .prize-items .prize-item .item-bottom{position:relative}.oscilloscope .oscilloscope-wrapper .prize-div .prize-items-wrapper .prize-items .prize-item .item-bottom .arrow-bottom{display:block;width:0;height:0;border-right:.313rem solid transparent;border-left:.313rem solid transparent;border-top:.52rem solid #bcf3f9}.oscilloscope .oscilloscope-wrapper .prize-div .prize-items-wrapper .prize-items .prize-item .item-bottom .num{position:absolute;font-size:14px;color:#fff;padding:.1rem .25rem;min-width:2rem;max-width:2.5rem;background-color:#cfa972;border-radius:.053rem;top:-.2rem;left:1rem;white-space:nowrap;text-align:center;-webkit-box-sizing:border-box;box-sizing:border-box;text-overflow:ellipsis;overflow:hidden}.oscilloscope .oscilloscope-wrapper .prize-div .reward-div{-webkit-box-shadow:0 0 .24rem 0 rgba(131,189,246,.31);box-shadow:0 0 .24rem 0 rgba(131,189,246,.31);border-radius:.053rem;font-size:14px;color:#333;padding:.093rem;background-color:#fff}.oscilloscope .oscilloscope-wrapper .prize-div .reward-div .reward-div-header{padding:.2rem 0;background-color:#fffbf4}.oscilloscope .oscilloscope-wrapper .prize-div .reward-div .reward-div-header div{width:33.33%;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.oscilloscope .oscilloscope-wrapper .prize-div .reward-div .reward-datas{padding:.2rem 0}.oscilloscope .oscilloscope-wrapper .prize-div .reward-div .reward-datas .reward-data div{width:33.33%;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:.387rem 0;-webkit-box-sizing:border-box;box-sizing:border-box}.oscilloscope .oscilloscope-wrapper .prize-div .reward-div .reward-datas .reward-data div.no-data{width:100%}.oscilloscope .oscilloscope-wrapper .prize-div .rule-datas{font-size:12px;color:#333;padding-bottom:1.333rem}.oscilloscope .oscilloscope-wrapper .prize-div .rule-datas p{line-height:.801rem}.oscilloscope .oscilloscope-wrapper .prize-div .rule-datas p span{color:#3247e1}.oscilloscope .oscilloscope-wrapper .footer-btns{position:fixed;bottom:0;left:0;right:0}.oscilloscope .oscilloscope-wrapper .footer-btns .btn{width:50%;height:1.513rem;text-align:center;line-height:1.513rem;font-size:20px;color:#fff}.oscilloscope .oscilloscope-wrapper .footer-btns .btn.gm-btn{background-color:#869fff}.oscilloscope .oscilloscope-wrapper .footer-btns .btn.fx-btn{background-color:#3c5fe3}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment