<style lang="scss" scoped>
/deep/.scroll {
  overflow: inherit;
}
.banner {
  width: 100%;
}
.wrapper {
  max-width: 1200px;
  margin: 0 auto;
}
.about-content {
  width: 55%;
  margin-right: 5%;
}
.about-img {
  width: 40%;
  height: 30%;
  object-fit: cover;
}
.about-img-m {
  width: 100%;
  object-fit: cover;
}
.tips {
  width: 42px;
  height: 3px;
  background: #000000;
}
.team {
  padding-top: 90px;
  background: url("../assets/img/about/team-bg.png") no-repeat;
}
.team-m {
  padding-top: 48px;
  background: url("../assets/img/about/team-bg-m.png") no-repeat;
  background-size: 100% auto;
}
.card {
  padding: 25px 30px;
  width: 405px;
  height: 537px;
  background: linear-gradient(-7deg, #fefeff, #f4f6f9);
  border: 2px solid rgba(255, 255, 255, 0.81);
  box-shadow: 0px 13px 29px 0px rgba(39, 77, 192, 0.08);
  border-radius: 8px;
  border-radius: 8px;
  .title {
    font-size: 26px;
  }
  .desc {
    font-size: 18px;
  }
}
.card-m {
  padding: 15px 25px;
  background: linear-gradient(-7deg, #fefeff, #f4f6f9);
  border: 2px solid rgba(255, 255, 255, 0.81);
  box-shadow: 0px 13px 29px 0px rgba(39, 77, 192, 0.08);
  border-radius: 8px;
  .title {
    font-size: 18px;
  }
  .desc {
    font-size: 14px;
  }
}
.avotar {
  width: 168px;
  height: 168px;
  border-radius: 50%;
}
.avotar-m {
  width: 86px;
  height: 86px;
}
.team-ml {
  margin-left: 80px;
}
.team-ml-m {
  margin-left: 25px;
}
.mt-150 {
  margin-top: 150px;
}
.mt-50 {
  margin-top: 50px;
}
.mt-100 {
  margin-top: 100px;
}
.line-1 {
  width: 54px;
  height: 4px;
  background: #000000;
  margin: 0 auto;
}
.line-2 {
  width: 154px;
  height: 2px;
  background: #434343;
  margin: -3px auto;
}
.product-card {
  width: 241px;
  height: 97px;
  background: linear-gradient(-7deg, #fefeff, #f4f6f9);
  border: 2px solid rgba(255, 255, 255, 0.81);
  box-shadow: 0px 13px 29px 0px rgba(39, 77, 192, 0.08);
  border-radius: 8px;
  padding: 16px 15px 16px 35px;
  .circle {
    width: 32px;
    height: 32px;
    background: var(--q-color-primary);
    border-radius: 50%;
    text-align: center;
    color: #fff;
    line-height: 32px;
    margin-right: 14px;
    margin-top: 4px;
  }
  .tips {
    width: 52px;
    height: 2px;
    background: #000000;
    margin: 2px 0;
  }
  .name-circle {
    width: 6px;
    height: 6px;
    background: #000000;
    display: inline-block;
    border-radius: 50%;
  }
}
.product-card-m {
  width: 160px;
  background: linear-gradient(-7deg, #fefeff, #f4f6f9);
  border: 1px solid rgba(255, 255, 255, 0.81);
  box-shadow: 0px 13px 29px 0px rgba(39, 77, 192, 0.08);
  border-radius: 8px;
  padding: 16px;
  .circle {
    width: 16px;
    height: 16px;
    background: var(--q-color-primary);
    border-radius: 50%;
    text-align: center;
    color: #fff;
    line-height: 16px;
    margin-right: 10px;
    margin-top: 4px;
  }
  .tips {
    width: 52px;
    height: 2px;
    background: #000000;
    margin: 2px 0;
  }
  .name-circle {
    width: 6px;
    height: 6px;
    background: #000000;
    display: inline-block;
    border-radius: 50%;
  }
}
.map {
  width: 100%;
  max-width: 1200px;
  display: inline-block;
}
.prize {
  margin-top: 20px;
  width: 192px;
   flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .prize-cover {
    width: 155px;
    height: 201px;
    img {
    width: 155px;
    height: 201px;
    object-fit: contain;
    }
  }
  .line {
    width: 100%;
    height: 3px;
    background: #efefef;
    margin: 44px 0 0 0;
  }
  .tips {
    margin: -6px auto 15px auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
  }
}
.prize-m {
  margin-top: 20px;
  width: 172px;
   flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .prize-cover {
    width: 125px;
    height: 180px;
    img {
    width: 125px;
    height: 180px;
    object-fit: contain;
    }
  }
  .line {
    width: 100%;
    height: 3px;
    background: #efefef;
    margin: 44px 0 0 0;
  }
  .tips {
    margin: -6px auto 15px auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
  }
}
.partners-card-pc {
  width: 756px;
  height: 234px;
  margin: 50px auto 100px auto;
  padding: 56px;
}
.partners-card {
  background: linear-gradient(-7deg, #fefeff, #f4f6f9);
  border: 2px solid rgba(255, 255, 255, 0.81);
  box-shadow: 0px 13px 29px 0px rgba(39, 77, 192, 0.08);
  border-radius: 6px 16px 16px 16px;
  padding: 20px;
  .partner-img {
    width: 197px;
    display: block;
    margin-right: 70px;
  }
  .partner-img-m {
    display: block;
    margin-right: 20px;
    width: 100px;
  }
}
.partners-list {
  overflow-x: auto;
}
.partner {
  width: 150px;
  height: 80px;
    object-fit: contain;
  margin-right: 20px;
}
.about {
  top: -30px;
  left: 0;
  z-index: -1;
  font-size: 70px;
  font-family: FZDaHei-B02S;
  font-weight: 400;
  color: #eeeeee;
}
.about-m {
  top: -15px;
  left: 0;
  z-index: -1;
  font-size: 35px;
  font-family: FZDaHei-B02S;
  font-weight: 400;
  color: #eeeeee;
}
.mobile {
::v-deep .q-carousel--arrows-horizontal.q-carousel--with-padding .q-carousel__slide {
  padding-left: 0;
}
}
</style>
<template>
  <div :class="$q.platform.is.desktop ? '' : 'mobile'">
    <img v-if="$q.platform.is.desktop" class="banner" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/banner.png" />
    <img v-else class="banner" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/banner-m.png" />
    <div
      class=""
      :class="
        $q.platform.is.desktop ? 'flex justify-between wrapper mt-150' : ''
      "
    >
      <div
        class=""
        :class="$q.platform.is.desktop ? 'about-content wrapper' : 'q-pa-md'"
      >
        <div class="relative bold" :class="$q.platform.is.desktop ? 'f40' : 'f25'">
          關於我們
          <span class="absolute" :class="$q.platform.is.desktop ? 'about' : 'about-m'">ABOUTUS</span>
        </div>
        <div class="bold q-my-md" :class="$q.platform.is.desktop ? 'f20' : 'f14'">〝四川和平国际旅行社”旅遊品牌成立於1995年</div>
        <div class="tips"></div>
        <div class=" lh200 q-my-md" :class="$q.platform.is.desktop ? 'f16' : 'f12'">
          公司原本从地接社，三峡包船运营，入境中国旅行市场（台湾，新加坡，马来西亚，印尼，日本市场）转型出境市场，经过几年来的转变<br />
          由单一日本出境转型为全产品出境旅游专线供货商，主要经营项目为同业出境旅游批发商<br />
          2013年以全资并购四川和平国际旅行社( 国际旅游许可证号：
          L-SC-CJ00015)<br />
          四川和平国际旅行社为四川省出境资质旅行社，是经国家旅游局批准、四川省工商局注册<br />
          具独立法人资格并向旅游主管部门缴纳足额质量保证金的旅游企业，也因此公司正式由一个旅游品牌转型为一个有独立资质的旅游公司
        </div>
        <div class="bold q-mb-md" :class="$q.platform.is.desktop ? 'f20 q-mt-xl q-mb-md' : 'f14 q-mt-lg'">經營理念——以同業市場為出發</div>
        <div class="lh200" :class="$q.platform.is.desktop ? 'f16' : 'f12'">
          公司是由一群年轻且对旅游有所执着的【旅游人】所组成的旅行社<br />
          我们理念是以客户为出发点，反向操作以尽乎苛求的高质量来满足客户的需求为宗旨<br />
          坚持不用不合理低价来吸引消费者<br />
          <!-- 我们深信【我们虽然不是最大，但却是最好的旅行社】、【我们虽然不是历史最悠久，但却是最用心的旅行社】<br /> -->
          我们虽然不是最大，但却是充满热情、关注细节并专注于每一位客户需求的旅行社。我们以个性化的服务和贴心的关怀著称，致力于为每位客户打造独特而难忘的旅行体验。<br />
          秉持这样的理念，所以在出境旅游版块中经过我们的用心经营<br />
          目前已经是成都旅游界有口碑的一家出境供货商
        </div>
      </div>
      <img v-if="$q.platform.is.desktop"
        class="about-img"
        src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/about.png"
      />
    </div>

    <!-- <div class="flex justify-center" :class="$q.platform.is.desktop ? 'team mt-150' : 'team-m q-mt-lg'">
      <div>
        <img :style="$q.platform.is.desktop ? 'width: 71px' : 'width: 35px'" src="../assets/img/about/team.png" />
        <div class=" bold white q-mt-md" :class="$q.platform.is.desktop ? 'team-ml f40' : 'f25 team-ml-m'">经营团队及职责范围</div>
        <div class=" white" :class="$q.platform.is.desktop ? 'f20 q-mt-lg team-ml' : '14 q-mt-md team-ml-m'">公司核心團隊人員</div>
      </div>
      <div :class="$q.platform.is.desktop ? 'q-mx-xl card' : 'q-ma-md card-m'">
        <div class="flex justify-between">
          <div class="q-mt-md q-ml-md">
            <div class="title bold">谢军女士</div>
            <div class="desc text-grey-6">财务总监</div>
            <div class="tips q-mt-sm"></div>
          </div>
          <img class="avotar" :class="$q.platform.is.desktop ? '' : 'avotar-m'" src="../assets/img/about/cfo.png" />
        </div>
        <div class=" lh200 q-mt-lg" :class="$q.platform.is.desktop ? 'f16' : 'f12'">
          四川成都人,旅游资历20年,成都旅游界知名人物,在四川旅游领域当中的传奇人士之一,为四川地区旅游转型最成功的人物,在短暂的5年内成功从4人公司到目前四川和平国旅集团公司,在四川旅游业界传为佳话,目前和平国旅集团也是西南地区日本与巴里岛旅游最大的组团社(数据可查),其他线路亦有不错的表现,并且是各大旅游平台的产品供货商,专注旅游丰富的业界资源与强势的旅游业操作实力可提供本团队强大的市场后盾
        </div>
      </div>
      <div class="q-mt-xl" :class="$q.platform.is.desktop ? 'card' : 'q-ma-md card-m'">
        <div class="flex justify-between">
          <div class="q-mt-md q-ml-md">
            <div class="title bold">徐稚升先生</div>
            <div class="desc text-grey-6">销售总经理</div>
            <div class="tips q-mt-sm"></div>
          </div>
          <img class="avotar" :class="$q.platform.is.desktop ? '' : 'avotar-m'" src="../assets/img/about/ceo.png" />
        </div>
        <div class=" lh200 q-mt-lg" :class="$q.platform.is.desktop ? 'f16' : 'f12'">
          台湾台北人,旅游资历15年,极力邀请到本团队的台湾人,在台湾受过完整的专业旅游业训练,有着旅游界最缺乏的营销企画优势,对于旅游互联网通路亦有独到见解,并拥有的成功经营经验与优势的组织管理能力,在四川地区成功引进台湾先进的旅游理念,首创旅行社成立科技公司,大力推动互联网结合旅游概念(ERP系统),从早期B2B概念的推展模式,到现在的B2B2C+O2O的概念,到现在的N+1模式，完全是以不同业界的传统模式推展,
        </div>
      </div>
    </div> -->

    <div class="" :class="$q.platform.is.desktop ? 'wrapper mt-150' : 'q-pa-md mt-50'">
      <div class="text-center  bold" :class="$q.platform.is.desktop ? 'f40' : 'f25'">經營項目</div>
      <div class="line-1"></div>
      <div class="line-2"></div>
      <div class="text-center  lh150 q-mt-lg" :class="$q.platform.is.desktop ? 'f20' : 'f12'">
        四川和平国际旅行社专注出境旅游产品的供货商<br />目前主要业务范畴定位同业销售为主(B2B)，目前为西南地区日本专线优质供应商
      </div>
      <q-carousel
        v-model="hotSilder"
        transition-prev="slide-right"
        transition-next="slide-left"
        swipeable
        animated
        control-color="dark"
        control-type="regular"
        padding
        arrows
        height="115px"
        flat
        class="bg-transparent rounded-borders q-mt-md"
      >
        <q-carousel-slide
          :name="index"
          v-for="(item, index) in Math.ceil(lineList.length / lineListCount)"
          :key="index"
          class="column no-wrap"
        >
          <div
            class="row fit justify-start items-center q-gutter-md q-col-gutter no-wrap"
          >
            <template v-for="(x, i) in lineListCount">
              <div
                :key="i"
                v-if="i + index * lineListCount < lineList.length"
                :product="lineList[i + index * lineListCount]"
              >
                <div v-if="$q.platform.is.desktop" class="product-card flex">
                  <div class="circle">{{lineList[i + index * lineListCount]['tag']}}</div>
                  <div>
                    <div class="f20 bold">{{lineList[i + index * lineListCount]['label']}}</div>
                    <div class="tips"></div>
                    <div class="flex">
                    <div class="f16 flex items-center q-mr-md" v-for="item in lineList[i + index * lineListCount]['city']" :key="item">
                      <span class="name-circle q-mr-sm"></span>{{item}}
                    </div></div>
                  </div>
                </div>
                <div v-else class="product-card-m flex">
                  <div class="circle">{{lineList[i + index * lineListCount]['tag']}}</div>
                  <div>
                    <div class="f14 bold">{{lineList[i + index * lineListCount]['label']}}</div>
                    <div class="tips"></div>
                    <div>
                    <div class="f12 flex items-center q-mr-md" v-for="item in lineList[i + index * lineListCount]['city']" :key="item">
                      <span class="name-circle q-mr-sm"></span>{{item}}
                    </div></div>
                  </div>
                </div>
              </div>
            </template>
          </div>
        </q-carousel-slide>
      </q-carousel>
      <img class="map q-mt-lg" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/map.png" />
    </div>

    <div class=" relative" style="z-index: 1" :class="$q.platform.is.desktop ? 'mt-150' : 'mt-50'">
      <div class="text-center  bold" :class="$q.platform.is.desktop ? 'f40' : 'f25'">公司組織架構</div>
      <div class="line-1"></div>
      <div class="line-2"></div>
    </div>
    <img v-if="$q.platform.is.desktop"
      class="full-width"
      style="margin-top: -10%"
      src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/partners.png?t=123456"
    />
    <img v-else
      class="full-width q-mt-md"
      src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/partners-m.png?t=123456"
    />
    <div :class="$q.platform.is.desktop ? 'wrapper mt-150' : 'q-pa-md'">
      <div  class="text-center  bold" :class="$q.platform.is.desktop ? 'f40' : 'f25'">歷年榮譽</div>
      <div class="line-1"></div>
      <div class="line-2"></div>

      <q-carousel
        v-model="prize"
        transition-prev="slide-right"
        transition-next="slide-left"
        swipeable
        animated
        control-color="dark"
        control-type="regular"
        padding
        arrows
        flat
        class="bg-transparent rounded-borders " :class="$q.platform.is.desktop ? 'mt-100' : 'q-mt-md'"
      >
        <q-carousel-slide
          :name="index"
          v-for="(item, index) in Math.ceil(prizesList.length / prizesCount)"
          :key="index"
          class="column no-wrap"
        >
          <div
            class="row fit justify-start items-center q-col-gutter no-wrap"
          >
            <template v-for="(x, i) in prizesCount">
              <div :class="$q.platform.is.desktop ? 'prize' : 'prize-m'"
                :key="i"
                v-if="i + index * prizesCount < prizesList.length"
                :product="prizesList[i + index * prizesCount]"
              ><div
            class="prize-cover"><img
            :src="require(`../assets/img/about/${prizesList[i + index * prizesCount].img}.png`)"
          /></div>
          <div class="line"></div>
          <div class="tips bg-primary"></div>
          <div class="primary bold text-center" :class="$q.platform.is.desktop ? 'f20' : 'f14'">{{ prizesList[i + index * prizesCount].time }}</div>
          <div class=" text-center q-mt-sm" :class="$q.platform.is.desktop ? 'f16' : 'f12'">{{ prizesList[i + index * prizesCount].prize }}</div>
          <div class=" text-center" :class="$q.platform.is.desktop ? 'f16' : 'f12'">{{ prizesList[i + index * prizesCount].desc }}</div>
              </div>
            </template>
          </div>
        </q-carousel-slide>
      </q-carousel>
    </div>

    <div class="" :class="$q.platform.is.desktop ? 'wrapper mt-150' : 'q-pa-md mt-50'">
      <div class="text-center  bold" :class="$q.platform.is.desktop ? 'f40' : 'f25'">合作的夥伴</div>
      <div class="line-1"></div>
      <div class="line-2"></div>
      <div
        class="partners-card no-wrap flex justify-between items-center" :class="$q.platform.is.desktop ? 'partners-card-pc' : 'q-ma-md'"
      >
        <img class="" :class="$q.platform.is.desktop ? 'partner-img' : 'partner-img-m'" :src="require(`../assets/img/about/${airlineSelect.icon}.png`)" />
        <div>
          <div class=" bold" :class="$q.platform.is.desktop ? 'f20' : 'f14'">{{airlineSelect.label}}</div>
          <div class="lh200" :class="$q.platform.is.desktop ? 'f16' : 'f12'">{{airlineSelect.desc}}
          </div>
        </div>
      </div>
      <q-carousel
        v-model="airline"
        transition-prev="slide-right"
        transition-next="slide-left"
        swipeable
        animated
        control-color="dark"
        control-type="regular"
        padding
        arrows
        height="100px"
        flat
        class="bg-transparent rounded-borders q-mt-md"
      >
        <q-carousel-slide
          :name="index"
          v-for="(item, index) in Math.ceil(airlineList.length / airlineCount)"
          :key="index"
          class="column no-wrap"
        >
          <div
            class="row fit justify-start items-center q-gutter-md q-col-gutter no-wrap"
          >
            <template v-for="(x, i) in airlineCount">
              <img @click="clickAirline(airlineList[i + index * airlineCount])"
                :key="i"
                v-if="i + index * airlineCount < airlineList.length"
                class="partner"
                :src="require(`../assets/img/about/${airlineList[i + index * airlineCount].icon}.png`)"
              />
            </template>
          </div>
        </q-carousel-slide>
      </q-carousel>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      hotSilder: 0,
      prize: 0,
      airline: 0,
      lineListCount: 2,
      airlineCount:2,
      prizesCount: 2,
      lineListWidth: 250,
      airlineWidth: 190,
      prizesWidth: 192,
      lineList: [{
        tag:'A',
          label: "出境日本线",
          city: ['东京', '奈良']
        },{
        tag:'B',
          label: "出境欧洲线",
          city: ['瑞典', '土耳其']
        },{
        tag:'C',
          label: "出境南亚线",
          city: ['斯里兰卡']
        },{
        tag:'D',
          label: "出境中东非线",
          city: ['埃及']
        },{
        tag:'E',
          label: "国内线",
          city: ['四川', '西藏']
        },],
        airlineList: [{label: '中国东方航空', desc: '东航实施“中枢网络运营”战略，建立以上海为中心、依托长江三角洲地区、连接全球市场、客货并重的航空运输网络。拥有贯通中国东西部，连接亚洲、欧洲、澳洲和美洲的航线网络。',icon: 'logo-dongfang'},
        {label: '中国国际航空', desc: '国航秉承“安全第一、旅客至上”的理念，推出以“放心、顺心、舒心、动心”为内容的“四心服务工程”。在国内占据北京市场主导地位的同时，致力于提升在全球航空网络的地位。',icon: 'logo-guoji'},
        {label: '香港航空', desc: '香港航空有限公司成立于2006年，乃全服务航空公司，航线网络以中国香港为基地，广泛覆盖亚太地区超过30个主要城市，包括澳洲黄金海岸、北京、上海、台北、东京、札幌、曼谷、巴厘岛、冲绳和奥克兰等。',icon: 'logo-hongkong'},
        {label: '卡塔尔航空', desc: '卡塔尔航空是一家屡获殊荣的航空公司，最近在国际航空运输评级组织 Skytrax 管理的 2022 年世界航空公司奖中被宣布为“年度航空公司”。该航空公司继续成为卓越的代名词，被评为“世界最佳商务舱”、“世界最佳商务舱休息室餐饮”和“中东最佳航空公司”。',icon: 'logo-kateer'},
        {label: '全日空航空', desc: '全日本空输(ANA)是一家日本的航空公司。也是亚洲最大的航空公司之一， 被评之为五星航空为我社日本系列团主要配搭航空之一。',icon: 'logo-quanri'},
        {label: '四川航空', desc: '作为中国最具特色的航空公司之一，川航以安全为品牌核心价值，持续安全飞行34年，为全球旅客提供深具“中国元素 四川味道”的航空服务',icon: 'logo-sichaun'},
        {label: '泰国国际航空', desc: '泰国国际航空是一家高质量的全方位服务航空公司，拥有强大的泰国品牌，将泰国与世界联系起来，并产生始终如一的健康利润率',icon: 'logo-taiguo'},],
      airlineSelect: {},
      prizesList: [
        {
          img: "prize-2009",
          time: "2009",
          prize: "国航",
          desc: '"市场开发一等奖"',
        },
        {
          img: "prize-2010",
          time: "2010",
          prize: "国航",
          desc: '"国际最佳合作奖"',
        },
        {
          img: "prize-2010-1",
          time: "2010",
          prize: "国內",
          desc: '"国际最佳合作奖"',
        },
        {
          img: "prize-2011",
          time: "2011",
          prize: "国航",
          desc: '"最佳开拓奖"',
        },
        {
          img: "prize-2014",
          time: "2014",
          prize: "港航",
          desc: '"年度杰出销售奖"',
        },
        {
          img: "prize-2014-1",
          time: "2014",
          prize: "全日空",
          desc: '"成渝地区优秀合作伙伴奖"',
        },
        {
          img: "prize-2015",
          time: "2015",
          prize: "成都旅行社协会",
          desc: '"金牌专线"',
        },
      ],
    };
  },
  created() {
    this.airlineSelect = this.airlineList[0]},
  mounted() {
    this.onWindowResize()
    window.addEventListener('resize', this.onWindowResize)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.onWindowResize)
  },
  methods: {
    clickAirline(item) {
      this.airlineSelect = item
    },
    onWindowResize() {
      console.log('onWindowResize', window.innerWidth)
      if(this.$q.platform.is.mobile) {
        return
      }
      let width = window.innerWidth
      if(width > 1200) {
        width = 1200
      }
      this.lineListCount = Math.floor(width/ this.lineListWidth)
      this.airlineCount = Math.floor(width / this.airlineWidth)
      this.prizesCount = Math.floor(width / this.prizesWidth)
      console.log('this.lineListCount', this.lineListCount,this.airlineCount,this.prizesCount)
    }
  }
};
</script>
