TODO: 反射

This commit is contained in:
eson
2023-06-28 19:32:41 +08:00
parent 0851c922ef
commit d4e75b1efc
27 changed files with 527 additions and 186 deletions

View File

@@ -0,0 +1,129 @@
{{$product_num := len .products}}
{{$page := 3}}
{{$page_total := add $page $product_num}}
{{range $arr := .products}}
{{$price := json_decode $arr.price_info}}
{{$price_html := .priceHtml}}
{{$price_html}}
{{if gt $arr.is_gift 0 }}{{/* */}}
<div class="box">
<div style="position: relative; margin-bottom: 30px;">
<p class="f-m" style="font-size: 39px; font-weight: 800; margin-bottom: 12px; line-height: 32px;">{{$arr.name}}</p>
<p class="f-b" style="font-size: 25px; font-weight: 800;line-height: 19px;">{{$arr.size}}</p>
<div class="logo">
<img src="https://fusenapi.kayue.cn:8010/storage/pdf/logo.svg" alt="logo">
</div>
</div>
<div class="img-box" style="height: 611px;margin-bottom: 32px; overflow: hidden;">
<div class="img" style="background-image: url({{$arr.img}});"></div>
</div>
<div>
<div class="pr-card big">
<p class="pr">FREE!</p>
<p class="num">{{$arr.num}}<span> Units</span></p>
</div>
<div>
<div class="card-box" style="display: inline-block;width: 183px;line-height: 36px;padding-left: 16px;margin-bottom: 4px;background-color: #C2C5CB;font-size: 18px; font-weight: 500;">Lead Time</div>
<div class="card-box" style="display: inline-block;width: 183px;height: 52px; padding-left: 15px;margin-bottom: 8px;background-color: #E0E2EB; font-weight: 600;">
<span style="font-size: 35px;line-height: 52px;">{{$arr.cycle}}</span><span style="font-size: 26px;line-height: 52px;">Days</span>
</div>
<div class="card-box more-card">
<span class="free">FREE </span><span class="text">Design</span>
</div>
<div class="card-box more-card">
<span class="free">FREE </span><span class="text">Storage</span>
</div>
<div class="card-box more-card" style="margin-bottom: 0;">
<span class="free">FREE </span><span class="text">Shipping</span>
</div>
</div>
</div>
</div>
{{else}}{{/* */}}
{{if $arr.size}}
// 有尺寸的
<div class="box">
<div style="position: relative; margin-bottom: 30px;">
<p class="f-m" style="font-size: 39px; font-weight: 800; margin-bottom: 12px; line-height: 32px;">{{$arr.name}}</p>
<p class="f-b" style="font-size: 25px; font-weight: 800;line-height: 19px;">{{$arr.size}}</p>
<div class="logo">
<img src="https://fusenapi.kayue.cn:8010/storage/pdf/logo.svg" alt="logo">
</div>
</div>
<div class="img-box" style="height: 611px;margin-bottom: 32px; overflow: hidden;">
<div class="img"
style="background-image: url({{$arr.img}});"></div>
</div>
<div>
<div class="card-box"
style="float: left; width: 530px;line-height: 36px;padding-left: 19px;margin-right: 8px;margin-bottom: 4px;background-color: #C2C5CB;font-size: 18px; font-weight: 500;">Unit Price (Tax included)</div>
<div class="card-box"
style="display: inline-block;width: 183px;line-height: 36px;padding-left: 16px;margin-bottom: 4px;background-color: #C2C5CB;font-size: 18px; font-weight: 500;">
Lead Time</div>
{{$price_html}}
<div>
<div class="card-box"
style="display: inline-block;width: 183px;height: 52px; padding-left: 15px;margin-bottom: 8px;background-color: #E0E2EB; font-weight: 600;">
<span style="font-size: 35px;line-height: 52px;">{{$arr.cycle}}</span><span
style="font-size: 26px;line-height: 52px;">Days</span>
</div>
<div class="card-box more-card">
<span class="free">FREE </span><span class="text">Design</span>
</div>
<div class="card-box more-card">
<span class="free">FREE </span><span class="text">Storage</span>
</div>
<div class="card-box more-card" style="margin-bottom: 0;">
<span class="free">FREE </span><span class="text">Shipping</span>
</div>
</div>
</div>
</div>
{{else}}
<div class="box">
<div style="position: relative; margin-bottom: 32px;">
<p class="f-m" style="font-size: 39px; font-weight: 800; margin-bottom: 3px; line-height: 32px;">
{{$arr.name}}</p>
<div class="logo">
<img src="https://fusenapi.kayue.cn:8010/storage/pdf/logo.svg" alt="logo">
</div>
</div>
<div class="img-box" style="height: 641px;margin-bottom: 31px; overflow: hidden;">
<div class="img" style="background-image: url({{$arr.img}});">
</div>
</div>
<div>
<div class="card-box"
style="float: left;width: 530px;line-height: 36px;padding-left: 19px;margin-right: 8px;margin-bottom: 4px;background-color: #C2C5CB;font-size: 18px; font-weight: 500;">
Unit Price (Tax included)</div>
<div class="card-box"
style="display: inline-block;width: 183px;line-height: 36px;padding-left: 16px;margin-bottom: 4px;background-color: #C2C5CB;font-size: 18px; font-weight: 500;">
Lead Time</div>
{{$price_html}}
<div>
<div class="card-box"
style="display: inline-block;width: 183px;height: 52px; padding-left: 15px;margin-bottom: 8px;background-color: #E0E2EB; font-weight: 600;">
<span style="font-size: 35px;line-height: 52px;">{{$arr.cycle}}</span><span
style="font-size: 26px;line-height: 52px;">Days</span>
</div>
<div class="card-box more-card">
<span class="free">FREE </span><span class="text">Design</span>
</div>
<div class="card-box more-card">
<span class="free">FREE </span><span class="text">Storage</span>
</div>
<div class="card-box more-card" style="margin-bottom: 0;">
<span class="free">FREE </span><span class="text">Shipping</span>
</div>
</div>
</div>
</div>
{{end}}
{{end}}
<div class="page-box" style="background-color: rgba(125, 125, 125, 0.16);color: #000;text-align: center;height: 50px;line-height: 50px;margin-top: 30px;">{{$page}}/{{$page_total}}</div>
{{$page = add $page 1}}
{{end}}

