<!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> <style> html,body{ margin: 0; padding: 0; } div{ box-sizing: border-box; } .box{ /* width: 294px; height: 387px; */ width: 1176px; height: 1548px; background-color: #fff; padding: 100px 64px 64px 60px; border-radius: 16px; border: 1px solid #ECECEC; background-image: url('https://hzchart.oss-cn-shanghai.aliyuncs.com/static/icon/hzyb/yb-bg-hzlogo.png'); background-position: top right; background-size: 336px 336px; background-repeat: no-repeat; } .title{ font-size: 64px; font-weight: bold; margin-bottom: 20px; } .flex{ height: 256px; margin-top: 40px; font-size: 56px; } .content-box{ height: 832px; margin: 40px 0; overflow: hidden; font-size: 56px; } .item{ background: #FFFFFF; box-shadow: 0px 0px 40px 1px rgba(0,0,0,0.08); border-radius: 24px; border: 1px solid #E6E6E6; padding: 48px 60px; height: 380px; margin-bottom: 40px; position: relative; overflow: hidden; } .avatar{ width: 284px; height: 284px; border-radius: 50%; background-color: #f5f5f5; float: left; margin-right: 32px; object-fit: cover; display: block; } .item-con{ overflow: hidden; margin-top: 28px; } .item-con .name{ font-size: 52px; font-weight: bold; padding-bottom: 32px; border-bottom: 1px solid #E6E6E6; margin-bottom: 36px; } .text-one{ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .user-tag{ background-color: #FAF7EE; max-width: 420px; font-size: 40px; padding: 8px 24px; line-height: 1; display: inline-block; box-sizing: border-box; border-radius: 36px; padding-left: 80px; position: relative; } .user-tag::before{ content: ''; display: block; background-color: #ccc; position: absolute; left: 24px; top: 12px; width: 40px; height: 40px; background-image: url('https://hzchart.oss-cn-shanghai.aliyuncs.com/static/icon/hzyb/yb-bg-hzlogo.png'); background-size: cover; } .stage{ position: absolute; top: 0; right: 0; background-color: #E3B377; color: #fff; font-size: 40px; display: block; padding: 8px 32px; border-bottom-left-radius: 32px; border-top-right-radius: 24px; } .xcx-img{ width: 256px; height: 256px; float: right; } p,span{ margin: 0 !important; padding: 0 !important; } </style> </head> <body> <div class="box"> <div class="title">{{LIST_TITLE}}</div> <div class="content-box"> <div class="item"> <span class="stage">{{STAGE_1}}</span> <img class="avatar" src="{{AVATAR_1}}" alt=""> <div class="item-con"> <div class="text-one name">{{TITLE_1}}</div> <div> <span style="font-size: 44px;">{{AUTHOR_1}}</span> <span class="text-one" style="width: 400px;font-size: 44px;display: inline-block;margin-left: 20px;position: relative;">{{TAG_1}}</span> </div> </div> </div> <div class="item"> <span class="stage">{{STAGE_2}}</span> <img class="avatar" src="{{AVATAR_2}}" alt=""> <div class="item-con"> <div class="text-one name">{{TITLE_2}}</div> <div> <span style="font-size: 44px;">{{AUTHOR_2}}</span> <span class="text-one" style="width: 400px;font-size: 44px;display: inline-block;margin-left: 20px;position: relative;">{{TAG_2}}</span> </div> </div> </div> </div> <div style="text-align:center;font-size:56px;color:#999">长按图片分享</div> <div class="flex"> <div style="float: left;margin-top: 65px;"> <div>长按识别小程序码</div> <div style="color:#999;margin-top: 20px;">查看更多</div> </div> <img class="xcx-img" src="{{SUN_CODE}}" alt=""> </div> </div> </body> </html>