展会

app.json

@@ -58,13 +58,15 @@
         "My_Checkbox": "/components/My_Checkbox/index",
         "My_navBar": "/components/My_navBar/index",
         "My_pageReachBottom": "/components/My_pageReachBottom/index",
-        "van-transition": "@vant/weapp/transition/index"
+        "van-transition": "@vant/weapp/transition/index",
+        "My_DisplayBox": "/components/My_DisplayBox/index",
+        "My_VerticalBox": "/components/My_VerticalBox/index"
     },
     "window": {
         "backgroundTextStyle": "light",
-        "navigationBarBackgroundColor": "#fff",
+        "navigationBarBackgroundColor": "#4DC2D4",
         "navigationBarTitleText": "布万家",
-        "navigationBarTextStyle": "black"
+        "navigationBarTextStyle": "white"
     },
     "sitemapLocation": "sitemap.json",
     "lazyCodeLoading": "requiredComponents"

components/My_DisplayBox/index.js

@@ -15,6 +15,7 @@ Component({
         getExhibitionTitle: {
             type: Function
         },
+        /* 是否显示更多 */
         isMore:{
             type:Boolean,
             value:true

components/My_DisplayBox/index.wxss

@@ -30,4 +30,10 @@
     font-size: 24rpx;
     font-weight: 500;
     color: rgba(0, 0, 0, 0.33);
+}
+
+.display-title_image {
+    width: 32rpx;
+    height: 32rpx;
+    margin: 0 6rpx;
 }

pages/tabbar-pages/home/index.json

@@ -1,9 +1,7 @@
 {
   "navigationStyle": "custom",
   "usingComponents": {
-    "My_DisplayBox": "/components/My_DisplayBox/index",
     "My_DisplayItem": "/components/My_DisplayItem/index",
-    "My_RoundedCornerButtonTabs": "/components/My_RoundedCornerButtonTabs/index",
-    "My_VerticalBox": "/components/My_VerticalBox/index"
+    "My_RoundedCornerButtonTabs": "/components/My_RoundedCornerButtonTabs/index"
   }
 }

pages/tradeShow/index.js

@@ -5,7 +5,20 @@ Page({
      * 页面的初始数据
      */
     data: {
-
+        //轮播图列表
+        swiperBannerList: [{
+            id: "001",
+            url: "/static/changeImg.png",
+            src: ''
+        }, {
+            id: "002",
+            url: "/static/changeImg.png",
+            src: ''
+        }, {
+            id: "003",
+            url: "/static/changeImg.png",
+            src: ''
+        }],
     },
 
     /**

pages/tradeShow/index.wxml

@@ -1,2 +1,53 @@
-<!--pages/tradeShow/index.wxml-->
-<text>pages/tradeShow/index.wxml</text>
+<!-- banner -->
+<view class="homeBanner">
+    <swiper class="swiperBanner" autoplay indicator-dots circular="true" indicator-active-color="#fff">
+        <swiper-item wx:for="{{swiperBannerList}}" wx:key="index">
+            <image src="{{item.url}}" mode="aspectFill"></image>
+        </swiper-item>
+    </swiper>
+</view>
+<!-- 数据展示 -->
+<view class="data-display">
+    <view>
+        <view class="data-display-title">展示商</view>
+        <view class="data-display-num">1326</view>
+    </view>
+    <view>
+        <view class="data-display-title">正在直播</view>
+        <view class="data-display-num">1326</view>
+    </view><view>
+        <view class="data-display-title">观众人数</view>
+        <view class="data-display-num">1326854</view>
+    </view>
+</view>
+
+<My_DisplayBox title="云展会直播大厅" isMore="{{false}}">
+    <!-- 标题前图片 -->
+    <image slot="display-box-img" class="display-title_image" src="/static/icon-06.png" mode="aspectFit"></image>
+    <swiper class="exhibition-swiper" autoplay indicator-dots circular="true" indicator-active-color="#fff">
+        <swiper-item wx:for="{{3}}" class="exhibition-swiper-item">
+            <view wx:for="{{4}}" class="exhibition">
+                <image class="exhibition-img" src="/static/changeImg.png" mode="aspectFill" ></image>
+                <view class="exhibition-bottom">
+                    <view class="exhibition-bottom-title">65421</view>
+                    <view class="exhibition-bottom-data">185</view>
+                </view>
+            </view>
+        </swiper-item>
+    </swiper>
+</My_DisplayBox>
+
+<My_DisplayBox title="热门展商" isMore="{{false}}">
+    <!-- 标题前图片 -->
+    <image slot="display-box-img" class="display-title_image" src="/static/icon-04.png" mode="aspectFit"></image>
+    
+</My_DisplayBox>
+
+<My_DisplayBox title="热门商品" isMore="{{false}}">
+    <!-- 标题前图片 -->
+    <image slot="display-box-img" class="display-title_image" src="/static/icon-04.png" mode="aspectFit"></image>
+    <My_VerticalBox></My_VerticalBox>
+    <view style="height: 10rpx;"></view>
+    <My_VerticalBox></My_VerticalBox>
+    <view style="height: 10rpx;"></view>
+</My_DisplayBox>

pages/tradeShow/index.wxss

@@ -1 +1,107 @@
-/* pages/tradeShow/index.wxss */
+/* banner */
+.homeBanner {
+    width: 100vw;
+    height: 306rpx;
+    background-color: #FFFFFF;
+}
+
+.swiperBanner {
+    width: 702rpx;
+    height: 286rpx;
+    padding-top: 20rpx;
+    margin: 0 auto;
+    border-radius: 10rpx;
+    overflow: hidden;
+}
+
+.swiperBanner swiper-item,
+.swiperBanner image {
+    width: 100%;
+    height: 100%;
+}
+
+/* 数据展示 */
+.data-display {
+    display: flex;
+    justify-content: space-around;
+    width: 100vw;
+    height: 142rpx;
+    background-color: #FFFFFF;
+    padding: 0 30rpx;
+    box-sizing: border-box;
+    text-align: center;
+}
+
+.data-display-title {
+    font-size: 24rpx;
+    color: #333333;
+    line-height: 34rpx;
+    opacity: .7;
+    margin-top: 20rpx;
+}
+
+.data-display-num {
+    font-size: 42rpx;
+    font-weight: 500;
+    color: #4DC2D4;
+    line-height: 58rpx;
+    margin-top: 10rpx;
+}
+
+.display-title_image {
+    width: 32rpx;
+    height: 32rpx;
+    margin: 0 6rpx;
+}
+
+/* 直播大厅和热门展商 */
+.exhibition-swiper {
+    height: 700rpx;
+}
+
+.exhibition-swiper-item {
+    display: flex;
+    justify-content: space-around;
+    flex-wrap: wrap;
+    height: 650rpx !important;
+}
+
+/* 盒子 */
+.exhibition {
+    display: flex;
+    flex-direction: column;
+    width: 322rpx;
+    height: 308rpx;
+    background: #FFFFFF;
+    box-shadow: 10rpx 10rpx 20rpx 0px rgba(0, 0, 0, 0.05);
+    border-radius: 10rpx;
+    border: 2rpx solid rgba(0, 0, 0, 0.05);
+    overflow: hidden;
+}
+
+.exhibition-img {
+    width: 100%;
+    height: 240rpx;
+    box-shadow: 10rpx 10rpx 20rpx 0px rgba(0, 0, 0, 0.05);
+}
+
+.exhibition-bottom {
+    flex: 1;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 12rpx;
+    box-sizing: border-box;
+}
+
+.exhibition-bottom-title {
+    font-size: 28rpx;
+    color: #000000;
+}
+
+.exhibition-bottom-data{
+    font-size: 24rpx;
+    font-weight: 500;
+    color: #4DC2D4;
+}

project.private.config.json

@@ -107,6 +107,12 @@
                     "pathName": "pages/businessPartner/applyFor",
                     "query": "",
                     "scene": null
+                },
+                {
+                    "name": "展会",
+                    "pathName": "pages/tradeShow/index",
+                    "query": "",
+                    "scene": null
                 }
             ]
         }