1

pages/match/index.less

@@ -4,159 +4,269 @@
 
     .one {
         display: flex;
-        flex-direction: row;
-        padding: 2vw;
-        border-bottom: 1px solid var(--f1Color);
+        flex-direction: column;
+        width: 100vw;
+        margin: 0 0 1vw 0;
 
         .one_1 {
-            flex-grow: 1;
+            display: flex;
+            flex-direction: row;
+            padding: 2vw;
+            background-color: var(--mainColor);
 
-            input {
-                padding: 1vw 0 2vw 2vw;
-                background-color: var(--f1Color);
-                border-radius: 5px;
+            .one_1_1 {
+                flex-grow: 1;
+
+                input {
+                    padding: 1vw 0 2vw 2vw;
+                    background-color: var(--f1Color);
+                    border-radius: 5px;
+                }
             }
-        }
 
-        .one_2 {
-            width: 20vw;
+            .one_1_2 {
+                width: 20vw;
 
-            button {
-                width: 100%;
-                padding: 2vw;
-                font-size: var(--font14Size);
+                button {
+                    width: 100%;
+                    padding: 2vw;
+                    font-size: var(--font14Size);
+                }
             }
         }
-    }
-
-    .two {
-        width: 96vw;
-        margin: 2vw;
 
-        .two_1 {
+        .one_2 {
             display: flex;
             flex-direction: row;
             justify-content: space-around;
             padding: 2vw;
             background-color: var(--f1Color);
         }
+
     }
 
-    .thr {
-        width: 96vw;
-        margin: 2vw;
+    .two {
         flex-grow: 1;
         position: relative;
+        width: 96vw;
+        margin: 2vw;
 
-        .thr_1 {
+        .list {
+            background-color: var(--f1Color);
+            margin: 0 0 2vw 0;
+            position: relative;
             width: 96vw;
-            margin: 2vw 0;
-            background-color: var(--mainColor);
+            display: flex;
+            flex-direction: column;
 
-            .list {
-                display: flex;
-                flex-direction: column;
-                justify-content: center;
-                background-color: var(--f1Color);
-                border-bottom: 1px dashed var(--f85Color);
-                width: 92vw;
-                padding: 2vw;
-                margin: 0 0 2vw 0;
+            .list_1 {
+                width: 96vw;
+
+                .image {
+                    width: 100%;
+                    height: 110px;
+                    overflow: hidden;
+                }
+            }
 
-                .list_1 {
-                    position: relative;
-                    height: 210px;
+            .list_2 {
+                position: relative;
+                top: -10vw;
+                width: 92vw;
+                background-color: #ffffff9f;
+                margin: 0 2vw;
+                border-radius: 5px;
 
-                    .one_1 {
-                        height: 100px;
+                .title {
+                    font-size: var(--font18Size);
+                    font-weight: bold;
+                    text-align: center;
+                    margin: 1vw 0;
+                }
 
-                        .image {
-                            width: 100%;
-                            height: 100%;
-                            background-color: var(--mainColor);
-                        }
+                .other {
+                    margin: 0 0 2vw 0;
+                    padding: 0 2vw;
 
+                    .other_1 {
+                        margin: 0 0 1vw 0;
+                        font-size: var(--font16Size);
+                        color: var(--f85Color);
                     }
+                }
 
-                    .one_2 {
-                        position: absolute;
-                        top: 17vw;
-                        width: 86vw;
-                        text-align: center;
-                        background-color: #ffffff9f;
-                        margin: 1vw;
-                        padding: 2vw;
-                        border-radius: 10px;
-                        box-shadow: 0 0 1vw #cccccc;
-
-                        .title {
-                            font-size: var(--font18Szie);
-                            font-weight: bold;
-                            margin: 0 0 2vw 0;
-                            text-align: center;
-
-                        }
-
-                        .other {
-                            display: flex;
-                            flex-wrap: wrap;
-                            width: 86vw;
-                            flex-direction: row;
-                            justify-content: space-around;
-                            margin: 0 0 2vw 0;
-
-                            .other_1 {
-                                width: 43vw;
-                                margin: 0 0 1vw 0;
-                                font-size: var(--font16Size);
-                                color: var(--f85Color);
-                            }
-                        }
-
-                        .status {
-                            .text {
-                                padding: 1vw 2vw;
-                                margin: 2vw 0;
-                                color: var(--mainColor);
-                                border-radius: 15px;
-                                font-size: var(--font14Size);
-                                text-align: center;
-                            }
-
-                            .color0 {
-                                background-color: #FFA500;
-                            }
-
-                            .color1 {
-                                background-color: #8B0000;
-                            }
-
-                            .color2 {
-                                background-color: #006400;
-                            }
-
-                            .color3 {
-                                background-color: #808080;
-                            }
-                        }
+                .status {
+                    text-align: center;
+                    margin: 0 0 2vw 0;
+
+                    text {
+                        display: inline-block;
+                        background-color: var(--redColor);
+                        color: var(--whiteColor);
+                        padding: 1vw 3vw;
+                        border-radius: 5px;
                     }
                 }
             }
         }
+    }
 
-        .scroll-view {
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-
-            .list-scroll-view {
-                display: flex;
-                flex-wrap: wrap;
-                align-content: flex-start;
-                justify-content: space-between;
-            }
-        }
+    // .one {
+    //     display: flex;
+    //     flex-direction: row;
+    //     padding: 2vw;
+    //     border-bottom: 1px solid var(--f1Color);
+
+    //     .one_1 {
+    //         flex-grow: 1;
+
+    //         input {
+    //             padding: 1vw 0 2vw 2vw;
+    //             background-color: var(--f1Color);
+    //             border-radius: 5px;
+    //         }
+    //     }
+
+    //     .one_2 {
+    //         width: 20vw;
+
+    //         button {
+    //             width: 100%;
+    //             padding: 2vw;
+    //             font-size: var(--font14Size);
+    //         }
+    //     }
+    // }
+
+    // .two {
+    //     width: 96vw;
+    //     margin: 2vw;
+
+    //     .two_1 {
+    //         display: flex;
+    //         flex-direction: row;
+    //         justify-content: space-around;
+    //         padding: 2vw;
+    //         background-color: var(--f1Color);
+    //     }
+    // }
+
+    // .thr {
+    //     width: 96vw;
+    //     margin: 2vw;
+    //     flex-grow: 1;
+    //     position: relative;
+
+    //     .thr_1 {
+    //         width: 96vw;
+    //         margin: 2vw 0;
+    //         background-color: var(--mainColor);
+
+    //         .list {
+    //             display: flex;
+    //             flex-direction: column;
+    //             justify-content: center;
+    //             background-color: var(--f1Color);
+    //             border-bottom: 1px dashed var(--f85Color);
+    //             width: 92vw;
+    //             padding: 2vw;
+    //             margin: 0 0 2vw 0;
+
+    //             .list_1 {
+    //                 position: relative;
+    //                 height: 210px;
+
+    //                 .one_1 {
+    //                     height: 100px;
+
+    //                     .image {
+    //                         width: 100%;
+    //                         height: 100%;
+    //                         background-color: var(--mainColor);
+    //                     }
+
+    //                 }
+
+    //                 .one_2 {
+    //                     position: absolute;
+    //                     top: 17vw;
+    //                     width: 86vw;
+    //                     text-align: center;
+    //                     background-color: #ffffff9f;
+    //                     margin: 1vw;
+    //                     padding: 2vw;
+    //                     border-radius: 10px;
+    //                     box-shadow: 0 0 1vw #cccccc;
+
+    //                     .title {
+    //                         font-size: var(--font18Szie);
+    //                         font-weight: bold;
+    //                         margin: 0 0 2vw 0;
+    //                         text-align: center;
+
+    //                     }
+
+    //                     .other {
+    //                         display: flex;
+    //                         flex-wrap: wrap;
+    //                         width: 86vw;
+    //                         flex-direction: row;
+    //                         justify-content: space-around;
+    //                         margin: 0 0 2vw 0;
+
+    //                         .other_1 {
+    //                             width: 43vw;
+    //                             margin: 0 0 1vw 0;
+    //                             font-size: var(--font16Size);
+    //                             color: var(--f85Color);
+    //                         }
+    //                     }
+
+    //                     .status {
+    //                         .text {
+    //                             padding: 1vw 2vw;
+    //                             margin: 2vw 0;
+    //                             color: var(--mainColor);
+    //                             border-radius: 15px;
+    //                             font-size: var(--font14Size);
+    //                             text-align: center;
+    //                         }
+
+    //                         .color0 {
+    //                             background-color: #FFA500;
+    //                         }
+
+    //                         .color1 {
+    //                             background-color: #8B0000;
+    //                         }
+
+    //                         .color2 {
+    //                             background-color: #006400;
+    //                         }
+
+    //                         .color3 {
+    //                             background-color: #808080;
+    //                         }
+    //                     }
+    //                 }
+    //             }
+    //         }
+    //     }
+
+
+    // }
+}
+
+
+.scroll-view {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+
+    .list-scroll-view {
+        display: flex;
+        flex-direction: column;
     }
 }

pages/match/index.wxml

@@ -1,6 +1,52 @@
 <mobile-main frameStyle="{{frameStyle}}" bind:tabPath="tabPath">
     <view slot="info" class="container main">
         <view class="one">
+            <view class="one_1">
+                <view class="one_1_1">
+                    <input type="text" placeholder="请输入关键词" />
+                </view>
+                <view class="one_1_2">
+                    <button type="primary">进入系统</button>
+                </view>
+            </view>
+            <view class="one_2">
+                <view class="one_2_1">
+                    <picker mode="selector" bindchange="typeChange" value="{{searchInfo.type}}" name="type" range-key='label' range="{{typeList}}">
+                        <view class="input">{{typeList[searchInfo.type].label||'请选择运动类型'}}</view>
+                    </picker>
+                </view>
+                <view class="one_2_2">
+                    <picker mode="selector" bindchange="statusChange" value="{{searchInfo.status}}" name="status" range-key='label' range="{{statusList}}">
+                        <view class="input">{{statusList[searchInfo.status].label||'请选择比赛状态'}}</view>
+                    </picker>
+                </view>
+            </view>
+        </view>
+        <view class="two">
+            <scroll-view scroll-y="true" class="scroll-view">
+                <view class="list-scroll-view">
+                    <view class="list" wx:for="{{list}}" wx:key="index">
+                        <view class="list_1">
+                            <image class="image" src="{{item.logo&&item.logo.length>0?item.logo[0].url:''}}"></image>
+                        </view>
+                        <view class="list_2">
+                            <view class="title">{{item.title}}</view>
+                            <view class="other">
+                                <view class="other_1 textOver">时间：{{item.time}}</view>
+                                <view class="other_1 textOver">等级：{{item.grade}}</view>
+                                <view class="other_1 textOver">类型：{{item.type=='0'?'其他':item.type=='1'?'羽毛球':item.type=='2'?'篮球':'足球'}}</view>
+                                <view class="other_1 textOver">地点：{{item.address}}</view>
+                            </view>
+                            <view class="status">
+                                <text>{{item.status=='0'?'计划中':item.status=='1'?'报名中':item.status=='2'?'进行中':'已结束'}}</text>
+                            </view>
+                        </view>
+                    </view>
+                </view>
+            </scroll-view>
+        </view>
+    </view>
+    <!-- <view class="one">
             <view class="one_1">
                 <input type="text" placeholder="请输入关键词" />
             </view>
@@ -44,6 +90,5 @@
                     </view>
                 </scroll-view>
             </view>
-        </view>
-    </view>
+        </view> -->
 </mobile-main>

pages/match/index.wxss

@@ -3,132 +3,104 @@
   background-color: var(--mainColor);
 }
 .main .one {
+  display: flex;
+  flex-direction: column;
+  width: 100vw;
+  margin: 0 0 1vw 0;
+}
+.main .one .one_1 {
   display: flex;
   flex-direction: row;
   padding: 2vw;
-  border-bottom: 1px solid var(--f1Color);
+  background-color: var(--mainColor);
 }
-.main .one .one_1 {
+.main .one .one_1 .one_1_1 {
   flex-grow: 1;
 }
-.main .one .one_1 input {
+.main .one .one_1 .one_1_1 input {
   padding: 1vw 0 2vw 2vw;
   background-color: var(--f1Color);
   border-radius: 5px;
 }
-.main .one .one_2 {
+.main .one .one_1 .one_1_2 {
   width: 20vw;
 }
-.main .one .one_2 button {
+.main .one .one_1 .one_1_2 button {
   width: 100%;
   padding: 2vw;
   font-size: var(--font14Size);
 }
-.main .two {
-  width: 96vw;
-  margin: 2vw;
-}
-.main .two .two_1 {
+.main .one .one_2 {
   display: flex;
   flex-direction: row;
   justify-content: space-around;
   padding: 2vw;
   background-color: var(--f1Color);
 }
-.main .thr {
-  width: 96vw;
-  margin: 2vw;
+.main .two {
   flex-grow: 1;
   position: relative;
-}
-.main .thr .thr_1 {
   width: 96vw;
-  margin: 2vw 0;
-  background-color: var(--mainColor);
+  margin: 2vw;
 }
-.main .thr .thr_1 .list {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
+.main .two .list {
   background-color: var(--f1Color);
-  border-bottom: 1px dashed var(--f85Color);
-  width: 92vw;
-  padding: 2vw;
   margin: 0 0 2vw 0;
-}
-.main .thr .thr_1 .list .list_1 {
   position: relative;
-  height: 210px;
+  width: 96vw;
+  display: flex;
+  flex-direction: column;
 }
-.main .thr .thr_1 .list .list_1 .one_1 {
-  height: 100px;
+.main .two .list .list_1 {
+  width: 96vw;
 }
-.main .thr .thr_1 .list .list_1 .one_1 .image {
+.main .two .list .list_1 .image {
   width: 100%;
-  height: 100%;
-  background-color: var(--mainColor);
+  height: 110px;
+  overflow: hidden;
 }
-.main .thr .thr_1 .list .list_1 .one_2 {
-  position: absolute;
-  top: 17vw;
-  width: 86vw;
-  text-align: center;
+.main .two .list .list_2 {
+  position: relative;
+  top: -10vw;
+  width: 92vw;
   background-color: #ffffff9f;
-  margin: 1vw;
-  padding: 2vw;
-  border-radius: 10px;
-  box-shadow: 0 0 1vw #cccccc;
+  margin: 0 2vw;
+  border-radius: 5px;
 }
-.main .thr .thr_1 .list .list_1 .one_2 .title {
-  font-size: var(--font18Szie);
+.main .two .list .list_2 .title {
+  font-size: var(--font18Size);
   font-weight: bold;
-  margin: 0 0 2vw 0;
   text-align: center;
+  margin: 1vw 0;
 }
-.main .thr .thr_1 .list .list_1 .one_2 .other {
-  display: flex;
-  flex-wrap: wrap;
-  width: 86vw;
-  flex-direction: row;
-  justify-content: space-around;
+.main .two .list .list_2 .other {
   margin: 0 0 2vw 0;
+  padding: 0 2vw;
 }
-.main .thr .thr_1 .list .list_1 .one_2 .other .other_1 {
-  width: 43vw;
+.main .two .list .list_2 .other .other_1 {
   margin: 0 0 1vw 0;
   font-size: var(--font16Size);
   color: var(--f85Color);
 }
-.main .thr .thr_1 .list .list_1 .one_2 .status .text {
-  padding: 1vw 2vw;
-  margin: 2vw 0;
-  color: var(--mainColor);
-  border-radius: 15px;
-  font-size: var(--font14Size);
+.main .two .list .list_2 .status {
   text-align: center;
+  margin: 0 0 2vw 0;
 }
-.main .thr .thr_1 .list .list_1 .one_2 .status .color0 {
-  background-color: #FFA500;
-}
-.main .thr .thr_1 .list .list_1 .one_2 .status .color1 {
-  background-color: #8B0000;
-}
-.main .thr .thr_1 .list .list_1 .one_2 .status .color2 {
-  background-color: #006400;
-}
-.main .thr .thr_1 .list .list_1 .one_2 .status .color3 {
-  background-color: #808080;
+.main .two .list .list_2 .status text {
+  display: inline-block;
+  background-color: var(--redColor);
+  color: var(--whiteColor);
+  padding: 1vw 3vw;
+  border-radius: 5px;
 }
-.main .thr .scroll-view {
+.scroll-view {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
 }
-.main .thr .scroll-view .list-scroll-view {
+.scroll-view .list-scroll-view {
   display: flex;
-  flex-wrap: wrap;
-  align-content: flex-start;
-  justify-content: space-between;
+  flex-direction: column;
 }