---
description: Vue 组件开发规范，适用于落地页组件
globs: "**/*.vue"
alwaysApply: false
---

# Vue 组件规范

## 组件结构

遵循 `<template>` → `<script>` → `<style>` 顺序:

```vue
<template>
  <div class="pageName">
    <!-- 内容 -->
  </div>
</template>

<script>
export default {
  props: ["os", "configs", "switchData"],
  data() {
    return {};
  },
  watch: {},
  mounted() {},
  methods: {},
};
</script>

<style lang="scss" scoped>
.pageName {
  /* 样式 */
}
</style>
```

## 命名约定

- 文件名: 小写或 camelCase (`mobile1.vue`, `selectLinePopup.vue`)
- 新落地页模板: `mobile{N}.vue` (移动端) / `pc{N}.vue` (PC 端)
- CSS 类名: camelCase (`headerBox`, `floatingBox`, `bottomBox`)
- 事件名: camelCase (`getApkInfo`, `recordClick`)

## Props 通信

落地页组件接收三个核心 props:

| Prop | 说明 |
|------|------|
| `os` | 设备信息 (isPhone, userAgent 等) |
| `configs` | 配置列表 (tg_group, potato_group 等) |
| `switchData` | 开关数据 (下载链接、功能开关) |

## 事件追踪

使用 `landingPageClick` 上报用户点击行为，传入 tab 和坐标:

```js
import { landingPageClick } from "@/utils/eventTracker";
landingPageClick(this, { tab_key, tab_name, click_coordinates_x, click_coordinates_y });
```

## 图片资源引用

图片放在 `src/assets/images/{templateName}/` 下，在 SCSS 中通过相对路径引用:

```scss
background: url("./../../../assets/images/mobile1/logo.png") no-repeat;
background-size: 100% 100%;
```