开发工具显示的样式。
这是手机端显示的样式(Android没问题)。
<scroll-view scroll-x="true" class="scroll-class">
<view class="Question_box" bindtap="goQuestion">
<view class="Question">
<view class="flex-Center question-On">
<text class="flex-Center Question_icon Question_icon_Q">Q</text>
<view class="ellipsis Question_title">牛奶过敏是什么样的体验?如何检测过敏原?</view>
</view>
<view class="question-Under">
<view class="flex-Center replyer">
<view class="flex-Center">
<text class="flex-Center Question_icon Question_icon_A">A</text>
<open-data type="userNickName"></open-data>
</view>
<image src="/images/Avatar.jpeg" class="avator"></image>
</view>
<view class="ellipsis question_a">先搞清楚是牛奶不耐受还是牛奶过敏。检测过敏原的话,皮肤点刺和特异性血清检查都可以参考,但金标准是双盲食物激发试验。当然了,如果你皮肤点刺和特异性血清检查结果牛奶都是阴性的话,基本就可以排除牛奶过敏了。</view>
</view>
</view>
<!-- -->
<view class="Question">
<view class="flex-Center question-On">
<text class="flex-Center Question_icon Question_icon_Q">Q</text>
<view class="ellipsis Question_title">牛奶过敏是什么样的体验?如何检测过敏原?</view>
</view>
<view class="question-Under">
<view class="flex-Center replyer">
<view class="flex-Center">
<text class="flex-Center Question_icon Question_icon_A">A</text>
<open-data type="userNickName"></open-data>
</view>
<image src="/images/Avatar.jpeg" class="avator"></image>
</view>
<view class="ellipsis question_a">先搞清楚是牛奶不耐受还是牛奶过敏。检测过敏原的话,皮肤点刺和特异性血清检查都可以参考,但金标准是双盲食物激发试验。当然了,如果你皮肤点刺和特异性血清检查结果牛奶都是阴性的话,基本就可以排除牛奶过敏了。</view>
</view>
</view>
<view class="Question">
<view class="flex-Center question-On">
<text class="flex-Center Question_icon Question_icon_Q">Q</text>
<view class="ellipsis Question_title">牛奶过敏是什么样的体验?如何检测过敏原?</view>
</view>
<view class="question-Under">
<view class="flex-Center replyer">
<view class="flex-Center">
<text class="flex-Center Question_icon Question_icon_A">A</text>
<open-data type="userNickName"></open-data>
</view>
<image src="/images/Avatar.jpeg" class="avator"></image>
</view>
<view class="ellipsis question_a">先搞清楚是牛奶不耐受还是牛奶过敏。检测过敏原的话,皮肤点刺和特异性血清检查都可以参考,但金标准是双盲食物激发试验。当然了,如果你皮肤点刺和特异性血清检查结果牛奶都是阴性的话,基本就可以排除牛奶过敏了。</view>
</view>
</view>
</view>
</scroll-view>
wxss
.channel-Q {
padding: 0;
}
.scroll-class {
display: flex;
white-space: nowrap;
}
.Question_box {
margin-left: 40rpx;
padding: 50rpx 0;
}
.Question {
background: var(--white);
box-shadow: 0px 8px 35px rgba(0, 0, 0, 0.12);
border-radius: 30rpx;
display: inline-block;
margin-right: 40rpx;
width: 600rpx;
}
.question-On {
height: 60px;
padding: 0 40px 0 15px;
}
.question-Under {
background: var(--cream);
padding: 30rpx;
border-radius: 0 0 30rpx 30rpx;
}
.replyer {
position: relative;
}
.avator {
width: 80rpx;
height: 80rpx;
border-radius: 100rpx;
overflow: hidden;
position: absolute;
flex-shrink: 0;
right: 0;
top: -70rpx;
box-shadow: 0px 8px 15px rgba(48, 57, 67, 0.12);
}
.question_a {
font-size: 28rpx;
opacity: 0.6;
margin-top: 20rpx;
}