Skip to content

M
mr-julyedu
Commit 9787909a by zhanghaozhe
Options

2020周年庆

parent 8b94577e
Showing with 1430 additions and 0 deletions
src/components/activity/2020-717/index.js 0 → 100644
import React, { Component } from 'react';
import { debounce, groupBy, isEmpty } from "lodash";
import { http } from "@/utils"
import { Toast } from "antd-mobile";
import { Link } from "react-router-dom";
import { connect } from "react-redux";
import './index.scss'
class Anniversary2020 extends Component {
nav = null
defaultAvatar = 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/avatar_20191104.png'
stages = {
1: '基础',
2: '进阶',
3: '高阶',
4: '拓展',
}
stageParams = ['one', 'two', 'three', 'four']
state = {
navs: [
{
text: '一分拼团',
id: '#group',
},
{
text: '抽华为P40Pro+',
id: '#lottery',
},
{
text: '组队答题',
id: '#group-answer',
},
{
text: '免费试听',
id: '#audition',
},
{
text: '冰点秒杀',
id: '#stage-course',
},
],
titleImages: [
require('./images/title_1.png'),
require('./images/title_2.png'),
require('./images/title_3.png'),
require('./images/title_4.png'),
require('./images/title_5.png'),
],
rankIcons: [
require('./images/rank1.png'),
require('./images/rank2.png'),
require('./images/rank3.png'),
],
navActive: 0,
sectionsPosition: [],
auditions: [],
auditionShowAll: false,
group: [],
groupShowAll: false,
stageCourses: [],
activityData: {},
team: {},
}
componentDidMount() {
console.log(this.props.user)
this.getActivityStage()
this.getTeam()
Promise.all([
this.getAuditionCourses(),
this.getGroupCourses(),
this.getStageCourses('zero'),
])
.then(() => {
this.bindNavAction()
})
}
componentDidUpdate(prevProps, prevState) {
if (prevState.navActive !== this.state.navActive) {
}
}
getActivityStage = () => {
http.get(`${API.home}/activity/anniversary/activityStage`)
.then(res => {
const {code, msg, data} = res.data
if (code === 200) {
this.setState({
activityData: data,
});
} else {
Toast.info(msg)
}
})
}
getAuditionCourses = () => {
http.get(`${API.home}/activity/anniversary/big_course`)
.then(res => {
const {code, msg, data} = res.data
if (code === 200) {
this.setState({
auditions: data,
});
} else {
Toast.info(msg)
}
return 1
})
}
getGroupCourses = () => {
http.get(`${API.home}/activity/anniversary/point_course`)
.then(res => {
const {code, msg, data} = res.data
if (code === 200) {
this.setState({
group: data,
});
} else {
Toast.info(msg)
}
})
}
getStageCourses = (key) => {
http.get(`${API.home}/activity/anniversary/four_stage/${key}`)
.then(res => {
const {code, msg, data} = res.data
if (code === 200) {
this.setState(state => {
if (key === 'zero') {
return {
stageCourses: groupBy(data, item => {
return item.stage
}),
}
} else {
const index = this.stageParams.findIndex(item => item === key) + 1
state.stageCourses[index] = data
return {
stageCourses: state.stageCourses,
}
}
})
} else {
Toast.info(msg)
}
})
}
getTeam = () => {
http.get(`${API.home}/activity/anniversary/teamInfo`)
.then(res => {
const {code, msg, data} = res.data
if (code === 200) {
this.setState({
team: data,
});
} else {
Toast.info(msg)
}
})
}
componentWillUnmount() {
document.removeEventListener('scroll', this.setNavActive)
}
bindNavAction = () => {
document.removeEventListener('scroll', this.setNavActive)
this.setNavActive()
this.setState({
sectionsPosition: this.state.navs.map(item => {
const el = document.querySelector(item.id)
return {
top: el.offsetTop - 50,
height: el.offsetHeight,
}
}),
}, () => {
document.addEventListener('scroll', this.setNavActive)
})
}
setNavActive = debounce(() => {
const {navActive, sectionsPosition} = this.state
const pageY = window.pageYOffset
for (let i = navActive; i < sectionsPosition.length; i++) {
const section = sectionsPosition[i]
const nextSection = sectionsPosition[i + 1]
const prevSection = i > 0 && sectionsPosition[i - 1]
if (pageY > section.top + section.height && nextSection) {
if (pageY < nextSection.top || pageY < nextSection.top + nextSection.height) {
this.setState({
navActive: i + 1,
});
break
}
} else {
if (pageY < section.top + section.height && prevSection && pageY < prevSection.top + prevSection.height) {
this.setState({
navActive: i - 1 ? i - 1 : 0,
})
break
}
}
}
}, 30)
showActiveNav = () => {
}
render() {
const {
navs,
navActive,
titleImages,
rankIcons,
auditions,
auditionShowAll,
group,
groupShowAll,
stageCourses,
activityData,
team,
} = this.state
const {user, history} = this.props
const _auditions = auditionShowAll && auditions.length ? auditions : auditions.slice(0, 4)
const _group = groupShowAll && group.length ? group : group.slice(0, 4)
return (
<div className={'anniversary-2020'}>
<div className="banner">
<img src="" alt=""/>
</div>
<nav ref={el => this.nav = el}>
<ul>
{
navs.map((item, index) => {
return <li key={index} className={index === navActive ? 'active' : ''}>
<a href={item.id}>{item.text}</a>
</li>
})
}
</ul>
</nav>
<section id={'group'} className="group block">
<h2 className="block-title"
style={{background: `url(${titleImages[0]}) no-repeat`, backgroundSize: 'contain'}}></h2>
<ul className={'course-container'}>
{
!!_group.length && _group.map((item, index) => {
let Button
if (activityData.stage === 1) {
Button = <button className={'unavailable'}>7月15日开始</button>
} else if (activityData.stage === 2) {
switch (item.is_assemble) {
case 0:
Button = <button className="main"><Link to={`/detail?id=${item.course_id}`}>立即拼团</Link></button>
break
case 1:
Button = <button className="main"><Link to={`/detail?id=${item.course_id}`}>继续拼团</Link></button>
break
default:
Button =
<button className={'study'}><Link to={`/play?id=${item.v_course_id}`}>开始学习</Link></button>
}
} else {
Button = <button className={'unavailable'}>活动已结束</button>
}
return <li className={'course'} key={index} onClick={(e) => {
let nodeName = e.target.nodeName.toLowerCase()
if (nodeName !== 'a' || nodeName !== 'button') {
history.push(`/detail?id=${item.course_id}`)
}
}}>
<div className="cover">
<img src={item.image_name}
alt=""/>
</div>
<div className="info">
<div className="title">{item.course_title}</div>
<div className="des">{item.simpledescription}</div>
{
item.is_buy
? <div className="purchased">已购买</div>
: <div className="prices">
<span>¥{item.price1}</span>
<span>¥{item.price0}</span>
</div>
}
<div className="btn">
{Button}
</div>
</div>
</li>
})
}
{
group.length > 4 &&
<li>
<button className={'show-more'} onClick={() => {
this.setState({
groupShowAll: true,
})
}}>查看更多
</button>
</li>
}
</ul>
</section>
<section id={'lottery'} className={'lottery block'}>
<div className="block-title"
style={{background: `url(${titleImages[1]}) no-repeat`, backgroundSize: 'contain'}}></div>
<div className="rule">
<a href="javascript:void(0);">规则</a>
</div>
<div className="prize-container">
<div className={'h-bar'}></div>
<div className={'h-bar'}></div>
<div className={'v-bar'}></div>
<div className={'v-bar'}></div>
<ul className="prizes">
{
Array(9).fill('a').map((item, index) => {
return <li key={index}>
{
index !== 4
? <div className={'prize'}>
<img src="" alt=""/>
</div>
: <div className={'draw'}>
<div>抽奖</div>
<div>剩余0次机会</div>
</div>
}
</li>
})
}
</ul>
</div>
<div className="content">
<div className={'operations'}>
<a href="javascript:void(0);">收货信息</a>
<a href="javascript:void(0);">中奖纪录</a>
</div>
<div className="lottery-info">
<div className={'title'}><i></i>如何获取更多抽奖机会？</div>
<ul className={'rules'}>
<li><span className={'index'}>1</span>每日签到可获得1次抽奖机会</li>
<li><span className={'index'}>2</span>每日签到可获得1次抽奖机会</li>
</ul>
</div>
</div>
</section>
<section id={'group-answer'} className={'group-answer block'}>
<div className="block-title" style={{background: `url(${titleImages[2]})`, backgroundSize: 'contain'}}></div>
<div style={{textAlign: 'center', marginBottom: '10px'}}>
<a className="rule-btn" href="javascript:void(0);">规则</a>
</div>
<div className="content">
<div className="team">
<div className="func">
<i className={'my-team-icon'}></i>
<div className="summary">
<span>共<span className={'count'}>{team.people_num}</span>人</span>
<span>排名<span className={'count'}>{team.ranking}</span></span>
</div>
<ul>
{
!!team.team_info && team.team_info.length && team.team_info.map((item, index) => {
return <li key={index}>
<img
src="https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/avatar_20191104.png"
alt=""/>
</li>
})
}
<li className={'more'}>更多</li>
</ul>
<div className="invite">
<button className={'invite'}>邀请好友加入队伍</button>
</div>
</div>
<div className="des">
<div className="title">组队答题抽奖</div>
<ol>
<li>
1. 邀请好友加入队伍，好友答对题可获得一次抽奖机会；
</li>
<li>
2. 每3个队员答对题，你可以获得N次抽奖机会，N=1，2，3（上限）。
</li>
</ol>
</div>
</div>
<div className="exercise">
<div className="func">
<div className="btn">
<button><i></i>开始练习</button>
</div>
<div className="chance">今日剩余<span>2</span>次</div>
</div>
<div className="des">
<div className="title">练一练</div>
<ol>
<li>1. 每日可练习 2 次 。每次 1 道题，从题库中随机抽取；</li>
<li> 2. 答对可增加1次抽奖机会。</li>
</ol>
</div>
</div>
<div className="rank-list">
<div className="title">测试排行榜</div>
<div className="description">仅展示前50名，队员越多、用时越短排名越靠前</div>
<div className="prize-des">
TOP1：VIP年会员（3299元）+300元京东购物卡;<br/>
TOP2：VIP年会员（3299元）+200元京东购物卡;<br/>
TOP3：VIP年会员（3299元）;<br/>
TOP4-6：【七月任一线上课】课程;<br/>
TOP7-10：纸质书籍（统计学、西瓜书、百面机器学习任选1本）。
</div>
<table>
<thead>
<tr>
<th>名次</th>
<th>队长</th>
<th>队员</th>
<th>奖品</th>
</tr>
</thead>
<tbody>
{
Array(5).fill('a').map((item, index) => {
return <tr key={index}>
<td>
{
index < 3 ? <img src={rankIcons[index]} alt=""/> : index + 1
}
</td>
<td>
<img
src="https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/avatar_20191104.png"
alt="" className={'avatar'}/>
限制宽度比例限制宽度比例
</td>
<td>723</td>
<td>最多就显示这么多几个字吧</td>
</tr>
})
}
</tbody>
</table>
<div className="btn">
<button>查看更多</button>
</div>
</div>
</div>
</section>
<section id={'audition'} className={'audition'}>
<div className="block-title"
style={{background: `url(${titleImages[3]}) no-repeat`, backgroundSize: 'contain'}}></div>
<ul className="course-container">
{
!!_auditions.length && _auditions.map((item, index) => {
return <li className={'course'} key={index} onClick={(e) => {
if (e.target.nodeName.toLowerCase() !== 'a') {
history.push(`/detail?id=${item.course_id}`)
}
}}>
<div className="cover">
<img src={item.image_name}
alt=""/>
</div>
<div className="info">
<div className="title">{item.course_title}</div>
<div className="des">{item.simpledescription}</div>
{
item.is_buy
? <div className="purchased">已购买</div>
: <div className="prices">
<span>¥{item.price1}</span>
<span>¥{item.price0}</span>
</div>
}
<div className="btn">
{
item.is_buy
?
<button className={'study-btn'}><Link to={`/play?id=${item.v_course_id}`}>开始学习</Link></button>
: <button className="audition-btn"><a
href="https://q.url.cn/AB8aue?_type=wpa&qidian=true">免费试听</a></button>
}
{
!!item.is_dist &&
<button><Link to={`/detail?id=${item.course_id}`}>赚{item.dist_amount}元</Link></button>
}
</div>
</div>
</li>
})
}
{
auditions.length > 4 &&
<li>
<button className={'show-more'} onClick={() => {
this.setState({
auditionShowAll: true,
});
}}>查看更多
</button>
</li>
}
</ul>
</section>
<section id={'stage-course'} className={'stage-course'}>
<div className="block-title"
style={{background: `url(${titleImages[4]}) no-repeat`, backgroundSize: 'contain'}}></div>
<div className="course-container">
{
!isEmpty(stageCourses) && Object.keys(stageCourses).map(key => {
return <ul key={key}>
<li><span className={'stage'}>{this.stages[key]}</span></li>
{
!!stageCourses[key].length && stageCourses[key].map((item, index) => {
let Button = null
if (activityData.stage === 1) {
Button = <button className={'unavailable'}>7月15日开始</button>
} else if (activityData.stage === 2) {
switch (item.type) {
case 0:
Button = <button>立即报名</button>
break
case 1:
Button =
<button className={'study-btn'}><Link to={`/play?id=${item.v_course_id}`}>开始学习</Link>
</button>
break
case 2:
Button = <button><Link to={`/detail?id=${item.course_id}`}>立即拼团</Link></button>
break
case 3:
Button = <button><Link to={`/detail?id=${item.course_id}`}>继续参团</Link></button>
break
case 4:
Button = <button><Link to={`/detail?id=${item.course_id}`}>继续砍价</Link></button>
break
case 5:
Button = <button><Link to={`/detail?id=${item.course_id}`}>我要砍价</Link></button>
break
}
} else {
Button = <button className={'unavailable'}>活动已结束</button>
}
return <li className={'course'} key={index}>
<div className="cover">
{
item.save && <span>立省{item.save}</span>
}
<img src={item.image_name}
alt=""/>
</div>
<div className="info">
<div className="title">{item.course_title}</div>
<div className="des">{item.simpledescription}</div>
{
item.type === 1
? <div className="purchased">已购买</div>
: <div className="prices">
<span>¥{item.price0}</span>
<span>¥{item.price1}</span>
</div>
}
<div className="btn">
{Button}
{
!!item.is_dist && <button>赚{item.dist_amount}元</button>
}
</div>
</div>
</li>
})
}
{
stageCourses[key].length === 4 && <li className={'show-more-box'}>
<button className={'show-more'}
onClick={() => this.getStageCourses(this.stageParams[key - 1])}>查看更多
</button>
</li>
}
</ul>
})
}
</div>
</section>
</div>
);
}
}
export default connect(
({user}) => ({user}),
null,
)(Anniversary2020);
\ No newline at end of file
src/components/activity/2020-717/index.scss 0 → 100644
.anniversary-2020 {
background-color: #2E00DC;
padding: 0 10px 75px;
.banner {
height: 220px;
img {
width: 100%;
height: 100%;
}
}
@mixin button {
-webkit-appearance: none;
outline: 0;
border: 0;
background: transparent;
}
nav {
position: sticky;
top: 0;
left: 0;
height: 44px;
margin-bottom: 20px;
margin-left: -10px;
margin-right: -10px;
background: #059BFF;
color: #fff;
font-size: 15px;
z-index: 100;
ul {
white-space: nowrap;
overflow: auto;
}
li {
display: inline-block;
line-height: 44px;
padding: 0 24px;
text-align: center;
&.active {
background: #FFE400;
color: #333;
}
}
}
a.rule-btn {
font-size: 14px;
color: #fff;
text-decoration: underline;
letter-spacing: 3px;
}
.block {
&-title {
width: 150px;
height: 32px;
margin: 0 auto 10px;
}
.container {
padding: 10px;
border: 2px solid;
background: #2B5FFF;
border-image: linear-gradient(0deg, rgba(40, 0, 254, 1), rgba(60, 168, 255, 1)) 10 10;
border-radius: 2px;
}
}
.prices {
span:nth-child(1) {
color: #FF2121;
font-size: 18px;
margin-right: 10px;
}
span:nth-child(2) {
color: #777;
font-size: 12px;
text-decoration: line-through;
}
}
.cover {
position: relative;
flex: 0 0 auto;
width: 140px;
height: 101px;
margin-right: 10px;
span {
position: absolute;
top: 0;
right: 0;
display: inline-block;
width: 74px;
height: 22px;
background: linear-gradient(90deg, rgba(253, 61, 59, 1) 0%, rgba(255, 103, 77, 1) 100%);
border-radius: 11px 0 0 11px;
text-align: center;
font-size: 12px;
color: #fff;
line-height: 22px;
}
img {
width: 100%;
height: 100%;
}
}
.purchased {
font-size: 12px;
color: #09f;
}
.study {
width: 91px;
height: 28px;
background: rgba(0, 153, 255, 1);
border-radius: 2px;
font-size: 13px;
color: #fff;
}
.unavailable {
width: 91px;
height: 28px;
background: rgba(153, 153, 153, 1) !important;
border-radius: 2px;
color: #fff;
font-size: 13px;
}
.course-container {
width: 355px;
padding: 10px;
background: rgba(43, 95, 255, 1);
border: 2px solid;
border-image: linear-gradient(0deg, rgba(40, 0, 254, 1), rgba(60, 168, 255, 1)) 10 10;
border-radius: 2px;
li:last-child {
margin-top: 10px;
margin-bottom: 5px;
text-align: center;
}
.show-more {
@include button;
width: 95px;
height: 33px;
border: 1px solid rgba(255, 255, 255, 1);
border-radius: 17px;
color: #fff;
}
}
.course {
display: flex;
justify-content: space-between;
padding: 10px;
margin-bottom: 8px;
height: 121px;
background-color: #fff;
.info {
position: relative;
}
.title, .des {
width: 162px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.des {
margin-bottom: 8px;
}
.btn {
position: absolute;
left: 0;
bottom: 0;
button {
@include button;
height: 28px;
margin-right: 10px;
border-radius: 2px;
color: #fff;
}
}
}
.group {
margin-bottom: 20px;
.course .btn {
.main {
padding: 0 20px;
background: #FF2121;
}
.study-btn {
background: #09f;
}
}
}
.lottery {
margin-bottom: 20px;
background: rgba(45, 0, 219, 1);
border: 2px solid;
border-image: linear-gradient(0deg, rgba(39, 0, 253, 1), rgba(59, 167, 255, 1)) 10 10;
.block-title {
width: 217px;
height: 32px;
}
.rule {
margin: 10px 0;
font-size: 14px;
color: #fff;
text-align: center;
a {
text-decoration: underline;
letter-spacing: 4px;
}
}
.prize-container {
position: relative;
padding: 11px;
margin-bottom: 8px;
.h-bar {
position: absolute;
left: 50%;
top: 0;
transform: translateX(-50%);
width: 280px;
height: 6px;
background: url("./images/h-bar.png");
background-size: contain;
& + .h-bar {
top: initial;
bottom: 0;
}
}
.v-bar {
position: absolute;
top: 3px;
left: 0;
width: 6px;
height: 198px;
background: url("./images/v-bar.png");
background-size: contain;
& + .v-bar {
left: initial;
right: 0;
}
}
.prizes {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
padding: 0 4px;
li {
width: 95px;
height: 55px;
padding: 5px;
background: #2658FF;
border-radius: 3px;
&:nth-child(n + 4) {
margin-top: 13px;
}
&:nth-child(5) {
background: url("./images/draw.png") no-repeat;
background-size: contain;
}
}
.draw {
text-align: center;
color: #fff;
div:nth-child(1) {
font-size: 18px;
}
div:nth-child(2) {
font-size: 12px;
}
}
.prize {
display: flex;
justify-content: center;
align-items: center;
width: 85px;
height: 47px;
background: rgba(255, 254, 255, 1);
box-shadow: 0 0 1px 0 rgba(10, 12, 122, 0.3);
img {
max-width: 59px;
max-height: 38px;
}
}
}
}
.content {
padding-top: 10px;
padding-bottom: 18px;
background: #2558FF;
}
.operations {
display: flex;
justify-content: space-between;
padding: 0 20px;
margin-bottom: 15px;
a {
color: #FFFDFF;
font-size: 14px;
text-decoration: underline;
}
}
.lottery-info {
.title {
display: flex;
align-items: center;
width: 223px;
height: 30px;
padding-left: 18px;
margin: 0 auto 9px;
background: linear-gradient(90deg, rgba(37, 87, 255, 1) 0%, rgba(46, 0, 219, 1) 100%);
border-radius: 15px;
font-size: 15px;
color: #FFFDFF;
i {
display: inline-block;
width: 14px;
height: 16px;
margin-right: 9px;
background: url("./images/lottery-icon.png") no-repeat;
background-size: contain;
}
}
li {
padding: 0 10px;
font-size: 12px;
color: #FFFDFF;
}
.index {
display: inline-block;
width: 12px;
height: 12px;
margin-right: 6px;
background: rgba(255, 217, 9, 1);
border-radius: 50%;
color: #2D00DB;
text-align: center;
line-height: 12px;
}
}
}
.group-answer {
margin-bottom: 20px;
.content {
width: 355px;
padding: 10px 7px 0;
background: rgba(43, 95, 255, 1);
border: 2px solid;
border-image: linear-gradient(0deg, rgba(39, 0, 253, 1), rgba(59, 167, 255, 1)) 10 10;
border-radius: 2px;
}
.func {
position: relative;
width: 341px;
height: 149px;
padding-top: 12px;
margin: 0 auto;
}
.des {
width: 341px;
height: 95px;
margin-top: -9px;
margin-bottom: 15px;
background: rgba(34, 39, 255, 1);
border-radius: 0 0 4px 4px;
.title {
position: relative;
padding: 8px 0;
font-size: 14px;
color: #fff;
opacity: .5;
text-align: center;
@mixin pseudo {
position: absolute;
top: 50%;
transform: translateY(-50%);
content: '';
width: 10px;
height: 2px;
background-color: #fff;
display: block;
}
&::before {
@include pseudo;
left: 103px;
}
&::after {
@include pseudo;
right: 103px;
}
}
ol {
padding: 0 15px;
font-size: 12px;
color: #EFF1FF;
}
}
.team {
i {
position: absolute;
left: 0;
top: 15px;
display: inline-block;
width: 84px;
height: 25px;
background: url("./images/my-team.png");
background-size: contain;
}
.func {
background: url("https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active20_717/m/team-info-bg.png");
background-size: contain;
li {
width: 30px;
height: 30px;
border: 0 solid rgba(255, 255, 255, 1);
border-radius: 50%;
overflow: hidden;
line-height: 30px;
text-align: center;
&:last-child {
border: 1px solid #fff;
color: #fff;
}
}
}
.summary {
font-size: 12px;
text-align: center;
color: #fff;
span:nth-child(2) {
margin-left: 20px;
}
.count {
font-size: 18px;
margin: 0 5px;
}
}
ul {
display: flex;
justify-content: space-around;
padding: 0 33px;
margin-top: 10px;
margin-bottom: 15px;
}
.invite {
text-align: center;
button {
@include button;
width: 160px;
height: 30px;
background: rgba(255, 228, 0, 1);
border-radius: 4px;
color: #2127FF;
font-size: 14px;
}
}
}
.exercise {
.func {
height: 127px;
padding-top: 34px;
background: url("https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active20_717/m/exercise-bg.png") no-repeat;
background-size: contain;
text-align: center;
color: #fff;
.btn {
margin-bottom: 9px;
button {
@include button;
width: 160px;
height: 30px;
background: linear-gradient(90deg, rgba(34, 221, 255, 1) 0%, rgba(57, 167, 255, 1) 100%);
border-radius: 4px;
font-size: 14px;
line-height: 30px;
color: #fff;
}
i {
display: inline-block;
width: 14px;
height: 14px;
margin-right: 8px;
background: url("./images/start-exercise.png");
background-size: contain;
}
}
span {
font-size: 18px;
margin: 0 5px;
}
}
}
.rank-list {
color: #fff;
.title {
position: relative;
text-align: center;
font-size: 18px;
@mixin pseudo {
content: '';
display: block;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 25px;
height: 11px;
background: url("./images/rank-title-decorator.png");
}
&::before {
@include pseudo;
left: 90px;
background-size: contain;
}
&::after {
@include pseudo;
right: 90px;
transform: translateY(-50%) scale(-1);
background-size: contain;
}
}
.description {
margin-top: 10px;
margin-bottom: 18px;
text-align: center;
font-size: 12px;
opacity: .8;
}
.prize-des {
padding: 0 8px;
font-size: 13px;
white-space: pre-wrap;
}
.btn {
height: 58px;
padding-top: 10px;
text-align: center;
button {
@include button;
width: 95px;
height: 33px;
border: 1px solid rgba(255, 255, 255, 1);
border-radius: 17px;
font-size: 14px;
color: #fff;
}
}
}
}
.audition {
margin-bottom: 20px;
.block-title {
width: 197px;
height: 32px;
}
.course {
.btn {
display: flex;
justify-content: space-between;
width: 100%;
font-size: 0;
button {
padding: 0 5%;
font-size: 13px;
border-radius: 2px;
margin: 0;
}
.study-btn {
background: #09f;
}
.audition-btn {
background: linear-gradient(90deg, rgba(0, 201, 235, 1) 0%, rgba(0, 138, 242, 1) 100%);
}
button:nth-child(2) {
margin-right: 0;
background: linear-gradient(90deg, rgba(255, 68, 0, 1) 2%, rgba(255, 0, 2, 1) 100%);
}
}
}
}
.stage-course {
.block-title {
width: 252px;
height: 32px;
}
.stage {
display: inline-block;
width: 85px;
height: 26px;
line-height: 26px;
background: linear-gradient(90deg, rgba(43, 95, 255, 1) 0%, rgba(46, 0, 220, 1) 100%);
border-radius: 13px;
font-size: 14px;
color: #fff;
}
.course-container {
li:first-child {
margin-top: 20px;
margin-bottom: 15px;
text-align: center;
}
}
.show-more-box {
text-align: center;
}
.show-more {
margin-bottom: 20px;
}
.prices {
text-align: left;
}
.course {
.btn {
display: flex;
justify-content: space-between;
width: 100%;
button {
padding: 0 5%;
font-size: 13px;
border-radius: 2px;
margin-right: 0;
}
button:nth-child(1) {
background: linear-gradient(90deg, rgba(0, 201, 235, 1) 0%, rgba(0, 138, 242, 1) 100%);
}
button:nth-child(2) {
background: linear-gradient(90deg, rgba(255, 68, 0, 1) 2%, rgba(255, 0, 2, 1) 100%);
}
}
}
}
table {
width: 105%;
margin: 10px -7px 0;
text-align: center;
border-collapse: collapse;
table-layout: fixed;
thead {
height: 38px;
line-height: 38px;
background: #00CBFF;
color: #fff;
border-spacing: 0;
font-size: 0;
th {
width: 25%;
font-size: 14px;
&:nth-child(1) {
width: 10%;
}
&:nth-child(2) {
width: 30%;
}
&:nth-child(3) {
width: 15%;
}
&:nth-child(4) {
width: 43%;
}
}
}
tbody {
tr {
height: 48px;
line-height: 48px;
font-size: 12px;
&:nth-of-type(even) {
background: #2139F1;
}
}
}
td:nth-of-type(1) {
font-size: 16px;
img {
width: 14px;
height: 18px;
}
}
td:nth-of-type(2) {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.avatar {
width: 18px;
height: 18px;
margin-right: 6px;
border-radius: 50%;
vertical-align: middle;
}
}
}
\ No newline at end of file
src/router/router-config.js
......@@ -346,4 +346,9 @@ export default [
path: '/problems/:id',
component: loadable(() => import('@/components/problems')),
},
//2020-717
{
path: '/anniversary_2020',
component: loadable(() => import('@/components/activity/2020-717')),
},
]
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 to comment