kunshan/src/views/map/index.vue

<template>
  <div class="large-screen">
    <!-- 地图 -->
    <mapScene ref="mapSceneRef" v-show="state.activeIndex === '1' && !state.showVideoPlayer"></mapScene>
    <div class="fusion-bg" v-show="state.activeIndex === '2'">
      <img src="@/assets/images/昆山水文站.jpg" alt="昆山水文站" />
    </div>
    <div class="business-bg" v-show="state.activeIndex === '3'">
      <img src="@/assets/images/圩区.png" alt="圩区" />
    </div>
    <div class="history-bg" v-show="state.activeIndex === '4'">
      <video v-if="!state.showHistoryImage" ref="historyVideoRef" class="history-bg-video" loop autoplay muted>
        <source :src="state.historyVideoSrc" type="video/mp4">
      </video>
      <img v-else class="history-bg-image" :src="state.historyImageSrc" alt="历史背景" />
    </div>
    <div class="culture-bg" v-show="state.activeIndex === '5'">
      <video class="culture-bg-video" loop autoplay muted>
        <source src="@/assets/video/水文化.mp4" type="video/mp4">
      </video>
    </div>
    <div class="science-bg" v-show="state.activeIndex === '5'">
      <img src="@/assets/images/背景图.png" alt="背景图" />
    </div>
    <!-- 视频背景 -->
    <div class="video-background" v-if="state.showVideoPlayer">
      <video
        ref="videoPlayerRef"
        class="video-bg-player"
        src="@/assets/昆山水文站.mp4"
        autoplay
        loop
        muted
        @ended="closeVideoPlayer"
      ></video>
      <div class="video-close-btn" @click="closeVideoPlayer">
        <span>返回</span>
      </div>
    </div>
    <!-- 地图切换按钮 -->
    <div class="map-switch-btns" v-show="state.activeIndex === '1'">
      <div class="map-switch-btn" :class="{ active: state.currentMapMode === 'suzhou' }" @click="switchToSuzhouMap">
        <span>苏州地图</span>
      </div>
      <div class="map-switch-btn" :class="{ active: state.currentMapMode === 'kunshan' }" @click="switchToKunshanMap">
        <span>昆山地图</span>
      </div>
    </div>
    <div class="vignette-overlay"></div>
    <div class="large-screen-wrap" id="large-screen">
      <m-header title="水务水文融合系统" sub-text="Hydrological Visualization System">
        <!--左侧 天气 -->
        <template v-slot:left>
          <div class="m-header-weather"><span>小雪</span><span>-4℃</span></div>
        </template>
        <!--右侧 日期 -->
        <template v-slot:right>
          <div class="m-header-date"><span>2025-12-11</span><span>17:53:16</span></div>
        </template>
      </m-header>
      <!-- 顶部菜单 - 仅在昆山地图模式下显示 -->
      <div class="top-menu" v-show="state.currentMapMode === 'kunshan'">
        <mMenu :default-active="state.activeIndex" @select="handleMenuSelect">
          <mMenuItem index="1">区域总览</mMenuItem>
          <mMenuItem index="2">融合体系</mMenuItem>
          <mMenuItem index="3">综合业务</mMenuItem>
          <div class="top-menu-mid-space"></div>
          <mMenuItem index="4">历史沿革</mMenuItem>
          <mMenuItem index="5">水文科普</mMenuItem>
          <mMenuItem index="6">研学联建</mMenuItem>
        </mMenu>
      </div>
      <!-- 区域总览内容 -->
      <template v-if="state.activeIndex === '1'">
        <!-- 顶部统计卡片 -->
        <div class="top-count-card">
          <mCountCard v-for="(item, index) in state.totalView" :info="item" :key="index"></mCountCard>
        </div>
        <!-- 左边布局 图表 -->
        <div class="left-wrap">
          <div class="left-wrap-3d">
            <!-- 中心简介 -->
            <BulkCommoditySalesChart></BulkCommoditySalesChart>
            <!-- 近年水位变化 -->
            <EconomicTrendChart></EconomicTrendChart>
          </div>
        </div>
        <!-- 右边布局 图表 -->
        <div class="right-wrap">
          <div class="right-wrap-3d">
            <!-- 水利设施分布 -->
            <PurposeSpecialFunds> </PurposeSpecialFunds>
            <!-- 用水量分析 -->
            <ElectricityUsage></ElectricityUsage>
          </div>
        </div>
        <!-- 底部托盘 -->
        <div class="bottom-tray">
          <!-- svg线条动画 -->
          <mSvglineAnimation class="bottom-svg-line-left" :width="721" :height="57" color="#00BFFF" :strokeWidth="2"
            :dir="[0, 1]" :length="50"
            path="M1 56.6105C1 31.5123 185.586 10.0503 451.904 1.35519C458.942 1.12543 465.781 4.00883 470.505 9.22964L484.991 25.2383C487.971 28.4775 492.938 30.4201 498.254 30.4201H720.142">
          </mSvglineAnimation>
          <mSvglineAnimation class="bottom-svg-line-left bottom-svg-line-right" :width="721" :height="57" color="#00BFFF"
            :strokeWidth="2" :dir="[0, 1]" :length="50"
            path="M1 56.6105C1 31.5123 185.586 10.0503 451.904 1.35519C458.942 1.12543 465.781 4.00883 470.505 9.22964L484.991 25.2383C487.971 28.4775 492.938 30.4201 498.254 30.4201H720.142">
          </mSvglineAnimation>
          <!-- 做箭头 -->
          <div class="bottom-tray-arrow">
            <img src="@/assets/images/bottom-menu-arrow-big.svg" alt="" />
            <img src="@/assets/images/bottom-menu-arrow-small.svg" alt="" />
          </div>
          <!-- 底部菜单 -->
          <div class="bottom-menu">
            <div class="bottom-menu-item is-active"><span>区域总览</span></div>
            <div class="bottom-menu-item"><span>水质监测</span></div>
            <div class="bottom-menu-item"><span>水文数据</span></div>
            <div class="bottom-menu-item"><span>防洪预警</span></div>
          </div>
          <!-- 右箭头 -->
          <div class="bottom-tray-arrow is-reverse">
            <img src="@/assets/images/bottom-menu-arrow-big.svg" alt="" />
            <img src="@/assets/images/bottom-menu-arrow-small.svg" alt="" />
          </div>
        </div>
        <!-- 雷达 -->
        <div class="bottom-radar">
          <mRadar></mRadar>
        </div>
      </template>

      <!-- 融合体系内容 -->
      <WaterResourceContent v-if="state.activeIndex === '2'" />

      <!-- 水文测站内容 -->
      <WaterStationContent v-if="state.activeIndex === '3'" />

      <!-- 历史沿革内容 -->
      <HistoryContent v-if="state.activeIndex === '4'" @changeVideo="handleVideoChange" />

      <!-- 水文科普内容 -->
      <ScienceContent v-if="state.activeIndex === '5'" />
      <!-- 左右装饰线 -->
      <div class="large-screen-left-zsline"></div>
      <div class="large-screen-right-zsline"></div>
    </div>

    <!-- loading动画 -->
    <div class="loading">
      <div class="loading-text">
        <span style="--index: 1">L</span>
        <span style="--index: 2">O</span>
        <span style="--index: 3">A</span>
        <span style="--index: 4">D</span>
        <span style="--index: 5">I</span>
        <span style="--index: 6">N</span>
        <span style="--index: 7">G</span>
      </div>
      <div class="loading-progress">
        <span class="value">{{ state.progress }}</span>
        <span class="unit">%</span>
      </div>
    </div>
  </div>
