<el-carousel-item v-for="(parkName, index) in userStore.parkNames" :key="parkName" @click="handleDialogConfirm(parkName, index)"> <h3 class="medium" style="text-align: center;font-size: 30px;">{{ parkName }}</h3> </el-carousel-item> </el-carousel>怎么让这个走马灯被选中的是深色，没被选中的是浅色要求用ts语法实现

要实现走马灯被选中的项目为深色，未被选中的项目为浅色，你可以使用以下的 TypeScript 代码：

<template>
  <el-carousel v-model="activeIndex">
    <el-carousel-item v-for="(parkName, index) in userStore.parkNames" :key="parkName">
      <h3
        class="medium"
        :style="{
          'text-align': 'center',
          'font-size': '30px',
          color: activeIndex === index ? 'dark' : 'light'
        }"
        @click="handleDialogConfirm(parkName, index)"
      >
        {{ parkName }}
      </h3>
    </el-carousel-item>
  </el-carousel>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  data() {
    return {
      activeIndex: 0,
    };
  },
  methods: {
    handleDialogConfirm(parkName: string, index: number) {
      // 处理走马灯项目点击事件
    },
  },
});
</script>

在上面的代码中，我们使用了 `activeIndex` 变量来追踪当前选中的项目索引，然后通过条件渲染给选中项目设置深色（'dark'）样式，给未选中项目设置浅色（'light'）样式。在 `handleDialogConfirm` 方法中，你可以处理走马灯项目的点击事件。记得将 `userStore` 替换为你实际使用的数据源对象。