<template>
	<Layout>

    <div  style="width: 100%">

      <el-carousel  :interval="4000" height="450px" arrow="never" >
        <el-carousel-item   v-for="item in slideshow" :key="item.imageUrl">
          <el-image :src="item.imageUrl"  style="max-width: 100%;
    height: auto;
    display: block;" />
        </el-carousel-item>
      </el-carousel>

    </div>


		<div class="section">
			<div class="container" style="max-width: 1160px;">
				<div class="section--header">
					<h2 class="section--title"> <strong>公司简介</strong></h2>
					<p class="section--description">
            COMPANY PROFILE</p>
				</div>

				<div class="index-container" style="background-color: white;height: 350px;margin-top: -10px">

          <div  style="background-color:white;height: 100px;width:100%"  >
            <div style="float: right"><img src="@/assets/images/phone.png" style="width: 200px;margin-right: 100px" alt=""> </div>
          </div>

          <div  style="background-color: #2f1ce5;height: 200px;width: 100%;border-radius: 3px;"  >
            <div style="width: 70%" > <br/> <p style="color: white;margin-left: 50px;margin-top:-5px;line-height:30px;font-size: 18px;letter-spacing:4px">每佳科技成立于2021年，致力于物联网解决方案的研发、生产与销售，旗下共享自助打印品牌"每佳云印"已服务千万级用户;将人工智能与物联网相结合通过云计算的方式为用户提供更方便、更高效、更多元化的一体式打印服务!随着物联网的普及化，每佳实现了多场景运营、多维度分析，为更多用户带来全面的服务体验 。</p>
            </div>
					</div>
				</div>

        <div style="margin: 0 auto;width: 100%">  <img src="@/assets/images/device.png" style="width: 85%;margin-top: 50px;;margin-left: 60px" alt="">
        </div>
      </div>
		</div>


		<div class="section" style="border-bottom: 1px solid #e9e9e9; padding-top: 0">
			<div class="container" style="max-width: 1160px;">
				<div class="section--header">
					<h2 class="section--title"><strong>我们的优势</strong></h2>
					<p  class="section--description">
            OUR ADVANTAGES
					</p>
				</div>

				<div class="index-container">
					<div class="am-g">
						<div class="am-u-md-4" v-for="(service,index) in serviceList" :key="index">
							<div  style="   margin-top: 10px;
    border: 1px solid #e9e9e9;
    border-radius: 3px;
    padding: 22px 15px 18px;
    position: relative" >
                <el-row  >
                  <el-col :span="4">   <i style="font-size: 35px" :class="service.icon"></i></el-col>
                  <el-col :span="16"><el-row><h3>{{ service.title }}</h3></el-row>
                    <el-row><p>{{service.content}}</p></el-row>
                  </el-col>
                </el-row>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>






    <div class="section-back"  >

    </div>



    <div class="section" style="background-color: white;margin-top: -150px;width: 80%">
      <div class="container"  >
        <div class="section--header" >
          <h2 class="section--title" > <strong>场景分布</strong></h2>
          <p class="section--description">
            SCENC DSTRIBUTIQM</p>
        </div>

      </div>

      <el-row  :gutter="20" style="margin-top: 20px" >
        <el-col :span="16"  >
          <div class="shop" >

            <el-row type="flex" justify="center" align="middle" style="padding-top: 100px">
              <span style="color: floralwhite;font-size: 35px;font-weight: 400">文 印 店</span><br/>

            </el-row>

            <el-row type="flex" justify="center" align="middle">
              <span style="color: floralwhite;font-size: 35px;font-weight: 400">WENYIN STORE</span><br/>
            </el-row>

            <el-row type="flex" justify="center" align="middle">
              <el-button style="background-color: unset;color: floralwhite;margin-top: 20px" @click="knowMore(1)" plain>了 解 更 多<i class="el-icon-caret-right"/></el-button>
            </el-row>
          </div>

        </el-col>
        <el-col :span="8" >
          <div class="school" >

            <el-row type="flex" justify="center" align="middle" style="padding-top: 100px">
              <span style="color: floralwhite;font-size: 35px;font-weight: 400">学 校</span><br/>

            </el-row>

            <el-row type="flex" justify="center" align="middle">
              <span style="color: floralwhite;font-size: 35px;font-weight: 400">SCHOOL</span><br/>
            </el-row>

            <el-row type="flex" justify="center" align="middle">
              <el-button style="background-color: unset;color: floralwhite;margin-top: 20px" @click="knowMore(5)" plain>了 解 更 多<i class="el-icon-caret-right"/></el-button>
            </el-row>
          </div>
        </el-col>
      </el-row>

      <el-row  :gutter="20" style="margin-top: 20px" >
        <el-col :span="8" >
          <div class="gov" >
            <el-row type="flex" justify="center" align="middle" style="padding-top: 100px">
              <span style="color: floralwhite;font-size: 35px;font-weight: 400">政 务 中 心</span><br/>

            </el-row>

            <el-row type="flex" justify="center" align="middle">
              <span style="color: floralwhite;font-size: 35px;font-weight: 400">GOVERNMENT</span><br/>
            </el-row>

            <el-row type="flex" justify="center" align="middle">
              <el-button style="background-color: unset;color: floralwhite;margin-top: 20px" @click="knowMore(2)" plain>了 解 更 多<i class="el-icon-caret-right"/></el-button>
            </el-row>
          </div>
        </el-col>
        <el-col :span="8" >
          <div class="hos" >
            <el-row type="flex" justify="center" align="middle" style="padding-top: 100px">
              <span style="color: floralwhite;font-size: 35px;font-weight: 400">医 院</span><br/>

            </el-row>

            <el-row type="flex" justify="center" align="middle">
              <span style="color: floralwhite;font-size: 35px;font-weight: 400">HOSPITAL</span><br/>
            </el-row>

            <el-row type="flex" justify="center" align="middle">
              <el-button style="background-color: unset;color: floralwhite;margin-top: 20px" @click="knowMore(4)" plain>了 解 更 多<i class="el-icon-caret-right"/></el-button>
            </el-row>
          </div>
        </el-col>
        <el-col :span="8" >
          <div class="socail" >
            <el-row type="flex" justify="center" align="middle" style="padding-top: 100px">
              <span style="color: floralwhite;font-size: 35px;font-weight: 400">社 区</span><br/>

            </el-row>

            <el-row type="flex" justify="center" align="middle">
              <span style="color: floralwhite;font-size: 35px;font-weight: 400">COMMUNITY</span><br/>
            </el-row>

            <el-row type="flex" justify="center" align="middle">
              <el-button style="background-color: unset;color: floralwhite;margin-top: 20px" @click="knowMore(3)" plain>了 解 更 多<i class="el-icon-caret-right"/></el-button>
            </el-row>
          </div>
        </el-col>
      </el-row>

    </div>


    <div class="section">
      <div class="container" style="max-width: 1160px;">
        <div class="section--header">
          <h2 class="section--title"> <strong>合作伙伴</strong></h2>
          <p class="section--description">
            PARTNERS</p>
        </div>
         <img src="@/assets/images/pat.png" style="width: 100%" alt="">
        <

      </div>

    </div>

	</Layout>
