<template>
    <div v-if="isMobile == false" class="snapshot-wrap">
      <!-- <iframe :src="src" ref="frame" /> -->
       <div class=" flex items-center h-20 border-b border-b-gray-300">
          <img @click="backAction" style="width: 180px;" :src="logoImg" alt="">
       </div>
       <div class=" flex flex-row items-center pl-14 pr-6 h-15">
        <!-- <span class="text-black font-bold hover:text-green-500 text-[12px] ml-6" v-for="(item,index) in titleArr" :key="index">
          {{item}}
        </span> -->
        <el-button @click="backAction" style="border-radius: 100px;position: absolute;right: 50px;" type="primary" class="text-[white]">
          Take Surveys.Get Paid</el-button>
       </div>

       <el-carousel class=" lg:block" height="350px" autoplay  indicator-position="outside">
            <el-carousel-item v-for="(item,index) in imgArr" :key="item">
              <img :src="item" class="w-full"  alt="">
              <!-- 文字变换区 -->
               <div class="hidden lg:block absolute bottom-[40px] justify-center w-full">
                <div class="w-full font-bold text-[20px] text-white mt-2.5 text-center">{{contentArr[index].tit}}</div>
                <div class="w-full font-bold text-[30px] text-white text-center">{{contentArr[index].con}}</div>
               </div>
            </el-carousel-item>
       </el-carousel>

       <div class="w-full flex flex-row">
        <div class="w-[70%] pl-4 pr-4">
          <img @click="tap1" class="w-full" :src="blog1" alt="">
          <div class="grid">
            <img v-for="value in gridArr" :src="value" alt="">
          </div>
        </div>
        <div class="w-[28%] pl-2.5 pr-2.5">
          <img class="w-full" :src="blog11" alt="">
          <img class="w-full" :src="blog12" alt="">
        </div>
       </div>

    </div>

    <div v-if="isMobile" class="snapshot-wrap">
      <!-- <iframe :src="src" ref="frame" /> -->
       <div class=" flex items-center justify-center h-16 border-b border-b-gray-300">
          <img @click="backAction" style="width: 150px;" :src="logoImg" alt="">
       </div>
       <div class=" flex flex-row items-center justify-center pl-14 pr-6 h-15">
        <!-- <span class="text-black font-bold hover:text-green-500 text-[12px] ml-6" v-for="(item,index) in titleArr" :key="index">
          {{item}}
        </span> -->
        <el-button @click="backAction" style="border-radius: 100px;" type="primary" class="text-[white]">
          Take Surveys.Get Paid</el-button>
       </div>

       <el-carousel class="" height="150px" autoplay  indicator-position="outside">
            <el-carousel-item v-for="(item,index) in imgArr" :key="item">
              <img :src="item" class="w-full h-full"  alt="">
              <!-- 文字变换区 -->
               <div class="absolute bottom-[10px] justify-center w-full">
                <div class="w-full font-bold text-[14px] text-white mt-2.5 text-center">{{contentArr[index].tit}}</div>
                <div class="w-full font-bold text-[18px] text-white text-center">{{contentArr[index].con}}</div>
               </div>
            </el-carousel-item>
       </el-carousel>

       <div class="w-full flex flex-col">
        <img @click="tap1"  class="w-full" v-for="value in phoneArr" :src="value" alt="">
       </div>

    </div>
  </template>
  
  <script setup lang="js">
  // const src = '/snapshots/copyBlog.html'
  import logoImg from '@/assets/register/newsHome/logo.png'
  import swiper1 from '@/assets/register/newsHome/swiper1.jpg'
  import swiper2 from '@/assets/register/newsHome/swiper2.jpg'
  import swiper3 from '@/assets/register/newsHome/swiper3.png'
  import blog1 from '@/assets/register/newBlog/blogPC1.jpg'
  import blog2 from '@/assets/register/newBlog/blogPC2.jpg'
  import blog3 from '@/assets/register/newBlog/blog3PC.jpg'
  import blog4 from '@/assets/register/newBlog/blog4PC.jpg'
  import blog5 from '@/assets/register/newBlog/blog5PC.jpg'
  import blog6 from '@/assets/register/newBlog/blog6PC.jpg'
  import blog7 from '@/assets/register/newBlog/blog7PC.jpg'
  import blog8 from '@/assets/register/newBlog/blog8PC.jpg'
  import blog9 from '@/assets/register/newBlog/blog9PC.jpg'
  import blog10 from '@/assets/register/newBlog/blog10PC.jpg'
  import blog11 from '@/assets/register/newBlog/blog11PC.jpg'
  import blog12 from '@/assets/register/newBlog/blog12PC.jpg'
  import blog1Ph from '@/assets/register/newBlog/blog1Ph.jpg'
  import blog2Ph from '@/assets/register/newBlog/blog2Ph.jpg'
  import blog3Ph from '@/assets/register/newBlog/blog3Ph.jpg'
  import blog4Ph from '@/assets/register/newBlog/blog4Ph.jpg'
  import blog5Ph from '@/assets/register/newBlog/blog5Ph.jpg'
  import blog6Ph from '@/assets/register/newBlog/blog6Ph.jpg'
  import blog7Ph from '@/assets/register/newBlog/blog7Ph.jpg'
  import blog8Ph from '@/assets/register/newBlog/blog8Ph.jpg'
  import blog9Ph from '@/assets/register/newBlog/blog9Ph.jpg'
  import blog10Ph from '@/assets/register/newBlog/blog10Ph.jpg'
  import blog11Ph from '@/assets/register/newBlog/blog11Ph.jpg'
  import blog12Ph from '@/assets/register/newBlog/blog12Ph.jpg'
  import { useRouter } from 'vue-router'
  
  import useWindowSize from '@/utils/useWindowSize.js'

  const router = useRouter()

  const titleArr = ["MONEY","PRODUCTS + SERVICES","DEALS","TECH","OPINION"]
  const imgArr = [swiper1,swiper2,swiper3]
  const contentArr = [
    {
      tit:'September 11, 2017',
      con:'What’s Your Survey Personality Type?'
    },
    {
      tit:'December 14, 2022',
      con:'Your Insider’s Guide to Survey Junkie Success'
    },
    {
      tit:'June 20, 2018',
      con:'What Free Gift Cards Can You Get With Survey Junkie?'
    },
  ]
  const gridArr = [blog2,blog3,blog4,blog5,blog6,blog7,blog8,blog9,blog10]
  const phoneArr = [blog1Ph,blog2Ph,blog3Ph,blog4Ph,blog5Ph,blog6Ph,blog7Ph,blog8Ph,blog9Ph,blog10Ph,blog11Ph,blog12Ph]
  const {isMobile} = useWindowSize()

  const tap1 = () => {
    router.push({path:"/news1"})
  }

  const backAction = () => {
    router.back()
  }

  </script>
  
  <style scoped>
  .snapshot-wrap { width: 100%; height: 100vh; padding: 15px;}
  /* iframe { width: 100%; height: 100%; border: 0; display: block; } */
  .grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 列，每列等宽 */
    gap: 12px;
  }
  </style>
  