<!DOCTYPE html>
<html lang="en">
<!-- dir="rtl"-->


<head>
    <!-- Required meta tags  -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <title>HaoSNS</title>
    <!-- <link rel="icon" type="image/png" href="assets/img/favicon.png"> -->

    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Outfit:wght@100..900&display=swap" rel="stylesheet">
    <style>
        :root {
            --adminuiux-content-font: "Open Sans", sans-serif;
            --adminuiux-content-font-weight: 400;
            --adminuiux-title-font: "Outfit", sans-serif;
            --adminuiux-title-font-weight: 600;
        }
    </style>

    <!-- <script src="core/vue.global.prod.min.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.5.21/vue.global.min.js"></script>
<link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
  />
<script>
    document.title = '';
    // 获取页面标题
    document.addEventListener("DOMContentLoaded", () => {
        axios.get(api.configGetconfigUrl, {
            params: {
                
            }
        }).then(res => {
            document.title = res.data.data.shop_name
        })
    })
</script>
<script defer src="/template/use/mobile/assets/js/app.js?3b597d0b729635069a47"></script><link href="/template/use/mobile/assets/css/app.css?3b597d0b729635069a47" rel="stylesheet"></head>
    <style>
    .nav-tabs .nav-link.active {
        background-color: transparent;
        border-color: transparent;
    }

    .nav-link {
        padding: 4px 6px;
    }
</style>
<style>
    .bottomBorder {
        border-bottom: 2px solid #ff6666;
        color: black !important;
        font-weight: bold;
    }

    .offcanvas.offcanvas-top {
        top: 55px;
    }

    .offcanvas-backdrop.show {
        opacity: 0;
    }

    .offcanvas-header,
    .offcanvas-body {
        padding: 5px;
    }

    .haosns-tabs .nav-item .nav-link {
        /* padding: 5px 0; */
        padding: 0 5px;
    }

    .haosns-tabs .nav-item .active {
        /* border-bottom: 2px solid var(--bs-nav-tabs-link-active-border-color); */
    }

    .myBtn {
        border-radius: 5px;
    }

    .container-fluid {
        /* border-bottom: 1px solid var(--bs-navbar-toggler-border-color); */
    }

    .alert {
        padding: 5px 10px;
        margin: 0 10px;
    }

    #indexPageHeader {
        position: relative;
        left: -38px;
    }

    .myCard {
        padding: 10px 5px 0 5px;
    }

    .myCard2 {
        padding: 10px 20px;
    }

    .follow-btn {
        color: var(--adminuiux-theme-1);
        border: 1px solid var(--adminuiux-theme-1);
        border-radius: 20px;
    }

    [data-bs-theme=dark] .follow-btn {
        color: #fff;
        border: 1px solid #fff;
        border-radius: 20px;
    }

    .content img {
        width: 100%;
        border-radius: 10px;
    }

    .myRow1 .col {
        padding: 2px;
    }

    .noRound img {
        /* 取消圆角图片 */
        border-radius: 0;
    }

    .noScrollBar::-webkit-scrollbar {
        display: none;
    }

    /* 为 IE、Edge 和 Firefox 隐藏滚动条 */
    .noScrollBar {
        -ms-overflow-style: none;
        /* IE and Edge */
        scrollbar-width: none;
        /* Firefox */
    }

    .nav .nav-item .nav-link .bottomBar {
        display: none;
    }

    .nav .nav-item .active .bottomBar {
        display: block;
    }
</style>
        <style>
    /* 基础样式重置 */
    /* * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    } */

    /* body {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-color: #f5f5f5;
        padding: 20px;
    } */

    /* .container {
        text-align: center;
        max-width: 500px;
        width: 100%;
        background: white;
        padding: 30px;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    } */

    /* h1 {
        color: #333;
        margin-bottom: 30px;
        font-size: 24px;
    }

    .button-group {
        display: flex;
        flex-direction: column;
        gap: 15px;
        width: 100%;
        margin-bottom: 20px;
    }

    button {
        padding: 12px 20px;
        border: none;
        border-radius: 8px;
        font-size: 16px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    button:hover {
        transform: translateY(-2px);
    }

    .btn-primary {
        background-color: #4285f4;
        color: white;
    }

    .btn-success {
        background-color: #0f9d58;
        color: white;
    }

    .btn-error {
        background-color: #ea4335;
        color: white;
    }

    .btn-warning {
        background-color: #fbbc05;
        color: #333;
    } */

    /* Toast 样式 - 已修改为居中显示 */
    .toast-container {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 9999;
        display: flex;
        flex-direction: column;
        gap: 10px;
        align-items: center;
    }

    .toast {
        padding: 12px 20px;
        border-radius: 8px;
        color: white;
        font-size: 14px;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
        opacity: 0;
        transform: scale(0.9);
        transition: all 0.3s ease;
        max-width: 80vw;
        word-break: break-word;
        text-align: center;
    }

    .toast.show {
        opacity: 1;
        transform: scale(1);
    }

    .toast-primary {
        background-color: rgba(66, 133, 244, 0.9);
    }

    .toast-success {
        background-color: rgba(15, 157, 88, 0.9);
    }

    .toast-error {
        background-color: rgba(234, 67, 53, 0.9);
    }

    .toast-warning {
        background-color: rgba(251, 188, 5, 0.9);
        color: #333;
    }
</style>



<script>
    // 初始化toast容器
    function initToastContainer() {
        let container = document.querySelector('.toast-container');
        if (!container) {
            container = document.createElement('div');
            container.className = 'toast-container';
            document.body.appendChild(container);
        }
        return container;
    }

    /**
     * 显示toast提示
     * @param {string} message - 提示消息内容
     * @param {number} duration - 显示时长(毫秒)，默认2000ms
     * @param {string} type - 提示类型，可选值：primary, success, error, warning
     */
    function showToast(message, duration = 2000, type = 'primary') {
        if(message == '登录超时，请重新登录' || message == '请求参数缺token'){
            return;
        }
        const container = initToastContainer();

        // 创建toast元素
        const toast = document.createElement('div');
        toast.className = `toast toast-${type}`;
        toast.textContent = message;

        // 添加到容器
        container.appendChild(toast);

        // 触发显示动画
        setTimeout(() => {
            toast.classList.add('show');
        }, 10);

        // 自动关闭
        setTimeout(() => {
            toast.classList.remove('show');
            // 动画结束后移除元素
            setTimeout(() => {
                container.removeChild(toast);
            }, 300);
        }, duration);
    }
</script>

            <style>
                .div-fixed {
                    position: fixed;
                }

                .nowBG {
                    background-color: var(--adminuiux-bg-1);
                }

                .myAlert {
                    border-radius: 10px;
                }

                .render_html p {
                    margin-bottom: auto;
                }

                .content img{
                    max-height: 300px;
                    width: auto;
                }
            </style>

            <body
                class="main-bg main-bg-opac roundedui adminuiux-header-standard adminuiux-sidebar-standard theme-blue adminuiux-header-transparent adminuiux-sidebar-fill-white bg-gradient-3 scrollup"
                data-theme="theme-blue" data-sidebarfill="adminuiux-sidebar-fill-white" data-bs-spy="scroll"
                data-bs-target="#list-example" data-bs-smooth-scroll="true" tabindex="0"
                data-sidebarlayout="adminuiux-sidebar-standard" data-headerlayout="adminuiux-header-standard"
                data-headerfill="adminuiux-header-transparent" data-bggradient="bg-gradient-3">
                <div id="app">
                    <!-- Pageloader -->
<div id="loader" class="pageloader">
    <div class="container h-100">
        <div class="row justify-content-center align-items-center text-center h-100">
            <div class="col-12 mb-auto pt-4"></div>
            <div class="col-auto">
                <img src="https://haodds.oss-cn-shanghai.aliyuncs.com/oss/aliyun/uploads/images/20250523203057c85fc6773.png"  class="maxwidth-100 mx-auto mb-3">
                <p class="h6 mb-0">HaoSNS社交系统</p>
                <!-- <p class="h2 text-theme-1 mb-4">赣州乐易网络科技有限公司</p> -->
                <div class="loader5 mb-2 mx-auto"></div>
            </div>
            <div class="col-12 mt-auto pb-4">
                <p class="text-secondary">页面加载中...</p>
            </div>
        </div>
    </div>
</div>

                        
<!-- standard header -->

