<template>
    <div v-if="isMobile == false"  class=" p-4">
        <!-- <iframe :src="src" ref="frame" /> -->
        <div class=" flex items-center h-20 border-b border-b-gray-300">
            <img @click="blogHome" style="width: 180px;" :src="logoImg" alt="">
        </div>
        <div class=" flex flex-row items-center pl-14 pr-6 h-15">
            <el-button @click="blogHome" style="border-radius: 100px;position: absolute;right: 50px;" type="primary" class="text-[white]">
                Take Surveys.Get Paid</el-button>
        </div>
        <img class="w-full" :src="news1PC" alt="">
        <img class="w-full" :src="news2PC" alt="">
        <img class="w-full" :src="news3PC" alt="">
        <img class="w-full" :src="news4PC" alt="">
        <img class="w-full" :src="news5PC" alt="">
        <img class="w-full" :src="news6PC" alt="">
        <img class="w-full" :src="news7PC" alt="">
        <img class="w-full" :src="news8PC" alt="">
    </div>

    <div v-if="isMobile"  class=" p-4">
        <!-- <iframe :src="src" ref="frame" /> -->
        <div class=" flex items-center h-20 border-b border-b-gray-300">
            <img @click="blogHome" style="width: 150px;" :src="logoImg" alt="">
        </div>
        <div class=" flex flex-row justify-center items-center pl-14 pr-6 h-15">
            <el-button @click="blogHome" style="border-radius: 100px;" type="primary" class="text-[white]">
                Take Surveys.Get Paid</el-button>
        </div>
        <img class="w-full" :src="newsPh1" alt="">
        <img class="w-full" :src="newsPh2" alt="">
        <img class="w-full" :src="newsPh3" alt="">
        <img class="w-full" :src="newsPh4" alt="">
        <img class="w-full" :src="newsPh5" alt="">
        <img class="w-full" :src="newsPh6" alt="">
        <img class="w-full" :src="newsPh7" alt="">
        <img class="w-full" :src="newsPh8" alt="">
        <img class="w-full" :src="newsPh9" alt="">
        <img class="w-full" :src="newsPh10" alt=""></img>
        <img class="w-full" :src="newsPh11" alt=""></img>
        <img class="w-full" :src="newsPh12" alt=""></img>
    </div>

</template>

<script setup>
 import logoImg from '@/assets/register/newsHome/logo.png'
 import news1PC from '@/assets/register/news1/news1_1.jpg'
 import news2PC from '@/assets/register/news1/news1_2.jpg'
 import news3PC from '@/assets/register/news1/news1_3.jpg'
 import news4PC from '@/assets/register/news1/news1_4.jpg'
 import news5PC from '@/assets/register/news1/news1_5.jpg'
 import news6PC from '@/assets/register/news1/news1_6.jpg'
 import news7PC from '@/assets/register/news1/news1_7.jpg'
 import news8PC from '@/assets/register/news1/news1_8.jpg'
 
 import newsPh1 from '@/assets/register/news1/news1_1Ph.jpg'
 import newsPh2 from '@/assets/register/news1/news1_2Ph.jpg'
 import newsPh3 from '@/assets/register/news1/news1_3Ph.jpg'
 import newsPh4 from '@/assets/register/news1/news1_4Ph.jpg'
 import newsPh5 from '@/assets/register/news1/news1_5Ph.jpg'
 import newsPh6 from '@/assets/register/news1/news1_6Ph.jpg'
 import newsPh7 from '@/assets/register/news1/news1_7Ph.jpg'
 import newsPh8 from '@/assets/register/news1/news1_8Ph.jpg'
 import newsPh9 from '@/assets/register/news1/news1_9Ph.jpg'
 import newsPh10 from '@/assets/register/news1/news1_10Ph.jpg'
 import newsPh11 from '@/assets/register/news1/news1_11Ph.jpg'
 import newsPh12 from '@/assets/register/news1/news1_12Ph.jpg'
 import { useRouter } from 'vue-router'

 import useWindowSize from '@/utils/useWindowSize.js'

 const router = useRouter()

 const {isMobile} = useWindowSize()

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

</script>

<style scoped></style>