web-center/src/layout/detail/contInfo.vue

<template>
  <div id="contInfo">
    <el-row>
      <el-col :span="24" class="contInfo">
        <el-col :span="24" class="top" :style="`border-color:${bordColor}`">
          <el-col :span="18" class="topTitle">
            <span :style="`border-color:${bordBottomColor};color:${color}`">{{ contInfos.parent }}</span>
          </el-col>
          <el-col :span="6" class="topBread">
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item>当前位置:</el-breadcrumb-item>
              <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
              <el-breadcrumb-item>信息详细</el-breadcrumb-item>
            </el-breadcrumb>
          </el-col>
        </el-col>
        <el-col :span="24" class="info">
          <el-col :span="24" class="title">
            <span>{{ contInfos.title }}</span>
          </el-col>
          <el-col :span="24" class="fenTime">
            <el-col :span="4" class="date">信息来源：{{ contInfos.origin }} </el-col>
            <el-col :span="15" class="date">
              发布时间：{{ contInfos.meta && contInfos.meta.createdAt ? new Date(contInfos.meta.createdAt).toLocaleDateString() : '' || '' }}
            </el-col>
            <el-col :span="5" class="fenxiang">
              <share></share>
            </el-col>
          </el-col>
          <el-col :span="24" class="images" v-if="contInfos.pic">
            <el-image style="width:800px;height:370px;" :src="contInfos.pic"></el-image>
          </el-col>
          <el-col :span="24" class="content">
            <p v-html="contInfos.content"></p>
          </el-col>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import share from '@/layout/share.vue';
export default {
  name: 'contInfo',
  props: {
    contInfos: null,
    bordColor: null,
    bordBottomColor: null,
    color: null,
  },
  components: {
    share,
  },
  data: () => ({
    title: '就业动态',
  }),
  created() {},
  computed: {},
  methods: {},
};
</script>

<style lang="less" scoped>
p {
  padding: 0;
  margin: 0;
}
.contInfo {
  min-height: 820px;
  margin: 40px 0 40px 0;
  border: 1px solid #e6e6e6;
  background-color: #ffffff;
}
.top {
  height: 40px;
  background-color: #f5f5f8;
  margin: 2px 2px 0 2px;
  border-bottom: 1px solid;
  width: 1264px;
}
.top .topTitle span {
  display: inline-block;
  height: 38px;
  line-height: 38px;
  text-align: center;
  font-size: 18px;
  border-bottom: 2px solid;
}
.top .topBread {
  padding: 12px 0;
}
.info .title {
  height: 70px;
  line-height: 70px;
  text-align: center;
}
.info .title span {
  font-size: 18px;
  color: #444444;
}
.info .fenTime {
  height: 38px;
  line-height: 38px;
  background-color: #eeeeee;
  margin: 0 0 15px 0;
}
.info .fenTime .fenxiang {
  height: 30px;
  line-height: 30px;
  padding: 0 20px;
}
.date {
  padding: 0 20px;
}
.images {
  text-align: center;
}
.content {
  padding: 10px 30px;
}
.content p {
  font-size: 16px;
  text-indent: 2rem;
  color: #333;
  line-height: 35px;
}
</style>