</template>

<script>
import Layout from "@/components/common/Layout";
export default {
	name: "IndexView",
	components: {Layout},
	data(){
		return{
      showQR:false,
      tops:false,
      heights:window.innerHeight,
      scrolltop:'',
			tabList:[
			],
			tabIndex: 0,
			slideshow:[],

			advantageList:[
				],
			serviceList:[
			]
		}
	},
	mounted() {
		this.getSlideshow()
		this.getAdvantage()
		this.getService()
    window.addEventListener('scroll', this.scrollToTop)
	},
  destroyed () {
    window.removeEventListener('scroll', this.scrollToTop)
  },
	methods:{

    knowMore(type) {
      //了解更多
      console.log(type)

      this.$router.push({
        name:"/product/detail",
        path: "/product/detail",
        params: {"typeId":type},
      });

    },

		changeTab(index){
			this.tabIndex = index
		},
		getSlideshow(){
      //获取所有轮播图片
      this.$post("/slideshow/interlist", {})
          .then((res) => {
            if (res.code == 1) {
                  console.log(res)
              this.slideshow = res.data.data
            }
          })
          .catch((error) => {
            this.$message.error(error.message);
          });
		},
    getService(){
      this.$post("/service/interlist", {})
          .then((res) => {
            if (res.code == 1) {
              console.log(res)
              this.serviceList = res.data.data
            }
          })
          .catch((error) => {
            this.$message.error(error.message);
          });
    },
    getAdvantage(){
      this.$post("/advantage/interlist", {})
          .then((res) => {
            if (res.code == 1) {
              this.advantageList = res.data.data
            }
          })
          .catch((error) => {
            this.$message.error(error.message);
          });
    },
    showQRCode(){//显示二维码
      this.showQR = true
    },
    hideQRCode(){//隐藏二维码
      this.showQR = false
    },
    scrollToTop () {
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      this.scrolltop = scrollTop
      if (parseInt(this.scrolltop) > (parseInt(this.heights) / 3)) {
        this.tops = true
      } else {
        this.tops = false
      }
    },
    gotop () {
      let timer = setInterval(() => {
        document.documentElement.scrollTop = document.body.scrollTop = this.scrolltop - 90
        if (this.scrolltop === 0) {
          clearInterval(timer)
        }
      }, 15)
    },
	},
}
</script>

