<template>
    <div class="relative w-full">
        <!-- 大屏 -->
        <el-carousel class="hidden lg:block" height="700px" autoplay  indicator-position="outside">
            <el-carousel-item v-for="item in sImgList" :key="item.img">
              <img :src="item.img" class="lg:w-full"  alt="">
              <!-- 文字变换区 -->
               <div class="hidden lg:block absolute right-[200px] top-[200px] max-w-[200px]">
                <div class=" font-bold text-[45px] text-[#c7ffff]">{{item.t1}}</div>
                <div class=" font-bold text-[45px] text-[#c7ffff]">{{item.t2}}</div>
                <div class=" font-bold text-[45px] text-[#c7ffff]">{{item.t3}}</div>
                <div class=" font-bold text-[20px] text-white mt-2.5">{{item.bt}}</div>
               </div>
            </el-carousel-item>
        </el-carousel>
        <div class="lg:hidden sm:block relative items-center justify-center">
            <img style="object-fit: cover; height: 450px;" :src="s1"  alt="">
        </div>

        <!-- 小屏抽屉 -->
         <div @click="drawerShow" class="lg:hidden  absolute top-4 right-4 z-50">
            <Bars4Icon class=" w-4 h-4 text-white"></Bars4Icon>
         </div>
        <!-- 左上角的logo和右上角的选择点击 -->
        <div class="w-full absolute top-2 lg:top-6 flex flex-row justify-between items-center">
            <img :src="headerLogo" class=" w-[120px] lg:w-[200px] ml-4 lg:ml-14" alt="">
            <div class="hidden lg:flex flex-row justify-between items-center text-white mr-14 w-[35%]">
                <!-- <div @click="howWork" class=" flex flex-row">
                    <span>How it works</span>
                    <ChevronDownIcon class="w-6 h-6 text-white ml-1.5"></ChevronDownIcon>
                </div> -->
                <el-dropdown  trigger="click">
                    <div class="text-white flex flex-row items-center text-[16px]">
                        How it work
                        <ChevronDownIcon class="w-6 h-6 text-white ml-1.5"></ChevronDownIcon>
                    </div>
                    <template #dropdown>
                        <el-dropdown-menu style="padding: 10px;">
                            <el-dropdown-item>
                                <template #default>
                                    <div @click="tapHowToWrk(1)" class=" flex flex-row items-center justify-start">
                                        <BoltIcon class="w-5 h-5 text-black ml-1.5"></BoltIcon>
                                        <span class=" leading-8 ml-1.5 text-[18px]">Take surveys</span>
                                    </div>
                                </template>
                            </el-dropdown-item>
                            <el-dropdown-item>
                                <div @click="tapHowToWrk(2)" class=" flex flex-row items-center justify-start">
                                    <ChartBarIcon class="w-5 h-5 text-black ml-1.5"></ChartBarIcon>
                                    <span class=" leading-8 ml-1.5 text-[18px]">Surf to Earn</span>
                                </div>
                            </el-dropdown-item>
                            <el-dropdown-item>
                                <div @click="tapHowToWrk(3)" class=" flex flex-row items-center justify-start">
                                    <CurrencyDollarIcon class="w-5 h-5 text-black ml-1.5"></CurrencyDollarIcon>
                                    <span class=" leading-8 ml-1.5 text-[18px]">Redeem rewards</span>
                                </div>
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>

                <div @click="eranMoney">Eran money</div>
                <div>|</div>
                <div @click="help" class="flex flex-row">
                    <QuestionMarkCircleIcon class="w-6 h-6 text-white mr-1.5"></QuestionMarkCircleIcon>
                    <span>Help</span>
                </div>
                <div @click="login" class="flex flex-row">
                    <UserCircleIcon class="w-6 h-6 text-white mr-1.5"></UserCircleIcon>
                    <span>Login</span>
                </div>
            </div>
        </div>
        <!-- 文字 -->
        <div class="absolute lg:ml-[100px] top-[50px] lg:top-[200px] lg:max-w-[40%] text-center">
            <div class="mt-10 lg:mt-0 font-bold text-[24px] lg:text-[40px] text-white">Take surveys</div>
            <div class=" font-bold text-[24px] lg:text-[40px] text-white">Get PAID</div>
            <div class="p-5 text-[20px] lg:text-[24px] text-[lightgray]">Be an influencer. Share your opinion to help brands deliver better products & services.</div>
            <el-button @click="joinNow" class=" rounded-full w-[300px] lg:w-[300px] mt-4" type="primary" style="background-color: #19bc76;height: 50px;border-radius: 100px;">JOIN NOW</el-button>
        </div>
        <!--  -->
        <!-- <img :src="oneImg" class="w-full" alt=""> -->
        <div class="mb-6 pt-6 w-full lg:p-20 lg:pb-24 flex-col items-center justify-center flex">
            <span class="text-2xl lg:text-5xl ">Shape products and services</span>
            <p class="mt-1 lg:mt-5 text-[gray] lg:text-2xl sm:text-xl">that are meaningful to you</p>
            <div class="w-full flex flex-col lg:flex-row justify-evenly lg:mt-20 sm:mt-8 text-center">
                <div class="flex flex-col items-center justify-center">
                    <img class="mt-10" :src="surveys" alt="">
                    <span class="mt-3 lg:text-[24px] text-[16px]">Take Surveys</span>
                    <span class=" text-[gray] lg:text-[20px] sm:text-[14px] mt-1.5">Build your profile & we'll<br>match you to surveys.</span>
                </div>

                <div class="flex flex-col items-center justify-center">
                    <img class="mt-10"  :src="growth" alt="">
                    <span class="mt-3 lg:text-[24px] sm:text-[16px]">Earn Rewards</span>
                    <span class="text-[gray] lg:text-[20px] sm:text-[14px] mt-1.5">Complete surveys and<br>earn virtual points.</span>
                </div>

                <div class="flex flex-col items-center justify-center">
                    <img class="mt-10"  :src="paid" alt="">
                    <span class="mt-3 lg:text-[24px] sm:text-[16px]">Get Paid</span>
                    <span class="text-[gray] lg:text-[20px] sm:text-[14px] mt-1.5">Redeem virtual points for<br> PayPal or e-Giftcards.</span>
                </div>
            </div>
        </div>
        <!--  -->
        <div style="height: 1px;width: 100%;background-color: lightgray;"></div>
        <!--  -->
        <div class="max-h-[250px] lg:max-h-[400px] text-center">
            <el-carousel autoplay :height="isMobile ? '250px':'400px'" indicator-position="outside">
                <el-carousel-item v-for="item in commentList" :key="item.img">
                <!-- <img :src="item.img" class=" w-full" alt=""> -->
                <!-- 文字变换区 -->
                <div class=" flex items-center justify-center">
                    <div class=" flex flex-col  w-full items-center justify-center max-w-[80%] lg:max-w-[50%]">
                        <img :src="item.img" class="max-h-[16px] lg:max-h-[30px] mt-10 lg:mt-20 " alt="">
                        <div class="mt-4 text-[16px] lg:text-[30px] text-[#000]">{{item.tit}}</div>
                        <div class="text-[16px] lg:text-[30px] text-[gray]">{{item.name}}</div>
                    </div>
                </div>
                </el-carousel-item>
            </el-carousel>
        </div>

        <!--  -->
        <img :src="isMobile ? p1 : twoImg" class="w-full mt-5" alt="">
        <div class="flex flex-col w-full items-center justify-center mt-10 mb-10 text-center">
            <div class="text-[20px] lg:text-[30px]">Make a difference as a consumer</div>
            <span class="mt-2.5 p-5 text-[16px] lg:text-[20px] text-[gray] items-center">Your opinion can change the  products of tomorrow, today.</span>
            <el-button @click="joinNow" class="mt-10 rounded-full mb-5" type="primary" style="background-color: #19bc76;width: 200px;height: 45px;border-radius: 100px;">TRY IT!</el-button>
        </div>
        <div class="mt-2.5 w-full bg-[#19bc76] h-[20px]"></div>
        <img :src="isMobile ? p2 : threeImg" class=" w-full" alt="">
        <img :src="isMobile ? p3 : fourImg" class=" w-full" alt="">
        <!--  -->
        <div class=" w-full h-[600px] flex flex-col lg:flex-row items-center justify-center">
            <img :src="howWorkImg" class="h-[200px] lg:h-[70%] lg:mr-5" alt="">
            <div class=" flex flex-col w-full p-5 lg:w-[35%]">
                <span class=" text-xl lg:text-2xl">How it works</span>
                <span class=" text-[#6b6b6b] mt-3 lg:mt-10 text-[16px] lg:text-[20px]">Attitudinal research includes activities such as taking surveys or participating in focus groups. Behavioral research includes opting in to share digital browsing activity, which is collected in a privacy compliant way via Surf to Earn.</span>
                <span class=" text-[14px] lg:text-[18px] mt-5">For additional information, please see our pages on</span>
                <div class=" flex flex-row w-[100%] lg:w-[90%] justify-between mt-10">
                    <el-button @click="WaysToParticipate" style="border-radius: 100px;height: 40px;width: 49%;background: #19bc76;" type="primary">Ways to participate</el-button>
                    <el-button @click="HowToShare" style="border-radius: 100px;height: 40px;width: 49%;background: #19bc76;" type="primary">How Insights are Shared</el-button>
                </div>
            </div>
        </div>
        <img :src="isMobile ? p4 : fiveImg" class=" w-full" alt="">
        <img :src="isMobile ? p5 : sixImg" class=" w-full" alt="">
        <div class="mt-2.5 w-full bg-[#19bc76] h-[20px]"></div>
        <!-- ======= -->
        <div class=" w-full lg:p-20">
        <div class="mt-3 lg:mt-10 lg:mb-10 text-2xl lg:text-4xl justify-center w-full flex"><span>Frequently Asked Questions</span></div>
        <div class="p-4">
           <el-collapse accordion v-for="value in questions">
            <el-collapse-item>
                <template #title>
                    <span class=" leading-0 lg:leading-24 text-[16px] lg:text-2xl">{{value.tit}}</span>
                </template>
                <template v-if="value.con === '3'" #default>
                    <div class="text-[16px] lg:text-xl font-light mt-5"><strong>* Get started：</strong><span>Members earn points by signing up, confirming their email address and completing their general profile and their category-specific profiles. Completing your profiles enables better survey-matching.</span></div>
                    <div class="text-[16px] lg:text-xl font-light mt-5"><strong>* Take surveys：</strong><span>Taking surveys sent to you through email, push notifications and served up via your dashboard. Point value and estimated completion time are displayed on each survey card.</span></div>
                    <div class="text-[16px] lg:text-xl font-light mt-5 ml-5">* Even if you do not qualify for a survey, Survey Junkie still rewards you with a few points for your attempt.</div>
                    <div class="text-[16px] lg:text-xl font-light mt-5"><strong>* Connect your data：</strong><span>Opting in to share your online activity through Surf to Earn is the way to turbocharge your earnings by way of guaranteed monthly points and exclusive surveys.</span></div>
                    <div class="text-[16px] lg:text-xl font-light mt-5"><strong>* Watch for bonus point promos：</strong><span>Monthly promotions enable members to earn bonus points for completing a set number of surveys daily within a dedicated time frame. Points and time frames will vary but these promotions are a great way to boost your earnings while participating in a fun challenge.</span></div>
                    <div class="text-[16px] lg:text-xl font-light mt-5"><strong>* Keep an eye out for limited studies：</strong><span>While more limited than surveys, product-testing and focus group opportunities are available. These more in-depth studies often come with higher point values due to the time and effort requirement.</span></div>
                </template>
                <template v-else-if="value.con === '5'" #default>
                    <div class="text-[16px] lg:text-xl font-light mt-5">Once you’re a Survey Junkie member, you can opt in to Surf to Earn via your desktop or mobile device, here’s how:</div>
                    <div class="text-[16px] lg:text-xl font-light mt-5 ml-3"><span>* Install Surf to Earn on your desktop or mobile device, or both if you like!</span></div>
                    <div class="text-[16px] lg:text-xl font-light mt-5 ml-10"><strong>· </strong>On desktop (Windows or Mac), log in, go to the left bar on your dashboard and click “Add Desktop App” and follow the prompts.</div>
                    <div class="text-[16px] lg:text-xl font-light mt-5 ml-10"><strong>· </strong>On Android mobile app, open the app, click “Mobile Surf to Earn" at the bottom of the screen and follow the prompts.</div>
                    <div class="text-[16px] lg:text-xl font-light mt-5 ml-3">* Remain active on your device/s (minimum of five online sessions monthly) - let’s be honest, you probably do that daily!</div>
                    <div class="text-[16px] lg:text-xl font-light mt-5 ml-3">* Take surveys early and often, and take advantage of your Surf to Earn-exclusive surveys.</div>
                    <div class="text-[16px] lg:text-xl font-light mt-5 ml-3">* Monthly points are rewarded after 30 days of installation.</div>
                    <div class="text-[16px] lg:text-xl font-light mt-5">Automatic monthly points. Exclusive, guaranteed-point surveys. Unmatched brand influence. Surf to Earn comes with perks, get yours today!</div>
                </template>
                <template v-else-if="value.con === '6'" #default>
                    <div class="text-[16px] lg:text-xl font-light mt-5"><span>The Surf to Earn application collects data in a privacy-compliant way.</span></div>
                    <div class="text-[16px] lg:text-xl font-light mt-5 ml-5"><strong>· </strong>Passwords, payment methods and social security numbers are never collected.</div>
                    <div class="text-[16px] lg:text-xl font-light mt-5 ml-5"><strong>· </strong>Websites associated with sensitive, personal information are blocked. Financial, medical and government websites, file sharing platforms, and messaging and email services are never accessed.</div>
                    <div class="text-[16px] lg:text-xl font-light mt-5">Survey Junkie has a Trustpilot rating of 4.5/5 from more than 30,000 reviews. For more information, review our Privacy Policy.</div>
                </template>
                <template v-else-if="value.con === '7'" #default>
                    <div class="text-[16px] lg:text-xl font-light mt-5"><span>Because brands often need input from a particular type of person, someone with specific life experiences, not everyone qualifies for every survey.</span></div>
                    <div class="text-[16px] lg:text-xl font-light mt-5 ml-5"><strong>· </strong>The information you provide within your general profile is used to match you with surveys, so it’s important to ensure your profile is accurate and up to date.</div>
                    <div class="text-[16px] lg:text-xl font-light mt-5">In addition to a specific audience, brands and organizations require a specific audience size. Once a survey reaches the required number of survey completes, the survey will close.</div>
                    <div class="text-[16px] lg:text-xl font-light mt-5 ml-5"><strong>· </strong>The information you provide within your general profile is used to match you with surveys, so it’s important to ensure your profile is accurate and up to date.</div>
                    <div class="text-[16px] lg:text-xl font-light mt-5"><span>Survey responses can only yield value for brands if they are accurate and honest. Unfortunately, there are people who attempt to fraudulently complete surveys as a way to make fast online cash. We have systems in place to detect this type of activity and disqualify these people and/or bots from surveys.</span></div>
                    <div class="text-[16px] lg:text-xl font-light mt-5 ml-5"><strong>· </strong>Take your time and answer honestly to minimize disqualification. Speeding through a survey to get a quick complete can result in disqualification.</div>
                    <div class="text-[16px] lg:text-xl font-light mt-5 ml-5"><strong>· </strong>Answering a question differently in a survey than you have in your profile can result in disqualification. Ensure your profile is complete and up to date.</div>
                    <div class="text-[16px] lg:text-xl font-light mt-5"><span>Even if you do not qualify for a survey, Survey Junkie still rewards you with a few points for your attempt.</span></div>
                </template>
                <template v-else-if="value.con === '13'" #default>
                    <div class="text-[16px] lg:text-xl font-light mt-5"><span>Members use their rewards in so many different ways. Think about your Amazon, Walmart or Target purchases over the course of a typical month, wouldn’t it be great to reduce a few of those bills by $10, $25 or even $50? Members who <strong>redeem for gift cards</strong> do exactly that when they apply their gift card to those purchases.</span></div>
                    <div class="text-[16px] lg:text-xl font-light mt-5"><span>Many of our members <strong>transfer their earnings directly to their PayPal or bank accounts</strong> and apply their rewards to regular expenses and bills, everything from gas and groceries to streaming services and phone bills. And speaking of gas, many gas station apps can be linked to your PayPal account, so transferring your rewards to your account can help fuel some of your fuel costs!</span></div>
                    <div class="text-[16px] lg:text-xl font-light mt-5"><span>A little <strong>extra cash goes a long way</strong> toward providing more financial flexibility, treating yourself to the things you enjoy, and spreading a little joy to family and friends.</span></div>
                    <div class="text-[16px] lg:text-xl font-light mt-5"><span>Your Survey Junkie earnings can help pay for…</span></div>
                    <div class="text-[16px] lg:text-xl font-light mt-5 ml-5"><strong>· </strong>Regular expenses/bills (gas, groceries, phone, streaming subscriptions)</div>
                    <div class="text-[16px] lg:text-xl font-light mt-5 ml-5"><strong>· </strong>Extra spending money (coffee, lunch, rideshare)</div>
                    <div class="text-[16px] lg:text-xl font-light mt-5 ml-5"><strong>· </strong>Treat themselves (something special, hobbies, night out)</div>
                    <div class="text-[16px] lg:text-xl font-light mt-5 ml-5"><strong>· </strong>Treat family and friends (surprises, movies, dinner)</div>
                    <div class="text-[16px] lg:text-xl font-light mt-5 ml-5"><strong>· </strong>Annual gifting occasions (holidays, birthdays)</div>
                    <div class="text-[16px] lg:text-xl font-light mt-5 ml-5"><strong>· </strong>Savings (emergency fund, college fund, vacation, investment account)</div>
                </template>
                <template v-else-if="value.con === '16'" #default>
                    <div class="text-[16px] lg:text-xl font-light mt-5"><span>If you experience an error or technical difficulties with a survey, please reach out to our Member Support team with the following information as possible:</span></div>
                    <div class="text-[16px] lg:text-xl font-light mt-5 ml-5"><strong>· </strong>Survey ID</div>
                    <div class="text-[16px] lg:text-xl font-light mt-5 ml-5"><strong>· </strong>Survey provider</div>
                    <div class="text-[16px] lg:text-xl font-light mt-5 ml-5"><strong>· </strong>Relevant screenshots</div>
                    <div class="text-[16px] lg:text-xl font-light mt-5 ml-5"><strong>· </strong>Brief summary of the issue including device type and browser type and version</div>
                </template>
                <template v-else #default>
                    <span class="text-[16px] lg:text-xl font-light">{{value.con}}</span>
                </template>
                
            </el-collapse-item>
           </el-collapse>
        </div>
        <!--  -->
        </div>
    </div>
    <BottomInfo/>
    <!-- 登录弹窗 -->
    <LoginDialog :visiableSub="visiableFu" @update:visiableSub="closeDialog"/>
    <!-- 手机侧边栏 -->
    <el-drawer v-model="drawer" size="55%" :with-header="false">
        <div @click="help" class=" flex flex-row items-center mb-1.5">
            <ExclamationCircleIcon class=" w-5 h-5 text-black"></ExclamationCircleIcon>
            <span class=" font-bold text-[18px] ml-1.5">help</span>
        </div>
        <div @click="login" class=" flex flex-row items-center mb-2.5">
            <UserCircleIcon class=" w-5 h-5 text-black"></UserCircleIcon>
            <span class=" font-bold text-[18px] ml-1.5">Login</span>
        </div>
        
        <div class=" flex flex-row items-center mb-2 mt-5">
            <div class=" font-bold">How it works</div>
            <ChevronDownIcon class=" w-5 h-5 text-black"></ChevronDownIcon>
        </div>
        <!-- <div class=" font-bold mt-3">How it works</div> -->
        <div @click="tapHowToWrk(1)" class=" flex flex-row items-center mb-2.5 mt-1.5">
            <BoltIcon class=" w-5 h-5 text-black"></BoltIcon>
            <span class="text-[16px] ml-1 font-light">Take surveys</span>
        </div>
        <!-- <div class=" ml-2 mt-2">Take surveys</div> -->
        <div @click="tapHowToWrk(2)" class=" flex flex-row items-center mb-2.5 mt-1.5">
            <ChartBarIcon class=" w-5 h-5 text-black"></ChartBarIcon>
            <span class="text-[16px] ml-1 font-light">Surf to Earn</span>
        </div>
        <!-- <div class=" ml-2 mt-1.5">Surf to Earn</div> -->
        <div @click="tapHowToWrk(3)" class=" flex flex-row items-center mb-2.5 mt-1.5">
            <CurrencyDollarIcon class=" w-5 h-5 text-black"></CurrencyDollarIcon>
            <span class="text-[16px] ml-1 font-light">Redeem rewards</span>
        </div>
        <!-- <div class=" ml-2 mt-1.5">Redeem rewards</div> -->
        <div @click="eranMoney" class=" font-bold mt-5">Earn money</div>
    </el-drawer>