<header style="height: 50px;" class="adminuiux-header">
    <!-- Fixed navbar -->
    <nav style="padding: 2px 0;" class="navbar fixed-top navbar-expand-sm z-index-5 shadow-none ">
        <div class="container-fluid ">


            <!-- logo -->
            <a class="navbar-brand" href="#">
                <img  data-bs-img="light" src="https://haodds.oss-cn-shanghai.aliyuncs.com/oss/aliyun/uploads/images/20250523203057c85fc6773.png" alt="">
                <img data-bs-img="dark" src="https://haodds.oss-cn-shanghai.aliyuncs.com/oss/aliyun/uploads/images/20250523203057c85fc6773.png" alt="">
                
            </a>


            <div class=" ms-auto "></div>
            <ul class="nav nav-tabs adminuiux-tabs haosns-tabs" id="indexPageHeader" role="tablist">
                <li class="nav-item" role="presentation">
                    <div class="nav-link" @click="nav_index = 0;jumpFollow();" id="home-tab" data-bs-toggle="tab" data-bs-target="#home-tab-pane" type="button" role="tab" aria-controls="home-tab-pane" aria-selected="true">关注
                        <div class="bottomBar" style="width: 100%;height: 2px;background-color: rgba(var(--adminuiux-theme-1-rgb), 1);">

                        </div>
                    </div>
                </li>
                <li class="nav-item" role="presentation">
                    <div class="nav-link active" @click="nav_index = 1;jumpPrefer();" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile-tab-pane" type="button" role="tab" aria-controls="profile-tab-pane" aria-selected="false">推荐
                        <div class="bottomBar" style="width: 100%;height: 2px;background-color: rgba(var(--adminuiux-theme-1-rgb), 1);">

                        </div>
                    </div>
                </li>
                <li class="nav-item" role="presentation">
                    <div class="nav-link" @click="nav_index = 2;jumpNear();" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact-tab-pane" type="button" role="tab" aria-controls="contact-tab-pane" aria-selected="false">附近
                        <div class="bottomBar" style="width: 100%;height: 2px;background-color: rgba(var(--adminuiux-theme-1-rgb), 1);">

                        </div>
                    </div>
                </li>
                
            </ul>

            <!-- right icons button -->
            <div class="ms-auto">
               
                <!-- global search toggle -->
                <button onclick="loc.jump('haosns-search-article.html')" class="btn btn-link btn-square btn-icon btn-link-header d-inline-block d-xxl-none" type="button" onclick="openSearch()">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
                </button>

            </div>
        </div>
    </nav>
    <div style="width: 100%;height: 63px;"></div>
