3 changed files with 464 additions and 330 deletions
@ -1,196 +1,238 @@ |
|||
<template> |
|||
<view class="class-arrange-root"> |
|||
<!-- 顶部日期选择 --> |
|||
<view class="date-bar"> |
|||
<view class="date-item" v-for="(item, idx) in weekList" :key="idx" :class="{active: idx === selectedDayIndex}"> |
|||
<view class="week">{{ item.week }}</view> |
|||
<view class="day">{{ item.day }}</view> |
|||
</view> |
|||
</view> |
|||
<!-- "查看更多"按钮移到日期条下方 --> |
|||
<view class="more-bar-wrapper"> |
|||
<view class="more-bar" @click="openCalendar"> |
|||
<text>查看更多</text> |
|||
<uni-icons type="arrowdown" size="18" color="#bdbdbd" /> |
|||
</view> |
|||
</view> |
|||
<!-- 日历底部弹窗 --> |
|||
<uni-popup ref="calendarPopup" type="bottom"> |
|||
<uni-calendar @confirm="onCalendarConfirm" @close="closeCalendar" /> |
|||
</uni-popup> |
|||
|
|||
<!-- 课程卡片列表 --> |
|||
<view class="course-list"> |
|||
<view class="course-card" v-for="(course, idx) in courseList" :key="idx"> |
|||
<view class="card-header"> |
|||
<view class="status-end">已结束</view> |
|||
</view> |
|||
<view class="card-body"> |
|||
<view class="row">时间：{{ course.date }}</view> |
|||
<view class="row">教室：{{ course.classroom }}</view> |
|||
<view class="row">课程：{{ course.name }}</view> |
|||
<view class="row">人数：{{ course.count }}</view> |
|||
</view> |
|||
<view class="card-footer"> |
|||
<view class="sign-info">已签到学生 (0/{{ course.count }})</view> |
|||
<button class="detail-btn" @click="viewDetail(course)">详情</button> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="class-arrange-root"> |
|||
<!-- 顶部日期选择 --> |
|||
<view class="date-bar"> |
|||
<view class="date-item" v-for="(item, idx) in weekList" :key="idx" :class="{active: item.status}" @click="getDate(item.date,item.day)"> |
|||
<view class="week">{{ item.week }}</view> |
|||
<view class="day">{{ item.day }}</view> |
|||
</view> |
|||
</view> |
|||
<!-- "查看更多"按钮移到日期条下方 --> |
|||
<view class="more-bar-wrapper"> |
|||
<view class="more-bar" @click="openCalendar"> |
|||
<text>查看更多</text> |
|||
<uni-icons type="arrowdown" size="18" color="#bdbdbd" /> |
|||
</view> |
|||
</view> |
|||
<!-- 日历底部弹窗 --> |
|||
<uni-popup ref="calendarPopup" type="bottom"> |
|||
<uni-calendar @change="onCalendarChange" /> |
|||
</uni-popup> |
|||
|
|||
<!-- 课程卡片列表 --> |
|||
<view class="course-list"> |
|||
<view class="course-card" v-for="(course, idx) in courseList" :key="idx"> |
|||
<view class="card-header"> |
|||
<view class="status-end">{{ getStatusText(course.status) }}</view> |
|||
</view> |
|||
<view class="card-body"> |
|||
<view class="row">时间：{{ course.course_date }}</view> |
|||
<view class="row">教室：{{ course.venue.venue_name }}</view> |
|||
<view class="row">课程：{{ course.course.course_name }}</view> |
|||
<view class="row">人数：{{ course.available_capacity }}</view> |
|||
</view> |
|||
<view class="card-footer"> |
|||
<view class="sign-info"></view> |
|||
<button class="detail-btn" @click="viewDetail(course)">详情</button> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
weekList: [ |
|||
{ week: '星期一', day: 11 }, |
|||
{ week: '星期二', day: 12 }, |
|||
{ week: '星期三', day: 13 }, |
|||
{ week: '星期四', day: 14 }, |
|||
{ week: '星期五', day: 15 }, |
|||
{ week: '星期六', day: 16 }, |
|||
{ week: '星期日', day: 17 }, |
|||
], |
|||
selectedDayIndex: 4, |
|||
courseList: [ |
|||
{ |
|||
date: '2025-06-15', |
|||
classroom: '时间范围教室', |
|||
name: '大课7+1类型', |
|||
count: 10, |
|||
}, |
|||
{ |
|||
date: '2025-06-15', |
|||
classroom: '时间范围教室', |
|||
name: '大课5+1', |
|||
count: 10, |
|||
}, |
|||
], |
|||
}; |
|||
}, |
|||
methods: { |
|||
openCalendar() { |
|||
this.$refs.calendarPopup.open(); |
|||
}, |
|||
closeCalendar() { |
|||
this.$refs.calendarPopup.close(); |
|||
}, |
|||
viewDetail(course) { |
|||
// 跳转到课程详情页 |
|||
this.$navigateTo({ |
|||
url: '/pages/market/clue/class_arrangement_detail?date=' + course.date |
|||
}); |
|||
}, |
|||
onCalendarConfirm(e) { |
|||
this.closeCalendar(); |
|||
// 这里可以处理选中的日期 e.fulldate |
|||
uni.showToast({ title: '选择日期：' + e.fulldate, icon: 'none' }); |
|||
}, |
|||
}, |
|||
}; |
|||
import apiRoute from '@/api/apiRoute.js'; |
|||
export default { |
|||
data() { |
|||
return { |
|||
weekList: [], |
|||
selectedDayIndex: 4, |
|||
date: '', |
|||
courseList: [], |
|||
resource_id:'' |
|||
}; |
|||
}, |
|||
onLoad(options) { |
|||
this.resource_id = options.resource_id |
|||
this.getDate(); |
|||
|
|||
}, |
|||
methods: { |
|||
async getDate(date = '', day = '') { |
|||
try { |
|||
let res = await apiRoute.getDate({ |
|||
'date': date, |
|||
'day': day |
|||
}) |
|||
this.weekList = res.data.dates |
|||
this.date = res.data.date |
|||
|
|||
let data = await apiRoute.courseAllList({ |
|||
'schedule_date': this.date |
|||
}) |
|||
this.courseList = data.data |
|||
|
|||
|
|||
} catch (error) { |
|||
console.error('获取信息失败:', error); |
|||
} |
|||
}, |
|||
openCalendar() { |
|||
this.$refs.calendarPopup.open(); |
|||
}, |
|||
closeCalendar() { |
|||
console.log(123123) |
|||
this.$refs.calendarPopup.close(); |
|||
}, |
|||
viewDetail(course) { |
|||
// 跳转到课程详情页 |
|||
this.$navigateTo({ |
|||
url: '/pages/market/clue/class_arrangement_detail?id=' + course.id+'&resource_id='+this.resource_id |
|||
}); |
|||
}, |
|||
onCalendarConfirm(e) { |
|||
|
|||
// 这里可以处理选中的日期 e.fulldate |
|||
uni.showToast({ |
|||
title: '选择日期：' + e.fulldate, |
|||
icon: 'none' |
|||
}); |
|||
|
|||
this.closeCalendar(); |
|||
}, |
|||
onCalendarChange(e) { |
|||
this.getDate(e.fulldate, e.date); |
|||
this.closeCalendar(); |
|||
}, |
|||
getStatusText(status) { |
|||
const statusMap = { |
|||
pending: '待开始', |
|||
upcoming: '即将开始', |
|||
ongoing: '进行中', |
|||
completed: '已结束' |
|||
}; |
|||
return statusMap[status] || status; |
|||
} |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.class-arrange-root { |
|||
background: #232323; |
|||
min-height: 100vh; |
|||
padding-bottom: 30rpx; |
|||
} |
|||
.date-bar { |
|||
display: flex; |
|||
align-items: center; |
|||
background: #232323; |
|||
padding: 0 0 10rpx 0; |
|||
overflow-x: auto; |
|||
border-bottom: 1px solid #333; |
|||
.date-item { |
|||
flex: 1; |
|||
text-align: center; |
|||
color: #bdbdbd; |
|||
padding: 16rpx 0 0 0; |
|||
.week { |
|||
font-size: 22rpx; |
|||
} |
|||
.day { |
|||
font-size: 28rpx; |
|||
margin-top: 4rpx; |
|||
} |
|||
&.active { |
|||
color: #29d3b4; |
|||
.day { |
|||
border-radius: 50%; |
|||
background: #333; |
|||
color: #29d3b4; |
|||
padding: 2rpx 10rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.more-bar-wrapper { |
|||
width: 100%; |
|||
display: flex; |
|||
justify-content: center; |
|||
margin: 10rpx 0 0 0; |
|||
} |
|||
.more-bar { |
|||
display: flex; |
|||
align-items: center; |
|||
color: #bdbdbd; |
|||
font-size: 22rpx; |
|||
cursor: pointer; |
|||
background: #333; |
|||
border-radius: 20rpx; |
|||
padding: 8rpx 24rpx; |
|||
} |
|||
.course-list { |
|||
margin-top: 20rpx; |
|||
.course-card { |
|||
background: #434544; |
|||
border-radius: 10rpx; |
|||
margin: 0 0 20rpx 0; |
|||
padding: 0 0 20rpx 0; |
|||
box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.08); |
|||
.card-header { |
|||
display: flex; |
|||
justify-content: flex-end; |
|||
padding: 10rpx 20rpx 0 0; |
|||
.status-end { |
|||
background: #e95c6b; |
|||
color: #fff; |
|||
border-radius: 10rpx; |
|||
padding: 4rpx 18rpx; |
|||
font-size: 22rpx; |
|||
} |
|||
} |
|||
.card-body { |
|||
padding: 0 20rpx; |
|||
.row { |
|||
color: #fff; |
|||
font-size: 24rpx; |
|||
margin: 8rpx 0; |
|||
} |
|||
} |
|||
.card-footer { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding: 0 20rpx; |
|||
.sign-info { |
|||
color: #bdbdbd; |
|||
font-size: 22rpx; |
|||
} |
|||
.detail-btn { |
|||
background: transparent; |
|||
border: 2rpx solid #ffd86b; |
|||
color: #ffd86b; |
|||
border-radius: 8rpx; |
|||
padding: 6rpx 24rpx; |
|||
font-size: 24rpx; |
|||
margin-left: 10rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.class-arrange-root { |
|||
background: #232323; |
|||
min-height: 100vh; |
|||
padding-bottom: 30rpx; |
|||
} |
|||
|
|||
.date-bar { |
|||
display: flex; |
|||
align-items: center; |
|||
background: #232323; |
|||
padding: 0 0 10rpx 0; |
|||
overflow-x: auto; |
|||
border-bottom: 1px solid #333; |
|||
|
|||
.date-item { |
|||
flex: 1; |
|||
text-align: center; |
|||
color: #bdbdbd; |
|||
padding: 16rpx 0 0 0; |
|||
|
|||
.week { |
|||
font-size: 22rpx; |
|||
} |
|||
|
|||
.day { |
|||
font-size: 28rpx; |
|||
margin-top: 4rpx; |
|||
} |
|||
|
|||
&.active { |
|||
color: #29d3b4; |
|||
|
|||
.day { |
|||
border-radius: 50%; |
|||
background: #333; |
|||
color: #29d3b4; |
|||
padding: 2rpx 10rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.more-bar-wrapper { |
|||
width: 100%; |
|||
display: flex; |
|||
justify-content: center; |
|||
margin: 10rpx 0 0 0; |
|||
} |
|||
|
|||
.more-bar { |
|||
display: flex; |
|||
align-items: center; |
|||
color: #bdbdbd; |
|||
font-size: 22rpx; |
|||
cursor: pointer; |
|||
background: #333; |
|||
border-radius: 20rpx; |
|||
padding: 8rpx 24rpx; |
|||
} |
|||
|
|||
.course-list { |
|||
margin-top: 20rpx; |
|||
|
|||
.course-card { |
|||
background: #434544; |
|||
border-radius: 10rpx; |
|||
margin: 0 0 20rpx 0; |
|||
padding: 0 0 20rpx 0; |
|||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08); |
|||
|
|||
.card-header { |
|||
display: flex; |
|||
justify-content: flex-end; |
|||
padding: 10rpx 20rpx 0 0; |
|||
|
|||
.status-end { |
|||
background: #e95c6b; |
|||
color: #fff; |
|||
border-radius: 10rpx; |
|||
padding: 4rpx 18rpx; |
|||
font-size: 22rpx; |
|||
} |
|||
} |
|||
|
|||
.card-body { |
|||
padding: 0 20rpx; |
|||
|
|||
.row { |
|||
color: #fff; |
|||
font-size: 24rpx; |
|||
margin: 8rpx 0; |
|||
} |
|||
} |
|||
|
|||
.card-footer { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding: 0 20rpx; |
|||
|
|||
.sign-info { |
|||
color: #bdbdbd; |
|||
font-size: 22rpx; |
|||
} |
|||
|
|||
.detail-btn { |
|||
background: transparent; |
|||
border: 2rpx solid #ffd86b; |
|||
color: #ffd86b; |
|||
border-radius: 8rpx; |
|||
padding: 6rpx 24rpx; |
|||
font-size: 24rpx; |
|||
margin-left: 10rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,148 +1,224 @@ |
|||
<template> |
|||
<view class="detail-root"> |
|||
<view class="header"> |
|||
<view class="title">课程安排详情</view> |
|||
<view class="date">日期：{{ date }}</view> |
|||
</view> |
|||
<view class="section"> |
|||
<view class="section-title">学员列表</view> |
|||
<view class="student-list"> |
|||
<view v-for="(stu, idx) in students" :key="idx" class="student-item"> |
|||
<view class="avatar">{{ stu.name.charAt(0) }}</view> |
|||
<view class="info"> |
|||
<view class="name">{{ stu.name }}</view> |
|||
<view class="desc">{{ stu.desc }}</view> |
|||
</view> |
|||
</view> |
|||
<view |
|||
v-for="n in emptyArray" |
|||
:key="n" |
|||
class="student-item empty" |
|||
@tap="addStudent" |
|||
:data-index="n" |
|||
> |
|||
<view class="avatar empty-avatar">+</view> |
|||
<view class="info"> |
|||
<view class="name">空位</view> |
|||
<view class="desc">点击添加学员</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="detail-root"> |
|||
<view class="header"> |
|||
<view class="title">课程安排详情</view> |
|||
<view class="date">日期：{{ course_info.course_date }} {{course_info.time_slot}}</view> |
|||
</view> |
|||
<view class="section"> |
|||
<view class="section-title">学员列表</view> |
|||
<view class="student-list"> |
|||
<view v-for="(stu, idx) in students" :key="idx" class="student-item"> |
|||
<view class="avatar">{{ stu.name.charAt(0) }}</view> |
|||
<view class="info"> |
|||
<view class="name">{{ stu.name }}</view> |
|||
<view class="desc">{{ getStatusText(stu.status)}}</view> |
|||
</view> |
|||
</view> |
|||
<view v-for="n in course_info.available_capacity" :key="n" class="student-item empty" @tap="addStudent" :data-index="n"> |
|||
<view class="avatar empty-avatar">+</view> |
|||
<view class="info"> |
|||
<view class="name">空位</view> |
|||
<view class="desc">点击添加学员</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
date: '', |
|||
students: [ |
|||
{ name: '张三', desc: '已签到' }, |
|||
{ name: '李四', desc: '未签到' }, |
|||
], |
|||
maxCount: 5, |
|||
}; |
|||
}, |
|||
computed: { |
|||
emptyCount() { |
|||
return this.maxCount - this.students.length; |
|||
}, |
|||
emptyArray() { |
|||
return Array.from({length: this.emptyCount}, (v, i) => i + 1); |
|||
}, |
|||
}, |
|||
onLoad(query) { |
|||
this.date = query.date || ''; |
|||
}, |
|||
methods: { |
|||
addStudent(e) { |
|||
const n = e.currentTarget.dataset.index; |
|||
uni.showToast({ title: '添加学员功能待实现，空位号：' + n, icon: 'none' }); |
|||
}, |
|||
}, |
|||
}; |
|||
import apiRoute from '@/api/apiRoute.js'; |
|||
export default { |
|||
data() { |
|||
return { |
|||
course_id:'', |
|||
course_info:[], |
|||
date: '', |
|||
students: [ |
|||
// { |
|||
// name: '张三', |
|||
// desc: '已签到' |
|||
// }, |
|||
// { |
|||
// name: '李四', |
|||
// desc: '未签到' |
|||
// }, |
|||
], |
|||
resource_id:'' |
|||
}; |
|||
}, |
|||
onLoad(query) { |
|||
this.course_id = query.id || ''; |
|||
this.resource_id = query.resource_id |
|||
this.courseInfo(); |
|||
}, |
|||
methods: { |
|||
getStatusText(status) { |
|||
const statusMap = { |
|||
0: '待上课', |
|||
1: '已上课', |
|||
2: '请假' |
|||
}; |
|||
return statusMap[status] || status; |
|||
}, |
|||
async scheduleList() { |
|||
try { |
|||
let res = await apiRoute.scheduleList({ |
|||
'schedule_id': this.course_id |
|||
}) |
|||
|
|||
console.log(res); |
|||
this.students = res.data |
|||
} catch (error) { |
|||
console.error('获取信息失败:', error); |
|||
} |
|||
}, |
|||
async courseInfo() { |
|||
try { |
|||
let res = await apiRoute.courseInfo({ |
|||
'id': this.course_id |
|||
}) |
|||
this.course_info = res.data |
|||
|
|||
this.scheduleList(); |
|||
} catch (error) { |
|||
console.error('获取信息失败:', error); |
|||
} |
|||
}, |
|||
async addStudent(e) { |
|||
const data = { |
|||
'resources_id':this.resource_id, |
|||
'person_type':'customer_resource', |
|||
'schedule_id':this.course_id, |
|||
'course_date':this.course_info.course_date, |
|||
'time_slot':this.course_info.time_slot |
|||
}; |
|||
|
|||
|
|||
try { |
|||
let res = await apiRoute.addSchedule(data) |
|||
if(res.code == 1){ |
|||
uni.showToast({ |
|||
title: '添加成功', |
|||
icon: 'none' |
|||
}); |
|||
this.courseInfo(); |
|||
}else{ |
|||
uni.showToast({ |
|||
title: res.msg, |
|||
icon: 'none' |
|||
}); |
|||
} |
|||
|
|||
} catch (error) { |
|||
uni.showToast({ |
|||
title: '添加失败', |
|||
icon: 'none' |
|||
}); |
|||
} |
|||
// const n = e.currentTarget.dataset.index; |
|||
// uni.showToast({ |
|||
// title: '添加学员功能待实现，空位号：' + n, |
|||
// icon: 'none' |
|||
// }); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.detail-root { |
|||
background: #232323; |
|||
min-height: 100vh; |
|||
padding-bottom: 30rpx; |
|||
} |
|||
.header { |
|||
padding: 40rpx 30rpx 20rpx 30rpx; |
|||
.title { |
|||
color: #fff; |
|||
font-size: 36rpx; |
|||
font-weight: bold; |
|||
} |
|||
.date { |
|||
color: #29d3b4; |
|||
font-size: 26rpx; |
|||
margin-top: 10rpx; |
|||
} |
|||
} |
|||
.section { |
|||
margin: 30rpx; |
|||
background: #434544; |
|||
border-radius: 16rpx; |
|||
padding: 30rpx 20rpx; |
|||
} |
|||
.section-title { |
|||
color: #ffd86b; |
|||
font-size: 28rpx; |
|||
margin-bottom: 20rpx; |
|||
} |
|||
.student-list { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
gap: 20rpx; |
|||
} |
|||
.student-item { |
|||
background: #333; |
|||
border-radius: 12rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
padding: 18rpx 24rpx; |
|||
min-width: 260rpx; |
|||
.avatar { |
|||
width: 60rpx; |
|||
height: 60rpx; |
|||
border-radius: 50%; |
|||
background: #29d3b4; |
|||
color: #fff; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
font-size: 32rpx; |
|||
margin-right: 18rpx; |
|||
} |
|||
.info { |
|||
.name { |
|||
color: #fff; |
|||
font-size: 28rpx; |
|||
} |
|||
.desc { |
|||
color: #bdbdbd; |
|||
font-size: 22rpx; |
|||
margin-top: 4rpx; |
|||
} |
|||
} |
|||
&.empty { |
|||
border: 2rpx dashed #ffd86b; |
|||
background: #232323; |
|||
.avatar.empty-avatar { |
|||
background: #ffd86b; |
|||
color: #232323; |
|||
font-size: 36rpx; |
|||
} |
|||
.info .name { |
|||
color: #ffd86b; |
|||
} |
|||
.info .desc { |
|||
color: #ffd86b; |
|||
} |
|||
} |
|||
} |
|||
.detail-root { |
|||
background: #232323; |
|||
min-height: 100vh; |
|||
padding-bottom: 30rpx; |
|||
} |
|||
|
|||
.header { |
|||
padding: 40rpx 30rpx 20rpx 30rpx; |
|||
|
|||
.title { |
|||
color: #fff; |
|||
font-size: 36rpx; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
.date { |
|||
color: #29d3b4; |
|||
font-size: 26rpx; |
|||
margin-top: 10rpx; |
|||
} |
|||
} |
|||
|
|||
.section { |
|||
margin: 30rpx; |
|||
background: #434544; |
|||
border-radius: 16rpx; |
|||
padding: 30rpx 20rpx; |
|||
} |
|||
|
|||
.section-title { |
|||
color: #ffd86b; |
|||
font-size: 28rpx; |
|||
margin-bottom: 20rpx; |
|||
} |
|||
|
|||
.student-list { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
gap: 20rpx; |
|||
} |
|||
|
|||
.student-item { |
|||
background: #333; |
|||
border-radius: 12rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
padding: 18rpx 24rpx; |
|||
min-width: 260rpx; |
|||
|
|||
.avatar { |
|||
width: 60rpx; |
|||
height: 60rpx; |
|||
border-radius: 50%; |
|||
background: #29d3b4; |
|||
color: #fff; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
font-size: 32rpx; |
|||
margin-right: 18rpx; |
|||
} |
|||
|
|||
.info { |
|||
.name { |
|||
color: #fff; |
|||
font-size: 28rpx; |
|||
} |
|||
|
|||
.desc { |
|||
color: #bdbdbd; |
|||
font-size: 22rpx; |
|||
margin-top: 4rpx; |
|||
} |
|||
} |
|||
|
|||
&.empty { |
|||
border: 2rpx dashed #ffd86b; |
|||
background: #232323; |
|||
|
|||
.avatar.empty-avatar { |
|||
background: #ffd86b; |
|||
color: #232323; |
|||
font-size: 36rpx; |
|||
} |
|||
|
|||
.info .name { |
|||
color: #ffd86b; |
|||
} |
|||
|
|||
.info .desc { |
|||
color: #ffd86b; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue