<template class="capitalize">
  <div class="homePage">
    <!-- 二级导航按钮 -->
    <div class="secondLevelNav">
      <!-- <el-row class="navHeader">    
        <el-col class="priceButton" :span="6.5" v-show="buttonShow">
          <button
            :class="{ check: buttonStyeBtc, noCheck: !buttonStyeBtc }"
            @click="priceBtc"
          >
            Bitcoin (BTC)
          </button>
          <button
            :class="{ check: buttonStyeEth, noCheck: !buttonStyeEth }"
            @click="priceEth"
          >
            Ethereum (ETH)
          </button>
        </el-col>
      </el-row> -->
      <!-- 标题栏、时间选择、移动平均线 -->
      <el-row class="header">
        <!-- 导航title展示 -->
        <el-col class="navTitle">
          <img
            v-if="navLabel !== `menu.macroscopic`"
            class="img"
            :src="menuItem.src"
          />
          <span
            style="font-weight: 600; font-size: 15px; color: #383d71"
            v-html="`&nbsp;${$t(handelCurrency(navLabel)) || navLabel2}:&nbsp;`"
          ></span>
      
          <el-breadcrumb separator-class="el-icon-arrow-right">
       
            <el-breadcrumb-item>{{ $t(navName) }}</el-breadcrumb-item>
          </el-breadcrumb>
        </el-col>

        <!-- 移动平均线 -->
        <el-col class="SMA" :span="3" v-show="smaShow">
          <span class="SMATitle">SMA </span>
          <el-select
            size="small"
            v-model="sma"
            @change="handelSma"
            :placeholder="$t(`login.smaPlaceholder`)"
          >
            <el-option
              v-for="item in smaList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
            <div class="inputBox">
              <div class="container">
                <el-input
                  v-model="inputSma"
                  placeholder="100"
                  class="input"
                  @keydown.enter.native="handelInputSma"
                ></el-input>
                <span>Days</span>
              </div>
              <span class="submit" @click="handelInputSma">APPLY</span>
            </div>
          </el-select>
        </el-col>
        <!-- ------------时间选择器----------------------- -->
        <el-col class="time" :span="5">
          <div class="timeChooseBox">
            <el-date-picker
              v-show="timeShow"
              :disabled="timeDisable"
              size="small"
              :picker-options="pickerOptions0"
              v-model="chooseTime"
              @change="handelTime"
              :default-value="timeDefaultShow"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="-"
              :start-placeholder="$t(`home.startDate`)"
              :end-placeholder="$t(`home.endDate`)"
              unlink-panels
              editables
              class="timeBox"
            >
            </el-date-picker>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="page" style="width: 100%; min-height: 700px">
      <!-- 指标解释 -->
      <el-col>
        <div
          @click="handleJumpPage"
          class="i izhibiaoguanli indexIntroduce"
          :data-text="$t(`home.introduction`)"
          style="color: #6580a9; font-size: 50px"
        ></div>
      </el-col>
      <!-- 动态组件 -->
      <div style="width: 100%; min-height: 600px" class="capitalize">
        <component
          class="capitalize"
          @handelSwitch="handelSwitch"
          v-bind:is="currentTabComponent"
          v-if="chartsShow == `component`"
          ref="dynamic"
        ></component>
      </div>

      <!-- 页面底部描述 -->
      <!-- <div class="describe">
        <div class="tltle2">{{ $t(`home.assets`) }}</div>
        <p class="Assets">{{ currencyAssets || Assets }}</p>
        <div class="tltle2">{{ $t(`home.interval`) }}</div>
        <p>{{ $t(interval) || $t(`home.no`) }}</p>
        <div class="tltle2">{{ $t(`home.introduce`) }}</div>
        <div v-for="item in newIntroduce" :key="item">
          <p v-if="item">{{ item }}</p>
        </div>
        <div v-for="item2 in defaultIntroduce" :key="item2">
          <p v-if="item2">{{ item2 }}</p>
        </div>
      </div> -->
    </div>
    <!-- 遮罩 -->
    <div class="Mask" v-show="maskShow" v-loading="maskShow"></div>
    <!-- 留言板 -->
    <!-- <message-Board v-if="identity.roleKey != undefined"></message-Board> -->

    <!-- ---------判断条数的弹窗--------------- -->

    <!-- <el-dialog
      title="提示"
      :visible.sync="lengthVisible"
      width="30%"
     
    >
      <span>数据长度不一致,请核实数据！</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="lengthVisible = false">取 消</el-button>
        <el-button type="primary" @click="lengthVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog> -->


  </div>
</template>

