Browse Source

生成海报放大

hsun 3 years ago
parent
commit
5389c7c47f
2 changed files with 20 additions and 18 deletions
  1. 2 2
      services/share_poster.go
  2. 18 16
      static/htm2img/chart_detail.html

+ 2 - 2
services/share_poster.go

@@ -47,14 +47,14 @@ func CreatePosterFromSource(codePage, codeScene, source, version, pars string) (
 	heightMap := map[string]int{
 	heightMap := map[string]int{
 		"chapter_detail": 370,
 		"chapter_detail": 370,
 		"chapter_list":   369,
 		"chapter_list":   369,
-		"chart_detail":   762,
+		"chart_detail":   1536,
 		//"chart_detail":   381,
 		//"chart_detail":   381,
 		"chart_list":     338,
 		"chart_list":     338,
 		"report_detail":  355,
 		"report_detail":  355,
 		"report_list":    369,
 		"report_list":    369,
 	}
 	}
 	//width := 294
 	//width := 294
-	width := 588
+	width := 1176
 	height := heightMap[source]
 	height := heightMap[source]
 	if height == 0 {
 	if height == 0 {
 		errMsg = "图片长度有误"
 		errMsg = "图片长度有误"

+ 18 - 16
static/htm2img/chart_detail.html

@@ -14,40 +14,42 @@
             box-sizing: border-box;
             box-sizing: border-box;
         }
         }
         .box{
         .box{
-            /*width: 294px;*/
-            /*height: 381px;*/
+            /* width: 294px;
+            height: 381px; */
+            width: 1176px;
+            height: 1536px;
             background-color: #fff;
             background-color: #fff;
-            padding: 25px 16px 16px 15px;
-            border-radius: 4px;
+            padding: 100px 64px 64px 60px;
+            border-radius: 16px;
             border: 1px solid #ECECEC;
             border: 1px solid #ECECEC;
             background-image: url('https://hzchart.oss-cn-shanghai.aliyuncs.com/static/icon/hzyb/yb-bg-hzlogo.png');
             background-image: url('https://hzchart.oss-cn-shanghai.aliyuncs.com/static/icon/hzyb/yb-bg-hzlogo.png');
             background-position: top right;
             background-position: top right;
-            background-size: 84px 84px;
+            background-size: 336px 336px;
             background-repeat: no-repeat;
             background-repeat: no-repeat;
         }
         }
         .title{
         .title{
-            font-size: 48px;
+            font-size: 64px;
             font-weight: bold;
             font-weight: bold;
             display: -webkit-box;
             display: -webkit-box;
             overflow: hidden;
             overflow: hidden;
             text-overflow: ellipsis;
             text-overflow: ellipsis;
             -webkit-line-clamp: 2;
             -webkit-line-clamp: 2;
             -webkit-box-orient: vertical;
             -webkit-box-orient: vertical;
-            min-height: 38px;
-            margin-bottom: 10px;
+            min-height: 152px;
+            margin-bottom: 40px;
         }
         }
         .bg-img{
         .bg-img{
-            width: 264px;
-            height: 189px;
+            width: 1056px;
+            height: 756px;
         }
         }
         .flex{
         .flex{
-            margin-top: 10px;
-            font-size: 14px;
-            height: 64px;
+            margin-top: 40px;
+            font-size: 56px;
+            height: 256px;
         }
         }
         .xcx-img{
         .xcx-img{
-            width: 64px;
-            height: 64px;
+            width: 256px;
+            height: 256px;
             float: right;
             float: right;
         }
         }
     </style>
     </style>
@@ -56,7 +58,7 @@
     <div class="box">
     <div class="box">
         <div class="title">{{CHART_NAME}}</div>
         <div class="title">{{CHART_NAME}}</div>
         <img class="bg-img" src="{{CHART_IMAGE}}" alt="">
         <img class="bg-img" src="{{CHART_IMAGE}}" alt="">
-        <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 class="flex">
             <div style="float: left;">
             <div style="float: left;">
                 <div>长按识别小程序码</div>
                 <div>长按识别小程序码</div>