<!DOCTYPE html>
<!--  This site was created in Webflow. https://webflow.com  --><!--  Last Published: Wed Oct 16 2024 06:43:09 GMT+0000 (Coordinated Universal Time)  -->
<html data-wf-page="66e3d9f1033b6111b53e6c47" data-wf-site="66e3d9f0033b6111b53e61fe">

<head>
  <meta charset="utf-8">
  <title>鹏诚展览 - 展会优质服务商</title>
  <meta content="鹏诚展览" property="og:title">
  <meta content="鹏诚展览" property="twitter:title">
  <meta content="width=device-width, initial-scale=1" name="viewport">
  <meta content="Webflow" name="generator">
  <link href="css/normalize.css" rel="stylesheet" type="text/css">
  <link href="css/webflow.css" rel="stylesheet" type="text/css">
  <link href="css/pengcheng.webflow.css" rel="stylesheet" type="text/css">
  <link href="https://fonts.googleapis.com" rel="preconnect">
  <link href="https://fonts.gstatic.com" rel="preconnect" crossorigin="anonymous">
  <!-- <script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js" type="text/javascript"></script> -->
  <script src="js/webfont.js" type="text/javascript"></script>
  <script
    type="text/javascript">WebFont.load({ google: { families: ["Montserrat:100,100italic,200,200italic,300,300italic,400,400italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic", "Oswald:200,300,400,500,600,700", "Droid Serif:400,400italic,700,700italic"] } });</script>
  <script
    type="text/javascript">!function (o, c) { var n = c.documentElement, t = " w-mod-"; n.className += t + "js", ("ontouchstart" in o || o.DocumentTouch && c instanceof DocumentTouch) && (n.className += t + "touch") }(window, document);</script>
  <link href="images/favicon.ico" rel="shortcut icon" type="image/x-icon">
  <link href="images/webclip.png" rel="apple-touch-icon">
  <link href="font/GlowSansSC-Extended-Heavy.otf" rel="stylesheet">
  <!-- <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css"> -->
  <link rel="stylesheet" href="css/swiper-bundle.min.css">
  <script src="js/vue2_7_16.js" type="text/javascript"></script>
  <script src="js/utils.js" type="text/javascript"></script>
  <script src="js/axios.min.js"></script>
</head>

