这是一个创建于 280 天前的主题，其中的信息可能已经有所发展或是发生改变。
link： https://go.itab.link/
比较喜欢这种像 IOS 组件的 UI
 | 1 JohnYep 280 天前 ```js <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta name="viewport" cOntent="width=device-width, initial-scale=1.0" /> <title>工作台</title> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> <link href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css" rel="stylesheet" /> <style> :root { --primary-bg: #f8fafc; --card-bg: #ffffff; --text-primary: #1f2937; --text-secondary: #64748b; --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background: var(--primary-bg); color: var(--text-primary); min-height: 100vh; } .app-container { display: flex; min-height: 100vh; } .sidebar { width: 64px; background: #ffffff; padding: 16px 0; display: flex; flex-direction: column; align-items: center; gap: 24px; box-shadow: var(--shadow); z-index: 10; } .sidebar-item { display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; color: var(--text-secondary); transition: all 0.2s; padding: 8px; border-radius: 8px; } .sidebar-item:hover { color: var(--text-primary); background: #f1f5f9; } .main-content { flex: 1; padding: 24px; } .search-bar { background: #ffffff; border-radius: 8px; padding: 12px 24px; margin-bottom: 24px; display: flex; align-items: center; gap: 12px; box-shadow: var(--shadow); } .search-input { background: none; border: none; color: var(--text-primary); flex: 1; font-size: 16px; outline: none; } .widget-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; margin-top: 24px; } .widget-card { background: var(--card-bg); border-radius: 12px; padding: 20px; box-shadow: var(--shadow); } .clock-widget { text-align: center; font-size: 48px; font-weight: 300; background: linear-gradient(135deg, #60a5fa, #3b82f6); color: white; } .date-text { font-size: 14px; color: rgba(255, 255, 255, 0.9); margin-top: 8px; } .weather-widget { display: flex; flex-direction: column; gap: 16px; background: linear-gradient(135deg, #34d399, #10b981); color: white; } .weather-current { font-size: 36px; display: flex; align-items: center; gap: 12px; } .weather-forecast { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.2); } .forecast-item { text-align: center; font-size: 14px; } .app-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 16px; margin-top: 24px; } .app-item { display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; transition: transform 0.2s; } .app-item:hover { transform: translateY(-4px); } .app-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: #f1f5f9; color: #3b82f6; transition: all 0.2s; } .app-item:hover .app-icon { background: #3b82f6; color: white; } .app-name { font-size: 12px; color: var(--text-secondary); text-align: center; } </style> </head> <body> <div id="app"> <div class="app-container"> <div class="sidebar"> <div class="sidebar-item" v-for="item in sidebarItems" :key="item.id"> <i :class="item.icon"></i> <span>{{ item.label }}</span> </div> </div> <div class="main-content"> <div class="search-bar"> <i class="ri-search-line"></i> <input type="text" class="search-input" placeholder="输入搜索内容" v-model="searchText" /> </div> <div class="widget-grid"> <div class="widget-card clock-widget"> <div>{{ currentTime }}</div> <div class"date-text">{{ currentDate }}</div> </div> <div class="widget-card weather-widget"> <div class="weather-current"> <i class="ri-sun-line"></i> <span>{{ weather.current }}°</span> </div> <div class="weather-forecast"> <div class="forecast-item" v-for="item in weather.forecast" :key="item.date" > <div>{{ item.date }}</div> <i :class="item.icon"></i> <div>{{ item.temp }}°</div> </div> </div> </div> </div> <div class="app-grid"> <div class="app-item" v-for="app in apps" :key="app.id"> <div class="app-icon"> <i :class="app.icon"></i> </div> <div class="app-name">{{ app.name }}</div> </div> </div> </div> </div> </div> <script> const { createApp, ref, onMounted } = Vue; createApp({ setup() { const searchText = ref(""); const currentTime = ref(""); const currentDate = ref(""); const sidebarItems = ref([ { id: 1, icon: "ri-home-line", label: "主页" }, { id: 2, icon: "ri-code-line", label: "开发" }, { id: 3, icon: "ri-palette-line", label: "设计" }, { id: 4, icon: "ri-product-hunt-line", label: "产品" }, ]); const weather = ref({ current: 19, forecast: [ { date: "周一", icon: "ri-sun-line", temp: 22 }, { date: "周二", icon: "ri-cloudy-line", temp: 20 }, { date: "周三", icon: "ri-sun-cloudy-line", temp: 21 }, { date: "周四", icon: "ri-drizzle-line", temp: 19 }, { date: "周五", icon: "ri-sun-line", temp: 23 }, { date: "周六", icon: "ri-cloudy-line", temp: 20 }, ], }); const apps = ref([ { id: 1, icon: "ri-bilibili-line", name: "哔哩哔哩" }, { id: 2, icon: "ri-zhihu-line", name: "知乎" }, { id: 3, icon: "ri-wechat-line", name: "微信" }, { id: 4, icon: "ri-alipay-line", name: "支付宝" }, { id: 5, icon: "ri-douyin-line", name: "抖音" }, { id: 6, icon: "ri-qq-line", name: "QQ" }, { id: 7, icon: "ri-weibo-line", name: "微博" }, { id: 8, icon: "ri-shopping-bag-line", name: "淘宝" }, ]); const updateTime = () => { const now = new Date(); currentTime.value = now.toLocaleTimeString("zh-CN", { hour: "2-digit", minute: "2-digit", }); currentDate.value = now.toLocaleDateString("zh-CN", { year: "numeric", month: "long", day: "numeric", weekday: "long", }); }; onMounted(() => { updateTime(); setInterval(updateTime, 1000); }); return { searchText, currentTime, currentDate, sidebarItems, weather, apps, }; }, }).mount("#app"); </script> </body> </html> ``` |
 | 2 xiaoz 280 天前 via Android |
Select Language