bhouseWeb/themes/hugo-lamp/layouts/collection/list.html

{{ define "main" }}

<amp-script layout="container" height="4096" src="/js/cz_filter.js">

<div class="page-wrapper">
    <div class="container mb-5">
        <section class="section15" style="padding-top:60px;">
            <div class="text-center mb-4">
                <div class="title"><b>{{ .Title }}</b></div>
            </div>
        </section>
        
        <!-- 手機版 -->
        <div class="d-block d-md-none">
            <div class="row mb-1">
                <div class="col-2">
                    類型
                </div>
                <div class="col-10">
                    <input class="type ms-1" type="radio" id="m_全部類型" name="m_type" value="全部類型" checked/>
                    <label for="m_全部類型">全部</label>
                
                    <input class="type ms-1" type="radio" id="m_大樓" name="m_type" value="大樓" />
                    <label for="m_大樓">大樓</label>

                    <input class="type ms-1" type="radio" id="m_透天" name="m_type"  value="透天" />
                    <label for="m_透天">透天</label>
                </div>
            </div>
            <div class="row mb-1">
                <div class="col-2">
                    坪數
                </div>
                <div class="col-10">
                    <input class="ping ms-1" type="radio" id="m_全部坪數" name="m_ping" value="全部坪數" checked/>
                    <label for="m_全部坪數">全部</label>    
                
                    <input class="ping ms-1" type="radio" id="m_20坪以下" name="m_ping" value="20坪以下" />
                    <label for="m_20坪以下">20坪以下</label>    
                
                    <input class="ping ms-1" type="radio" id="m_20-35坪" name="m_ping" value="20-35坪" />
                    <label for="m_20-35坪">20-35坪</label>    
                
                    <input class="ping ms-1" type="radio" id="m_36-50坪" name="m_ping" value="36-50坪" />
                    <label for="m_36-50坪">36-50坪</label>    
                
                    <input class="ping ms-1" type="radio" id="m_51坪以上" name="m_ping" value="51坪以上" />
                    <label for="m_51坪以上">51坪以上</label>
                </div>
            </div>
            <div class="row mb-1">
                <div class="col-2">
                    預算
                </div>
                <div class="col-10">
                    <input class="budget ms-1" type="radio" id="m_全部預算" name="m_budget" value="全部預算" checked/>
                    <label for="m_全部預算">全部</label>    
                
                    <input class="budget ms-1" type="radio" id="m_59萬以下" name="m_budget" value="59萬以下" />
                    <label for="m_59萬以下">59萬以下</label>    
                
                    <input class="budget ms-1" type="radio" id="m_60-79萬" name="m_budget" value="60-79萬" />
                    <label for="m_60-79萬">60-79萬</label>    
                
                    <input class="budget ms-1" type="radio" id="m_80-99萬" name="m_budget" value="80-99萬" />
                    <label for="m_80-99萬">80-99萬</label>    
                
                    <input class="budget ms-1" type="radio" id="m_100萬以上" name="m_budget" value="100萬以上" />
                    <label for="m_100萬以上">100萬以上</label>
                </div>
            </div>
            <div class="row mb-1">
                <div class="col-2">
                    格局
                </div>
                <div class="col-10">
                    <input class="rooms ms-1" type="radio" id="m_全部格局" name="m_rooms" value="全部格局" checked/>
                    <label for="m_全部格局">全部</label>    
                
                    <input class="rooms ms-1" type="radio" id="m_兩房" name="m_rooms" value="兩房" />
                    <label for="m_兩房">兩房</label>    
                
                    <input class="rooms ms-1" type="radio" id="m_三房" name="m_rooms" value="三房" />
                    <label for="m_三房">三房</label>    
                
                    <input class="rooms ms-1" type="radio" id="m_四房" name="m_rooms" value="四房" />
                    <label for="m_四房">四房</label>    
                
                    <input class="rooms ms-1" type="radio" id="m_四房以上" name="m_rooms" value="四房以上" />
                    <label for="m_四房以上">四房以上</label>
                </div>
            </div>
            <div class="update_div col-md-12">
                <div class="update_info row row-cols-1 row-cols-sm-3">
                    {{ $paginator := .Paginate .Data.Pages }}
                    {{ range $paginator.Pages }}
                    <div class="col">                
                        <div class="card h-100">
                            <a class="link-collection" href="{{ .RelPermalink }}">
                                <amp-img
                                    alt="{{ .Title }}"
                                    src="{{ .Params.Image | relURL }}"
                                    height="1"
                                    width="1.4"
                                    layout="responsive">
                                </amp-img>
                            </a>
                            <div class="card-body">
                                <a class="link-collection" href="{{ .RelPermalink }}">
                                    <div class="title-size"><b>{{ .Title }}</b></div>
                                </a>
                                <p class="card-text" style="color:#4D4D4D;">{{ .Description | safeHTML }}</p>
                            </div>
                        </div>
                    </div>
                    {{ end }}
                </div>
            </div>
        </div>
        <!-- 電腦版 -->
        <div class="d-none d-md-block">
            <div class="row">
                <div class="col-md-3">
                    <div class="mb-4 list-group">
                        <div class="list-group-item list-group-item-action active" aria-current="true">
                            類型
                        </div>
                        <div class="list-group-item list-group-item-action">
                            <input class="type ms-1" type="radio" id="全部類型" name="type" value="全部類型" checked/>
                            <label for="全部類型">全部</label>
                        </div>
                        <div class="list-group-item list-group-item-action">
                            <input class="type ms-1" type="radio" id="大樓" name="type" value="大樓" />
                            <label for="大樓">大樓</label>
                        </div>
                        <div class="list-group-item list-group-item-action">
                            <input class="type ms-1" type="radio" id="透天" name="type" value="透天" />
                            <label for="透天">透天</label>
                        </div>
                    </div>
                    <div class="mb-4 list-group">
                        <div class="list-group-item list-group-item-action active" aria-current="true">
                            坪數
                        </div>
                        <div class="list-group-item list-group-item-action">
                            <input class="ping ms-1" type="radio" id="全部坪數" name="ping" value="全部坪數" checked/>
                            <label for="全部坪數">全部</label>    
                        </div>
                        <div class="list-group-item list-group-item-action">
                            <input class="ping ms-1" type="radio" id="20坪以下" name="ping" value="20坪以下" />
                            <label for="20坪以下">20坪以下</label>    
                        </div>
                        <div class="list-group-item list-group-item-action">
                            <input class="ping ms-1" type="radio" id="20-35坪" name="ping" value="20-35坪" />
                            <label for="20-35坪">20-35坪</label>    
                        </div>
                        <div class="list-group-item list-group-item-action">
                            <input class="ping ms-1" type="radio" id="36-50坪" name="ping" value="36-50坪" />
                            <label for="36-50坪">36-50坪</label>    
                        </div>
                        <div class="list-group-item list-group-item-action">
                            <input class="ping ms-1" type="radio" id="51坪以上" name="ping" value="51坪以上" />
                            <label for="51坪以上">51坪以上</label>    
                        </div>
                    </div>
                    <div class="mb-4 list-group">
                        <div class="list-group-item list-group-item-action active" aria-current="true">
                            預算
                        </div>
                        <div class="list-group-item list-group-item-action">
                            <input class="budget ms-1" type="radio" id="全部預算" name="budget" value="全部預算" checked/>
                            <label for="全部預算">全部</label>
                        </div>
                        <div class="list-group-item list-group-item-action">
                            <input class="budget ms-1" type="radio" id="59萬以下" name="budget" value="59萬以下" />
                            <label for="59萬以下">59萬以下</label>
                        </div>
                        <div class="list-group-item list-group-item-action">
                            <input class="budget ms-1" type="radio" id="60-79萬" name="budget" value="60-79萬" />
                            <label for="60-79萬">60-79萬</label>
                        </div>
                        <div class="list-group-item list-group-item-action">
                            <input class="budget ms-1" type="radio" id="80-99萬" name="budget" value="80-99萬" />
                            <label for="80-99萬">80-99萬</label>
                        </div>
                        <div class="list-group-item list-group-item-action">
                            <input class="budget ms-1" type="radio" id="100萬以上" name="budget" value="100萬以上" />
                            <label for="100萬以上">100萬以上</label>
                        </div>
                    </div>
                    <div class="list-group">
                        <div class="list-group-item list-group-item-action active" aria-current="true">
                            格局
                        </div>
                        <div class="list-group-item list-group-item-action">
                            <input class="rooms ms-1" type="radio" id="全部格局" name="rooms" value="全部格局" checked/>
                            <label for="全部格局">全部</label>
                        </div>
                        <div class="list-group-item list-group-item-action">
                            <input class="rooms ms-1" type="radio" id="兩房" name="rooms" value="兩房" />
                            <label for="兩房">兩房</label>
                        </div>
                        <div class="list-group-item list-group-item-action">
                            <input class="rooms ms-1" type="radio" id="三房" name="rooms" value="三房" />
                            <label for="三房">三房</label>
                        </div>
                        <div class="list-group-item list-group-item-action">
                            <input class="rooms ms-1" type="radio" id="四房" name="rooms" value="四房" />
                            <label for="四房">四房</label>
                        </div>
                        <div class="list-group-item list-group-item-action">
                            <input class="rooms ms-1" type="radio" id="四房以上" name="rooms" value="四房以上" />
                            <label for="四房以上">四房以上</label>
                        </div>
                    </div>
                </div>
                <div class="col-md-9">
                    <!-- 更新內容區塊 -->
                    <div class="update_info row row-cols-1 row-cols-sm-3">
                        {{ $paginator := .Paginate .Data.Pages }}
                        {{ range $paginator.Pages }}
                        <div class="col">                
                            <div class="card h-100">
                                <a class="link-collection" href="{{ .RelPermalink }}">
                                    <amp-img
                                        alt="{{ .Title }}"
                                        src="{{ .Params.Image | relURL }}"
                                        height="1"
                                        width="1.4"
                                        layout="responsive">
                                    </amp-img>
                                </a>
                                <div class="card-body">
                                    <a class="link-collection" href="{{ .RelPermalink }}">
                                        <div class="title-size"><b>{{ .Title }}</b></div>
                                    </a>
                                    <p class="card-text" style="color:#4D4D4D;">{{ .Description | safeHTML }}</p>
                                </div>
                            </div>
                        </div>
                        {{ end }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</amp-script>

{{ end }}