View File

@@ -0,0 +1,371 @@
{{$html := .demoHtml}}
{{$saler := .salerInfo}}
{{$info := .qutoInfo}}
<!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>quotation</title>
<style>
@font-face {
font-family: \'Montserrat\';
src: url(\'https://fusenapi.kayue.cn:8010/storage/font/Montserrat-VariableFont_wght.ttf\');
}
body {
margin: 0;
}
img {
max-width: 100%;
max-height: 100%;
}
#quotation-pdf-box {
font-family: \'Montserrat\';
image-rendering: -moz-crisp-edges;
image-rendering: -o-crisp-edges;
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
-ms-interpolation-mode: nearest-neighbor;
-webkit-font-smooting: antialiased;
}
#quotation-pdf-box div {
box-sizing: content-box;
}
#quotation-pdf-box p {
margin: 0;
}
#quotation-pdf-box .box {
margin: 0 auto;
width: 722px;
height: 938px;
overflow: hidden;
padding-top: 55px;
}
#quotation-pdf-box .box:last-child {
padding-top: 110px;
}
#quotation-pdf-box .logo {
height: 27px;
width: 118px;
position: absolute;
right: 0;
top: 2px;
}
#quotation-pdf-box .img-box {
background-color: #a4a4a4;
border-radius: 15px;
position: relative;
}
#quotation-pdf-box .img-box .img {
width: 100%;
height: 100%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
#quotation-pdf-box .text-box {
background-color: #ff7f00;
border-radius: 13px;
color: #fff;
}
#quotation-pdf-box .page-box {
background-color: rgba(125, 125, 125, 0.16);
text-align: center;
height: 50px;
line-height: 50px;
margin-top: 30px;
}
#quotation-pdf-box .card-box {
border-radius: 4px;
box-sizing: border-box;
}
#quotation-pdf-box .pr-card {
float: left;
width: 175px;
height: 156px;
margin-right: 3px;
color: #fff;
text-align: center;
position: relative;
}
#quotation-pdf-box .pr-card.big {
width: 530px;
height: 198px;
margin-right: 8px;
}
#quotation-pdf-box .pr-card::after {
border-bottom: 1px dashed #fff;
content: "";
width: 100%;
top: 97.67px;
left: 0;
height: 1px;
position: absolute;
}
#quotation-pdf-box .pr-card.big::after {
top: 120px;
}
#quotation-pdf-box .pr-card .pr {
width: 100%;
height: 98.67px;
border-radius: 7px;
background-color: #ff7f00;
line-height: 97.67px;
font-size: 50px;
font-weight: 800;
}
#quotation-pdf-box .pr-card.big .pr {
font-size: 97px;
font-weight: 850;
line-height: 120.85px;
height: 120.85px;
}
#quotation-pdf-box .pr-card .num {
width: 100%;
height: 58.31px;
border-radius: 7px;
background-color: #ff7f00;
line-height: 58.31px;
font-size: 26px;
font-weight: 800;
}
#quotation-pdf-box .pr-card.big .num {
font-size: 58px;
font-weight: 700;
line-height: 76.1px;
height: 76.1px;
}
#quotation-pdf-box .pr-card .num span {
font-size: 16px;
}
#quotation-pdf-box .pr-card.big .num span {
font-size: 38px;
}
#quotation-pdf-box .more-card {
display: inline-block;
width: 183px;
padding-left: 16px;
margin-bottom: 4px;
background-color: #47AA6C;
line-height: 30px;
font-size: 16px;
color: #fff;
}
#quotation-pdf-box .more-card .free {
font-weight: 800;
}
#quotation-pdf-box .more-card .text {
font-weight: 500;
}
#quotation-pdf-box .logos-list {
text-align: center;
height: 233px;
}
#quotation-pdf-box .logos-list .logo-item {
float: left;
width: 93px;
height: 64px;
margin-right: 10px;
margin-bottom: 18px;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
}
#quotation-pdf-box .logos-list .logo-item:nth-child(7n) {
margin-right: 0;
}
</style>
</head>
<body>
<div id="quotation-pdf-box">
<!-- 首页 -->
<div class="box">
<div style="position: relative; margin-bottom: 31px;">
<p class="f-m" style="font-size: 40px; font-weight: 600; margin-bottom: 4px; line-height: 39px;">
Custom
Packaging For</p>
<p class="f-b" style="font-size: 60px; font-weight: 600;line-height: 54px;">{{$info.canteen_name}}</p>
<div class="logo">
<img src="https://fusenapi.kayue.cn:8010/storage/pdf/logo.svg" alt="logo">
</div>
</div>
<div class="img-box" style="height: 558px;margin-bottom: 30px; overflow: hidden;">
<div class="img"
style="background-image: url({{$info.cover}});">
</div>
</div>
<div class="text-box" style="padding: 27px;padding-right: 21px;">
<p class="f-b" style="margin-bottom: 16px; font-size: 23px;line-height: 24px;font-weight: 800;">
Hi, I\'m
Victor from Fusenpack.</p>
<p class="f-b" style="margin-bottom: 19px; font-weight:300; font-size: 16px; line-height: 20px;">We
offer simple custom packaging solutions for restaurants with a minimum order quantity that\'s 5X
lower than regular suppliers. Check out our custom designs and prices on the following pages.
Contact me at if you have any questions. Thanks!</p>
<div style="margin-bottom: 6px;">
<div
style="width: 18px; height: 18px; margin-right: 9px; display: inline-block;position: relative;">
<img style="position: absolute;top: 4px;left: 0;"
src="https://fusenapi.kayue.cn:8010/storage/pdf/phone.svg" alt="">
</div>
<p class="f-b" style="font-size: 19px; display: inline-block; line-height: 13px;font-weight: 500;">
{{$saler.phone}}</p>
</div>
<div>
<div
style="width: 18px; height: 18px; margin-right: 9px; display: inline-block; position: relative;">
<img style="position: absolute;top: 3px;left: 0;"
src="https://fusenapi.kayue.cn:8010/storage/pdf/email.svg" alt="">
</div>
<p class="f-b" style="font-size: 19px; display: inline-block; line-height: 17px;font-weight: 500;">
{{$saler.email}}</p>
</div>
</div>
</div>
<!-- 首页结束 -->
<!-- <div class="page-box">1/6</div> -->
<!-- 对比页 -->
<div class="box">
<div style="position: relative; margin-bottom: 33px;">
<p class="f-m" style="font-size: 39px; font-weight: 800; margin-bottom: 4px; line-height: 39px;">
Why Custom Packaging?</p>
<div class="logo">
<img src="https://fusenapi.kayue.cn:8010/storage/pdf/logo.svg" alt="logo">
</div>
</div>
<div style="height: 865px; overflow: hidden; position: relative;">
<div style="width: 100%;height: 100%;">
<img src="https://fusenapi.kayue.cn:8010/storage/pdf/page_img_1.png" alt="">
</div>
</div>
</div>
<!-- 对比页结束 -->
<!-- <div class="page-box">2/6</div> -->
<!-- 其他物料页 -->
<!-- 其他物料页结束 -->
<!-- <div class="page-box">3/6</div> -->
<!-- 餐具套装页 -->
<!-- 餐具套装页结束 -->
<!-- <div class="page-box">4/6</div> -->
<!-- 服装页 -->
<!-- 服装页结束 -->
<!-- <div class="page-box">5/6</div> -->
{{$html}}
<!-- 尾页 -->
<div class="box">
<div style="height: 404px; overflow: hidden;position: relative;">
<div class="logo" style="height: 42px;width: 191px;left: 0;top: 0;">
<img src="https://fusenapi.kayue.cn:8010/storage/pdf/logo.svg" alt="logo">
</div>
<div
style="width: 100%;height: 100%;background: url(\'https://fusenapi.kayue.cn:8010/storage/pdf/page_img_2.png\') center no-repeat;background-size: contain;">
</div>
</div>
<div class="text-box" style="padding: 25px 23px 25px 31px;margin-bottom: 44px;">
<p class="f-b" style="margin-bottom: 34px; font-weight: 500; font-size: 16.15px; line-height: 20px;">
There\'s more! If you don\'t see what you need on these pages, please contact us to inquire about
additional items.</p>
<p style="font-size: 26px;font-weight: 700;line-height: 22px;margin-bottom: 10px;">{{$saler.name}}</p>
<div style="margin-bottom: 6px;">
<div
style="width: 18px; height: 18px; margin-right: 9px; display: inline-block;position: relative;">
<img style="position: absolute;top: 4px;left: 0;"
src="https://fusenapi.kayue.cn:8010/storage/pdf/phone.svg" alt="">
</div>
<p class="f-b" style="font-size: 19px; display: inline-block; line-height: 13px;font-weight: 500;">
{{$saler.phone}}</p>
</div>
<div>
<div
style="width: 18px; height: 18px; margin-right: 9px; display: inline-block; position: relative;">
<img style="position: absolute;top: 3px;left: 0;"
src="https://fusenapi.kayue.cn:8010/storage/pdf/email.svg" alt="">
</div>
<p class="f-b" style="font-size: 19px; display: inline-block; line-height: 17px;font-weight: 500;">
{{$saler.email}}</p>
</div>
</div>
<div class="text-box"
style="padding: 0 31px;display:inline-block;line-height: 35px;margin-bottom: 15px;font-size: 19px;font-weight: 700;text-align: center;border-radius: 5px;">
Our Customers:</div>
<div class="logos-list">
<div class="logo-item"
style="background-image: url(\'https://fusenapi.kayue.cn:8010/storage/pdf/page_logo_1.png\');"></div>
<div class="logo-item"
style="background-image: url(\'https://fusenapi.kayue.cn:8010/storage/pdf/page_logo_2.png\');"></div>
<div class="logo-item"
style="background-image: url(\'https://fusenapi.kayue.cn:8010/storage/pdf/page_logo_3.png\');"></div>
<div class="logo-item"
style="background-image: url(\'https://fusenapi.kayue.cn:8010/storage/pdf/page_logo_4.png\');"></div>
<div class="logo-item"
style="background-image: url(\'https://fusenapi.kayue.cn:8010/storage/pdf/page_logo_5.png\');"></div>
<div class="logo-item"
style="background-image: url(\'https://fusenapi.kayue.cn:8010/storage/pdf/page_logo_6.png\');"></div>
<div class="logo-item"
style="background-image: url(\'https://fusenapi.kayue.cn:8010/storage/pdf/page_logo_7.png\');"></div>
<div class="logo-item"
style="background-image: url(\'https://fusenapi.kayue.cn:8010/storage/pdf/page_logo_8.png\');"></div>
<div class="logo-item"
style="background-image: url(\'https://fusenapi.kayue.cn:8010/storage/pdf/page_logo_9.png\');"></div>
<div class="logo-item"
style="background-image: url(\'https://fusenapi.kayue.cn:8010/storage/pdf/page_logo_10.png\');"></div>
<div class="logo-item"
style="background-image: url(\'https://fusenapi.kayue.cn:8010/storage/pdf/page_logo_11.png\');"></div>
<div class="logo-item"
style="background-image: url(\'https://fusenapi.kayue.cn:8010/storage/pdf/page_logo_12.png\');"></div>
<div class="logo-item"
style="background-image: url(\'https://fusenapi.kayue.cn:8010/storage/pdf/page_logo_13.png\');"></div>
<div class="logo-item"
style="background-image: url(\'https://fusenapi.kayue.cn:8010/storage/pdf/page_logo_14.png\');"></div>
<div class="logo-item"
style="background-image: url(\'https://fusenapi.kayue.cn:8010/storage/pdf/page_logo_15.png\');"></div>
<div class="logo-item"
style="background-image: url(\'https://fusenapi.kayue.cn:8010/storage/pdf/page_logo_16.png\');"></div>
<div class="logo-item"
style="background-image: url(\'https://fusenapi.kayue.cn:8010/storage/pdf/page_logo_17.png\');"></div>
<div class="logo-item"
style="background-image: url(\'https://fusenapi.kayue.cn:8010/storage/pdf/page_logo_18.png\');"></div>
<div class="logo-item"
style="background-image: url(\'https://fusenapi.kayue.cn:8010/storage/pdf/page_logo_19.png\');"></div>
<div class="logo-item"
style="background-image: url(\'https://fusenapi.kayue.cn:8010/storage/pdf/page_logo_20.png\');"></div>
<div class="logo-item"
style="background-image: url(\'https://fusenapi.kayue.cn:8010/storage/pdf/page_logo_21.png\');"></div>
</div>
</div>
<!-- 尾页结束 -->
<!-- <div class="page-box">6/6</div> -->
</div>
</body>
</html>