mirror of
https://github.com/PaiGramTeam/PaiGram.git
synced 2024-11-21 22:58:05 +00:00
🎨 微调 /help 页面设计
This commit is contained in:
Chuangbo Li
GitHub
parent
a6e6421ef8
commit
3eeb8db869
@ -1,46 +1,43 @@
|
|||||||
|
:root {
|
||||||
|
--dark: #e0dad3;
|
||||||
|
--light: #f0ece8;
|
||||||
|
--white: #f5f5f5;
|
||||||
|
--grey: #6c6c6c;
|
||||||
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background-color: rgba(253, 253, 253, 0.75);
|
background-color: rgba(253, 253, 253, 0.75);
|
||||||
}
|
}
|
||||||
|
|
||||||
#container {
|
.header {
|
||||||
max-width: 768px;
|
background-image: url(background/2020021114213984258.png);
|
||||||
|
box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.info {
|
.box {
|
||||||
background: url(background/2020021114213984258.png) no-repeat center;
|
border: 1px solid var(--dark);
|
||||||
|
background-color: var(--light);
|
||||||
box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
|
box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
|
||||||
background-size: 780px 120px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.command-title {
|
.command-title {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
line-height: 40px;
|
line-height: 3rem;
|
||||||
border: 1px solid #e0dad3;
|
border: 1px solid var(--dark);
|
||||||
}
|
}
|
||||||
|
|
||||||
.command-title h1 {
|
.command-title h1 {
|
||||||
margin: 2px;
|
margin: 2px;
|
||||||
background-color: #e0dad3;
|
background-color: var(--dark);
|
||||||
}
|
}
|
||||||
|
|
||||||
.command {
|
.command {
|
||||||
flex: 1 1 0;
|
flex: 1 1 0;
|
||||||
border-radius: 0.75rem;
|
border-radius: 0.75rem;
|
||||||
padding: 5px;
|
padding: 0.3rem 0.5rem;
|
||||||
margin: 10px;
|
margin: 0.6rem;
|
||||||
background: #f5f5f5;
|
background: var(--white);
|
||||||
border: 1px solid #e0dad3;
|
border: 1px solid var(--dark);
|
||||||
box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.command i {
|
|
||||||
margin-left: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.base-command {
|
|
||||||
border: 1px solid #e0dad3;
|
|
||||||
background-color: #f0ece8;
|
|
||||||
box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
|
box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -67,24 +64,26 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.command-name {
|
.command-name {
|
||||||
font-size: 1.25rem;
|
font-size: 1.5rem;
|
||||||
line-height: 1.75rem;
|
line-height: 2rem;
|
||||||
margin: 4px;
|
margin: 4px;
|
||||||
|
font-family: Menlo, ui-monospace, SFMono-Regular, Monaco, Consolas, Liberation Mono, Courier New, monospace;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.command-name i {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
opacity: 0.4;
|
||||||
}
|
}
|
||||||
|
|
||||||
.command-description {
|
.command-description {
|
||||||
font-size: 1rem;
|
font-size: 1.2rem;
|
||||||
line-height: 1.5rem;
|
line-height: 1.5rem;
|
||||||
margin: 4px;
|
margin: 4px;
|
||||||
|
color: #6c6c6c;
|
||||||
}
|
}
|
||||||
|
|
||||||
.about {
|
.about {
|
||||||
text-align: center;
|
background-color: var(--dark);
|
||||||
line-height: 40px;
|
|
||||||
border: 1px solid #e0dad3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.about h1 {
|
|
||||||
margin: 2px;
|
|
||||||
background-color: #e0dad3;
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,142 +1,139 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8" />
|
||||||
<title>Title</title>
|
<title>Title</title>
|
||||||
<link href="../../styles/tailwind.min.css" rel="stylesheet">
|
<link href="../../styles/tailwind.min.css" rel="stylesheet" />
|
||||||
<link href="../../styles/font-awesome.min.css" rel="stylesheet">
|
<link href="../../styles/font-awesome.min.css" rel="stylesheet" />
|
||||||
<link href="help.css" rel="stylesheet">
|
<link href="help.css" rel="stylesheet" />
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="container mx-auto px-5 py-10" id="container">
|
<div class="container mx-auto px-5 py-10 max-w-3xl">
|
||||||
<div class="info p-6 flex flex-wrap mb-8 rounded-xl">
|
<div class="header p-6 flex mb-8 rounded-xl bg-cover justify-between">
|
||||||
<div class="info-name">
|
<div>
|
||||||
<h1 class="text-4xl italic">TGPaimonBot</h1>
|
<h1 class="text-4xl italic">TGPaimonBot</h1>
|
||||||
<h1 class="text-2xl">使用说明</h1>
|
<h1 class="text-2xl">使用说明</h1>
|
||||||
</div>
|
</div>
|
||||||
<div class="info-name text-1xl ml-60 pt-1">
|
<div class="pt-1 opacity-70">
|
||||||
<p><i class="fa fa-address-card-o mr-2"></i>需要绑定Cookie</p>
|
<i class="fa fa-address-card-o mr-2"></i>需要绑定Cookie
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="base-command pt-4 rounded-xl">
|
|
||||||
<div class="command-background">
|
<div class="box pt-4 rounded-xl space-y-4 overflow-hidden">
|
||||||
<img src="background/2015.png">
|
<div>
|
||||||
</div>
|
<div class="command-background pointer-events-none">
|
||||||
<div class="genshin-background">
|
<img src="background/2015.png" />
|
||||||
<img src="background/genshin.png">
|
</div>
|
||||||
</div>
|
<div class="genshin-background pointer-events-none">
|
||||||
<div class="command-type px-1">
|
<img src="background/genshin.png" />
|
||||||
<div class="command-title text-2xl">
|
</div>
|
||||||
|
|
||||||
|
<div class="command-title text-2xl mx-1">
|
||||||
<h1>查询命令</h1>
|
<h1>查询命令</h1>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<div class="command-list py-4 px-2">
|
<div class="grid grid-cols-2 py-4 px-2">
|
||||||
<div class="flex">
|
|
||||||
<div class="command">
|
<div class="command">
|
||||||
<div class="command-name text-xl">/weapon</div>
|
<div class="command-name">/weapon</div>
|
||||||
<div class="command-description text-base ">查询武器</div>
|
<div class="command-description">查询武器</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="command rounded-xl flex-1">
|
<div class="command rounded-xl flex-1">
|
||||||
<div class="command-name text-xl">/strategy</div>
|
<div class="command-name">/strategy</div>
|
||||||
<div class="command-description text-base ">查询角色攻略</div>
|
<div class="command-description">查询角色攻略</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<div class="flex">
|
|
||||||
<div class="command">
|
<div class="command">
|
||||||
<div class="command-name text-xl ">
|
<div class="command-name">
|
||||||
/uid
|
/uid
|
||||||
<i class="fa fa-address-card-o ml-2"></i>
|
<i class="fa fa-address-card-o ml-2"></i>
|
||||||
</div>
|
</div>
|
||||||
<div class="name text-base ">查询玩家信息</div>
|
<div class="command-description">查询玩家信息</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="command">
|
<div class="command">
|
||||||
<div class="command-name text-xl">
|
<div class="command-name">
|
||||||
/sign
|
/sign
|
||||||
<i class="fa fa-address-card-o ml-2"></i></div>
|
<i class="fa fa-address-card-o ml-2"></i>
|
||||||
<div class="command-description text-base ">每日签到 | 查询</div>
|
</div>
|
||||||
|
<div class="command-description">每日签到 | 查询</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<div class="flex">
|
|
||||||
<div class="command">
|
<div class="command">
|
||||||
<div class="command-name text-xl">
|
<div class="command-name">
|
||||||
/dailynote
|
/dailynote
|
||||||
<i class="fa fa-address-card-o ml-2"></i>
|
<i class="fa fa-address-card-o ml-2"></i>
|
||||||
</div>
|
</div>
|
||||||
<div class="name text-base1">查询角色当前状态</div>
|
<div class="command-description">查询角色当前状态</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="command">
|
<div class="command">
|
||||||
<div class="command-name text-xl">
|
<div class="command-name">
|
||||||
/artifact_rate
|
/artifact_rate
|
||||||
<div class="command-description text-base ">圣遗物评分</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="command-description">圣遗物评分</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<div class="flex">
|
|
||||||
<div class="command">
|
<div class="command">
|
||||||
<div class="command-name text-xl">
|
<div class="command-name">
|
||||||
/ledger
|
/ledger
|
||||||
<i class="fa fa-address-card-o ml-2"></i>
|
<i class="fa fa-address-card-o ml-2"></i>
|
||||||
</div>
|
</div>
|
||||||
<div class="name text-base1">查询角色当月旅行扎记</div>
|
<div class="command-description">查询角色当月旅行扎记</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="command">
|
<div class="command">
|
||||||
<div class="command-name text-xl">
|
<div class="command-name">
|
||||||
/abyss
|
/abyss
|
||||||
<i class="fa fa-address-card-o ml-2"></i>
|
<i class="fa fa-address-card-o ml-2"></i>
|
||||||
</div>
|
</div>
|
||||||
<div class="name text-base1">查询当期深渊螺旋战绩</div>
|
<div class="command-description">查询当期深渊螺旋战绩</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<div class="command-background pointer-events-none">
|
||||||
|
<img src="background/1006.png" />
|
||||||
|
</div>
|
||||||
|
<div class="command-title text-2xl mx-1">
|
||||||
|
<h1>其他命令</h1>
|
||||||
|
</div>
|
||||||
|
<div class="grid grid-cols-2 py-4 px-2">
|
||||||
|
<div class="command">
|
||||||
|
<div class="command-name">/gacha</div>
|
||||||
|
<div class="command-description">抽卡模拟器（非洲人模拟器）</div>
|
||||||
|
</div>
|
||||||
|
<div class="command">
|
||||||
|
<div class="command-name">/quiz</div>
|
||||||
|
<div class="command-description">
|
||||||
|
派蒙的十万个为什么
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="command">
|
||||||
|
<div class="command-name">/adduser</div>
|
||||||
|
<div class="command-description">添加账号（请私聊BOT）</div>
|
||||||
|
</div>
|
||||||
|
<div class="command rounded-xl flex-1">
|
||||||
|
<div class="command-name">/cancel</div>
|
||||||
|
<div class="command-description">
|
||||||
|
取消操作（解决一切玄学问题）
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<div class="command-title text-2xl mx-1">
|
||||||
|
<h1>inline 模式关键词</h1>
|
||||||
|
</div>
|
||||||
|
<div class="grid grid-cols-2 py-4 px-2">
|
||||||
|
<div class="command">
|
||||||
|
<div class="command-name">角色名</div>
|
||||||
|
<div class="command-description">查询角色攻略</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="base-command pt-4 mb-8 rounded-xl">
|
|
||||||
<div class="command-background">
|
<div class="about text-center leading-8 text-xs opacity-50">
|
||||||
<img src="background/1006.png">
|
更多功能，还在咕咕咕！咕咕咕！
|
||||||
</div>
|
|
||||||
<div class="command-type px-1">
|
|
||||||
<div class="command-title text-2xl">
|
|
||||||
<h1>其他命令</h1>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="command-list py-4 px-2">
|
|
||||||
<div class="flex">
|
|
||||||
<div class="command">
|
|
||||||
<div class="command-name text-xl">/gacha</div>
|
|
||||||
<div class="name text-base1">抽卡模拟器（非洲人模拟器）</div>
|
|
||||||
</div>
|
|
||||||
<div class="command">
|
|
||||||
<div class="command-name text-xl">/quiz</div>
|
|
||||||
<div class="command-description text-bas">派蒙的十万个为什么</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex">
|
|
||||||
<div class="command">
|
|
||||||
<div class="command-name text-xl">/adduser</div>
|
|
||||||
<div class="command-description text-base ">添加账号（请私聊BOT）</div>
|
|
||||||
</div>
|
|
||||||
<div class="command rounded-xl flex-1">
|
|
||||||
<div class="command-name text-xl">/cancel</div>
|
|
||||||
<div class="command-description text-base ">取消操作（解决一切玄学问题）</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="base-command pt-4 mb-8 rounded-xl">
|
|
||||||
<div class="command-type px-1">
|
|
||||||
<div class="command-title text-2xl">
|
|
||||||
<h1>inline 模式关键词</h1>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="command-list py-4 px-2">
|
|
||||||
<div class="flex">
|
|
||||||
<div class="command">
|
|
||||||
<div class="command-name text-xl">角色名</div>
|
|
||||||
<div class="name text-base1">查询角色攻略</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="about">
|
|
||||||
<h1>更多功能，还在咕咕咕！咕咕咕！</h1>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user