<style lang="scss" scoped>
.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;
}
.tips {
  width: 42px;
  height: 3px;
  background: #000000;
}
.team {
  padding-top: 90px;
  background: url("../assets/img/about/team-bg.png") no-repeat;
}
.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;
}
.avotar {
  width: 168px;
  height: 168px;
  border-radius: 50%;
}
.team-ml {
  margin-left: 80px;
}
.mt-150 {
  margin-top: 150px;
}
.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 35px;
  .circle {
    width: 32px;
    height: 32px;
    background: $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%;
  }
}
.map {
  width: 100%;
  max-width: 1200px;
  display: inline-block;
}
.prize {
  margin-top: 20px;
  width: 192px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .prize-cover {
    width: 155px;
    height: 201px;
  }
  .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 {
  width: 756px;
  height: 234px;
  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;
  margin: 0 auto;
  padding: 56px;
  .partner-img {
    width: 197px;
height: 51px;
margin-right: 70px;
  }
}
.partners-list {
  overflow-x: auto;
}
.partner {
  width: 150px;
  height: 80px;
}
</style>
<template>
  <div>
    <img class="banner" src="../assets/img/about/banner.png" />
    <div class="flex justify-between wrapper mt-150">
      <div class="about-content">
        <div class="f40 bold wrapper">
          關於我們
          <span>ABOUTUS</span>
        </div>
        <div class="f20 bold q-my-md">〝印象之旅”旅遊品牌成立於2009年3月</div>
        <div class="tips"></div>
        <div class="f16 lh200 q-my-md">
          公司原本为一单纯的日本专线供货商公司营运初期为日本出境游，经过几年来的转变<br />
          目前已转型为全产品出境旅游专线供货商，主要经营项目为同业出境旅游批发商<br />
          2013年以全资并购四川和平国际旅行社( 国际旅游许可证号：
          L-SC-CJ00015)<br />
          四川和平国际旅行社为四川省出境资质旅行社，是经国家旅游局批准、四川省工商局注册<br />
          具独立法人资格并向旅游主管部门缴纳足额质量保证金的旅游企业，也因此公司正式由一个旅游品牌转型为一个有独立资质的旅游公司
        </div>
        <div class="f20 bold q-mt-xl q-mb-md">經營理念——以同業市場為出發</div>
        <div class="f16 lh200">
          公司是由一群年轻且对旅游有所执着的【旅游人】所组成的旅行社<br />
          我们理念是以客户为出发点，反向操作以尽乎苛求的高质量来满足客户的需求为宗旨<br />
          坚持不合理低价来吸引消费者<br />
          我们深信【我们虽然不是最大，但却是最好的旅行社】、【我们虽然不是历史最悠久，但却是最用心的旅行社】<br />
          秉持这样的理念，所以在出境旅游版块中经过我们的用心经营<br />
          目前已经是成都旅游界有口碑的一家出境供货商
        </div>
      </div>
      <img class="about-img" src="../assets/img/about/about.png" />
    </div>

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

    <div class="mt-150 wrapper">
      <div class="text-center f40 bold">經營項目</div>
      <div class="line-1"></div>
      <div class="line-2"></div>
      <div class="text-center f20 lh150 q-mt-lg">
        印象之旅专注出境旅游产品的供货商<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="100px"
          flat
          class="bg-transparent rounded-borders q-mt-md"
      >
        <q-carousel-slide :name="index" v-for="(item, index) in Math.ceil(partnersList.length/topPageCount)" :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 topPageCount">
              
      <div :key="i" v-if="(i+(index*topPageCount))<partnersList.length" :product="partnersList[i+(index*topPageCount)]">
        <div class="product-card flex">
          <div class="circle">A</div>
          <div>
            <div class="f20 bold">東北亞線</div>
            <div class="tips"></div>
            <div class="f16 flex items-center">
              <span class="name-circle"></span>日本
            </div>
          </div>
        </div>
      </div>
            </template>
          </div>
        </q-carousel-slide>
        </q-carousel>
      <img class="map q-mt-lg" src="../assets/img/about/map.png" />
    </div>

    <div class="mt-150 relative" style="z-index: 1">
      <div class="text-center f40 bold">公司組織架構</div>
      <div class="line-1"></div>
      <div class="line-2"></div>
    </div>
    <img
      class="full-width"
      style="margin-top: -10%"
      src="../assets/img/about/partners.png"
    />
    <div class="mt-150 wrapper">
      <div class="text-center f40 bold">歷年榮譽</div>
      <div class="line-1"></div>
      <div class="line-2"></div>
      <div class="flex mt-100">
        <div class="prize" v-for="item in prizesList" :key="item.key">
          <img
            class="prize-cover"
            :src="require(`../assets/img/about/${item.img}.png`)"
          />
          <div class="line"></div>
          <div class="tips bg-primary"></div>
          <div class="primary f20 bold text-center">{{ item.time }}</div>
          <div class="f16 text-center q-mt-sm">{{ item.prize }}</div>
          <div class="f16 text-center">{{ item.desc }}</div>
        </div>
      </div>
    </div>

    <div class="mt-150">
      <div class="text-center f40 bold">合作的夥伴</div>
      <div class="line-1"></div>
      <div class="line-2"></div>
      <div style="margin-top: 50px; margin-bottom: 100px" class="partners-card flex no-wrap justify-between items-center">
    <img class="partner-img" src="../assets/img/about/partners.png"/>
        <div>
          <div class="f20 bold">全日空航空</div>
          <div class="f16 lh200">全日本空输(ANA)是一家日本的航空公司。 也是亚洲最大的航空公司之一，被评之为五星航空 为我社日本系列团主要配搭航空之一。</div>
        </div>
      </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="100px"
          flat
          class="bg-transparent rounded-borders q-mt-md"
      >
        <q-carousel-slide :name="index" v-for="(item, index) in Math.ceil(partnersList.length/topPageCount)" :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 topPageCount">
              <img :key="i" v-if="(i+(index*topPageCount))<partnersList.length" :product="partnersList[i+(index*topPageCount)]" class="partner" src="../assets/img/about/banner.png" />
            </template>
          </div>
        </q-carousel-slide>
        </q-carousel>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      hotSilder:0,
      topPageCount: 10,
      partnersList: [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,],
      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: '"金牌专线"',
        },
      ],
    };
  },
};
</script>