|
|
|
@ -1,20 +1,14 @@
|
|
|
|
|
<template>
|
|
|
|
|
<view class="container">
|
|
|
|
|
<!-- 页面内容 -->
|
|
|
|
|
<h3 >
|
|
|
|
|
上课
|
|
|
|
|
</h3>
|
|
|
|
|
<view v-if="kctivityAndPPT.length > 0">
|
|
|
|
|
<view class="page-content" v-if="kctivityAndPPT.length > 0">
|
|
|
|
|
<H4>课堂活动与 PPT 列表</H4>
|
|
|
|
|
<ul>
|
|
|
|
|
<li v-for="item in kctivityAndPPT" :key="item.id">
|
|
|
|
|
展示:课程活动
|
|
|
|
|
<li v-for="(item,index) in kctivityAndPPT" :key="item.id">
|
|
|
|
|
<view v-if="item.lx == 'ppt'">
|
|
|
|
|
<view class="content" >
|
|
|
|
|
<image
|
|
|
|
|
:src="item.src"
|
|
|
|
|
mode="aspectFit"
|
|
|
|
|
/>
|
|
|
|
|
<view class="content-ppt">
|
|
|
|
|
<view class="page-number">第{{ currentPage }}页</view>
|
|
|
|
|
<image :src="item.src" mode="aspectFit" />
|
|
|
|
|
</view>
|
|
|
|
|
<view class="footer">
|
|
|
|
|
<text class="time">{{ moment(item.time).fromNow() }}</text>
|
|
|
|
@ -22,32 +16,34 @@
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view v-else-if="item.lx == 'activity'">
|
|
|
|
|
<view class="activity-item" :style="{backgroundColor:item.color}">
|
|
|
|
|
<view class="content" :style="{backgroundColor:item.color}">
|
|
|
|
|
<view class="activity-item" :style="{ backgroundColor: !finish.includes(item.id) ? item.color : '#666' }">
|
|
|
|
|
<view class="content" :style="{ backgroundColor: !finish.includes(item.id) ? item.color : '#666' }">
|
|
|
|
|
<view class="title">{{ item.showname }}</view>
|
|
|
|
|
<view class="subtitle">{{ item.title }}</view>
|
|
|
|
|
</view>
|
|
|
|
|
<image class="icon" src="/src/static/student-course/course-active.png" mode="aspectFit"></image>
|
|
|
|
|
<image class="icon" src="/static/student-course/course-active.png" mode="aspectFit"></image>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="footer">
|
|
|
|
|
<text class="time">{{ moment(item.time).fromNow() }}</text>
|
|
|
|
|
<text class="status">已完成</text>
|
|
|
|
|
</view>
|
|
|
|
|
<!-- <view :style="{backgroundColor:item.color,width:'90vw',height:'70px'}">
|
|
|
|
|
<view :style="{fontSize:'30px'}">
|
|
|
|
|
<text :style="{color:'white'}">{{item.name}}</text>
|
|
|
|
|
</view>
|
|
|
|
|
<view :style="{fontSize:'15px'}">
|
|
|
|
|
<text :style="{color:'white'}">{{item.title}}</text>
|
|
|
|
|
<text class="status">{{ finish.includes(item.id) ? '已完成' : '' }}</text>
|
|
|
|
|
</view>
|
|
|
|
|
</view> -->
|
|
|
|
|
</view>
|
|
|
|
|
<view v-else-if="item.lx == 'notice'">
|
|
|
|
|
|
|
|
|
|
<view class="notice-view">
|
|
|
|
|
<text>{{ item.wb }}</text>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view v-if="index!==kctivityAndPPT.length - 1">
|
|
|
|
|
<uv-divider
|
|
|
|
|
|
|
|
|
|
text="没有更多了"
|
|
|
|
|
:dashed="true"
|
|
|
|
|
:hairline="false"
|
|
|
|
|
text-position="center"
|
|
|
|
|
line-color="#e4e7ed"
|
|
|
|
|
text-color="#909399"
|
|
|
|
|
/>
|
|
|
|
|
</view>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</view>
|
|
|
|
@ -61,18 +57,18 @@
|
|
|
|
|
<script setup>
|
|
|
|
|
import { onMounted, onUnmounted } from 'vue'
|
|
|
|
|
import moment from "moment/min/moment-with-locales";
|
|
|
|
|
|
|
|
|
|
import io from '@hyoga/uni-socket.io'
|
|
|
|
|
import { ref } from 'vue'
|
|
|
|
|
import { onLoad } from "@dcloudio/uni-app";
|
|
|
|
|
|
|
|
|
|
import uvDivider from '@/pages/shangke/fgx.vue';
|
|
|
|
|
// 课堂活动and PPT
|
|
|
|
|
const kctivityAndPPT = ref([{id:0,lx:'notice',wb:'上课了'},
|
|
|
|
|
{lx:'ppt',id:1,name:'PPT展示1',src:'https://img11.360buyimg.com/n1/s720x720_jfs/t1/303510/33/1806/82651/6815a7a6F2e5d77b6/08d231a86927b0ce.jpg',time:'2025-05-06T19:54:43+08:00'},
|
|
|
|
|
const kctivityAndPPT = ref([
|
|
|
|
|
{ id: 0, lx: 'notice', wb: '上课了' },
|
|
|
|
|
{ lx: 'ppt', id: 1, name: 'PPT展示1', src: '/static/course-image/ppt1.png', time: '2025-05-06T19:54:43+08:00' },
|
|
|
|
|
{ lx: 'activity', id: 2, name: '课堂活动1', lxA: '讨论', color: 'green', showname: '课程讨论', title: '历史为什么选择了中国共产党', time: '2025-05-06T19:54:43+08:00' }
|
|
|
|
|
])
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const finish = ref([1])
|
|
|
|
|
const currentPage = ref(1)
|
|
|
|
|
|
|
|
|
|
// 定义 socket 变量
|
|
|
|
|
let socket
|
|
|
|
@ -140,6 +136,11 @@
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style scoped>
|
|
|
|
|
.page-content{
|
|
|
|
|
/* margin-top: 20rpx; */
|
|
|
|
|
padding: auto;
|
|
|
|
|
background-color: #c0c0c0;
|
|
|
|
|
}
|
|
|
|
|
.container {
|
|
|
|
|
padding: 20rpx;
|
|
|
|
|
}
|
|
|
|
@ -147,14 +148,37 @@
|
|
|
|
|
.classactivetitle {
|
|
|
|
|
font-size: 32rpx;
|
|
|
|
|
}
|
|
|
|
|
.content-ppt {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: auto;
|
|
|
|
|
border: 1px solid #4e01f5;
|
|
|
|
|
padding: 10rpx;
|
|
|
|
|
background-color: #ffffff;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center; /* 水平居中 */
|
|
|
|
|
align-items: center; /* 垂直居中 */
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
|
|
|
|
.activity-item {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
padding: 10px;
|
|
|
|
|
border: 1px solid #080808;
|
|
|
|
|
padding: 6rpx;
|
|
|
|
|
border: 1px solid #000000;
|
|
|
|
|
background-color: #c5c3c3;
|
|
|
|
|
width: 90vw;
|
|
|
|
|
width: 93rvw;
|
|
|
|
|
}
|
|
|
|
|
.page-number {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 10px;
|
|
|
|
|
right: 10px;
|
|
|
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
|
|
|
color: white;
|
|
|
|
|
padding: 5px 10px;
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
z-index: 10;
|
|
|
|
|
}
|
|
|
|
|
.content {
|
|
|
|
|
flex: 1;
|
|
|
|
@ -162,19 +186,24 @@
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
padding: 10px;
|
|
|
|
|
align-self: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.icon {
|
|
|
|
|
width: 50px;
|
|
|
|
|
height: 50px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.title {
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
color: white;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.subtitle {
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
color: white;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.footer {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
@ -190,12 +219,14 @@
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
color: #666;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.notice-view {
|
|
|
|
|
color:white;
|
|
|
|
|
display: flex;
|
|
|
|
|
background-color: #666;
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
|
|
justify-content: center; /* 水平居中 */
|
|
|
|
|
align-items: center; /* 垂直居中 */
|
|
|
|
|
background-color: #d3d3d3;
|
|
|
|
|
height: 23px; /* 可根据需求调整高度 */
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
color: #333; /* 可根据需求调整字体大小 */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
</style>
|
|
|
|
|