blame | history | patch | commit | commitdiff | ignore whitespace
1
李凌
2026-01-20 9a9d832dbd364557e070abcd9a7779a2c6c07ffb 
 src/views/homePage/index.vue


@@ -1,146 +1,376 @@


<template>


    <div class="home_page">




        <Head></Head>


        <div class="home_logo flex justify-center"><img src="@/assets/imgs/home/home_logo.png" alt=""></div>


        <div class="text-center font-bold mt-8 logo_text">{{ $t('复制财富，從此刻開始') }}</div>


        <div class="text-center mt-2 logo_text_small">{{ $t('超6000種熱門交易類別，立即註冊领取5000USDT') }}!</div>


  <Head></Head>


  <div class="home_page">


    <!-- <Head></Head>


    <div class="home_logo flex justify-center"><img src="@/assets/imgs/home/home_logo.png" alt=""></div>


    <div class="text-center font-bold mt-8 logo_text">{{ $t('复制财富，從此刻開始') }}</div>


    <div class="text-center mt-2 logo_text_small">{{ $t('超6000種熱門交易類別，立即註冊领取5000USDT') }}!</div>






        <div class="login_buts flex justify-between pl-10 pr-10 pt-10"


            v-if="!(userStore.userInfo && userStore.userInfo.token)">


            <div class="login_but_z text-center" @click="toPage('/register')">{{ $t('register') }}</div>


            <div class="login_but_d text-center" @click="toPage('/login')">{{ $t('登录') }}</div>


    <div class="login_buts flex justify-between pl-10 pr-10 pt-10"


        v-if="!(userStore.userInfo && userStore.userInfo.token)">


        <div class="login_but_z text-center" @click="toPage('/register')">{{ $t('register') }}</div>


        <div class="login_but_d text-center" @click="toPage('/login')">{{ $t('登录') }}</div>


    </div>




    <div class="home_grid flex justify-start flex-wrap">


        <div class="grid_item pt-10" v-for="value in tabbers" :key="value.key" @click="toPage(value.path)">


            <div class="grid_item_img flex justify-center"><img :src="value.icon" alt=""></div>


            <div class="text-center mt-2">{{ value.name }}</div>


        </div>


    </div>




        <div class="home_grid flex justify-start flex-wrap">


            <div class="grid_item pt-10" v-for="value in tabbers" :key="value.key" @click="toPage(value.path)">


                <div class="grid_item_img flex justify-center"><img :src="value.icon" alt=""></div>


                <div class="text-center mt-2">{{ value.name }}</div>


            </div>


        </div>




        <van-notice-bar class="font-26 mt-10 index_notice" background="#fafbfc" :scrollable="false" wrapable


            color="#333333">


            <van-swipe vertical class="notice-swipe" :autoplay="2000" :show-indicators="false">


                <van-swipe-item v-for="item in announceList" :key="item.id" @click="toAnnounceDetail(item.uuid)">


                    <div class="flex justify-start items-center">


                        <img :src="item.imgUrl" alt="" class="notice_img mr-5">


                        <div class="notice_content">


                            <div>{{ item.startTime }}</div>


                            <div>{{ item.title }}</div>


                        </div>


    <van-notice-bar class="font-26 mt-10 index_notice" background="#fafbfc" :scrollable="false" wrapable


        color="#333333">


        <van-swipe vertical class="notice-swipe" :autoplay="2000" :show-indicators="false">


            <van-swipe-item v-for="item in announceList" :key="item.id" @click="toAnnounceDetail(item.uuid)">


                <div class="flex justify-start items-center">


                    <img :src="item.imgUrl" alt="" class="notice_img mr-5">


                    <div class="notice_content">


                        <div>{{ item.startTime }}</div>


                        <div>{{ item.title }}</div>


                    </div>


                </van-swipe-item>


            </van-swipe>


        </van-notice-bar>


                </div>


            </van-swipe-item>


        </van-swipe>


    </van-notice-bar>




        <!-- <div class="flex justify-between mt-10">


            <van-swipe class="home_swipe_1" :autoplay="2000">


                <van-swipe-item v-for="value in swipe1" :key="value.key" class="flex justify-center items-center">


                    <img :src="value.img" alt="" class="swipe-item-img">


                </van-swipe-item>


                <template #indicator="{ active, total }">


                    <div class="custom-indicator"><span>{{ active + 1 }}</span>/{{ total }}</div>


                </template>


