cgaii_official_de/src/pages/join/index.vue

<template>
<div class="layout" >
    <imageQuery :screens="screens" @exitHandle="exitHandle" />
    <div class="l-introduce" :class="{'ml-introduce':isMobile}">
      <ctitle :title="'Über uns'"></ctitle>
      <div class="join-l" style="padding-bottom:0" :class="{'one':!isMobile}">
        <template v-if="isMobile">
          <mRotateimg :imgs="content.text[0].imgs" @clickHandle="screens = content.text[0].imgs"/>
          <mIntroduce class="mjoin1-l" :content="content.text[0]"/>
        </template>
        <template v-else>
          <rotateimg class="jl-left" :imgs="content.text[0].imgs" @clickHandle="screens = content.text[0].imgs"/>
          <introduce class="jl-right" :content="content.text[0]"/>
        </template>
      </div>
      <div class="join-r" :class="{'mjoin-r':isMobile,'two':!isMobile}">
        <template v-if="isMobile">
          <div class="mt-con">
            <div class="mt-body">
              <img @click="screens = content.text[1].imgs" :src="content.text[1].imgs[0].img" alt>
            </div>
          </div>
          <mIntroduce class="mt-intro" :content="content.text[1]"/>
        </template>
        <template v-else>
          <introduce class="jr-left" :content="content.text[1]"/>
          <div class="jr-right">
            <div class="imgcon">
              <img @click="screens = content.text[1].imgs" :src="content.text[1].imgs[0].img" alt>
            </div>
          </div>
        </template>

      </div>
      <div class="join-l three" :class="{'mjoin-l':isMobile}">
        <template v-if="isMobile">
          <mRotateimg :imgs="content.text[2].imgs" @clickHandle="screens = content.text[2].imgs"/>
          <mIntroduce class="mth-bg" :content="content.text[2]"/>
        </template>
        <template v-else>
          <rotateimg class="jl-left" :imgs="content.text[2].imgs" @clickHandle="screens = content.text[2].imgs"/>
          <introduce class="jl-right" :content="content.text[2]"/>
        </template>
      </div>
    </div>
    <div class="recruit" id="jrwm">
      <Recruit/>
    </div>
    <div class="divide-line" v-if="isMobile">
      <img :src="require('@/assets/images/img_ele_transition@2x.png')">
    </div>
  </div>
</template>

<script>
import ctitle from '@/components/ctitle'
import introduce from '@/components/introduce'
import rotateimg from '@/components/rotateimg'
import Recruit from '@/components/recruit'
import imageQuery from '@/components/imageQuery'
import browser from '@/util/browser.js'
import mRotateimg from '@/components/m-rotateimg'
import mIntroduce from '@/components/m-introduce'

import cn from '@/util/text/cn.js'

let { pJoin: content } = cn
export default {
  components: { ctitle, rotateimg, Recruit, imageQuery, introduce, mRotateimg, mIntroduce },
  data () {
    return {
      content,
      screens: null,
      isMobile: browser.mobile

    }
  },
  methods: {
    exitHandle () {
      this.screens = null
    },
    showImg () {

    },
    clickHandle () {
      this.screens = this.content.text[0].imgs
    }
  }
}
</script>
<style scoped>
@import url("./style.css");
@import url("./mjoin.css");

</style>