<template>
    <div>
        <div class="channelMenuTitle_skin5" v-if="componentStyle == 1 || componentStyle == 2 || componentStyle == 3">
            新闻资讯
        </div>
        <div class="channelMenuList_skin5" v-if="componentStyle == 1">
            <div v-for="item in navigateData">
                <NuxtLink :to="{
                    path: `/${targetSegment}/${item.aLIas_pinyin}/list-1.html` }"
                    :class="{ active: targetSegment2 == item.aLIas_pinyin }"
                >
                    {{ item.alias }}
                </NuxtLink>
            </div>
        </div>
        <div class="channelMenuList_skin5 menuListStyle2" v-if="componentStyle == 2">
            <div v-for="item in navigateData">
                <NuxtLink :to="{
                    path: `/${targetSegment}/${item.aLIas_pinyin}/list-1.html` }"
                    :class="{ active: targetSegment2 == item.aLIas_pinyin }"
                >
                    {{ item.alias }}
                </NuxtLink>
            </div>
        </div>
        <div class="channelMenuList_skin5 menuListStyle3" v-if="componentStyle == 3">
            <div v-for="item in nav1" class="active">
                <NuxtLink :to="{
                    path: `/${targetSegment}/${item.aLIas_pinyin}/list-1.html` }"
                    :class="{ active: targetSegment2 == item.aLIas_pinyin }"
                >
                    {{ item.alias }}
                </NuxtLink>
            </div>
            <div v-for="item in nav2to8">
                <NuxtLink :to="{
                    path: `/${targetSegment}/${item.aLIas_pinyin}/list-1.html` }"
                    :class="{ active: targetSegment2 == item.aLIas_pinyin }"
                >
                    {{ item.alias }}
                </NuxtLink>
            </div>
        </div>
        <div class="menuListStyle4" v-if="componentStyle == 4">
            <div class="channelMenuListTitle">
                新闻资讯
            </div>
            <div class="hannelMenuListFloatMenu">
                <div v-for="item in nav1" class="active">
                    <NuxtLink :to="{
                        path: `/${targetSegment}/${item.aLIas_pinyin}/list-1.html` }"
                        :class="{ active: targetSegment2 == item.aLIas_pinyin }"
                    >
                        {{ item.alias }}
                    </NuxtLink>
                </div>
                <div v-for="item in nav2to8">
                    <NuxtLink :to="{
                        path: `/${targetSegment}/${item.aLIas_pinyin}/list-1.html` }"
                        :class="{ active: targetSegment2 == item.aLIas_pinyin }"
                    >
                        {{ item.alias }}
                    </NuxtLink>
                </div>
            </div>
        </div>
        <div class="menuListStyle4 menuListStyle5" v-if="componentStyle == 5">
            <div class="channelMenuListTitle">
                新闻资讯
            </div>
            <div class="hannelMenuListFloatMenu">
                <div v-for="item in nav1" class="active">
                    <NuxtLink :to="{
                        path: `/${targetSegment}/${item.aLIas_pinyin}/list-1.html` }"
                        :class="{ active: targetSegment2 == item.aLIas_pinyin }"
                    >
                        {{ item.alias }}
                    </NuxtLink>
                </div>
                <div v-for="item in nav2to8">
                    <NuxtLink :to="{
                        path: `/${targetSegment}/${item.aLIas_pinyin}/list-1.html` }"
                        :class="{ active: targetSegment2 == item.aLIas_pinyin }"
                    >
                        {{ item.alias }}
                    </NuxtLink>
                </div>
            </div>
        </div>
        <div class="menuListStyle4 menuListStyle6" v-if="componentStyle == 6">
            <div class="channelMenuListTitle">
                新闻资讯
            </div>
            <div class="hannelMenuListFloatMenu">
                <div v-for="item in nav1" class="active">
                    <NuxtLink :to="{
                        path: `/${targetSegment}/${item.aLIas_pinyin}/list-1.html` }"
                        :class="{ active: targetSegment2 == item.aLIas_pinyin }"
                    >
                        {{ item.alias }}
                    </NuxtLink>
                </div>
                <div v-for="item in nav2to8">
                    <NuxtLink :to="{
                        path: `/${targetSegment}/${item.aLIas_pinyin}/list-1.html` }"
                        :class="{ active: targetSegment2 == item.aLIas_pinyin }"
                    >
                        {{ item.alias }}
                    </NuxtLink>
                </div>
            </div>
        </div>
        <div class="menuListStyle7" v-if="componentStyle == 7">
            <div class="channelMenuListTitle"></div>
            <div class="hannelMenuListFloatMenu">
                <div v-for="item in nav1" class="active">
                    <NuxtLink :to="{
                        path: `/${targetSegment}/${item.aLIas_pinyin}/list-1.html` }"
                        :class="{ active: targetSegment2 == item.aLIas_pinyin }"
                    >
                        {{ item.alias }}
                    </NuxtLink>
                </div>
                <div v-for="item in nav2to8">
                    <NuxtLink :to="{
                        path: `/${targetSegment}/${item.aLIas_pinyin}/list-1.html` }"
                        :class="{ active: targetSegment2 == item.aLIas_pinyin }"
                    >
                        {{ item.alias }}
                    </NuxtLink>
                </div>
            </div>
        </div>
        <div class="menuListStyle7 menuListStyle8" v-if="componentStyle == 8">
            <div class="channelMenuListTitle"></div>
            <div class="hannelMenuListFloatMenu">
                <div v-for="item in nav1" class="active">
                    <NuxtLink :to="{
                        path: `/${targetSegment}/${item.aLIas_pinyin}/list-1.html` }"
                        :class="{ active: targetSegment2 == item.aLIas_pinyin }"
                    >
                        {{ item.alias }}
                    </NuxtLink>
                </div>
                <div v-for="item in nav2to8">
                    <NuxtLink :to="{
                        path: `/${targetSegment}/${item.aLIas_pinyin}/list-1.html` }"
                        :class="{ active: targetSegment2 == item.aLIas_pinyin }"
                    >
                        {{ item.alias }}
                    </NuxtLink>
                </div>
            </div>
        </div>
        <div class="menuListStyle7 menuListStyle9" v-if="componentStyle == 9">
            <div class="channelMenuListTitle"></div>
            <div class="hannelMenuListFloatMenu">
                <div v-for="item in nav1" class="active">
                    <NuxtLink :to="{
                        path: `/${targetSegment}/${item.aLIas_pinyin}/list-1.html` }"
                        :class="{ active: targetSegment2 == item.aLIas_pinyin }"
                    >
                        {{ item.alias }}
                    </NuxtLink>
                </div>
                <div v-for="item in nav2to8">
                    <NuxtLink :to="{
                        path: `/${targetSegment}/${item.aLIas_pinyin}/list-1.html` }"
                        :class="{ active: targetSegment2 == item.aLIas_pinyin }"
                    >
                        {{ item.alias }}
                    </NuxtLink>
                </div>
            </div>
        </div>
        <div class="menuListStyle7 menuListStyle9 menuListStyle8" v-if="componentStyle == 10">
            <div class="channelMenuListTitle"></div>
            <div class="hannelMenuListFloatMenu">
                <div v-for="item in nav1" class="active">
                    <NuxtLink :to="{
                        path: `/${targetSegment}/${item.aLIas_pinyin}/list-1.html` }"
                        :class="{ active: targetSegment2 == item.aLIas_pinyin }"
                    >
                        {{ item.alias }}
                    </NuxtLink>
                </div>
                <div v-for="item in nav2to8">
                    <NuxtLink :to="{
                        path: `/${targetSegment}/${item.aLIas_pinyin}/list-1.html` }"
                        :class="{ active: targetSegment2 == item.aLIas_pinyin }"
                    >
                        {{ item.alias }}
                    </NuxtLink>
                </div>
            </div>
        </div>
        <div class="menuListStyle11 " v-if="componentStyle == 11">
            <div class="channelMenuListTitle">
                <span>新闻资讯</span>
            </div>
            <div class="hannelMenuListFloatMenu">
                <div v-for="item in navigateData">
                    <NuxtLink :to="{
                        path: `/${targetSegment}/${item.aLIas_pinyin}/list-1.html` }"
                        :class="{ active: targetSegment2 == item.aLIas_pinyin }"
                    >
                        {{ item.alias }}
                    </NuxtLink>
                </div>
            </div>
        </div>
        <div class="menuListStyle12" v-if="componentStyle == 12">
            <div class="channelMenuListTitle">
                新闻资讯
            </div>
            <div class="hannelMenuListFloatMenu">
                <div v-for="item in nav1" class="active">
                    <NuxtLink :to="{
                        path: `/${targetSegment}/${item.aLIas_pinyin}/list-1.html` }"
                        :class="{ active: targetSegment2 == item.aLIas_pinyin }"
                    >
                        {{ item.alias }}
                    </NuxtLink>
                </div>
                <div v-for="item in nav2to8">
                    <NuxtLink :to="{
                        path: `/${targetSegment}/${item.aLIas_pinyin}/list-1.html` }"
                        :class="{ active: targetSegment2 == item.aLIas_pinyin }"
                    >
                        {{ item.alias }}
                    </NuxtLink>
                </div>
            </div>
        </div>
        <div class="menuListStyle13" v-if="componentStyle == 13">
            <div class="channelMenuListTitle">
                新闻资讯
            </div>
            <div class="hannelMenuListFloatMenu">
                <div v-for="item in nav1" class="active">
                    <NuxtLink :to="{
                        path: `/${targetSegment}/${item.aLIas_pinyin}/list-1.html` }"
                        :class="{ active: targetSegment2 == item.aLIas_pinyin }"
                    >
                        {{ item.alias }}
                    </NuxtLink>
                </div>
                <div v-for="item in nav2to8">
                    <NuxtLink :to="{
                        path: `/${targetSegment}/${item.aLIas_pinyin}/list-1.html` }"
                        :class="{ active: targetSegment2 == item.aLIas_pinyin }"
                    >
                        {{ item.alias }}
                    </NuxtLink>
                </div>
            </div>
        </div>
        <div class="menuListStyle14" v-if="componentStyle == 14">
            <div class="channelMenuListTitle">
                新闻资讯
            </div>
            <div class="hannelMenuListFloatMenu">
                <div v-for="item in nav1" class="active">
                    <NuxtLink :to="{
                        path: `/${targetSegment}/${item.aLIas_pinyin}/list-1.html` }"
                        :class="{ active: targetSegment2 == item.aLIas_pinyin }"
                    >
                        {{ item.alias }}
                    </NuxtLink>
                </div>
                <div v-for="item in nav2to8">
                    <NuxtLink :to="{
                        path: `/${targetSegment}/${item.aLIas_pinyin}/list-1.html` }"
                        :class="{ active: targetSegment2 == item.aLIas_pinyin }"
                    >
                        {{ item.alias }}
                    </NuxtLink>
                </div>
            </div>
        </div>
        <div class="menuListStyle15" v-if="componentStyle == 15">
            <div class="channelMenuListTitle">
                新闻资讯
            </div>
            <div class="hannelMenuListFloatMenu">
                <div v-for="item in nav1" class="active">
                    <NuxtLink :to="{
                        path: `/${targetSegment}/${item.aLIas_pinyin}/list-1.html` }"
                        :class="{ active: targetSegment2 == item.aLIas_pinyin }"
                    >
                        {{ item.alias }}
                    </NuxtLink>
                </div>
                <div v-for="item in nav2to8">
                    <NuxtLink :to="{
                        path: `/${targetSegment}/${item.aLIas_pinyin}/list-1.html` }"
                        :class="{ active: targetSegment2 == item.aLIas_pinyin }"
                    >
                        {{ item.alias }}
                    </NuxtLink>
                </div>
            </div>
        </div>
        <div class="menuListStyle16" v-if="componentStyle == 16">
            <div class="channelMenuListTitle">
                新闻资讯
            </div>
            <div class="hannelMenuListFloatMenu">
                <div v-for="item in nav1" class="active">
                    <NuxtLink :to="{
                        path: `/${targetSegment}/${item.aLIas_pinyin}/list-1.html` }"
                        :class="{ active: targetSegment2 == item.aLIas_pinyin }"
                    >
                        {{ item.alias }}
                    </NuxtLink>
                </div>
                <div v-for="item in nav2to8">
                    <NuxtLink :to="{
                        path: `/${targetSegment}/${item.aLIas_pinyin}/list-1.html` }"
                        :class="{ active: targetSegment2 == item.aLIas_pinyin }"
                    >
                        {{ item.alias }}
                    </NuxtLink>
                </div>
            </div>
        </div>
        <div class="menuListStyle17" v-if="componentStyle == 17">
            <div class="channelMenuListTitle">
                新闻资讯
            </div>
            <div class="hannelMenuListFloatMenu">
                <div class="active">
                    二级导航标题
                </div>
                <div v-for="item in navigateData">
                    <NuxtLink :to="{
                        path: `/${targetSegment}/${item.aLIas_pinyin}/list-1.html` }"
                        :class="{ active: targetSegment2 == item.aLIas_pinyin }"
                    >
                        {{ item.alias }}
                    </NuxtLink>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
