<template>
	<view class="d-flex flex-col">
		<!-- 头部 -->
		<v-header class="nav_bar" :left-text="$t('base.a1')" :left-arrow="false" :left-click="personalCenter" style="box-shadow: 0 -7px 20px 0px rgba(0, 0, 0, 0.2);margin-bottom: 2px;">
			<template #left>
				<!-- <van-icon name="user-circle-o" class="fn-25 color-theme-1" style="color: #EABB71;" /> -->
				<img v-if="theme === 'light'" src="@/static/img/user-bar.svg" alt="" width="18px" height="18px">
				<img v-else src="@/static/img/user-bar1.png" alt="" width="18px" height="18px">
				<span class="circle-pulse" v-if="newscount!==0"></span>
				<!-- <view class="d-flex align-center justify-center">
					<text class="p-l-md fn-18 color-light">{{ app.appName }}
						<span class="fn-16 m-l-xs">{{$t('first.a2')}}</span>
					</text>
				</view> -->
			</template>
			<!-- <template #title>

      </template> -->
			<template #right>
				<!-- <v-link to="/pages/list/list?isSearch=1" class="d-flex align-center">
          <van-icon class="fn-20" name="search" />
        </v-link> -->
				<view class="per-bot p-y-md p-x-sm d-flex align-center">
					<!-- <img :src="$localImgUrl('Page6.png')" alt="" class="h-20 m-r-xs" /> -->
					<span class="color-light">
						<v-lang @change="
				        marketList = [];
				        indexData();
								getCollegeLinks();
				      "></v-lang>
						<i class="iconfont m-l-xs fn-sm">&#xe6e9;</i>
					</span>
				</view>
			</template>
		</v-header>
		<view class="layout-main" style="">
			<scroll-view @refresherrefresh="onRefresh" :refresher-enabled="refresherEnabled&&scrollTop<50"
				:refresher-triggered="refreshing" refresher-background="transparent" :refresher-threshold="50">
				<!-- 轮播 -->
				<!-- <swiper
        class="my-swipe m-x-md p-b-xs"
        :autoplay="true"
        indicator-dots
        indicator-color="white"
      >
        <swiper-item
          class="my_swipe_item"
          v-for="(item, idx) in home"
          :key="idx"
        >
          <img width="100%" height="100%" class="rounded-sm" fit="cover" :src="item.imgurl" />
        </swiper-item>
      </swiper> -->
				<!-- 公告 -->
				<v-notice-bar v-if="notice.length" class="m-t-md m-x-md bg-panel-1 box-shadow rounded-sm">
					<template #left-icon>
						<van-icon class="m-r-sm fn-16" @click="() => _router.push({ path: '/pages/notice/index' })"
							name="volume-o" />
					</template>
					<v-link class="fn-13 eps-1"
						:to="{ path: '/pages/notice/detail', query: { id: notice[0].id } }">{{ notice[0].title }}</v-link>
					<template #right-icon>
						<view class="m-l-xs" @click="_router.push({ path: '/pages/notice/index' })">
							<van-icon name="wap-nav" />
						</view>
					</template>
				</v-notice-bar>
				<!-- 次一级导航 -->
				<!-- <view class="nav2 p-x-md m-t-ms d-flex justify-around fn-center">
        <v-link tag="div" to="/pages/assets/recharge" class="item">
          <view class="icon">
            <img :class="theme == 'light' ? 'bg-box-per' : ''" class="h-33" src="static/img/13.png" />
          </view>
          <view class="fn-13 m-t-xxs">{{ $t("base.b5") }}</view>
        </v-link>
        <v-link tag="div" to="/pages/assets/draw" class="item">
          <view class="icon">
            <img :class="theme == 'light' ? 'bg-box-blue' : ''" class="h-33 " src="static/img/5.png" />
          </view>
          <view class="fn-13 m-t-xxs">{{ $t("base.b6") }}</view>
        </v-link>
        <v-link tag="div" to="/pages/service/index" class="item">
          <view class="icon">
            <img :class="theme == 'light' ? 'bg-box-red' : ''" class="h-33 " src="static/img/ke.png" />
          </view>
          <view class="fn-13 m-t-xxs">{{ $t("common.service") }}</view>
        </v-link>
        <v-link tag="div" to="/pages/invite/index" class="item" >
          <view class="icon">
            <img :class="theme == 'light' ? 'bg-box-yellow' : ''" class="h-33 " src="static/img/4.png" />
          </view>
          <view class="fn-13 m-t-xxs">{{ $t("base.b7") }}</view>
        </v-link>
      </view> -->
				<!-- 指数 -->
				<view class="stock-swipe d-flex p-x-md m-t-ms" v-if="0">
					<view class="swipe_right flex-fill lists" v-for="(parentItem,index) in marketList" v-if="index==1"
						:key="parentItem.coin_name">
						<view v-for="(item,iindex) in parentItem.collect
            ? collect
            : parentItem.marketInfoList" :key="iindex"
							class="stock-index item flex-fill p-y-ms rounded-xs box-size  lists-1"
							v-if="item.pair_name=='BTC/USDT'||item.pair_name=='ETH/USDT'||item.pair_name=='ETC/USDT'">
							<v-link :to="{
                    path: '/pages/exchange/index',
                    query: { code: item.pair_name },
                  }">
								<view class="stock-index-img fn-12 color-gray-6 m-b-xs fn-center">
									<view class="color-light">{{ item.pair_name }}<text class="stock-item-3"
											:class="item.increase * 1 < 0 ? 'color-sell' : 'color-buy'">{{ item.increaseStr }}</text>
									</view>
								</view>
								<view class="fn-18 color-light fn-center m-b-xs"
									:class="item.increase * 1 < 0 ? 'color-sell' : 'color-buy'">{{ item.close }}</view>
								<view class="d-flex flex-col align-center fn-sm justify-center">

									<!-- <view class="color-theme-6">≈ ￥{{omitTo(item.close*price_cny,2)}}</view> -->
								</view>
							</v-link>
						</view>
					</view>
				</view>

				<!-- 加密货币之门 -->
				<view style="width: 684rpx;margin: 15px auto;">
					<image v-if="!isLogin" src="@/assets/img/home/home1.jpg" mode="" style="width: 100%;height: 320rpx;"></image>
					
					<view class="total-asset-card" v-else>
					  <view class="card-header">
						<view class="heroGlow"></view>
					    <span>{{ $t("base.d6") }}</span>
					    <!-- 点击眼睛切换 isVisible 状态 -->
					    <!-- <i class="el-icon-view eye-icon" :class="{ 'is-hidden': !isVisible }"></i> -->
						<view @click="toggleVisibility">
							<image src="@/assets/img/view.png" class="eye-icon" v-if="isVisible==false"></image>
							<image src="@/assets/img/hide.png" class="eye-icon" v-else></image>
						</view>
					  </view>
					  <view class="total-amount">
					    <!-- 动态显示金额或星号 -->
					    <span class="number">{{ formatMoney(account.total_assets_usd,false) }}</span>
					    <span class="currency">{{coin_name}}</span>
					  </view>
					</view>
				</view>
				
				<!-- 2. 快捷操作区 (金刚区) -->
				<view class="action-grid">
				  <view class="action-item">
					<v-link class="tolink" tag="view" :to="detail.primary_status!=1?'/pages/auth/index':'/pages/assets/recharge'">
						<view class="icon-box">
						  <image v-if="theme == 'light'" src="../../assets/img/home/home2-2.png" mode="widthFix" style="width: 100%;"></image>
						  <image v-else src="../../assets/img/home/home2.png" mode="widthFix" style="width: 100%;"></image>
						</view>
						<view class="label color-light">{{ $t("homeNewText.hh0") }}</view>
					</v-link>
				  </view>
				  <view class="action-item">
					<v-link class="tolink" tag="view" :to="detail.status==1?'/pages/auth/index':(detail.status==2?'/pages/assets/draw':'/pages/auth/senior')">
						<view class="icon-box">
						  <image v-if="theme == 'light'" src="../../assets/img/home/home3-3.png" mode="widthFix" style="width: 100%;"></image>
						  <image v-else src="../../assets/img/home/home3.png" mode="widthFix" style="width: 100%;"></image>
						</view>
						<view class="label color-light">{{ $t("homeNewText.hh1") }}</view>
					</v-link>
				  </view>
				  <view class="action-item">
					<v-link class="tolink" tag="view" to="">
						<view class="icon-box">
						  <image v-if="theme == 'light'" src="../../assets/img/home/home4-4.png" mode="widthFix" style="width: 100%;"></image>
						  <image v-else src="../../assets/img/home/home4.png" mode="widthFix" style="width: 100%;"></image>
						</view>
						<view class="label color-light">{{ $t("homeNewText.hh2") }}</view>
					</v-link>
				  </view>
				  <view class="action-item">
					<v-link class="tolink" tag="view" to="">
						<view class="icon-box">
						  <image v-if="theme == 'light'" src="../../assets/img/home/home5-5.png" mode="widthFix" style="width: 100%;"></image>
						  <image v-else src="../../assets/img/home/home5.png" mode="widthFix" style="width: 100%;"></image>
						</view>
						<view class="label color-light">{{ $t("homeNewText.hh3") }}</view>
					</v-link>
				  </view>
				  <view class="action-item">
					<v-link class="tolink" tag="view" to="">
						<view class="icon-box">
						  <image v-if="theme == 'light'" src="../../assets/img/home/home6-6.png" mode="widthFix" style="width: 100%;"></image>
						  <image v-else src="../../assets/img/home/home6.png" mode="widthFix" style="width: 100%;"></image>
						</view>
						<view class="label color-light">{{ $t("homeNewText.hh4") }}</view>
					</v-link>
				  </view>
				</view>
				
				<view style="padding: 0px 15px;">
					<uni-notice-bar class="scrollbar" color="#6b7280" :speed="60" show-icon scrollable show-get-more
					:text="$t('homeNewText.hh5')" />
				</view>
				
				<view class="main-tabs">
				    <view class="tab-item" :class="{ active: activeMainTab === 'stock' }" @click="switchMainTab('stock')">{{ $t("homeNewText.hh6") }}</view>
				    <view class="tab-item" :class="{ active: activeMainTab === 'crypto' }" @click="switchMainTab('crypto')">{{ $t("homeNewText.hh7") }}</view>
				</view>
				
				<view class="sub-tabs" v-if="activeMainTab === 'stock'">
				  <view class="sub-tab-item" v-for="sub in currentSubTabs" :key="sub.id"
				  :class="{ active: activeSubTab === sub.id }" @click="SubTabs(sub)">
				    {{ $t(sub.name) }}
				  </view>
				</view>
				
				<view v-if="activeMainTab === 'stock'">
					<!-- ================= 布局 1：股指 (2x2 网格 + ECharts 折线) ================= -->
					<view class="market-grid-index" v-if="activeSubTab === 'index'">
					  <view class="market-card" v-for="(item, index) in allMarketData.stock.index" :key="index">
					    <view class="card-header">{{ item.name }}</view>
					    <view class="price-info" :class="item.isUp ? 'text-green' : 'text-red'">
					      <view class="main-price">{{ item.price }}</view>
					      <view class="change-detail">
					        <text>{{ item.isUp ? '+' : '' }}{{ item.changeAmt }}</text>
					        <text>{{ item.isUp ? '+' : '' }}{{ item.changePct }}%</text>
					      </view>
					    </view>
					    <!-- 替换为 ECharts -->
					    <view class="mini-chart-wrapper">
					      <!-- <l-echart :ref="'miniChart' + index"></l-echart> -->
						  <l-echart :ref="'miniChart' + index"></l-echart>
					    </view>
					  </view>
					</view>
								
					<!-- ================= 布局 2：热力图 (4列 CSS Grid 实心色块) ================= -->
					<view class="market-grid-heatmap" v-if="activeSubTab === 'heatmap'">
					  <view 
					    class="heatmap-block" 
					    v-for="(item, index) in allMarketData.stock.heatmap" 
					    :key="index"
					    :class="item.isUp ? 'bg-dark-green' : 'bg-dark-red'"
					  >
					    <view class="symbol">{{ item.name }}</view>
					    <view class="percent">{{ item.isUp ? '+' : '' }}{{ item.changePct }}%</view>
					  </view>
					</view>
								
					<!-- ================= 布局 3：热门股 (3列 带Logo的小卡片) ================= -->
					<view class="market-grid-hot" v-if="activeSubTab === 'hot'">
					  <view class="hot-card" v-for="(item, index) in allMarketData.stock.hot" :key="index">
					    <view class="hot-top">
					      <image class="logo" :src="item.logo" mode="aspectFit"></image>
					      <view class="name-box">
					        <view class="symbol">{{ item.name }}</view>
					        <view class="fullname">{{ item.name.toLowerCase() }}</view>
					      </view>
					    </view>
					    <view class="hot-price" :class="item.isUp ? 'text-green' : 'text-red'">
					      {{ item.price }}
					    </view>
					  </view>
					</view>
								
					<!-- ================= 布局 4：排行榜 (列表形式 + 胶囊涨跌幅) ================= -->
					<view class="market-list-rank" v-if="activeSubTab === 'rank'">
					  <!-- 列表表头 -->
					  <view class="list-header">
					    <text class="col-name">{{ $t("homeNewText.hh12") }}</text>
					    <text class="col-price">{{ $t("homeNewText.hh13") }}</text>
					    <text class="col-change">{{ $t("homeNewText.hh14") }}</text>
					  </view>
					  
					  <!-- 列表数据 -->
					  <view class="list-row" v-for="(item, index) in allMarketData.stock.rank" :key="index">
					    <view class="col-name row-left">
					      <image class="logo" :src="item.logo" mode="aspectFit"></image>
					      <view class="name-box">
					        <view class="symbol">{{ item.name }}</view>
					        <view class="type-tag">{{ $t("homeNewText.hh6") }}</view>
					      </view>
					    </view>
					    <view class="col-price row-price">{{ item.price }}</view>
					    <view class="col-change row-change">
					      <view class="pill-btn" :class="item.isUp ? 'pill-green' : 'pill-red'">
					        {{ item.isUp ? '+' : '' }}{{ item.changePct }}%
					      </view>
					    </view>
					  </view>
					</view>
				</view>
				
				
				<view v-if="activeMainTab === 'crypto'">
					<view class="w-12/12 m-t-xs">
						<view class="fn-center w-max">
							<view
								class="m-b-md m-x-md rounded-xs link-active d-flex justify-between align-center p-y-xs box-size p-x-xs">
								<view class="fn-left w-5/12">{{ $t("homeNewText.aa7") }}</view>
								<view class="fn-right w-4/12">{{ $t("homeNewText.bb1") }}</view>
								<view class="fn-right w-3/12 positions">{{ $t("homeNewText.bb2") }}</view>
							</view>
							<v-link :to="{path: '/pages/exchange/index',query: { code: item.pair_name,contract:1 }}"
								class="m-b-md m-x-md rounded-xs link-active d-flex justify-between align-center p-y-xs box-size p-x-xs"
								v-for="(item,index) in sortedMarketListHe" :key="index" 
								v-if="item.symbol=='BXPE'||item.symbol=='BTC'||item.symbol=='ETH'||item.symbol=='BNB'||item.symbol=='SOL'||item.symbol=='DOGE'">
								<view class="fn-left w-5/12">
									<view class="d-flex align-center">
										<!-- <image :src="item.coin_icon" mode="" style="width: 60rpx;height: 60rpx;margin-right: 12rpx;"></image> -->
										<text class="fn-bold fn-14 color-light manage_text">{{ item.symbol }}</text>
									</view>
									<view class="d-flex align-center fn-12 m-t-xs" v-if="0">
										24H{{ $t("first.b3") }} {{ omitTo(item.vol, 0) }}
									</view>
								</view>
								<view class="fn-right w-4/12 color-light usd-close manage_text">
									{{ item.close }}
								</view>
								<view class="fn-right w-3/12">
									<span class="fn-bold rounded-xs fn-16"
										:class="item.increase * 1 > 0 ? 'buys' : 'red'">{{ item.increaseStr }}</span>
								</view>
							</v-link>
						</view>
					</view>
					<view v-for="parentItem in marketList" :key="parentItem.coin_name" v-if="parentItem.coin_name=='USDT'&&0">
						<view class="w-12/12 m-t-xs">
							<view class="fn-center w-max">
								<view
									class="m-b-md m-x-md rounded-xs link-active d-flex justify-between align-center p-y-xs box-size p-x-xs">
									<view class="fn-left w-5/12">{{ $t("homeNewText.aa7") }}</view>
									<view class="fn-right w-4/12">{{ $t("homeNewText.bb1") }}</view>
									<view class="fn-right w-3/12 positions">{{ $t("homeNewText.bb2") }}</view>
								</view>
								<v-link :to="{path: '/pages/exchange/index',query: { code: item.pair_name },}"
									class="m-b-md m-x-md rounded-xs link-active d-flex justify-between align-center p-y-xs box-size p-x-xs"
									v-for="item in parentItem.collect ? collect : parentItem.marketInfoList"
									:key="item.pair_name" 
									v-if="item.coin_name=='BTC'||item.coin_name=='ETH'||item.coin_name=='BNB'||item.coin_name=='SOL'||item.coin_name=='DOGE'">
									<view class="fn-left w-5/12">
										<view class="d-flex align-center">
											<image :src="item.coin_icon" mode=""
												style="width: 60rpx;height: 60rpx;margin-right: 12rpx;"></image>
											<text class="fn-bold fn-14 color-light manage_text">{{ item.coin_name }}</text>
											<!-- <text class="fn-bold fn-14 color-light">{{ item.pair_name }}</text> -->
										</view>
										<view class="d-flex align-center fn-12 m-t-xs" v-if="0">
											24H{{ $t("first.b3") }} {{ omitTo(item.vol, 0) }}
										</view>
									</view>
									<view class="fn-right w-4/12 color-light usd-close manage_text">
										{{ item.close }}
									</view>
									<view class="fn-right w-3/12">
										<span class="fn-bold rounded-xs fn-16"
											:class="item.increase * 1 > 0 ? 'buys' : 'red'">{{ item.increaseStr }}</span>
										<!-- <view class="charts-box m-t-xs">
										  <qiun-data-charts
										    type="tarea"
										    :chartData="item.kline"
										    background="none"
										    :tapLegend="false"
										    :range="item.increase*1>0?true:false"
										  />
										</view> -->
									</view>
								</v-link>
							</view>
						</view>
					</view>
				</view>
				
				<view class="tabs-header">
				  <view  class="tab-item1 color-light"  :class="{ active: activeTab === 'news' }"  @click="activeTab = 'news'">{{ $t("homeNewText.hh15") }}</view>
				  <view class="tab-item1 color-light" :class="{ active: activeTab === 'discover' }" @click="activeTab = 'discover'">{{ $t("homeNewText.hh16") }}</view>
				</view>
				
				<!-- 2. 下方可滚动的内容区 -->
				<scroll-view class="scroll-content" scroll-y="true">
				  <!-- ================= 新闻列表 (News) ================= -->
				  <view class="list-container" v-if="activeTab === 'news'">
				    <view class="news-item" v-for="(item, index) in newsList" :key="index">
				      <!-- 左侧/上方 文本区 -->
				      <view class="text-box">
				        <view class="title">{{ item.title }}</view>
				        <view class="meta">
				          <text class="source">{{ item.source }}</text>
				          <text class="date">{{ item.date }}</text>
				        </view>
				      </view>
				      <!-- 右侧图片 (如果有) -->
				      <image v-if="item.image" class="cover-img left-img" :src="item.image" mode="aspectFill"></image>
				    </view>
				  </view>
			
				  <!-- ================= 发现列表 (Discover) ================= -->
				  <view class="list-container" v-if="activeTab === 'discover'">
				    <view class="discover-item" v-for="(item, index) in discoverList" :key="index">
				      <!-- 左侧 文本区 -->
				      <view class="text-box">
				        <view class="title bold-title">{{ item.title }}</view>
				        <view class="meta">
				          <text class="author">{{ item.author }}</text>
				          <view class="views">
				            <!-- 简单的眼睛图标 (可以用uni-icons代替) -->
				            <text class="eye-icon">👁</text> 
				            <text>{{ item.views }}</text>
				          </view>
				        </view>
				      </view>
				      <!-- 右侧 图片/占位图 -->
				      <view class="cover-img right-img placeholder">
				        <text class="placeholder-icon">🖼️</text>
				      </view>
				    </view>
				  </view>
				</scroll-view>
				

				<!-- 科创板 -->
				<!-- <view class="head_info m-y-xl">
        <view class=" d-flex justify-between align-center p-x-xs p-t-lg bor5 p-b-xs">
            <view class="d-flex">
                <text class="m-x-xs fn-center" @click="active=0" :class="active==0?'fn-bold fn-15 p-b-xs bor5-active color-light':''">合約指數</text>
                <text class="m-x-xs fn-center" @click="active=1" :class="active==1?'fn-bold fn-15 p-b-xs bor5-active color-light':''">現貨指數</text>
            </view>
        </view>
        <template v-if="active==0" v-for="parentItem in (marketList)">
            <view class="m-xs" :key="parentItem.coin_name" v-if="parentItem.coin_name=='USDT'">
                <view v-for="item in parentItem.marketInfoList"  :key="item.pair_name" class="bg-panel-3m-t-xs">
                    <view class="w-12/12">
                      <view class="fn-center w-max">
                        <v-link
                          :to="{
                            path: '/pages/exchange/index',
                            query: { code: item.pair_name },
                          }"
                          class="m-b-md m-x-xs rounded-sm bg-panel-3 box-shadow link-active d-flex justify-between align-center p-r-md p-y-md box-size p-x-xs"
                          v-for="item in parentItem.collect
                            ? collect
                            : parentItem.marketInfoList"
                          :key="item.pair_name"
                        >
                          <view class="fn-left w-6/12">
                            <view class="d-flex align-center">
                                <text class="fn-bold fn-16 color-light">{{ item.pair_name }}</text>
                                <text class="color-default fn-14 m-l-xs">永续</text>
                            </view>
                            <view class="d-flex align-center fn-12 m-t-xs">
                                24H量 {{ omitTo(item.vol,0) }}
                            </view>
                          </view>
                          <view class="fn-left align-end w-3/12">
                            <view class="d-flex align-end fn-bold fn-16" :class="item.increase * 1 >0?'color-buy':'color-sell'">{{ item.close }}</view>
                            <view class="m-t-xs">
                                ￥{{ omitTo(item.close*price_cny,2) }}
                            </view>
                          </view>
                          <view class="fn-right w-3/12">
                            <span
                            class="rounded-xs"
                              :class="
                                item.increase * 1 > 0 ? 'color-buy' : 'color-sell'
                              "
                              >{{ item.increaseStr }}</span
                            >
                          </view>
                        </v-link>
                      </view>
                    </view>
                </view>
            </view>
        </template>
      </view> -->
				<!-- $toast($t('first.b9')) -->
				<!--      <view @click="_router.push('/pages/currency/index')" class="otc m-md bg-panel-3 m-t-md box-shadow rounded-lg d-flex justify-between align-center p-r-lg">
          <view class="d-flex align-center">
              <img width="43px" height="43px" src="static/img/b.png"/>
              <view class="color-theme-2 fn-15 m-l-md d-flex align-center">{{ $t("first.b7") }}<span class="color-light fn-12 m-l-xs">{{ $t("first.b6") }}</span></view>
          </view>
          <van-icon name="arrow" class="color-theme-2"/>
      </view> -->

				<!-- <view class="m-x-md ">
          <text @click="infoActive=0" class="m-r-lg" :class="infoActive==0?'fn-bold fn-16 bor5 color-light':''">{{ $t("first.b5") }}</text>
          <text @click="infoActive=1" class="m-l-lg" :class="infoActive==1?'fn-bold fn-16 bor5 color-light':''">{{ $t("first.b4") }}</text>
      </view> -->

				<view class="head_info" style="background-color: #fff;padding-top: 25px;" v-if="0">
					<van-tabs v-if="marketList.length" :active="infoActive" background="transparent" :border="false"
						animated>
						<van-tab>
							<view class="w-12/12 m-t-xs">
								<view class="fn-center w-max">
									<v-link :to="{
										 path: '/pages/exchange/index',
										 query: { code: item.pair_name,contract:1 },
									 }" class="m-b-md m-x-md rounded-xs bg-panel-3 box-shadow link-active d-flex justify-between align-center p-x-md p-y-xs box-size p-x-xs"
										v-for="(item,index) in marketListHe" :key="index">
										<view class="fn-left w-6/12">
											<view class="d-flex align-center">
												<text class="fn-bold fn-14 color-light">{{ item.pair_name }}</text>
												<text class="color-default fn-12 m-l-xs">{{ $t("first.b8") }}</text>
											</view>
											<view class="d-flex align-center fn-12 m-t-xs">
												24H{{ $t("first.b3") }} {{ omitTo(item.vol,0) }}
											</view>
										</view>
										<!-- <view class="fn-left align-end w-3/12">
										 <view class="d-flex align-end fn-bold fn-16" :class="item.increase * 1 >0?'color-buy':'color-sell'">{{ item.close }}</view>
										 <view class="m-t-xs">
												 ￥{{ omitTo(item.close*price_cny,2) }}
										 </view>
									 </view> -->
										<view class="fn-right w-3/12 positions">
											<span class="rounded-xs posi fn-12" :class="
												 item.increase * 1 > 0 ? 'color-buy' : 'color-sell'
											 ">{{ item.increaseStr }}</span>
											<span class="d-flex align-end fn-bold fn-16"
												:class="item.increase * 1 >0?'color-buy':'color-sell'">{{ item.close }}</span>
											<!-- <view class="charts-box m-t-xs">
											 <qiun-data-charts
												 type="tarea"
												 :chartData="item.kline"
												 background="none"
												 :tapLegend="false"
												 :range="item.increase*1>0?true:false"
											 />
										 </view> -->
										</view>
									</v-link>
								</view>
							</view>
						</van-tab>
						<van-tab v-for="parentItem in marketList" :key="parentItem.coin_name"
							v-if="parentItem.coin_name=='USDT'">
							<view class="w-12/12 m-t-xs">
								<view class="m-x-md p-x-md fn-bold fn-18 fn-center" style="color: #111;">
									{{$t("homeNewText.aa5")}}
								</view>
								<view class="m-x-md p-x-md m-b-md m-t-xs fn-12 fn-center">
									{{$t("homeNewText.aa6")}}
								</view>
								<view class="fn-center w-max">
									<v-link :to="{
                    path: '/pages/exchange/index',
                    query: { code: item.pair_name },
                  }" class="m-b-md rounded-xs bg-panel-3 link-active d-flex justify-between align-center p-x-md p-y-xs box-size p-x-xs"
										v-for="item in parentItem.collect
                    ? collect
                    : parentItem.marketInfoList.slice(0,5)" :key="item.pair_name">
										<view class="fn-left w-2/12">
											<view class="d-flex">
												<image class="coin_icon" :src="item.coin_icon" mode=""></image>
											</view>
										</view>
										<view class="fn-left w-6/12">
											<view class="d-flex align-center">
												<text class="fn-bold fn-14 color-light">{{ item.pair_name }}</text>
											</view>
											<view class="d-flex align-center fn-12 m-t-xs">
												24H{{ $t("first.b3") }} {{ omitTo(item.vol,0) }}
											</view>
										</view>
										<!-- <view class="fn-left align-end w-3/12">
                    <view class="d-flex align-end fn-bold fn-16" :class="item.increase * 1 >0?'color-buy':'color-sell'">{{ item.close }}</view>
                    <view class="m-t-xs">
                        ￥{{ omitTo(item.close*price_cny,2) }}
                    </view>
                  </view> -->
										<view class="fn-right w-6/12 positions">
											<view class="rounded-xs fn-bold fn-16" :class="
                        item.increase * 1 > 0 ? 'color-buy' : 'color-sell'
                      ">{{ item.increaseStr }}</view>
											<view class="fn-12">${{ item.close }}</view>
											<!-- <view class="charts-box m-t-xs">
                      <qiun-data-charts
                        type="tarea"
                        :chartData="item.kline"
                        background="none"
                        :tapLegend="false"
                        :range="item.increase*1>0?true:false"
                      />
                    </view> -->
										</view>
									</v-link>
								</view>
							</view>
						</van-tab>
					</van-tabs>
				</view>

				<!-- 适合所有人的加密货币交易所 -->
				<view style="margin-top: 100rpx;" v-if="0">
					<view class="fn-20 fn-bold m-y-md manage_text" style="text-align: center;">
						{{ $t("homeNewText.bb4") }}
					</view>
					<view class="fn-12" style="text-align: center;">{{ $t("homeNewText.bb5") }}</view>
					<view class="card_area m-y-md">
						<view class="card_item" style="background-color: #FEF6E7;">
							<view class="fn-18 fn-bold" style="color: #101010;margin-bottom:10px;">
								<img src="../../assets/img/home/6.png" />{{ $t("homeNewText.bb6") }}</view>
							<view style="font-size: 14px;color: #595558;">{{ $t("homeNewText.bb7") }}</view>
						</view>
						<view class="card_item" style="background-color: #E0EFFF;">
							<view class="fn-18 fn-bold" style="color: #101010;margin-bottom:10px;">
								<img src="../../assets/img/home/7.png" />{{ $t("homeNewText.cc1") }}</view>
							<view style="font-size: 14px;color: #595558;">{{ $t("homeNewText.cc2") }}</view>
						</view>
						<view class="card_item" style="background-color: #F0E7FF;">
							<view class="fn-18 fn-bold" style="color: #101010;margin-bottom:10px;">
								<img src="../../assets/img/home/8.png" />{{ $t("homeNewText.cc3") }}</view>
							<view style="font-size: 14px;color: #595558;">{{ $t("homeNewText.cc4") }}</view>
						</view>
					</view>
				</view>
				<view class="introduce_area" v-if="0">
					<view class="zhanshi"></view>
					<view class="item">
						<image src="../../assets/img/home/图片 9@3x.png" mode=""></image>
						<view class="" style="flex: 1;">
							<view class="fn-18 fn-bold m-b-sm" style="color: #101010;">{{ $t("homeNewText.dd1") }}
							</view>
							<view class="">{{ $t("homeNewText.dd2") }}</view>
						</view>
					</view>
					<view class="item">
						<image src="../../assets/img/home/图片 7@3x.png" mode=""></image>
						<view class="" style="flex: 1;">
							<view class="fn-18 fn-bold m-b-sm" style="color: #101010;">{{ $t("homeNewText.dd3") }}
							</view>
							<view class="">{{ $t("homeNewText.dd4") }}</view>
						</view>
					</view>
					<view class="item">
						<image src="../../assets/img/home/图片 6@3x.png" mode=""></image>
						<view class="" style="flex: 1;">
							<view class="fn-18 fn-bold m-b-sm" style="color: #101010;">{{ $t("homeNewText.dd5") }}
							</view>
							<view class="">{{ $t("homeNewText.dd6") }}</view>
						</view>
					</view>

				</view>
				<!-- 多终端支持    交易，随时随地 -->
				<view class="download_area" v-if="0">
					<view class="fn-20 fn-bold" style="color: #101010;text-align: center;">{{ $t("homeNewText.ee1") }}
					</view>
					<view class="fn-12" style="text-align: center;color: #999;margin-top: 10px;">
						{{ $t("homeNewText.ee2") }}
					</view>
					<view class="fn-12" style="text-align: center;color: #999;margin-top: 10px;">
						{{ $t("homeNewText.ee3") }}
					</view>
					<view class="zhanshi"></view>
					<view class="btn" @click="toLink('apple')">
						<image src="../../assets/img/home/antFill-apple@3x.png" mode=""></image>App Store
					</view>
					<view class="btn" @click="toLink('android')">
						<image src="../../assets/img/home/md-android@3x.png" mode=""></image>Android
					</view>
					<!--<view class="btn"><image src="../../assets/img/home/riFill-google-play-fill@3x.png" mode="">Google Play</image></view>-->
				</view>

				<!-- 新手指引 -->
				<view v-if="0">
					<view class="section-h-3" v-if="articleList.length>0">
						<view class="title1 fn-center">{{ $t("cxiNewText.a71") }}</view>
						<view class="title2 fn-center">{{ $t("homeNewText.ee4") }}</view>
						<view class="">
							<!-- <v-link class="" v-for="(articleItem, articleIndex) in articleList" :key="articleIndex" :to="'/pages/help/detail?id='+articleItem.id">
							<view class="list-box m-b-md m-t-lg" :style="{backgroundImage: bgUrl(articleItem.full_cover)}"></view>
							<view class="">{{ articleItem.title }}</view>
						</v-link> -->
							<v-link class="" :to="'/pages/help/detail?id='+articleList[0].id">
								<view class="list-box m-b-md m-t-lg"
									style="background-image: url('../../assets/img/home/11.png');">
									<image src="../../assets/img/home/11.png" mode="" style="width: 100%;height: 100%;">
									</image>
								</view>
							</v-link>
							<v-link class="" :to="'/pages/help/detail?id='+articleList[1].id">
								<view class="list-box m-b-md m-t-lg">
									<image src="../../assets/img/home/10.png" mode="" style="width: 100%;height: 100%;">
									</image>
								</view>
							</v-link>
							<v-link class="" :to="'/pages/help/detail?id='+articleList[2].id">
								<view class="list-box m-b-md m-t-lg">
									<image src="../../assets/img/home/9.png" mode="" style="width: 100%;height: 100%;">
									</image>
								</view>
							</v-link>
						</view>
					</view>
				</view>

				<!-- 点击前往 -->
				<view class="section-h-1" v-if="0">
					<view class="justify-center" style="display: flex;">
						<image src="../../assets/img/home/coin.png"
							style="width: 112rpx;height: 112rpx;margin-right: 20rpx;" mode=""></image>
						<view style="text-align: left;">
							<view class="fn-18 fn-bold m-b-sm" style="color: #444;">{{ $t("homeNewText.ee5") }}</view>
							<view class="fn-12 fn-bold m-b-sm" style="color: #999;">{{ $t("cxiNewText.a21") }}</view>
						</view>
					</view>
					<navigator class="homeBtn" url="/pages/login/index" v-if="!isLogin">{{ $t("cxiNewText.a57") }}
					</navigator>
					<view class="homeBtn" @click="tabChange('mine')" v-else>{{ $t("cxiNewText.a57") }}</view>
				</view>
			</scroll-view>
		</view>
		<!-- 个人主页弹出层 -->
		<van-popup class="personalCenter-main colbg bg-panel-4" :show="show" @close="show = false" position="left"
			custom-style="width:100%;height:100%">
			<view style="height: var(--status-bar-height)"></view>
			<view class="personalCenter-top">
				<view class="theme-switch m-x-md d-flex justify-between">
					<van-icon name="arrow-left" @click="show = false" class="fn-22" />
					<!-- <view class="v-switch border rounded-xs d-flex" @click="changtTheme">
                <view
                  class="icon border"
                  :class="theme == 'light' ? 'bg-gradient-green active' : 'bg-gradient-green'"
                >
                  <view class="left color-light">{{ $t("common.light") }}</view>
                  <view class="right color-light">{{ $t("common.dark") }}</view>
                </view>
              </view> -->

					<img width="25px" height="25px" @click="changtTheme" :src="theme == 'light' ? 'static/img/moon.png' : 'static/img/sun.png'" />
				</view>
				<view class="information p-l-md m-t-xl">
					<!-- <img :src="logoMap.login_logo" class="h-50 w-50 d-block m-r-xs rounded-max flex-shrink" /> -->
					<view class="inf-rig flex-fill">
						<!-- <span class="fn-lg color-light" v-if="isLogin">{{
              user.account
            }}</span> -->
						<!-- @click="toAccountSettings" -->

						<!-- <span v-if="isLogin" class="inf-rig-cent fn-20 color-light">UID：{{ isLogin ? user.user_id : "-" }}
                #ifdef H5
                <i class="iconfont m-l-lg" @click="copy(user.user_id)">&#xe706;</i>
                #endif
                #ifndef H5
                <i class="iconfont m-l-lg" @click="$copy(user.user_id+'')">&#xe706;</i>
                #endif
            </span> -->

						<!-- v-else -->
						<view v-if="!isLogin" class="color-light" @click.stop>
							<view class="fn-bold fn-16">
								{{ $t("first.b2") }}
							</view>
							<v-link to="/pages/login/index" class="color-theme-1 goLogin rounded m-t-xs fn-xs">
								{{ $t("first.b1") }}
							</v-link>
						</view>
					</view>
					<!-- <v-link to="/pages/invite/level" style="padding:3px 4px 6px"
						class="bg-panel-4 border border-r-0 rounded-tl-lg rounded-bl-lg border-buy" @click.native.stop>
						<span class="fn-xs color-buy">{{ $t("base.e6") }}</span>
					</v-link> -->
				</view>
			</view>
			<v-link v-if="isLogin" to="/pages/auth/index" tag="div"
				class="bg-form-panel-3 p-xs m-xs color-theme-1 d-flex justify-between align-center">
				<view class=" d-flex align-center">
					<van-icon name="manager" class="fn-18" />
					<text class="p-l-md fn-14">{{$t('auth.a1')}}</text>
				</view>
				<text class="bg-theme-1 color-white p-x-xs p-y-xxs rounded"
					v-if="detail.status!=2">{{$t('first.a0')}}</text>
				<text class="bg-theme-1 color-white p-x-xs p-y-xxs rounded" v-else>{{$t('auth.a3')}}</text>
			</v-link>
			<!-- <view class="personalCenter-center border-b border-gray-5">
        <view class="d-flex justify-around">
          <v-link
            to="/pages/assets/recharge"
            tag="div"
            class="d-flex flex-col align-center"
          >
            <img src="static/img/13.png" alt="" class=" h-44" />
            <span class="fn-md color-light p-y-xs">{{ $t("base.b5") }}</span>
          </v-link>
          <v-link
            to="/pages/assets/draw"
            tag="div"
            class="d-flex flex-col align-center"
          >
            <img src="static/img/5.png" alt="" class="h-44" />
            <span class="fn-md color-light p-y-xs">{{ $t("base.b6") }}</span>
          </v-link>
          <v-link
            to="/pages/purchase/index"
            tag="div"
            class="d-flex flex-col align-center"
          >
            <img src="static/img/8.png" alt="" class="h-44" />
            <span class="fn-md color-light p-y-xs">{{ $t("base.b7") }}</span>
          </v-link>
        </view>
      </view> -->
			<view class="personalCenter-bottom m-t-md">

				<!-- <v-link
          to="/pages/commission/index"
          tag="div"
          class="per-bot p-y-md p-x-sm d-flex align-center justify-between"
        > -->
				<view class="per-bot p-y-md p-x-sm d-flex align-center justify-between" @click="contract()">
					<view class="d-flex align-center">
						<img :src="$localImgUrl('Page1.png')" alt="" class="m-r-xs h-17">
						<span class="color-light">{{ $t("base.c1") }}</span>
					</view>
					<van-icon name="arrow" class="fn-18" />
				</view>

				<!-- </v-link> -->

				<!-- <v-link
          to="/pages/otc/pays"
          tag="div"
          class="per-bot p-y-sm p-l-sm border-b d-flex align-center"
        >
          <img :src="$localImgUrl('Page9.png')" alt="" class="h-20 m-r-xs">
          <span class="color-light">{{$t('otc.j6')}}</span>
        </v-link> -->
				<!-- <v-link
          to="/pages/auth/index"
          tag="div"
          class="per-bot p-y-md p-x-sm d-flex align-center justify-between"
        >
          <view class="d-flex align-center">
              <img :src="$localImgUrl('Page2.png')" alt="" class="h-20 m-r-xs" />
              <span class="color-light">{{ $t("base.c2") }}</span>
          </view>
          <van-icon name="arrow" class="fn-18" />
        </v-link> -->
				<v-link to="/pages/safe/index" tag="div"
					class="per-bot p-y-md p-x-sm d-flex align-center justify-between">
					<view class="d-flex align-center">
						<img :src="$localImgUrl('Page3.png')" alt="" class="h-20 m-r-xs" />
						<span class="color-light">{{ $t("base.c3") }}</span>
					</view>
					<van-icon name="arrow" class="fn-18" />
				</v-link>
				<v-link to="/pages/notice/index" tag="div"
					class="per-bot p-y-md p-x-sm d-flex align-center justify-between">
					<view class="d-flex align-center">
						<img :src="$localImgUrl('Page4.png')" alt="" class="h-20 m-r-xs" />
						<span class="color-light">{{ $t("base.c4") }}</span>
					</view>
					<van-icon name="arrow" class="fn-18" />
				</v-link>
				<v-link to="/pages/assets/address-list" tag="div"
					class="per-bot p-y-md p-x-sm d-flex align-center justify-between">
					<view class="d-flex align-center">
						<img :src="$localImgUrl('Page5.png')" alt="" class="h-20 m-r-xs" />
						<span class="color-light">{{ $t("base.c5") }}</span>
					</view>
					<van-icon name="arrow" class="fn-18" />
				</v-link>
				<!-- <v-link
          to="/pages/purchase/index"
          tag="div"
          class="per-bot p-y-md p-x-sm d-flex align-center justify-between"
        >
          <view class="d-flex align-center">
              <img :src="$localImgUrl('fill5.png')" alt="" class="h-20 m-r-xs" />
              <span class="color-light">{{ $t("exchange.a1") }}</span>
          </view>
          <van-icon name="arrow" class="fn-18" />
        </v-link> -->
				<v-link :to="'/pages/service/service?id=33&type=0'" tag="div"
					class="per-bot p-y-md p-x-sm d-flex align-center justify-between">
					<view class="d-flex align-center">
						<img :src="$localImgUrl('Page10.png')" alt="" class="h-20 m-r-xs" />
						<span class="color-light">{{$t('first.a1')}}</span>
					</view>
					<van-icon name="arrow" class="fn-18" />
				</v-link>
				<v-link to="/pages/assets/userfeedback" tag="div"
					class="per-bot p-y-md p-x-sm d-flex align-center justify-between">
					<view class="d-flex align-center">
						<img :src="$localImgUrl('Page11.png')" alt="" class="h-20 m-r-xs" />
						<span class="color-light">{{ $t("common.c35") }}</span>
					</view>
					<van-icon name="arrow" class="fn-18" />
				</v-link>
				
				<v-link to="/pages/invite/index" tag="div"
					class="per-bot p-y-md p-x-sm d-flex align-center justify-between">
					<view class="d-flex align-center">
						<img :src="$localImgUrl('Page12.png')" alt="" class="h-20 m-r-xs" />
						<span class="color-light">{{ $t("invite.a0") }}</span>
					</view>
					<van-icon name="arrow" class="fn-18" />
				</v-link>
				
				<v-link to="/pages/accountSettings/accountSettings" tag="div"
					class="per-bot p-y-md p-x-sm d-flex align-center justify-between">
					<view class="d-flex align-center">
						<img :src="$localImgUrl('Page7.png')" alt="" class="h-20 m-r-xs" />
						<span class="color-light">{{ $t("base.c6") }}</span>
					</view>
					<van-icon name="arrow" class="fn-18" />
				</v-link>
				<!-- <v-link v-if="is_agency!==1&&isLogin" :to="isLogin?'/pages/oncs/onservice':'/pages/login/index'" tag="div"
					class="per-bot p-y-md p-x-sm d-flex align-center justify-between" style="position: relative;">
					<view class="d-flex align-center">
						<img src="@/static/img/cs_w.png" alt="" class="h-20 m-r-xs" />
						<span class="circle-pulse1" v-if="newscount!==0">{{newscount>=100?'99+':newscount}}</span>
						<span class="color-light">{{ $t("common.service") }}</span>
					</view>
					<van-icon name="arrow" class="fn-18" />
				</v-link> -->
				<!-- <view class="per-bot p-y-md p-x-sm d-flex align-center">
          <img :src="$localImgUrl('Page6.png')" alt="" class="h-20 m-r-xs" />
          <span class="color-light">
            <v-lang
              @change="
                marketList = [];
                indexData();
              "
            ></v-lang>
            <i class="iconfont m-l-xs fn-sm">&#xe6e9;</i>
          </span>
        </view> -->
				<view class="h-80"></view>
				<view v-if="isLogin" class="logout w-max bg-form-panel-4 fn-center color-light p-y-xs rounded-xs"
					@click="loginOut">
					<text class="w-max rounded-lg border-0">{{ $t("accountSettings.a9") }}</text>
				</view>
			</view>
		</van-popup>
		<van-toast id="van-toast" />

	</view>
