vue 实现课程表
要实现的效果如下：主要是花了很长时间去花了这个页面，也是各种百度，所以，在此记录下，有需要的人可以借鉴看下包含了html,假数据、以及css,可以整个copy过去目前这一版是未联调的静态页面，下一次发一个已经联调过的，含接口的数据，看真实效果<template><div><div class="Micro_top"><div class="searchs"
·
要实现的效果如下：
主要是花了很长时间去花了这个页面，也是各种百度，所以，在此记录下，有需要的人可以借鉴看下
包含了html,假数据、以及css,可以整个copy过去
目前这一版是未联调的静态页面，下一次发一个已经联调过的，含接口的数据，看真实效果
<template>
<div>
<div class="Micro_top">
<div class="searchs">
<span>时间 :</span>
<ul>
<li
v-for="item in periodList"
:key="item.id"
class="type"
:class="item.id === activeIndex ? 'active' : ''"
@click="studyingchangeTab(item.id, 1)"
>
{{ item.value }}
</li>
</ul>
</div>
<div class="searchd">
<span>状态 :</span>
<ul style="flex-wrap: wrap">
<li
v-for="(item, index) in phaselist"
:key="index"
:class="item.id === i ? 'active' : ''"
@click="phasetab(item.id, 1)"
>
{{ item.value }}
</li>
</ul>
</div>
</div>
<div classs="content">
<div></div>
<div class="class-table">
<div class="table-wrapper">
<div class="tabel-container">
<table align="center">
<thead>
<tr>
<th colspan="2" width="48" class="fw">课时</th>
<th class="fw" v-for="(item, index) in datelist" :key="index">
<p>{{ item.week }}</p>
<p class="fonts">{{ item.date }}</p>
</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="4" class="wd amtdstyle">
<div class="fw">上</div>
<div class="amstle">午</div>
</td>
<td class="wd fw">1</td>
<td>
<img src="@/assets/images/wk/添加.png" alt="" class="dis" />
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td class="wd fw">2</td>
<td></td>
<td></td>
<td>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td class="wd fw">3</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td class="wd fw">4</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td rowspan="4" class="wd pmtdstyle">
<div class="fw">上</div>
<div class="amstle">午</div>
</td>
<td class="wd fw">5</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td class="wd fw">6</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td class="wd fw">7</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td class="wd fw">8</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
defaultOpen: require("@/assets/images/wk/reduce.png"),
defaultClose: require("@/assets/images/wk/expend.png"),
total: 0,
currentPage: 1,
act: "0",
activeIndex: "",
i: "",
gradeIndex: "",
periodList: [
{
id: "",
value: "全部",
},
{
id: "1",
value: "本周",
},
{
id: "2",
value: "上周",
},
{
id: "3",
value: "近一月",
},
{
id: "4",
value: "更早",
},
],
phaselist: [
{
id: "",
value: "全部",
},
{
id: "1",
value: "待确认",
},
{
id: "2",
value: "即将开始",
},
{
id: "3",
value: "正在直播",
},
{
id: "4",
value: "已经结束",
},
{
id: "5",
value: "历史",
},
{
id: "6",
value: "地理",
},
],
stateList: [
{
id: "",
value: "全部",
},
{
id: "1",
value: "正在直播",
},
{
id: "2",
value: "即将开始版",
},
{
id: "3",
value: "已经结束",
},
],
tableData: [],
datelist: [
{
id: "1",
date: "2022-03-21",
week: "星期一",
},
{
id: "2",
date: "2022-03-22",
week: "星期二",
},
{
id: "3",
date: "2022-03-23",
week: "星期三",
},
{
id: "4",
date: "2022-03-24",
week: "星期四",
},
{
id: "5",
date: "2022-03-25",
week: "星期五",
},
{
id: "6",
date: "2022-03-26",
week: "星期六",
},
{
id: "7",
date: "2022-03-27",
week: "星期日",
},
],
courses: [
["", "", "", "", "", "", "", ""],
["生物", "物理", "化学", "政治", "历史", "英语", "", "语文"],
["语文", "数学", "英语", "历史", "", "化学", "物理", "生物"],
["生物", "", "化学", "政治", "历史", "英语", "数学", "语文"],
["语文", "数学", "英语", "历史", "政治", "", "物理", "生物"],
["生物", "物理", "化学", "", "历史", "英语", "数学", "语文"],
["语文", "数学", "英语", "", "", "", "", ""],
],
text: {
label: "方程式的方成解析第程式的方成三方",
content:
"方程式的方成解析第程式的方成三方方程式的方成解析第程式的方成三方",
},
};
},
created() {},
methods: {
studyingall(i) {
this.activeIndex = i;
},
studyingchangeTab(i) {
this.activeIndex = i;
},
phaseall(i) {
this.i = i;
},
phasetab(i) {
this.i = i;
},
},
};
</script>
<style lang="less" scoped>
.Micro_top {
background-color: #fff;
width: 1200px;
margin: 0 auto;
border-radius: 4px;
padding-top: 24px;
height: 120px;
margin-bottom: 25px;
.searchs,
.searchd,
.title {
padding: 0 24px;
}
.searchs,
.searchd,
.versionbox {
display: flex;
font-size: 14px;
color: #333333;
margin-bottom: 24px;
height: 24px;
span {
display: inline-block;
font-weight: 600;
font-size: 16px;
color: #282d30;
line-height: 24px;
}
ul {
display: flex;
flex-wrap: wrap;
// padding-top: 14px;
padding-left: 26px;
li {
cursor: pointer;
padding: 0 12px;
font-size: 16px;
color: #36363a;
line-height: 24px;
margin-right: 36px;
min-width: 56px;
height: 24px;
line-height: 24px;
}
.active {
background-color: #00c15d;
border-radius: 5px;
color: rgba(255, 255, 255, 1);
}
}
em {
line-height: 54px;
font-style: normal;
color: #00c15d;
cursor: pointer;
img {
margin-left: 8px;
}
}
}
}
+ .content {
width: 1200px;
margin: 0 auto;
background-color: #fff;
}
</style>
<style lang="less" scoped>
.class-table {
padding: 24px;
background: #fff;
.table-wrapper {
width: 100%;
height: 100%;
overflow: auto;
}
}
.wd {
width: 48px !important;
}
table {
border: 1px solid #f3f3f3;
border-collapse: collapse;
text-align: center;
}
tr,
th,
td {
width: 150px;
height: 104px;
font-size: 12px;
text-align: center;
border: 1px solid #f3f3f3;
}
td:hover {
background: #e7f7f4;
.dis {
display: block;
text-align: center;
margin: 0 auto;
cursor: pointer;
}
}
.wd:hover {
background-color: #fff;
}
.amtdstyle:hover {
background-color: #e7f7f4;
}
.pmtdstyle:hover {
background-color: #fce6bc;
}
.fw {
font-size: 16px;
font-weight: 600;
}
.dis {
display: none;
}
.fonts {
font-weight: 400;
font-size: 14px;
color: #9899a1;
}
.amstle {
padding-top: 200px;
font-size: 16px;
font-weight: 600;
}
.amtdstyle {
background: #e7f7f4;
color: #2e8759;
border-right: 0;
}
.pmtdstyle {
background: #fce6bc;
color: #ff7844;
border-right: 0;
}
/deep/ .el-button {
width: 128px;
height: 38px;
background: #00c15d;
border-radius: 8px;
}
</style>
前往低代码交流专区
更多推荐
8
0- 0
已为社区贡献2条内容
所有评论(0)