<!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; } p,span{ margin: 0; padding: 0; } .box{ /* width: 294px; height: 338px; */ width: 1176px; height: 1352px; 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: 40px; } .content-box{ height: 656px; margin-bottom: 20px; } .content-box .item{ width: 500px; height: 560px; background: #FFFFFF; box-shadow: 0px 0px 24px 0px rgba(154,141,123,0.16); border-radius: 16px; margin: 40px 0px; padding: 40px; float: left; position: relative; } .content-box .item-title{ display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 48px; } .content-box .item-img{ width: 420px; height: 320px; object-fit: cover; position: absolute; left: 40px; bottom: 40px; } .flex{ height: 256px; margin-top: 40px; font-size: 56px; } .xcx-img{ width: 256px; height: 256px; float: right; } </style> </head> <body> <div class="box"> <div class="title">{{LIST_TITLE}}</div> <div class="content-box"> <div class="item"> <div class="item-title">{{TITLE_1}}</div> <img class="item-img" src="{{IMG_1}}" alt=""> </div> <div class="item" style="float: right;"> <div class="item-title">{{TITLE_2}}</div> <img class="item-img" src="{{IMG_2}}" alt=""> </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>