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