web/pages/index.vue

<template>
  <div class="home">
    <div class="home_t">
      <n-carousel :autoplay="true" :interval="3000">
        <template v-for="item in carouselList" :key="item">
          <n-carousel-item>
            <div class="img">
              <img class="carousel-img" :src="BaseUrl+'/carousel/'+item.name" />
            </div>
            <div class="desc">
              <div class="desc_title">{{item.title }}</div>
              <div class="desc_tig">{{ item.desc }}</div>
              <div class="desc_btn">Know More</div>
            </div>
          </n-carousel-item>
        </template>
      </n-carousel>
    </div>
    <div class="numList">
      <div class="item ">
        <span class="iconfont icon-analytics"></span>
        <div class="item_t">
          <n-number-animation ref="numberAnimationInstRef" :from="0" :to="15" />
          Years+
        </div>
        <div class="item_b">Segmented Industry Research Experience</div>
      </div>
      <div class="item ">
        <img class="item_img" src="/assets/images/img9.png" alt="">
        <div class="item_t">
          <n-number-animation ref="numberAnimationInstRef" :from="0" :to="20000" />
          +
        </div>
        <div class="item_b">Segmented Product Report Covering the Entire Industry</div>
      </div>
      <div class="item ">
        <span class="iconfont icon-yinhuanzhili-qiyezichayinhuan"></span>
        <div class="item_t">
          <n-number-animation ref="numberAnimationInstRef" :from="0" :to="10000" />
          +
        </div>
        <div class="item_b">Segmented Product Reports Covering the Entire Industry</div>
      </div>
      <div class="item ">
        <span class="iconfont icon-dinghuoshujufenxi"></span>
        <div class="item_t">
          <n-number-animation ref="numberAnimationInstRef" :from="0" :to="12000" />
          K+
        </div>
        <div class="item_b">Data Point Information</div>
      </div>
      <div class="item ">
        <span class="iconfont icon-dinghuoshujufenxi"></span>
        <div class="item_t">
          <n-number-animation ref="numberAnimationInstRef" :from="0" :to="12000" />
          K+
        </div>
        <div class="item_b">Data Point Information</div>
      </div>
    </div>
    <div class="marketBox">
      <div class="marketBox_title">Market Express</div>
      <n-carousel :autoplay="true" :interval="3000">
        <template v-for="item in carouselList" :key="item">
          <n-carousel-item>
            <div class="img">
              <img class="carousel-img" :src="BaseUrl+'/carousel/'+item.name" />
              <div class="desc">
                <div class="desc_title">The Global Electronically Commutated Motor (ECM) Market is Expected to Reach 18.18 US$ billion by 2030</div>
                <div class="desc_btn">View details</div>
              </div>
              <view class="direction carousel_l">
                <span class="iconfont icon-dkw_guanbi-"></span>
              </view>
              <view class="direction carousel_r">
                <span class="iconfont icon-dkw_guanbi-"></span>
              </view>
            </div>
          </n-carousel-item>
        </template>
      </n-carousel>
    </div>
    <div class="popularBox">
      <div class="popularBox_l">
        <div class="popularBox_l_title">
          <div class="popularBox_l_title_l">Popular Research Reports</div>
          <div class="popularBox_l_title_r">Know More <span class="iconfont icon-jiantou24"></span> </div>
        </div>
        <div class="popularBox_l_list">
          <template v-for="(v,i) in reports" :key="i">
            <div class="popularBox_l_list_item" v-if="i<2">
              <img :src="BaseUrl + '/report/' + v.fileName" alt="">
              <div class="popularBox_l_list_item_box">
                <div class="popularBox_l_list_item_box_title">{{v.title}}</div>
                <a class="popularBox_l_list_item_box_btn" :href="'/reports/'+v.webTitle+'-'+v.id">View details</a>
              </div>
            </div>
          </template>
        </div>
      </div>
      <div class="popularBox_r">
        <div class="popularBox_r_title">
          Report Coverage Areas
        </div>
        <div class="popularBox_r_list">
          <div v-for="(v, i) in professionList" :key="i">
            <img :src="v.imgUrl" :alt="v.title" />
            <div v-html="v.title"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="hotBox">
      <div class="hotBox_title">Hot News</div>
      <div class="hotBox_list">
        <template v-for="(v,i) in markets" :key="i">
          <a class="hotBox_list_item" :class="{active:i===0}" v-if="i<3">
            <img :src="BaseUrl + '/fileupload/' + v.filePath + v.fileName" alt="">
            <div class="hotBox_list_item_box">
              <div class="hotBox_list_item_box_date">{{formatDateEn(v.publishDate)}}</div>
              <div class="hotBox_list_item_box_text">{{v.title}}</div>
            </div>
          </a>
        </template>
      </div>
      <div class="hotBox_btn">Know More</div>
    </div>
    <div class="researchBox">
      <div class="researchBox_title">Research Advantages</div>
      <div class="researchBox_list">
        <template v-for="(v,i) in list2" :key="i">
          <div class="researchBox_list_item ">
            <img class="imga" :src="v.imga" alt="">
            <img class="img" :src="v.img" alt="">
            <div>{{v.name}}</div>
          </div>
        </template>
      </div>
    </div>
    <div class="customersBox">
      <div class="customersBox_title">Customers Served</div>
      <div class="customersBox_subTitle">Trusted by Leading Companies Worldwide.</div>
      <div class="customersBox_carousel">
        <!-- draggable -->
        <n-carousel ref="card5SwiperRef" autoplay :space-between="0" loop :interval="2000">
          <n-carousel-item class="customersBox_carousel_item " v-for="(v,i) in list3" :key="i">
            <img v-for="(k,j) in v" :key="'img'+j" :src="k" alt="">
          </n-carousel-item>
        </n-carousel>
      </div>
    </div>
    <div class="customBox">
      <div class="customBox_title">No Relevant Report Found? Please Contact Us</div>
      <div class="customBox_content">Need more information? Our team is ready to assist.Reach out today for expert support tailored to your needs.</div>
      <div class="customBox_btn">Custom Reports</div>
      <img class="customBox_img" src="/assets/images/img1.png" alt="">
    </div>
  </div>
