海报适配模板

controller/public.go

@@ -6,6 +6,7 @@ import (
 	"hongze/hongze_yb/controller/response"
 	"hongze/hongze_yb/global"
 	"hongze/hongze_yb/logic"
+	"hongze/hongze_yb/models/tables/yb_suncode_pars"
 	"hongze/hongze_yb/services"
 	"hongze/hongze_yb/utils"
 	"os"
@@ -111,13 +112,27 @@ func GetSharePoster(c *gin.Context) {
 		return
 	}
 	response.OkData("获取成功", imgUrl, c)
+}
 
-	//picByte, err := wx_app.GetSunCode("", "")
-	//if err != nil {
-	//	fmt.Println(err.Error())
-	//	return
-	//}
-	//c.Header("Content-Type", "image/png")
-	//c.Header("Content-Disposition", fmt.Sprintf("inline; filename=\"%s\"", "图片地址"))
-	//c.Writer.WriteString(string(picByte))
+// GetSuncodeScene 获取小程序太阳码scene值
+// @Tags 公共模块
+// @Summary  获取小程序太阳码scene值
+// @Description 获取小程序太阳码scene值
+// @Security ApiKeyAuth
+// @Param Authorization	header string true "Bearer 31a165baebe6dec616b1f8f3207b4273"
+// @Param scene_key query string true "scene_key值"
+// @Success 200 {string} string "获取成功"
+// @failure 400 {string} string "获取失败"
+// @Router /public/get_suncode_scene [get]
+func GetSuncodeScene(c *gin.Context) {
+	reqKey := c.DefaultQuery("scene_key", "")
+	if reqKey == "" {
+		response.Fail("参数有误", c)
+	}
+	pars, err := yb_suncode_pars.GetSceneByKey(reqKey)
+	if err != nil {
+		response.FailMsg("解析参数失败", "GetSuncodeScene获取参数失败", c)
+		return
+	}
+	response.OkData("获取成功", pars.Scene, c)
 }

models/tables/yb_suncode_pars/query.go

@@ -0,0 +1,18 @@
+package yb_suncode_pars
+
+import (
+	"hongze/hongze_yb/global"
+)
+
+func (item *YbSuncodePars) Create() (err error) {
+	err = global.DEFAULT_MYSQL.Create(item).Error
+	return
+}
+
+// GetSceneByKey 获取太阳码参数
+func GetSceneByKey(marks string) (item *YbSuncodePars, err error) {
+	err = global.DEFAULT_MYSQL.Model(YbSuncodePars{}).
+		Where("marks = ?", marks).
+		First(&item).Error
+	return
+}

models/tables/yb_suncode_pars/yb_suncode_pars.go

@@ -0,0 +1,31 @@
+package yb_suncode_pars
+
+import (
+	"time"
+)
+
+// YbSuncodePars 小程序太阳码scene参数
+type YbSuncodePars struct {
+	ID         uint32    `gorm:"primaryKey;column:id;type:int(10) unsigned;not null" json:"-"`
+	Scene      string    `gorm:"column:scene;type:varchar(255);not null;default:''" json:"scene"` // scene参数
+	Key        string    `gorm:"column:key;type:varchar(32);not null;default:''" json:"key"`      // MD5值
+	CreateTime time.Time `gorm:"column:create_time;type:datetime;default:CURRENT_TIMESTAMP" json:"createTime"`
+}
+
+// TableName get sql table name.获取数据库表名
+func (m *YbSuncodePars) TableName() string {
+	return "yb_suncode_pars"
+}
+
+// YbSuncodeParsColumns get sql column name.获取数据库列名
+var YbSuncodeParsColumns = struct {
+	ID         string
+	Scene      string
+	Key        string
+	CreateTime string
+}{
+	ID:         "id",
+	Scene:      "scene",
+	Key:        "key",
+	CreateTime: "create_time",
+}

routers/public.go

@@ -24,5 +24,6 @@ func initPublic(r *gin.Engine) {
 		rGroup.GET("/get_apply_variety_list", controller.GetApplyVarietyList)
 		rGroup.POST("/upload", controller.Upload)
 		rGroup.POST("/get_share_poster", controller.GetSharePoster)
+		rGroup.GET("/get_suncode_scene", controller.GetSuncodeScene)
 	}
 }

services/share_poster.go

@@ -6,6 +6,7 @@ import (
 	"fmt"
 	"hongze/hongze_yb/global"
 	"hongze/hongze_yb/models/tables/yb_poster_resource"
+	"hongze/hongze_yb/models/tables/yb_suncode_pars"
 	"hongze/hongze_yb/services/wx_app"
 	"hongze/hongze_yb/utils"
 	"io/ioutil"
@@ -33,6 +34,10 @@ func CreatePosterFromSource(codePage, codeScene, source, version, pars string) (
 			go SendEmail(utils.APPNAME+"【"+global.CONFIG.Serve.RunMode+"】"+"失败提醒", "生成分享海报失败, "+errMsg+", CreatePosterFromSource: "+err.Error(), utils.EmailSendToUsers)
 		}
 	}()
+	if codePage == "" || codeScene == "" || source == "" || pars == "" {
+		errMsg = "参数有误"
+		return
+	}
 	path := fmt.Sprint(codePage, "?", codeScene)
 	// 获取海报, 无海报则生成
 	poster, err := yb_poster_resource.GetPosterByCondition(path, "poster", version)
@@ -45,18 +50,28 @@ func CreatePosterFromSource(codePage, codeScene, source, version, pars string) (
 	}
 	// 图片长宽
 	heightMap := map[string]int{
-		"chapter_detail": 370,
-		"chapter_list":   369,
-		"chart_detail":   1536,
-		//"chart_detail":   381,
-		"chart_list":     338,
-		"report_detail":  355,
-		"report_list":    369,
-	}
-	//width := 294
-	width := 1176
+		"activity_detail": 1210,
+		"activity_list":   1948,
+		"chapter_detail":  1480,
+		"chapter_list":    1548,
+		"chart_detail":    1536,
+		"chart_list":      1352,
+		"report_detail":   1420,
+		"report_list":     1344,
+	}
+	widthMap := map[string]int{
+		"activity_detail": 1280,
+		"activity_list":   1280,
+		"chapter_detail":  1176,
+		"chapter_list":    1176,
+		"chart_detail":    1176,
+		"chart_list":      1176,
+		"report_detail":   1176,
+		"report_list":     1176,
+	}
+	width := widthMap[source]
 	height := heightMap[source]