</template>
<script setup>
import { shallowRef, ref, reactive, onMounted, onBeforeUnmount, nextTick, provide } from "vue"
import mapScene from "./map.vue"
import mHeader from "@/components/mHeader/index.vue"
import mCountCard from "@/components/mCountCard/index.vue"
import mMenu from "@/components/mMenu/index.vue"
import mRadar from "@/components/mRadar/index.vue"
import mMenuItem from "@/components/mMenuItem/index.vue"
import mSvglineAnimation from "@/components/mSvglineAnimation/index.vue"
import BulkCommoditySalesChart from "./components/BulkCommoditySalesChart.vue"
import YearlyEconomyTrend from "./components/YearlyEconomyTrend.vue"
import EconomicTrendChart from "./components/EconomicTrendChart.vue"
import DistrictEconomicIncome from "./components/DistrictEconomicIncome.vue"
import PurposeSpecialFunds from "./components/PurposeSpecialFunds.vue"
import ProportionPopulationConsumption from "./components/ProportionPopulationConsumption.vue"
import ElectricityUsage from "./components/ElectricityUsage.vue"
import QuarterlyGrowthSituation from "./components/QuarterlyGrowthSituation.vue"
import WaterResourceContent from "@/views/waterResource/index.vue"
import WaterStationContent from "@/views/waterStation/index.vue"
import HistoryContent from "@/views/history/index.vue"
import ScienceContent from "@/views/science/index.vue"

