web-common/src/layout/detail/content.vue

<template>
  <div id="mainRight">
    <el-row>
      <el-col :span="24" class="mainRight">
        <el-col :span="24" class="top">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }"><i class="el-icon-s-home"></i>网站首页</el-breadcrumb-item>
            <el-breadcrumb-item>导航一</el-breadcrumb-item>
            <el-breadcrumb-item>数据详情</el-breadcrumb-item>
          </el-breadcrumb>
        </el-col>
        <el-col :span="24" class="info">
          <el-col :span="24">
            <el-col :span="24" class="title">
              {{contentList.title}}
            </el-col>
            <el-col :span="24" class="time">
              发布时间：{{contentList.publish_time}}
            </el-col>
          </el-col>
          <el-col :span="24" class="image">
            <el-image :src="contentList.pic" v-if="contentList.pic"></el-image>
            <el-col :span="24" v-else></el-col>
          </el-col>
          <el-col :span="24" class="content" v-html="contentList.content">
          </el-col>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'mainRight',
  props: {
    contentList: null,
  },
  components: {},
  data: () => ({}),
  created() { },
  computed: {},
  methods: {},
};
</script>

<style lang="less" scoped>
.mainRight {
  min-height: 500px;
  background-color: rgba(255, 255, 255, 0.8);
}
.top {
  margin: 10px 15px;
}
/deep/.el-breadcrumb {
  font-size: 17px;
}
.fenxiang {
  height: 18px;
  margin: 10px 0;
}
.info .title {
  text-align: center;
  font-size: 29px;
  color: red;
  padding: 15px 0;
}
.info .time {
  text-align: center;
  color: #999;
  padding: 0 0 15px 0;
  font-size: 20px;
}
.info .image {
  text-align: center;
}
.info .content {
  font-size: 21px;
  color: #333;
  text-indent: 2rem;
  line-height: 40px;
}
</style>