//引入vue
import { ref } from 'vue';
//获得新闻数据
const props = defineProps({
    componentStyle: Number,//样式编号
    navigateData: Array,//子导航数据
    routeId: Number//导航对应的cid
});
//获得导航名称
const title = ref("")
const mkdata = await requestDataPromise('/web/getOneWebsiteCategory', {
    method: 'GET',
    query: {
        'catid': props.routeId,
    },
});
if (mkdata.code == 200) {
    if (mkdata.data.parent_name) {
        title.value = mkdata.data.parent_name;
    } else {
        title.value = mkdata.data.alias;
    }
}
//获取当前url路径
const route = useRoute();
//获得当前的完整路径
const fullPath = route.path;
const segments = fullPath.split('/');
const targetSegment = segments[1];
const targetSegment2 = segments[2];
//判断当前为第几层的列表页
// const routeLevel = ref(0);
// if(route.name == "dir-list-id"){
//     routeLevel.value = 1;
//     console.log("当前的路由层级为：" + routeLevel.value);
// }
// if(route.name == "dir-dir-list-id"){
//     routeLevel.value = 2;
//     console.log("当前的路由层级为：" + routeLevel.value);
// }
//截取导航
const nav1 = props.navigateData.slice(0, 1);
const nav2to8 = props.navigateData.slice(1, 8);
</script>