<body class="body">
  <div id="app">
    <div data-collapse="medium" data-animation="default" data-duration="400" data-easing="ease" data-easing2="ease"
      role="banner" class="navigation w-nav">
      <div class="navigation-wrap">
        <a href="index.html" aria-current="page" class="logo-link w-nav-brand">
          <div class="w-layout-hflex logo-icon-container"><img src="images/pc-logo.svg" width="Auto" alt
              class="logo-image">
          </div>
        </a>

        <div class="menu">
          <nav role="navigation" class="navigation-items w-nav-menu">
            <a href="exhibition.html" class="navigation-item nav-show w-nav-link" id="nav-exhibition"></a>
            <div class="menu-divider"></div>
            <a href="https://www.shpengcheng.com/newsdetail.html?id=180" class="navigation-item nav-show w-nav-link"
              id="nav-service"></a>
            <div class="menu-divider"></div>
            <a href="hotel.html" class="navigation-item nav-hotel w-nav-link" id="nav-hotel"></a>
            <div class="menu-divider"></div>
            <a href="examples.html" class="navigation-item nav-example w-nav-link" id="nav-example"></a>
            <div class="menu-divider"></div>
            <a href="news.html" aria-current="page" class="navigation-item nav-news w-nav-link" id="nav-news"></a>
            <div class="menu-divider"></div>
            <a href="about.html" class="navigation-item nav-about w-nav-link" id="nav-about"></a>
            <div class="menu-divider"></div>
            <a href="https://booking.shpengcheng.com/" class="navigation-item nav-about nav-button w-nav-link"
              id="btn-booking"></a>
            <a href="contact.html" class="navigation-item nav-about nav-button nav-btn-margin-bottom w-nav-link"
              id="btn-consult"></a>
            <div class="lang-switch-nav-mobile">
              <button class="btn-lang-switch-mobile" id="switchCh-mobile">中文</button>｜
              <button class="btn-lang-switch-mobile" id="switchEn-mobile">English</button>
            </div>
            <div
              style="display: flex; flex: 1; background-color: white; flex-direction: column; justify-content: space-around; margin-top: 500px;">
            </div>
          </nav>
          <div class="menu-button w-nav-button"><img src="images/menu-open.svg" width="30" alt class="menu-icon"></div>
        </div>

        <div class="menu-right-nav">
          <a href="contact.html" class="footer-button cc-contact-us w-inline-block">
            <div class="text-block-6" id="btn-consult-now"><br></div>
          </a>
          <div class="lang-switch-nav">
            <button class="btn-lang-switch" id="switchCh">中</button>/
            <button class="btn-lang-switch lang-switch-margin" id="switchEn">En</button>
          </div>
        </div>
      </div>
    </div>
    <div ref="preBanner" hidden="true">
      <div class="w-layout-blockcontainer banner-section w-container">
        <div class="w-layout-blockcontainer footer-grid-container w-container">
          <div data-delay="4000" data-animation="slide" class="slider w-clearfix w-slider" data-autoplay="true"
            data-easing="ease" data-hide-arrows="false" data-disable-swipe="false" data-autoplay-limit="2000"
            data-nav-spacing="4" data-duration="1000" data-infinite="true">

            <div class="mask w-slider-mask">
              <div class="slide w-slide" v-for="(item, index) in bannerData" :key="index">
                <div class="slider-collection-wrapper w-dyn-list">
                  <div role="list" class="slider-collection-list w-dyn-items">
                    <div role="listitem" class="slider-collection-item w-dyn-item">
                      <div class="slider-collection-box">
                        <div class="w-layout-vflex banner-item-text-box">
                          <div class="w-richtext">
                            <p v-for="(titles, index) in item.titles" class="banner-item-title">{{titles}}</p>
                            <!-- <p>‍</p> -->
                            <!-- <p>Hi，</p>
                              <p>我们是鹏诚。</p>
                              <p>‍</p> -->
                          </div>
                          <div class="w-richtext banner-content-margin-top">
                            <!-- <p>展会优质服务商</p>
                              <p>为客户提供卓越的展会服务，实现合作共赢</p>
                              <p>目前已服务展会参与人数过千万，5000+合作企业</p> -->
                            <p v-for="(subtitles, index) in item.subTitles" class="banner-item-content">{{
                              subtitles }}</p>
                          </div>
                        </div>
                        <div class="banner-item-img-box">
                          <img :src="item.covImg" loading="lazy" alt
                            sizes="(max-width: 479px) 87vw, (max-width: 767px) 43vw, (max-width: 991px) 48vw, 50vw"
                            class="slider-content-img">
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="slide-nav w-slider-nav w-shadow"></div>
            <div class="code-embed w-embed">
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="section-hotel-order">
      <div ref="preHotel" hidden="true">
        <div class="hotel-order-container">
          <a class="hotel-txt-container" href="hotel.html">
            <div class="w-layout-hflex hotel-buttons-container-mobile">
              <div class="w-layout-hflex button-tab-sel"><img src="images/icon-sf-1.png" loading="lazy" alt
                  class="ic-hotel-btn">
                <div class="txt-hotel-btn btn-selected" id="homepage-hotel-booking-mobile"><br></div>
              </div>
              <div class="w-layout-hflex button-tab-nor"><img src="images/icon-sf-2.png" loading="lazy" alt
                  class="ic-hotel-btn">
                <div class="txt-hotel-btn btn-normal" id="homepage-stand-mobile"><br></div>
              </div>
            </div>
            <div class="w-layout-hflex hotel-buttons-container-mobile">
              <div class="w-layout-hflex button-tab-nor"><img src="images/icon-sf-1.png" loading="lazy" alt
                  class="ic-hotel-btn">
                <div class="txt-hotel-btn btn-normal" id="homepage-business-mobile"><br></div>
              </div>
              <div class="w-layout-hflex button-tab-nor"><img src="images/icon-sf-3.png" loading="lazy" alt
                  class="ic-hotel-btn">
                <div class="txt-hotel-btn btn-normal" id="homepage-gift-mobile"></div>
              </div>
            </div>
            <div class="hotel-order-ref" id="homepage-booking-title"></div>
            <div class="hotel-order-title">
              <p class="hotel-title" id="homepage-booking-ex-title"></p>
            </div>
            <div class="hotel-order-content">
              <p class="hotel-content" id="homepage-booking-content"></p>
            </div>
          </a>
          <div class="hotel-list-container">
            <div class="w-layout-hflex hotel-buttons-container">
              <div class="w-layout-hflex button-tab-sel"><img src="images/icon-sf-1.png" loading="lazy" alt
                  class="ic-hotel-btn ic-hotel-btn-sel">
                <div class="txt-hotel-btn btn-selected" id="homepage-hotel-booking"><br></div>
              </div>
              <div class="w-layout-hflex button-tab-nor"><img src="images/icon-sf-2.png" loading="lazy" alt
                  class="ic-hotel-btn ic-hotel-btn-nor">
                <div class="txt-hotel-btn btn-normal" id="homepage-stand"><br></div>
              </div>
              <div class="w-layout-hflex button-tab-nor"><img src="images/icon-sf-1.png" loading="lazy" opacity="40%"
                  alt class="ic-hotel-btn ic-hotel-btn-nor">
                <div class="txt-hotel-btn btn-normal" id="homepage-business"><br></div>
              </div>
              <div class="w-layout-hflex button-tab-nor"><img src="images/icon-sf-3.png" loading="lazy" alt
                  class="ic-hotel-btn ic-hotel-btn-nor">
                <div class="txt-hotel-btn btn-normal" id="homepage-gift"></div>
              </div>
            </div>
            <div class="hotel-slider-wrapper w-dyn-list">
              <div role="list" class="hotel-slider-list w-dyn-items">
                <div role="listitem" class="hotel-slider-item w-dyn-item" v-for="(item, index) in hotelData"
                  :key="index">
                  <div class="w-layout-vflex hotel-item-mobile" @click="onItemClick(item.id, 2)">
                    <img :src="item.covImg" loading="lazy" width="Auto" alt="hotel-img"
                      sizes="(max-width: 479px) 40vw, 100vw" class="hotel-item-image">
                    <div class="w-layout-hflex hotel-item-title">
                      <div class="title-name">{{item.title}}</div>
                      <div class="title-tag">{{item.subTitle}}<br></div>
                    </div>
                    <p class="hotel-desc">{{item.articleAbstract}}</p>
                    <div class="w-layout-hflex hotel-loc-container"><img src="images/icon-location.svg" loading="lazy"
                        alt="icon
              " class="ic-location">
                      <div class="txt-location">{{item.location}}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="slider-wrapper w-dyn-list swiper-initialized swiper-horizontal swiper-backface-hidden">
              <div role="list" class="slider-list w-dyn-items" id="swiper-wrapper-f6d027149d548b1e" aria-live="off"
                style="transition-duration: 700ms; transform: translate3d(0px, 0px, 0px);">
                <div role="group" v-for="(item, index) in hotelData" :key="index"
                  class="slider-item w-dyn-item swiper-slide-active" @click="onItemClick(item.id, 2)" aria-label="1 / 2"
                  :data-swiper-slide-index="index">
                  <div class="w-layout-vflex hotel-item"><img :src="item.covImg" loading="lazy" width="Auto"
                      alt="hotel-img" sizes="(max-width: 479px) 100vw, 14vw" class="hotel-item-image">
                    <div class="w-layout-hflex hotel-item-title">
                      <div class="title-name">{{item.title}}</div>
                    </div>
                    <div style="margin-top: 9px;">
                      <div class="title-tag">{{item.subTitle}}<br></div>
                    </div>
                  </div>
                  <p class="hotel-desc">{{item.articleAbstract}}</p>
                  <div class="w-layout-hflex hotel-loc-container"><img src="images/icon-location.svg" loading="lazy"
                      alt="icon
              " class="ic-location">
                    <div class="txt-location">{{item.location}}</div>
                  </div>
                </div>
              </div><span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="section-header">
      <div id="para-title-anchor-exhibition" class="title-anchor is--v is--slideup-exhibition">
        <a class="title-container-exhibition" href="exhibition.html">
          <h1 class="section-head-text para-title" id="homepage-sec-events"></h1>
        </a>
      </div>
    </div>
    <div class="section-slider-section">
      <div class="w-layout-blockcontainer slider-container w-container">
        <div ref="preExhibition" hidden="true">
          <div class="hotel-order-list-container">
            <div class="hotel-slider-wrapper w-dyn-list">
              <div role="list" class="hotel-slider-list w-dyn-items">
                <div role="listitem" class="slider-item-mobile w-dyn-item" v-for="(item, index) in exhibitionData"
                  :key="index">
                  <div class="slider-show-container" @click="onItemClick(item.id, 1)">
                    <img :src="item.covImg" loading="lazy" width="296" alt sizes="(max-width: 479px) 40vw, 100vw"
                      class="slider-box-img">
                    <div class="slier-box-title">{{item.subTitle}}</div>
                    <div class="slider-box-title-bold">{{item.title}}</div>
                    <p class="slider-box-content">{{item.articleAbstract}}</p>
                    <div class="w-layout-hflex slider-box-icon" style="display: flex; flex-direction: row-reverse;">
                      <!-- <div class="sss"><img src="images/icon-retail.svg" loading="lazy" alt="icon
              " class="slider-icon-tag-new">
                        <div class="slider-text-tag">零售pc</div>
                      </div> -->
                      <div class="btn-border">
                        <img src="images/ic_book_online.svg" loading="lazy" alt="icon
              " class="slider-icon-tag-new">
                        <div class="slider-text-tag-blue" @click.stop="bookOnline(item)" id="btn-booking-online">
                          {{item.bookOnline}}</div>
                      </div>
                      <div v-if="item.bookMini.length > 0" class="btn-border" style="margin-right: 12px;">
                        <img src="images/ic_mini.svg" loading="lazy" alt="icon
              " class="slider-icon-tag-new">
                        <div class="slider-text-tag-blue" @click.stop="bookMini(item)" id="btn-booking-mini">
                          {{item.bookMini}}</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="slider-wrapper w-dyn-list swiper-initialized swiper-horizontal swiper-backface-hidden">
            <div role="list" class="slider-list w-dyn-items" id="swiper-wrapper-9aef481010f605dc63" aria-live="off"
              style="transition-duration: 0ms; transform: translate3d(0px, 0px, 0px); transition-delay: 0ms;">
              <div role="group" class="slider-item hotel-order w-dyn-item swiper-slide-prev"
                v-for="(item, index) in exhibitionData" :key="index" aria-label="1 / 1"
                :data-swiper-slide-index="index">
                <div class="slider-show-container" @click="onItemClick(item.id, 1)">
                  <img :src="item.covImg" loading="lazy" width="296" alt
                    sizes="(max-width: 479px) 100vw, (max-width: 767px) 19vw, (max-width: 1919px) 14vw, 16vw"
                    class="slider-box-img">
                  <div class="slier-box-title">{{item.subTitle}}</div>
                  <div class="slider-box-title-bold">{{item.title}}</div>
                  <p class="slider-box-content">{{item.articleAbstract}}</p>
                  <div class="w-layout-hflex slider-box-icon" style="display: flex; flex-direction: row-reverse;">
                    <!-- <div class="sss">
                      <img src="images/icon-retail.svg" loading="lazy" alt="icon
            " class="slider-icon-tag-new">
                      <div class="slider-text-tag">零售22</div>
                    </div> -->
                    <div class="btn-border">
                      <img src="images/ic_book_online.svg" loading="lazy" alt="icon
            " class="slider-icon-tag-new">
                      <div class="slider-text-tag-blue" @click.stop="bookOnline(item)" id="btn-booking-online">
                        {{item.bookOnline}}</div>
                    </div>
                    <div v-if="item.bookMini.length > 0" class="btn-border" style="margin-right: 8px;">
                      <img src="images/ic_mini.svg" loading="lazy" alt="icon
            " class="slider-icon-tag-new">
                      <div class="slider-text-tag-blue" @click.stop="bookMini(item)" id="btn-booking-mini">
                        {{item.bookMini}}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div><span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
          </div>
        </div>
      </div>
    </div>
    <!--       <section class="hotel-order-section">
        <a href="https://booking.shpengcheng.com/"
          class="footer-button cc-contact-us hotel-order-btn-margin w-inline-block">
          <div class="text-block-6 top" id="homepage-ex-booking-now">
          </div>
        </a>
      </section> -->
    <div class="section-header">
      <div id="para-title-anchor-example" class="title-anchor is--v is--slideup-example">
        <a class="title-container-example" href="examples.html">
          <h1 class="section-head-text para-title" id="homepage-sec-cases"></h1>
        </a>
      </div>
    </div>
    <div class="section-custom">
      <div class="section-custom-container">
        <div class="logo-container">
          <img src="images/cs-logo-1.png" loading="lazy" alt="hy" class="img-logo">
          <img src="images/cs-logo-2.png" loading="lazy" alt class="img-logo">
          <img src="images/cs-logo-3.png" loading="lazy" alt class="img-logo">
          <img src="images/cs-logo-4.png" loading="lazy" alt class="img-logo">
          <img src="images/cs-logo-5.png" loading="lazy" alt class="img-logo">
          <img src="images/cs-logo-6.png" loading="lazy" alt class="img-logo">
          <img src="images/cs-logo-7.png" loading="lazy" alt class="img-logo">
          <img src="images/cs-logo-8.png" loading="lazy" alt class="img-logo">
          <img src="images/cs-logo-9.png" loading="lazy" alt class="img-logo">
        </div>
        <div class="logo-container">
          <img src="images/cs-logo-1.png" loading="lazy" alt="hy" class="img-logo">
          <img src="images/cs-logo-2.png" loading="lazy" alt class="img-logo">
          <img src="images/cs-logo-3.png" loading="lazy" alt class="img-logo">
          <img src="images/cs-logo-4.png" loading="lazy" alt class="img-logo">
          <img src="images/cs-logo-5.png" loading="lazy" alt class="img-logo">
          <img src="images/cs-logo-6.png" loading="lazy" alt class="img-logo">
          <img src="images/cs-logo-7.png" loading="lazy" alt class="img-logo">
          <img src="images/cs-logo-8.png" loading="lazy" alt class="img-logo">
          <img src="images/cs-logo-9.png" loading="lazy" alt class="img-logo">
        </div>
      </div>
    </div>
    <div class="section-edu-new">
      <div class="edu-container">
        <div class="collection-edu-wrapper w-dyn-list">
          <div role="list" class="edu-collection-list w-dyn-items">
            <div id="w-node-_8f069868-f981-a3a1-6199-20407eccc6d3-b53e6c47" role="listitem"
              class="edu-collection-item w-dyn-item" v-for="(item, index) in exampleData" :key="index">
              <div class="w-layout-vflex edu-card" @click="onItemClick(item.id, 3)"><img :src="item.covImg"
                  loading="lazy" width="Auto" alt sizes="(max-width: 479px) 40vw, (max-width: 1919px) 200px, 14vw"
                  class="card-img">
                <div class="card-title">{{item.title}}</div>
                <div class="card-desc">{{item.subTitle}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="section-header">
      <div id="para-title-anchor-news" class="title-anchor is--v is--slideup-news">
        <a class="title-container-news" href="news.html">
          <h1 class="section-head-text para-title" id="homepage-sec-news"></h1>
        </a>
      </div>
    </div>
    <div class="section-news news-margin-top">
      <div class="news-container">
        <div class="news-collection-wrapper w-dyn-list">
          <div role="list" class="news-collection-list w-dyn-items">

            <div role="listitem" class="news-collections-item w-dyn-item" v-for="(item, index) in newsData"
              :key="index">
              <div class="w-layout-hflex news-box" @click="onItemClick(item.id, 4)">
                <img :src="item.covImg" loading="lazy" alt height="100" sizes="(max-width: 479px) 100vw, 204px"
                  class="new-box-image">
                <div class="w-layout-vflex news-box-text">
                  <div class="news-title">{{item.title}}</div>
                  <div class="news-title2">{{item.subTitle}}
                    {{item.updateTimeStr}}</div>
                  <p class="news-content">{{item.articleAbstract}}
                  </p>
                </div>
              </div>
              <div class="w-layout-hflex news-box-mobile">
                <div class="news-div">
                  <img :src="item.covImg" loading="lazy" alt height="100" sizes="(max-width: 479px) 60px, 100vw"
                    class="new-box-image">
                  <div class="w-layout-vflex news-box-text">
                    <div class="news-title">{{item.title}}</div>
                    <div class="news-title2">{{item.subTitle}}
                      {{item.updateTimeStr}}</div>
                  </div>
                </div>
                <p class="news-content">{{item.articleAbstract}}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="hotel-order-content-section cc-cta">
      <div class="footer-grid-container">
        <div class="cta-wrap">
          <div class="footer-div-block">
            <div class="cta-text">
              <div class="heading-jumbo-small" id="homepage-bottom-title"></div>
              <div class="paragraph-bigger cc-bigger-light" id="homepage-bottom-content"></div>
            </div>
            <div class="footer-btn-container">
              <a href="https://booking.shpengcheng.com/" class="footer-button  cc-jumbo-button w-inline-block">
                <div class="footer-btn-ask-txt top footer-btn-ask" id="homepage-bottom-booking">
                </div>
              </a>
              <a href="contact.html" class="w-layout-hflex footer-ask-btn"><img src="images/icon-contact.svg"
                  loading="lazy" alt class="ic-contact-btn">
                <div class="txt-ask-btn btn-normal" id="homepage-bottom-consult"><br></div>
              </a>
            </div>
          </div>
        </div>
        <div class="footer-communication-container">
          <div class="w-layout-grid mobile-grid-communicate">
            <div id="w-node-_3135055f-ea3d-37ae-c346-46705be6275b-8f79f15f" class="grid-comm1"><img
                src="images/icon.svg" loading="lazy" alt class="footer-ic-conmunicate"></div>
          </div>
        </div>
        <div class="w-layout-grid footer-grid">
          <div id="w-node-_52ce4c68-3aaf-3254-bd9b-fa9d994aaa79-994aaa78" class="w-layout-vflex first-col footer-col">
            <img src="images/icon.svg" loading="lazy" alt class="footer-ic-conmunicate">
            <a class="wechat-button cc-contact-us">
              <div class="footer-ic-wechat-container top footer-ic-wechat" id="footer-wechat">
                <img src="images/icon-wechat.svg" loading="lazy" alt>
                <div class="wechattiptext">
                  <p class="wechat-order-txt">微信公众号</p>
                  <p class="wechat-order-scan">打开微信扫一扫</p>
                  <img src="images/wechat-qrcode.png" alt="contact code" style="width: 124px; height: auto;">
                </div>
              </div>
            </a>
          </div>
          <div id="w-node-_52ce4c68-3aaf-3254-bd9b-fa9d994aaaa7-994aaa78" class="w-layout-vflex footer-text-col">
            <div id="w-node-_52ce4c68-3aaf-3254-bd9b-fa9d994aaaa8-994aaa78" class="footer-text-title">
              <a href="exhibition.html" id="footer-event"></a>
            </div>
            <div class="footer-text-content">
              <a href="exhibition.html" id="footer-organization"></a>
            </div>
            <div class="footer-text-content">
              <a href="exhibition.html" id="footer-booking"></a>
            </div>
          </div>
          <div id="w-node-_52ce4c68-3aaf-3254-bd9b-fa9d994aaa87-994aaa78" class="w-layout-vflex footer-text-col">
            <div id="w-node-_52ce4c68-3aaf-3254-bd9b-fa9d994aaa88-994aaa78" class="footer-text-title">
              <a id="footer-service"></a>
            </div>
            <div class="footer-text-content">
              <a id="footer-stand"></a>
            </div>
            <div class="footer-text-content">
              <a id="footer-conference"></a>
            </div>
            <div class="footer-text-content">
              <a id="footer-rent"></a>
            </div>
            <div class="footer-text-content">
              <a id="footer-gift"></a>
            </div>
            <div class="footer-text-content">
              <a id="footer-points"></a>
            </div>
            <div class="footer-text-content" @click="getSelectedOption">
              <a id="footer-tourism"></a>
            </div>
          </div>
          <div id="w-node-_52ce4c68-3aaf-3254-bd9b-fa9d994aaa9c-994aaa78" class="w-layout-vflex footer-text-col">
            <div id="w-node-_52ce4c68-3aaf-3254-bd9b-fa9d994aaa9d-994aaa78" class="footer-text-title">
              <a href="news.html" id="footer-news"></a>
            </div>
            <div class="footer-text-content">
              <a href="news.html" id="footer-hot"></a>
            </div>
            <div class="footer-text-content">
              <a href="news.html" id="footer-ex-news"></a>
            </div>
            <div class="footer-text-content">
              <a href="news.html" id="footer-report"></a><br>
            </div>
          </div>
          <div id="w-node-_51bc162d-02e0-f454-6e4d-8ffee7e032ed-994aaa78" class="w-layout-vflex footer-text-col">
            <div id="w-node-_51bc162d-02e0-f454-6e4d-8ffee7e032ee-994aaa78" class="footer-text-title">
              <a href="about.html" id="footer-about"></a>
            </div>
            <div class="footer-text-content">
              <a href="about.html" id="footer-profile"></a>
            </div>
            <div class="footer-text-content">
              <a href="about.html" id="footer-culture"></a>
            </div>
            <div class="footer-text-content">
              <a href="about.html" id="footer-milestones"></a>
            </div>
          </div>
        </div>

      </div>
    </div>
    <div class="hotel-order-content-section">
      <div class="footer-desc-container">
        <div class="footer-divider"></div>
        <div class="footer-wrap">
          <a href="https://beian.miit.gov.cn/" target="_blank" class="webflow-link w-inline-block">
            <div class="paragraph-tiny">© 2024 上海鹏诚展览展示服务有限公司
              沪ICP备17054141号-1</div>
          </a>
        </div>
      </div>
    </div>
    <div id="myModal" class="mini-modal" @click="closeModal">
      <!-- Modal content -->
      <div class="modal-content">
        <!-- <span class="modal-close" @click="closeModal">&times;</span> -->
        <img id="img-book-mini" src alt="bookmini" style="width: 124px; height: auto;">
      </div>
    </div>
    <script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=66e3d9f0033b6111b53e61fe"
      type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
      crossorigin="anonymous"></script>
    <script src="js/webflow.js" type="text/javascript"></script>
    <!-- <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script> -->
    <script src="js/swiper-bundle.min.js"></script>
    <!-- <script src="https://weblocks.io/library.js"></script> -->
    <script src="js/library.js"></script>
    <!-- <script src="https://weblocks.io/script-66-529.js"></script> -->
    <script src="js/script-66-529.js"></script>
    <script>
      function scriptLoaded(event) {
        // 处理脚本加载成功的情况
        console.log('Script loaded successfully.');
        const lang = getItem('lang')
        setGlobalLang(lang)
        console.log('scriptLoaded setGlobalLang')
      }

      function scriptLoadFailed(event) {
        // 处理脚本加载失败的情况
        console.log('Script loading failed.');
      }
    </script>
    <script src="js/global_lang_set.js" type="text/javascript" onload="scriptLoaded(event)"
      onerror="scriptLoadFailed(event)"></script>
    <script>
      var modal = document.getElementById("myModal");
      window.onclick = function (event) {
        if (event.target == modal) {
          modal.style.display = "none";
        }
      }
    </script>
  </div>
</body>
<script>
  var app = new Vue({
    el: '#app',
    data() {
      return {
        lang: 0,
        bannerData: [],
        hotelData: [],
        exhibitionData: [],
        exampleData: [],
        newsData: [],
        name: 'zhanglei',
        number: 10,
      }
    },
    created() {
      var that = this
      this.lang = getItem('lang');
      console.log('create!!!', this.lang)
      // this.initDefaultLang();
      if (this.lang) {
        this.updateAllData();
      }
    },

    mounted() {
      window.updateAllData = this.updateAllData
    },
    setup(props) {
      this.lang = getItem('lang');
    },
    methods: {
      showModal(imageurl) {
        var modal = document.getElementById("myModal");
        var modalImg = document.getElementById('img-book-mini');
        modalImg.src = imageurl
        modal.style.display = "flex";
      },
      closeModal() {
        var modal = document.getElementById("myModal");
        modal.style.display = "none";
      },
      bookOnline(item) {
        // alert('bookOnline')
        console.log('web--', item.webUrl)
        if (item.webUrl) {
          window.open(item.webUrl);
        } else {
          alert('该展会暂不支持海外预订')
        }
      },
      bookMini(item) {
        console.log('bookmini--', item.miniImg)
        if (item.miniImg) {
          this.showModal(item.miniImg)
        } else {
          alert("该展会暂不支持小程序预订")
        }
        // console.log('web--',item.webUrl)
        // window.open(item.webUrl);
      },
      getSelectedOption() {
        var selectElement = document.getElementById('mySelect');
        var selectedValue = selectElement.options[selectElement.selectedIndex].value;
        var selectedText = selectElement.options[selectElement.selectedIndex].text;
        setItem('lang', selectedValue)
        console.log('say hello-->', selectedValue);

        console.log('Selected Value:', selectedValue);
        console.log('Selected Text:', selectedText);
      },
      switchLang: function () {
        if (this.lang == 'zh_CN') {
          this.lang = 'en_US'
        } else if (this.lang == 'en_US') {
          this.lang = 'zh_CN'
        }
        console.log('say hello-->', this.lang);
      },
      onBannerClick(item) {
        console.log('onBannerClick')
        console.log('onBannerClick--', item)
      },
      // 点击新闻
      onItemClick(id, type) {
        if (type == 4) {
          window.open(`newsdetail.html?id=${id}`);
        }
        else if (type == 1) {
          window.open(`exhibitiondetail.html?id=${id}`);
        }
        else if (type == 2) {
          window.open(`hoteldetail.html?id=${id}`);
        }
        else if (type == 3) {
          window.open(`exampledetail.html?id=${id}`);
        }
      },
      makeGetRequest(type) {
        var _pageSize = 10;
        if (type == 4) {
          _pageSize = 3
        } else if (type == 5) {
          _pageSize = 3
        } else if (type == 1 || type == 2) {
          _pageSize = 10
        }
        else if (type == 3) {
          _pageSize = 12
        }
        const lang = getItem('lang')
        console.log('header lang--', lang)
        axios.post(BASE_URL + 'w/article/list', {
          pageNo: 1,
          pageSize: _pageSize,
          status: 1,
          type: type
        }, {
          timeout: 60000,
          headers: {
            'Content-Type': 'application/json',
            'x-access-token': 'aba113577a0d42ac8d60486e2884a3f5',
            'lang': lang
          }
        }).then(
          (response) => {
            // var result = response.data;
            if (response && response['data']['code'] == 200) {
              if (type == 5) {
                if (response.data.rows) {
                  response.data.rows.forEach((item) => {
                    if (LANG == 'zh') {
                      item["titles"] = this.spliteTitle(item.title)
                      item["subTitles"] = this.spliteTitle(item.subTitle)
                    } else if (LANG == 'en') {
                      item["titles"] = this.spliteTitle(item.titleEn)
                      item["subTitles"] = this.spliteTitle(item.subTitleEn)
                    }
                  })
                }
                this.bannerData = response.data.rows
                const element = this.$refs.preBanner
                element.hidden = false
                console.log('bannerData', this.bannerData);
              } else if (type == 4) {
                this.newsData = response.data.rows
                this.newsData.forEach(item => {
                  const updateTimeStr = getCustomDateStr(item.dateUpdated)
                  item['updateTimeStr'] = updateTimeStr
                })
              } else if (type == 1) {
                console.log('exhibition')
                this.exhibitionData = response.data.rows
                const element = this.$refs.preExhibition
                element.hidden = false
                this.exhibitionData.forEach((item) => {
                  if (lang == 'zh_CN') {
                    item["bookOnline"] = '海外预订'
                    item["bookMini"] = '小程序预订'
                  } else if (lang == 'en_US') {
                    item["bookOnline"] = 'Book Now'
                    item["bookMini"] = ''
                  }
                })

              } else if (type == 2) {
                this.hotelData = response.data.rows
                const element = this.$refs.preHotel
                element.hidden = false
                console.log('HotelData::', this.hotelData);
              } else if (type == 3) {
                this.exampleData = response.data.rows
                console.log('exampleData::', this.exampleData);
              }

            } else {
              console.log('error')
            }
          },
          (error) => {
            console.log(error);
          }
        );
      },
      spliteTitle(str) {
        var res = []
        if (str && str.includes('\n')) {
          return str.split('\n')
        }
        else {
          res[0] = str
        }
        return res
      },
      updateAllData() {
        console.log('updateAllData')
        this.makeGetRequest(5);
        this.makeGetRequest(1);
        this.makeGetRequest(2);
        this.makeGetRequest(3);
        this.makeGetRequest(4);
      },
      initDefaultLang() {
        if (typeof setGlobalLang == 'function') {
          const text = document.getElementById('nav-exhibition').innerText
          if (text.length == 0) {
            const lang = getItem('lang')
            console.log('init default--lang--', lang)
            setGlobalLang(lang)
          }
        }
      }
    },
  })
  // document.addEventListener("DOMContentLoaded", function () {
  //   var selectElement = document.getElementById("mySelect");
  //   selectElement.addEventListener("change", function () {
  //     app.makeGetRequest(5);
  //     app.makeGetRequest(1);
  //     app.makeGetRequest(2);
  //     app.makeGetRequest(3);
  //     app.makeGetRequest(4);
  //   });
  // });
  // updateAllData()
</script>
<style>
  .slider-content-img {
    pointer-events: none
  }

  /* .letter {
    opacity: 0;
} */
  .letter {
    display: inline-block;
  }

  .replaybtn {
    opacity: 0;
  }

  .replaybtn.showbtn {
    opacity: 1;
  }

  .hotel-desc {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    max-lines: 2;
    -webkit-line-clamp: 2;
    /* number of lines to show */
    line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  /* 酒店模块预定hover  */
  .text-block-6 .tooltiptext {
    /* visibility: hidden; */
    width: 188px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 32px;
    position: absolute;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.3s;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 2px 3px #0003;
    margin-bottom: 10px;
  }

  .text-block-6 .order-txt {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: 0px;
    color: #212121;
  }

  .text-block-6 .order-scan {
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    margin-top: 24px;
    margin-bottom: 20px;
    letter-spacing: 0px;
    color: #A6A6A6;
  }

  .text-block-6:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
  }

  .text-block-6.top .tooltiptext {
    bottom: 100%;
    top: auto;
  }

  /* 酒店 hover end */

  /* 页脚预定hover */
  .footer-btn-ask-txt .tooltiptext {
    visibility: hidden;
    width: 188px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 32px;
    position: absolute;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.3s;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 2px 3px #0003;
    margin-bottom: 10px;
  }

  .footer-btn-ask-txt:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
  }

  .footer-btn-ask-txt.top .tooltiptext {
    bottom: 100%;
    top: auto;
  }

  .footer-btn-ask-txt .order-txt {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: 0px;
    color: #212121;
  }

  .footer-btn-ask-txt .order-scan {
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    margin-top: 24px;
    margin-bottom: 20px;
    letter-spacing: 0px;
    color: #A6A6A6;
  }

  /* 页脚预定hover end */


  /* 微信icon hover */
  .footer-ic-wechat-container .wechattiptext {
    visibility: hidden;
    width: 188px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 32px;
    position: absolute;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.3s;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 2px 3px #0003;
    margin-bottom: -20px;
  }

  .footer-ic-wechat-container:hover .wechattiptext {
    visibility: visible;
    opacity: 1;
  }

  .footer-ic-wechat-container.top .wechattiptext {
    bottom: 100%;
    top: auto;
  }

  .footer-ic-wechat-container .wechat-order-txt {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: 0px;
    color: #212121;
  }

  .footer-ic-wechat-container .wechat-order-scan {
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    margin-top: 24px;
    margin-bottom: 20px;
    letter-spacing: 0px;
    color: #A6A6A6;
  }

  .mini-modal {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Stay in place */
    z-index: 99;
    /* Sit on top */
    /* Location of the box */
    left: 0;
    top: 0;
    width: 100%;
    /* Full width */
    height: 100%;
    /* Full height */
    overflow: auto;
    /* Enable scroll if needed */
    background-color: rgb(0, 0, 0);
    /* Fallback color */
    background-color: rgba(0, 0, 0, 0.4);
    /* Black w/ opacity */
  }

  /* Modal Content */
  .modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 32px;
    border: 1px solid #888;

  }

  /* The Close Button */
  .modal-close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
  }

  .close:hover,
  .close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
  }

  /* 微信icon hover end */
</style>

</html>