代码应用场景介绍

本代码段适用于构建一个交互式仪表盘，展示有关用户活动和自然保护区的实时数据。它提供了一个干净、直观的界面，允许用户快速浏览信息并做出明智的决定。

代码基本功能介绍

此代码段具有以下基本功能：

• 动态显示用户活动和自然保护区的信息，包括标题、图像和距离。
• 提供交互式图表，可视化用户活动数据。
• 允许用户通过按钮创建新帖子。

功能实现步骤及关键代码分析说明

1. 数据准备

• 定义了两个响应式变量 activities 和 reserves，分别存储用户活动和自然保护区的数据。
• 使用 Vue.js 的 ref 钩子来管理这些变量的状态。

2. 渲染活动和保护区列表

• 在模板中，使用 v-for 指令遍历 activities 和 reserves 数组，并为每个项目渲染一个卡片。
• 每张卡片包含一个图像、标题和距离。

3. 渲染交互式图表

• 使用 ECharts 组件创建交互式图表。
• 图表配置为显示用户活动数据，包括距离和活动类型。

4. 创建新帖子

• 在模板中，添加了一个按钮，允许用户创建新帖子。
• 点击按钮时，会触发一个事件处理程序，该处理程序将打印一条消息到控制台。

关键代码分析：

<template>
  <div class="bg-gray-100">
    <div class="flex items-center justify-between p-4 border-b border-gray-200">
      <div class="flex items-center">
        <img
          src="https://source.unsplash.com/random/40x40"
          alt="avatar"
          class="w-8 h-8 rounded-full mr-4"
        />
        <div class="text-sm font-medium text-gray-900">
          John Doe
        </div>
      </div>
      <div>
        <button
          type="button"
          class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
        >
          Create Post
        </button>
      </div>
    </div>
    <div class="py-4">
      <div class="max-w-2xl mx-auto">
        <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
          <!-- Activities -->
          <div
            class="bg-white shadow-md rounded-lg p-4 flex flex-col justify-between"
          >
            <div class="flex items-center justify-between">
              <h2 class="text-lg font-medium text-gray-900">
                Activities near you
              </h2>
              <a
                href="#"
                class="text-indigo-600 hover:text-indigo-700"
              >
                See all
              </a>
            </div>
            <div class="mt-4">
              <div class="grid grid-cols-2 gap-4">
                <!-- Activity card -->
                <div
                  class="bg-gray-100 rounded-lg p-4 flex flex-col justify-between"
                >
                  <img
                    src="https://source.unsplash.com/random/160x160"
                    alt="image"
                    class="w-full h-24 object-cover rounded-t-lg"
                  />
                  <div class="flex items-center justify-between mt-4">
                    <h3 class="text-sm font-medium text-gray-900">
                      Biking Offroad
                    </h3>
                    <div class="flex items-center">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        class="h-5 w-5 text-indigo-600"
                        viewBox="0 0 20 20"
                        fill="currentColor"
                      >
                        <path
                          fill-rule="evenodd"
                          d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-8.707l-1.707 1.707a1 1 0 001.414 1.414l3-3a1 1 0 000-1.414l-3-3a1 1 0 10-1.414 1.414L13.293 9.293zM10 5a1 1 0 112 0v6a1 1 0 11-2 0V5z"
                          clip-rule="evenodd"
                        />
                      </svg>
                      <span class="text-sm text-gray-500">
                        1.2km
                      </span>
                    </div>
                  </div>
                </div>
                <!-- ... -->
              </div>
            </div>
          </div>
          <!-- Reserves -->
          <div
            class="bg-white shadow-md rounded-lg p-4 flex flex-col justify-between"
          >
            <div class="flex items-center justify-between">
              <h2 class="text-lg font-medium text-gray-900">
                Reserves near you
              </h2>
              <a
                href="#"
                class="text-indigo-600 hover:text-indigo-700"
              >
                See all
              </a>
            </div>
            <div class="mt-4">
              <div class="grid grid-cols-2 gap-4">
                <!-- Reserve card -->
                <div
                  class="bg-gray-100 rounded-lg p-4 flex flex-col justify-between"
                >
                  <img
                    src="https://source.unsplash.com/random/160x160"
                    alt="image"
                    class="w-full h-24 object-cover rounded-t-lg"
                  />
                  <div class="flex items-center justify-between mt-4">
                    <h3 class="text-sm font-medium text-gray-900">
                      African Safari
                    </h3>
                    <div class="flex items-center">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        class="h-5 w-5 text-indigo-600"
                        viewBox="0 0 20 20"
                        fill="currentColor"
                      >
                        <path
                          fill-rule="evenodd"
                          d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-8.707l-1.707 1.707a1 1 0 001.414 1.414l3-3a1 1 0 000-1.414l-3-3a1 1 0 10-1.414 1.414L13.293 9.293zM10 5a1 1 0 112 0v6a1 1 0 11-2 0V5z"
                          clip-rule="evenodd"
                        />
                      </svg>
                      <span class="text-sm text-gray-500">
                        10km
                      </span>
                    </div>
                  </div>
                </div>
                <!-- ... -->
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

5. 创建新帖子

<button
  type="button"
  class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
>
  Create Post
</button>