<template>
  <div>
    <div class="mt20" />
    <div class="box">
      <el-card>
        <el-row :gutter="20">
          <el-col :lg="5">
            <div class="leftNav">
              <ul>
                <li :class="activeIndex==0?'active':''" @click="activeIndex=0">{{ language==0?'组织机构':'Organizer' }}</li>
                <li :class="activeIndex==1?'active':''" @click="activeIndex=1">{{ language==0?'WDSF亚洲体育舞蹈节':'WDSF Asian Dancesport Festival' }}</li>
                <li :class="activeIndex==2?'active':''" @click="activeIndex=2">{{ language==0?'体育舞蹈项目':'About Sports Dance' }}</li>
              </ul>
            </div>
          </el-col>
          <el-col :lg="19">
            <div class="infoPart pd20" v-if="activeIndex==0">
              <h3 class="leftboderTT">{{ language==0?'组织机构':'Organizer' }}</h3>
              <div class="content" v-if="language==0">
                <h4>(一) 主办单位</h4>

                <p>世界体育舞蹈联合会(WDSF)</p>

                <h4>(二) 承办单位</h4>

                <p>亚洲体育舞蹈联合会(DSA)</p>
                <p>中国体育舞蹈联合会(WDSF)</p>
                <p>江苏省体育局</p>
                <p>无锡市人民政府</p>
              </div>
              <div class="content" v-else>
                <h4 class="uppercase">1. Hosts</h4>
                <p>World DanceSport Federation (WDSF)</p>

                <h4 class="uppercase">2. Organizers</h4>
                <p>DanceSport Asia (DSA)</p>
                <p>Chinese DanceSport Federation</p>
                <p>Jiangsu Provincial Sports Federation</p>
                <p>Wuxi Municipal People's Government</p>
              </div>
              <div class="content" hidden>
                <p>现场，由世界体育舞蹈联合设立的，集世界、洲际、中国三位一体的联合总部基地——世界体育舞蹈（无锡）中心正式揭牌。未来，无锡将以总部基地落户为契机，启动培育自主品牌赛事中国无锡体育舞蹈节，持续拓展交流合作、赛事研发、教育培训等领域，致力打造全球体育舞蹈地标城市和独具魅力的国际赛事名城。
                  　　</p>
                <p>本次亚洲体育舞蹈节以“三赛合一”创新形式落地无锡，为期四天的时间内，将举行世界标准舞锦标赛、世界体育舞蹈大奖赛（无锡站）两项国际级赛事，以及中国体育舞蹈公开系列赛（无锡站）一项国家级赛事，共吸引来自39个国家和地区1700多名选手参赛。
                  　　</p>
                <p>体育舞蹈分为两个项目群、十个舞种，其中标准舞（也称摩登舞）项目群包括华尔兹、维也纳华尔兹、探戈、狐步和快步舞。拉丁舞项项目群包括伦巴、恰恰、桑巴、牛仔和斗牛舞。据不完全统计，目前中国体育舞蹈爱好者已超过5000万人。
                  　　</p>
                <p>现场，拉丁舞蹈演出Latin Girl、体育舞蹈舞服秀精彩上演。国内外顶尖选手燃情竞技，参赛“绅士”与“美女”们尽情展示华丽妆容和舞姿。
                  　　</p>
                <p>“最美”体育项目在太湖之滨耀眼绽放，造就年度全球体育舞蹈领域高光场景，打出了无锡体育的又一张闪亮名片。
                  　　</p>
                <p>本次亚洲体育舞蹈节面向公众开放VIP和看台两类观赛票。同时，赛事还将通过奥林匹克频道、人民日报视界、咪咕、中国体育舞蹈联合会官网和抖音号、亚洲体育舞蹈节微信视频号、虎牙、企鹅、微博等平台在线直播。
                </p>

                <img src="@/assets/zhinan/photo.png"/>

              </div>
            </div>

            <div class="infoPart pd20" v-if="activeIndex==1">
              <h3 class="leftboderTT">{{ language==0?'无锡WDSF亚洲体育舞蹈节':'WUXI WDSF ASIAN DANCESPORT FESTIVAL' }}</h3>
              <div class="content" v-if="language==0">
                无锡WDSF亚洲体育舞蹈节是由世界体育舞蹈（无锡）中心（世界体育舞蹈联合、亚洲体育舞蹈联合、中国体育舞蹈联合会和无锡市人民政府共建）打造面向全球的、长期落户的、城市自主的品牌赛事。
                <br/>

                &ensp;&ensp;&ensp;&ensp;2023年7月首次举办无锡2023年WDSF亚洲体育舞蹈节，包括2023年WDSF世界标准舞锦标赛、2023年WDSF世界体育舞蹈大奖赛（中国无锡）、2023年全国体育舞蹈公开系列赛（无锡站），共吸引来自全球39个国家及地区的1,716名顶级舞者参与。同时，并将世界体育舞蹈（无锡）中心成功落户中国无锡，以“节日有竞赛、竞赛节日化”为发展指导原则，“四方”共同努力服务全球舞者。
                <br/>

                &ensp;&ensp;&ensp;&ensp;2024年7月17日至21日将继续举办第二届无锡2024年WDSF亚洲体育舞蹈节，包括2024年WDSF世界拉丁舞锦标赛、2024年WDSF世界青年标准舞锦标赛、2024年WDSF世界少年Ⅱ拉丁舞锦标赛、2024年WDSF大奖赛（标准舞、拉丁舞）、
                2024年WDSF职业标准舞/拉丁舞世界杯、2024年WDSF公开赛（标准舞/拉丁舞）以及2024年全国青少年体育舞蹈锦标赛等一系列重点赛事。
                预计届时会吸引约40个国家和地区的3000名优秀体育舞蹈选手参赛，将为全球体育舞蹈爱好者呈现一场精彩绝伦的视觉盛宴。

                <div class="imgbox">
                  <img src="/img/123.png"/>
                </div>
              </div>
              <div class="content" v-else>
                Wuxi WDSF Asian DanceSport Festival is a globally oriented, permanently settled,
                city-owned brand event created by the World DanceSport (Wuxi) Center (jointly
                established by the World DanceSport Federation, DanceSport Asia, Chinese
                DanceSport Federation, and Wuxi Municipal People’s Government).
                <br/><br/>
                &ensp;&ensp;&ensp;&ensp;In July 2023, the WDSF Asian DanceSport Festival·Wuxi 2023 was held for the first
                time, including the 2023 WDSF World Championship Standard, 2023 WDSF
                DanceSport Grand Slam (Wuxi), 2023 China DanceSport Open Series (Wuxi), which
                attracted a total of 1,716 top-level dancers from 39 countries and regions around the
                globe. Meanwhile, the WDSF World DanceSport (Wuxi) Center was successfully
                established in Wuxi, China, with the guiding principle of "festivals with competitions
                and competitions becoming festivals", and the "four parties" working together to serve
                dancers from all over the world.
                <br/><br/>
                &ensp;&ensp;&ensp;&ensp;The 2nd WDSF Asian DanceSport Festival·Wuxi 2024 will be organized from 17th to
                21st July 2024, including a series of key events such as the WDSF World
                Championship Latin 2024, WDSF World Championship Youth Standard 2024, WDSF
                World Championship Junior II Latin 2024, WDSF Grand Slam Latin & Standard 2024,
                WDSF PD World Cup Latin & Standard 2024, WDSF Open Latin & Standard 2024
                and 2024 National Youth DanceSport Championships etc. It is expected to attract
                3,000 outstanding dancers from about 40 countries and regions to participate in the
                event, which will present a wonderful visual feast for global DanceSport fans.
              </div>

            </div>

            <div class="infoPart pd20" v-if="activeIndex==2">
              <h3 class="leftboderTT">{{ language==0?'体育舞蹈项目':'About Sports Dance' }}</h3>
              <el-empty/>
            </div>
          </el-col>
        </el-row>
      </el-card>

      <div class="indexTitle" hidden>
        <h3 class="leftboderTT">{{ language==0?'联系我们':'CONTACT' }}</h3>
      </div>
      <div class="mapBox mb20" v-if="false">
        <div class="content" v-if="language==0">
          <div class="phone">
            <h4>电话</h4>
            <p>武先生:15606190026</p>
          </div>
          <div class="address">
            <h4>地址</h4>
            <p>江苏省 无锡市太湖新城和风路与清舒交叉口东北100米</p>
          </div>
          <div class="email">
            <h4>邮箱</h4>
            <p>info@wdsfwuxicenter.com</p>
          </div>
        </div>
        <div class="content" v-else>
          <div class="phone">
            <h4>Phone</h4>
            <p>Mr.WU:15606190026</p>
          </div>
          <div class="address">
            <h4>Address</h4>
            <p>No.88 Qingshu Road,Economic Development District, Wuxi City,Jiangsu Province,China</p>
          </div>
          <div class="email">
            <h4>Email</h4>
            <p>info@wdsfwuxicenter.com</p>
          </div>
        </div>

      </div>
    </div>

    <div style="height: 50px"></div>
  </div>
