<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 style="width:100%;background-color: #0D0D0D;">
			<div class="illustration_area">
				<div class="left">
					<div class="title">{{ $t("homeNewText.ff0") }}</div>
					<div style="margin-bottom: 50px;margin-top: 20px;">{{ $t("homeNewText.ff1") }}</div>
					<router-link v-if="!isLogin" class="jump_btn" :to="{name:'signUp'}">
						{{ $t("homeNewText.gg6") }}
					</router-link>
					<router-link v-else class="jump_btn" :to="{name:'exchange'}">
						{{ $t("homeNewText.aa4") }}
					</router-link>
					<div class="num-info1" style="margin-top: 90px;">
						<div class="num-info-count1">
							<div class="num1">Top 10</div>
							<div style="color: #999;font-size: 13px;">{{ $t("homeNewText.ee1") }}</div>
						</div>
						<div class="num-info-count1">
							<div class="num1">5 million+</div>
							<div style="color: #999;font-size: 13px;">{{ $t("homeNewText.ee2") }}</div>
						</div>
						<div class="num-info-count1">
							<div class="num1">{{ '<0.10%' }}</div>
							<div style="color: #999;font-size: 13px;">{{ $t("homeNewText.ee3") }}</div>
						</div>
						<div class="num-info-count1">
							<div class="num1">200+</div>
							<div style="color: #999;font-size: 13px;">{{ $t("homeNewText.ee4") }}</div>
						</div>
					</div>
				</div>
				<div class="right">
					<div class="right_box">
						<img src="../../assets/img/illustration_1.png" alt="" style="width: 418px;height: 534px;">
					</div>
				</div>
			</div>
		</div>
		<div class="illustration_area" style="padding-top: 50px;" v-if="marketList[0]">
			<div class="left" style="width: 400px;margin-right: 100px;">
				<div style="font-size: 40px;font-weight: bold;">{{ $t("homeNewText.ff2") }}</div>
				<div style="font-size: 23px;margin: 10px 0px;">{{ $t("homeNewText.ff3") }}</div>
				<router-link v-if="!isLogin" class="jump_btn" :to="{name:'signUp'}" style="margin-top: 25px;border-radius: 31px;">
				   {{ $t("home.more") }}
				 </router-link>
				 <router-link v-else class="jump_btn" :to="{name:'exchange-assets'}" style="margin-top: 25px;border-radius: 31px;">
				   {{ $t("college.seeMore") }}
				 </router-link>
			</div>
			<div class="right" style="width: 500px;">
				<div tyle="width: 440px;">
					<div style="display: flex;flex-wrap: wrap;margin-top: 100px;">
						<div v-for="(item, index) in marketList[0].marketInfoList.slice(0,6)" :key="index" style="border: 1px solid #353535;margin: 10px;padding: 10px;border-radius: 10px;width: 120px;">
						  <div>
						    <img class="icon" :src="item.coin_icon" style="width: 40px;height: 40px;">
						  </div>
						  <div style="font-size: 12px;">{{ item.coin_name }}</div>
						  <div style="font-size: 12px;margin-bottom: 15px;">$ {{ item.price || item.close }} USD</div>
						  <div :class="item.increase >= 0 ? 'increaceAj' : 'decreaceAj'">{{ item.increaseStr }}</div>
						  <!-- <div style="margin-left: 17%;width: 8%;">{{ item.count }}</div> -->
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- 数字货币交易 -->
		<div class="illustration_area" style="padding-top: 50px;">
			<!-- <div class="img_cellphone"><img src="@/assets/img/home/home3.png" alt=""></div> -->
			<div class="img_container">
			    <div class="backgrounde" :class="{ 'flipped': !imageVisible1 }"></div>
			    <div class="image" :class="{ 'flipped': imageVisible1 }">
			        <img src="@/assets/img/home/home3.png" alt="">
			    </div>
			</div>
			<div style="margin-left: 100px;" ref="imgContainer1">
				<div style="display: flex;align-items: center;">
					<img src="@/assets/img/home/home4.png" alt="" width="50" height="50">
					<div class="biku_text">{{ $t("homeNewText.ff4") }}</div>
				</div>
				<div class="gouma_text">{{ $t("homeNewText.ff5") }}</div>
				<div class="introduce_text">{{ $t("homeNewText.ff6") }}</div>
				<router-link v-if="!isLogin" class="jump_btn" :to="{name:'signUp'}" style="margin-top: 50px;border-radius: 31px;">
				   {{ $t("homeNewText.gg7") }}
				 </router-link>
				 <router-link v-else class="jump_btn" :to="{name:'exchange'}" style="margin-top: 25px;border-radius: 31px;">
				   {{ $t("college.seeMore") }}
				 </router-link>
			</div>
		</div>
		
		<div class="illustration_area" style="background-color:#000000;padding-top: 50px;">
			<div style="margin-right: 60px;" ref="imgContainer2">
				<div style="display: flex;align-items: center;">
					<img src="@/assets/img/home/home4.png" alt="" width="50" height="50">
					<div class="biku_text">{{ $t("homeNewText.ff7") }}</div>
				</div>
				<div class="gouma_text">{{ $t("homeNewText.ff8") }}</div>
				<div class="introduce_text">{{ $t("homeNewText.ff9") }}</div>
				<router-link v-if="!isLogin" class="jump_btn" :to="{name:'signUp'}" style="margin-top: 50px;border-radius: 31px;">
				   {{ $t("homeNewText.gg7") }}
				 </router-link>
				 <router-link v-else class="jump_btn" :to="{name:'contract'}" style="margin-top: 25px;border-radius: 31px;">
				   {{ $t("college.seeMore") }}
				 </router-link>
			</div>
			<!-- <div class="img_cellphone"><img src="@/assets/img/home/home2.png" alt=""></div> -->
			<div class="img_container">
			    <div class="backgrounde" :class="{ 'flipped': !imageVisible2 }"></div>
			    <div class="image" :class="{ 'flipped': imageVisible2 }">
			        <img src="@/assets/img/home/home2.png" alt="">
			    </div>
			</div>
		</div>
		
		<div class="illustration_area" style="background-color:#000000;padding-top: 50px;">
			<!-- <div style="width: 493px;height: 650px;border: 1px solid #2c2c2c;padding: 10px;border-radius: 10px;"><img src="@/assets/img/home_people.png" alt=""></div> -->
			<div class="img_container1">
			    <div class="backgrounde" :class="{ 'flipped': !imageVisible3 }"></div>
			    <div class="image" style="padding: 10px;" :class="{ 'flipped': imageVisible3 }">
			        <img src="@/assets/img/home_people.png" alt="">
			    </div>
			</div>
			<div style="margin-left: 100px;" ref="imgContainer3">
				<div class="gouma_text">{{ $t("homeNewText.ff10") }}</div>
				<div class="introduce_text">{{ $t("homeNewText.ff11") }}</div>
				<router-link v-if="!isLogin" class="jump_btn" :to="{name:'signUp'}" style="margin-top: 50px;border-radius: 31px;">
				   {{ $t("homeNewText.gg7") }}
				 </router-link>
				 <router-link v-else class="jump_btn" :to="{name:'exchange-assets'}" style="margin-top: 25px;border-radius: 31px;">
				   {{ $t("college.seeMore") }}
				 </router-link>
			</div>
		</div>
		
		<div class="illustration_area" style="background-color:#000000;padding-top: 50px;">
		  <div class="build-bottom d-flex">
		    <div class="build-left">
				<div class="gouma_text">{{ $t("homeNewText.ff12") }}</div>
				<div class="introduce_text">{{ $t("homeNewText.ff13") }}</div>
				<div style="width: 380px;margin-top: 30px;border: 1px solid #fff;border-radius: 35px;padding: 5px 0px;">
					<a style="display: block;width: 100%;text-decoration: none;">
						<div style="display: flex;justify-content: space-around;">
						  <div><img src="../../assets/img/features/apple_1.png" alt="" style="width: 30px;height: 30px;"></div>
						  <div style="margin-left: 3px;"><img src="../../assets/img/features/android_1.png" alt=""  style="width: 30px;height: 30px;"></div>
						  <div v-if="0"><img src="../../assets/img/features/google_1.png" alt=""  style="width: 30px;height: 30px;"></div>
						</div>
						<div style="display: flex;justify-content: space-around;margin-top: 5px;">
						  <div style="color: white;">App Store</div>
						  <div style="color: white;">Android</div>
						  <div v-if="0">Google Play</div>
						</div>
					</a>
				</div>
				<div style="margin: 20px 0px;white-space: pre-wrap;width: 400px;">{{ $t("homeNewText.ff16") }}</div>
				  <div style="flex-direction: column;display: flex;">
					<img src="@/assets/img/home/bitqr.png" alt="" style="width: 135px;height: 135px;background-color: #000;margin-right: 33px;margin-left: 13px;">
					<div style="font-size: 22px;font-weight: bold;white-space: pre-wrap;width: 200px;">{{ $t("homeNewText.ff17") }}</div>
				  </div>
		    </div>
		    <div class="build-right">
		      <img src="@/assets/img/home/home1.png" alt="mobile application" style="width: 681px;height: 407px;" />
		    </div>
		  </div>
		</div>
		<div style="width: 1200px;font-size: 40px;font-weight: 700;margin: 0px auto;background-color:#000000;padding-top: 50px;">{{ $t("homeNewText.ff14") }}</div>
		<div class="illustration_area" style="background-color:#000000;margin-top: 10px;">
			<div style="width: 1200px;">
				<router-link :to="'/notice/'+item.id" v-for="(item, index) in helpList" :key="index+'help'">
					<div class="text_mai">
						<div style="color: #fff;">{{ item.title }}</div>
						<img src="@/assets/img/tiao.png" alt="mobile application" style="width: 36px;height: 36px;" />
					</div>
				</router-link>
			</div>
			
		</div>
		<!-- <div class="title1 fn-center">{{ $t("homeNewText.bb4") }}</div>
		<div class="title2 fn-center">{{ $t("homeNewText.bb5") }}</div>
		<div class="web_area">
			<img src="../../assets/img/home/illustration_111.png" alt="" style="width: 100%;height: 100%;">
		</div>
		<div class="APP_area">
			<img src="../../assets/img/home/illustration_1.png" class="left" alt="">
			<div>
				<div style="width: 500px;font-size: 48px;line-height: 72px;">{{ $t("homeNewText.bb6") }}</div>
				<div class="d-flex application">
					<div class="app_icon">
						<img src="../../assets/img/home/apple_1.png" alt="" class="icon">
						<div>App Store</div>
					</div>
					<div class="app_icon">
						<img src="../../assets/img/home/android_1.png" alt="" class="icon">
						<div>Android</div>
					</div>
					<div class="app_icon">
						<img src="../../assets/img/home/google_1.png" alt="" class="icon">
						<div>Google Play</div>
					</div>
				</div>
				<div style="width: 510px;color: #9a9a9a;font-size: 22px;">{{ $t("homeNewText.bb7") }}</div>
				<img src="../../assets/img/home/qrcode.png" alt="qrcode for APP"
					style="width: 135px;height: 135px;margin: 23px 0px 10px;">
				<div style="font-weight: bold;font-size: 22px;">{{ $t("homeNewText.bb8") }}</div>
			</div>
		</div> -->

		<!-- 您数字货币之旅的得力助手 -->
		<!-- <div class="title1 fn-center">{{ $t("homeNewText.bb9") }}</div>
		<div class="title2 fn-center">{{ $t("homeNewText.bb10") }}</div>
		<div class="travel_area">
			<img src="../../assets/img/home/bg_2.png" alt="" style="width: 100%;height: 100%;">
		</div>

		<div class="title1">{{ $t("homeNewText.bb11") }}</div>
		<div class="title2">{{ $t("homeNewText.bb12") }}</div>
		<div class="learn_area">
			<router-link :to="'/notice/'+helpList[0].id" class="learn_item">
				<img src="../../assets/img/home/bg_3.png" alt="">
			</router-link>
			<router-link :to="'/notice/'+helpList[1].id" class="learn_item">
				<img src="../../assets/img/home/bg_3.png" alt="">
			</router-link>
			<router-link :to="'/notice/'+helpList[2].id" class="learn_item">
				<img src="../../assets/img/home/bg_3.png" alt="">
			</router-link>
		</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">{{ $t("homeNewText.bb13") }}</div>
		<div class="help_area">
			<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";
	import { mapState } from "vuex";
	// Vue.use(VueAwesomeSwiper);
	export default {
		components: {
			vueQr,
			priceLine,
		},

		computed: {
			...mapState({
			  appConfig: "appConfig",
			}),
			isLogin() {
				return Boolean(localStorage.token);
			},
			downloadLink() {
				return "https://ygg.coinovi.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: [],
				imageVisible1:false,
				imageVisible2:false,
				imageVisible3:false
			};
		},
		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);
				});
			},
			handleScroll() {
			    // 只在 refs 存在时检查可见性
			    if (this.$refs.imgContainer1) {
			        this.checkVisibility(this.$refs.imgContainer1, 'imageVisible1');
			    }
			    if (this.$refs.imgContainer2) {
			        this.checkVisibility(this.$refs.imgContainer2, 'imageVisible2');
			    }
			    if (this.$refs.imgContainer3) {
			        this.checkVisibility(this.$refs.imgContainer3, 'imageVisible3');
			    }
			},
			checkVisibility(ref, visibilityKey) {
			    const rect = ref.getBoundingClientRect();
			    // 检查是否已经滚动到图片区域
			    if (rect.top < window.innerHeight && rect.bottom > 0) {
			        this[visibilityKey] = true; // 显示图片
			    }
				 // else {
			  //       this[visibilityKey] = false; // 隐藏图片
			  //   }
			}
		},
		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();
			});
			
			this.$nextTick(() => {
			    window.addEventListener('scroll', this.handleScroll);
			    this.handleScroll(); // 初始调用以设置状态
			});
		},
		beforeDestroy() {
		    window.removeEventListener('scroll', this.handleScroll);
		},
	};
