add: 获取分享海报 50%

controller/public.go

@@ -83,3 +83,32 @@ func Upload(c *gin.Context) {
 	response.OkData("文件上传成功", resourceUrl, c)
 
 }
+
+// GetSharePoster
+// @Tags 公共模块
+// @Summary  获取分享海报
+// @Description 获取分享海报
+// @Security ApiKeyAuth
+// @securityDefinitions.basic BasicAuth
+// @Param	request	body services.SharePosterReq true "type json string"
+// @Accept  application/json
+// @Success 200 {object} string "获取成功"
+// @failure 400 {string} string "获取失败"
+// @Router /public/get_share_poster [post]
+func GetSharePoster(c *gin.Context) {
+	var req services.SharePosterReq
+	if c.ShouldBind(&req) != nil {
+		response.Fail("参数异常", c)
+		return
+	}
+	if req.Source == "" {
+		response.Fail("来源有误", c)
+		return
+	}
+	imgUrl, err := services.CreatePosterFromSource(req.Source, req.Pars)
+	if err != nil {
+		response.FailData("获取分享海报失败", "获取分享海报失败, Err: "+err.Error(), c)
+		return
+	}
+	response.OkData("获取成功", imgUrl, c)
+}

go.mod

@@ -4,7 +4,6 @@ go 1.15
 
 require (
 	github.com/aliyun/aliyun-oss-go-sdk v1.9.8
-	github.com/antlr/antlr4/runtime/Go/antlr v0.0.0-20220111164937-1b144fa7b40f // indirect
 	github.com/baiyubin/aliyun-sts-go-sdk v0.0.0-20180326062324-cfa1a18b161f // indirect
 	github.com/fsnotify/fsnotify v1.5.1
 	github.com/gin-gonic/gin v1.7.4
@@ -21,15 +20,13 @@ require (
 	github.com/olivere/elastic/v7 v7.0.31
 	github.com/op/go-logging v0.0.0-20160315200505-970db520ece7
 	github.com/satori/go.uuid v1.2.0 // indirect
-	github.com/shopspring/decimal v1.2.0
 	github.com/silenceper/wechat/v2 v2.0.9
 	github.com/spf13/viper v1.9.0
 	github.com/swaggo/gin-swagger v1.3.3
 	github.com/swaggo/swag v1.7.4
-	github.com/yidane/formula v0.0.0-20210902154546-0782e1736717
 	golang.org/x/crypto v0.0.0-20210921155107-089bfa567519 // indirect
 	golang.org/x/image v0.0.0-20190802002840-cff245a6509b
-	golang.org/x/sys v0.0.0-20211107104306-e0b2ad06fe42
+	golang.org/x/sys v0.0.0-20211107104306-e0b2ad06fe42 // indirect
 	golang.org/x/text v0.3.7 // indirect
 	gopkg.in/alexcesaro/quotedprintable.v3 v3.0.0-20150716171945-2caba252f4dc // indirect
 	gopkg.in/gomail.v2 v2.0.0-20160411212932-81ebce5c23df

init_serve/router.go

@@ -8,6 +8,7 @@ import (
 	"hongze/hongze_yb/global"
 	"hongze/hongze_yb/middleware"
 	"hongze/hongze_yb/routers"
+	"net/http"
 )
 
 // InitRouter 初始化路由
@@ -49,5 +50,7 @@ func InitRouter() (r *gin.Engine) {
 	routers.InitPurchase(r)
 	// 研报相关路由
 	routers.InitReport(r)
+	// 设置静态文件夹件路径
+	r.StaticFS("/static", http.Dir("./static"))
 	return
 }

routers/public.go

@@ -23,5 +23,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)
 	}
 }

services/share_poster.go