</template>

<script setup>
import topImg from '@/assets/register/insights-hero-1.jpg'
import s1 from '@/assets/register/s1.jpg'
import s2 from '@/assets/register/s2.jpg'
import s3 from '@/assets/register/s3.jpg'
import oneImg from '@/assets/register/1.jpg'
import twoImg from '@/assets/register/2.jpg'
import threeImg from '@/assets/register/3.jpg'
import fourImg from '@/assets/register/4.jpg'
import fiveImg from '@/assets/register/5.jpg'
import sixImg from '@/assets/register/6.jpg'
import p1 from '@/assets/register/p1.jpg'
import p2 from '@/assets/register/p2.jpg'
import p3 from '@/assets/register/p3.jpg'
import p4 from '@/assets/register/p4.jpg'
import p5 from '@/assets/register/p5.jpg'
import starsImg from '@/assets/register/stars.png' 
import headerLogo from '@/assets/register/header-logo-new.png'
import howWorkImg from '@/assets/register/how-it-works-home.jpg'
import surveys from '@/assets/register/surveys.png'

import growth from '@/assets/register/growth.png'
import paid from '@/assets/register/paid.png'
// import { QuestionMarkCircleIcon } from '@heroicons/vue/24/solid'
// import { UserCircleIcon } from '@heroicons/vue/24/solid'
import { ChevronDownIcon, } from '@heroicons/vue/24/solid'
import {BoltIcon,ChartBarIcon,CurrencyDollarIcon,Bars4Icon,
    ExclamationCircleIcon,UserCircleIcon,QuestionMarkCircleIcon} from '@heroicons/vue/24/outline'

