修复布局

Fixes #20
This commit is contained in:
wood 2023-09-01 21:17:36 +08:00
parent f33a1e538d
commit b720564fdc
3 changed files with 40 additions and 39 deletions

View File

@ -15,8 +15,8 @@
</head> </head>
<body class="bg-gray-900 text-white"> <body class="bg-gray-900 text-white">
<div class="container w-full"> <div class="container w-full mx-auto px-4">
<div class="sidebar bg-gray-800 bg-opacity-60 p-8 relative"> <div class="sidebar bg-gray-800 bg-opacity-60 p-8 relative overflow-y-auto">
<header> <header>
<h1 class="text-2xl font-semibold mb-8 text-gradient">OpenAI API 信息查询</h1> <h1 class="text-2xl font-semibold mb-8 text-gradient">OpenAI API 信息查询</h1>
<p class="mt-3 text-sm">页面列表:</p> <p class="mt-3 text-sm">页面列表:</p>
@ -51,17 +51,18 @@
class="w-full bg-gray-700 border border-gray-500 rounded px-3 py-2 mt-2 text-gray-400 hidden" /> class="w-full bg-gray-700 border border-gray-500 rounded px-3 py-2 mt-2 text-gray-400 hidden" />
</div> </div>
<div class="flex mt-4"> <div class="flex mt-4">
<div id="subinfo-toggle" class="form-control w-1/2"> <div id="subinfo-toggle" class="form-control w-1/3">
<label class="label"> <label class="label">
<span class="label-text text-warning">显示/隐藏 绑卡信息</span> <span class="label-text text-warning">绑卡信息</span>
</label> </label>
<input type="checkbox" class="toggle toggle-primary" onchange="toggleSubInfo()"> <input type="checkbox" class="toggle toggle-primary" onchange="toggleSubInfo()">
</div> </div>
<div id="setid-toggle" class="form-control w-1/2"> <div id="setid-toggle" class="form-control w-1/3">
<label class="label"> <label class="label">
<span class="label-text text-warning">显示/隐藏 组织信息</span> <span class="label-text text-warning">组织信息</span>
</label> </label>
<input type="checkbox" class="toggle toggle-primary" onchange="toggleSetidInfo()"> <input type="checkbox" class="toggle toggle-primary" onchange="toggleSetidInfo()">
</div> </div>
@ -72,24 +73,24 @@
查询 查询
</button> </button>
<footer class="footer bg-gray-800 text-white absolute bottom-0 left-0 "> <div class="toast ">
<div class="alert"> <div class="alert alert-info">
<p>广告链接: <p>广告链接:
<a href="https://chat.czl.net" target="_blank" class="text-accent">CZLChat</a> <a <a href="https://chat.czl.net" target="_blank" class="link link-hover">CZLChat</a> <a
href="https://oapi.czl.net" target="_blank" class="text-accent">CZLOapi</a> href="https://oapi.czl.net" target="_blank" class="link link-hover">CZLOapi</a>
<a href="https://store0.czl.net" target="_blank" class="text-accent">CZL Store</a> <a href="https://store0.czl.net" target="_blank" class="link link-hover">CZL Store</a>
<br> 本网页由<a href="https://woodchen.ink" target="_blank" class="text-accent">woodchen</a>开源于<a <br> 本网页由<a href="https://woodchen.ink" target="_blank" class="link link-hover">woodchen</a>开源于<a
href="https://github.com/woodchen-ink/openai-billing-query" target="_blank" href="https://github.com/woodchen-ink/openai-billing-query" target="_blank"
class="text-accent">Github</a>,欢迎给个star class="link link-hover">Github</a>,欢迎给个star
</p> </p>
</div> </div>
</footer> </div>
</div> </div>
<div class="content pl-6"> <div class="content pl-6 pt-6">
<h2 class="textarea-lg">查询结果</h2> <h2 class="text-2xl mb-6 font-semibold text-gradient">查询结果</h2>
<div class="overflow-x-auto"> <div class="overflow-x-auto">
<div class="overflow-y-hidden"> <div class="overflow-y-hidden ">
<table id="result-table" class="table table-xs bg-neutral-content/20 w-full"> <table id="result-table" class="table table-xs bg-neutral-content/20 w-full">
<thead class="text-white"> <thead class="text-white">
<tr> <tr>

View File

@ -1,10 +1,11 @@
body { body {
background: url('https://cdn-img.czl.net/2023/05/23/pjbczr.webp') no-repeat center center fixed; background: url('https://cdn-img.czl.net/2023/05/23/pjbczr.webp') no-repeat center center fixed;
background-size: cover;
} }
html, html,
body { body {
height: 100VH; height: 100%;
} }
.container { .container {
@ -20,6 +21,3 @@ body {
width: 70%; width: 70%;
} }
.footer {
margin-top: auto;
}

View File

@ -1,20 +1,22 @@
module.exports = { module.exports = {
//...
// add daisyUI plugin theme: {
plugins: [require("daisyui")],
// daisyUI config (optional - here are the default values) },
daisyui: {
themes: false, // true: all themes | false: only light + dark | array: specific themes like this ["light", "dark", "cupcake"]
darkTheme: "dark", // name of one of the included themes for dark mode
base: true, // applies background color and foreground color for root element by default
styled: true, // include daisyUI colors and design decisions for all components
utils: true, // adds responsive and modifier utility classes
rtl: false, // rotate style direction from left-to-right to right-to-left. You also need to add dir="rtl" to your html tag and install `tailwindcss-flip` plugin for Tailwind CSS.
prefix: "", // prefix for daisyUI classnames (components, modifiers and responsive class names. Not colors)
logs: true, // Shows info about daisyUI version and used config in the console when building your CSS
},
//... plugins: [require("daisyui")],
}
daisyui: {
themes: false,
darkTheme: "dark",
base: true,
styled: true,
utils: true,
rtl: false,
prefix: "",
logs: true,
},
//...
}