parent
59bce92d7d
commit
e2957de458
File diff suppressed because it is too large
Load Diff
@ -1,428 +1,428 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>药品管理系统</title>
|
||||
<style>
|
||||
html, body
|
||||
{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
|
||||
}
|
||||
.container {
|
||||
display: flex;
|
||||
background-color: #131212; /* 设置背景颜色为红色 */
|
||||
width: 100%; /* 设置div的宽度 */
|
||||
height: 100%; /* 设置div的高度 */
|
||||
}
|
||||
.box1
|
||||
{
|
||||
|
||||
|
||||
width: 10%; /* 设置div的宽度 */
|
||||
height: 100%; /* 设置div的高度 */
|
||||
--color: #E1E1E1;
|
||||
background-color: #F3F3F3;
|
||||
background-image: linear-gradient(0deg, transparent 24%, var(--color) 25%, var(--color) 26%, transparent 27%,transparent 74%, var(--color) 75%, var(--color) 76%, transparent 77%,transparent),
|
||||
linear-gradient(90deg, transparent 24%, var(--color) 25%, var(--color) 26%, transparent 27%,transparent 74%, var(--color) 75%, var(--color) 76%, transparent 77%,transparent);
|
||||
background-size: 55px 55px;
|
||||
}
|
||||
.box2
|
||||
{
|
||||
|
||||
width: 90%; /* 设置div的宽度 */
|
||||
height: 100%; /* 设置div的高度 */
|
||||
background-color: #ffffff;
|
||||
background-image: radial-gradient(rgba(12, 12, 12, 0.171) 2px, transparent 0);
|
||||
background-size: 30px 30px;
|
||||
background-position: -5px -5px;
|
||||
}
|
||||
|
||||
.box3
|
||||
{
|
||||
|
||||
width: 100%; /* 设置div的宽度 */
|
||||
height: 7%; /* 设置div的高度 */
|
||||
padding: 1px;
|
||||
/* text-align: left;
|
||||
align-items: center; */
|
||||
--s: 100px; /* control the size */
|
||||
--c1: #dadee1;
|
||||
--c2: #b3c2c7;
|
||||
--c3: #f6fdf9;
|
||||
|
||||
--_c: 75%, var(--c3) 52.72deg, #0000 0;
|
||||
--_g1: conic-gradient(from -116.36deg at 25% var(--_c));
|
||||
--_g2: conic-gradient(from 63.43deg at 75% var(--_c));
|
||||
background: var(--_g1), var(--_g1) calc(3 * var(--s)) calc(var(--s) / 2),
|
||||
var(--_g2), var(--_g2) calc(3 * var(--s)) calc(var(--s) / 2),
|
||||
conic-gradient(
|
||||
var(--c2) 63.43deg,
|
||||
var(--c1) 0 116.36deg,
|
||||
var(--c2) 0 180deg,
|
||||
var(--c1) 0 243.43deg,
|
||||
var(--c2) 0 296.15deg,
|
||||
var(--c1) 0
|
||||
);
|
||||
background-size: calc(2 * var(--s)) var(--s);
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.box4
|
||||
{
|
||||
|
||||
width: 100%; /* 设置div的宽度 */
|
||||
height: 93%; /* 设置div的高度 */
|
||||
background-color: #ffffff;
|
||||
background-image: radial-gradient(rgba(12, 12, 12, 0.171) 2px, transparent 0);
|
||||
background-size: 30px 30px;
|
||||
background-position: -5px -5px;
|
||||
}
|
||||
|
||||
.cta {
|
||||
position: relative;
|
||||
margin: auto;
|
||||
padding: 12px 18px;
|
||||
transition: all 0.2s ease;
|
||||
border: none;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.cta:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: block;
|
||||
border-radius: 50px;
|
||||
background: #b1dae7;
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.cta span {
|
||||
position: relative;
|
||||
font-family: "Ubuntu", sans-serif;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.05em;
|
||||
color: #234567;
|
||||
}
|
||||
|
||||
.cta svg {
|
||||
position: relative;
|
||||
top: 0;
|
||||
margin-left: 10px;
|
||||
fill: none;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
stroke: #234567;
|
||||
stroke-width: 2;
|
||||
transform: translateX(-5px);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.cta:hover:before {
|
||||
width: 100%;
|
||||
background: #b1dae7;
|
||||
}
|
||||
|
||||
.cta:hover svg {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.cta:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 100%;
|
||||
background-color: #00BFA6;
|
||||
padding: 14px 40px;
|
||||
color: #fff;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
cursor: pointer;
|
||||
border-radius: 10px;
|
||||
border: 2px dashed #00BFA6;
|
||||
box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
|
||||
transition: .4s;
|
||||
}
|
||||
|
||||
.btn span:last-child {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
transition: .4s;
|
||||
border: 2px dashed #00BFA6;
|
||||
background-color: #fff;
|
||||
color: #00BFA6;
|
||||
}
|
||||
|
||||
.btn:active {
|
||||
background-color: #87dbd0;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- <div class="box3">
|
||||
<h2>药品管理系统</h2>
|
||||
</div> -->
|
||||
|
||||
<div class="container">
|
||||
<div id="caidan" class="box1" >
|
||||
<h1></h1>
|
||||
<button class="cta" onclick="jumphome()" >
|
||||
<span>首页</span>
|
||||
<svg width="15px" height="10px" viewBox="0 0 13 10">
|
||||
<path d="M1,5 L11,5"></path>
|
||||
<polyline points="8 1 12 5 8 9"></polyline>
|
||||
</svg>
|
||||
</button>
|
||||
<h1></h1>
|
||||
|
||||
<button class="cta" onclick="jumpmain()">
|
||||
<span>药品基本操作</span>
|
||||
<svg width="15px" height="10px" viewBox="0 0 13 10">
|
||||
<path d="M1,5 L11,5"></path>
|
||||
<polyline points="8 1 12 5 8 9"></polyline>
|
||||
</svg>
|
||||
</button>
|
||||
<h1></h1>
|
||||
|
||||
<button class="cta" onclick="jumptype()">
|
||||
<span>药品分类信息</span>
|
||||
<svg width="15px" height="10px" viewBox="0 0 13 10">
|
||||
<path d="M1,5 L11,5"></path>
|
||||
<polyline points="8 1 12 5 8 9"></polyline>
|
||||
</svg>
|
||||
</button>
|
||||
<button id="type1" style="display: none;" class="btn" onclick="jumptype1()">骨科用药</button>
|
||||
<button id="type2" style="display: none;" class="btn" onclick="jumptype2()">眼科用药</button>
|
||||
<button id="type3" style="display: none;" class="btn" onclick="jumptype3()">皮肤科用药</button>
|
||||
<button id="type4" style="display: none;" class="btn" onclick="jumptype4()">呼吸系统药</button>
|
||||
<button id="type5" style="display: none;" class="btn" onclick="jumptype5()">消化系统药</button>
|
||||
<button id="type6" style="display: none;" class="btn" onclick="jumptype6()">心血管系统药</button>
|
||||
<h1> </h1>
|
||||
|
||||
|
||||
<button class="cta" onclick="jumpjin()">
|
||||
<span>进库药品统计</span>
|
||||
<svg width="15px" height="10px" viewBox="0 0 13 10">
|
||||
<path d="M1,5 L11,5"></path>
|
||||
<polyline points="8 1 12 5 8 9"></polyline>
|
||||
</svg>
|
||||
</button>
|
||||
<h1></h1>
|
||||
|
||||
|
||||
<button class="cta" onclick="jumpchu()">
|
||||
<span>出库药品统计</span>
|
||||
<svg width="15px" height="10px" viewBox="0 0 13 10">
|
||||
<path d="M1,5 L11,5"></path>
|
||||
<polyline points="8 1 12 5 8 9"></polyline>
|
||||
</svg>
|
||||
</button>
|
||||
<h1></h1>
|
||||
|
||||
|
||||
<button class="cta" onclick="jumpanlyse()" >
|
||||
<span>药品统计</span>
|
||||
<svg width="15px" height="10px" viewBox="0 0 13 10">
|
||||
<path d="M1,5 L11,5"></path>
|
||||
<polyline points="8 1 12 5 8 9"></polyline>
|
||||
</svg>
|
||||
</button>
|
||||
<h1></h1>
|
||||
|
||||
|
||||
<button class="cta" onclick="jumpin()" >
|
||||
<span>导入药品信息</span>
|
||||
<svg width="15px" height="10px" viewBox="0 0 13 10">
|
||||
<path d="M1,5 L11,5"></path>
|
||||
<polyline points="8 1 12 5 8 9"></polyline>
|
||||
</svg>
|
||||
</button>
|
||||
<h1></h1>
|
||||
|
||||
|
||||
<button class="cta" onclick="jumpout()" >
|
||||
<span>导出药品信息</span>
|
||||
<svg width="15px" height="10px" viewBox="0 0 13 10">
|
||||
<path d="M1,5 L11,5"></path>
|
||||
<polyline points="8 1 12 5 8 9"></polyline>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="box2">
|
||||
<div class="box3">
|
||||
<h2 id="heaer">药品管理系统〉首页</h2>
|
||||
</div>
|
||||
<div id="neirong" class="box4">
|
||||
<iframe id="sonpage" src="../src/Home-page/Home-page.html" width="100%" height="100%"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<script>
|
||||
|
||||
function jumphome(){
|
||||
var iframe = document.getElementById('sonpage');
|
||||
iframe.src = "../src/Home-page/Home-page.html";
|
||||
document.getElementById('heaer').textContent = '药品管理系统〉首页';
|
||||
|
||||
}
|
||||
|
||||
function jumpmain(){
|
||||
var iframe = document.getElementById('sonpage');
|
||||
iframe.src = "../src/Basic-information/Basic-information-1.html";
|
||||
document.getElementById('heaer').textContent = '药品管理系统〉药品基本操作';
|
||||
}
|
||||
|
||||
function jumpjin(){
|
||||
var iframe = document.getElementById('sonpage');
|
||||
iframe.src = "../src/Income-statistics/Income-statistics.html";
|
||||
document.getElementById('heaer').textContent = '药品管理系统〉进库药品统计';
|
||||
}
|
||||
|
||||
function jumpchu(){
|
||||
var iframe = document.getElementById('sonpage');
|
||||
iframe.src = "../src/Outbound-statistics/Outbound-statistics.html";
|
||||
document.getElementById('heaer').textContent = '药品管理系统〉出库药品统计';
|
||||
}
|
||||
|
||||
function jumpout(){
|
||||
var iframe = document.getElementById('sonpage');
|
||||
iframe.src = "../src/Export-information/Export-information.html";
|
||||
document.getElementById('heaer').textContent = '药品管理系统〉导出药品信息';
|
||||
}
|
||||
|
||||
function jumpin(){
|
||||
var iframe = document.getElementById('sonpage');
|
||||
iframe.src = "../src/Import-information/Import-information.html";
|
||||
document.getElementById('heaer').textContent = '药品管理系统〉导入药品信息';
|
||||
}
|
||||
|
||||
function jumpanlyse(){
|
||||
var iframe = document.getElementById('sonpage');
|
||||
iframe.src = "../src/Information-statistics/Information-statistics.html";
|
||||
document.getElementById('heaer').textContent = '药品管理系统〉药品统计';
|
||||
}
|
||||
|
||||
function jumptype1(){
|
||||
var iframe = document.getElementById('sonpage');
|
||||
iframe.src = "../src/Orthopedic-medication/Orthopedic-medication.html";
|
||||
document.getElementById('heaer').textContent = '药品管理系统〉药品分类信息〉骨科用药';
|
||||
}
|
||||
|
||||
function jumptype2(){
|
||||
var iframe = document.getElementById('sonpage');
|
||||
iframe.src = "../src/Ophthalmic-medication/Ophthalmic-medication.html";
|
||||
document.getElementById('heaer').textContent = '药品管理系统〉药品分类信息〉眼科用药';
|
||||
}
|
||||
|
||||
function jumptype3(){
|
||||
var iframe = document.getElementById('sonpage');
|
||||
iframe.src = "../src/Dermatological-medication/Dermatological-medication.html";
|
||||
document.getElementById('heaer').textContent = '药品管理系统〉药品分类信息〉皮肤科用药';
|
||||
}
|
||||
|
||||
function jumptype4(){
|
||||
var iframe = document.getElementById('sonpage');
|
||||
iframe.src = "../src/Respiratory-system-medication/Respiratory-system-medication.html";
|
||||
document.getElementById('heaer').textContent = '药品管理系统〉药品分类信息〉呼吸系统药';
|
||||
}
|
||||
|
||||
function jumptype5(){
|
||||
var iframe = document.getElementById('sonpage');
|
||||
iframe.src = "../src/Digestive-system-drugs/Digestive-system-drugs.html";
|
||||
document.getElementById('heaer').textContent = '药品管理系统〉药品分类信息〉消化系统药';
|
||||
}
|
||||
|
||||
function jumptype6(){
|
||||
var iframe = document.getElementById('sonpage');
|
||||
iframe.src = "../src/Cardiovascular-system-drugs/Cardiovascular-system-drugs.html";
|
||||
document.getElementById('heaer').textContent = '药品管理系统〉药品分类信息〉心血管系统药';
|
||||
}
|
||||
|
||||
function jumptype(){
|
||||
if (document.getElementById('type1').style.display == 'none'){
|
||||
|
||||
document.getElementById('type1').style.display = 'block';
|
||||
}
|
||||
else if (document.getElementById('type1').style.display == 'block'){
|
||||
|
||||
document.getElementById('type1').style.display = 'none';
|
||||
}
|
||||
if (document.getElementById('type2').style.display == 'none'){
|
||||
|
||||
document.getElementById('type2').style.display = 'block';
|
||||
|
||||
}
|
||||
else if (document.getElementById('type2').style.display == 'block'){
|
||||
|
||||
document.getElementById('type2').style.display = 'none';
|
||||
|
||||
}
|
||||
if (document.getElementById('type3').style.display == 'none'){
|
||||
|
||||
document.getElementById('type3').style.display = 'block';
|
||||
|
||||
}
|
||||
else if (document.getElementById('type3').style.display == 'block'){
|
||||
|
||||
document.getElementById('type3').style.display = 'none';
|
||||
|
||||
}
|
||||
if (document.getElementById('type4').style.display == 'none'){
|
||||
|
||||
document.getElementById('type4').style.display = 'block';
|
||||
|
||||
}
|
||||
else if (document.getElementById('type4').style.display == 'block'){
|
||||
|
||||
document.getElementById('type4').style.display = 'none';
|
||||
|
||||
}
|
||||
if (document.getElementById('type5').style.display == 'none'){
|
||||
|
||||
document.getElementById('type5').style.display = 'block';
|
||||
|
||||
}
|
||||
else if (document.getElementById('type5').style.display == 'block'){
|
||||
|
||||
document.getElementById('type5').style.display = 'none';
|
||||
|
||||
}
|
||||
if (document.getElementById('type6').style.display == 'none'){
|
||||
|
||||
document.getElementById('type6').style.display = 'block';
|
||||
|
||||
}
|
||||
else if (document.getElementById('type6').style.display == 'block'){
|
||||
|
||||
document.getElementById('type6').style.display = 'none';
|
||||
|
||||
}
|
||||
|
||||
document.getElementById('heaer').textContent = '药品管理系统〉药品分类信息';
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>药品管理系统</title>
|
||||
<style>
|
||||
html, body
|
||||
{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
|
||||
}
|
||||
.container {
|
||||
display: flex;
|
||||
background-color: #131212; /* 设置背景颜色为红色 */
|
||||
width: 100%; /* 设置div的宽度 */
|
||||
height: 100%; /* 设置div的高度 */
|
||||
}
|
||||
.box1
|
||||
{
|
||||
|
||||
|
||||
width: 10%; /* 设置div的宽度 */
|
||||
height: 100%; /* 设置div的高度 */
|
||||
--color: #E1E1E1;
|
||||
background-color: #F3F3F3;
|
||||
background-image: linear-gradient(0deg, transparent 24%, var(--color) 25%, var(--color) 26%, transparent 27%,transparent 74%, var(--color) 75%, var(--color) 76%, transparent 77%,transparent),
|
||||
linear-gradient(90deg, transparent 24%, var(--color) 25%, var(--color) 26%, transparent 27%,transparent 74%, var(--color) 75%, var(--color) 76%, transparent 77%,transparent);
|
||||
background-size: 55px 55px;
|
||||
}
|
||||
.box2
|
||||
{
|
||||
|
||||
width: 90%; /* 设置div的宽度 */
|
||||
height: 100%; /* 设置div的高度 */
|
||||
background-color: #ffffff;
|
||||
background-image: radial-gradient(rgba(12, 12, 12, 0.171) 2px, transparent 0);
|
||||
background-size: 30px 30px;
|
||||
background-position: -5px -5px;
|
||||
}
|
||||
|
||||
.box3
|
||||
{
|
||||
|
||||
width: 100%; /* 设置div的宽度 */
|
||||
height: 7%; /* 设置div的高度 */
|
||||
padding: 1px;
|
||||
/* text-align: left;
|
||||
align-items: center; */
|
||||
--s: 100px; /* control the size */
|
||||
--c1: #dadee1;
|
||||
--c2: #b3c2c7;
|
||||
--c3: #f6fdf9;
|
||||
|
||||
--_c: 75%, var(--c3) 52.72deg, #0000 0;
|
||||
--_g1: conic-gradient(from -116.36deg at 25% var(--_c));
|
||||
--_g2: conic-gradient(from 63.43deg at 75% var(--_c));
|
||||
background: var(--_g1), var(--_g1) calc(3 * var(--s)) calc(var(--s) / 2),
|
||||
var(--_g2), var(--_g2) calc(3 * var(--s)) calc(var(--s) / 2),
|
||||
conic-gradient(
|
||||
var(--c2) 63.43deg,
|
||||
var(--c1) 0 116.36deg,
|
||||
var(--c2) 0 180deg,
|
||||
var(--c1) 0 243.43deg,
|
||||
var(--c2) 0 296.15deg,
|
||||
var(--c1) 0
|
||||
);
|
||||
background-size: calc(2 * var(--s)) var(--s);
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.box4
|
||||
{
|
||||
|
||||
width: 100%; /* 设置div的宽度 */
|
||||
height: 93%; /* 设置div的高度 */
|
||||
background-color: #ffffff;
|
||||
background-image: radial-gradient(rgba(12, 12, 12, 0.171) 2px, transparent 0);
|
||||
background-size: 30px 30px;
|
||||
background-position: -5px -5px;
|
||||
}
|
||||
|
||||
.cta {
|
||||
position: relative;
|
||||
margin: auto;
|
||||
padding: 12px 18px;
|
||||
transition: all 0.2s ease;
|
||||
border: none;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.cta:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: block;
|
||||
border-radius: 50px;
|
||||
background: #b1dae7;
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.cta span {
|
||||
position: relative;
|
||||
font-family: "Ubuntu", sans-serif;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.05em;
|
||||
color: #234567;
|
||||
}
|
||||
|
||||
.cta svg {
|
||||
position: relative;
|
||||
top: 0;
|
||||
margin-left: 10px;
|
||||
fill: none;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
stroke: #234567;
|
||||
stroke-width: 2;
|
||||
transform: translateX(-5px);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.cta:hover:before {
|
||||
width: 100%;
|
||||
background: #b1dae7;
|
||||
}
|
||||
|
||||
.cta:hover svg {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.cta:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 100%;
|
||||
background-color: #00BFA6;
|
||||
padding: 14px 40px;
|
||||
color: #fff;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
cursor: pointer;
|
||||
border-radius: 10px;
|
||||
border: 2px dashed #00BFA6;
|
||||
box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
|
||||
transition: .4s;
|
||||
}
|
||||
|
||||
.btn span:last-child {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
transition: .4s;
|
||||
border: 2px dashed #00BFA6;
|
||||
background-color: #fff;
|
||||
color: #00BFA6;
|
||||
}
|
||||
|
||||
.btn:active {
|
||||
background-color: #87dbd0;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- <div class="box3">
|
||||
<h2>药品管理系统</h2>
|
||||
</div> -->
|
||||
|
||||
<div class="container">
|
||||
<div id="caidan" class="box1" >
|
||||
<h1></h1>
|
||||
<button class="cta" onclick="jumphome()" >
|
||||
<span>首页</span>
|
||||
<svg width="15px" height="10px" viewBox="0 0 13 10">
|
||||
<path d="M1,5 L11,5"></path>
|
||||
<polyline points="8 1 12 5 8 9"></polyline>
|
||||
</svg>
|
||||
</button>
|
||||
<h1></h1>
|
||||
|
||||
<button class="cta" onclick="jumpmain()">
|
||||
<span>药品基本操作</span>
|
||||
<svg width="15px" height="10px" viewBox="0 0 13 10">
|
||||
<path d="M1,5 L11,5"></path>
|
||||
<polyline points="8 1 12 5 8 9"></polyline>
|
||||
</svg>
|
||||
</button>
|
||||
<h1></h1>
|
||||
|
||||
<button class="cta" onclick="jumptype()">
|
||||
<span>药品分类信息</span>
|
||||
<svg width="15px" height="10px" viewBox="0 0 13 10">
|
||||
<path d="M1,5 L11,5"></path>
|
||||
<polyline points="8 1 12 5 8 9"></polyline>
|
||||
</svg>
|
||||
</button>
|
||||
<button id="type1" style="display: none;" class="btn" onclick="jumptype1()">骨科用药</button>
|
||||
<button id="type2" style="display: none;" class="btn" onclick="jumptype2()">眼科用药</button>
|
||||
<button id="type3" style="display: none;" class="btn" onclick="jumptype3()">皮肤科用药</button>
|
||||
<button id="type4" style="display: none;" class="btn" onclick="jumptype4()">呼吸系统药</button>
|
||||
<button id="type5" style="display: none;" class="btn" onclick="jumptype5()">消化系统药</button>
|
||||
<button id="type6" style="display: none;" class="btn" onclick="jumptype6()">心血管系统药</button>
|
||||
<h1> </h1>
|
||||
|
||||
|
||||
<button class="cta" onclick="jumpjin()">
|
||||
<span>进库药品统计</span>
|
||||
<svg width="15px" height="10px" viewBox="0 0 13 10">
|
||||
<path d="M1,5 L11,5"></path>
|
||||
<polyline points="8 1 12 5 8 9"></polyline>
|
||||
</svg>
|
||||
</button>
|
||||
<h1></h1>
|
||||
|
||||
|
||||
<button class="cta" onclick="jumpchu()">
|
||||
<span>出库药品统计</span>
|
||||
<svg width="15px" height="10px" viewBox="0 0 13 10">
|
||||
<path d="M1,5 L11,5"></path>
|
||||
<polyline points="8 1 12 5 8 9"></polyline>
|
||||
</svg>
|
||||
</button>
|
||||
<h1></h1>
|
||||
|
||||
|
||||
<button class="cta" onclick="jumpanlyse()" >
|
||||
<span>药品统计</span>
|
||||
<svg width="15px" height="10px" viewBox="0 0 13 10">
|
||||
<path d="M1,5 L11,5"></path>
|
||||
<polyline points="8 1 12 5 8 9"></polyline>
|
||||
</svg>
|
||||
</button>
|
||||
<h1></h1>
|
||||
|
||||
|
||||
<button class="cta" onclick="jumpin()" >
|
||||
<span>导入药品信息</span>
|
||||
<svg width="15px" height="10px" viewBox="0 0 13 10">
|
||||
<path d="M1,5 L11,5"></path>
|
||||
<polyline points="8 1 12 5 8 9"></polyline>
|
||||
</svg>
|
||||
</button>
|
||||
<h1></h1>
|
||||
|
||||
|
||||
<button class="cta" onclick="jumpout()" >
|
||||
<span>导出药品信息</span>
|
||||
<svg width="15px" height="10px" viewBox="0 0 13 10">
|
||||
<path d="M1,5 L11,5"></path>
|
||||
<polyline points="8 1 12 5 8 9"></polyline>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="box2">
|
||||
<div class="box3">
|
||||
<h2 id="heaer">药品管理系统〉首页</h2>
|
||||
</div>
|
||||
<div id="neirong" class="box4">
|
||||
<iframe id="sonpage" src="../src/Home-page/Home-page.html" width="100%" height="100%"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<script>
|
||||
|
||||
function jumphome(){
|
||||
var iframe = document.getElementById('sonpage');
|
||||
iframe.src = "../src/Home-page/Home-page.html";
|
||||
document.getElementById('heaer').textContent = '药品管理系统〉首页';
|
||||
|
||||
}
|
||||
|
||||
function jumpmain(){
|
||||
var iframe = document.getElementById('sonpage');
|
||||
iframe.src = "../src/Basic-information/Basic-information-1.html";
|
||||
document.getElementById('heaer').textContent = '药品管理系统〉药品基本操作';
|
||||
}
|
||||
|
||||
function jumpjin(){
|
||||
var iframe = document.getElementById('sonpage');
|
||||
iframe.src = "../src/Income-statistics/Income-statistics.html";
|
||||
document.getElementById('heaer').textContent = '药品管理系统〉进库药品统计';
|
||||
}
|
||||
|
||||
function jumpchu(){
|
||||
var iframe = document.getElementById('sonpage');
|
||||
iframe.src = "../src/Outbound-statistics/Outbound-statistics.html";
|
||||
document.getElementById('heaer').textContent = '药品管理系统〉出库药品统计';
|
||||
}
|
||||
|
||||
function jumpout(){
|
||||
var iframe = document.getElementById('sonpage');
|
||||
iframe.src = "../src/Export-information/Export-information.html";
|
||||
document.getElementById('heaer').textContent = '药品管理系统〉导出药品信息';
|
||||
}
|
||||
|
||||
function jumpin(){
|
||||
var iframe = document.getElementById('sonpage');
|
||||
iframe.src = "../src/Import-information/Import-information.html";
|
||||
document.getElementById('heaer').textContent = '药品管理系统〉导入药品信息';
|
||||
}
|
||||
|
||||
function jumpanlyse(){
|
||||
var iframe = document.getElementById('sonpage');
|
||||
iframe.src = "../src/Information-statistics/Information-statistics.html";
|
||||
document.getElementById('heaer').textContent = '药品管理系统〉药品统计';
|
||||
}
|
||||
|
||||
function jumptype1(){
|
||||
var iframe = document.getElementById('sonpage');
|
||||
iframe.src = "../src/Orthopedic-medication/Orthopedic-medication.html";
|
||||
document.getElementById('heaer').textContent = '药品管理系统〉药品分类信息〉骨科用药';
|
||||
}
|
||||
|
||||
function jumptype2(){
|
||||
var iframe = document.getElementById('sonpage');
|
||||
iframe.src = "../src/Ophthalmic-medication/Ophthalmic-medication.html";
|
||||
document.getElementById('heaer').textContent = '药品管理系统〉药品分类信息〉眼科用药';
|
||||
}
|
||||
|
||||
function jumptype3(){
|
||||
var iframe = document.getElementById('sonpage');
|
||||
iframe.src = "../src/Dermatological-medication/Dermatological-medication.html";
|
||||
document.getElementById('heaer').textContent = '药品管理系统〉药品分类信息〉皮肤科用药';
|
||||
}
|
||||
|
||||
function jumptype4(){
|
||||
var iframe = document.getElementById('sonpage');
|
||||
iframe.src = "../src/Respiratory-system-medication/Respiratory-system-medication.html";
|
||||
document.getElementById('heaer').textContent = '药品管理系统〉药品分类信息〉呼吸系统药';
|
||||
}
|
||||
|
||||
function jumptype5(){
|
||||
var iframe = document.getElementById('sonpage');
|
||||
iframe.src = "../src/Digestive-system-drugs/Digestive-system-drugs.html";
|
||||
document.getElementById('heaer').textContent = '药品管理系统〉药品分类信息〉消化系统药';
|
||||
}
|
||||
|
||||
function jumptype6(){
|
||||
var iframe = document.getElementById('sonpage');
|
||||
iframe.src = "../src/Cardiovascular-system-drugs/Cardiovascular-system-drugs.html";
|
||||
document.getElementById('heaer').textContent = '药品管理系统〉药品分类信息〉心血管系统药';
|
||||
}
|
||||
|
||||
function jumptype(){
|
||||
if (document.getElementById('type1').style.display == 'none'){
|
||||
|
||||
document.getElementById('type1').style.display = 'block';
|
||||
}
|
||||
else if (document.getElementById('type1').style.display == 'block'){
|
||||
|
||||
document.getElementById('type1').style.display = 'none';
|
||||
}
|
||||
if (document.getElementById('type2').style.display == 'none'){
|
||||
|
||||
document.getElementById('type2').style.display = 'block';
|
||||
|
||||
}
|
||||
else if (document.getElementById('type2').style.display == 'block'){
|
||||
|
||||
document.getElementById('type2').style.display = 'none';
|
||||
|
||||
}
|
||||
if (document.getElementById('type3').style.display == 'none'){
|
||||
|
||||
document.getElementById('type3').style.display = 'block';
|
||||
|
||||
}
|
||||
else if (document.getElementById('type3').style.display == 'block'){
|
||||
|
||||
document.getElementById('type3').style.display = 'none';
|
||||
|
||||
}
|
||||
if (document.getElementById('type4').style.display == 'none'){
|
||||
|
||||
document.getElementById('type4').style.display = 'block';
|
||||
|
||||
}
|
||||
else if (document.getElementById('type4').style.display == 'block'){
|
||||
|
||||
document.getElementById('type4').style.display = 'none';
|
||||
|
||||
}
|
||||
if (document.getElementById('type5').style.display == 'none'){
|
||||
|
||||
document.getElementById('type5').style.display = 'block';
|
||||
|
||||
}
|
||||
else if (document.getElementById('type5').style.display == 'block'){
|
||||
|
||||
document.getElementById('type5').style.display = 'none';
|
||||
|
||||
}
|
||||
if (document.getElementById('type6').style.display == 'none'){
|
||||
|
||||
document.getElementById('type6').style.display = 'block';
|
||||
|
||||
}
|
||||
else if (document.getElementById('type6').style.display == 'block'){
|
||||
|
||||
document.getElementById('type6').style.display = 'none';
|
||||
|
||||
}
|
||||
|
||||
document.getElementById('heaer').textContent = '药品管理系统〉药品分类信息';
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</html>
|
||||
@ -1,180 +1,180 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>登录界面</title>
|
||||
<link rel=" stylesheet" href="./load.css">
|
||||
<h1>药品管理系统</h1>
|
||||
<h2 id="H1">请登录您的账号</h2>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="Load" class="deng">
|
||||
<h1>登录</h1>
|
||||
<h1></h1>
|
||||
<div class="group">
|
||||
<input id="1" required="" type="text" class="input">
|
||||
<span class="highlight"></span>
|
||||
<span class="bar"></span>
|
||||
<label>用户名</label>
|
||||
</div>
|
||||
<h1></h1>
|
||||
<div class="group">
|
||||
<input id="2" required="" type="text" class="input">
|
||||
<span class="highlight"></span>
|
||||
<span class="bar"></span>
|
||||
<label>密码</label>
|
||||
</div>
|
||||
<h1></h1>
|
||||
<button type = "button" class="button-name" onclick="load()">登 录</button>
|
||||
<!-- <button type = "button" class="button-name" onclick="add()">注册</button> -->
|
||||
<h1>没有账号？点击注册！</h1>
|
||||
<button class="Btn" onclick="dd()">
|
||||
注册
|
||||
<svg viewBox="0 0 512 512" class="svg">
|
||||
<path
|
||||
d="M410.3 231l11.3-11.3-33.9-33.9-62.1-62.1L291.7 89.8l-11.3 11.3-22.6 22.6L58.6 322.9c-10.4 10.4-18 23.3-22.2 37.4L1 480.7c-2.5 8.4-.2 17.5 6.1 23.7s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L387.7 253.7 410.3 231zM160 399.4l-9.1 22.7c-4 3.1-8.5 5.4-13.3 6.9L59.4 452l23-78.1c1.4-4.9 3.8-9.4 6.9-13.3l22.7-9.1v32c0 8.8 7.2 16 16 16h32zM362.7 18.7L348.3 33.2 325.7 55.8 314.3 67.1l33.9 33.9 62.1 62.1 33.9 33.9 11.3-11.3 22.6-22.6 14.5-14.5c25-25 25-65.5 0-90.5L453.3 18.7c-25-25-65.5-25-90.5 0zm-47.4 168l-144 144c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l144-144c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6z"
|
||||
></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div id="Add" class="deng1" style="display: none;">
|
||||
<h1>注册</h1>
|
||||
<h1></h1>
|
||||
<div class="group">
|
||||
<input id="3" required="" type="text" class="input">
|
||||
<span class="highlight"></span>
|
||||
<span class="bar"></span>
|
||||
<label>用户名</label>
|
||||
</div>
|
||||
<h1></h1>
|
||||
<div class="group">
|
||||
<input id="4" required="" type="text" class="input">
|
||||
<span class="highlight"></span>
|
||||
<span class="bar"></span>
|
||||
<label>密码</label>
|
||||
</div>
|
||||
<h1></h1>
|
||||
<button type = "button" class="button-name" onclick="add()">注册</button>
|
||||
<!-- <button type = "button" class="button-name" onclick="add()">注册</button> -->
|
||||
<h1>已有账号？点击登录！</h1>
|
||||
<button class="Btn" onclick="bb()">
|
||||
登录
|
||||
<svg viewBox="0 0 512 512" class="svg">
|
||||
<path
|
||||
d="M410.3 231l11.3-11.3-33.9-33.9-62.1-62.1L291.7 89.8l-11.3 11.3-22.6 22.6L58.6 322.9c-10.4 10.4-18 23.3-22.2 37.4L1 480.7c-2.5 8.4-.2 17.5 6.1 23.7s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L387.7 253.7 410.3 231zM160 399.4l-9.1 22.7c-4 3.1-8.5 5.4-13.3 6.9L59.4 452l23-78.1c1.4-4.9 3.8-9.4 6.9-13.3l22.7-9.1v32c0 8.8 7.2 16 16 16h32zM362.7 18.7L348.3 33.2 325.7 55.8 314.3 67.1l33.9 33.9 62.1 62.1 33.9 33.9 11.3-11.3 22.6-22.6 14.5-14.5c25-25 25-65.5 0-90.5L453.3 18.7c-25-25-65.5-25-90.5 0zm-47.4 168l-144 144c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l144-144c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6z"
|
||||
></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- <button id = "3" type = "button" class="button-name" onclick="load()">登录</button>
|
||||
|
||||
<button id = "4" type = "button" class="button-name" onclick="add()">注册</button> -->
|
||||
|
||||
</body>
|
||||
|
||||
<script>
|
||||
|
||||
function dd(){
|
||||
document.getElementById("Load").style.display='none';
|
||||
document.getElementById("Add").style.display='flex';
|
||||
document.getElementById('H1').innerHTML='注册您的账号';
|
||||
}
|
||||
|
||||
function bb(){
|
||||
document.getElementById("Load").style.display='flex';
|
||||
document.getElementById("Add").style.display='none';
|
||||
document.getElementById('H1').innerHTML='请登录您的账号';
|
||||
}
|
||||
|
||||
function load(){
|
||||
const name = document.getElementById("1").value;
|
||||
const mima = document.getElementById("2").value;
|
||||
if (name != "" && mima != ""){
|
||||
const zhanghao=confirm("确认密码：" + name + "\n" +
|
||||
"确认密码：" + mima);
|
||||
if (zhanghao){
|
||||
console.log(name);
|
||||
console.log(mima);
|
||||
var aai = 0;
|
||||
|
||||
fetch('http://localhost:3000')
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
console.log(name);
|
||||
console.log(mima);
|
||||
var i = 0;
|
||||
var loadd = 0;
|
||||
for (i=0;i<data.length;i++){
|
||||
console.log(data[i])
|
||||
if (name == data[i].用户名 && mima == data[i].密码){
|
||||
aai=1;
|
||||
const zhano=confirm("登录成功！！！");
|
||||
loadd = 1;
|
||||
if (zhano){
|
||||
console.log(aai);
|
||||
window.location.href = "../Backend-services/frame.html";
|
||||
}
|
||||
|
||||
break;
|
||||
}
|
||||
|
||||
}
|
||||
if (loadd == 0){
|
||||
alert("用户名或者密码错误！！！");
|
||||
}
|
||||
|
||||
})
|
||||
.catch(error => console.error('Error:', error));
|
||||
console.log(aai);
|
||||
|
||||
// fetchLocalData(name,mima);
|
||||
|
||||
}else{
|
||||
document.getElementById("1").value = null;
|
||||
document.getElementById("2").value = null;
|
||||
}
|
||||
}
|
||||
if (name == "" || mima == ""){
|
||||
alert("请完整输入用户名和密码！！！");
|
||||
}
|
||||
}
|
||||
|
||||
function add(){
|
||||
const name = document.getElementById("1").value;
|
||||
const mima = document.getElementById("2").value;
|
||||
console.log({name,mima});
|
||||
if (name == "" || mima == ""){
|
||||
alert("请输入完整的用户名和密码！！！");
|
||||
}
|
||||
else{
|
||||
const zhanghao=confirm("确认密码：" + name + "\n" +"确认密码：" + mima);
|
||||
if (zhanghao){
|
||||
const requestBody = {"wenti":0,"用户名":String(name),"密码":String(mima)};
|
||||
fetch('http://localhost:3000', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json' // 设置请求头为JSON
|
||||
},
|
||||
body: JSON.stringify(requestBody) // 将请求体转换为JSON字符串
|
||||
})
|
||||
.then(response =>
|
||||
response.json())
|
||||
.then(data => {
|
||||
console.log(data);
|
||||
}) // 打印服务器返回的数据
|
||||
|
||||
.catch(error => console.error('Error:', error)); // 捕获并打印错误信息
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>登录界面</title>
|
||||
<link rel=" stylesheet" href="./load.css">
|
||||
<h1>药品管理系统</h1>
|
||||
<h2 id="H1">请登录您的账号</h2>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="Load" class="deng">
|
||||
<h1>登录</h1>
|
||||
<h1></h1>
|
||||
<div class="group">
|
||||
<input id="1" required="" type="text" class="input">
|
||||
<span class="highlight"></span>
|
||||
<span class="bar"></span>
|
||||
<label>用户名</label>
|
||||
</div>
|
||||
<h1></h1>
|
||||
<div class="group">
|
||||
<input id="2" required="" type="text" class="input">
|
||||
<span class="highlight"></span>
|
||||
<span class="bar"></span>
|
||||
<label>密码</label>
|
||||
</div>
|
||||
<h1></h1>
|
||||
<button type = "button" class="button-name" onclick="load()">登 录</button>
|
||||
<!-- <button type = "button" class="button-name" onclick="add()">注册</button> -->
|
||||
<h1>没有账号？点击注册！</h1>
|
||||
<button class="Btn" onclick="dd()">
|
||||
注册
|
||||
<svg viewBox="0 0 512 512" class="svg">
|
||||
<path
|
||||
d="M410.3 231l11.3-11.3-33.9-33.9-62.1-62.1L291.7 89.8l-11.3 11.3-22.6 22.6L58.6 322.9c-10.4 10.4-18 23.3-22.2 37.4L1 480.7c-2.5 8.4-.2 17.5 6.1 23.7s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L387.7 253.7 410.3 231zM160 399.4l-9.1 22.7c-4 3.1-8.5 5.4-13.3 6.9L59.4 452l23-78.1c1.4-4.9 3.8-9.4 6.9-13.3l22.7-9.1v32c0 8.8 7.2 16 16 16h32zM362.7 18.7L348.3 33.2 325.7 55.8 314.3 67.1l33.9 33.9 62.1 62.1 33.9 33.9 11.3-11.3 22.6-22.6 14.5-14.5c25-25 25-65.5 0-90.5L453.3 18.7c-25-25-65.5-25-90.5 0zm-47.4 168l-144 144c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l144-144c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6z"
|
||||
></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div id="Add" class="deng1" style="display: none;">
|
||||
<h1>注册</h1>
|
||||
<h1></h1>
|
||||
<div class="group">
|
||||
<input id="3" required="" type="text" class="input">
|
||||
<span class="highlight"></span>
|
||||
<span class="bar"></span>
|
||||
<label>用户名</label>
|
||||
</div>
|
||||
<h1></h1>
|
||||
<div class="group">
|
||||
<input id="4" required="" type="text" class="input">
|
||||
<span class="highlight"></span>
|
||||
<span class="bar"></span>
|
||||
<label>密码</label>
|
||||
</div>
|
||||
<h1></h1>
|
||||
<button type = "button" class="button-name" onclick="add()">注册</button>
|
||||
<!-- <button type = "button" class="button-name" onclick="add()">注册</button> -->
|
||||
<h1>已有账号？点击登录！</h1>
|
||||
<button class="Btn" onclick="bb()">
|
||||
登录
|
||||
<svg viewBox="0 0 512 512" class="svg">
|
||||
<path
|
||||
d="M410.3 231l11.3-11.3-33.9-33.9-62.1-62.1L291.7 89.8l-11.3 11.3-22.6 22.6L58.6 322.9c-10.4 10.4-18 23.3-22.2 37.4L1 480.7c-2.5 8.4-.2 17.5 6.1 23.7s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L387.7 253.7 410.3 231zM160 399.4l-9.1 22.7c-4 3.1-8.5 5.4-13.3 6.9L59.4 452l23-78.1c1.4-4.9 3.8-9.4 6.9-13.3l22.7-9.1v32c0 8.8 7.2 16 16 16h32zM362.7 18.7L348.3 33.2 325.7 55.8 314.3 67.1l33.9 33.9 62.1 62.1 33.9 33.9 11.3-11.3 22.6-22.6 14.5-14.5c25-25 25-65.5 0-90.5L453.3 18.7c-25-25-65.5-25-90.5 0zm-47.4 168l-144 144c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l144-144c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6z"
|
||||
></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- <button id = "3" type = "button" class="button-name" onclick="load()">登录</button>
|
||||
|
||||
<button id = "4" type = "button" class="button-name" onclick="add()">注册</button> -->
|
||||
|
||||
</body>
|
||||
|
||||
<script>
|
||||
|
||||
function dd(){
|
||||
document.getElementById("Load").style.display='none';
|
||||
document.getElementById("Add").style.display='flex';
|
||||
document.getElementById('H1').innerHTML='注册您的账号';
|
||||
}
|
||||
|
||||
function bb(){
|
||||
document.getElementById("Load").style.display='flex';
|
||||
document.getElementById("Add").style.display='none';
|
||||
document.getElementById('H1').innerHTML='请登录您的账号';
|
||||
}
|
||||
|
||||
function load(){
|
||||
const name = document.getElementById("1").value;
|
||||
const mima = document.getElementById("2").value;
|
||||
if (name != "" && mima != ""){
|
||||
const zhanghao=confirm("确认密码：" + name + "\n" +
|
||||
"确认密码：" + mima);
|
||||
if (zhanghao){
|
||||
console.log(name);
|
||||
console.log(mima);
|
||||
var aai = 0;
|
||||
|
||||
fetch('http://localhost:3000')
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
console.log(name);
|
||||
console.log(mima);
|
||||
var i = 0;
|
||||
var loadd = 0;
|
||||
for (i=0;i<data.length;i++){
|
||||
console.log(data[i])
|
||||
if (name == data[i].用户名 && mima == data[i].密码){
|
||||
aai=1;
|
||||
const zhano=confirm("登录成功！！！");
|
||||
loadd = 1;
|
||||
if (zhano){
|
||||
console.log(aai);
|
||||
window.location.href = "../Backend-services/frame.html";
|
||||
}
|
||||
|
||||
break;
|
||||
}
|
||||
|
||||
}
|
||||
if (loadd == 0){
|
||||
alert("用户名或者密码错误！！！");
|
||||
}
|
||||
|
||||
})
|
||||
.catch(error => console.error('Error:', error));
|
||||
console.log(aai);
|
||||
|
||||
// fetchLocalData(name,mima);
|
||||
|
||||
}else{
|
||||
document.getElementById("1").value = null;
|
||||
document.getElementById("2").value = null;
|
||||
}
|
||||
}
|
||||
if (name == "" || mima == ""){
|
||||
alert("请完整输入用户名和密码！！！");
|
||||
}
|
||||
}
|
||||
|
||||
function add(){
|
||||
const name = document.getElementById("1").value;
|
||||
const mima = document.getElementById("2").value;
|
||||
console.log({name,mima});
|
||||
if (name == "" || mima == ""){
|
||||
alert("请输入完整的用户名和密码！！！");
|
||||
}
|
||||
else{
|
||||
const zhanghao=confirm("确认密码：" + name + "\n" +"确认密码：" + mima);
|
||||
if (zhanghao){
|
||||
const requestBody = {"wenti":0,"用户名":String(name),"密码":String(mima)};
|
||||
fetch('http://localhost:3000', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json' // 设置请求头为JSON
|
||||
},
|
||||
body: JSON.stringify(requestBody) // 将请求体转换为JSON字符串
|
||||
})
|
||||
.then(response =>
|
||||
response.json())
|
||||
.then(data => {
|
||||
console.log(data);
|
||||
}) // 打印服务器返回的数据
|
||||
|
||||
.catch(error => console.error('Error:', error)); // 捕获并打印错误信息
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
</html>
|
||||
@ -1,261 +1,261 @@
|
||||
h1{
|
||||
font-family: "Arial", sans-serif;
|
||||
text-align:center;
|
||||
color: #0c1c3be7;
|
||||
}
|
||||
|
||||
h2{
|
||||
font-family: "Arial", sans-serif;
|
||||
text-align:center;
|
||||
color: #0c1c3be7;
|
||||
|
||||
}
|
||||
|
||||
body{
|
||||
background-image: url(bei.jpg);
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-attachment: fixed;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.deng{
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 500px;
|
||||
height: 600px;
|
||||
display: flex; /* 启用Flexbox布局 */
|
||||
|
||||
flex-direction: column; /* 设置主轴方向为垂直（从上到下） */
|
||||
|
||||
align-items: center; /* 在交叉轴上居中子元素（这里指水平居中） */
|
||||
|
||||
justify-content: center;
|
||||
/* background-color: #f2f2f2; 为了可见性添加背景色 */
|
||||
/* border: 1px solid black; */
|
||||
border-radius: 20px;
|
||||
|
||||
--color: #E1E1E1;
|
||||
background-color: #F3F3F3;
|
||||
background-image: linear-gradient(0deg, transparent 24%, var(--color) 25%, var(--color) 26%, transparent 27%,transparent 74%, var(--color) 75%, var(--color) 76%, transparent 77%,transparent),
|
||||
linear-gradient(90deg, transparent 24%, var(--color) 25%, var(--color) 26%, transparent 27%,transparent 74%, var(--color) 75%, var(--color) 76%, transparent 77%,transparent);
|
||||
background-size: 55px 55px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.deng1{
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 500px;
|
||||
height: 600px;
|
||||
display: flex; /* 启用Flexbox布局 */
|
||||
|
||||
flex-direction: column; /* 设置主轴方向为垂直（从上到下） */
|
||||
|
||||
align-items: center; /* 在交叉轴上居中子元素（这里指水平居中） */
|
||||
|
||||
justify-content: center;
|
||||
/* background-color: #f2f2f2; 为了可见性添加背景色 */
|
||||
/* border: 1px solid black; */
|
||||
border-radius: 20px;
|
||||
|
||||
--color: #E1E1E1;
|
||||
background-color: #F3F3F3;
|
||||
background-image: linear-gradient(0deg, transparent 24%, var(--color) 25%, var(--color) 26%, transparent 27%,transparent 74%, var(--color) 75%, var(--color) 76%, transparent 77%,transparent),
|
||||
linear-gradient(90deg, transparent 24%, var(--color) 25%, var(--color) 26%, transparent 27%,transparent 74%, var(--color) 75%, var(--color) 76%, transparent 77%,transparent);
|
||||
background-size: 55px 55px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.group {
|
||||
position: relative;
|
||||
/* border: 1px solid black; */
|
||||
}
|
||||
|
||||
.input {
|
||||
font-size: 16px;
|
||||
padding: 10px 10px 10px 5px;
|
||||
display: block;
|
||||
width: 200px;
|
||||
border: none;
|
||||
border-bottom: 1px solid #515151;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.input:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
label {
|
||||
color: #330e0e;
|
||||
font-size: 18px;
|
||||
font-weight: normal;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
left: 5px;
|
||||
top: 10px;
|
||||
transition: 0.2s ease all;
|
||||
-moz-transition: 0.2s ease all;
|
||||
-webkit-transition: 0.2s ease all;
|
||||
}
|
||||
|
||||
.input:focus ~ label, .input:valid ~ label {
|
||||
top: -20px;
|
||||
font-size: 14px;
|
||||
color: #5264AE;
|
||||
}
|
||||
|
||||
.bar {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.bar:before, .bar:after {
|
||||
content: '';
|
||||
height: 2px;
|
||||
width: 0;
|
||||
bottom: 1px;
|
||||
position: absolute;
|
||||
background: #5264AE;
|
||||
transition: 0.2s ease all;
|
||||
-moz-transition: 0.2s ease all;
|
||||
-webkit-transition: 0.2s ease all;
|
||||
}
|
||||
|
||||
.bar:before {
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
.bar:after {
|
||||
right: 50%;
|
||||
}
|
||||
|
||||
.input:focus ~ .bar:before, .input:focus ~ .bar:after {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
position: absolute;
|
||||
height: 60%;
|
||||
width: 100px;
|
||||
top: 25%;
|
||||
left: 0;
|
||||
pointer-events: none;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.input:focus ~ .highlight {
|
||||
animation: inputHighlighter 0.3s ease;
|
||||
}
|
||||
|
||||
@keyframes inputHighlighter {
|
||||
from {
|
||||
background: #5264AE;
|
||||
}
|
||||
|
||||
to {
|
||||
width: 0;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.button-name {
|
||||
align-items: center;
|
||||
appearance: none;
|
||||
background-color: #FCFCFD;
|
||||
border-radius: 4px;
|
||||
border-width: 0;
|
||||
box-shadow: rgba(45, 35, 66, 0.2) 0 2px 4px,rgba(45, 35, 66, 0.15) 0 7px 13px -3px,#D6D6E7 0 -3px 0 inset;
|
||||
box-sizing: border-box;
|
||||
color: #36395A;
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
font-family: "JetBrains Mono",monospace;
|
||||
height: 48px;
|
||||
justify-content: center;
|
||||
line-height: 1;
|
||||
list-style: none;
|
||||
overflow: hidden;
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
position: relative;
|
||||
text-align: left;
|
||||
text-decoration: none;
|
||||
transition: box-shadow .15s,transform .15s;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
touch-action: manipulation;
|
||||
white-space: nowrap;
|
||||
will-change: box-shadow,transform;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.button-name:focus {
|
||||
box-shadow: #D6D6E7 0 0 0 1.5px inset, rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
|
||||
}
|
||||
|
||||
.button-name:hover {
|
||||
box-shadow: rgba(45, 35, 66, 0.3) 0 4px 8px, rgba(45, 35, 66, 0.2) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.button-name:active {
|
||||
box-shadow: #D6D6E7 0 3px 7px inset;
|
||||
transform: translateY(2px);
|
||||
}
|
||||
|
||||
.Btn {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
border: none;
|
||||
padding: 0px 20px;
|
||||
background-color: black;
|
||||
color: white;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
border-radius: 10px;
|
||||
box-shadow: 5px 5px 0px black;
|
||||
transition-duration: 0.3s;
|
||||
}
|
||||
|
||||
.svg {
|
||||
width: 13px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
margin-right: 20px;
|
||||
fill: white;
|
||||
transition-duration: 0.3s;
|
||||
}
|
||||
|
||||
.Btn:hover {
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.Btn:hover svg {
|
||||
right: 43%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
transition-duration: 0.3s;
|
||||
}
|
||||
|
||||
.Btn:active {
|
||||
transform: translate(3px, 3px);
|
||||
transition-duration: 0.3s;
|
||||
box-shadow: 2px 2px 0px white;
|
||||
}
|
||||
h1{
|
||||
font-family: "Arial", sans-serif;
|
||||
text-align:center;
|
||||
color: #0c1c3be7;
|
||||
}
|
||||
|
||||
h2{
|
||||
font-family: "Arial", sans-serif;
|
||||
text-align:center;
|
||||
color: #0c1c3be7;
|
||||
|
||||
}
|
||||
|
||||
body{
|
||||
background-image: url(bei.jpg);
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-attachment: fixed;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.deng{
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 500px;
|
||||
height: 600px;
|
||||
display: flex; /* 启用Flexbox布局 */
|
||||
|
||||
flex-direction: column; /* 设置主轴方向为垂直（从上到下） */
|
||||
|
||||
align-items: center; /* 在交叉轴上居中子元素（这里指水平居中） */
|
||||
|
||||
justify-content: center;
|
||||
/* background-color: #f2f2f2; 为了可见性添加背景色 */
|
||||
/* border: 1px solid black; */
|
||||
border-radius: 20px;
|
||||
|
||||
--color: #E1E1E1;
|
||||
background-color: #F3F3F3;
|
||||
background-image: linear-gradient(0deg, transparent 24%, var(--color) 25%, var(--color) 26%, transparent 27%,transparent 74%, var(--color) 75%, var(--color) 76%, transparent 77%,transparent),
|
||||
linear-gradient(90deg, transparent 24%, var(--color) 25%, var(--color) 26%, transparent 27%,transparent 74%, var(--color) 75%, var(--color) 76%, transparent 77%,transparent);
|
||||
background-size: 55px 55px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.deng1{
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 500px;
|
||||
height: 600px;
|
||||
display: flex; /* 启用Flexbox布局 */
|
||||
|
||||
flex-direction: column; /* 设置主轴方向为垂直（从上到下） */
|
||||
|
||||
align-items: center; /* 在交叉轴上居中子元素（这里指水平居中） */
|
||||
|
||||
justify-content: center;
|
||||
/* background-color: #f2f2f2; 为了可见性添加背景色 */
|
||||
/* border: 1px solid black; */
|
||||
border-radius: 20px;
|
||||
|
||||
--color: #E1E1E1;
|
||||
background-color: #F3F3F3;
|
||||
background-image: linear-gradient(0deg, transparent 24%, var(--color) 25%, var(--color) 26%, transparent 27%,transparent 74%, var(--color) 75%, var(--color) 76%, transparent 77%,transparent),
|
||||
linear-gradient(90deg, transparent 24%, var(--color) 25%, var(--color) 26%, transparent 27%,transparent 74%, var(--color) 75%, var(--color) 76%, transparent 77%,transparent);
|
||||
background-size: 55px 55px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.group {
|
||||
position: relative;
|
||||
/* border: 1px solid black; */
|
||||
}
|
||||
|
||||
.input {
|
||||
font-size: 16px;
|
||||
padding: 10px 10px 10px 5px;
|
||||
display: block;
|
||||
width: 200px;
|
||||
border: none;
|
||||
border-bottom: 1px solid #515151;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.input:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
label {
|
||||
color: #330e0e;
|
||||
font-size: 18px;
|
||||
font-weight: normal;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
left: 5px;
|
||||
top: 10px;
|
||||
transition: 0.2s ease all;
|
||||
-moz-transition: 0.2s ease all;
|
||||
-webkit-transition: 0.2s ease all;
|
||||
}
|
||||
|
||||
.input:focus ~ label, .input:valid ~ label {
|
||||
top: -20px;
|
||||
font-size: 14px;
|
||||
color: #5264AE;
|
||||
}
|
||||
|
||||
.bar {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.bar:before, .bar:after {
|
||||
content: '';
|
||||
height: 2px;
|
||||
width: 0;
|
||||
bottom: 1px;
|
||||
position: absolute;
|
||||
background: #5264AE;
|
||||
transition: 0.2s ease all;
|
||||
-moz-transition: 0.2s ease all;
|
||||
-webkit-transition: 0.2s ease all;
|
||||
}
|
||||
|
||||
.bar:before {
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
.bar:after {
|
||||
right: 50%;
|
||||
}
|
||||
|
||||
.input:focus ~ .bar:before, .input:focus ~ .bar:after {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
position: absolute;
|
||||
height: 60%;
|
||||
width: 100px;
|
||||
top: 25%;
|
||||
left: 0;
|
||||
pointer-events: none;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.input:focus ~ .highlight {
|
||||
animation: inputHighlighter 0.3s ease;
|
||||
}
|
||||
|
||||
@keyframes inputHighlighter {
|
||||
from {
|
||||
background: #5264AE;
|
||||
}
|
||||
|
||||
to {
|
||||
width: 0;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.button-name {
|
||||
align-items: center;
|
||||
appearance: none;
|
||||
background-color: #FCFCFD;
|
||||
border-radius: 4px;
|
||||
border-width: 0;
|
||||
box-shadow: rgba(45, 35, 66, 0.2) 0 2px 4px,rgba(45, 35, 66, 0.15) 0 7px 13px -3px,#D6D6E7 0 -3px 0 inset;
|
||||
box-sizing: border-box;
|
||||
color: #36395A;
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
font-family: "JetBrains Mono",monospace;
|
||||
height: 48px;
|
||||
justify-content: center;
|
||||
line-height: 1;
|
||||
list-style: none;
|
||||
overflow: hidden;
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
position: relative;
|
||||
text-align: left;
|
||||
text-decoration: none;
|
||||
transition: box-shadow .15s,transform .15s;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
touch-action: manipulation;
|
||||
white-space: nowrap;
|
||||
will-change: box-shadow,transform;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.button-name:focus {
|
||||
box-shadow: #D6D6E7 0 0 0 1.5px inset, rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
|
||||
}
|
||||
|
||||
.button-name:hover {
|
||||
box-shadow: rgba(45, 35, 66, 0.3) 0 4px 8px, rgba(45, 35, 66, 0.2) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.button-name:active {
|
||||
box-shadow: #D6D6E7 0 3px 7px inset;
|
||||
transform: translateY(2px);
|
||||
}
|
||||
|
||||
.Btn {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
border: none;
|
||||
padding: 0px 20px;
|
||||
background-color: black;
|
||||
color: white;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
border-radius: 10px;
|
||||
box-shadow: 5px 5px 0px black;
|
||||
transition-duration: 0.3s;
|
||||
}
|
||||
|
||||
.svg {
|
||||
width: 13px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
margin-right: 20px;
|
||||
fill: white;
|
||||
transition-duration: 0.3s;
|
||||
}
|
||||
|
||||
.Btn:hover {
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.Btn:hover svg {
|
||||
right: 43%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
transition-duration: 0.3s;
|
||||
}
|
||||
|
||||
.Btn:active {
|
||||
transform: translate(3px, 3px);
|
||||
transition-duration: 0.3s;
|
||||
box-shadow: 2px 2px 0px white;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,288 +1,288 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>心血管系统药</title>
|
||||
<!-- <link rel=" stylesheet" href="./心血管系统药.css"> -->
|
||||
|
||||
<style>
|
||||
body{
|
||||
/* background-image: url(../图片/海琴烟.jpg);
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-attachment: fixed; */
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse; /* 合并边框 */
|
||||
width: 90%; /* 表格宽度 */
|
||||
margin: auto; /* 居中显示 */
|
||||
}
|
||||
th, td {
|
||||
border: 1px solid #dddddd; /* 单元格边框 */
|
||||
text-align: center; /* 文本居中 */
|
||||
padding: 8px; /* 内边距 */
|
||||
}
|
||||
th {
|
||||
background-color: #6f9775; /* 表头背景色 */
|
||||
}
|
||||
|
||||
tr:nth-child(even) {
|
||||
background-color: #887070; /* 斑马线条纹效果 */
|
||||
}
|
||||
|
||||
tr:nth-child(odd) {
|
||||
background-color: #5c61a8;
|
||||
}
|
||||
|
||||
.a5{
|
||||
background-color: #4126a5; /* 设置按钮的背景颜色 */
|
||||
color: white; /* 设置文本颜色 */
|
||||
padding: 10px 20px; /* 设置内边距 */
|
||||
border: none; /* 移除边框 */
|
||||
border-radius: 5px; /* 设置边框圆角 */
|
||||
cursor: pointer; /* 设置鼠标光标为指针形状 */
|
||||
font-size: 16px; /* 设置字体大小 */
|
||||
}
|
||||
|
||||
.button2 {
|
||||
display: inline-block;
|
||||
transition: all 0.2s ease-in;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
color: #090909;
|
||||
padding: 0.7em 1.7em;
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
border-radius: 0.5em;
|
||||
background: #e8e8e8;
|
||||
border: 1px solid #e8e8e8;
|
||||
box-shadow: 6px 6px 12px #c5c5c5, -6px -6px 12px #ffffff;
|
||||
}
|
||||
|
||||
.button2:active {
|
||||
color: #666;
|
||||
box-shadow: inset 4px 4px 12px #c5c5c5, inset -4px -4px 12px #ffffff;
|
||||
}
|
||||
|
||||
.button2:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) scaleY(1) scaleX(1.25);
|
||||
top: 100%;
|
||||
width: 140%;
|
||||
height: 180%;
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.button2:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 55%;
|
||||
transform: translateX(-50%) scaleY(1) scaleX(1.45);
|
||||
top: 180%;
|
||||
width: 160%;
|
||||
height: 190%;
|
||||
background-color: #009087;
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.button2:hover {
|
||||
color: #ffffff;
|
||||
border: 1px solid #009087;
|
||||
}
|
||||
|
||||
.button2:hover:before {
|
||||
top: -35%;
|
||||
background-color: #009087;
|
||||
transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
|
||||
}
|
||||
|
||||
.button2:hover:after {
|
||||
top: -45%;
|
||||
background-color: #009087;
|
||||
transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
|
||||
}
|
||||
|
||||
.cookie-card {
|
||||
max-width: 180px;
|
||||
max-height: 400px;
|
||||
padding: 1rem;
|
||||
background-color: #fff8f8;
|
||||
border-radius: 10px;
|
||||
box-shadow: 20px 20px 30px rgba(0, 0, 0, .05);
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: 600;
|
||||
font-size: 30px;
|
||||
font-family: 'Arial', sans-serif;
|
||||
color: rgb(31 41 55);
|
||||
}
|
||||
|
||||
.description {
|
||||
margin-top: 1rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
color: rgb(75 85 99);
|
||||
}
|
||||
|
||||
.description1 {
|
||||
margin-top: 1rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
color: rgb(31 41 55);
|
||||
}
|
||||
|
||||
.description a {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(59 130 246);
|
||||
}
|
||||
|
||||
.description a:hover {
|
||||
-webkit-text-decoration-line: underline;
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 1rem;
|
||||
-moz-column-gap: 1rem;
|
||||
column-gap: 1rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.pref {
|
||||
font-size: 0.75rem;
|
||||
line-height: 1rem;
|
||||
color: rgb(31 41 55 );
|
||||
-webkit-text-decoration-line: underline;
|
||||
text-decoration-line: underline;
|
||||
transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.pref:hover {
|
||||
color: rgb(156 163 175);
|
||||
}
|
||||
|
||||
.pref:focus {
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.accept {
|
||||
font-size: 0.75rem;
|
||||
line-height: 1rem;
|
||||
background-color: rgb(17 24 39);
|
||||
font-weight: 500;
|
||||
border-radius: 0.5rem;
|
||||
color: #fff;
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
padding-top: 0.625rem;
|
||||
padding-bottom: 0.625rem;
|
||||
border: none;
|
||||
transition: all .15s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.accept:hover {
|
||||
background-color: rgb(55 65 81);
|
||||
}
|
||||
|
||||
.accept:focus {
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="cookie-card">
|
||||
<span class="title">心血管系统药</span>
|
||||
</div>
|
||||
<h1></h1>
|
||||
<button class="button2" onclick="pose()">心血管系统药品</button>
|
||||
<h1></h1>
|
||||
<table id="xinxueguan">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>药名</th>
|
||||
<th>药品公司</th>
|
||||
<th>药品公司联系电话</th>
|
||||
<th>价格</th>
|
||||
<th>库存</th>
|
||||
<th>进价</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
</body>
|
||||
|
||||
<script>
|
||||
function pose(){
|
||||
const requestBody = {wenti:41,name:"陈永杭"};
|
||||
fetch('http://localhost:3000', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json' // 设置请求头为JSON
|
||||
},
|
||||
body: JSON.stringify(requestBody) // 将请求体转换为JSON字符串
|
||||
})
|
||||
.then(response =>
|
||||
response.json())
|
||||
.then(data => {
|
||||
cuizaied = data;
|
||||
console.log(data);
|
||||
var table = document.getElementById("xinxueguan");
|
||||
for (ii=1;ii<table.rows.length;ii++){
|
||||
var ia = table.rows[ii];
|
||||
ia.innerHTML = '';
|
||||
}
|
||||
|
||||
|
||||
for (i=0;i<data.length;i++){
|
||||
console.log(data[i]);
|
||||
var row = table.insertRow();
|
||||
var cell1 = row.insertCell(0);
|
||||
cell1.innerHTML = data[i].name;
|
||||
var cell2 = row.insertCell(1);
|
||||
cell2.innerHTML = data[i].company;
|
||||
var cell3 = row.insertCell(2);
|
||||
cell3.innerHTML = data[i].phonenumber;
|
||||
var cell4 = row.insertCell(3);
|
||||
cell4.innerHTML = data[i].price;
|
||||
var cell5 = row.insertCell(4);
|
||||
cell5.innerHTML = data[i].amount;
|
||||
var cell6 = row.insertCell(5);
|
||||
cell6.innerHTML = data[i].purprice;
|
||||
}
|
||||
|
||||
|
||||
// }
|
||||
}) // 打印服务器返回的数据
|
||||
.catch(error => console.error('Error:', error)); // 捕获并打印错误信息
|
||||
|
||||
}
|
||||
pose();
|
||||
</script>
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>心血管系统药</title>
|
||||
<!-- <link rel=" stylesheet" href="./心血管系统药.css"> -->
|
||||
|
||||
<style>
|
||||
body{
|
||||
/* background-image: url(../图片/海琴烟.jpg);
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-attachment: fixed; */
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse; /* 合并边框 */
|
||||
width: 90%; /* 表格宽度 */
|
||||
margin: auto; /* 居中显示 */
|
||||
}
|
||||
th, td {
|
||||
border: 1px solid #dddddd; /* 单元格边框 */
|
||||
text-align: center; /* 文本居中 */
|
||||
padding: 8px; /* 内边距 */
|
||||
}
|
||||
th {
|
||||
background-color: #6f9775; /* 表头背景色 */
|
||||
}
|
||||
|
||||
tr:nth-child(even) {
|
||||
background-color: #887070; /* 斑马线条纹效果 */
|
||||
}
|
||||
|
||||
tr:nth-child(odd) {
|
||||
background-color: #5c61a8;
|
||||
}
|
||||
|
||||
.a5{
|
||||
background-color: #4126a5; /* 设置按钮的背景颜色 */
|
||||
color: white; /* 设置文本颜色 */
|
||||
padding: 10px 20px; /* 设置内边距 */
|
||||
border: none; /* 移除边框 */
|
||||
border-radius: 5px; /* 设置边框圆角 */
|
||||
cursor: pointer; /* 设置鼠标光标为指针形状 */
|
||||
font-size: 16px; /* 设置字体大小 */
|
||||
}
|
||||
|
||||
.button2 {
|
||||
display: inline-block;
|
||||
transition: all 0.2s ease-in;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
color: #090909;
|
||||
padding: 0.7em 1.7em;
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
border-radius: 0.5em;
|
||||
background: #e8e8e8;
|
||||
border: 1px solid #e8e8e8;
|
||||
box-shadow: 6px 6px 12px #c5c5c5, -6px -6px 12px #ffffff;
|
||||
}
|
||||
|
||||
.button2:active {
|
||||
color: #666;
|
||||
box-shadow: inset 4px 4px 12px #c5c5c5, inset -4px -4px 12px #ffffff;
|
||||
}
|
||||
|
||||
.button2:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) scaleY(1) scaleX(1.25);
|
||||
top: 100%;
|
||||
width: 140%;
|
||||
height: 180%;
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.button2:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 55%;
|
||||
transform: translateX(-50%) scaleY(1) scaleX(1.45);
|
||||
top: 180%;
|
||||
width: 160%;
|
||||
height: 190%;
|
||||
background-color: #009087;
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.button2:hover {
|
||||
color: #ffffff;
|
||||
border: 1px solid #009087;
|
||||
}
|
||||
|
||||
.button2:hover:before {
|
||||
top: -35%;
|
||||
background-color: #009087;
|
||||
transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
|
||||
}
|
||||
|
||||
.button2:hover:after {
|
||||
top: -45%;
|
||||
background-color: #009087;
|
||||
transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
|
||||
}
|
||||
|
||||
.cookie-card {
|
||||
max-width: 180px;
|
||||
max-height: 400px;
|
||||
padding: 1rem;
|
||||
background-color: #fff8f8;
|
||||
border-radius: 10px;
|
||||
box-shadow: 20px 20px 30px rgba(0, 0, 0, .05);
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: 600;
|
||||
font-size: 30px;
|
||||
font-family: 'Arial', sans-serif;
|
||||
color: rgb(31 41 55);
|
||||
}
|
||||
|
||||
.description {
|
||||
margin-top: 1rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
color: rgb(75 85 99);
|
||||
}
|
||||
|
||||
.description1 {
|
||||
margin-top: 1rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
color: rgb(31 41 55);
|
||||
}
|
||||
|
||||
.description a {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(59 130 246);
|
||||
}
|
||||
|
||||
.description a:hover {
|
||||
-webkit-text-decoration-line: underline;
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 1rem;
|
||||
-moz-column-gap: 1rem;
|
||||
column-gap: 1rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.pref {
|
||||
font-size: 0.75rem;
|
||||
line-height: 1rem;
|
||||
color: rgb(31 41 55 );
|
||||
-webkit-text-decoration-line: underline;
|
||||
text-decoration-line: underline;
|
||||
transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.pref:hover {
|
||||
color: rgb(156 163 175);
|
||||
}
|
||||
|
||||
.pref:focus {
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.accept {
|
||||
font-size: 0.75rem;
|
||||
line-height: 1rem;
|
||||
background-color: rgb(17 24 39);
|
||||
font-weight: 500;
|
||||
border-radius: 0.5rem;
|
||||
color: #fff;
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
padding-top: 0.625rem;
|
||||
padding-bottom: 0.625rem;
|
||||
border: none;
|
||||
transition: all .15s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.accept:hover {
|
||||
background-color: rgb(55 65 81);
|
||||
}
|
||||
|
||||
.accept:focus {
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="cookie-card">
|
||||
<span class="title">心血管系统药</span>
|
||||
</div>
|
||||
<h1></h1>
|
||||
<button class="button2" onclick="pose()">心血管系统药品</button>
|
||||
<h1></h1>
|
||||
<table id="xinxueguan">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>药名</th>
|
||||
<th>药品公司</th>
|
||||
<th>药品公司联系电话</th>
|
||||
<th>价格</th>
|
||||
<th>库存</th>
|
||||
<th>进价</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
</body>
|
||||
|
||||
<script>
|
||||
function pose(){
|
||||
const requestBody = {wenti:41,name:"陈永杭"};
|
||||
fetch('http://localhost:3000', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json' // 设置请求头为JSON
|
||||
},
|
||||
body: JSON.stringify(requestBody) // 将请求体转换为JSON字符串
|
||||
})
|
||||
.then(response =>
|
||||
response.json())
|
||||
.then(data => {
|
||||
cuizaied = data;
|
||||
console.log(data);
|
||||
var table = document.getElementById("xinxueguan");
|
||||
for (ii=1;ii<table.rows.length;ii++){
|
||||
var ia = table.rows[ii];
|
||||
ia.innerHTML = '';
|
||||
}
|
||||
|
||||
|
||||
for (i=0;i<data.length;i++){
|
||||
console.log(data[i]);
|
||||
var row = table.insertRow();
|
||||
var cell1 = row.insertCell(0);
|
||||
cell1.innerHTML = data[i].name;
|
||||
var cell2 = row.insertCell(1);
|
||||
cell2.innerHTML = data[i].company;
|
||||
var cell3 = row.insertCell(2);
|
||||
cell3.innerHTML = data[i].phonenumber;
|
||||
var cell4 = row.insertCell(3);
|
||||
cell4.innerHTML = data[i].price;
|
||||
var cell5 = row.insertCell(4);
|
||||
cell5.innerHTML = data[i].amount;
|
||||
var cell6 = row.insertCell(5);
|
||||
cell6.innerHTML = data[i].purprice;
|
||||
}
|
||||
|
||||
|
||||
// }
|
||||
}) // 打印服务器返回的数据
|
||||
.catch(error => console.error('Error:', error)); // 捕获并打印错误信息
|
||||
|
||||
}
|
||||
pose();
|
||||
</script>
|
||||
|
||||
</html>
|
||||
@ -1,289 +1,289 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>皮肤科用药</title>
|
||||
<!-- <link rel=" stylesheet" href="./皮肤科用药.css"> -->
|
||||
|
||||
<style>
|
||||
body{
|
||||
/* background-image: url(../图片/海琴烟.jpg);
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-attachment: fixed; */
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse; /* 合并边框 */
|
||||
width: 90%; /* 表格宽度 */
|
||||
margin: auto; /* 居中显示 */
|
||||
}
|
||||
th, td {
|
||||
border: 1px solid #dddddd; /* 单元格边框 */
|
||||
text-align: center; /* 文本居中 */
|
||||
padding: 8px; /* 内边距 */
|
||||
}
|
||||
th {
|
||||
background-color: #6f9775; /* 表头背景色 */
|
||||
}
|
||||
|
||||
tr:nth-child(even) {
|
||||
background-color: #887070; /* 斑马线条纹效果 */
|
||||
}
|
||||
|
||||
tr:nth-child(odd) {
|
||||
background-color: #5c61a8;
|
||||
}
|
||||
|
||||
.a5{
|
||||
background-color: #4126a5; /* 设置按钮的背景颜色 */
|
||||
color: white; /* 设置文本颜色 */
|
||||
padding: 10px 20px; /* 设置内边距 */
|
||||
border: none; /* 移除边框 */
|
||||
border-radius: 5px; /* 设置边框圆角 */
|
||||
cursor: pointer; /* 设置鼠标光标为指针形状 */
|
||||
font-size: 16px; /* 设置字体大小 */
|
||||
}
|
||||
|
||||
.button2 {
|
||||
display: inline-block;
|
||||
transition: all 0.2s ease-in;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
color: #090909;
|
||||
padding: 0.7em 1.7em;
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
border-radius: 0.5em;
|
||||
background: #e8e8e8;
|
||||
border: 1px solid #e8e8e8;
|
||||
box-shadow: 6px 6px 12px #c5c5c5, -6px -6px 12px #ffffff;
|
||||
}
|
||||
|
||||
.button2:active {
|
||||
color: #666;
|
||||
box-shadow: inset 4px 4px 12px #c5c5c5, inset -4px -4px 12px #ffffff;
|
||||
}
|
||||
|
||||
.button2:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) scaleY(1) scaleX(1.25);
|
||||
top: 100%;
|
||||
width: 140%;
|
||||
height: 180%;
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.button2:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 55%;
|
||||
transform: translateX(-50%) scaleY(1) scaleX(1.45);
|
||||
top: 180%;
|
||||
width: 160%;
|
||||
height: 190%;
|
||||
background-color: #009087;
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.button2:hover {
|
||||
color: #ffffff;
|
||||
border: 1px solid #009087;
|
||||
}
|
||||
|
||||
.button2:hover:before {
|
||||
top: -35%;
|
||||
background-color: #009087;
|
||||
transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
|
||||
}
|
||||
|
||||
.button2:hover:after {
|
||||
top: -45%;
|
||||
background-color: #009087;
|
||||
transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
|
||||
}
|
||||
|
||||
.cookie-card {
|
||||
max-width: 160px;
|
||||
max-height: 400px;
|
||||
padding: 1rem;
|
||||
background-color: #fff8f8;
|
||||
border-radius: 10px;
|
||||
box-shadow: 20px 20px 30px rgba(0, 0, 0, .05);
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: 600;
|
||||
font-size: 30px;
|
||||
font-family: 'Arial', sans-serif;
|
||||
color: rgb(31 41 55);
|
||||
}
|
||||
|
||||
.description {
|
||||
margin-top: 1rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
color: rgb(75 85 99);
|
||||
}
|
||||
|
||||
.description1 {
|
||||
margin-top: 1rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
color: rgb(31 41 55);
|
||||
}
|
||||
|
||||
.description a {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(59 130 246);
|
||||
}
|
||||
|
||||
.description a:hover {
|
||||
-webkit-text-decoration-line: underline;
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 1rem;
|
||||
-moz-column-gap: 1rem;
|
||||
column-gap: 1rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.pref {
|
||||
font-size: 0.75rem;
|
||||
line-height: 1rem;
|
||||
color: rgb(31 41 55 );
|
||||
-webkit-text-decoration-line: underline;
|
||||
text-decoration-line: underline;
|
||||
transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.pref:hover {
|
||||
color: rgb(156 163 175);
|
||||
}
|
||||
|
||||
.pref:focus {
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.accept {
|
||||
font-size: 0.75rem;
|
||||
line-height: 1rem;
|
||||
background-color: rgb(17 24 39);
|
||||
font-weight: 500;
|
||||
border-radius: 0.5rem;
|
||||
color: #fff;
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
padding-top: 0.625rem;
|
||||
padding-bottom: 0.625rem;
|
||||
border: none;
|
||||
transition: all .15s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.accept:hover {
|
||||
background-color: rgb(55 65 81);
|
||||
}
|
||||
|
||||
.accept:focus {
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="cookie-card">
|
||||
<span class="title">皮肤科用药</span>
|
||||
</div>
|
||||
<h1></h1>
|
||||
<button class="button2" onclick="pose()">皮肤药品</button>
|
||||
<h1></h1>
|
||||
<table id="huxi">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>药名</th>
|
||||
<th>药品公司</th>
|
||||
<th>药品公司联系电话</th>
|
||||
<th>价格</th>
|
||||
<th>库存</th>
|
||||
<th>进价</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
</body>
|
||||
|
||||
<script>
|
||||
function pose(){
|
||||
const requestBody = {wenti:31,name:"陈永杭"};
|
||||
fetch('http://localhost:3000', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json' // 设置请求头为JSON
|
||||
},
|
||||
body: JSON.stringify(requestBody) // 将请求体转换为JSON字符串
|
||||
})
|
||||
.then(response =>
|
||||
response.json())
|
||||
.then(data => {
|
||||
cuizaied = data;
|
||||
console.log(data);
|
||||
var table = document.getElementById("huxi");
|
||||
for (ii=1;ii<table.rows.length;ii++){
|
||||
var ia = table.rows[ii];
|
||||
ia.innerHTML = '';
|
||||
}
|
||||
|
||||
|
||||
for (i=0;i<data.length;i++){
|
||||
console.log(data[i]);
|
||||
var row = table.insertRow();
|
||||
var cell1 = row.insertCell(0);
|
||||
cell1.innerHTML = data[i].name;
|
||||
var cell2 = row.insertCell(1);
|
||||
cell2.innerHTML = data[i].company;
|
||||
var cell3 = row.insertCell(2);
|
||||
cell3.innerHTML = data[i].phonenumber;
|
||||
var cell4 = row.insertCell(3);
|
||||
cell4.innerHTML = data[i].price;
|
||||
var cell5 = row.insertCell(4);
|
||||
cell5.innerHTML = data[i].amount;
|
||||
var cell6 = row.insertCell(5);
|
||||
cell6.innerHTML = data[i].purprice;
|
||||
}
|
||||
|
||||
|
||||
// }
|
||||
}) // 打印服务器返回的数据
|
||||
.catch(error => console.error('Error:', error)); // 捕获并打印错误信息
|
||||
|
||||
}
|
||||
pose();
|
||||
</script>
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>皮肤科用药</title>
|
||||
<!-- <link rel=" stylesheet" href="./皮肤科用药.css"> -->
|
||||
|
||||
<style>
|
||||
body{
|
||||
/* background-image: url(../图片/海琴烟.jpg);
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-attachment: fixed; */
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse; /* 合并边框 */
|
||||
width: 90%; /* 表格宽度 */
|
||||
margin: auto; /* 居中显示 */
|
||||
}
|
||||
th, td {
|
||||
border: 1px solid #dddddd; /* 单元格边框 */
|
||||
text-align: center; /* 文本居中 */
|
||||
padding: 8px; /* 内边距 */
|
||||
}
|
||||
th {
|
||||
background-color: #6f9775; /* 表头背景色 */
|
||||
}
|
||||
|
||||
tr:nth-child(even) {
|
||||
background-color: #887070; /* 斑马线条纹效果 */
|
||||
}
|
||||
|
||||
tr:nth-child(odd) {
|
||||
background-color: #5c61a8;
|
||||
}
|
||||
|
||||
.a5{
|
||||
background-color: #4126a5; /* 设置按钮的背景颜色 */
|
||||
color: white; /* 设置文本颜色 */
|
||||
padding: 10px 20px; /* 设置内边距 */
|
||||
border: none; /* 移除边框 */
|
||||
border-radius: 5px; /* 设置边框圆角 */
|
||||
cursor: pointer; /* 设置鼠标光标为指针形状 */
|
||||
font-size: 16px; /* 设置字体大小 */
|
||||
}
|
||||
|
||||
.button2 {
|
||||
display: inline-block;
|
||||
transition: all 0.2s ease-in;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
color: #090909;
|
||||
padding: 0.7em 1.7em;
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
border-radius: 0.5em;
|
||||
background: #e8e8e8;
|
||||
border: 1px solid #e8e8e8;
|
||||
box-shadow: 6px 6px 12px #c5c5c5, -6px -6px 12px #ffffff;
|
||||
}
|
||||
|
||||
.button2:active {
|
||||
color: #666;
|
||||
box-shadow: inset 4px 4px 12px #c5c5c5, inset -4px -4px 12px #ffffff;
|
||||
}
|
||||
|
||||
.button2:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) scaleY(1) scaleX(1.25);
|
||||
top: 100%;
|
||||
width: 140%;
|
||||
height: 180%;
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.button2:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 55%;
|
||||
transform: translateX(-50%) scaleY(1) scaleX(1.45);
|
||||
top: 180%;
|
||||
width: 160%;
|
||||
height: 190%;
|
||||
background-color: #009087;
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.button2:hover {
|
||||
color: #ffffff;
|
||||
border: 1px solid #009087;
|
||||
}
|
||||
|
||||
.button2:hover:before {
|
||||
top: -35%;
|
||||
background-color: #009087;
|
||||
transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
|
||||
}
|
||||
|
||||
.button2:hover:after {
|
||||
top: -45%;
|
||||
background-color: #009087;
|
||||
transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
|
||||
}
|
||||
|
||||
.cookie-card {
|
||||
max-width: 160px;
|
||||
max-height: 400px;
|
||||
padding: 1rem;
|
||||
background-color: #fff8f8;
|
||||
border-radius: 10px;
|
||||
box-shadow: 20px 20px 30px rgba(0, 0, 0, .05);
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: 600;
|
||||
font-size: 30px;
|
||||
font-family: 'Arial', sans-serif;
|
||||
color: rgb(31 41 55);
|
||||
}
|
||||
|
||||
.description {
|
||||
margin-top: 1rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
color: rgb(75 85 99);
|
||||
}
|
||||
|
||||
.description1 {
|
||||
margin-top: 1rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
color: rgb(31 41 55);
|
||||
}
|
||||
|
||||
.description a {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(59 130 246);
|
||||
}
|
||||
|
||||
.description a:hover {
|
||||
-webkit-text-decoration-line: underline;
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 1rem;
|
||||
-moz-column-gap: 1rem;
|
||||
column-gap: 1rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.pref {
|
||||
font-size: 0.75rem;
|
||||
line-height: 1rem;
|
||||
color: rgb(31 41 55 );
|
||||
-webkit-text-decoration-line: underline;
|
||||
text-decoration-line: underline;
|
||||
transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.pref:hover {
|
||||
color: rgb(156 163 175);
|
||||
}
|
||||
|
||||
.pref:focus {
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.accept {
|
||||
font-size: 0.75rem;
|
||||
line-height: 1rem;
|
||||
background-color: rgb(17 24 39);
|
||||
font-weight: 500;
|
||||
border-radius: 0.5rem;
|
||||
color: #fff;
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
padding-top: 0.625rem;
|
||||
padding-bottom: 0.625rem;
|
||||
border: none;
|
||||
transition: all .15s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.accept:hover {
|
||||
background-color: rgb(55 65 81);
|
||||
}
|
||||
|
||||
.accept:focus {
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="cookie-card">
|
||||
<span class="title">皮肤科用药</span>
|
||||
</div>
|
||||
<h1></h1>
|
||||
<button class="button2" onclick="pose()">皮肤药品</button>
|
||||
<h1></h1>
|
||||
<table id="huxi">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>药名</th>
|
||||
<th>药品公司</th>
|
||||
<th>药品公司联系电话</th>
|
||||
<th>价格</th>
|
||||
<th>库存</th>
|
||||
<th>进价</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
</body>
|
||||
|
||||
<script>
|
||||
function pose(){
|
||||
const requestBody = {wenti:31,name:"陈永杭"};
|
||||
fetch('http://localhost:3000', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json' // 设置请求头为JSON
|
||||
},
|
||||
body: JSON.stringify(requestBody) // 将请求体转换为JSON字符串
|
||||
})
|
||||
.then(response =>
|
||||
response.json())
|
||||
.then(data => {
|
||||
cuizaied = data;
|
||||
console.log(data);
|
||||
var table = document.getElementById("huxi");
|
||||
for (ii=1;ii<table.rows.length;ii++){
|
||||
var ia = table.rows[ii];
|
||||
ia.innerHTML = '';
|
||||
}
|
||||
|
||||
|
||||
for (i=0;i<data.length;i++){
|
||||
console.log(data[i]);
|
||||
var row = table.insertRow();
|
||||
var cell1 = row.insertCell(0);
|
||||
cell1.innerHTML = data[i].name;
|
||||
var cell2 = row.insertCell(1);
|
||||
cell2.innerHTML = data[i].company;
|
||||
var cell3 = row.insertCell(2);
|
||||
cell3.innerHTML = data[i].phonenumber;
|
||||
var cell4 = row.insertCell(3);
|
||||
cell4.innerHTML = data[i].price;
|
||||
var cell5 = row.insertCell(4);
|
||||
cell5.innerHTML = data[i].amount;
|
||||
var cell6 = row.insertCell(5);
|
||||
cell6.innerHTML = data[i].purprice;
|
||||
}
|
||||
|
||||
|
||||
// }
|
||||
}) // 打印服务器返回的数据
|
||||
.catch(error => console.error('Error:', error)); // 捕获并打印错误信息
|
||||
|
||||
}
|
||||
pose();
|
||||
</script>
|
||||
|
||||
</html>
|
||||
@ -1,288 +1,288 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>消化系统药</title>
|
||||
<!-- <link rel=" stylesheet" href="./消化系统药.css"> -->
|
||||
|
||||
<style>
|
||||
body{
|
||||
/* background-image: url(../图片/海琴烟.jpg);
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-attachment: fixed; */
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse; /* 合并边框 */
|
||||
width: 90%; /* 表格宽度 */
|
||||
margin: auto; /* 居中显示 */
|
||||
}
|
||||
th, td {
|
||||
border: 1px solid #dddddd; /* 单元格边框 */
|
||||
text-align: center; /* 文本居中 */
|
||||
padding: 8px; /* 内边距 */
|
||||
}
|
||||
th {
|
||||
background-color: #6f9775; /* 表头背景色 */
|
||||
}
|
||||
|
||||
tr:nth-child(even) {
|
||||
background-color: #887070; /* 斑马线条纹效果 */
|
||||
}
|
||||
|
||||
tr:nth-child(odd) {
|
||||
background-color: #5c61a8;
|
||||
}
|
||||
|
||||
.a5{
|
||||
background-color: #4126a5; /* 设置按钮的背景颜色 */
|
||||
color: white; /* 设置文本颜色 */
|
||||
padding: 10px 20px; /* 设置内边距 */
|
||||
border: none; /* 移除边框 */
|
||||
border-radius: 5px; /* 设置边框圆角 */
|
||||
cursor: pointer; /* 设置鼠标光标为指针形状 */
|
||||
font-size: 16px; /* 设置字体大小 */
|
||||
}
|
||||
|
||||
.button2 {
|
||||
display: inline-block;
|
||||
transition: all 0.2s ease-in;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
color: #090909;
|
||||
padding: 0.7em 1.7em;
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
border-radius: 0.5em;
|
||||
background: #e8e8e8;
|
||||
border: 1px solid #e8e8e8;
|
||||
box-shadow: 6px 6px 12px #c5c5c5, -6px -6px 12px #ffffff;
|
||||
}
|
||||
|
||||
.button2:active {
|
||||
color: #666;
|
||||
box-shadow: inset 4px 4px 12px #c5c5c5, inset -4px -4px 12px #ffffff;
|
||||
}
|
||||
|
||||
.button2:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) scaleY(1) scaleX(1.25);
|
||||
top: 100%;
|
||||
width: 140%;
|
||||
height: 180%;
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.button2:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 55%;
|
||||
transform: translateX(-50%) scaleY(1) scaleX(1.45);
|
||||
top: 180%;
|
||||
width: 160%;
|
||||
height: 190%;
|
||||
background-color: #009087;
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.button2:hover {
|
||||
color: #ffffff;
|
||||
border: 1px solid #009087;
|
||||
}
|
||||
|
||||
.button2:hover:before {
|
||||
top: -35%;
|
||||
background-color: #009087;
|
||||
transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
|
||||
}
|
||||
|
||||
.button2:hover:after {
|
||||
top: -45%;
|
||||
background-color: #009087;
|
||||
transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
|
||||
}
|
||||
|
||||
.cookie-card {
|
||||
max-width: 160px;
|
||||
max-height: 400px;
|
||||
padding: 1rem;
|
||||
background-color: #fff8f8;
|
||||
border-radius: 10px;
|
||||
box-shadow: 20px 20px 30px rgba(0, 0, 0, .05);
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: 600;
|
||||
font-size: 30px;
|
||||
font-family: 'Arial', sans-serif;
|
||||
color: rgb(31 41 55);
|
||||
}
|
||||
|
||||
.description {
|
||||
margin-top: 1rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
color: rgb(75 85 99);
|
||||
}
|
||||
|
||||
.description1 {
|
||||
margin-top: 1rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
color: rgb(31 41 55);
|
||||
}
|
||||
|
||||
.description a {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(59 130 246);
|
||||
}
|
||||
|
||||
.description a:hover {
|
||||
-webkit-text-decoration-line: underline;
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 1rem;
|
||||
-moz-column-gap: 1rem;
|
||||
column-gap: 1rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.pref {
|
||||
font-size: 0.75rem;
|
||||
line-height: 1rem;
|
||||
color: rgb(31 41 55 );
|
||||
-webkit-text-decoration-line: underline;
|
||||
text-decoration-line: underline;
|
||||
transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.pref:hover {
|
||||
color: rgb(156 163 175);
|
||||
}
|
||||
|
||||
.pref:focus {
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.accept {
|
||||
font-size: 0.75rem;
|
||||
line-height: 1rem;
|
||||
background-color: rgb(17 24 39);
|
||||
font-weight: 500;
|
||||
border-radius: 0.5rem;
|
||||
color: #fff;
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
padding-top: 0.625rem;
|
||||
padding-bottom: 0.625rem;
|
||||
border: none;
|
||||
transition: all .15s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.accept:hover {
|
||||
background-color: rgb(55 65 81);
|
||||
}
|
||||
|
||||
.accept:focus {
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="cookie-card">
|
||||
<span class="title">消化系统药</span>
|
||||
</div>
|
||||
<h1></h1>
|
||||
<button class="button2" onclick="pose()">消化系统药品</button>
|
||||
<h1></h1>
|
||||
<table id="xiaohua">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>药名</th>
|
||||
<th>药品公司</th>
|
||||
<th>药品公司联系电话</th>
|
||||
<th>价格</th>
|
||||
<th>库存</th>
|
||||
<th>进价</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
</body>
|
||||
|
||||
<script>
|
||||
function pose(){
|
||||
const requestBody = {wenti:21,name:"陈永杭"};
|
||||
fetch('http://localhost:3000', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json' // 设置请求头为JSON
|
||||
},
|
||||
body: JSON.stringify(requestBody) // 将请求体转换为JSON字符串
|
||||
})
|
||||
.then(response =>
|
||||
response.json())
|
||||
.then(data => {
|
||||
cuizaied = data;
|
||||
console.log(data);
|
||||
var table = document.getElementById("xiaohua");
|
||||
for (ii=1;ii<table.rows.length;ii++){
|
||||
var ia = table.rows[ii];
|
||||
ia.innerHTML = '';
|
||||
}
|
||||
|
||||
|
||||
for (i=0;i<data.length;i++){
|
||||
console.log(data[i]);
|
||||
var row = table.insertRow();
|
||||
var cell1 = row.insertCell(0);
|
||||
cell1.innerHTML = data[i].name;
|
||||
var cell2 = row.insertCell(1);
|
||||
cell2.innerHTML = data[i].company;
|
||||
var cell3 = row.insertCell(2);
|
||||
cell3.innerHTML = data[i].phonenumber;
|
||||
var cell4 = row.insertCell(3);
|
||||
cell4.innerHTML = data[i].price;
|
||||
var cell5 = row.insertCell(4);
|
||||
cell5.innerHTML = data[i].amount;
|
||||
var cell6 = row.insertCell(5);
|
||||
cell6.innerHTML = data[i].purprice;
|
||||
}
|
||||
|
||||
|
||||
// }
|
||||
}) // 打印服务器返回的数据
|
||||
.catch(error => console.error('Error:', error)); // 捕获并打印错误信息
|
||||
|
||||
}
|
||||
pose();
|
||||
</script>
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>消化系统药</title>
|
||||
<!-- <link rel=" stylesheet" href="./消化系统药.css"> -->
|
||||
|
||||
<style>
|
||||
body{
|
||||
/* background-image: url(../图片/海琴烟.jpg);
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-attachment: fixed; */
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse; /* 合并边框 */
|
||||
width: 90%; /* 表格宽度 */
|
||||
margin: auto; /* 居中显示 */
|
||||
}
|
||||
th, td {
|
||||
border: 1px solid #dddddd; /* 单元格边框 */
|
||||
text-align: center; /* 文本居中 */
|
||||
padding: 8px; /* 内边距 */
|
||||
}
|
||||
th {
|
||||
background-color: #6f9775; /* 表头背景色 */
|
||||
}
|
||||
|
||||
tr:nth-child(even) {
|
||||
background-color: #887070; /* 斑马线条纹效果 */
|
||||
}
|
||||
|
||||
tr:nth-child(odd) {
|
||||
background-color: #5c61a8;
|
||||
}
|
||||
|
||||
.a5{
|
||||
background-color: #4126a5; /* 设置按钮的背景颜色 */
|
||||
color: white; /* 设置文本颜色 */
|
||||
padding: 10px 20px; /* 设置内边距 */
|
||||
border: none; /* 移除边框 */
|
||||
border-radius: 5px; /* 设置边框圆角 */
|
||||
cursor: pointer; /* 设置鼠标光标为指针形状 */
|
||||
font-size: 16px; /* 设置字体大小 */
|
||||
}
|
||||
|
||||
.button2 {
|
||||
display: inline-block;
|
||||
transition: all 0.2s ease-in;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
color: #090909;
|
||||
padding: 0.7em 1.7em;
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
border-radius: 0.5em;
|
||||
background: #e8e8e8;
|
||||
border: 1px solid #e8e8e8;
|
||||
box-shadow: 6px 6px 12px #c5c5c5, -6px -6px 12px #ffffff;
|
||||
}
|
||||
|
||||
.button2:active {
|
||||
color: #666;
|
||||
box-shadow: inset 4px 4px 12px #c5c5c5, inset -4px -4px 12px #ffffff;
|
||||
}
|
||||
|
||||
.button2:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) scaleY(1) scaleX(1.25);
|
||||
top: 100%;
|
||||
width: 140%;
|
||||
height: 180%;
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.button2:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 55%;
|
||||
transform: translateX(-50%) scaleY(1) scaleX(1.45);
|
||||
top: 180%;
|
||||
width: 160%;
|
||||
height: 190%;
|
||||
background-color: #009087;
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.button2:hover {
|
||||
color: #ffffff;
|
||||
border: 1px solid #009087;
|
||||
}
|
||||
|
||||
.button2:hover:before {
|
||||
top: -35%;
|
||||
background-color: #009087;
|
||||
transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
|
||||
}
|
||||
|
||||
.button2:hover:after {
|
||||
top: -45%;
|
||||
background-color: #009087;
|
||||
transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
|
||||
}
|
||||
|
||||
.cookie-card {
|
||||
max-width: 160px;
|
||||
max-height: 400px;
|
||||
padding: 1rem;
|
||||
background-color: #fff8f8;
|
||||
border-radius: 10px;
|
||||
box-shadow: 20px 20px 30px rgba(0, 0, 0, .05);
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: 600;
|
||||
font-size: 30px;
|
||||
font-family: 'Arial', sans-serif;
|
||||
color: rgb(31 41 55);
|
||||
}
|
||||
|
||||
.description {
|
||||
margin-top: 1rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
color: rgb(75 85 99);
|
||||
}
|
||||
|
||||
.description1 {
|
||||
margin-top: 1rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
color: rgb(31 41 55);
|
||||
}
|
||||
|
||||
.description a {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(59 130 246);
|
||||
}
|
||||
|
||||
.description a:hover {
|
||||
-webkit-text-decoration-line: underline;
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 1rem;
|
||||
-moz-column-gap: 1rem;
|
||||
column-gap: 1rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.pref {
|
||||
font-size: 0.75rem;
|
||||
line-height: 1rem;
|
||||
color: rgb(31 41 55 );
|
||||
-webkit-text-decoration-line: underline;
|
||||
text-decoration-line: underline;
|
||||
transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.pref:hover {
|
||||
color: rgb(156 163 175);
|
||||
}
|
||||
|
||||
.pref:focus {
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.accept {
|
||||
font-size: 0.75rem;
|
||||
line-height: 1rem;
|
||||
background-color: rgb(17 24 39);
|
||||
font-weight: 500;
|
||||
border-radius: 0.5rem;
|
||||
color: #fff;
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
padding-top: 0.625rem;
|
||||
padding-bottom: 0.625rem;
|
||||
border: none;
|
||||
transition: all .15s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.accept:hover {
|
||||
background-color: rgb(55 65 81);
|
||||
}
|
||||
|
||||
.accept:focus {
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="cookie-card">
|
||||
<span class="title">消化系统药</span>
|
||||
</div>
|
||||
<h1></h1>
|
||||
<button class="button2" onclick="pose()">消化系统药品</button>
|
||||
<h1></h1>
|
||||
<table id="xiaohua">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>药名</th>
|
||||
<th>药品公司</th>
|
||||
<th>药品公司联系电话</th>
|
||||
<th>价格</th>
|
||||
<th>库存</th>
|
||||
<th>进价</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
</body>
|
||||
|
||||
<script>
|
||||
function pose(){
|
||||
const requestBody = {wenti:21,name:"陈永杭"};
|
||||
fetch('http://localhost:3000', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json' // 设置请求头为JSON
|
||||
},
|
||||
body: JSON.stringify(requestBody) // 将请求体转换为JSON字符串
|
||||
})
|
||||
.then(response =>
|
||||
response.json())
|
||||
.then(data => {
|
||||
cuizaied = data;
|
||||
console.log(data);
|
||||
var table = document.getElementById("xiaohua");
|
||||
for (ii=1;ii<table.rows.length;ii++){
|
||||
var ia = table.rows[ii];
|
||||
ia.innerHTML = '';
|
||||
}
|
||||
|
||||
|
||||
for (i=0;i<data.length;i++){
|
||||
console.log(data[i]);
|
||||
var row = table.insertRow();
|
||||
var cell1 = row.insertCell(0);
|
||||
cell1.innerHTML = data[i].name;
|
||||
var cell2 = row.insertCell(1);
|
||||
cell2.innerHTML = data[i].company;
|
||||
var cell3 = row.insertCell(2);
|
||||
cell3.innerHTML = data[i].phonenumber;
|
||||
var cell4 = row.insertCell(3);
|
||||
cell4.innerHTML = data[i].price;
|
||||
var cell5 = row.insertCell(4);
|
||||
cell5.innerHTML = data[i].amount;
|
||||
var cell6 = row.insertCell(5);
|
||||
cell6.innerHTML = data[i].purprice;
|
||||
}
|
||||
|
||||
|
||||
// }
|
||||
}) // 打印服务器返回的数据
|
||||
.catch(error => console.error('Error:', error)); // 捕获并打印错误信息
|
||||
|
||||
}
|
||||
pose();
|
||||
</script>
|
||||
|
||||
</html>
|
||||
@ -1,159 +1,159 @@
|
||||
.button2 {
|
||||
display: inline-block;
|
||||
transition: all 0.2s ease-in;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
color: #090909;
|
||||
padding: 0.7em 1.7em;
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
border-radius: 0.5em;
|
||||
background: #e8e8e8;
|
||||
border: 1px solid #e8e8e8;
|
||||
box-shadow: 6px 6px 12px #c5c5c5, -6px -6px 12px #ffffff;
|
||||
}
|
||||
|
||||
.button2:active {
|
||||
color: #666;
|
||||
box-shadow: inset 4px 4px 12px #c5c5c5, inset -4px -4px 12px #ffffff;
|
||||
}
|
||||
|
||||
.button2:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) scaleY(1) scaleX(1.25);
|
||||
top: 100%;
|
||||
width: 140%;
|
||||
height: 180%;
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.button2:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 55%;
|
||||
transform: translateX(-50%) scaleY(1) scaleX(1.45);
|
||||
top: 180%;
|
||||
width: 160%;
|
||||
height: 190%;
|
||||
background-color: #009087;
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.button2:hover {
|
||||
color: #ffffff;
|
||||
border: 1px solid #009087;
|
||||
}
|
||||
|
||||
.button2:hover:before {
|
||||
top: -35%;
|
||||
background-color: #009087;
|
||||
transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
|
||||
}
|
||||
|
||||
.button2:hover:after {
|
||||
top: -45%;
|
||||
background-color: #009087;
|
||||
transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
|
||||
}
|
||||
|
||||
.cookie-card {
|
||||
max-width: 800px;
|
||||
max-height: 400px;
|
||||
padding: 1rem;
|
||||
background-color: #eceaea;
|
||||
border-radius: 10px;
|
||||
box-shadow: 20px 20px 30px rgba(0, 0, 0, .05);
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: 600;
|
||||
color: rgb(31 41 55);
|
||||
}
|
||||
|
||||
.description {
|
||||
margin-top: 1rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
color: rgb(75 85 99);
|
||||
}
|
||||
|
||||
.description1 {
|
||||
margin-top: 1rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
color: rgb(31 41 55);
|
||||
}
|
||||
|
||||
.description a {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(59 130 246);
|
||||
}
|
||||
|
||||
.description a:hover {
|
||||
-webkit-text-decoration-line: underline;
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 1rem;
|
||||
-moz-column-gap: 1rem;
|
||||
column-gap: 1rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.pref {
|
||||
font-size: 0.75rem;
|
||||
line-height: 1rem;
|
||||
color: rgb(31 41 55 );
|
||||
-webkit-text-decoration-line: underline;
|
||||
text-decoration-line: underline;
|
||||
transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.pref:hover {
|
||||
color: rgb(156 163 175);
|
||||
}
|
||||
|
||||
.pref:focus {
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.accept {
|
||||
font-size: 0.75rem;
|
||||
line-height: 1rem;
|
||||
background-color: rgb(17 24 39);
|
||||
font-weight: 500;
|
||||
border-radius: 0.5rem;
|
||||
color: #fff;
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
padding-top: 0.625rem;
|
||||
padding-bottom: 0.625rem;
|
||||
border: none;
|
||||
transition: all .15s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.accept:hover {
|
||||
background-color: rgb(55 65 81);
|
||||
}
|
||||
|
||||
.accept:focus {
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
.button2 {
|
||||
display: inline-block;
|
||||
transition: all 0.2s ease-in;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
color: #090909;
|
||||
padding: 0.7em 1.7em;
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
border-radius: 0.5em;
|
||||
background: #e8e8e8;
|
||||
border: 1px solid #e8e8e8;
|
||||
box-shadow: 6px 6px 12px #c5c5c5, -6px -6px 12px #ffffff;
|
||||
}
|
||||
|
||||
.button2:active {
|
||||
color: #666;
|
||||
box-shadow: inset 4px 4px 12px #c5c5c5, inset -4px -4px 12px #ffffff;
|
||||
}
|
||||
|
||||
.button2:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) scaleY(1) scaleX(1.25);
|
||||
top: 100%;
|
||||
width: 140%;
|
||||
height: 180%;
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.button2:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 55%;
|
||||
transform: translateX(-50%) scaleY(1) scaleX(1.45);
|
||||
top: 180%;
|
||||
width: 160%;
|
||||
height: 190%;
|
||||
background-color: #009087;
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.button2:hover {
|
||||
color: #ffffff;
|
||||
border: 1px solid #009087;
|
||||
}
|
||||
|
||||
.button2:hover:before {
|
||||
top: -35%;
|
||||
background-color: #009087;
|
||||
transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
|
||||
}
|
||||
|
||||
.button2:hover:after {
|
||||
top: -45%;
|
||||
background-color: #009087;
|
||||
transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
|
||||
}
|
||||
|
||||
.cookie-card {
|
||||
max-width: 800px;
|
||||
max-height: 400px;
|
||||
padding: 1rem;
|
||||
background-color: #eceaea;
|
||||
border-radius: 10px;
|
||||
box-shadow: 20px 20px 30px rgba(0, 0, 0, .05);
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: 600;
|
||||
color: rgb(31 41 55);
|
||||
}
|
||||
|
||||
.description {
|
||||
margin-top: 1rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
color: rgb(75 85 99);
|
||||
}
|
||||
|
||||
.description1 {
|
||||
margin-top: 1rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
color: rgb(31 41 55);
|
||||
}
|
||||
|
||||
.description a {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(59 130 246);
|
||||
}
|
||||
|
||||
.description a:hover {
|
||||
-webkit-text-decoration-line: underline;
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 1rem;
|
||||
-moz-column-gap: 1rem;
|
||||
column-gap: 1rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.pref {
|
||||
font-size: 0.75rem;
|
||||
line-height: 1rem;
|
||||
color: rgb(31 41 55 );
|
||||
-webkit-text-decoration-line: underline;
|
||||
text-decoration-line: underline;
|
||||
transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.pref:hover {
|
||||
color: rgb(156 163 175);
|
||||
}
|
||||
|
||||
.pref:focus {
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.accept {
|
||||
font-size: 0.75rem;
|
||||
line-height: 1rem;
|
||||
background-color: rgb(17 24 39);
|
||||
font-weight: 500;
|
||||
border-radius: 0.5rem;
|
||||
color: #fff;
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
padding-top: 0.625rem;
|
||||
padding-bottom: 0.625rem;
|
||||
border: none;
|
||||
transition: all .15s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.accept:hover {
|
||||
background-color: rgb(55 65 81);
|
||||
}
|
||||
|
||||
.accept:focus {
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
@ -1,91 +1,91 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>导出药品信息</title>
|
||||
<link rel=" stylesheet" href="./Export-information.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<button class="button2" onclick="daochu()">导出药品数据</button>
|
||||
<h1></h1>
|
||||
<div class="cookie-card">
|
||||
<span class="title">温馨提示</span>
|
||||
<p class="description">导出药品数据将会把存储在数据库中的数据（与页面显示的数据相同）以.csv文件格式导出。 </p>
|
||||
<p class="description">csv文件中的数据以数据库中的数据格式相同。</p>
|
||||
<p class="description">导出药品数据成功后会在下方提示并会打开文件资源管理器到导出数据文件的地址</p>
|
||||
<p class="title">导出药品数据格式示例：</p>
|
||||
<table border="1">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>id</th>
|
||||
<th>type</th>
|
||||
<th>name</th>
|
||||
<th>price</th>
|
||||
<th>amount</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>骨科用药</td>
|
||||
<td>筋骨贴</td>
|
||||
<td>17.6</td>
|
||||
<td>19</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>呼吸系统药</td>
|
||||
<td>哮喘颗粒</td>
|
||||
<td>17.4</td>
|
||||
<td>18</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>皮肤科用药</td>
|
||||
<td>999皮炎平</td>
|
||||
<td>17.3</td>
|
||||
<td>19</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<h1></h1>
|
||||
<div class="cookie-card" id="jieguo" style="display: none;">
|
||||
<span class="title">已经成功导出药品信息！！！</span>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
<script>
|
||||
var di = 'myh1';
|
||||
function daochu()
|
||||
{
|
||||
const requestBody = {"wenti":1002};
|
||||
fetch('http://localhost:3000', {
|
||||
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json' // 设置请求头为JSON
|
||||
},
|
||||
body: JSON.stringify(requestBody) // 将请求体转换为JSON字符串
|
||||
})
|
||||
.then(response =>
|
||||
response.json())
|
||||
.then(data => {
|
||||
console.log(data);
|
||||
console.log("已经导出药品信息");
|
||||
document.getElementById("jieguo").style.display='inline-block';
|
||||
setTimeout(function() {
|
||||
document.getElementById("jieguo").style.display = 'none';
|
||||
}, 3000);
|
||||
}) // 打印服务器返回的数据
|
||||
.catch(error => console.error('Error:', error)
|
||||
);
|
||||
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>导出药品信息</title>
|
||||
<link rel=" stylesheet" href="./Export-information.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<button class="button2" onclick="daochu()">导出药品数据</button>
|
||||
<h1></h1>
|
||||
<div class="cookie-card">
|
||||
<span class="title">温馨提示</span>
|
||||
<p class="description">导出药品数据将会把存储在数据库中的数据（与页面显示的数据相同）以.csv文件格式导出。 </p>
|
||||
<p class="description">csv文件中的数据以数据库中的数据格式相同。</p>
|
||||
<p class="description">导出药品数据成功后会在下方提示并会打开文件资源管理器到导出数据文件的地址</p>
|
||||
<p class="title">导出药品数据格式示例：</p>
|
||||
<table border="1">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>id</th>
|
||||
<th>type</th>
|
||||
<th>name</th>
|
||||
<th>price</th>
|
||||
<th>amount</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>骨科用药</td>
|
||||
<td>筋骨贴</td>
|
||||
<td>17.6</td>
|
||||
<td>19</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>呼吸系统药</td>
|
||||
<td>哮喘颗粒</td>
|
||||
<td>17.4</td>
|
||||
<td>18</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>皮肤科用药</td>
|
||||
<td>999皮炎平</td>
|
||||
<td>17.3</td>
|
||||
<td>19</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<h1></h1>
|
||||
<div class="cookie-card" id="jieguo" style="display: none;">
|
||||
<span class="title">已经成功导出药品信息！！！</span>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
<script>
|
||||
var di = 'myh1';
|
||||
function daochu()
|
||||
{
|
||||
const requestBody = {"wenti":1002};
|
||||
fetch('http://localhost:3000', {
|
||||
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json' // 设置请求头为JSON
|
||||
},
|
||||
body: JSON.stringify(requestBody) // 将请求体转换为JSON字符串
|
||||
})
|
||||
.then(response =>
|
||||
response.json())
|
||||
.then(data => {
|
||||
console.log(data);
|
||||
console.log("已经导出药品信息");
|
||||
document.getElementById("jieguo").style.display='inline-block';
|
||||
setTimeout(function() {
|
||||
document.getElementById("jieguo").style.display = 'none';
|
||||
}, 3000);
|
||||
}) // 打印服务器返回的数据
|
||||
.catch(error => console.error('Error:', error)
|
||||
);
|
||||
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
</html>
|
||||
@ -1,189 +1,189 @@
|
||||
.button2 {
|
||||
display: inline-block;
|
||||
transition: all 0.2s ease-in;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
color: #090909;
|
||||
padding: 0.7em 1.7em;
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
border-radius: 0.5em;
|
||||
background: #e8e8e8;
|
||||
border: 1px solid #e8e8e8;
|
||||
box-shadow: 6px 6px 12px #c5c5c5, -6px -6px 12px #ffffff;
|
||||
}
|
||||
|
||||
.button2:active {
|
||||
color: #666;
|
||||
box-shadow: inset 4px 4px 12px #c5c5c5, inset -4px -4px 12px #ffffff;
|
||||
}
|
||||
|
||||
.button2:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) scaleY(1) scaleX(1.25);
|
||||
top: 100%;
|
||||
width: 140%;
|
||||
height: 180%;
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.button2:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 55%;
|
||||
transform: translateX(-50%) scaleY(1) scaleX(1.45);
|
||||
top: 180%;
|
||||
width: 160%;
|
||||
height: 190%;
|
||||
background-color: #009087;
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.button2:hover {
|
||||
color: #ffffff;
|
||||
border: 1px solid #009087;
|
||||
}
|
||||
|
||||
.button2:hover:before {
|
||||
top: -35%;
|
||||
background-color: #009087;
|
||||
transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
|
||||
}
|
||||
|
||||
.button2:hover:after {
|
||||
top: -45%;
|
||||
background-color: #009087;
|
||||
transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
|
||||
}
|
||||
.cookie-card {
|
||||
max-width: 800px;
|
||||
max-height: 400px;
|
||||
padding: 1rem;
|
||||
background-color: #eceaea;
|
||||
border-radius: 10px;
|
||||
box-shadow: 20px 20px 30px rgba(0, 0, 0, .05);
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: 600;
|
||||
color: rgb(31 41 55);
|
||||
}
|
||||
|
||||
.description {
|
||||
margin-top: 1rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
color: rgb(75 85 99);
|
||||
}
|
||||
|
||||
.description a {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(59 130 246);
|
||||
}
|
||||
|
||||
.description a:hover {
|
||||
-webkit-text-decoration-line: underline;
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 1rem;
|
||||
-moz-column-gap: 1rem;
|
||||
column-gap: 1rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.pref {
|
||||
font-size: 0.75rem;
|
||||
line-height: 1rem;
|
||||
color: rgb(31 41 55 );
|
||||
-webkit-text-decoration-line: underline;
|
||||
text-decoration-line: underline;
|
||||
transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.pref:hover {
|
||||
color: rgb(156 163 175);
|
||||
}
|
||||
|
||||
.pref:focus {
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.accept {
|
||||
font-size: 0.75rem;
|
||||
line-height: 1rem;
|
||||
background-color: rgb(17 24 39);
|
||||
font-weight: 500;
|
||||
border-radius: 0.5rem;
|
||||
color: #fff;
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
padding-top: 0.625rem;
|
||||
padding-bottom: 0.625rem;
|
||||
border: none;
|
||||
transition: all .15s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.accept:hover {
|
||||
background-color: rgb(55 65 81);
|
||||
}
|
||||
|
||||
.accept:focus {
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
|
||||
#story {
|
||||
/* 设置边框样式 */
|
||||
border: 1px solid #ccc;
|
||||
|
||||
/* 圆角边框 */
|
||||
border-radius: 5px;
|
||||
|
||||
/* 填充（内边距） */
|
||||
padding: 10px;
|
||||
|
||||
/* 设置字体样式 */
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
|
||||
/* 设置背景色 */
|
||||
background-color: #fff;
|
||||
|
||||
/* 调整元素宽度和高度（如果需要） */
|
||||
width: 700px; /* 设置为父元素宽度的100% */
|
||||
resize: vertical; /* 允许用户垂直调整大小 */
|
||||
|
||||
/* 过渡效果（可选） */
|
||||
transition: border-color 0.3s ease;
|
||||
|
||||
/* 聚焦时改变边框颜色（可选） */
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 0 #333;
|
||||
transition: box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
#story:focus {
|
||||
/* 聚焦时边框效果 */
|
||||
border-color: #333;
|
||||
box-shadow: 0 0 0 2px #333;
|
||||
.button2 {
|
||||
display: inline-block;
|
||||
transition: all 0.2s ease-in;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
color: #090909;
|
||||
padding: 0.7em 1.7em;
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
border-radius: 0.5em;
|
||||
background: #e8e8e8;
|
||||
border: 1px solid #e8e8e8;
|
||||
box-shadow: 6px 6px 12px #c5c5c5, -6px -6px 12px #ffffff;
|
||||
}
|
||||
|
||||
.button2:active {
|
||||
color: #666;
|
||||
box-shadow: inset 4px 4px 12px #c5c5c5, inset -4px -4px 12px #ffffff;
|
||||
}
|
||||
|
||||
.button2:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) scaleY(1) scaleX(1.25);
|
||||
top: 100%;
|
||||
width: 140%;
|
||||
height: 180%;
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.button2:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 55%;
|
||||
transform: translateX(-50%) scaleY(1) scaleX(1.45);
|
||||
top: 180%;
|
||||
width: 160%;
|
||||
height: 190%;
|
||||
background-color: #009087;
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.button2:hover {
|
||||
color: #ffffff;
|
||||
border: 1px solid #009087;
|
||||
}
|
||||
|
||||
.button2:hover:before {
|
||||
top: -35%;
|
||||
background-color: #009087;
|
||||
transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
|
||||
}
|
||||
|
||||
.button2:hover:after {
|
||||
top: -45%;
|
||||
background-color: #009087;
|
||||
transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
|
||||
}
|
||||
.cookie-card {
|
||||
max-width: 800px;
|
||||
max-height: 400px;
|
||||
padding: 1rem;
|
||||
background-color: #eceaea;
|
||||
border-radius: 10px;
|
||||
box-shadow: 20px 20px 30px rgba(0, 0, 0, .05);
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: 600;
|
||||
color: rgb(31 41 55);
|
||||
}
|
||||
|
||||
.description {
|
||||
margin-top: 1rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
color: rgb(75 85 99);
|
||||
}
|
||||
|
||||
.description a {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(59 130 246);
|
||||
}
|
||||
|
||||
.description a:hover {
|
||||
-webkit-text-decoration-line: underline;
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 1rem;
|
||||
-moz-column-gap: 1rem;
|
||||
column-gap: 1rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.pref {
|
||||
font-size: 0.75rem;
|
||||
line-height: 1rem;
|
||||
color: rgb(31 41 55 );
|
||||
-webkit-text-decoration-line: underline;
|
||||
text-decoration-line: underline;
|
||||
transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.pref:hover {
|
||||
color: rgb(156 163 175);
|
||||
}
|
||||
|
||||
.pref:focus {
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.accept {
|
||||
font-size: 0.75rem;
|
||||
line-height: 1rem;
|
||||
background-color: rgb(17 24 39);
|
||||
font-weight: 500;
|
||||
border-radius: 0.5rem;
|
||||
color: #fff;
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
padding-top: 0.625rem;
|
||||
padding-bottom: 0.625rem;
|
||||
border: none;
|
||||
transition: all .15s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.accept:hover {
|
||||
background-color: rgb(55 65 81);
|
||||
}
|
||||
|
||||
.accept:focus {
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
|
||||
#story {
|
||||
/* 设置边框样式 */
|
||||
border: 1px solid #ccc;
|
||||
|
||||
/* 圆角边框 */
|
||||
border-radius: 5px;
|
||||
|
||||
/* 填充（内边距） */
|
||||
padding: 10px;
|
||||
|
||||
/* 设置字体样式 */
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
|
||||
/* 设置背景色 */
|
||||
background-color: #fff;
|
||||
|
||||
/* 调整元素宽度和高度（如果需要） */
|
||||
width: 700px; /* 设置为父元素宽度的100% */
|
||||
resize: vertical; /* 允许用户垂直调整大小 */
|
||||
|
||||
/* 过渡效果（可选） */
|
||||
transition: border-color 0.3s ease;
|
||||
|
||||
/* 聚焦时改变边框颜色（可选） */
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 0 #333;
|
||||
transition: box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
#story:focus {
|
||||
/* 聚焦时边框效果 */
|
||||
border-color: #333;
|
||||
box-shadow: 0 0 0 2px #333;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,204 +1,204 @@
|
||||
body{
|
||||
/* background-image: url(../图片/海琴烟.jpg);
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-attachment: fixed; */
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse; /* 合并边框 */
|
||||
width: 90%; /* 表格宽度 */
|
||||
margin: auto; /* 居中显示 */
|
||||
}
|
||||
th, td {
|
||||
border: 1px solid #dddddd; /* 单元格边框 */
|
||||
text-align: center; /* 文本居中 */
|
||||
padding: 8px; /* 内边距 */
|
||||
}
|
||||
th {
|
||||
background-color: #6f9775; /* 表头背景色 */
|
||||
}
|
||||
|
||||
tr:nth-child(even) {
|
||||
background-color: #887070; /* 斑马线条纹效果 */
|
||||
}
|
||||
|
||||
tr:nth-child(odd) {
|
||||
background-color: #5c61a8;
|
||||
}
|
||||
|
||||
.a{
|
||||
background-color: #4126a5; /* 设置按钮的背景颜色 */
|
||||
color: white; /* 设置文本颜色 */
|
||||
padding: 10px 20px; /* 设置内边距 */
|
||||
border: none; /* 移除边框 */
|
||||
border-radius: 5px; /* 设置边框圆角 */
|
||||
cursor: pointer; /* 设置鼠标光标为指针形状 */
|
||||
font-size: 16px; /* 设置字体大小 */
|
||||
}
|
||||
.button2 {
|
||||
display: inline-block;
|
||||
transition: all 0.2s ease-in;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
color: #090909;
|
||||
padding: 0.7em 1.7em;
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
border-radius: 0.5em;
|
||||
background: #e8e8e8;
|
||||
border: 1px solid #e8e8e8;
|
||||
box-shadow: 6px 6px 12px #c5c5c5, -6px -6px 12px #ffffff;
|
||||
}
|
||||
|
||||
.button2:active {
|
||||
color: #666;
|
||||
box-shadow: inset 4px 4px 12px #c5c5c5, inset -4px -4px 12px #ffffff;
|
||||
}
|
||||
|
||||
.button2:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) scaleY(1) scaleX(1.25);
|
||||
top: 100%;
|
||||
width: 140%;
|
||||
height: 180%;
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.button2:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 55%;
|
||||
transform: translateX(-50%) scaleY(1) scaleX(1.45);
|
||||
top: 180%;
|
||||
width: 160%;
|
||||
height: 190%;
|
||||
background-color: #009087;
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.button2:hover {
|
||||
color: #ffffff;
|
||||
border: 1px solid #009087;
|
||||
}
|
||||
|
||||
.button2:hover:before {
|
||||
top: -35%;
|
||||
background-color: #009087;
|
||||
transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
|
||||
}
|
||||
|
||||
.button2:hover:after {
|
||||
top: -45%;
|
||||
background-color: #009087;
|
||||
transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
|
||||
}
|
||||
|
||||
.cookie-card {
|
||||
max-width: 200px;
|
||||
max-height: 400px;
|
||||
padding: 1rem;
|
||||
background-color: #eceaea;
|
||||
border-radius: 10px;
|
||||
box-shadow: 20px 20px 30px rgba(0, 0, 0, .05);
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: 600;
|
||||
font-size: 30px;
|
||||
font-family: 'Arial', sans-serif;
|
||||
color: rgb(31 41 55);
|
||||
}
|
||||
|
||||
.description {
|
||||
margin-top: 1rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
color: rgb(75 85 99);
|
||||
}
|
||||
|
||||
.description1 {
|
||||
margin-top: 1rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
color: rgb(31 41 55);
|
||||
}
|
||||
|
||||
.description a {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(59 130 246);
|
||||
}
|
||||
|
||||
.description a:hover {
|
||||
-webkit-text-decoration-line: underline;
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 1rem;
|
||||
-moz-column-gap: 1rem;
|
||||
column-gap: 1rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.pref {
|
||||
font-size: 0.75rem;
|
||||
line-height: 1rem;
|
||||
color: rgb(31 41 55 );
|
||||
-webkit-text-decoration-line: underline;
|
||||
text-decoration-line: underline;
|
||||
transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.pref:hover {
|
||||
color: rgb(156 163 175);
|
||||
}
|
||||
|
||||
.pref:focus {
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.accept {
|
||||
font-size: 0.75rem;
|
||||
line-height: 1rem;
|
||||
background-color: rgb(17 24 39);
|
||||
font-weight: 500;
|
||||
border-radius: 0.5rem;
|
||||
color: #fff;
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
padding-top: 0.625rem;
|
||||
padding-bottom: 0.625rem;
|
||||
border: none;
|
||||
transition: all .15s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.accept:hover {
|
||||
background-color: rgb(55 65 81);
|
||||
}
|
||||
|
||||
.accept:focus {
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: 2px;
|
||||
body{
|
||||
/* background-image: url(../图片/海琴烟.jpg);
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-attachment: fixed; */
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse; /* 合并边框 */
|
||||
width: 90%; /* 表格宽度 */
|
||||
margin: auto; /* 居中显示 */
|
||||
}
|
||||
th, td {
|
||||
border: 1px solid #dddddd; /* 单元格边框 */
|
||||
text-align: center; /* 文本居中 */
|
||||
padding: 8px; /* 内边距 */
|
||||
}
|
||||
th {
|
||||
background-color: #6f9775; /* 表头背景色 */
|
||||
}
|
||||
|
||||
tr:nth-child(even) {
|
||||
background-color: #887070; /* 斑马线条纹效果 */
|
||||
}
|
||||
|
||||
tr:nth-child(odd) {
|
||||
background-color: #5c61a8;
|
||||
}
|
||||
|
||||
.a{
|
||||
background-color: #4126a5; /* 设置按钮的背景颜色 */
|
||||
color: white; /* 设置文本颜色 */
|
||||
padding: 10px 20px; /* 设置内边距 */
|
||||
border: none; /* 移除边框 */
|
||||
border-radius: 5px; /* 设置边框圆角 */
|
||||
cursor: pointer; /* 设置鼠标光标为指针形状 */
|
||||
font-size: 16px; /* 设置字体大小 */
|
||||
}
|
||||
.button2 {
|
||||
display: inline-block;
|
||||
transition: all 0.2s ease-in;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
color: #090909;
|
||||
padding: 0.7em 1.7em;
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
border-radius: 0.5em;
|
||||
background: #e8e8e8;
|
||||
border: 1px solid #e8e8e8;
|
||||
box-shadow: 6px 6px 12px #c5c5c5, -6px -6px 12px #ffffff;
|
||||
}
|
||||
|
||||
.button2:active {
|
||||
color: #666;
|
||||
box-shadow: inset 4px 4px 12px #c5c5c5, inset -4px -4px 12px #ffffff;
|
||||
}
|
||||
|
||||
.button2:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) scaleY(1) scaleX(1.25);
|
||||
top: 100%;
|
||||
width: 140%;
|
||||
height: 180%;
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.button2:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 55%;
|
||||
transform: translateX(-50%) scaleY(1) scaleX(1.45);
|
||||
top: 180%;
|
||||
width: 160%;
|
||||
height: 190%;
|
||||
background-color: #009087;
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.button2:hover {
|
||||
color: #ffffff;
|
||||
border: 1px solid #009087;
|
||||
}
|
||||
|
||||
.button2:hover:before {
|
||||
top: -35%;
|
||||
background-color: #009087;
|
||||
transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
|
||||
}
|
||||
|
||||
.button2:hover:after {
|
||||
top: -45%;
|
||||
background-color: #009087;
|
||||
transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
|
||||
}
|
||||
|
||||
.cookie-card {
|
||||
max-width: 200px;
|
||||
max-height: 400px;
|
||||
padding: 1rem;
|
||||
background-color: #eceaea;
|
||||
border-radius: 10px;
|
||||
box-shadow: 20px 20px 30px rgba(0, 0, 0, .05);
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: 600;
|
||||
font-size: 30px;
|
||||
font-family: 'Arial', sans-serif;
|
||||
color: rgb(31 41 55);
|
||||
}
|
||||
|
||||
.description {
|
||||
margin-top: 1rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
color: rgb(75 85 99);
|
||||
}
|
||||
|
||||
.description1 {
|
||||
margin-top: 1rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
color: rgb(31 41 55);
|
||||
}
|
||||
|
||||
.description a {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(59 130 246);
|
||||
}
|
||||
|
||||
.description a:hover {
|
||||
-webkit-text-decoration-line: underline;
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 1rem;
|
||||
-moz-column-gap: 1rem;
|
||||
column-gap: 1rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.pref {
|
||||
font-size: 0.75rem;
|
||||
line-height: 1rem;
|
||||
color: rgb(31 41 55 );
|
||||
-webkit-text-decoration-line: underline;
|
||||
text-decoration-line: underline;
|
||||
transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.pref:hover {
|
||||
color: rgb(156 163 175);
|
||||
}
|
||||
|
||||
.pref:focus {
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.accept {
|
||||
font-size: 0.75rem;
|
||||
line-height: 1rem;
|
||||
background-color: rgb(17 24 39);
|
||||
font-weight: 500;
|
||||
border-radius: 0.5rem;
|
||||
color: #fff;
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
padding-top: 0.625rem;
|
||||
padding-bottom: 0.625rem;
|
||||
border: none;
|
||||
transition: all .15s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.accept:hover {
|
||||
background-color: rgb(55 65 81);
|
||||
}
|
||||
|
||||
.accept:focus {
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
@ -1,83 +1,83 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>进库药品统计</title>
|
||||
<link rel=" stylesheet" href="./Income-statistics.css">
|
||||
|
||||
|
||||
<body>
|
||||
<div class="cookie-card">
|
||||
<span class="title">进库药品统计</span>
|
||||
</div>
|
||||
<h1></h1>
|
||||
<button class="button2" onclick="pose()">进库记录</button>
|
||||
<h1></h1>
|
||||
<table id="jinku">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>药名</th>
|
||||
<th>药品公司</th>
|
||||
<th>药品公司联系电话</th>
|
||||
<th>数量</th>
|
||||
<th>价格</th>
|
||||
<th>进价</th>
|
||||
<th>时间</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
</head>
|
||||
</body>
|
||||
|
||||
<script>
|
||||
function pose(){
|
||||
const requestBody = {wenti:81,name:"陈永杭"};
|
||||
fetch('http://localhost:3000', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json' // 设置请求头为JSON
|
||||
},
|
||||
body: JSON.stringify(requestBody) // 将请求体转换为JSON字符串
|
||||
})
|
||||
.then(response =>
|
||||
response.json())
|
||||
.then(data => {
|
||||
cuizaied = data;
|
||||
console.log(data);
|
||||
var table = document.getElementById("jinku");
|
||||
for (ii=1;ii<table.rows.length;ii++){
|
||||
var ia = table.rows[ii];
|
||||
ia.innerHTML = '';
|
||||
}
|
||||
|
||||
|
||||
for (i=0;i<data.length;i++){
|
||||
console.log(data[i]);
|
||||
var row = table.insertRow();
|
||||
var cell1 = row.insertCell(0);
|
||||
cell1.innerHTML = data[i].name;
|
||||
var cell2 = row.insertCell(1);
|
||||
cell2.innerHTML = data[i].company;
|
||||
var cell3 = row.insertCell(2);
|
||||
cell3.innerHTML = data[i].phonenumber;
|
||||
var cell4 = row.insertCell(3);
|
||||
cell4.innerHTML = data[i].amount;
|
||||
var cell5 = row.insertCell(4);
|
||||
cell5.innerHTML = data[i].price;
|
||||
var cell6 = row.insertCell(5);
|
||||
cell6.innerHTML = data[i].purprice;
|
||||
var cell7 = row.insertCell(6);
|
||||
cell7.innerHTML = data[i].time
|
||||
}
|
||||
|
||||
|
||||
// }
|
||||
}) // 打印服务器返回的数据
|
||||
.catch(error => console.error('Error:', error)); // 捕获并打印错误信息
|
||||
|
||||
}
|
||||
pose();
|
||||
</script>
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>进库药品统计</title>
|
||||
<link rel=" stylesheet" href="./Income-statistics.css">
|
||||
|
||||
|
||||
<body>
|
||||
<div class="cookie-card">
|
||||
<span class="title">进库药品统计</span>
|
||||
</div>
|
||||
<h1></h1>
|
||||
<button class="button2" onclick="pose()">进库记录</button>
|
||||
<h1></h1>
|
||||
<table id="jinku">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>药名</th>
|
||||
<th>药品公司</th>
|
||||
<th>药品公司联系电话</th>
|
||||
<th>数量</th>
|
||||
<th>价格</th>
|
||||
<th>进价</th>
|
||||
<th>时间</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
</head>
|
||||
</body>
|
||||
|
||||
<script>
|
||||
function pose(){
|
||||
const requestBody = {wenti:81,name:"陈永杭"};
|
||||
fetch('http://localhost:3000', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json' // 设置请求头为JSON
|
||||
},
|
||||
body: JSON.stringify(requestBody) // 将请求体转换为JSON字符串
|
||||
})
|
||||
.then(response =>
|
||||
response.json())
|
||||
.then(data => {
|
||||
cuizaied = data;
|
||||
console.log(data);
|
||||
var table = document.getElementById("jinku");
|
||||
for (ii=1;ii<table.rows.length;ii++){
|
||||
var ia = table.rows[ii];
|
||||
ia.innerHTML = '';
|
||||
}
|
||||
|
||||
|
||||
for (i=0;i<data.length;i++){
|
||||
console.log(data[i]);
|
||||
var row = table.insertRow();
|
||||
var cell1 = row.insertCell(0);
|
||||
cell1.innerHTML = data[i].name;
|
||||
var cell2 = row.insertCell(1);
|
||||
cell2.innerHTML = data[i].company;
|
||||
var cell3 = row.insertCell(2);
|
||||
cell3.innerHTML = data[i].phonenumber;
|
||||
var cell4 = row.insertCell(3);
|
||||
cell4.innerHTML = data[i].amount;
|
||||
var cell5 = row.insertCell(4);
|
||||
cell5.innerHTML = data[i].price;
|
||||
var cell6 = row.insertCell(5);
|
||||
cell6.innerHTML = data[i].purprice;
|
||||
var cell7 = row.insertCell(6);
|
||||
cell7.innerHTML = data[i].time
|
||||
}
|
||||
|
||||
|
||||
// }
|
||||
}) // 打印服务器返回的数据
|
||||
.catch(error => console.error('Error:', error)); // 捕获并打印错误信息
|
||||
|
||||
}
|
||||
pose();
|
||||
</script>
|
||||
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,289 +1,289 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>眼科用药</title>
|
||||
<!-- <link rel=" stylesheet" href="./眼科用药.css"> -->
|
||||
<style>
|
||||
body{
|
||||
/* background-image: url(../图片/海琴烟.jpg);
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-attachment: fixed; */
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse; /* 合并边框 */
|
||||
width: 90%; /* 表格宽度 */
|
||||
margin: auto; /* 居中显示 */
|
||||
}
|
||||
th, td {
|
||||
border: 1px solid #dddddd; /* 单元格边框 */
|
||||
text-align: center; /* 文本居中 */
|
||||
padding: 8px; /* 内边距 */
|
||||
}
|
||||
th {
|
||||
background-color: #6f9775; /* 表头背景色 */
|
||||
}
|
||||
|
||||
tr:nth-child(even) {
|
||||
background-color: #887070; /* 斑马线条纹效果 */
|
||||
}
|
||||
|
||||
tr:nth-child(odd) {
|
||||
background-color: #5c61a8;
|
||||
}
|
||||
|
||||
.a5{
|
||||
background-color: #4126a5; /* 设置按钮的背景颜色 */
|
||||
color: white; /* 设置文本颜色 */
|
||||
padding: 10px 20px; /* 设置内边距 */
|
||||
border: none; /* 移除边框 */
|
||||
border-radius: 5px; /* 设置边框圆角 */
|
||||
cursor: pointer; /* 设置鼠标光标为指针形状 */
|
||||
font-size: 16px; /* 设置字体大小 */
|
||||
}
|
||||
|
||||
.button2 {
|
||||
display: inline-block;
|
||||
transition: all 0.2s ease-in;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
color: #090909;
|
||||
padding: 0.7em 1.7em;
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
border-radius: 0.5em;
|
||||
background: #e8e8e8;
|
||||
border: 1px solid #e8e8e8;
|
||||
box-shadow: 6px 6px 12px #c5c5c5, -6px -6px 12px #ffffff;
|
||||
}
|
||||
|
||||
.button2:active {
|
||||
color: #666;
|
||||
box-shadow: inset 4px 4px 12px #c5c5c5, inset -4px -4px 12px #ffffff;
|
||||
}
|
||||
|
||||
.button2:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) scaleY(1) scaleX(1.25);
|
||||
top: 100%;
|
||||
width: 140%;
|
||||
height: 180%;
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.button2:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 55%;
|
||||
transform: translateX(-50%) scaleY(1) scaleX(1.45);
|
||||
top: 180%;
|
||||
width: 160%;
|
||||
height: 190%;
|
||||
background-color: #009087;
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.button2:hover {
|
||||
color: #ffffff;
|
||||
border: 1px solid #009087;
|
||||
}
|
||||
|
||||
.button2:hover:before {
|
||||
top: -35%;
|
||||
background-color: #009087;
|
||||
transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
|
||||
}
|
||||
|
||||
.button2:hover:after {
|
||||
top: -45%;
|
||||
background-color: #009087;
|
||||
transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
|
||||
}
|
||||
|
||||
.cookie-card {
|
||||
max-width: 120px;
|
||||
max-height: 400px;
|
||||
padding: 1rem;
|
||||
background-color: #fff8f8;
|
||||
border-radius: 10px;
|
||||
box-shadow: 20px 20px 30px rgba(0, 0, 0, .05);
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: 600;
|
||||
font-size: 30px;
|
||||
font-family: 'Arial', sans-serif;
|
||||
color: rgb(31 41 55);
|
||||
}
|
||||
|
||||
.description {
|
||||
margin-top: 1rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
color: rgb(75 85 99);
|
||||
}
|
||||
|
||||
.description1 {
|
||||
margin-top: 1rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
color: rgb(31 41 55);
|
||||
}
|
||||
|
||||
.description a {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(59 130 246);
|
||||
}
|
||||
|
||||
.description a:hover {
|
||||
-webkit-text-decoration-line: underline;
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 1rem;
|
||||
-moz-column-gap: 1rem;
|
||||
column-gap: 1rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.pref {
|
||||
font-size: 0.75rem;
|
||||
line-height: 1rem;
|
||||
color: rgb(31 41 55 );
|
||||
-webkit-text-decoration-line: underline;
|
||||
text-decoration-line: underline;
|
||||
transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.pref:hover {
|
||||
color: rgb(156 163 175);
|
||||
}
|
||||
|
||||
.pref:focus {
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.accept {
|
||||
font-size: 0.75rem;
|
||||
line-height: 1rem;
|
||||
background-color: rgb(17 24 39);
|
||||
font-weight: 500;
|
||||
border-radius: 0.5rem;
|
||||
color: #fff;
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
padding-top: 0.625rem;
|
||||
padding-bottom: 0.625rem;
|
||||
border: none;
|
||||
transition: all .15s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.accept:hover {
|
||||
background-color: rgb(55 65 81);
|
||||
}
|
||||
|
||||
.accept:focus {
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
|
||||
|
||||
<body>
|
||||
<div class="cookie-card">
|
||||
<span class="title">眼科用药</span>
|
||||
</div>
|
||||
<h1></h1>
|
||||
<button class="button2" onclick="pose()">眼科药品</button>
|
||||
<h1></h1>
|
||||
<table id="yanke">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>药名</th>
|
||||
<th>药品公司</th>
|
||||
<th>药品公司联系电话</th>
|
||||
<th>价格</th>
|
||||
<th>库存</th>
|
||||
<th>进价</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
</body>
|
||||
|
||||
<script>
|
||||
function pose(){
|
||||
const requestBody = {wenti:51,name:"陈永杭"};
|
||||
fetch('http://localhost:3000', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json' // 设置请求头为JSON
|
||||
},
|
||||
body: JSON.stringify(requestBody) // 将请求体转换为JSON字符串
|
||||
})
|
||||
.then(response =>
|
||||
response.json())
|
||||
.then(data => {
|
||||
cuizaied = data;
|
||||
console.log(data);
|
||||
var table = document.getElementById("yanke");
|
||||
for (ii=1;ii<table.rows.length;ii++){
|
||||
var ia = table.rows[ii];
|
||||
ia.innerHTML = '';
|
||||
}
|
||||
|
||||
|
||||
for (i=0;i<data.length;i++){
|
||||
console.log(data[i]);
|
||||
var row = table.insertRow();
|
||||
var cell1 = row.insertCell(0);
|
||||
cell1.innerHTML = data[i].name;
|
||||
var cell2 = row.insertCell(1);
|
||||
cell2.innerHTML = data[i].company;
|
||||
var cell3 = row.insertCell(2);
|
||||
cell3.innerHTML = data[i].phonenumber;
|
||||
var cell4 = row.insertCell(3);
|
||||
cell4.innerHTML = data[i].price;
|
||||
var cell5 = row.insertCell(4);
|
||||
cell5.innerHTML = data[i].amount;
|
||||
var cell6 = row.insertCell(5);
|
||||
cell6.innerHTML = data[i].purprice;
|
||||
}
|
||||
|
||||
|
||||
// }
|
||||
}) // 打印服务器返回的数据
|
||||
.catch(error => console.error('Error:', error)); // 捕获并打印错误信息
|
||||
|
||||
}
|
||||
pose();
|
||||
</script>
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>眼科用药</title>
|
||||
<!-- <link rel=" stylesheet" href="./眼科用药.css"> -->
|
||||
<style>
|
||||
body{
|
||||
/* background-image: url(../图片/海琴烟.jpg);
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-attachment: fixed; */
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse; /* 合并边框 */
|
||||
width: 90%; /* 表格宽度 */
|
||||
margin: auto; /* 居中显示 */
|
||||
}
|
||||
th, td {
|
||||
border: 1px solid #dddddd; /* 单元格边框 */
|
||||
text-align: center; /* 文本居中 */
|
||||
padding: 8px; /* 内边距 */
|
||||
}
|
||||
th {
|
||||
background-color: #6f9775; /* 表头背景色 */
|
||||
}
|
||||
|
||||
tr:nth-child(even) {
|
||||
background-color: #887070; /* 斑马线条纹效果 */
|
||||
}
|
||||
|
||||
tr:nth-child(odd) {
|
||||
background-color: #5c61a8;
|
||||
}
|
||||
|
||||
.a5{
|
||||
background-color: #4126a5; /* 设置按钮的背景颜色 */
|
||||
color: white; /* 设置文本颜色 */
|
||||
padding: 10px 20px; /* 设置内边距 */
|
||||
border: none; /* 移除边框 */
|
||||
border-radius: 5px; /* 设置边框圆角 */
|
||||
cursor: pointer; /* 设置鼠标光标为指针形状 */
|
||||
font-size: 16px; /* 设置字体大小 */
|
||||
}
|
||||
|
||||
.button2 {
|
||||
display: inline-block;
|
||||
transition: all 0.2s ease-in;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
color: #090909;
|
||||
padding: 0.7em 1.7em;
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
border-radius: 0.5em;
|
||||
background: #e8e8e8;
|
||||
border: 1px solid #e8e8e8;
|
||||
box-shadow: 6px 6px 12px #c5c5c5, -6px -6px 12px #ffffff;
|
||||
}
|
||||
|
||||
.button2:active {
|
||||
color: #666;
|
||||
box-shadow: inset 4px 4px 12px #c5c5c5, inset -4px -4px 12px #ffffff;
|
||||
}
|
||||
|
||||
.button2:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) scaleY(1) scaleX(1.25);
|
||||
top: 100%;
|
||||
width: 140%;
|
||||
height: 180%;
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.button2:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 55%;
|
||||
transform: translateX(-50%) scaleY(1) scaleX(1.45);
|
||||
top: 180%;
|
||||
width: 160%;
|
||||
height: 190%;
|
||||
background-color: #009087;
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.button2:hover {
|
||||
color: #ffffff;
|
||||
border: 1px solid #009087;
|
||||
}
|
||||
|
||||
.button2:hover:before {
|
||||
top: -35%;
|
||||
background-color: #009087;
|
||||
transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
|
||||
}
|
||||
|
||||
.button2:hover:after {
|
||||
top: -45%;
|
||||
background-color: #009087;
|
||||
transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
|
||||
}
|
||||
|
||||
.cookie-card {
|
||||
max-width: 120px;
|
||||
max-height: 400px;
|
||||
padding: 1rem;
|
||||
background-color: #fff8f8;
|
||||
border-radius: 10px;
|
||||
box-shadow: 20px 20px 30px rgba(0, 0, 0, .05);
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: 600;
|
||||
font-size: 30px;
|
||||
font-family: 'Arial', sans-serif;
|
||||
color: rgb(31 41 55);
|
||||
}
|
||||
|
||||
.description {
|
||||
margin-top: 1rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
color: rgb(75 85 99);
|
||||
}
|
||||
|
||||
.description1 {
|
||||
margin-top: 1rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
color: rgb(31 41 55);
|
||||
}
|
||||
|
||||
.description a {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(59 130 246);
|
||||
}
|
||||
|
||||
.description a:hover {
|
||||
-webkit-text-decoration-line: underline;
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 1rem;
|
||||
-moz-column-gap: 1rem;
|
||||
column-gap: 1rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.pref {
|
||||
font-size: 0.75rem;
|
||||
line-height: 1rem;
|
||||
color: rgb(31 41 55 );
|
||||
-webkit-text-decoration-line: underline;
|
||||
text-decoration-line: underline;
|
||||
transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.pref:hover {
|
||||
color: rgb(156 163 175);
|
||||
}
|
||||
|
||||
.pref:focus {
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.accept {
|
||||
font-size: 0.75rem;
|
||||
line-height: 1rem;
|
||||
background-color: rgb(17 24 39);
|
||||
font-weight: 500;
|
||||
border-radius: 0.5rem;
|
||||
color: #fff;
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
padding-top: 0.625rem;
|
||||
padding-bottom: 0.625rem;
|
||||
border: none;
|
||||
transition: all .15s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.accept:hover {
|
||||
background-color: rgb(55 65 81);
|
||||
}
|
||||
|
||||
.accept:focus {
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
|
||||
|
||||
<body>
|
||||
<div class="cookie-card">
|
||||
<span class="title">眼科用药</span>
|
||||
</div>
|
||||
<h1></h1>
|
||||
<button class="button2" onclick="pose()">眼科药品</button>
|
||||
<h1></h1>
|
||||
<table id="yanke">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>药名</th>
|
||||
<th>药品公司</th>
|
||||
<th>药品公司联系电话</th>
|
||||
<th>价格</th>
|
||||
<th>库存</th>
|
||||
<th>进价</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
</body>
|
||||
|
||||
<script>
|
||||
function pose(){
|
||||
const requestBody = {wenti:51,name:"陈永杭"};
|
||||
fetch('http://localhost:3000', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json' // 设置请求头为JSON
|
||||
},
|
||||
body: JSON.stringify(requestBody) // 将请求体转换为JSON字符串
|
||||
})
|
||||
.then(response =>
|
||||
response.json())
|
||||
.then(data => {
|
||||
cuizaied = data;
|
||||
console.log(data);
|
||||
var table = document.getElementById("yanke");
|
||||
for (ii=1;ii<table.rows.length;ii++){
|
||||
var ia = table.rows[ii];
|
||||
ia.innerHTML = '';
|
||||
}
|
||||
|
||||
|
||||
for (i=0;i<data.length;i++){
|
||||
console.log(data[i]);
|
||||
var row = table.insertRow();
|
||||
var cell1 = row.insertCell(0);
|
||||
cell1.innerHTML = data[i].name;
|
||||
var cell2 = row.insertCell(1);
|
||||
cell2.innerHTML = data[i].company;
|
||||
var cell3 = row.insertCell(2);
|
||||
cell3.innerHTML = data[i].phonenumber;
|
||||
var cell4 = row.insertCell(3);
|
||||
cell4.innerHTML = data[i].price;
|
||||
var cell5 = row.insertCell(4);
|
||||
cell5.innerHTML = data[i].amount;
|
||||
var cell6 = row.insertCell(5);
|
||||
cell6.innerHTML = data[i].purprice;
|
||||
}
|
||||
|
||||
|
||||
// }
|
||||
}) // 打印服务器返回的数据
|
||||
.catch(error => console.error('Error:', error)); // 捕获并打印错误信息
|
||||
|
||||
}
|
||||
pose();
|
||||
</script>
|
||||
|
||||
</html>
|
||||
@ -1,288 +1,288 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>骨科用药</title>
|
||||
|
||||
|
||||
<style>
|
||||
body{
|
||||
/* background-image: url(../图片/海琴烟.jpg);
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-attachment: fixed; */
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse; /* 合并边框 */
|
||||
width: 90%; /* 表格宽度 */
|
||||
margin: auto; /* 居中显示 */
|
||||
}
|
||||
th, td {
|
||||
border: 1px solid #dddddd; /* 单元格边框 */
|
||||
text-align: center; /* 文本居中 */
|
||||
padding: 8px; /* 内边距 */
|
||||
}
|
||||
th {
|
||||
background-color: #6f9775; /* 表头背景色 */
|
||||
}
|
||||
|
||||
tr:nth-child(even) {
|
||||
background-color: #887070; /* 斑马线条纹效果 */
|
||||
}
|
||||
|
||||
tr:nth-child(odd) {
|
||||
background-color: #5c61a8;
|
||||
}
|
||||
|
||||
.a6{
|
||||
background-color: #4126a5; /* 设置按钮的背景颜色 */
|
||||
color: white; /* 设置文本颜色 */
|
||||
padding: 10px 20px; /* 设置内边距 */
|
||||
border: none; /* 移除边框 */
|
||||
border-radius: 5px; /* 设置边框圆角 */
|
||||
cursor: pointer; /* 设置鼠标光标为指针形状 */
|
||||
font-size: 16px; /* 设置字体大小 */
|
||||
}
|
||||
|
||||
.button2 {
|
||||
display: inline-block;
|
||||
transition: all 0.2s ease-in;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
color: #090909;
|
||||
padding: 0.7em 1.7em;
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
border-radius: 0.5em;
|
||||
background: #e8e8e8;
|
||||
border: 1px solid #e8e8e8;
|
||||
box-shadow: 6px 6px 12px #c5c5c5, -6px -6px 12px #ffffff;
|
||||
}
|
||||
|
||||
.button2:active {
|
||||
color: #666;
|
||||
box-shadow: inset 4px 4px 12px #c5c5c5, inset -4px -4px 12px #ffffff;
|
||||
}
|
||||
|
||||
.button2:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) scaleY(1) scaleX(1.25);
|
||||
top: 100%;
|
||||
width: 140%;
|
||||
height: 180%;
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.button2:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 55%;
|
||||
transform: translateX(-50%) scaleY(1) scaleX(1.45);
|
||||
top: 180%;
|
||||
width: 160%;
|
||||
height: 190%;
|
||||
background-color: #009087;
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.button2:hover {
|
||||
color: #ffffff;
|
||||
border: 1px solid #009087;
|
||||
}
|
||||
|
||||
.button2:hover:before {
|
||||
top: -35%;
|
||||
background-color: #009087;
|
||||
transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
|
||||
}
|
||||
|
||||
.button2:hover:after {
|
||||
top: -45%;
|
||||
background-color: #009087;
|
||||
transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
|
||||
}
|
||||
|
||||
.cookie-card {
|
||||
max-width: 120px;
|
||||
max-height: 400px;
|
||||
padding: 1rem;
|
||||
background-color: #fff8f8;
|
||||
border-radius: 10px;
|
||||
box-shadow: 20px 20px 30px rgba(0, 0, 0, .05);
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: 600;
|
||||
font-size: 30px;
|
||||
font-family: 'Arial', sans-serif;
|
||||
color: rgb(31 41 55);
|
||||
}
|
||||
|
||||
.description {
|
||||
margin-top: 1rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
color: rgb(75 85 99);
|
||||
}
|
||||
|
||||
.description1 {
|
||||
margin-top: 1rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
color: rgb(31 41 55);
|
||||
}
|
||||
|
||||
.description a {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(59 130 246);
|
||||
}
|
||||
|
||||
.description a:hover {
|
||||
-webkit-text-decoration-line: underline;
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 1rem;
|
||||
-moz-column-gap: 1rem;
|
||||
column-gap: 1rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.pref {
|
||||
font-size: 0.75rem;
|
||||
line-height: 1rem;
|
||||
color: rgb(31 41 55 );
|
||||
-webkit-text-decoration-line: underline;
|
||||
text-decoration-line: underline;
|
||||
transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.pref:hover {
|
||||
color: rgb(156 163 175);
|
||||
}
|
||||
|
||||
.pref:focus {
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.accept {
|
||||
font-size: 0.75rem;
|
||||
line-height: 1rem;
|
||||
background-color: rgb(17 24 39);
|
||||
font-weight: 500;
|
||||
border-radius: 0.5rem;
|
||||
color: #fff;
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
padding-top: 0.625rem;
|
||||
padding-bottom: 0.625rem;
|
||||
border: none;
|
||||
transition: all .15s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.accept:hover {
|
||||
background-color: rgb(55 65 81);
|
||||
}
|
||||
|
||||
.accept:focus {
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="cookie-card">
|
||||
<span class="title">骨科用药</span>
|
||||
</div>
|
||||
<h1></h1>
|
||||
<button class="button2" onclick="pose()">骨科药品</button>
|
||||
<h1></h1>
|
||||
<table id="guke">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>药名</th>
|
||||
<th>药品公司</th>
|
||||
<th>药品公司联系电话</th>
|
||||
<th>价格</th>
|
||||
<th>库存</th>
|
||||
<th>进价</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
</body>
|
||||
|
||||
<script>
|
||||
function pose(){
|
||||
const requestBody = {wenti:61,name:"陈永杭"};
|
||||
fetch('http://localhost:3000', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json' // 设置请求头为JSON
|
||||
},
|
||||
body: JSON.stringify(requestBody) // 将请求体转换为JSON字符串
|
||||
})
|
||||
.then(response =>
|
||||
response.json())
|
||||
.then(data => {
|
||||
cuizaied = data;
|
||||
console.log(data);
|
||||
var table = document.getElementById("guke");
|
||||
for (ii=1;ii<table.rows.length;ii++){
|
||||
var ia = table.rows[ii];
|
||||
ia.innerHTML = '';
|
||||
}
|
||||
|
||||
|
||||
for (i=0;i<data.length;i++){
|
||||
console.log(data[i]);
|
||||
var row = table.insertRow();
|
||||
var cell1 = row.insertCell(0);
|
||||
cell1.innerHTML = data[i].name;
|
||||
var cell2 = row.insertCell(1);
|
||||
cell2.innerHTML = data[i].company;
|
||||
var cell3 = row.insertCell(2);
|
||||
cell3.innerHTML = data[i].phonenumber;
|
||||
var cell4 = row.insertCell(3);
|
||||
cell4.innerHTML = data[i].price;
|
||||
var cell5 = row.insertCell(4);
|
||||
cell5.innerHTML = data[i].amount;
|
||||
var cell6 = row.insertCell(5);
|
||||
cell6.innerHTML = data[i].purprice;
|
||||
}
|
||||
|
||||
|
||||
// }
|
||||
}) // 打印服务器返回的数据
|
||||
.catch(error => console.error('Error:', error)); // 捕获并打印错误信息
|
||||
|
||||
}
|
||||
pose();
|
||||
</script>
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>骨科用药</title>
|
||||
|
||||
|
||||
<style>
|
||||
body{
|
||||
/* background-image: url(../图片/海琴烟.jpg);
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-attachment: fixed; */
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse; /* 合并边框 */
|
||||
width: 90%; /* 表格宽度 */
|
||||
margin: auto; /* 居中显示 */
|
||||
}
|
||||
th, td {
|
||||
border: 1px solid #dddddd; /* 单元格边框 */
|
||||
text-align: center; /* 文本居中 */
|
||||
padding: 8px; /* 内边距 */
|
||||
}
|
||||
th {
|
||||
background-color: #6f9775; /* 表头背景色 */
|
||||
}
|
||||
|
||||
tr:nth-child(even) {
|
||||
background-color: #887070; /* 斑马线条纹效果 */
|
||||
}
|
||||
|
||||
tr:nth-child(odd) {
|
||||
background-color: #5c61a8;
|
||||
}
|
||||
|
||||
.a6{
|
||||
background-color: #4126a5; /* 设置按钮的背景颜色 */
|
||||
color: white; /* 设置文本颜色 */
|
||||
padding: 10px 20px; /* 设置内边距 */
|
||||
border: none; /* 移除边框 */
|
||||
border-radius: 5px; /* 设置边框圆角 */
|
||||
cursor: pointer; /* 设置鼠标光标为指针形状 */
|
||||
font-size: 16px; /* 设置字体大小 */
|
||||
}
|
||||
|
||||
.button2 {
|
||||
display: inline-block;
|
||||
transition: all 0.2s ease-in;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
color: #090909;
|
||||
padding: 0.7em 1.7em;
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
border-radius: 0.5em;
|
||||
background: #e8e8e8;
|
||||
border: 1px solid #e8e8e8;
|
||||
box-shadow: 6px 6px 12px #c5c5c5, -6px -6px 12px #ffffff;
|
||||
}
|
||||
|
||||
.button2:active {
|
||||
color: #666;
|
||||
box-shadow: inset 4px 4px 12px #c5c5c5, inset -4px -4px 12px #ffffff;
|
||||
}
|
||||
|
||||
.button2:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) scaleY(1) scaleX(1.25);
|
||||
top: 100%;
|
||||
width: 140%;
|
||||
height: 180%;
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.button2:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 55%;
|
||||
transform: translateX(-50%) scaleY(1) scaleX(1.45);
|
||||
top: 180%;
|
||||
width: 160%;
|
||||
height: 190%;
|
||||
background-color: #009087;
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.button2:hover {
|
||||
color: #ffffff;
|
||||
border: 1px solid #009087;
|
||||
}
|
||||
|
||||
.button2:hover:before {
|
||||
top: -35%;
|
||||
background-color: #009087;
|
||||
transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
|
||||
}
|
||||
|
||||
.button2:hover:after {
|
||||
top: -45%;
|
||||
background-color: #009087;
|
||||
transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
|
||||
}
|
||||
|
||||
.cookie-card {
|
||||
max-width: 120px;
|
||||
max-height: 400px;
|
||||
padding: 1rem;
|
||||
background-color: #fff8f8;
|
||||
border-radius: 10px;
|
||||
box-shadow: 20px 20px 30px rgba(0, 0, 0, .05);
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: 600;
|
||||
font-size: 30px;
|
||||
font-family: 'Arial', sans-serif;
|
||||
color: rgb(31 41 55);
|
||||
}
|
||||
|
||||
.description {
|
||||
margin-top: 1rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
color: rgb(75 85 99);
|
||||
}
|
||||
|
||||
.description1 {
|
||||
margin-top: 1rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
color: rgb(31 41 55);
|
||||
}
|
||||
|
||||
.description a {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(59 130 246);
|
||||
}
|
||||
|
||||
.description a:hover {
|
||||
-webkit-text-decoration-line: underline;
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 1rem;
|
||||
-moz-column-gap: 1rem;
|
||||
column-gap: 1rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.pref {
|
||||
font-size: 0.75rem;
|
||||
line-height: 1rem;
|
||||
color: rgb(31 41 55 );
|
||||
-webkit-text-decoration-line: underline;
|
||||
text-decoration-line: underline;
|
||||
transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.pref:hover {
|
||||
color: rgb(156 163 175);
|
||||
}
|
||||
|
||||
.pref:focus {
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.accept {
|
||||
font-size: 0.75rem;
|
||||
line-height: 1rem;
|
||||
background-color: rgb(17 24 39);
|
||||
font-weight: 500;
|
||||
border-radius: 0.5rem;
|
||||
color: #fff;
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
padding-top: 0.625rem;
|
||||
padding-bottom: 0.625rem;
|
||||
border: none;
|
||||
transition: all .15s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.accept:hover {
|
||||
background-color: rgb(55 65 81);
|
||||
}
|
||||
|
||||
.accept:focus {
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="cookie-card">
|
||||
<span class="title">骨科用药</span>
|
||||
</div>
|
||||
<h1></h1>
|
||||
<button class="button2" onclick="pose()">骨科药品</button>
|
||||
<h1></h1>
|
||||
<table id="guke">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>药名</th>
|
||||
<th>药品公司</th>
|
||||
<th>药品公司联系电话</th>
|
||||
<th>价格</th>
|
||||
<th>库存</th>
|
||||
<th>进价</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
</body>
|
||||
|
||||
<script>
|
||||
function pose(){
|
||||
const requestBody = {wenti:61,name:"陈永杭"};
|
||||
fetch('http://localhost:3000', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json' // 设置请求头为JSON
|
||||
},
|
||||
body: JSON.stringify(requestBody) // 将请求体转换为JSON字符串
|
||||
})
|
||||
.then(response =>
|
||||
response.json())
|
||||
.then(data => {
|
||||
cuizaied = data;
|
||||
console.log(data);
|
||||
var table = document.getElementById("guke");
|
||||
for (ii=1;ii<table.rows.length;ii++){
|
||||
var ia = table.rows[ii];
|
||||
ia.innerHTML = '';
|
||||
}
|
||||
|
||||
|
||||
for (i=0;i<data.length;i++){
|
||||
console.log(data[i]);
|
||||
var row = table.insertRow();
|
||||
var cell1 = row.insertCell(0);
|
||||
cell1.innerHTML = data[i].name;
|
||||
var cell2 = row.insertCell(1);
|
||||
cell2.innerHTML = data[i].company;
|
||||
var cell3 = row.insertCell(2);
|
||||
cell3.innerHTML = data[i].phonenumber;
|
||||
var cell4 = row.insertCell(3);
|
||||
cell4.innerHTML = data[i].price;
|
||||
var cell5 = row.insertCell(4);
|
||||
cell5.innerHTML = data[i].amount;
|
||||
var cell6 = row.insertCell(5);
|
||||
cell6.innerHTML = data[i].purprice;
|
||||
}
|
||||
|
||||
|
||||
// }
|
||||
}) // 打印服务器返回的数据
|
||||
.catch(error => console.error('Error:', error)); // 捕获并打印错误信息
|
||||
|
||||
}
|
||||
pose();
|
||||
</script>
|
||||
|
||||
</html>
|
||||
@ -1,293 +1,293 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>出库药品统计</title>
|
||||
<style>
|
||||
body{
|
||||
/* background-image: url(../图片/海琴烟.jpg);
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-attachment: fixed; */
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse; /* 合并边框 */
|
||||
width: 90%; /* 表格宽度 */
|
||||
margin: auto; /* 居中显示 */
|
||||
}
|
||||
th, td {
|
||||
border: 1px solid #dddddd; /* 单元格边框 */
|
||||
text-align: center; /* 文本居中 */
|
||||
padding: 8px; /* 内边距 */
|
||||
}
|
||||
th {
|
||||
background-color: #6f9775; /* 表头背景色 */
|
||||
}
|
||||
|
||||
tr:nth-child(even) {
|
||||
background-color: #887070; /* 斑马线条纹效果 */
|
||||
}
|
||||
|
||||
tr:nth-child(odd) {
|
||||
background-color: #5c61a8;
|
||||
}
|
||||
|
||||
.a{
|
||||
background-color: #4126a5; /* 设置按钮的背景颜色 */
|
||||
color: white; /* 设置文本颜色 */
|
||||
padding: 10px 20px; /* 设置内边距 */
|
||||
border: none; /* 移除边框 */
|
||||
border-radius: 5px; /* 设置边框圆角 */
|
||||
cursor: pointer; /* 设置鼠标光标为指针形状 */
|
||||
font-size: 16px; /* 设置字体大小 */
|
||||
}
|
||||
|
||||
.button2 {
|
||||
display: inline-block;
|
||||
transition: all 0.2s ease-in;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
color: #090909;
|
||||
padding: 0.7em 1.7em;
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
border-radius: 0.5em;
|
||||
background: #e8e8e8;
|
||||
border: 1px solid #e8e8e8;
|
||||
box-shadow: 6px 6px 12px #c5c5c5, -6px -6px 12px #ffffff;
|
||||
}
|
||||
|
||||
.button2:active {
|
||||
color: #666;
|
||||
box-shadow: inset 4px 4px 12px #c5c5c5, inset -4px -4px 12px #ffffff;
|
||||
}
|
||||
|
||||
.button2:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) scaleY(1) scaleX(1.25);
|
||||
top: 100%;
|
||||
width: 140%;
|
||||
height: 180%;
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.button2:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 55%;
|
||||
transform: translateX(-50%) scaleY(1) scaleX(1.45);
|
||||
top: 180%;
|
||||
width: 160%;
|
||||
height: 190%;
|
||||
background-color: #009087;
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.button2:hover {
|
||||
color: #ffffff;
|
||||
border: 1px solid #009087;
|
||||
}
|
||||
|
||||
.button2:hover:before {
|
||||
top: -35%;
|
||||
background-color: #009087;
|
||||
transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
|
||||
}
|
||||
|
||||
.button2:hover:after {
|
||||
top: -45%;
|
||||
background-color: #009087;
|
||||
transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
|
||||
}
|
||||
|
||||
.cookie-card {
|
||||
max-width: 200px;
|
||||
max-height: 400px;
|
||||
padding: 1rem;
|
||||
background-color: #eceaea;
|
||||
border-radius: 10px;
|
||||
box-shadow: 20px 20px 30px rgba(0, 0, 0, .05);
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: 600;
|
||||
font-size: 30px;
|
||||
font-family: 'Arial', sans-serif;
|
||||
color: rgb(31 41 55);
|
||||
}
|
||||
|
||||
.description {
|
||||
margin-top: 1rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
color: rgb(75 85 99);
|
||||
}
|
||||
|
||||
.description1 {
|
||||
margin-top: 1rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
color: rgb(31 41 55);
|
||||
}
|
||||
|
||||
.description a {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(59 130 246);
|
||||
}
|
||||
|
||||
.description a:hover {
|
||||
-webkit-text-decoration-line: underline;
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 1rem;
|
||||
-moz-column-gap: 1rem;
|
||||
column-gap: 1rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.pref {
|
||||
font-size: 0.75rem;
|
||||
line-height: 1rem;
|
||||
color: rgb(31 41 55 );
|
||||
-webkit-text-decoration-line: underline;
|
||||
text-decoration-line: underline;
|
||||
transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.pref:hover {
|
||||
color: rgb(156 163 175);
|
||||
}
|
||||
|
||||
.pref:focus {
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.accept {
|
||||
font-size: 0.75rem;
|
||||
line-height: 1rem;
|
||||
background-color: rgb(17 24 39);
|
||||
font-weight: 500;
|
||||
border-radius: 0.5rem;
|
||||
color: #fff;
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
padding-top: 0.625rem;
|
||||
padding-bottom: 0.625rem;
|
||||
border: none;
|
||||
transition: all .15s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.accept:hover {
|
||||
background-color: rgb(55 65 81);
|
||||
}
|
||||
|
||||
.accept:focus {
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="cookie-card">
|
||||
<span class="title">出库药品统计</span>
|
||||
</div>
|
||||
<h1></h1>
|
||||
<button class="button2" onclick="pose()">出库记录</button>
|
||||
<h1></h1>
|
||||
<table id="chuku">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>药名</th>
|
||||
<th>药品公司</th>
|
||||
<th>药品公司联系电话</th>
|
||||
<th>数量</th>
|
||||
<th>价格</th>
|
||||
<th>进价</th>
|
||||
<th>时间</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
|
||||
<script>
|
||||
function pose(){
|
||||
const requestBody = {wenti:71,name:"陈永杭"};
|
||||
fetch('http://localhost:3000', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json' // 设置请求头为JSON
|
||||
},
|
||||
body: JSON.stringify(requestBody) // 将请求体转换为JSON字符串
|
||||
})
|
||||
.then(response =>
|
||||
response.json())
|
||||
.then(data => {
|
||||
cuizaied = data;
|
||||
console.log(data);
|
||||
var table = document.getElementById("chuku");
|
||||
for (ii=1;ii<table.rows.length;ii++){
|
||||
var ia = table.rows[ii];
|
||||
ia.innerHTML = '';
|
||||
}
|
||||
|
||||
|
||||
for (i=0;i<data.length;i++){
|
||||
console.log(data[i]);
|
||||
var row = table.insertRow();
|
||||
var cell1 = row.insertCell(0);
|
||||
cell1.innerHTML = data[i].name;
|
||||
var cell2 = row.insertCell(1);
|
||||
cell2.innerHTML = data[i].company;
|
||||
var cell3 = row.insertCell(2);
|
||||
cell3.innerHTML = data[i].phonenumber;
|
||||
var cell4 = row.insertCell(3);
|
||||
cell4.innerHTML = data[i].amount;
|
||||
var cell5 = row.insertCell(4);
|
||||
cell5.innerHTML = data[i].price;
|
||||
var cell6 = row.insertCell(5);
|
||||
cell6.innerHTML = data[i].purprice;
|
||||
var cell7 = row.insertCell(6);
|
||||
cell7.innerHTML = data[i].time
|
||||
}
|
||||
|
||||
|
||||
// }
|
||||
}) // 打印服务器返回的数据
|
||||
.catch(error => console.error('Error:', error)); // 捕获并打印错误信息
|
||||
|
||||
}
|
||||
|
||||
pose();
|
||||
</script>
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>出库药品统计</title>
|
||||
<style>
|
||||
body{
|
||||
/* background-image: url(../图片/海琴烟.jpg);
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-attachment: fixed; */
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse; /* 合并边框 */
|
||||
width: 90%; /* 表格宽度 */
|
||||
margin: auto; /* 居中显示 */
|
||||
}
|
||||
th, td {
|
||||
border: 1px solid #dddddd; /* 单元格边框 */
|
||||
text-align: center; /* 文本居中 */
|
||||
padding: 8px; /* 内边距 */
|
||||
}
|
||||
th {
|
||||
background-color: #6f9775; /* 表头背景色 */
|
||||
}
|
||||
|
||||
tr:nth-child(even) {
|
||||
background-color: #887070; /* 斑马线条纹效果 */
|
||||
}
|
||||
|
||||
tr:nth-child(odd) {
|
||||
background-color: #5c61a8;
|
||||
}
|
||||
|
||||
.a{
|
||||
background-color: #4126a5; /* 设置按钮的背景颜色 */
|
||||
color: white; /* 设置文本颜色 */
|
||||
padding: 10px 20px; /* 设置内边距 */
|
||||
border: none; /* 移除边框 */
|
||||
border-radius: 5px; /* 设置边框圆角 */
|
||||
cursor: pointer; /* 设置鼠标光标为指针形状 */
|
||||
font-size: 16px; /* 设置字体大小 */
|
||||
}
|
||||
|
||||
.button2 {
|
||||
display: inline-block;
|
||||
transition: all 0.2s ease-in;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
color: #090909;
|
||||
padding: 0.7em 1.7em;
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
border-radius: 0.5em;
|
||||
background: #e8e8e8;
|
||||
border: 1px solid #e8e8e8;
|
||||
box-shadow: 6px 6px 12px #c5c5c5, -6px -6px 12px #ffffff;
|
||||
}
|
||||
|
||||
.button2:active {
|
||||
color: #666;
|
||||
box-shadow: inset 4px 4px 12px #c5c5c5, inset -4px -4px 12px #ffffff;
|
||||
}
|
||||
|
||||
.button2:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) scaleY(1) scaleX(1.25);
|
||||
top: 100%;
|
||||
width: 140%;
|
||||
height: 180%;
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.button2:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 55%;
|
||||
transform: translateX(-50%) scaleY(1) scaleX(1.45);
|
||||
top: 180%;
|
||||
width: 160%;
|
||||
height: 190%;
|
||||
background-color: #009087;
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.button2:hover {
|
||||
color: #ffffff;
|
||||
border: 1px solid #009087;
|
||||
}
|
||||
|
||||
.button2:hover:before {
|
||||
top: -35%;
|
||||
background-color: #009087;
|
||||
transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
|
||||
}
|
||||
|
||||
.button2:hover:after {
|
||||
top: -45%;
|
||||
background-color: #009087;
|
||||
transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
|
||||
}
|
||||
|
||||
.cookie-card {
|
||||
max-width: 200px;
|
||||
max-height: 400px;
|
||||
padding: 1rem;
|
||||
background-color: #eceaea;
|
||||
border-radius: 10px;
|
||||
box-shadow: 20px 20px 30px rgba(0, 0, 0, .05);
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: 600;
|
||||
font-size: 30px;
|
||||
font-family: 'Arial', sans-serif;
|
||||
color: rgb(31 41 55);
|
||||
}
|
||||
|
||||
.description {
|
||||
margin-top: 1rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
color: rgb(75 85 99);
|
||||
}
|
||||
|
||||
.description1 {
|
||||
margin-top: 1rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
color: rgb(31 41 55);
|
||||
}
|
||||
|
||||
.description a {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(59 130 246);
|
||||
}
|
||||
|
||||
.description a:hover {
|
||||
-webkit-text-decoration-line: underline;
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 1rem;
|
||||
-moz-column-gap: 1rem;
|
||||
column-gap: 1rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.pref {
|
||||
font-size: 0.75rem;
|
||||
line-height: 1rem;
|
||||
color: rgb(31 41 55 );
|
||||
-webkit-text-decoration-line: underline;
|
||||
text-decoration-line: underline;
|
||||
transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.pref:hover {
|
||||
color: rgb(156 163 175);
|
||||
}
|
||||
|
||||
.pref:focus {
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.accept {
|
||||
font-size: 0.75rem;
|
||||
line-height: 1rem;
|
||||
background-color: rgb(17 24 39);
|
||||
font-weight: 500;
|
||||
border-radius: 0.5rem;
|
||||
color: #fff;
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
padding-top: 0.625rem;
|
||||
padding-bottom: 0.625rem;
|
||||
border: none;
|
||||
transition: all .15s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.accept:hover {
|
||||
background-color: rgb(55 65 81);
|
||||
}
|
||||
|
||||
.accept:focus {
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="cookie-card">
|
||||
<span class="title">出库药品统计</span>
|
||||
</div>
|
||||
<h1></h1>
|
||||
<button class="button2" onclick="pose()">出库记录</button>
|
||||
<h1></h1>
|
||||
<table id="chuku">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>药名</th>
|
||||
<th>药品公司</th>
|
||||
<th>药品公司联系电话</th>
|
||||
<th>数量</th>
|
||||
<th>价格</th>
|
||||
<th>进价</th>
|
||||
<th>时间</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
|
||||
<script>
|
||||
function pose(){
|
||||
const requestBody = {wenti:71,name:"陈永杭"};
|
||||
fetch('http://localhost:3000', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json' // 设置请求头为JSON
|
||||
},
|
||||
body: JSON.stringify(requestBody) // 将请求体转换为JSON字符串
|
||||
})
|
||||
.then(response =>
|
||||
response.json())
|
||||
.then(data => {
|
||||
cuizaied = data;
|
||||
console.log(data);
|
||||
var table = document.getElementById("chuku");
|
||||
for (ii=1;ii<table.rows.length;ii++){
|
||||
var ia = table.rows[ii];
|
||||
ia.innerHTML = '';
|
||||
}
|
||||
|
||||
|
||||
for (i=0;i<data.length;i++){
|
||||
console.log(data[i]);
|
||||
var row = table.insertRow();
|
||||
var cell1 = row.insertCell(0);
|
||||
cell1.innerHTML = data[i].name;
|
||||
var cell2 = row.insertCell(1);
|
||||
cell2.innerHTML = data[i].company;
|
||||
var cell3 = row.insertCell(2);
|
||||
cell3.innerHTML = data[i].phonenumber;
|
||||
var cell4 = row.insertCell(3);
|
||||
cell4.innerHTML = data[i].amount;
|
||||
var cell5 = row.insertCell(4);
|
||||
cell5.innerHTML = data[i].price;
|
||||
var cell6 = row.insertCell(5);
|
||||
cell6.innerHTML = data[i].purprice;
|
||||
var cell7 = row.insertCell(6);
|
||||
cell7.innerHTML = data[i].time
|
||||
}
|
||||
|
||||
|
||||
// }
|
||||
}) // 打印服务器返回的数据
|
||||
.catch(error => console.error('Error:', error)); // 捕获并打印错误信息
|
||||
|
||||
}
|
||||
|
||||
pose();
|
||||
</script>
|
||||
|
||||
</html>
|
||||
@ -1,287 +1,287 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>呼吸系统药</title>
|
||||
|
||||
<style>
|
||||
body{
|
||||
/* background-image: url(../图片/海琴烟.jpg);
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-attachment: fixed; */
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse; /* 合并边框 */
|
||||
width: 90%; /* 表格宽度 */
|
||||
margin: auto; /* 居中显示 */
|
||||
}
|
||||
th, td {
|
||||
border: 1px solid #dddddd; /* 单元格边框 */
|
||||
text-align: center; /* 文本居中 */
|
||||
padding: 8px; /* 内边距 */
|
||||
}
|
||||
th {
|
||||
background-color: #6f9775; /* 表头背景色 */
|
||||
}
|
||||
|
||||
tr:nth-child(even) {
|
||||
background-color: #887070; /* 斑马线条纹效果 */
|
||||
}
|
||||
|
||||
tr:nth-child(odd) {
|
||||
background-color: #5c61a8;
|
||||
}
|
||||
|
||||
.a5{
|
||||
background-color: #4126a5; /* 设置按钮的背景颜色 */
|
||||
color: white; /* 设置文本颜色 */
|
||||
padding: 10px 20px; /* 设置内边距 */
|
||||
border: none; /* 移除边框 */
|
||||
border-radius: 5px; /* 设置边框圆角 */
|
||||
cursor: pointer; /* 设置鼠标光标为指针形状 */
|
||||
font-size: 16px; /* 设置字体大小 */
|
||||
}
|
||||
|
||||
.button2 {
|
||||
display: inline-block;
|
||||
transition: all 0.2s ease-in;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
color: #090909;
|
||||
padding: 0.7em 1.7em;
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
border-radius: 0.5em;
|
||||
background: #e8e8e8;
|
||||
border: 1px solid #e8e8e8;
|
||||
box-shadow: 6px 6px 12px #c5c5c5, -6px -6px 12px #ffffff;
|
||||
}
|
||||
|
||||
.button2:active {
|
||||
color: #666;
|
||||
box-shadow: inset 4px 4px 12px #c5c5c5, inset -4px -4px 12px #ffffff;
|
||||
}
|
||||
|
||||
.button2:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) scaleY(1) scaleX(1.25);
|
||||
top: 100%;
|
||||
width: 140%;
|
||||
height: 180%;
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.button2:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 55%;
|
||||
transform: translateX(-50%) scaleY(1) scaleX(1.45);
|
||||
top: 180%;
|
||||
width: 160%;
|
||||
height: 190%;
|
||||
background-color: #009087;
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.button2:hover {
|
||||
color: #ffffff;
|
||||
border: 1px solid #009087;
|
||||
}
|
||||
|
||||
.button2:hover:before {
|
||||
top: -35%;
|
||||
background-color: #009087;
|
||||
transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
|
||||
}
|
||||
|
||||
.button2:hover:after {
|
||||
top: -45%;
|
||||
background-color: #009087;
|
||||
transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
|
||||
}
|
||||
|
||||
.cookie-card {
|
||||
max-width: 160px;
|
||||
max-height: 400px;
|
||||
padding: 1rem;
|
||||
background-color: #fff8f8;
|
||||
border-radius: 10px;
|
||||
box-shadow: 20px 20px 30px rgba(0, 0, 0, .05);
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: 600;
|
||||
font-size: 30px;
|
||||
font-family: 'Arial', sans-serif;
|
||||
color: rgb(31 41 55);
|
||||
}
|
||||
|
||||
.description {
|
||||
margin-top: 1rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
color: rgb(75 85 99);
|
||||
}
|
||||
|
||||
.description1 {
|
||||
margin-top: 1rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
color: rgb(31 41 55);
|
||||
}
|
||||
|
||||
.description a {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(59 130 246);
|
||||
}
|
||||
|
||||
.description a:hover {
|
||||
-webkit-text-decoration-line: underline;
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 1rem;
|
||||
-moz-column-gap: 1rem;
|
||||
column-gap: 1rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.pref {
|
||||
font-size: 0.75rem;
|
||||
line-height: 1rem;
|
||||
color: rgb(31 41 55 );
|
||||
-webkit-text-decoration-line: underline;
|
||||
text-decoration-line: underline;
|
||||
transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.pref:hover {
|
||||
color: rgb(156 163 175);
|
||||
}
|
||||
|
||||
.pref:focus {
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.accept {
|
||||
font-size: 0.75rem;
|
||||
line-height: 1rem;
|
||||
background-color: rgb(17 24 39);
|
||||
font-weight: 500;
|
||||
border-radius: 0.5rem;
|
||||
color: #fff;
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
padding-top: 0.625rem;
|
||||
padding-bottom: 0.625rem;
|
||||
border: none;
|
||||
transition: all .15s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.accept:hover {
|
||||
background-color: rgb(55 65 81);
|
||||
}
|
||||
|
||||
.accept:focus {
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="cookie-card">
|
||||
<span class="title">呼吸系统药</span>
|
||||
</div>
|
||||
<h1></h1>
|
||||
<button class="button2" onclick="pose()">呼吸系统药品</button>
|
||||
<h1></h1>
|
||||
<table id="huxi">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>药名</th>
|
||||
<th>药品公司</th>
|
||||
<th>药品公司联系电话</th>
|
||||
<th>价格</th>
|
||||
<th>库存</th>
|
||||
<th>进价</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
</body>
|
||||
|
||||
<script>
|
||||
function pose(){
|
||||
const requestBody = {wenti:11,name:"陈永杭"};
|
||||
fetch('http://localhost:3000', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json' // 设置请求头为JSON
|
||||
},
|
||||
body: JSON.stringify(requestBody) // 将请求体转换为JSON字符串
|
||||
})
|
||||
.then(response =>
|
||||
response.json())
|
||||
.then(data => {
|
||||
cuizaied = data;
|
||||
console.log(data);
|
||||
var table = document.getElementById("huxi");
|
||||
for (ii=1;ii<table.rows.length;ii++){
|
||||
var ia = table.rows[ii];
|
||||
ia.innerHTML = '';
|
||||
}
|
||||
|
||||
|
||||
for (i=0;i<data.length;i++){
|
||||
console.log(data[i]);
|
||||
var row = table.insertRow();
|
||||
var cell1 = row.insertCell(0);
|
||||
cell1.innerHTML = data[i].name;
|
||||
var cell2 = row.insertCell(1);
|
||||
cell2.innerHTML = data[i].company;
|
||||
var cell3 = row.insertCell(2);
|
||||
cell3.innerHTML = data[i].phonenumber;
|
||||
var cell4 = row.insertCell(3);
|
||||
cell4.innerHTML = data[i].price;
|
||||
var cell5 = row.insertCell(4);
|
||||
cell5.innerHTML = data[i].amount;
|
||||
var cell6 = row.insertCell(5);
|
||||
cell6.innerHTML = data[i].purprice;
|
||||
}
|
||||
|
||||
|
||||
// }
|
||||
}) // 打印服务器返回的数据
|
||||
.catch(error => console.error('Error:', error)); // 捕获并打印错误信息
|
||||
|
||||
}
|
||||
pose();
|
||||
</script>
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>呼吸系统药</title>
|
||||
|
||||
<style>
|
||||
body{
|
||||
/* background-image: url(../图片/海琴烟.jpg);
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-attachment: fixed; */
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse; /* 合并边框 */
|
||||
width: 90%; /* 表格宽度 */
|
||||
margin: auto; /* 居中显示 */
|
||||
}
|
||||
th, td {
|
||||
border: 1px solid #dddddd; /* 单元格边框 */
|
||||
text-align: center; /* 文本居中 */
|
||||
padding: 8px; /* 内边距 */
|
||||
}
|
||||
th {
|
||||
background-color: #6f9775; /* 表头背景色 */
|
||||
}
|
||||
|
||||
tr:nth-child(even) {
|
||||
background-color: #887070; /* 斑马线条纹效果 */
|
||||
}
|
||||
|
||||
tr:nth-child(odd) {
|
||||
background-color: #5c61a8;
|
||||
}
|
||||
|
||||
.a5{
|
||||
background-color: #4126a5; /* 设置按钮的背景颜色 */
|
||||
color: white; /* 设置文本颜色 */
|
||||
padding: 10px 20px; /* 设置内边距 */
|
||||
border: none; /* 移除边框 */
|
||||
border-radius: 5px; /* 设置边框圆角 */
|
||||
cursor: pointer; /* 设置鼠标光标为指针形状 */
|
||||
font-size: 16px; /* 设置字体大小 */
|
||||
}
|
||||
|
||||
.button2 {
|
||||
display: inline-block;
|
||||
transition: all 0.2s ease-in;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
color: #090909;
|
||||
padding: 0.7em 1.7em;
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
border-radius: 0.5em;
|
||||
background: #e8e8e8;
|
||||
border: 1px solid #e8e8e8;
|
||||
box-shadow: 6px 6px 12px #c5c5c5, -6px -6px 12px #ffffff;
|
||||
}
|
||||
|
||||
.button2:active {
|
||||
color: #666;
|
||||
box-shadow: inset 4px 4px 12px #c5c5c5, inset -4px -4px 12px #ffffff;
|
||||
}
|
||||
|
||||
.button2:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) scaleY(1) scaleX(1.25);
|
||||
top: 100%;
|
||||
width: 140%;
|
||||
height: 180%;
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.button2:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 55%;
|
||||
transform: translateX(-50%) scaleY(1) scaleX(1.45);
|
||||
top: 180%;
|
||||
width: 160%;
|
||||
height: 190%;
|
||||
background-color: #009087;
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.button2:hover {
|
||||
color: #ffffff;
|
||||
border: 1px solid #009087;
|
||||
}
|
||||
|
||||
.button2:hover:before {
|
||||
top: -35%;
|
||||
background-color: #009087;
|
||||
transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
|
||||
}
|
||||
|
||||
.button2:hover:after {
|
||||
top: -45%;
|
||||
background-color: #009087;
|
||||
transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
|
||||
}
|
||||
|
||||
.cookie-card {
|
||||
max-width: 160px;
|
||||
max-height: 400px;
|
||||
padding: 1rem;
|
||||
background-color: #fff8f8;
|
||||
border-radius: 10px;
|
||||
box-shadow: 20px 20px 30px rgba(0, 0, 0, .05);
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: 600;
|
||||
font-size: 30px;
|
||||
font-family: 'Arial', sans-serif;
|
||||
color: rgb(31 41 55);
|
||||
}
|
||||
|
||||
.description {
|
||||
margin-top: 1rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
color: rgb(75 85 99);
|
||||
}
|
||||
|
||||
.description1 {
|
||||
margin-top: 1rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
color: rgb(31 41 55);
|
||||
}
|
||||
|
||||
.description a {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(59 130 246);
|
||||
}
|
||||
|
||||
.description a:hover {
|
||||
-webkit-text-decoration-line: underline;
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 1rem;
|
||||
-moz-column-gap: 1rem;
|
||||
column-gap: 1rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.pref {
|
||||
font-size: 0.75rem;
|
||||
line-height: 1rem;
|
||||
color: rgb(31 41 55 );
|
||||
-webkit-text-decoration-line: underline;
|
||||
text-decoration-line: underline;
|
||||
transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.pref:hover {
|
||||
color: rgb(156 163 175);
|
||||
}
|
||||
|
||||
.pref:focus {
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.accept {
|
||||
font-size: 0.75rem;
|
||||
line-height: 1rem;
|
||||
background-color: rgb(17 24 39);
|
||||
font-weight: 500;
|
||||
border-radius: 0.5rem;
|
||||
color: #fff;
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
padding-top: 0.625rem;
|
||||
padding-bottom: 0.625rem;
|
||||
border: none;
|
||||
transition: all .15s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.accept:hover {
|
||||
background-color: rgb(55 65 81);
|
||||
}
|
||||
|
||||
.accept:focus {
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="cookie-card">
|
||||
<span class="title">呼吸系统药</span>
|
||||
</div>
|
||||
<h1></h1>
|
||||
<button class="button2" onclick="pose()">呼吸系统药品</button>
|
||||
<h1></h1>
|
||||
<table id="huxi">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>药名</th>
|
||||
<th>药品公司</th>
|
||||
<th>药品公司联系电话</th>
|
||||
<th>价格</th>
|
||||
<th>库存</th>
|
||||
<th>进价</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
</body>
|
||||
|
||||
<script>
|
||||
function pose(){
|
||||
const requestBody = {wenti:11,name:"陈永杭"};
|
||||
fetch('http://localhost:3000', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json' // 设置请求头为JSON
|
||||
},
|
||||
body: JSON.stringify(requestBody) // 将请求体转换为JSON字符串
|
||||
})
|
||||
.then(response =>
|
||||
response.json())
|
||||
.then(data => {
|
||||
cuizaied = data;
|
||||
console.log(data);
|
||||
var table = document.getElementById("huxi");
|
||||
for (ii=1;ii<table.rows.length;ii++){
|
||||
var ia = table.rows[ii];
|
||||
ia.innerHTML = '';
|
||||
}
|
||||
|
||||
|
||||
for (i=0;i<data.length;i++){
|
||||
console.log(data[i]);
|
||||
var row = table.insertRow();
|
||||
var cell1 = row.insertCell(0);
|
||||
cell1.innerHTML = data[i].name;
|
||||
var cell2 = row.insertCell(1);
|
||||
cell2.innerHTML = data[i].company;
|
||||
var cell3 = row.insertCell(2);
|
||||
cell3.innerHTML = data[i].phonenumber;
|
||||
var cell4 = row.insertCell(3);
|
||||
cell4.innerHTML = data[i].price;
|
||||
var cell5 = row.insertCell(4);
|
||||
cell5.innerHTML = data[i].amount;
|
||||
var cell6 = row.insertCell(5);
|
||||
cell6.innerHTML = data[i].purprice;
|
||||
}
|
||||
|
||||
|
||||
// }
|
||||
}) // 打印服务器返回的数据
|
||||
.catch(error => console.error('Error:', error)); // 捕获并打印错误信息
|
||||
|
||||
}
|
||||
pose();
|
||||
</script>
|
||||
|
||||
</html>
|
||||
|
Before Width: | Height: | Size: 698 KiB |
Loading…
Reference in new issue