</script>

<style lang="scss" scoped>
	#dowebok {
		// background: rgb(18, 19, 24) !important;
		background-color: #000 !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: #0D0D0D;
		//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: 1200px;
		margin: 0px auto;
		padding: 100px 0px;
		display: flex;
		justify-content: center;
		align-items: center;
		
		.left {
			color: #fff;
			max-width: 650px;

			.title {
				font-size: 60px;
			}

			.icon_box {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 168px;

				img {
					margin-right: 57px;
				}
			}
		}
		
		.right{
			width: 418px;
			height: 534px;
			position: relative;
			
			.right_box{
				position: absolute;
				bottom: 0px;
				animation: movepoint 1.3s ease-in-out infinite alternate;
			}
			
			@keyframes movepoint{
				from {transform:translate(0,0px) }
				to {transform:translate(0,-20px)}/* 下浮高度 */
			}
		}
		
		.img_cellphone{
			width: 366px;
			height: 691px;
		}
		.img_container {
		    position: relative;
		    width: 366px;
		    height: 691px; /* 根据需要调整高度 */
		    overflow: hidden;
		}
		.img_container1{
			width: 493px;
			height: 650px;
			border-radius: 10px;
			border: 1px solid #2c2c2c;
			position: relative;
			overflow: hidden;
		}
		
		.backgrounde,
		.image {
		    position: absolute;
		    top: 0;
		    left: 0;
		    width: 100%;
		    height: 100%;
		    transition: transform 3s;
		    backface-visibility: hidden;
		}
		
		.backgrounde {
		    background-color: #000; /* 背景色 */
		    z-index: 1;
		}
		
		.image {
		    z-index: 2;
		    transform: rotateY(180deg); /* 初始状态为翻转 */
		}
		
		.flipped {
		    transform: rotateY(0deg); /* 翻转到正常状态 */
		}
		
		
		.biku_text{
			margin-left: 5px;font-size: 25px;font-weight: bold;
		}
		.gouma_text{
			font-size: 32px;width: 360px;margin-top: 20px;
		}
		.introduce_text{
			font-size:15px;width:430px;margin-top: 20px;
		}
		.text_mai{
			  width: 590px;
			  border:1px solid #393939;
			  margin: 10px 5px;
			  padding: 5px 10px;
			  height: 83px;
			  // line-height: 38px;
			  border-radius: 12px;
			  display: flex;
			  align-items: center;
			  justify-content: space-between;
			  font-size: 18px;
		}
	}

	.jump_btn{
	  display: inline-block;
	  min-width: 200px;
	  height: 60px;
	  line-height: 60px;
	  text-align: center;
	  color: #fff;
	  background-color: #2d58de;
	  border-radius: 10px;
	  font-size: 20px;
	  padding: 0px 20px;
	  box-sizing: border-box;
	}
	.jump_btn:hover{
		background-color: #fff;
		color: #2d58de;
	}

	.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%;
			}
		}
	}

	.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-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: 1200px;
		margin: 0px auto;
		font-size: 48px;
		font-weight: bold;
		color: #fff;
	}

	.title2 {
		width: 1200px;
		margin: 20px auto 100px;
		font-size: 22px;
		color: #9a9a9a;
	}

	.web_area {
		width: 1200px;
		height: 717px;
		margin: 0px auto 150px;
	}

	.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: 1200px;
		height: 322px;
		margin: 0px auto 150px;
	}

	.learn_area {
		width: 1200px;
		height: 202px;
		margin: 0px auto 123px;
		display: flex;
		justify-content: space-between;

		.learn_item {
			width: 380px;
			height: 202px;
			border-radius: 10px;

			img {
				width: 100%;
				height: 100%;
			}
		}
	}

	.circle_bg {
		width: 50px;
		height: 50px;
		background-image: url('../../assets/img/features/7.png');
		background-size: cover;
		margin-right: 10px;
	}
	.num-info1 {
	  width: 460px;
	  // height: 230px;
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  margin: 60px 0 0px;
	  .num-info-count1 {
	    .num1 {
	      font-size: 18px;
	      color: white;
	      font-weight: bold;
	    }
	    .title1 {
	      color: #999;
	      font-size: 13px;
	    }
	  }
	}
	
	@media (max-width:1200px){
		.illustration_area{
			width: 100%;
			.left{
				max-width: 500px;
				padding: 0px 15px;
				margin-bottom: 20px;
				
				.title{
					font-size: 45px;
				}
			}
			.right{
				width: 418px;
				height: 534px;
				
				.right_box {
					bottom: 40px;
				}
			}
		}
		// .section{
		// 	width: 100%;
		// }
	}
	@media (max-width:800px){
		.illustration_area{
			width: 100% !important;
			display: block;
			position: relative;
			
			.left{
				max-width: 800px;
				padding-top: 450px;
				text-align: center;
				.title{
					font-size: 45px;
				}
				.link-btn{
					justify-content: center;
				}
			}
			
			.right{
				width: 500px;
				height: 400px;
				position: absolute;
				top: 200px;
				left: 50%;
				transform: translateX(-50%);
				
				.right_box{
					bottom: 40px;
				}
			}
		}
		.num-info1{
			margin: auto;
		}
		.img_container{
			margin: auto;
		}
		.img_container1{
			margin: auto;
		}
	}
</style>