@@ -0,0 +1,184 @@
+package services
+
+import (
+	"encoding/json"
+	"errors"
+	"fmt"
+	"hongze/hongze_yb/global"
+	"hongze/hongze_yb/utils"
+	"io/ioutil"
+	"net/http"
+	"os"
+	"strings"
+)
+
+// SharePosterReq 分享海报请求体
+type SharePosterReq struct {
+	Source string `json:"source" description:"来源"`
+	Pars   string `json:"pars" description:"海报动态信息"`
+	Scene  string `json:"scene" description:"太阳码scene"`
+	Path   string `json:"path" description:"太阳码path"`
+}
+
+// CreatePosterFromSource 生成分享海报
+func CreatePosterFromSource(source string, pars string) (imgUrl string, err error) {
+	var errMsg string
+	defer func() {
+		if err != nil {
+			if global.CONFIG.Serve.RunMode == "release" {
+				go SendEmail(utils.APPNAME+"【"+global.CONFIG.Serve.RunMode+"】"+"失败提醒", "生成分享海报失败, "+errMsg+", CreatePosterFromSource: "+err.Error(), utils.EmailSendToUsers)
+			}
+		}
+	}()
+
+	// 根据请求路径及版本号获取本地图片, 无对应图片则生成图片
+
+	// 根据来源生成相应的html文件, 确定生成图片的长宽
+	resourceUrl := ""
+	filePath := ""
+	switch source {
+	case "chart_detail":
+		filePath, err = CreateChartDetailHtml(pars)
+		if err != nil {
+			return
+		}
+	}
+	if filePath == "" {
+		errMsg = "html资源生成失败"
+		err = errors.New(errMsg)
+		return
+	}
+	resourceUrl = "http://127.0.0.1:8612/" + filePath
+	fmt.Println(resourceUrl)
+
+	// 请求python服务htm2img
+	htm2ImgReq := make(map[string]interface{})
+	htm2ImgReq["html_url"] = resourceUrl
+	res, err := postHtml2Img(htm2ImgReq)
+	if err != nil {
+		return
+	}
+	if res == nil {
+		err = errors.New("html转图片请求失败, 未知错误")
+		return
+	}
+	if res.Code != 200 {
+		err = errors.New("html转图片失败: " + res.Msg)
+		return
+	}
+	imgUrl = res.Data
+	fmt.Println(imgUrl)
+	// 清除本地html文件
+
+	// 记录请求路径对应的图片信息
+
+	return
+}
+
+type ChartDetailPosterReq struct {
+	ChartInfoId int    `json:"chart_info_id"`
+	ChartName   string `json:"chart_name"`
+	ChartImage  string `json:"chart_image"`
+}
+
+// 生成html-图表详情页
+func CreateChartDetailHtml(pars string) (filePath 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)
+	fmt.Println("ChartName:", params.ChartName)
+	fmt.Println("ChartImage:", params.ChartImage)
+
+	// 生成静态html文件
+	filePath = "static/htm2img/" + utils.GetRandStringNoSpecialChar(28) + ".html"
+	f, err := os.Create(filePath)
+	defer f.Close()
+	if err != nil {
+		return
+	}
+	if _, err = f.Write([]byte(contentStr)); err != nil {
+		return
+	}
+
+	return
+}
+
+// 生成静态html文件
+func PutHtmlIntoFile(content []byte) (filePath string, err error) {
+	filePath = "static/htm2img/" + utils.GetRandStringNoSpecialChar(28) + ".html"
+	f, err := os.Create(filePath)
+	defer f.Close()
+	if err != nil {
+		return
+	}
+	_, err = f.Write(content)
+	return
+}
+
+type Html2ImgResp struct {
+	Code int    `json:"code"`
+	Msg  string `json:"msg"`
+	Data string `json:"data"`
+}
+
+// postHtml2Img 请求htm2img接口
+func postHtml2Img(param map[string]interface{}) (resp *Html2ImgResp, err error) {
+	pythonUrl := ""
+	if global.CONFIG.Serve.RunMode == "release" {
+		//edbLibUrl = "http://172.19.173.232:8300/"
+	} else {
+		pythonUrl = "http://127.0.0.1:8888/"
+	}
+	postUrl := pythonUrl + "htm2img"
+	postData, err := json.Marshal(param)
+	if err != nil {
+		return
+	}
+	result, err := Html2ImgHttpPost(postUrl, string(postData), "application/json")
+	if err != nil {
+		return
+	}
+	if err = json.Unmarshal(result, &resp); err != nil {
+		return
+	}
+	return resp, nil
+}
+
+// Html2ImgHttpPost post请求edb库
+func Html2ImgHttpPost(url, postData string, params ...string) ([]byte, error) {
+	body := ioutil.NopCloser(strings.NewReader(postData))
+	client := &http.Client{}
+	req, err := http.NewRequest("POST", url, body)
+	if err != nil {
+		return nil, err
+	}
+	contentType := "application/x-www-form-urlencoded;charset=utf-8"
+	if len(params) > 0 && params[0] != "" {
+		contentType = params[0]
+	}
+	req.Header.Set("Content-Type", contentType)
+	resp, err := client.Do(req)
+	if err != nil {
+		return nil, err
+	}
+	defer resp.Body.Close()
+	b, err := ioutil.ReadAll(resp.Body)
+	fmt.Println("HttpPost:" + string(b))
+	return b, err
+}