</template>

<script  setup>
import { useI18n } from "#imports"
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import { useUserStore } from "@/store/user";
import { MdEye, MdReorder, MdSearch } from "@vicons/ionicons4";
import img01 from '@/assets/images/companyProfile/img01.png'
import img02 from '@/assets/images/companyProfile/img02.png'
import img03 from '@/assets/images/companyProfile/img03.png'
import img04 from '@/assets/images/companyProfile/img04.png'
import img05 from '@/assets/images/companyProfile/img05.png'
import img06 from '@/assets/images/companyProfile/img06.png'
import img07 from '@/assets/images/companyProfile/img07.png'
import img08 from '@/assets/images/companyProfile/img08.png'
import img09 from '@/assets/images/companyProfile/img09.png'
import img10 from '@/assets/images/companyProfile/img10.png'
import img11 from '@/assets/images/companyProfile/img11.png'
import img12 from '@/assets/images/companyProfile/img12.png'
import researchAdvantages1 from '@/assets/images/researchAdvantages/img1.png'
import researchAdvantages2 from '@/assets/images/researchAdvantages/img2.png'
import researchAdvantages3 from '@/assets/images/researchAdvantages/img3.png'
import researchAdvantages4 from '@/assets/images/researchAdvantages/img4.png'
import researchAdvantages5 from '@/assets/images/researchAdvantages/img5.png'
import researchAdvantages6 from '@/assets/images/researchAdvantages/img6.png'
import researchAdvantages1_a from '@/assets/images/researchAdvantages/img1_a.png'
import researchAdvantages2_a from '@/assets/images/researchAdvantages/img2_a.png'
import researchAdvantages3_a from '@/assets/images/researchAdvantages/img3_a.png'
import researchAdvantages4_a from '@/assets/images/researchAdvantages/img4_a.png'
import researchAdvantages5_a from '@/assets/images/researchAdvantages/img5_a.png'
import researchAdvantages6_a from '@/assets/images/researchAdvantages/img6_a.png'
import customersServed1 from '@/assets/images/customersServed/img1.png'
import customersServed2 from '@/assets/images/customersServed/img2.png'
import customersServed3 from '@/assets/images/customersServed/img3.png'
import customersServed4 from '@/assets/images/customersServed/img4.png'
import customersServed5 from '@/assets/images/customersServed/img5.png'
import customersServed6 from '@/assets/images/customersServed/img6.png'
const config = useRuntimeConfig();
const BaseUrl = ref(config.public.baseUrl);
const { t } = useI18n();
const carouselList = ref(); // 轮播图数据
const reports = ref(); //研究报告
const markets = ref(); //市场资讯
const reportDict = ref();
const demandShow = ref(false); // 需求页面
const keyword = ref(""); //关键字
const userStore = useUserStore();
const lang = ref();
const professionList = [
  {
    imgUrl: img01,
    title: 'Chemical and Materials',
  },
  {
    imgUrl: img02,
    title: 'Aerospace',
  },
  {
    imgUrl: img03,
    title: 'Agriculture',
  },
  {
    imgUrl: img04,
    title: 'Machinery and Equipment',
  },
  {
    imgUrl: img05,
    title: 'Medical and Bio-Health',
  },
  {
    imgUrl: img06,
    title: 'Electronics and Semiconductors',
  },
  {
    imgUrl: img07,
    title: 'Software and Services',
  },
  {
    imgUrl: img08,
    title: 'Consumer Products <br/> and Retail',
  },
  {
    imgUrl: img09,
    title: 'Automobile and Transportation',
  },
  {
    imgUrl: img10,
    title: 'Food and Beverage',
  },
  {
    imgUrl: img11,
    title: 'Emerging Industries',
  },
  {
    imgUrl: img12,
    title: 'Other Industries',
  },
]
const list2 = ref([
  { name: 'Global Perspective', img: researchAdvantages1, imga: researchAdvantages1_a },
  { name: 'Multidimensional Research', img: researchAdvantages2, imga: researchAdvantages2_a },
  { name: 'Massive Database', img: researchAdvantages3, imga: researchAdvantages3_a },
  { name: 'Foresight Analyst Team', img: researchAdvantages4, imga: researchAdvantages4_a },
  { name: 'Customized Services', img: researchAdvantages5, imga: researchAdvantages5_a },
  { name: '24-Hour Support', img: researchAdvantages6, imga: researchAdvantages6_a },
])
const list3 = ref([
  [customersServed1, customersServed2, customersServed3, customersServed4, customersServed5, customersServed6]
])
// 联系我们
function handleContact () {
  demandShow.value = true;
}

