Merge remote-tracking branch 'origin/ftt'

pages.json

@@ -12,13 +12,22 @@
   }, {
     "path": "pages/index",
     "style": {
-      "navigationBarTitleText": "若依移动端框架",
-      "navigationStyle": "custom"
+      "navigationBarTitleText": "首页"
     }
   }, {
     "path": "pages/work/index",
     "style": {
-      "navigationBarTitleText": "工作台"
+      "navigationBarTitleText": "发现"
+    }
+  }, {
+    "path": "pages/search/index",
+    "style": {
+      "navigationBarTitleText": "搜索"
+    }
+  }, {
+    "path": "pages/faxian/index",
+    "style": {
+      "navigationBarTitleText": "消息"
     }
   }, {
     "path": "pages/mine/index",
@@ -61,6 +70,11 @@
       "navigationBarTitleText": "关于我们"
     }
   }, {
+    "path": "pages/mine/xiao/index",
+    "style": {
+      "navigationBarTitleText": "小鹅通"
+    }
+  }, {
     "path": "pages/common/webview/index",
     "style": {
       "navigationBarTitleText": "浏览网页"
@@ -70,6 +84,16 @@
     "style": {
       "navigationBarTitleText": "浏览文本"
     }
+  }, {
+    "path": "pages/courseDetail/courseDetail",
+    "style": {
+      "navigationBarTitleText": "课程详情"
+    }
+  }, {
+    "path": "pages/orderDetail/orderDetail",
+    "style": {
+      "navigationBarTitleText": "订单详情"
+    }
   }],
   "tabBar": {
     "color": "#000000",
@@ -85,7 +109,12 @@
         "pagePath": "pages/work/index",
         "iconPath": "static/images/tabbar/work.png",
         "selectedIconPath": "static/images/tabbar/work_.png",
-        "text": "工作台"
+        "text": "发现"
+      }, {
+        "pagePath": "pages/faxian/index",
+        "iconPath": "static/images/tabbar/work.png",
+        "selectedIconPath": "static/images/tabbar/work_.png",
+        "text": "消息"
       }, {
         "pagePath": "pages/mine/index",
         "iconPath": "static/images/tabbar/mine.png",
@@ -99,13 +128,13 @@
     "navigationBarTitleText": "RuoYi",
     "navigationBarBackgroundColor": "#FFFFFF"
   },