-	if height == 0 {
+	if width == 0 || height == 0 {
 		errMsg = "图片长度有误"
 		err = errors.New(errMsg)
 		return "", err
@@ -67,24 +82,15 @@ func CreatePosterFromSource(codePage, codeScene, source, version, pars string) (
 		return
 	}
 	// 填充html内容
-	reqContent := ""
-	switch source {
-	case "chart_detail":
-		if reqContent, err = FillContent2ChartDetailHtml(pars, sunCodeUrl); err != nil {
-			return
-		}
-	default:
-		err = errors.New("来源有误")
-		return
-	}
-	if reqContent == "" {
+	contentStr, err := fillContent2Html(source, pars, sunCodeUrl)
+	if err != nil {
 		errMsg = "html内容有误"
 		err = errors.New(errMsg)
 		return
 	}
 	// 请求python服务htm2img
 	htm2ImgReq := make(map[string]interface{})
-	htm2ImgReq["html_content"] = reqContent
+	htm2ImgReq["html_content"] = contentStr
 	htm2ImgReq["width"] = width
 	htm2ImgReq["height"] = height
 	res, err := postHtml2Img(htm2ImgReq)
@@ -110,34 +116,6 @@ func CreatePosterFromSource(codePage, codeScene, source, version, pars string) (
 	return
 }
 
-// ChartDetailPosterReq 图标详情页海报动态信息
-type ChartDetailPosterReq struct {
-	ChartInfoId int    `json:"chart_info_id"`
-	ChartName   string `json:"chart_name"`
-	ChartImage  string `json:"chart_image"`
-}
-
-// 生成html文本-图表详情页
-func FillContent2ChartDetailHtml(pars, sunCodeUrl string) (contentStr string, err error) {
-	// 解析html填充的参数
-	params := new(ChartDetailPosterReq)
-	if err = json.Unmarshal([]byte(pars), &params); err != nil {
-		return
-	}
-	// 获取模板内容
-	demoPath := "static/htm2img/chart_detail.html"
-	contentByte, err := ioutil.ReadFile(demoPath)
-	if err != nil {
-		return
-	}
-	// 替换模板内容
-	contentStr = string(contentByte)
-	contentStr = strings.ReplaceAll(contentStr, "{{CHART_NAME}}", params.ChartName)
-	contentStr = strings.ReplaceAll(contentStr, "{{CHART_IMAGE}}", params.ChartImage)
-	contentStr = strings.ReplaceAll(contentStr, "{{SUN_CODE}}", sunCodeUrl)
-	return
-}
-
 type Html2ImgResp struct {
 	Code int    `json:"code"`
 	Msg  string `json:"msg"`
@@ -203,9 +181,9 @@ func CreateAndUploadSunCode(page, scene, version string) (imgUrl string, err err
 	if exist != nil && exist.ImgURL != "" {
 		return exist.ImgURL, nil
 	}
-	// 参数超过32位会生成失败，md5处理至32位
-	scene = utils.MD5(scene)
-	picByte, err := wx_app.GetSunCode(page, scene)
+	// scene超过32位会生成失败，md5处理至32位
+	sceneMD5 := utils.MD5(scene)
+	picByte, err := wx_app.GetSunCode(page, sceneMD5)
 	if err != nil {
 		return
 	}
@@ -239,5 +217,156 @@ func CreateAndUploadSunCode(page, scene, version string) (imgUrl string, err err
 		CreateTime: time.Now(),
 	}
 	err = newPoster.Create()
+	if err != nil {
+		return
+	}
+	// 记录参数md5
+	newPars := &yb_suncode_pars.YbSuncodePars{
+		Scene:      scene,
+		Key:        sceneMD5,
+		CreateTime: time.Now(),
+	}
+	err = newPars.Create()
 	return
-}
+}
+
+type PosterParsReq struct {
+	ActivityTitle   string `json:"activity_title"`
+	ActivitySpeaker string `json:"activity_speaker"`
+	ActivityTime    string `json:"activity_time"`
+	ChartName       string `json:"chart_name"`
+	ChartImage      string `json:"chart_image"`
+	ReportType      string `json:"report_type"`
+	ReportAvatar    string `json:"report_avatar"`
+	ReportTitle     string `json:"report_title"`
+	ReportAbstract  string `json:"report_abstract"`
+	Stage1          string `json:"stage_1"`
+	Avatar1         string `json:"avatar_1"`
+	Title1          string `json:"title_1"`
+	Author1         string `json:"author_1"`
+	Tag1            string `json:"tag_1"`
+	Img1            string `json:"img_1"`
+	Time1           string `json:"time_1"`
+	Abstract1       string `json:"abstract_1"`
+	Status1         string `json:"status_1"`
+	Speaker1        string `json:"speaker_1"`
+	Stage2          string `json:"stage_2"`
+	Avatar2         string `json:"avatar_2"`
+	Title2          string `json:"title_2"`
+	Author2         string `json:"author_2"`
+	Tag2            string `json:"tag_2"`
+	Img2            string `json:"img_2"`
+	Abstract2       string `json:"abstract_2"`
+	Time2           string `json:"time_2"`
+	Status2         string `json:"status_2"`
+	Speaker2        string `json:"speaker_2"`
+	ListTitle       string `json:"list_title"`
+}
+
+// fillContent2Html 填充HTML动态内容
+func fillContent2Html(source string, pars, sunCodeUrl string) (contentStr string, err error) {
+	params := new(PosterParsReq)
+	if err = json.Unmarshal([]byte(pars), &params); err != nil {
+		return
+	}
+	template := fmt.Sprint("static/htm2img/", source, ".html")
+	contentByte, err := ioutil.ReadFile(template)
+	if err != nil {
+		return
+	}
+	contentStr = string(contentByte)
+	// TODO:列表的动态内容不完整的用默认内容的填充
+	if strings.Contains(source, "list") {
+		if params.Title1 == "" || params.Title2 == "" {
+			params = &PosterParsReq{
+
+			}
+		}
+	}
+	// 填充指定内容
+	switch source {
+	case "activity_detail":
+		contentStr = strings.Replace(contentStr, "{{ACTIVITY_TITLE}}", params.ActivityTitle, 1)
+		contentStr = strings.Replace(contentStr, "{{ACTIVITY_SPEAKER}}", params.ActivitySpeaker, 1)
+		contentStr = strings.Replace(contentStr, "{{ACTIVITY_TIME}}", params.ActivityTime, 1)
+	case "chapter_detail":
+		contentStr = strings.Replace(contentStr, "{{REPORT_AVATAR}}", params.ReportAvatar, 1)
+		contentStr = strings.Replace(contentStr, "{{REPORT_TITLE}}", params.ReportTitle, 1)
+		contentStr = strings.Replace(contentStr, "{{REPORT_ABSTRACT}}", params.ReportAbstract, 1)
+	case "chart_detail":
+		contentStr = strings.Replace(contentStr, "{{CHART_NAME}}", params.ChartName, 1)
+		contentStr = strings.Replace(contentStr, "{{CHART_IMAGE}}", params.ChartImage, 1)
+	case "report_detail":
+		contentStr = strings.Replace(contentStr, "{{REPORT_TYPE}}", params.ReportType, 1)
+		contentStr = strings.Replace(contentStr, "{{REPORT_TITLE}}", params.ReportTitle, 1)
+		contentStr = strings.Replace(contentStr, "{{REPORT_ABSTRACT}}", params.ReportAbstract, 1)
+	case "chapter_list":
+		contentStr = strings.Replace(contentStr, "{{LIST_TITLE}}", params.ListTitle, 1)
+		contentStr = strings.Replace(contentStr, "{{STAGE_1}}", params.Stage1, 1)
+		contentStr = strings.Replace(contentStr, "{{AVATAR_1}}", params.Avatar1, 1)
+		contentStr = strings.Replace(contentStr, "{{TITLE_1}}", params.Title1, 1)
+		contentStr = strings.Replace(contentStr, "{{AUTHOR_1}}", params.Author1, 1)
+		contentStr = strings.Replace(contentStr, "{{TAG_1}}", params.Tag1, 1)
+		contentStr = strings.Replace(contentStr, "{{STAGE_2}}", params.Stage2, 1)
+		contentStr = strings.Replace(contentStr, "{{AVATAR_2}}", params.Avatar2, 1)
+		contentStr = strings.Replace(contentStr, "{{TITLE_2}}", params.Title2, 1)
+		contentStr = strings.Replace(contentStr, "{{AUTHOR_2}}", params.Author2, 1)
+		contentStr = strings.Replace(contentStr, "{{TAG_2}}", params.Tag2, 1)
+	case "chart_list":
+		contentStr = strings.Replace(contentStr, "{{LIST_TITLE}}", params.ListTitle, 1)
+		contentStr = strings.Replace(contentStr, "{{TITLE_1}}", params.Title1, 1)
+		contentStr = strings.Replace(contentStr, "{{IMG_1}}", params.Img1, 1)
+		contentStr = strings.Replace(contentStr, "{{TITLE_2}}", params.Title2, 1)
+		contentStr = strings.Replace(contentStr, "{{IMG_2}}", params.Img2, 1)
+	case "report_list":
+		contentStr = strings.Replace(contentStr, "{{LIST_TITLE}}", params.ListTitle, 1)
+		contentStr = strings.Replace(contentStr, "{{TITLE_1}}", params.Title1, 1)
+		contentStr = strings.Replace(contentStr, "{{ABSTRACT_1}}", params.Abstract1, 1)
+		contentStr = strings.Replace(contentStr, "{{IMG_1}}", params.Img1, 1)
+		contentStr = strings.Replace(contentStr, "{{TIME_1}}", params.Time1, 1)
+		contentStr = strings.Replace(contentStr, "{{TITLE_2}}", params.Title2, 1)
+		contentStr = strings.Replace(contentStr, "{{ABSTRACT_2}}", params.Abstract2, 1)
+		contentStr = strings.Replace(contentStr, "{{IMG_2}}", params.Img2, 1)
+		contentStr = strings.Replace(contentStr, "{{TIME_2}}", params.Time2, 1)
+	case "activity_list":
+		bgColorMap := map[string]string{
+			"未开始": "#3385FF",
+			"进行中": "#A2A2A2",
+			"已结束": "#E3B377",
+		}
+		statusItemMap := map[string]string{
+			"未开始": "block",
+			"进行中": "none",
+			"已结束": "none",
+		}
+		offlineMap := map[string]string{
+			"线上会议": "block",
+			"线下沙龙": "none",
+		}
+		onlineMap := map[string]string{
+			"线上会议": "none",
+			"线下沙龙": "block",
+		}
+		contentStr = strings.Replace(contentStr, "{{LIST_TITLE}}", params.ListTitle, 1)
+		contentStr = strings.Replace(contentStr, "{{BG_COLORE_1}}", bgColorMap[params.Status1], 1)
+		contentStr = strings.Replace(contentStr, "{{STATUS_1}}", params.Status1, 1)
+		contentStr = strings.Replace(contentStr, "{{AVATAR_1}}", params.Avatar1, 1)
+		contentStr = strings.Replace(contentStr, "{{TITLE_1}}", params.Title1, 1)
+		contentStr = strings.Replace(contentStr, "{{SPEAKER_1}}", params.Speaker1, 1)
+		contentStr = strings.Replace(contentStr, "{{TIME_1}}", params.Time1, 1)
+		contentStr = strings.Replace(contentStr, "{{SHOW_ITEM_1}}", statusItemMap[params.Status1], 1)
+		contentStr = strings.Replace(contentStr, "{{SHOW_OFFLINE_1}}", offlineMap[params.ListTitle], 1)
+		contentStr = strings.Replace(contentStr, "{{SHOW_ONLINE_1}}", onlineMap[params.ListTitle], 1)
+		contentStr = strings.Replace(contentStr, "{{BG_COLORE_2}}", bgColorMap[params.Status2], 1)
+		contentStr = strings.Replace(contentStr, "{{STATUS_2}}", params.Status2, 1)
+		contentStr = strings.Replace(contentStr, "{{AVATAR_2}}", params.Avatar2, 1)
+		contentStr = strings.Replace(contentStr, "{{TITLE_2}}", params.Title2, 1)
+		contentStr = strings.Replace(contentStr, "{{SPEAKER_2}}", params.Speaker2, 1)
+		contentStr = strings.Replace(contentStr, "{{TIME_2}}", params.Time2, 1)
+		contentStr = strings.Replace(contentStr, "{{SHOW_ITEM_2}}", statusItemMap[params.Status2], 1)
+		contentStr = strings.Replace(contentStr, "{{SHOW_OFFLINE_2}}", statusItemMap[params.ListTitle], 1)
+		contentStr = strings.Replace(contentStr, "{{SHOW_ONLINE_2}}", onlineMap[params.ListTitle], 1)
+	}
+	contentStr = strings.Replace(contentStr, "{{SUN_CODE}}", sunCodeUrl, 1)
+	return
+}

static/htm2img/activity_detail.html

@@ -0,0 +1,83 @@
+<!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: 320px;
+            height: 487px; */
+            width: 1280px;
+            height: 1210px;
+            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: 208px; */
+            margin: 60px 0;
+            overflow: hidden;
+            font-size: 56px;
+        }
+        .avatar{
+            width: 235px;
+            height: 235px;
+            object-fit: cover;
+            border-radius: 50%;
+            overflow: hidden;
+            display: block;
+            margin-left: auto;
+            margin-right: auto;
+        }
+        
+        
+        .xcx-img{
+            width: 256px;
+            height: 256px;
+            float: right;
+        }
+    </style>
+</head>
+<body>
+    <div class="box">
+        <div class="title">{{ACTIVITY_TITLE}}</div>
+        <div class="content-box" style="margin-bottom: 100px;">
+            <img src="" alt="" class="avatar">
+            <div style="font-size: 48px;text-align: center;margin-top: 20px;font-weight: bold;">主讲人：{{ACTIVITY_SPEAKER}}</div>
+            <div style="font-size: 41px;text-align: center;margin-top: 20px;">活动时间：{{ACTIVITY_TIME}}</div>
+        </div>
+        <div style="text-align:center;font-size:56px;color:#999">长按图片分享</div>
+        <div class="flex">
+            <div style="float: left;">
+                <div>长按识别小程序码</div>
+                <div style="color:#999">查看更多</div>
+            </div>
+            <img class="xcx-img" src="{{SUN_CODE}}" alt="">
+        </div>
+    </div>
+</body>
+</html>

static/htm2img/activity_list.html

@@ -14,64 +14,66 @@
             box-sizing: border-box;
         }
         .box{
-            width: 320px;
-            height: 487px;
+            /* width: 320px;
+            height: 487px; */
+            width: 1280px;
+            height: 1948px;
             background-color: #fff;
-            padding: 25px 16px 16px 15px;
-            border-radius: 4px;
+            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: 84px 84px;
+            background-size: 336px 336px;
             background-repeat: no-repeat;
         }
         .title{
-            font-size: 16px;
+            font-size: 64px;
             font-weight: bold;
-            margin-bottom: 5px;
+            margin-bottom: 20px;
         }
         .flex{
-            height: 64px;
-            margin-top: 10px;
-            font-size: 14px;
+            height: 256px;
+            margin-top: 40px;
+            font-size: 56px;
         }
         .content-box{
             /* height: 208px; */
-            margin: 10px 0;
+            margin: 40px 0;
             overflow: hidden;
-            font-size: 14px;
+            font-size: 56px;
         }
         .item{
-            padding-top: 20px;
+            padding-top: 80px;
             /* height: 95px; */
-            margin-bottom: 10px;
+            margin-bottom: 40px;
             position: relative;
             overflow: hidden;
             background: #FFFFFF;
-            box-shadow: 1px 1px 5px 0px rgba(161,161,161,0.14);
-            border-radius: 6px;
+            box-shadow: 1px 1px 20px 0px rgba(161,161,161,0.14);
+            border-radius: 24px;
             border: 1px solid rgba(112, 112, 112, 0.2);
         }
         .avatar{
-            width: 71px;
-            height: 71px;
+            width: 284px;
+            height: 284px;
             border-radius: 50%;
             background-color: #f5f5f5;
             float: left;
-            margin-right: 8px;
+            margin-right: 32px;
             object-fit: cover;
             display: block;
         }
         .item-con{
             overflow: hidden;
-            margin-top: 7px;
+            margin-top: 28px;
         }
         .item-con .name{
-            font-size: 13px;
+            font-size: 52px;
             font-weight: bold;
-            padding-bottom: 8px;
+            padding-bottom: 32px;
             border-bottom: 1px solid #EBEDF0;
-            margin-bottom: 9px;
+            margin-bottom: 36px;
         }
         .text-one{
             overflow: hidden;
@@ -84,77 +86,77 @@
             right: 0;
             background-color: #E3B377;
             color: #fff;
-            font-size: 10px;
+            font-size: 40px;
             display: block;
-            padding: 2px 8px;
-            border-top-right-radius: 6px;
+            padding: 8px 32px;
+            border-top-right-radius: 24px;
         }
         
         
         
         .xcx-img{
-            width: 64px;
-            height: 64px;
+            width: 256px;
+            height: 256px;
             float: right;
         }
     </style>
 </head>
 <body>
     <div class="box">
-        <div class="title">线上会议</div>
+        <div class="title">{{LIST_TITLE}}</div>
         <div class="content-box">
             <div class="item">
-                <!-- 如果是进行中则 background-color:#3385FF  background-color:#A2A2A2 -->
-                <span class="stage" style="background-color: #E3B377;">状态</span>
-                <div style="border-bottom: 1px solid #EBEDF0;padding: 0 12px 15px 12px;">
-                    <img class="avatar" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/static/yb_speaker/yaoxinze.png" alt="">
+                <!-- 如果是进行中则 background-color:#3385FF 已结束 background-color:#A2A2A2 本周预告 #E3B377 -->
+                <span class="stage" style="background-color: {{BG_COLORE_1}};">{{STATUS_1}}</span>
+                <div style="border-bottom: 1px solid #EBEDF0;padding: 0 48px 60px 48px;">
+                    <img class="avatar" src="{{AVATAR_1}}" alt="">
                     <div class="item-con">
-                        <div class="text-one name">聚烯烃双周报</div>
-                        <div style="color: #666;font-size: 12px;">主讲：姚昕泽</div>
-                        <div style="font-size: 10px;color: #999;margin-top: 5px;">2022-04-30 15:30-16:00 星期六</div>
+                        <div class="text-one name">{{TITLE_1}}</div>
+                        <div style="color: #666;font-size: 48px;">主讲：{{SPEAKER_1}}</div>
+                        <div style="font-size: 40px;color: #999;margin-top: 20px;">{{TIME_1}}</div>
                     </div>
                 </div>
                 <!-- 如果非预告则下面style 加上 display:none -->
-                <div>
+                <div style="display: {{SHOW_ITEM_1}}" >
                     <!-- 如果是线下沙龙则设置 display:none -->
-                    <div style="text-align: center;color: #E3B377;font-size: 11px;line-height: 28px;display: none;">会议提醒</div>
+                    <div style="text-align: center;color: #E3B377;font-size: 44px;line-height: 112px;display: {{SHOW_OFFLINE_1}};">会议提醒</div>
                     <!-- 如果是线上会议则设置 display:none -->
-                    <div>
-                        <div style="text-align: center;color: #E3B377;font-size: 11px;line-height: 28px;float: left;width: 50%;border-right: 1px solid #EBEDF0;">会议提醒</div>
-                        <div style="text-align: center;color: #E3B377;font-size: 11px;line-height: 28px;float: left;width: 50%;">报名线下参会</div>
+                    <div style="display: {{SHOW_ONLINE_1}}" >
+                        <div style="text-align: center;color: #E3B377;font-size: 44px;line-height: 112px;float: left;width: 50%;border-right: 1px solid #EBEDF0;">会议提醒</div>
+                        <div style="text-align: center;color: #E3B377;font-size: 44px;line-height: 112px;float: left;width: 50%;">报名线下参会</div>
                     </div>
                 </div>
             </div>
             <div class="item">
-                <!-- 如果是进行中则 background-color:#3385FF  background-color:#A2A2A2 -->
-                <span class="stage" style="background-color: #E3B377;">状态</span>
-                <div style="border-bottom: 1px solid #EBEDF0;padding: 0 12px 15px 12px;">
-                    <img class="avatar" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/static/yb_speaker/yaoxinze.png" alt="">
+                <!-- 如果是进行中则 background-color:#3385FF 已结束 background-color:#A2A2A2 本周预告 #E3B377 -->
+                <span class="stage" style="background-color: {{BG_COLORE_2}};">{{STATUS_2}}</span>
+                <div style="border-bottom: 1px solid #EBEDF0;padding: 0 48px 60px 48px;">
+                    <img class="avatar" src="{{AVATAR_2}}" alt="">
                     <div class="item-con">
-                        <div class="text-one name">聚烯烃双周报</div>
-                        <div style="color: #666;font-size: 12px;">主讲：姚昕泽</div>
-                        <div style="font-size: 10px;color: #999;margin-top: 5px;">2022-04-30 15:30-16:00 星期六</div>
+                        <div class="text-one name">{{TITLE_2}}</div>
+                        <div style="color: #666;font-size: 48px;">主讲：{{SPEAKER_2}}</div>
+                        <div style="font-size: 40px;color: #999;margin-top: 20px;">{{TIME_2}}</div>
                     </div>
                 </div>
                 <!-- 如果非预告则下面style 加上 display:none -->
-                <div>
+                <div style="display: {{SHOW_ITEM_2}}" >
                     <!-- 如果是线下沙龙则设置 display:none -->
-                    <div style="text-align: center;color: #E3B377;font-size: 11px;line-height: 28px;">会议提醒</div>
+                    <div style="text-align: center;color: #E3B377;font-size: 44px;line-height: 112px;display: {{SHOW_OFFLINE_2}};">会议提醒</div>
                     <!-- 如果是线上会议则设置 display:none -->
-                    <div style="display: none;">
-                        <div style="text-align: center;color: #E3B377;font-size: 11px;line-height: 28px;float: left;width: 50%;border-right: 1px solid #EBEDF0;">会议提醒</div>
-                        <div style="text-align: center;color: #E3B377;font-size: 11px;line-height: 28px;float: left;width: 50%;">报名线下参会</div>
+                    <div style="display: {{SHOW_ONLINE_2}}" >
+                        <div style="text-align: center;color: #E3B377;font-size: 44px;line-height: 112px;float: left;width: 50%;border-right: 1px solid #EBEDF0;">会议提醒</div>
+                        <div style="text-align: center;color: #E3B377;font-size: 44px;line-height: 112px;float: left;width: 50%;">报名线下参会</div>
                     </div>
                 </div>
             </div>
         </div>
-        <div style="text-align:center;font-size:14px;color:#999">长按图片分享</div>
+        <div style="text-align:center;font-size:56px;color:#999">长按图片分享</div>
         <div class="flex">
             <div style="float: left;">
                 <div>长按识别小程序码</div>
                 <div style="color:#999">查看更多</div>
             </div>
-            <img class="xcx-img" src="" alt="">
+            <img class="xcx-img" src="{{SUN_CODE}}" alt="">
         </div>
     </div>
 </body>

static/htm2img/chapter_detail.html

@@ -14,20 +14,22 @@
             box-sizing: border-box;
         }
         .box{
-            width: 294px;
-            height: 370px;
+            /* width: 294px;
+            height: 370px; */
+            width: 1176px;
+            height: 1480px;
             background-color: #fff;
-            padding: 25px 16px 16px 15px;
-            border-radius: 4px;
+            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: 84px 84px;
+            background-size: 336px 336px;
             background-repeat: no-repeat;
         }
         .avatar{
-            width: 68px;
-            height: 68px;
+            width: 272px;
+            height: 272px;
             display: block;
             margin-left: auto;
             margin-right: auto;
@@ -35,38 +37,38 @@
             object-fit: cover;
         }
         .sub-title{
-            font-size: 14px;
+            font-size: 64px;
             font-weight: bold;
             text-align: center;
-            margin-top: 10px;
+            margin-top: 40px;
         }
         .flex{
-            height: 64px;
-            margin-top: 10px;
-            font-size: 14px;
+            height: 256px;
+            margin-top: 40px;
+            font-size: 56px;
         }
         .content-box{
-            height: 97px;
-            margin: 20px 0;
+            height: 388px;
+            margin: 40px 0;
             color: #999;
             overflow: hidden;
-            font-size: 14px;
+            font-size: 56px;
         }
         .xcx-img{
-            width: 64px;
-            height: 64px;
+            width: 256px;
+            height: 256px;
             float: right;
         }
     </style>
 </head>
 <body>
     <div class="box">