static/htm2img/chapter_detail.html

@@ -0,0 +1,80 @@
+<!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: 370px;
+            background-color: #fff;
+            padding: 25px 16px 16px 15px;
+            border-radius: 4px;
+            border: 1px solid #ECECEC;
+            background-image: url('https://hzstatic.hzinsights.com/static/icon/hzyb/chart_wait.png');
+            background-position: top right;
+            background-size: 84px 84px;
+            background-repeat: no-repeat;
+        }
+        .avatar{
+            width: 68px;
+            height: 68px;
+            display: block;
+            margin-left: auto;
+            margin-right: auto;
+            border-radius: 50%;
+            object-fit: cover;
+        }
+        .sub-title{
+            font-size: 14px;
+            font-weight: bold;
+            text-align: center;
+            margin-top: 10px;
+        }
+        .flex{
+            height: 64px;
+            margin-top: 10px;
+            font-size: 14px;
+        }
+        .content-box{
+            height: 97px;
+            margin: 20px 0;
+            color: #999;
+            overflow: hidden;
+            font-size: 14px;
+        }
+        .xcx-img{
+            width: 64px;
+            height: 64px;
+            float: right;
+        }
+    </style>
+</head>
+<body>
+    <div class="box">
+        <img class="avatar" src="https://hongze.oss-accelerate.aliyuncs.com/static/images/202012/20201217/3Th8J6HoWfOKvftcTwTx84Np4oYZ.png?x-oss-process=image/sharpen,100" alt="">
+        <div class="sub-title">报告标题</div>
+        <div class="content-box">
+            地产还是目前国内商品市场的主要影响因素。从最近的地产成交看，略有改善，需要继续观察，考虑到季节性施工淡季，地产成交的改善作用在盘面上，可能要到春节后。
+目前这个阶段就是观察政策，因为一是基本面已经给到政策调整的状态，二是目前处于政策
+        </div>
+        <div style="text-align:center;font-size:14px;color:#999">长按图片分享</div>
+        <div class="flex">
+            <div style="float: left;">
+                <div>长按识别小程序码</div>
+                <div style="color:#999">查看更多</div>
+            </div>
+            <img class="xcx-img" src="" alt="">
+        </div>
+    </div>
+</body>
+</html>

static/htm2img/chapter_list.html

