<template>
  <div class="max-w-sm mx-auto bg-black text-white min-h-screen px-4 pb-8">
    <!-- Header -->
    <div class="bg-gradient-to-br from-emerald-400 to-teal-500 py-6 relative">
      <div class="flex justify-end items-start mb-4">
        <div class="flex items-center gap-2"></div>
      </div>
      <!-- Profile Section -->
      <div class="flex items-center justify-between">
        <div class="flex items-center gap-3">
          <div
            class="w-16 h-16 rounded-full border-2 border-white border-opacity-20 bg-white bg-opacity-20 flex items-center justify-center"
          >
            <span class="text-white text-lg font-medium">李</span>
          </div>
          <div class="text-white">
            <h2 class="text-xl font-medium">李小明</h2>
            <p class="text-white text-opacity-80 text-sm">8岁</p>
            <p class="text-white text-opacity-80 text-sm">生日: 2016-03-15</p>
          </div>
        </div>
        <button
          class="bg-white bg-opacity-20 border border-white border-opacity-30 text-white hover:bg-white hover:bg-opacity-30 px-3 py-1 rounded text-sm flex items-center transition-colors"
        >
          切换孩子
          <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <polyline points="6,9 12,15 18,9"></polyline>
          </svg>
        </button>
      </div>
    </div>
    <!-- Physical Test Data -->
    <div class="mt-4 bg-white rounded-xl p-5 text-gray-800 shadow-lg border border-gray-100">
      <div class="text-sm text-gray-500 mb-4 font-medium">数据测评时间：2024-01-10</div>
      <div class="flex justify-center items-center gap-12 mb-5">
        <div class="text-center">
          <div class="text-3xl font-bold text-teal-500 mb-2">165</div>
          <div class="text-sm text-gray-600 font-medium">身高 (CM)</div>
        </div>
        <div class="text-center">
          <div class="text-3xl font-bold text-teal-500 mb-2">55</div>
          <div class="text-sm text-gray-600 font-medium">体重 (KG)</div>
        </div>
      </div>
      <div class="flex justify-between items-center">
        <button
          class="bg-teal-500 hover:bg-teal-600 text-white px-5 py-2.5 rounded-lg text-sm font-medium flex items-center gap-2 transition-colors shadow-sm"
        >
          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
            <polyline points="14,2 14,8 20,8"></polyline>
            <line x1="16" y1="13" x2="8" y2="13"></line>
            <line x1="16" y1="17" x2="8" y2="17"></line>
          </svg>
          PDF附件预览
        </button>
        <a
          href="#"
          class="text-teal-500 text-sm font-medium hover:text-teal-600 flex items-center gap-1 transition-colors"
        >
          更多
          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <polyline points="9,18 15,12 9,6"></polyline>
          </svg>
        </a>
      </div>
    </div>
    <!-- Messages Section -->
    <div class="mt-4">
      <div
        class="rounded-lg p-4 text-white relative overflow-hidden bg-gradient-to-r from-emerald-500 to-teal-500"
      >
        <div class="flex items-center justify-between mb-2">
          <h3 class="font-medium">我的消息</h3>
          <span class="text-xs opacity-80">实时更新</span>
        </div>
        <div class="relative h-12 overflow-hidden">
          <div
            class="transition-transform duration-500 ease-in-out"
            :style="{ transform: `translateY(-${currentMessageIndex * 48}px)` }"
          >
            <div
              v-for="(message, index) in messages"
              :key="message.id"
              class="h-12 flex items-center justify-between"
            >
              <span class="text-sm flex-1 pr-2">{{ message.content }}</span>
              <span class="text-xs opacity-70">{{ message.time }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- Learning Center -->
    <div class="mt-6">
      <h3 class="text-white text-lg font-medium mb-4">学习中心</h3>
      <div class="grid grid-cols-3 gap-4">
        <button
          class="h-20 flex flex-col items-center justify-center gap-2 bg-gray-800 hover:bg-gray-700 text-white border-0 rounded transition-colors"
        >
          <svg class="w-6 h-6 text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path>
            <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path>
          </svg>
          <span class="text-sm">课程表</span>
        </button>
        <button
          class="h-20 flex flex-col items-center justify-center gap-2 bg-gray-800 hover:bg-gray-700 text-white border-0 rounded transition-colors"
        >
          <svg class="w-6 h-6 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
            <polyline points="14,2 14,8 20,8"></polyline>
            <line x1="16" y1="13" x2="8" y2="13"></line>
            <line x1="16" y1="17" x2="8" y2="17"></line>
            <polyline points="10,9 9,9 8,9"></polyline>
          </svg>
          <span class="text-sm">学习资料</span>
        </button>
        <button
          class="h-20 flex flex-col items-center justify-center gap-2 bg-gray-800 hover:bg-gray-700 text-white border-0 rounded transition-colors"
        >
          <svg class="w-6 h-6 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
          </svg>
          <span class="text-sm">消息中心</span>
        </button>
        <button
          class="h-20 flex flex-col items-center justify-center gap-2 bg-gray-800 hover:bg-gray-700 text-white border-0 rounded transition-colors"
        >
          <svg class="w-6 h-6 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
            <line x1="16" y1="2" x2="16" y2="6"></line>
            <line x1="8" y1="2" x2="8" y2="6"></line>
            <line x1="3" y1="10" x2="21" y2="10"></line>
          </svg>
          <span class="text-sm">学习计划</span>
        </button>
        <button
          class="h-20 flex flex-col items-center justify-center gap-2 bg-gray-800 hover:bg-gray-700 text-white border-0 rounded transition-colors"
        >
          <svg class="w-6 h-6 text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <circle cx="9" cy="21" r="1"></circle>
            <circle cx="20" cy="21" r="1"></circle>
            <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
          </svg>
          <span class="text-sm">订单管理</span>
        </button>
        <button
          class="h-20 flex flex-col items-center justify-center gap-2 bg-gray-800 hover:bg-gray-700 text-white border-0 rounded transition-colors"
        >
          <svg class="w-6 h-6 text-pink-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
            <circle cx="12" cy="7" r="4"></circle>
          </svg>
          <span class="text-sm">个人中心</span>
        </button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MobileApp',
  data() {
    return {
      currentMessageIndex: 0,
      messages: [
        { id: 1, content: '明天的数学课程时间调整为下午2点', time: '10:30' },
        { id: 2, content: '本周作业已批改完成，请查看反馈', time: '09:15' },
        { id: 3, content: '新的学习资料已上传到资料库', time: '08:45' },
      ],
      messageInterval: null,
    };
  },
  mounted() {
    this.startMessageRotation();
  },
  beforeDestroy() {
    if (this.messageInterval) {
      clearInterval(this.messageInterval);
    }
  },
  methods: {
    startMessageRotation() {
      this.messageInterval = setInterval(() => {
        this.currentMessageIndex = (this.currentMessageIndex + 1) % this.messages.length;
      }, 3000);
    },
  },
};
</script>

<style scoped>

</style>