-        <img class="avatar" src="{{AVATAR}}" alt="">
+        <img class="avatar" src="{{REPORT_AVATAR}}" alt="">
         <div class="sub-title">{{REPORT_TITLE}}</div>
         <div class="content-box">
             {{REPORT_ABSTRACT}}
         </div>
-        <div style="text-align:center;font-size:14px;color:#999">长按图片分享</div>
+        <div style="text-align:center;font-size:56px;color:#999">长按图片分享</div>
         <div class="flex">
             <div style="float: left;">
                 <div>长按识别小程序码</div>

static/htm2img/chapter_list.html

@@ -14,64 +14,66 @@
             box-sizing: border-box;
         }
         .box{
-            width: 294px;
-            height: 387px;
+            /* width: 294px;
+            height: 387px; */
+            width: 1176px;
+            height: 1548px;
             background-color: #fff;
-            padding: 25px 16px 16px 15px;
-            border-radius: 4px;
+            padding: 100px 64px 64px 60px;
+            border-radius: 16px;
             border: 1px solid #ECECEC;
-            background-image: url('https://hzstatic.hzinsights.com/static/icon/hzyb/chart_wait.png');
+            background-image: url('https://hzchart.oss-cn-shanghai.aliyuncs.com/static/icon/hzyb/yb-bg-hzlogo.png');
             background-position: top right;
-            background-size: 84px 84px;
+            background-size: 336px 336px;
             background-repeat: no-repeat;
         }
         .title{
-            font-size: 16px;
+            font-size: 64px;
             font-weight: bold;
-            margin-bottom: 5px;
+            margin-bottom: 20px;
         }
         .flex{
-            height: 64px;
-            margin-top: 10px;
-            font-size: 14px;
+            height: 256px;
+            margin-top: 40px;
+            font-size: 56px;
         }
         .content-box{
-            height: 208px;
-            margin: 10px 0;
+            height: 832px;
+            margin: 40px 0;
             overflow: hidden;
-            font-size: 14px;
+            font-size: 56px;
         }
         .item{
             background: #FFFFFF;
-            box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.08);
-            border-radius: 6px;
+            box-shadow: 0px 0px 40px 1px rgba(0,0,0,0.08);
+            border-radius: 24px;
             border: 1px solid #E6E6E6;
