/* pages/home/home.wxss */
.banner {
width: 750rpx;
height: 390rpx;
z-index: -1;
}
.index_top {
width: 670rpx;
height: 224rpx;
background: #FFFFFF;
box-shadow: 0rpx 4rpx 8rpx 5rpx rgba(245, 33, 84, 0.1);
border-radius: 20rpx 20rpx 20rpx 20rpx;
margin-top: -30rpx;
z-index: 99;
position: absolute;
}
.index_heard_image{
width: 88rpx;
height: 88rpx;
border-radius: 50%;
border: 4rpx solid #FF8EA9;
}
.h_bar{
width: 670rpx;
height: 2rpx;
background: linear-gradient(90deg, rgba(255,135,142,0) 0%, #FF858C 49%, rgba(255,135,142,0) 100%);
border-radius: 0rpx 0rpx 0rpx 0rpx;
opacity: 1;
}
.index_title{
font-size: 20rpx;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
line-height: 20rpx;
background: linear-gradient(135deg, #FF8687 0%, #FF8EA9 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.index_pop{
width: 43rpx;
height: 43rpx;
background: linear-gradient(305deg, #FFD4DE 0%, rgba(255,229,235,0.82) 100%);
opacity: 1;
border-radius: 50%;
}
.menu_title{
display: flex;
flex-direction: row;
margin-left: 30rpx;
}
.menu_title_text{
margin-left: -30rpx; margin-top: 10rpx;
}
.menu{
width: 100rpx;
height: 100rpx;
background: linear-gradient(135deg, #FFB4B4 0%, #FF8EA9 100%);
border-radius: 20rpx 20rpx 20rpx 20rpx;
opacity: 1;
}
/*首页列表文章 顶部的item 布局*/
.home__list{
width: calc(100%-6px);
background: white;
border-radius: 4px;
margin: 30rpx;
clear: both;
}
/*首页列表文章 顶部的item 布局*/
.home__list__topitem{
border-bottom: 1rpx solid #f3f3f3;
}
/*首页列表文章 顶部的的item 布局 的图标*/
.home__list-topitem-icon{
/*垂直居中*/
display: flex;
justify-content:center;
align-items:Center;
width: 20px;
height: 20px;
margin-right: 6px
}
/*首页列表文章 顶部的的item 布局 的文字*/
.home__list-topitem-text{
font-size: 16px;
font:medium;
color: #60c7ed
}
/*首页列表文章 item 最外层布局*/
.home__list-item{
/*border-bottom: 1rpx solid #E5E5E5;*/
/*left: 20px*/
position: relative;
margin-bottom: 30rpx;
box-shadow: 0rpx 4rpx 8rpx 5rpx rgba(245,33,84,0.1);
border-radius: 20rpx;
}
/*item 分割线*/
.home__list-item__top{
position: absolute;
/*width: 100%;*/
height: 1rpx;
background: #f3f3f3;
top: 0px;
left: 15px;
right: 15px
}
/*首页列表文章 item 外层布局 右侧*/
.home__list-item__right{
width: 100%;
height: 32px;
position:relative;
}
/*首页列表文章 item 的文章图片*/
.home__list__img{
width: 80px;
height: 100%;
vertical-align: top;
/*垂直居中*/
display: flex;
justify-content:center;
align-items:Center;
}
.home__list-item-content{
margin-left: 15px
}
/*首页列表文章 item 内的title 布局*/
.home__list-item__title{
position:absolute;
top: 0px;
left: 0px;
right: 60px;
font-size: 14px;
color: #5e5e5e;
font:normal;
}
/*首页列表文章 item 内的的点赞 布局*/
.home__list-item__like{
position: absolute;
top: 0px;
right: 0px;
}
/*首页列表文章 item 内的点赞手图标*/
.home__list-item__title-like-icon {
position: absolute;
width: 10px;
height: 10px;
right: 0px;
left: 0px;
top: 7px
}
/*首页列表文章 item 内的的点赞 数*/
.home__list-item__title-like-count {
/*这个宽度设置后可以变化点赞数整个布局的位置前移后移*/
width: 30px;
margin-left:15px;
font-size: 10px;
margin-top: 4px;
color: #c8c6c6;
overflow: hidden;
text-overflow: ellipsis;
}
.promptText {
background: #f4879b;
font: bold;
text-align: center;
font-size: 10px;
color: white;
}
.avatar{
width: 100%;
height:100%;
}
/*tab框切换*/
.nav_tab{
width:100%;
height:100rpx;
display:flex;
flex-direction:row;
}
.show{
line-height:100rpx;
text-align:center;
width: 150rpx;
color:#BDBDBD;
font-size:28rpx;
opacity: 0.5;
font-weight: 500;
}
.hidden{
line-height:100rpx;
text-align:center;
color:#FF8EA9;
width: 150rpx;
font-size:28rpx;
font-weight: 500;
}
.nav_underline{
background:#FF8EA9;
width:54rpx;
height:6rpx;
margin-top:-10rpx;
margin-left:70rpx;
border-radius:8rpx;
}
.item_bg{
width: 670rpx;
height: 200rpx;
background: #FFFFFF;
box-shadow: 0px 2rpx 8rpx 2rpx rgba(245,33,84,0.1);
border-radius: 20rpx 20rpx 20rpx 20rpx;
opacity: 1;
margin: 40rpx;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.title{
height: 39rpx;
font-size: 28rpx;
font-family: PingFang SC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
line-height: 33rpx;
margin-left: 20rpx;
margin-top: 24rpx;
}
.content{
margin-left: 20rpx;
margin-top: 24rpx;
width: 436rpx;
height: 104rpx;
font-size: 24rpx;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #828282;
line-height: 28rpx;
}
.picture{
width: 160rpx;
height: 160rpx;
border-radius: 10rpx;
margin: 20rpx;
}