feat(comparison): 添加产品对比功能

- 在路由中添加 /comparison 路径
- 创建产品对比页面和相关组件
- 实现产品对比数据展示和滚动处理
- 集成 Element UI 表格组件
- 优化页面样式和交互

src/views/comparison/index.vue

@@ -0,0 +1,196 @@
+<template>
+  <div class="comparison-container">
+    <div class="main" v-if="!showComparison">
+      <main>
+        <div style="height: 100%">
+          <van-tabs v-model="active" color="#2E5CA9" title-active-color="#2E5CA9">
+            <van-tab :title="item.title" v-for="(item, index) in list" :key="index">
+              <div class="tab-container">
+                <!-- 横向滚动区域 -->
+                <div class="comparison-list" v-if="comparisonMap.length > 0">
+                  <div v-for="compareItem in comparisonMap" :key="compareItem.id" class="comparison-item fs12">
+                    {{ compareItem.title }}
+                    <van-icon name="close" class="close-item" @click="removeItem(compareItem)" />
+                  </div>
+                </div>
+
+                <!-- 可点击添加对比的列表 -->
+                <van-cell-group inset style="margin: 0 !important">
+                  <van-cell v-for="it in item.list" :key="it.id" @click="cellClick(it)">
+                    <template #title>
+                      <div class="cell-title-right-title">{{ it.title }}</div>
+                    </template>
+                    <template #right-icon>
+                      <button
+                        class="cell-title-right-btn fs12"
+                        style="color: #2e5ca9"
+                        :disabled="comparisonMap.find((compareItem) => it.id === compareItem.id)"
+                      >
+                        + 添加对比
+                      </button>
+                    </template>
+                  </van-cell>
+                </van-cell-group>
+              </div>
+            </van-tab>
+          </van-tabs>
+        </div>
+      </main>
+      <div class="button-group">
+        <van-button size="large" class="fs14 fw600" style="color: #fff; background: #2e5ca9" @click="showComparison = true">开始比对</van-button>
+      </div>
+    </div>
+
+    <div v-else>
+      <comparsion :list="comparisonMap"></comparsion>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Tab, Tabs, Cell, CellGroup, Icon } from 'vant'
+import Comparsion from '@/views/comparison/table.vue'
+
+export default {
+  name: 'ComparisonTab',
+  components: {
+    Comparsion,
+    [Tab.name]: Tab,
+    [Tabs.name]: Tabs,
+    [Cell.name]: Cell,
+    [CellGroup.name]: CellGroup,
+    [Icon.name]: Icon,
+  },
+  data() {
+    return {
+      active: 0,
+      list: [
+        {
+          title: '重疾',
+          list: [
+            { id: 1, title: '恒安标准一生无忧庆典版重度恶性肿瘤疾病保险' },
+            { id: 2, title: '恒安标准中老年恶性肿瘤疾病保险（6.0版）' },
+            { id: 3, title: '恒安标准恒鑫世家终身寿险（分红型）' },
+            { id: 4, title: '恒安标准幸福到老长寿2.0养老年金保险（分红型）' },
+            { id: 5, title: '恒安标准恒盈慧选年金保险（分红型）' },
+          ],
+        },
+        {
+          title: '年金',
+          list: [],
+        },
+      ],
+      // 按 tab 存储对比数据
+      comparisonMap: [],
+
+      showComparison: false,
+    }
+  },
+  methods: {
+    cellClick(item) {
+      const exists = this.comparisonMap.some((it) => it.id === item.id)
+      if (!exists) {
+        this.$set(this, 'comparisonMap', [...this.comparisonMap, item])
+      }
+    },
+
+    removeItem(item) {
+      this.comparisonMap = this.comparisonMap.filter((it) => it.id !== item.id)
+    },
+  },
+}
+</script>
+
+<style scoped lang="scss">
+$primary-color: #2e5ca9;
+$primary-text-color: #f6aa21;
+$primary-trans-color: #87a2d0;
+.comparison-container {
+  height: 100vh;
+  background: #f5f5f9;
+  //padding: 10px;
+  .main {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+
+    main {
+      flex: 1;
+    }
+  }
+}
+
+.cell-title-right-btn {
+  outline: none;
+  border: none;
+  background: #fff;
+  &:disabled {
+    color: #ccc !important;
+  }
+}
+.tab-container {
+  display: flex;
+  flex-direction: column;
+  overflow-y: scroll;
+  height: 100%;
+}
+.comparison-list {
+  display: flex;
+  overflow-x: auto;
+  white-space: nowrap;
+  -webkit-overflow-scrolling: touch; /* 移动端滚动优化 */
+  //border: 1px solid #eee;
+  border-radius: 8px;
+  //margin-bottom: 10px;
+  touch-action: unset;
+  //padding: 8px 0;
+  &::-webkit-scrollbar {
+    display: none; /* 隐藏滚动条 */
+  }
+}
+
+.placeholder {
+  //padding: 20px 15px;
+  color: #999;
+  font-size: 14px;
+  min-width: 100px;
+  text-align: center;
+}
+
+.comparison-item {
+  touch-action: unset;
+  flex: 0 0 auto;
+  margin-top: 6px;
+  margin-bottom: 14px;
+  width: 120px;
+  height: 70px;
+  border: 2px solid #fff;
+  margin-right: 10px;
+  background-color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  border-radius: 6px;
+  position: relative;
+  //文字自动折行
+  white-space: normal;
+  padding: 0 5px;
+
+  .close-item {
+    position: absolute;
+    background: #fff;
+    color: $primary-trans-color;
+    border-radius: 50%;
+    right: -7px;
+    top: -8px;
+    font-size: 14px;
+  }
+}
+::v-deep .van-tabs__content {
+  height: 100%;
+}
+::v-deep .van-tab__pane {
+  height: calc(100vh - 95px);
+}
+</style>