JohnYep 最近的时间轴更新

JohnYep

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

今日活跃度排名 2128

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

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

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

JohnYep 最近回复了

1 天前

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

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

8 天前

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

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

67 天前

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

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

74 天前

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

@wufahuoquabcd #313

# 恭喜恭喜

74 天前

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

参与一下

77 天前

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

今天 zerotier 恢复了

83 天前

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

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

155 天前

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

174 天前

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

```

262 天前

回复了 aziya 创建的主题 › 分享创造 › 做了一个只有中国人才能玩的游戏

@rrfeng #5 卖啥钱，直接做成微信小程序，免费玩，错了就要用户看广告，充钱🙈

» JohnYep 创建的更多回复