@mixin f_ce_ce {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
@mixin f_be_ce {
display: flex;
justify-content: space-between;
align-items: center;
}
@mixin f__ce {
display: flex;
align-items: center;
}
@mixin f_be_sta {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.top {
position: fixed;;
width: 100%;
box-sizing: border-box;
z-index: 3;
top: 0;
height: 0.75rem;
background-color: #f8f8f8;
background-image: linear-gradient(to right, #737272, #a7a5a5);
}
.bottom {
position: fixed;
bottom: 0rem;
width: 100%;
box-sizing: border-box;
height: 1.45rem;
background-color: black;
z-index: 3;
}
a {
text-decoration: none;
}
input,button {
outline: none;
border: 0px;
&:focus {
outline: none;
}
}
.jieshao {
padding: 0.37rem 0.45rem;
@include f_be_sta;
background-color: white;
border-bottom: 2PX solid #e4e4e4;
>a>img {
width: 1.9rem;
height: 2.67rem;
margin-right: 0.3rem;
}
// 图片右侧
>div {
height: 2.67rem;
flex: 1;
@include f_be_ce;
// 左文字
>div:nth-of-type(1) {
flex: 1;
// 1
>div:nth-of-type(1) {
@include f__ce;
margin-top: 0.1rem;
margin-bottom: 0.15rem;
>p {
font-size: 0.4rem;
}
i {
margin-left: 0.1rem;
display: inline-block;
width: 1.42rem;
height: 0.42rem;
background-image: url('../IMG/icon100.png');
background-size: 5.6rem 5.1rem ;
background-position: -4.17rem -2.11rem;
}
}
>div:nth-of-type(2) {
font-size: 0.3rem;
margin-bottom: 0.17rem;
>span:nth-of-type(1) {
color: #f8b50a;
}
>span:nth-of-type(2) {
color: #999999;
}
}
>section:nth-of-type(1) {
@include f__ce;
margin-bottom: 0.17rem;
>p {
font-size: 0.3rem;
color: #999999;
@include f__ce;
line-height: 1;
>span {
font-size: 0.34rem;
margin-left: 0.12rem;
color: #f2b61f;
}
}
>p:nth-of-type(1) {
padding-right: 0.27rem;
border-right: 2px solid #c3c3c3;
}
>p:nth-of-type(n+2) {
margin-left: 0.27rem;
}
}
// 2
>p:nth-of-type(1) {
margin-bottom: 0.06rem;
font-size: 0.3rem;
color: #646464;
}
// 3
>p:nth-of-type(2) {
font-size: 0.3rem;
color: #646464;
}
}
// 右按钮
>div:nth-of-type(2) {
.red {
color: red;
border-color: red;
}
a {
display: inline-block;
padding: 0.1rem ;
border: 2px solid #0ca4f0;
color: #0ca4f0;
font-size: 0.3rem;
border-radius: 10px;
@include f__ce;
>i {
height: 0.32rem;
width: 0.36rem;
display: inline-block;
background-image: url(../IMG/icon100.png);
background-size: 5.6rem 5.1rem;
background-position: -5.24rem 0;
margin-right: 0.1rem;
}
}
}
}
}
body {
min-width: 10.8rem;
overflow-x: hidden;
overflow-y: scroll;
::selection {
background-color: skyblue;
color: white;
}
background-color: #f5f5f5;
font-size: 0.4rem;
.login_reg {
z-index: 999;
width: 100%;
box-sizing: border-box;
position: fixed;
top: 0.75rem;
padding: 0.4rem 0.44rem;
font-size: 0.52rem;
color: white;
@include f_be_ce;
background-color: #db413a;
border-bottom: 2px solid #ad4f48;
>div:nth-of-type(1) {
@include f_ce_ce;
flex: 1;
>a {
@include f_be_ce;
>img {
margin-right: 0.45rem;
height: 0.6rem;
width: 0.6rem;
}
}
>p {
padding-left: 0.45rem;
border-left: 2px solid #a9261d;
flex: 1;
}
}
>i {
display: inline-block;
width: 0.68rem;
height: 0.65rem;
background-image: url('../IMG/icon100.png');
background-size: 5.6rem 5.1rem;
background-position: -4.91rem -3.99rem;
}
>p:nth-of-type(1) {
>a {
color: white;
}
}
}
// header
.dai_reYing {
box-sizing: border-box;
width: 10.8rem;
position: fixed;
font-size: 0.4rem;
top: 0.75rem;
height: 1.5rem;
background-color: #d33f36;
padding: 0.27rem 0.4rem;
box-sizing: border-box;
@include f__ce;
>select {
font-size: 0.4rem;
color: white;
background-color: transparent;
border: 0;
outline: none;
optgroup,option {
background-color: #d33f36;
color: white;
font-size: 0.4rem;
border: 0;
outline: none;
}
}
>div:nth-of-type(1) {
flex: 1;
>nav {
width: 5.72rem;
margin: 0 auto;
height: 0.97rem;
box-sizing: border-box;
background-color: #b42019;
border-radius: 10px;
>ul{
height: 100%;
@include f_be_ce;
li {
width: 100%;
>a {
color: white;
padding: 0.15rem 0.55rem 0.13rem;
border-radius: 10px;
&:hover {
color: #b42019;
background-color: white;
}
}
}
}
}
}
>label>img {
width: 0.6rem;
height: 0.6rem;
}
}
// 搜索
.select {
width: 10.8rem;
position: fixed;
z-index: 2;
top: 2.2rem;
background-color: #d33f36;
padding: 0.32rem 0.28rem;
box-sizing: border-box;
>input {
height: 0.84rem;
width: 10.2rem;
border-radius: 0.42rem;
padding: 0.18rem 0.4rem;
box-sizing: border-box;
font-size: 0.4rem;
&:valid+label {
display: none;
}
}
>label {
display: inline-block;
color: #a8a8a8;
position: absolute;
top: 0.47rem;
right: 3.2rem;
>span {
>i {
display: inline-block;
width: 0.39rem;
height: 0.41rem;
background-image: url('../IMG/icon100.png');
background-size: 5.6rem 5.1rem;
background-position: -4.61rem -1.52rem;
vertical-align: -3px;
margin-right: 5px;
}
}
}
}
>footer {
border-top: 2px solid #d8d6d6;
width: 10.8rem;
box-sizing: border-box;
background-color: #f5f5f5;
padding: 0.2rem 0.95rem;
position: fixed;
bottom: 1.45rem;
>ul {
width: 100%;
@include f_be_ce;
>a {
display: inline-block;
width: 0.77rem;
height: 1.14rem;
>li {
display: inline-block;
width: 0.77rem;
height: 1.14rem;
background-image: url("../IMG/icon100.png");
background-size: 5.6rem 5.1rem;
}
}
>a:nth-of-type(1)>li {
background-position: 0 -1.59rem;
}
>a:nth-of-type(2)>li {
background-position: -0.93rem -1.57rem;
}
>a:nth-of-type(3)>li {
background-position: -2.06rem -1.57rem;
}
>a:nth-of-type(4)>li {
background-position: -3.02rem -2.77rem;
}
}
}
}
扫一扫
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