-            padding: 12px 15px;
-            height: 95px;
-            margin-bottom: 10px;
+            padding: 48px 60px;
+            height: 380px;
+            margin-bottom: 40px;
             position: relative;
             overflow: hidden;
         }
         .avatar{
-            width: 71px;
-            height: 71px;
+            width: 284px;
+            height: 284px;
             border-radius: 50%;
             background-color: #f5f5f5;
             float: left;
-            margin-right: 8px;
+            margin-right: 32px;
             object-fit: cover;
             display: block;
         }
         .item-con{
             overflow: hidden;
-            margin-top: 7px;
+            margin-top: 28px;
         }
         .item-con .name{
-            font-size: 13px;
+            font-size: 52px;
             font-weight: bold;
-            padding-bottom: 8px;
+            padding-bottom: 32px;
             border-bottom: 1px solid #E6E6E6;
-            margin-bottom: 9px;
+            margin-bottom: 36px;
         }
         .text-one{
             overflow: hidden;
@@ -80,14 +82,14 @@
         }
         .user-tag{
             background-color: #FAF7EE;
-            max-width: 105px;
-            font-size: 10px;
-            padding: 2px 6px;
+            max-width: 420px;
+            font-size: 40px;
+            padding: 8px 24px;
             line-height: 1;
             display: inline-block;
             box-sizing: border-box;
-            border-radius: 9px;
-            padding-left: 20px;
+            border-radius: 36px;
+            padding-left: 80px;
             position: relative;
         }
         .user-tag::before{
@@ -95,11 +97,11 @@
             display: block;
             background-color: #ccc;
             position: absolute;
-            left: 6px;
-            top: 3px;
-            width: 10px;
-            height: 10px;
-            background-image: url('https://hongze.oss-accelerate.aliyuncs.com/static/images/202101/20210115/GEzqdBZX8h3GD18DimtO5IyGIJUo.png');
+            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{
@@ -108,57 +110,56 @@
             right: 0;
             background-color: #E3B377;
             color: #fff;
-            font-size: 10px;
+            font-size: 40px;
             display: block;
-            padding: 2px 8px;
-            border-bottom-left-radius: 8px;
-            border-top-right-radius: 6px;
+            padding: 8px 32px;
+            border-bottom-left-radius: 32px;
+            border-top-right-radius: 24px;
         }
         
         
         
         .xcx-img{
-            width: 64px;
-            height: 64px;
+            width: 256px;
+            height: 256px;
             float: right;
         }
     </style>
 </head>
 <body>
     <div class="box">
-        <div class="title">日度点评</div>
+        <div class="title">{{LIST_TITLE}}</div>
         <div class="content-box">
             <div class="item">
-                <span class="stage">第35期</span>
-                <img class="avatar" src="https://hongze.oss-accelerate.aliyuncs.com/static/images/202101/20210115/GEzqdBZX8h3GD18DimtO5IyGIJUo.png" alt="">
+                <span class="stage">{{STAGE_1}}</span>
+                <img class="avatar" src="{{AVATAR_1}}" alt="">
                 <div class="item-con">
-                    <div class="text-one name">知白守黑日度点评知白守黑日度点评知白守黑日度点评知白守黑日度点评</div>
+                    <div class="text-one name">{{TITLE_1}}</div>
                     <div>
-                        <span style="font-size: 11px;">魏忻悦</span>
-                        <span class="text-one" style="width: 100px;font-size: 11px;display: inline-block;margin-left: 5px;position: relative;">很长的tag 魏忻悦魏忻悦魏忻悦魏忻悦魏忻悦</span>
+                        <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">第35期</span>
-                <img class="avatar" src="https://hongze.oss-accelerate.aliyuncs.com/static/images/202101/20210115/GEzqdBZX8h3GD18DimtO5IyGIJUo.png" alt="">
+                <span class="stage">{{STAGE_2}}</span>
+                <img class="avatar" src="{{AVATAR_2}}" alt="">
                 <div class="item-con">
-                    <div class="text-one name">知白守黑日度点评知白守黑日度点评知白守黑日度点评知白守黑日度点评</div>
+                    <div class="text-one name">{{TITLE_2}}</div>
                     <div>
-                        <span style="font-size: 11px;">魏忻悦</span>
-                        <span class="text-one user-tag">弘则研究董事长</span>
+                        <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:14px;color:#999">长按图片分享</div>
+        <div style="text-align:center;font-size:56px;color:#999">长按图片分享</div>
         <div class="flex">
             <div style="float: left;">
                 <div>长按识别小程序码</div>
                 <div style="color:#999">查看更多</div>
             </div>
-            <img class="xcx-img" src="" alt="">
+            <img class="xcx-img" src="{{SUN_CODE}}" alt="">
         </div>
     </div>
 </body>

static/htm2img/chart_list.html

@@ -14,36 +14,36 @@
             box-sizing: border-box;
         }
         .box{
-            width: 294px;
-            height: 338px;
+            /* width: 294px;
+            height: 338px; */
+            width: 1176px;
+            height: 1352px;
             background-color: #fff;
-            padding: 25px 16px 16px 15px;
-            border-radius: 4px;
+            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: 84px 84px;
+            background-size: 336px 336px;
             background-repeat: no-repeat;
         }
         .title{
-            font-size: 16px;
+            font-size: 64px;
             font-weight: bold;
-            margin-bottom: 10px;
+            margin-bottom: 40px;
         }
         .content-box{
-            background-color: #f5f5f5;
-            height: 164px;
-            margin-bottom: 5px;
-            overflow: hidden;
+            height: 656px;
+            margin-bottom: 20px;
         }
         .content-box .item{
-            width: 115px;
-            height: 140px;
+            width: 500px;
+            height: 560px;
             background: #FFFFFF;
-            box-shadow: 0px 0px 6px 0px rgba(154,141,123,0.16);
-            border-radius: 4px;
-            margin: 10px 5px;
-            padding: 10px;
+            box-shadow: 0px 0px 24px 0px rgba(154,141,123,0.16);
+            border-radius: 16px;
+            margin: 40px 0px;
+            padding: 40px;
             float: left;
         }
         .content-box .item-title{
@@ -52,39 +52,39 @@
             text-overflow: ellipsis;
             -webkit-line-clamp: 2;
             -webkit-box-orient: vertical;
-            min-height: 35px;
-            font-size: 14px;
+            min-height: 140px;
+            font-size: 56px;
         }
         .content-box .item-img{
             width: 100%;
-            height: 80px;
-            margin-top: 5px;
+            height: 320px;
+            margin-top: 20px;
             object-fit: cover;
         }
 
         .flex{
-            height: 64px;
-            margin-top: 10px;
-            font-size: 14px;
+            height: 256px;
+            margin-top: 40px;
+            font-size: 56px;
         }
         .xcx-img{
-            width: 64px;
-            height: 64px;
+            width: 256px;
+            height: 256px;
             float: right;
         }
     </style>
 </head>
 <body>
     <div class="box">
