feat(development): 添加公司发展史页面

- 新增 development 路由和相关组件
- 实现时间轴和历史事件展示功能
- 添加交互逻辑，支持时间轴点击切换事件
- 优化页面样式，使用绝对定位和相对定位实现布局

src/router/app/index.js

@@ -7,6 +7,8 @@ const home = () => import('@/views/app/Home')
 const pages = () => import('@/views/pages.vue')
 const navLayout = () => import('@/views/app/layout/nav-layout')
 const introduction = () => import('@/views/introduction/introduction.vue')
+const development = () => import('@/views/development/development.vue')
+
 /**
  * Note: sub-menu only appear when route children.length >= 1
  * Detail see: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
@@ -70,6 +72,10 @@ export default [
       {
         path: 'introduction',
         component: introduction
+      },
+      {
+        path: 'development',
+        component: development
       }
     ]
   },

src/views/development/components/time-line-history.vue

@@ -0,0 +1,168 @@
+<script>
+import { watch } from 'vue'
+
+export default {
+  name: "time-line-history",
+  props: {
+    history: {
+      type: Array,
+      default: () => []
+    },
+    active: {
+      type: String,
+      default: null
+    },
+    times: {
+      type: Array,
+      default: () => []
+    }
+  },
+  emit: ['change-time'],
+  methods: {
+    handleClick(time) {
+      this.$emit('change-time', time)
+      this.scroll(this.times.indexOf(time))
+    },
+    scroll(index) {
+      const box = this.$refs.box[index]
+      // 检测边界，如果具体父节点窗口的位置最或者右，就把该元素滚动到父节点窗口的中间
+      const parent = box.parentElement
+
+      const parentRect = parent.getBoundingClientRect()
+      const boxRect = box.getBoundingClientRect()
+      if (boxRect.left < parentRect.left || boxRect.right > parentRect.right) {
+        parent.scrollTo({
+          left: boxRect.left + parent.scrollLeft - parentRect.width / 2,
+          behavior: 'smooth'
+        })
+      }
+
+    }
+  },
+  watch: {
+    active() {
+      this.scroll(this.times.indexOf(this.active))
+    }
+  }
+}
+</script>
+
+<template>
+  <div class="time-line-history">
+    <img src="@/assets/images/pages/development/banner.png" alt="">
+
+    <div class="content">
+      <section ref="box" v-for="(item, index) in history" :key="index" :class="['box', 'box-' + (index),]"
+        @click="handleClick(times[index])">
+        <b class="year" :class="{ 'active': active === times[index] }">{{ times[index] }} <span
+            style="font-size: 14px;">年</span></b>
+        <div> {{ item[times[index]] }}</div>
+      </section>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.time-line-history {
+  position: relative;
+
+  &>img {
+    width: 100%;
+    position: absolute;
+    z-index: -1;
+  }
+
+  .content {
+    width: 60%;
+    margin-left: 20%;
+    overflow: scroll;
+    display: flex;
+    gap: 40px;
+    flex-direction: row nowrap;
+  }
+}
+
+.year {
+  color: #000;
+  position: absolute;
+  font-size: 36px;
+  top: -35%;
+  left: -1%;
+  font-style: italic;
+
+  &::before {
+    position: absolute;
+    content: "";
+    display: block;
+    margin-left: 25%;
+    top: 110%;
+    height: 4px;
+    width: 20px;
+  }
+
+  &::after {
+    position: absolute;
+    content: "";
+    display: block;
+    margin-left: 25%;
+    top: 120%;
+    height: 4px;
+    width: 300px;
+    // transform: translateX(-50%);
+    background-color: #fff;
+  }
+}
+
+.box {
+
+  margin-top: 160px;
+  position: relative;
+  flex-shrink: 0;
+  width: 260px;
+  padding: 20px;
+  background-color: #fff;
+  border-radius: 10px;
+}
+
+.box-0 {
+  background-color: #C81D2D;
+  color: #fff;
+}
+
+.box-0::before {
+  position: relative;
+  top: -30px;
+  content: '';
+  display: block;
+  height: 20px;
+  width: 20px;
+  transform: rotate(45deg);
+  background-color: #C81D2D;
+}
+
+
+.box-1 {
+  background-color: #DDD0B5;
+  color: #541414;
+}
+
+.box-1::before {
+  position: relative;
+  top: -30px;
+  content: '';
+  display: block;
+  height: 20px;
+  width: 20px;
+  transform: rotate(45deg);
+  background-color: #DDD0B5;
+}
+
+/* 最后一个box中的year::after宽度设为0 */
+.box:last-child .year::after {
+  width: 0;
+}
+
+.active::before {
+  background-color: #C81D2D;
+}
+</style>

src/views/development/components/time-line.vue

