165 lines
2.8 KiB
CSS
165 lines
2.8 KiB
CSS
/* 页面公用的css样式 */
|
||
@import "./color.css";
|
||
@import "./size.css";
|
||
@import "./utils.css";
|
||
|
||
.header {
|
||
width: 100%;
|
||
left: 0;
|
||
top: 0;
|
||
background-color: var(--whiteColor);
|
||
height: .96rem;
|
||
z-index: 999;
|
||
padding-top: .08rem;
|
||
|
||
.icon-fanhui {
|
||
font-size: .44rem !important;
|
||
}
|
||
}
|
||
|
||
|
||
.content {
|
||
margin-top: .96rem;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
|
||
|
||
.footer {
|
||
width: 100%;
|
||
left: 0;
|
||
bottom: 0;
|
||
height: 1rem;
|
||
background: var(--whiteColor);
|
||
z-index: 999;
|
||
|
||
.active {
|
||
a {
|
||
color: var(--themeColor);
|
||
}
|
||
}
|
||
|
||
li {
|
||
a {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
color: var(--blackColor);
|
||
|
||
p {
|
||
font-size: 0.22rem;
|
||
margin-top: 0.1rem;
|
||
}
|
||
|
||
i {
|
||
font-size: .38rem;
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
/* 这是 theme = 1 的默认布局(垂直)样式
|
||
1：可以横向滑动
|
||
2：一行两个 default-model
|
||
*/
|
||
.recommend-model {
|
||
.title {
|
||
height: 45px;
|
||
font-size: var(--f19);
|
||
font-weight: bolder;
|
||
}
|
||
|
||
.list {
|
||
margin-top: .3rem;
|
||
overflow-x: scroll;
|
||
|
||
}
|
||
|
||
li {
|
||
width: 3rem;
|
||
margin-right: .2rem;
|
||
|
||
&:last-child {
|
||
margin-right: 0;
|
||
}
|
||
|
||
a {
|
||
img {
|
||
width: 100%;
|
||
height: 225px;
|
||
margin-bottom: .18rem;
|
||
border-radius: .14rem;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.text {
|
||
font-size: var(--f17);
|
||
color: var(--textColor);
|
||
|
||
margin-bottom: .12rem;
|
||
}
|
||
|
||
.desc {
|
||
font-size: var(--f10);
|
||
color: var(--tipsTextColor);
|
||
|
||
.time {}
|
||
|
||
.view {
|
||
.icon-yanjing {
|
||
margin-right: .06rem;
|
||
}
|
||
|
||
span {}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.default-model {
|
||
margin-top: .8rem;
|
||
.list {
|
||
flex-wrap: wrap;
|
||
overflow-x: auto;
|
||
|
||
li {
|
||
width: 3.32rem;
|
||
margin-bottom: .4rem;
|
||
&:nth-child(2n) {
|
||
margin-right: 0;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 这是 theme = 2 的布局样式代码
|
||
图片和文字左右布局
|
||
*/
|
||
.item-theme-horizontally {
|
||
width: 100% !important;
|
||
|
||
a {
|
||
display: flex;
|
||
|
||
img {
|
||
width: 1.8rem !important;
|
||
height: 1.26rem !important;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.r {
|
||
width: calc(100% - 96px);
|
||
margin-left: .1rem;
|
||
}
|
||
|
||
.text {
|
||
overflow: visible;
|
||
white-space: revert;
|
||
font-size: var(--f14) !important;
|
||
line-height: 1.4;
|
||
|
||
}
|
||
}
|
||
} |