<template>
  <div>
    <div class="mt20" />
    <div class="box">
      <el-card>
        <el-row :gutter="20">
          <el-col :lg="5">
            <div class="leftNav">
              <ul>
                <li class="active">About the Organizer</li>
                <li>WDSF Asian Dancesport Festival</li>
                <li>About Sports Dance</li>
              </ul>
            </div>
          </el-col>
          <el-col :lg="19">
            <div class="infoPart pd20">
              <h3 class="leftboderTT">About the organizer</h3>
              <div class="content">
                <p>On site, the World Sports Dance (Wuxi) Center, a joint headquarters base established by the World Sports Dance Federation that integrates the world, intercontinental, and China, was officially unveiled. In the future, Wuxi will take the settlement of its headquarters as an opportunity to launch and cultivate its own brand event, the China Wuxi Sports and Dance Festival, and continue to expand communication and cooperation, event research and development, education and training and other fields, committed to creating a global sports and dance landmark city and a unique and charming international event city.</p>
                <p>The Asian Sports Dance Festival has landed in Wuxi in an innovative form of "three competitions in one". Over a period of four days, it will hold two international level events, the World Standard Dance Championships and the World Sports Dance Grand Prix (Wuxi Station), as well as a national level event, the China Sports Dance Open Series (Wuxi Station), attracting more than 1700 participants from 39 countries and regions to participate.</p>
                <p>Sports dance is divided into two groups and ten dance genres, among which the standard dance (also known as modern dance) group includes waltz, Viennese waltz, tango, foxtrot, and brisk step. The Latin dance project group includes rumba, cha cha, samba, cowboy, and bullfighting dance. According to incomplete statistics, there are currently over 50 million sports dance enthusiasts in China.</p>
                <p>On site, Latin Girl dance performance and sports dance costume show were performed brilliantly. Top domestic and foreign athletes compete passionately, showcasing their gorgeous makeup and dance moves to the heart of the "gentlemen" and "beauties" participating in the competition.</p>
                <p>The "most beautiful" sports project is shining on the shore of the Taihu Lake Lake, creating the highlight scene of the annual global sports dance field, and giving another shining card of Wuxi sports.
                </p>
                <p>The Asian Sports Dance Festival is open to the public with two types of tickets: VIP and stand tickets. At the same time, the event will also be broadcast online through the Olympic Channel, People's Daily Vision, Migu, the official website of China Sports Dance Federation and Tiktok, Asia Sports Dance Festival WeChat video number, Tiger Teeth, Penguin, Weibo and other platforms.</p>

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

              </div>
            </div>
          </el-col>
        </el-row>
      </el-card>

      <div class="indexTitle">
        <h3 class="leftboderTT">CONTACT</h3>
      </div>
      <div class="mapBox mb20">
        <div class="content">
          <div class="phone">
            <h4>Phone</h4>
            <p>Miss Chang：+86 18888888888</p>
          </div>
          <div class="address">
            <h4>Address</h4>
            <p>No.88 Qingshu Road,Economic and Development District, Wuxi City,Jiangsu Province,China</p>
          </div>
          <div class="email">
            <h4>Email</h4>
            <p>8888989@163.com</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>

</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;
    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;}
}
@media (max-width: 800px) {
  .mapBox {
    div {
      padding-left: 40px;
    }

    .content {
      width: 80%;
      left: 10%;
      padding: 10px 20px 0 20px;
    }

    .address {
      margin: 30px 0;
    }

    p {
      text-align: left;
      word-break: break-all;
    }
  }
}
</style>