</template>

<script>
	import Home from "@/api/home";
	import Wallet from "@/api/wallet";
	import Exchange from "@/api/exchange";
	import math from "@/utils/class/math.js";
	import Member from "@/api/member";
	import app from "@/app";
	import Profile from "@/api/profile";
	import College from "@/api/college";
	import {
		mapState,
		mapActions
	} from "vuex";
	import {
		handleClipboard
	} from '../../utils/class/copy.js'
	import qs from "qs";
	import * as echarts from 'echarts';
	
	export default {
		name: "home",
		props: {
			isShow: {
				default: true,
				type: Boolean,
				required: false,
			},
			refresherEnabled: {
				default: true,
				required: false,
				type: Boolean
			},
			tabChange: {
				type: Function,
				default: null
			}
		},
		data() {
			return {
				newscount:0,
				chatcount:null,
				infoActive: 1, // 详情选中
				marketList: [],
				marketListHe: [],
				home: {},
				notice: [],
				wap: "",
				indexList: [],
				createList: [],
				list: [],
				page: 1,
				tab: "kcb",
				show: false,
				checked: false,
				collect: [],
				app,
				first: true,
				active: 0,
				chartDatas: {
					"series": [{
							// "showAllSymbol":true,
							"data": [10, 20, 24, 24, 68, 42],
							"color": "#ff0000"
						},
						// {
						//     "data": [15,2,7,30,51,20],
						//     "color":"#00ff00"
						// }
					]
				},
				heyue: [],
				price_cny: 0,
				detail: {},
				num: 0,
				scrollTop: 0,
				refreshing: false,
				guideList: [], //课程列表
				guideId: '', // 当前显示课程分类的ID
				articleList: [],
				lang1:uni.getStorageSync('language'),
				imgList:[
					require('../../assets/img/home/img1.png'),
					require('../../assets/img/home/img2.png'),
					require('../../assets/img/home/img3.png'),
					require('../../assets/img/home/img4.png'),
					require('../../assets/img/home/img5.png'),
					require('../../assets/img/home/img6.png'),
					require('../../assets/img/home/img7.png'),
					require('../../assets/img/home/img8.png'),
					require('../../assets/img/home/img9.png'),
					require('../../assets/img/home/img10.png'),
					require('../../assets/img/home/img11.png'),
					require('../../assets/img/home/img12.png'),
					require('../../assets/img/home/img1.png'),
					require('../../assets/img/home/img2.png'),
					require('../../assets/img/home/img3.png'),
					require('../../assets/img/home/img4.png'),
					require('../../assets/img/home/img5.png'),
					require('../../assets/img/home/img6.png'),
					require('../../assets/img/home/img7.png'),
					require('../../assets/img/home/img8.png'),
					require('../../assets/img/home/img9.png'),
					require('../../assets/img/home/img10.png'),
					require('../../assets/img/home/img11.png'),
					require('../../assets/img/home/img12.png')
				],
				activeTab: 'news',
				activeMainTab: 'stock',// 当前选中的 Tab 状态
				activeSubTab: 'index',
				// 保存所有的图表实例，方便后续更新数据
				chartInstances: [],
				timer: null,
				account: {},
				isVisible: false,
				coin_name:"USDT",
				
				subTabConfig: {// Tab 配置字典
				  stock: [
				    { id: 'index', name: "homeNewText.hh8" },
				    { id: 'heatmap', name: "homeNewText.hh9" },
				    { id: 'hot', name: "homeNewText.hh10" },
				    { id: 'rank', name: "homeNewText.hh11" }
				  ]
				},
				allMarketData: {
				  stock: {
				    // 1. 股指数据
				    index: [
				      { name: 'S&P 500', price: '6616.85', changeAmt: '14.92', changePct: '0.22', isUp: true, chartData: [6500, 6550, 6520, 6580, 6650, 6590, 6616] },
				      { name: 'NASDAQ 100', price: '24202.37', changeAmt: '92.80', changePct: '0.38', isUp: true, chartData: [24000, 24050, 24040, 24100, 24180, 24120, 24202] },
				      { name: 'DOW JONES', price: '46584.46', changeAmt: '-160.30', changePct: '-0.34', isUp: false, chartData: [46700, 46750, 46600, 46650, 46700, 46500, 46584] },
				      { name: 'RUSSELL 2000', price: '2544.94', changeAmt: '12.25', changePct: '0.48', isUp: true, chartData: [2520, 2530, 2535, 2540, 2555, 2540, 2544] }
				    ],
				    // 2. 热力图数据
				    heatmap: [
				      { name: 'SPY', changePct: '2.89', isUp: true }, { name: 'QQQ', changePct: '3.79', isUp: true },
				      { name: 'NVDA', changePct: '4.95', isUp: true }, { name: 'TSLA', changePct: '4.72', isUp: true },
				      { name: 'MU', changePct: '10.67', isUp: true }, { name: 'IVV', changePct: '2.94', isUp: true },
				      { name: 'VOO', changePct: '2.90', isUp: true }, { name: 'IWM', changePct: '4.39', isUp: true },
				      { name: 'META', changePct: '5.10', isUp: true }, { name: 'AVGO', changePct: '7.09', isUp: true },
				      { name: 'MSFT', changePct: '3.87', isUp: true }, { name: 'AAPL', changePct: '1.12', isUp: true },
				      { name: 'AMZN', changePct: '4.99', isUp: true }, { name: 'GOOGL', changePct: '4.93', isUp: true },
				      { name: 'USO', changePct: '-13.59', isUp: false }, { name: 'TQQQ', changePct: '11.55', isUp: true }
				    ],
				    // 3. 热门股数据 (为演示，统一用颜色块代替真实图片URL)
				    hot: [
				      { name: 'SPY', price: '675.64', isUp: true, logo: 'https://api.iconify.design/logos:spinnaker.svg' },
				      { name: 'QQQ', price: '607.89', isUp: true, logo: 'https://api.iconify.design/logos:qiskit.svg' },
				      { name: 'NVDA', price: '184.43', isUp: true, logo: 'https://api.iconify.design/logos:nvidia.svg' },
				      { name: 'TSLA', price: '362.80', isUp: true, logo: 'https://api.iconify.design/logos:tesla.svg' },
				      { name: 'MU', price: '414.05', isUp: true, logo: 'https://api.iconify.design/logos:meta.svg' },
				      { name: 'IVV', price: '679.01', isUp: true, logo: 'https://api.iconify.design/mdi:information.svg' },
				      { name: 'VOO', price: '621.10', isUp: true, logo: 'https://api.iconify.design/logos:vanguard.svg' },
				      { name: 'IWM', price: '262.24', isUp: true, logo: 'https://api.iconify.design/logos:ishares.svg' },
				      { name: 'META', price: '601.69', isUp: true, logo: 'https://api.iconify.design/logos:meta-icon.svg' }
				    ],
				    // 4. 排行榜数据
				    rank: [
				      { name: 'SPY', price: '675.64', changePct: '2.89', isUp: true, logo: 'https://api.iconify.design/logos:spinnaker.svg' },
				      { name: 'QQQ', price: '607.89', changePct: '3.79', isUp: true, logo: 'https://api.iconify.design/logos:qiskit.svg' },
				      { name: 'NVDA', price: '184.43', changePct: '4.95', isUp: true, logo: 'https://api.iconify.design/logos:nvidia.svg' },
				      { name: 'TSLA', price: '362.80', changePct: '4.72', isUp: true, logo: 'https://api.iconify.design/logos:tesla.svg' }
				    ]
				  }
				},
				// 新闻数据源 (模仿图1)
				newsList: [
				  {
				    title: "How the Fed impacts stocks, bonds, crypto and other investments",
				    source: "Bankrate",
				    date: "2026-03-23",
				    image: "https://images.unsplash.com/photo-1611974789855-9c2a0a7236a3?auto=format&fit=crop&w=150&q=80" // 示意图
				  },
				  {
				    title: "Predicción de Precios de Cripto Hoy 4 de marzo – XRP, Bitcoin, Ethereum",
				    source: "Binance",
				    date: "2026-03-23",
				    image: "" // 第二条没有图片
				  },
				  {
				    title: "1 Top Cryptocurrency to Buy Before It Soars 177% in 2026, According to...",
				    source: "Yahoo Finance",
				    date: "2026-03-23",
				    image: "https://images.unsplash.com/photo-1621416894569-0f39ed31d247?auto=format&fit=crop&w=150&q=80"
				  },
				  {
				    title: "Bitcoin vs Ethereum: Which One is Better?",
				    source: "Simplilearn.com",
				    date: "2026-03-23",
				    image: "https://images.unsplash.com/photo-1516245834210-c4c142787335?auto=format&fit=crop&w=150&q=80"
				  }
				],
			
				// 发现数据源 (模仿图2)
				discoverList: [
				  {
				    title: "I'm still holding $ETH , $SOL , and $BTC . I'll announce soon when I...",
				    author: "James.B",
				    views: "10"
				  },
				  {
				    title: "I already sold everything t$POWER",
				    author: "tyler Oliveira",
				    views: "4"
				  },
				  {
				    title: "Thank you very much $POWER for making me $1.5 Million",
				    author: "Crypto pro",
				    views: "4"
				  },
				  {
				    title: "Stop........ stop........ stop........",
				    author: "Unknown",
				    views: "1"
				  }
				]
			};
		},
		computed: {
			...mapState({
				ws: "ws",
				ws1: "ws1",
				user: "user",
				wsState: "wsState",
				logoMap: "logoMap",
				theme: "theme",
			}),
			isLogin() {
				return Boolean(uni.getStorageSync("token"));
			},
			is_agency(){
				if(this.isLogin){
					const agency = uni.getStorageSync("_user_login")
					const is_agency = agency.data.user.is_agency
					return is_agency
				}
			},
			sortedMarketListHe() {
			    return [...this.marketListHe].sort((a, b) => {
			      if (a.symbol === 'BXPE') return -1; // BXPE 排在最前
			      if (b.symbol === 'BXPE') return 1;
			      return 0; // 其他保持原顺序
			    });
			},
			// 动态计算当前应显示的二级 Tab 列表
			currentSubTabs() {
			  return this.subTabConfig[this.activeMainTab];
			},
			// 动态获取当前应该显示的卡片数据
			// currentMarketData() {
			//   const data = this.allMarketData[this.activeMainTab][this.activeSubTab];
			//   return data ? data : [];
			// }
		},
		watch: {
			isShow(n) {
				// if(n&&this.isLogin){
				// 	this.chatcount = setInterval(()=>{
				// 		this.chat()
				// 	},2000)
				// } else if(!n){
				// 	clearInterval(this.chatcount);
				// }
				if(n){
					this.$nextTick(() => {
					  // 稍微延迟一下，确保 uni-app 的 canvas 节点已经完全挂载
					  this.renderAllCharts();
					  this.startRealTimeUpdate();
					});
				}else if(!n){
					clearInterval(this.timer);
				}
				
				if (n) {
					this.indexData()
					this.ws.send({
						cmd: "sub",
						msg: "indexMarketList",
					});
					this.ws1.send({
						cmd: "sub",
						msg: 'swapMarketList',
					});
				} else {
					this.ws.send({
						cmd: "unsub",
						msg: "indexMarketList",
					});
					this.ws1.send({
						cmd: "unsub",
						msg: 'swapMarketList',
					});
				}
			},
		},
		methods: {
			goMine() {
				this.show = false
				this.tabChange('mine')
			},
			goExchange() {
				this.show = false;
				this.tabChange('exchange-operation')
			},
			contract() {
				this.show = false;
				this.tabChange('contract')
			},
			goReg() {
				uni.navigateTo({
					url: '/pages/reg/index'
				})
			},
			...mapActions({
				setTheme: "setTheme",
			}),
			setQuery: qs.stringify,
			omitTo: math.omitTo,
			onRefresh() {
				this.indexData()
				if (this.refreshing) return;
				this.refreshing = true;
				setTimeout(() => {
					this.refreshing = false;
				}, 1000)
			},
			scroll(event) {
				this.scrollTop = event.detail.scrollTop
			},
			// 获取汇率
			getCurrencyExCny() {
				Exchange.getCurrencyExCny({
					coin_name: 'USDT',
				}).then((res) => {
					this.price_cny = res.data.price_cny;
				});
			},
			changtTheme() {
				if (this.theme == "light") {
					this.setTheme("dark");
				} else {
					this.setTheme("light");
				}
			},
			// 获取涨跌之前的价格
			getOldPrice(price, rate) {
				return math.multiple(math.division(price, 1 + rate * 1), rate, 2);
			},
			toAccountSettings() {
				this._router.push({
					path: "/pages/accountSettings/accountSettings"
				});
			},
			personalCenter() {
				this.show = true;
			},

			indexData() {
				let data = {};
				let ajax = Home.indexList(data, {
					loading: true
				});
				ajax
					.then((res) => {
						this.home = res.data.bannerList;
						this.notice = res.data.noticeList;
						this.indexList = res.data.brokenLine;
						this.marketList = res.data.marketList;
						// this.infoActive = 1;
						this.dunshift();
						this.getCollect();
						setTimeout(() => {
							this.first = false;
						}, 600);
					})
					.catch(() => {});
			},
			dunshift() {
				if (this.marketList.filter((item) => item.collect).length) return;
				this.marketList.unshift({
					coin_name: this.$t("base.c7"),
					collect: true,
					marketInfoList: [],
				});
			},
			// 获取自选交易列表
			getCollect(call) {
				if (!this.isLogin) return;
				Home.getCollect()
					.then((res) => {
						this.collect = res.data || [];
						call && call();
					})
					.catch(() => {});
			},
			// 是否为自选
			isCoolect(i) {
				return this.collect.map((item) => item.pair_name).includes(i.pair_name);
			},
			// 替换自选数据
			replaceOptional() {
				let collect = this.collect.map((item) => item.pair_name);
				this.marketList.forEach((parentItem) => {
					parentItem.marketInfoList.forEach((item) => {
						let idx = collect.indexOf(item.pair_name);
						if (idx != -1) {
							this.collect.splice(idx, 1, item);
						}
					});
				});
			},
			// 添加自选
			option(item) {
				let data = {
					pair_name: item.pair_name,
				};
				Home.option(data)
					.then((res) => {
						this.getCollect();
						if (res.data) {
							this.$toast(this.$t("base.c8"));
						} else {
							this.$toast(this.$t("base.c9"));
						}
					})
					.catch(() => {});
			},
			// 链接socket
			indexMarketList() {
				this.marketList = []
				this.ws.send({
					cmd: "sub",
					msg: "indexMarketList",
				});
				this.ws.on("message", (res) => {
					let {
						data,
						sub
					} = res;
					if (sub == "indexMarketList") {
						this.marketList = data;
						this.marketList.forEach((item, index) => {
							item.marketInfoList.forEach((iitem, iindex) => {
								iitem.kline = {
									series: iitem.series
								}

							})
						})
						this.dunshift();
						this.replaceOptional();
					}
				});
				let msg = "swapMarketList";
				this.ws1.send({
					cmd: "sub",
					msg: msg,
				});
				this.ws1.on("message", (res) => {
					if (!this.isShow) return;
					let {
						data,
						sub
					} = res;
					if (sub == msg) {
						this.marketListHe = data[0].marketInfoList
						this.marketListHe.forEach((item, index) => {
							// item.kline=item.series
							// chartDatas:{
							//   "series": [
							//           {
							//               // "showAllSymbol":true,
							//               "data": [10,20,24,24,68,42],
							//               "color":"#ff0000"
							//           },
							//           // {
							//           //     "data": [15,2,7,30,51,20],
							//           //     "color":"#00ff00"
							//           // }
							//       ]
							// },
							this.marketListHe[index].kline = {
								series: item.series
							}
							// console.log(this.marketListHe)
							// let a=[]
							// item.kline.forEach((arr)=>{
							//     let max=0
							//     arr.data.forEach((arrs)=>{
							//         if(arrs>max){
							//             max=arrs
							//         }
							//     })
							//     let x;
							//     arr.data.forEach((arrs)=>{
							//         if(max>100){
							//             x=max/100
							//             a=this.omitTo(a.push(arrs / x),0)
							//             // console.log(arrs / x)
							//         }else{
							//             x=100/max
							//             a=this.omitTo(a.push(arrs * x),0)
							//             // console.log(arrs * x)
							//         }
							//     })
							// })
							// console.log(this.marketListHe[0].kline)
						})
					}
				});
			},
			// 创建充币地址
			createWalletAddress() {
				Wallet.createWalletAddress()
					.then(() => {})
					.catch(() => {});
			},
			// 退出登录
			loginOut() {
				this.$dialog
					.confirm({
						// title: '',
						message: this.$t("first.b0"),
						cancelButtonText: this.$t("common.cancel"),
						confirmButtonText: this.$t("common.confirm")
					})
					.then(() => {
						let data = {
							lang: uni.getStorageSync('language') || 'zh-CN'
						};
						Member.logout(data, {
								toast: true
							})
							.then(() => {
								this.outLogin();
								// clearInterval(this.chatcount);
							})
							.catch(() => {});
					})
					.catch(() => {});
			},
			// 切换用户
			outLogin() {
				uni.removeStorageSync("token");
				this._router.replace({
					path: "/pages/login/index",
					query: {
						notLogin: 1,
						from: '/pages/accountSettings/accountSettings',
					},
				});
			},
			copy(data) {
				handleClipboard(data, event, () => {
					uni.showToast({
						icon: 'success',
						title: this.$t('common.a1')
					})
				}, () => {
					uni.showToast({
						icon: 'none',
						title: this.$t('common.a2')
					})
				})
			},
			getAuthInfo() {
				Profile.getAuthInfo().then(res => {
					this.detail = res.data
				})
			},
			/**
			 * 获取课程分类和列表
			 */
			getCollegeLinks() {
				College.getCategoryList().then(res => {
					// console.log(res, 11111);
					let list = res.data;
					list.forEach(item => {
						if (this.guideId === '') {
							this.guideId = item.id;
						}
						this.guideList.push({
							url: `/college/list/${item.id}`,
							label: item.name,
							value: item.name,
							id: item.id
						})
					})
					this.getArticleList();
				})
			},
			getArticleList() {
				College.getArticleList({
					id: this.guideId
				}).then(res => {
					let data = res.data;
					this.articleList = data.splice(0, 3);
					// console.log(this.articleList, 222222);
					setTimeout(() => {
						this.skroll();
					}, 100);
				})
			},
			bgUrl(url) {
				return "url('" + url + "')";
			},
			verifyRealName() {
				if (this.detail.primary_status != 1) {
					uni.navigateTo({
						url: '/pages/auth/index'
					})
				} else {
					uni.navigateTo({
						url: '/pages/assets/recharge'
					})
				}
			},
			toLink(type) {
				if (type === 'apple') {
					// #ifdef APP-PLUS
					plus.runtime.openURL("https://app.cxisux.com/download/ ")
					// #endif
					// #ifdef H5
					window.open("https://app.cxisux.com/download/ ", '_blank')
					// #endif
				} else if (type === 'android') {
					// #ifdef APP-PLUS
					plus.runtime.openURL("https://app.cxisux.com/download/ ")
					// #endif
					// #ifdef H5
					window.open("https://app.cxisux.com/download/ ", '_blank')
					// #endif
				}
			},
			chat(){
				Home.chat().then(res => {
					if(res.code==200){
						this.newscount = res.data.count;
					}else{
						// console.log('1111');
						clearInterval(this.chatcount);
					}
				})
			},
			personalAssets() {
				Wallet.personalAssets().then((res) => {
					this.account = res.data;
				});
			},
			toggleVisibility() {
			  this.isVisible = !this.isVisible;
			},
			formatMoney(value,type) {
			  if (this.isVisible) return "******";
			  let num = this.omitTo(value, type ? 8 : 2);
			  if (isNaN(num) || num === null || num === '') return '0.00';
			  
			  let parts = num.toString().split('.');
			  parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
			  return parts.join('.');
			},
			
			// 切换一级分类时，需要重置二级分类为该类别下的第一个
			switchMainTab(tabId) {
			  this.activeMainTab = tabId;
			  // 自动选中对应的第一个子菜单
			  const subTabs = this.subTabConfig[tabId];
			  if (subTabs && subTabs.length > 0) {
				this.activeSubTab = subTabs[0].id;
			  }
			},
			SubTabs(item){
				this.activeSubTab = item.id
				
				if(item.id == "index"){
					this.$nextTick(() => {
					  this.renderAllCharts();
					  this.startRealTimeUpdate(); // 开启实时数据模拟
					});
				}else{
					clearInterval(this.timer);
				}
			},
			
			renderAllCharts() {
			  const chartList = this.allMarketData.stock.index;
			  
			  chartList.forEach((item, index) => {
			    // 获取组件实例。注意：v-for 中的 ref 会返回一个数组，所以要加 [0]
			    const chartComponent = this.$refs['miniChart' + index][0];
			    
			    if (chartComponent) {
			      // 调用 l-echart 内部的 init 方法
			      chartComponent.init(echarts, chart => {
			        // 在这里把你刚才的配置项丢进去
			        chart.setOption(this.getLineChartOption(item));
					// 把实例存起来，用来做实时动画更新
					this.chartInstances[index] = chart; 
			      });
			    }
			  });
			},
			// 2. 模拟 WebSocket 实时推送，让图表“动”起来
			startRealTimeUpdate() {
			  this.timer = setInterval(() => {
			    this.allMarketData.stock.index.forEach((item, index) => {
			      // 模拟产生一个新的价格 (随机上下浮动 5 个点)
			      const lastPrice = item.chartData[item.chartData.length - 1];
			      const newPrice = lastPrice + (Math.random() * 10 - 5);
			      
			      // 更新数据数组 (删除第一个旧数据，推入最新数据)
			      item.chartData.shift(); 
			      item.chartData.push(newPrice);
			      
			      // 判断当前走势是涨是跌
			      item.isUp = newPrice >= lastPrice;
			      item.price = (newPrice * 10).toFixed(2); // 更新显示的文字价格
		
			      // 🔥 核心动画触发！调用 setOption 局部更新数据
			      // ECharts 会自动计算过渡动画，无缝衔接
			      if (this.chartInstances[index]) {
			        this.chartInstances[index].setOption({
			          series: [{
			            data: item.chartData,
			            lineStyle: {
			              color: item.isUp ? '#10b981' : '#ef4444' // 根据涨跌动态变色
			            }
			          }]
			        });
			      }
			    });
			  }, 2000); // 每 2 秒跳动一次
			},
			getLineChartOption(item) {
			  const color = item.isUp ? '#10b981' : '#ef4444'; // 绿涨红跌
			  return {
			    grid: { left: 0, right: 0, top: 10, bottom: 5 }, // 去除边距
			    xAxis: { type: 'category', show: false }, // 隐藏X轴
			    yAxis: { type: 'value', show: false, scale: true }, // 隐藏Y轴，自适应高度
			    series: [{
			      data: item.chartData,
			      type: 'line',
			      smooth: false, // 截图里是直角折线
			      showSymbol: false, // 隐藏折线上的圆点
			      lineStyle: {
			        color: color,
			        width: 2
			      }
			    }]
			  };
			}
		},
		mounted() {
			this.indexData();
			this.indexMarketList();
			this.getCurrencyExCny();
			this.getCollegeLinks();

			if (this.isLogin) {
				// this.chatcount = setInterval(()=>{
				// 	this.chat()
				// },5000)
				this.createWalletAddress();
				this.getAuthInfo()
				this.personalAssets()
			}
			this.lang1 = uni.getStorageSync('language')
			
			this.$nextTick(() => {
			  // 稍微延迟一下，确保 uni-app 的 canvas 节点已经完全挂载
			  setTimeout(() => {
			    this.renderAllCharts();
				this.startRealTimeUpdate();
			  }, 200);
			});
		},
		destroyed() {},
	};