-        <div class="title">ETA图库</div>
+        <div class="title">{{LIST_TITLE}}</div>
         <div class="content-box">
             <div class="item">
-                <div class="item-title">标题标题标题标题标题标题标题标题标题标题</div>
-                <img class="item-img" src="https://hzstatic.hzinsights.com/static/icon/hzyb/chart_wait.png" alt="">
+                <div class="item-title">{{TITLE_1}}</div>
+                <img class="item-img" src="{{IMG_1}}" alt="">
             </div>
-            <div class="item">
-                <div class="item-title">标题</div>
-                <img class="item-img" src="" alt="">
+            <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:14px;color:#999">长按图片分享</div>
@@ -93,7 +93,7 @@
                 <div>长按识别小程序码</div>
                 <div style="color:#999">查看更多</div>
             </div>
-            <img class="xcx-img" src="" alt="">
+            <img class="xcx-img" src="{{SUN_CODE}}" alt="">
         </div>
     </div>
 </body>

static/htm2img/report_detail.html

@@ -14,60 +14,61 @@
             box-sizing: border-box;
         }
         .box{
-            width: 294px;
-            height: 355px;
+            /* width: 294px;
+            height: 355px; */
+            width: 1176px;
+            height: 1420px;
             background-color: #fff;
-            padding: 25px 16px 16px 15px;
-            border-radius: 4px;
+            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: 84px 84px;
+            background-size: 336px 336px;
             background-repeat: no-repeat;
         }
         .title{
-            font-size: 16px;
+            font-size: 64px;
             font-weight: bold;
-            margin-bottom: 5px;
+            margin-bottom: 20px;
         }
         .sub-title{
-            font-size: 15px;
+            font-size: 60px;
             font-weight: bold;
         }
         .flex{
-            height: 64px;
-            margin-top: 10px;
-            font-size: 14px;
+            height: 256px;
+            margin-top: 40px;
+            font-size: 56px;
         }
         .content-box{
-            height: 130px;
-            margin: 20px 0;
+            height: 520px;
+            margin: 80px 0;
             color: #999;
             overflow: hidden;
-            font-size: 14px;
+            font-size: 56px;
         }
         .xcx-img{
-            width: 64px;
-            height: 64px;
+            width: 256px;
+            height: 256px;
             float: right;
         }
     </style>
 </head>
 <body>
     <div class="box">
