home.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489
  1. <template>
  2. <view class="content">
  3. <nav-bar :show-title="false">
  4. <view class="top-container">
  5. <image class="logo" src="/static/img/logo.png" />
  6. <view class="countdown">
  7. 距开幕 <view class="days"> 168 </view> 天
  8. </view>
  9. </view>
  10. </nav-bar>
  11. <u-swiper :items="images" indicato-dots-style="morphing" :height="387" />
  12. <view class="main-container">
  13. <u-search v-model="searchKeyword" placeholder="搜索展商 / 展品名称 / 会议" @search="onClickSearch" />
  14. <view class="nav-icons">
  15. <template v-for="(item, index) in navIcons">
  16. <view class="nav-icon-wrapper" :key="index">
  17. <view class="nav-icon" @click="onClickNavIcon(item)">
  18. <view v-if="item.icon.indexOf('.svg') !== -1"
  19. :style="'background-image:url(' + item.icon + ')'"></view>
  20. <view v-else-if="item.icon.indexOf('icon-') !== -1" :class="'iconfont ' + item.icon"></view>
  21. </view>
  22. <view class="nav-text">
  23. {{ item.name }}
  24. </view>
  25. </view>
  26. </template>
  27. </view>
  28. <view class="panel-group panel-group-1">
  29. <u-panel title="精彩视频" link="https://www.productronicachina.com.cn/for-journalists-impression-videos">
  30. <u-swiper :items="videos" :height="360" :autoplay="false" :border-radius="10" :image-width="508"
  31. :image-height="286" next-margin="100rpx" />
  32. </u-panel>
  33. <u-panel title="精彩图集" link="https://www.productronicachina.com.cn/for-journalists-impression-videos">
  34. <view class="album">
  35. <template v-for="(item, index) in albumPics">
  36. <view class="album-pic" :key="index" @click="onClickAlbum(index)">
  37. <image :src="item.src" mode="aspectFill" />
  38. </view>
  39. </template>
  40. </view>
  41. </u-panel>
  42. </view>
  43. <view class="panel-group">
  44. <u-panel title="新闻" link="/pages/news/index">
  45. <news-recommend />
  46. </u-panel>
  47. </view>
  48. <view class="panel-group">
  49. <u-panel title="战略合作方" link="https://www.productronicachina.com.cn/partners">
  50. <u-swiper :items="partners" :height="250">
  51. <template v-slot="{ scope }">
  52. <view class="partners">
  53. <template v-for="(item, index) in scope.children">
  54. <view class="partner" :key="index">
  55. <image :src="item.icon" />
  56. </view>
  57. </template>
  58. </view>
  59. </template>
  60. </u-swiper>
  61. </u-panel>
  62. <u-panel title="推荐展商" link="https://www.productronicachina.com.cn/partners">
  63. <u-swiper :items="partners" :height="250">
  64. <template v-slot="{ scope }">
  65. <view class="partners">
  66. <template v-for="(item, index) in scope.children">
  67. <view class="partner" :key="index">
  68. <image :src="item.icon" />
  69. </view>
  70. </template>
  71. </view>
  72. </template>
  73. </u-swiper>
  74. </u-panel>
  75. <u-panel title="合作媒体" link="https://www.productronicachina.com.cn/partners">
  76. <u-swiper :items="partners" :autoplay="false" :height="250">
  77. <template v-slot="{ scope }">
  78. <view class="partners">
  79. <template v-for="(item, index) in scope.children">
  80. <view class="partner" :key="index">
  81. <image :src="item.icon" />
  82. </view>
  83. </template>
  84. </view>
  85. </template>
  86. </u-swiper>
  87. </u-panel>
  88. </view>
  89. </view>
  90. <contact-us :show.sync="showContactUs" />
  91. <popup-ad :show.sync="showPopupAd" />
  92. <view class="floating-buttons">
  93. <view hover-class="hover" @click="showPopupAd = true">
  94. <view class="iconfont icon-xiaochengxu-canguandengjiicon"></view>
  95. <view class="floating-button-label">参观登记</view>
  96. </view>
  97. <view hover-class="hover" @click="showContactUs = true">
  98. <view class="iconfont icon-xiaochengxu-lianxiwomenicon"></view>
  99. <view class="floating-button-label">联系我们</view>
  100. </view>
  101. </view>
  102. </view>
  103. </template>
  104. <script>
  105. import NavBar from '@/components/layout/nav-bar'
  106. import UScrollView from '@/components/common/u-scroll-view'
  107. import USwiper from '@/components/common/u-swiper'
  108. import USearch from '@/components/common/u-search'
  109. import UPanel from '@/components/common/u-panel'
  110. import NewsRecommend from '@/pages/news/components/news-recommend.vue'
  111. import ContactUs from '@/pages/index/components/contact-us.vue'
  112. import PopupAd from '@/pages/index/components/popup-ad.vue'
  113. import { getDashboardInfo } from '@/api/index'
  114. export default {
  115. options: {
  116. styleIsolation: 'shared'
  117. },
  118. components: {
  119. NavBar,
  120. UScrollView,
  121. USwiper,
  122. USearch,
  123. UPanel,
  124. NewsRecommend,
  125. ContactUs,
  126. PopupAd
  127. },
  128. data() {
  129. return {
  130. searchKeyword: '',
  131. showContactUs: false,
  132. showPopupAd: false,
  133. navIcons: [{
  134. icon: 'icon-xiaochengxu-guanyuzhanhuiicon',
  135. name: '关于展会',
  136. link: 'https://www.productronicachina.com.cn/zh-cn/productronica-china-2025'
  137. }, {
  138. icon: 'icon-xiaochengxu-zhanshangmingluicon',
  139. name: '展商名录',
  140. link: '/pages/exhibitor/index'
  141. }, {
  142. icon: 'icon-zhanpinziliaoicon',
  143. name: '展商产品',
  144. link: '/pages/exhibitor/exhibit'
  145. }, {
  146. icon: 'icon-zhantaihuodongicon',
  147. name: '同期活动',
  148. link: '/pages/activity/index'
  149. }, {
  150. icon: 'icon-zhanshangxinwenicon',
  151. name: '展商新闻',
  152. link: '/pages/news/index?type=exhibitor'
  153. }, {
  154. icon: 'icon-xiaochengxu-zhanguanpingmiantuicon',
  155. name: '展馆平面图',
  156. link: 'https://www.productronicachina.com.cn/for-visitors-fairgrounds-map'
  157. }, {
  158. icon: 'icon-xiaochengxu-guanzhongzhinanicon',
  159. name: '观众指南',
  160. link: ''
  161. }, {
  162. icon: 'icon-xiaochengxu-jiaotongzhinanicon',
  163. name: '交通指南',
  164. link: 'https://www.productronicachina.com.cn/travel-stay-getting-there'
  165. }],
  166. images: [],
  167. videos: [{
  168. src: 'https://oss.starify.cn/prod/starify/up/0001018678/20241108/672da5a8add02.jpeg?x-oss-process=image/resize,w_500',
  169. url: 'https://matchexpo.obs.cn-north-1.myhuaweicloud.com/common/2023/1113/655190052f376.mp4'
  170. }, {
  171. src: 'https://oss.starify.cn/prod/starify/up/0001018678/20241108/672da5a8add02.jpeg?x-oss-process=image/resize,w_500',
  172. url: 'https://matchexpo.obs.cn-north-1.myhuaweicloud.com/common/2023/1113/655190052f376.mp4'
  173. }],
  174. albumPics: [{
  175. src: 'https://oss.starify.cn/prod/starify/up/0001018678/20241108/672da4d0387b5.jpeg?x-oss-process=image/resize,w_200'
  176. }, {
  177. src: 'https://oss.starify.cn/prod/starify/up/0001018678/20241108/672da4d081488.jpeg?x-oss-process=image/resize,w_200'
  178. }, {
  179. src: 'https://oss.starify.cn/prod/starify/up/0001018678/20241108/672da4d0dd2a1.jpeg?x-oss-process=image/resize,w_200'
  180. }, {
  181. src: 'https://oss.starify.cn/prod/starify/up/0001018678/20241108/672da4d13e734.jpeg?x-oss-process=image/resize,w_200'
  182. }, {
  183. src: 'https://oss.starify.cn/prod/starify/up/0001018678/20241108/672da4d1a47e6.jpeg?x-oss-process=image/resize,w_200'
  184. }, {
  185. src: 'https://oss.starify.cn/prod/starify/up/0001018678/20241108/672da4d214927.jpeg?x-oss-process=image/resize,w_200'
  186. }],
  187. // 合作方列表
  188. partners: [{
  189. name: '第一页',
  190. children: [{
  191. icon: 'https://www.productronicachina.com.cn/resources/files/0626/667b7a454718d/1 中国工控网.png'
  192. }, {
  193. icon: 'https://www.productronicachina.com.cn/resources/files/0626/667b806511810/2 智汇工业.png'
  194. }, {
  195. icon: 'https://www.productronicachina.com.cn/resources/files/0626/667b7a4536d7e/4 SMT China&化合物半导体.png'
  196. }, {
  197. icon: 'https://www.productronicachina.com.cn/resources/files/0626/667b7a451f071/3 中国电子制造&亚洲控制.png'
  198. }, {
  199. icon: 'https://www.productronicachina.com.cn/resources/files/0626/667b7a454718d/1 中国工控网.png'
  200. }, {
  201. icon: 'https://www.productronicachina.com.cn/resources/files/0626/667b806511810/2 智汇工业.png'
  202. }, {
  203. icon: 'https://www.productronicachina.com.cn/resources/files/0626/667b7a4536d7e/4 SMT China&化合物半导体.png'
  204. }, {
  205. icon: 'https://www.productronicachina.com.cn/resources/files/0626/667b7a451f071/3 中国电子制造&亚洲控制.png'
  206. }]
  207. }, {
  208. name: '第二页',
  209. children: [{
  210. icon: 'https://www.productronicachina.com.cn/resources/files/0626/667b7a454718d/1 中国工控网.png'
  211. }, {
  212. icon: 'https://www.productronicachina.com.cn/resources/files/0626/667b806511810/2 智汇工业.png'
  213. }, {
  214. icon: 'https://www.productronicachina.com.cn/resources/files/0626/667b7a4536d7e/4 SMT China&化合物半导体.png'
  215. }, {
  216. icon: 'https://www.productronicachina.com.cn/resources/files/0626/667b7a451f071/3 中国电子制造&亚洲控制.png'
  217. }, {
  218. icon: 'https://www.productronicachina.com.cn/resources/files/0626/667b7a454718d/1 中国工控网.png'
  219. }, {
  220. icon: 'https://www.productronicachina.com.cn/resources/files/0626/667b806511810/2 智汇工业.png'
  221. }, {
  222. icon: 'https://www.productronicachina.com.cn/resources/files/0626/667b7a4536d7e/4 SMT China&化合物半导体.png'
  223. }, {
  224. icon: 'https://www.productronicachina.com.cn/resources/files/0626/667b7a451f071/3 中国电子制造&亚洲控制.png'
  225. }]
  226. }],
  227. }
  228. },
  229. created() {
  230. this.getDashboardData()
  231. },
  232. methods: {
  233. onClickNavIcon(item) {
  234. if (item.link === '/pages/exhibitor/index') {
  235. this.$emit('switch-tab', 'exhibitor')
  236. return
  237. }
  238. this.navigateTo(item.link)
  239. },
  240. onClickSearch() {
  241. this.navigateTo('/pages/index/search?query=' + this.searchKeyword)
  242. },
  243. onClickAlbum(index) {
  244. const pics = this.albumPics.map(v => {
  245. return v.src
  246. })
  247. uni.previewImage({
  248. current: index,
  249. urls: pics
  250. })
  251. },
  252. getDashboardData() {
  253. getDashboardInfo().then(res => {
  254. this.images = res.data.module1
  255. console.log(this.images)
  256. })
  257. }
  258. }
  259. }
  260. </script>
  261. <style lang="scss">
  262. .logo {
  263. width: 150rpx;
  264. height: 37rpx;
  265. }
  266. .panel-group {
  267. margin-top: 43rpx;
  268. background-color: #FFFFFF;
  269. &.panel-group-1 {
  270. margin-top: 0;
  271. }
  272. }
  273. .top-container {
  274. display: flex;
  275. align-items: center;
  276. .countdown {
  277. display: flex;
  278. align-items: center;
  279. margin-left: 27rpx;
  280. font-size: $fontSize3;
  281. .days {
  282. color: #F97316;
  283. font-size: $fontSize6;
  284. font-weight: bold;
  285. padding: 0 4rpx;
  286. }
  287. }
  288. }
  289. .search-container {
  290. .search-input {
  291. height: 64rpx;
  292. border-radius: 50rpx;
  293. background-color: #FFFFFF;
  294. box-shadow: 0 4rpx 4rpx 0 rgba(0, 0, 0, 0.15);
  295. border: 2rpx solid #D9D9D9;
  296. padding: 4rpx;
  297. overflow: hidden;
  298. .van-field__placeholder {
  299. font-size: $fontSize2;
  300. }
  301. .van-cell__left-icon-wrap {
  302. height: 50rpx;
  303. }
  304. .van-field__control {
  305. font-size: $fontSize2;
  306. height: 50rpx;
  307. }
  308. }
  309. .van-search {
  310. --search-padding: 0rpx;
  311. --search-input-height: 34rpx;
  312. --search-background-color: #FFFFFF;
  313. padding-right: 24rpx;
  314. font-size: $fontSize2;
  315. }
  316. .search-text {
  317. font-size: $fontSize2;
  318. }
  319. .van-search__action {
  320. color: #333333;
  321. }
  322. .van-icon {
  323. color: #D4D4D6;
  324. }
  325. .van-cell {
  326. padding: 2rpx 0rpx 2rpx !important;
  327. }
  328. }
  329. .nav-icons {
  330. display: grid;
  331. grid-template-columns: 1fr 1fr 1fr 1fr;
  332. grid-row-gap: 53rpx;
  333. margin-top: 47rpx;
  334. margin-bottom: 41rpx;
  335. .nav-icon-wrapper {
  336. @include display-flex-center;
  337. flex-direction: column;
  338. cursor: pointer;
  339. }
  340. .nav-text {
  341. margin-top: 20rpx;
  342. font-size: $fontSize3;
  343. color: #555555;
  344. }
  345. .nav-icon {
  346. @include display-flex-center;
  347. width: 73rpx;
  348. height: 73rpx;
  349. border-radius: 50%;
  350. overflow: hidden;
  351. background-color: $buttonPrimaryColor;
  352. .iconfont {
  353. font-size: 46rpx;
  354. color: #FFFFFF;
  355. }
  356. &>view {
  357. width: 46rpx;
  358. height: 46rpx;
  359. background-size: 46rpx 46rpx;
  360. }
  361. }
  362. }
  363. .album {
  364. display: grid;
  365. grid-auto-flow: row;
  366. grid-gap: 15rpx;
  367. height: 500rpx;
  368. width: fit-content;
  369. grid-template-areas: "a b b" "c d f" "c e f";
  370. .album-pic {
  371. width: 196rpx;
  372. height: 155rpx;
  373. border-radius: 10rpx;
  374. overflow: hidden;
  375. &:nth-child(1) {
  376. grid-area: a;
  377. }
  378. &:nth-child(2) {
  379. width: 418rpx;
  380. height: 155rpx;
  381. grid-area: b;
  382. }
  383. &:nth-child(3) {
  384. grid-area: c;
  385. }
  386. &:nth-child(4) {
  387. grid-area: d;
  388. }
  389. &:nth-child(5) {
  390. grid-area: e;
  391. }
  392. &:nth-child(6) {
  393. grid-area: f;
  394. }
  395. &:nth-child(3),
  396. &:nth-child(6) {
  397. width: 196rpx;
  398. height: 324rpx;
  399. }
  400. }
  401. image {
  402. width: 100%;
  403. height: 100%;
  404. }
  405. }
  406. .partners {
  407. display: grid;
  408. grid-template-columns: repeat(4, 1fr);
  409. grid-column-gap: 9rpx;
  410. grid-row-gap: 13rpx;
  411. .partner {
  412. @include display-flex-center;
  413. width: 150rpx;
  414. height: 91rpx;
  415. }
  416. image {
  417. width: 127rpx;
  418. height: 25rpx;
  419. }
  420. }
  421. .floating-buttons {
  422. position: fixed;
  423. right: 30rpx;
  424. bottom: 200rpx;
  425. display: grid;
  426. grid-template-columns: 1fr;
  427. grid-row-gap: 19rpx;
  428. &>view {
  429. @include display-flex-center;
  430. flex-direction: column;
  431. width: 100rpx;
  432. height: 100rpx;
  433. background-color: #FFFFFF;
  434. box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.25);
  435. border-radius: 50%;
  436. cursor: pointer;
  437. }
  438. .floating-button-label {
  439. margin-top: 4rpx;
  440. font-size: $fontSize0;
  441. color: #94A3B8;
  442. white-space: nowrap;
  443. }
  444. .iconfont {
  445. font-size: 44rpx;
  446. color: $textActionColor;
  447. }
  448. }
  449. </style>