187 lines
4.2 KiB
SCSS
187 lines
4.2 KiB
SCSS
@function px2rem($px, $rem:75) {
|
|
@return $px / $rem+rem;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
width: 100%;
|
|
// height: 100%;
|
|
background: #F4F4FA;
|
|
}
|
|
|
|
.back {
|
|
position: fixed;
|
|
top: px2rem(70, );
|
|
left: px2rem(34, );
|
|
z-index: 9;
|
|
width: px2rem(62, );
|
|
height: px2rem(62, );
|
|
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
input {
|
|
width: px2rem(690, );
|
|
height: px2rem(64, );
|
|
border-radius: px2rem(64, );
|
|
outline: none;
|
|
border: none;
|
|
background: #fff;
|
|
display: block;
|
|
margin: px2rem(193, ) auto px2rem(32, );
|
|
box-sizing: border-box;
|
|
padding: 0 px2rem(33, );
|
|
}
|
|
|
|
.title {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
text-align: center;
|
|
color: #482F2F;
|
|
font-size: px2rem(34, );
|
|
height: px2rem(156, );
|
|
line-height: 2.6rem;
|
|
background: #fff;
|
|
}
|
|
|
|
ul {
|
|
width: px2rem(690, );
|
|
height: 17rem;
|
|
// background: pink;
|
|
margin: 0 auto 0;
|
|
overflow-y: scroll;
|
|
|
|
li {
|
|
width: 100%;
|
|
height: px2rem(112, );
|
|
margin-bottom: px2rem(30, );
|
|
|
|
.left {
|
|
width: px2rem(112, );
|
|
height: px2rem(112, );
|
|
border-radius: 50%;
|
|
float: left;
|
|
|
|
img {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 50%;
|
|
background: #FF7489;
|
|
}
|
|
}
|
|
|
|
.right {
|
|
float: right;
|
|
width: 7.2rem;
|
|
height: 100%;
|
|
border-bottom: px2rem(1, ) solid #E4E4E4;
|
|
|
|
p {
|
|
font-size: px2rem(28, );
|
|
color: #171A58;
|
|
margin-top: px2rem(23, );
|
|
margin-bottom: px2rem(15, );
|
|
width: 100%;
|
|
overflow: hidden; //超出隐藏
|
|
white-space: nowrap; //不折行
|
|
text-overflow: ellipsis; //溢出显示省略号
|
|
}
|
|
|
|
span {
|
|
display: block;
|
|
width: 100%;
|
|
overflow: hidden; //超出隐藏
|
|
white-space: nowrap; //不折行
|
|
text-overflow: ellipsis; //溢出显示省略号
|
|
color: #8A8CAB;
|
|
font-size: px2rem(24, );
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.confirmTheGift {
|
|
display: none;
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
z-index: 999;
|
|
background: rgba(0, 0, 0, .8);
|
|
|
|
.confirmTheGift_in {
|
|
width: px2rem(600, );
|
|
height: px2rem(421, );
|
|
background: linear-gradient(90deg, #DAFFFC 0%, #FFFBE6 47%, #FFD5EC 100%);
|
|
position: relative;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
border-radius: px2rem(40, );
|
|
box-sizing: border-box;
|
|
|
|
.confirmTheGift_in_title {
|
|
width: 100%;
|
|
text-align: center;
|
|
position: absolute;
|
|
left: 0;
|
|
top: px2rem(40, );
|
|
color: #990D39;
|
|
font-size: px2rem(26, );
|
|
font-weight: bold;
|
|
|
|
b {
|
|
color: #503938;
|
|
font-weight: bold;
|
|
}
|
|
|
|
i {
|
|
font-style: normal;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
.gift {
|
|
width: px2rem(160, );
|
|
height: px2rem(160, );
|
|
background: #FFADB7;
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(111, );
|
|
}
|
|
|
|
.but1 {
|
|
text-align: center;
|
|
color: #482F2F;
|
|
font-size: px2rem(28, );
|
|
font-weight: bold;
|
|
line-height: px2rem(72, );
|
|
width: px2rem(220, );
|
|
height: px2rem(72, );
|
|
border-radius: px2rem(72, );
|
|
position: absolute;
|
|
left: px2rem(60, );
|
|
top: px2rem(316, );
|
|
background: #fff;
|
|
}
|
|
|
|
.but2 {
|
|
width: px2rem(220, );
|
|
height: px2rem(72, );
|
|
position: absolute;
|
|
right: px2rem(60, );
|
|
top: px2rem(316, );
|
|
background: url(../images/confirmTheGift_in_but2.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
} |