<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小模盒</title>
<link crossorigin="" rel="shortcut icon" type="image/x-icon" href="./picture/home/favicon.ico">
</head>
<script type="text/javascript" src="./js/jquery-3.7.1.min.js"></script>
<script type="text/javascript" src="./js/layout.js"></script>
<style type="text/css">
@import url("./css/main.css");
@import url("./css/layout.css");
.nav-tf-flex .head-br:nth-of-type(3) span{
width: 30px;
height: 1px;
border-bottom:1px solid #F4A63A;
}
.nav-tf-flex .head-br:nth-of-type(3) a{
color:#F4A63A;
}
.xmh-box1{
}
.xmh-box2{
display: flex;
justify-content: center; /*垂直居中*/
align-items: center; /*水平居中 */
flex-direction: column; /*轴方向*/
flex-wrap: nowrap; /*换行*/
/* width: 1200px; */
/* height: 300px; */
margin-top: 100px;
}
.xmh-box3{
display: flex;
justify-content: center; /*垂直居中*/
align-items: center; /*水平居中 */
flex-direction: initial; /*轴方向*/
flex-wrap: nowrap; /*换行*/
width: 1200px;
height: 482px;
background: linear-gradient(270deg, #FFFEFC 0%, #FFF3E2 100%);
border-radius: 16px;
margin-top: 100px;
}
.xmh-box3-le{
display: flex;
justify-content: center; /*垂直居中*/
align-items: center; /*水平居中 */
flex-direction: column; /*轴方向*/
flex-wrap: nowrap; /*换行*/
flex: 3;
}
.xmh-box3-le-ft1{
width: 630px;
height: 59px;
font-size: 42px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #010101;
line-height: 59px;
}
.xmh-box3-le-ft2{
width: 324px;
height: 50px;
font-size: 36px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #666666;
line-height: 50px;
}
.xmh-box3-rt{
flex: 1;
}
.xmh-box4{
display: flex;
justify-content: center; /*垂直居中*/
align-items: center; /*水平居中 */
flex-direction: column; /*轴方向*/
flex-wrap: nowrap; /*换行*/
margin-top: 100px;
}
.xmh-box5-fa {
}
.xmh-box5{
display: flex;
justify-content: center; /*垂直居中*/
align-items: center; /*水平居中 */
flex-direction: initial; /*轴方向*/
flex-wrap: nowrap; /*换行*/
width: 1100px;
height: 464px;
text-align: center;
background: #FFF3E2;
border-radius: 16px;
padding: 0 50px;
margin-top: 100px;
}
.xmh-box5-cl{
display: flex;
justify-content: center; /*垂直居中*/
align-items: center; /*水平居中 */
flex-direction: column; /*轴方向*/
flex-wrap: nowrap; /*换行*/
width: auto;
flex: 1;
}
.xmh-box5-cl-ft{
width: 188px;
height: 44px;
font-size: 16px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #333333;
line-height: 22px;
/* text-indent: 1em; */
margin-top: 20px;
}
.xmh-box6{
display: flex;
justify-content: center; /*垂直居中*/
align-items: center; /*水平居中 */
flex-direction: initial; /*轴方向*/
flex-wrap: nowrap; /*换行*/
width: 1200px;
text-align: center;
height: auto;
margin-top: 100px;
margin-bottom: 100px;
}
.xmh-box6-img{
/* border: 2px dashed #d8d8d8; */
width: 120px;
height: 120px;
}
.xmh-box6-line{
flex: 1;
display: flex;
justify-content: center; /*垂直居中*/
align-items: center; /*水平居中 */
flex-direction: column; /*轴方向*/
flex-wrap: nowrap; /*换行*/
}
.xmh-box6-ft{
width: 280px;
height: 56px;
font-size: 20px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #000000;
line-height: 28px;
margin-top: 10px;
}
.tle-ft{
width: 434px;
height: 70px;
font-size: 50px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #010101;
line-height: 70px;
}
.right-img {
width: 31px;
height: 9px;
}
@keyframes blink {
0% {opacity: 1.0;}
50% {opacity: 0.0;}
100% {opacity: 1.0;}
}
.right-img img {
animation: blink 1s linear infinite;
}
</style>
<body>
<header></header>
<main class="m-flex-m">
<div class="xmh-box1">
<img src="./picture/xmh/tyx.png" style="width: 1920px;
height: 570px;">
</div>
<div class="xmh-box2">
<img src="./picture/xmh/MAGIC BOX.png">
<div class="tle-ft re-img">
定制手办 线上预览
</div>
</div>
<div class="xmh-box3">
<div class="xmh-box3-le">
<span class="xmh-box3-le-ft1">上传照片即可查看你的定制化手办</span>
<span class="xmh-box3-le-ft2">拖曳图片全方位查看</span>
</div>
<div class="xmh-box3-rt">
<img src="./picture/xmh/位图备份.png">
</div>
</div>
<div class="xmh-box4">
<img src="./picture/xmh/MAGIC BOX.png">
<div class="re-img">
<span class="tle-ft">简单操作获得定制手办</span>
</div>
</div>
<div class="xmh-box5-fa">
<div class="xmh-box5">
<div class="xmh-box5-cl">
<img src="./picture/xmh/矩形.png">
<p class="xmh-box5-cl-ft">
<span >选择一个身体模板</span>
<br>
<span>并上传一张正面人脸照</span>
</p>
</div>
<div class="right-img">
<img src="./picture/xmc/编组%203备份%205.png" alt="">
</div>
<div class="xmh-box5-cl">
<img src="./picture/xmh/编组 5.png">
<p class="xmh-box5-cl-ft">
<span >设计师进行3D人脸建模</span>
<br>
<span>还原照片真人人脸</span>
</p>
</div>
<div class="right-img">
<img src="./picture/xmc/编组%203备份%205.png" alt="">
</div>
<div class="xmh-box5-cl">
<img src="./picture/xmh/矩形备份 2.png">
<p class="xmh-box5-cl-ft">
<span >与您确认3D可视化效果图</span>
<br>
<span>直至满意</span>
</p>
</div>
<div class="right-img">
<img src="./picture/xmc/编组%203备份%205.png" alt="">
</div>
<div class="xmh-box5-cl">
<img src="./picture/xmh/矩形备份 3.png">
<p class="xmh-box5-cl-ft">
<span >3D全彩打印摆件成品</span>
<br>
<span>包装并邮寄</span>
</p>
</div>
</div>
</div>
<div class="xmh-box6">
<div class="xmh-box6-line">
<div class="xmh-box6-img">
<img src="./picture/xmh/编组 9.png">
</div>
<span class="xmh-box6-ft">为消费者提供脸部风格化建模、 3D打印定制手办服务</span>
</div>
<div class="xmh-box6-line" style="border-left: 2px solid #d8d8d8;border-right: 2px solid#d8d8d8;">
<div class="xmh-box6-img">
<img src="./picture/xmh/编组 10.png">
</div>
<span class="xmh-box6-ft">为消费者提供多种类型手办模板</span>
</div>
<div class="xmh-box6-line">
<div class="xmh-box6-img">
<img src="./picture/xmh/编组 11.png">
</div>
<span class="xmh-box6-ft">致力于帮助消费者发现个性化、 有趣的生活方式</span>
</div>
</div>
</main>
<footer></footer>
</body>
<script>
</script>
</html>