@@ -0,0 +1,96 @@
+<script>
+
+export default {
+  name: "time-line",
+  props: {
+    times: {
+      type: Array,
+      default: () => []
+    },
+    active: {
+      type: String,
+      default: null
+    }
+  },
+  methods: {
+    handleClick(time) {
+      this.$emit('change-time', time)
+    }
+  },
+  mounted() {
+    this.$emit('change-time', this.times[0])
+  }
+}
+</script>
+
+<template>
+  <div class="time-line-container">
+    <img src="@/assets/images/pages/development/timeline-bgc.png" alt="time-line">
+
+    <section class="time-line">
+      <div class="time" v-for="time in times" :key="time" @click="handleClick(time)"
+        :class="{ 'active': active === time }">
+        {{ time }}
+      </div>
+    </section>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.time-line-container {
+  position: relative;
+
+  &>img {
+    width: 100%;
+  }
+}
+
+.time-line {
+  position: absolute;
+  top: 50%;
+  left: 20%;
+  // width: 100%;
+
+  display: flex;
+  // width: fit-content;
+  flex-direction: row nowrap;
+
+
+  .time {
+    padding: 0 10px 40px 0;
+    cursor: pointer;
+
+    &::before {
+      position: relative;
+      top: 120%;
+      content: '';
+      display: block;
+      height: 4px;
+      width: 250%;
+      border-radius: 10px;
+      background-color: rgba(200, 29, 45, 1);
+    }
+
+    &:last-child:before {
+      width: 0%;
+    }
+
+    &::after {
+      position: relative;
+      top: 40%;
+      transform: translateX(100%);
+      $side: 10px;
+      border-radius: 50%;
+      content: '';
+      display: block;
+      height: $side;
+      width: $side;
+      background-color: rgba(200, 29, 45, 1);
+    }
+  }
+}
+
+.active {
+  background-color: white;
+}
+</style>

src/views/development/development.vue

@@ -0,0 +1,66 @@
+<script>
+import { TimeSelect } from 'element-ui'
+import timeLine from './components/time-line.vue'
+import timeLineHistory from './components/time-line-history.vue'
+import { active } from 'sortablejs'
+
+export default {
+  name: "development",
+  components: {
+    timeLine,
+    timeLineHistory
+  },
+  data() {
+    return {
+      timelineList: [
+        {
+          2025: "2025年幸福人寿将生态建设提升为公司重点任务，与各个领域的前沿机构、组织、企业通力合作，围绕“生活娱乐、养老安排、医疗健康、子女教育、财富管理”五个方面，打造五位一体的“幸福生态圈”。"
+        }, {
+          2023: "幸福人寿全国空中客服业务中心在日肃兰州成立。通过“空中客服”这一全新服务模式，客户借助手机视频连线公司客服人员，即可在线办理业务享受优质快捷、有温度的服务体验。"
+        }, {
+          2022: "幸福人寿创新推出品牌吉祥物“小福鹿鹿”完善公司品牌体系，极大提升了品牌活力。"
+        }, {
+          2020: "原中国银保监会批复幸福人寿变更股东的请示。中国信达资产管理股份有限公司持有的幸福人寿股权转让给诚泰财产保险股份有限公司和东莞市交通投资集团有限公司。为塑造品牌形象，持续提升品牌影响力，幸福人寿启用全新企业标识，发布了新版视觉识别体系。"
+        }, {
+          2016: "经原中国保监会批复，幸福人寿获得经营税优健康险业务资格。"
+        }, {
+          2015: "经原中国保监会批准，幸福人寿开发的“幸福房来宝”成为保险行业首款反向抵押养老险产品。"
+        }, {
+          2012: "幸福人寿VIP客户管理系统、咨询投诉系统、电子保单系统上线，致力于为客户提供更便捷、优质的服务。"
+        }, {
+          2008: "幸福人寿与“国际SOS”签署《急难援助服务协议》，为客户提供全球范围内的紧急救援服务。"
+        }, {
+          2007: "2007年10月31日，获得原中国保监会的开业批复，11月5日，幸福人寿正式成立。幸福人寿电话中心正式上线运营，开通全国统一客户服务热线，整合电话接听、在线服务等功能，打造综合性服务平台。"
+        }
+      ],
+      active: null
+    }
+  }, computed: {
+    times() {
+      const list = []
+      this.timelineList.map(item => list.push(...Object.keys(item)))
+      return list
+    }
+  },
+  methods: {
+    handleTimeChange(time) {
+      console.log(time)
+      this.active = time
+    }
+  }
+}
+</script>
+
+<template>
+  <div>
+    <!-- timeline -->
+    <section>
+      <time-line :active="active" :times="times" @change-time="handleTimeChange"></time-line>
+      <time-line-history :active="active" :history="timelineList" :times="times" @change-time="handleTimeChange"></time-line-history>
+    </section>
+  </div>
+</template>
+
+<style lang="sass" scoped>
+
+</style>