</van-swipe>




<div style="width:24rem">


    <van-swipe class="home_swipe_2" :autoplay="2000">


        <van-swipe-item v-for="value in swipe2" :key="value.key" class="flex justify-center items-center">


            <img :src="value.img" alt="" class="swipe-item-img">


        </van-swipe-item>


        <template #indicator="{ active, total }">


                        <div class="custom-indicator flex justify-center items-center">


                            <div v-for="value in total" :key="value" class="ml-1"


                                :class="active + 1 === value ? 'active' : ''">


                            </div>


                        </div>


                    </template>


    </van-swipe>


    <div id="cryptos" class="pt-10">


        <list-quatation :listData="qList" :tabShow="false" />


    </div> -->


    <van-notice-bar text="通知内容" left-icon="volume" color="orange" background="white" />


    <div style="margin: 0 10px">




    <div class="purchase mt-7 font-bold flex justify-between items-center">


        {{ $t('购买加密货币') }}


        <van-icon name="arrow" />


    </div>


</div>


</div> -->




        <div id="cryptos" class="pt-10">


            <list-quatation :listData="qList" :tabShow="false" />


      <div class="flex-centerY">


        <div style="font-size: 16px;margin-right: 5px">


          <van-icon v-if="showMoney" @click="showMoney = !showMoney" name="browsing-history" />


          <van-icon v-else @click="showMoney = !showMoney" name="closed-eye" />


        </div>


        <div style="font-size: 14px;color: black">


          {{ $t("总资产") }}(USD)


        </div>


      </div>




      <div class="flex-centerY flex-position-between" style="margin-top: 15px">


        <div class="flex flex-justify-between">


          <div style="font-size: 33px;font-weight: bold;color: black">


            {{ showMoney ? todayMoney.money_contract : "*****" }}


          </div>


        </div>


        <!-- <div style="background: black;color: white;padding: 4px 17px;border-radius: 90px;font-size: 14px"


          @click="toPage('/cryptos/recharge/rechargeList?isForeign=true')"> -->


        <div style="background: black;color: white;padding: 4px 17px;border-radius: 90px;font-size: 14px"


          @click="toPage('/customerService')">


          {{ $t("充值") }}


        </div>


      </div>


      <div class="flex-centerY" style="font-size: 12px;color: #999;margin-top: 20px;">


        <div>


          {{ $t("今日盈亏") }}


        </div>


        <div style="margin-left: 15px"


          :style="todayMoney.money_contract_profit_today > 0 ? 'color: #0f0' : todayMoney.money_contract_profit_today < 0 ? 'color: #f00' : ''">


          {{ showMoney ? todayMoney.money_contract_profit_today : "****" }}


        </div>


        <div style="margin-left: 15px"


          :style="todayMoney.money_contract_profit_today > 0 ? 'color: #0f0' : todayMoney.money_contract_profit_today < 0 ? 'color: #f00' : ''">


          {{ showMoney ? (Number(todayMoney.money_contract_profit_today + '') / (todayMoney.money_contract == 0 ? 1 :


            todayMoney.money_contract) * 100).toFixed(2) + '%' : "****" }}


        </div>


      </div>


    </div>


    <div class="home_1 flex justify-around items-center" style="padding: 20px 0">


      <div v-for="i in tabbers" :key="i.key" @click="toPage(i.path)">


        <img :src="i.icon" v-if="storeS.state.vant.theme == 'light'">


        <img :src="i.icon2" v-else>


        <div style="font-size: 12px;color: #777">{{ i.name }}</div>


      </div>


    </div>


    <div style="position: relative;margin: 10px 00px;border-radius: 12px;border: 1px #eee solid">


      <!--      <van-notice-bar class="font-26 mt-10 index_notice" :scrollable="false" wrapable>-->




      <van-swipe @change="current = $event" indicator-color="#999" class="notice-swipe" :autoplay="2000"


        :show-indicators="false" style="border-radius: 8px;overflow: hidden">


        <van-swipe-item v-for="item in announceList" style="border-radius: 8px;overflow: hidden;border: #eee 1px solid"


          :key="item.id" @click="toAnnounceDetail(item.uuid)">


          <img :src="item.imgUrl" alt="" class="notice_img mr-5" style="width:100%;height:100px;border-radius: 8px">


        </van-swipe-item>


      </van-swipe>


      <div class="flex-center" style="position:absolute;bottom:5px;left:0;;z-index:999;width: 100%">


        <div v-for="(i, index) in announceList" :key="index">


          <div v-if="current != index" style="width:3px;height:3px;background:#bbb;margin-right:5px;border-radius: 3px">


          </div>


          <div v-else style="width:3px;height:3px;background:#333;;margin-right:5px;border-radius: 3px"></div>


        </div>


      </div>


    </div>


    <!--    <div style="margin: 15 0px;align-items: stretch" class="flex-centerY">-->


    <!--      <div class="flex-centerY" style="flex: 1;margin-right: 20px;border: #eee 1px solid;border-radius: 12px;padding: 10px 10px">-->


    <!--        <div style="flex: 1" class="flexY">-->


    <!--          <div style="font-size: 14px;color: black;font-weight: bold">-->


    <!--            {{$t("信贷")}}-->


    <!--          </div>-->


    <!--          <div style="font-size: 12px;color: #999;flex: 1">-->


    <!--            {{$t("低利率，彈性強，助您持續擁有資金")}}-->


    <!--          </div>-->


    <!--        </div>-->


    <!--        <div >-->


    <!--          <img src="../../assets/img/img_4.png" style="width: 55px;height: 55px">-->


    <!--        </div>-->


    <!--      </div>-->


    <!--      <div class="flex-centerY" style="flex: 1;border: #eee 1px solid;border-radius: 12px;padding: 10px 10px">-->


    <!--        <div style="flex: 1;height: 100%" class="flexY">-->


    <!--          <div style="font-size: 14px;color: black;font-weight: bold">-->


    <!--            {{$t("OTC")}}-->


    <!--          </div>-->


    <!--          <div style="font-size: 12px;color: #999;;flex: 1">-->


    <!--            {{$t("200+支付方式")}}-->


    <!--          </div>-->


    <!--        </div>-->


    <!--        <div >-->


    <!--          <img src="../../assets/img/img_5.png" style="width: 55px;height: 55px">-->


    <!--        </div>-->


    <!--      </div>-->


    <!--    </div>-->


    <div class="tabs flex justify-start items-center textColor1">


      <div v-for="i in tabList" :key="i" :class="i.key == tab ? 'textColor' : ''" @click="tab = i.key"


        style="font-size: 16px;margin-top: 20px">


        {{ i.name }}


      </div>


    </div>


    <div id="cryptos">


      <list-quatation :listData="qList" :tabShow="false" :tabActive="tab" />


    </div>




    <div class="home_2" @click="toPage('/quotes/index')">


      {{ $t("更多") }}


      <van-icon name="arrow-down" />


    </div>




    <div class="home_3 flex justify-start">


      <img :src="LOGO" alt="">


      <span>{{ $t('安全、便利、社交') }}</span>


    </div>




    <van-collapse v-model="activeName" accordion>


      <van-collapse-item name="1" class="border_b">


        <template #title>


          <div class="flex justify-start items-center">


            <img src="@/assets/imgs/home/home_23a.png" alt="" class="border_icon"


              v-if="storeS.state.vant.theme == 'light'">


            <img src="@/assets/imgs/home/home_23b.png" alt="" class="border_icon" v-else>


            {{ $t('公司') }}


          </div>


        </template>


        <div style="padding-left: 2.3rem;">


          <p @click="toPage('/aboutUs')">{{ $t('关于我们') }}</p>


          <p @click="toPage('/helpCenter')">{{ $t('帮助中心') }}</p>


        </div>


      </van-collapse-item>


      <van-collapse-item name="2" class="border_b">


        <template #title>


          <div class="flex justify-start items-center">


            <img src="@/assets/imgs/home/home_21a.png" alt="" class="border_icon"


              v-if="storeS.state.vant.theme == 'light'">


            <img src="@/assets/imgs/home/home_21b.png" alt="" class="border_icon" v-else>


            {{ $t('法律') }}


          </div>


        </template>


        <div style="padding-left: 2.3rem;">


          <p @click="toPage('/TermsOfService')">{{ $t('serviceConf') }}</p>


        </div>


      </van-collapse-item>


      <van-collapse-item name="3" class="border_b">


        <template #title>


          <div class="flex justify-start items-center">


            <img src="@/assets/imgs/home/home_22a.png" alt="" class="border_icon"


              v-if="storeS.state.vant.theme == 'light'">


            <img src="@/assets/imgs/home/home_22b.png" alt="" class="border_icon" v-else>


            {{ $t('支援') }}


          </div>


        </template>


        <div style="padding-left: 2.3rem;">


          <p @click="toPage('/customerService')">{{ $t('onLineService') }}</p>


        </div>


      </van-collapse-item>


    </van-collapse>


  </div>


