|
@@ -1,4 +1,11 @@
|
|
|
<script setup>
|
|
|
+import img_lczs1 from '~/assets/zbktssys/1.png';
|
|
|
+import img_lczs2 from '~/assets/zbktssys/2.png';
|
|
|
+import img_lczs3 from '~/assets/zbktssys/3.png';
|
|
|
+import img_lczs from '~/assets/zbktssys/bar.png';
|
|
|
+import img_tx from '~/assets/zbktssys/tx.png';
|
|
|
+
|
|
|
+import { View as IconView, Histogram as IconHistogram, Search as IconSearch } from '@element-plus/icons-vue';
|
|
|
const activeTab = $ref('first')
|
|
|
function handleClick() {
|
|
|
|
|
@@ -28,12 +35,21 @@ const fc = [
|
|
|
{ n: '下册', v: '' },
|
|
|
]
|
|
|
|
|
|
+const data = $ref([
|
|
|
+ { img: img_lczs1, title: '走进生肖文化——寅虎卯兔', bfl: 100, desc: '领略生肖传奇,品味传统文化!', nj: '四年级', xk: '美术', ls: '尚老师', tx: img_tx, zt: '1' },
|
|
|
+ { img: img_lczs2, title: '走进生肖文化——寅虎卯兔', bfl: 100, desc: '领略生肖传奇,品味传统文化!', nj: '四年级', xk: '美术', ls: '尚老师', tx: img_tx, zt: '' },
|
|
|
+ { img: img_lczs3, title: '走进生肖文化——寅虎卯兔', bfl: 100, desc: '领略生肖传奇,品味传统文化!', nj: '四年级', xk: '美术', ls: '尚老师', tx: img_tx, zt: '' },
|
|
|
+])
|
|
|
+
|
|
|
|
|
|
+function hrefTo(href) {
|
|
|
+ window.open(href, '_blank')
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
<div class="w-full flex items-center justify-center shadow-sm h-60px">
|
|
|
- <div class="w-1200px flex items-center">
|
|
|
+ <div class="w-1400px flex items-center">
|
|
|
<div class="text-lg text-hex-050026">双师一生</div>
|
|
|
<el-divider direction="vertical" />
|
|
|
<div class="text-sm">
|
|
@@ -43,10 +59,25 @@ const fc = [
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
+ <div class="w-full relative h-200px">
|
|
|
+ <img :src="img_lczs" alt="" class="w-full h-full">
|
|
|
+ <div class="w-full h-full absolute top-0 z-2 flex flex-col items-center justify-evenly">
|
|
|
+ <div class="text-hex-fff text-5xl">双师一生</div>
|
|
|
+ <el-input class="input w-500px h-50px rounded-md" placeholder="搜索关键字">
|
|
|
+ <template #suffix>
|
|
|
+ <div class="w-26px h-26px bg-hex-00A3FF rounded-md flex justify-center items-center">
|
|
|
+ <el-icon size="13" color="#fff">
|
|
|
+ <IconSearch />
|
|
|
+ </el-icon>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-input>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
|
|
|
- <div class="w-full flex items-center justify-center ">
|
|
|
- <div class="w-1200px flex flex-col">
|
|
|
- <div class="w-full bg-hex-fff">
|
|
|
+ <div class="w-full flex items-center justify-center mt-4">
|
|
|
+ <div class="w-1400px flex flex-col">
|
|
|
+ <div class="w-full">
|
|
|
<el-tabs v-model="activeTab" @tab-click="handleClick">
|
|
|
<el-tab-pane label="待开始" name="first"></el-tab-pane>
|
|
|
<el-tab-pane label="已结束" name="second"></el-tab-pane>
|
|
@@ -57,8 +88,8 @@ const fc = [
|
|
|
<div>
|
|
|
<div class="flex">
|
|
|
<div class="font-bold mr-4">年级</div>
|
|
|
- <div>
|
|
|
- <label v-for="i in nj" :for="i.v" class="text-hex-949494 mx-2 px-4px py-px rounded cursor-pointer"
|
|
|
+ <div class="flex-auto flex-wrap">
|
|
|
+ <label v-for="i in nj" :for="i.v" class="text-hex-949494 mx-3 px-4px py-px rounded cursor-pointer"
|
|
|
:class="i.v && 'text-hex-00A3FF bg-hex-00A3FF bg-opacity-10'">
|
|
|
<span>{{ i.n }}</span>
|
|
|
</label>
|
|
@@ -68,8 +99,8 @@ const fc = [
|
|
|
|
|
|
<div class="flex">
|
|
|
<div class="font-bold mr-4">分册</div>
|
|
|
- <div>
|
|
|
- <label v-for="i in fc" :for="i.v" class="text-hex-949494 mx-2 px-4px py-px rounded cursor-pointer"
|
|
|
+ <div class="flex-auto">
|
|
|
+ <label v-for="i in fc" :for="i.v" class="text-hex-949494 mx-3 px-4px py-px rounded cursor-pointer"
|
|
|
:class="i.v && 'text-hex-00A3FF bg-hex-00A3FF bg-opacity-10'">
|
|
|
<span>{{ i.n }}</span>
|
|
|
</label>
|
|
@@ -77,6 +108,53 @@ const fc = [
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+
|
|
|
+ <div class="flex flex-wrap justify-between">
|
|
|
+ <div class="w-647px h-155px rounded-xl shadow-lg my-7 flex overflow-hidden" v-for="i in data">
|
|
|
+ <div class="w-264px h-full flex-none">
|
|
|
+ <img :src="i.img" alt="" class="w-full h-full">
|
|
|
+ </div>
|
|
|
+ <div class="p-2 pr-6 flex-auto flex flex-col">
|
|
|
+ <div class="flex justify-between w-full items-center py-1">
|
|
|
+ <div class="font-bold">{{ i.title }}</div>
|
|
|
+ <div class="text-hex-949494 text-sm flex justify-between items-center">
|
|
|
+ <el-icon :size="14" color="#949494">
|
|
|
+ <icon-view />
|
|
|
+ </el-icon>
|
|
|
+ <span class="ml-1">{{ i.bfl }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="text-sm text-hex-949494 py-1">
|
|
|
+ {{ i.desc }}
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="text-sm py-1 flex-auto">
|
|
|
+ <span>{{ i.nj }}</span>
|
|
|
+ <span class="mx-2">|</span>
|
|
|
+ <span>{{ i.xk }}</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="flex text-sm justify-between items-center">
|
|
|
+ <div @click="hrefTo('https://rtc.bozedu.net/index.html?uroom=18&uname=txsxnxxb&stream=18_2')"
|
|
|
+ class="cursor-pointer flex items-center">
|
|
|
+ <el-avatar :size="16" :src="i.tx" /><span class="ml-1">{{ i.ls }}</span>
|
|
|
+ </div>
|
|
|
+ <div @click="hrefTo('https://rtc.bozedu.net/index.html?uroom=18&uname=txsxnxxa&stream=18')"
|
|
|
+ class="h-26px rounded-14px px-2 flex items-center text-hex-0083C5 cursor-pointer"
|
|
|
+ :class="i.zt && 'border border-hex-f00 text-hex-f00'">
|
|
|
+ <el-icon :color="i.zt ? '#FF0000' : '#949494'">
|
|
|
+ <icon-histogram />
|
|
|
+ </el-icon>
|
|
|
+ <span class="ml-2 "> {{ i.zt ? '已开始' : '未开始' }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="h-26px leading-26px px-4 bg-gradient-to-l from-green-400 to-blue-500 text-white rounded-14px">
|
|
|
+ 讲义</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
@@ -89,4 +167,9 @@ const fc = [
|
|
|
:deep(.el-tabs__nav-wrap::after) {
|
|
|
background-color: transparent;
|
|
|
}
|
|
|
+
|
|
|
+.input {
|
|
|
+ height: 50px;
|
|
|
+ width: 500px;
|
|
|
+}
|
|
|
</style>
|