添加 通知公告、兴趣课、俱乐部 的接口对接
This commit is contained in:
ywyonui
parent
6c98d0cb73
commit
a1a57c77f5
@ -29,6 +29,13 @@ export const xkqddeleteApi = async (params: any) => {
|
||||
return await post("/api/xkqd/delete?ids=" + params.ids);
|
||||
};
|
||||
|
||||
/**
|
||||
* 当前学期排课公共配置（排课设置、排课周次、排课时间）
|
||||
*/
|
||||
export const cmsArticlePageApi = async (params: any) => {
|
||||
return await get("/api/cms/article/findPage", params);
|
||||
};
|
||||
|
||||
/**
|
||||
* 当前学期排课公共配置（排课设置、排课周次、排课时间）
|
||||
*/
|
||||
@ -43,4 +50,9 @@ export const drpkkbApi = async (params: any) => {
|
||||
return await get("/mobile/jz/pkkb/drpkkb", params);
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* 查询学生选课列表
|
||||
*/
|
||||
export const xsXkListApi = async (params: any) => {
|
||||
return await get("/mobile/jz/xsxk/list", params);
|
||||
};
|
||||
|
||||
433
src/pages/base/club/index - 副本.vue
Normal file
433
src/pages/base/club/index - 副本.vue
Normal file
@ -0,0 +1,433 @@
|
||||
<template>
|
||||
<BasicLayout>
|
||||
<view class="p-15">
|
||||
<!-- 顶部蓝色背景横幅 -->
|
||||
<view class="banner-section">
|
||||
<view class="banner-placeholder">
|
||||
<view class="banner-content">
|
||||
<text class="banner-title">兴趣课程</text>
|
||||
<text class="banner-school">泸州市实验小学城西学校</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 课程类型选项卡 -->
|
||||
<view class="my-course-section">
|
||||
<view class="section-title">
|
||||
<u-icon name="calendar" size="18" color="#1976d2"></u-icon>
|
||||
<text class="title-text">我的课程</text>
|
||||
</view>
|
||||
|
||||
<view class="tabs-container">
|
||||
<view
|
||||
class="tab-item"
|
||||
:class="{ 'active': activeTab === 'basketball' }"
|
||||
@click="switchTab('basketball')"
|
||||
>
|
||||
<text>篮球</text>
|
||||
</view>
|
||||
<view
|
||||
class="tab-item"
|
||||
:class="{ 'active': activeTab === 'football' }"
|
||||
@click="switchTab('football')"
|
||||
>
|
||||
<text>足球</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 篮球课程信息卡片 -->
|
||||
<view class="course-card" v-if="activeTab === 'basketball'">
|
||||
<view class="course-image-placeholder"></view>
|
||||
<view class="course-info">
|
||||
<text class="course-name">篮球</text>
|
||||
<view class="course-detail">
|
||||
<text class="detail-label">开课老师：</text>
|
||||
<text class="detail-value">叶老师</text>
|
||||
</view>
|
||||
<view class="course-detail">
|
||||
<text class="detail-label">上课地点：</text>
|
||||
<text class="detail-value">教学楼3楼</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 足球课程信息卡片 -->
|
||||
<view class="course-card" v-if="activeTab === 'football'">
|
||||
<view class="course-image-placeholder"></view>
|
||||
<view class="course-info">
|
||||
<text class="course-name">足球</text>
|
||||
<view class="course-detail">
|
||||
<text class="detail-label">开课老师：</text>
|
||||
<text class="detail-value">王老师</text>
|
||||
</view>
|
||||
<view class="course-detail">
|
||||
<text class="detail-label">上课地点：</text>
|
||||
<text class="detail-value">操场</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 教学计划 -->
|
||||
<view class="teaching-plan-section">
|
||||
<view class="section-title-bar">
|
||||
<text class="title-text">教学计划</text>
|
||||
</view>
|
||||
|
||||
<!-- 篮球教学计划 -->
|
||||
<view class="plan-content" v-if="activeTab === 'basketball'">
|
||||
<view class="plan-item">
|
||||
<text class="plan-phase">第一阶段：</text>
|
||||
<text class="plan-desc">了解机器人的组成，知道每个零件的名称及用途，认识机器人的结构。</text>
|
||||
</view>
|
||||
|
||||
<view class="plan-item">
|
||||
<text class="plan-phase">第二阶段：</text>
|
||||
<text class="plan-desc">在老师的引导下，分组搭建机器人，注意引导幼儿理解机器人的数据线连接和遥控器方向的关系。</text>
|
||||
</view>
|
||||
|
||||
<view class="plan-item">
|
||||
<text class="plan-phase">第三阶段：</text>
|
||||
<text class="plan-desc">学会操控机器人的移动方向，并练习把魔方根据要求推到指定位置。</text>
|
||||
</view>
|
||||
|
||||
<view class="plan-item">
|
||||
<text class="plan-phase">第四阶段：</text>
|
||||
<text class="plan-desc">组织幼儿参加创客机器人比赛。</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 足球教学计划 -->
|
||||
<view class="plan-content" v-if="activeTab === 'football'">
|
||||
<view class="plan-item">
|
||||
<text class="plan-phase">第一阶段：</text>
|
||||
<text class="plan-desc">基础训练，包括传球、控球和基本规则学习。</text>
|
||||
</view>
|
||||
|
||||
<view class="plan-item">
|
||||
<text class="plan-phase">第二阶段：</text>
|
||||
<text class="plan-desc">进阶技巧学习，包括带球跑动、射门和防守基础。</text>
|
||||
</view>
|
||||
|
||||
<view class="plan-item">
|
||||
<text class="plan-phase">第三阶段：</text>
|
||||
<text class="plan-desc">团队配合训练，学习简单的战术配合和位置意识。</text>
|
||||
</view>
|
||||
|
||||
<view class="plan-item">
|
||||
<text class="plan-phase">第四阶段：</text>
|
||||
<text class="plan-desc">小型比赛实践，培养学生的团队协作能力和比赛经验。</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 课堂随拍 -->
|
||||
<view class="class-photos-section">
|
||||
<view class="section-title-bar">
|
||||
<text class="title-text">课堂随拍</text>
|
||||
</view>
|
||||
|
||||
<!-- 篮球课堂照片 -->
|
||||
<view class="photos-grid" v-if="activeTab === 'basketball'">
|
||||
<view class="photo-placeholder"></view>
|
||||
<view class="photo-placeholder"></view>
|
||||
<view class="photo-placeholder"></view>
|
||||
<view class="photo-placeholder"></view>
|
||||
</view>
|
||||
|
||||
<!-- 足球课堂照片 -->
|
||||
<view class="photos-grid" v-if="activeTab === 'football'">
|
||||
<view class="photo-placeholder football-photo"></view>
|
||||
<view class="photo-placeholder football-photo"></view>
|
||||
<view class="photo-placeholder football-photo"></view>
|
||||
<view class="photo-placeholder football-photo"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<template #bottom>
|
||||
<view class="white-bg-color py-5">
|
||||
<view class="flex-row items-center pb-10 pt-5">
|
||||
<u-button text="取消" class="ml-15 mr-7" :plain="true" @click="navigateBack"/>
|
||||
<u-button text="退课申请" class="mr-15 mr-7" type="primary" @click="submit"/>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</BasicLayout>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { navigateBack } from "@/utils/uniapp";
|
||||
import { ref } from "vue";
|
||||
import { xkFindDqXsApi } from "@/api/base/server";
|
||||
import { useUserStore } from "@/store/modules/user";
|
||||
const { getCurXs } = useUserStore();
|
||||
|
||||
// 当前激活的选项卡，默认为篮球
|
||||
const activeTab = ref('basketball');
|
||||
|
||||
// 切换选项卡
|
||||
function switchTab(tab: string) {
|
||||
activeTab.value = tab;
|
||||
}
|
||||
|
||||
function submit() {
|
||||
const courseName = activeTab.value === 'basketball' ? '篮球' : '足球';
|
||||
|
||||
uni.showModal({
|
||||
title: '确认退课',
|
||||
content: `确定要退出${courseName}课程吗？`,
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
uni.showToast({
|
||||
title: `${courseName}退课申请已提交`,
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
// Make onMounted async
|
||||
xkFindDqXsApi({
|
||||
xsId: getCurXs.id,
|
||||
xklxId: '816059832'
|
||||
}).then(res => {
|
||||
// 根据接口返回的result判断是否已报名
|
||||
if (res && res.resultCode === 1) {
|
||||
console.log(res)
|
||||
} else {
|
||||
// 接口调用成功但返回错误
|
||||
console.warn("检查获取当前学期俱乐部接口返回错误:", res);
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
// 接口调用失败
|
||||
console.error("调用获取当前学期俱乐部接口失败:", error);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/* 顶部蓝色背景横幅 */
|
||||
.banner-section {
|
||||
margin-bottom: 15px;
|
||||
|
||||
.banner-placeholder {
|
||||
height: 120px;
|
||||
background-color: #3986FF;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.banner-content {
|
||||
text-align: center;
|
||||
|
||||
.banner-title {
|
||||
font-size: 22px;
|
||||
color: #ffffff;
|
||||
font-weight: 500;
|
||||
margin-bottom: 8px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.banner-school {
|
||||
font-size: 14px;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 我的课程 */
|
||||
.my-course-section {
|
||||
margin-bottom: 15px;
|
||||
|
||||
.section-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
|
||||
.title-text {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #303133;
|
||||
margin-left: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.tabs-container {
|
||||
display: flex;
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
margin-bottom: 15px;
|
||||
|
||||
.tab-item {
|
||||
padding: 12px 0;
|
||||
margin-right: 20px;
|
||||
position: relative;
|
||||
|
||||
text {
|
||||
color: #606266;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
&.active {
|
||||
text {
|
||||
color: #1976d2;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 2px;
|
||||
background-color: #1976d2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.course-card {
|
||||
background-color: #ffffff;
|
||||
border-radius: 10px;
|
||||
padding: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05);
|
||||
|
||||
.course-image-placeholder {
|
||||
width: 120px;
|
||||
height: 100px;
|
||||
background-color: #f0f0f0;
|
||||
border-radius: 6px;
|
||||
margin-right: 15px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.course-info {
|
||||
flex: 1;
|
||||
|
||||
.course-name {
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
color: #303133;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.course-detail {
|
||||
display: flex;
|
||||
margin-bottom: 6px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.detail-label {
|
||||
color: #606266;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.detail-value {
|
||||
color: #303133;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 教学计划 */
|
||||
.teaching-plan-section {
|
||||
margin-bottom: 15px;
|
||||
background-color: #ffffff;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05);
|
||||
|
||||
.section-title-bar {
|
||||
padding: 12px 15px;
|
||||
border-bottom: 1px solid #f2f2f2;
|
||||
|
||||
.title-text {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #303133;
|
||||
}
|
||||
}
|
||||
|
||||
.plan-content {
|
||||
padding: 15px;
|
||||
|
||||
.plan-item {
|
||||
margin-bottom: 15px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.plan-phase {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.plan-desc {
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 课堂随拍 */
|
||||
.class-photos-section {
|
||||
background-color: #ffffff;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05);
|
||||
margin-bottom: 60px;
|
||||
|
||||
.section-title-bar {
|
||||
padding: 12px 15px;
|
||||
border-bottom: 1px solid #f2f2f2;
|
||||
|
||||
.title-text {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #303133;
|
||||
}
|
||||
}
|
||||
|
||||
.photos-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 15px;
|
||||
|
||||
.photo-placeholder {
|
||||
width: calc(50% - 8px);
|
||||
height: 110px;
|
||||
background-color: #f0f0f0;
|
||||
border-radius: 6px;
|
||||
margin-right: 8px;
|
||||
margin-bottom: 8px;
|
||||
|
||||
&:nth-child(2n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&:nth-child(3), &:nth-child(4) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&.football-photo {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
@ -3,17 +3,18 @@
|
||||
<!-- 通知头部 -->
|
||||
<view class="notice-header">
|
||||
<view class="notice-title">
|
||||
<text>开学典礼安排通知</text>
|
||||
<text>{{data.title}}</text>
|
||||
</view>
|
||||
<view class="notice-meta">
|
||||
<text class="publisher">发布人: 李校长</text>
|
||||
<text class="date">2023-07-18 10:30</text>
|
||||
<text class="publisher">发布人: {{data.author}}</text>
|
||||
<text class="date">{{data.releaseTime}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 通知内容 -->
|
||||
<view class="notice-content">
|
||||
<view class="content-section">
|
||||
<rich-text :nodes="data.content"></rich-text>
|
||||
<!-- <view class="content-section">
|
||||
<text class="section-title">尊敬的各位家长：</text>
|
||||
<text class="section-text">您好！经学校研究决定，将于2023年9月1日（星期五）上午9:00举行新学年开学典礼。现将有关事项通知如下：</text>
|
||||
</view>
|
||||
@ -52,49 +53,122 @@
|
||||
|
||||
<view class="content-section">
|
||||
<text class="section-text">感谢各位家长的配合与支持！</text>
|
||||
</view>
|
||||
</view> -->
|
||||
</view>
|
||||
|
||||
<!-- 附件区域 -->
|
||||
<view class="attachment-section">
|
||||
<!-- <view class="attachment-section">
|
||||
<view class="section-header">
|
||||
<text class="header-title">附件</text>
|
||||
</view>
|
||||
|
||||
<view class="attachment-list">
|
||||
<view class="attachment-item" @click="previewAttachment">
|
||||
<view class="attachment-item" @click="downloadFile(file)"
|
||||
v-for="(file, index) in fileList"
|
||||
:key="index">
|
||||
<u-icon name="file-text" size="22" color="#2D81FF"></u-icon>
|
||||
<text class="attachment-name">开学典礼流程安排.pdf</text>
|
||||
<u-icon name="download" size="20" color="#999"></u-icon>
|
||||
</view>
|
||||
|
||||
<view class="attachment-item" @click="previewAttachment">
|
||||
<u-icon name="file-text" size="22" color="#2D81FF"></u-icon>
|
||||
<text class="attachment-name">学校地图及交通指南.pdf</text>
|
||||
<text class="attachment-name">{{file}}</text>
|
||||
<u-icon name="download" size="20" color="#999"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { useDataStore } from "@/store/modules/data";
|
||||
const { getData } = useDataStore();
|
||||
|
||||
// 预览附件
|
||||
const previewAttachment = () => {
|
||||
let data = ref({
|
||||
"id": 2142746416,
|
||||
"createdTime": "2024-10-10 09:37:45",
|
||||
"updatedTime": "2024-10-12 15:47:44",
|
||||
"createdUserName": "管理员",
|
||||
"updatedUserName": "管理员",
|
||||
"title": "值周学生常规规范",
|
||||
"columnId": 24,
|
||||
"sort": 1,
|
||||
"description": "",
|
||||
"releaseTime": "2024-10-10 09:32:36",
|
||||
"author": "",
|
||||
"source": "",
|
||||
"content": "<p style=\"text-align: center;\"><br></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">1.值周前一周放假前清楚自己常规检查的位楼栋、楼层和班级；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">2.检查时段包括早读、大课间、下午眼保健操。</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">3.检查内容。</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px; font-family: 黑体;\"><strong>早读八看：</strong></span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑴看是否有教师值守；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑵看值守教师是否长时间玩手机；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑶看黑板上的值日课程贴是否填写；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑷看同学是否到班即读，有无疯玩打闹；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑸看课桌椅、讲桌是否整齐、整洁；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑹看红领巾佩戴(队徽)情况；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑺看教室、走廊是否有垃圾；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑻看黑板上是否书写(课件)有早读的内容和要求。</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px; font-family: 黑体;\"><strong>大课间七看：</strong></span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑴看是否认真组织室内操；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑵看室外操班级是否留有学生在教室且打闹；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑶看室内操是否安静、动用是否整齐；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑷看是否有教师值守室内操；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑸看教室、走廊地面是否有垃圾；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑹看室外操班级桌面是否收拾整洁；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑺看室外操班级是否关闭用电设备。</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px; font-family: 黑体;\"><strong>眼保健操五看：</strong></span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑴看是否按要求组织眼保健操；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑵看做操时是否关灯；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑶看是否有学生讲话、未做、未闭眼做操；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑷看教室、走廊地面是否整洁；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑸看走廊书吧是否整齐。</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">4.检查时实行蹲点检查，整个时段来回巡查。</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">5.校门口礼仪队同学要保持良好的精神状态，着装整洁，可设计个性的欢迎口号、动作、道具等，热情向师生问好；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">6.常规检查同学到班检查要佩戴好绶带，进入教室要喊“报告”。</span></p>",
|
||||
"columnName": "师、生值周工作要求",
|
||||
"pk": 2142746416,
|
||||
"linkaddress": ""
|
||||
})
|
||||
|
||||
let fileList = ref([
|
||||
{
|
||||
title: '',
|
||||
url: ''
|
||||
}
|
||||
])
|
||||
|
||||
// 下载附件
|
||||
const downloadFile = (file: any) => {
|
||||
uni.showToast({
|
||||
title: "附件下载中...",
|
||||
icon: "loading"
|
||||
});
|
||||
|
||||
// 模拟下载过程
|
||||
setTimeout(() => {
|
||||
uni.downloadFile({
|
||||
url: file.url, // 文件下载链接
|
||||
success: (res) => {
|
||||
if (res.statusCode === 200) {
|
||||
// 在 H5 或 App 中，可以通过临时路径访问文件
|
||||
console.log('下载成功，临时路径:', res.tempFilePath);
|
||||
// 在 App 中，可以调用保存到本地的方法
|
||||
// #ifdef APP-PLUS
|
||||
uni.saveFile({
|
||||
tempFilePath: res.tempFilePath,
|
||||
success: (saveRes) => {
|
||||
console.log('文件保存成功:', saveRes.savedFilePath);
|
||||
uni.showToast({
|
||||
title: "下载成功",
|
||||
icon: "success"
|
||||
});
|
||||
}, 1500);
|
||||
},
|
||||
fail: (err) => {
|
||||
console.log('保存失败:', err);
|
||||
uni.showToast({
|
||||
title: "保存失败",
|
||||
icon: "error"
|
||||
});
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
|
||||
// 在小程序中，可能需要调用小程序的保存文件 API
|
||||
// #ifdef MP-WEIXIN
|
||||
wx.saveFile({
|
||||
tempFilePath: res.tempFilePath,
|
||||
success: (saveRes) => {
|
||||
console.log('文件保存成功:', saveRes.savedFilePath);
|
||||
uni.showToast({
|
||||
title: "下载成功",
|
||||
icon: "success"
|
||||
});
|
||||
},
|
||||
fail: (err) => {
|
||||
console.log('保存失败:', err);
|
||||
uni.showToast({
|
||||
title: "保存失败",
|
||||
icon: "error"
|
||||
});
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
}
|
||||
},
|
||||
fail: (err) => {
|
||||
console.log('下载失败:', err);
|
||||
uni.showToast({
|
||||
title: "下载失败",
|
||||
icon: "error"
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 分享通知
|
||||
@ -104,6 +178,15 @@ const shareNotice = () => {
|
||||
menus: ['shareAppMessage', 'shareTimeline']
|
||||
});
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
data.value = getData
|
||||
// 滚动到顶部
|
||||
uni.pageScrollTo({
|
||||
scrollTop: 0,
|
||||
duration: 0 // 立即滚动，无动画
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@ -70,7 +70,7 @@
|
||||
v-for="(notice, index) in announcements"
|
||||
:key="index"
|
||||
class="notice-item"
|
||||
@click="navigateTo('/pages/base/home/detail')"
|
||||
@click="goToDetail(notice)"
|
||||
>
|
||||
<view class="notice-icon">
|
||||
<u-icon name="bell" size="20" color="#4A90E2"></u-icon>
|
||||
@ -79,7 +79,7 @@
|
||||
<text class="notice-title">{{ notice.title }}</text>
|
||||
<text class="notice-desc">{{ notice.description }}</text>
|
||||
<view class="notice-footer">
|
||||
<text class="notice-date">{{ notice.date }}</text>
|
||||
<text class="notice-date">{{ notice.releaseTime }}</text>
|
||||
<view class="notice-arrow">
|
||||
<u-icon name="arrow-right" size="12" color="#C8C9CC"></u-icon>
|
||||
</view>
|
||||
@ -130,10 +130,12 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { navigateTo } from "@/utils/uniapp";
|
||||
import { ref } from "vue";
|
||||
import { cmsArticlePageApi } from "@/api/base/server";
|
||||
import { useUserStore } from "@/store/modules/user";
|
||||
import { useDataStore } from "@/store/modules/data";
|
||||
const { getUser, setCurXs, getCurXs } = useUserStore();
|
||||
const { setData } = useDataStore();
|
||||
|
||||
// 菜单项数据
|
||||
const menuItems = ref([
|
||||
@ -176,26 +178,25 @@ const menuItems = ref([
|
||||
]);
|
||||
|
||||
// 通知公告数据
|
||||
const announcements = ref([
|
||||
const announcements = ref<any>([
|
||||
{
|
||||
image: "",
|
||||
title: "关于《泸州市xxxxxxxx管理办法》的通知",
|
||||
description: "为规范本市就业见习管理工作，促进高校毕业生等青年...",
|
||||
date: "2025-02-12 12:33:44",
|
||||
},
|
||||
{
|
||||
image: "",
|
||||
title: "关于《泸州市xxxxxxxx管理办法》的通知",
|
||||
description: "为规范本市就业见习管理工作，促进高校毕业生等青年...",
|
||||
date: "2025-02-12 12:33:44",
|
||||
},
|
||||
{
|
||||
image: "",
|
||||
title: "关于《泸州市xxxxxxxx管理办法》的通知",
|
||||
description: "为规范本市就业见习管理工作，促进高校毕业生等青年...",
|
||||
date: "2025-02-12 12:33:44",
|
||||
},
|
||||
]);
|
||||
"id": 2142746416,
|
||||
"createdTime": "2024-10-10 09:37:45",
|
||||
"updatedTime": "2024-10-12 15:47:44",
|
||||
"createdUserName": "管理员",
|
||||
"updatedUserName": "管理员",
|
||||
"title": "值周学生常规规范",
|
||||
"columnId": 24,
|
||||
"sort": 1,
|
||||
"description": "",
|
||||
"releaseTime": "2024-10-10 09:32:36",
|
||||
"author": "",
|
||||
"source": "",
|
||||
"content": "<p style=\"text-align: center;\"><br></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">1.值周前一周放假前清楚自己常规检查的位楼栋、楼层和班级；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">2.检查时段包括早读、大课间、下午眼保健操。</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">3.检查内容。</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px; font-family: 黑体;\"><strong>早读八看：</strong></span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑴看是否有教师值守；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑵看值守教师是否长时间玩手机；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑶看黑板上的值日课程贴是否填写；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑷看同学是否到班即读，有无疯玩打闹；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑸看课桌椅、讲桌是否整齐、整洁；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑹看红领巾佩戴(队徽)情况；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑺看教室、走廊是否有垃圾；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑻看黑板上是否书写(课件)有早读的内容和要求。</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px; font-family: 黑体;\"><strong>大课间七看：</strong></span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑴看是否认真组织室内操；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑵看室外操班级是否留有学生在教室且打闹；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑶看室内操是否安静、动用是否整齐；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑷看是否有教师值守室内操；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑸看教室、走廊地面是否有垃圾；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑹看室外操班级桌面是否收拾整洁；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑺看室外操班级是否关闭用电设备。</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px; font-family: 黑体;\"><strong>眼保健操五看：</strong></span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑴看是否按要求组织眼保健操；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑵看做操时是否关灯；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑶看是否有学生讲话、未做、未闭眼做操；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑷看教室、走廊地面是否整洁；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑸看走廊书吧是否整齐。</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">4.检查时实行蹲点检查，整个时段来回巡查。</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">5.校门口礼仪队同学要保持良好的精神状态，着装整洁，可设计个性的欢迎口号、动作、道具等，热情向师生问好；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">6.常规检查同学到班检查要佩戴好绶带，进入教室要喊“报告”。</span></p>",
|
||||
"columnName": "师、生值周工作要求",
|
||||
"pk": 2142746416
|
||||
}
|
||||
])
|
||||
|
||||
// 学生列表数据
|
||||
const studentList = ref([
|
||||
@ -214,6 +215,11 @@ let currentStudent = ref(studentList.value[0]);
|
||||
// 控制选择器显示状态
|
||||
const showSelector = ref(false);
|
||||
|
||||
let pageParams = ref({
|
||||
page: 1,
|
||||
rows: 10
|
||||
})
|
||||
|
||||
// 处理菜单点击
|
||||
function handleMenuClick(item: any) {
|
||||
console.log("点击菜单:", item.title);
|
||||
@ -243,9 +249,24 @@ function switchStudent(student: any) {
|
||||
});
|
||||
}
|
||||
|
||||
// 跳转到详情页面
|
||||
function goToDetail(notice: any) {
|
||||
setData(notice)
|
||||
uni.navigateTo({
|
||||
url: '/pages/base/home/detail'
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
studentList.value = getUser.xsList;
|
||||
currentStudent = getCurXs;
|
||||
cmsArticlePageApi(pageParams.value).then(res => {
|
||||
announcements.value = res.rows;
|
||||
})
|
||||
.catch((error) => {
|
||||
// 接口调用失败
|
||||
console.error("调用检查通知公告接口失败:", error);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
305
src/pages/base/interest-class/index - 副本.vue
Normal file
305
src/pages/base/interest-class/index - 副本.vue
Normal file
@ -0,0 +1,305 @@
|
||||
<template>
|
||||
<view class="interest-class-page">
|
||||
|
||||
<view class="content-container">
|
||||
<!-- 顶部蓝色背景横幅 -->
|
||||
<view class="banner-section">
|
||||
|
||||
<view class="banner-placeholder">
|
||||
<image src="/static/base/home/43221.png" mode="widthFix" class="w-full h-full"></image>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 我的课程 -->
|
||||
<view class="my-course-section">
|
||||
<view class="section-title">
|
||||
<u-icon name="calendar" size="18" color="#1976d2"></u-icon>
|
||||
<text class="title-text">我的课程</text>
|
||||
</view>
|
||||
|
||||
<view class="course-card">
|
||||
<view class="course-image-placeholder"></view>
|
||||
<view class="course-info">
|
||||
<text class="course-name">篮球</text>
|
||||
<view class="course-detail">
|
||||
<text class="detail-label">开课老师：</text>
|
||||
<text class="detail-value">叶老师</text>
|
||||
</view>
|
||||
<view class="course-detail">
|
||||
<text class="detail-label">上课地点：</text>
|
||||
<text class="detail-value">教学楼3楼</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 教学计划 -->
|
||||
<view class="teaching-plan-section">
|
||||
<view class="section-title-bar">
|
||||
<text class="title-text">教学计划</text>
|
||||
</view>
|
||||
|
||||
<view class="plan-content">
|
||||
<view class="plan-item">
|
||||
<text class="plan-phase">第一阶段：</text>
|
||||
<text class="plan-desc"
|
||||
>了解机器人的组成，知道每个零件的名称及用途，认识机器人的结构。</text
|
||||
>
|
||||
</view>
|
||||
|
||||
<view class="plan-item">
|
||||
<text class="plan-phase">第二阶段：</text>
|
||||
<text class="plan-desc"
|
||||
>在老师的引导下，分组搭建机器人，注意引导幼儿理解机器人的数据线连接和遥控器方向的关系。</text
|
||||
>
|
||||
</view>
|
||||
|
||||
<view class="plan-item">
|
||||
<text class="plan-phase">第三阶段：</text>
|
||||
<text class="plan-desc"
|
||||
>学会操控机器人的移动方向，并练习把魔方根据要求推到指定位置。</text
|
||||
>
|
||||
</view>
|
||||
|
||||
<view class="plan-item">
|
||||
<text class="plan-phase">第四阶段：</text>
|
||||
<text class="plan-desc">组织幼儿参加创客机器人比赛。</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 课堂随拍 -->
|
||||
<view class="class-photos-section">
|
||||
<view class="section-title-bar">
|
||||
<text class="title-text">课堂随拍</text>
|
||||
</view>
|
||||
|
||||
<view class="photos-grid">
|
||||
<view class="photo-placeholder"></view>
|
||||
<view class="photo-placeholder"></view>
|
||||
<view class="photo-placeholder"></view>
|
||||
<view class="photo-placeholder"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { xkFindDqXsApi } from "@/api/base/server";
|
||||
import { useUserStore } from "@/store/modules/user";
|
||||
const { getCurXs } = useUserStore();
|
||||
|
||||
onMounted(async () => {
|
||||
// Make onMounted async
|
||||
xkFindDqXsApi({
|
||||
xsId: getCurXs.id,
|
||||
xklxId: '962488654'
|
||||
}).then(res => {
|
||||
// 根据接口返回的result判断是否已报名
|
||||
if (res && res.resultCode === 1) {
|
||||
console.log(res)
|
||||
} else {
|
||||
// 接口调用成功但返回错误
|
||||
console.warn("检查获取当前学期兴趣课接口返回错误:", res);
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
// 接口调用失败
|
||||
console.error("调用获取当前学期兴趣课接口失败:", error);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.interest-class-page {
|
||||
background-color: #f8f8f8;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.content-container {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
/* 顶部蓝色背景横幅 */
|
||||
.banner-section {
|
||||
margin-bottom: 15px;
|
||||
|
||||
.banner-placeholder {
|
||||
height: 120px;
|
||||
background-color: #3986ff;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.banner-content {
|
||||
text-align: center;
|
||||
|
||||
.banner-title {
|
||||
font-size: 22px;
|
||||
color: #ffffff;
|
||||
font-weight: 500;
|
||||
margin-bottom: 8px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.banner-school {
|
||||
font-size: 14px;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 我的课程 */
|
||||
.my-course-section {
|
||||
margin-bottom: 15px;
|
||||
|
||||
.section-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
|
||||
.title-text {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #303133;
|
||||
margin-left: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.course-card {
|
||||
background-color: #ffffff;
|
||||
border-radius: 10px;
|
||||
padding: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.course-image-placeholder {
|
||||
width: 120px;
|
||||
height: 100px;
|
||||
background-color: #f0f0f0;
|
||||
border-radius: 6px;
|
||||
margin-right: 15px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.course-info {
|
||||
flex: 1;
|
||||
|
||||
.course-name {
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
color: #303133;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.course-detail {
|
||||
display: flex;
|
||||
margin-bottom: 6px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.detail-label {
|
||||
color: #606266;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.detail-value {
|
||||
color: #303133;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 教学计划 */
|
||||
.teaching-plan-section {
|
||||
margin-bottom: 15px;
|
||||
background-color: #ffffff;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
|
||||
.section-title-bar {
|
||||
padding: 12px 15px;
|
||||
border-bottom: 1px solid #f2f2f2;
|
||||
|
||||
.title-text {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #303133;
|
||||
}
|
||||
}
|
||||
|
||||
.plan-content {
|
||||
padding: 15px;
|
||||
|
||||
.plan-item {
|
||||
margin-bottom: 15px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.plan-phase {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.plan-desc {
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 课堂随拍 */
|
||||
.class-photos-section {
|
||||
background-color: #ffffff;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
|
||||
.section-title-bar {
|
||||
padding: 12px 15px;
|
||||
border-bottom: 1px solid #f2f2f2;
|
||||
|
||||
.title-text {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #303133;
|
||||
}
|
||||
}
|
||||
|
||||
.photos-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 15px;
|
||||
|
||||
.photo-placeholder {
|
||||
width: calc(50% - 8px);
|
||||
height: 110px;
|
||||
background-color: #f0f0f0;
|
||||
border-radius: 6px;
|
||||
margin-right: 8px;
|
||||
margin-bottom: 8px;
|
||||
|
||||
&:nth-child(2n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&:nth-child(3),
|
||||
&:nth-child(4) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,282 +1,676 @@
|
||||
<template>
|
||||
<view class="interest-class-page">
|
||||
|
||||
<view class="content-container">
|
||||
<!-- 顶部蓝色背景横幅 -->
|
||||
<view class="banner-section">
|
||||
|
||||
<view class="banner-placeholder">
|
||||
<image src="/static/base/home/43221.png" mode="widthFix" class="w-full h-full"></image>
|
||||
<view class="interest-course">
|
||||
<!-- 选课信息头部 - 固定部分 -->
|
||||
<view class="selection-header">
|
||||
<view class="header-content">
|
||||
<view class="title-section">
|
||||
<view class="title">
|
||||
<text v-if="xkData && xkData.xkmc">{{ xkData.xkmc }}</text>
|
||||
<text v-else>选课信息</text>
|
||||
</view>
|
||||
<!-- <view class="subtitle">互动兴趣课程</view> -->
|
||||
</view>
|
||||
|
||||
<!-- 我的课程 -->
|
||||
<view class="my-course-section">
|
||||
<view class="section-title">
|
||||
<u-icon name="calendar" size="18" color="#1976d2"></u-icon>
|
||||
<text class="title-text">我的课程</text>
|
||||
<!-- 学生选择部分 -->
|
||||
<view class="student-selector-bar" @click="showStudentSelector">
|
||||
<view class="user-avatar">
|
||||
<image
|
||||
:src="currentStudent.avatar || '/static/base/home/11222.png'"
|
||||
class="w-full h-full"
|
||||
></image>
|
||||
</view>
|
||||
|
||||
<view class="course-card">
|
||||
<view class="course-image-placeholder"></view>
|
||||
<view class="course-info">
|
||||
<text class="course-name">篮球</text>
|
||||
<view class="course-detail">
|
||||
<text class="detail-label">开课老师：</text>
|
||||
<text class="detail-value">叶老师</text>
|
||||
</view>
|
||||
<view class="course-detail">
|
||||
<text class="detail-label">上课地点：</text>
|
||||
<text class="detail-value">教学楼3楼</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 教学计划 -->
|
||||
<view class="teaching-plan-section">
|
||||
<view class="section-title-bar">
|
||||
<text class="title-text">教学计划</text>
|
||||
</view>
|
||||
|
||||
<view class="plan-content">
|
||||
<view class="plan-item">
|
||||
<text class="plan-phase">第一阶段：</text>
|
||||
<text class="plan-desc"
|
||||
>了解机器人的组成，知道每个零件的名称及用途，认识机器人的结构。</text
|
||||
<view class="student-info">
|
||||
<text class="student-name">{{ currentStudent.xm }}</text>
|
||||
<text class="student-class"
|
||||
>{{ currentStudent.njmc }} {{ currentStudent.bjmc }}</text
|
||||
>
|
||||
</view>
|
||||
<view class="switch-btn" v-if="studentList.length > 1">切换</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="plan-item">
|
||||
<text class="plan-phase">第二阶段：</text>
|
||||
<text class="plan-desc"
|
||||
>在老师的引导下，分组搭建机器人，注意引导幼儿理解机器人的数据线连接和遥控器方向的关系。</text
|
||||
<!-- 可滚动的内容区域 -->
|
||||
<view class="scrollable-content">
|
||||
<!-- 课程网格列表 -->
|
||||
<view class="course-grid" v-if="courseListData.length > 0">
|
||||
<view
|
||||
v-for="(course, index) in courseListData"
|
||||
:key="course.id || index"
|
||||
class="course-item"
|
||||
:class="{ selected: course.isSelected }"
|
||||
>
|
||||
<view class="course-name">{{ course.kcmc }}</view>
|
||||
<view class="register-info">
|
||||
<text>上课人数：</text>
|
||||
<text class="register-count">{{ course.ybmr }}</text>
|
||||
</view>
|
||||
<view class="detail-btn" @click.stop="viewCourseDetail(course)"
|
||||
>详情</view
|
||||
>
|
||||
<view v-if="course.isSelected" class="selected-mark">
|
||||
<uni-icons
|
||||
type="checkbox-filled"
|
||||
color="#3FBF72"
|
||||
size="22"
|
||||
></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 暂无数据提示 -->
|
||||
<view v-else class="empty-course-list">
|
||||
<view class="empty-icon">
|
||||
<u-icon name="list" size="50" color="#C8C9CC"></u-icon>
|
||||
</view>
|
||||
<view class="empty-text">暂无课程数据</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view>
|
||||
<!-- 学生选择弹窗 -->
|
||||
<u-popup
|
||||
:show="showSelector"
|
||||
@close="showSelector = false"
|
||||
mode="bottom"
|
||||
round="10"
|
||||
>
|
||||
<view class="student-selector">
|
||||
<view class="selector-header">
|
||||
<text class="selector-title">选择学生</text>
|
||||
<u-icon
|
||||
name="close"
|
||||
size="20"
|
||||
@click="showSelector = false"
|
||||
></u-icon>
|
||||
</view>
|
||||
<view class="student-list">
|
||||
<view
|
||||
v-for="(student, index) in studentList"
|
||||
:key="index"
|
||||
class="student-item"
|
||||
:class="{
|
||||
'student-item-active': currentStudent.id === student.id,
|
||||
}"
|
||||
@click="switchStudent(student)"
|
||||
>
|
||||
<view class="student-avatar">
|
||||
<image
|
||||
:src="student.avatar || '/static/base/home/11222.png'"
|
||||
class="w-full h-full"
|
||||
></image>
|
||||
</view>
|
||||
<view class="student-info">
|
||||
<text class="student-name">{{ student.xm }}</text>
|
||||
<text class="student-class"
|
||||
>{{ student.njmc }} {{ student.bjmc }}</text
|
||||
>
|
||||
</view>
|
||||
|
||||
<view class="plan-item">
|
||||
<text class="plan-phase">第三阶段：</text>
|
||||
<text class="plan-desc"
|
||||
>学会操控机器人的移动方向，并练习把魔方根据要求推到指定位置。</text
|
||||
>
|
||||
</view>
|
||||
|
||||
<view class="plan-item">
|
||||
<text class="plan-phase">第四阶段：</text>
|
||||
<text class="plan-desc">组织幼儿参加创客机器人比赛。</text>
|
||||
<u-icon
|
||||
v-if="currentStudent.id === student.id"
|
||||
name="checkmark"
|
||||
color="#409EFF"
|
||||
size="20"
|
||||
></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 课堂随拍 -->
|
||||
<view class="class-photos-section">
|
||||
<view class="section-title-bar">
|
||||
<text class="title-text">课堂随拍</text>
|
||||
</view>
|
||||
|
||||
<view class="photos-grid">
|
||||
<view class="photo-placeholder"></view>
|
||||
<view class="photo-placeholder"></view>
|
||||
<view class="photo-placeholder"></view>
|
||||
<view class="photo-placeholder"></view>
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { navigateTo } from "@/utils/uniapp";
|
||||
import {
|
||||
ref,
|
||||
computed,
|
||||
reactive,
|
||||
onBeforeUnmount,
|
||||
watch,
|
||||
onMounted,
|
||||
} from "vue";
|
||||
import { useUserStore } from "@/store/modules/user";
|
||||
import { useDataStore } from "@/store/modules/data";
|
||||
import { xkListApi, xsXkListApi } from "@/api/base/server";
|
||||
import dayjs from "dayjs";
|
||||
|
||||
const { getUser } = useUserStore();
|
||||
const { getData, setKcData, setData } = useDataStore();
|
||||
const { sign_file } = getData;
|
||||
|
||||
// 学生列表数据
|
||||
const studentList = computed(() => {
|
||||
return getUser.xsList;
|
||||
});
|
||||
|
||||
const currentStudent = ref();
|
||||
|
||||
// 控制选择器显示状态
|
||||
const showSelector = ref(false);
|
||||
|
||||
if (studentList.value.length > 1) {
|
||||
showSelector.value = true;
|
||||
}
|
||||
|
||||
const xkData = ref();
|
||||
const kcStatus = ref(false);
|
||||
|
||||
// 添加选课是否已结束的标记
|
||||
const isEnrollmentEnded = ref(false);
|
||||
|
||||
// 添加轮询定时器变量
|
||||
let pollTimer: number | null = null;
|
||||
|
||||
const courseInfo = ref({});
|
||||
|
||||
// 更新课程报名人数
|
||||
const updateEnrollmentCount = (
|
||||
data: Array<{ xkkcId: string; bmrs: number }>
|
||||
) => {
|
||||
if (!Array.isArray(courseListData.value) || courseListData.value.length === 0)
|
||||
return;
|
||||
|
||||
let hasUpdates = false;
|
||||
|
||||
courseListData.value.forEach((course) => {
|
||||
const newCount = data.find((item) => item.xkkcId === course.id);
|
||||
if (newCount && course.ybmr !== newCount.bmrs) {
|
||||
course.ybmr = newCount.bmrs;
|
||||
hasUpdates = true;
|
||||
}
|
||||
});
|
||||
|
||||
// 如果有更新，强制重新渲染列表
|
||||
if (hasUpdates) {
|
||||
courseListData.value = [...courseListData.value];
|
||||
}
|
||||
};
|
||||
|
||||
// 在组件挂载时开始轮询
|
||||
onMounted(() => {
|
||||
|
||||
});
|
||||
|
||||
// 加载课程列表
|
||||
const loadCourseList = (currentStudent: any) => {
|
||||
if (!currentStudent) {
|
||||
uni.hideLoading();
|
||||
return;
|
||||
}
|
||||
|
||||
xsXkListApi({
|
||||
xsId: currentStudent.id,
|
||||
njId: currentStudent.njId,
|
||||
xklxId: "962488654",
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.resultCode == 1) {
|
||||
if (res.result && res.result.length) {
|
||||
xkData.value = res.result[0];
|
||||
} else {
|
||||
xkData.value = [];
|
||||
}
|
||||
uni.hideLoading();
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
uni.hideLoading();
|
||||
});
|
||||
};
|
||||
|
||||
if (studentList.value.length > 0 && studentList.value.length === 1) {
|
||||
currentStudent.value = studentList.value[0];
|
||||
// 先加载课程列表，不立即检查报名状态
|
||||
uni.showLoading({
|
||||
title: "加载中...",
|
||||
});
|
||||
loadCourseList(currentStudent.value);
|
||||
}
|
||||
|
||||
// 显示学生选择器
|
||||
function showStudentSelector() {
|
||||
if (studentList.value.length > 1) {
|
||||
showSelector.value = true;
|
||||
}
|
||||
}
|
||||
|
||||
// 切换学生
|
||||
function switchStudent(student: any) {
|
||||
currentStudent.value = student;
|
||||
showSelector.value = false;
|
||||
|
||||
// 显示加载中
|
||||
uni.showLoading({
|
||||
title: "加载中...",
|
||||
});
|
||||
|
||||
// 显示切换成功提示
|
||||
uni.showToast({
|
||||
title: `已切换到${student.xm}`,
|
||||
icon: "none",
|
||||
});
|
||||
|
||||
// 先加载当前学生的课程列表，课程数据加载完成后会自动检查报名状态
|
||||
loadCourseList(student);
|
||||
}
|
||||
|
||||
// 从课程数据中提取课程列表
|
||||
const displayCourseList = computed(() => {
|
||||
if (
|
||||
!xkData.value ||
|
||||
!xkData.value.xkkcs ||
|
||||
!Array.isArray(xkData.value.xkkcs)
|
||||
) {
|
||||
return [];
|
||||
}
|
||||
|
||||
// 获取本地存储的已选课程ID
|
||||
const selectedCourseId = uni.getStorageSync("selectedCourseId");
|
||||
|
||||
// 为课程添加选中状态属性
|
||||
return xkData.value.xkkcs.map((course: any) => ({
|
||||
...course,
|
||||
isSelected: selectedCourseId && course.id === selectedCourseId,
|
||||
}));
|
||||
});
|
||||
|
||||
// 可修改的课程列表数据
|
||||
const courseListData = ref<any[]>([]);
|
||||
|
||||
// 监听计算属性变化，更新可修改的数据
|
||||
watch(
|
||||
displayCourseList,
|
||||
(newVal) => {
|
||||
courseListData.value = JSON.parse(JSON.stringify(newVal));
|
||||
|
||||
// 初始化时，将已选课程的全部信息存入courseInfo
|
||||
const selectedCourseId = uni.getStorageSync("selectedCourseId");
|
||||
if (selectedCourseId) {
|
||||
const selectedCourse = newVal.find(
|
||||
(course: any) => course.id === selectedCourseId
|
||||
);
|
||||
if (selectedCourse) {
|
||||
courseInfo.value = selectedCourse;
|
||||
}
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
// 查看课程详情
|
||||
const viewCourseDetail = (course: any) => {
|
||||
setKcData(course);
|
||||
uni.navigateTo({
|
||||
url: `/pages/base/course-selection/detail`,
|
||||
});
|
||||
};
|
||||
|
||||
// 页面卸载前清除定时器
|
||||
onBeforeUnmount(() => {
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.interest-class-page {
|
||||
background-color: #f8f8f8;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.content-container {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
/* 顶部蓝色背景横幅 */
|
||||
.banner-section {
|
||||
margin-bottom: 15px;
|
||||
|
||||
.banner-placeholder {
|
||||
height: 120px;
|
||||
background-color: #3986ff;
|
||||
border-radius: 10px;
|
||||
.interest-course {
|
||||
min-height: 100%;
|
||||
background-color: #f5f7fa;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.nav-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 15px;
|
||||
height: 44px;
|
||||
background-color: #fff;
|
||||
|
||||
.nav-left {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.nav-right {
|
||||
width: 40px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
.selection-header {
|
||||
background: linear-gradient(135deg, #4a90e2, #2879ff);
|
||||
padding: 20px 15px;
|
||||
color: #fff;
|
||||
border-radius: 0 0 15px 15px;
|
||||
box-shadow: 0 4px 12px rgba(40, 121, 255, 0.2);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 10;
|
||||
|
||||
.header-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
|
||||
.title-section {
|
||||
.title {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 14px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
// 学生选择栏样式
|
||||
.student-selector-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
|
||||
.user-avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background-color: #fff;
|
||||
overflow: hidden;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.student-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.student-name {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.student-class {
|
||||
font-size: 12px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
.switch-btn {
|
||||
padding: 4px 12px;
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
color: #fff;
|
||||
border-radius: 20px;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
.countdown-section {
|
||||
.countdown-title {
|
||||
font-size: 14px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.countdown-timer {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.banner-content {
|
||||
.time-block {
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 6px;
|
||||
min-width: 40px;
|
||||
padding: 5px 8px;
|
||||
text-align: center;
|
||||
|
||||
.banner-title {
|
||||
font-size: 22px;
|
||||
color: #ffffff;
|
||||
font-weight: 500;
|
||||
margin-bottom: 8px;
|
||||
.time-value {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.banner-school {
|
||||
font-size: 14px;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
.time-unit {
|
||||
font-size: 12px;
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
|
||||
.time-separator {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
margin: 0 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 我的课程 */
|
||||
.my-course-section {
|
||||
margin-bottom: 15px;
|
||||
|
||||
.section-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
|
||||
.title-text {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #303133;
|
||||
margin-left: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.course-card {
|
||||
background-color: #ffffff;
|
||||
border-radius: 10px;
|
||||
padding: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.course-image-placeholder {
|
||||
width: 120px;
|
||||
height: 100px;
|
||||
background-color: #f0f0f0;
|
||||
border-radius: 6px;
|
||||
margin-right: 15px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.course-info {
|
||||
// 可滚动内容区域样式
|
||||
.scrollable-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch; // 增强iOS滚动体验
|
||||
}
|
||||
|
||||
.course-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 15px 15px 0 15px;
|
||||
|
||||
.course-item {
|
||||
position: relative;
|
||||
width: calc(50% - 10px);
|
||||
margin-bottom: 15px;
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
padding: 15px;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid transparent;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:nth-child(odd) {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
&:nth-child(even) {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
border: 1px solid #3fbf72;
|
||||
background-color: rgba(63, 191, 114, 0.05);
|
||||
box-shadow: 0 2px 8px rgba(63, 191, 114, 0.15);
|
||||
}
|
||||
|
||||
.course-name {
|
||||
font-size: 18px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #303133;
|
||||
color: #333;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.course-detail {
|
||||
display: flex;
|
||||
margin-bottom: 6px;
|
||||
.register-info {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
margin-bottom: 12px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
.register-count {
|
||||
color: #2879ff;
|
||||
}
|
||||
}
|
||||
|
||||
.detail-label {
|
||||
color: #606266;
|
||||
.detail-btn {
|
||||
display: inline-block;
|
||||
color: #2879ff;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.detail-value {
|
||||
color: #303133;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
.selected-mark {
|
||||
position: absolute;
|
||||
top: -6px;
|
||||
right: -6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 教学计划 */
|
||||
.teaching-plan-section {
|
||||
margin-bottom: 15px;
|
||||
.register-btn-container {
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 15px;
|
||||
background-color: #fff;
|
||||
z-index: 10;
|
||||
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
|
||||
|
||||
.register-btn {
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
text-align: center;
|
||||
background-color: #2879ff;
|
||||
color: #fff;
|
||||
border-radius: 25px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
/* 学生选择器弹窗样式 */
|
||||
.student-selector {
|
||||
background-color: #ffffff;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
border-top-left-radius: 12px;
|
||||
border-top-right-radius: 12px;
|
||||
padding-bottom: 20px;
|
||||
|
||||
.section-title-bar {
|
||||
padding: 12px 15px;
|
||||
.selector-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 15px;
|
||||
border-bottom: 1px solid #f2f2f2;
|
||||
|
||||
.title-text {
|
||||
.selector-title {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #303133;
|
||||
}
|
||||
}
|
||||
|
||||
.plan-content {
|
||||
padding: 15px;
|
||||
.student-list {
|
||||
padding: 0 15px;
|
||||
|
||||
.plan-item {
|
||||
margin-bottom: 15px;
|
||||
.student-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 15px 0;
|
||||
border-bottom: 1px solid #f2f2f2;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.plan-phase {
|
||||
&-active {
|
||||
background-color: rgba(64, 158, 255, 0.05);
|
||||
}
|
||||
|
||||
.student-avatar {
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
border-radius: 50%;
|
||||
background-color: #f0f0f0;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.student-info {
|
||||
flex: 1;
|
||||
margin-left: 12px;
|
||||
|
||||
.student-name {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
color: #303133;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.plan-desc {
|
||||
font-size: 14px;
|
||||
.student-class {
|
||||
font-size: 13px;
|
||||
color: #606266;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 全局图片样式 */
|
||||
.w-full {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.h-full {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
// 暂无数据样式
|
||||
.empty-course-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 60px 20px;
|
||||
text-align: center;
|
||||
|
||||
.empty-icon {
|
||||
margin-bottom: 20px;
|
||||
background-color: #f5f6f7;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
color: #303133;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.empty-desc {
|
||||
font-size: 14px;
|
||||
color: #909399;
|
||||
max-width: 80%;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 课堂随拍 */
|
||||
.class-photos-section {
|
||||
background-color: #ffffff;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
|
||||
.section-title-bar {
|
||||
/* 选课已结束样式 */
|
||||
.enrollment-ended {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 8px;
|
||||
padding: 12px 15px;
|
||||
border-bottom: 1px solid #f2f2f2;
|
||||
|
||||
.title-text {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #303133;
|
||||
}
|
||||
}
|
||||
|
||||
.photos-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 15px;
|
||||
|
||||
.photo-placeholder {
|
||||
width: calc(50% - 8px);
|
||||
height: 110px;
|
||||
background-color: #f0f0f0;
|
||||
border-radius: 6px;
|
||||
margin-right: 8px;
|
||||
margin-bottom: 8px;
|
||||
|
||||
&:nth-child(2n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&:nth-child(3),
|
||||
&:nth-child(4) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
color: #fff;
|
||||
gap: 8px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user