@@ -0,0 +1,95 @@
+<!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: 369px;
+            background-color: #fff;
+            padding: 25px 16px 16px 15px;
+            border-radius: 4px;
+            border: 1px solid #ECECEC;
+            background-image: url('https://hzstatic.hzinsights.com/static/icon/hzyb/chart_wait.png');
+            background-position: top right;
+            background-size: 84px 84px;
+            background-repeat: no-repeat;
+        }
+        .title{
+            font-size: 16px;
+            font-weight: bold;
+            margin-bottom: 5px;
+        }
+        .flex{
+            height: 64px;
+            margin-top: 10px;
+            font-size: 14px;
+        }
+        .content-box{
+            height: 190px;
+            margin: 10px 0;
+            overflow: hidden;
+            font-size: 14px;
+        }
+        .text-one{
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+        }
+        .item-img{
+            width: 62px;
+            height: 83px;
+            float: left;
+            border-radius: 4px;
+            margin-right: 5px;
+        }
+        
+        
+        
+        .xcx-img{
+            width: 64px;
+            height: 64px;
+            float: right;
+        }
+    </style>
+</head>
+<body>
+    <div class="box">
+        <div class="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-type text-one" style="font-weight: bold;">宏观商品复盘</div>
+                <div class="item-title text-one" style="margin:5px 0">主讲人：王沛</div>
+                <div class="item-des text-one" style="color:#666">弘则研究董事长/首席宏观商品分析师</div>
+                <div style="color: #E3B377;">第45期 | FICC</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-type text-one" style="font-weight: bold;">宏观商品复盘</div>
+                <div class="item-title text-one" style="margin:5px 0">主讲人：王沛</div>
+                <div class="item-des text-one" style="color:#666">弘则研究董事长/首席宏观商品分析师</div>
+                <div style="color: #E3B377;">第45期 | FICC</div>
+            </div>
+        </div>
+        <div style="text-align:center;font-size:14px;color:#999">长按图片分享</div>
+        <div class="flex">
+            <div style="float: left;">
+                <div>长按识别小程序码</div>
+                <div style="color:#999">查看更多</div>
+            </div>
+            <img class="xcx-img" src="" alt="">
+        </div>
+    </div>
+</body>
+</html>

static/htm2img/chart_detail.html

@@ -0,0 +1,69 @@
+<!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: 381px;
+            background-color: #fff;
+            padding: 25px 16px 16px 15px;
+            border-radius: 4px;
+            border: 1px solid #ECECEC;
+            background-image: url('./top-bg.png');
+            background-position: top right;
+            background-size: 84px 84px;
+            background-repeat: no-repeat;
+        }
+        .title{
+            font-size: 16px;
+            font-weight: bold;
+            display: -webkit-box;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            -webkit-line-clamp: 2;
+            -webkit-box-orient: vertical;
+            min-height: 38px;
+            margin-bottom: 10px;
+        }
+        .bg-img{
+            width: 264px;
+            height: 189px;
+        }
+        .flex{
+            margin-top: 10px;
+            font-size: 14px;
+            height: 64px;
+        }
+        .xcx-img{
+            width: 64px;
+            height: 64px;
+            float: right;
+        }
+    </style>
+</head>
+<body>
+    <div class="box">
+        <div class="title">{{CHART_NAME}}</div>
+        <img class="bg-img" src="{{CHART_IMAGE}}" alt="">
+        <div style="text-align:center;font-size:14px;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/chart_list.html

