<!--
 * @Date: 2024-10-18 12:06:09
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2024-11-04 09:40:35
 * @FilePath: /hager/src/views/solution/case.vue
 * @Description: 文件描述
-->
<template>
  <div class="hager-case-page">
    <hager-box>
      <div style="margin-top: 1.5rem;">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item v-if="!is_xs">解决方案</el-breadcrumb-item>
          <el-breadcrumb-item>商建解决方案</el-breadcrumb-item>
          <el-breadcrumb-item>成功案例</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </hager-box>
    <hager-box class="box-n">
      <hager-h1 title="深圳华侨城洲际酒店" sub="异域风情 奢华享受"></hager-h1>
    </hager-box>
    <hager-box>
      <div class="case-title">{{ title }}</div>
      <div :class="['case-content', is_xs ? 'xs' : '']" v-html="content"></div>
    </hager-box>
  </div>
</template>

<script>
import mixin from 'common/mixin';
import hagerBox from '@/components/common/hagerBox';
import hagerH1 from '@/components/common/hagerH1.vue';
import { getNewsDetailAPI } from "@/api/hager.js";

export default {
  components: { hagerBox },
  mixins: [mixin.init],
  data () {
    return {
      title: '默认标题',
      content: '默认内容',
    }
  },
  async mounted () {
    const { code, data } = await getNewsDetailAPI({ id: this.$route.query.id });
    if (code) {
      this.title = data.post_title;
      this.content = data.product_advantages;
    }
  },
  methods: {

  }
}
</script>

<style lang="less" scoped>
  .hager-case-page {
    .top-img {
      width: 100%;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      position: relative;
      height: 25rem;
      &.xs {
        height: 12rem;
      }
      .top-center {
        position: absolute;
        transform: translateY(50%); /* 垂直与水平居中 */
      }
    }

    .case-title {
      color: @secondary-color;
      text-align: center;
      font-size: 1.75rem;
      font-weight: bold;
      margin: 3rem 0;
    }

    :deep(.case-content) {
      margin-bottom: 2rem;
      &.xs {
        img {
          width: 100%;
          height: auto;
        }
      }
    }
  }
</style>