</header>

                            <!-- 关注区域 -->
                            <div :class="retClass('show', 'd-none', 0, nav_index)">
                                <!-- 列表 -->
                                <div v-for="(item, index) in allArticle" :key="'allArticle' + index"
                                    @click="jump(`haosns-article-detail.html?id=${item.id}`)"
                                    class="flex flex-column mx-2 card myCard2 pb-2 mt-2 px-2">
                                    <!-- 用户栏 -->
                                    <div class="flex flex-1 align-items-center">
                                        <!-- <div @click.stop="jump('haosns-user-detail.html')"
                                            class="avatar avatar-40 coverimg rounded-circle ">
                                            <img class="w-auto"
                                                src="https://haodds-1251208851.cos.ap-shanghai.myqcloud.com/oss/qcloud/uploads/images/20250527141100838684416.jpg"
                                                alt="" data-extentions-extra-ocr-id="1799a7602b1dc301f67a50fe3d661260"
                                                style="display: none;">
                                        </div> -->

                                        <img @click.stop="jump(`haosns-user-detail.html?id=${item.user.id}`)"
                                            class="avatar avatar-40 coverimg rounded-circle" :src="item.user.avatar" />
                                        <div @click.stop="jump(`haosns-user-detail.html?id=${item.user.id}`)"
                                            class="flex flex-1 flex-column px-2">
                                            <span class="font">
                                                {{ item.user.nickname }}
                                                <img style="width: 28px;"
                                                :src="item.user == null || item.user.user_level == null ? '' : item.user.user_level.image"
                                                alt="">
                                            </span>
                                            
                                            <span class="font-small">
                                                来自{{ returnTerminal(item) }} {{ item.interaction }}人互动过
                                            </span>
                                        </div>
                                        <div>
                                            <span @click.stop="submitUser(item, item.user.id)"
                                                v-if="item.is_follow == 0" class="font follow-btn px-2 py-1">+ 关注</span>
                                            <span @click.stop="submitUser(item, item.user.id)"
                                                v-if="item.is_follow == 1" class="font follow-btn px-2 py-1">已关注</span>
                                        </div>
                                    </div>

                                    <!-- 文章 -->
                                    <div class="font p-2 content">
                                        <p v-if="item.title != ''" class="font-lg">{{ item.title }}</p>
                                        <div class="render_html" v-html="myCutHtml(item.content, 100)">

                                        </div>
                                        <img style="max-width: 100%;" v-if="Array.isArray(item.image) && item.image.length == 1"
                                            :src="item.image[0]">
                                        <img style="max-width: 100%;" v-else-if="item.video_cover != ''" :src="item.video_cover" alt="">
                                        <div style="max-width: 100%;" v-else-if="Array.isArray(item.image) && item.image.length > 1"
                                            class="container-fluid">
                                            <div class="row myRow1">
                                                <div v-for="(item2, index2) in item.image" :key="'item.image' + index2"
                                                    class="col-4" style="padding: 1px;">
                                                    <img class="widthToHeight object-fit-cover"
                                                        style="border-radius: 0;" :src="item2" alt="">
                                                </div>

                                            </div>
                                        </div>


                                        <!-- 投票 -->
                                        <div v-for="(item2, index2) in (item == null ? [] : item.vote)" :key="'item.vote' + index" class="flex flex-column">
                                
                                            <!-- 单选投票 -->
                                            <div v-if="item2.type == 1" class="card card-body flex flex-column mx-2 my-2" style="border-radius: 10px;">
                                                <div class="flex align-center">
                                                    <span class="font font-weight-bold">投票</span>
                                                    <span class="font ml-2">{{ item2.title }}</span>
                                                </div>
                                                
                                                <ul class="list-group adminuiux-list-group mt-2 border-0">                                             <!-- active -->
                                                    <li  v-for="(item3, index3) in item2.options" :key="'item2.options' + index3" :class="item3.is_select == 1 ? 'active list-group-item  font' : 'list-group-item  font'" style="border-radius: 10px;" >
                                                        <div class="flex align-center justify-between">
                                                            <div class="flex align-center">
                                                                <i v-if="item3.is_select == 1" class="bi bi-check-lg mr-1"></i>
                                                                <span>{{ item3.name }}</span>
                                                            </div>
                                                            <span>{{ item3.number }}票</span>
                                                        </div>
                                                        
                                                    </li>
                                                    
                                                </ul>
            
                                                <div class="flex align-center justify-between mt-2">
                                                    <span class="font-sm text-gray">{{ item2.allCount }}人参与</span>
                                                    <span class="font-sm text-gray">单选</span>
                                                </div>
                                            </div>
                                            <!-- 多选投票 -->
                                            <div v-if="item2.type == 2" class="card card-body flex flex-column mx-2 my-2" style="border-radius: 10px;">
                                                <div class="flex align-center">
                                                    <span class="font font-weight-bold">投票</span>
                                                    <span class="font ml-2">{{ item2.title }}</span>
                                                </div>
                                                
                                                <ul class="list-group adminuiux-list-group mt-2 border-0">                                             <!-- active -->
                                                    <li v-for="(item3, index3) in item2.options" :key="'item2.options' + index3" :class="item3.is_select == 1 ? 'active list-group-item  font' : 'list-group-item  font'" style="border-radius: 10px;" >
                                                        <div class="flex align-center justify-between">
                                                            <div class="flex align-center">
                                                                <i v-if="item3.is_select == 1" class="bi bi-check-lg mr-1"></i>
                                                                <span>{{ item3.name }}</span>
                                                            </div>
                                                            <span>{{ item3.number }}票</span>
                                                        </div>
                                                        
                                                    </li>
                                                    
                                                </ul>
            
                                                <div class="flex align-center justify-between mt-2">
                                                    <span class="font-sm text-gray">{{ item2.allCount }}票</span>
                                                    <span class="font-sm text-gray">多选</span>
                                                </div>
                                            </div>
                                            <!-- PK投票 -->
                                            <p  v-if="item2.type == 3"  class="font ml-2 mt-2"  >{{ item2.title }}</p>
                                            <div v-if="item2.type == 3"  class="flex align-center justify-between mx-2 my-2">
                                                <div  style="width: calc(50% - 10px);background-color: #fff8f6;" class="font text-gray text-center py-1">
                                                    {{ item2.options[0].name }}
                                                </div>
                                                <div style="width: calc(50% - 10px);background-color: #f6f9ff;" class="font text-gray text-center py-1">
                                                    {{ item2.options[1].name }}
                                                </div>
                                                
                                            </div>
                                            <!-- PK投票 -->
                                            <div v-if="item2.type == 3" class="flex mx-2" style="height: 32px;">
                                                <div  class="py-1 text-center font-lg flex align-center justify-center"
                                                    :style="item2.allCount == 0 ? 'width: calc(50% - 18px);' : `width: calc(${parseInt(item2.options[0].number / item2.allCount * 100)}% - 18px);`"
                                                    style="position: relative;background: linear-gradient(180deg, #E55247 0%, #EF7F6F 100%);min-width: 50px;max-width: calc(100% - 50px - 18px);border-radius: 100px 0 0 100px;margin-right: 18px;">
                                                    <!-- <span class="font-lg" style="position: absolute;top: -25px;">{{ item.options[0].name }}</span> -->
                                                    <span v-if="item2.allCount == 0" class="font-lg" style="color: white;">支持</span>
                                                    <span v-if="item2.allCount != 0"  class="font-lg" style="color: white;z-index: 1;">{{ parseInt(item2.options[0].number / item2.allCount * 100) }}%</span>
                                                    
                                                    <div style="transform: skewX(-45deg);width: 32px;height: calc(100%);background: linear-gradient(180deg, #E55247 0%, #EF7F6F 100%);position: absolute;right: -16px;z-index: 0;">
            
                                                    </div>
                                                </div>
                                                <!-- <span class="py-1 font-lg">
                                                    PK
                                                </span> -->
                                                <div  class="py-1 text-center font-lg flex align-center justify-center"
                                                    :style="item2.allCount == 0 ? 'width: calc(50% - 18px);' : `width: calc(${parseInt(item2.options[1].number / item2.allCount * 100)}% - 18px);`"
                                                    style="position: relative;background: linear-gradient(180deg, #4171E1 0%, #4597EE 100%);min-width: 50px;max-width: calc(100% - 50px - 18px);border-radius: 0 100px 100px 0;margin-left: 18px;">
                                                    <!-- <span class="font-lg" style="position: absolute;top: -25px;">{{ item.options[1].name }}</span> -->
                                                    <span v-if="item2.allCount == 0" class="font-lg" style="color: white;">支持</span>
                                                    <span v-if="item2.allCount != 0"  class="font-lg" style="color: white;z-index: 1;">{{ parseInt(item2.options[1].number / item2.allCount * 100) }}%</span>
                                                    
                                                    <div style="transform: skewX(-45deg);width: 32px;height: calc(100%);background: linear-gradient(180deg, #4171E1 0%, #4597EE 100%);position: absolute;left: -16px;z-index: 0;">
            
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- 类型和位置 -->
                                    <div class="mx-2">
                                        <button v-if="item.circle != null" type="button"
                                            class="btn btn-secondary btn-sm font-small px-1 py-0 mr-2">
                                            <img style="width: 15px;height: 15px;"
                                                :src="item.circle.icon"
                                                alt="">
                                            {{ item.circle.name }}
                                        </button>
                                        <button v-if="item.area != null && item.area != ''"
                                            type="button" class="btn btn-secondary btn-sm font-small px-1 py-0">
                                            <i class="bi bi-geo-alt" style="color: #2979ff;"></i>
                                            {{ item.area }}
                                        </button>
                                    </div>

                                    <!-- 操作按钮 -->
                                    <div class="flex align-center mt-2">
                                        <div class="flex align-center justify-center" style="width: 33.3%;">
                                            <i style="transform: scaleX(-1);font-size: 16px;position: relative;top: -3px;"
                                                class="bi bi-reply text-gray"></i>
                                            <span class="font ml-1 text-gray">{{ item.share_count }}</span>
                                        </div>

                                        <div class="flex align-center justify-center" style="width: 33.3%;">
                                            <i style="font-size: 16px;" class="bi bi-chat-dots text-gray"></i>
                                            <span class="font ml-1 text-gray">{{ item.comment_num }}</span>
                                        </div>

                                        <div @click.stop="zan(item)" class="flex align-center justify-center"
                                            style="width: 33.3%;">
                                            <i v-if="item.is_zan == 0" style="font-size: 16px;"
                                                class="bi bi-suit-heart  text-gray"></i>
                                            <i v-if="item.is_zan == 1" style="font-size: 16px;color: red;"
                                                class="bi bi-suit-heart-fill  text-gray"></i>
                                            <i v-if="item.is_zan == null" style="font-size: 16px;"
                                                class="bi bi-suit-heart  text-gray"></i>

                                            <span class="font ml-1 text-gray">{{ item.zan_num }}</span>
                                        </div>
                                    </div>
                                </div>

                            </div>

                            <!-- 推荐区域 -->
                            <div :class="retClass('show', 'd-none', 1, nav_index)">
                                <!-- 顶部导航 -->
                                <div class="flex align-items-center ">

                                    <ul @scroll="checkScrollEnd('#myTab', getTopCirclesNext)"
                                        style="width: calc(100% - 30px);overflow-x: scroll;white-space: nowrap;display: block;"
                                        class="nav nav-tabs adminuiux-tabs ml-1 noScrollBar" id="myTab" role="tablist">
                                        <li v-for="(item, index) in tabs" :key="'tabs' + index"
                                            class="nav-item d-inline-block" role="presentation">
                                            <button @click="tabs_index = index; jumpCircle(item.cid)"
                                                :class="retClass('nav-link active font', 'nav-link text-gray font', index, tabs_index)">{{
                                                item.name }}</button>
                                        </li>

                                    </ul>
                                    <!-- <i data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasTop"
                                type="button" class="bi-list mx-2 font-lger"></i> -->
                                    <i data-bs-toggle="offcanvas" data-bs-target="#channelOffCanvas"
                                        aria-expanded="false" aria-controls="channelOffCanvas" type="button"
                                        class="bi-list mx-2 font-lger"></i>
                                    <!-- <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
                                    
                                </button> -->
                                </div>

                                <!-- <div class="offcanvas offcanvas-top div-fixed  bg-white w-100" tabindex="-1" id="channelOffCanvas" aria-labelledby="offcanvasTopLabel">
                                    <div class="offcanvas-header">
                                        <p class="offcanvas-title h5" id="offcanvasTopLabel">Offcanvas top</p>
                                        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
                                    </div>
                                    <div class="offcanvas-body">
                                        ...
                                    </div>
                                </div> -->

                                <div class="offcanvas offcanvas-top div-fixed bg-white w-100" style="height: 400px;"
                                    id="channelOffCanvas">
                                    <div class="offcanvas-header">
                                        <div class="flex align-items-center">
                                            <span class="font-sm">我的频道</span>
                                            <span class="font-sm ml-2">点击进入频道</span>
                                        </div>
                                        <!-- <button type="button" class="btn-close" data-bs-dismiss="offcanvas"
                                    aria-label="Close"></button> -->
                                    </div>
                                    <div class="offcanvas-body ">
                                        <div v-if="myCircles.length > 0"
                                            style="gap: 10px;display: flex;flex-wrap: wrap;align-items: center;">
                                            <button @click="jumpCircle(item.id);hideChannelOffcanvas();"
                                                v-for="(item, index) in myCircles"
                                                style="width: calc( (100% - 30px) / 4 );" type="button"
                                                :class="item.id == nowCircleID ? 'btn btn-outline-theme myBtn btn-sm' : 'btn btn-outline-secondary myBtn btn-sm' ">{{
                                                item.name }}</button>

                                        </div>
                                        <p v-if="myCircles.length <= 0" class="font-sm text-center">暂时没有了</p>

                                    </div>

                                    <div class="offcanvas-header">
                                        <div class="flex align-items-center">
                                            <span class="font-sm">推荐频道</span>
                                            <span class="font-sm ml-2">点击添加频道</span>
                                        </div>

                                    </div>
                                    <div class="offcanvas-body ">

                                        <div v-if="preferCircles.length > 0"
                                            style="gap: 10px;display: flex;flex-wrap: wrap;align-items: center;">
                                            <button @click="addCircle(item, index)"
                                                v-for="(item, index) in preferCircles"
                                                style="width: calc( (100% - 30px) / 4 );" type="button"
                                                class="btn btn-outline-secondary myBtn btn-sm">{{ item.name }}</button>

                                        </div>
                                        <p v-if="preferCircles.length <= 0" class="font-sm text-center">暂时没有了</p>
                                    </div>
                                </div>

                                <!-- 频道弹窗 -->
                                <!-- <div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop"
                            aria-labelledby="offcanvasTopLabel">
                            <div class="offcanvas-header">
                                <div class="flex align-items-center">
                                    <span class="font-sm">我的频道</span>
                                    <span class="font-sm ml-2">点击进入频道</span>
                                </div>
                                <button type="button" class="btn-close" data-bs-dismiss="offcanvas"
                                    aria-label="Close"></button>
                            </div>
                            <div class="offcanvas-body ">
                                <div style="gap: 10px;display: flex;flex-wrap: wrap;align-items: center;">
                                    <button v-for="i in 4" style="width: calc( (100% - 30px) / 4 );" type="button"
                                        class="btn btn-outline-secondary myBtn btn-sm">美女吧</button>

                                </div>
                            </div>

                            <div class="offcanvas-header">
                                <div class="flex align-items-center">
                                    <span class="font-sm">推荐频道</span>
                                    <span class="font-sm ml-2">点击添加频道</span>
                                </div>

                            </div>
                            <div class="offcanvas-body ">
                                <p class="font-sm text-center">暂时没有了</p>
                            </div>
                        </div> -->
                                <!-- 图片导航 -->
                                <div class="swiper swipernav mb-2">
                                    <div class="swiper-wrapper">
                                        <div @click="jumpBanner(item)" v-for="(item, index) in homeObj.banner"
                                            class="swiper-slide" style="width: calc(100%); height: calc(100vw * 0.32);">
                                            <div style="position: relative;" class="px-2">
                                                <div style="height: calc(100vw * 0.32);object-fit: cover;border-radius: 10px;overflow: hidden;"
                                                    class="flex align-items-center justify-content-center">
                                                    <img style="width: 100%;border-radius: 10px;" :src="item.image"
                                                        alt="">
                                                </div>
                                                <span style="position: absolute;left: 20px;bottom: 5px;color: #fff;"
                                                    class="font-smmd">广告</span>
                                            </div>
                                        </div>

                                    </div>
                                </div>

                                <!-- 提示 -->
                                <div class="alert alert-warning d-flex align-items-center mb-0 myAlert" role="alert">
                                    <i class="bi bi-info-circle-fill mb-0 h4 me-2"></i>
                                    <div class="font-sm">

                                        {{ nowNotice }}
                                    </div>
                                </div>

                                <!-- 导航按钮 -->
                                <div class="container-fluid mt-2 mx-2 card" style="width: calc(100% - 15px);">
                                    <div class="flex flex-wrap card-body myCard">

                                        <div @click="autoCheckJump(item)" v-for="(item, index) in homeObj.nav_tab"
                                            style="width: calc(100% / 5);"
                                            class=" flex flex-column align-items-center my-1">
                                            <img style="width: 40px;height: 40px;" :src="item.image" alt="">
                                            <span class="font-small mt-2">{{ item.name }}</span>
                                        </div>

                                    </div>

                                </div>

                                <!-- 列表 -->
                                <div v-for="(item, index) in allArticle" :key="'allArticle' + index"
                                    @click="jump(`haosns-article-detail.html?id=${item.id}`)"
                                    class="flex flex-column mx-2 card myCard2 pb-2 mt-2 px-2">
                                    <!-- 用户栏 -->
                                    <div class="flex flex-1 align-items-center">
                                        <!-- <div @click.stop="jump('haosns-user-detail.html')"
                                            class="avatar avatar-40 coverimg rounded-circle ">
                                            <img class="w-auto"
                                                src="https://haodds-1251208851.cos.ap-shanghai.myqcloud.com/oss/qcloud/uploads/images/20250527141100838684416.jpg"
                                                alt="" data-extentions-extra-ocr-id="1799a7602b1dc301f67a50fe3d661260"
                                                style="display: none;">
                                        </div> -->

                                        <img @click.stop="jump(`haosns-user-detail.html?id=${item.user.id}`)"
                                            class="avatar avatar-40 coverimg rounded-circle" :src="item.user.avatar" />
                                        <div @click.stop="jump(`haosns-user-detail.html?id=${item.user.id}`)"
                                            class="flex flex-1 flex-column px-2">
                                            <span class="font">
                                                {{ item.user.nickname }}
                                                <img style="width: 28px;"
                                                :src="item.user == null || item.user.user_level == null ? '' : item.user.user_level.image"
                                                alt="">
                                            </span>
                                            
                                            <span class="font-small">
                                                来自{{ returnTerminal(item) }} {{ item.interaction }}人互动过
                                            </span>
                                        </div>
                                        <div>
                                            <span @click.stop="submitUser(item, item.user.id)"
                                                v-if="item.is_follow == 0" class="font follow-btn px-2 py-1">+ 关注</span>
                                            <span @click.stop="submitUser(item, item.user.id)"
                                                v-if="item.is_follow == 1" class="font follow-btn px-2 py-1">已关注</span>
                                        </div>
                                    </div>

                                    <!-- 文章 -->
                                    <div class="font p-2 content">
                                        <p v-if="item.title != ''" class="font-lg">{{ item.title }}</p>
                                        <div class="render_html" v-html="myCutHtml(item.content, 100)">

                                        </div>
                                        <img style="max-width: 100%;" v-if="Array.isArray(item.image) && item.image.length == 1"
                                            :src="item.image[0]">
                                        <img style="max-width: 100%;" v-else-if="item.video_cover != ''" :src="item.video_cover" alt="">
                                        <div style="max-width: 100%;" v-else-if="Array.isArray(item.image) && item.image.length > 1"
                                            class="container-fluid">
                                            <div class="row myRow1">
                                                <div v-for="(item2, index2) in item.image" :key="'item.image' + index2"
                                                    class="col-4" style="padding: 1px;">
                                                    <img class="widthToHeight object-fit-cover"
                                                        style="border-radius: 0;" :src="item2" alt="">
                                                </div>

                                            </div>
                                        </div>

                                        <!-- 投票 -->
                                        <div v-for="(item2, index2) in (item == null ? [] : item.vote)" :key="'item.vote' + index" class="flex flex-column">
                                
                                            <!-- 单选投票 -->
                                            <div v-if="item2.type == 1" class="card card-body flex flex-column mx-2 my-2" style="border-radius: 10px;">
                                                <div class="flex align-center">
                                                    <span class="font font-weight-bold">投票</span>
                                                    <span class="font ml-2">{{ item2.title }}</span>
                                                </div>
                                                
                                                <ul class="list-group adminuiux-list-group mt-2 border-0">                                             <!-- active -->
                                                    <li  v-for="(item3, index3) in item2.options" :key="'item2.options' + index3" :class="item3.is_select == 1 ? 'active list-group-item  font' : 'list-group-item  font'" style="border-radius: 10px;" >
                                                        <div class="flex align-center justify-between">
                                                            <div class="flex align-center">
                                                                <i v-if="item3.is_select == 1" class="bi bi-check-lg mr-1"></i>
                                                                <span>{{ item3.name }}</span>
                                                            </div>
                                                            <span>{{ item3.number }}票</span>
                                                        </div>
                                                        
                                                    </li>
                                                    
                                                </ul>
            
                                                <div class="flex align-center justify-between mt-2">
                                                    <span class="font-sm text-gray">{{ item2.allCount }}人参与</span>
                                                    <span class="font-sm text-gray">单选</span>
                                                </div>
                                            </div>
                                            <!-- 多选投票 -->
                                            <div v-if="item2.type == 2" class="card card-body flex flex-column mx-2 my-2" style="border-radius: 10px;">
                                                <div class="flex align-center">
                                                    <span class="font font-weight-bold">投票</span>
                                                    <span class="font ml-2">{{ item2.title }}</span>
                                                </div>
                                                
                                                <ul class="list-group adminuiux-list-group mt-2 border-0">                                             <!-- active -->
                                                    <li v-for="(item3, index3) in item2.options" :key="'item2.options' + index3" :class="item3.is_select == 1 ? 'active list-group-item  font' : 'list-group-item  font'" style="border-radius: 10px;" >
                                                        <div class="flex align-center justify-between">
                                                            <div class="flex align-center">
                                                                <i v-if="item3.is_select == 1" class="bi bi-check-lg mr-1"></i>
                                                                <span>{{ item3.name }}</span>
                                                            </div>
                                                            <span>{{ item3.number }}票</span>
                                                        </div>
                                                        
                                                    </li>
                                                    
                                                </ul>
            
                                                <div class="flex align-center justify-between mt-2">
                                                    <span class="font-sm text-gray">{{ item2.allCount }}票</span>
                                                    <span class="font-sm text-gray">多选</span>
                                                </div>
                                            </div>
                                            <!-- PK投票 -->
                                            <p  v-if="item2.type == 3"  class="font ml-2 mt-2"  >{{ item2.title }}</p>
                                            <div v-if="item2.type == 3"  class="flex align-center justify-between mx-2 my-2">
                                                <div  style="width: calc(50% - 10px);background-color: #fff8f6;" class="font text-gray text-center py-1">
                                                    {{ item2.options[0].name }}
                                                </div>
                                                <div style="width: calc(50% - 10px);background-color: #f6f9ff;" class="font text-gray text-center py-1">
                                                    {{ item2.options[1].name }}
                                                </div>
                                                
                                            </div>
                                            <!-- PK投票 -->
                                            <div v-if="item2.type == 3" class="flex mx-2"style="height: 32px;">
                                                <div  class="py-1 text-center font-lg flex align-center justify-center"
                                                    :style="item2.allCount == 0 ? 'width: calc(50% - 18px);' : `width: calc(${parseInt(item2.options[0].number / item2.allCount * 100)}% - 18px);`"
                                                    style="position: relative;background: linear-gradient(180deg, #E55247 0%, #EF7F6F 100%);min-width: 50px;max-width: calc(100% - 50px - 18px);border-radius: 100px 0 0 100px;margin-right: 18px;">
                                                    <!-- <span class="font-lg" style="position: absolute;top: -25px;">{{ item.options[0].name }}</span> -->
                                                    <span v-if="item2.allCount == 0" class="font-lg" style="color: white;">支持</span>
                                                    <span v-if="item2.allCount != 0"  class="font-lg" style="color: white;z-index: 1;">{{ parseInt(item2.options[0].number / item2.allCount * 100) }}%</span>
                                                    
                                                    <div style="transform: skewX(-45deg);width: 32px;height: calc(100%);background: linear-gradient(180deg, #E55247 0%, #EF7F6F 100%);position: absolute;right: -16px;z-index: 0;">
            
                                                    </div>
                                                </div>
                                                <!-- <span class="py-1 font-lg">
                                                    PK
                                                </span> -->
                                                <div  class="py-1 text-center font-lg flex align-center justify-center"
                                                    :style="item2.allCount == 0 ? 'width: calc(50% - 18px);' : `width: calc(${parseInt(item2.options[1].number / item2.allCount * 100)}% - 18px);`"
                                                    style="position: relative;background: linear-gradient(180deg, #4171E1 0%, #4597EE 100%);min-width: 50px;max-width: calc(100% - 50px - 18px);border-radius: 0 100px 100px 0;margin-left: 18px;">
                                                    <!-- <span class="font-lg" style="position: absolute;top: -25px;">{{ item.options[1].name }}</span> -->
                                                    <span v-if="item2.allCount == 0" class="font-lg" style="color: white;">支持</span>
                                                    <span v-if="item2.allCount != 0"  class="font-lg" style="color: white;z-index: 1;">{{ parseInt(item2.options[1].number / item2.allCount * 100) }}%</span>
                                                    
                                                    <div style="transform: skewX(-45deg);width: 32px;height: calc(100%);background: linear-gradient(180deg, #4171E1 0%, #4597EE 100%);position: absolute;left: -16px;z-index: 0;">
            
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                    </div>

                                    <!-- 类型和位置 -->
                                    <div class="mx-2">
                                        <button v-if="item.circle != null" type="button"
                                            class="btn btn-secondary btn-sm font-small px-1 py-0 mr-2">
                                            <img style="width: 15px;height: 15px;"
                                                :src="item.circle.icon"
                                                alt="">
                                            {{ item.circle.name }}
                                        </button>
                                        <button v-if="item.area != null && item.area != ''"
                                            type="button" class="btn btn-secondary btn-sm font-small px-1 py-0">
                                            <i class="bi bi-geo-alt" style="color: #2979ff;"></i>
                                            {{ item.area }}
                                        </button>
                                    </div>

                                    <!-- 操作按钮 -->
                                    <div class="flex align-center mt-2">
                                        <div class="flex align-center justify-center" style="width: 33.3%;">
                                            <i style="transform: scaleX(-1);font-size: 16px;position: relative;top: -3px;"
                                                class="bi bi-reply text-gray"></i>
                                            <span class="font ml-1 text-gray">{{ item.share_count }}</span>
                                        </div>

                                        <div class="flex align-center justify-center" style="width: 33.3%;">
                                            <i style="font-size: 16px;" class="bi bi-chat-dots text-gray"></i>
                                            <span class="font ml-1 text-gray">{{ item.comment_num }}</span>
                                        </div>

                                        <div @click.stop="zan(item)" class="flex align-center justify-center"
                                            style="width: 33.3%;">
                                            <i v-if="item.is_zan == 0" style="font-size: 16px;"
                                                class="bi bi-suit-heart  text-gray"></i>
                                            <i v-if="item.is_zan == 1" style="font-size: 16px;color: red;"
                                                class="bi bi-suit-heart-fill  text-gray"></i>
                                            <i v-if="item.is_zan == null" style="font-size: 16px;"
                                                class="bi bi-suit-heart  text-gray"></i>

                                            <span class="font ml-1 text-gray">{{ item.zan_num }}</span>
                                        </div>
                                    </div>
                                </div>


                            </div>

                            <!-- 附近区域 -->
                            <div :class="retClass('show', 'd-none', 2, nav_index)">
                                <!-- 列表 -->
                                <div v-for="(item, index) in allArticle" :key="'allArticle' + index"
                                    @click="jump(`haosns-article-detail.html?id=${item.id}`)"
                                    class="flex flex-column mx-2 card myCard2 pb-2 mt-2 px-2">
                                    <!-- 用户栏 -->
                                    <div class="flex flex-1 align-items-center">
                                        <!-- <div @click.stop="jump('haosns-user-detail.html')"
                                            class="avatar avatar-40 coverimg rounded-circle ">
                                            <img class="w-auto"
                                                src="https://haodds-1251208851.cos.ap-shanghai.myqcloud.com/oss/qcloud/uploads/images/20250527141100838684416.jpg"
                                                alt="" data-extentions-extra-ocr-id="1799a7602b1dc301f67a50fe3d661260"
                                                style="display: none;">
                                        </div> -->

                                        <img @click.stop="jump(`haosns-user-detail.html?id=${item.user.id}`)"
                                            class="avatar avatar-40 coverimg rounded-circle" :src="item.user.avatar" />
                                        <div @click.stop="jump(`haosns-user-detail.html?id=${item.user.id}`)"
                                            class="flex flex-1 flex-column px-2">
                                            <span class="font">
                                                {{ item.user.nickname }}
                                                <img style="width: 28px;"
                                                :src="item.user == null || item.user.user_level == null ? '' : item.user.user_level.image"
                                                alt="">
                                            </span>
                                            
                                            <span class="font-small">
                                                来自{{ returnTerminal(item) }} {{ item.interaction }}人互动过
                                            </span>
                                        </div>
                                        <div>
                                            <span @click.stop="submitUser(item, item.user.id)"
                                                v-if="item.is_follow == 0" class="font follow-btn px-2 py-1">+ 关注</span>
                                            <span @click.stop="submitUser(item, item.user.id)"
                                                v-if="item.is_follow == 1" class="font follow-btn px-2 py-1">已关注</span>
                                        </div>
                                    </div>

                                    <!-- 文章 -->
                                    <div class="font p-2 content">
                                        <p v-if="item.title != ''" class="font-lg">{{ item.title }}</p>
                                        <div class="render_html" v-html="myCutHtml(item.content, 100)">

                                        </div>
                                        <img style="max-width: 100%;" v-if="Array.isArray(item.image) && item.image.length == 1"
                                            :src="item.image[0]">
                                        <img style="max-width: 100%;" v-else-if="item.video_cover != ''" :src="item.video_cover" alt="">
                                        <div style="max-width: 100%;"  v-else-if="Array.isArray(item.image) && item.image.length > 1"
                                            class="container-fluid">
                                            <div class="row myRow1">
                                                <div v-for="(item2, index2) in item.image" :key="'item.image' + index2"
                                                    class="col-4" style="padding: 1px;">
                                                    <img class="widthToHeight object-fit-cover"
                                                        style="border-radius: 0;" :src="item2" alt="">
                                                </div>

                                            </div>
                                        </div>


                                        <!-- 投票 -->
                                        <div v-for="(item2, index2) in (item == null ? [] : item.vote)" :key="'item.vote' + index" class="flex flex-column">
                                
                                            <!-- 单选投票 -->
                                            <div v-if="item2.type == 1" class="card card-body flex flex-column mx-2 my-2" style="border-radius: 10px;">
                                                <div class="flex align-center">
                                                    <span class="font font-weight-bold">投票</span>
                                                    <span class="font ml-2">{{ item2.title }}</span>
                                                </div>
                                                
                                                <ul class="list-group adminuiux-list-group mt-2 border-0">                                             <!-- active -->
                                                    <li  v-for="(item3, index3) in item2.options" :key="'item2.options' + index3" :class="item3.is_select == 1 ? 'active list-group-item  font' : 'list-group-item  font'" style="border-radius: 10px;" >
                                                        <div class="flex align-center justify-between">
                                                            <div class="flex align-center">
                                                                <i v-if="item3.is_select == 1" class="bi bi-check-lg mr-1"></i>
                                                                <span>{{ item3.name }}</span>
                                                            </div>
                                                            <span>{{ item3.number }}票</span>
                                                        </div>
                                                        
                                                    </li>
                                                    
                                                </ul>
            
                                                <div class="flex align-center justify-between mt-2">
                                                    <span class="font-sm text-gray">{{ item2.allCount }}人参与</span>
                                                    <span class="font-sm text-gray">单选</span>
                                                </div>
                                            </div>
                                            <!-- 多选投票 -->
                                            <div v-if="item2.type == 2" class="card card-body flex flex-column mx-2 my-2" style="border-radius: 10px;">
                                                <div class="flex align-center">
                                                    <span class="font font-weight-bold">投票</span>
                                                    <span class="font ml-2">{{ item2.title }}</span>
                                                </div>
                                                
                                                <ul class="list-group adminuiux-list-group mt-2 border-0">                                             <!-- active -->
                                                    <li v-for="(item3, index3) in item2.options" :key="'item2.options' + index3" :class="item3.is_select == 1 ? 'active list-group-item  font' : 'list-group-item  font'" style="border-radius: 10px;" >
                                                        <div class="flex align-center justify-between">
                                                            <div class="flex align-center">
                                                                <i v-if="item3.is_select == 1" class="bi bi-check-lg mr-1"></i>
                                                                <span>{{ item3.name }}</span>
                                                            </div>
                                                            <span>{{ item3.number }}票</span>
                                                        </div>
                                                        
                                                    </li>
                                                    
                                                </ul>
            
                                                <div class="flex align-center justify-between mt-2">
                                                    <span class="font-sm text-gray">{{ item2.allCount }}票</span>
                                                    <span class="font-sm text-gray">多选</span>
                                                </div>
                                            </div>
                                            <!-- PK投票 -->
                                            <p  v-if="item2.type == 3"  class="font ml-2 mt-2"  >{{ item2.title }}</p>
                                            <div v-if="item2.type == 3"  class="flex align-center justify-between mx-2 my-2">
                                                <div  style="width: calc(50% - 10px);background-color: #fff8f6;" class="font text-gray text-center py-1">
                                                    {{ item2.options[0].name }}
                                                </div>
                                                <div style="width: calc(50% - 10px);background-color: #f6f9ff;" class="font text-gray text-center py-1">
                                                    {{ item2.options[1].name }}
                                                </div>
                                                
                                            </div>
                                            <!-- PK投票 -->
                                            <div v-if="item2.type == 3" class="flex mx-2" style="height: 32px;">
                                                <div  class="py-1 text-center font-lg flex align-center justify-center"
                                                    :style="item2.allCount == 0 ? 'width: calc(50% - 18px);' : `width: calc(${parseInt(item2.options[0].number / item2.allCount * 100)}% - 18px);`"
                                                    style="position: relative;background: linear-gradient(180deg, #E55247 0%, #EF7F6F 100%);min-width: 50px;max-width: calc(100% - 50px - 18px);border-radius: 100px 0 0 100px;margin-right: 18px;">
                                                    <!-- <span class="font-lg" style="position: absolute;top: -25px;">{{ item.options[0].name }}</span> -->
                                                    <span v-if="item2.allCount == 0" class="font-lg" style="color: white;">支持</span>
                                                    <span v-if="item2.allCount != 0" class="font-lg" style="color: white;z-index: 1;">{{ parseInt(item2.options[0].number / item2.allCount * 100) }}%</span>
                                                    
                                                    <div style="transform: skewX(-45deg);width: 32px;height: calc(100%);background: linear-gradient(180deg, #E55247 0%, #EF7F6F 100%);position: absolute;right: -16px;z-index: 0;">
            
                                                    </div>
                                                </div>
                                                <!-- <span class="py-1 font-lg">
                                                    PK
                                                </span> -->
                                                <div  class="py-1 text-center font-lg flex align-center justify-center"
                                                    :style="item2.allCount == 0 ? 'width: calc(50% - 18px);' : `width: calc(${parseInt(item2.options[1].number / item2.allCount * 100)}% - 18px);`"
                                                    style="position: relative;background: linear-gradient(180deg, #4171E1 0%, #4597EE 100%);min-width: 50px;max-width: calc(100% - 50px - 18px);border-radius: 0 100px 100px 0;margin-left: 18px;">
                                                    <!-- <span class="font-lg" style="position: absolute;top: -25px;">{{ item.options[1].name }}</span> -->
                                                    <span v-if="item2.allCount == 0" class="font-lg" style="color: white;">支持</span>
                                                    <span v-if="item2.allCount != 0" class="font-lg" style="color: white;z-index: 1;">{{ parseInt(item2.options[1].number / item2.allCount * 100) }}%</span>
                                                    
                                                    <div style="transform: skewX(-45deg);width: 32px;height: calc(100%);background: linear-gradient(180deg, #4171E1 0%, #4597EE 100%);position: absolute;left: -16px;z-index: 0;">
            
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- 类型和位置 -->
                                    <div class="mx-2">
                                        <button v-if="item.circle != null" type="button"
                                            class="btn btn-secondary btn-sm font-small px-1 py-0 mr-2">
                                            <img style="width: 15px;height: 15px;"
                                                :src="item.circle.icon"
                                                alt="">
                                            {{ item.circle.name }}
                                        </button>
                                        <button v-if="item.area != null && item.area != ''"
                                            type="button" class="btn btn-secondary btn-sm font-small px-1 py-0">
                                            <i class="bi bi-geo-alt" style="color: #2979ff;"></i>
                                            {{ item.area }}
                                        </button>
                                    </div>

                                    <!-- 操作按钮 -->
                                    <div class="flex align-center mt-2">
                                        <div class="flex align-center justify-center" style="width: 33.3%;">
                                            <i style="transform: scaleX(-1);font-size: 16px;position: relative;top: -3px;"
                                                class="bi bi-reply text-gray"></i>
                                            <span class="font ml-1 text-gray">{{ item.share_count }}</span>
                                        </div>

                                        <div class="flex align-center justify-center" style="width: 33.3%;">
                                            <i style="font-size: 16px;" class="bi bi-chat-dots text-gray"></i>
                                            <span class="font ml-1 text-gray">{{ item.comment_num }}</span>
                                        </div>

                                        <div @click.stop="zan(item)" class="flex align-center justify-center"
                                            style="width: 33.3%;">
                                            <i v-if="item.is_zan == 0" style="font-size: 16px;"
                                                class="bi bi-suit-heart  text-gray"></i>
                                            <i v-if="item.is_zan == 1" style="font-size: 16px;color: red;"
                                                class="bi bi-suit-heart-fill  text-gray"></i>
                                            <i v-if="item.is_zan == null" style="font-size: 16px;"
                                                class="bi bi-suit-heart  text-gray"></i>

                                            <span class="font ml-1 text-gray">{{ item.zan_num }}</span>
                                        </div>
                                    </div>
                                </div>

                            </div>

                            <!-- 没有内容的提示 -->
                            <div v-if="allArticle.length <= 0" style="margin-top: 10%;"
                                class="flex flex-column align-center justify-center">
                                <img style="height: 80px;" src="/template/use/mobile/assets/img/haosns/empty.png" alt="" srcset="">
                                <span class="font-small">暂时没有内容</span>
                            </div>
                            
