You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
196 lines
8.2 KiB
196 lines
8.2 KiB
<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>
|