parent
809b763448
commit
bcbd3b221b
@ -0,0 +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>
|
||||||
|
|
||||||
|
</html>
|
||||||
Loading…
Reference in new issue