</template>




<script setup>


import Head from './components/head.vue'


import { useI18n } from "vue-i18n";


import { ref, computed, onBeforeUnmount } from 'vue';


import { ref, computed, onBeforeUnmount, onMounted } from 'vue';


import { useRouter } from 'vue-router';


import ListQuatation from "@/components/Transform/list-quotation/index.vue";


import { _getHomeList } from '@/service/cryptos.api'


import { _getNewsList1, _getPopupNews } from '@/service/user.api'


import { _getassets, _getContractBySymbolType, _getNewsList1, _getPopupNews } from '@/service/user.api'


import { useStore } from "vuex";


import { TIME_OUT } from "@/config";


import { TIME_OUT, LOGO } from "@/config";


import { useUserStore } from '@/store/user';


import { setStorage,getStorage } from '@/utils/index.js';


  let catchSymbol = getStorage('symbol')


  if(!catchSymbol){


     setStorage('symbol', 'btcusdt');


  }


import { setStorage, getStorage } from '@/utils/index.js';


import storeS from '@/store/store'




let catchSymbol = getStorage('symbol')


if (!catchSymbol) {


  setStorage('symbol', 'btcusdt');


}


const userStore = useUserStore()


const { t } = useI18n()


const router = useRouter()


const store = useStore();


const showMoney = ref(true)




