react-app-shell
Version:
react打包脚本和example, 这里的版本请忽略
786 lines (688 loc) • 15.1 kB
text/less
/** header **/
.header {
height: 420px;
img {
width: 750px;
height: 420px;
border: 0;
}
}
/** 团购tabs样式 **/
.group-tabs {
text-align: center;
position: relative;
color: #333;
font-size: 32px;
margin-top: 20px;
width: 100%;
padding-bottom: 68px;
padding-bottom: env(safe-area-inset-bottom) ;
padding-bottom: constant(safe-area-inset-bottom) ;
.group-tabs-nav {
background: #fff;
.group-tabs-tab {
float: left;
width: 375px;
height: 80px;
line-height: 80px;
border-bottom: 2px solid #f8f8f8;
transition: all 0.3s;
}
.group-tabs-tab-active {
border-bottom: 4px solid #ff7422;
transition: all 0.3s;
}
}
.tabs-content-hold {
height: 80px;
}
.group-tabs-content {
position: relative;
overflow: hidden;
.tabs-content-slide {
box-sizing: border-box;
width: 1500px;
height: 100%;
transition: all 0.3s;
transform: translateX(0);
&::after {
display: block;
height: 0;
content: '';
clear: both;
visibility: hidden;
}
}
.group-tabs-tabpane {
font-size: 0;
// float: left;
width: 750px;
height: auto;
display: none;
// pointer-events: none;
img {
width: 750px;
height: auto;
}
}
.group-tabs-active {
display: block ;
}
}
.group-tabs-footer {
height: 100px;
width: 100%;
background: rgba(242, 242, 242, 1);
margin-top: -1px; /* no */
}
.fixedMenu {
max-width: 750px;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 4;
margin: 0 auto;
}
.play-video {
width: 640px;
height: 430px;
margin: 30px auto;
padding: 0 30px;
background: url(../../../public/images/bargain/video-bg.png) no-repeat;
background-size: 100% 100%;
p {
width: 100%;
height: 60px;
line-height: 60px;
color: #602321;
font-size: 28px;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.video-body {
margin-top: 16px;
width: 100%;
height: 320px;
padding: none;
position: relative;
.play-btn {
width: 80px ;
height: 80px ;
border: none ;
position: absolute ;
top: 50% ;
left: 50% ;
transform: translate(-50%, -50%) ;
background: url('../../../public/images/bargain/pause-btn.png') no-repeat ;
background-size: 100% 100% ;
z-index: 1;
}
}
:global {
.video-react .video-react-poster {
position: absolute ;
display: block ;
top: 0;
left: 0;
height: 100% ;
}
.video-react-big-play-button {
display: none ;
}
.video-react .video-react-big-play-button::before {
content: '' ;
}
}
}
}
/** 团购进度 **/
.group-progress {
position: relative;
top: -20px;
width: 750px;
text-align: center;
background: #fff;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
padding-bottom: 60px;
.innercon {
position: relative;
overflow: hidden;
.group-desc {
padding: 40px 30px;
font-size: 32px;
line-height: 45px;
text-align: left;
.desc-person {
display: inline-block;
height: 45px;
width: 120px;
border-radius: 8px;
background: #ff7422;
color: #fff;
text-align: center;
margin-bottom: 5px;
margin-right: 15px;
}
.desc-detail {
color: #333;
font-weight: 450;
line-height: 1.2;
}
}
.progress-title {
position: relative;
font-size: 32px;
text-align: center;
color: #ff7422;
&::before {
content: '';
position: absolute;
top: 20%;
right: 16%;
width: 30px;
height: 24px;
background: url(../../../public/images/group/title_right.png);
background-size: 100% 100%;
}
&::after {
content: '';
position: absolute;
top: 20%;
left: 16%;
width: 30px;
height: 24px;
background: url(../../../public/images/group/title_left.png);
background-size: 100% 100%;
}
}
}
.button-normal {
width: 480px;
height: 80px;
margin: 10px auto 0;
line-height: 80px;
background: #ccc;
color: #fff;
border-radius: 50px;
font-size: 32px;
border: none;
}
.bought-course {
width: 640px;
padding: 20px;
margin: 50px auto 0;
line-height: 1.5;
background: rgba(255, 210, 0, 0.2);
color: #ff7422;
font-size: 32px;
border-radius: 50px;
border: none;
word-break: break-all;
}
}
/** 团购流程 **/
.group-process {
width: 750px;
height: 320px;
text-align: center;
background: #fff;
.innercon {
position: relative;
.process-title {
position: relative;
font-size: 32px;
padding: 60px 0 40px 0;
text-align: center;
color: #ff7422;
&::before {
content: '';
position: absolute;
top: 48%;
right: 35%;
width: 30px;
height: 24px;
background: url(../../../public/images/group/title_right.png);
background-size: 100% 100%;
}
&::after {
content: '';
position: absolute;
top: 48%;
left: 35%;
width: 30px;
height: 24px;
background: url(../../../public/images/group/title_left.png);
background-size: 100% 100%;
}
}
.process-desc {
width: 750px;
.process-list {
width: 100%;
overflow: hidden;
.process-item {
position: relative;
float: left;
width: 25%;
text-align: center;
p {
font-size: 24px;
color: #333;
margin-top: 26px;
}
img {
display: block;
margin: 0 auto;
width: 48px;
height: 48px;
}
&::after {
content: '';
position: absolute;
top: 50%;
margin-top: -30px;
right: -26%;
width: 100px;
height: 2px;
background: #ccc;
}
&:last-child {
&::after {
content: '';
width: 0;
height: 0;
}
}
}
}
}
}
}
/** 底部购买区域 **/
.footer {
position: fixed;
bottom: 0;
width: 750px;
height: 100px;
background: #fff;
z-index: 4;
// overflow: hidden;
transform: none;
padding-bottom: env(safe-area-inset-bottom) ;
padding-bottom: constant(safe-area-inset-bottom) ;
box-sizing: content-box;
.service {
float: left;
width: 190px;
height: 100px;
color: #666;
font-size: 20px;
padding-top: 68px;
text-align: center;
background: url(../../../public/images/group/service.png) no-repeat;
background-size: 50px 50px;
background-position: 74px 14px;
}
.button-group {
float: right;
width: 560px;
height: 100px;
// overflow: hidden;
.button-left {
width: 220px;
height: 100px;
line-height: 100px;
text-align: center;
color: #fff;
font-size: 32px;
float: left;
background: linear-gradient(to right, #ffd300, #fea32c);
span {
display: block;
font-size: 32px;
line-height: 1;
margin-top: 20px;
}
i {
display: block;
font-size: 0.32rem;
margin-top: 2px;
line-height: 1;
}
}
.button-right {
width: 340px;
height: 100px;
line-height: 100px;
text-align: center;
float: right;
color: #fff;
font-size: 32px;
background: linear-gradient(to right, #ff862f, #ff5d10);
position: relative;
span {
display: block;
font-size: 32px;
line-height: 1;
margin-top: 20px;
}
i {
display: block;
font-size: 0.32rem;
margin-top: 2px;
line-height: 1;
}
.button-condition {
width: 320px;
height: 55px;
line-height: 48px;
position: absolute;
top: -60px;
right: 10px;
font-size: 24px;
background: url(../../../public/images/group/condition_tip.png);
background-size: 100% 100%;
}
}
}
/** 活动结束 **/
.button-normal {
float: right;
width: 560px;
height: 100px;
line-height: 100px;
text-align: center;
color: #fff;
font-size: 32px;
background: linear-gradient(to right, #ff862f, #ff5d10);
}
.button-countdown {
float: right;
width: 560px;
height: 100px;
overflow: hidden;
background: -webkit-linear-gradient(left, #ff862f, #ff5d10);
background: -o-linear-gradient(right, #ff862f, #ff5d10);
background: -moz-linear-gradient(right, #ff862f, #ff5d10);
background: linear-gradient(to right, #ff862f, #ff5d10);
.button-left {
margin: 25px 0 0 30px;
float: left;
span {
display: inline-block;
color: #fff;
&:first-child {
font-size: 56px;
}
&:last-child {
font-size: 24px;
text-decoration: line-through;
margin-left: 10px;
}
}
}
.button-right {
float: right;
margin: 15px 20px 0 0;
text-align: right;
i {
display: block;
font-size: 24px;
color: #fff;
}
.count-down {
color: #fff;
margin-top: 8px;
span {
background: #fff;
color: #ff6a26;
}
}
}
}
}
/** 倒计时 **/
.countdown {
margin: 0 auto;
margin-top: 50px;
text-align: center;
width: 100%;
.innercon {
display: inline-block;
}
p {
font-size: 28px;
height: 44px;
line-height: 44px;
margin-right: 18px;
float: left;
}
.time {
font-size: 28px;
float: left;
span {
display: inline-block;
height: 50px;
width: 56px;
background-color: #ff7422;
border-radius: 6px;
color: #fff;
font-size: 36px;
text-align: center;
line-height: 50px;
margin: 0 8px;
padding-top: 2px;
&:first-child {
margin-left: 0;
}
}
}
.finish {
width: 240px;
margin: 0 auto;
span {
font-size: 40px;
margin-top: 20px;
margin-bottom: 20px;
color: #999;
display: block;
text-align: center;
position: relative;
&::before {
content: '';
border-top: 2px solid #999;
height: 2px;
width: 40px;
position: absolute;
top: 50%;
left: 0;
}
&::after {
content: '';
border-top: 2px solid #999;
height: 2px;
width: 40px;
position: absolute;
top: 50%;
right: 0;
}
}
}
.turnout {
font-size: 24px;
text-align: center;
span {
color: #ff8181;
}
}
}
/** 参团成员列表 **/
.team-wrapper {
width: 750px;
height: 100%;
position: relative;
margin-top: 80px;
.team-member-count {
position: absolute;
left: 50%;
margin-left: -200px;
top: -14px;
font-size: 28px;
width: 400px;
background: #fff;
color: #333;
}
.team-full {
width: 160px;
height: 120px;
position: absolute;
top: -50px;
right: 74px;
background: url(../../../public/images/group/full.png) no-repeat center;
background-size: 155px 124px;
z-index: 2;
}
.team-list {
width: 674px;
margin-left: 35px;
border: 2px solid #ccc;
padding: 30px;
border-radius: 20px;
.team-item {
padding: 20px 0;
border-bottom: 1px solid #e6e6e6; /* no */
overflow: hidden;
.team-item-image {
position: relative;
width: 80px;
height: 80px;
float: left;
img {
display: block;
width: 100%;
height: 100%;
border-radius: 100%;
}
.commander {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 26px;
background: #ff7422;
line-height: 26px;
text-align: center;
color: #fff;
font-size: 20px;
border-radius: 14px;
}
}
.team-item-info {
width: 288px;
height: 80px;
float: left;
margin-left: 10px;
p {
font-size: 24px;
color: #666;
line-height: 80px;
text-align: left;
}
}
.team-item-time {
float: right;
height: 80px;
line-height: 80px;
span {
font-size: 24px;
color: #666;
}
}
&:nth-last-of-type(1) {
border-bottom: 0;
padding-bottom: 0;
}
}
}
/** 团队成员 **/
.expand {
position: relative;
bottom: 0;
width: 100%;
text-align: center;
height: 40px;
line-height: 40px;
margin-top: 32px;
cursor: pointer;
.expand-btn {
display: inline-block;
font-size: 20px;
width: 470px;
color: #666;
&::before {
content: '';
position: absolute;
width: 125px;
top: 50%;
margin-left: -155px;
height: 2px;
background: #999;
}
&::after {
content: '';
position: absolute;
width: 125px;
top: 50%;
margin-left: 30px;
height: 2px;
background: #999;
}
}
}
}
/** 我要当团长 **/
.become-commander {
position: fixed;
right: 0;
bottom: 170px;
width: 200px;
height: 56px;
z-index: 4;
.button-commander {
z-index: 4;
width: 200px;
height: 56px;
padding-left: 50px;
line-height: 56px;
font-size: 28px;
color: #fff;
border-top-left-radius: 100px;
border-bottom-left-radius: 100px;
background: #ff7422 url(../../../public/images/group/commander.png) no-repeat 10px 8px;
background-size: 34px 34px;
}
}
@media only screen and (device-width: 375px) and (device-height: 812px) and (height: 812px) and (-webkit-device-pixel-ratio: 3) {
.footer {
bottom: 68px ;
}
}
:global {
.video-react .video-react-poster {
position: absolute ;
display: block ;
top: 0;
left: 0;
height: 100% ;
}
.video-react-big-play-button {
display: none ;
}
.video-react .video-react-big-play-button::before {
content: '' ;
}
}