@@ -0,0 +1,100 @@
+<!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: 338px;
+            background-color: #fff;
+            padding: 25px 16px 16px 15px;
+            border-radius: 4px;
+            border: 1px solid #ECECEC;
+            background-image: url('https://hzstatic.hzinsights.com/static/icon/hzyb/chart_wait.png');
+            background-position: top right;
+            background-size: 84px 84px;
+            background-repeat: no-repeat;
+        }
+        .title{
+            font-size: 16px;
+            font-weight: bold;
+            margin-bottom: 10px;
+        }
+        .content-box{
+            background-color: #f5f5f5;
+            height: 164px;
+            margin-bottom: 5px;
+            overflow: hidden;
+        }
+        .content-box .item{
+            width: 115px;
+            height: 140px;
+            background: #FFFFFF;
+            box-shadow: 0px 0px 6px 0px rgba(154,141,123,0.16);
+            border-radius: 4px;
+            margin: 10px 5px;
+            padding: 10px;
+            float: left;
+        }
+        .content-box .item-title{
+            display: -webkit-box;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            -webkit-line-clamp: 2;
+            -webkit-box-orient: vertical;
+            min-height: 35px;
+            font-size: 14px;
+        }
+        .content-box .item-img{
+            width: 100%;
+            height: 80px;
+            margin-top: 5px;
+            object-fit: cover;
+        }
+
+        .flex{
+            height: 64px;
+            margin-top: 10px;
+            font-size: 14px;
+        }
+        .xcx-img{
+            width: 64px;
+            height: 64px;
+            float: right;
+        }
+    </style>
+</head>
+<body>
+    <div class="box">
+        <div class="title">ETA图库</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>
+            <div class="item">
+                <div class="item-title">标题</div>
+                <img class="item-img" src="" alt="">
+            </div>
+        </div>
+        <div style="text-align:center;font-size:14px;color:#999">长按图片分享</div>
+        <div class="flex">
+            <div style="float: left;">
+                <div>长按识别小程序码</div>
+                <div style="color:#999">查看更多</div>
+            </div>
+            <img class="xcx-img" src="" alt="">
+        </div>
+    </div>
+</body>
+</html>

static/htm2img/report_detail.html

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

static/htm2img/report_list.html

@@ -0,0 +1,124 @@
+<!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: 369px;
+            background-color: #fff;
+            padding: 25px 16px 16px 15px;
+            border-radius: 4px;
+            border: 1px solid #ECECEC;
+            background-image: url('https://hzstatic.hzinsights.com/static/icon/hzyb/chart_wait.png');
+            background-position: top right;
+            background-size: 84px 84px;
+            background-repeat: no-repeat;
+        }
+        .title{
+            font-size: 16px;
+            font-weight: bold;
+            margin-bottom: 5px;
+        }
+        .flex{
+            height: 64px;
+            margin-top: 10px;
+            font-size: 14px;
+        }
+        .content-box{
+            height: 190px;
+            margin: 10px 0;
+            overflow: hidden;
+            font-size: 14px;
+        }
+        .text-one{
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+        }
+        .item-img{
+            width: 62px;
+            height: 83px;
+            float: left;
+            border-radius: 4px;
+            margin-right: 5px;
+        }
+        .audio-box{
+            width: 50px;
+            height: 20px;
+            background: #E3B377;
+            border-radius: 10px 10px 10px 10px;
+            color: #fff;
+            font-size: 12px;
+            float: right;
+            text-align: center;
+            line-height: 20px;
+        }
+        .audio-box img{
+            width: 15px;
+            height: 15px;
+            object-fit: cover;
+            position: relative;
+            top: 3px;
+        }
+        
+        
+        .xcx-img{
+            width: 64px;
+            height: 64px;
+            float: right;
+        }
+    </style>
+</head>
+<body>
+    <div class="box">
+        <div class="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-type text-one">【第3期|FICC|晨报】</div>
+                <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-bot">
+                    <span class="item-time" style="color:#666">2022.04.21 13:42</span>
+                    <div class="audio-box">
+                        <img src="https://hzstatic.hzinsights.com/static/yb_wx/report_hongguan.png" alt="">
+                        <span>播放</span>
+                    </div>
+                </div>
+            </div>
+            <div class="item">
+                <img class="item-img" src="https://hzstatic.hzinsights.com/static/yb_wx/report_hongguan.png" alt="">
+                <div class="item-type text-one">【第3期|FICC|晨报】</div>
+                <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-bot">
+                    <span class="item-time" style="color:#666">2022.04.21 13:42</span>
+                    <div class="audio-box">
+                        <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 class="flex">
+            <div style="float: left;">
+                <div>长按识别小程序码</div>
+                <div style="color:#999">查看更多</div>
+            </div>
+            <img class="xcx-img" src="" alt="">
+        </div>
+    </div>
+</body>
+</html>