From e4c7cbddc49663e43cd6163b2832e5171f769220 Mon Sep 17 00:00:00 2001
From: sundongyu <2811054731@qq.com>
Date: Thu, 18 Apr 2024 15:41:58 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E4=BA=86=E9=97=A8=E6=B4=BE?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages.json             |  68 ++++++-----
 pages/school/index.vue | 260 +++++++++++++++++++++++++++++++++++++++++
 2 files changed, 299 insertions(+), 29 deletions(-)
 create mode 100644 pages/school/index.vue

diff --git a/pages.json b/pages.json
index 126c01c..96c3e5a 100644
--- a/pages.json
+++ b/pages.json
@@ -3,24 +3,31 @@
     {
       "path": "pages/index/index",
       "style": {
-        "navigationBarTitleText": "uni-app",
+        "navigationBarTitleText": "首页",
         "navigationStyle": "custom"
       }
     },
-		{
-		  "path": "pages/intelLigence/index",
-		  "style": {
-		    "navigationBarTitleText": "uni-app",
-		    "navigationStyle": "custom"
-		  }
-		},
-		{
-		  "path": "pages/rankList/index",
-		  "style": {
-		    "navigationBarTitleText": "uni-app",
-		    "navigationStyle": "custom"
-		  }
-		}
+    {
+      "path": "pages/intelLigence/index",
+      "style": {
+        "navigationBarTitleText": "赛事",
+        "navigationStyle": "custom"
+      }
+    },
+    {
+      "path": "pages/rankList/index",
+      "style": {
+        "navigationBarTitleText": "排行榜",
+        "navigationStyle": "custom"
+      }
+    },
+    {
+      "path": "pages/school/index",
+      "style": {
+        "navigationBarTitleText": "门派",
+        "navigationStyle": "custom"
+      }
+    }
   ],
   "globalStyle": {
     "navigationBarTextStyle": "black",
@@ -30,19 +37,22 @@
   },
   "uniIdRouter": {},
   "tabBar": {
-    "list": [
-			{
-      "pagePath": "pages/index/index",
-      "text": "首页"
-			},
-			{
-			"pagePath": "pages/intelLigence/index",
-			"text": "赛事"
-			},
-			{
-			"pagePath": "pages/rankList/index",
-			"text": "排行榜"
-			}
-		]
+    "list": [{
+        "pagePath": "pages/index/index",
+        "text": "首页"
+      },
+      {
+        "pagePath": "pages/school/index",
+        "text": "门派"
+      },
+      {
+        "pagePath": "pages/intelLigence/index",
+        "text": "赛事"
+      },
+      {
+        "pagePath": "pages/rankList/index",
+        "text": "排行榜"
+      }
+    ]
   }
 }