const todayMoney = ref({


  money_contract_profit_today: 0


})




// 获取资产信息


function getAllAssets() {


  _getContractBySymbolType().then(data => {


    todayMoney.value = data


  })


}


// 轮询获取资产信息


let times1 = null;


getAllAssets();


times1 = setInterval(() => {


  getAllAssets();


}, 4000)


// 停止获取资产计数器


function timeOut1() {


  clearInterval(times1)


}




const tabbers = [


    // { key: 1, name: t('跟单'), icon: new URL('@/assets/imgs/home/home_1.png', import.meta.url) },


    // { key: 3, name: `C2C ${t('交易')}`, icon: new URL('@/assets/imgs/home/home_3.png', import.meta.url) },


    // { key: 4, name: t('邀请好友'), icon: new URL('@/assets/imgs/home/home_4.png', import.meta.url) },


    { key: 5, name: t('合约'), icon: new URL('@/assets/imgs/home/home_5.png', import.meta.url), path: '/trade/index' },


    { key: 6, name: t('现货'), icon: new URL('@/assets/imgs/home/home_5.png', import.meta.url), path: '/cryptos/trade/btcusdt' },


   { key: 2, name: t('储值'), icon: new URL('@/assets/imgs/home/home_2.png', import.meta.url), path: '/cryptos/recharge/rechargeList?isForeign=true' },


    // { key: 7, name: t('提现'), icon: new URL('@/assets/imgs/home/home_6.png', import.meta.url), path: '/exchange/withdraw-usdt' },/cryptos/Withdraw/withdrawPage


   { key: 7, name: t('提现'), icon: new URL('@/assets/imgs/home/home_6.png', import.meta.url), path: '/cryptos/Withdraw/withdrawPage' },


    // { key: 8, name: t('卡券中心'), icon: new URL('@/assets/imgs/home/home_7.png', import.meta.url) },


    { key: 9, name: t('闪兑'), icon: new URL('@/assets/imgs/home/home_8.png', import.meta.url), path: '/cryptos/exchangePage' },


    // { key: 10, name: t('更多'), icon: new URL('@/assets/imgs/home/home_9.png', import.meta.url) },


  // { key: 1, name: t('跟单'), icon: new URL('@/assets/imgs/home/home_1.png', import.meta.url) },


  // { key: 3, name: `C2C ${t('交易')}`, icon: new URL('@/assets/imgs/home/home_3.png', import.meta.url) },


  // { key: 4, name: t('邀请好友'), icon: new URL('@/assets/imgs/home/home_4.png', import.meta.url) },


  // { key: 5, name: t('合约'), icon: new URL('@/assets/imgs/home/home_5.png', import.meta.url), path: '/trade/index' },


  // { key: 6, name: t('现货'), icon: new URL('@/assets/imgs/home/home_5.png', import.meta.url), path: '/cryptos/trade/btcusdt' },


  // { key: 2, name: t('储值'), icon: new URL('@/assets/imgs/home/home_2.png', import.meta.url), path: '/cryptos/recharge/rechargeList?isForeign=true' },


  // { key: 7, name: t('提现'), icon: new URL('@/assets/imgs/home/home_6.png', import.meta.url), path: '/exchange/withdraw-usdt' },/cryptos/Withdraw/withdrawPage


  // { key: 7, name: t('提现'), icon: new URL('@/assets/imgs/home/home_6.png', import.meta.url), path: '/cryptos/Withdraw/withdrawPage' },


  // { key: 8, name: t('卡券中心'), icon: new URL('@/assets/imgs/home/home_7.png', import.meta.url) },


  // { key: 10, name: t('更多'), icon: new URL('@/assets/imgs/home/home_9.png', import.meta.url) },




    { key: 11, name: "ICO", icon: new URL('@/assets/imgs/home/home_1.png', import.meta.url), path: '/ICO/ico' },


    { key: 12, name: "C2C", icon: new URL('@/assets/imgs/home/home_1.png', import.meta.url), path: '/wantBuy' },


  // {


  //   key: 9,


  //   name: t('闪兑'),


  //   icon: new URL('@/assets/imgs/home/home_12a.png', import.meta.url),


  //   icon2: new URL('@/assets/imgs/home/home_12b.png', import.meta.url),


  //   path: '/cryptos/exchangePage'


  // },


  // {


  //   key: 11,


  //   name: "ICO",


  //   icon: new URL('@/assets/imgs/home/home_11a.png', import.meta.url),


  //   icon2: new URL('@/assets/imgs/home/home_11b.png', import.meta.url),


  //   path: '/ICO/ico'


  // },


  // {


  //   key: 12,


  //   name: "C2C",


  //   icon: new URL('@/assets/imgs/home/home_11a.png', import.meta.url),


  //   icon2: new URL('@/assets/imgs/home/home_11b.png', import.meta.url),


  //   path: '/wantBuy'


  // },


  // {


  //   key: 13,


  //   name: t('onLineService'),


  //   icon: new URL('@/assets/imgs/home/home_10a.png', import.meta.url),


  //   icon2: new URL('@/assets/imgs/home/home_10b.png', import.meta.url),


  //   path: '/customerService'


  // },


  // {


  //   key: 9,


  //   name: t('申购'),


  //   icon: new URL('@/assets/img/img.png', import.meta.url),


  //   icon2: new URL('@/assets/imgs/home/home_12b.png', import.meta.url),


  //   path: '/ICO/ico'


  // },


  {


    key: 9,


    name: t('C2C'),


    icon: new URL('@/assets/img/img_1.png', import.meta.url),


    icon2: new URL('@/assets/imgs/home/home_12b.png', import.meta.url),


    path: '/wantBuy'


  },


  {


    key: 9,


    name: t('onLineService'),


    icon: new URL('@/assets/img/img_3.png', import.meta.url),


    icon2: new URL('@/assets/imgs/home/home_12b.png', import.meta.url),


    path: '/customerService'


  }, {


    key: 9,


    name: t('闪兑'),


    icon: new URL('@/assets/img/img_2.png', import.meta.url),


    icon2: new URL('@/assets/imgs/home/home_12b.png', import.meta.url),


    path: '/cryptos/exchangePage'


  },


]