<footer class="adminuiux-mobile-footer style-2 pb-ios">
    <div class="container" style="height: 50px;">
        <ul class="nav nav-pills nav-justified">
            <li class="nav-item">
                <a :class="navbar_index == 0 ? 'nav-link active' : 'nav-link'" href="index.html" aria-current="page">
                    <span>
                        <i class="nav-icon bi bi-grid m-0"></i>
                        <span class="nav-text">首页</span>
                    </span>
                </a>
            </li>
            <li class="nav-item">
                <a :class="navbar_index == 1 ? 'nav-link active' : 'nav-link'" href="haosns-circle-list1.html">
                    <span>
                        <i class="nav-icon bi bi-shop m-0"></i>
                        <span class="nav-text">{{ circle_name }}</span>
                    </span>
                </a>
            </li>

            <li id="logined" class="nav-item ">
                <a href="haosns-send-page-wx.html" class="">
                    <!-- <span class="rounded-circle bg-theme-accent-r-gradient position-relative">
                        <span class="avatar avatar-20 fs-14 position-absolute top-0 end-0 rounded-circle z-index-1 bg-theme-1 theme-red">
                            <small class="fw-medium">4</small>
                        </span>
                        <i class="nav-icon bi bi-bag-fill text-white"></i>
                    </span> -->
                    <img style="width: 40px;"
                        src="https://haodds.oss-cn-shanghai.aliyuncs.com/oss/aliyun/uploads/images/202508201444260a3e00299.png"
                        alt="">
                </a>
            </li>
            <li id="noLogin" class="nav-item" style="display: none;">
                <a class=" ">
                    <!-- <span class="rounded-circle bg-theme-accent-r-gradient position-relative">
                        <span class="avatar avatar-20 fs-14 position-absolute top-0 end-0 rounded-circle z-index-1 bg-theme-1 theme-red">
                            <small class="fw-medium">4</small>
                        </span>
                        <i class="nav-icon bi bi-bag-fill text-white"></i>
                    </span> -->
                    <img style="width: 40px;"
                        src="https://haodds.oss-cn-shanghai.aliyuncs.com/oss/aliyun/uploads/images/202508201444260a3e00299.png"
                        alt="">
                </a>
            </li>
            <li class="nav-item">
                <a :class="navbar_index == 3 ? 'nav-link active' : 'nav-link'" href="haosns-message.html">
                    <span style="position: relative;">
                        <i class="nav-icon bi bi-chat-dots m-0"></i>
                        <span class="nav-text">消息</span>
                        <span id="message_count" class="font-smmd px-1" style="position: absolute;right: 5px;top: 0;background-color: red;border-radius: 10px;color: white;">

                        </span>
                    </span>
                </a>
            </li>
            <li class="nav-item">
                <a :class="navbar_index == 4 ? 'nav-link active' : 'nav-link'" href="haosns-my.html">
                    <span>
                        <i class="nav-icon bi bi-person m-0"></i>
                        <span class="nav-text">我的</span>
                    </span>
                </a>
            </li>
        </ul>
    </div>