import { ref,onMounted,onBeforeUnmount,computed } from 'vue'
import BottomInfo from '../components/BottomInfo.vue'
import LoginDialog from '../components/LoginDialog.vue'
import { useRouter } from 'vue-router'

const width = ref(window.innerWidth)
const visiableFu = ref(false)
const drawer = ref(false)
const router = useRouter()

const sImgList = [
    {
        img:s1,
        t1:'SOFT',
        t2:'LIGHT',
        t3:'COOL',
        bt:'WHAT WILL YOUR VOICE SAY?'
    },
    {
        img:s2,
        t1:'TASTY',
        t2:'FUN',
        t3:'FRESH',
        bt:'WHAT WILL YOUR VOICE SAY?'
    },
    {
        img:s3,
        t1:'LOUD',
        t2:'MODERN',
        t3:'COMFY',
        bt:'WHAT WILL YOUR VOICE SAY?'
    }
]

const commentList =[
    {
        img: starsImg,
        tit:"I really feel like my opinion matters and I love taking the surveys... It is a privilege to be part of the Survey Junkie family!",
        name:"Kara M."
    },
    {
        img: starsImg,
        tit:"Survey Junkie is actively the best survey community I've ever interacted with. It also has the best rewards. Thanks",
        name:"M. Navarro"
    },
    {
        img: starsImg,
        tit:"Survey Junkie provides an interesting way to make a little cash while doing something interesting.",
        name:'Anthony G.'
    },
    {
        img: starsImg,
        tit:"Survey Junkie is fun, entertaining, informational, thought provoking & rewarding. I highly recommend it for nice easy surveys & good rewards.",
        name:'Louis R.'
    },
    {
        img: starsImg,
        tit:"It took some honest hard work, but I had fun doing it. Got my first paypal payout. Thank you SurveyJunkie for the reward.",
        name:'Miles O.'
    },
]

