layui json渲染页面

最新推荐文章于 2023-05-24 14:31:47 发布
周同学_web
最新推荐文章于 2023-05-24 14:31:47 发布
阅读量1.2k
点赞数
CC 4.0 BY-SA版权
文章标签： layui html
本文链接：https://blog.youkuaiyun.com/zhouhouyong_web/article/details/110430409
页面渲染

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>中国数字联盟</title>
    <link rel="stylesheet" href="../../jslibs/layui-v2.5.6/layui/css/layui.css">
</head>
<body class="layui-layout-body">
    <div class="layui-layout layui-layout-admin">
        <div class="layui-header header">
            <a href="javascript:history.back(-1)" class="goback"><i class="layui-icon layui-icon-left" style="font-size: 18px; color: #fff;"></i></a>
            <ul class="layui-nav layui-layout-center">
                <li class="layui-nav-item">首页</li>
            </ul>
        </div>
        <div class="layui-body">
            <!-- 内容主体区域 -->
            <script id="App" type="text/html">
                <div class="longLogo-group">
                    <a class="longLogo" href="">
                        <img src="{{d.longLogo}}" alt="数字联盟"><span>{{d.longLogotext}}</span>
                    </a>
                </div>
                <div class="itemList">
                    <h3 class="recommend">推荐APP</h3>
                    <ul>
                        {{#  layui.each(d.appList, function(index, item){ }}
                        <li class="lit">
                            <div class="layui-inline logo">
                                <img src="{{item.logo}}" class="layui-circle">
                            </div>
                            <div class="content">
                                <h3 class="appname">{{item.appName}}</h3>
                                <div class="companyName">{{item.companyName}}</div>
                                <div class="introduction">{{item.introduction}}</div>
                            </div>
                        </li>
                        {{#  }); }}
                        {{#  if(d.list.length === 0){ }}
					    	无数据
					  {{#  } }}
                    </ul>
                </div>
            </script>
            <div id="List"></div>
        </div>
    </div>


    <script src="../../jslibs/layui-v2.5.6/layui/layui.js"></script>
    <script>
        //JavaScript代码区域
        layui.use('laytpl', function(){
            var laytpl = layui.laytpl;

            var templateContent = document.getElementById('App').innerHTML;
            var data = { //数据
                    "longLogo":"../slogan/mainLogo.png",
                    "longLogotext":"中创时代数字联盟",
                    "appList":[{
                            "appName":"中创时代数字联盟",// app名称
                            "appNo":"", // app编号
                            "longLogo":"", // 图+文logo
                            "logo":"../slogan/mainLogo.png", // 图形logo
                            "downloadUrl":"", // 下载地址
                            "startUrl":"", // 手机系统打开app的url
                            "companyID":"", // 公司ID
                            "companyName":"凯立达", // 公司名称
                            "introduction":"中创时代数字联盟,中创时代企业app,中创时代数字联盟,中创时代企业app,中创时代数字联盟,中创时代企业app,中创时代数字联盟,中创时代企业app", // 简介 200字以内
                            "sortNo":"" // 顺序号
                        }]
                };
            laytpl(templateContent).render(data, function(html){document.getElementById('List').innerHTML = html;});
        });
    </script>
    <style>
        .layui-layout-center {
            position: absolute!important;
            left: 50%;
            top: 0;
            margin-left: -34px;
        }
        .header .goback{
            margin-top: 22px;
            margin-left: 10px;
            display: inline-block;
            vertical-align: top;
        }
        .longLogo-group{
            text-align: center;
            padding:20px;
        }
        .longLogo img {
            width: 68px;
        }
        .longLogo span{
            font-size: 16px;
            margin-left: 5px;
            font-weight: bold;
            color: #5FB878;
        }
        .layui-body{
            left: 0px;
            bottom: 0px;
        }
        .itemList{
            margin-top: 10px;
        }
        .itemList .recommend{
            font-size: 16px;
            color: #393D49;
            padding: 10px 10px;
            background: #f5f5f5;
        }
        .itemList .logo{
            width: 200px;
        }
        .itemList .logo img{
            width: 100%;
        }
        .itemList ul .lit{
            padding: 10px 10px;
            border-bottom: solid 8px #f5f5f5;
            display: flex;
            justify-content: flex-start;
            align-items: center;
        }
        .itemList ul .lit .content{
            padding-left: 10px;
        }
        .itemList ul .lit .appname{
            font-size: 18px;
            color: #393D49;
            font-weight:bold;
        }
        .itemList ul .lit .companyName{
            font-size: 16px;
            color: #666;
            margin-top: 5px;
        }
        .itemList ul .lit .introduction{
            font-size: 14px;
            color: #999;
            line-height: 22px;
            margin-top: 5px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            overflow: hidden;
        }
    </style>
</body>
</html>