master

分支 (1)

管理

管理

master

Timo-html
/
home.html

<html>
<head>
    <title>TIMO后台</title>
    <meta charset="utf-8">
    <link rel="shortcut icon" href="./images/favicon.ico" type="image/x-icon">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <!-- 引入css -->
    <link rel="stylesheet" href="./css/plugins/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
    <link rel="stylesheet" href="./lib/layui-v2.3.0/css/layui.css" media="all">
    <link rel="stylesheet" href="./css/main.css" media="all">
    <style>
        body {
            background-color: #FFFFFF;
        }

        .chat-panel {
            width: 640px;
            height: 500px;
            position: absolute;
            top: 50%;
            left: 50%;
            background-color: #f5f5f5;
            transform: translate(-50%, -50%);
            -webkit-transform: translate(-50%, -50%);
            box-shadow: 0 1px 7px 2px rgba(0, 0, 0, 0.14);
            -webkit-box-shadow: 0 1px 7px 2px rgba(0, 0, 0, 0.14);
        }

        .chat-panel .chat-head {
            height: 40px;
            color: #FFFFFF;
            font-size: 18px;
            line-height: 40px;
            text-align: center;
            background-color: #7d7d7d;
        }

        .chat-panel .chat-head .layui-icon {
            line-height: 40px;
            float: right;
            margin-right: 12px;
        }

        .chat-panel .chat-record {
            overflow: auto;
            padding: 0 16px;
        }

        .chat-panel .chat-record .item {
            overflow: hidden;
            margin: 14px 0;
        }

        .chat-panel .chat-record .item.left div {
            float: left;
        }

        .chat-panel .chat-record .item.left .sign {
            border-color: transparent #ffc664 transparent transparent;
        }

        .chat-panel .chat-record .item.left .msg {
            color: #834105;
            background-color: #ffc664;
        }

        .chat-panel .chat-record .item.right div {
            float: right;
            border-color: transparent transparent transparent #9eea6a;
        }

        .chat-panel .chat-record .item.right .msg {
            background-color: #9eea6a;
        }

        .chat-panel .chat-record .picture {
            width: 40px;
            height: 40px;
            background-size: cover;
        }

        .chat-panel .chat-record .sign {
            width: 0;
            height: 0;
            margin-top: 6px;
            border: 5px solid;
        }

        .chat-panel .chat-record .msg {
            font-size: 16px;
            display: inline-block;
            padding: 7px 12px;
            border-radius: 2px;
            line-height: 22px;
        }

        .chat-panel .chat-record .msg a {
            color: #095eab;
            text-decoration: underline;
        }

        .chat-panel .chat-record .img img {
            width: 80px;
            margin: 0 10px;
        }

        .picture-left {
            background-image: url(./images/chat-left-picture.jpg);
        }

        .picture-right {
            background-image: url(./images/chat-right-picture.jpg);
        }
    </style>
<link id="layuicss-layer" rel="stylesheet" href="http://127.0.0.1:8080/lib/layui-v2.3.0/css/modules/layer/default/layer.css?v=3.1.1" media="all">
</head>
<body>
    <div class="chat-panel">
        <div class="chat-head">小懒虫<i class="layui-icon layui-icon-close"></i></div>
        <div class="chat-record"></div>
    </div>

<script src="./lib/layui-v2.3.0/layui.js" charset="utf-8"></script>
<script src="./js/main.js" charset="utf-8"></script>
<script type="text/javascript">
    var record = [{
        type: 1,
        img: true,
        msg: "<img src='./images/chat-single-dog.png'>"
    }, {
        type: 2,
        msg: "TIMO后台模板是基于Layui(<a href='https://www.layui.com'>https://www.layui.com</a>)\n模板二次开发，更多模板样式请到Layui官网查看！"
    }, {
        type: 1,
        msg: "(◕ᴗ◕)是免费的吗？"
    }, {
        type: 2,
        msg: "本项目是采用了Apache Licence 2.0开源协议，\n是开源免费的哦！\n" +
        "开源地址：<a href='https://gitee.com/aun/Timo'>https://gitee.com/aun/Timo-html</a>"
    }, {
        type: 1,
        img: true,
        msg: "<img src='./images/char-ccmiao.png'>"
    }];

    layui.use(['jquery'], function () {
        var $ = layui.jquery;
        var chatRecord = $(".chat-record");
        record.forEach(function (item) {
            chatRecord.append(addMsg(item));
        });

        function addMsg(item) {
            var type = item.type === 1 ? "left" : "right";
            var picture = item.type === 1 ? "picture-left" : "picture-right";
            if (item.img !== true) {
                return "<div class='item " + type + "'><div class='picture " + picture + "'></div>"
                    + "<div class='sign'></div><div class='msg'><pre>" + item.msg + "</pre></div></div>";
            } else {
                return "<div class='item " + type + "'><div class='picture " + picture + "'></div>"
                    + "<div class='img'>" + item.msg + "</div></div>";
            }
        }
    });
</script>
</body>
</html>