<style lang="less" scoped>
//基本样式
.channelMenuTitle_skin5 {
    width: 1200px;
    height: 32px;
    line-height: 32px;
    font-size: 24px;
    color: #A72213;
    font-weight: bold;
    text-align: center;
    background: url('http://192.168.1.234:19000/pre/image/png/20251216/1765875852538846.png') no-repeat center center;
    margin-bottom: 25px;
}
.channelMenuList_skin5 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #333;
    border-bottom: 2px solid #A72213;
    div {
        font-size: 16px;
        font-weight: bold;
        width: 120px;
        height: 22px;
        height: 40px;
        line-height: 22px;
        &:first-child {
            a {
                color: #A72213;
            }
        }
        a {
            color: #333;
        }
    }
}
//样式2
.menuListStyle2 {
    border-bottom: 0;
}
//样式3
.menuListStyle3 {
    border-bottom: 0;
    div {
        text-align: center;
    }
    .active {
        border-bottom: 2px solid #A72213;
    }
}
//样式4
.menuListStyle4 {
    margin-top: 22px;
    position: relative;
    .channelMenuListTitle {
        font-size: 24px;
        font-weight: bold;
        height: 54px;
        color: #A72213;
        border-bottom: 2px solid #A72213;
    }
    .hannelMenuListFloatMenu {
        position: absolute;
        display: flex;
        flex-wrap: wrap;
        font-weight: bold;
        top: 7px;
        right: 0;
        div {
            a {
                font-size: 12px;
                color: #333333;
            }
            width: 128px;
            text-align: center;
            background: url(https://img.bjzxtw.org.cn/pre/image/png/20251111/1762826937324284.png) no-repeat right 2px;
            &:last-child {
                background: none;
            }
            &.active {
                color: #A72213
            }
        }
    }
}
//样式5
.menuListStyle5 {
    margin-top: 34px;
    .channelMenuListTitle {
        border-bottom: none;
    }
}
//样式6
.menuListStyle6 {
    .channelMenuListTitle {
        width: 100px;
        border-bottom: 2px solid #A72213;
    }
}
//样式7
.menuListStyle7 {
    margin-top: 30px;
    position: relative;
    padding-bottom: 15px;
    border-bottom: 2px solid #E4E4E4;
    .channelMenuListTitle {
        background: url(http://192.168.1.234:19000/pre/image/png/20251216/1765872781316856.png) no-repeat center center;
        width: 200px;
        height: 40px;
    }
    .hannelMenuListFloatMenu {
        position: absolute;
        display: flex;
        flex-wrap: wrap;
        font-size: 12px;
        color: #333333;
        font-weight: bold;
        top: 12px;
        right: 0;
        div {
            width: 123px;
            font-size: 16px;
            text-align: center;
            font-weight: bold;
            a {
                color: #333;
            }
            &:last-child {
                background: none;
            }
            &.active {
                a {
                    color: #A72213
                }
            }
        }
    }
}
//样式8
.menuListStyle8 {
    border-bottom: none;
}
//样式9
.menuListStyle9 {
    .hannelMenuListFloatMenu {
        div {
            width: 123px;
            font-size: 16px;
            text-align: center;
            font-weight: bold;
            height: 43px;
            &:last-child {
                background: none;
            }
            &.active {
                color: #A72213;
                border-bottom: 2px solid #A72213;
            }
        }
    }
}
//样式11
.menuListStyle11 {
    width: 1200px;
    height: 61px;
    display: flex;
    background-color: #A72213;
    color: #fff;
    margin-top: 20px;
    .channelMenuListTitle {
        width: 144px;
        height: 51px;
        text-align: center;
        background-color: #fff;
        color: #A72213;
        margin-top: 10px;
        margin-left: 35px;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
        span {
            display: inline-block;
            font-size: 16px;
            font-weight: bold;
            padding: 10px 0;
            box-sizing: border-box;
            border-bottom: 2px solid #A72213;
        }
    }
    .hannelMenuListFloatMenu {
        width: 925px;
        height: 21px;
        margin-top: 23px;
        padding: 0 50px 0 45px;
        display: flex;
        justify-content: space-between;
        font-size: 16px;
        font-weight: bold;
        div {
            width: 122px;
            height: 21px;
            text-align: center;
            cursor: pointer;
            a {
                color:#fff
            }
            &.active {
                a {
                    color: #A72213
                }
            }
        }
    }
}
//样式12
.menuListStyle12 {
    margin-top: 12px;
    position: relative;
    padding-bottom: 20px;
    border-bottom: 1px solid #d9d9d9;
    display: flex;
    .channelMenuListTitle {
        width: 153px;
        height: 52px;
        line-height: 52px;
        text-align: center;
        font-size: 18px;
        font-weight: bold;
        color: #fff;
        background: url(http://192.168.1.234:19000/pre/image/png/20251216/1765873231599082.png) no-repeat left 0px;
    }
    .hannelMenuListFloatMenu {
        margin-left: 15px;
        width: 1030px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        font-size: 16px;
        color: #333333;
        font-weight: bold;
        height: 52px;
        line-height: 60px;
        div {
            width: 96px;
            padding: 0 15px;
            padding-bottom: 9px;
            text-align: center;
            a {
                color: #333;
            }
            &.active {
                color: #A72213;
                border-bottom: 2px solid #A72213;
                a {
                    color: #A72213;
                }
            }
        }
    }
}
//样式13
.menuListStyle13 {
    margin-top: 24px;
    position: relative;
    padding-bottom: 20px;
    display: flex;
    .channelMenuListTitle {
        width: 160px;
        height: 50px;
        line-height: 55px;
        text-align: center;
        font-size: 20px;
        font-weight: bold;
        color: #fff;
        background: url(http://192.168.1.234:19000/pre/image/png/20251216/1765873422831357.png) no-repeat left 0px;
        background-size: 100% 100%;
    }
    .hannelMenuListFloatMenu {
        margin-left: 15px;
        width: 1030px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        font-size: 16px;
        color: #333333;
        font-weight: bold;
        height: 52px;
        line-height: 60px;
        div {
            width: 96px;
            padding: 0 15px;
            padding-bottom: 9px;
            text-align: center;
            a {
                color: #333;
            }
        }
    }
}
//样式14
.menuListStyle14 {
    margin-top: 17px;
    position: relative;
    padding-bottom: 20px;
    display: flex;
    .channelMenuListTitle {
        position: absolute;
        top: 0;
        left: 0;
        width: 182px;
        height: 67px;
        line-height: 67px;
        text-align: center;
        font-size: 22px;
        font-weight: bold;
        color: #fff;
        background: url(http://192.168.1.234:19000/pre/image/png/20251216/1765875208713581.png) no-repeat left 0px;
    }
    .hannelMenuListFloatMenu {
        margin-left: 166px;
        margin-top: 11px;
        width: 1035px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        font-size: 16px;
        color: #333333;
        height: 55px;
        line-height: 60px;
        background-color: #fafafa;
        div {
            width: 96px;
            padding: 0 15px;
            padding-bottom: 9px;
            text-align: center;
            background: url(https://img.bjzxtw.org.cn/pre/image/png/20251111/1762837676175916.png) no-repeat right 22px;
            a {
                color: #333;
            }
            &:last-child {
                background: none;
            }
        }
    }
}
//样式15
.menuListStyle15 {
    width: 1200px;
    height: 60px;
    margin-top: 24px;
    position: relative;
    padding-bottom: 20px;
    display: flex;
    background: url(http://192.168.1.234:19000/pre/image/png/20251216/1765875445449836.png) no-repeat left 0px;
    .channelMenuListTitle {
        width: 180px;
        height: 50px;
        line-height: 55px;
        text-align: center;
        font-size: 20px;
        font-weight: bold;
        color: #fff;
    }
    .hannelMenuListFloatMenu {
        margin-left: 15px;
        width: 1030px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        font-size: 16px;
        font-weight: bold;
        height: 52px;
        line-height: 60px;
        div {
            width: 96px;
            padding: 0 15px;
            padding-bottom: 9px;
            text-align: center;
            a {
                color: #A72213;
            }
        }
    }
}
//样式16
.menuListStyle16 {
    width: 1200px;
    height: 44px;
    margin-top: 24px;
    position: relative;
    display: flex;
    border-bottom: 2px solid #A72213;
    .channelMenuListTitle {
        position: absolute;
        top: 0;
        left: 0;
        width: 188px;
        height: 44px;
        line-height: 44px;
        text-align: center;
        font-size: 20px;
        font-weight: bold;
        color: #fff;
        background: url(http://192.168.1.234:19000/pre/image/png/20251216/1765873847989871.png) no-repeat left 0px;
    }
    .hannelMenuListFloatMenu {
        margin-left: 175px;
        width: 1030px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        font-size: 16px;
        color: #333333;
        font-weight: bold;
        height: 45px;
        line-height: 45px;
        div {
            width: 96px;
            padding: 0 15px;
            padding-bottom: 9px;
            text-align: center;
            a {
                color: #333;
            }
        }
    }
}
//样式17
.menuListStyle17 {
    width: 1200px;
    height: 46px;
    margin-top: 24px;
    position: relative;
    display: flex;
    border-bottom: 2px solid #A72213;
    .channelMenuListTitle {
        width: 120px;
        height: 46px;
        line-height: 46px;
        text-align: center;
        font-size: 20px;
        font-weight: bold;
        color: #fff;
        background-color: #A72213;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
    }
    .hannelMenuListFloatMenu {
        padding-left: 20px;
        width: 1080px;
        height: 46px;
        line-height: 46px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        font-size: 16px;
        font-weight: bold;
        color: #333333;
        background-color: #fafafa;
        border-top: 1px solid #d9d9d9;
        border-right: 1px solid #d9d9d9;
        div {
            width: 98px;
            padding: 0 15px;
            padding-bottom: 9px;
            text-align: center;
            background: url(https://img.bjzxtw.org.cn/pre/image/png/20251111/1762839905257434.png) no-repeat right 15px;
            a {
                color: #333;
            }
            &:last-child {
                background: none;
            }
        }
    }
}
</style>