-        <div class="title">双周报</div>
-        <div class="sub-title">报告标题</div>
+        <div class="title">{{REPORT_TYPE}}</div>
+        <div class="sub-title">{{REPORT_TITLE}}</div>
         <div class="content-box">
-            地产还是目前国内商品市场的主要影响因素。从最近的地产成交看，略有改善，需要继续观察，考虑到季节性施工淡季，地产成交的改善作用在盘面上，可能要到春节后。
-目前这个阶段就是观察政策，因为一是基本面已经给到政策调整的状态，二是目前处于政策
+            {{REPORT_ABSTRACT}}
         </div>
-        <div style="text-align:center;font-size:14px;color:#999">长按图片分享</div>
+        <div style="text-align:center;font-size:56px;color:#999">长按图片分享</div>
         <div class="flex">
             <div style="float: left;">
                 <div>长按识别小程序码</div>
                 <div style="color:#999">查看更多</div>
             </div>
-            <img class="xcx-img" src="" alt="">
+            <img class="xcx-img" src="{{SUN_CODE}}" alt="">
         </div>
     </div>
 </body>

static/htm2img/report_list.html

@@ -14,32 +14,34 @@
             box-sizing: border-box;
         }
         .box{
-            width: 294px;
-            height: 336px;
+            /* width: 294px;
+            height: 336px; */
+            width: 1176px;
+            height: 1344px;
             background-color: #fff;
-            padding: 25px 16px 16px 15px;
-            border-radius: 4px;
+            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: 84px 84px;
+            background-size: 336px 336px;
             background-repeat: no-repeat;
         }
         .title{
-            font-size: 16px;
+            font-size: 64px;
             font-weight: bold;
-            margin-bottom: 5px;
+            margin-bottom: 20px;
         }
         .flex{
-            height: 64px;
-            margin-top: 10px;
-            font-size: 14px;
+            height: 256px;
+            margin-top: 40px;
+            font-size: 56px;
         }
         .content-box{
-            height: 157px;
-            margin: 10px 0;
+            height: 628px;
+            margin: 40px 0;
             overflow: hidden;
-            font-size: 14px;
+            font-size: 56px;
         }
         .text-one{
             overflow: hidden;
@@ -47,77 +49,77 @@
             text-overflow: ellipsis;
         }
         .item-img{
-            width: 47px;
-            height: 63px;
+            width: 188px;
+            height: 252px;
             float: left;
             object-fit: cover;
-            border-radius: 4px;
-            margin-right: 5px;
+            border-radius: 16px;
+            margin-right: 20px;
         }
         .item-title{
-            font-size: 13px;
+            font-size: 52px;
         }
         .item-des{
-            height: 20px;
-            font-size: 11px;
+            height: 80px;
+            font-size: 44px;
         }
         .audio-box{
-            width: 50px;
-            height: 20px;
+            width: 200px;
+            height: 80px;
             background: #E3B377;
-            border-radius: 10px 10px 10px 10px;
+            border-radius: 40px;
             color: #fff;
-            font-size: 12px;
+            font-size: 48px;
             float: right;
             text-align: center;
-            line-height: 20px;
+            line-height: 80px;
         }
         .audio-box img{
-            width: 15px;
-            height: 15px;
+            width: 60px;
+            height: 60px;
             object-fit: cover;
             position: relative;
-            top: 3px;
+            top: 12px;
         }
         
         
         .xcx-img{
-            width: 64px;
-            height: 64px;
+            width: 256px;
+            height: 256px;
             float: right;
         }
     </style>
 </head>
 <body>
     <div class="box">