import { Assets } from "./assets.js"
import emitter from "@/utils/emitter"
import gsap from "gsap"
import autofit from "autofit.js"

const assets = shallowRef(null)
const mapSceneRef = ref(null)
const historyVideoRef = ref(null)

// 提供资源给子组件
provide("assets", assets)

const state = reactive({
  // 进度
  progress: 0,
  // 当前顶部导航索引
  activeIndex: "1",
  // 是否显示视频播放器
  showVideoPlayer: false,
  // 历史沿革视频源
  historyVideoSrc: new URL("@/assets/video/昆山水务水文人工.mp4", import.meta.url).href,
  // 历史沿革图片源
  historyImageSrc: new URL("@/assets/video/昆山水务水文水质监测.png", import.meta.url).href,
  // 是否显示历史沿革图片
  showHistoryImage: false,
  // 当前地图模式: 'kunshan' | 'suzhou'，默认苏州地图
  currentMapMode: 'suzhou',
  // 卡片统计数据
  totalView: [
    {
      icon: "xiaoshoujine",
      zh: "区域总面积",
      value: 931,
      unit: "平方公里",
    },
    {
      icon: "zongxiaoliang",
      zh: "水文站数量",
      value: 57,
      unit: "个",
    },
    {
      icon: "xiaoshoujine",
      zh: "水厂数量",
      value: 8,
      unit: "座",
    },
    {
      icon: "zongxiaoliang",
      zh: "排水口数量",
      value: 156,
      unit: "个",
    },
  ],
})
onMounted(() => {
  // 监听地图播放完成，执行事件
  emitter.$on("mapPlayComplete", handleMapPlayComplete)
  // 监听水文站图标点击事件
  emitter.$on("waterStationClick", handleWaterStationClick)
  // 监听地图模式变化
  emitter.$on("mapModeChanged", handleMapModeChanged)
  // 监听切换到区域总览页面事件
  emitter.$on("switchToRegionOverview", handleSwitchToRegionOverview)
  // 自动适配
  assets.value = autofit.init({
    dh: 1080,
    dw: 1920,
    el: "#large-screen",
    resize: true,
  })
  // 初始化资源
  initAssets(async () => {
    // 加载地图
    emitter.$emit("loadMap", assets.value)
    // 隐藏loading
    await hideLoading()
    // 播放场景
    mapSceneRef.value.play()
  })
})
onBeforeUnmount(() => {
  emitter.$off("mapPlayComplete", handleMapPlayComplete)
  emitter.$off("waterStationClick", handleWaterStationClick)
  emitter.$off("mapModeChanged", handleMapModeChanged)
  emitter.$off("switchToRegionOverview", handleSwitchToRegionOverview)
})

// 处理地图模式变化
function handleMapModeChanged(mode) {
  state.currentMapMode = mode
}

// 处理切换到区域总览页面
function handleSwitchToRegionOverview() {
  // 切换到区域总览页面（activeIndex 为 1）
  state.activeIndex = '1'
}