// 手风琴选中


const activeName = ref('0')




// tab切换


const tab = ref(1)


const current = ref(0)


const tabList = [


  { name: t('永续合约'), key: 1 },


  { name: t('现货'), key: 2 },


]




// 获取公告数据


const announceList = ref([])


_getNewsList1({


    language: useI18n().locale.value,


}).then(res => {


    announceList.value = res


})


const announceList = ref([


  { imgUrl: new URL('@/assets/imgs/home/lbt_1.png', import.meta.url), id: 1, title: '公告标题1', content: '公告内容1', time: '2022-01-01' },


  { imgUrl: new URL('@/assets/imgs/home/lbt_2.png', import.meta.url), id: 2, title: '公告标题2', content: '公告内容2', time: '2022-01-01' },


  { imgUrl: new URL('@/assets/imgs/home/lbt_3.png', import.meta.url), id: 3, title: '公告标题3', content: '公告内容3', time: '2022-01-01' },


  { imgUrl: new URL('@/assets/imgs/home/lbt_4.png', import.meta.url), id: 4, title: '公告标题4', content: '公告内容4', time: '2022-01-01' },


  { imgUrl: new URL('@/assets/imgs/home/lbt_5.png', import.meta.url), id: 5, title: '公告标题5', content: '公告内容5', time: '2022-01-01' },


])