const questions = [
    {
        tit:"How much money can I earn by taking surveys with Survey Junkie?",
        con:"Your individual earning potential depends on the time you choose to commit, the ways you participate and your earnings goal. Members who take surveys and opt in to share their online activity unlock the most value from their membership.You won’t get rich taking surveys and it’s not meant to take the place of a full-time job but it can supplement your income and give you a little extra flexibility in your budget.Complete three surveys daily and earn as much as $40 monthly. Share more, earn more and make it worth your while!"
    },
    {
        tit:"What are the available rewards and how do I redeem?",
        con:"Survey Junkie points can be redeemed for valuable rewards including cash through PayPal or bank transfer and gift cards for Amazon, Target, Walmart, Sephora, Starbucks, Visa, iTunes, etc. Members can cash out beginning at $5 (500 points). Redemption options may vary by location and verification status."
    },
    {
        tit:"What ways can I earn rewards with Survey Junkie?",
        con:"3",
    },
    {
        tit:"How does data-sharing through Surf to Earn work?",
        con:"Your opinion is valuable, connecting it with your online activity can be even more powerful for brands. Surf to Earn gathers information about online searches, site visits, app usage, shopping activity and ad views. These everyday activities help marketers understand the way you experience brands online, so they can improve the way you experience their brand in your life. It’s information you already share with search engines, online retailers and social media platforms - the difference is Survey Junkie rewards you for it.",
    },
    {
        tit:"How do I opt in to Surf to Earn?",
        con:"5",
    },
    {
        tit:"Is it safe to use Surf to Earn?",
        con:"6",
    },
    {
        tit:"How does someone get disqualified from a survey?",
        con:"7",
    },
    {
        tit:"Why do companies pay for people’s opinions?",
        con:"Companies look for ways to improve their products and services, create new ones, and ensure their message resonates. To determine the best course of action, they conduct research into the audience they want to reach. Understanding how an audience thinks and acts is critical to the success of any company or organization.\nYour opinion really does matter to companies and they are willing to pay for it. We’re here to help make that happen!"
    },
    {
        tit:"How is my information shared with brands/companies?",
        con:"Survey responses are directly collected by the party conducting the research. You choose what you want to share, and Survey Junkie passes along encrypted data to protect your privacy. For more information, review our Privacy Policy."
    },
    {
        tit:"Can I trust Survey Junkie with my information?",
        con:"Survey Junkie is one of the most trusted insights platforms with more than 20 million members to date, and a Trustpilot rating of 4.5/5 from nearly 30,000 reviews. Survey Junkie is a safe, secure platform that hundreds of thousands of people turn to each day to share what they think and do with brands in exchange for rewards.\nNo matter what you choose to share, whether your opinions or digital activity, it is encrypted for your security. For more information, review our Privacy Policy."
    },
    {
        tit:"What types of surveys are available?",
        con:"Brands and organizations of all types rely on DISQO to conduct research that helps them to make important business decisions and gauge perceptions on a variety of issues. Members can expect surveys in a wide variety of categories including food and beverage, technology, entertainment, personal care, apparel, retail, home, financial services, automotive, travel, real estate, healthcare and more. Completing your general and category-specific profiles will help to ensure you are matched with surveys that are best aligned with your lifestyle and interests."
    },
    {
        tit:"Why do people join Survey Junkie and/or take online surveys?",
        con:"Some people are looking for ways to earn money online. Some people want to have their opinion heard by brands they love. Some people enjoy learning about new products and services before everyone else does. Some people are searching for a side hustle that fits their schedule. Each of our members has a reason all their own, we’re just happy they’ve chosen to achieve their goals with us."
    },
    {
        tit:"How do members use their earnings?",
        con:"13"
    },
    {
        tit:"Who can participate in Survey Junkie?",
        con:"To join, you must be at least 18 years of age and reside in the United States, Canada, Australia or the United Kingdom. Redemption options and product features may vary by region"
    },
    {
        tit:"Why do members need to verify their identity before redeeming?",
        con:"Unfortunately, there are people who attempt to fraudulently complete surveys as a way to make money online. In order to protect our members, the integrity of their opinions and data they provide, and our brand’s platform, we have identity verification processes in place. Verification methods vary by case but can include text, email or phone call confirmation, information cross-check with rewards partners, and/or photo ID verification."
    },
    {
        tit:"What if I have technical difficulties with a survey?",
        con:"16"
    },
]


const tapHowToWrk = (index) => {
    if(index == 1){
        drawer.value = false
    }
    if(index == 2){
        router.push({path:"/surfEarn"})
    }
    if(index == 3){
        router.push({path:"/redeemRewards"})
    }
}

const eranMoney = () => {
    router.push({path:"/newsBlog"})
} 
const help = () => {
    router.push({path:"/helpCenter"})
}
const login = () => {
    visiableFu.value = true
    // console.log('点击了登录',visiable.value)
}

const WaysToParticipate = () => {
    router.push({path:"/waysToParticipate"})
}

const HowToShare = () => {
    router.push({path:"/howInsightsToShare"})
}

const closeDialog = () => {
    visiableFu.value = false
}

const drawerShow = () => {
    drawer.value = true
}

const joinNow = () => {
    visiableFu.value = true
}

const handSize = () => {
    drawer.value = false
    width.value = window.innerWidth
}

onMounted(() => {
  window.addEventListener("resize", handSize)
})
onBeforeUnmount(() => {
  window.removeEventListener("resize", handSize)
})

const phoneMap = () => {
    router.push({path:"/testMap"})
}

// 用 computed 判断是否为手机
const isMobile = computed(() => width.value < 768) // 小于768px认为是手机
</script>