react-app-shell
Version:
react打包脚本和example, 这里的版本请忽略
390 lines (384 loc) • 10.6 kB
text/less
.header {
width: 750px;
height: 1120px;
background-size: 100%;
position: relative;
.content {
padding-top: 444px;
.title {
position: relative;
color: #FE4463;
font-size: 36px;
text-align: center;
height: 80px;
line-height: 80px;
font-weight: 600;
&:after {
display: block;
position: absolute;
width: 38px;
height: 30px;
background: url(../../../public/images/welfare/caption-after.png);
content: '';
background-size: 38px 30px;
left: 200px;
top: 24px;
}
&:before {
display: block;
position: absolute;
width: 38px;
height: 30px;
background: url(../../../public/images/welfare/caption-before.png);
content: '';
background-size: 38px 30px;
right: 200px;
top: 24px;
}
}
@keyframes breathing {
50%{
transform: scale(1.05,1.05)
}
0%{
transform: scale(1,1);
}
}
.apply-btn {
position: absolute;
bottom: 50px;
cursor: pointer;
left: 50%;
margin-left: -128px;
width: 240px;
height: 256px;
text-align: center;
background: url(../../../public/images/welfare/apply-btn.png) no-repeat;
background-size: 100%;
animation: breathing 1s linear infinite;
}
.rule-wrapper {
position: absolute;
top: 0;
right: 28px;
width: 72px;
height: 76px;
background: url(../../../public/images/welfare/rule-btn.png) no-repeat;
background-size: 100%;
.rule-info {
width: 72px;
font-size: 24px;
margin-top: 6px;
text-align: center;
color: #FE4463;
}
}
}
.activity-not-begin, .activity-end {
color: #FD4362;
font-size: 26px;
text-align: center;
margin-top: 30px;
}
}
/**活动进度**/
.progress-wrapper {
width: 560px;
margin: 120px auto 0;
position: relative;
.progress-bar {
width: 100%;
height: 28px;
background: #FFECEF;
position: relative;
overflow: hidden;
border-radius: 50px;
.progress-percent {
position: absolute;
width: 100%;
height: 28px;
background: #FD4362;
border-radius: 50px;
}
}
.level-wrapper {
position: absolute;
top: -10px;
left: 0;
width: 100%;
height: 48px;
.level {
position: absolute;
top: 0;
width: 48px;
height: 48px;
border-radius: 50%;
background: #FD4362 url(../../../public/images/welfare/step.png) no-repeat;
background-size: 32px 28px;
background-position: 8px 10px;
}
.level-off {
position: absolute;
top: 0;
width: 48px;
height: 48px;
border-radius: 50%;
background: #FFECEF url(../../../public/images/welfare/step.png) no-repeat;
background-size: 32px 28px;
background-position: 8px 10px;
}
.level-num {
position: absolute;
top: 60px;
width: 48px;
text-align: center;
font-size: 24px;
}
.triangle {
position: absolute;
width: 0;
height: 0;
border-width: 12px 12px 0;
left: 3%;
top: -34px;
margin-left: -6px;
border-style: solid;
border-color: #FFECEF transparent transparent;
}
}
.next-level {
position: absolute;
top: -90px;
font-size: 20px;
color: #FD4362;
width: 500px;
margin-left: -130px;
height: 48px;
text-align: center;
line-height: 48px;
background: #FFECEF;
border-radius: 50px;
padding: 0 10px;
}
}
/**预约成员列表**/
.team-wrapper {
width: 750px;
height: 100%;
position: relative;
background-color: #FE4463;
.team-list {
width: 702px;
margin: 0 24px;
padding: 30px 0;
border-radius: 20px;
background-color: #fff;
.team-caption {
position: relative;
color: #FE4463;
font-size: 36px;
text-align: center;
height: 80px;
line-height: 80px;
font-weight: 600;
&:after {
display: block;
position: absolute;
width: 38px;
height: 30px;
background: url(../../../public/images/welfare/caption-after.png);
content: '';
background-size: 38px 30px;
left: 180px;
top: 24px;
}
&:before {
display: block;
position: absolute;
width: 38px;
height: 30px;
background: url(../../../public/images/welfare/caption-before.png);
content: '';
background-size: 38px 30px;
right: 180px;
top: 24px;
}
}
.team-item {
overflow: hidden;
.team-item-body {
width: 614px;
margin-left: 30px;
padding: 20px 0;
border-bottom: 1px solid #FFECEF;
overflow: hidden;
.team-item-ranking {
width: 90px;
height: 80px;
float: left;
margin-right: 10px;
.ranking {
font-size: 24px;
color: #666;
line-height: 80px;
}
.ranking-isme {
display: block;
font-size: 24px;
color: #666;
margin-top: 16px;
}
}
.team-item-image {
position: relative;
width: 80px;
height: 80px;
float: left;
img {
display: block;
width: 100%;
height: 100%;
border-radius: 100%;
}
}
.team-item-info {
width: 220px;
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) {
.team-item-body {
border-bottom: 0;
padding-bottom: 0;
}
}
}
.team-item-isme {
background-color: #FFECEF;
}
}
/**成员**/
.expand {
position: relative;
bottom: 0px;
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: #666666;
&::before {
content: "";
position: absolute;
width: 125px;
top: 50%;
margin-left: -155px;
height: 2px;
background: #999999;
}
&::after {
content: "";
position: absolute;
width: 125px;
top: 50%;
margin-left: 30px;
height: 2px;
background: #999999;
}
}
}
}
/**底部区域**/
.footer {
width: 750px;
height: 100px;
background-color: #FE4463;
.info {
position: relative;
color: #fff;
font-size: 24px;
text-align: center;
line-height: 100px;
&::before {
content: "";
position: absolute;
width: 50px;
top: 50%;
margin-left: -80px;
height: 2px;
background: #fff;
}
&::after {
content: "";
position: absolute;
width: 50px;
top: 50%;
margin-left: 30px;
height: 2px;
background: #fff;
}
}
}
.level-info {
h3 {
position: relative;
color: #FE4463;
font-size: 36px;
text-align: center;
height: 80px;
line-height: 80px;
&:after {
display: block;
position: absolute;
width: 38px;
height: 30px;
background: url(../../../public/images/welfare/caption-after.png);
content: '';
background-size: 38px 30px;
left: 160px;
top: 24px;
}
&:before {
display: block;
position: absolute;
width: 38px;
height: 30px;
background: url(../../../public/images/welfare/caption-before.png);
content: '';
background-size: 38px 30px;
right: 160px;
top: 24px;
}
}
.info {
color: #666666;
font-size: 28px;
text-align: left;
.pre-info {
white-space: pre-wrap;
word-wrap: break-word;
}
}
}