-        <div class="title">双周报</div>
+        <div class="title">{{LIST_TITLE}}</div>
         <div class="content-box">
-            <div class="item" style="margin-bottom: 10px;">
-                <img class="item-img" src="https://hzstatic.hzinsights.com/static/yb_wx/report_hongguan.png" alt="">
-                <div class="item-title text-one" style="margin:5px 0">【发布优化】0421晨，市场让人哭泣</div>
-                <div class="item-des text-one" style="color:#666">摘要</div>
+            <div class="item" style="margin-bottom: 40px;">
+                <img class="item-img" src="{{IMG_1}}" alt="">
+                <div class="item-title text-one" style="margin:20px 0">{{TITLE_1}}</div>
+                <div class="item-des text-one" style="color:#666">{{ABSTRACT_1}}</div>
                 <div class="item-bot">
-                    <span class="item-time" style="color:#999;font-size: 11px;">2022.04.21 13:42</span>
-                    <div class="audio-box">
+                    <span class="item-time" style="color:#999;font-size: 44px;">{{TIME_1}}</span>
+                    <div class="audio-box" style="display: none">
                         <img src="https://hzstatic.hzinsights.com/static/yb_wx/report_hongguan.png" alt="">
                         <span>播放</span>
                     </div>
                 </div>
             </div>
