JohnYep 最近的时间轴更新
JohnYep

JohnYep

V2EX 第 548644 号会员,加入于 2021-06-17 18:28:56 +08:00
今日活跃度排名 295
根据 JohnYep 的设置,主题列表被隐藏
二手交易 相关的信息,包括已关闭的交易,不会被隐藏
JohnYep 最近回复了
4 小时 36 分钟前
回复了 gechang 创建的主题 程序员 有类似 itab 开源的 vue 代码吗
```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/remixicon@4.5.0/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>


```
88 天前
回复了 aziya 创建的主题 分享创造 做了一个只有中国人才能玩的游戏
@rrfeng #5 卖啥钱,直接做成微信小程序,免费玩,错了就要用户看广告,充钱🙈
分子+1
@johnwilson #18 你这是用的三方的还是自建邮件服务呢
@kalman03 #13
看到你们这个临时邮箱,我也想搞一个,不过你们的邮箱服务都是自己买域名搭建的吗,还是用的三方的 api 呢
我的也是,期初不知道咋回事,不过好像是谷歌一下子来了很多爬虫直接把我的网站给搞崩溃了,耗费完了

222 天前
回复了 Socrazy 创建的主题 Apple 竟然有人担心 Infuse 步 vidhub 后尘?
就是广告
@steley #9
@GeekGao #11
谢谢,大概知道了

@flyyu #13

我的地址是填写的老家的,这个估计很难收到了,我老爸基本上不管快递邮件什么的,只能过两天再重新修改一下地址填写先试试
关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2823 人在线   最高记录 6679   ·     Select Language
创意工作者们的社区
World is powered by solitude
VERSION: 3.9.8.5 · 12ms · UTC 14:50 · PVG 22:50 · LAX 06:50 · JFK 09:50
Developed with CodeLauncher
♥ Do have faith in what you're doing.