JohnYep 最近的时间轴更新

JohnYep

V2EX 第 548644 号会员，加入于 2021-06-17 18:28:56 +08:00

今日活跃度排名 1742

JohnYep 提问技术话题好玩工作信息交易信息城市相关

根据 JohnYep 的设置，主题列表被隐藏

二手交易相关的信息，包括已关闭的交易，不会被隐藏

JohnYep 最近回复了

32 天前

回复了 balabalaguguji 创建的主题分享创造工具箱网站 5 年收益分享

想当初我也买了一个好域名来做工具站，但是续费太贵了，工具站没起来，我就放弃了

@licoycn

61 天前

回复了 EasyLink 创建的主题 VPS [踢楼抽奖] EasyLink 云服务器，送 4 台精品 4C4G 一年云服务器

EasyLink 高品质大带宽云服务器，官网： https://www.vmrack.net?affid=v2ex

68 天前

回复了 lisxour 创建的主题程序员突然发现有人给我的博客做了个繁体镜像站？

@hafuhafu #4 有点好奇，这种实现原理是什么，反向代理也不能改字体吧

127 天前

回复了 amoSjiang 创建的主题 Android 国内安卓有类似 bark 这种 APP 么，为啥没人做

Gotify 就可以，但是有现成 Lark 和飞书，为啥不用呢，飞书都支持个人号

134 天前

回复了 vace 创建的主题推广 [抽奖] 送 12 份自家茶叶 - 推广下自家茶园与两款口粮茶

@wufahuoquabcd #313

# 恭喜恭喜

134 天前

回复了 vace 创建的主题推广 [抽奖] 送 12 份自家茶叶 - 推广下自家茶园与两款口粮茶

参与一下

137 天前

回复了 JohnYep 创建的主题程序员有那些 V 友正在使用 zerotier 的，目前 zerotier 好像是崩溃了，不能用了

今天 zerotier 恢复了

143 天前

回复了 IIInsomnia 创建的主题 GitHub GitHub 账号无故被封

大佬是惠东的啊，年轻有为啊

215 天前

回复了 136178128 创建的主题游戏双影奇境，不赖。

234 天前

回复了 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/[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>

```

JohnYep 创建的更多回复