|
@@ -4,8 +4,8 @@
|
|
|
<view class="nav-bar">
|
|
|
<text class="nav-title">小鹅通</text>
|
|
|
<view class="nav-icons">
|
|
|
- <view class="iconfont1 icon-sousuo icon"></view>
|
|
|
- <view class="iconfont1 icon-rili icon"></view>
|
|
|
+ <view class="iconfont1 icon-sousuo icon" @click="handleSearch"></view>
|
|
|
+ <view class="iconfont1 icon-rili icon" @click="showCalendarDrawer"></view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<!-- 仿日历形状的框 -->
|
|
@@ -22,13 +22,48 @@
|
|
|
</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>
|
|
@@ -129,4 +164,35 @@ export default {
|
|
|
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;
|
|
|
+}
|
|
|
</style>
|