PC端预览手机页面显示

Yui_NIE

已于 2024-03-29 17:29:24 修改

阅读量498

点赞数 8

文章标签：前端 javascript java

于 2024-03-28 20:03:44 首次发布

本文链接：https://blog.csdn.net/Yui_NIE/article/details/137122674

版权

 <div class="photoView">
        <div class="mobilePreview">
          <div class="content">
            <div class="title">标题：{{ title }}</div>
            <div class="time">发布日期：{{ publishTime }}</div>
            <div class="article" v-html="richText"></div>
          </div>
        </div>
      </div>

<style type="text/css" lang="scss">
.mobilePreview {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 400px;
  height: 750px;
  margin-top: -400px;
  margin-left: -200px;
  border: 20px solid #000;
  border-radius: 60px;
  max-height: 750px; //设置最大的高度
  overflow: auto; // 超出这个最大高度的数据，会被隐藏起来，上下滑动
  overflow-x: hidden; //隐藏x轴滚动条
}
.mobilePreview::-webkit-scrollbar {
  display: none;
}
.photoView {
  width: 100%;
  height: 700px;
  position: relative;
}
.content {
  padding: 15px 20px;

  .title {
    font-weight: 1000;
  }

  .time {
    width: 100%;
    text-align: center;
    margin: 15px 0;
  }
}
</style>

富文本样式调整：http://t.csdnimg.cn/OywKF