cesuan/pages/articledetail/articledetail.vue

<template>
  <view class="page">
    <view class="box_1">
      <view class="group_1">
        <view class="box_2">
          <view class="section_2">
            <view class="nav-bar_1">
             <view class="searchbtn"></view>
             <input class="searchinput" type="text">
            </view>
          </view>
		  <view class="artdetail">
			  <view class="art_title">{{art.title}}</view>
			  <view>
				<mp-html :content="art.content" />
			  </view>
		  </view>
		  
        </view>
      </view>
    </view>
  </view>
</template>


<script>
  import * as Api from '@/api/page'

  export default {
    data() {
      return {
        // 页面参数
        options: {},
		art:{
			title:'',
			content:''
		}
        
      }
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
      // 当前页面参数
	  
	  Api.articleInfo({article_id:options.article_id})
	    .then(result => {
	  	  this.art = result.data.info;
	  	  console.log(this.art);
	    })
    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {
		
    },

    methods: {
		
      
    },






  }
</script>

<style lang="scss" scoped>
  .page {
    background-color: rgba(255,255,255,1.000000);
    position: relative;
    width: 750rpx;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .box_1 {
    display: flex;
    flex-direction: column;
    width: 750rpx;
  }
  .group_1 {
    width: 750rpx;
    background: url(../../static/greanbg.png) 100% no-repeat;
    background-size: 100% 100%;
    flex-direction: row;
    display: flex;
	min-height: 100vh;
  }
  .box_2 {
    width: 750rpx;
    display: flex;
    flex-direction: column;
  }
  .section_1 {
    width: 651rpx;
    height: 22rpx;
    flex-direction: row;
    display: flex;
    margin: 39rpx 0 0 70rpx;
  }
  .text_1 {
    width: 56rpx;
    height: 19rpx;
    overflow-wrap: break-word;
    color: rgba(255,255,255,1);
    font-size: 28rpx;
    font-family: SFProText-Semibold;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    line-height: 28rpx;
    margin-top: 1rpx;
  }
  .image_1 {
    width: 32rpx;
    height: 20rpx;
    margin: 1rpx 0 0 475rpx;
  }
  .image_2 {
    width: 29rpx;
    height: 20rpx;
    margin-left: 9rpx;
  }
  .group_2 {
    height: 22rpx;
    margin-left: 9rpx;
    display: flex;
    flex-direction: column;
    width: 41rpx;
  }
  .group_3 {
    background-color: rgba(255,255,255,1.000000);
    border-radius: 2rpx;
    width: 34rpx;
    height: 14rpx;
    display: flex;
    flex-direction: column;
    margin: 4rpx 0 0 4rpx;
  }
  .section_2 {
    width: 750rpx;
    margin-top: 19rpx;
    flex-direction: row;
    display: flex;
	background-image: url('../../static/logo.png');
	background-repeat: no-repeat;
	background-position: center;
	background-size: 197rpx;
	height: 220rpx;
  }
  .nav-bar_1 {
    width: 200rpx;
    height: 38rpx;
    margin: 18rpx 0 0 21rpx;
    flex-direction: row;
    display: flex;

	.searchbtn
	{
		width: 50rpx;
		height: 38rpx;
	}
	
	.searchinput
	{
		height: 38rpx;
		width: 150rpx;
		font-size: 24rpx;
		color:#fff;
	}
  }
  
  .art_title
  {
	  font-size: 48rpx;
	  color:#ddd;
	  margin-bottom: 30rpx;
  }

  .artdetail
  {
  	color:#ddd;
  	margin:40rpx 30rpx;
	font-size: 24rpx;
  }
  
</style>