<template>
	<div id="dowebok" ref="dowebok">
	  <div class="section" v-if="0">
		<div class="banner-block col-xs-8">
		  <!-- <el-carousel :interval="6000" height="490px" style="width: 100%">
			<el-carousel-item v-for="item in pcBannerList" :key="item.id" >
			  <img :src="item.imgurl" width="100%" height="100%" />
			</el-carousel-item>
		  </el-carousel> -->
		  <el-carousel
			class="el_carousel"
			:interval="3000"
			arrow="never"
			height="660px"
		  >
			<el-carousel-item class="el_carousel_item">
			  <img src="../../assets/img/banner/yb1.jpg" />
			</el-carousel-item>
			<el-carousel-item class="el_carousel_item">
			  <img src="../../assets/img/banner/yb2.jpg" />
			</el-carousel-item>
			<el-carousel-item class="el_carousel_item">
			  <img src="../../assets/img/banner/yb3.jpg" />
			</el-carousel-item>
		  </el-carousel>
		  <!--        <img src="../../assets/img/index_banner_2.png" alt="" class="index_banner">-->
		  <!--        <div class="banner_right">-->
		  <!--          <p class="banner_right_p">The world's top security risk control system</p>-->
		  <!--          <input type="text" :placeholder="$t('login.pleaseEmail')" class="banner_right_input">-->
		  <!--          <div class="banner_right_code">-->
		  <!--            <input type="text" :placeholder="$t('setting.enterCode')" class="banner_right_input">-->
		  <!--            <button>{{ $t("login.verCode") }}</button>-->
		  <!--          </div>-->
		  <!--          <button class="banner_right_sign">{{$t('common.sign_up')}}</button>-->
		  <!--        </div>-->
		</div>
		<!-- 走马灯 -->
	  </div>
	  <div style="display: none;">
	  <!-- 公告 -->
	  <!-- <div class="notice container d-flex align-items-center">
		  <div
			class="item d-flex"
			@click="$router.push(`/notice/${item.id}`)"
			v-for="item in noticeList"
			:key="item.id"
		  >
			<div class="title text-truncate">{{ item.title }}</div>
			<div class="time">{{ getNoticeDate(item.created_at) }}</div>
		  </div>
		  <router-link to="/notice" class="text-warning">{{
			$t("home.more")
		  }}</router-link>
		</div> -->
	  <!-- <div class="section1 markets">
		<div class="new-ticker-block new-ticker-block-section">
		  <div class="container">
			<div class="markets__container new-ticker-block-wrap shadow"> -->
	  <!-- <div class="ticker-head">
				<ul class="nav nav-tabs ticker-nav" role="tablist">
				  <li class="nav-item">
					<div class="markets__title">
					  {{ $t("home.marketCenter") }}
					  {{ $t('addinfo.MarketTrend') }}
					  <span class="markets__title_span"
						>/ 24{{ $t("addinfo.HourlyCurrencyUpdates") }}</span
					  >
					</div>
				  </li> -->
	  <!--                                <li class="nav-item">-->
	  <!--                                    <a-->
	  <!--                                        class="nav-link"-->
	  <!--                                        href="javascript:void(0);"-->
	  <!--                                        @click="tab = 'Optional'"-->
	  <!--                                        :class="{ active: tab == 'Optional' }"-->
	  <!--                                    >-->
	  <!--                                        {{ $t("home.optional") }}-->
	  <!--                                        <i class="fa fa-stroopwafel"></i>-->
	  <!--                                    </a>-->
	  <!--                                </li>-->
	  <!--                                <li-->
	  <!--                                    class="nav-item"-->
	  <!--                                    @click="tab = item.coin_name"-->
	  <!--                                    v-for="item in marketList"-->
	  <!--                                    :key="item.coin_name"-->
	  <!--                                >-->
	  <!--                                    <a-->
	  <!--                                        class="nav-link"-->
	  <!--                                        :class="{ active: tab == item.coin_name }"-->
	  <!--                                        href="javascript:void(0);"-->
	  <!--                                    >{{ item.coin_name }}</a-->
	  <!--                                    >-->
	  <!--                                </li>-->
	  <!-- </ul>
			  </div> -->
	  <!-- <div class="market-ticker-block"> -->
	  <!-- Tab panes -->
	  <!-- <div class="tab-content">
				  <div
					class="tab-pane fade in show"
					:class="{ active: 'Optional' == tab }"
				  >
					<table class="table coin-list table-hover">
					  <thead>
						<tr>
						  <th></th>
						  <th scope="col">{{ $t("home.coinType") }}</th>
						  <th scope="col">{{ $t("home.latestPrice") }}</th>
						  <th scope="col">
							{{ $t("home.upAndDown") }}
							<span class="ti-arrow-down"></span>
						  </th>
						  <th scope="col">{{ $t("home.heigh") }}</th>
						  <th scope="col">{{ $t("home.low") }}</th>
						  <th scope="col">
							<div class="text-center">{{ $t("home.vol") }}</div>
						  </th>
						</tr>
					  </thead>
					  <tbody>
						<tr
						  v-for="item in collect"
						  v-show="isShow(item.pair_name)"
						  :key="item.pair_name"
						>
						  <td>
							<i
							  href="javascript:void(0);"
							  @click="option(item)"
							  :class="{ active: isCoolect(item) }"
							  class="el-icon-star-on fn-22"
							></i>
						  </td>
						  <td>
							<router-link :to="`/exchange/${item.symbol}`"
							  >{{ item.pair_name }}
							</router-link>
						  </td>
						  <td>
							<span
							  :class="
								item.increase * 1 >= 0 ? 'increace' : 'decreace'
							  "
							  >{{ item.close }}</span
							>
						  </td>
						  <td>
							<span
							  :class="
								item.increase * 1 >= 0 ? 'increace' : 'decreace'
							  "
							  >{{ item.increaseStr }}</span
							>
						  </td>
						  <td>{{ item.high }}</td>
						  <td>{{ item.low }}</td>
						  <td class="text-center">{{ item.vol }}</td>
						</tr>
						<tr v-if="!collect.length">
						  <td colspan="7">
							<no-record />
						  </td>
						</tr>
					  </tbody>
					</table>
				  </div>
				  <div
					class="tab-pane fade in show"
					:class="{ active: parentItem.coin_name == tab }"
					v-for="parentItem in marketList"
					:key="parentItem.coin_name"
				  >
					<table class="table coin-list table-hover">
					  <thead>
						<tr> -->
	  <!-- <th></th> -->
	  <!-- <th scope="col" class="table_th">{{ $t("home.coinType") }}</th> -->
	  <!-- <th scope="col" class="table_th">
							{{ $t("option.coinType") }}
						  </th> -->
	  <!-- <th scope="col" class="table_th">{{ $t("home.low") }}</th> -->
	  <!-- <th scope="col" class="table_th">
							{{ $t("home.latestPrice") }}
						  </th>
						  <th scope="col" class="table_th">
							{{ $t("home.upAndDown") }} -->
	  <!--                          24小时涨停-->
	  <!-- <span class="ti-arrow-down"></span>
						  </th>
						  <th scope="col" class="table_th">
							{{ $t("common.markets") }}
						  </th>
						  <th scope="col" class="table_th">
							{{ $t("wallet.transaction") }}
						  </th> -->
	  <!-- <th scope="col" class="table_th">{{ $t("home.heigh") }}</th> -->
	  <!-- <th scope="col" class="table_th">
												  <div class="text-center">{{ $t("home.vol") }}</div>
												</th> -->
	  <!-- </tr>
					  </thead>
					  <tbody>
						<template
						  v-for="(item, idx) in parentItem.marketInfoList"
						>
						  <tr
							v-if="idx < 8"
							v-show="isShow(item.pair_name)"
							:key="item.pair_name"
						  > -->
	  <!-- <td>
													  <i
														href="javascript:void(0);"
														@click="option(item)"
														:class="{ active: isCoolect(item) }"
														class="el-icon-star-on star-icon fn-22"
													  ></i>
													</td> -->
	  <!-- <td>
							  <router-link :to="`/exchange/${item.symbol}`">
								<img
								  :src="item.coin_icon"
								  alt=""
								  class="coin_icon"
								/>
								{{ item.pair_name }}
							  </router-link>
							</td>
							<td>
							  <span
								:class="
								  item.increase * 1 >= 0 ? 'increace' : 'decreace'
								"
								>{{ item.close }}</span
							  >
							</td> -->
	  <!-- <td>{{ item.low }}</td> -->
	  <!-- <td>
							  <span
								:class="
								  item.increase * 1 >= 0 ? 'increace' : 'decreace'
								"
								>{{ item.increaseStr }}</span
							  >
							</td>
							<td> -->
	  <!-- <span
														  :class="
															item.increase * 1 >= 0 ? 'increace' : 'decreace'
														  "
														  >{{ item.increaseStr }}</span
														> -->
	  <!-- <img src="../../assets/img/increace.png" class="td_img" alt="" v-show="item.increase * 1 >= 0">
														<img src="../../assets/img/decreace.png" class="td_img" alt="" v-show="item.increase * 1 < 0"> -->
	  <!-- <svg width="109" height="39">
															<g style="transform: translate(0, 10px)">
																<path :d="item.line"  :class="item.increase *1 <0 ?'path_decreace':'path_increace'"/>
															</g>
														</svg> -->
	  <!-- <price-line
								:line="item.prices"
								:increase="item.increase"
								class="td_img"
							  />
							</td>
							<td> -->
	  <!--<router-link :to="`/exchange/${item.symbol}`">-->
	  <!-- <router-link :to="`/exchange`">
								<button class="td_button">
								  {{ $t("otc.b7") }}
								</button>
							  </router-link>
							</td> -->
	  <!-- <td>{{ item.high }}</td> -->
	  <!-- <td class="text-center">{{ item.vol }}</td> -->
	  <!-- </tr>
						</template>
					  </tbody>
					</table> -->
	  <!-- coin-list table -->
	  <!-- </div> -->
	  <!-- market-ticker-block -->
	  <!-- </div>
			  </div>
			</div>
			<div class="text-center"> -->
	  <!-- tag="button"
							  type="button" -->
	  <!-- <router-link to="/contract" class="view-more btn btn-outline-light">
				{{ $t("home.more") }} -->
	  <!--              查看更多-->
	  <!-- </router-link> -->
	  <!-- </div> -->
	  <!-- </div>
		</div>
	  </div> -->
	  <!--        <div class="banner-block col-xs-8 banner2">-->
	  <!--            <p class="banner_right_p">{{ $t("addinfo.TopEncryptionRiskManagement") }}</p>-->
	  <!--            <p class="banner_right_p1">{{ $t("addinfo.EscortYourPropertySafety") }}</p>-->
	  <!--            <div class="banner_right_button">{{ $t("addinfo.ProvidedByTheExperimentalCenter") }}</div>-->
	  <!--        </div>-->
	  <!--        <div class="banner-block col-xs-8 banner3">-->
	  <!--            <p class="banner3_p">-->
	  <!--                <span>{{ $t("addinfo.ProvidedByTheExperimentalCenter") }}</span><br/>-->
	  <!--                <span class="banner3_p_span">{{ $t("addinfo.ScanTheQRCodeBelowToDownload") }}</span>-->
	  <!--            </p>-->
	  <!--            <div class="banner3_content">-->
	  <!--                <div class="banner3_content_item">-->
	  <!--                    &lt;!&ndash; <img src="../../assets/img/homescaniso.png" alt="" class="banner3_content_item_code"> &ndash;&gt;-->
	  <!--                    <img src="../../assets/img/download.png" alt="" class="banner3_content_item_code">-->
	  <!--                section    <img src="../../assets/img/Android.png" alt="" class="banner3_content_item_code1">-->
	  <!--                    <div class="introduce">-->
	  <!--                        &lt;!&ndash; <span class="glyphicon glyphicon-phone"></span> &ndash;&gt;-->
	  <!--                        <span>{{ $t("addinfo.AndroidScanCodeDownload") }}</span>-->
	  <!--                    </div>-->
	  <!--                </div>-->
	  <!--                <div class="banner3_content_item">-->
	  <!--                    &lt;!&ndash; <img src="../../assets/img/homescaniso.png" alt="" class="banner3_content_item_code"> &ndash;&gt;-->
	  <!--                    <img src="../../assets/img/download.png" alt="" class="banner3_content_item_code">-->
	  <!--                    &lt;!&ndash; <img src="../../assets/img/IOS.png" alt="" class="banner3_content_item_code1"> &ndash;&gt;-->
	  <!--                    <img src="../../assets/img/IOS.png" alt="" class="banner3_content_item_code1">-->
	  <!--                    <div class="introduce">-->
	  <!--                        &lt;!&ndash; <ion-icon name="phone-portrait"></ion-icon> &ndash;&gt;-->
	  <!--                        <span>{{ $t("addinfo.IOSScanCodeDownload") }}</span>-->
	  <!--                    </div>-->
	  <!--                </div>-->
	  <!--            </div>-->
	  <!--        </div>-->
	  <!--中间显示4个图标-->
	  </div>
	  
		<div class="boximg">
	  		<div class="section2 illustration_area">
	  			<!-- <div class="left">
	  				<div class="title">{{ $t("homeNewText.hh0") }}</div>
	  				<div style="margin-top: 30px;font-size: 20px;">{{ $t("homeNewText.hh34") }}</div>
	  				
	  				<router-link v-if="!isLogin" class="jump_btn" :to="{name:'signUp'}" style="margin-top: 100px;">
	  					{{ $t("homeNewText.hh35") }}
	  				</router-link>
	  				<router-link v-else class="jump_btn" :to="{name:'exchange-assets'}" style="margin-top: 100px;">
	  					{{ $t("homeNewText.aa4") }}
	  				</router-link>
	  			</div>
	  			<div class="right" style="overflow: visible;">
	  				<div class="right_box">
	  					<div class="right_color">{{ $t("home.a26") }}</div>
	  					<div class="right_img"><img src="@/assets/img/home/qrcode.png" alt="" /></div>
	  					<div class="right_Android">IOS & Android</div>
	  				</div>
	  			</div> -->
	  			<div class="left">
	  				<div class="title">{{ $t("homeNewText.hh0") }}</div>
	  				<div style="margin-top: 30px;font-size: 20px;">{{ $t("homeNewText.hh34") }}</div>
	  				<router-link v-if="!isLogin" class="jump_btn" :to="{name:'signUp'}" style="margin-top: 50px;">
	  					{{ $t("homeNewText.hh35") }}
	  				</router-link>
	  				<router-link v-else class="jump_btn" :to="{name:'exchange-assets'}" style="margin-top: 50px;">
	  					{{ $t("homeNewText.aa4") }}
	  				</router-link>
	  			</div>
	  			<div class="right" style="overflow: visible;">
	  				<img src="@/assets/img/home/img0.png" width="469px" height="425px"/>
	  			</div>
	  		</div>
	  	</div>
	  	<!-- 寻找交易良机 -->
	  	<div class="market_table" v-if="marketList[0]">
	  		<div style="font-size: 42px;font-weight: bold;color: #fff;">
	  			{{ $t("homeNewText.hh1") }}
	  		</div>
	  		<div style="color: #999;line-height: 60px;font-size: 18px;">{{ $t("homeNewText.hh2") }}</div>
	  		<div class="market_tr" style="color: #999;line-height: 60px;">
	  			<div>{{ $t("homeNewText.aa7") }}</div>
	  			<div>{{ $t("homeNewText.bb1") }}</div>
	  			<div>{{ $t("homeNewText.bb2") }}</div>
	  			<div style="width: 25%;text-align: right;">{{ $t("homeNewText.bb3") }}</div>
	  		</div>
	  		<div v-for="(item, index) in marketList[0].marketInfoList.slice(0,5)" :key="index" class="market_tr"
	  			style="font-weight: bold;">
	  			<div>
	  				<img class="icon" :src="item.coin_icon" alt="">
	  				{{ item.coin_name }}
	  			</div>
	  			<div>{{ item.price }}</div>
	  			<div :class="item.increase >= 0 ? 'increace' : 'decreace'">{{ item.increaseStr }}</div>
	  			<div style="margin-left: 17%;width: 8%;text-align: right;">{{ item.count }}</div>
	  		</div>
	  	</div>
	  	
	  	<!-- 立即尝试我们的加密货币交易所 -->
	  	<div class="box1">
	  		<div><img src="@/assets/img/home/img2.png" alt="" width="288" height="366"></div>
	  		<div class="box1_text">
	  			<div style="font-size: 42px;font-weight: bold;">{{ $t("homeNewText.hh3") }}</div>
	  			<div class="quickopening">{{ $t("homeNewText.hh4") }}</div>
	  			<div class="quickopening_box">
	  				<div style="font-size: 36px;" v-if="!isLogin">{{ $t("homeNewText.hh5",{name:'Mrbcoin'}) }}</div>
	  				<div style="font-size: 36px;" v-else>{{ $t("homeNewText.aa4") }}</div>
	  				<!-- <div class="quickopening_register">
	  					{{ $t("homeNewText.hh6") }} <img src="@/assets/img/home/right-line.png" alt="" width="24" height="24">
	  				</div> -->
	  				<router-link v-if="!isLogin" class="quickopening_register" :to="{name:'signUp'}">
	  					{{ $t("homeNewText.hh6") }} <img src="@/assets/img/home/right-line.png" alt="" width="24" height="24">
	  				</router-link>
	  				<router-link v-else class="quickopening_register" :to="{name:'exchange-assets'}">
	  					{{ $t("home.a41") }} <img src="@/assets/img/home/right-line.png" alt="" width="24" height="24">
	  				</router-link>
	  			</div>
	  		</div>
	  	</div>
	  	<!-- 了解我们的产品 -->
	  	<div style="width: 100%;background-color: #121318;">
	  		<div class="title3" style="padding-top: 90px;">{{ $t("homeNewText.hh7") }}</div>
	  		<div class="title3" style="font-size: 15px;color: #999999;margin-top: 10px;">{{ $t("homeNewText.hh8") }}</div>
	  		<div class="web_area">
	  			<div style="width: 48%;">
	  				<div class="product">
	  					<div>
	  						<div class="product_text1">{{ $t("homeNewText.hh9") }}</div>
	  						<div class="product_text2">{{ $t("homeNewText.hh10") }}</div>
	  					</div>
	  					<img src="@/assets/img/home/img3.png" alt="">
	  				</div>
	  				<div class="product">
	  					<div>
	  						<div class="product_text1">{{ $t("homeNewText.hh11") }}</div>
	  						<div class="product_text2">{{ $t("homeNewText.hh12") }}</div>
	  					</div>
	  					<img src="@/assets/img/home/img5.png" alt="">
	  				</div>
	  				<div class="product">
	  					<div>
	  						<div class="product_text1">{{ $t("homeNewText.hh13") }}</div>
	  						<div class="product_text2">{{ $t("homeNewText.hh14") }}</div>
	  					</div>
	  					<img src="@/assets/img/home/img7.png" alt="">
	  				</div>
	  			</div>
	  			<div style="width: 48%;">
	  				<div class="product">
	  					<div>
	  						<div class="product_text1">{{ $t("homeNewText.hh15") }}</div>
	  						<div class="product_text2">{{ $t("homeNewText.hh16") }}</div>
	  					</div>
	  					<img src="@/assets/img/home/img4.png" alt="">
	  				</div>
	  				<div class="product">
	  					<div>
	  						<div class="product_text1">{{ $t("homeNewText.hh17",{name:'Mrbcoin'}) }}</div>
	  						<div class="product_text2">{{ $t("homeNewText.hh18") }}</div>
	  					</div>
	  					<img src="@/assets/img/home/img6.png" alt="">
	  				</div>
	  				<div class="product">
	  					<div>
	  						<div class="product_text1">{{ $t("homeNewText.hh19") }}</div>
	  						<div class="product_text2">{{ $t("homeNewText.hh20") }}</div>
	  					</div>
	  					<img src="@/assets/img/home/img8.png" alt="">
	  				</div>
	  			</div>
	  		</div>
	  	</div>
	  	<!-- 您可信且又安全的加密貨幣交易所 -->
	  	<div class="title3" style="padding-top: 100px;font-weight: bold;">{{ $t("homeNewText.hh21") }}</div>
	  	<div class="web_area" style="height: 480px;width: 1300px;">
	  		<div style="width: 289px;">
	  			<div style="text-align: center;">
	  				<img src="@/assets/img/home/img9.png" width="134" height="134">
	  			</div>
	  			<div class="text_size">{{ $t("homeNewText.hh22") }}</div>
	  			<div class="text_width">{{ $t("homeNewText.hh23") }}</div>
	  		</div>
	  		<div style="width: 289px;">
	  			<div style="text-align: center;">
	  				<img src="@/assets/img/home/img10.png" width="134" height="134">
	  			</div>
	  			<div class="text_size">{{ $t("homeNewText.hh24") }}</div>
	  			<div class="text_width">{{ $t("homeNewText.hh25") }}</div>
	  		</div>
	  		<div style="width: 289px;">
	  			<div style="text-align: center;">
	  				<img src="@/assets/img/home/img11.png" width="134" height="134">
	  			</div>
	  			<div class="text_size">{{ $t("homeNewText.hh26") }}</div>
	  			<div class="text_width" style="width: 289px;">{{ $t("homeNewText.hh27") }}</div>
	  		</div>
	  		<div style="width: 289px;">
	  			<div style="text-align: center;">
	  				<img src="@/assets/img/home/img12.png" width="134" height="134">
	  			</div>
	  			<div class="text_size">{{ $t("homeNewText.hh28") }}</div>
	  			<div class="text_width">{{ $t("homeNewText.hh29",{name:'Mrbcoin'}) }}</div>
	  		</div>
	  	</div>
	  	
	  	<div class="Tradinganytime">
	  		<div style="width: 854px;"><img src="@/assets/img/home/img13.png" style="width: 854px;height: 750px;"></div>
	  		<div style="margin-left: 105px;">
	  			<div style="font-size: 42px;font-weight: bold;">{{ $t("homeNewText.hh30") }}</div>
	  			<div class="Tradinganytime_app">{{ $t("homeNewText.hh31") }}</div>
	  			<div class="Tradinganytime_flex">
	  				<div style="margin-right: 175px;">
	  					<div class="Tradinganytime_IOS"><img src="@/assets/img/home/apple_1.png" width="32" height="32"><div style="height: 28px;">Android APK</div></div>
	  					<div class="Tradinganytime_Android"><img src="@/assets/img/home/android_1.png" width="32" height="32"><div style="height: 30px;">App Stoer</div></div>
	  				</div>
	  				<div class="Tradinganytime_img"><img src="@/assets/img/home/mrb.png" width="202" height="202"></div>
	  			</div>
	  		</div>
	  	</div>
	  	
	  	<div class="title1">{{ $t("homeNewText.hh36",{name:'Mrbcoin'}) }}</div>
	  	<div class="Serve_bot">
	  		<div class="Serve_bot_box1">
	  			<div style="font-size: 28px;font-weight: 700;">{{$t("homeNewText.hh37")}}</div>
	  			<div style="color: #707a8a;font-size: 16px;">{{ $t("homeNewText.hh38",{name:'Mrbcoin'}) }}</div>
	  		</div>
	  		<div class="Serve_bot_box2">
	  			<div class="Serve_bot_box2_text">{{$t("homeNewText.hh39")}}</div>
	  			<div style="color: #707a8a;">
	  				<div class="Serve_bot_box2_text1">
	  					{{ $t("homeNewText.hh40",{name:'Mrbcoin'}) }}
	  				</div>
	  				<div style="margin: 20px 0 20px;">{{$t("homeNewText.hh41")}}</div>
	  				<div style="margin-bottom: 40px;">
	  					<img src="@/assets/img/home/img14.svg" style="width: 40px;margin-right: 10px;" />
	  					<img src="@/assets/img/home/img15.svg" style="width: 40px;margin-right: 10px;" />
	  					<img src="@/assets/img/home/img16.svg" style="width: 40px;margin-right: 10px;" />
	  					<img src="@/assets/img/home/img17.svg" style="width: 40px;margin-right: 10px;" />
	  					<img src="@/assets/img/home/img14.svg" style="width: 40px;margin-right: 10px;" />
	  					<img src="@/assets/img/home/img18.svg" style="width: 40px;margin-right: 10px;" />
	  					<img src="@/assets/img/home/img14.svg" style="width: 40px;margin-right: 10px;" />
	  				</div>
	  			</div>
	  		</div>
	  	</div>
	  	
	  	<div class="home-box6">
	  		<img src="@/assets/img/home/img19.svg" style="width: 100%;" />
	  		<div class="box6">
	  			<div>
	  				<div style="text-align: center;color: #fff;font-size: 50px;font-weight: bold;">{{ $t("homeNewText.hh32") }}</div>
	  				<div style="text-align: center;margin-top: 30px;">
	  					<router-link v-if="!isLogin" class="jump_btn1" :to="{name:'signUp'}">
	  						{{ $t("homeNewText.hh33") }}
	  					</router-link>
	  					<router-link v-else class="jump_btn1" :to="{name:'exchange-assets'}">
	  						{{ $t("homeNewText.aa4") }}
	  					</router-link>
	  				</div>
	  			</div>
	  		</div>
	  	</div>
	  
	  
	  
	  <!-- 立即体验 -->
	  <div v-if="0">
		<div class="section illustration_area">
				<div class="left">
				  <div class="title">{{ $t("homeNewText.bb4") }}</div>
				  <div class="title" style="font-size: 18px;margin-top: 30px;">{{ $t("homeNewText.bb5") }}</div>
				  <router-link v-if="!isLogin" class="jump_btn" :to="{name:'signUp'}" style="margin-top: 36px;">
					{{ $t("homeNewText.bb6") }}
				  </router-link>
				  <router-link v-else class="jump_btn" :to="{name:'exchange'}" style="margin-top: 36px;">
					{{ $t("homeNewText.aa4") }}
				  </router-link>
				</div>
				<div class="right" style="overflow: visible;">
				  <div class="right_box">
					<img src="@/assets/img/home/home1.png" alt="" style="height: 480px;width: auto;">
				  </div>
				</div>
		</div>
		<!-- 轮播图 -->
		<div class="marquee" v-if="marketList[0]">
			<div class="marquee-pargress d-flex">
			  <ul class="marquee-list d-flex" v-for="box in 4" :key="box+'box'">
				<!-- <li class="item" v-for="box1 in 4" :key="box1+'box'"> -->
				<!-- <li class="item" v-for="(item,index) in marketList[0].marketInfoList" :key="index + '' + box"> -->
				<li class="item" v-for="item in marketList[0].marketInfoList" :key="item.coin_name + '' + box">
				  <div class="price-info d-flex">
						<!-- <div>New users will be given $100 for registration. For details, please contact customer service WhatsApp</div> -->
					<div class="symbol" style="margin-right: 5px">
					  {{ item.pair }}
					  {{ item.pair_name }}
					</div>
					<div class="d-flex">
					  <!-- <span>${{ item.price||item.close }}</span> -->
					  <span :class="item.increase >= 0 ? 'increace' : 'decreace'">
						({{ item.increaseStr }})
					  </span>
					</div>
				  </div>
				</li>
			  </ul>
			</div>
		</div>
		
		<!-- 市场趋势 -->
		<div class="title1 fn-center">{{ $t("homeNewText.bb7") }}</div>
		<div class="title2 fn-center" style="color: #fff;">{{ $t("homeNewText.bb8") }}</div>
		<div class="market_table" style="margin-top: 0px;" v-if="marketList[0]">
				<div class="market_tr" style="color: #999;line-height: 60px;">
				  <div>{{ $t("homeNewText.aa7") }}</div>
				  <div>{{ $t("homeNewText.bb1") }}</div>
				  <div>{{ $t("homeNewText.bb2") }}</div>
				  <div style="width: 25%;text-align: right;">{{ $t("homeNewText.bb3") }}</div>
				</div>
				<div v-for="(item, index) in marketList[0].marketInfoList.slice(0,5)" :key="index" class="market_tr">
				  <div>
					<img class="icon" :src="item.coin_icon" alt="">
					{{ item.coin_name }}
				  </div>
				  <div>{{ item.price || item.close }}</div>
				  <div :class="item.increase >= 0 ? 'increaceAj' : 'decreaceAj'">{{ item.increaseStr }}</div>
				  <div style="margin-left: 17%;width: 8%;text-align: right;">{{ item.count }}</div>
				</div>
		</div>
		
		<!-- <div class="APP_area"></div> -->
		
		<!-- 新手引导 -->
		<div class="title1 fn-center">{{ $t("homeNewText.bb9") }}</div>
		<div class="title2 fn-center" style="margin-bottom: 100px;">{{ $t("homeNewText.bb10") }}</div>
		<div class="travel_area">
				<div>
					<div class="travel_img">
						<div class="travel_img1"><img src="@/assets/img/home/home2.png" /></div>
					</div>
					<div>
						<div class="travel_text1">{{ $t("homeNewText.bb11",{name:'Mrbcoin'}) }}</div>
						<div class="travel_text2">{{ $t("homeNewText.bb12") }}</div>
						<router-link v-if="!isLogin" class="jump_btn1" :to="{name:'signUp'}">{{ $t("homeNewText.bb6") }}</router-link>
						<router-link v-else class="jump_btn1" :to="{name:'exchange-assets'}">{{ $t("homeNewText.bb6") }}</router-link>
					</div>
				</div>
				<div>
					<div class="travel_img"><img src="@/assets/img/home/home3.png" class="travel_img1" /></div>
					<div>
						<div class="travel_text1">{{ $t("homeNewText.bb13") }}</div>
						<div class="travel_text2">{{ $t("homeNewText.bb14") }}</div>
						<router-link v-if="!isLogin" class="jump_btn1" :to="{name:'signUp'}">{{ $t("homeNewText.bb15") }}</router-link>
						<router-link v-else class="jump_btn1" :to="{name:'exchange-assets'}">{{ $t("homeNewText.bb15") }}</router-link>
					</div>
				</div>
				<div>
					<div class="travel_img"><img src="@/assets/img/home/home4.png" class="travel_img1" /></div>
					<div>
						<div class="travel_text1">{{ $t("homeNewText.bb16") }}</div>
						<div class="travel_text2">{{ $t("homeNewText.bb17") }}</div>
						<router-link v-if="!isLogin" class="jump_btn1" :to="{name:'signUp'}">{{ $t("homeNewText.bb18") }}</router-link>
						<router-link v-else class="jump_btn1" :to="{name:'exchange'}">{{ $t("homeNewText.bb18") }}</router-link>
					</div>
				</div>
		</div>
		<!-- 开启你的数字货币之旅 -->
		<div class="title1 fn-center" style="margin-top: 150px;margin-bottom: 100px;">{{ $t("homeNewText.bb19") }}</div>
		<div class="travel_area">
				<div>
					<div><img src="@/assets/img/home/home5.png" style="width: 220px;height: 220px;" /></div>
					<div style="margin-top: 30px;">
						<div class="travel_text3">{{ $t("homeNewText.bb20") }}</div>
						<div class="travel_text4">{{ $t("homeNewText.bb21") }}</div>
					</div>
				</div>
				<div>
					<div><img src="@/assets/img/home/home6.png" style="width: 220px;height: 220px;" /></div>
					<div style="margin-top: 30px;">
						<div class="travel_text3">{{ $t("homeNewText.bb22") }}</div>
						<div class="travel_text4">{{ $t("homeNewText.bb23") }}</div>
					</div>
				</div>
				<div>
					<div><img src="@/assets/img/home/home7.png" style="width: 220px;height: 220px;" /></div>
					<div style="margin-top: 30px;">
						<div class="travel_text3" style="width: 220px;">{{ $t("homeNewText.bb24") }}</div>
						<div class="travel_text4" style="width: 241px;">{{ $t("homeNewText.bb25") }}</div>
					</div>
				</div>
		</div>
		<!-- 探索无限可能 -->
		<div class="title1 fn-center" style="margin-top: 150px;margin-bottom: 100px;">{{ $t("homeNewText.bb26") }}</div>
		<div class="travel_area" style="width: 1300px;">
				<div class="travel_box">
					<div style="padding: 0px 40px;">
						<div style="font-size: 28px;">{{ $t("homeNewText.bb27") }}</div>
						<div style="font-size: 17px;margin-top: 14px;">{{ $t("homeNewText.bb28") }}</div>
					</div>
					<div class="travel_img" style="width: 420px;height: 305px;"><img src="@/assets/img/home/home8.png" class="travel_img1" /></div>
				</div>
				<div class="travel_box">
					<div style="padding: 0px 40px;">
						<div style="font-size: 28px;">{{ $t("homeNewText.bb29") }}</div>
						<div style="font-size: 17px;margin-top: 14px;">{{ $t("homeNewText.bb30") }}</div>
					</div>
					<div class="travel_img" style="width: 420px;height: 305px;"><img src="@/assets/img/home/home9.png" class="travel_img1" /></div>
				</div>
				<div class="travel_box">
					<div style="padding: 0px 40px;">
						<div style="font-size: 28px;">{{ $t("homeNewText.bb31") }}</div>
						<div style="font-size: 18px;margin-top: 14px;">{{ $t("homeNewText.bb32") }}</div>
					</div>
					<div class="travel_img" style="width: 420px;height: 305px;"><img src="@/assets/img/home/home10.png" class="travel_img1" /></div>
				</div>
		</div>
		<!-- 轻松玩赚数字货币 -->
		<div class="title1" style="margin-top: 100px;">{{ $t("homeNewText.bb33") }}</div>
		<div class="title2" style="color: #fff;">{{ $t("homeNewText.bb34",{name:'Mrbcoin'}) }}</div>
		<div class="positionBox d-flex" style="align-items: center;justify-content: space-between;">
				<div style="width: 480px;">
					<div class="trade_box">
						<div class="trade_img"><img src="@/assets/img/home/mrb.png" style="border-radius: 10px;" alt=""></div>
						<div style="margin-left: 15px;">
							<div>{{ $t("homeNewText.bb35") }}</div>
							<div style="font-weight: bold;">IOS & Android apps</div>
						</div>
					</div>
					<div style="margin-top: 40px;">
						<div class="d-flex">
							<a style="width: 150px;text-decoration: none;">
								<div style="margin-right: 20px;display: flex;align-items: center;">
									<img src="@/assets/img/home/apple_1.png" style="width: 30px;height: 30px;">
									<div>App Store</div>
								</div>
							</a>
							<a style="width: 150px;text-decoration: none;">
								<div style="margin-right: 0px;display: flex;align-items: center;">
									<img src="@/assets/img/home/android_1.png" style="width: 30px;height: 30px;">
									<div>Android</div>
								</div>
							</a>
							<!-- <a style="width: 180px;text-decoration: none;">
								<div style="margin-right: 40px;display: flex;align-items: center;">
									<img src="" style="width: 30px;height: 30px;">
									<div></div>
								</div>
							</a> -->
						</div>
					</div>
				</div>
				<div class="positionBox_box2">
						<div class="positionBox_box3">
							<img src="@/assets/img/home/home11.png">
						</div>
					</div>
		</div>
		<!-- 立即開始您的加密之旅 -->
		<div class="CryptoJourney">
				<div class="CryptoJourney_box">
					<div style="font-size: 48px;">{{ $t("homeNewText.bb36") }}</div>
					<div style="font-size: 20px;margin-top: 30px;">{{ $t("homeNewText.bb37") }}</div>
					<router-link v-if="!isLogin" class="jump_btn" :to="{name:'signUp'}" style="margin-top: 50px;background-color: #fff;color: #000;border-radius: 40px;">
						{{ $t("homeNewText.bb38") }}
					</router-link>
					<router-link v-else class="jump_btn" :to="{name:'exchange'}" style="margin-top: 50px;background-color: #fff;color: #000;border-radius: 40px;">
						{{ $t("homeNewText.aa4") }}
					</router-link>
				</div>
		</div>
	  </div>
	  
	  
	  <!-- beginner's guide -->
	  <div class="lattest-news-section" v-if="0">
		<div class="beginner service">
		  <!-- 标题 -->
		  <div class="service-title">
			<div
			  class="text service-title-text1"
			  style="font-size: 40px; font-weight: 700; line-height: 71px"
			>
			  {{ '111' }}
			</div>
			<div class="dotfive d-flex">
			  <div class="dotblue" v-for="item in 5" :key="item"></div>
			</div>
		  </div>
		  <!-- 内容  独特的交易经验 -->
		  <div class="beginner_content service-content d-flex" style="justify-content: space-between;align-items: center;">
			<!-- 文字部分 -->
			<div
			  class="beginner_content_r"
			>
			  <div class="service-content-text beginner-text" style="margin-bottom: 50px;">
				<div class="service-content-text-img text-img">
				  <div class="circle_bg">
					<img src="../../assets/img/features/8.png" alt="" style="width: 24px;height: 24px;margin: 13px;" />
				  </div>
				</div>
				<div class="text-box">
				  <div style="font-size: 28px;color: #e7e7e7;">
					{{ '111' }}
				  </div>
				  <div class="service-content-text1-info1 info" style="color: #707275;">
					{{ '111' }}
				  </div>
				</div>
			  </div>
			  <div class="service-content-text beginner-text">
				<div class="service-content-text-img text-img">
				  <div class="circle_bg">
					<img src="../../assets/img/features/9.png" alt="" style="width: 24px;height: 24px;margin: 13px;" />
				  </div>
				</div>
				<div class="text-box">
				  <div style="font-size: 28px;color: #e7e7e7;">
					{{ '111' }}
				  </div>
				  <div class="service-content-text1-info1 info" style="color: #707275;">
					{{ '111' }}
				  </div>
				</div>
			  </div>
			</div>
			<!-- 图片 -->
			<div class="service-img">
			  <img
				src="../../assets/img/features/stt.png"
				style="width: 326px; height: 424px"
				alt=""
			  />
			</div>
		  </div>
		  <!-- colto-btn-group -->
		  <div
			class="colto-btn-group"
			style="justify-content: center"
		  >
			<router-link
			  tag="button"
			  to="/sign-in"
			  class="btn btn-success rounded-pill callto-btn container_button"
			  style="background-color: rgb(84, 164, 80); margin-right: 50px"
			  >{{ $t("common.login") }}
			</router-link>
			<router-link
			  tag="button"
			  to="/sign-up"
			  class="btn btn-primary rounded-pill callto-btn container_button1"
			  style="background-color: rgb(50, 105, 235)"
			  >{{ $t("common.register") }}
			</router-link>
		  </div>
		  <div class="colto-btn-group">
			<router-link
			  tag="button"
			  to="/exchange"
			  class="btn btn-primary rounded-pill callto-btn"
			  >{{ $t("common.trading") }}
			</router-link>
		  </div>
		</div>
	  </div>
	  <!-- 背景径向渐变 -->
	  <div class="radial_bg" v-if="0">
		<!-- number count -->
		<div class="num-info d-flex">
		  <div class="num-info-count">
			<div class="num">Top 10</div>
			<div class="title">{{ $t("homeNewText.ee1") }}</div>
		  </div>
		  <div class="num-info-count">
			<div class="num">5 million+</div>
			<div class="title">{{ $t("homeNewText.ee2") }}</div>
		  </div>
		  <div class="num-info-count">
			<div class="num">{{ '<0.10%' }}</div>
			<div class="title">{{ $t("homeNewText.ee3") }}</div>
		  </div>
		  <div class="num-info-count">
			<div class="num">200+</div>
			<div class="title">{{ $t("homeNewText.ee4") }}</div>
		  </div>
		</div>
	  </div>
	  
	  <!-- why you choose -->
	  <div class="lattest-news-section" v-if="0">
		<div class="section_choose service">
		  <!-- 标题 -->
		  <div class="service-title">
			<div class="text service-title-text1">
			  {{ $t("common.Why") }}
			</div>
			<div class="dotfive d-flex">
			  <div class="dotblue" v-for="item in 5" :key="item"></div>
			</div>
		  </div>
		  <!-- 内容 -->
		  <div class="service-content d-flex">
			<div
			  class="service-img"
			  style="width: 600px; height: 600px; margin-right: 66px"
			>
			  <img
				src="../../assets/img/network.svg"
				style="width: 100%; height: 100%; object-fit: contain"
				alt=""
			  />
			</div>
			<!-- 文字部分 -->
			<div class="service-content-r">
			  <div class="service-content-r_title">
				{{ $t("common.believe") }}
			  </div>
			  <div class="service-content-text">
				<div class="service-content-text-img">
				  <div class="content_img">
					<img src="../../assets/img/icon/eyes.svg" alt="" />
				  </div>
				  <div class="service-content-text1-title">
					{{ $t("common.Clarity") }}
				  </div>
				</div>
				<div class="text-box">
				  <div class="service-content-text1-info1 info">
					{{ $t("common.help") }}
				  </div>
				  <div class="service-content-text1-info2 info">
					{{ $t("common.helpp") }}.
				  </div>
				</div>
			  </div>
			  <div class="service-content-text">
				<div class="service-content-text-img">
				  <div class="content_img">
					<img src="../../assets/img/icon/dunpai.svg" alt="" />
				  </div>
				  <div class="service-content-text1-title">
					{{ $t("common.safety") }}
				  </div>
				</div>
				<div class="text-box">
				  <div class="service-content-text1-info1 info">
					{{ $t("common.double") }}
				  </div>
				  <div class="service-content-text1-info2 info">
					{{ $t("common.double2") }}
				  </div>
				</div>
			  </div>
			  <div class="service-content-text">
				<div class="service-content-text-img">
				  <div class="content_img">
					<img src="../../assets/img/icon/shanguang.svg" alt="" />
				  </div>
				  <div class="service-content-text1-title">
					{{ $t("common.convenient") }}
				  </div>
				</div>
				<div class="text-box">
				  <div class="service-content-text1-info info">
					{{ $t("common.key") }}
				  </div>
				</div>
			  </div>
			</div>
		  </div>
		</div>
		<!-- <div class="container">
			  <header>
				<h3 class="news-title">{{ $t("common.noviceTutorial") }}</h3>
							   <div class="tips">{{$t('home.core_advantages')}}</div>
			  </header>
			  <div class="row content">
				<template v-for="(item, idx) in articleList">
				  <div class="item rounded">
					<router-link tag="div" :to="{name:'college-detail',params:{cid:item.category_id,aid:item.id}}" class="item rounded" :key="idx">
					<figure>
					  <img :src="item.full_cover" alt="" />
					  <figcaption>
						<h5 class="mt-4">{{ truncate(item.title, 26) }}</h5>
					  </figcaption>
					  <div class="eps-2" v-html="item.excerpt"></div>
					</figure>
									   <article class="post-style-one" v-if="false">
										 <span class="post-metat-date">{{ item.updated_at }}</span>
										 <p class="post-entry" v-html="item.excerpt"></p>
										 <router-link
										   class="post-link"
										   :to="`/college/detail/${item.category_id}/${item.id}`"
										   >{{ $t("home.detail") }}</router-link
										 >
									   </article>
					</router-link>
				  </div>
				</template>
			  </div>
			</div> -->
	  </div>
	  <!-- our technology -->
	  <div class="lattest-news-section" v-if="0">
		<div class="section_technology service">
		  <!-- 标题 -->
		  <div class="service-title">
			<div class="text service-title-text1">
			  {{ $t("common.technology") }}
			</div>
			<div class="dotfive d-flex">
			  <div class="dotblue" v-for="item in 5" :key="item"></div>
			</div>
		  </div>
		  <!-- 内容 -->
		  <div class="service-content d-flex">
			<!-- 文字部分 -->
			<div
			  class="service-content-r"
			  style="margin-right: 80px; margin-left: 0"
			>
			  <div
				class="service-content-text"
				style="
				  font-size: 24px;
				  width: 568px;
				  height: 323px;
				  line-height: 50px;
				"
			  >
				{{ $t("common.CoinsExpound") }}.
			  </div>
			</div>
			<!-- 右边图片 -->
			<div class="service-img">
			  <img
				src="../../assets/img/team.png"
				style="width: 565px; height: 481px"
				alt=""
			  />
			</div>
		  </div>
		</div>
	  </div>
	  
	  <!-- 常见问题 -->
	  <div class="title1 fn-center" v-if="0">{{ $t("homeNewText.bb13") }}</div>
	  <div class="help_area" v-if="0">
		<router-link :to="'/notice/'+item.id" v-for="(item, index) in helpList" :key="index+'help'" class="help_item">
		  <div style="color: #fff;">{{ item.title }}</div>
		  <div class="arrow"></div>
		</router-link>
	  </div>
	  
	</div>
  </template>
  
	<script>
  import Vue from "vue";
  // import VueAwesomeSwiper from "vue-awesome-swiper";
  import vueQr from "vue-qr";
  import Home from "@/api/home";
  // import "swiper/swiper-bundle.css";
  import Socket from "@/api/server/Socket.js";
  import College from "@/api/college";
  import Member from "@/api/member";
  import * as d3 from "d3";
  import priceLine from "../market/price-line";
  import Login from "@/assets/i18n/cn/login";
  // Vue.use(VueAwesomeSwiper);
  export default {
	components: {
	  vueQr,
	  priceLine,
	},
  
	computed: {
	  isLogin() {
		return Boolean(localStorage.token);
	  },
	  downloadLink() {
		return "https://wgn.mrbwallets.com/download";
	  },
	  // 特色卡片列表
	  featuresList() {
		return [
		  {
			zoom: false,
			bgclr: "rgba(76, 48, 115, 1)",
			picture: require("@/assets/img/features/trade.png"),
			thumb: require("@/assets/img/features/trade-thumb.png"),
			title: this.$t("home.stablecoin_title"),
			content: this.$t("home.stablecoin_cont"),
		  },
		  {
			zoom: false,
			bgclr: "rgba(60, 52, 125, 1)",
			picture: require("@/assets/img/features/safe.png"),
			thumb: require("@/assets/img/features/safe-thumb.png"),
			title: this.$t("home.security_title"),
			content: this.$t("home.security_cont"),
		  },
		  {
			zoom: false,
			bgclr: "rgba(93, 46, 93, 1)", // 背景色
			picture: require("@/assets/img/features/server.png"),
			thumb: require("@/assets/img/features/server-thumb.png"),
			title: this.$t("home.service_title"),
			content: this.$t("home.service_cont"),
		  },
		  {
			zoom: false,
			bgclr: "rgba(60, 52, 125, 1)",
			picture: require("@/assets/img/features/analysis.png"),
			thumb: require("@/assets/img/features/analysis-thumb.png"),
			title: this.$t("home.analy_title"),
			content: this.$t("home.analy_cont"),
		  },
		  {
			zoom: false,
			bgclr: "rgba(76, 48, 115, 1)",
			picture: require("@/assets/img/features/tech.png"),
			thumb: require("@/assets/img/features/tech-thumb.png"),
			title: this.$t("home.technology_title"),
			content: this.$t("home.technology_cont"),
		  },
		  {
			zoom: false,
			bgclr: "rgba(93, 46, 93, 1)",
			picture: require("@/assets/img/features/flow.png"),
			thumb: require("@/assets/img/features/flow-thumb.png"),
			title: this.$t("home.liquidity_title"),
			content: this.$t("home.liquidity_cont"),
		  },
		];
	  },
	},
  
	data() {
	  return {
		swiperOptions: {
		  pagination: {
			el: ".swiper-pagination",
		  },
		},
		phonetype: ["Android", "ios"],
		bannerList: [],
		articleList: [],
		homeList: [],
		iconList: [],
		marketList: [],
		tab: "Optional",
		searchTxt: "",
		skro: new Skroll(),
		collect: [{ symbol: "" }],
		ws: null,
		pcBannerList: [],
		noticeList: [],
		data: [99, 71, 78, 25, 36, 92],
		line: "",
		helpList: []
	  };
	},
	methods: {
	  getScales(data) {
		const x = d3.scaleTime().range([0, 100]);
		const y = d3.scaleLinear().range([39, 0]);
		d3.axisLeft().scale(x);
		d3.axisBottom().scale(y);
		x.domain(d3.extent(data, (d, i) => i));
		y.domain([0, d3.max(data, (d) => d)]);
		return { x, y };
	  },
	  calculatePath() {
		this.marketList[0].marketInfoList.map((item) => {
		  const scale = this.getScales(item.prices);
		  const path = d3
			.line()
			.x((d, i) => scale.x(i))
			.y((d) => scale.y(d));
		  // this.calculatePath(item.prices)
		  item.line = path(item.prices);
		});
		// console.info(this.marketList[0].marketInfoList);
	  },
	  truncate(str, length) {
		return _.truncate(str, { length });
	  },
	  isShow(str) {
		let reg = new RegExp(this.searchTxt, "ig");
		return reg.test(str);
	  },
	  filterCode: function (str) {
		return str.replace(/<[^<>]+>/g, "").replace(/&nbsp;/gi, "");
	  },
	  swiperPrev() {
		let $swiper = this.$refs.swiper.$swiper;
		$swiper.slidePrev();
	  },
	  swiperNext() {
		let $swiper = this.$refs.swiper.$swiper;
		$swiper.slideNext();
	  },
	  indexList() {
		Home.indexList()
		  .then((res) => {
			//console.info(res)
			this.bannerList = res.bannerList;
  
			this.homeList = res.homeList;
			//   console.log(res.homeList);
			this.marketList = res.marketList;
			// this.calculatePath()
			this.iconList = res.iconList;
			//   this.pcBannerList = res.pcBannerList;
			this.tab = this.marketList[0].coin_name;
			// this.tab = "USDT";
			// console.log(this.tab);
			setTimeout(() => {
			  this.skroll();
			}, 100);
		  })
		  .catch((res) => {});
	  },
	  skroll() {
		// let skro = this.skro;
  
		// skro
		//   .add(".marquee-list .item", {
		// 	animation: "fadeInLeft",
		// 	delay: 80,
		// 	duration: 1000,
		//   })
		//   .add(".new-ticker-block", {
		// 	animation: "fadeInRight",
		// 	delay: 80,
		// 	duration: 800,
		//   })
		//   .add(".shlitu", {
		// 	animation: "fadeInLeft",
		// 	delay: 80,
		// 	duration: 800,
		//   })
		//   .add(".activity-box", {
		// 	animation: "zoomIn",
		// 	delay: 80,
		// 	duration: 800,
		//   })
		//   .add(".lattest-news-section .item", {
		// 	animation: "zoomIn",
		// 	wait: 150,
		// 	delay: 80,
		// 	duration: 800,
		//   })
		//   .init();
	  },
  
	  // 是否为自选
	  isCoolect(i) {
		return this.collect.map((item) => item.pair_name).includes(i.pair_name);
	  },
  
	  // 获取自选交易列表
	  getCollect() {
		Home.getCollect()
		  .then((res) => {
			this.collect = res || [];
		  })
		  .catch((err) => {});
	  },
  
	  // 添加自选
	  option(item) {
		let data = {
		  pair_name: item.pair_name,
		};
		Home.option(data)
		  .then((res) => {
			this.getCollect();
			if (res) {
			  this.$message.success(this.$t("home.add"));
			} else {
			  this.$message.success(this.$t("home.cancel"));
			}
		  })
		  .catch((err) => {});
	  },
  
	  // 替换自选数据
	  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);
			}
		  });
		});
	  },
  
	  // 链接socket
	  indexMarketList() {
		const ws = new Socket(this.Globals.Server.Path.WS);
		ws.on("open", () => {
		  this.ws = ws;
		  ws.send({
			cmd: "sub",
			msg: "indexMarketList",
		  });
		});
		ws.on("message", (res) => {
		  //console.info(res)
		  let { data, msg, code, sub, type, status } = res;
		  if (sub == "indexMarketList") {
			this.marketList = data;
			this.replaceOptional();
			// this.calculatePath()
		  } else if (type == "ping") {
			ws.send({
			  cmd: "pong",
			});
		  }
		});
	  },
  
	  // 鼠标移入卡片的样式
	  addZoom(idx) {
		// 放大图片
		this.featuresList.forEach((item, key, arr) => {
		  if (idx == key) {
			arr[key].zoom = true;
		  } else {
			arr[key].zoom = false;
		  }
		});
	  },
  
	  // 鼠标移出卡片的样式
	  removeZoom(idx) {
		this.featuresList[idx].zoom = false;
	  },
	  // 新手教程
	  getArticleList() {
		College.getArticleList(20)
		  .then((data) => {
			this.articleList = data.splice(0, 4);
			setTimeout(() => {
			  this.skroll();
			}, 100);
		  })
		  .catch();
	  },
	  // 獲取公告列表
	  article() {
		Member.article({ type: "notice" }).then((res) => {
		  this.noticeList = res.data.splice(0, 4);
		});
	  },
	  getNoticeDate(str) {
		let _time = new Date(str);
		return _time.getMonth() + 1 + "-" + _time.getDate();
	  },
	  getHelpList(){
		College.getArticleList(18).then((res) => {
		  // console.log(res, 'collllll')
		  this.helpList = res.splice(0, 4);
		});
	  },
	},
	created() {
	  this.indexList();
	},
	mounted() {
	  this.article();
	  this.getHelpList();
	  if (this.isLogin) {
		this.getCollect();
	  }
	  this.indexMarketList();
	  this.getArticleList();
	  /*
	   * swiper 轮播图效果
	   */
	  // features 卡片轮播
	  const mySwiper = new Swiper(".swiper-container", {
		slidesPerGroup: 1,
		loop: true,
		loopFillGroupWithBlank: true,
		slidesPerView: 3, // 每个视口显示个数
		spaceBetween: 30, // 盒子之间的距离 由于异形slide初始化缩小了 因此不再设置距离
		freeMode: false,
		pagination: {
		  el: ".swiper-pagination",
		  clickable: true,
		},
  
		navigation: {
		  nextEl: ".swiper-button-next",
		  prevEl: ".swiper-button-prev",
		},
		on: {
		  transitionEnd: function () {
			$(".features aside ul").css("margin-left", `calc(50% - 640px)`);
		  },
		},
	  });
  
	  $(".prevBtn").click(function () {
		if (mySwiper.activeIndex <= 0) {
		  console.log(1);
		  $(this).addClass("my-button-disabled");
		} else {
		  // 1+
		  mySwiper.slidePrev();
		}
	  });
  
	  $(".nextBtn").click(function () {
		// console.dir(mySwiper)
		// if (mySwiper.realIndex == )
		mySwiper.slideNext();
	  });
	},
  };
  </script>
  
	<style lang="scss" scoped>
  #dowebok {
	// background: rgb(18, 19, 24) !important;
	// background-color: #000 !important;
	background-color: #121318 !important;
	// padding-bottom: 100px;
	.el_carousel {
	  width: 100%;
	  .el_carousel_item {
		width: 100%;
		height: 660px;
		img {
		  width: 100%;
		}
	  }
	}
  }
  
  path {
	// stroke: #76BF8A;
	fill: none;
	stroke-width: 3px;
  }
  
  .path_decreace {
	stroke: #ff231f;
  }
  
  .path_increace {
	stroke: #76bf8a;
  }
  .increaceAj{
	color: #4EAA97;
  }
  .decreaceAj{
	color: #CF6A57;
  }
  // .view-more {
  //     background: #fd5b2c !important;
  // }
  .notice {
	white-space: nowrap;
  
	.item {
	  white-space: nowrap;
	  padding: 15px 0;
	  width: 24%;
	  box-sizing: border-box;
	  padding-right: 20px;
	  cursor: pointer;
  
	  .title {
		width: 80%;
	  }
  
	  .time {
		margin-left: 5px;
		color: #999;
	  }
	}
  }
  
  .section {
	background-color: #000;
	//background-image:url(../../assets/img/index_banner_2.png);
	width: 100%;
	height: 660px;
	background-size: 100% 100%;
	overflow-x: hidden;
	.banner-block {
	  width: 100%;
	  height: 660px;
	  .banner-block img {
		width: 100%;
		height: 100%;
	  }
	}
  }
 //  .illustration_area{
	// width: 1300px;
	// margin: 0px auto 0px;
	// display: flex;
	// justify-content: space-between;
	// align-items: center;
	
	// .left{
	//   color: #fff;
	//   max-width: 650px;
	//   padding-left: 18px;
	//   .title{
	// 	font-size: 60px;
	//   }
	//   .icon_box{
	// 	display: flex;justify-content: space-between;
	// 	align-items: center;
	// 	margin-top: 168px;
  
	// 	img{
	// 	  margin-right: 57px;
	// 	}
	//   }
	// }
	
	// .right{
	// 	width: 590px;
	// 	height: 660px;
	// 	position: relative;
	// }
	// .right_box{
	// 	position: absolute;
	// 	bottom: 60px;
	// 	animation: movepoint 1.3s ease-in-out infinite alternate;
	// }
	
	// @keyframes movepoint{
	// 	from {transform:translate(0,0px) }
	// 	to {transform:translate(0,-20px)}/* 下浮高度 */
	// }
 //  }
  .jump_btn{
	display: inline-block;
	min-width: 390px;
	height: 64px;
	line-height: 64px;
	text-align: center;
	color: #fff;
	background-color: #0F4DF5;
	border-radius: 10px;
	font-size: 20px;
	padding: 0px 20px;
	box-sizing: border-box;
	
	&:hover {
	  box-shadow: 0 0 20px 10px hsla(220, 100%, 41%, 0.5);
	}
  }
  
  
  .market_table{
	width: 1300px;
	font-size: 16px;
	margin: 140px auto;
  
	.icon{
	  width: 30px;
	  height: 30px;
	  margin-right: 17px;
	}
	.market_tr{
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  line-height: 50px;
  
	  div{
		width: 25%;
	  }
	}
  }
  
  .news {
	// height: 720px;
	background-color: #ffffff;
	color: #172636;
	padding: 80px 0 0;
  
	header {
	  height: 38px;
	  text-align: center;
  
	  h3 {
		// border : 1px solid red;
		margin-bottom: 0 !important; // 去除mb-4效果
		@include font(Overpass, 30, 38, bold);
		position: relative;
  
		&::after {
		  position: absolute;
		  content: "";
		  display: block;
		  left: 50%;
		  bottom: -10px;
		  transform: translateX(-50%);
		  height: 3px;
		  width: 50px;
		  background: #4681fb;
		}
	  }
  
	  .tips {
		margin-top: 20px;
		font-size: 14px;
	  }
	}
  
	.content {
	  margin: 50px auto;
	  // border: 1px solid yellow;
	  @include flexible(row, space-between, flex-start, wrap);
  
	  .item {
		border-radius: 2px;
		width: 230px;
		padding: 10px;
		//margin-bottom: 20px;
		@include flexible(row, flex-start, center);
		// border: 1px solid red;
		figure {
		  width: 100%;
		  padding: 5px;
		  flex-shrink: 0;
  
		  img {
			display: block;
			width: 100%;
			height: 200px;
		  }
  
		  figcaption {
			@include font(Overpass, 15, 50);
		  }
  
		  // border: 1px solid red;
		}
  
		article {
		  border: none !important;
		  height: 100%;
		  overflow: hidden;
		  margin-bottom: 41px;
		}
  
		.eps-2 {
		  font-size: 12px;
		  //color: #8a8a98;
		  display: -webkit-box;
		  -webkit-box-orient: vertical;
		  -webkit-line-clamp: 2;
		  overflow: hidden;
		  word-break: break-all;
		}
	  }
	}
  }
  
  .ticker-nav .nav-item {
	color: #888894;
  }
  
  .ticker-nav .nav-item a {
	font-weight: normal !important;
  }
  
  .ticker-nav .nav-item a.active {
	@include font(Overpass, 15, null, white, 800);
	@include flexible(row, center, center);
  
	&::after {
	  width: 6px;
	  height: 6px;
	  background: white;
	  border-radius: 50%;
	}
  }
  
  .start-trade {
	background: #fd5b2c !important;
	padding: 0 !important;
	border: none;
	width: 196px;
	height: 58px;
	border-radius: 29px;
	text-align: center;
	@include font(Overpass, 18, 58, #fff);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
  }
  
  .marquee {
	width: 100%;
	height: 60px;
	margin-bottom: 150px;
	// background-image: url("../../assets/img/home/bg_1.png");
	background-color: #0F4DF5;
	background-size: 100% 100%;
	.marquee-pargress {
	  align-items: center;
	  width: 100%;
	  height: 60px;
	  //   background: ("../../assets/img/bg/5.png") no-repeat !important;
	  // background-size: 100% 100%;
	}
	.marquee-list{
	  background: transparent;
	}
  
	li.item {
	  font-size: 24px;
	  color: white;
	  flex: 1;
	  justify-content: space-around;
	  align-items: center;
	  margin: 0 100px;
  
	  padding: 10px 18px !important;
	  .price-info {
		justify-content: space-around;
	  }
	  .justify-content-between {
		justify-content: space-around;
		align-items: center;
	  }
	}
  }
  
  .section1 .new-ticker-block-section {
	background-color: rgb(23, 30, 43);
  }
  .container {
	width: 1200px;
	height: 787px;
	// background: url(../../assets/img/bg/juxing.png) no-repeat;
	border: 3px solid white;
	border-radius: 15px;
	padding: 20px;
  }
  .markets {
	// border: 1px solid red;
	.markets__title {
	  line-height: 55px;
	  // color: white;
	  color: #172636;
	  font-size: 24px;
	  padding-left: 15px;
	}
  
	.markets__container {
	  // border : 1px solid blue;
	  margin: 50px auto 50px; // 居中
	}
  }
  //   .news[data-v-5954443c],
  //   .colto-section[data-v-5954443c] {
  //     background-color: rgb(23, 30, 43);
  //   }
  .colto-content-wrap {
	background-color: rgb(35, 40, 54);
  }
  // num count
  .num-info {
	width: 100%;
	height: 230px;
	justify-content: space-evenly;
	align-items: center;
	margin: 60px 0 0px;
	background-color: #0D0D0D;
	.num-info-count {
	  .num {
		font-size: 36px;
		color: white;
		font-weight: bold;
	  }
	  .title {
		color: #999;
		font-size: 20px;
	  }
	}
  }
  
  //service模块
  .service-title {
	.service-title-text1 {
	  font-size: 40px;
	}
	.dotfive {
	  width: 106px;
	  height: 10px;
	  margin: 4px auto;
	  .dotblue {
		width: 10px;
		height: 10px;
		margin-right: 14px;
		background-color: rgba(50, 105, 235, 1);
	  }
	}
  }
  .lattest-news-section {
	margin: 80px auto 0px;
	width: 1200px;
	color: white;
	text-align: center;
	.service-content {
	  margin-top: 60px;
  
	  .service-content-r {
		text-align: left;
		.service-content-text {
		  .service-content-text-img {
			.content_img {
			  width: 42px;
			  height: 42px;
			  margin: 20px 20px 20px 0;
			}
			text-align: left;
			display: flex;
			align-items: center;
  
			img {
			  margin-right: 10px;
			  width: 100%;
			  height: 100%;
			}
  
			.service-content-text1-title {
			  font-size: 24px;
			}
		  }
		  .text-box {
			.service-content-text1-title {
			  font-size: 24px;
			}
		  }
		}
	  }
	}
  }
  
  // beginner guide
  .beginner {
	.beginner_content {
	  .beginner_content_r {
		width: 600px;
		.beginner-text {
		  display: flex;
		  // align-items: center;
		  margin-bottom: 20px;
		  .content_img {
			width: 136px;
			height: 136px;
			margin-right: 20px;
			image {
			  width: 100%;
			  height: 100%;
			}
		  }
		  .text-box {
			text-align: left;
			.service-content-text1-title {
			  font-size: 24px;
			}
			.service-content-text1-info1 {
			  font-size: 18px;
			  color: #908F94;
			}
		  }
		}
	  }
	}
  }
  
  // section-choose
  .section_choose {
	.service-content-r {
	  .service-content-text-img {
		margin: 20px 0;
	  }
	  .service-content-r_title {
		width: 534px;
		height: 231px;
		font-size: 36px;
		text-align: left;
	  }
	}
  }
  .section-choose {
	margin: 50px auto;
	width: 100%;
	height: 500px;
	background-color: #000;
	color: white;
	text-align: center;
	.section-choose-top {
	  .section-choose-boder {
		margin: 10px auto;
		width: 60px;
		height: 10px;
		background-color: rgb(50, 105, 235);
		border-radius: 100px;
	  }
	}
  
	.section-choose-info {
	  justify-content: center;
	  align-items: center;
	  margin-top: 50px;
	  .section-choose-info-text {
		flex-direction: column;
	  }
	}
	.choose-btn {
	  text-align: center;
	  line-height: 60px;
	  margin: 50px auto;
	  width: 245px;
	  height: 60px;
	  border-radius: 100px;
	  border: 1px solid rgb(50, 105, 235);
	  color: rgb(50, 105, 235);
	}
  }
  
  .radial_bg{
	background-image: url("../../assets/img/bg/radial_bg.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 50% 30%;
	// background-position: center;
	// background-position: center top;
	padding: 240px 0px 70px;
	margin-top: -80px;
  }
  
  //banner-bottom
  .banner-bottom {
	margin: 0 auto;
	height: 160px;
	color: white;
	// background: url(../../assets/img/bg/3.jpg) no-repeat;
	background-size: 100% 100%;
	text-align: center;
	padding: 30px 0;
	font-size: 32px;
	font-weight: 700;
  }
  
  //colto-section
  .colto-section {
	.colto-btn-group {
	}
  }
  
  .features {
	width: 100%;
	// 固定高度 宽度自适应
	height: 700px;
	padding: 70px 0 0;
	// 图片默认底部对齐 水平居中
	background: #2c2c38;
	// background: #fff;
	// 只设置宽度100% 高度自适应
	// 超出的部分被裁剪
	background-size: auto 100%;
	color: white;
  }
  
  .features header {
	width: 1280px;
	margin: 0 auto;
	height: 38px;
	@include flexible(row, center, center);
  
	h3 {
	  @include font(Overpass, 30, 38, bold);
	}
  }
  
  .features aside {
	width: 1350px;
	margin: 35px auto 0px; // 居中
	padding: 0 85px;
	position: relative;
  }
  
  .features aside ul {
	height: 500px;
  
	li.swiper-slide {
	  // 原始尺寸
	  // width           : 330px !important;
	  // height          : 400px !important;
	  transition: transform 500ms ease 100ms;
	  border-radius: 8px;
	  overflow: hidden;
	  // 放大尺寸
	  width: 363px !important;
	  height: 440px !important;
	  margin: 0 15px;
	  transform: scale(0.9); // 初始化收缩
	  box-shadow: 0 0.5em 1rem rgba(0, 0, 0, 0.15);
	  display: flex;
  
	  flex-direction: column;
  
	  section {
		padding: 80px 0 0 0;
		flex-grow: 1;
		text-align: center;
	  }
  
	  h3 {
		@include font(Overpass, 22, 30);
		padding: 50px;
		// height: 100px;
		text-align: center;
	  }
  
	  .default {
		display: block;
		background: #383847;
	  }
  
	  .active {
		display: none;
	  }
	}
  
	li:hover {
	  .default {
		display: none;
	  }
  
	  .active {
		display: block;
	  }
  
	  // 异形切换 还原大小
	  transform: scale(1);
	  background: #383847;
	  border: 1px solid #383847;
	  color: white;
  
	  div {
		height: 120px;
		padding: 20px;
		text-align: left;
	  }
  
	  h3 {
		padding: 20px;
		// height: 80px;
		text-align: left;
	  }
  
	  section {
		padding: 0 20px;
		height: 100%;
		// display: none; // 初始化隐藏
		@include font(Overpass, 14, 24, white);
		// text-indent: 20px;
		text-align: left;
	  }
	}
  }
  
  .my-button-disabled {
	opacity: 0.2;
	cursor: default;
  }
  
  .features aside .turning {
	position: absolute;
  
	width: 100%;
	left: 0;
	top: calc(50% - 40px);
  
	@include flexible(row, space-between, center);
  
	// border: 1px solid blue;
	a {
	  width: 50px;
	  height: 50px;
  
	  @include flexible(row, center, center);
	  color: white;
  
	  &:first-child {
		background: url("../../assets/img/arrow-left.svg") center center;
		background-size: 100%;
	  }
  
	  &:last-child {
		background: url("../../assets/img/arrow-right.svg") center center;
		background-size: 100%;
	  }
	}
  
	.disabled {
	  color: #666;
	  cursor: default;
	}
  }
  
  .swiper-container {
	.swiper-pagination-bullet {
	  width: 10px;
	  height: 10px;
	  border-radius: 50%;
	  box-shadow: inset 0 0 5px #eee;
	  border: 1px solid #fff;
	  margin: 0 8px !important;
	}
  
	// 箭头颜色
	--swiper-theme-color: #fff;
  
	// 分页选中的底色
	--swiper-pagination-color: rgba(0, 0, 0, 0.5);
  
	/* 两种都可以 */
	.swiper-slide {
	}
  
	.swiper-button-next,
	.swiper-button-prev {
	  width: 50px;
	  height: 50px;
	  background: url("../../assets/img/circle@2x.png") center center;
	  background-size: 100%;
  
	  // border: 1px solid pink;
	  &::after {
		font-size: 16px !important;
	  }
	}
  
	.swiper-button-next {
	  right: 0;
	}
  
	.swiper-button-prev {
	  left: 0;
	}
  
	.swiper-slide-active,
	.swiper-slide-duplicate-active {
	  // transition: all 1s;
	  // // 异形切换
	  // transform: scale(1);
	  // //
	  // opacity: 1;
	  // //
	  // margin-right: 30px;
	  // section {
	  //     background: none!important;
	  //     div {
	  //         // display : block;
	  //         color: rgba(255, 255, 255, 1);
	  //     }
	  // }
	}
  }
  
  .banner-block {
	display: flex;
	align-items: center;
  
	.index_banner {
	  width: 758px;
	  height: 463px;
	}
  
	.banner_right {
	  width: 440px;
	  margin-left: 353px;
	  display: flex;
	  flex-direction: column;
  
	  .banner_right_p {
		color: #0a1015;
		font-size: 48px;
		font-weight: bold;
		margin-bottom: 30px;
	  }
  
	  .banner_right_input {
		background-color: rgba(23, 38, 54, 100);
		color: white;
		font-size: 15px;
		height: 44px;
		border: none;
		padding-left: 10px;
	  }
  
	  .banner_right_code {
		margin-top: 20px;
		margin-bottom: 30px;
  
		input {
		  width: 310px;
		}
  
		button {
		  width: 125px;
		  height: 44px;
		  border: none;
		  background-color: rgba(49, 65, 132, 100);
		  color: rgba(255, 255, 255, 100);
		  font-size: 15px;
		}
	  }
  
	  .banner_right_sign {
		height: 44px;
		border: none;
		background-color: rgba(49, 65, 132, 100);
		color: rgba(255, 255, 255, 100);
		width: 100%;
		font-size: 20px;
	  }
	}
  }
  
  .markets__title_span {
	font-size: 16px;
	color: #a1a7ae;
	display: inline-block;
	margin-left: 22px;
  }
  
  .table_th {
	background-color: white;
	text-align: center;
	color: #9b9b9b;
  }
  
  .coin-list tbody tr {
	background: transparent;
	text-align: center;
  
	td {
	  min-width: 150px;
	}
  }
  
  .td_img {
	width: 109px;
	height: 39px !important;
	margin: 0 auto;
  }
  
  .td_button {
	width: 140px;
	height: 34px;
	color: #2cb8ff;
	font-size: 14px;
	border: 1px solid #4b5763;
	background: transparent;
  }
  
  .btn-outline-light {
	border: none;
  }
  
  .coin_icon {
	width: 34px;
	height: 34px;
	margin-right: 20px;
  }
  
  .banner2 {
	background: url("../../assets/img/banner2.png") 100% 100% no-repeat;
	padding-left: 233px;
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
  
	.banner_right_p {
	  color: white;
	  font-size: 48px;
	  font-weight: bold;
	  margin-bottom: 0;
	}
  
	.banner_right_p1 {
	  color: #a0a7ad;
	  font-size: 36px;
	  margin-bottom: 51px;
	}
  
	.banner_right_button {
	  width: 420px;
	  height: 52px;
	  line-height: 52px;
	  text-align: center;
	  background: #3553d2;
	  color: white;
	  font-size: 20px;
	  border: none;
	  cursor: pointer;
	}
  }
  
  .banner3 {
	background: url("../../assets/img/banner3.jpg") no-repeat;
	background-color: #ffffff;
	padding-right: 230px;
	padding-top: 129px;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
  
	.banner3_p {
	  font-size: 16px;
	  color: #000000;
	  margin-bottom: 25px;
  
	  .banner3_p_span {
		font-size: 28px;
		color: #000000;
		font-weight: bold;
	  }
	}
  
	.banner3_content {
	  display: flex;
  
	  .banner3_content_item {
		display: flex;
		flex-direction: column;
		margin-left: 90px;
		align-items: center;
  
		.banner3_content_item_code {
		  width: 160px;
		  height: 160px;
		  margin-bottom: 20px;
		}
  
		.banner3_content_item_code1 {
		  width: 50px;
		  height: 50px;
		  margin-bottom: 10px;
		}
  
		.introduce {
		  display: flex;
		  align-items: center;
		  color: white;
		  font-size: 14px;
		  width: 160px;
		  justify-content: center;
  
		  img {
			width: 23px;
			height: 23px;
			margin-right: 9px;
		  }
		}
	  }
  
	  .banner3_content_item:first-child {
		margin-left: 0;
	  }
	}
  }
  
  .colto-section {
	background: white;
  }
  
  .container_button {
	background: #3553d2;
  }
  
  .container_button1 {
	background: #6c7ee4;
  }
  
  .help_area{
	width: 1200px;
	margin: 0px auto;
	font-size: 34px;
  
	.help_item{
	  height: 188px;
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  border-bottom: 1px solid #FEFEFE;
	}
  
	.arrow{
	  width: 60px;
	  height: 60px;
	  background-image: url("../../assets/img/home/plus.png");
	  background-size: cover;
	}
  }
  
 //  .title1{
	// width: 1300px;
	// margin: 0px auto;
	// font-size: 48px;
	// font-weight: bold;
	// color: #fff;
 //  }
  .title2{
	width: 1300px;
	margin: 20px auto 20px;
	font-size: 22px;
	color: #9a9a9a;
  }
  .APP_area{
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0px auto 150px;
	.left{
	  // width: 304px;
	  height: 674px;
	  margin-right: 136px;
	}
	.application{
	  width: 500px;height: 82px;
	  border: 1px solid #fafafa;
	  border-radius: 100px;
	  margin: 17px 0px 27px;
	  color: #908F94;
	  font-size: 16px;
	  justify-content: space-around;
	  align-items: center;
  
	  .app_icon{
		display: flex;
		flex-direction: column;
		align-items: center;
	  }
	  .icon{
		width: 40px;height: 40px;
	  }
	}
  }
  .travel_area{
	width: 1300px;
	// height: 322px;
	display: flex;
	justify-content: space-between;
	margin: 0px auto 0px;
	
	.travel_text1{
		font-size: 24px;
		margin-top: 30px;
		margin-bottom: 20px;
	}
	
	.travel_text2{
		font-size: 16px;
	}
	
	.travel_img{
		width: 386px;
		height: 240px;
		overflow: hidden;
		border-radius: 20px;
		position: relative; 
	}
	.travel_img1{
		width: 100%;
		height: 100%;
		position: absolute; /* 绝对定位，相对于父元素 .travel_img 定位 */
		top: 0; /* 元素顶部与父元素顶部对齐 */
		left: 0; /* 元素左侧与父元素左侧对齐 */
		transition: transform 0.3s; /* 添加过渡效果，使缩放变化平滑 */
	}
	.travel_img:hover  .travel_img1{
		transform: scale(1.08); /* 放大 4%，即从 1 缩放到 1.04 */
	}
	
	// .jump_btn1{
	// 	margin-top: 30px;
	// 	display: inline-block;
	// 	min-width: 130px;
	// 	height: 50px;
	// 	line-height: 50px;
	// 	text-align: center;
	// 	color: #fff;
	// 	background-color: #0F4DF5;
	// 	border-radius: 10px;
	// 	font-size: 20px;
	// 	padding: 0px 20px;
	// 	box-sizing: border-box;
	// }
	
	.travel_text3{
		font-size: 24px;
		font-weight: bold;
		margin-bottom: 20px;
	}
	
	.travel_text4{
		width: 225px;
		font-size: 16px;
	}
	
	.travel_box{
		width: 420px;
		height: 600px;
		background-color: #1D1D1F;
		border-radius: 20px;
		padding:63px 0px 10px 0px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
  }
  .learn_area{
	width: 1200px;
	// height: 202px;
	margin: 0px auto 0px;
	display: flex;
	justify-content: space-between;
  }
  .circle_bg{
	width: 50px;
	height: 50px;
	background-image: url('../../assets/img/features/7.png');
	background-size: cover;
	margin-right: 10px;
  }
  
  .positionBox {
  	width: 1300px;
  	margin: auto;
  	
  	.trade_box {
  		display: flex;
  		width: 100%;
  		background-color: #222630;
  		padding: 10px;
  		align-items: center;
  		border-radius: 10px;
  	
  		.trade_img {
  			width: 120px;
  			height: 120px;
  			background-color: #fff;
  			border-radius: 10px;
  		}
  	}
	
	.positionBox_box2{
		width: 640px;
		height: 500px;
		position: relative;
		
		.positionBox_box3{
			position: absolute;
			bottom: 60px;
			animation: boxImg 1.3s ease-in-out infinite alternate;
		}
		@keyframes boxImg{
			from {transform:translate(0,0px) }
			to {transform:translate(0,20px)}/* 下浮高度 */
		}
	}
  }
  .CryptoJourney{
	width: 1300px;
	height: 326px;
	margin: auto;
	// border: 4px solid #fff;
	border-radius: 20px;
	background: url('../../assets/img/home/home12.png');
	background-size: 1300px;
	background-repeat: no-repeat;
	position: relative;
	
	.CryptoJourney_box{
		width: 1300px;
		text-align: center;
		position: absolute;
		top: 11%;
		left: 50%;
		transform: translateX(-50%);
	}
  }
  
  
  
  
  // 新布局
  .section2 {
  	// background-image:url(../../assets/img/index_banner_2.png);
  	background-color: #fff;
  	width: 100%;
  	height: 100%;
  	background-size: 100% 100%;
  	overflow-x: hidden;
  }
  .market_table {
  	width: 1200px;
  	font-size: 16px;
  	margin: 100px auto;
  	.icon {
  		width: 30px;
  		height: 30px;
  		margin-right: 17px;
  	}
  	.market_tr {
  		display: flex;
  		justify-content: center;
  		align-items: center;
  		line-height: 50px;
  		div {
  			width: 25%;
  		}
  	}
  	.increace {
  		color: #4EAA97;
  	}
  	.decreace {
  		color: #CF6A57;
  	}
  }
  .illustration_area {
  	display: flex;
  	width: 1200px;
  	margin: 0px auto;
  	align-items: center;
  	padding-top: 100px;
  	padding-bottom: 100px;
  	background-color: #0D0E12;
  	justify-content: space-between;
  	.left {
  		color: #fff;
  		max-width: 650px;
  		.title {
  			font-size: 60px;
  		}
  		.btn {
  			min-width: 511px;
  			height: 48px;
  			background-color: #EABB71;
  			border-radius: 5px;
  			display: flex;
  			justify-content: center;
  			align-items: center;
  			font-size: 18px;
  			color: #fff;
  			img {
  				width: 32px;
  				height: 32px;
  				margin-right: 10px;
  			}
  		}
  	}
  }
  .boximg{
  	width: 100%;
  	// height: 690px;
  	background-color: #0D0E12;
  	// margin: auto;
  	// background: url('../../assets/img/home/img1.png');
  	// background-size: 1917px;
  	// background-repeat: no-repeat;
  	// background-position: center;
  }
  .jump_btn {
  	font-weight: bold;
  	display: inline-block;
  	min-width: 240px;
  	height: 50px;
  	line-height: 50px;
  	text-align: center;
  	color: #fff;
  	background-color: #54B58F;
  	border-radius: 10px;
  	font-size: 20px;
  	padding: 0px 20px;
  	box-sizing: border-box;
  }
  .jump_btn1 {
  	display: inline-block;
  	min-width: 240px;
  	height: 60px;
  	line-height: 60px;
  	text-align: center;
  	color: #fff;
  	background-color: #000;
  	border-radius: 30px;
  	font-size: 20px;
  	padding: 0px 20px;
  	box-sizing: border-box;
  }
  .box1{
  	width: 1200px;
  	margin: auto;
  	display: flex;
  	justify-content: space-between;
  	align-items: center;
  	
  		
  	.box1_text{
  		width: 809px;
  		
  		.quickopening{
  			font-size: 15px;
  			color: #999999;
  			margin-top: 20px;
  			margin-bottom: 30px;
  		}
  		
  		.quickopening_box{
  			background-color: rgba(1, 188, 141, .04);
  			border-radius: 20px;
  			border: 1px solid rgba(29, 29, 29, .12);
  			display: flex;
  			justify-content: space-between;
  			padding: 0px 48px;
  			width: 809px;
  			height: 175px;
  			align-items: center;
  			
  			.quickopening_register{
  				min-width: 180px;
  				height: 50px;
  				background-color: rgba(29, 29, 29, 1);
  				border-radius: 30px;
  				color: white;
  				text-align: center;
  				line-height: 50px;
  			}
  		}
  	}
  }
  
  .title3{
  	width: 1200px;
  	text-align: center;
  	margin: auto;
  	font-size: 42px;
  }
  
  .web_area {
  	width: 1200px;
  	height: 840px;
  	margin: 0px auto 0px;
  	padding-top: 50px;
  	color: #000;
  	display: flex;
  	justify-content: space-between;
  	.product {
  		display: flex;
  		align-items: center;
  		justify-content: space-between;
  		box-shadow: 0 2px 8px 0 rgba(0,0,0,.99);
  		height: 200px;
  		margin-bottom: 45px;
  		padding: 15px 25px;
  		border-radius: 10px;
  		
  		img{
  			width: 161px;
  			height: 120px;
  		}
  		.product_text1 {
  			font-weight: bold;
  			font-size: 23px;
  			margin-bottom: 10px;
  			color: #fff;
  		}
  		.product_text2 {
  			width: 320px;
  			font-size: 17px;
  			color: #808080;
  		}
  	}
  }
  
  .text_size {
  	text-align: center;
  	font-size: 20px;
  	font-weight: bold;
  	margin-top: 20px;
  	color: #fff;
  }
  
  .text_width {
  	font-size: 18px;
  	text-align: center;
  	width: 271px;
  	color: #A5A5A5;
  	padding-top: 25px;
  	margin: auto;
  }
  
  .right_box{
  	width: 279px;
  	height: 318px;
  	background-color: rgba(255, 255, 255, 0.8);
  	margin-bottom: 80px;
  	display: flex;
  	justify-content: center;
  	border-radius: 20px;
  	flex-wrap: wrap;
  	align-items: center;
  	
  	.right_color{
  		width: 100%;
  		color: rgba(255, 255, 255, 1);
  		text-align: center;
  		padding-top: 10px;
  	}
  	
  	.right_img{
  		// background-color: rgba(255, 255, 255, 1);
  		img{
  			width: 206px;
  			height: 208px;
  			border-radius: 20px;
  		}
  		
  	}
  	
  	.right_Android{
  		width: 100%;
  		color: rgba(85, 185, 144, 1);
  		text-align: center;
  		padding-bottom: 10px;
  	}
  }
  
  .title1 {
  	color: #fff;
  	width: 1200px;
  	font-size: 48px;
  	margin: 0px auto;
  	font-weight: bold;
  	margin-top: 100px;
  	text-align: center;
  	margin-bottom: 60px;
  }
  
  .Serve_bot{
  	margin: auto;
  	width: 1200px;
  	display: flex;
  	justify-content: space-between;
  }
  
  .Serve_bot_box1{
  	width: 48%;
  	padding: 30px;
  	display: flex;
  	border-radius: 20px;
  	flex-direction: column;
  	background-color: #262727;
  }
  
  .Serve_bot_box2{
  	width: 48%;
  	padding: 30px;
  	display: flex;
  	border-radius: 20px;
  	flex-direction: column;
  	background-color: #effaf2;
  	
  	.Serve_bot_box2_text{
  		color: #000;
  		font-size: 28px;
  		font-weight: 700;
  	}
  	
  	.Serve_bot_box2_text1{
  		font-size: 16px;
  		padding-bottom: 20px;
  		border-bottom: 1px solid #f0f0f0;
  	}
  }
  
  .Tradinganytime{
  	width: 100%;
  	height: 750px;
  	margin: auto;
  	display: flex;
  	align-items: center;
  	
  	.Tradinganytime_app{
  		font-size: 18px;
  		color: #999999;
  		margin-top: 20px;
  	}
  	
  	.Tradinganytime_flex{
  		display: flex;
  		height: 202px;
  		align-items: center;
  		margin-top: 40px;
  		
  		.Tradinganytime_Android{
  			font-size: 22px;
  			font-weight: bold;
  			display: flex;
  			align-items: center;
  		}
  		
  		.Tradinganytime_IOS{
  			font-size: 22px;
  			font-weight: bold;
  			margin-bottom: 55px;
  			display: flex;
  			align-items: center;
  		}
  		
  		.Tradinganytime_img{
  			width: 202px;
  			height: 202px;
  			// background-color: #808080;
  		}
  	}
  }
  
  .text_mai{
  	color: #fff;
  	height: 93px;
  	display: flex;
  	font-size: 24px;
  	margin-top: 30px;
  	padding: 0px 30px;
  	border-radius: 20px;
  	align-items: center;
  	justify-content: space-between;
  	// background-color: #F9F9F9;
  	box-shadow: 0 2px 8px 0 rgba(0,0,0,.99);
  }
  .home-box6{
  	width: 100%;
  	margin-top: 100px;
  	position: relative;
  	
  	.box6{
  		width: 100%;
  		height: 100%;
  		position: absolute;
  		top: 0;
  		left: 0;
  		display: flex;
  		flex-direction: column;
  		justify-content: center;
  		align-items: center;
  	}
  }
  </style>