-	"condition" : { //模式配置，仅开发期间生效
-		"current": 0, //当前激活的模式(list 的索引项)
+	"condition" : { 
+		"current": 0, 
 		"list": [
 			{
-				"name": "", //模式名称
-				"path": "", //启动页面，必选
-				"query": "" //启动参数，在页面的onLoad函数里面得到
+				"name": "", 
+				"path": "", 
+				"query": "" 
 			}
 		]
 	}

pages/faxian/index.vue

@@ -0,0 +1,127 @@
+<template>
+  <view class="work-container">
+    <!-- 第一块内容 -->
+    <view class="section" @click="handleCourseSelection">
+      <view class="icon-and-text">
+        <!-- 假设使用 iconfont 图标 -->
+        <view class="iconfont1 icon-jxa text-red icon"></view>
+        <view class="text-content">
+          <text class="course-title">课程精选</text>
+          <text class="no-new-message">暂无新消息</text>
+        </view>
+      </view>
+    </view>
+    <!-- 分割线 -->
+    <view class="divider"></view>
+    <!-- 第二块内容 -->
+    <view class="section" @click="handleCourseUpdate">
+      <view class="icon-and-text">
+        <view class="iconfont1 icon-kechengshangxin text-bule icon"></view>
+        <view class="text-content">
+          <text class="course-title">课程上新</text>
+          <text class="no-new-message">暂无新消息</text>
+        </view>
+      </view>
+    </view>
+    <!-- 分割线 -->
+    <view class="divider"></view>
+    <!-- 第三块内容 -->
+    <view class="section" @click="handleLiveBooking">
+      <view class="icon-and-text">
+        <view class="iconfont1 icon-zhiboyuyue text-purple icon"></view>
+        <view class="text-content">
+          <text class="course-title">直播预约</text>
+          <text class="no-new-message">暂无新消息</text>
+        </view>
+      </view>
+    </view>
+    <!-- 分割线 -->
+    <view class="divider"></view>
+    <!-- 第四块内容 -->
+    <view class="section" @click="handleCircleMessage">
+      <view class="icon-and-text">
+        <view class="iconfont1 icon-quanzixiaoxihover text-green icon"></view>
+        <view class="text-content">
+          <text class="course-title">圈子消息</text>
+          <text class="no-new-message">暂无新消息</text>
+        </view>
+      </view>
+    </view>
+    <view class="divider"></view>
+  </view>
+</template>
+
+<script>
+export default {
+  methods: {
+    // 处理课程精选点击事件
+    handleCourseSelection() {
+      console.log('点击了课程精选');
+      // 这里可以添加具体的业务逻辑
+	  this.$modal.showToast('模块建设中~')
+    },
+    // 处理课程上新点击事件
+    handleCourseUpdate() {
+      console.log('点击了课程上新');
+      // 这里可以添加具体的业务逻辑
+	  this.$modal.showToast('模块建设中~')
+    },
+    // 处理直播预约点击事件
+    handleLiveBooking() {
+      console.log('点击了直播预约');
+      // 这里可以添加具体的业务逻辑
+	  this.$modal.showToast('模块建设中~')
+    },
+    // 处理圈子消息点击事件
+    handleCircleMessage() {
+      console.log('点击了圈子消息');
+      // 这里可以添加具体的业务逻辑
+	  this.$modal.showToast('模块建设中~')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  @import '@/static/fontico/iconfont.css';
+  .section {
+    padding: 20px;
+    min-height: 100px; 
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
+
+  .divider {
+    height: 1px;
+    background-color: #ccc;
+    margin: 10px 0;
+  }
+
+  .iconfont1 {
+    font-size: 36px; 
+  }
+
+  .course-title {
+    font-size: 20px; 
+    font-weight: bold; 
+  }
+
+  .icon-and-text {
+    display: flex;
+    flex-direction: row; // 修改为水平排列
+    align-items: center;
+    gap: 15px; // 设置图标和文字之间的间距
+  }
+
+  .text-content {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .no-new-message {
+    font-size: 12px;
+    color: #999;
+    margin-top: 5px;
+  }
+</style>

pages/index.vue

@@ -1,36 +1,253 @@
-<template>
-  <view class="content">
-    <image class="logo" src="@/static/logo.png"></image>
-    <view class="text-area">
-      <text class="title">Hello RuoYi</text>
+"calendar-box<template>
+  <view class="page-container">
+    <!-- 导航栏 -->
+    <view class="nav-bar">
+      <text class="nav-title">小鹅通</text>
+      <view class="nav-icons">
+        <view class="iconfont1 icon-sousuo icon" @click="handleSearch"></view>
+        <view class="iconfont1 icon-rili icon" @click="showCalendarDrawer"></view>
+      </view>
+    </view>
+    <!-- 仿日历形状的框 -->
+    <view class="calendar-box">
+      <!-- 这里可以添加日历内容 -->
+      <div class="daily - tip">
+    <div class="tip - content">
+      <span class="date">14</span>
+      <span class="month">/ 五月</span>
+      <p class="slogan">学习让我们成为更好的自己。</p>
+    </div>
+    <!-- <div class="tip- img">
+      <img src="../static/images/image.png" alt="学习插图"> 
+    </div> -->
+  </div>
+    </view>
+    <!-- 中间内容 -->
+    <view class="content-box">
+      <text class="course-title">我的课程</text>
+      <!-- 新增椭圆形蓝色框 -->
+      <view class="oval-blue-box">
+        <text class="oval-text">更多课程</text>
+      </view>
+    </view>
+    <!-- 新增提示文字 -->
+    <text class="no-course-tip">找不到已购课程?</text>
+
+    <!-- 右侧抽屉 -->
+    <view 
+      class="calendar-drawer" 
+      :style="{ right: showDrawer ? '0' : '-300px' }"
+      v-if="showDrawer"
+      @click.self="closeCalendarDrawer"
+    >
+      <view class="drawer-header">
+        <view class="close-btn" @click="closeCalendarDrawer">×</view>
+      </view>
+      <!-- 这里可以添加实时日历组件 -->
+      <view class="real-time-calendar">
+        <!-- 实时日历内容 -->
+        实时日历内容
+      </view>
     </view>
   </view>
 </template>
 
+<script>
+export default {
+  data() {
+    return {
+      showDrawer: false
+    };
+  },
+  methods: {
+    handleSearch() {
+      // 假设搜索页面路径为 /pages/search/index，可根据实际情况修改
+      uni.navigateTo({
+        url: '/pages/search/index'
+      });
+    },
+    showCalendarDrawer() {
+      this.showDrawer = true;
+    },
+    closeCalendarDrawer() {
+      this.showDrawer = false;
+    }
+  }
+};
+</script>
+
 <style scoped>
-  .content {
+@import '@/static/fontico/iconfont.css';
+  /* 页面容器 */
+  .page-container {
     display: flex;
     flex-direction: column;
+    height: 100vh;
+  }
+
+  /* 导航栏 */
+  .nav-bar {
+    display: flex;
     align-items: center;
     justify-content: center;
+    height: 100rpx;
+    padding: 0 30rpx;
+    border-bottom: 1rpx solid #eee;
+    position: relative;
+  }
+
+  /* 修改导航标题样式 */
+  .nav-title {
+    font-size: 48rpx; /* 加大字号 */
+    color: #000; /* 变为黑色 */
+  }
+
+  .nav-icons {
+    position: absolute;
+    right: 30rpx;
+    display: flex;
+    gap: 30rpx;
+  }
+
+  /* 修改图标样式 */
+  .iconfont1 {
+    font-size: 50rpx; /* 放大图标 */
+    color: #333;
+  }
+
+  /* 仿日历形状的框 */
+  .calendar-box {
+    width: 90%; /* 可根据需求调整宽度 */
+    height: 150rpx; /* 缩短高度，可根据需求调整 */
+    margin: 20rpx auto;
+    border: 1rpx solid #ccc;
+    border-radius: 10rpx;
+    background-color: #f5f5f5;
+    flex: none; /* 移除 flex 属性，使用固定高度 */
   }
 
-  .logo {
-    height: 200rpx;
-    width: 200rpx;
-    margin-top: 200rpx;
-    margin-left: auto;
-    margin-right: auto;
-    margin-bottom: 50rpx;
+  /* 中间内容框 */
+  .content-box {
+    width: 90%; /* 宽度接近页面宽度 */
+    height: 400px; /* 高度自适应 */
+    background-color: #fff;
+    margin: 20rpx auto; /* 居中放置 */
+    padding: 20rpx;
+    border-radius: 10rpx;
+    box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
+    flex: none; /* 移除 flex 属性 */
+    position: relative; /* 为子元素定位做准备 */
   }
 
-  .text-area {
+  /* 修改为圆角矩形样式 */
+  .oval-blue-box {
+    position: absolute;
+    bottom: 12%; /* 往下移动，可根据需求调整 */
+    left: 50%;
+    height: 50px;
+    transform: translateX(-50%);
+    background-color: transparent; /* 背景透明 */
+    border: 2px solid #007AFF; /* 蓝色边框 */
+    border-radius: 150px; /* 圆角半径，可根据需求调整 */
+    padding: 10px 100px; /* 左右内边距在原来 40px 的基础上加宽一倍 */
     display: flex;
     justify-content: center;
+    align-items: center;
+  }
+
+  /* 椭圆形框内文字样式 */
+  .oval-text {
+    color: #004AFF; /* 加深蓝色文字 */
+    font-size: 16px;
+    white-space: nowrap; /* 防止文字换行 */
+  }
+
+  .course-title {
+    font-size: 32rpx;
+    font-weight: bold;
   }
 
-  .title {
-    font-size: 36rpx;
-    color: #8f8f94;
+  /* 新增提示文字样式 */
+  .no-course-tip {
+    font-size: 14px; /* 小字大小，可根据需求调整 */
+    color: #666; /* 文字颜色，可根据需求调整 */
+    text-align: center; /* 文字居中 */
+    margin-top: 10px; /* 与上方框的间距，可根据需求调整 */
   }
+
+/* 右侧抽屉样式 */
+.calendar-drawer {
+  position: fixed;
+  top: 0;
+  right: -300px;
+  width: 300px;
+  height: 100vh;
+  background-color: white;
+  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
+  transition: right 0.3s ease;
+  z-index: 999;
+}
+
+.real-time-calendar {
+  padding: 20px;
+}
+
+/* 抽屉头部样式 */
+.drawer-header {
+  display: flex;
+  justify-content: flex-end;
+  padding: 10px;
+}
+
+/* 关闭按钮样式 */
+.close-btn {
+  font-size: 24px;
+  cursor: pointer;
+  padding: 5px;
+}
+/* 整体容器样式 */
+.daily-tip {
+    background-color: #e6f7ff; /* 浅蓝色背景，类似图中背景色调 */
+    padding: 20px;
+    border-radius: 10px;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 轻微阴影增加立体感 */
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+/* 日期和话语部分样式 */
+.tip-content {
+    width: 60%;
+}
+
+.date {
+    font-size: 28px;
+    font-weight: bold;
+    color: #333;
+}
+
+.month {
+    font-size: 16px;
+    color: #666;
+    margin-left: 5px;
+}
+
+.slogan {
+    font-size: 18px;
+    color: #333;
+    margin-top: 10px;
+}
+
+/* 插图部分样式 */
+.tip-img {
+    width: 30%;
+    display: flex;
+    justify-content: flex-end;
+}
+
+.tip-img img {
+    max-width: 100%;
+    height: auto;
+}
 </style>

pages/login.vue

@@ -1,31 +1,61 @@
 <template>
   <view class="normal-login-container">
     <view class="logo-content align-center justify-center flex">
-      <image style="width: 100rpx;height: 100rpx;" :src="globalConfig.appInfo.logo" mode="widthFix">
+      <image
+        style="width: 100rpx; height: 100rpx"
+        :src="globalConfig.appInfo.logo"
+        mode="widthFix"
+      >
       </image>
       <text class="title">小鹅通登录</text>
     </view>
     <view class="login-form-content">
       <view class="input-item flex align-center">
         <view class="iconfont icon-user icon"></view>
-        <input v-model="loginForm.username" class="input" type="text" placeholder="请输入账号" maxlength="30" />
+        <input
+          v-model="loginForm.username"
+          class="input"
+          type="text"
+          placeholder="请输入账号"
+          maxlength="30"
+        />
       </view>
       <view class="input-item flex align-center">
         <view class="iconfont icon-password icon"></view>
-        <input v-model="loginForm.password" type="password" class="input" placeholder="请输入密码" maxlength="20" />
+        <input
+          v-model="loginForm.password"
+          type="password"
+          class="input"
+          placeholder="请输入密码"
+          maxlength="20"
+        />
       </view>
-      <view class="input-item flex align-center" style="width: 60%;margin: 0px;" v-if="captchaEnabled">
+      <view
+        class="input-item flex align-center"
+        style="width: 60%; margin: 0px"
+        v-if="captchaEnabled"
+      >
         <view class="iconfont icon-code icon"></view>
-        <input v-model="loginForm.code" type="number" class="input" placeholder="请输入验证码" maxlength="4" />
-        <view class="login-code"> 
+        <input
+          v-model="loginForm.code"
+          type="number"
+          class="input"
+          placeholder="请输入验证码"
+          maxlength="4"
+        />
+        <view class="login-code">
           <image :src="codeUrl" @click="getCode" class="login-code-img"></image>
         </view>
       </view>
       <view class="action-btn">
-        <button @click="handleLogin" class="login-btn cu-btn block bg-blue lg round">登录</button>
-		<button @click="wxHandleLogin" class="login-btn cu-btn block bg-green lg round">微信授权登录</button>
+        <button @click="handleLogin" class="login-btn cu-btn block bg-blue lg round">
+          登录
+        </button>
+        <button @click="wxHandleLogin" class="login-btn cu-btn block bg-green lg round">
+          微信授权登录
+        </button>
       </view>
-      <view class="reg text-center" v-if="register">
+      <view class="reg text-center">
         <text class="text-grey1">没有账号？</text>
         <text @click="handleUserRegister" class="text-blue">立即注册</text>
       </view>
@@ -35,221 +65,229 @@
         <text @click="handlePrivacy" class="text-blue">《隐私协议》</text>
       </view>
     </view>
-     
   </view>
 </template>
 
 <script>
-  import { getCodeImg } from '@/api/login'
-
-  export default {
-    data() {
-      return {
-        codeUrl: "",
-        captchaEnabled: true,
-        // 用户注册开关
-        register: false,
-        globalConfig: getApp().globalData.config,
-        loginForm: {
-          username: "admin",
-          password: "admin123",
-          code: "",
-          uuid: ""
-        },
-		// 微信登录
-		wxLoginForm: {
-			code: "",
-			encryptedIv: "",
-			encryptedData: ""
-		}
-      }
-    },
-    created() {
-      this.getCode()
-    },
-    methods: {
-      // 用户注册
-      handleUserRegister() {
-        this.$tab.redirectTo(`/pages/register`)
-      },
-      // 隐私协议
-      handlePrivacy() {
-        let site = this.globalConfig.appInfo.agreements[0]
-        this.$tab.navigateTo(`/pages/common/webview/index?title=${site.title}&url=${site.url}`)
-      },
-      // 用户协议
-      handleUserAgrement() {
-        let site = this.globalConfig.appInfo.agreements[1]
-        this.$tab.navigateTo(`/pages/common/webview/index?title=${site.title}&url=${site.url}`)
-      },
-      // 获取图形验证码
-      getCode() {
-        getCodeImg().then(res => {
-          this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled
-          if (this.captchaEnabled) {
-            this.codeUrl = 'data:image/gif;base64,' + res.img
-            this.loginForm.uuid = res.uuid
-          }
-        })
+import { getCodeImg } from "@/api/login";
+
+export default {
+  data() {
+    return {
+      codeUrl: "",
+      captchaEnabled: true,
+      // 用户注册开关
+      register: false,
+      globalConfig: getApp().globalData.config,
+      loginForm: {
+        username: "admin",
+        password: "admin123",
+        code: "",
+        uuid: "",
       },
-	  // 微信授权登录
-      async wxHandleLogin() {
-		console.log("微信小程序发起授权登录")
-        this.$modal.loading("登录中，请耐心等待...")
-		// 获取服务商信息
-		uni.getProvider({
-			service: "oauth",
-			success: (res) => {
-				console.log(res);
-				if(~res.provider.indexOf("weixin")){
-					// 登录
-					uni.login({
-						provider: "weixin",
-						success: (loginRes) => {
-							console.log("登录", loginRes);
-							this.wxLoginForm.code = loginRes.code;
-							// 获取用户信息
-							uni.getUserInfo({
-								success: (resInfo) => {
-									console.log("用户信息", resInfo)
-									// 设置偏移量和加密数据
-									this.wxLoginForm.encryptedIv = resInfo.iv;
-									this.wxLoginForm.encryptedData = resInfo.encryptedData;
-									// 向后端发起登录请求 TODO
-									this.sendWxLoginFormToLocalService();
-								}
-							})
-						}
-					})
-				}
-			}
-		})
+      // 微信登录
+      wxLoginForm: {
+        code: "",
+        encryptedIv: "",
+        encryptedData: "",
       },
-	  // 向后端发起登录请求
-	  sendWxLoginFormToLocalService(){
-		  console.log("向后端发起登录请求..............")
-		  this.$store.dispatch('wxLogin', this.wxLoginForm).then(() => {
-		    this.$modal.closeLoading()
-		    this.loginSuccess()
-		  }).catch(() => {
-			  this.$modal.msgError("微信登录失败")
-		    // if (this.captchaEnabled) {
-		    //   this.getCode()
-		    // }
-		  })
-	  },
-      // 登录方法
-      async handleLogin() {
-        if (this.loginForm.username === "") {
-          this.$modal.msgError("请输入账号")
-        } else if (this.loginForm.password === "") {
-          this.$modal.msgError("请输入密码")
-        } else if (this.loginForm.code === "" && this.captchaEnabled) {
-          this.$modal.msgError("请输入验证码")
-        } else {
-          this.$modal.loading("登录中，请耐心等待...")
-          this.pwdLogin()
+    };
+  },
+  created() {
+    this.getCode();
+  },
+  methods: {
+    // 用户注册
+    handleUserRegister() {
+      this.$tab.redirectTo(`/pages/register`);
+    },
+    // 隐私协议
+    handlePrivacy() {
+      let site = this.globalConfig.appInfo.agreements[0];
+      this.$tab.navigateTo(
+        `/pages/common/webview/index?title=${site.title}&url=${site.url}`
+      );
+    },
+    // 用户协议
+    handleUserAgrement() {
+      let site = this.globalConfig.appInfo.agreements[1];
+      this.$tab.navigateTo(
+        `/pages/common/webview/index?title=${site.title}&url=${site.url}`
+      );
+    },
+    // 获取图形验证码
+    getCode() {
+      getCodeImg().then((res) => {
+        this.captchaEnabled =
+          res.captchaEnabled === undefined ? true : res.captchaEnabled;
+        if (this.captchaEnabled) {
+          this.codeUrl = "data:image/gif;base64," + res.img;
+          this.loginForm.uuid = res.uuid;
         }
-      },
-      // 密码登录
-      async pwdLogin() {
-        this.$store.dispatch('Login', this.loginForm).then(() => {
-          this.$modal.closeLoading()
-          this.loginSuccess()
-        }).catch(() => {
-          if (this.captchaEnabled) {
-            this.getCode()
+      });
+    },
+    // 微信授权登录
+    async wxHandleLogin() {
+      console.log("微信小程序发起授权登录");
+      this.$modal.loading("登录中，请耐心等待...");
+      // 获取服务商信息
+      uni.getProvider({
+        service: "oauth",
+        success: (res) => {
+          console.log(res);
+          if (~res.provider.indexOf("weixin")) {
+            // 登录
+            uni.login({
+              provider: "weixin",
+              success: (loginRes) => {
+                console.log("登录", loginRes);
+                this.wxLoginForm.code = loginRes.code;
+                // 获取用户信息
+                uni.getUserInfo({
+                  success: (resInfo) => {
+                    console.log("用户信息", resInfo);
+                    // 设置偏移量和加密数据
+                    this.wxLoginForm.encryptedIv = resInfo.iv;
+                    this.wxLoginForm.encryptedData = resInfo.encryptedData;
+                    // 向后端发起登录请求 TODO
+                    this.sendWxLoginFormToLocalService();
+                  },
+                });
+              },
+            });
           }
+        },
+      });
+    },
+    // 向后端发起登录请求
+    sendWxLoginFormToLocalService() {
+      console.log("向后端发起登录请求..............");
+      this.$store
+        .dispatch("wxLogin", this.wxLoginForm)
+        .then(() => {
+          this.$modal.closeLoading();
+          this.loginSuccess();
         })
-      },
-      // 登录成功后，处理函数
-      loginSuccess(result) {
-        // 设置用户信息
-        this.$store.dispatch('GetInfo').then(res => {
-          this.$tab.reLaunch('/pages/index')
-        })
+        .catch(() => {
+          this.$modal.msgError("微信登录失败");
+          // if (this.captchaEnabled) {
+          //   this.getCode()
+          // }
+        });
+    },
+    // 登录方法
+    async handleLogin() {
+      if (this.loginForm.username === "") {
+        this.$modal.msgError("请输入账号");
+      } else if (this.loginForm.password === "") {
+        this.$modal.msgError("请输入密码");
+      } else if (this.loginForm.code === "" && this.captchaEnabled) {
+        this.$modal.msgError("请输入验证码");
+      } else {
+        this.$modal.loading("登录中，请耐心等待...");
+        this.pwdLogin();
       }
-    }
-  }
+    },
+    // 密码登录
+    async pwdLogin() {
+      this.$store
+        .dispatch("Login", this.loginForm)
+        .then(() => {
+          this.$modal.closeLoading();
+          this.loginSuccess();
+        })
+        .catch(() => {
+          if (this.captchaEnabled) {
+            this.getCode();
+          }
+        });
+    },
+    // 登录成功后，处理函数
+    loginSuccess(result) {
+      // 设置用户信息
+      this.$store.dispatch("GetInfo").then((res) => {
+        this.$tab.reLaunch("/pages/index");
+      });
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-  page {
-    background-color: #ffffff;
-  }
+page {
+  background-color: #ffffff;
+}
+
+.normal-login-container {
+  width: 100%;
 
-  .normal-login-container {
+  .logo-content {
     width: 100%;
+    font-size: 21px;
+    text-align: center;
+    padding-top: 15%;
 
-    .logo-content {
-      width: 100%;
-      font-size: 21px;
-      text-align: center;
-      padding-top: 15%;
+    image {
+      border-radius: 4px;
+    }
 
-      image {
-        border-radius: 4px;
-      }
+    .title {
+      margin-left: 10px;
+    }
+  }
+
+  .login-form-content {
+    text-align: center;
+    margin: 20px auto;
+    margin-top: 15%;
+    width: 80%;
+
+    .input-item {
+      margin: 20px auto;
+      background-color: #f5f6f7;
+      height: 45px;
+      border-radius: 20px;
 
-      .title {
+      .icon {
+        font-size: 38rpx;
         margin-left: 10px;
+        color: #999;
+      }
+
+      .input {
+        width: 100%;
+        font-size: 14px;
+        line-height: 20px;
+        text-align: left;
+        padding-left: 15px;
       }
     }
 
-    .login-form-content {
-      text-align: center;
-      margin: 20px auto;
-      margin-top: 15%;
-      width: 80%;
-
-      .input-item {
-        margin: 20px auto;
-        background-color: #f5f6f7;
-        height: 45px;
-        border-radius: 20px;
-
-        .icon {
-          font-size: 38rpx;
-          margin-left: 10px;
-          color: #999;
-        }
+    .login-btn {
+      margin-top: 40px;
+      height: 45px;
+    }
 
-        .input {
-          width: 100%;
-          font-size: 14px;
-          line-height: 20px;
-          text-align: left;
-          padding-left: 15px;
-        }
+    .reg {
+      margin-top: 15px;
+    }
 
-      }
+    .xieyi {
+      color: #333;
+      margin-top: 20px;
+    }
 
-      .login-btn {
-        margin-top: 40px;
-        height: 45px;
-      }
-      
-      .reg {
-        margin-top: 15px;
-      }
-      
-      .xieyi {
-        color: #333;
-        margin-top: 20px;
-      }
-      
-      .login-code {
+    .login-code {
+      height: 38px;
+      float: right;
+
+      .login-code-img {
         height: 38px;
-        float: right;
-      
-        .login-code-img {
-          height: 38px;
-          position: absolute;
-          margin-left: 10px;
-          width: 200rpx;
-        }
+        position: absolute;
+        margin-left: 10px;
+        width: 200rpx;
       }
     }
   }
-
+}
 </style>

pages/mine/index.vue

@@ -3,73 +3,97 @@
     <!--顶部个人信息栏-->
     <view class="header-section">
       <view class="flex padding justify-between">
-        <view class="flex align-center">
+        <!-- 修改为横向排列 -->
+        <view class="flex align-center"> 
           <view v-if="!avatar" class="cu-avatar xl round bg-white">
             <view class="iconfont icon-people text-gray icon"></view>
           </view>
           <image v-if="avatar" @click="handleToAvatar" :src="avatar" class="cu-avatar xl round" mode="widthFix">
           </image>
-          <view v-if="!name" @click="handleToLogin" class="login-tip">
-            点击登录
-          </view>
-          <view v-if="name" @click="handleToInfo" class="user-info">
-            <view class="u_title">
-              用户名：{{ name }}
+          <!-- 电话号码和个人信息部分 -->
+          <view v-if="name || !name" class="user-info flex flex-column ml-2"> 
+            <view v-if="!name" @click="handleToLogin" class="login-tip">
+              点击登录
+            </view>
+            <view v-if="name" class="u_title">
+              {{ 19030623072  }}
+            </view>
+            <view v-if="name" @click="handleToInfo" class="flex align-center mt-1"> 
+              <text>个人信息</text>
+              <view class="iconfont icon-right"></view>
             </view>
           </view>
         </view>
-        <view @click="handleToInfo" class="flex align-center">
-          <text>个人信息</text>
-          <view class="iconfont icon-right"></view>
-        </view>
       </view>
     </view>
 
     <view class="content-section">
       <view class="mine-actions grid col-4 text-center">
-        <view class="action-item" @click="handleJiaoLiuQun">
-          <view class="iconfont icon-friendfill text-pink icon"></view>
-          <text class="text">交流群</text>
+        <view class="action-item" @click="handleBuilding">
+          <view class="iconfont1 icon-rili text-green icon"></view>
+          <text class="text">日历</text>
         </view>
         <view class="action-item" @click="handleBuilding">
-          <view class="iconfont icon-service text-blue icon"></view>
-          <text class="text">在线客服</text>
+          <view class="iconfont1 icon-wodexiazai text-blue icon"></view>
+          <text class="text">我的下载</text>
         </view>
         <view class="action-item" @click="handleBuilding">
-          <view class="iconfont icon-community text-mauve icon"></view>
-          <text class="text">反馈社区</text>
+          <view class="iconfont1 icon-cuotiben text-blue icon"></view>
+          <text class="text">错题本</text>
         </view>
         <view class="action-item" @click="handleBuilding">
-          <view class="iconfont icon-dianzan text-green icon"></view>
-          <text class="text">点赞我们</text>
+          <view class="iconfont1 icon-chaojihuiyuan text-green icon"></view>
+          <text class="text">超级会员</text>
         </view>
+		<view class="action-item" @click="handleBuilding">
+		  <view class="iconfont1 icon-dianpu text-blue icon"></view>
+		  <text class="text">订阅店铺</text>
+		</view>
       </view>
 
       <view class="menu-list">
         <view class="list-cell list-cell-arrow" @click="handleToEditInfo">
           <view class="menu-item-box">
-            <view class="iconfont icon-user menu-icon"></view>
-            <view>编辑资料</view>
+            <view class="iconfont1 icon-dianpuhoutai menu-icon"></view>
+            <view>商家店铺后台</view>
           </view>
         </view>
         <view class="list-cell list-cell-arrow" @click="handleHelp">
           <view class="menu-item-box">
-            <view class="iconfont icon-help menu-icon"></view>
-            <view>常见问题</view>
+            <view class="iconfont1 icon-huishouzhan menu-icon"></view>
+            <view>回收站</view>
           </view>
         </view>
         <view class="list-cell list-cell-arrow" @click="handleAbout">
           <view class="menu-item-box">
-            <view class="iconfont icon-aixin menu-icon"></view>
-            <view>关于我们</view>
+            <view class="iconfont1 icon-tongzhishezhi menu-icon"></view>
+            <view>通知设置</view>
           </view>
         </view>
         <view class="list-cell list-cell-arrow" @click="handleToSetting">
           <view class="menu-item-box">
-            <view class="iconfont icon-setting menu-icon"></view>
-            <view>应用设置</view>
+            <view class="iconfont1 icon-yijianfankui menu-icon"></view>
+            <view>意见反馈</view>
           </view>
         </view>
+		<view class="list-cell list-cell-arrow" @click="handleToSetting">
+		  <view class="menu-item-box">
+		    <view class="iconfont1 icon-zaixiankefu menu-icon"></view>
+		    <view>在线客服</view>
+		  </view>
+		</view>
+		<view class="list-cell list-cell-arrow" @click="handleToXiao">
+		  <view class="menu-item-box">
+		    <view class="iconfont1 icon-lejiexiaoetong menu-icon"></view>
+		    <view>了解小鹅通</view>
+		  </view>
+		</view>
+		<view class="list-cell list-cell-arrow" @click="handleToSetting">
+		  <view class="menu-item-box">
+		    <view class="iconfont1 icon-shezhi menu-icon"></view>
+		    <view>设置</view>
+		  </view>
+		</view>
       </view>
 
     </view>
@@ -113,8 +137,8 @@
       handleAbout() {
         this.$tab.navigateTo('/pages/mine/about/index')
       },
-      handleJiaoLiuQun() {
-        this.$modal.showToast('QQ群：①133713780(满)、②146013835(满)、③189091635')
+      handleToXiao() {
+        this.$tab.navigateTo('/pages/mine/xiao/index')
       },
       handleBuilding() {
         this.$modal.showToast('模块建设中~')
@@ -124,6 +148,8 @@
 </script>
 
 <style lang="scss" scoped>
+
+  @import '@/static/fontico/iconfont.css';
   page {
     background-color: #f5f6f7;
   }
@@ -186,3 +212,23 @@
     }
   }
 </style>
+
+<style lang="scss" scoped>
+  .user-info {
+    display: flex;
+    flex-direction: column; // 确保垂直排列
+    justify-content: center; // 垂直居中
+  }
+
+  .u_title {
+    // 可以根据需要调整字体样式
+    font-size: 18px;
+    line-height: 1.2; 
+  }
+
+  // 个人信息部分的样式
+  .flex align-center.mt-1 {
+    // 可以根据需要调整间距
+    margin-top: 4px; 
+  }
+</style>

pages/mine/info/index.vue

@@ -4,8 +4,6 @@
       <uni-list-item showExtraIcon="true" :extraIcon="{type: 'person-filled'}" title="昵称" :rightText="user.nickName" />
       <uni-list-item showExtraIcon="true" :extraIcon="{type: 'phone-filled'}" title="手机号码" :rightText="user.phonenumber" />
       <uni-list-item showExtraIcon="true" :extraIcon="{type: 'email-filled'}" title="邮箱" :rightText="user.email" />
-      <uni-list-item showExtraIcon="true" :extraIcon="{type: 'auth-filled'}" title="岗位" :rightText="postGroup" />
-      <uni-list-item showExtraIcon="true" :extraIcon="{type: 'staff-filled'}" title="角色" :rightText="roleGroup" />
       <uni-list-item showExtraIcon="true" :extraIcon="{type: 'calendar-filled'}" title="创建日期" :rightText="user.createTime" />
     </uni-list>
   </view>
@@ -17,9 +15,7 @@
   export default {
     data() {
       return {
-        user: {},
-        roleGroup: "",
-        postGroup: ""
+        user: {}
       }
     },
     onLoad() {
@@ -29,8 +25,6 @@
       getUser() {
         getUserProfile().then(response => {
           this.user = response.data
-          this.roleGroup = response.roleGroup
-          this.postGroup = response.postGroup
         })
       }
     }

pages/mine/xiao/index.vue

@@ -0,0 +1,51 @@
+<template>
+  <view class="about-container">
+    <view class="header-section text-center">
+      <uni-title type="h4" title="了解小鹅通"></uni-title>
+    </view>
+
+    <view class="content-section">
+        <view class="list-cell list-cell-arrow">
+         
+            <view>公司网站</view>
+            <view class="text-right">
+              <uni-link :href="url" :text="url" showUnderLine="false"></uni-link>
+            </view>
+        
+        </view>
+      </view>
+    </view>
+
+ 
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        url: getApp().globalData.config.appInfo.site_url,
+        version: getApp().globalData.config.appInfo.version
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  page {
+    background-color: #f8f8f8;
+  }
+
+  .copyright {
+    margin-top: 50rpx;
+    text-align: center;
+    line-height: 60rpx;
+    color: #999;
+  }
+
+  .header-section {
+    display: flex;
+    padding: 30rpx 0 0;
+    flex-direction: column;
+    align-items: center;
+  }
+</style>

pages/register.vue

@@ -3,7 +3,7 @@
     <view class="logo-content align-center justify-center flex">
       <image style="width: 100rpx;height: 100rpx;" :src="globalConfig.appInfo.logo" mode="widthFix">
       </image>
-      <text class="title">若依移动端注册</text>
+      <text class="title">小鹅通注册</text>
     </view>
     <view class="login-form-content">
       <view class="input-item flex align-center">

pages/search/index.vue

@@ -0,0 +1,78 @@
+<template>
+  <view class="search-container">
+    <view class="search-box">
+      <input 
+        v-model="searchQuery" 
+        type="text" 
+        @input="onSearchInput" 
+        @confirm="onSearch"
+      />
+      <button @click="onSearch">搜索</button>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      searchQuery: ''
+    };
+  },
+  methods: {
+    onSearchInput() {
+      // 可以在这里添加输入时的实时搜索逻辑
+      console.log('当前输入内容:', this.searchQuery);
+    },
+    onSearch() {
+      // 在这里添加搜索逻辑
+      console.log('开始搜索:', this.searchQuery);
+    }
+  }
+};
+</script>
+
+<style scoped>
+.search-container {
+  align-items: center; /* 垂直居中 */
+  justify-content: center; /* 水平居中 */
+  padding-top: 50px; 
+  height: auto; 
+  display: flex;
+  width: 100%;
+}
+
+.search-box {
+  width: 90%; 
+  display: flex;
+  gap: 0; /* 确保元素之间没有间隙 */
+}
+
+input {
+  flex: 1;
+  height: 50px;
+  padding: 15px; 
+  border: 1px solid #ccc;
+  border-radius: 4px 0 0 4px;
+  box-sizing: border-box; /* 确保内边距和边框包含在宽度内 */
+}
+
+button {
+  padding: 15px 25px; 
+  background-color: #007AFF;
+  height: 50px;
+  color: white;
+  border: none;
+  border-radius: 0 4px 4px 0;
+  cursor: pointer;
+  white-space: nowrap; /* 防止按钮文字换行 */
+  /* 添加以下样式让文字垂直居中 */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+button:hover {
+  background-color: #0056b3;
+}
+</style>

pages/work/index.vue

@@ -1,182 +1,336 @@
 <template>
-  <view class="work-container">
-    <!-- 轮播图 -->
-    <uni-swiper-dot class="uni-swiper-dot-box" :info="data" :current="current" field="content">
-      <swiper class="swiper-box" :current="swiperDotIndex" @change="changeSwiper">
-        <swiper-item v-for="(item, index) in data" :key="index">
-          <view class="swiper-item" @click="clickBannerItem(item)">
-            <image :src="item.image" mode="aspectFill" :draggable="false" />
+    <view class="container">
+      <!-- 搜索栏 -->
+      <view class="search-bar">
+        <input 
+          type="text" 
+          placeholder="搜索课程" 
+          v-model="searchQuery" 
+          @input="onSearch"
+        />
+      </view>
+      <!-- 分类导航 -->
+      <scroll-view class="category-scroll" scroll-x>
+        <view class="category-nav">
+          <view 
+            v-for="(category, index) in showCategories" 
+            :key="index"
+            class="category-item" 
+            :class="{active: currentTab === index}" 
+            @click="changeTab(index)"
+          >
+            {{ category.categoryName }}
           </view>
-        </swiper-item>
-      </swiper>
-    </uni-swiper-dot>
-
-    <!-- 宫格组件 -->
-    <uni-section title="系统管理" type="line"></uni-section>
-    <view class="grid-body">
-      <uni-grid :column="4" :showBorder="false" @change="changeGrid">
-        <uni-grid-item>
-          <view class="grid-item-box">
-            <uni-icons type="person-filled" size="30"></uni-icons>
-            <text class="text">用户管理</text>
-          </view>
-        </uni-grid-item>
-        <uni-grid-item>
-          <view class="grid-item-box">
-            <uni-icons type="staff-filled" size="30"></uni-icons>
-            <text class="text">角色管理</text>
-          </view>
-        </uni-grid-item>
-        <uni-grid-item>
-          <view class="grid-item-box">
-            <uni-icons type="color" size="30"></uni-icons>
-            <text class="text">菜单管理</text>
-          </view>
-        </uni-grid-item>
-        <uni-grid-item>
-          <view class="grid-item-box">
-            <uni-icons type="settings-filled" size="30"></uni-icons>
-            <text class="text">部门管理</text>
-          </view>
-        </uni-grid-item>
-        <uni-grid-item>
-          <view class="grid-item-box">
-            <uni-icons type="heart-filled" size="30"></uni-icons>
-            <text class="text">岗位管理</text>
+          <!-- 全部分类按钮 -->
+          <view 
+            v-if="categories.length > 3" 
+            class="category-item" 
+            @click="toggleShowAll"
+          >
+            {{ showAll ? '收起分类' : '全部分类' }}
           </view>
-        </uni-grid-item>
-        <uni-grid-item>
-          <view class="grid-item-box">
-            <uni-icons type="bars" size="30"></uni-icons>
-            <text class="text">字典管理</text>
+        </view>
+      </scroll-view>
+      <!-- 课程列表 -->
+      <view class="course-list">
+        <view 
+          v-for="(course, index) in courses" 
+          :key="index"
+          class="course-item"
+          @click="goToCourseDetail(course)"
+        >
+          <view class="course-img">
+            <image :src="course.imgUrl" mode="aspectFill"></image>
           </view>
-        </uni-grid-item>
-        <uni-grid-item>
-          <view class="grid-item-box">
-            <uni-icons type="gear-filled" size="30"></uni-icons>
-            <text class="text">参数设置</text>
+          <view class="course-info">
+            <view class="course-title">{{course.courseName}}</view>
+            <view class="course-price">¥{{course.coursePrice}}</view>
           </view>
-        </uni-grid-item>
-        <uni-grid-item>
-          <view class="grid-item-box">
-            <uni-icons type="chat-filled" size="30"></uni-icons>
-            <text class="text">通知公告</text>
-          </view>
-        </uni-grid-item>
-        <uni-grid-item>
-          <view class="grid-item-box">
-            <uni-icons type="wallet-filled" size="30"></uni-icons>
-            <text class="text">日志管理</text>
-          </view>
-        </uni-grid-item>
-      </uni-grid>
+        </view>
+      </view>
     </view>
-  </view>
 </template>
 
 <script>
-  export default {
-    data() {
-      return {
-        current: 0,
-        swiperDotIndex: 0,
-        data: [{
-            image: '/static/images/banner/banner01.jpg'
+export default {
+  data() {
+    return {
+      currentTab: 0,
+      categories: [], 
+      allCourses: [], // 存储所有课程数据
+      courses: [], // 存储当前显示的课程数据
+      searchQuery: '',
+      showAll: false, // 控制是否显示全部分类
+      // 定义分类与课程的映射
+      categoryCourseMap: {
+        0: [
+          {
+            imgUrl: 'https://picx.zhimg.com/v2-d6f44389971daab7e688e5b37046e4e4_720w.jpg?source=172ae18b',
+            courseName: '课程1',
+            coursePrice: 99
+          },
+          {
+            imgUrl: 'https://img.ixintu.com/download/jpg/201911/e25b904bc42a74d7d77aed81e66d772c.jpg!con',
+            courseName: '课程2',
+            coursePrice: 199
+          }
+        ],
+        1: [
+          {
+            imgUrl: 'https://ts1.tc.mm.bing.net/th/id/OIP-C.Nj6o69waOC3JTbebyCu-hgHaEc?rs=1&pid=ImgDetMain',
+            courseName: '课程3',
+            coursePrice: 20
+          },
+          {
+            imgUrl: 'https://pic1.zhimg.com/v2-02760a1bf058904006740d3f66b2c9ac_r.jpg?source=1940ef5c',
+            courseName: '课程4',
+            coursePrice: 150
+          }
+        ],
+        2: [
+          {
+            imgUrl: 'https://ts1.tc.mm.bing.net/th/id/R-C.987f582c510be58755c4933cda68d525?rik=C0D21hJDYvXosw&riu=http%3a%2f%2fimg.pconline.com.cn%2fimages%2fupload%2fupc%2ftx%2fwallpaper%2f1305%2f16%2fc4%2f20990657_1368686545122.jpg&ehk=netN2qzcCVS4ALUQfDOwxAwFcy41oxC%2b0xTFvOYy5ds%3d&risl=&pid=ImgRaw&r=0',
+            courseName: '课程5',
+            coursePrice: 50
+          },
+          {
+            imgUrl: 'https://ts1.tc.mm.bing.net/th/id/OIP-C.MQoT8Pi43oSD6cQGpvs-lAHaEK?rs=1&pid=ImgDetMain',
+            courseName: '课程6',
+            coursePrice: 80
+          }
+        ],
+        3: [
+          {
+            imgUrl: 'https://ts1.tc.mm.bing.net/th/id/R-C.cf381aa2a44f28ade81cb72e0e8decae?rik=xctKMrYyWQKvDg&riu=http%3a%2f%2fwww.1mpi.com%2fpic%2f9af8385ddd409baf50e081d6%2f2-810-jpg_6-1080-0-0-1080.jpg&ehk=Fw4Rzzq%2bSED%2bgMqemTtEk7fUdSL%2fkwW0KcsnygzTqp4%3d&risl=&pid=ImgRaw&r=0',
+            courseName: '课程7',
+            coursePrice: 120
           },
           {
-            image: '/static/images/banner/banner02.jpg'
+            imgUrl: 'https://img.shetu66.com/2023/04/25/1682391088567884.png',
+            courseName: '课程8',
+            coursePrice: 180
+          }
+        ],
+        4: [
+          {
+            imgUrl: 'https://ts1.tc.mm.bing.net/th/id/R-C.82ece114307f62dc0b8aa2c366b9ef37?rik=GwmaljjvGJ75zg&riu=http%3a%2f%2fimg.pconline.com.cn%2fimages%2fupload%2fupc%2ftx%2fwallpaper%2f1308%2f15%2fc2%2f24494094_1376530595238.jpg&ehk=L%2fNVdWJDsmRvIsmKuuUcvCGnK4DJwpxad4JswscWIN0%3d&risl=&pid=ImgRaw&r=0',
+            courseName: '课程9',
+            coursePrice: 30
+          },
+          {
+            imgUrl: 'https://bpic.588ku.com/back_origin_min_pic/21/07/09/8c9d5f41848ca6a292d52b3457ed418a.jpg',
+            courseName: '课程10',
+            coursePrice: 60
+          }
+        ],
+        5: [
+          {
+            imgUrl: 'https://pic.616pic.com/ys_bnew_img/00/13/11/J1kFGL8p6F.jpg',
+            courseName: '课程11',
+            coursePrice: 90
+          },
+          {
+            imgUrl: 'https://pic.616pic.com/ys_bnew_img/00/47/45/WwJs1U7BJW.jpg',
+            courseName: '课程12',
+            coursePrice: 110
+          }
+        ],
+        6: [
+          {
+            imgUrl: 'https://pic.616pic.com/ys_bnew_img/00/06/07/KT7I0AbOoI.jpg',
+            courseName: '课程13',
+            coursePrice: 40
+          },
+          {
+            imgUrl: 'https://ts1.tc.mm.bing.net/th/id/R-C.72eb213371fd74859ad6c574cf223070?rik=AjZbpwPKouep7A&riu=http%3a%2f%2fattach.66rpg.com%2fbbs%2fattachment%2fforum%2f201501%2f09%2f211837s6hkh6g5mg35336s.jpg&ehk=gJTX%2bHzLsoWwDctstn13%2bJY3QmA86kqpzexWicVHgbw%3d&risl=&pid=ImgRaw&r=0',
+            courseName: '课程14',
+            coursePrice: 70
+          }
+        ],
+        7: [
+          {
+            imgUrl: 'https://ts1.tc.mm.bing.net/th/id/R-C.478f595a4d79e0aacc812494d3f8ab9f?rik=%2bqgBvxUlXAuqqQ&riu=http%3a%2f%2ffile.51pptmoban.com%2fd%2ffile%2f2023%2f08%2f25%2f43b8e6ed4fa04f190edd0c8bd83d52b0.jpg&ehk=qiyuhH8mm%2bU9cHz1Px%2fLOZqDKA6PaSlPbn8yD5mnQGk%3d&risl=&pid=ImgRaw&r=0',
+            courseName: '课程15',
+            coursePrice: 130
           },
           {
-            image: '/static/images/banner/banner03.jpg'
+            imgUrl: 'https://img.keaitupian.cn/newupload/07/1688632400492441.jpg',
+            courseName: '课程16',
+            coursePrice: 160
+          }
+        ],
+        8: [
+          {
+            imgUrl: 'https://img.tukuppt.com/photo-big/18/10/08/07/27/181008072732.jpg',
+            courseName: '课程17',
+            coursePrice: 200
+          },
+          {
+            imgUrl: 'https://file.51pptmoban.com/d/file/2022/09/13/b2d85362febcf895e78916e0696f1a59.jpg',
+            courseName: '课程18',
+            coursePrice: 220
           }
         ]
       }
+    };
+  },
+  computed: {
+    // 根据 showAll 状态计算需要显示的分类
+    showCategories() {
+      if (this.showAll || this.categories.length <= 4) {
+        return this.categories;
+      } else {
+        return this.categories.slice(0, 4);
+      }
+    }
+  },
+  mounted() {
+    this.fetchCategories(); 
+    // 初始化所有课程数据
+    this.allCourses = Object.values(this.categoryCourseMap).flat();
+    this.fetchCourses();
+  },
+  methods: {
+    // 获取分类导航数据
+    fetchCategories() {
+      uni.request({
+        url: 'http://localhost:8080/system/category/findAll',
+        method: 'GET',
+        success: (res) => {
+          console.log('分类导航响应数据:', res);
+          if (res.statusCode === 200) {
+            // 假设数据被嵌套在 data 字段里
+            if (res.data && Array.isArray(res.data.data)) { 
+              this.categories = res.data.data;
+            } else {
+              console.error('分类导航数据格式不正确:', res.data);
+            }
+          } else {
+            console.error('获取分类导航数据失败:', `HTTP error! status: ${res.statusCode}`);
+          }
+        },
+        fail: (error) => {
+          console.error('获取分类导航数据失败:', error.errMsg);
+        }
+      });
     },
-    methods: {
-      clickBannerItem(item) {
-        console.info(item)
-      },
-      changeSwiper(e) {
-        this.current = e.detail.current
-      },
-      changeGrid(e) {
-        this.$modal.showToast('模块建设中~')
+    // 获取课程列表数据
+    // 修改 fetchCourses 方法，接收 index 参数
+    fetchCourses(index) {
+      const categoryIndex = index !== undefined ? index : this.currentTab;
+      let categoryCourses = this.categoryCourseMap[categoryIndex] || [];
+
+      if (this.searchQuery) {
+        categoryCourses = categoryCourses.filter(course =>
+          course.courseName.includes(this.searchQuery)
+        );
       }
+
+      this.courses = categoryCourses;
+    },
+    changeTab(index) {
+      this.currentTab = index;
+      // 调用 fetchCourses 时传递 index 参数
+      this.fetchCourses(index); 
+    },
+    onSearch() {
+      // 搜索时调用 fetchCourses 不传递 index 参数，使用默认逻辑
+      this.fetchCourses(); 
+    },
+    // 切换显示全部分类状态
+    toggleShowAll() {
+      this.showAll = !this.showAll;
+    },
+    goToCourseDetail(course) {
+      uni.navigateTo({
+        url: `/pages/courseDetail/courseDetail?imgUrl=${encodeURIComponent(course.imgUrl)}&courseName=${encodeURIComponent(course.courseName)}&coursePrice=${course.coursePrice}`
+      });
     }
   }
+};
 </script>
 
 <style lang="scss" scoped>
-  /* #ifndef APP-NVUE */
-  page {
-    display: flex;
-    flex-direction: column;
-    box-sizing: border-box;
-    background-color: #fff;
-    min-height: 100%;
-    height: auto;
-  }
-
-  view {
-    font-size: 14px;
-    line-height: inherit;
-  }
-  /* #endif */
-
-  .text {
-    text-align: center;
-    font-size: 26rpx;
-    margin-top: 10rpx;
-  }
-
-  .grid-item-box {
-    flex: 1;
-    /* #ifndef APP-NVUE */
-    display: flex;
-    /* #endif */
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    padding: 15px 0;
-  }
-
-  .uni-margin-wrap {
-    width: 690rpx;
-    width: 100%;
-    ;
-  }
-
-  .swiper {
-    height: 300rpx;
-  }
-
-  .swiper-box {
-    height: 150px;
-  }
-
-  .swiper-item {
-    /* #ifndef APP-NVUE */
-    display: flex;
-    /* #endif */
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    color: #fff;
-    height: 300rpx;
-    line-height: 300rpx;
-  }
-
-  @media screen and (min-width: 500px) {
-    .uni-swiper-dot-box {
-      width: 400px;
-      /* #ifndef APP-NVUE */
-      margin: 0 auto;
-      /* #endif */
-      margin-top: 8px;
-    }
-
-    .image {
-      width: 100%;
-    }
-  }
+.container {
+  padding: 10px;
+}
+.search-bar {
+  background-color: #f5f5f5;
+  padding: 8px;
+  border-radius: 5px;
+  margin-bottom: 10px;
+}
+.search-bar input {
+  width: 100%;
+  border: none;
+}
+.category-scroll {
+  white-space: nowrap;
+}
+.category-nav {
+  display: inline-flex;
+  justify-content: space-around;
+  margin-bottom: 10px;
+}
+.category-item {
+  padding: 5px 10px;
+  border-radius: 3px;
+  cursor: pointer;
+  display: inline-block;
+}
+.category-item.active {
+  background-color: #ff9900;
+  color: white;
+}
+// 全部分类展开时的样式，修改为一行展示四个分类
+.category-nav.show-all {
+  display: flex;
+  flex-wrap: wrap;
+  white-space: normal;
+}
+.category-nav.show-all .category-item {
+  width: calc(25% - 10px); // 修改宽度为 25%，减去边距
+  margin: 5px;
+  box-sizing: border-box;
+  text-align: center;
+}
+.course-list {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+.course-item {
+  width: 48%;
+  background-color: #fff;
+  border-radius: 5px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  margin-bottom: 15px;
+  overflow: hidden;
+}
+.course-img {
+  width: 100%;
+  height: 180px;
+  position: relative;
+}
+.course-img image {
+  width: 100%;
+  height: 100%;
+}
+.course-info {
+  padding: 10px;
+}
+.course-title {
+  font-size: 16px;
+  line-height: 1.4;
+  margin-bottom: 5px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+.course-price {
+  color: #ff4500;
+  font-size: 14px;
+}
 </style>

static/fontico/demo.css

@@ -0,0 +1,539 @@
+/* Logo 字体 */
+@font-face {
+  font-family: "iconfont logo";
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
+}
+
+.logo {
+  font-family: "iconfont logo";
+  font-size: 160px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* tabs */
+.nav-tabs {
+  position: relative;
+}
+
+.nav-tabs .nav-more {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  height: 42px;
+  line-height: 42px;
+  color: #666;
+}
+
+#tabs {
+  border-bottom: 1px solid #eee;
+}
+
+#tabs li {
+  cursor: pointer;
+  width: 100px;
+  height: 40px;
+  line-height: 40px;
+  text-align: center;
+  font-size: 16px;
+  border-bottom: 2px solid transparent;
+  position: relative;
+  z-index: 1;
+  margin-bottom: -1px;
+  color: #666;
+}
+
+
+#tabs .active {
+  border-bottom-color: #f00;
+  color: #222;
+}
+
+.tab-container .content {
+  display: none;
+}
+
+/* 页面布局 */
+.main {
+  padding: 30px 100px;
+  width: 960px;
+  margin: 0 auto;
+}
+
+.main .logo {
+  color: #333;
+  text-align: left;
+  margin-bottom: 30px;
+  line-height: 1;
+  height: 110px;
+  margin-top: -50px;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.main .logo a {
+  font-size: 160px;
+  color: #333;
+}
+
+.helps {
+  margin-top: 40px;
+}
+
+.helps pre {
+  padding: 20px;
+  margin: 10px 0;
+  border: solid 1px #e7e1cd;
+  background-color: #fffdef;
+  overflow: auto;
+}
+
+.icon_lists {
+  width: 100% !important;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.icon_lists li {
+  width: 100px;
+  margin-bottom: 10px;
+  margin-right: 20px;
+  text-align: center;
+  list-style: none !important;
+  cursor: default;
+}
+
+.icon_lists li .code-name {
+  line-height: 1.2;
+}
+
+.icon_lists .icon {
+  display: block;
+  height: 100px;
+  line-height: 100px;
+  font-size: 42px;
+  margin: 10px auto;
+  color: #333;
+  -webkit-transition: font-size 0.25s linear, width 0.25s linear;
+  -moz-transition: font-size 0.25s linear, width 0.25s linear;
+  transition: font-size 0.25s linear, width 0.25s linear;
+}
+
+.icon_lists .icon:hover {
+  font-size: 100px;
+}
+
+.icon_lists .svg-icon {
+  /* 通过设置 font-size 来改变图标大小 */
+  width: 1em;
+  /* 图标和文字相邻时，垂直对齐 */
+  vertical-align: -0.15em;
+  /* 通过设置 color 来改变 SVG 的颜色/fill */
+  fill: currentColor;
+  /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
+      normalize.css 中也包含这行 */
+  overflow: hidden;
+}
+
+.icon_lists li .name,
+.icon_lists li .code-name {
+  color: #666;
+}
+
+/* markdown 样式 */
+.markdown {
+  color: #666;
+  font-size: 14px;
+  line-height: 1.8;
+}
+
+.highlight {
+  line-height: 1.5;
+}
+
+.markdown img {
+  vertical-align: middle;
+  max-width: 100%;
+}
+
+.markdown h1 {
+  color: #404040;
+  font-weight: 500;
+  line-height: 40px;
+  margin-bottom: 24px;
+}
+
+.markdown h2,
+.markdown h3,
+.markdown h4,
+.markdown h5,
+.markdown h6 {
+  color: #404040;
+  margin: 1.6em 0 0.6em 0;
+  font-weight: 500;
+  clear: both;
+}
+
+.markdown h1 {
+  font-size: 28px;
+}
+
+.markdown h2 {
+  font-size: 22px;
+}
+
+.markdown h3 {
+  font-size: 16px;
+}
+
+.markdown h4 {
+  font-size: 14px;
+}
+
+.markdown h5 {
+  font-size: 12px;
+}
+
+.markdown h6 {
+  font-size: 12px;
+}
+
+.markdown hr {
+  height: 1px;
+  border: 0;
+  background: #e9e9e9;
+  margin: 16px 0;
+  clear: both;
+}
+
+.markdown p {
+  margin: 1em 0;
+}
+
+.markdown>p,
+.markdown>blockquote,
+.markdown>.highlight,
+.markdown>ol,
+.markdown>ul {
+  width: 80%;
+}
+
+.markdown ul>li {
+  list-style: circle;
+}
+
+.markdown>ul li,
+.markdown blockquote ul>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown>ul li p,
+.markdown>ol li p {
+  margin: 0.6em 0;
+}
+
+.markdown ol>li {
+  list-style: decimal;
+}
+
+.markdown>ol li,
+.markdown blockquote ol>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown code {
+  margin: 0 3px;
+  padding: 0 5px;
+  background: #eee;
+  border-radius: 3px;
+}
+
+.markdown strong,
+.markdown b {
+  font-weight: 600;
+}
+
+.markdown>table {
+  border-collapse: collapse;
+  border-spacing: 0px;
+  empty-cells: show;
+  border: 1px solid #e9e9e9;
+  width: 95%;
+  margin-bottom: 24px;
+}
+
+.markdown>table th {
+  white-space: nowrap;
+  color: #333;
+  font-weight: 600;
+}
+
+.markdown>table th,
+.markdown>table td {
+  border: 1px solid #e9e9e9;
+  padding: 8px 16px;
+  text-align: left;
+}
+
+.markdown>table th {
+  background: #F7F7F7;
+}
+
+.markdown blockquote {
+  font-size: 90%;
+  color: #999;
+  border-left: 4px solid #e9e9e9;
+  padding-left: 0.8em;
+  margin: 1em 0;
+}
+
+.markdown blockquote p {
+  margin: 0;
+}
+
+.markdown .anchor {
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  margin-left: 8px;
+}
+
+.markdown .waiting {
+  color: #ccc;
+}
+
+.markdown h1:hover .anchor,
+.markdown h2:hover .anchor,
+.markdown h3:hover .anchor,
+.markdown h4:hover .anchor,
+.markdown h5:hover .anchor,
+.markdown h6:hover .anchor {
+  opacity: 1;
+  display: inline-block;
+}
+
+.markdown>br,
+.markdown>p>br {
+  clear: both;
+}
+
+
+.hljs {
+  display: block;
+  background: white;
+  padding: 0.5em;
+  color: #333333;
+  overflow-x: auto;
+}
+
+.hljs-comment,
+.hljs-meta {
+  color: #969896;
+}
+
+.hljs-string,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-strong,
+.hljs-emphasis,
+.hljs-quote {
+  color: #df5000;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-type {
+  color: #a71d5d;
+}
+
+.hljs-literal,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-attribute {
+  color: #0086b3;
+}
+
+.hljs-section,
+.hljs-name {
+  color: #63a35c;
+}
+
+.hljs-tag {
+  color: #333333;
+}
+
+.hljs-title,
+.hljs-attr,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+  color: #795da3;
+}
+
+.hljs-addition {
+  color: #55a532;
+  background-color: #eaffea;
+}
+
+.hljs-deletion {
+  color: #bd2c00;
+  background-color: #ffecec;
+}
+
+.hljs-link {
+  text-decoration: underline;
+}
+
+/* 代码高亮 */
+/* PrismJS 1.15.0
+https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
+/**
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
+code[class*="language-"],
+pre[class*="language-"] {
+  color: black;
+  background: none;
+  text-shadow: 0 1px white;
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+pre[class*="language-"]::-moz-selection,
+pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection,
+code[class*="language-"] ::-moz-selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+pre[class*="language-"]::selection,
+pre[class*="language-"] ::selection,
+code[class*="language-"]::selection,
+code[class*="language-"] ::selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+@media print {
+
+  code[class*="language-"],
+  pre[class*="language-"] {
+    text-shadow: none;
+  }
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+  padding: 1em;
+  margin: .5em 0;
+  overflow: auto;
+}
+
+:not(pre)>code[class*="language-"],
+pre[class*="language-"] {
+  background: #f5f2f0;
+}
+
+/* Inline code */
+:not(pre)>code[class*="language-"] {
+  padding: .1em;
+  border-radius: .3em;
+  white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: slategray;
+}
+
+.token.punctuation {
+  color: #999;
+}
+
+.namespace {
+  opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  color: #905;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: #690;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+  color: #9a6e3a;
+  background: hsla(0, 0%, 100%, .5);
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+  color: #07a;
+}
+
+.token.function,
+.token.class-name {
+  color: #DD4A68;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+  color: #e90;
+}
+
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+
+.token.italic {
+  font-style: italic;
+}
+
+.token.entity {
+  cursor: help;
+}

static/fontico/demo_index.html

@@ -0,0 +1,579 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8"/>
+  <title>iconfont Demo</title>
+  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
+  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
+  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
+  <link rel="stylesheet" href="demo.css">
+  <link rel="stylesheet" href="iconfont.css">
+  <script src="iconfont.js"></script>
+  <!-- jQuery -->
+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
+  <!-- 代码高亮 -->
+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
+  <style>
+    .main .logo {
+      margin-top: 0;
+      height: auto;
+    }
+
+    .main .logo a {
+      display: flex;
+      align-items: center;
+    }
+
+    .main .logo .sub-title {
+      margin-left: 0.5em;
+      font-size: 22px;
+      color: #fff;
+      background: linear-gradient(-45deg, #3967FF, #B500FE);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+  </style>
+</head>
+<body>
+  <div class="main">
+    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
+      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
+      
+    </a></h1>
+    <div class="nav-tabs">
+      <ul id="tabs" class="dib-box">
+        <li class="dib active"><span>Unicode</span></li>
+        <li class="dib"><span>Font class</span></li>
+        <li class="dib"><span>Symbol</span></li>
+      </ul>
+      
+      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=4914772" target="_blank" class="nav-more">查看项目</a>
+      
+    </div>
+    <div class="tab-container">
+      <div class="content unicode" style="display: block;">
+          <ul class="icon_lists dib-box">
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe86e;</span>
+                <div class="name">搜索</div>
+                <div class="code-name">&amp;#xe86e;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe67b;</span>
+                <div class="name">直播预约</div>
+                <div class="code-name">&amp;#xe67b;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe651;</span>
+                <div class="name">精选选中</div>
+                <div class="code-name">&amp;#xe651;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe634;</span>
+                <div class="name">圈子消息hover</div>
+                <div class="code-name">&amp;#xe634;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe61d;</span>
+                <div class="name">课程上新</div>
+                <div class="code-name">&amp;#xe61d;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe82f;</span>
+                <div class="name">意见反馈</div>
+                <div class="code-name">&amp;#xe82f;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe61c;</span>
+                <div class="name">在线客服</div>
+                <div class="code-name">&amp;#xe61c;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe8b7;</span>
+                <div class="name">设置</div>
+                <div class="code-name">&amp;#xe8b7;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe646;</span>
+                <div class="name">回收站</div>
+                <div class="code-name">&amp;#xe646;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe666;</span>
+                <div class="name">店铺后台</div>
+                <div class="code-name">&amp;#xe666;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe62f;</span>
+                <div class="name">通知设置</div>
+                <div class="code-name">&amp;#xe62f;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe617;</span>
+                <div class="name">了解小鹅通</div>
+                <div class="code-name">&amp;#xe617;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe6df;</span>
+                <div class="name">超级会员</div>
+                <div class="code-name">&amp;#xe6df;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe8b4;</span>
+                <div class="name">日历</div>
+                <div class="code-name">&amp;#xe8b4;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe71f;</span>
+                <div class="name">我的下载</div>
+                <div class="code-name">&amp;#xe71f;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe601;</span>
+                <div class="name">错题本</div>
+                <div class="code-name">&amp;#xe601;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe767;</span>
+                <div class="name">店铺</div>
+                <div class="code-name">&amp;#xe767;</div>
+              </li>
+          
+          </ul>
+          <div class="article markdown">
+          <h2 id="unicode-">Unicode 引用</h2>
+          <hr>
+
+          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
+          <ul>
+            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
+            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
+          </ul>
+          <blockquote>
+            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
+          </blockquote>
+          <p>Unicode 使用步骤如下：</p>
+          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
+<pre><code class="language-css"
+>@font-face {
+  font-family: 'iconfont';
+  src: url('iconfont.woff2?t=1746702024236') format('woff2'),
+       url('iconfont.woff?t=1746702024236') format('woff'),
+       url('iconfont.ttf?t=1746702024236') format('truetype');
+}
+</code></pre>
+          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
+<pre><code class="language-css"
+>.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+</code></pre>
+          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
+<pre>
+<code class="language-html"
+>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
+</code></pre>
+          <blockquote>
+            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
+          </blockquote>
+          </div>
+      </div>
+      <div class="content font-class">
+        <ul class="icon_lists dib-box">
+          
+          <li class="dib">
+            <span class="icon iconfont icon-sousuo"></span>
+            <div class="name">
+              搜索
+            </div>
+            <div class="code-name">.icon-sousuo
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-zhiboyuyue"></span>
+            <div class="name">
+              直播预约
+            </div>
+            <div class="code-name">.icon-zhiboyuyue
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-jxa"></span>
+            <div class="name">
+              精选选中
+            </div>
+            <div class="code-name">.icon-jxa
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-quanzixiaoxihover"></span>
+            <div class="name">
+              圈子消息hover
+            </div>
+            <div class="code-name">.icon-quanzixiaoxihover
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-kechengshangxin"></span>
+            <div class="name">
+              课程上新
+            </div>
+            <div class="code-name">.icon-kechengshangxin
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-yijianfankui"></span>
+            <div class="name">
+              意见反馈
+            </div>
+            <div class="code-name">.icon-yijianfankui
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-zaixiankefu"></span>
+            <div class="name">
+              在线客服
+            </div>
+            <div class="code-name">.icon-zaixiankefu
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-shezhi"></span>
+            <div class="name">
+              设置
+            </div>
+            <div class="code-name">.icon-shezhi
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-huishouzhan"></span>
+            <div class="name">
+              回收站
+            </div>
+            <div class="code-name">.icon-huishouzhan
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-dianpuhoutai"></span>
+            <div class="name">
+              店铺后台
+            </div>
+            <div class="code-name">.icon-dianpuhoutai
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-tongzhishezhi"></span>
+            <div class="name">
+              通知设置
+            </div>
+            <div class="code-name">.icon-tongzhishezhi
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-lejiexiaoetong"></span>
+            <div class="name">
+              了解小鹅通
+            </div>
+            <div class="code-name">.icon-lejiexiaoetong
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-chaojihuiyuan"></span>
+            <div class="name">
+              超级会员
+            </div>
+            <div class="code-name">.icon-chaojihuiyuan
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-rili"></span>
+            <div class="name">
+              日历
+            </div>
+            <div class="code-name">.icon-rili
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-wodexiazai"></span>
+            <div class="name">
+              我的下载
+            </div>
+            <div class="code-name">.icon-wodexiazai
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-cuotiben"></span>
+            <div class="name">
+              错题本
+            </div>
+            <div class="code-name">.icon-cuotiben
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-dianpu"></span>
+            <div class="name">
+              店铺
+            </div>
+            <div class="code-name">.icon-dianpu
+            </div>
+          </li>
+          
+        </ul>
+        <div class="article markdown">
+        <h2 id="font-class-">font-class 引用</h2>
+        <hr>
+
+        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
+        <p>与 Unicode 使用方式相比，具有如下特点：</p>
+        <ul>
+          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
+          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
+        </ul>
+        <p>使用步骤如下：</p>
+        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
+<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
+</code></pre>
+        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
+<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
+</code></pre>
+        <blockquote>
+          <p>"
+            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
+        </blockquote>
+      </div>
+      </div>
+      <div class="content symbol">
+          <ul class="icon_lists dib-box">
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-sousuo"></use>
+                </svg>
+                <div class="name">搜索</div>
+                <div class="code-name">#icon-sousuo</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-zhiboyuyue"></use>
+                </svg>
+                <div class="name">直播预约</div>
+                <div class="code-name">#icon-zhiboyuyue</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-jxa"></use>
+                </svg>
+                <div class="name">精选选中</div>
+                <div class="code-name">#icon-jxa</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-quanzixiaoxihover"></use>
+                </svg>
+                <div class="name">圈子消息hover</div>
+                <div class="code-name">#icon-quanzixiaoxihover</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-kechengshangxin"></use>
+                </svg>
+                <div class="name">课程上新</div>
+                <div class="code-name">#icon-kechengshangxin</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-yijianfankui"></use>
+                </svg>
+                <div class="name">意见反馈</div>
+                <div class="code-name">#icon-yijianfankui</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-zaixiankefu"></use>
+                </svg>
+                <div class="name">在线客服</div>
+                <div class="code-name">#icon-zaixiankefu</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-shezhi"></use>
+                </svg>
+                <div class="name">设置</div>
+                <div class="code-name">#icon-shezhi</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-huishouzhan"></use>
+                </svg>
+                <div class="name">回收站</div>
+                <div class="code-name">#icon-huishouzhan</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-dianpuhoutai"></use>
+                </svg>
+                <div class="name">店铺后台</div>
+                <div class="code-name">#icon-dianpuhoutai</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-tongzhishezhi"></use>
+                </svg>
+                <div class="name">通知设置</div>
+                <div class="code-name">#icon-tongzhishezhi</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-lejiexiaoetong"></use>
+                </svg>
+                <div class="name">了解小鹅通</div>
+                <div class="code-name">#icon-lejiexiaoetong</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-chaojihuiyuan"></use>
+                </svg>
+                <div class="name">超级会员</div>
+                <div class="code-name">#icon-chaojihuiyuan</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-rili"></use>
+                </svg>
+                <div class="name">日历</div>
+                <div class="code-name">#icon-rili</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-wodexiazai"></use>
+                </svg>
+                <div class="name">我的下载</div>
+                <div class="code-name">#icon-wodexiazai</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-cuotiben"></use>
+                </svg>
+                <div class="name">错题本</div>
+                <div class="code-name">#icon-cuotiben</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-dianpu"></use>
+                </svg>
+                <div class="name">店铺</div>
+                <div class="code-name">#icon-dianpu</div>
+            </li>
+          
+          </ul>
+          <div class="article markdown">
+          <h2 id="symbol-">Symbol 引用</h2>
+          <hr>
+
+          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
+            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
+          <ul>
+            <li>支持多色图标了，不再受单色限制。</li>
+            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
+            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
+            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
+          </ul>
+          <p>使用步骤如下：</p>
+          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
+<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
+</code></pre>
+          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
+<pre><code class="language-html">&lt;style&gt;
+.icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+&lt;/style&gt;
+</code></pre>
+          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
+<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
+  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
+&lt;/svg&gt;
+</code></pre>
+          </div>
+      </div>
+
+    </div>
+  </div>
+  <script>
+  $(document).ready(function () {
+      $('.tab-container .content:first').show()
+
+      $('#tabs li').click(function (e) {
+        var tabContent = $('.tab-container .content')
+        var index = $(this).index()
+
+        if ($(this).hasClass('active')) {
+          return
+        } else {
+          $('#tabs li').removeClass('active')
+          $(this).addClass('active')
+
+          tabContent.hide().eq(index).fadeIn()
+        }
+      })
+    })
+  </script>
+</body>
+</html>

static/fontico/iconfont.css

@@ -0,0 +1,83 @@
+@font-face {
+  font-family: "iconfont1"; /* Project id 4914772 */
+  src: url('@/static/fontico/iconfont.woff2?t=1746702024236') format('woff2'),
+       url('@/static/fontico/iconfont.woff?t=1746702024236') format('woff'),
+       url('@/static/fontico/iconfont.ttf?t=1746702024236') format('truetype');
+}
+
+.iconfont1 {
+  font-family: "iconfont1" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-sousuo:before {
+  content: "\e86e";
+}
+
+.icon-zhiboyuyue:before {
+  content: "\e67b";
+}
+
+.icon-jxa:before {
+  content: "\e651";
+}
+
+.icon-quanzixiaoxihover:before {
+  content: "\e634";
+}
+
+.icon-kechengshangxin:before {
+  content: "\e61d";
+}
+
+.icon-yijianfankui:before {
+  content: "\e82f";
+}
+
+.icon-zaixiankefu:before {
+  content: "\e61c";
+}
+
+.icon-shezhi:before {
+  content: "\e8b7";
+}
+
+.icon-huishouzhan:before {
+  content: "\e646";
+}
+
+.icon-dianpuhoutai:before {
+  content: "\e666";
+}
+
+.icon-tongzhishezhi:before {
+  content: "\e62f";
+}
+
+.icon-lejiexiaoetong:before {
+  content: "\e617";
+}
+
+.icon-chaojihuiyuan:before {
+  content: "\e6df";
+}
+
+.icon-rili:before {
+  content: "\e8b4";
+}
+
+.icon-wodexiazai:before {
+  content: "\e71f";
+}
+
+.icon-cuotiben:before {
+  content: "\e601";
+}
+
+.icon-dianpu:before {
+  content: "\e767";
+}
+

static/fontico/iconfont.json

@@ -0,0 +1,128 @@
+{
+  "id": "4914772",
+  "name": "小鹅通",
+  "font_family": "iconfont",
+  "css_prefix_text": "icon-",
+  "description": "",
+  "glyphs": [
+    {
+      "icon_id": "2076190",
+      "name": "搜索",
+      "font_class": "sousuo",
+      "unicode": "e86e",
+      "unicode_decimal": 59502
+    },
+    {
+      "icon_id": "1928397",
+      "name": "直播预约",
+      "font_class": "zhiboyuyue",
+      "unicode": "e67b",
+      "unicode_decimal": 59003
+    },
+    {
+      "icon_id": "2860417",
+      "name": "精选选中",
+      "font_class": "jxa",
+      "unicode": "e651",
+      "unicode_decimal": 58961
+    },
+    {
+      "icon_id": "8779462",
+      "name": "圈子消息hover",
+      "font_class": "quanzixiaoxihover",
+      "unicode": "e634",
+      "unicode_decimal": 58932
+    },
+    {
+      "icon_id": "29348446",
+      "name": "课程上新",
+      "font_class": "kechengshangxin",
+      "unicode": "e61d",
+      "unicode_decimal": 58909
+    },
+    {
+      "icon_id": "831398",
+      "name": "意见反馈",
+      "font_class": "yijianfankui",
+      "unicode": "e82f",
+      "unicode_decimal": 59439
+    },
+    {
+      "icon_id": "2127186",
+      "name": "在线客服",
+      "font_class": "zaixiankefu",
+      "unicode": "e61c",
+      "unicode_decimal": 58908
+    },
+    {
+      "icon_id": "11372694",
+      "name": "设置",
+      "font_class": "shezhi",
+      "unicode": "e8b7",
+      "unicode_decimal": 59575
+    },
+    {
+      "icon_id": "12323390",
+      "name": "回收站",
+      "font_class": "huishouzhan",
+      "unicode": "e646",
+      "unicode_decimal": 58950
+    },
+    {
+      "icon_id": "20764612",
+      "name": "店铺后台",
+      "font_class": "dianpuhoutai",
+      "unicode": "e666",
+      "unicode_decimal": 58982
+    },
+    {
+      "icon_id": "32281159",
+      "name": "通知设置",
+      "font_class": "tongzhishezhi",
+      "unicode": "e62f",
+      "unicode_decimal": 58927
+    },
+    {
+      "icon_id": "32753599",
+      "name": "了解小鹅通",
+      "font_class": "lejiexiaoetong",
+      "unicode": "e617",
+      "unicode_decimal": 58903
+    },
+    {
+      "icon_id": "8560014",
+      "name": "超级会员",
+      "font_class": "chaojihuiyuan",
+      "unicode": "e6df",
+      "unicode_decimal": 59103
+    },
+    {
+      "icon_id": "11372686",
+      "name": "日历",
+      "font_class": "rili",
+      "unicode": "e8b4",
+      "unicode_decimal": 59572
+    },
+    {
+      "icon_id": "15705739",
+      "name": "我的下载",
+      "font_class": "wodexiazai",
+      "unicode": "e71f",
+      "unicode_decimal": 59167
+    },
+    {
+      "icon_id": "21586207",
+      "name": "错题本",
+      "font_class": "cuotiben",
+      "unicode": "e601",
+      "unicode_decimal": 58881
+    },
+    {
+      "icon_id": "29641463",
+      "name": "店铺",
+      "font_class": "dianpu",
+      "unicode": "e767",
+      "unicode_decimal": 59239
+    }
+  ]
+}

store/modules/user.js

@@ -13,6 +13,7 @@ const user = {
     token: getToken(),
     id: storage.get(constant.id),
     name: storage.get(constant.name),
+    phone: storage.get(constant.phone),
     avatar: storage.get(constant.avatar),
     roles: storage.get(constant.roles),
     permissions: storage.get(constant.permissions)
@@ -30,6 +31,10 @@ const user = {
       state.name = name
       storage.set(constant.name, name)
     },
+    SET_PHONE: (state, phone) => {
+      state.phone = phone
+      storage.set(constant.phone, phone)
+    },
     SET_AVATAR: (state, avatar) => {
       state.avatar = avatar
       storage.set(constant.avatar, avatar)

utils/constant.js

@@ -2,6 +2,7 @@ const constant = {
   avatar: 'user_avatar',
   id: 'user_id',
   name: 'user_name',
+  phone: 'phonenumber',
   roles: 'user_roles',
   permissions: 'user_permissions'
  }

utils/storage.js

@@ -4,7 +4,7 @@ import constant from './constant'
 let storageKey = 'storage_data'
 
 // 存储节点变量名
-let storageNodeKeys = [constant.avatar, constant.id, constant.name, constant.roles, constant.permissions]
+let storageNodeKeys = [constant.avatar, constant.id, constant.name, constant.phone, constant.roles, constant.permissions]
 
 const storage = {
   set: function(key, value) {