<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
	<th:block th:include="include :: header('首页排版')" />
    <style>
        .home_page {
            display: flex;
            justify-content: center;
            padding: 20px;
        }
        .left_content, .right_content {
            font-size: 16px;
            font-weight: 600;
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .left_title, .right_title {
            margin-bottom: 12px;
        }
        .function_area {
            position: relative;
        }
        .function_area .kingAreaMode {
            position: absolute;
            width: 373px;
            height: 246px;
            background: rgba(0,0,0,0);
            left: 1px;
            top: 104px;
            cursor: pointer;
        }
        .kingAreaMode span, .searchAreaModeSp {
            /* display: inline-block; */
            position: relative;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            text-align: center;
            line-height: 18px;
            border: 2px solid yellowgreen;
            right: -358px;
            top: -10px;
            color: yellowgreen;
            cursor: pointer;
            display: none;
        }
        .kingAreaMode:hover,.searchAreaMode:hover {
            border-radius: 8px;
            border: 2px dashed yellowgreen;
        }
        .kingAreaMode:hover .kingAreaModeSp,.searchAreaMode:hover .searchAreaModeSp {
            display: inline-block;
        }
        .searchAreaMode {
            position: absolute;
            width: 373px;
            height: 46px;
            background: rgba(0,0,0,0);
            left: 1px;
            top: 56px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="home_page">
        <div class="left_content">
            <div class="left_title">
                营销组件
            </div>
            <div class="function_btn">
                <button type="button" class="btn btn-primary" onclick="goArea(1)">金刚位</button>
                <button type="button" class="btn btn-warning" onclick="goArea(2)">活动banner</button>
                <button type="button" class="btn btn-info" onclick="goArea(3)">限时秒杀</button>
                <button type="button" class="btn btn-success" onclick="goArea(4)">魔方</button>
                <button type="button" class="btn" onclick="goArea(5)">搜索</button>
                <button type="button" class="btn" onclick="goArea(6)">顶部banner</button>
                <button type="button" class="btn" onclick="goArea(7)">精选商品</button>
            </div>
        </div>
        <div class="right_content">
            <div class="right_title">
                选择区域
            </div>
            <div class="function_area" style="position: relative;">
                <div class="searchAreaMode">
                    <span class="searchAreaModeSp" onclick="delSearchAreaModeSpp()">X</span>
                </div>
                <div class="kingAreaMode">
                    <span class="kingAreaModeSp" onclick="delKingAreaModeSp()">X</span>
                </div>
                <iframe src="http://172.16.2.214:8080/#/goods/home?place=admin" width="375" height="896" frameborder="0"></iframe>
            </div>
            
        </div>
    </div>
    <th:block th:include="include :: footer"/>
    <script th:inline="javascript">
        var prefix2 = ctx + "local";
        function goArea (num) {
            switch(num) {
                case 1:
                    $.modal.openTab('金刚位', prefix2 + "/kingArea?id=" + 1212)
                    break;
                case 5:
                    $.modal.openTab('商品搜索', prefix2 + "/searchStore?id=" + 1212)
                    break;
                case 6:
                    $.modal.openTab('顶部banner', prefix2 + "/topBanner?id=" + num)
                    break;
                case 2:
                    $.modal.openTab('活动banner', prefix2 + "/topBanner?id=" + num)
                    break;
                case 4:
                    $.modal.openTab('魔方位', prefix2 + "/RubikArea?id=" + num)
                    break;
                case 7:
                    $.modal.openTab('精选商品', prefix2 + "/carefullyGoods?id=" + num)
                    break;
            }
        }
        function delKingAreaModeSp () {
            console.log($('.goods-banner-props'), '有吗')
        }
    </script>
</body>
</html>