新增解决方案成功案例详情页

 /*
 /*
  * @Date: 2024-08-26 10:42:15
  * @Date: 2024-08-26 10:42:15
  * @LastEditors: hookehuyr hookehuyr@gmail.com
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-10-23 16:46:46
+ * @LastEditTime: 2024-11-04 09:33:28
  * @FilePath: /hager/src/route.js
  * @FilePath: /hager/src/route.js
  * @Description: 文件描述
  * @Description: 文件描述
  */
  */
@@ -51,6 +51,15 @@ export default [{
   },
   },
   children: []
   children: []
 }, {
 }, {
+  path: '/solution/case',
+  name: '成功案例',
+  component: () => import('@/views/solution/case'),
+  meta: {
+    title: '海格电气',
+    tag: 'solution'
+  },
+  children: []
+}, {
   path: '/about',
   path: '/about',
   name: '关于海格',
   name: '关于海格',
   component: () => import('@/views/about'),
   component: () => import('@/views/about'),

+<!--
+ * @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>

 <!--
 <!--
  * @Date: 2024-09-29 15:49:27
  * @Date: 2024-09-29 15:49:27
  * @LastEditors: hookehuyr hookehuyr@gmail.com
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-11-01 11:52:12
+ * @LastEditTime: 2024-11-04 09:34:50
  * @FilePath: /hager/src/views/solution/detail.vue
  * @FilePath: /hager/src/views/solution/detail.vue
  * @Description: 文件描述
  * @Description: 文件描述
 -->
 -->
@@ -56,7 +56,7 @@
       <hager-h1 title="成功案例" sub="Success Cases" style="margin: 2rem 0;"></hager-h1>
       <hager-h1 title="成功案例" sub="Success Cases" style="margin: 2rem 0;"></hager-h1>
       <div v-if="!is_xs">
       <div v-if="!is_xs">
         <div class="hager-success-cases">
         <div class="hager-success-cases">
-          <div class="card" v-for="(item, index) in success_data_list" :key="index">
+          <div @click="goToCase(item)" class="card" v-for="(item, index) in success_data_list" :key="index">
             <img :src="item.img" alt="学校图片" class="card-image">
             <img :src="item.img" alt="学校图片" class="card-image">
             <div class="card-content">
             <div class="card-content">
               <h3>{{ item.title }}</h3>
               <h3>{{ item.title }}</h3>
@@ -72,7 +72,7 @@
       <div v-else>
       <div v-else>
         <swiper ref="mySuccessSwiper" class="swiper" :options="swiperOption" @slideChange="onSuccessSlideChange">
         <swiper ref="mySuccessSwiper" class="swiper" :options="swiperOption" @slideChange="onSuccessSlideChange">
           <swiper-slide v-for="(item, index) in success_data_list" :key="index">
           <swiper-slide v-for="(item, index) in success_data_list" :key="index">
-            <div class="hager-success-cases xs">
+            <div @click="goToCase(item)" class="hager-success-cases xs">
               <div class="card">
               <div class="card">
                 <img :src="item.img" alt="学校图片" class="card-image">
                 <img :src="item.img" alt="学校图片" class="card-image">
                 <div class="card-content">
                 <div class="card-content">
@@ -261,6 +261,11 @@ export default {
         path: '/product/detail'
         path: '/product/detail'
       });
       });
     },
     },
+    goToCase (v) {
+      this.$router.push({
+        path: '/solution/case'
+      });
+    },
     prevProductBtn () {
     prevProductBtn () {
       this.$refs.myProductSwiper.$swiper.slidePrev();
       this.$refs.myProductSwiper.$swiper.slidePrev();
     },
     },