<template>
  <div
    style="
      padding: 24px 12%;
      background-color: #f7f7f7;
      min-height: calc(100vh - 155px);
    "
  >
    <div style="margin-bottom: 20px">
      <el-card ref="navBar">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/career/gkmc/index' }"
            >高考名词</el-breadcrumb-item
          >
        </el-breadcrumb>
      </el-card>
    </div>
    <div class="content">
      <el-card>
        <p class="tit">{{ info.name }}</p>
        <div v-html="info.content"></div>
        <div class="prev" v-if="info.prev" @click="toDetail(info.prev.id)">
          {{ "<<" + info.prev.name }}
        </div>
        <div class="next" v-if="info.next" @click="toDetail(info.next.id)">
          {{ info.next.name }}>>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { detail } from "@/api/webApi/career-other";
export default {
  data() {
    return {
      info: {},
    };
  },
  created() {
    let { id } = this.$route.query;

    detail({ id: id }).then((res) => {
      this.info = res.data;
      console.log(res);
    });
  },
  methods: {
    toDetail(id) {
      detail({ id: id }).then((res) => {
        this.info = res.data;
        console.log(res);
      });
    },
  },
};
</script>

<style lang="scss">
.tit {
  text-align: center;
  padding: 10px 0;
  font-size: 32px;
  margin-bottom: 24px;
}
.prev {
  float: left;
  padding: 10px;
  cursor: pointer;
}
.next {
  float: right;
  padding: 10px;
  cursor: pointer;
}
.prev:hover{
    color:#47c6a2;
}
.next:hover{
    color:#47c6a2;
}
</style>