// 切换到苏州地图
function switchToSuzhouMap() {
  if (state.currentMapMode === 'suzhou') return
  if (mapSceneRef.value) {
    mapSceneRef.value.switchToSuzhou()
  }
}

// 切换到昆山地图
function switchToKunshanMap() {
  if (state.currentMapMode === 'kunshan') return
  if (mapSceneRef.value) {
    mapSceneRef.value.switchToKunshan()
  }
}

// 处理水文站图标点击事件
function handleWaterStationClick(stationInfo) {
  console.log('播放水文站视频:', stationInfo.name)
  state.showVideoPlayer = true
}

// 关闭视频播放器
function closeVideoPlayer() {
  state.showVideoPlayer = false
  // 暂停视频播放
  const videoPlayer = document.querySelector('.video-player')
  if (videoPlayer) {
    videoPlayer.pause()
  }
}
// 初始化加载资源
function initAssets(onLoadCallback) {
  assets.value = new Assets()
  // 资源加载进度
  let params = {
    progress: 0,
  }
  assets.value.instance.on("onProgress", (path, itemsLoaded, itemsTotal) => {
    let p = Math.floor((itemsLoaded / itemsTotal) * 100)
    gsap.to(params, {
      progress: p,
      onUpdate: () => {
        state.progress = Math.floor(params.progress)
      },
    })
  })
  // 资源加载完成
  assets.value.instance.on("onLoad", () => {
    onLoadCallback && onLoadCallback()
  })
}

// 隐藏loading
async function hideLoading() {
  return new Promise((resolve, reject) => {
    let tl = gsap.timeline()
    tl.to(".loading-text span", {
      y: "200%",
      opacity: 0,
      ease: "power4.inOut",
      duration: 2,
      stagger: 0.2,
    })
    tl.to(".loading-progress", { opacity: 0, ease: "power4.inOut", duration: 2 }, "<")
    tl.to(
      ".loading",
      {
        opacity: 0,
        ease: "power4.inOut",
        onComplete: () => {
          resolve()
        },
      },
      "-=1"
    )
  })
}

function handleMenuSelect(index) {
  state.activeIndex = index
  
  // 切换水文站图标显示
  if (index === "3") {
    // 在水文测站页面显示图标
    emitter.$emit("toggleWaterStations", true)
  } else {
    // 其他页面隐藏图标
    emitter.$emit("toggleWaterStations", false)
  }
  
  nextTick(() => {
    if (index === "1") {
      gsap.to(".left-card", { x: 0, opacity: 1, duration: 0.5, stagger: 0.1 })
      gsap.to(".right-card", { x: 0, opacity: 1, duration: 0.5, stagger: 0.1 })
      gsap.to(".count-card", { y: 0, opacity: 1, duration: 0.5, stagger: 0.1 })
      gsap.to(".bottom-tray", { y: 0, opacity: 1, duration: 0.5 })
      gsap.to(".bottom-radar", { y: 0, opacity: 1, duration: 0.5 })
    } else if (index === "2") {
      gsap.to(".water-resource-content .module-card", { x: 0, opacity: 1, duration: 0.5, stagger: 0.1 })
    } else if (index === "3") {
      gsap.to(".water-station-content .station-card", { x: 0, opacity: 1, duration: 0.5 })
      gsap.to(".water-station-content .bottom-container", { y: 0, opacity: 1, duration: 0.5, delay: 0.2 })
    } else if (index === "4") {
      gsap.to(".history-content .event-card", { x: 0, opacity: 1, duration: 0.5 })
      gsap.to(".history-content .timeline-container", { y: 0, opacity: 1, duration: 0.5, delay: 0.2 })
    } else if (index === "5") {
      gsap.to(".science-content .science-card", { y: 0, opacity: 1, duration: 0.6, stagger: 0.15 })
    }
  })
}