<script>
import { mapState } from "vuex";
import * as echarts from "echarts";
import { Message } from "element-ui";
import {
  handelData,
  resetTheChart,
  handelTotalData,
  handelBtcPrice,
  handelLineType,
} from "../util/processingData";
import messageBoard from "../components/MessageBoard";
import i18n from '../lang/index'
export default {

  metaInfo: {
    meta: [
      {
        name: 'keywords',
        content: '区块链分析、加密货币数据、Coinbus、链上数据指标、市场洞察,Blockchain Analytics, Cryptocurrency Data, Coinbus, On-Chain Data Metrics, Market Insights'
      },
      {
        name: 'description',
        content: i18n.t(`seo.Web`)
      }
    ]
  },


  name: "Home",
  components: {
    messageBoard,
    mvrv: () => import("../views/MVRV/index.vue"),
    MVRVZ: () => import("../views/MVRVZ/index.vue"),

    bigDeals: () => import("../views/bigDeals"),
    bianController: () => import("../views/BiAnController.vue"),
    newAddress: () => import("../views/newAddress"),
    blockAmount: () => import("../views/blockamount.vue"),
    // dailyBuySell: () => import("../views/dailyBuySell.vue"),
    utxos: () => import("../views/utxos/index.vue"),
    utxos2nd: () => import("../views/utxos2nd/index.vue"),
    holder: () => import("../views/holder/index.vue"),
    holderBalance: () => import("../views/holderBalance/index.vue"),
    buyData: () => import("../views/getBuyData/index.vue"),
    diffData: () => import("../views/diffData/index.vue"),
    profitData: () => import("../views/profitData/index.vue"),
    topList: () => import("../views/topList/index.vue"),
    balanceData: () => import("../views/balanceData/index.vue"),
    BigDealsSummary: () => import("../views/BigDealsSummary/index.vue"),
    usdtVolume: () => import("../views/usdtVolume/index.vue"),
    priceValue: () => import("../views/priceValue.vue"),
    coinmarketall: () => import("../views/coinmarketall/index.vue"),
    DaysNeedle: () => import("../views/DaysNeedle.vue"),
    btctags: () => import("../views/btctags/index.vue"),
    ethTopAddrList: () => import("../views/ethTopAddrList/index.vue"),
    ercBigDeals: () => import("../views/ercBigDeals/index.vue"),
    ercVolume: () => import("../views/ercVolume/index.vue"),
    ma730: () => import("../views/ma730/index.vue"),
    volume: () => import("../views/volume/index.vue"),
    Fees: () => import("../views/Fees/index.vue"),
    arh999: () => import("../views/arh999/index.vue"),
    jzr60: () => import("../views/jzr60/index.vue"),
    ndaqOhlc: () => import("./NDAQ/index.vue"),
    capReal: () => import("../views/capReal/index.vue"),
    CDD: () => import("../views/CDD/index.vue"),
    fundingRate: () => import("../views/fundingRate/index.vue"),
    NdaqBtcDayKline: () => import("../views/NdaqBtcDayKline/index.vue"),
    openInterest: () => import("../views/openInterest/index.vue"),
    takerlongshortRatio: () => import("../views/takerlongshortRatio/index.vue"),
    profitrate: () => import("../views/profitrate/index.vue"),
    sopr: () => import("../views/sopr/index.vue"),
    asol: () => import("../views/asol/index.vue"),
    dormancy: () => import("../views/dormancy/index.vue"),
    soag: () => import("../views/soag/index.vue"),
    csupply: () => import("../views/csupply/index.vue"),
    sumcsupply: () => import("../views/sumcsupply/index.vue"),
    sumcdd: () => import("../views/sumcdd/index.vue"),
    liveliness: () => import("../views/liveliness/index.vue"),
    rprofit: () => import("../views/rprofit/index.vue"),
    rloss: () => import("../views/rloss/index.vue"),
    rplRate: () => import("../views/rplRate/index.vue"),
    marketcap: () => import("../views/marketcap/index.vue"),
    rcap: () => import("../views/rcap/index.vue"),
    lthmvrv: () => import("../views/lthmvrv/index.vue"),
    sthmvrv: () => import("../views/sthmvrv/index.vue"),
    nupl: () => import("../views/nupl/index.vue"),
    uprofit: () => import("../views/uprofit/index.vue"),
    uloss: () => import("../views/uloss/index.vue"),
    lthnupl: () => import("../views/lthnupl/index.vue"),
    sthnupl: () => import("../views/sthnupl/index.vue"),
    minerAddress: () => import("../views/minerAddress/index.vue"),
    minerBalance: () => import("../views/minerBalance/index.vue"),
    mintusd: () => import("../views/mintusd/index.vue"),
    usdtbigtx: () => import("../views/usdtbigtx/index.vue"),
    reward: () => import("../views/reward/index.vue"),
    cnew: () => import("../views/cnew/index.vue"),
    newContract: () => import("../views/newContract/index.vue"),
    ethTopAddrMonitorList: () =>
      import("../views/ethTopAddrMonitorList/index.vue"),
    ethAddress: () => import("./address/index.vue"),
    tronUSDTBigTx: () => import("./tronUSDTBigTx/index.vue"),
    tronUSDCBigTx: () => import("./tronUSDCBigTx/index.vue"),
    tronUsdtVolume: () => import("./tronUsdtVolume/index.vue"),
    tronUsdcVolume: () => import("./tronUsdcVolume/index.vue"),
    USDT: () => import("./USDT/index.vue"),
    USDC: () => import("./USDC/index.vue"),
    BUSD: () => import("./BUSD/index.vue"),
    USDCMonitoring: () => import("./USDCMonitoring/index.vue"),
    USDTMonitoring: () => import("./USDTMonitoring/index.vue"),
    BUSDMonitoring: () => import("./BUSDMonitoring/index.vue"),
    circulationUSDC: () => import("./circulationUSDC/index.vue"),
    circulationUSDT: () => import("./circulationUSDT/index.vue"),
    circulationBUSD: () => import("./circulationBUSD/index.vue"),
    circulationTotalCSupply: () =>
      import("./circulationTotalCSupply/index.vue"),
    profitAddress: () => import("./profitAddress/index.vue"),
    lossAddress: () => import("./lossAddress/index.vue"),
    profitRatio: () => import("./profitRatio/index.vue"),
    lthSupply: () => import("./lthSupply/index.vue"),
    sthSupply: () => import("./sthSupply/index.vue"),
    realizedPrice: () => import("./realizedPrice/index.vue"),
    relativeLthSth: () => import("./relativeLthSth/index.vue"),
    lthProfitSupply: () => import("./lthProfitSupply/index.vue"),
    lthLossSupply: () => import("./lthLossSupply/index.vue"),
    sthProfitSupply: () => import("./sthProfitSupply/index.vue"),
    sthLossSupply: () => import("./sthLossSupply/index.vue"),
    sthProfitRatio: () => import("./sthProfitRatio/index.vue"),
    SLRVRatio: () => import("./SLRVRatio/index.vue"),
    lthProfitRatio: () => import("./lthProfitRatio/index.vue"),
    lthVolume: () => import("./lthVolume/index.vue"),
    frm: () => import("./frm/index.vue"),
    cvdd: () => import("./cvdd/index.vue"),
    balancedPrice: () => import("./balancedPrice/index.vue"),
    nvtRatio: () => import("./nvtRatio/index.vue"),
    velocity: () => import("./velocity/index.vue"),
    piCycleTop: () => import("./piCycleTop/index.vue"),
    ssr: () => import("./ssr/index.vue"),
    ssro: () => import("./ssro/index.vue"),
    stfRatio: () => import("./stfRatio/index.vue"),
    stfDeflection: () => import("./stfDeflection/index.vue"),
    goldenRatioMult: () => import("./goldenRatioMult/index.vue"),
    piCycleTopEth: () => import("./piCycleTopEth/index.vue"),
    goldenRatioMultEth: () => import("./goldenRatioMultEth/index.vue"),
    CDDETH: () => import("./CDDETH/index.vue"),
    dormancyEth: () => import("./dormancyEth/index.vue"),
    asolEth: () => import("./asolEth/index.vue"),
    cddwaveEth: () => import("./cddwaveEth/index.vue"),
    distributionEth: () => import("./distributionEth/index.vue"),
    supplyDistributionEth: () => import("./supplyDistributionEth/index.vue"),
    profitPercentEth: () => import("./profitPercentEth/index.vue"),
    profitEth: () => import("./profitEth/index.vue"),
    lossEth: () => import("./lossEth/index.vue"),
    inflactionRateEth: () => import("./inflactionRateEth/index.vue"),
    issuanceEth: () => import("./issuanceEth/index.vue"),
    soprEth: () => import("./soprEth/index.vue"),
    velocityEth: () => import("./velocityEth/index.vue"),
    nvtRatioEth: () => import("./nvtRatioEth/index.vue"),
    livelinessEth: () => import("./livelinessEth/index.vue"),
    frmEth: () => import("./frmEth/index.vue"),
    supplyProfitPercentEth: () => import("./ProfitPercentEthsupply/index.vue"),
    supplyProfitEth: () => import("./supplyProfitEth/index.vue"),
    supplyLossEth: () => import("./supplyLossEth/index.vue"),
    nuplEth: () => import("./nuplEth/index.vue"),
    relativeUProfitEth: () => import("./relativeUProfitEth/index.vue"),
    relativeULossEth: () => import("./relativeULossEth/index.vue"),
    lthNUPLEth: () => import("./lthNUPLEth/index.vue"),
    sthNUPLEth: () => import("./sthNUPLEth/index.vue"),
    marketcapEth: () => import("./marketcapEth/index.vue"),
    rcapEth: () => import("./rcapEth/index.vue"),
    rpriceEth: () => import("./rpriceEth/index.vue"),
    mvrvRatioEth: () => import("./mvrvRatioEth/index.vue"),
    burnedSupplyEth: () => import("./burnedSupplyEth/index.vue"),
    mintedSupplyEth: () => import("./mintedSupplyEth/index.vue"),
    mintedUSDT: () => import("./mintedUSDT/index.vue"),
    earcap1: () => import("./earcap1/index.vue"),
    mintedUSDC: () => import("./mintedUSDC/index.vue"),
    mintedBUSD: () => import("./mintedBUSD/index.vue"),
    tzbp: () => import("./tzbp/index.vue"),
    bobp: () => import("./bobp/index.vue"),
    tzbpEth: () => import("./tzbpEth/index.vue"),
    bobpEth: () => import("./bobpEth/index.vue"),
    bospEth: () => import("./bospEth/index.vue"),
    bosp: () => import("./bosp/index.vue"),
    volumeProfile: () => import("./volumeProfile/index.vue"),
    exchange: () => import("./exchange/index.vue"),
    exchangeETH: () => import("./exchangeETH/index.vue"),
    quickNews: () => import("./quickNews1/index.vue"),
    economics: () => import("./economics/index.vue"),
    mempool: () => import("./mempool/index.vue"),
    nvtSign: () => import("./nvtSign/index.vue"),
    fundingRateETH: () => import("./fundingRateETH/index.vue"),
    openInterestETH: () => import("./openInterestETH/index.vue"),
    takerlongshortRatioETH: () => import("./takerlongshortRatioETH/index.vue"),
    volumeProfileETH: () => import("./volumeProfileETH/index.vue"),
    ma730ETH: () => import("./ma730ETH/index.vue"),
    USTreasuriesYields: () => import("./USTreasuriesYields/index.vue"),
    MoneyStockMeasures: () => import("./MoneyStockMeasures/index.vue"),
    loanPsi: () => import("./loanPsi/index.vue"),
    loanGdp: () => import("./loanGdp/index.vue"),
    wei: () => import("./wei/index.vue"),
    distributionLthSth: () => import("./distributionLthSth/index.vue"),
    exchangeRate: () => import("./exchangeRate/index.vue"),
    GDP:() => import("./GDP1/index.vue"),
    UpdateContent:() => import("./UpdateContent/index.vue"),
    TransactionVolume:() => import("./TransactionVolume/index.vue"),
    TransactionFee:() => import("./TransactionFee/index.vue"),
    adjusted:() => import("./adjusted/index.vue"),
    newAddress2:() => import("./newAddress2/index.vue"),
    newAddressVolume:() => import("./newAddressVolume/index.vue"),
    totalAddress:() => import("./totalAddress/index.vue"),
    minerAddress2:() => import("./minerAddress2/index.vue"),
    minerBalance2:() => import("./minerBalance2/index.vue"),
    TransactionCount:() => import("./TransactionCount/index.vue"),
    memoryPoolFees:() => import("./memoryPoolFees/index.vue"),
    saCDD:() => import("./saCDD/index.vue"),
    sadormancy:() => import("./sadormancy/index.vue"),    
    addressBalance:() => import("./addressBalance/index.vue"),
    addressBalance1:() => import("./addressBalance1/index.vue"),
    addressBalance2:() => import("./addressBalance2/index.vue"),
    addressBalance3:() => import("./addressBalance3/index.vue"),
    addressBalance4:() => import("./addressBalance4/index.vue"),
    addressBalance5:() => import("./addressBalance5/index.vue"),
    addressBalance6:() => import("./addressBalance6/index.vue"),
    addressBalance7:() => import("./addressBalance7/index.vue"),
    currencyGroup1:() => import("./currencyGroup1/index.vue"),
    currencyGroup2:() => import("./currencyGroup2/index.vue"),
    currencyGroup3:() => import("./currencyGroup3/index.vue"),
    currencyGroup4:() => import("./currencyGroup4/index.vue"),
    currencyGroup5:() => import("./currencyGroup5/index.vue"),
    currencyGroup6:() => import("./currencyGroup6/index.vue"),
    currencyGroup7:() => import("./currencyGroup7/index.vue"),
    currencyGroup8:() => import("./currencyGroup8/index.vue"),
    sellRatio:() => import("./sellRatio/index.vue"),
    VDD:() => import("./VDD/index.vue"),
  },

  data() {
    return {
      navLabel2: "Bitcoin (BTC)",
      lengthVisible:false,
      lengthFlag:false,
      maskShow: false,
      smaShow: true,
      chooseTime: [],
      radius: "BTC",
      imgSrc: require("../assets/nav_images/btc .png"),
      timeShow: true,
      navLabel: "Bitcoin (BTC)",
      dataList: [], //请求回来的数据列表
      itemValueList: [], //提取出来value值
      chartsShow: "",
      loading: "false",
      Nloading: "false",
      pagingParams: {
        start: "",
        end: "",
      },
      priceData: [],
      priceValueList: [],
      priceEthData: [],
      priceEthValueList: [],
      flag: true,
      ethFlag: false,
      priceParams: {
        req: "price",
        radius: "btc",
        start: "",
        end: "",
      },
      color: "#f7931a",
      timeSwitch: false,
      pickerOptions0: {
        //限制只能选当前日期之前的日期
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },
      optionName: "menu.technology1",
      coin: "",
      request: "false",
      params: {
        req: "market",
        radius: "MVRV",
      },
      volumeParams: {
        req: "derivatives",
        radius: "dailyVolume,BTC",
      },
      volume: true,
      Assets: "BTC,ETH",
      token: "",
      introduce: "introduce.BTCVolume",
      loginTime: "",
      buttonShow: true,
      loadingShow: "",
      restaurants: [],
      state: "",
      timeout: null,
      searchSow: false,
      noticeList: [],
      animate: false,
      setInTime: "", // 定时器
      notice: "",
      amountList: [
        {
          value: 500,
          label: "amount > 500",
        },
        {
          value: 1500,
          label: "amount > 1500",
        },
        {
          value: 5000,
          label: "amount > 5000",
        },
        {
          value: 10000,
          label: "amount > 10000",
        },
        {
          value: 15000,
          label: "amount > 15000",
        },
      ],
      amountValue: "",
      amountTime: "",
      dialogVisible: false,
      amountTxid: "",
      dialogData: {},
      dialogDate: "",
      currentTabComponent: "",
      currencyAssets: "BTC、ETH", //点击导航自带币种范围
      timeDisable: false, //日期选择框是否禁用
      homeRequest: false, //home请求发起状态
      interval: "menu.interval3", //页面底部间隔
      timeDefaultShow: "", //控制时间面板选择范围
      screenHight: "", //页面高度
      pageRendering: "", //页面渲染状态
      reanderingFlag: true,
      switch3: "线性", //切换图表线性和对数显示
      childOption: null,
      newIntroduce: [],
      oldYAxis: null,
      logButton: true, //线性对数按钮的显示
      sma: "",
      smaList: [
        {
          value: "0",
          label: "0 Days",
        },
        {
          value: "7",
          label: "7 Days",
        },
        {
          value: "14",
          label: "14 Days",
        },
        {
          value: "30",
          label: "30 Days",
        },
        {
          value: "50",
          label: "50 Days",
        },
        {
          value: "90",
          label: "90 Days",
        },
      ],
      inputSma: "",
      smaDataList: [],
      buttonStyeBtc: true,
      buttonStyeEth: false,
      identity: {},
      navName: "",
      defaultIntroduce: "",
      langLabel: [
        {
          value: "BTC",
          label: "menu.currencyBTC",
        },
        {
          value: "ETH",
          label: "menu.currencyETH",
        },
        {
          value: "稳定币",
          label: "menu.Stablecoin",
        },
        {
          //宏观经济指标
          value: "menu.macroscopic",
          label: "menu.macroscopic",
        },
      ],
      menuItem:{
        src: require("../assets/nav_images/btc .png")
      },
    };
  },
  //映射仓库数据
  computed: {
    ...mapState({
      current: (state) => state.tab.currentMenu,
    }),
  },

  mounted() {
    //切换中英文
    //  当窗口或者大小发生改变时执行resize，重新绘制图表
    window.addEventListener("resize", () => {
      if (this.myChart) this.myChart.resize();
    });
    //控制时间选择器 显示本月和上月
    this.timeDefaultShow = new Date();
    this.timeDefaultShow.setMonth(new Date().getMonth() - 1);

    //取值token
    this.token = localStorage.token;
   
    //默认一开始时间清空
    this.$addStorageEvent(1, "chooseTime", JSON.stringify(this.chooseTime));
    this.$addStorageEvent(1, "ETHbutton", this.ethFlag);
    this.$addStorageEvent(1, "BTCbutton", true);
    this.$addStorageEvent(1, "timeShow", true);
    this.$addStorageEvent(1, "screenHight", this.screenHight);
    this.$addStorageEvent(1, "timeDisable", false);
    this.$addStorageEvent(1, "assets", "BTC、ETH");
    this.$addStorageEvent(1, "sma", this.sma);
   
    //判断不同币种 价格按钮展示BTC /ETH
    // if (this.radius == "BTC") {
    //   this.$addStorageEvent(1, "ethFlag", JSON.stringify(false));
    //   this.$addStorageEvent(1, "btcFlag", JSON.stringify(true));
    // } else if (this.radius == "ETH") {
    //   this.$addStorageEvent(1, "ethFlag", JSON.stringify(true));
    //   this.$addStorageEvent(1, "btcFlag", JSON.stringify(false));
    // }

    //存显示图形的旗帜
    this.$addStorageEvent(1, "show", this.chartsShow);
    this.currentTabComponent = localStorage.getItem("currentTabComponent");
    // this.currencyAssets = localStorage.getItem("assets");
    this.identity = JSON.parse(localStorage.getItem("identity")); //用户身份等级
    this.lengthFlag = localStorage.getItem("lengthFlag")
    
    if (localStorage.getItem("menuItem")) {
        this.menuItem= JSON.parse(localStorage.getItem("menuItem"));
      }
    this.navName = JSON.parse(localStorage.getItem("navName"));
    //监听localstorage改变赋值
    window.addEventListener("setItem", () => {
      // let obj = localStorage.getItem("src");
      if (localStorage.getItem("menuItem")) {
        this.menuItem= JSON.parse(localStorage.getItem("menuItem"));
      }
    
      let imgsrc =
        JSON.parse(localStorage.getItem("radiusSrc")) ||
        JSON.parse(localStorage.getItem("imgsrc"));

      // if (
      //   imgsrc !== `https://studio.glassnode.com/images/crypto-icons/稳定币.png`
      // ) {
      //   this.imgSrc = imgsrc;
      // } else {
      //   this.imgSrc =
      //     "https://studio.glassnode.com/images/crypto-icons/usdc.png";
      // }
      this.navLabel = localStorage.getItem("radius");
      // this.priceParams.radius = JSON.parse(obj).label;
      this.chartsShow = localStorage.getItem("show");
      this.flag = JSON.parse(localStorage.getItem("btcFlag"));
      this.ethFlag = JSON.parse(localStorage.getItem("ethFlag"));
      this.maskShow = JSON.parse(localStorage.getItem("maskShow"));
      this.sma = localStorage.getItem("sma");
      this.interval = localStorage.getItem("interval");
      // this.color = JSON.parse(obj).color;
      this.radius = localStorage.getItem("radius");
      let menuObj = localStorage.getItem("params");
      this.optionName = JSON.parse(menuObj).label;
      this.params.req = JSON.parse(menuObj).req;
      this.Assets = localStorage.getItem("Assets");
      this.token = localStorage.token;
      this.introduce = localStorage.getItem("introduce");
      this.currencyAssets = localStorage.getItem("assets");
      this.loadingShow = localStorage.getItem("loading");
      let arr = localStorage.getItem("tableData");
      this.noticeList = JSON.parse(arr);
      this.currentTabComponent = localStorage.getItem("currentTabComponent");
      let timeDisable = localStorage.getItem("timeDisable");
      this.timeDisable = JSON.parse(timeDisable);
      // let buttonShow = localStorage.getItem("buttonShow");
      // this.buttonShow = JSON.parse(buttonShow);
      let chooseTime = localStorage.getItem("chooseTime");
      this.chooseTime = JSON.parse(chooseTime);
      let timeShow = localStorage.getItem("timeShow");
      this.timeShow = JSON.parse(timeShow);
      this.buttonStyeEth = JSON.parse(localStorage.getItem("ethFlag"));
      this.buttonStyeBtc = JSON.parse(localStorage.getItem("btcFlag"));
      this.identity = JSON.parse(localStorage.getItem("identity"));
      this.navName = JSON.parse(localStorage.getItem("navName"));
      this.lengthFlag = localStorage.getItem("lengthFlag")
    });

    //处理接口介绍换行
    this.handelIntroduce();
    //监听页面刷新触发事件
    window.addEventListener("beforeunload", (e) => this.beforeunloadHandler(e));
    //默认接口换行
    this.handelDefaultIntroduce();
  },

  watch: {
    chartsShow(val) {
      if (val == "true") {
        this.homeRequest = true;
      } else if (val == "component") {
        this.homeRequest = false;
      }
    },
    //监听语言变化的时候接口介绍重新处理
    "$i18n.locale"(newValue, oldValue) {
      if (this.introduce) {
        this.handelIntroduce();
      } else {
        //接口介绍没有点击赋值就默认拿默认导航的第一个值
        this.handelDefaultIntroduce();
      }
      // this.handelIntroduce();
      // this.handelDefaultIntroduce()
    },
    //监听接口介绍变化的时候处理换行
    introduce(val) {
      //  console.log(this.ethFlag,"主页的状态");
      this.handelIntroduce();
      if (val) {
        //介绍有值 默认值就清空
        this.defaultIntroduce = "";
      }
    },
    radius(val){
      if (!val) {
        this.$addStorageEvent(1, "radius", `BTC`);
      }
    },



    //根据弹窗显示 关闭loading
    loadingShow(val) {
      if (val) {
        this.loading = false;
      }
    },
    //监听不同组件渲染不同操作
    currentTabComponent: {
      handler(val) {
        if (!val) {
          this.homeRequest = true;
          this.chartsShow = "true";
        } else {
          this.$addStorageEvent(1, "show", "component");
          //this.buttonShow = false; //组件渲染都不显示BTC 价格按钮
        }
        switch (val) {
          case "":
          case "":

          case "balanceData":
          case "":
          case "holder":
          case "holderBalance":
          case "getBuyData":
          case "buyData":
          case "topList":
          case "coinmarketall":
          case "ETH":
          case "diffData":
          case "profitData":
          case "BigDealsSummary":
          case "usdtVolume":
          case "tronUSDCBigTx":
          case "tronUsdcVolume":
          case "":
          case "":
          case "usdtbigtx":
          case "usdtVolume":
          case "tronUSDTBigTx":
          case "tronUsdtVolume":
          case "":
          case "":
          case "":
          case "":
          case "newContract":
          case "ethTopAddrList":
          case "ethTopAddrMonitorList":
          case "":
          case "":
          case "volumeProfile":
          case "economics":
          case "quickNews":
          case "cddwaveEth":
          case "soag":
          case "bigDeals":
          case "utxos":
          case "utxos2nd":
          case "holder":
          case "holderBalance":
          case "buyData":
          case "diffData":
          case "profitData":
          case "balanceData":
          case "arh999":
          case "ma730":
          case "jzr60":
          case "piCycleTop":
          case "goldenRatioMult":
          case "piCycleTopEth":
          case "goldenRatioMultEth":
          case "distributionEth":
          case "supplyDistributionEth":
          case "ercBigDeals":
          case "USTreasuriesYields":
          case "MoneyStockMeasures":
          case "loanPsi":
          case "loanGdp":
          case "wei":
          case "exchangeRate":
          case "GDP":
          case "":
          case "":
          case "":
          case "":
          case "":
            this.buttonShow = false;
            this.smaShow = false;
            break;
          case "USDT":
          case "USDC":
          case "BUSD":
          case "BUSDMonitoring":
          case "USDCMonitoring":
          case "USDTMonitoring":
          case "ndaqOhlc":
          case "NdaqBtcDayKline":
          case "soag":
          case "fundingRate":
          case "bobp":
          case "bobpEth":
          case "bospEth":
          case "bosp":
          case "openInterest":
          case "takerlongshortRatio":
          case "cddwaveEth":
            this.buttonShow = false;
            this.smaShow = true;
            break;

          default:
            this.buttonShow = true;
            this.smaShow = true;
            break;
        }
      },
      deep: true,
      immediate: true,
    },
    //数据条数不一致
    // lengthFlag(val){
    //     if (val == "true" && this.identity.roleKey == `admin`) {
    //       this.lengthVisible = true
    //       this.$notify({
    //       title: '警告',
    //       message: `${this.$t(this.navName)}页面数据长度不一致或无数据返回，请核实！`,
    //       type: 'warning',
    //       offset: 400,
    //       duration: 0
    //     });
    //     }else{      
    //       this.lengthVisible = false
    //     }
        

    // }
  },

  methods: {
    //初始化图表
    inCharts(option) {
      this.myChart = echarts.init(document.getElementById("main"));

      this.myChart.setOption(option);
    },
    //币种中英文翻译
    handelCurrency(label) {
      if (label == "Bitcoin (BTC)") return; //默认不翻译
      if (label) {
        return this.langLabel.find((item) => item.value == label).label;
      }
    },

    // 请求数据柱状图
    async fetchVolume(req, radius, coin, start, end) {
      this.loading = true;
      this.buttonShow = false;
      if (req && radius && !start) {
        if (radius == "dailyVolume") {
          let radiu = "changesDaily";
          this.columnar.series[0].data.length = 0;
          this.columnar.series[1].data.length = 0;
          const left = await this.$API.getActiveaddress(
            req,
            `${radius},${coin}`
          );
          const right = await this.$API.getActiveaddress(
            req,
            `${radiu},${coin}`
          );
          let leftData = left.data.data.data[0];
          let arr = Object.keys(leftData).map(function (i) {
            return leftData[i];
          });
          let rightData = right.data.data.data[0];
          let arrRight = Object.keys(rightData).map(function (i) {
            return rightData[i];
          });
          arr.forEach((item, index) => {
            if (index > 1) {
              let dataItem = +item;

              this.columnar.series[0].data.push(+dataItem.toFixed(1));
            }
          });
          arrRight.forEach((item, index) => {
            if (index > 1) {
              let dataItem = +item;

              this.columnar.series[1].data.push(+dataItem.toFixed(1));
            }
          });
          this.columnar.series[0].name = "Futures Volume (Latest 24h) [USD]";
          this.columnar.series[1].name = "Change 24h";
        } else if (radius == "openInterest") {
          let radiu = "changes";
          const left = await this.$API.getActiveaddress(
            req,
            `${radius},${coin}`
          );
          const right = await this.$API.getActiveaddress(
            req,
            `${radiu},${coin}`
          );
          let leftData = left.data.data.data[0];
          let arr = Object.keys(leftData).map(function (i) {
            return leftData[i];
          });

          let rightData = right.data.data.data[0];
          let arrRight = Object.keys(rightData).map(function (i) {
            return rightData[i];
          });

          this.columnar.series[0].data.length = 0;
          this.columnar.series[1].data.length = 0;
          arr.forEach((item, index) => {
            if (index > 1) {
              let dataItem = +item;

              this.columnar.series[0].data.push(+dataItem.toFixed(1));
            }
          });
          arrRight.forEach((item, index) => {
            if (index > 1) {
              let dataItem = +item;

              this.columnar.series[1].data.push(+dataItem.toFixed(1));
            }
          });
          this.columnar.series[0].name = "Futures Open Interest (Current)";
          this.columnar.series[1].name = "changes";
        }
      } else if (start && end) {
        // const mData = await this.$API.getActiveaddress(req, radius, start, end);
      }
      // resetTheChart(this);
      // var myChart = echarts.init(document.getElementById(`chartBox`));
      // this.columnar.series[0].data.length = 0;
      // this.columnar.series[1].data.length = 0;
      // myChart.setOption(this.columnar);
      // this.myChart.dispose();
      resetTheChart(this);
      this.inCharts(this.columnar);

      this.loading = false;
    },
    //请求BTC价格
    async fetchPrice(req, radius, start, end) {
      // this.loading = true;
      if (req && radius && !start) {
        const price = await this.$API.getActiveaddress(req, radius);
        this.priceData = price.data.data;
      } else {
        const price = await this.$API.getActiveaddress(req, radius, start, end);
        this.priceData = price.data.data;
      }
      //判断初始化是否请求成功
      if (!this.priceData) {
        this.request = true;
      } else {
        this.request = false;
      }
      this.priceValueList = handelData(this.priceData);

      this.option.series[1].data = handelBtcPrice(
        this.priceData,
        this.priceValueList
      );

      // resetTheChart(this);
      this.inCharts(this.option);
      setTimeout(() => {
        // this.loading = false;
      });

      start = "";
      end = "";
    },
    //ETH价格
    async fetchPriceEth(start, end) {
      if (start && end) {
        const price = await this.$API.getActiveaddress(
          "price",
          "eth",
          start,
          end
        );
        this.priceEthData = price.data.data;
      } else {
        const price = await this.$API.getActiveaddress("price", "eth");
        this.priceEthData = price.data.data;
      }

      this.priceEthValueList = handelData(this.priceEthData);
      this.option.series[2].data = handelTotalData(
        this.priceEthData,
        this.priceEthValueList
      );
      resetTheChart(this);
      this.inCharts(this.option);
      start = "";
      end = "";
    },
    //请求ETH移动平均线
    async fetchEthSma(day) {
      this.maskShow = true;
      const { data } = await this.$API.getEthSma(day);
      this.ethSmaDataList = data.data;

      if (this.chartsShow == "component") {
        //父传币种给子组件时间参数
        try {
          this.$refs.dynamic.handelSonSma(
            this.smaDataList,
            this.ethSmaDataList
          );
        } catch {
          this.maskShow = false;
        }
      }
      this.maskShow = false;
    },
    //请求BTC移动平均线
    async fetchSma(day) {
      this.maskShow = true;
      const { data } = await this.$API.getSma(day);
      this.smaDataList = data.data;

      if (this.chartsShow == "component") {
        //父传币种给子组件时间参数
        try {
          this.$refs.dynamic.handelSonSma(
            this.smaDataList,
            this.ethSmaDataList
          );
        } catch {
          this.maskShow = false;
        }
      }
      this.maskShow = false;
    },
    //处理时间选择器
    handelTime() {
      this.timeSwitch = true;

      if (this.chooseTime) {
        this.pagingParams.start = this.chooseTime[0];
        this.pagingParams.end = this.chooseTime[1];
      } else {
        this.pagingParams.start = "";
        this.pagingParams.end = "";
      }

      //时间存入缓存
      this.$addStorageEvent(1, "chooseTime", JSON.stringify(this.chooseTime));
      if (this.chartsShow == "component") {
        //父传时间给子组件时间参数
        this.$refs.dynamic.handelSonTime(
          this.pagingParams.start,
          this.pagingParams.end
        );
      } else {
        //在非组件的home页面
        if (this.homeRequest) {
          //时间选择数据处理请求
          this.fetchData(
            this.params.req,
            this.params.radius,
            this.pagingParams.start,
            this.pagingParams.end
          );

          //ETH价格时间选择
          if (this.ethFlag) {
            this.fetchPriceEth(this.pagingParams.start, this.pagingParams.end);
          }
          // //BTC价格时间选择
          if (this.flag) {
            this.fetchPrice(
              this.priceParams.req,
              this.priceParams.radius,
              this.pagingParams.start,
              this.pagingParams.end
            );
          }
        }
      }
      this.pagingParams.start = "";
      this.pagingParams.end = "";

      // this.chooseTime = "";
    },
    //点击BTC按钮
    priceBtc() {
      this.flag = !this.flag;
      // if (this.radius =="ETH") {
      //   this.buttonStyeBtc = this.flag
      // }else{
      //   this.buttonStyeBtc = this.flag
      // }
      this.$addStorageEvent(1, "btcFlag", JSON.stringify(this.flag));
      this.buttonStyeBtc = this.flag;

      if (this.chartsShow == "component") {
        //父传币种给子组件时间参数
        this.$refs.dynamic.handelSonBtcPrice("BTC", this.flag);
      }
    },
    //点击ETH按钮
    priceEth() {
      this.ethFlag = !this.ethFlag;

      this.buttonStyeEth = this.ethFlag;

      this.$addStorageEvent(1, "ethFlag", JSON.stringify(this.ethFlag));
      if (this.chartsShow == "component") {
        //父传币种给子组件时间参数
        this.$refs.dynamic.handelSonEthPrice("ETH", this.ethFlag);
      }
    },
    //选择sma天数
    handelSma(val) {
      if (!val) return;
      //父传币种给子组件时间参数
      try {
        this.$refs.dynamic.handelSonSma(val);
      } catch {
        this.maskShow = false;
      }

      this.$addStorageEvent(1, "timeDisable", false);
      //BTC 价格渲染点击sma就请求
      // if (this.flag) {
      //   this.fetchSma(val);

      // }
    },
    //输入sma天数
    handelInputSma() {
      //父传币种给子组件时间参数
      let numReg = /^[0-9]+$/; //校验是否纯数字
      let numRe = new RegExp(numReg);
      if (!numRe.test(this.inputSma)) {
        Message({
          message: this.$t(`home.smaWarning`),
          type: "warning",
        });
        this.inputSma = "";
        return;
      }

      if (this.inputSma > 100 || this.inputSma < 0 || !this.inputSma) {
        Message({
          message: this.$t(`home.smaWarning`),
          type: "warning",
        });
        this.inputSma = "";
        return;
      }

      //BTC 价格渲染点击sma就请求
      if (this.flag) {
        // this.fetchSma(this.inputSma);
        if (this.chartsShow == "component") {
          //父传币种给子组件时间参数
          try {
            this.$refs.dynamic.handelSonSma(this.inputSma);
          } catch {
            this.maskShow = false;
          }
        }
        if (this.inputSma) {
          this.sma = `${this.inputSma} Days`;
        }
      }
      this.$addStorageEvent(1, "timeDisable", false);
      this.inputSma = "";
    },
    handelSwitch(data) {
      //判断子级option是不是数组 并改变默认值（线性/对数）
      if (Array.isArray(data.yAxis)) {
        if (data.yAxis.some((item) => item.type == "value")) {
          this.switch3 = "home.switch1";
        } else {
          this.switch3 = "home.switch2";
        }
      } else {
        if (data.yAxis.type == "value") {
          this.switch3 = "home.switch1";
        } else {
          this.switch3 = "home.switch2";
        }
      }
    },
    //点击切换
    handelLineSwitch() {
      this.option = handelLineType(this.option, this.oldYAxis);

      //判断子级option是不是数组 并改变默认值（线性/对数）
      this.handelSwitch(this.option);

      this.myChart.setOption(this.option);
    },
    // 指标文档跳转
    handleJumpPage() {
      this.$router.push(`/IndexIntroduce`);
    },

    //处理接口介绍换行
    handelIntroduce() {
      if (this.$t(this.introduce).indexOf("///") !== -1) {
        this.newIntroduce = this.$t(this.introduce).split("///");
      } else {
        this.newIntroduce = [this.$t(this.introduce)];
      }
    },
    //处理默认接口换行
    handelDefaultIntroduce() {
      let menu = JSON.parse(localStorage.getItem(`oldmenu`));
      // this.defaultIntroduce = this.$t(`introduce.BTCVolume`).split("//");
      if (menu[0].children[0].navigation) {
        this.defaultIntroduce = this.$t(menu[0].children[0].introduce).split(
          "///"
        );
      } else {
        this.defaultIntroduce = this.$t(
          menu[0].children[0].children[0].introduce
        ).split("///");
      }
    },
    //页面刷新事件
    beforeunloadHandler(e) {
      //存入每个页面在导航显示的名称
      // this.$addStorageEvent(1, "navName", JSON.stringify(""));
      // this.$addStorageEvent(1, "introduce", "");
    },
  },
  // 页面组件销毁的时候，移除绑定的监听resize事件
  beforeDestroy() {
    /* 页面组件销毁的时候，移除绑定的监听resize事件，多渲染几次 容易导致内存泄漏和额外CPU或GPU占用*/
    window.removeEventListener("resize", () => {
      this.myChart.resize();
    });
  },
  // 页面销毁时清除定时器
  destroyed() {
    clearInterval(this.setInTime);
    // 刷新监听销毁
    window.removeEventListener("beforeunload", (e) =>
      this.beforeunloadHandler(e)
    );
  },
};
</script>
<style  lang="scss" scoped >
.homePage {
  // background: goldenrod;
  padding: 0px;
  margin: 0px;
  // padding: 30px 0px;
  // outline: 1px solid red;
}
.secondLevelNav {
  // border: 1px solid red;
  position: fixed;
  width: calc(100vw - 320px);
  left: 320px;
  top: 60px;
  background: #fff;
  z-index: 1999;
  // background-image: linear-gradient(to bottom, rgba(231,248,255, 0.6), rgba(231,248,255, 0.6),rgba(231,248,255, 0.2), rgba(255,255,255,0));
}
.page {
  box-sizing: border-box;
  // margin-top: 60px;
  // padding: 30px 10px;
  // min-height: ;
  // box-shadow: 10px 10px 20px #888888;
  // outline: 1px solid red;
  // background: #fff;
  // box-shadow: 2px 5px 15px -5px #888888;
  // background: #f5390e;
  position: relative;
  .indexIntroduce {
    // outline: 1px solid red;
    position: fixed;
    top: 180px;
    right: 50px;
    width: 10px;
    height: 80px;
    border-radius: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .indexIntroduce:hover {
    color: #f7931a !important;
    // background: #f5390e;
    cursor: pointer;
  }
  .indexIntroduce:hover::after {
    content: attr(data-text); /* 显示的文字内容 国际化 */
    position: absolute;
    top: 80%;
    left: 50%;
    transform: translateX(-50%); /* 水平居中 */
    // padding: 5px; /* 内边距 */
    color: #000; /* 文字颜色 */
    font-size: 12px; /* 文字大小 */
    width: 60px;
    // outline: 1px solid red;
    text-align: center;
  }
}
.header {
  /* background: red; */
  // background: pink;
  padding: 0px 30px;
  justify-content: space-between;
  height: 60px;
  display: flex;
  position: relative;
  align-items: center;
  font-size: 14px;
  margin: 0;

  background-image: linear-gradient(
    to bottom,
    rgba(231, 248, 255, 1),
    rgba(231, 248, 255, 1),
    rgba(231, 248, 255, 0.9),
    rgba(255, 255, 255, 0)
  );
  // outline: 1px solid red;

  // box-shadow: 10px 1px 10px 0px #888;
  box-shadow: 13px 5px 15px -5px #888;
}

.time {
  text-align: right;
}
.charts {
  width: calc(100vw - 320px);
  height: 600px;
  /* background: khaki; */
  text-align: center;
  // line-height: 300px;
  margin-left: -80px;
}
.describe {
  // height: 150px;
  // width: 100%;
  background: rgba(0, 0, 0, 0.1);
  /* background: pink; */
  padding: 10px 0px;
  // background: gold;
  margin-top: 30px;
  // outline: 1px solid rgba(0, 0, 0, 0.2);
}
// --------币种显示----------------
.Assets {
  // background: gold;
  width: 100%;
  height: 30px;
  overflow: hidden;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
.describe .tltle1 {
  height: 50px;
  // line-height: 50px;
  //  background: pink;

  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  padding-left: 10px;
  font-size: 1rem;
  color: rgba(0, 0, 0, 0.8);
}
.describe p {
  /* outline: 1px solid red; */
  /* color: rgba(0, 0, 0, 0.4); */
  color: rgba(0, 0, 0, 0.7);
  // font-size: 12px;
  padding-left: 10px;
}
.tltle2 {
  padding-left: 10px;
  font-size: 1rem;
  color: rgba(0, 0, 0, 0.8);
}
.navTitle {
  display: flex;
  align-items: center;
  margin-left: 40px;
  // outline: 1px solid red;
}
.img {
  width: 20px;
  object-fit: cover;
}

/* -----------三按钮--------------- */
.navHeader {
  // background: lemonchiffon;
  height: 40px;
  display: flex;
  align-items: center;
}
.sc-jGprRt {
  display: flex;
  align-items: center;
  //  outline: 1px solid  red;
  // width: 300px;
  justify-content: space-around;
}
.sc-jGprRt button {
  display: flex;
  // outline: 1px solid  red;
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.6);
  padding: 2px 5px;
  margin-left: 10px;
  align-items: center;
  justify-content: space-around;
  transition: linear 0.2s;
  border-radius: 2px;
}
.sc-jGprRt button:hover {
  border: 1px solid rgba(0, 0, 0, 0.9);
}
.buttonText {
  margin-left: 5px;
}

.anticon {
  // outline: 1px solid red;
  padding-top: 3px;
}
// ---------价格按钮------------
.priceButton {
  margin-left: -5px;
}
.priceButton button {
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 3px;
  padding: 5px 5px;
  color: rgba(0, 0, 0, 0.7);
  margin-left: 10px;
  transition: 0.3s;
}
.priceButton button:hover {
  border: 1px solid rgba(0, 0, 0, 0.9);
}
// ============查询框样式=====================
.searchBox {
  height: 32px;
  width: 390px;
  border: 1px solid rgba(0, 0, 0, 0.3);
  position: absolute;
  right: 300px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  // background: #f5921a;
  //  margin-bottom: 10px;
  border-radius: 3px;
  overflow: hidden;
  line-height: 20px;
  padding-right: 5px;
}
.searchBox::before {
  content: "";
  width: 1px;
  height: 33px;
  background: rgba(0, 0, 0, 0.2);
  position: absolute;
  left: 135px;
  top: 0px;
  z-index: 22;
}
.searchBox .searchButton {
  // padding: 7px 10px;
  // margin-left: 10px;
  // margin-bottom: 7px;
  // border: 1px solid rgba(0, 0, 0, 0.3);

  // border: none;
  font-size: 20px;
  color: #f7931a;
  // border-radius: 2px;
  transition: 0.3s;
  // font-size: 13px;
  cursor: pointer;
}
.searchBox button:hover {
  // border: 1px solid rgba(0, 0, 0, 0.6);
  // outline: 1px solid rgba(0, 0, 0, 0.5);
  background: rgba(0, 0, 0, 0.2);
}
// -------------通知栏---------------------------------
.roll {
  // background: rgb(216, 165, 24);
  background: rgba(0, 0, 0, 0.2);
  opacity: 0.5;
  height: 26px;
  // padding: 5px 10px;
  padding: 0px 10px;
  color: #000;
  font-size: 13px;
  // outline: 1px solid red;
  overflow: hidden;
  display: flex;
  justify-content: left;
  align-items: center;
}
.txtWrap {
  // background: red;
  // margin-top: 0px;
  margin: 10px 10px;
}
.font {
  color: #f5921a;
}
.marquee_top {
  transition: all 0.6s;
  margin-top: -50px; /* 容器高度 */
}
.txt {
  transition: all 0.6s;
}
.txt1 {
  margin-left: 20px;
}
// ---------时间选择器-----------------
.timeChooseBox {
  // border: 1px solid rgba(0, 0, 0, 0.3);
  // position: absolute;
  // right: 0px;
  // top: 2px;
  // width: 180px;
  border-radius: 4px;
}
//滚动通知栏的查看详情
.details {
  color: #f5390e;
  margin-left: 50px;
  cursor: pointer;
}
.details:hover {
  color: darkblue;
}
// ------------弹窗样式-----------------------
.dialogBox {
  // outline: 1px solid red;
  padding-top: 5px;
  border: 1px solid rgba(0, 0, 0, 0.1);
}
.dialogBox p {
  // outline: 1px solid red;
  padding: 2px 0px;
  margin-top: 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.dialogBox p:last-child {
  border: none;
}
.dialogBox p > span:nth-of-type(1) {
  display: inline-block;
  width: 100px;
  // outline: 1px solid red;
  text-align: right;
}
.dialogBox p > span:nth-of-type(2) {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.5);
  padding-left: 5px;
}
//线性 对数
.according {
  color: #f7931a;
}
// -----------移动平均线--------------------
.SMA:hover {
  outline: 1px solid rgba(0, 0, 0, 0.8);
}
.SMA {
  // padding-left: 10px;
  // position: absolute;
  // top: 2px;
  // right: 237px;

  height: 30px;
  // width: 400px;
  outline: 1px solid rgba(0, 0, 0, 0.2);
  transition: 0.4s;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  margin-right: 5px;
  background: #fff;
  .SMATitle {
    // outline: 1px solid  red;
    padding-right: 5px;
    height: 30px;
    line-height: 28px;
    font-size: 13px;
    color: rgba(0, 0, 0, 0.5);
  }
  padding: 0px 104px;
  // background: #f5921a;
}

.inputBox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  // outline: 1px solid red;
  color: rgba(0, 0, 0, 0.8);
  margin: 5px 5px;
  padding: 2px 5px;
  .container {
    outline: 1px solid rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    //  height: 30px;
    padding: 0px 6px;
  }
  .submit {
    margin-left: 5px;
    font-size: 14px;
    outline: 1px solid rgba(0, 0, 0, 0.3);
    padding: 6px 5px;
    border-radius: 4px;
  }
}
// 遮罩
.Mask {
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  z-index: 99;
  position: fixed;
  top: 60px;
  // right: 0px;
}
//按钮选中样式
.check {
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 3px;
  padding: 5px 5px;
  color: rgba(0, 0, 0, 0.7);
  background: rgba(242, 63, 0, 0.3);
  margin-left: 10px;
  transition: 0.3s;
}
.noCheck {
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 3px;
  padding: 5px 5px;
  color: rgba(0, 0, 0, 0.7);
  margin-left: 10px;
  transition: 0.3s;
}
</style>

<style  lang="scss">
.el-select .timeBox {
  margin-top: 0 !important;
  width: 170px !important;
  background: #f7931a !important;
  z-index: 33;
}
.searchBox .el-input__inner {
  border: none !important;
  font-size: 10px !important;
  // background: #f5921a;
  line-height: 0 !important;
  // background: pink;
  height: 32px !important;
  margin: 0 !important;
}
.timeChooseBox .el-input__inner {
  margin-top: 0 !important;
  // background: red;
  width: 222px;
}

//时间栏的标题靠左
// .header[data-v-fae5bece] {
//   justify-content: left;
// }

.SMA .el-select .el-input__inner {
  margin-top: 0px !important;
  border: none;
  outline: none;
  width: 158px;
  height: 28px;
  padding: 0px 6px !important;
}
.SMA .el-input__suffix {
  right: 0px !important;
}

.input .el-input__inner {
  //  background: red !important;
  border: none;
  outline: none;
  height: 30px;
  width: 100px;
  margin: 0 !important;
}
</style>
