首页-咨询

pages/home/index.js

@@ -2,6 +2,9 @@ const app = getApp()
 Page({
     data: {
         frameStyle: { useTop: true, name: '首页', leftArrow: false, useBar: true },
+        list: [
+            { status: 3, name: '辽源市第一届青少年羽毛球公开赛暨“小虎杯”羽毛球争霸赛', sign_end_time: '2022-08-05-21:00', start_time: '2022-08-06', end_time: '2022-08-06', address: '辽源市全民体育馆3楼' },
+        ]
     },
     // 跳转菜单
     tabPath(e) {

pages/home/index.less

@@ -1,6 +1,122 @@
 .main {
     height: 83vh;
-    background-color: #ffffff;
+    background-color: var(--bgColor);
+    padding: 0 2vw;
+
+    .zero {
+        width: 96vw;
+        margin: 0 0 2vw 0;
+    }
+
+    .zero:nth-child(2) {
+        margin: 0 0 0 0;
+    }
+
+    .one {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        padding: 2vw;
+        width: 92vw;
+        background-color: var(--bgColor);
+
+        .one_1 {
+            width: 12vw;
+        }
+
+        .one_2 {
+            width: 80vw;
+            border: 1px solid #cccccc;
+            border-radius: 20px;
+            padding: 4px 10px;
+        }
+
+        image {
+            width: 30px;
+        }
+
+        input {
+            font-size: 15px;
+        }
+
+    }
+
+    .two {
+        flex-grow: 1;
+        width: 100%;
+        position: relative;
+
+        .list {
+            border: 1px solid #cccccc;
+            padding: 2vw ;
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+            background-color: var(--bgColor);
+            margin: 0 0 1vh 0;
+            border-radius: 10px;
+
+
+            .list_1 {
+                padding: 7vw 0 0 0;
+                text-align: center;
+
+                .image {
+                    width: 70px;
+                    height: 70px;
+                    border-radius: 10px;
+                    border: 1px solid #cccccc;
+                }
+            }
+
+            .list_2 {
+                display: flex;
+                flex-direction: column;
+                width: 75vw;
+                padding: 0 0 0 2vw;
+
+                .name {
+                    font-size: var(--titleSize);
+                    font-weight: bold;
+                    margin: 0 0 1vw 0;
+                    line-height: 25px;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    -webkit-line-clamp: 2;
+                    word-break: break-all;
+                    display: -webkit-box;
+                    -webkit-box-orient: vertical;
+
+                    .status {
+                        background-color: #ff0000;
+                        color: #fff;
+                        padding: 0 2vw;
+                        font-size: var(--txtSize);
+                        margin: 0 2vw 0 0;
+                        border-radius: 5px;
+                    }
+                }
+
+                .other {
+                    .other_1 {
+                        margin: 0 0 1vw 0;
+                        color: var(--labelColor);
+                        font-size: var(--btnSize);
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                        -webkit-line-clamp: 2;
+                        word-break: break-all;
+                        display: -webkit-box;
+                        -webkit-box-orient: vertical;
+
+                        text:nth-child(2) {
+                            color: var(--txtColor);
+                        }
+                    }
+                }
+            }
+        }
+    }
 }
 
 .scroll-view {
@@ -14,4 +130,23 @@
         display: flex;
         flex-direction: column;
     }
+}
+
+.suspension {
+    position: fixed;
+    width: 96vw;
+    bottom: 9vh;
+    right: 1vw;
+    text-align: right;
+
+    .mymatch {
+        display: inline-block;
+        width: 10vw;
+        padding: 1vw;
+        text-align: center;
+        background-color: green;
+        color: #fff;
+        font-size: 14px;
+        border-radius: 5px;
+    }
 }

pages/home/index.wxml

@@ -1,5 +1,43 @@
 <mobile-main frameStyle="{{frameStyle}}" bind:tabPath="tabPath">
     <view slot="info" class="container main">
-        首页
+        <view class="zero one">
+        <view class="one_1"><image src="/image/lingdang.png" mode="widthFix"></image></view>
+        <view class="one_2"><input type="text" value="{{searchInfo.name}}" bindconfirm="search" placeholder="请输入比赛名称" /></view>
+        </view>
+        <view class="zero two">
+            <scroll-view scroll-y="true" class="scroll-view">
+                <view class="list-scroll-view">
+                    <view class="list" wx:for="{{list}}" wx:key="item" bindtap="toView" data-item="{{item}}">
+                        <view class="list_1">
+                            <!-- <image class="image" src="{{item.logo&&item.logo.length>0?item.logo[0].url:''}}"></image> -->
+                            <image class="image" src="/image/lingdang.png"></image>
+                        </view>
+                        <view class="list_2">
+                            <view class="name">
+                                <text class="status">{{item.status=='0'?'报名中':item.status=='1'?'报名截止':item.status=='2'?'报名结束':item.status=='3'?'发布秩序册':item.status=='4'?'比赛中':item.status=='5'?'比赛结束':'暂无'}}</text>
+                                <text>{{item.name}}</text>
+                            </view>
+                            <view class="other">
+                                <view class="other_1">
+                                    <text>报名时间：</text>
+                                    <text>{{item.sign_end_time}}</text>
+                                </view>
+                                <view class="other_1">
+                                    <text>比赛时间：</text>
+                                    <text>{{item.start_time}}-{{item.end_time}}</text>
+                                </view>
+                                <view class="other_1">
+                                    <text>比赛地点：</text>
+                                    <text>{{item.address}}</text>
+                                </view>
+                            </view>
+                        </view>
+                    </view>
+                </view>
+            </scroll-view>
+        </view>
+        <view class="suspension" >
+            <text class="mymatch" bindtap="toCommon" data-route="/pages/usermysign/index">我的报名</text>
+        </view>
     </view>
 </mobile-main>

pages/home/index.wxss

@@ -1,6 +1,102 @@
 .main {
   height: 83vh;
-  background-color: #ffffff;
+  background-color: var(--bgColor);
+  padding: 0 2vw;
+}
+.main .zero {
+  width: 96vw;
+  margin: 0 0 2vw 0;
+}
+.main .zero:nth-child(2) {
+  margin: 0 0 0 0;
+}
+.main .one {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  padding: 2vw;
+  width: 92vw;
+  background-color: var(--bgColor);
+}
+.main .one .one_1 {
+  width: 12vw;
+}
+.main .one .one_2 {
+  width: 80vw;
+  border: 1px solid #cccccc;
+  border-radius: 20px;
+  padding: 4px 10px;
+}
+.main .one image {
+  width: 30px;
+}
+.main .one input {
+  font-size: 15px;
+}
+.main .two {
+  flex-grow: 1;
+  width: 100%;
+  position: relative;
+}
+.main .two .list {
+  border: 1px solid #cccccc;
+  padding: 2vw ;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  background-color: var(--bgColor);
+  margin: 0 0 1vh 0;
+  border-radius: 10px;
+}
+.main .two .list .list_1 {
+  padding: 7vw 0 0 0;
+  text-align: center;
+}
+.main .two .list .list_1 .image {
+  width: 70px;
+  height: 70px;
+  border-radius: 10px;
+  border: 1px solid #cccccc;
+}
+.main .two .list .list_2 {
+  display: flex;
+  flex-direction: column;
+  width: 75vw;
+  padding: 0 0 0 2vw;
+}
+.main .two .list .list_2 .name {
+  font-size: var(--titleSize);
+  font-weight: bold;
+  margin: 0 0 1vw 0;
+  line-height: 25px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-line-clamp: 2;
+  word-break: break-all;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+}
+.main .two .list .list_2 .name .status {
+  background-color: #ff0000;
+  color: #fff;
+  padding: 0 2vw;
+  font-size: var(--txtSize);
+  margin: 0 2vw 0 0;
+  border-radius: 5px;
+}
+.main .two .list .list_2 .other .other_1 {
+  margin: 0 0 1vw 0;
+  color: var(--labelColor);
+  font-size: var(--btnSize);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-line-clamp: 2;
+  word-break: break-all;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+}
+.main .two .list .list_2 .other .other_1 text:nth-child(2) {
+  color: var(--txtColor);
 }
 .scroll-view {
   position: absolute;
@@ -13,3 +109,20 @@
   display: flex;
   flex-direction: column;
 }
+.suspension {
+  position: fixed;
+  width: 96vw;
+  bottom: 9vh;
+  right: 1vw;
+  text-align: right;
+}
+.suspension .mymatch {
+  display: inline-block;
+  width: 10vw;
+  padding: 1vw;
+  text-align: center;
+  background-color: green;
+  color: #fff;
+  font-size: 14px;
+  border-radius: 5px;
+}

pages/index/index.less

@@ -1,6 +1,7 @@
 .main {
     height: 91vh;
     background-color: var(--bgColor);
+    font-size: var(--titleSize);
 
     .one {
         text-align: center;

pages/index/index.wxss

@@ -1,6 +1,7 @@
 .main {
   height: 91vh;
   background-color: var(--bgColor);
+  font-size: var(--titleSize);
 }
 .main .one {
   text-align: center;

pages/news/index.js

@@ -1,7 +1,21 @@
 const app = getApp()
+import { news_type } from '../../utils/dict';
 Page({
     data: {
         frameStyle: { useTop: true, name: '资讯', leftArrow: false, useBar: true },
+        //查询条件
+        searchInfo: {},
+        typeList: news_type,
+        tabs: {
+            active: '0',
+            list: [
+                { title: '推荐', name: '0' },
+                { title: '羽毛球', name: '1' },
+            ],
+        },
+        list: [
+            { title: '辽源市第一届青少年羽毛球公开赛暨“小虎杯”羽毛球争霸赛', type: 1, brief: '辽源市第一届青少年羽毛球公开赛暨“小虎杯”羽毛球争霸赛辽源市第一届青少年羽毛球公开赛暨“小虎杯”羽毛球争霸赛', origin: '网络', src: '/image/lingdang.png' },
+        ]
     },
     // 跳转菜单
     tabPath(e) {

pages/news/index.json

@@ -1,6 +1,7 @@
 {
     "component": true,
     "usingComponents": {
-      "mobile-main": "/commpents/mobile-frame/index"
+        "mobile-main": "/commpents/mobile-frame/index",
+        "e-tabs": "/commpents/tabs/index"
     }
-  }
+}

pages/news/index.less

@@ -1,6 +1,104 @@
 .main {
     height: 83vh;
-    background-color: #ffffff;
+    background-color: var(--bgColor);
+
+    .zero {
+        width: 96vw;
+        margin: 0 0 2vw 0;
+    }
+
+    .zero:last-child {
+        margin: 0;
+    }
+
+    .two {
+        .a {
+            display: flex;
+            flex-direction: column;
+            height: 74vh;
+            padding: 0 2vw;
+
+            .two_1 {
+                width: 90vw;
+                border: 1px solid #cccccc;
+                border-radius: 20px;
+                padding: 4px 10px;
+                margin: 0 0 2vw 0;
+
+                input {
+                    font-size: 16px;
+                }
+            }
+
+            .two_2 {
+                width: 96vw;
+                flex-grow: 1;
+                position: relative;
+
+                .list {
+                    background-color: var(--bgColor);
+                    margin: 0 0 2vw 0;
+                    display: flex;
+                    flex-direction: row;
+                    justify-content: space-between;
+                    width: 91vw;
+                    padding: 2vw;
+                    border: 1px solid #cccccc;
+                    border-radius: 10px;
+
+
+                    .list_1 {
+                        width: 70vw;
+
+                        .name {
+                            font-size: var(--titleSize);
+                            font-weight: bold;
+                            margin: 0 0 1vw 0;
+                            overflow: hidden;
+                            text-overflow: ellipsis;
+                            -webkit-line-clamp: 2;
+                            word-break: break-all;
+                            display: -webkit-box;
+                            -webkit-box-orient: vertical;
+                        }
+
+                        .brief {
+                            margin: 0 0 1vw 0;
+                            font-size: var(--txtSize);
+                            color: var(--labelColor);
+                            overflow: hidden;
+                            text-overflow: ellipsis;
+                            -webkit-line-clamp: 3;
+                            word-break: break-all;
+                            display: -webkit-box;
+                            -webkit-box-orient: vertical;
+                        }
+
+                        .other {
+                            font-size: var(--txtSize);
+                            color: var(--labelColor);
+
+                            text {
+                                padding: 0 1vw 0 0;
+                            }
+                        }
+                    }
+
+                    .list_2 {
+                        text-align: right;
+                        padding: 4vw 0 0 0;
+
+                        .image {
+                            width: 100px;
+                            height: 100px;
+                            overflow: hidden;
+                            border-radius: 10px;
+                        }
+                    }
+                }
+            }
+        }
+    }
 }
 
 .scroll-view {

pages/news/index.wxml

@@ -1,5 +1,59 @@
 <mobile-main frameStyle="{{frameStyle}}" bind:tabPath="tabPath">
     <view slot="info" class="container main">
-        资讯
+        <view class="zero one">
+            <e-tabs tabs="{{tabs}}" bind:tabsChange="tabsChange"></e-tabs>
+        </view>
+        <view class="zero two">
+            <view class="a" wx:if="{{tabs.active=='0'}}">
+                <view class="two_1">
+                    <input type="text" value="{{searchInfo.title}}" bindconfirm="onSearch" placeholder="请输入关键词" />
+                </view>
+                <view class="two_2">
+                    <scroll-view scroll-y="true" class="scroll-view">
+                        <view class="list-scroll-view">
+                            <view class="list" wx:for="{{list}}" wx:key="item" bindtap="toView" data-id="{{item._id}}">
+                                <view class="list_1">
+                                    <view class="name">{{item.title}}</view>
+                                    <view class="brief">{{item.brief}}</view>
+                                    <view class="other">
+                                        <text>{{typeList[item.type].label||'未知'}}</text>
+                                        <text>来源：{{item.origin}}</text>
+                                    </view>
+                                </view>
+                                <view class="list_2">
+                                    <!-- <image class="image" src="{{item.home_url&&item.home_url.length>0?item.home_url[0].url:''}}"></image> -->
+                                    <image class="image" src="/image/lingdang.png"></image>
+                                </view>
+                            </view>
+                        </view>
+                    </scroll-view>
+                </view>
+            </view>
+            <view class="a" wx:elif="{{tabs.active=='1'}}">
+                <view class="two_1">
+                    <input type="text" value="{{searchInfo.name}}" bindconfirm="onSearch" placeholder="请输入关键词" />
+                </view>
+                <view class="two_2">
+                    <scroll-view scroll-y="true" class="scroll-view">
+                        <view class="list-scroll-view">
+                            <view class="list" wx:for="{{list}}" wx:key="item" bindtap="toView" data-id="{{item._id}}">
+                                <view class="list_1">
+                                    <view class="name">{{item.title}}</view>
+                                    <view class="brief">{{item.brief}}</view>
+                                    <view class="other">
+                                        <text>{{typeList[item.type].label||'暂无'}}</text>
+                                        <text>来源：{{item.origin}}</text>
+                                    </view>
+                                </view>
+                                <view class="list_2">
+                                    <!-- <image class="image" src="{{item.home_url&&item.home_url.length>0?item.home_url[0].url:''}}"></image> -->
+                                    <image class="image" src="/image/lingdang.png"></image>
+                                </view>
+                            </view>
+                        </view>
+                    </scroll-view>
+                </view>
+            </view>
+        </view>
     </view>
 </mobile-main>

pages/news/index.wxss

@@ -1,6 +1,87 @@
 .main {
   height: 83vh;
-  background-color: #ffffff;
+  background-color: var(--bgColor);
+}
+.main .zero {
+  width: 96vw;
+  margin: 0 0 2vw 0;
+}
+.main .zero:last-child {
+  margin: 0;
+}
+.main .two .a {
+  display: flex;
+  flex-direction: column;
+  height: 74vh;
+  padding: 0 2vw;
+}
+.main .two .a .two_1 {
+  width: 90vw;
+  border: 1px solid #cccccc;
+  border-radius: 20px;
+  padding: 4px 10px;
+  margin: 0 0 2vw 0;
+}
+.main .two .a .two_1 input {
+  font-size: 16px;
+}
+.main .two .a .two_2 {
+  width: 96vw;
+  flex-grow: 1;
+  position: relative;
+}
+.main .two .a .two_2 .list {
+  background-color: var(--bgColor);
+  margin: 0 0 2vw 0;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  width: 91vw;
+  padding: 2vw;
+  border: 1px solid #cccccc;
+  border-radius: 10px;
+}
+.main .two .a .two_2 .list .list_1 {
+  width: 70vw;
+}
+.main .two .a .two_2 .list .list_1 .name {
+  font-size: var(--titleSize);
+  font-weight: bold;
+  margin: 0 0 1vw 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-line-clamp: 2;
+  word-break: break-all;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+}
+.main .two .a .two_2 .list .list_1 .brief {
+  margin: 0 0 1vw 0;
+  font-size: var(--txtSize);
+  color: var(--labelColor);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-line-clamp: 3;
+  word-break: break-all;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+}
+.main .two .a .two_2 .list .list_1 .other {
+  font-size: var(--txtSize);
+  color: var(--labelColor);
+}
+.main .two .a .two_2 .list .list_1 .other text {
+  padding: 0 1vw 0 0;
+}
+.main .two .a .two_2 .list .list_2 {
+  text-align: right;
+  padding: 4vw 0 0 0;
+}
+.main .two .a .two_2 .list .list_2 .image {
+  width: 100px;
+  height: 100px;
+  overflow: hidden;
+  border-radius: 10px;
 }
 .scroll-view {
   position: absolute;

utils/dict.js

@@ -10,4 +10,9 @@ export const gender = [
     { label: '男', value: '0' },
     { label: '女', value: '1' },
     { label: '未知', value: '2' },
-]
+]
+//资讯类型
+export const news_type = [
+    { label: '其他', value: '0' },
+    { label: '羽毛球', value: '1' },
+];