</footer>

                                <!-- <div v-if="is_demo == 1" @click="showChangeIndexPage();"
                                    style="background-color: rgba(0, 0, 0, 0.5);position: fixed;left: 0;top: 50%;"
                                    class="flex flex-column align-center justify-center p-1">
                                    <span class="font-sm" style="color: white;">切换</span>
                                    <div style="width: 80%;height: 1px;background-color: white;margin: 2px 0;"></div>
                                    <span class="font-sm" style="color: white;">模板</span>
                                </div> -->






                                <div class="modal fade show" id="changeIndexPage" tabindex="-1" aria-hidden="true">
                                    <div class="modal-dialog modal-dialog-centered">
                                        <div style="border-radius: 5px;" class="modal-content">

                                            <div class="modal-body">
                                                <div class="flex flex-column align-center">
                                                    <span class="font-lg">切换模板</span>
                                                    <div class="mt-3">
                                                        <div class="form-check form-check-inline">
                                                            <input class="form-check-input" v-model="nowType"
                                                                type="radio" id="blog" value="blog">
                                                            <label class="form-check-label" for="blog">微博</label>
                                                        </div>

                                                        <div class="form-check form-check-inline">
                                                            <input class="form-check-input" v-model="nowType"
                                                                type="radio" id="sns" value="sns">
                                                            <label class="form-check-label" for="sns">瀑布流</label>
                                                        </div>

                                                        <div class="form-check form-check-inline">
                                                            <input class="form-check-input" v-model="nowType"
                                                                type="radio" id="info" value="info">
                                                            <label class="form-check-label" for="info">信息</label>
                                                        </div>
                                                    </div>

                                                    <div class="flex align-center justify-between mt-3"
                                                        style="width: 70%;">
                                                        <button type="button"
                                                            @click="hideChangeIndexPage();jumpByType();"
                                                            style="width: 80px;"
                                                            class="btn btn-theme btn-sm">确定</button>
                                                        <button type="button" @click="hideChangeIndexPage()"
                                                            style="width: 80px;"
                                                            class="btn btn-secondary btn-sm">取消</button>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </div>



                </div>

                <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.5.21/vue.global.min.js"></script> -->
                <script>
                    document.addEventListener('DOMContentLoaded', () => {
                        const app = Vue.createApp({
                            data() {
                                return {
                                    tabIndex: 1,
                                    tabs: [
                                        {
                                            name: '全部',
                                            toggle: 'tabs_1'
                                        },
                                        {
                                            name: '曾哥22',
                                            toggle: 'tabs_2'
                                        },

                                    ], // 当前的tabs栏
                                    tabs_index: 0, // 当前顶部栏索引
                                    nav_index: 1, // 当前标题栏索引
                                    navbar_index: 0, // 底部导航栏索引
                                    topCirclePage: 1, // 顶部圈子页
                                    // circleLists: [], // 当前圈子获取的列表
                                    homeObj: {}, // 首页数据
                                    nowNotice: '', // 当前通知
                                    myCircles: [], // 我关注的圈子
                                    channelOffCanvas: null, // 当前顶部更多圈子弹窗
                                    nowArticlePage: 1, // 当前文章页面索引
                                    nowCircleID: -1, // 当前圈子id
                                    nowPageSort: '', // 当前文章排序
                                    nowPageType: '', // 当前文章类型
                                    allArticle: [], // 所有文章
                                    preferCircles: [], // 推荐的圈子
                                    changeIndexPage: null, // 更改首页模板弹窗

                                    nowType: 'blog', // 当前位于博客模板

                                    is_demo: 0, // 是否为测试环境

                                    index_template: null, // 微博模板

                                    circle_name: window.localStorage.getItem('circle_name') || '星球'
                                }
                            },
                            methods: {
                                autoLoadTemplate(){ // 自动加载对应模板
                                    var str = window.localStorage.getItem('config');
                                    
                                    if(str != null && str != ''){
                                        try {
                                            var obj = JSON.parse(str);
                                            // this.index_template = obj.template.mobile.index;

                                            // if(this.index_template == 'info'){
                                            //             loc.jump('haosns-index-info.html');
                                            //         }
                                            //         if(this.index_template == 'sns'){
                                            //             loc.jump('haosns-index-sns.html');
                                            //         }


                                        } catch (error) {
                                            
                                        }
                                    }
                                },
                                getIsDemo(){ // 获取当前状态是否为演示
                                    // configGetconfigUrl
                                    axios.get(api.configGetconfigUrl, {
                                        params: {
                                            
                                        }

                                    })
                                        .then((res) => {
                                            // 处理成功情况
                                            if (res.data.code == 1) {
                                                this.is_demo = res.data.data.is_demo;
                                                if(this.index_template == null){
                                                    this.index_template = res.data.data.template.mobile.index;
                                                    if(this.index_template == 'info'){
                                                        loc.jump('haosns-index-info.html');
                                                    }
                                                    if(this.index_template == 'sns'){
                                                        loc.jump('haosns-index-sns.html');
                                                    }
                                                    // console.log(1);
                                                    // loc.jump('haosns-index-info.html');
                                                }
                                                var str = '';

                                                try {
                                                    str = JSON.stringify(res.data.data);
                                                } catch (error) {
                                                    
                                                }
                                                
                                                window.localStorage.setItem('config', str);


                                            } else {
                                                
                                            }


                                        })

                                },
                                jumpBanner(item) {
                                    if (item.type == 'web') {
                                        window.location.href = encodeURI(item.path);
                                    }
                                    if (item.jump_type == 'web') {
                                        window.location.href = encodeURI(item.jump_path + item.jump_params);
                                    }

                                },
                                jumpByType() { // 根据类型跳转
                                    if (this.nowType == 'blog') {
                                        loc.jump('index.html')
                                    }
                                    if (this.nowType == 'sns') {
                                        loc.jump('haosns-index-sns.html');
                                    }
                                    if (this.nowType == 'info') {
                                        loc.jump('haosns-index-info.html');
                                    }
                                },
                                initChangeIndexPage() { // 初始化选择模板功能
                                    var changeIndexPageEle = document.getElementById('changeIndexPage');
                                    this.changeIndexPage = new bootstrap.Modal(changeIndexPageEle);

                                },
                                showChangeIndexPage() { // 显示选择模板功能
                                    if (this.changeIndexPage != null) {
                                        this.changeIndexPage.show();
                                    }
                                },
                                hideChangeIndexPage() { // 隐藏选择模板功能
                                    if (this.changeIndexPage != null) {
                                        this.changeIndexPage.hide();
                                    }
                                },
                                myCutHtml(html, num) { // 智能按照长度分割HTML文本
                                    var count = 0;
                                    var tick = 0;
                                    while (count < num) {
                                        if(html.indexOf('>', count + 1) == -1){
                                            break;
                                        }
                                        count = html.indexOf('>', count + 1);
                                        
                                        
                                        if (tick > num) {
                                            break;
                                        }
                                        tick++;
                                    }
                                    // console.log(html.substring(0, count+1));
                                    if(html.indexOf('>') == -1){
                                        return html;
                                    }else{
                                        
                                        
                                        return html.substring(0, count + 1);
                                    }
                                    

                                },
                                test(e) {
                                    console.log(e);

                                },
                                jump(url) {
                                    loc.jump(url);
                                },
                                addCircle(item, index) {
                                    // circleHandleCircleUrl
                                    axios.post(api.circleHandleCircleUrl, {
                                        id: item.id,
                                        is_collect: item.is_collect == 1 ? 0 : 1,
                                        terminal: api.terminal

                                    })
                                        .then((res) => {
                                            // 处理成功情况
                                            if (res.data.code == 1) {
                                                // for (var i = 0; i < this.myCircles.length; i++) {
                                                //     var hasCircle = false;
                                                //     for (var j = 0; j < this.preferCircles.length; j++) {
                                                //         if (this.myCircles[i].id == this.preferCircles[j].id) {
                                                //             hasCircle = true;
                                                //         }
                                                //     }
                                                //     if(hasCircle == false){

                                                //     }
                                                // }

                                                var hasIn = false; // 是否存在
                                                for (var i = 0; i < this.myCircles.length; i++) {
                                                    if (this.myCircles[i].id == item.id) {
                                                        hasIn = true;
                                                    }
                                                }
                                                if (hasIn == false) {
                                                    this.myCircles.push(item);
                                                }

                                                hasIn = false;
                                                for (var i = 0; i < this.preferCircles.length; i++) {
                                                    if (this.preferCircles[i].id == item.id) {
                                                        hasIn = true;
                                                    }
                                                }
                                                if (hasIn == false) {
                                                    this.preferCircles.splice(index, 1);
                                                }


                                            } else {
                                                showToast(res.data.msg, 3000, 'error');
                                            }


                                        })

                                },
                                getPreferCircles() { // 获取推荐圈子
                                    axios.get(api.circleListsUrl, {
                                        params: {
                                            page_no: 1,
                                            page_size: 16
                                        }

                                    })
                                        .then((res) => {
                                            // 处理成功情况
                                            if (res.data.code == 1) {
                                                this.preferCircles = res.data.data.lists;

                                            } else {
                                                showToast(res.data.msg, 3000, 'error');
                                            }


                                        })
                                },
                                jumpFollow() { // 获取关注数据
                                    this.nowPageType = 'collect';
                                    this.nowCircleID = -1;
                                    this.nowPageSort = '';
                                    this.loadArticleListFirst();
                                },
                                jumpPrefer() { // 获取推荐
                                    this.nowPageType = '';
                                    this.nowCircleID = -1;
                                    this.nowPageSort = '';
                                    this.loadArticleListFirst();
                                },
                                jumpNear() { // 获取附近
                                    // region
                                    this.nowPageType = 'region';
                                    this.nowCircleID = -1;
                                    this.nowPageSort = 'rand';
                                    this.loadArticleListFirst();
                                },
                                jumpCircle(cid) { // 获取圈子的文章
                                    this.nowPageType = '';
                                    this.nowCircleID = cid;
                                    this.nowPageSort = '';
                                    this.loadArticleListFirst();
                                },
                                changeNotice(ms) { // 定时更改公告内容
                                    var noticeArr = [];
                                    if (this.homeObj.notice != null && this.homeObj.notice.indexOf('|') != -1) {
                                        noticeArr = this.homeObj.notice.split('|');
                                    } else if (this.homeObj.notice != null && this.homeObj.notice.indexOf('|') == -1) {
                                        noticeArr = [this.homeObj.notice];
                                    }
                                    var index = 0;
                                    if (noticeArr.length > 0) {
                                        this.nowNotice = noticeArr[index];
                                        index++;
                                        setInterval(() => {
                                            this.nowNotice = noticeArr[index];
                                            index++;
                                            if (index >= noticeArr.length) {
                                                index = 0;
                                            }
                                        }, ms);
                                    }

                                },
                                loadArticleListFirst() { // 加载文章
                                    this.nowArticlePage = 1;
                                    this.allArticle = [];
                                    var obj = {
                                        page_no: this.nowArticlePage,
                                        page_size: 10,
                                        circle_id: this.nowCircleID,
                                        sort: this.nowPageSort,
                                        type: this.nowPageType
                                    }
                                    if (this.nowCircleID == -1) {
                                        delete obj.circle_id;
                                    }
                                    if (this.nowPageSort == '') {
                                        delete obj.sort;
                                    }
                                    if (this.nowPageType == '') {
                                        delete obj.type;
                                    }
                                    axios.get(api.articleListsUrl, {
                                        params: obj

                                    }).then(res => {
                                        if (res.data.code == 1) {
                                            for (var i = 0; i < res.data.data.lists.length; i++) { // 计算总共有多少条投票数据
                                                if(res.data.data.lists[i].vote != null && Array.isArray(res.data.data.lists[i].vote)){
                                                    for(var j = 0; j < res.data.data.lists[i].vote.length; j++){
                                                        var itemAllCount = 0;
                                                        if(res.data.data.lists[i].vote[j].options != null && Array.isArray(res.data.data.lists[i].vote[j].options)){
                                                            for(var k = 0; k < res.data.data.lists[i].vote[j].options.length; k++){
                                                                itemAllCount += res.data.data.lists[i].vote[j].options[k].number;
                                                            }
                                                        }
                                                        res.data.data.lists[i].vote[j].allCount = itemAllCount;
                                                    }
                                                }
                                                this.allArticle.push(res.data.data.lists[i]);
                                            }
                                        } else {
                                            showToast(res.data.msg, 3000, 'error');
                                        }
                                    })
                                },
                                loadArticleListNext() {
                                    this.nowArticlePage += 1;
                                    // this.allArticle = [];
                                    var obj = {
                                        page_no: this.nowArticlePage,
                                        page_size: 10,
                                        circle_id: this.nowCircleID,
                                        sort: this.nowPageSort,
                                        type: this.nowPageType
                                    }
                                    if (this.nowCircleID == -1) {
                                        delete obj.circle_id;
                                    }
                                    if (this.nowPageSort == '') {
                                        delete obj.sort;
                                    }
                                    if (this.nowPageType == '') {
                                        delete obj.type;
                                    }
                                    axios.get(api.articleListsUrl, {
                                        params: obj

                                    }).then(res => {
                                        if (res.data.code == 1) {
                                            for (var i = 0; i < res.data.data.lists.length; i++) {
                                                this.allArticle.push(res.data.data.lists[i]);
                                            }
                                        } else {
                                            showToast(res.data.msg, 3000, 'error');
                                        }
                                    })
                                },
                                checkScrollEnd(query, func) { // 检测滚动栏
                                    checkScrollEnd(query, func);
                                },
                                testShow() {
                                    console.log(111);

                                },
                                showAlert() {
                                    alert(0);
                                },
                                retClass(activeClass, inActive, index, i) { // 自动处理激活样式
                                    if (index == i) {

                                        return activeClass;
                                    } else {
                                        return inActive;
                                    }
                                },
                                retClassTime(activeClass, inActive, index, i, timeOut, timeClass) { // 自动延时处理激活样式

                                    if (index == i) {
                                        setTimeout(() => {
                                            return timeClass;
                                        }, timeOut);
                                        return activeClass;
                                    } else {
                                        return inActive;
                                    }
                                },
                                jump(path) {
                                    loc.jump(path);
                                },
                                indexHomeUrl() { // 轮播图
                                    // indexHomeUrl
                                    axios.get(api.indexHomeUrl, {

                                    })
                                        .then((res) => {
                                            // 处理成功情况
                                            if (res.data.code == 1) {
                                                this.homeObj = res.data.data;
                                                this.changeNotice(4000);
                                            } else {
                                                showToast(res.data.msg, 3000, 'error');
                                            }


                                        })
                                },
                                getUserCircles() { // 用户圈子
                                    axios.get(api.circleListsUrl, {
                                        params: {
                                            page_no: 1,
                                            page_size: 16,
                                            type: 'user'
                                        }

                                    })
                                        .then((res) => {
                                            // 处理成功情况
                                            if (res.data.code == 1) {
                                                for (var i = 0; i < res.data.data.lists.length; i++) {
                                                    this.myCircles.push(res.data.data.lists[i]);

                                                }
                                            } else {
                                                showToast(res.data.msg, 3000, 'error');
                                            }


                                        })
                                },
                                submitUser(item, user_id) { // 关注用户
                                    // userExtendHandleUserFollowUrl
                                    axios.post(api.userExtendHandleUserFollowUrl, {
                                        is_follow: item.is_follow == 1 ? 0 : 1,
                                        terminal: api.terminal,
                                        user_id: user_id
                                    })
                                        .then((res) => {
                                            // 处理成功情况
                                            if (res.data.code == 1) {
                                                item.is_follow = item.is_follow == 1 ? 0 : 1;
                                            } else {
                                                showToast(res.data.msg, 3000, 'error');
                                            }


                                        })
                                },
                                getTopCirclesFirst() {
                                    this.topCirclePage = 1;
                                    this.tabs = [{
                                        name: '推荐',
                                        toggle: 'tabs' + 0,
                                        cid: -1,
                                    }];
                                    // circleListsUrl
                                    axios.get(api.circleListsUrl, {
                                        params: {
                                            page_no: this.topCirclePage,
                                            page_size: 16,
                                            recomment: 1
                                        }

                                    })
                                        .then((res) => {
                                            // 处理成功情况
                                            if (res.data.code == 1) {
                                                for (var i = 0; i < res.data.data.lists.length; i++) {
                                                    this.tabs.push({
                                                        name: res.data.data.lists[i].name,
                                                        toggle: 'tabs' + res.data.data.lists[i].id,
                                                        cid: res.data.data.lists[i].id
                                                    })
                                                }
                                            } else {
                                                showToast(res.data.msg, 3000, 'error');
                                            }


                                        })
                                },
                                getTopCirclesNext() {
                                    this.topCirclePage += 1;
                                    // this.tabs = [{
                                    //     name: '推荐',
                                    //     toggle: 'tabs' + 0,
                                    //     cid: -1,
                                    // }];
                                    // circleListsUrl
                                    axios.get(api.circleListsUrl, {
                                        params: {
                                            page_no: this.topCirclePage,
                                            page_size: 16,
                                            recomment: 1
                                        }

                                    })
                                        .then((res) => {
                                            // 处理成功情况
                                            if (res.data.code == 1) {
                                                for (var i = 0; i < res.data.data.lists.length; i++) {
                                                    this.tabs.push({
                                                        name: res.data.data.lists[i].name,
                                                        toggle: 'tabs' + res.data.data.lists[i].id,
                                                        cid: res.data.data.lists[i].id
                                                    },)
                                                }
                                            } else {
                                                showToast(res.data.msg, 3000, 'error');
                                            }


                                        })
                                },
                                initChannelOffcanvas() { // 初始化更多圈子弹窗
                                    var channelOffCanvasEle = document.getElementById('channelOffCanvas');
                                    this.channelOffCanvas = new bootstrap.Offcanvas(channelOffCanvasEle);
                                },
                                showChannelOffcanvas() { // 显示更多圈子弹窗
                                    this.channelOffCanvas.show();
                                },
                                hideChannelOffcanvas() { // 隐藏更多圈子弹窗
                                    this.channelOffCanvas.hide();
                                },
                                autoCheckJump(item) { // 智能判断路径跳转
                                    console.log(item);
                                    if (item.type == 'web') {
                                        window.location.href = item.path;
                                    }

                                },
                                returnTerminal(item) {
                                    if (item.terminal == 0) {
                                        if (item.ip_address != null) {
                                            if (item.ip_address.indexOf("省") != -1 && item.ip_address.indexOf("市") != -1) {
                                                return item.ip_address.split("省")[1].replace("市", "");
                                            } else if (item.ip_address.indexOf("市") != -1) {
                                                return item.ip_address.replace("市", "");
                                            } else {
                                                return item.ip_address;
                                            }
                                        }

                                    } else if (item.terminal == 1) {
                                        return "微信小程序";
                                    } else if (item.terminal == 2) {
                                        return "微信公众号";
                                    } else if (item.terminal == 3) {
                                        return "H5";
                                    } else if (item.terminal == 4) {
                                        return "PC";
                                    } else if (item.terminal == 5) {
                                        return "苹果APP";
                                    } else if (item.terminal == 6) {
                                        return "安卓APP";
                                    }
                                },
                                zan(item) { // 点赞
                                    if (item.is_zan != null) {
                                        var isZan = item.is_zan == 1 ? 0 : 1;

                                        var zanNumAdd = item.is_zan == 1 ? -1 : 1;
                                        var zanNum = item.zan_num;
                                        zanNum += zanNumAdd;

                                        // articleHandleCollectUrl
                                        axios.post(api.articleHandleCollectUrl, {
                                            id: item.id,
                                            is_collect: isZan,
                                            terminal: api.terminal,
                                            type: 2

                                        })
                                            .then((res) => {
                                                // 处理成功情况
                                                if (res.data.code == 1) {
                                                    item.is_zan = isZan;
                                                    item.zan_num = zanNum;
                                                } else {
                                                    showToast(res.data.msg, 3000, 'error');
                                                }


                                            })
                                    }

                                },
                                initWindowScroll() { // 初始化页面距离检测
                                    window.addEventListener('scroll', () => {
                                        // console.log(1);

                                        if (isNearBottom()) {
                                            this.loadArticleListNext();
                                        }
                                    });
                                },
                                saveUserCent() {
                                    // userCentreUrl
                                    axios.get(api.userCentreUrl, {
                                        params: {

                                        }

                                    })
                                        .then((res) => {
                                            // 处理成功情况
                                            if (res.data.code == 1) {
                                                window.localStorage.setItem('centre', JSON.stringify(res.data.data));
                                                console.log('用户信息保存完成');

                                            } else {
                                                showToast(res.data.msg, 3000, 'error');
                                            }


                                        })
                                }
                            },
                            mounted() {
                                // console.log(this.tabIndex);
                                this.getTopCirclesFirst();
                                this.indexHomeUrl();
                                this.getUserCircles();
                                this.initChannelOffcanvas();

                                this.loadArticleListFirst();
                                this.initWindowScroll();

                                this.getPreferCircles();

                                this.saveUserCent();

                                this.initChangeIndexPage();

                                this.getIsDemo(); // 当前是否演示

                                this.autoLoadTemplate();
                            }
                        })


                        // 挂载应用
                        app.mount('#app')
                    })

                </script>

            </body>

</html>