i
This commit is contained in:
387
src/pages/yaotouzi/index/index.scss
Normal file
387
src/pages/yaotouzi/index/index.scss
Normal file
@@ -0,0 +1,387 @@
|
||||
.index {
|
||||
background-color: #23684B;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.tips {
|
||||
border-radius: 0;
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.userInfo {
|
||||
width: 680px;
|
||||
margin: 20px auto;
|
||||
//margin: auto;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
|
||||
image {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid #FFFFFF;
|
||||
}
|
||||
|
||||
.userText {
|
||||
margin-left: 10px;
|
||||
width: 250px;
|
||||
// 文字超出显示省略号
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
.userName {
|
||||
font-size: 35px;
|
||||
}
|
||||
|
||||
.userScore {
|
||||
font-size: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.right {
|
||||
background-color: #429C78;
|
||||
border-radius: 50px;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
|
||||
.icon {
|
||||
background-image: url("../../../static/dz.png");
|
||||
background-size: 100% 100%;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.bean {
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gameInfo {
|
||||
width: 680px;
|
||||
margin: 20px auto;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
|
||||
image {
|
||||
width: 110px;
|
||||
height: 110px;
|
||||
}
|
||||
|
||||
.game_box {
|
||||
margin-left: 10px;
|
||||
width: 250px;
|
||||
// 文字超出显示省略号
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
.gameName {
|
||||
font-size: 35px;
|
||||
}
|
||||
|
||||
.lottery {
|
||||
font-size: 25px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
|
||||
.text {
|
||||
background-color: #E9422F;
|
||||
width: 55px;
|
||||
height: 55px;
|
||||
text-align: center;
|
||||
line-height: 55px;
|
||||
font-size: 40px;
|
||||
margin-right: 30px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
|
||||
.btn {
|
||||
width: 137px;
|
||||
background: linear-gradient(-180deg, #FBE039, #FDC413);
|
||||
font-size: 30px;
|
||||
text-align: center;
|
||||
border: 1px solid #FFEDC5;
|
||||
border-radius: 26px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.opt {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.item {
|
||||
width: 18%;
|
||||
text-align: center;
|
||||
//margin: auto 3px;
|
||||
border: 1px dashed #228960;
|
||||
position: relative;
|
||||
|
||||
.name {
|
||||
//font-size: 30px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.odd {
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
.mask {
|
||||
position: absolute;
|
||||
//background: #7950f2;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
line-height: 100px;
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
|
||||
.text {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.opt1 {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
flex-wrap: wrap;
|
||||
text-align: center;
|
||||
|
||||
.item {
|
||||
width: 200px;
|
||||
margin-bottom: 10px;
|
||||
text-align: center;
|
||||
padding: 31px 0;
|
||||
border: 1px dashed #228960;
|
||||
position: relative;
|
||||
|
||||
.name {
|
||||
font-size: 55px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.odd {
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
.mask {
|
||||
position: absolute;
|
||||
//background: #7950f2;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 10px;
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
|
||||
.text {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.base {
|
||||
background-image: url("../../../static/cais.png");
|
||||
background-size: 100% 100%;
|
||||
width: 300px;
|
||||
height: 400px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
.qz {
|
||||
background-image: url("../../../static/qz.png");
|
||||
background-size: 100% 100%;
|
||||
width: 300px;
|
||||
height: 100px;
|
||||
margin-bottom: 20px;
|
||||
line-height: 100px;
|
||||
color: #FBE039;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottomBar {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
height: 130px;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
border-top-left-radius: 40px;
|
||||
border-top-right-radius: 40px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 50px;
|
||||
|
||||
.btn1 {
|
||||
background-image: url("../../../static/cz.png");
|
||||
background-size: 100% 100%;
|
||||
width: 150px;
|
||||
height: 100px;
|
||||
text-align: center;
|
||||
line-height: 95px;
|
||||
}
|
||||
|
||||
.btn2 {
|
||||
background-image: url("../../../static/ssd.png");
|
||||
background-size: 100% 100%;
|
||||
width: 150px;
|
||||
height: 100px;
|
||||
text-align: center;
|
||||
line-height: 100px;
|
||||
}
|
||||
|
||||
.btn3 {
|
||||
background-image: url("../../../static/tz.png");
|
||||
background-size: 100% 100%;
|
||||
width: 150px;
|
||||
height: 100px;
|
||||
text-align: center;
|
||||
line-height: 95px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.subColor {
|
||||
background-color: #228960;
|
||||
color: white;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.btn1, .btn2, .btn3 {
|
||||
&:active {
|
||||
animation: btn ease 0.3s;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes btn {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
// 虚线边框且闪烁3秒
|
||||
.flicker {
|
||||
animation: flicker 1s infinite;
|
||||
}
|
||||
|
||||
@keyframes flicker {
|
||||
0% {
|
||||
border: 1px dashed #228960;
|
||||
}
|
||||
50% {
|
||||
border: 1px dashed white;
|
||||
}
|
||||
100% {
|
||||
border: 1px dashed #228960;
|
||||
}
|
||||
}
|
||||
|
||||
.expanding-div {
|
||||
width: 10px;
|
||||
height: 90px;
|
||||
background-image: url("../../../static/qzzz.png");
|
||||
background-size: 100% 100%;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 55%;
|
||||
transform: translate(-50%, -50%);
|
||||
animation-name: rotate, expand;
|
||||
animation-duration: 2s, 3s;
|
||||
animation-delay: 0s, 2s;
|
||||
animation-timing-function: linear, ease-in-out;
|
||||
animation-fill-mode: forwards, forwards;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
line-height: 90px;
|
||||
color: red;
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
0% {
|
||||
top: -100%;
|
||||
transform: translate(-50%, -50%) rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%) rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes expand {
|
||||
from {
|
||||
width: 10px;
|
||||
}
|
||||
to {
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
// 倒计时动画
|
||||
.activeQz {
|
||||
animation: change-size 1s ease-in-out infinite;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@keyframes change-size {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
90% {
|
||||
font-size: 300px;
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user