function handleVideoChange(videoType) {
  if (videoType === "water") {
    state.showHistoryImage = true
    state.historyImageSrc = new URL("@/assets/video/昆山水务水文水质监测.png", import.meta.url).href
  } else {
    state.showHistoryImage = false
    if (videoType === "auto") {
      state.historyVideoSrc = new URL("@/assets/video/昆山水务水文自动化起步.mp4", import.meta.url).href
    } else if (videoType === "3d") {
      state.historyVideoSrc = new URL("@/assets/video/昆山水务水文三维孪生半自动.mp4", import.meta.url).href
    } else if (videoType === "smart") {
      state.historyVideoSrc = new URL("@/assets/video/昆山水务水文三维孪生智能.mp4", import.meta.url).href
    } else if (videoType === "wisdom") {
      state.historyVideoSrc = new URL("@/assets/video/智慧水务.mp4", import.meta.url).href
    } else {
      state.historyVideoSrc = new URL("@/assets/video/昆山水务水文人工.mp4", import.meta.url).href
    }
    nextTick(() => {
      if (historyVideoRef.value) {
        historyVideoRef.value.load()
        historyVideoRef.value.play()
      }
    })
  }
}
// 地图开始动画播放完成
function handleMapPlayComplete() {
  let tl = gsap.timeline({ paused: false })
  let leftCards = gsap.utils.toArray(".left-card")
  let rightCards = gsap.utils.toArray(".right-card")
  let countCards = gsap.utils.toArray(".count-card")
  tl.addLabel("start", 0.5)
  tl.addLabel("menu", 0.5)
  tl.addLabel("card", 1)
  tl.addLabel("countCard", 3)
  tl.to(".m-header", { y: 0, opacity: 1, duration: 1.5, ease: "power4.out" }, "start")
  tl.to(".bottom-tray", { y: 0, opacity: 1, duration: 1.5, ease: "power4.out" }, "start")
  tl.to(
    ".top-menu",
    {
      y: 0,
      opacity: 1,
      duration: 1.5,
      ease: "power4.out",
    },
    "-=1"
  )
  tl.to(".bottom-radar", { y: 0, opacity: 1, duration: 1.5, ease: "power4.out" }, "-=2")
  tl.to(leftCards, { x: 0, opacity: 1, stagger: 0.2, duration: 1.5, ease: "power4.out" }, "card")
  tl.to(rightCards, { x: 0, opacity: 1, stagger: 0.2, duration: 1.5, ease: "power4.out" }, "card")
  tl.to(
    countCards,
    {
      y: 0,
      opacity: 1,
      stagger: 0.2,
      duration: 1.5,
      ease: "power4.out",
    },
    "card"
  )
}
</script>

<style lang="scss">
@use "~@/assets/style/home.scss";

.vignette-overlay {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 70% 70% at center,
    rgba(0, 20, 40, 0) 40%,
    rgba(0, 20, 40, 1.0) 100%
  );
  box-shadow: inset 0 0 100px rgba(0, 191, 255, 0.1);
}

.m-header-weather,
.m-header-date {
  span {
    padding-right: 10px;
    color: #c4f3fe;
    font-size: 14px;
  }
}

.top-menu {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 40px;
  z-index: 3;
  display: flex;
  justify-content: center;

  .top-menu-mid-space {
    width: 800px;
  }
}

.bottom-radar {
  position: absolute;
  right: 500px;
  bottom: 100px;
  z-index: 3;
}

.main-btn-group {
  display: flex;
  left: 50%;
  transform: translateX(-50%);
  bottom: 10px;
  z-index: 999;

  &.disabled {
    pointer-events: none;
  }

  .btn {
    margin-right: 10px;
  }
}

.bottom-svg-line-left,
.bottom-svg-line-right {
  position: absolute;
  right: 50%;
  width: 721px;
  height: 57px;
  margin-right: -5px;
  bottom: -21px;
}

.bottom-svg-line-right {
  transform: scaleX(-1);
  left: 50%;
  right: inherit;
  margin-right: inherit;
  margin-left: -5px;
}

/* 初始化动画开始位置 */
.m-header {
  transform: translateY(-100%);
  opacity: 0;
}

.top-menu {
  transform: translateY(-250%);
  opacity: 0;
}