<style scoped>
.navbar {
  text-align: center;
  background-color: white;
  position: fixed;
  top: 68%;
  right: 2%;
  width: 55px;
  height: 220px;
  z-index: 999;
  border-radius: 10px;
}
.navbar-top{
  text-align: center;
  background-color: white;
  position: fixed;
  top: 68%;
  right: 2%;
  width: 55px;
  height: 165px;
  z-index: 999;
  border-radius: 10px;
}
.navbar a {
  color: rgb(0, 0, 0);
  text-decoration: none;
  width: 100%;
  height: 55px;
  display: block;
  font-size: 30px;
  padding-top: 5px;
}
.navbar a:last-child{
  color: rgb(0, 0, 0);
  text-decoration: none;
  width: 100%;
  height: 55px;
  display: block;
  font-size: 15px;
  border-radius: 0px 0px 10px 10px;
}
.navbar a:first-child{
  color: rgb(0, 0, 0);
  text-decoration: none;
  width: 55px;
  height: 55px;
  display: block;
  font-size: 30px;
  border-radius: 10px 10px 0px 0px;
}
.navbar a:hover {
  background-color: #d9534f;
  color: white;
}
.navbar-top a {
  color: rgb(0, 0, 0);
  text-decoration: none;
  width: 100%;
  height: 55px;
  display: block;
  font-size: 30px;
  padding-top: 5px;
}
.navbar-top a:last-child{
  color: rgb(0, 0, 0);
  text-decoration: none;
  width: 100%;
  height: 55px;
  display: block;
  font-size: 30px;
  border-radius: 0px 0px 10px 10px;
}
.navbar-top a:first-child{
  color: rgb(0, 0, 0);
  text-decoration: none;
  width: 55px;
  height: 55px;
  display: block;
  font-size: 30px;
  border-radius: 10px 10px 0px 0px;
}
.navbar-top a:hover {
  background-color: #d9534f;
  color: white;
}
.qrShow{
  position: fixed;
  top: calc(68% + 80px);
  right: calc(3% + 60px);
  z-index: 999;
  background-color: rgb(179, 179, 179);
  width: 110px;
  height: 110px;
  color: white;
  text-align: center;
  border-radius: 10px;
  font-family: sans-serif;
  padding-top: 5px;
}
.qrShow:after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border: 8px solid;
}
.right:after {
  border-left-color: rgb(179, 179, 179);
  left: 100%;
  top: 50%;
  margin-top: -7px;
}





</style>
