123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489 |
- <template>
- <view class="content">
- <nav-bar :show-title="false">
- <view class="top-container">
- <image class="logo" src="/static/img/logo.png" />
- <view class="countdown">
- 距开幕 <view class="days"> 168 </view> 天
- </view>
- </view>
- </nav-bar>
- <u-swiper :items="images" indicato-dots-style="morphing" :height="387" />
- <view class="main-container">
- <u-search v-model="searchKeyword" placeholder="搜索展商 / 展品名称 / 会议" @search="onClickSearch" />
- <view class="nav-icons">
- <template v-for="(item, index) in navIcons">
- <view class="nav-icon-wrapper" :key="index">
- <view class="nav-icon" @click="onClickNavIcon(item)">
- <view v-if="item.icon.indexOf('.svg') !== -1"
- :style="'background-image:url(' + item.icon + ')'"></view>
- <view v-else-if="item.icon.indexOf('icon-') !== -1" :class="'iconfont ' + item.icon"></view>
- </view>
- <view class="nav-text">
- {{ item.name }}
- </view>
- </view>
- </template>
- </view>
- <view class="panel-group panel-group-1">
- <u-panel title="精彩视频" link="https://www.productronicachina.com.cn/for-journalists-impression-videos">
- <u-swiper :items="videos" :height="360" :autoplay="false" :border-radius="10" :image-width="508"
- :image-height="286" next-margin="100rpx" />
- </u-panel>
- <u-panel title="精彩图集" link="https://www.productronicachina.com.cn/for-journalists-impression-videos">
- <view class="album">
- <template v-for="(item, index) in albumPics">
- <view class="album-pic" :key="index" @click="onClickAlbum(index)">
- <image :src="item.src" mode="aspectFill" />
- </view>
- </template>
- </view>
- </u-panel>
- </view>
- <view class="panel-group">
- <u-panel title="新闻" link="/pages/news/index">
- <news-recommend />
- </u-panel>
- </view>
- <view class="panel-group">
- <u-panel title="战略合作方" link="https://www.productronicachina.com.cn/partners">
- <u-swiper :items="partners" :height="250">
- <template v-slot="{ scope }">
- <view class="partners">
- <template v-for="(item, index) in scope.children">
- <view class="partner" :key="index">
- <image :src="item.icon" />
- </view>
- </template>
- </view>
- </template>
- </u-swiper>
- </u-panel>
- <u-panel title="推荐展商" link="https://www.productronicachina.com.cn/partners">
- <u-swiper :items="partners" :height="250">
- <template v-slot="{ scope }">
- <view class="partners">
- <template v-for="(item, index) in scope.children">
- <view class="partner" :key="index">
- <image :src="item.icon" />
- </view>
- </template>
- </view>
- </template>
- </u-swiper>
- </u-panel>
- <u-panel title="合作媒体" link="https://www.productronicachina.com.cn/partners">
- <u-swiper :items="partners" :autoplay="false" :height="250">
- <template v-slot="{ scope }">
- <view class="partners">
- <template v-for="(item, index) in scope.children">
- <view class="partner" :key="index">
- <image :src="item.icon" />
- </view>
- </template>
- </view>
- </template>
- </u-swiper>
- </u-panel>
- </view>
- </view>
- <contact-us :show.sync="showContactUs" />
- <popup-ad :show.sync="showPopupAd" />
- <view class="floating-buttons">
- <view hover-class="hover" @click="showPopupAd = true">
- <view class="iconfont icon-xiaochengxu-canguandengjiicon"></view>
- <view class="floating-button-label">参观登记</view>
- </view>
- <view hover-class="hover" @click="showContactUs = true">
- <view class="iconfont icon-xiaochengxu-lianxiwomenicon"></view>
- <view class="floating-button-label">联系我们</view>
- </view>
- </view>
- </view>
- </template>
- <script>
- import NavBar from '@/components/layout/nav-bar'
- import UScrollView from '@/components/common/u-scroll-view'
- import USwiper from '@/components/common/u-swiper'
- import USearch from '@/components/common/u-search'
- import UPanel from '@/components/common/u-panel'
- import NewsRecommend from '@/pages/news/components/news-recommend.vue'
- import ContactUs from '@/pages/index/components/contact-us.vue'
- import PopupAd from '@/pages/index/components/popup-ad.vue'
- import { getDashboardInfo } from '@/api/index'
- export default {
- options: {
- styleIsolation: 'shared'
- },
- components: {
- NavBar,
- UScrollView,
- USwiper,
- USearch,
- UPanel,
- NewsRecommend,
- ContactUs,
- PopupAd
- },
- data() {
- return {
- searchKeyword: '',
- showContactUs: false,
- showPopupAd: false,
- navIcons: [{
- icon: 'icon-xiaochengxu-guanyuzhanhuiicon',
- name: '关于展会',
- link: 'https://www.productronicachina.com.cn/zh-cn/productronica-china-2025'
- }, {
- icon: 'icon-xiaochengxu-zhanshangmingluicon',
- name: '展商名录',
- link: '/pages/exhibitor/index'
- }, {
- icon: 'icon-zhanpinziliaoicon',
- name: '展商产品',
- link: '/pages/exhibitor/exhibit'
- }, {
- icon: 'icon-zhantaihuodongicon',
- name: '同期活动',
- link: '/pages/activity/index'
- }, {
- icon: 'icon-zhanshangxinwenicon',
- name: '展商新闻',
- link: '/pages/news/index?type=exhibitor'
- }, {
- icon: 'icon-xiaochengxu-zhanguanpingmiantuicon',
- name: '展馆平面图',
- link: 'https://www.productronicachina.com.cn/for-visitors-fairgrounds-map'
- }, {
- icon: 'icon-xiaochengxu-guanzhongzhinanicon',
- name: '观众指南',
- link: ''
- }, {
- icon: 'icon-xiaochengxu-jiaotongzhinanicon',
- name: '交通指南',
- link: 'https://www.productronicachina.com.cn/travel-stay-getting-there'
- }],
- images: [],
- videos: [{
- src: 'https://oss.starify.cn/prod/starify/up/0001018678/20241108/672da5a8add02.jpeg?x-oss-process=image/resize,w_500',
- url: 'https://matchexpo.obs.cn-north-1.myhuaweicloud.com/common/2023/1113/655190052f376.mp4'
- }, {
- src: 'https://oss.starify.cn/prod/starify/up/0001018678/20241108/672da5a8add02.jpeg?x-oss-process=image/resize,w_500',
- url: 'https://matchexpo.obs.cn-north-1.myhuaweicloud.com/common/2023/1113/655190052f376.mp4'
- }],
- albumPics: [{
- src: 'https://oss.starify.cn/prod/starify/up/0001018678/20241108/672da4d0387b5.jpeg?x-oss-process=image/resize,w_200'
- }, {
- src: 'https://oss.starify.cn/prod/starify/up/0001018678/20241108/672da4d081488.jpeg?x-oss-process=image/resize,w_200'
- }, {
- src: 'https://oss.starify.cn/prod/starify/up/0001018678/20241108/672da4d0dd2a1.jpeg?x-oss-process=image/resize,w_200'
- }, {
- src: 'https://oss.starify.cn/prod/starify/up/0001018678/20241108/672da4d13e734.jpeg?x-oss-process=image/resize,w_200'
- }, {
- src: 'https://oss.starify.cn/prod/starify/up/0001018678/20241108/672da4d1a47e6.jpeg?x-oss-process=image/resize,w_200'
- }, {
- src: 'https://oss.starify.cn/prod/starify/up/0001018678/20241108/672da4d214927.jpeg?x-oss-process=image/resize,w_200'
- }],
-
- partners: [{
- name: '第一页',
- children: [{
- icon: 'https://www.productronicachina.com.cn/resources/files/0626/667b7a454718d/1 中国工控网.png'
- }, {
- icon: 'https://www.productronicachina.com.cn/resources/files/0626/667b806511810/2 智汇工业.png'
- }, {
- icon: 'https://www.productronicachina.com.cn/resources/files/0626/667b7a4536d7e/4 SMT China&化合物半导体.png'
- }, {
- icon: 'https://www.productronicachina.com.cn/resources/files/0626/667b7a451f071/3 中国电子制造&亚洲控制.png'
- }, {
- icon: 'https://www.productronicachina.com.cn/resources/files/0626/667b7a454718d/1 中国工控网.png'
- }, {
- icon: 'https://www.productronicachina.com.cn/resources/files/0626/667b806511810/2 智汇工业.png'
- }, {
- icon: 'https://www.productronicachina.com.cn/resources/files/0626/667b7a4536d7e/4 SMT China&化合物半导体.png'
- }, {
- icon: 'https://www.productronicachina.com.cn/resources/files/0626/667b7a451f071/3 中国电子制造&亚洲控制.png'
- }]
- }, {
- name: '第二页',
- children: [{
- icon: 'https://www.productronicachina.com.cn/resources/files/0626/667b7a454718d/1 中国工控网.png'
- }, {
- icon: 'https://www.productronicachina.com.cn/resources/files/0626/667b806511810/2 智汇工业.png'
- }, {
- icon: 'https://www.productronicachina.com.cn/resources/files/0626/667b7a4536d7e/4 SMT China&化合物半导体.png'
- }, {
- icon: 'https://www.productronicachina.com.cn/resources/files/0626/667b7a451f071/3 中国电子制造&亚洲控制.png'
- }, {
- icon: 'https://www.productronicachina.com.cn/resources/files/0626/667b7a454718d/1 中国工控网.png'
- }, {
- icon: 'https://www.productronicachina.com.cn/resources/files/0626/667b806511810/2 智汇工业.png'
- }, {
- icon: 'https://www.productronicachina.com.cn/resources/files/0626/667b7a4536d7e/4 SMT China&化合物半导体.png'
- }, {
- icon: 'https://www.productronicachina.com.cn/resources/files/0626/667b7a451f071/3 中国电子制造&亚洲控制.png'
- }]
- }],
- }
- },
- created() {
- this.getDashboardData()
- },
- methods: {
- onClickNavIcon(item) {
- if (item.link === '/pages/exhibitor/index') {
- this.$emit('switch-tab', 'exhibitor')
- return
- }
- this.navigateTo(item.link)
- },
- onClickSearch() {
- this.navigateTo('/pages/index/search?query=' + this.searchKeyword)
- },
- onClickAlbum(index) {
- const pics = this.albumPics.map(v => {
- return v.src
- })
- uni.previewImage({
- current: index,
- urls: pics
- })
- },
- getDashboardData() {
- getDashboardInfo('',process.env.CONFERENCE_WEBSITE).then(res => {
- console.log(res.data.module1)
- this.images = res.data.module1
- })
- }
- }
- }
- </script>
- <style lang="scss">
- .logo {
- width: 150rpx;
- height: 37rpx;
- }
- .panel-group {
- margin-top: 43rpx;
- background-color: #FFFFFF;
- &.panel-group-1 {
- margin-top: 0;
- }
- }
- .top-container {
- display: flex;
- align-items: center;
- .countdown {
- display: flex;
- align-items: center;
- margin-left: 27rpx;
- font-size: $fontSize3;
- .days {
- color: #F97316;
- font-size: $fontSize6;
- font-weight: bold;
- padding: 0 4rpx;
- }
- }
- }
- .search-container {
- .search-input {
- height: 64rpx;
- border-radius: 50rpx;
- background-color: #FFFFFF;
- box-shadow: 0 4rpx 4rpx 0 rgba(0, 0, 0, 0.15);
- border: 2rpx solid #D9D9D9;
- padding: 4rpx;
- overflow: hidden;
- .van-field__placeholder {
- font-size: $fontSize2;
- }
- .van-cell__left-icon-wrap {
- height: 50rpx;
- }
- .van-field__control {
- font-size: $fontSize2;
- height: 50rpx;
- }
- }
- .van-search {
- --search-padding: 0rpx;
- --search-input-height: 34rpx;
- --search-background-color: #FFFFFF;
- padding-right: 24rpx;
- font-size: $fontSize2;
- }
- .search-text {
- font-size: $fontSize2;
- }
- .van-search__action {
- color: #333333;
- }
- .van-icon {
- color: #D4D4D6;
- }
- .van-cell {
- padding: 2rpx 0rpx 2rpx !important;
- }
- }
- .nav-icons {
- display: grid;
- grid-template-columns: 1fr 1fr 1fr 1fr;
- grid-row-gap: 53rpx;
- margin-top: 47rpx;
- margin-bottom: 41rpx;
- .nav-icon-wrapper {
- @include display-flex-center;
- flex-direction: column;
- cursor: pointer;
- }
- .nav-text {
- margin-top: 20rpx;
- font-size: $fontSize3;
- color: #555555;
- }
- .nav-icon {
- @include display-flex-center;
- width: 73rpx;
- height: 73rpx;
- border-radius: 50%;
- overflow: hidden;
- background-color: $buttonPrimaryColor;
- .iconfont {
- font-size: 46rpx;
- color: #FFFFFF;
- }
- &>view {
- width: 46rpx;
- height: 46rpx;
- background-size: 46rpx 46rpx;
- }
- }
- }
- .album {
- display: grid;
- grid-auto-flow: row;
- grid-gap: 15rpx;
- height: 500rpx;
- width: fit-content;
- grid-template-areas: "a b b" "c d f" "c e f";
- .album-pic {
- width: 196rpx;
- height: 155rpx;
- border-radius: 10rpx;
- overflow: hidden;
- &:nth-child(1) {
- grid-area: a;
- }
- &:nth-child(2) {
- width: 418rpx;
- height: 155rpx;
- grid-area: b;
- }
- &:nth-child(3) {
- grid-area: c;
- }
- &:nth-child(4) {
- grid-area: d;
- }
- &:nth-child(5) {
- grid-area: e;
- }
- &:nth-child(6) {
- grid-area: f;
- }
- &:nth-child(3),
- &:nth-child(6) {
- width: 196rpx;
- height: 324rpx;
- }
- }
- image {
- width: 100%;
- height: 100%;
- }
- }
- .partners {
- display: grid;
- grid-template-columns: repeat(4, 1fr);
- grid-column-gap: 9rpx;
- grid-row-gap: 13rpx;
- .partner {
- @include display-flex-center;
- width: 150rpx;
- height: 91rpx;
- }
- image {
- width: 127rpx;
- height: 25rpx;
- }
- }
- .floating-buttons {
- position: fixed;
- right: 30rpx;
- bottom: 200rpx;
- display: grid;
- grid-template-columns: 1fr;
- grid-row-gap: 19rpx;
- &>view {
- @include display-flex-center;
- flex-direction: column;
- width: 100rpx;
- height: 100rpx;
- background-color: #FFFFFF;
- box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.25);
- border-radius: 50%;
- cursor: pointer;
- }
- .floating-button-label {
- margin-top: 4rpx;
- font-size: $fontSize0;
- color: #94A3B8;
- white-space: nowrap;
- }
- .iconfont {
- font-size: 44rpx;
- color: $textActionColor;
- }
- }
- </style>
|