.count-card {
  transform: translateY(150%);
  opacity: 0;
}

.left-card {
  transform: translateX(-150%);
  opacity: 0;
}

.right-card {
  transform: translateX(150%);
  opacity: 0;
}

.right-wrap {
  position: absolute;
  right: 32px;
  top: 180px;
  width: 398px;
  bottom: 50px;
  perspective: 500px;
  perspective-origin: 50% 50%;
}

.right-wrap-3d {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transform: translate3d(0px, 0px, 0px) scaleX(1) scaleY(1) rotateX(0deg) rotateY(-6deg) rotateZ(0deg) skewX(0deg) skewY(0deg);
  z-index: 4;
}

.right-wrap-3d > div {
  margin-bottom: 16px;
}

.right-wrap-3d > div:last-child {
  margin-bottom: 0;
}

.bottom-tray {
  transform: translateY(100%);
  opacity: 0;
}

.bottom-radar {
  transform: translateY(100%);
  opacity: 0;
}

// 地图切换按钮样式
.map-switch-btns {
  position: absolute;
  left: 50%;
  bottom: 100px;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  gap: 10px;
  pointer-events: auto;

  .map-switch-btn {
    padding: 8px 20px;
    background: rgba(0, 20, 40, 0.85);
    border: 1px solid rgba(48, 220, 255, 0.3);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;

    span {
      color: #a3dcde;
      font-size: 14px;
    }

    &:hover {
      background: rgba(48, 220, 255, 0.2);
      border-color: rgba(48, 220, 255, 0.6);
    }

    &.active {
      background: rgba(48, 220, 255, 0.3);
      border-color: rgba(48, 220, 255, 0.8);
      box-shadow: 0 0 15px rgba(48, 220, 255, 0.4);

      span {
        color: #30dcff;
        font-weight: bold;
      }
    }
  }
}

.fusion-bg, .business-bg, .history-bg, .culture-bg, .science-bg {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: #000;
  img, video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.left-column {
  position: absolute;
  z-index: 4;
  width: 398px;
  left: 32px;
  top: 180px;
  bottom: 50px;
  perspective: 500px;
  perspective-origin: 50% 50%;
  .left-column-3d {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transform: translate3d(0px, 0px, 0px) scaleX(1) scaleY(1) rotateX(0deg) rotateY(6deg) rotateZ(0deg) skewX(0deg) skewY(0deg);
    z-index: 4;
  }
  .module-card {
    height: 450px;
    background: rgba(0, 20, 40, 0.8);
    border: 1px solid rgba(48, 220, 255, 0.3);
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(48, 220, 255, 0.1);
    transform: translateX(-150%);
    opacity: 0;
  }
}

.right-column {
  position: absolute;
  z-index: 4;
  width: 398px;
  right: 32px;
  top: 150px;
  bottom: 50px;
  perspective: 800px;
  perspective-origin: 50% 50%;
  .right-column-3d {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transform: translate3d(0px, 0px, 0px) scaleX(1) scaleY(1) rotateX(0deg) rotateY(-6deg) rotateZ(0deg) skewX(0deg) skewY(0deg);
  }
  .module-card {
    height: 450px;
    background: rgba(0, 20, 40, 0.8);
    border: 1px solid rgba(48, 220, 255, 0.3);
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(48, 220, 255, 0.1);
    transform: translateX(150%);
    opacity: 0;
  }
}

// 视频背景样式
.video-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1;
  
  .video-bg-player {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .video-close-btn {
    position: absolute;
    top: 100px;
    right: 40px;
    padding: 8px 20px;
    background: rgba(0, 20, 40, 0.9);
    border: 1px solid rgba(48, 220, 255, 0.5);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
    
    span {
      color: #30dcff;
      font-size: 14px;
      font-weight: bold;
    }
    
    &:hover {
      background: rgba(48, 220, 255, 0.2);
      border-color: rgba(48, 220, 255, 0.8);
      box-shadow: 0 0 20px rgba(48, 220, 255, 0.5);
      
      span {
        color: #00ffff;
      }
    }
  }
}
</style>