</script>
<style lang="scss" scoped>
	.circle-pulse1 {
		  // background: red;
		  display: flex;
		  justify-content: center;
		  align-items: center;
		  min-width: 20px;
		  height: 20px;
		  font-size: 12px;
		  border-radius: 50%;
		  position: absolute;
		  right: 10%;
		  top: 16px;
		  color: red;
	}
	// .colbg {
	//   background-color: $bg;
	// }
	.my-swipe {
		height: 150px;

		.van-image {
			padding: 0 18px;
			box-sizing: border-box;

			::v-deep img.van-image__img {
				border-radius: 9px !important;
			}
		}
	}

	.notice-swipe {
		height: 24px;
	}

	// #ff4d5c
	.nav2 {
		.color-gray-6 {
			color: #f8a12e;
		}
	}

	.stock-swipe {
		.stock-index {
			display: flex;
			flex-direction: column;
			align-items: center;
			position: relative;

			.stock-item-3 {
				padding: 3px 0;
			}
		}
	}

	.personalCenter-main {
		.personalCenter-top {
			box-sizing: border-box;

			.theme-switch {
				padding: 5% 0;

				.v-switch {
					$width: 50px;
					$icon-width: 20px;
					display: block;
					position: relative;
					height: 20px;
					width: $width;
					background: rgba($green, 0.2);
					overflow: hidden;

					.icon {
						position: absolute;
						top: 0;
						width: $icon-width;
						height: 20px;
						border-radius: inherit;
						transition: left 0.3s;

						.left,
						.right {
							position: absolute;
							width: $width;
							height: 100%;
							top: 0;
							box-sizing: border-box;
							text-align: center;

							&.left {
								right: 0;
								padding-right: $icon-width;
							}

							&.right {
								padding-left: $icon-width;
								left: 0;
							}
						}
					}

					.icon {
						left: 0;
					}

					.active.icon {
						left: $width - $icon-width;
					}
				}
			}

			.information {
				display: flex;
				align-items: flex-start;

				.inf-head-img {
					border-radius: 50%;
					margin-right: 4%;
				}

				.inf-rig {
					display: flex;
					flex-direction: column;
					letter-spacing: 1px;
					flex: 1;

					span:first-child {
						font-weight: 600;
						margin-bottom: 2px;
					}

					.inf-rig-cent {
						padding: 0 0 4px;
					}

					.vip-grade {
						display: flex;
						align-items: center;
						justify-content: flex-end;

						.progress-bar {
							width: 50%;
						}

						.progress-img {
							padding: 0 5px;
						}
					}
				}
			}
		}

		.personalCenter-center {
			padding: 20px 10px 10px;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.personalCenter-bom {
				padding-top: 30px;

				.available-money {
					margin: 10px 0 0;
					height: 60%;
					background: rgba(100, 101, 102, 0.2);
					border-radius: 0 7px 7px 7px;
					align-items: center;
					padding: 6px 5px;
				}
			}
		}
	}

	.user-icon {
		font-size: 50px;
	}

	.epss-1 {
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.lists {
		display: flex;

		.lists-1 {
			margin: 0 5px;
		}
	}

	.logout {
		width: 80%;
		margin: 0 auto;

		::v-deep .van-button--default {
			border: none;
			background-color: $panel-3;
		}
	}

	.goLogin {
		padding: 5px 15px;
		border: 1px solid $theme-1;
	}

	.p-y-xxs {
		padding: 3px 0;
	}

	.m-t-xxs {
		margin-top: 5px;
	}

	.bg-box-per {
		box-shadow: 0 5px 10px #c6c0dc;
		border-radius: 50%;
	}

	.bg-box-blue {
		box-shadow: 0 5px 10px #aed6e2;
		border-radius: 50%;
	}

	.bg-box-red {
		box-shadow: 0 5px 10px #d7aec0;
		border-radius: 50%;
	}

	.bg-box-yellow {
		box-shadow: 0 5px 10px #e1d2a3;
		border-radius: 50%;
	}

	.color-white {
		color: white;
	}

	.bor5-active {
		border-bottom: 5px solid $theme-2;
	}

	.w-40 {
		width: 40%;
	}

	::v-deep .van-tabs__line {
		display: none;
	}

	::v-deep .custom-class.van-sticky {
		display: none;
	}

	.bor5 {
		position: relative;
	}

	.bor5:before {
		position: absolute;
		content: "";
		bottom: -10px;
		left: 20%;
		width: 60%;
		height: 2px;
		border-radius: 10px;
		background-color: $theme-2;
		// border-bottom: 5px solid $border-color;
	}

	/deep/ .uni-swiper-dot {
		width: 15px !important;
		height: 3px !important;
		border-radius: 5px;
		background: $light !important;
		opacity: 0.2;
	}

	/deep/ .uni-swiper-dots {
		bottom: -12px !important;
	}

	/deep/ uni-swiper .uni-swiper-slides {
		overflow: hidden;
	}

	/deep/ uni-swiper .uni-swiper-wrapper {
		overflow: inherit;
	}

	/deep/ .uni-swiper-dot-active {
		background: #f0c947 !important;
		width: 30px !important;
		opacity: 1;
	}

	.charts-box {
		width: 100%;
		height: 50px;
	}

	/* 请根据需求修改图表容器尺寸，如果父容器没有高度图表则会显示异常 */
	.chartsview {
		height: 100%;
	}

	.positions {
		position: relative;
	}

	.posi {
		position: absolute;
		right: 0;
		top: 6px;
	}

	.posil {
		position: absolute;
		left: 0;
		top: 0px;
	}

	.scale {
		transform: scale(0.8);
	}

	.fn-9 {
		font-size: 9px;
	}

	.section-h-1 {
		width: 700rpx;
		margin: 0px auto;
		background-color: #f5f5f5;
		border-radius: 10px;
		text-align: center;
		padding: 60rpx 0px;
		display: flex;
		flex-direction: column;
		align-items: center;

		image {
			margin-bottom: 20rpx;
		}

		.btn {
			margin-top: 20rpx;
		}

		.d-flex {
			width: 96%;
			text-align: left;
			flex-wrap: wrap;
			margin-top: 40rpx;
			justify-content: space-around;

			.text1 {
				color: #444;
				font-size: 18px;
				font-weight: bold;
			}

			.text2 {
				color: #999;
				font-size: 12px;
			}
		}
	}

	.homeBtn {
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 10rpx;
		color: #fff;
		background-color: #EABB71;
		min-width: 460rpx;
		box-sizing: border-box;
	}

	.coin_icon {
		width: 60rpx;
		height: 60rpx;
	}

	.section-h-3 {
		width: 750rpx;
		background-color: #fff;
		padding: 30rpx 30rpx 50rpx;
		box-sizing: border-box;

		.title1 {
			font-size: 18px;
			color: #101010;
			font-weight: bold;
			line-height: 26px;
			margin-bottom: 10rpx;
		}

		.title2 {
			font-size: 14px;
			color: #999;
			line-height: 22px;
		}


		.list-box {
			width: 700rpx;
			height: 326rpx;
			border-radius: 10px;
			// background-color: #FAFAFA;
			// background-size: contain;
			// background-position: center;
			// background-repeat: no-repeat;
			background-size: cover;
		}

	}

	.illustration_area {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 30rpx;
		padding-bottom: 100rpx;
		background-color: rgba(10, 239, 198, 0.06);

		.title {
			font-size: 30px;
			font-weight: bold;
			margin-bottom: 40rpx;
			color: var(--text-col);
			position: relative;
			padding: 0px 60rpx;
		}

		.right {
			width: 540rpx;
			height: 550rpx;
			margin: 0px auto;
		}

		.left {
			color: var(--text-col);
			position: absolute;
			top: 50rpx;
			width: 100%;
			text-align: center;

			.title {
				font-size: 30px;
				font-weight: bold;
				margin-top: 160rpx;
				margin-bottom: 44rpx;
			}

			.btn {
				min-width: 500rpx;
				height: 88rpx;
				margin: 154rpx auto 0px;
				background-color: #EABB71;
				border-radius: 5px;
				display: inline-flex;
				justify-content: center;
				align-items: center;
				font-size: 14px;
				color: #fff;

				img {
					width: 48rpx;
					height: 48rpx;
					margin-right: 10px;
				}
			}
		}
	}

	.card_area {

		.card_item {
			width: 700rpx;
			min-height: 280rpx;
			border-radius: 10px;
			box-sizing: border-box;
			padding: 70rpx;
			margin: 0px auto 40rpx;
		}

		img {
			width: 40rpx;
			height: 40rpx;
			margin-right: 20rpx;
			vertical-align: middle;
		}
	}

	.introduce_area {
		width: 700rpx;
		margin: 0px auto;

		.zhanshi {
			width: 700rpx;
			height: 700rpx;
			background-image: url("../../assets/img/home/stt.png");
			background-size: 100% 100%;
		}

		.item {
			width: 700rpx;
			min-height: 220rpx;
			font-size: 14px;
			display: inline-flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 40rpx;

			image {
				width: 120rpx;
				height: 120rpx;
				margin-right: 20rpx;
			}
		}
	}

	.download_area {
		width: 750rpx;
		margin: 160rpx auto 120rpx;

		.zhanshi {
			width: 750rpx;
			height: 550rpx;
			background-image: url("../../assets/img/home/styy.png");
			background-size: cover;
			margin: 40rpx 0px 60rpx;
		}

		.btn {
			width: 700rpx;
			height: 88rpx;
			color: #101010;
			background-color: #EABB71;
			border-radius: 50px;
			font-size: 16px;
			display: inline-flex;
			justify-content: center;
			align-items: center;
			margin: 0px 25rpx 40rpx;

			image {
				width: 56rpx;
				height: 56rpx;
				margin-right: 20rpx;
			}
		}
	}

	.num1 {
		// color: #000;
		font-size: 40rpx;
		font-weight: bold;
		margin-bottom: 5px;
	}

	.jump_btn_one {
		font-weight: bold;
		min-width: 660rpx;
		height: 100rpx;
		background-color: #66E2DA;
		color: #000000;
		border-radius: 20rpx;
		margin: 0 auto 0;
		line-height: 100rpx;
		text-align: center;
		font-size: 32rpx;
	}
	
	.jump_btn_one1{
		padding: 0rpx 100rpx;
		font-weight: bold;
		// min-width: 600rpx;
		height: 100rpx;
		background-color: #66E2DA;
		color: #000000;
		border-radius: 20rpx;
		margin: 0 auto 0;
		line-height: 100rpx;
		text-align: center;
		font-size: 32rpx;
	}

	.jump_btn {
		font-weight: bold;
		min-width: 660rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		margin: 0px auto 0px;
		background-color: #66E2DA;
		border-radius: 10px;
		font-size: 14px;
		color: #000;
	}

	.buys {
		color: #59AF9D;
	}
	
	.buys1{
		color: #53b987;
	}

	.red {
		color: #D1705E;
	}
	.product {
		width: 670rpx;
		// border: 2px solid #F0F0F0;
		// min-height: 600rpx;
		margin-bottom: 45px;
		padding: 15px 0px;
		border-radius: 10px;
		box-shadow: 0px 0px 10px 0px var(--col4);
		.product_text1 {
			// color: #000;
			// margin-left: 60rpx;
			margin-top: 60rpx;
			font-weight: bold;
			font-size: 23px;
			margin-bottom: 10px;
			text-align: center;
		}
	
		.product_text2 {
			margin-left: 30px;
			width: 263px;
			font-size: 28rpx;
			color: #C4C4C4;
		}
	}
	.text_size {
		font-size: 20px;
		font-weight: bold;
	}
	.text_width {
		// width: 165px;
		margin-left: 40px;
		color: #A5A5A5;
	}
	.manage_text{
		color: var(--text-col);
	}
	.manage-col{
		background-color: var(--manage-text-col);
	}
	.index_partners__3BIDL{
		width: 100vw;
		overflow: hidden;
		padding: 16px 0;
		// margin-bottom: 10px;
		background: #F9F9F9;
		.rfm-marquee-container{
			overflow-x: hidden;
			display: flex;
			flex-direction: row;
			position: relative;
			width: 100%;
			transform: none;
			.rfm-marquee{
				flex: 0 0 auto;
				min-width: 100%;
				// z-index: 1;
				display: flex;
				flex-direction: row;
				align-items: center;
				animation: scroll 100s linear 0s infinite;
				animation-play-state: running;
				animation-delay: 0s;
				animation-direction: normal;
				.rfm-initial-child-container{
					flex: 0 0 auto;
					display: flex;
					min-width: auto;
					flex-direction: row;
					align-items: center;
					.rfm-child{
						transform: none;
						.ant-image{
							position: relative;
							display: inline-block;
							.ant-image-img{
								width: 100px;
								height: 20px;
								margin-left: 16px;
								padding-top: 5px
							}
						}
					}
				}
			}
			@keyframes scroll {
				0% {
				    transform: translateX(0%);
				}
				100% {
				    transform: translateX(-75%);
				}
			}
		}
	}
	
	/* 2. 快捷操作金刚区 */
	.action-grid {
	  display: flex;
	  justify-content: space-between;
	  margin-bottom: 50rpx;
	  margin-left: 50rpx;
	  margin-right: 50rpx;
	}
	.action-item {
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  flex-wrap: wrap;
	  gap: 8px;
	}
	.icon-box {
	  width: 104rpx;
	  height: 104rpx;
	  background: var(--ex-home-box-background-color2);
	  border-radius: 24rpx;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  font-size: 40rpx;
	}
	.label {
	  font-size: 24rpx;
	  text-align: center;
	  margin-top: 20rpx;
	  // color: #eaecef;
	}
	
	.scrollbar{
		border-radius: 10px;
		padding: 10px 15px;
		border: 1px solid rgba(148, 163, 184, 0.14);
		background-color: var(--col8) !important;
	}
	
	/* 3. 一级分类 Tab */
	.main-tabs {
	  display: flex;
	  gap: 20px;
	  margin-bottom: 15px;
	  margin-left: 50rpx;
	  margin-right: 50rpx;
	}
	.tab-item {
	  font-size: 16px;
	  // color: #848e9c;
	  padding-bottom: 8px;
	  cursor: pointer;
	  position: relative;
	  transition: all 0.3s;
	}
	.tab-item.active {
	  color: #0ecb81; /* 激活时文字变绿 */
	  font-weight: bold;
	}
	/* 绿色下划线 */
	.tab-item.active::after {
	  content: '';
	  position: absolute;
	  bottom: 0;
	  left: 10%;
	  width: 80%;
	  height: 3px;
	  background-color: #fcd535;
	  border-radius: 3px;
	}
	
	/* 4. 二级分类 Tab */
	.sub-tabs {
	  display: flex;
	  // gap: 10px;
	  margin-bottom: 20px;
	  margin-left: 50rpx;
	  margin-right: 50rpx;
	}
	.sub-tab-item {
	  font-size: 13px;
	  color: #848e9c;
	  padding: 6px 14px;
	  border-radius: 4px;
	  cursor: pointer;
	  transition: all 0.3s;
	}
	.sub-tab-item.active {
	  background-color: var(--ex-home-notice-bgcolor); /* 激活时的深灰底色 */
	  color: var(--text-col);
	}
	
	/* 5. 市场数据卡片网格 */
	/* 文字颜色公用 */
	.text-green { color: #10b981; }
	.text-red { color: #ef4444; }
	
	/* ================= 布局 1：股指 (2x2网格) ================= */
	.market-grid-index {
	  display: grid;
	  grid-template-columns: 1fr 1fr;
	  gap: 20rpx;
	  margin-left: 50rpx;
	  margin-right: 50rpx;
	}
	.market-card {
	  border: 1px solid #e5e7eb;
	  border-radius: 20rpx;
	  padding: 24rpx;
	}
	.card-header {
	  font-size: 28rpx;
	  font-weight: bold;
	  color: #374151;
	  margin-bottom: 10rpx;
	}
	.price-info .main-price {
	  font-size: 36rpx;
	  font-weight: bold;
	}
	.change-detail {
	  font-size: 22rpx;
	  display: flex;
	  gap: 10rpx;
	  margin-top: 4rpx;
	}
	/* ECharts 容器 */
	.mini-chart-wrapper {
	  width: 100%;
	  height: 80rpx; /* Echarts必须给高度 */
	  margin-top: 10rpx;
	}
	
	/* ================= 布局 2：热力图 (4列表格) ================= */
	.market-grid-heatmap {
	  display: grid;
	  grid-template-columns: repeat(4, 1fr);
	  gap: 12rpx;
	  margin-left: 50rpx;
	  margin-right: 50rpx;
	}
	.heatmap-block {
	  border-radius: 12rpx;
	  display: flex;
	  flex-direction: column;
	  justify-content: center;
	  align-items: center;
	  height: 110rpx;
	  color: #ffffff;
	}
	/* 匹配原图的深绿和深红色 */
	.bg-dark-green { background-color: #1a7b5d; }
	.bg-dark-red { background-color: #c82a39; }
	
	.heatmap-block .symbol {
	  font-size: 26rpx;
	  font-weight: bold;
	}
	.heatmap-block .percent {
	  font-size: 22rpx;
	  font-weight: bold;
	  margin-top: 4rpx;
	}
	
	/* ================= 布局 3：热门股 (3列表格) ================= */
	.market-grid-hot {
	  display: grid;
	  grid-template-columns: repeat(3, 1fr);
	  gap: 20rpx;
	  margin-left: 50rpx;
	  margin-right: 50rpx;
	}
	.hot-card {
	  border: 1px solid #e5e7eb;
	  border-radius: 20rpx;
	  padding: 20rpx;
	  display: flex;
	  flex-direction: column;
	  justify-content: space-between;
	}
	.hot-top {
	  display: flex;
	  align-items: center;
	  gap: 12rpx;
	}
	.hot-top .logo {
	  width: 44rpx;
	  height: 44rpx;
	}
	.hot-top .name-box .symbol {
	  font-size: 26rpx;
	  font-weight: bold;
	  color: #111827;
	}
	.hot-top .name-box .fullname {
	  font-size: 20rpx;
	  color: #9ca3af;
	}
	.hot-price {
	  font-size: 30rpx;
	  font-weight: bold;
	  margin-top: 20rpx;
	}
	
	/* ================= 布局 4：排行榜 (列表样式) ================= */
	.market-list-rank {
	  display: flex;
	  flex-direction: column;
	  margin-left: 50rpx;
	  margin-right: 50rpx;
	}
	/* 表头 */
	.list-header {
	  display: flex;
	  justify-content: space-between;
	  font-size: 24rpx;
	  color: #6b7280;
	  padding: 10rpx 0 20rpx 0;
	  border-bottom: 1px solid #f3f4f6;
	}
	.sort-icon { font-size: 20rpx; margin-left: 4rpx; }
	
	/* 每一行 */
	.list-row {
	  display: flex;
	  align-items: center;
	  justify-content: space-between;
	  padding: 24rpx 0;
	  border-bottom: 1px solid #f3f4f6;
	}
	/* 强制各列宽度分配对齐 */
	.col-name { flex: 4; }
	.col-price { flex: 3; text-align: right; }
	.col-change { flex: 3; display: flex; justify-content: flex-end; }
	
	.row-left {
	  display: flex;
	  align-items: center;
	  gap: 16rpx;
	}
	.row-left .logo {
	  width: 50rpx;
	  height: 50rpx;
	}
	.row-left .symbol {
	  font-size: 28rpx;
	  font-weight: bold;
	  color: #111827;
	}
	.row-left .type-tag {
	  font-size: 20rpx;
	  color: #6b7280;
	}
	.row-price {
	  font-size: 32rpx;
	  color: #374151;
	}
	
	/* 胶囊按钮 */
	.pill-btn {
	  padding: 10rpx 20rpx;
	  border-radius: 12rpx;
	  font-size: 26rpx;
	  font-weight: bold;
	  min-width: 120rpx;
	  text-align: center;
	}
	/* 半透明背景色的涨跌按钮 */
	.pill-green {
	  background-color: #e6f7f0;
	  color: #10b981;
	}
	.pill-red {
	  background-color: #fceceb;
	  color: #ef4444;
	}
	
	/* ================= 1. 顶部 Tabs ================= */
	.tabs-header {
	  display: flex;
	  margin-left: 50rpx;
	  margin-right: 50rpx;
	  border-bottom: 1px solid #2b3139;
	  flex-shrink: 0; /* 防止被压缩 */
	}
	
	.tab-item1 {
	  font-size: 32rpx;
	  // color: #848e9c;
	  padding: 24rpx 20rpx;
	  margin-right: 20rpx;
	  position: relative;
	  transition: all 0.3s;
	}
	
	/* 激活状态 */
	// .tab-item1.active {
	//   // color: #ffffff;
	//   font-weight: bold;
	// }
	
	/* 激活时的黄色下划线 */
	.tab-item1.active::after {
	  content: '';
	  position: absolute;
	  bottom: -1px; /* 盖住父元素的 border-bottom */
	  left: 0;
	  width: 100%;
	  height: 4rpx;
	  background-color: #fcd535; /* 图中的黄色 */
	  border-radius: 2rpx;
	}
	
	/* ================= 2. 滚动区域 ================= */
	.scroll-content {
	  flex: 1; /* 占据剩余全部空间 */
	  height: 800rpx; /* 必须设置，让 scroll-view 自己计算高度 */
	}
	
	.list-container {
	  padding: 0 50rpx;
	}
	
	/* ================= 3. 列表通用样式 ================= */
	.text-box {
	  flex: 1;
	  display: flex;
	  flex-direction: column;
	  justify-content: space-between;
	}
	
	.title {
	  // color: #ffffff;
	  font-size: 30rpx;
	  line-height: 1.4;
	  margin-bottom: 16rpx;
	  
	  /* 多行文本省略号 (最多显示2行) */
	  display: -webkit-box;
	  -webkit-box-orient: vertical;
	  -webkit-line-clamp: 2;
	  overflow: hidden;
	}
	
	.meta {
	  display: flex;
	  align-items: center;
	  font-size: 24rpx;
	  color: #848e9c;
	}
	
	.cover-img {
	  width: 200rpx;
	  height: 130rpx;
	  border-radius: 8rpx;
	  background-color: #2b3139; /* 图片未加载时的底色 */
	  flex-shrink: 0;
	}
	
	/* ================= 4. 新闻列表特有样式 (图1) ================= */
	.news-item {
	  display: flex;
	  /* 图片在左边，文字在右边，所以根据图1，有的图在左边，有的是文字铺满 */
	  /* 图1中其实是图在左侧，文字在右侧，或者根据设计灵活反转。这里使用图左文右 */
	  flex-direction: row-reverse; 
	  justify-content: space-between;
	  padding: 30rpx 0;
	  border-bottom: 1px solid #2b3139;
	}
	
	.news-item .left-img {
	  margin-right: 24rpx;
	}
	
	.news-item .source {
	  margin-right: 20rpx;
	}
	
	/* ================= 5. 发现列表特有样式 (图2) ================= */
	.discover-item {
	  display: flex;
	  justify-content: space-between;
	  padding: 30rpx 0;
	  border-bottom: 1px solid #2b3139;
	}
	
	.bold-title {
	  font-size: 32rpx;
	  font-weight: 900; /* 图2的标题特别粗 */
	}
	
	.discover-item .right-img {
	  margin-left: 24rpx;
	}
	
	.discover-item .author {
	  margin-right: 30rpx;
	}
	
	.views {
	  display: flex;
	  align-items: center;
	}
	
	.eye-icon {
	  font-size: 24rpx;
	  margin-right: 8rpx;
	}
	
	/* 图片占位符样式 (图2中的灰色块) */
	.placeholder {
	  background-color: #f5f5f5;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	}
	.placeholder-icon {
	  font-size: 40rpx;
	  color: #ccc;
	}
	
	.tolink{
	  display: flex;
	  // flex-wrap: wrap;
	  flex-direction: column;
	  justify-content: center;
	}
	
	.total-asset-card {
	  // height: 120px;
	  background: var(--col6);
	  border-radius: 24rpx;
	  padding: 40rpx;
	  margin-bottom: 24rpx;
	  overflow: hidden;
	}
	.total-asset-card .card-header {
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  color: #6b7280;
	  font-size: 28rpx;
	  margin-bottom: 24rpx;
	  position: relative;
	}
	
	.heroGlow{
		width: 140px;
		height: 140px;
		right: -50px;
		top: -50px;
		position: absolute;
		background: radial-gradient(circle, rgba(251, 191, 36, .22) 0%, rgba(251, 191, 36, 0) 72%);
	}
	
	/* 眼睛图标样式和交互 (移动端使用 active 代替 hover) */
	.eye-icon {
	  top: -5px;
	  z-index: 2;
	  right: -5px;
	  width: 20px;
	  height: 20px;
	  padding: 5px;
	  display: flex;
	  font-size: 24rpx;
	  position: absolute;
	  border-radius: 50%;
	  align-items: center;
	  transition: all 0.3s;
	  background: #ffffff1f;
	  justify-content: center;
	}
	.eye-icon:active { 
	  color: #ffffff; 
	  opacity: 0.8;
	}
	/* .eye-icon.is-hidden { opacity: 0.5; } */
	
	.total-amount {
	  display: flex;
	  align-items: baseline;
	  gap: 16rpx;
	}
	.total-amount .number {
	  font-size: 56rpx;
	  font-weight: 700;
	  /* color: #111827; */
	  color: #ffffff;
	}
	.total-amount .currency {
	  font-size: 28rpx;
	  /* color: #6b7280; */
	  color: #ffffff;
	  font-weight: normal;
	}
</style>