首页 > 建站‧营销

觅分类原版海报下载样式


觅分类原版海报下载样式代码如下:

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>{$t['title']} - 生成海报</title>
        <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" />
        <script src="/public/js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
        <script src='/public/js/qrcode.min.js'></script>
        <script src="/public/js/html2canvas.js"></script>
        <script src='/public/layer/layer.js'></script>
        <style type="text/css" media="all">
          ::-webkit-scrollbar{display:none}
          ::-moz-placeholder{color:#aaa}
          ::-webkit-input-placeholder{color:#aaa}
          :-ms-input-placeholder{color:#aaa}
          ::selection{background:#111;color:#fff;font-weight:700}
          select{appearance:none;-moz-appearance:none;-webkit-appearance:none;outline:0;background:0 0;border:none;width:100%}
          body,html{color:#333;margin:0;height:100%;font-family:myriad set pro,helvetica neue,Helvetica,Arial,Verdana,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-weight:400}
          *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
          a{text-decoration:none;color:#000}
          a,button,input,label,select{-webkit-tap-highlight-color:transparent}
          img{width:100%;height:auto;display:block;border:0}
          body{background-color:#fff;color:#373b4e}
          blockquote,body,button,dd,div,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,html,input,legend,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0}
          a{text-decoration:none;color:#08acee}
          button{outline:0}
          img{border:0}
          button,input,optgroup,select,textarea{margin:0;font:inherit;color:inherit;outline:0}
          li{list-style:none}
          a{color:#666}
          h2{font-size:16px}
          body{margin:0 auto;max-width:800px}
          .mifenlei{background-color:#ff5722;padding:10px}
          .mifenlei .shang{background-color:#fff;padding:10px;border-radius:10px}
          .mifenlei .shang .logo{text-align:center}
          .mifenlei .shang .logo img{width:120px}
          .mifenlei .shang .title{font-size:18px;font-weight:700;color:#ff5722;margin-top:20px}
          .mifenlei .shang .tag{margin-top:20px}
          .mifenlei .shang .tag span{background-color:#ff5722;margin-right:10px;padding:2px 10px 2px 10px;color:#f0f8ff}
          .mifenlei .shang .com{margin-top:20px}
          .mifenlei .shang .img{display:flex;align-items:center;flex-wrap:wrap;background-color:#fff;margin-top:20px;max-height:100px;overflow:auto}
          .mifenlei .shang .img img{box-sizing:border-box;width:calc(100% / 4);text-align:center;padding:2px;position:relative}
          .mifenlei .xia{height:140px}
          .mifenlei .xia .ma{padding:10px;position:absolute;border:2px solid #000;background-color:#f0f8ff;border-radius:10px}
          .mifenlei .xia .ma img{width:100px;height:100px}
          .mifenlei .xia .text{margin-left:140px;margin-top:20px}
          .mifenlei .xia .text p{line-height:31px;color:#f0f8ff}
          .an{margin-top:20px;text-align:center}
          .an a{background-color:#ff5722;padding:5px 10px 5px 10px;color:#f0f8ff}
          .footer{bottom:0;width:100%;height:52px;cursor:pointer}
          .footer>div{width:100%;height:52px;background-color:#008e06;width:100%;line-height:52px;color:#f0f8ff}
        </style>
    </head>
    <body>
        <section class="mifenlei-flexView">
                <div class="mifenlei" id="mifenlei">
                    <div class="shang">
                        <div class="logo">
                            <img src="{:set('logo')}">
                        </div>
                        <div class="title">
                            {$t['title']}
                        </div>
                        <div class="tag">
                            <span>{:fun_cate_diqu($t.sid, 'name')}</span>
                            <span>{:fun_cate_m($t.tid, 'name')}</span>
                            {foreach name=":json_model(fun_model(input('m'), 'config'))" item="v" key="k"}
                            <!-- 有2就是内容显示 -->
                            {if socha(json_model_v($v,'dingyi'), 2) == 1}
                            <span>{$t[json_model_v($v,'zhiduan')]}</span>
                            {/if}
                            {/foreach}
                             
                        </div>
                        <div class="com">
                            {:cut_c(htmlspecialchars_decode($t['content']))}
                        </div>
                        <div class="img">
                            {volist name=":skujson($t.pics)" id="vo" length='4'}
                            <img src="{$vo.name}"  alt="{$vo.name}">
                            {/volist} 
                        </div>
                    </div>
                    <div class="xia">
                        <div class="ma">
                            <div align="center" id="qrcode"></div>
                            <script>
                			(function() {
                				var qrcode = new QRCode('qrcode', {
                					text: '{:http().$_SERVER['HTTP_HOST'].url("index/index/html",array("m"=>$t.m,"id"=>$t.id))}',
                					width: 100,
                					height: 100,
                					colorDark : '#000000',
                					colorLight : '#ffffff',
                					correctLevel : QRCode.CorrectLevel.H
                				}
                			 );
                			}
                			)()
                		    </script>
                        </div>
                        <div class="text">
                            <p>电话:{$t.phone}</p>
                            <p>长按识别二维码</p>
                            <p>{:set('title')}</p>
                            <p>{:http().$_SERVER['HTTP_HOST']}</p>
                        </div>
                    </div>
                </div>
                <div class="an">
                    <a href="javascript:;" class="set" color="#FF5722">1</a>
                    <a href="javascript:;" class="set" style="background-color: #000000;" color="#000000">2</a>
                    <a href="javascript:;" class="set" style="background-color: #2196F3;" color="#2196F3">3</a>
                    <a href="javascript:;" class="set" style="background-color: #e91e63;" color="#e91e63">4</a>
                    <a href="javascript:;" class="set" style="background-color: #673ab7;" color="#673ab7">5</a>
                    <a href="javascript:;" class="set" style="background-color: #00bcd4;" color="#00bcd4">6</a>
                    <a href="javascript:;" class="set" style="background-color: #4caf50;" color="#4caf50">7</a>
                    <a href="javascript:;" class="set" style="background-color: #086d9a;" color="#086d9a">8</a>
                    <a href="javascript:;" class="set" style="background-color: #ff9800;" color="#ff9800">9</a>
                    <a href="javascript:;" class="set" style="background-color: #795548;" color="#795548">10</a>
                </div>
                <div style="height: 70px;"></div>
                <div class="an footer" style="text-align: center;">
                    <div href="javascript:;" class="ok" style="background-color: #008e06;">保存海报</div>
                </div>
            </section>
        </section>
        <script>
         $(function () {
            //将Base64转成Blob的形式
            function dataURLtoBlob(dataurl) {
                let arr = dataurl.split(',')
                let mime = arr[0].match(/:(.*?);/)[1]
            
                let bstr = atob(arr[1])
                let n = bstr.length
                let u8arr = new Uint8Array(n)
                while (n--) {
                    u8arr[n] = bstr.charCodeAt(n)
                }
                return new Blob([u8arr], { type: mime })
            }
            //将blob转换为file
            function blobToFile(theBlob, fileName){
                theBlob.lastModifiedDate = new Date();
                theBlob.name = fileName;
                return theBlob;
            }
            function sumitImageFile(base64Codes,myURL){ 
                var form=document.forms[0];  
                var formData = new FormData(); 
                formData.append("file",dataURLtoBlob(base64Codes),myURL); 
                //ajax 提交form  
                $.ajax({  
                    url : '/index.php/index/api/up.html?m={$t.m}&id={$t.id}',  //上传的接口
                    type : "POST",  
                    data : formData,  
                    dataType:"text",  
                    processData : false,         // 告诉jQuery不要去处理发送的数据  
                    contentType : false,        // 告诉jQuery不要去设置Content-Type请求头  
                    success:function(res){ 
                        obj = JSON.parse(res);
                        if (obj.code == '1') {
                            location.href="?img="+obj.path;
                        } else {
                            return layer.msg('生成失败');
                        }
                    }  
                });  
            }
            $(".set").click(function(){
                $(".mifenlei").css("background-color",$(this).attr("color"));
                $(".title").css("color",$(this).attr("color"));
                $(".tag span").css("background-color",$(this).attr("color"));
            });
            $(".ok").click(function(){
                html2canvas($(".mifenlei")[0], {
                backgroundColor: "transparent",
                useCORS: true 
                }).then(function(canvas){
                    imgUri = canvas.toDataURL();
                    console.log(imgUri);//生成base64的编码图片
                    sumitImageFile(imgUri,'xiazai.jpg')
                })
            });
        });
        </script>
    </body>
</html>

本文链接:https://zhanque.net/cms/2841.html