<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}}">
                {{item.sortNameEn}}{{item.sortName}}
            </a>
        </template>
    </div>
</template>

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

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

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

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

    .sidebar {
        position: fixed;
        width: 100%;
        background: $white;
        overflow-x: hidden;

        .item {
            position: relative;
            display: block;
            padding: 0 30px;
            width: 100%;
            height: 126px;
            line-height: 126px;
            font-size: 30px;
            font-weight: bold;

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

            &:last-child:after {
                content: none;
            }
        }

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

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