// _getNewsList1().then(res => {


//   announceList.value = res


// })




// 跳转公告详情


const toAnnounceDetail = (announceId) => {


    if (announceId) {


        router.push({ path: '/cryptos/AnnounceDetail', query: { id: announceId } })


    }


  return


  if (announceId) {


    router.push({ path: '/cryptos/AnnounceDetail', query: { id: announceId } })


  }


}




// 获取客服链接


const customer_service_url = ref(storeS.state.user.customer_service_url)




// 跳转页面


const toPage = (path) => {


    if (!path) return


  if (!path) return


  if (path == '/customerService') {


    if (customer_service_url.value) {


      window.location.href = customer_service_url.value;


    } else {


      router.push(path)


    }


  } else {


    router.push(path)


  }


}




// 轮播图数据


const swipe1 = ref([


    { key: 1, img: new URL('@/assets/imgs/home/home_1.png', import.meta.url) },


    { key: 2, img: new URL('@/assets/imgs/home/home_2.png', import.meta.url) },


    { key: 3, img: new URL('@/assets/imgs/home/home_3.png', import.meta.url) },


  { key: 1, img: new URL('@/assets/imgs/home/home_1.png', import.meta.url) },


  { key: 2, img: new URL('@/assets/imgs/home/home_2.png', import.meta.url) },


  { key: 3, img: new URL('@/assets/imgs/home/home_3.png', import.meta.url) },


])


const swipe2 = ref([


    { key: 1, img: new URL('@/assets/imgs/home/home_1.png', import.meta.url) },


    { key: 2, img: new URL('@/assets/imgs/home/home_2.png', import.meta.url) },


    { key: 3, img: new URL('@/assets/imgs/home/home_3.png', import.meta.url) },


  { key: 1, img: new URL('@/assets/imgs/home/home_1.png', import.meta.url) },


  { key: 2, img: new URL('@/assets/imgs/home/home_2.png', import.meta.url) },


  { key: 3, img: new URL('@/assets/imgs/home/home_3.png', import.meta.url) },


])




//#region 行情数据----------------------------------------


@@ -149,190 +379,263 @@


const coinArr = computed(() => store.getters['home/coinArr']);