\ No newline at end of file
diff --git a/pages/school/index.vue b/pages/school/index.vue
new file mode 100644
index 0000000..4ef047f
--- /dev/null
+++ b/pages/school/index.vue
@@ -0,0 +1,260 @@
+<template>
+  <view>
+    <view :style="{ backgroundPositionY: -44 + safeAreaInsets.top + 'px' }" class="index-page">
+      <!-- 自定义导航 -->
+      <view :style="{ paddingTop: safeAreaInsets.top + 'px' }" class="page-navbar">学派</view>
+    </view>
+    <view class="bulletin-board">
+      <view class="icon">
+        <u-icon name="volume" color="#e09453" size="18"></u-icon>
+      </view>
+      <view class="text">如有任何问题, 请咨询微信客服！</view>
+    </view>
+    <view class="category-list">
+      <!-- 左侧分类导航 -->
+      <scroll-view scroll-y="true" class="left">
+        <view class="row" v-for="(category, index) in categoryList" :key="category.id" :class="[index == showCategoryIndex ? 'active' : '']" @tap="showCategory(index)">
+          <u-avatar :src="category.src" shape="circle"></u-avatar>
+          <view class="text">
+            {{ category.title }}
+          </view>
+        </view>
+      </scroll-view>
+      <!-- 右侧子导航 -->
+      <scroll-view scroll-y="true" class="right">
+        <view class="category" v-for="(category, index) in categoryList" :key="category.id" v-show="index == showCategoryIndex">
+          <view class="list">
+            <view class="box" v-for="(box, i) in category.list" :key="i" @tap="toCategory(box)">
+              <view class="up">
+                <view class="up-left">
+                  <u-avatar :src="category.src" shape="circle"></u-avatar>
+                </view>
+                <view class="up-centre">
+                  <view class="">{{ box.name }}</view>
+                  <view>
+                    <span style="font-size: 16rpx; color: #afafaf">本月：</span>
+                    <span style="font-size: 20rpx; color: red; font-weight: 700">8连红</span>
+                    &nbsp
+                    <span style="font-size: 20rpx; color: red; font-weight: 700">近20中16</span>
+                  </view>
+                  <view>
+                    <span style="font-size: 16rpx; color: #afafaf">本月得分：</span>
+                    <span style="font-size: 16rpx; color: #afafaf">20</span>
+                    <span style="font-size: 16rpx; color: #afafaf">分</span>
+                  </view>
+                </view>
+                <view class="up-right">
+                  <view>关注</view>
+                  <view style="margin-left: 5rpx">
+                    <u-icon name="heart" color="#e1e1e1" size="20"></u-icon>
+                  </view>
+                </view>
+              </view>
+              <view class="centre">
+                <view class="centre-text">评价：大宗师</view>
+                <view class="centre-text">评价：大宗师4</view>
+                <view class="centre-text">评价：大宗师</view>
+                <view class="centre-price">
+                  <span>价格：</span>
+                  <span>888.00奖门令</span>
+                </view>
+              </view>
+              <view class="below">
+                <view>高手介绍：</view>
+                <view class="text">奖门人鬼画符韩国打算卡夫卡撒法斯科防守上的开始啦的库萨克达</view>
+              </view>
+            </view>
+          </view>
+        </view>
+      </scroll-view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { ref, reactive } from 'vue';
+// 获取安全区域的边界
+const { safeAreaInsets } = uni.getSystemInfoSync();
+const categoryList = reactive([
+  {
+    id: 1,
+    title: '组合专区',
+    src: 'https://5b0988e595225.cdn.sohucs.com/images/20190731/d40a8f11f28249a6b73be0923dcc65d0.jpeg',
+    list: [{ name: '皇者之路' }, { name: '五星套餐' }, { name: '一念永恒' }, { name: '足球之神' }, { name: '皇马末日' }, { name: '联邦荣光' }, { name: '黑日末日' }]
+  },
+  {
+    id: 2,
+    title: '金笔派',
+    list: [{ name: '皇者之路' }, { name: '五星套餐' }, { name: '一念永恒' }, { name: '足球之神' }]
+  },
+  {
+    id: 3,
+    title: '微墨派',
+    list: [{ name: '皇者之路' }, { name: '五星套餐' }, { name: '一念永恒' }, { name: '足球之神' }]
+  },
+  {
+    id: 4,
+    title: '宣张派',
+    list: [{ name: '皇者之路' }, { name: '五星套餐' }, { name: '一念永恒' }, { name: '足球之神' }]
+  },
+  {
+    id: 5,
+    title: '端砚派',
+    list: [{ name: '皇者之路' }, { name: '五星套餐' }, { name: '一念永恒' }, { name: '足球之神' }]
+  },
+  {
+    id: 6,
+    title: '明灯区',
+    list: [{ name: '皇者之路' }, { name: '五星套餐' }, { name: '一念永恒' }, { name: '足球之神' }]
+  }
+]);
+const showCategoryIndex = ref(0);
+const showCategory = (index) => {
+  showCategoryIndex.value = index;
+  console.log(index);
+};
+const toCategory = (box) => {
+  console.log(box);
+};
+</script>
+
+<style lang="scss">
+.bulletin-board {
+  width: 100%;
+  height: 60rpx;
+  background-color: #fffbe8;
+  display: flex;
+  align-items: center;
+  .text {
+    font-size: 26rpx;
+    color: #e5b47e;
+    font-weight: 700;
+    margin-left: 20rpx;
+  }
+  .icon {
+    margin-left: 30rpx;
+  }
+}
+.category-list {
+  width: 100%;
+  background-color: #fff;
+  display: flex;
+  .right {
+    position: absolute;
+
+    top: 100rpx;
+    /*  #ifdef  APP-PLUS  */
+    top: calc(100rpx + var(--status-bar-height));
+    /*  #endif  */
+    bottom: 0rpx;
+  }
+  .left {
+    width: 24%;
+    left: 0rpx;
+    background-color: #f2f2f2;
+    .row {
+      width: 100%;
+      height: 160rpx;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-evenly;
+      align-items: center;
+      .text {
+        width: 100%;
+        position: relative;
+        font-size: 28rpx;
+        display: flex;
+        justify-content: center;
+        .block {
+          position: absolute;
+          width: 0rpx;
+          left: 0;
+        }
+      }
+    }
+  }
+  .right {
+    width: 76%;
+    left: 24%;
+    margin-top: 70rpx;
+    .category {
+      width: 94%;
+      padding: 20rpx 3%;
+      .banner {
+        width: 100%;
+        height: 24.262vw;
+        border-radius: 10rpx;
+        overflow: hidden;
+        box-shadow: 0upx 5rpx 20rpx rgba(0, 0, 0, 0.3);
+      }
+      .list {
+        width: 100%;
+        display: flex;
+        flex-wrap: wrap;
+        .box {
+          width: calc(71.44vw / 1);
+          height: 42vh;
+          border-top: 1rpx solid #f4f4f4;
+          display: flex;
+          flex-direction: column;
+          justify-content: flex-start;
+          .up {
+            display: flex;
+            justify-content: space-around;
+            .up-left {
+              margin-top: 20rpx;
+            }
+            .up-centre {
+              margin-top: 20rpx;
+            }
+            .up-right {
+              margin-top: 20rpx;
+              font-size: 24rpx;
+              display: flex;
+              margin-right: 16rpx;
+            }
+          }
+          .centre {
+            .centre-text {
+              display: inline-block;
+              border: 1rpx solid #e5b47e;
+              color: #e8b596;
+              border-radius: 15rpx;
+              padding: 15rpx;
+              margin-left: 20rpx;
+              margin-top: 15rpx;
+              margin-bottom: 15rpx;
+              font-size: 24rpx;
+            }
+            .centre-price {
+              margin: 20rpx;
+              color: #e5b47e;
+              font-weight: 600;
+            }
+          }
+          .below {
+            font-size: 24rpx;
+            margin-left: 20rpx;
+            .text {
+              display: -webkit-box;
+              -webkit-box-orient: vertical;
+              -webkit-line-clamp: 3;
+              overflow: hidden;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+.active {
+  height: 100rpx;
+  background-color: #e8b596;
+  .text {
+    font-size: 30rpx;
+    font-weight: 600;
+    color: #fff;
+    // background-color: #fff;
+  }
+}
+</style>