-            <div class="item" style="margin-bottom: 10px;">
-                <img class="item-img" src="https://hzstatic.hzinsights.com/static/yb_wx/report_hongguan.png" alt="">
-                <div class="item-title text-one" style="margin:5px 0">【发布优化】0421晨，市场让人哭泣</div>
-                <div class="item-des text-one" style="color:#666">摘要</div>
+            <div class="item" style="margin-bottom: 40px;">
+                <img class="item-img" src="{{IMG_2}}" alt="">
+                <div class="item-title text-one" style="margin:20px 0">{{TITLE_2}}</div>
+                <div class="item-des text-one" style="color:#666">{{ABSTRACT_2}}</div>
                 <div class="item-bot">
-                    <span class="item-time" style="color:#999;font-size: 11px;">2022.04.21 13:42</span>
-                    <div class="audio-box">
+                    <span class="item-time" style="color:#999;font-size: 44px;">{{TIME_2}}</span>
+                    <div class="audio-box" style="display: none">
                         <img src="https://hzstatic.hzinsights.com/static/yb_wx/report_hongguan.png" alt="">
                         <span>播放</span>
                     </div>
                 </div>
             </div>
         </div>
-        <div style="text-align:center;font-size:14px;color:#999">长按图片分享</div>
+        <div style="text-align:center;font-size:56px;color:#999">长按图片分享</div>
         <div class="flex">
             <div style="float: left;">
                 <div>长按识别小程序码</div>