如有需求，直接私信留下您的联系方式。谢谢。
我的邮箱：2351598671@qq.com
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>个人主页</title> <script src="https://cdn.jsdelivr.net/npm/vue@2"></script> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Arial, sans-serif; background-color: #f9f9f9; color: #333; } #app { max-width: 800px; margin: 20px auto; background: #fff; border-radius: 8px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); overflow: hidden; } .header { background: linear-gradient(90deg, #6a11cb, #2575fc); color: #fff; text-align: center; padding: 40px 20px; } .header .avatar { width: 80px; height: 80px; border-radius: 50%; margin-bottom: 10px; } .header h1 { font-size: 24px; margin-bottom: 5px; } .header p { font-size: 14px; opacity: 0.8; } .nav { display: flex; justify-content: space-around; background: #f1f1f1; padding: 10px 0; } .nav button { background: none; border: none; font-size: 16px; cursor: pointer; padding: 10px; } .nav .active { color: #2575fc; font-weight: bold; } .section { padding: 20px; } .section h2 { font-size: 20px; margin-bottom: 10px; border-left: 4px solid #2575fc; padding-left: 10px; } .dynamic-item, .video-item { background: #f9f9f9; margin: 10px 0; padding: 10px; border-radius: 4px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .video-item img { width: 100%; height: 150px; object-fit: cover; border-radius: 4px; } .video-item .title { margin-top: 10px; font-weight: bold; font-size: 16px; } .video-item .info { font-size: 12px; color: #777; } .footer { text-align: center; padding: 10px; background: #f1f1f1; font-size: 14px; color: #555; } </style> </head> <body> <div id="app"> <div class="header"> <img class="avatar" src="https://via.placeholder.com/80x80?text=头像" alt="头像"> <h1>{{ user.name }}</h1> <p>{{ user.bio }}</p> </div> <div class="nav"> <button :class="{ active: activeTab === 'about' }" @click="activeTab = 'about'">关于我</button> <button :class="{ active: activeTab === 'dynamic' }" @click="activeTab = 'dynamic'">动态</button> <button :class="{ active: activeTab === 'videos' }" @click="activeTab = 'videos'">视频</button> </div> <div class="section" v-if="activeTab === 'about'"> <h2>关于我</h2> <p>{{ user.description }}</p> </div> <div class="section" v-if="activeTab === 'dynamic'"> <h2>动态</h2> <div class="dynamic-item" v-for="item in dynamics" :key="item.id"> <p>{{ item.content }}</p> <p style="font-size: 12px; color: #777;">{{ item.time }}</p> </div> </div> <div class="section" v-if="activeTab === 'videos'"> <h2>我的视频</h2> <div class="video-item" v-for="video in videos" :key="video.id"> <img :src="video.thumbnail" :alt="video.title"> <div class="title">{{ video.title }}</div> <div class="info">{{ video.views }} 次观看 · {{ video.date }}</div> </div> </div> <div class="footer">© 2024 个人主页 · 页面仅供展示</div> </div> <script> new Vue({ el: '#app', data: { activeTab: 'about', user: { name: '用户昵称', bio: '前端开发者 | 技术爱好者', description: '你好，我是用户昵称，一个热爱编程和技术分享的前端开发者。这是我的个人主页，欢迎浏览！' }, dynamics: [ { id: 1, content: '今天学习了 Vue 的组件复用技巧，受益匪浅！', time: '2024-12-01 15:30' }, { id: 2, content: '完成了个人主页的项目开发，感觉很充实。', time: '2024-11-30 10:15' } ], videos: [ { id: 1, title: 'Vue2 入门教程', thumbnail: 'https://via.placeholder.com/300x150?text=Vue2', views: '1.2万', date: '2024-11-29' }, { id: 2, title: '前端开发实战：从设计到实现', thumbnail: 'https://via.placeholder.com/300x150?text=实战', views: '9876', date: '2024-11-28' } ] } }); </script> </body> </html> 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161