// 关闭diag
function handleCloseDiag () {
  demandShow.value = false;
}

//查询
const router = useRouter();
function handleSearch () {
  router.push({
    name: "reports",
    params: { keyword: keyword.value },
  });
}

// 资讯详情
function viewNewsDetail (item) {
  router.push({
    name: "newsDetail",
    params: { webTitle: item.webTitle + "-" + item.id },
  });
}

// 报告详情
function viewReportDetail (item) {
  router.push({
    name: "reportDetail",
    params: { webTitle: item.webTitle + "-" + item.id },
  });
}

// 报告列表
function reportDetail () {
  router.push({ name: "reports" });
}
function handleReport (value) {
  router.push({ name: "reports", params: { category: value } });
}

lang.value = userStore.getLang
// 轮播图
const data = await carouselListData();
carouselList.value = data;
console.log(carouselList.value)
// 研究报告分类
reportDict.value = await getLocalSessionReport();

// 研究报告列表
const map = await reportAndMarketListData();
reports.value = map.report;
markets.value = map.market;
// onMounted(async () => {
reportDict.value = await getLocalSessionReport();
// })

useHead({
  title: t('defaultSettings.title'),
  viewport: "width=device-width,initial-scale=1,maximum-scale=1 ",
  charset: "utf-8",
  meta: [
    { hid: "keywords", name: "keywords", content: t('defaultSettings.keyword') },
    {
      hid: "description",
      name: "description",
      content: t('defaultSettings.desc'),
    },
  ],
});
</script>


