展会

pages/tradeShow/index.js

@@ -1,4 +1,7 @@
-// pages/tradeShow/index.js
+import {
+    ApiModel
+} from "../../utils/api";
+const _Http = new ApiModel();
 Page({
 
     /**
@@ -13,11 +16,31 @@ Page({
      * 生命周期函数--监听页面加载
      */
     onLoad: function (options) {
+        /* 热门展商 */
+        _Http.basic({
+            "classname": "publicmethod.live.live",
+            "method": "agentList",
+            "content": {
+                "tactivityidid": 1
+            }
+        }).then(res => {
+            console.log(res)
+        });
+        
         /* 获取轮播图 */
         const bannerList = getApp().globalData.bannerDataList.filter(value => value.flocation == 'activity_head');
         this.setData({
             swiperBannerList: bannerList[0].banner
         });
+
+
+    },
+    searchBlur(e) {
+        const {
+            value
+        } = e.detail;
+        console.log(value)
+
     },
 
     /**

pages/tradeShow/index.wxml

@@ -10,19 +10,33 @@
     <view>
         <view class="data-display-title">正在直播</view>
         <view class="data-display-num">1326</view>
-    </view><view>
+    </view>
+    <view>
         <view class="data-display-title">观众人数</view>
         <view class="data-display-num">1326854</view>
     </view>
 </view>
 
 <My_DisplayBox title="云展会直播大厅" isMore="{{false}}">
+    <!-- 分类和搜索 -->
+    <view class="classify-and-search">
+        <view class="classify">
+            全部
+            <van-icon style="margin-left: 8rpx;" name="arrow-down" />
+        </view>
+        <view class="liveSearch">
+            <input class="liveSearch-input" type="text" confirm-type='search' placeholder="搜索直播间" bindblur="searchBlur" />
+            <view class="liveSearch-icon">
+                <image src="/static/icon-09.png" style="width: 20rpx; height: 20rpx; margin-bottom:6rpx;" mode="aspectFit"></image>
+            </view>
+        </view>
+    </view>
     <!-- 标题前图片 -->
     <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 class="exhibition-swiper" indicator-dots circular="true" indicator-active-color="#4DC2D4" indicator-color="#D8D8D8">
         <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>
+                <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>
@@ -33,12 +47,19 @@
 </My_DisplayBox>
 
 <My_DisplayBox title="热门展商" isMore="{{false}}">
+    <!-- 分类和搜索 -->
+    <view class="classify-and-search">
+        <view class="classify">
+            全部
+            <van-icon style="margin-left: 8rpx;" name="arrow-down" />
+        </view>
+    </view>
     <!-- 标题前图片 -->
     <image slot="display-box-img" class="display-title_image" src="/static/icon-04.png" mode="aspectFit"></image>
-    <swiper class="exhibition-swiper" autoplay indicator-dots circular="true" indicator-active-color="#fff">
+    <swiper class="exhibition-swiper" indicator-dots circular="true" indicator-active-color="#4DC2D4" indicator-color="#D8D8D8">
         <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>
+                <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>

pages/tradeShow/index.wxss

@@ -51,7 +51,7 @@
     width: 322rpx;
     height: 308rpx;
     background: #FFFFFF;
-    box-shadow: 10rpx 10rpx 20rpx 0px rgba(0, 0, 0, 0.05);
+    box-shadow: 0px 4rpx 8rpx 0px rgba(170, 170, 170, 0.1);
     border-radius: 10rpx;
     border: 2rpx solid rgba(0, 0, 0, 0.05);
     overflow: hidden;
@@ -60,7 +60,6 @@
 .exhibition-img {
     width: 100%;
     height: 240rpx;
-    box-shadow: 10rpx 10rpx 20rpx 0px rgba(0, 0, 0, 0.05);
 }
 
 .exhibition-bottom {
@@ -78,8 +77,57 @@
     color: #000000;
 }
 
-.exhibition-bottom-data{
+.exhibition-bottom-data {
     font-size: 24rpx;
     font-weight: 500;
     color: #4DC2D4;
 }
+
+/* 分类和搜索盒子 */
+.classify-and-search {
+    display: flex;
+    justify-content: space-between;
+    height: 40rpx;
+    margin-bottom: 20rpx;
+    padding: 0 3rpx;
+}
+
+/* 分类 */
+.classify {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    min-width: 120rpx;
+    height: 100%;
+    border-radius: 40rpx;
+    border: 2rpx solid #4DC2D4;
+    font-size: 20rpx;
+    color: #4DC2D4;
+    padding: 0 12rpx;
+    box-sizing: border-box;
+}
+
+.liveSearch {
+    display: flex;
+    justify-content: space-between;
+    width: 176rpx;
+    height: 100%;
+    background: #FFFFFF;
+    border-radius: 49rpx;
+    opacity: 0.7;
+    border: 2rpx solid #979797;
+    box-sizing: border-box;
+    padding: 0 12rpx 0 16rpx;
+}
+
+.liveSearch-input {
+    height: 100%;
+    min-height: 100%;
+    font-size: 20rpx;
+    color: #000000;
+}
+
+.liveSearch-icon {
+    height: 100%;
+    margin-left: 10rpx;
+}