开发工具显示的样式和手机显示的样式不一样?
发布于 5 年前 作者 yancheng 11534 次浏览 来自 问答

开发工具显示的样式。

这是手机端显示的样式(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;
}  
回到顶部