parent
167b07af5d
commit
5f08ef76d0
@ -0,0 +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>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in new issue