</template>

<script setup>
import {useStorage} from "@vueuse/core";

const language = useStorage('language', 0)

const activeIndex = ref(0)
</script>

<style scoped lang="scss">
.leftNav{
  ul{border-right: 2px solid #E5E5E5;padding:0 20px 0 0;}
  li{margin: 30px 0;padding: 10px;text-align: right;
    border-radius: 2px;position: relative;
    font-weight: 600;
    font-size: 18px;cursor: pointer;
    background: linear-gradient(90deg, rgba(134, 35, 252, 0.1), rgba(69, 61, 234, 0.1));}
  li::after{content: '';position: absolute;background: #898989;width: 8px;height: 8px;
  border-radius: 50%;right: -29px;border: 4px solid #fff;outline: 2px solid #898989;
  box-sizing: content-box;top: 0;bottom: 0;margin: auto;}
  li.active{color: #fff;
    background: linear-gradient(90deg, #8623FC, #453DEA);
    &::after{outline: 2px solid #453DEA;background: #453DEA;}
  }
}
.infoPart{
  .leftboderTT{font-size:20px;color: var(--el-color-primary); }
}
.content{margin: 20px 0 0;text-indent: 2em;
  line-height: 1.8;
  font-weight: 400;
  font-size: 16px;
  color: #29343C;
  img{max-width: 100%;margin: 20px auto;display: block;}
  h4{text-indent: 0}
}
.mapBox{background: url("@/assets/zhinan/map.png") no-repeat right;height: 375px;
  background-size: cover;padding: 1px;position: relative;display: flex;
  .content{background: #fff;width: 60%;left: 40px;padding: 30px;text-indent: 0;
    line-height: 1;
    position: absolute;height: 90%;top: 0;bottom: 0;margin: auto;
  }
  div{padding-left: 60px;}
  .phone{background: url("@/assets/dance/map01.png") no-repeat left;background-size: 30px;}
  .address{background: url("@/assets/dance/map02.png") no-repeat left;background-size: 30px;
    margin:50px 0;
  }
  .email{background: url("@/assets/dance/map03.png") no-repeat left;background-size: 30px;}
  h4{margin: 0;
    font-size: 16px;
    color: #AAAAAA;}
  p{margin: 13px 0 0;}
}
</style>