房间流水:新增房间流水页面

This commit is contained in:
Dragon
2023-03-27 16:59:05 +08:00
parent aed45cb6d0
commit a7ec1bef69
3 changed files with 87 additions and 67 deletions

View File

@@ -13,265 +13,285 @@ body {
position: relative; position: relative;
margin: 0 auto; margin: 0 auto;
} }
.max .starlet { .max .starlet {
width: 100%; width: 100%;
height: 5.06667rem; height: 6.9333333333rem;
background: url("../images/serial.png"); background: linear-gradient(180deg, #FFE710 0%, #FFFDE1 67%, #F8F8FB 100%);
background-size: 100% 100%;
z-index: 1000; z-index: 1000;
overflow: hidden; overflow: hidden;
cursor: pointer; cursor: pointer;
} }
.max .starlet img { .max .starlet img {
width: 3.58667rem; width: 2.56rem;
height: 0.98667rem; height: 1.28rem;
display: block; display: block;
margin: 0.97333rem auto 0; margin: 0.9733333333rem auto 0;
} }
.max .starlet img.yinmeng { .max .starlet img.yinmeng {
width: 2.48rem; width: 2.48rem;
height: 1.01333rem; height: 1.0133333333rem;
} }
.max .userInfo { .max .userInfo {
width: 9.2rem; width: 9.2rem;
height: 2rem; height: 2rem;
margin: 0 auto; margin: 0 auto;
border-radius: 0.32rem; border-radius: 0.32rem;
margin-top: 0.53333rem; margin-top: 0.5333333333rem;
display: -webkit-flex;
display: flex; display: flex;
display: -moz-box; display: -moz-box;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-align-items: center; -ms-align-items: center;
align-items: center; align-items: center;
background-color: #fff; background-color: #fff;
} }
.max .userInfo .user-i { .max .userInfo .user-i {
width: 70%; width: 70%;
display: -webkit-flex;
display: flex; display: flex;
display: -moz-box; display: -moz-box;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-justify-content: flex-start; -ms-justify-content: flex-start;
justify-content: flex-start; justify-content: flex-start;
justify-content: center; justify-content: center;
flex-direction: column; flex-direction: column;
} }
.max .userInfo .user-i > div { .max .userInfo .user-i > div {
width: 100%; width: 100%;
height: 1.06667rem; height: 1.0666666667rem;
display: -webkit-flex;
display: flex; display: flex;
display: -moz-box; display: -moz-box;
line-height: 1.4rem; line-height: 1.4rem;
} }
.max .userInfo .user-i > div:first-child { .max .userInfo .user-i > div:first-child {
font-size: 0.4rem; font-size: 0.4rem;
color: #333; color: #333;
margin-left: 0.38667rem; margin-left: 0.3866666667rem;
} }
.max .userInfo .user-i > div:last-child { .max .userInfo .user-i > div:last-child {
color: #999; color: #999;
font-size: 0.32rem; font-size: 0.32rem;
line-height: 0.86667rem; line-height: 0.8666666667rem;
} }
.max .userInfo .user-i > div label { .max .userInfo .user-i > div label {
margin-left: 0.38667rem; margin-left: 0.3866666667rem;
} }
.max .userInfo .user-i > div .erbanNo { .max .userInfo .user-i > div .erbanNo {
margin-left: 0.26667rem; margin-left: 0.2666666667rem;
} }
.max .userInfo .user-room-receipt { .max .userInfo .user-room-receipt {
width: 2.66667rem; width: 2.6666666667rem;
height: 0.64rem; height: 0.64rem;
border-radius: 0.32rem; border-radius: 0.32rem;
font-size: 0.37333rem; font-size: 0.3733333333rem;
color: #fff; color: #fff;
text-align: center; text-align: center;
line-height: 0.64rem; line-height: 0.64rem;
margin-right: 0.26667rem; margin-right: 0.2666666667rem;
background-image: linear-gradient(to right, #FFA936, #FFCB47); background: #FFE710;
background-image: -webkit-linear-gradient(to right, #FFA936, #FFCB47);
} }
.max .serial { .max .serial {
width: 9.2rem; width: 9.2rem;
margin: 0 auto; margin: 0 auto;
overflow: hidden; overflow: hidden;
border-radius: 0.32rem; border-radius: 0.32rem;
background: #fff; background: #fff;
display: -webkit-flex;
display: flex; display: flex;
display: -moz-box; display: -moz-box;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-justify-content: center; -ms-justify-content: center;
justify-content: center; justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-align-items: center; -ms-align-items: center;
align-items: center; align-items: center;
-webkit-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column; flex-direction: column;
margin-top: 0.26667rem; margin-top: 0.2666666667rem;
} }
.max .serial li { .max .serial li {
width: 100%; width: 100%;
height: 2rem; height: 2rem;
background-color: white; background-color: white;
border-bottom: 1px solid #EFEFEF; border-bottom: 1px solid #EFEFEF;
display: -webkit-flex;
display: flex; display: flex;
display: -moz-box; display: -moz-box;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-justify-content: flex-start; -ms-justify-content: flex-start;
justify-content: flex-start; justify-content: flex-start;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-align-items: center; -ms-align-items: center;
align-items: center; align-items: center;
} }
.max .serial li p { .max .serial li p {
flex: 1; flex: 1;
height: 1.33333rem; height: 1.3333333333rem;
color: #333; color: #333;
} }
.max .serial li p:first-child { .max .serial li p:first-child {
text-align: center; text-align: center;
border-right: 1px solid lightgray; border-right: 1px solid lightgray;
width: 5.33333rem; width: 5.3333333333rem;
font-size: 18px; font-size: 18px;
line-height: 1.33333rem; line-height: 1.3333333333rem;
font-weight: bold; font-weight: bold;
} }
.max .serial li p.content { .max .serial li p.content {
width: 5.33333rem; width: 5.3333333333rem;
text-align: center; text-align: center;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
} }
.max .serial li p.content span { .max .serial li p.content span {
display: block; display: block;
width: 100%; width: 100%;
font-size: 18px; font-size: 18px;
line-height: 18px; line-height: 18px;
font-size: 0.29333rem; font-size: 0.2933333333rem;
} }
.max .serial li p.content span:first-child { .max .serial li p.content span:first-child {
color: #FFBC52; color: #FFBC52;
font-size: 0.4rem; font-size: 0.4rem;
} }
.max .serial li p.content span.name { .max .serial li p.content span.name {
color: #999999; color: #999999;
} }
.max .serial .week { .max .serial .week {
background-color: #fff; background-color: #fff;
width: 100%; width: 100%;
height: 2rem; height: 2rem;
border-bottom: 1px solid #EFEFEF; border-bottom: 1px solid #EFEFEF;
display: -webkit-flex;
display: flex; display: flex;
display: -moz-box; display: -moz-box;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-justify-content: flex-start; -ms-justify-content: flex-start;
justify-content: flex-start; justify-content: flex-start;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-align-items: center; -ms-align-items: center;
align-items: center; align-items: center;
} }
.max .serial .week p { .max .serial .week p {
border: 0; border: 0;
flex: 1; flex: 1;
display: -webkit-flex;
display: flex; display: flex;
display: -moz-box; display: -moz-box;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-justify-content: center; -ms-justify-content: center;
justify-content: center; justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-align-items: center; -ms-align-items: center;
align-items: center; align-items: center;
} }
.max .serial .week p.weeks { .max .serial .week p.weeks {
text-align: center; text-align: center;
border-right: 1px solid lightgray; border-right: 1px solid lightgray;
width: 5.33333rem; width: 5.3333333333rem;
font-size: 18px; font-size: 18px;
line-height: 1.33333rem; line-height: 1.3333333333rem;
font-weight: bold; font-weight: bold;
} }
.max .serial .week p.content { .max .serial .week p.content {
box-sizing: border-box; box-sizing: border-box;
display: -webkit-flex;
display: flex; display: flex;
display: -moz-box; display: -moz-box;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-align-items: center; -ms-align-items: center;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
line-height: 18px; line-height: 18px;
} }
.max .serial .week p.content .number { .max .serial .week p.content .number {
color: #FFBC52; color: #FFBC52;
font-size: 0.4rem; font-size: 0.4rem;
} }
.max .serial .week p.content .name { .max .serial .week p.content .name {
text-align: center; text-align: center;
color: #999999; color: #999999;
font-size: 0.29333rem; font-size: 0.2933333333rem;
} }
.max .serial .month { .max .serial .month {
background-color: #F5F5F5; background-color: #F5F5F5;
width: 100%; width: 100%;
height: 2rem; height: 2rem;
border-bottom: 1px solid #EFEFEF; border-bottom: 1px solid #EFEFEF;
display: -webkit-flex;
display: flex; display: flex;
display: -moz-box; display: -moz-box;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-justify-content: flex-start; -ms-justify-content: flex-start;
justify-content: flex-start; justify-content: flex-start;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-align-items: center; -ms-align-items: center;
align-items: center; align-items: center;
} }
.max .serial .month p { .max .serial .month p {
border: 0; border: 0;
display: -webkit-flex;
display: flex; display: flex;
display: -moz-box; display: -moz-box;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-justify-content: center; -ms-justify-content: center;
justify-content: center; justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-align-items: center; -ms-align-items: center;
align-items: center; align-items: center;
} }
.max .serial .month p.date { .max .serial .month p.date {
width: 2.66667rem; width: 2.6666666667rem;
font-weight: bold; font-weight: bold;
color: #CCCCCC; color: #CCCCCC;
line-height: 18px; line-height: 18px;
font-size: 18px; font-size: 18px;
} }
.max .serial .month p.content { .max .serial .month p.content {
display: -webkit-flex;
display: flex; display: flex;
display: -moz-box; display: -moz-box;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-justify-content: center; -ms-justify-content: center;
justify-content: center; justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-align-items: center; -ms-align-items: center;
align-items: center; align-items: center;
-webkit-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column; flex-direction: column;
padding-left: 30px; padding-left: 30px;
line-height: 18px; line-height: 18px;
} }
.max .serial .month p.content .number { .max .serial .month p.content .number {
font-size: 18px; font-size: 18px;
margin-bottom: 0.13333rem; margin-bottom: 0.1333333333rem;
} }
.max .serial .month p.content .name { .max .serial .month p.content .name {
color: #CCCCCC; color: #CCCCCC;
} }
/*# sourceMappingURL=serial.css.map */

View File

@@ -21,16 +21,17 @@ body {
.starlet { .starlet {
width: 100%; width: 100%;
height: px2rem(380); height: px2rem(520);
background: url('../images/serial.png'); // background: url('../images/serial.png');
background-size: 100% 100%; // background-size: 100% 100%;
background: linear-gradient(180deg, #FFE710 0%, #FFFDE1 67%, #F8F8FB 100%);
z-index: 1000; z-index: 1000;
overflow: hidden; overflow: hidden;
cursor: pointer; cursor: pointer;
img { img {
width: px2rem(269); width: px2rem(192);
height: px2rem(74); height: px2rem(96);
display: block; display: block;
margin: px2rem(73) auto 0; margin: px2rem(73) auto 0;
&.yinmeng{ &.yinmeng{
@@ -104,8 +105,7 @@ body {
text-align: center; text-align: center;
line-height: px2rem(48); line-height: px2rem(48);
margin-right: px2rem(20); margin-right: px2rem(20);
background-image: linear-gradient(to right,#FFA936,#FFCB47); background: #FFE710;
background-image: -webkit-linear-gradient(to right,#FFA936,#FFCB47);
} }
} }

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.6 KiB

After

Width:  |  Height:  |  Size: 3.6 KiB