<style scoped lang="scss">
.home {
  .home_t {
    height: calc(100vh - var(--size-265));
    .img {
      position: absolute;
      top: var(--size--50);
      bottom: var(--size--50);
      left: var(--size--50);
      right: var(--size--50);
      .carousel-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    .desc {
      padding: var(--size-60);
      display: flex;
      flex-direction: column;
      justify-content: center;
      position: relative;
      height: 100%;
      overflow: hidden;
      z-index: 100;
      .desc_title {
        font-size: var(--size-48);
        color: #ffffff;
        font-weight: 900;
      }
      .desc_tig {
        font-size: var(--size-24);
        color: #ffffff;
        font-weight: 700;
        margin-bottom: var(--size-20);
      }
      .desc_btn {
        width: var(--size-170);
        height: var(--size-60);
        background: linear-gradient(0deg, #7b9c4f 0%, #2da19d 100%), #1a1a1a;
        border-radius: var(--size-8);
        text-align: center;
        line-height: var(--size-60);
        font-size: var(--size-18);
        color: #ffffff;
      }
    }
  }
  .numList {
    display: flex;
    align-items: center;
    padding: 0 var(--size-75);
    background: #f5f5f5;
    .item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 0 var(--size-70);
      height: var(--size-265);
      position: relative;
      &::after {
        position: absolute;
        right: 0;
        top: var(--size-62);
        display: block;
        content: "";
        width: var(--size-1);
        height: var(--size-142);
        background: #cccccc;
      }
      &:nth-child(1) {
        width: var(--size-357);
      }
      &:nth-child(2) {
        width: var(--size-354);
      }
      &:nth-child(3) {
        width: var(--size-356);
      }
      &:nth-child(4) {
        width: var(--size-343);
      }
      &:nth-child(5) {
        width: var(--size-342);
        &::after {
          display: none;
        }
      }
      .iconfont {
        font-size: var(--size-62);
        color: #808080;
        line-height: var(--size-62);
      }
      .item_img {
        width: var(--size-62);
        height: var(--size-62);
      }
      .item_t {
        color: transparent;
        background-image: linear-gradient(0deg, #7b9c4f 0%, #2da19d 100%);
        -webkit-background-clip: text;
        background-clip: text;
        display: inline-block;
        font-size: var(--size-40);
        font-family: FZZhengHeiS-B-GB, FZZhengHeiS-B-GB-Regular;
        font-weight: 700;
        margin-top: var(--size-10);
      }
      .item_b {
        font-size: var(--size-16);
        color: #1a1a1a;
        font-family: Arial, Arial-Regular;
      }
    }
  }
  .marketBox {
    padding: var(--size-60) var(--size-145) var(--size-100);
    background: #ffffff;
    ::v-deep .n-carousel__slide,
    ::v-deep .n-carousel {
      overflow: visible !important;
    }
    .marketBox_title {
      font-size: var(--size-48);
      color: #1a1a1a;
      font-family: Impact, Impact-Regular;
      font-weight: 400;
      text-align: center;
      margin-bottom: var(--size-10);
    }
    .img {
      position: relative;
      .carousel-img {
        width: 100%;
        height: var(--size-700);
      }
      .desc {
        position: absolute;
        top: 0;
        left: var(--size-108);
        bottom: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        .desc_title {
          width: var(--size-695);
          font-size: var(--size-32);
          font-family: Impact, Impact-Regular;
          color: #ffffff;
          line-height: var(--size-42);
        }
        .desc_btn {
          width: var(--size-170);
          height: var(--size-60);
          background: linear-gradient(0deg, #7b9c4f 0%, #2da19d 100%), #1a1a1a;
          border-radius: var(--size-8);
          text-align: center;
          line-height: var(--size-60);
          font-size: var(--size-18);
          color: #ffffff;
          margin: var(--size-30) 0;
        }
      }
      .direction {
        width: var(--size-73);
        height: var(--size-73);
        background: #ffffff;
        border-radius: 50%;
        position: absolute;
        top: 40%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
      }
      .carousel_l {
        left: var(--size--36);
        span {
          display: block;
          transform: rotateZ(-180deg);
          font-size: 42px;
          color: #1a1a1a;
        }
      }
      .carousel_r {
        right: var(--size--36);
        span {
          display: block;
          font-size: 42px;
          color: #1a1a1a;
        }
      }
    }
  }
  .popularBox {
    background: linear-gradient(
        141deg,
        rgba(73, 159, 129, 0.85) 0%,
        rgba(116, 156, 86, 0.85) 91%
      ),
      #e2f1ee;
    padding: var(--size-80) var(--size-145) var(--size-80);
    display: flex;
    .popularBox_l {
      margin-right: var(--size-46);
      .popularBox_l_title {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        .popularBox_l_title_l {
          font-size: var(--size-48);
          font-family: Impact, Impact-Regular;
          color: #1a1a1a;
          line-height: var(--size-58);
        }
        .popularBox_l_title_r {
          font-size: var(--size-18);
          font-family: Microsoft YaHei, Microsoft YaHei-Regular;
          color: #ffffff;
          border-bottom: 1px solid #ffffff;
          span {
            font-size: var(--size-32);
            position: relative;
            top: var(--size-6);
          }
        }
      }
      .popularBox_l_list {
        margin-top: var(--size-45);
        display: flex;
        .popularBox_l_list_item {
          width: var(--size-360);
          border-radius: var(--size-10);
          overflow: hidden;
          &:first-child {
            margin-right: var(--size-47);
          }
          img {
            width: var(--size-360);
            height: var(--size-404);
            display: block;
          }
          .popularBox_l_list_item_box {
            background: #ffffff;
            padding: var(--size-20) var(--size-18) var(--size-35);
            .popularBox_l_list_item_box_title {
              font-size: var(--size-18);
              font-family: Microsoft YaHei, Microsoft YaHei-Regular;
              color: #1a1a1a;
              line-height: var(--size-28);
              margin-bottom: var(--size-34);
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
            }
            .popularBox_l_list_item_box_btn {
              display: block;
              width: var(--size-170);
              height: var(--size-48);
              background: linear-gradient(0deg, #7b9c4f 0%, #2da19d 100%),
                #1a1a1a;
              border-radius: var(--size-8);
              font-size: var(--size-18);
              font-family: Microsoft YaHei, Microsoft YaHei-Regular;
              text-align: center;
              color: #ffffff;
              line-height: var(--size-49);
              cursor: pointer;
            }
          }
        }
      }
    }
    .popularBox_r {
      .popularBox_r_title {
        font-size: var(--size-48);
        font-family: Impact, Impact-Regular;
        text-align: right;
        color: #ffffff;
        line-height: var(--size-58);
      }
      .popularBox_r_list {
        display: flex;
        flex-wrap: wrap;
        margin-top: var(--size-45);
        > div {
          position: relative;
          img {
            width: var(--size-199);
            height: var(--size-199);
            display: block;
            object-fit: cover;
          }
          div {
            width: 100%;
            font-size: var(--size-16);
            font-family: Arial, Arial-Regular;
            font-weight: 400;
            text-align: center;
            padding: 0 0 var(--size-15);
            color: #ffffff;
            line-height: var(--size-20);
            position: absolute;
            left: 0;
            bottom: 0;
          }
        }
      }
    }
  }
  .hotBox {
    padding: var(--size-80) var(--size-145) var(--size-80);
    background: #f5f5f5;
    .hotBox_title {
      font-size: var(--size-48);
      font-family: Impact, Impact-Regular;
      text-align: center;
      color: #1a1a1a;
    }
    .hotBox_list {
      display: flex;
      margin-top: var(--size-20);
      .hotBox_list_item {
        display: block;
        cursor: pointer;
        width: var(--size-514);
        margin-right: var(--size-43);
        &:last-child {
          margin-right: 0;
        }
        img {
          width: var(--size-514);
          height: var(--size-372);
          display: block;
        }
        .hotBox_list_item_box {
          padding: var(--size-30) var(--size-18) var(--size-41);
          background: #ffffff;
          border-bottom: var(--size-7) solid #ffffff;
          .hotBox_list_item_box_date {
            font-size: var(--size-18);
            font-family: Arial, Arial-Regular;
            font-weight: 400;
            text-align: left;
            color: #666666;
            padding: 0 var(--size-14);
            border-left: 1px solid #666666;
            border-right: 1px solid #666666;
            line-height: var(--size-20);
            display: inline-block;
            margin-left: var(--size-2);
          }
          .hotBox_list_item_box_text {
            font-size: var(--size-26);
            font-family: Arial, Arial-Bold;
            font-weight: 700;
            text-align: left;
            color: #1a1a1a;
            margin-top: var(--size-6);
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          }
        }
      }
      .active {
        .hotBox_list_item_box {
          border-bottom: var(--size-7) solid #509f7a;
          .hotBox_list_item_box_date {
            color: #509f7a;
            border-left: 1px solid #509f7a;
            border-right: 1px solid #509f7a;
          }
          .hotBox_list_item_box_text {
            color: #509f7a;
          }
        }
      }
    }
    .hotBox_btn {
      width: var(--size-217);
      height: var(--size-60);
      background: linear-gradient(0deg, #7b9c4f 0%, #2da19d 100%), #1a1a1a;
      border-radius: var(--size-8);
      text-align: center;
      line-height: var(--size-60);
      font-size: var(--size-18);
      color: #ffffff;
      margin: var(--size-40) auto 0;
      cursor: pointer;
    }
  }
  .researchBox {
    padding: var(--size-80) var(--size-145) var(--size-155);
    .researchBox_title {
      font-size: var(--size-48);
      font-family: Impact, Impact-Regular;
      text-align: center;
      color: #1a1a1a;
    }
    .researchBox_list {
      display: flex;
      justify-content: space-between;
      margin-top: var(--size-20);
      .researchBox_list_item {
        width: var(--size-253);
        height: var(--size-166);
        background: #fafafa;
        border-radius: var(--size-8);
        padding-top: var(--size-28);
        cursor: pointer;
        text-align: center;
        img {
          height: var(--size-70);
          margin: auto;
        }
        .img {
          display: none;
        }
        div {
          font-size: var(--size-18);
          font-family: Arial, Arial-Bold;
          font-weight: 700;
          text-align: center;
          color: #1a1a1a;
          margin-top: var(--size-12);
        }
        &:hover {
          background: #e2f1ee;
          .imga {
            display: block;
          }
          .img {
            display: none !important;
          }
          div {
            color: #639e57;
          }
        }
      }
      // .active {
      //   background: #e2f1ee;
      //   div {
      //     color: #639e57;
      //   }
      // }
    }
  }
  .customersBox {
    background: #f6faf7;
    padding: var(--size-80) var(--size-145) var(--size-140);
    .customersBox_title {
      font-size: var(--size-48);
      font-family: Impact, Impact-Regular;
      text-align: center;
      color: #1a1a1a;
    }
    .customersBox_subTitle {
      font-size: var(--size-18);
      font-family: Arial, Arial-Regular;
      text-align: center;
      color: #666666;
    }
    .customersBox_carousel {
      margin-top: var(--size-45);
      .customersBox_carousel_item {
        display: flex;
        justify-content: space-between;
        img {
          height: var(--size-70);
        }
      }
    }
  }
  .customBox {
    background: url("@/assets/images/bg1.png");
    padding: var(--size-105) var(--size-145) var(--size-120);
    position: relative;
    .customBox_title {
      font-size: var(--size-48);
      font-family: Impact, Impact-Regular;
      font-weight: 400;
      text-align: left;
      color: #1a1a1a;
    }
    .customBox_content {
      font-size: var(--size-18);
      font-family: Arial, Arial-Regular;
      font-weight: 400;
      text-align: left;
      color: #1a1a1a;
    }
    .customBox_btn {
      width: var(--size-227);
      height: var(--size-60);
      background: linear-gradient(0deg, #7b9c4f 0%, #2da19d 100%), #1a1a1a;
      border-radius: var(--size-8);
      text-align: center;
      line-height: var(--size-60);
      font-size: var(--size-18);
      color: #ffffff;
      margin: var(--size-40) 0 0;
      cursor: pointer;
    }
    .customBox_img {
      width: var(--size-362);
      height: var(--size-553);
      position: absolute;
      bottom: 0;
      right: var(--size-145);
    }
  }
}
</style>