33 lines
1.2 KiB
Vue
33 lines
1.2 KiB
Vue
|
<template>
|
||
|
|
<a-card class="rowGutter">
|
||
|
|
<template #title>
|
||
|
|
<span style="font-size: 24px;font-weight: bold;">精彩公开课</span>
|
||
|
|
</template>
|
||
|
|
<a-row :gutter="[16,16]">
|
||
|
|
<a-col v-for="(item,index) in 4" :key="index" :xs="{ span: 24 }" :sm="{ span: 8 }" :lg="{ span: 6 }">
|
||
|
|
<div style="border-radius: 25px;background: #cccccc8c;width: 70%;margin-bottom: 0.5rem;text-align: center;margin: 0 auto .5rem;padding: 0.5rem;">
|
||
|
|
时间{{ item }}
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<div>
|
||
|
|
<span style="position: absolute;top: 4rem;border-radius: 0 10px 10px 0;background: #1c84c6;color: #FFF;padding: 3px 10px 3px 5px;">公开课预告</span>
|
||
|
|
<img style="border-radius: 10px 10px 0 0;" src="/resource/img/kc/moren.jpg"/>
|
||
|
|
</div>
|
||
|
|
<div style="padding: 0 1rem 1rem;background: #f3f3f3;">
|
||
|
|
<div>名称</div>
|
||
|
|
<div>名称2</div>
|
||
|
|
<div>课的名称</div>
|
||
|
|
<div>N人听课</div>
|
||
|
|
<div><a-button type="primary" style="width: 100%;" :disabled="index%2==0">进入课堂</a-button></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</a-col>
|
||
|
|
</a-row>
|
||
|
|
</a-card>
|
||
|
|
</template>
|
||
|
|
<script setup lang="ts">
|
||
|
|
|
||
|
|
</script>
|
||
|
|
<style lang="less" scoped>
|
||
|
|
|
||
|
|
</style>
|