<template>
  <div>
    <div class="mt20" />
    <div class="box">
      <el-card>
        <el-row :gutter="20">
          <el-col :lg="5">
            <div class="leftNav">
              <ul>
                <li v-for="(item,index) in menu" :class="activeIndex==index?'active':''" @click="activeIndex=index">{{ language==0?item.name:item.ename }}</li>
              </ul>
            </div>
          </el-col>
          <el-col :lg="19">
            <div class="infoPart pd20" v-if="activeIndex==0">
              <h3 class="leftboderTT">{{ language==0?menu[activeIndex].name:menu[activeIndex].ename }}</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>

            <div class="infoPart pd20" v-if="activeIndex==1">
              <h3 class="leftboderTT">{{ language==0?menu[activeIndex].name:menu[activeIndex].ename }}</h3>
              <div class="content" v-if="language==0">
                &ensp;&ensp;&ensp;&ensp;WDSF亚洲体育舞蹈节，创办于2023年，是世界体育舞蹈联合会（WDSF）、亚洲体育舞蹈联合会（DSA）、中国体育舞蹈联合会（CDSF）和无锡市四方共同打造的世界级体育舞蹈IP。该项盛会采用“多赛合办、赛会一体”的创新模式，于每年7月，在无锡开展为期一周的体育舞蹈顶级赛事、职业培训、博览盛会、主题展览、行业会议等赛事活动，围绕“节日有竞赛、竞赛节日化”的指导原则，让7月的无锡成为体育舞蹈创意的栖息地、体育舞蹈艺术家的乐土和体育舞蹈文化旅游的热土，有效启动并积极推动世界体育舞蹈中心从欧洲向中国的长期转移，在中国无锡打造“东方舞都”和“世界体育舞蹈第三极”。
                <br/>
                &ensp;&ensp;&ensp;&ensp;以WDSF亚洲体育舞蹈节为引领，世界体育舞蹈（无锡）中心顺利落户。世界体育舞蹈（无锡）中心是集世界、洲际、中国三位一体的联合总部基地，也是行业首创的、世界体育组织与国内央地共同创建的、面向全球的产业中心。中心链接国际示范区、产业强市、运动友好型城市等无锡市产业发展政策，推动体育舞蹈在无锡快速形成项目产业集群，并吸引一批与之配套的上下游经济主体，为提升无锡全球体育城市竞争力和城市体育产业能级，提供最高集聚力。
                <br/>
                &ensp;&ensp;&ensp;&ensp;首届WDSF亚洲体育舞蹈节，设置了2023年WDSF世界标准舞锦标赛、2023年WDSF世界体育舞蹈大奖赛（中国无锡）、2023年全国体育舞蹈公开系列赛（无锡站）三项国际、国内顶级赛事，吸引了来自全球39个国家及地区的1,716名顶级舞者参与。
                <br/>
                &ensp;&ensp;&ensp;&ensp;2024年7月17日至21日，无锡将迎来第二届WDSF亚洲体育舞蹈节。本届盛会在赛事组成上重磅加码，将采用“七赛合一”的办赛方式，举办2024年WDSF世界拉丁舞锦标赛、2024年WDSF世界青年标准舞锦标赛、2024年WDSF世界少年Ⅱ拉丁舞锦标赛、2024年WDSF大奖赛（标准舞、拉丁舞）、2024年WDSF职业世界杯（标准舞、拉丁舞）、2024年WDSF公开赛（标准舞、拉丁舞）以及2024年全国青少年体育舞蹈锦标赛等一系列重点赛事。
              </div>
              <div class="content" v-else>
                WDSF Asian DanceSport Festival, founded in 2023, is a world-class sport dance IP
                jointly created by four parties: the World DanceSport Federation (WDSF), DanceSport
                Asia (DSA), Chinese DanceSport Federation (CDSF), and Wuxi City. The event adopts
                the innovative mode of "multiple competitions, competition, and congress as a whole",
                and carries out a week-long top sport dance events, professional training, expo, theme
                exhibition, industry conference, and other activities in Wuxi in July every year, and
                focuses on the guiding principle of "competition gets into the festive spirit", so that Wuxi
                in July becomes a habitat for sport dance creativity, a wonderland for sport dance
                artists and a hot spot for sport dance cultural tourism, effectively launching and actively
                promoting the long-term transfer of the world's sports dance center from Europe to
                China, and building the "Oriental Dance Capital" and the "Third Pole of World Sports
                Dance" in Wuxi, China.
                <br/><br/>
                &ensp;&ensp;&ensp;&ensp;With the WDSF Asian DanceSport Festival as the lead, the World DanceSport (Wuxi)
                Center was successfully settled. As a joint headquarters for the world, continental, and
                China, also the first of its kind in the industry, a globally oriented industrial center jointly
                created by a world sports organization and the domestic central and local governments.
                Wuxi Center links a series of industrial development policies as an international
                demonstration zone, major industrial city, and sports-friendly city, to promote sports
                dance in Wuxi to quickly form project industry clusters, and attract a number of
                supporting upstream and downstream economic subjects, to enhance the
                competitiveness of Wuxi's global sports city and the city's sports industry capacity, to
                provide the highest agglomeration force.
                The First WDSF Asian DanceSport Festival·Wuxi 2023 has covered 3 international and
                domestic top events as 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.<br/><br/>
                &ensp;&ensp;&ensp;&ensp;Wuxi will celebrate its 2nd WDSF Asian DanceSport Festival (July 17th
                -21st
                , 2024),
                which turns out to be a blockbuster as ”7 in 1” event mode, 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.<br/>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-card>

      <div class="indexTitle"  v-if="false">
        <h3 class="leftboderTT">{{ language==0?'联系我们':'CONTACT' }}</h3>
      </div>
      <div class="mapBox mb20" v-if="false">
        <div class="content">
          <div :class="index==0?'phone':index==1?'address':'email'" v-for="(item,index) in contact">
            <h4>{{language==1?item.ename:item.name}}</h4>
            <p>{{language==0?item.value:item.evalue}}</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)

const menu = ref([
  {name:'组织机构',ename:'Organizer'},
  {name:'无锡WDSF亚洲体育舞蹈节',ename:'WUXI WDSF ASIAN DANCESPORT FESTIVAL'},
  // {name:'体育舞蹈项目',ename:''},
])

const contact = ref([
  {name:'电话',ename:'Phone',value:'武先生：15606190026',evalue:'Mr.WU:15606190026'},
  {name:'地址',ename:'Address',value:'江苏省 无锡市太湖新城和风路与清舒交叉口东北100米',
    evalue:'No.88 Qingshu Road,Economic Development District, Wuxi City,Jiangsu Province,China'},
  {name:'邮箱',ename:'Email',value:'info@wdsfwuxicenter.com',evalue:'info@wdsfwuxicenter.com'},
])
</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>