const fetchQList = async () => { // 获取行情


    const list = await _getHomeList(coinArr.value.join(',')).catch(() => {


    })


  const list = await _getHomeList(coinArr.value.join(',')).catch(() => {


  })




    if (!(list instanceof Array)) {


        return


    }


    qList.value = list;


  if (!(list instanceof Array)) {


    return


  }


  qList.value = list.slice(0, 4);




    if (timeout.value) {


        clearTimeout(timeout.value)


    }


    timeout.value = setTimeout(async () => {


        await fetchQList()


    }, TIME_OUT)


  if (timeout.value) {


    clearTimeout(timeout.value)


  }


  timeout.value = setTimeout(async () => {


    await fetchQList()


  }, TIME_OUT)


}


fetchQList()




onBeforeUnmount(() => {


    if (timeout.value) {


        clearTimeout(timeout.value)


    }


  timeOut1()


  if (timeout.value) {


    clearTimeout(timeout.value)


  }


})


//#endregion----------------------------------------------






</script>




<style lang="scss">


.home_page {


    background: $white;


    min-height: 100vh;


    width: 100%;


    padding: 1rem 1rem 10rem 1rem;


    // $log-c: #282828;


    $tab-c: #343434;


    $inp-c: #999;


    $crd-b: #f7f7f7;


  min-height: 100vh;


  width: 100%;


  padding: 1rem 1rem 10rem 1rem;


  font-size: 1.4rem;




    .index_notice {


        height: 100px;


        border-radius: 10px;


  .home_1 {


    padding-top: 2rem;




        .notice-swipe {


            height: 82px;


        }




        .notice_img {


            height: 80px;


            width: 100px;


            // background-color: $icon-bg;


        }




        .notice_content {


            &>div:first-child {


                color: $text_color1;


            }


        }


    div {


      text-align: center;


      font-size: 1.4rem;


    }




    .home_logo {


        width: 100%;


    img {


      width: 2.8rem;


      margin: 0 auto .4rem;


    }


  }




        img {


            width: 22.5rem;


        }


  .index_notice {


    height: 100px;


    border-radius: 10px;


    margin-bottom: 2rem;




    @include themify() {


      background: themed("main_background");


      border: themed("border_color") solid 1px;


    }




    .logo_text {


        color: $log-c;


        font-size: 2rem;


    .notice-swipe {


      height: 82px;


    }




    .logo_text_small {


        color: $inp-c;


        font-size: 1.5rem;


    .notice_img {


      height: 80px;


      width: 100px;


      // background-color: $icon-bg;


    }




    .login_buts {


        width: 100%;


    .notice_content {


      &>div:first-child {


        color: $text_color1;


      }


    }


  }




        &>div {


            width: 21rem;


            height: 5rem;


            line-height: 5rem;


            border-radius: 2.5rem;


            font-size: 1.8rem;


            color: $log-c;


        }


  .tabs {


    font-size: 1.8rem;




        .login_but_z {


            background: $crd-b;


        }


    &>div {


      margin-right: 2rem;


    }


  }




        .login_but_d {


            background: $bg_yellow;


        }


  .home_2 {


    font-size: 1.5rem;


    text-align: center;


    padding-bottom: 1.2rem;


    margin: 1rem 0 1rem;




    @include themify() {


      border-bottom: themed("divi_line") solid 1px;


    }


  }




  .home_3 {


    padding: 1rem 0;




    img {


      height: 2rem;


      margin-right: 1rem;


    }


  }




  .border_b {


    @include themify() {


      border-bottom: themed("divi_line") solid 1px;


    }




    .home_grid {


        width: 100%;




        .grid_item {


            width: 25%;


            color: $tab-c;


            font-size: 1.6rem;




            .grid_item_img {


                width: 100%;




                img {


                    width: 6.3rem;


                }


            }


        }


    .van-collapse-item__title--expanded:after {


      display: none;


    }






    .home_swipe_1,


    .home_swipe_2 {


        width: 24rem;


        border-radius: 1rem;


    .van-cell__title {


      font-weight: 600;


    }




    .home_swipe_1 {


        .van-swipe-item {


            height: 23rem;


            background-color: $crd-b;




            .swipe-item-img {


                width: 100%;


            }


        }




        .custom-indicator {


            position: absolute;


            left: 5px;


            bottom: 5px;


            padding: 2px 5px;


            font-size: 1.8rem;


            background: rgba(255, 255, 255, 0.5);


            color: $inp-c;




            span {


                color: $log-c;


            }


        }


    .van-collapse-item__content {


      padding-top: 0;


    }




    .home_swipe_2 {


        .van-swipe-item {


            height: 15rem;


            background-color: $crd-b;




            .swipe-item-img {


                width: 100%;


            }


        }




        .custom-indicator {


            position: absolute;


            right: 5px;


            top: 1rem;


            padding: 2px 5px;




            div {


                background: $inp-c;


                width: 0.6rem;


                height: 0.6rem;


                border-radius: 0.3rem;


                transition: 0.3s all;


            }




            .active {


                background: $bg_yellow;


                width: 2rem;


            }


        }


    p {


      font-size: 1.4rem;


    }




    .purchase {


        color: $log-c;


        background: $crd-b;


        border-radius: 1rem;


        padding: 1.6rem 1.6rem 2rem 1.6rem;


        font-size: 2rem;


    .border_icon {


      width: 1.5rem;


      margin-right: 1rem;


    }


  }




  // .home_logo {


  //     width: 100%;




  //     img {


  //         width: 22.5rem;


  //     }


  // }




  // .logo_text {


  //     color: $log-c;


  //     font-size: 2rem;


  // }




  // .logo_text_small {


  //     color: $inp-c;


  //     font-size: 1.5rem;


  // }




  // .login_buts {


  //     width: 100%;




  //     &>div {


  //         width: 21rem;


  //         height: 5rem;


  //         line-height: 5rem;


  //         border-radius: 2.5rem;


  //         font-size: 1.8rem;


  //         color: $log-c;


  //     }




  //     .login_but_z {


  //         background: $crd-b;


  //     }




  //     .login_but_d {


  //         background: $bg_yellow;


  //     }


  // }




  // .home_grid {


  //     width: 100%;




  //     .grid_item {


  //         width: 25%;


  //         color: $tab-c;


  //         font-size: 1.6rem;




  //         .grid_item_img {


  //             width: 100%;




  //             img {


  //                 width: 6.3rem;


  //             }


  //         }


  //     }


  // }






  // .home_swipe_1,


  // .home_swipe_2 {


  //     width: 24rem;


  //     border-radius: 1rem;


  // }




  // .home_swipe_1 {


  //     .van-swipe-item {


  //         height: 23rem;


  //         background-color: $crd-b;




  //         .swipe-item-img {


  //             width: 100%;


  //         }


  //     }




  //     .custom-indicator {


  //         position: absolute;


  //         left: 5px;


  //         bottom: 5px;


  //         padding: 2px 5px;


  //         font-size: 1.8rem;


  //         background: rgba(255, 255, 255, 0.5);


  //         color: $inp-c;




  //         span {


  //             color: $log-c;


  //         }


  //     }


  // }




  // .home_swipe_2 {


  //     .van-swipe-item {


  //         height: 15rem;


  //         background-color: $crd-b;




  //         .swipe-item-img {


  //             width: 100%;


  //         }


  //     }




  //     .custom-indicator {


  //         position: absolute;


  //         right: 5px;


  //         top: 1rem;


  //         padding: 2px 5px;




  //         div {


  //             background: $inp-c;


  //             width: 0.6rem;


  //             height: 0.6rem;


  //             border-radius: 0.3rem;


  //             transition: 0.3s all;


  //         }




  //         .active {


  //             background: $bg_yellow;


  //             width: 2rem;


  //         }


  //     }


  // }




  // .purchase {


  //     color: $log-c;


  //     background: $crd-b;


  //     border-radius: 1rem;


  //     padding: 1.6rem 1.6rem 2rem 1.6rem;


  //     font-size: 2rem;


  // }


}


</style>


</style>