<template>
    <div class="sidebar">
        <template v-for="item in list">
            <template v-if="item.separativeSign === 'Y'">
                <div class="sep">
                    <!-- 分割线 -->
                </div>
            </template>
            <a class="item ellipsis" href="{{item.sortUrl}}">
                <span class="en">{{(item.sortNameEn || '').trim()}}</span>
                <span class="cn">{{item.sortName}}</span>
            </a>
        </template>
    </div>
</template>

<script>
    const $ = require('jquery');

    module.exports = {
        data() {
            return {
                list: []
            };
        },
        created() {
            $.ajax({
                url: '/sidebar'
            }).then((res) => {
                this.list = res.data;
            });
        }

        // ,
        // ready() {
        //     var a =document.querySelector('.sidebar')
        //     alert(a.getBoundingClientRect().width)
        // }
    };
</script>

<style>
    @import "../../scss/common/color";

    html {
        font-size: 60px !important;
        overflow-x: hidden;
    }

    #sidebar {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        overflow-x: hidden;
        overflow-y: auto;
        background: #f6f6f6;
    }

    .sidebar {
        background: $white;

        .item {
            position: relative;
            display: block;
            padding: 0 30px;
            height: 124px;
            line-height: 124px;
            font-size: 30px;
            font-weight: bold;
            font-family: "BrownStd-Bold", "PingFang SC", Helvetica, Roboto, "Heiti SC", "黑体", Arial;

            .en {
                font-size: 36px;
            }

            .cn {
                margin-left: -6px;
            }

            &:first-child {
                font-size: 36px;
                height: 142px;
                line-height: 142px;
                font-family: "PingFang SC", Helvetica, Roboto, "Heiti SC", "黑体", Arial;
            }

            &:after {
                content: "";
                position: absolute;
                left: 30px;
                bottom: 0;
                width: 100%;
                height: 0;
                border-bottom: 1px solid #eee;
            }

            &:last-child {
                border-bottom: 1px solid #eee;

                &:after {
                    content: none;
                }
            }
            
            &:hover,
            &:active {
                background: $black;
                color: $white;

                &:after {
                    border-bottom: 1px solid $black;
                }   
            }
        }

        .sep {
            margin-top: -1px;
            width: 100%;
            height: 20px;
            background: #f6f6f6;
            border-top: 1px solid #eee;
            border-bottom: 1px solid #eee;

            & + .item {
                font-size: 36px;
                height: 142px;
                line-height: 142px;
                font-family: "PingFang SC", Helvetica, Roboto, "Heiti SC", "黑体", Arial;
            }
        }
    }

    .app.ios {
        .sidebar {
            margin-top: 40px;
        }
    }
</style>