问题遇到的现象和发生背景
实在找不到解决办法了，代码写的也乱糟糟的，希望大家能帮我把
这个样式
改为
本来尝试了articl-block：nth-of-type（1）{
merggin-top：50rpx}
发现这个筛选那一行也跟着动了
问题相关代码，请勿粘贴截图
WXML
<view class="sreenBigBox">
<view class="sreenBox">
<view class="sreenItems">
<view class='sreen ' bindtap="sreenShow">筛选<image class='head {{sreenShow&&"rotating"}}' src="/images/tips/79.png"/></view>
<view class="sort" bindtap="showModal">新手教学<image class='head {{sortShow&&"rotating"}}' src="/images/tips/new.png"/></view>
</view>
</view>
<view class="sreenConainer" style="height:{{sreenShow?2000:0}}rpx">
<view class="chooseBox">
<scroll-view class="typeBox">
<view class="typeItems" wx:for="{{typeItems}}" wx:key="*this"
bindtap="chooseType" data-index="{{index}}">
<text class="typeItem {{index===typeCurrentIndex?'typeItemAdd':''}}">{{item}}</text>
</view>
</scroll-view>
<scroll-view class="chooseItems" scroll-y>
<block wx:for="{{chooseItems[typeCurrentIndex]}}" wx:key="key">
<view class='ItemLabel {{item.selected===true?"choosing":""}}' data-value="{{item.name}}" bindtap="chooseItem" checked="{{item.selected}}" data-index="{{index}}">
{{item.name}}
</view>
</block>
</scroll-view>
</view>
<view class="buttonConainer">
<button class="cancel" size="mini" bindtap="cancel">取 消</button>
<button class="clear" size="mini" bindtap="clear">清 除</button>
<button class="confirm" size="mini" bindtap="confirm">确 认</button>
</view>
<view style="width: 100%;"/>
<view class='mask' v-if="{{flag}}" bindtap="mask"></view>
</view>
<view class="sreenConainer" style="height:{{sortShow?1000:0}}rpx">
</view>
</view>
<view >
<view class="article-block" wx:for="{{ ArticleLists }}" wx:key="index" bindtap="copybv" data-bv="{{ item.bv}}">
<view class="article-text">
<view class="article-title">{{ item.title }}</view>
</view>
</view>
</view>
WXSS
/* 筛选 */
.sreenBigBox{
position: fixed;
z-index: 999;
}
.sreenBox{
display: flex;
flex-direction:unset;
background-color: white;
width: 750rpx;
height: 70rpx;
z-index: 999999999999;
border-bottom-width:2rpx;
border-bottom-style:solid;
border-bottom-color:#f1f2f3
}
.sreenItems{
display: flex;
flex-direction: unset;
align-items: center;
flex:2;
}
.sort,
.sreen{
position: relative;
display: flex;
align-items: center;
background-color: #f1f1f1;
color: #666666;
font-size: 25rpx;
font-weight: 500;
border-radius: 20rpx;
margin-left: 6%;
padding:0.7em;
height: 70%;
letter-spacing: 0.3em;
}
.head{
height: 25rpx;
width: 25rpx;
}
.rotating{
transform: rotate(90deg);
transition: all 600ms;
}
.specailItems{
display: flex;
flex-direction: unset;
flex:1;
}
/* 下拉框 */
.sreenConainer{
z-index: 999;
position: fixed;
width: 100%;
overflow: hidden;
transition: height 200ms;
display: flex;
flex-direction: column;
}
.chooseBox{
display: flex;
flex-direction:unset;
border-bottom-width:2rpx;
border-bottom-style:solid;
border-bottom-color:#f1f2f3;
background-color: white;
}
.typeBox{
display: flex;
flex-direction:column;
flex:0.8;
margin-bottom: 25rpx;
border-right-width:2rpx;
border-right-style:solid;
border-right-color:#f1f2f3
}
.typeItems{
margin-top: 25rpx;
display: flex;
justify-content: center;
align-items: center;
}
.typeItem{
display: flex;
color: #696969;
font-weight: 500;
height: 30rpx;
font-size: 25rpx;
padding: 0rpx 10rpx 0rpx 10rpx;
letter-spacing: 0.3em;
}
.typeItemAdd{
border-left: 7rpx solid #96bff0;
}
.chooseItems{
flex:3;
display: flex;
margin-top: 20rpx;
}
.ItemLabel{
display: inline-block;
width: 100rpx;
font-size: 25rpx;
text-align: center;
line-height: 60rpx;
font-weight: 400;
color:#696969;
}
.choosing{
color: #96bff0;
font-weight: 600;
}
.buttonConainer{
background-color: white;
height: 90rpx;
display: flex;
}
.cancel{
display: flex !important;
justify-content: center;
align-items: center;
flex-direction: column;
height: 50rpx;
width: 130rpx !important;
color: #6a6a6a;
background-color: #f1f1f1;
font-size: 28rpx !important;
margin-top: 15rpx;
margin-bottom: 15rpx;
margin-left: 100rpx;
margin-right: 30rpx;
}
.clear{
display: flex !important;
justify-content: center;
align-items: center;
flex-direction: column;
height: 50rpx;
width: 130rpx !important;
color: #6a6a6a;
background-color: #f1f1f1;
font-size: 28rpx !important;
margin-top: 15rpx;
margin-bottom: 15rpx;
margin-left: 40rpx;
margin-right: 30rpx;
}
.confirm{
display: flex !important;
justify-content: center;
align-items: center;
flex-direction: column;
height: 50rpx;
width: 200rpx !important;
color: #ffffff;
background-color: #6b9edd;
font-size: 28rpx !important;
margin-top: 15rpx;
margin-bottom: 15rpx;
margin-left: 35rpx;
margin-right: 30rpx;
}
/* 遮罩层 */
.mask{
margin-top: 560rpx;
width:100%;
height:100%;
position:absolute;
background-color:#999;
z-index:9999;
top:0;
left:0;
opacity:0.5;
}
.home-block {
margin-bottom: 200rpx;
}
.article-block {
display: flex;
height: 50rpx;
width: 350rpx;
margin: 0rpx 50rpx 0 50rpx;
padding: 20rpx 0 20rpx 0;
border-top: 1rpx solid rgba(222, 222, 222, 0.5);
}
.article-text {
position:absolute; /* 父元素绝对定位 */
flex: 1;
height: 22rpx;
width: 1000rpx;
}
.article-title {
position: absolute; /* 垂直居上 */
top: 10rpx; /* 垂直居上 */
font-size: 28rpx;
padding-bottom: 10rpx;
font-weight: bold;
}
.article-content{
position: absolute; /* 垂直居上 */
top: 60rpx; /* 垂直居上 */
font-size: 28rpx;
padding-bottom: 10rpx;
}
.article-time {
position: absolute; /* 垂直居下 */
bottom: 0rpx; /* 垂直居下 */
font-size: 22rpx;
color: darkgrey;
padding-bottom: 10rpx;
}
.article-image {
position: absolute;
right: 30rpx;
width: 300rpx;
height: 200rpx;
}
我的解答思路和尝试过的方法
本来尝试了articl-block：nth-of-type（1）{
merggin-top：50rpx}但是失败了
