Files
ClassContent/历届学生/front-end-team-11/项目开发/学生项目/贡婉宝/得到/page/mannequin.html
2024-09-27 02:06:13 +08:00

118 lines
3.1 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/utils/rem.js"></script>
<link rel="stylesheet" href="https://at.alicdn.com/t/c/font_2124975_ogwnuct6mbe.css">
<link rel="stylesheet" href="../css/public/hea.css">
<link rel="stylesheet" href="../css/page/mannequin.css">
<style>
.center{
display: flex;
width: 100%;
margin-top: 1.1rem;
flex-wrap: wrap;
align-items: center;
}
.center li{
width: 25%;
flex-shrink: 0;
margin-bottom: 0.3rem;
}
.center li a{
display: flex;
align-items: center;
flex-direction: column;
}
.center li a .center_div{
width: 1.1256rem;
position: relative;
}
.center li a .center_div img{
width: 100%;
height: 100%;
border-radius: 100%;
}
.center li a .center_div>div{
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
background-color: #6969698c;
color: #fff;
padding: .002rem;
width: 0.5rem;
height: .2rem;
text-align: center;
padding: .03rem 0;
border-radius: 0.11rem;
}
.center li a .center_div>div p{
font-size: var(--f12);
zoom: 0.7;
}
.center_div1{
font-size: var(--f12);
zoom: 0.85;
margin-top: .1rem;
color: dimgrey;
}
</style>
</head>
<!-- 模特页面 -->
<body>
<ul class="center">
</ul>
</body>
<script src="../js/config/index.js"></script>
<script src="../js/http/index.js"></script>
<script src="../js/serve/index.js"></script>
<script src="../js/utils/index.js"></script>
<script>
class mannequin {
constructor() {
footer()
this.allModel();
header("模特")
}
async allModel() {
let allModel = await indexserve.allModel();
console.log(allModel)
$(".center").html(`
${
allModel.result.map(v=>{
return `
<li>
<a href="./Modeldetails.html?id=${v.id}&page=1">
<div class="center_div">
<img src=${v.img}>
<div><p>${v.shengao}套</p></div>
</div>
<div class="center_div1">${v.title}</div>
</a>
</li>
`
})
}
`)
}
}
new mannequin()
</script>
</html>