react-app-shell
Version:
react打包脚本和example, 这里的版本请忽略
462 lines (456 loc) • 13.1 kB
text/less
/**砍价客服样式**/
.customer{
width: 120px;
height: 72px;
background-color: rgba(254, 145, 47, 1);
border-top-left-radius: 200px;
border-bottom-left-radius: 200px;
position: fixed;
top: 1020px;
right: 0;
color: #fff;
font-size: 24px;
line-height: 72px;
cursor: pointer;
z-index: 99;
img{
width: 24px;
height: 24px;
margin-top: -2px;
margin-left: 26px;
margin-right: 6px;
vertical-align: middle;
}
}
/**弹幕样式**/
.barrage{
width: fit-content;
padding: 5px 20px;
position: absolute;
top: 8px;
left: 50%;
transform:translate(-50%,0);
border-radius: 24px;
background: rgba(235, 114, 50, 0.8);
color: #fff;
font-size: 24px;
white-space: nowrap;
box-sizing: content-box;
p {
display: inline-block;
vertical-align: middle;
}
img{
width: 40px;
height: 40px;
border-radius: 20px;
margin-right: 8px;
vertical-align: middle;
}
.barrage-name{
max-width: 150px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
/**砍价核心区域样式**/
.bargain-main{
position: relative;
top: -158px;
padding: 48px 0;
background: #fff;
border-radius: 20px;
min-height: 300px;
box-sizing: content-box;
/**砍价进度条样式**/
.progress{
padding: 0 32px;
&-title{
position: relative;
text-align: center;
img{
width: 72px;
height: 36px;
vertical-align: middle;
}
p{
display: inline-block;
font-size: 32px;
margin: 0 40px;
color: #BD703A;
}
}
&-content{
width: 640px;
margin-top: 80px;
margin-left: -24px;
.first-code{
display: inline-block;
width: 48px;
font-size: 24px;
transform: translate(50%);
vertical-align: top;
position: relative;
z-index: 2;
img{
width: 48px;
height: 48px;
margin-bottom: 10px;
transform: translate(0, -25%);
}
}
.bar-body{
width: 592px;
display: inline-block;
position: relative;
.main-bar{
width: 100%;
height: 28px;
border-top-right-radius: 14px;
border-bottom-right-radius: 14px;
background: #F5F5F5;
margin-bottom: 90px;
.bar-detail{
display: inline-block;
text-align: right;
margin-top: -10px;
position: relative;
font-size: 24px;
z-index: 2;
img{
width: 48px;
height: 48px;
margin-bottom: 16px;
transform: translate(50%);
}
.bar-detail-text{
width: 100px;
text-align: center;
position: absolute;
right: 0;
transform: translate(50%);
line-height: 30px;
}
}
}
.content-flow{
width: 0%;
height: 28px;
border-top-right-radius: 14px;
border-bottom-right-radius: 14px;
background: #FEB940;
position: absolute;
top: 0;
left: 0;
z-index: 1;
img{
width: 640px;
height: 48px;
}
}
.content-money{
height: 40px;
width: fit-content;
transform: translate(-50%, 0);
position: absolute;
top: -52px;
color: #fff;
font-size: 24px;
line-height: 40px;
padding: 0 5px;
background: url('../../../public/images/bargain/pg-money.png') no-repeat;
background-size: 100% 100%;
box-sizing: content-box;
z-index: 1;
}
}
}
}
/**倒计时**/
.countdown{
padding: 0 32px;
.count-title{
text-align: center;
margin-top: 48px;
.count-hr{
width: 120px;
height: 1px; /*no*/
display: inline-block;
background: #CECECE;
vertical-align: middle;
}
span{
margin: 0 40px;
font-size: 28px;
vertical-align: middle;
color: #333;
}
.count-end{
color: #999;
}
}
.join-people{
margin-top: 32px;
text-align: center;
color: #666;
font-size: 24px;
.join-num{
color: #FF8A00;
}
}
.time {
font-size: 28px;
margin-top: 32px;
text-align: center;
line-height: 52px;
span {
display: inline-block;
height: 50px;
width: 52px;
line-height: 54px;
background-color: #FEB940;
border-radius: 8px;
color: #fff;
font-size: 36px;
margin: 0 8px;
overflow: hidden;
vertical-align: bottom;
}
}
}
/**按钮**/
.btn-wrapper{
.btn-normal{
width:560px;
height:102px;
margin: 0 auto;
border-radius: 50px;
color: #fff;
text-align: center;
font-size: 32px;
line-height: 102px;
cursor: pointer;
}
.btn-large {
background: url('../../../public/images/bargain/btn-large.png') no-repeat;
background-size: 100% 100%;
animation: myZoom 1s linear 0.5s infinite;
}
@keyframes myZoom {
0% {
transform: scale(1);
}
50% {
transform: scale(1.05, 1.05);
}
100% {
transform: scale(1);
}
}
.btn-grey{
background: #BBB;
}
.warn-txt{
text-align: center;
font-size: 24px;
color: #666;
margin-top: 16px;
span{
color: #FF9D19
}
}
.btn-left{
width: 260px;
display: inline-block;
margin-left: 65px;
background: url('../../../public/images/bargain/btn-left.png') no-repeat;
background-size: 100% 100%;
}
.btn-right{
width: 260px;
display: inline-block;
margin-left: 60px;
background: url('../../../public/images/bargain/btn-right.png') no-repeat;
background-size: 100% 100%;
}
.success-congra{
width: 606px;
margin: 0 auto;
margin-bottom: 32px;
word-break: break-all;
color: #AD4D0A;
text-align: center;
line-height: 1.5;
font-size: 28px;
}
.edu-code{
width: 600px;
margin: 0 auto;
padding: 30px 55px;;
text-align: center;
position: relative;
border-radius:20px;
border:2px solid rgba(255,223,130,1);
img{
width: 360px;
height: 460px;
}
.edu-warn-msg{
margin-top: 16px;
color: #666;
font-size: 24px;
line-height: 1.5;
word-break: break-all;
}
}
.edu-code::before{
content: '';
width: 0;
height: 0;
position: absolute;
top: -40px;
left: 50%;
margin-left: -30px;
border-width: 20px 30px;
border-style: solid;
border-color: transparent transparent rgba(255,223,130,1);
}
.edu-code::after{
content: '';
width: 0;
height: 0;
position: absolute;
top: -38px;
left: 50%;
margin-left: -30px;
border-width: 20px 30px;
border-style: solid;
border-color: transparent transparent #fff;/*白色的倒三角*/
}
}
/**好友砍价详情**/
.crew-wrapper{
height: 100%;
padding: 0 16px;
position: relative;
margin-top: 60px;
.crew-title{
position: absolute;
height: 44px;
line-height: 44px;
top: -20px;
left: 210px;
font-size: 28px;
background-color: #fff;
text-align: center;
padding-left: 30px;
padding-right: 30px;
color: #333;
}
.crew-list{
width: 100%;
border: 2px solid #FFDF82;
border-radius: 20px;
padding: 64px 42px 50px;
overflow: hidden;
margin-bottom: 5px;
.scroll-wrapper{
.crew-item{
height: 68px;
width: 100%;
margin: 0 auto;
margin-bottom: 24px;
clear: both;
.list_item_image{
height: 68px;
width: 68px;
float: left;
img{
height: 100%;
width: 100%;
border-radius: 50%;
}
}
.list_item_info{
margin-left: 10px;
float: left;
line-height: 38px;
overflow: hidden;
.name{
max-width: 200px;
color: #666;
font-size: 28px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.time{
color: #999;
font-size: 24px;
}
}
.describe{
float: right;
height: 68px;
line-height: 68px;
font-size: 28px;
color: #666;
span{
color: #f58d8d;
}
}
}
}
.empty-list{
p{
font-size: 28px;
}
}
}
.crew-flod{
cursor: pointer;
text-align: center;
margin-top: 50px;
.crew-block{
display: inline-block;
width: 160px;
height: 1px; /*no*/
background: #DDDDDD;
vertical-align: middle;
}
span{
color: #666666;
margin: 0 40px;
font-size: 20px;
}
}
}
.info-msg{
color: #333;
line-height: 1.5;
max-width: 500px;
margin: 0 auto;
margin-bottom: 20px;
text-align: center;
word-break: break-all;
.info-title{
margin-bottom: 18px;
font-size: 36px;
font-weight: 450;
}
.info-num{
color: #FF8A00;
}
.info-notes{
width: 440px;
margin: 0 auto;
font-size: 28px;
}
}
}
:global{
.am-button::before {
border: none ;
}
}