提交

package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@element-plus/icons-vue": "^2.0.9",
     "@vueuse/core": "^9.1.0",
+    "@windicss/plugin-scrollbar": "^1.2.3",
     "axios": "^0.27.2",
     "dayjs": "^1.11.5",
     "element-plus": "^2.2.14",

pnpm-lock.yaml

@@ -5,10 +5,12 @@ specifiers:
   '@iconify/json': ^2.1.92
   '@vitejs/plugin-vue': ^3.0.3
   '@vueuse/core': ^9.1.0
+  '@windicss/plugin-scrollbar': ^1.2.3
   axios: ^0.27.2
   dayjs: ^1.11.5
   element-plus: ^2.2.14
   sass: ^1.54.4
+  scss: ^0.2.4
   unplugin-auto-import: ^0.11.1
   unplugin-icons: ^0.14.8
   unplugin-vue-components: ^0.22.4
@@ -21,9 +23,11 @@ specifiers:
 dependencies:
   '@element-plus/icons-vue': 2.0.9_vue@3.2.37
   '@vueuse/core': 9.1.0_vue@3.2.37
+  '@windicss/plugin-scrollbar': 1.2.3
   axios: 0.27.2
   dayjs: 1.11.5
   element-plus: 2.2.14_vue@3.2.37
+  scss: 0.2.4
   vue: 3.2.37
   vue-router: 4.1.3_vue@3.2.37
 
@@ -296,6 +300,10 @@ packages:
       - supports-color
     dev: true
 
+  /@windicss/plugin-scrollbar/1.2.3:
+    resolution: {integrity: sha512-+cqv1pEmaNPITeBJ/lO6tc8IjBzRhQ+V9G8r249MMXivYoxUO4DtModBrRGHVvBgsYZgPXDsIv2jqtxc4NqYEg==}
+    dev: false
+
   /@windicss/plugin-utils/1.8.7:
     resolution: {integrity: sha512-dfj95olNZyGFDPFMBvE5oq8hA5f0ooUJZjVdWlthS4ek4W1/xNOHDxB6ygWR8LE9zCOXZykApjt1LOhy9Ky2QA==}
     dependencies:
@@ -945,6 +953,11 @@ packages:
       path-key: 3.1.1
     dev: true
 
+  /ometa/0.2.2:
+    resolution: {integrity: sha512-LZuoK/yjU3FvrxPjUXUlZ1bavCfBPqauA7fsNdwi+AVhRdyk2IzgP3JRnevvjzQ6fKHdUw8YISshf53FmpHrng==}
+    engines: {node: '>= 0.2.0'}
+    dev: false
+
   /onetime/5.1.2:
     resolution: {integrity: sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==}
     engines: {node: '>=6'}
@@ -1057,6 +1070,13 @@ packages:
       source-map-js: 1.0.2
     dev: true
 
+  /scss/0.2.4:
+    resolution: {integrity: sha512-4u8V87F+Q/upVhUmhPnB4C1R11xojkRkWjExL2v0CX2EXTg18VrKd+9JWoeyCp2VEMdSpJsyAvVU+rVjogh51A==}
+    engines: {node: '>= 0.2.0'}
+    dependencies:
+      ometa: 0.2.2
+    dev: false
+
   /scule/0.3.2:
     resolution: {integrity: sha512-zIvPdjOH8fv8CgrPT5eqtxHQXmPNnV/vHJYffZhE43KZkvULvpCTvOt1HPlFaCZx287INL9qaqrZg34e8NgI4g==}
     dev: true

src/App.vue

@@ -3,7 +3,7 @@
 </script>
 
 <template>
-  <div class="w-screen h-screen overflow-y-auto">
+  <div class="w-screen h-screen overflow-y-auto _scrollbar scrollbar-thin scrollbar-thumb-rounded scrollbar-thumb-gray-300 scrollbar-track-transparent">
     <router-view></router-view>
   </div>
 </template>

src/pages/zbkt/ssys/content.vue

@@ -0,0 +1,74 @@
+<script setup>
+import commonHeader from "@/components/header/index.vue";
+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 { ArrowRight, ArrowLeft } from '@element-plus/icons-vue';
+
+
+const data_zy = $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>
+  <common-header />
+  <div class="w-full flex items-center justify-center shadow h-60px bg-hex-fefefe">
+    <div class="w-1400px flex items-center">
+      <div class="text-lg text-hex-050026">内容</div>
+      <el-divider direction="vertical" />
+      <div class="text-sm">
+        <span class="text-hex-949494">直播课堂</span>
+        <span class="text-hex-949494"> - 双师一生</span>
+        <span> - 内容</span>
+      </div>
+    </div>
+  </div>
+
+  <div class="w-full flex items-center justify-center shadow h-60px bg-hex-fefefe">
+    <div class="w-1400px flex items-center">
+      <div class="text-lg text-hex-050026">信息技术与学科教学的深度融合</div>
+    </div>
+  </div>
+
+
+  <div class="w-full flex items-center justify-center mt-4">
+    <div class="w-1400px flex flex-col">
+
+      <div class="w-full h-530px mb-4 bg-light-500">
+        <video class="w-full h-full" src=""></video>
+      </div>
+
+      <div class="w-full flex justify-between items-center">
+
+        <el-button type="primary" :icon="ArrowLeft" circle size="large" />
+
+        <div class="flex-auto flex justify-start items-center">
+          <div class="w-19/100 mx-4 flex flex-col cursor-pointer" v-for="i in data_zy">
+            <div class="w-full flex-none overflow-hidden  rounded-xl">
+              <img :src="i.img" alt="" class="w-full h-full">
+            </div>
+            <div class="p-2">
+              {{  i.title  }}
+            </div>
+          </div>
+        </div>
+
+        <el-button type="primary" :icon="ArrowRight" circle size="large" />
+      </div>
+
+    </div>
+  </div>
+</template>
+  
+  

src/pages/zbkt/ssys/index.vue

@@ -46,11 +46,17 @@ const data = $ref([
 function hrefTo(href) {
   window.open(href, '_blank')
 }
+
+const router = useRouter()
+
+function handleJyClick(){
+  router.push('/zbkt/ssys/content')
+}
 </script>
 
 <template>
   <common-header/>
-  <div class="w-full flex items-center justify-center shadow-sm h-60px">
+  <div class="w-full flex items-center justify-center shadow-sm h-60px bg-hex-fefefe">
     <div class="w-1400px flex items-center">
       <div class="text-lg text-hex-050026">双师一生</div>
       <el-divider direction="vertical" />
@@ -67,7 +73,7 @@ function hrefTo(href) {
       <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">
+          <div class="w-26px h-26px bg-hex-00A3FF rounded-md flex justify-center items-center cursor-pointer">
             <el-icon size="13" color="#fff">
               <IconSearch />
             </el-icon>
@@ -150,7 +156,7 @@ function hrefTo(href) {
                 </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 class="h-26px leading-26px px-4 bg-gradient-to-l from-green-400 to-blue-500 text-white rounded-14px cursor-pointer" @click="handleJyClick(i)" >
                 讲义</div>
             </div>
 

src/pages/zbkt/wlzb/content.vue

@@ -0,0 +1,114 @@
+<script setup>
+import commonHeader from "@/components/header/index.vue";
+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 img_bg1 from '~/assets/zbkt/bg1.png';
+
+import { Histogram as IconHistogram } from '@element-plus/icons-vue';
+
+
+const data_kczjdg = $ref([
+  { img: img_lczs1, title: '01 课时 形成问题', bfl: 100, desc: '领略生肖传奇，品味传统文化！', nj: '四年级', xk: '美术', ls: '尚老师', tx: img_tx, zt: '1' },
+  { img: img_lczs2, title: '02 课时 行程问题', bfl: 100, desc: '领略生肖传奇，品味传统文化！', nj: '四年级', xk: '美术', ls: '尚老师', tx: img_tx, zt: '' },
+  { img: img_lczs3, title: '03 课时 过桥问题', bfl: 100, desc: '领略生肖传奇，品味传统文化！', nj: '四年级', xk: '美术', ls: '尚老师', tx: img_tx, zt: '' },
+  { img: img_lczs3, title: '04 课时 流水问题', bfl: 100, desc: '领略生肖传奇，品味传统文化！', nj: '四年级', xk: '美术', ls: '尚老师', tx: img_tx, zt: '' },
+])
+
+
+function hrefTo(href) {
+  window.open(href, '_blank')
+}
+
+const data_kcap = $ref([
+  { time: '7月11日', sknr: '1.数的巧算', skls: '姚荣华' },
+  { time: '7月12日', sknr: '2.定义新运算', skls: '顾国东' },
+  { time: '7月13日', sknr: '3.循环小数', skls: '朱海锋' },
+  { time: '7月14日', sknr: '4.十进制和二进制简介', skls: '吴克锋' },
+  { time: '7月15日', sknr: '5.解决问题的策略', skls: '宋海芬' },
+  { time: '7月16日', sknr: '6.长方体正方体的综合应用', skls: '徐铢凤' },
+  { time: '7月17日', sknr: '7.因数倍数的综合应用', skls: '王斌莺' },
+  { time: '7月18日', sknr: '8.五年级阶段性练习', skls: '罗杰' },
+])
+</script>
+  
+  <template>
+  <common-header />
+  <div class="w-full flex items-center justify-center shadow h-60px bg-hex-fefefe">
+    <div class="w-1400px flex items-center">
+      <div class="text-lg text-hex-050026">内容</div>
+      <el-divider direction="vertical" />
+      <div class="text-sm">
+        <span class="text-hex-949494">直播课堂</span>
+        <span class="text-hex-949494"> - 网络直播</span>
+        <span> - 内容</span>
+      </div>
+    </div>
+  </div>
+
+  <div class="w-full flex items-center justify-center mt-4">
+    <div class="w-1400px flex flex-col">
+
+      <div class="w-full mb-4 relative">
+        <img :src="img_bg1" alt="">
+        <div class="absolute w-full h-full top-0 flex flex-col justify-center p-16 text-white">
+          <div class="text-2xl mb-4">六年级数学《从课本到培优》</div>
+          <div class="flex mb-6">
+            <div class="mr-12">责任教师:吴雷霞</div>
+            <div>机构名称:桐乡市互联网学校</div>
+          </div>
+          <div class="text-sm">
+            <div>简介： </div>
+            <div>
+              小学数学《从课本到培优 》课程（4-6年级）由桐乡市互联网学校嘉兴市数学名师吴雷霞团队研发。本课程在结构安排上与教材同步，紧扣教学大纲所囊括的知识要点。在难度设置上，
+              先选取中低难度问题，由浅入深，循序渐进，从每一课时中选取具有思维深度的问题进行讲解和练习，达到对课本知识的深入拓展,轻松实现从课本到培优。课程着重以思维训练为核心，
+              培养学生学会独立思考，体会数学的基本思想和思维方式。
+            </div>
+          </div>
+        </div>
+
+      </div>
+
+      <div class="flex w-full">
+        <div class="flex-auto shadow p-4">
+          <div class="font-bold mb-8">课程章节大纲</div>
+          <ul>
+            <li v-for="i in data_kczjdg"
+              class="border_top cursor-pointer flex w-full justify-between px-4 py-2 my-4 bg-opacity-5 bg-hex-00A3FF"
+              :class="i.zt && 'bg-opacity-50 text-white'">
+              <div>{{  i.title  }}</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 mr-4 border"
+                :class="i.zt ? 'border-hex-ff0f00 text-hex-ff0f00' : 'border-hex-949494 text-hex-949494'">
+                <el-icon :color="i.zt ? '#FF0000' : '#949494'">
+                  <icon-histogram />
+                </el-icon>
+                <span class="ml-2 text-xs"> {{  i.zt ? '直播中' : '待直播'  }}</span>
+              </div>
+            </li>
+          </ul>
+        </div>
+
+        <div class="w-500px ml-10px shadow p-4">
+          <div class="font-bold mb-8">课程安排</div>
+          <el-table :data="data_kcap" row-class-name="h-64px">
+            <el-table-column prop="time" label="时间" width="100" />
+            <el-table-column prop="sknr" label="授课内容" width="auto" />
+            <el-table-column prop="skls" label="授课内容" width="100" />
+          </el-table>
+        </div>
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<style>
+.border_top {
+  border-radius: 1rem 1rem 0 0;
+}
+</style>
+  
+  

src/pages/zbkt/wlzb/detail.vue

@@ -0,0 +1,98 @@
+<script setup>
+import commonHeader from "@/components/header/index.vue";
+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 { ArrowRight, ArrowLeft } from '@element-plus/icons-vue';
+
+
+const data_zy = $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>
+  <common-header />
+  <div class="w-full flex items-center justify-center shadow h-60px bg-hex-fefefe">
+    <div class="w-1400px flex items-center">
+      <div class="text-lg text-hex-050026">内容</div>
+      <el-divider direction="vertical" />
+      <div class="text-sm">
+        <span class="text-hex-949494">直播课堂</span>
+        <span class="text-hex-949494"> - 网络直播</span>
+        <span> - 内容</span>
+      </div>
+    </div>
+  </div>
+
+  <div class="w-full flex items-center justify-center bg-gradient-to-b from-hex-00A3FF via-hex-DDFEEE to-hex-FFF7E4 bg-opacity-60 blur-50px">
+    <div class="w-1400px flex flex-col">
+
+      <div class="flex items-center justify-start h-60px px-4">
+        <div class="text-lg text-hex-050026 font-bold">信息技术与学科教学的深度融合</div>
+
+        <el-popover placement="bottom" :width="410" trigger="hover">
+          <template #reference>
+            <div class="cursor-pointer text-hex-00A3FF ml-8">分享</div>
+          </template>
+
+          <div>
+
+          </div>
+        </el-popover>
+      </div>
+
+      <div class="w-full shadow bg-white rounded-lg flex items-center mb-4 p-4">
+        <el-avatar :size="77" src="" />
+        <div class="flex-auto"></div>
+        <div class="text-sm bg-hex-0A8AFF text-white w-100px h-40px flex_center rounded cursor-pointer">关注</div>
+      </div>
+
+      <div class="w-full h-800px mb-4 bg-hex-CEE5FB">
+        <video class="w-full h-full" src=""></video>
+      </div>
+    </div>
+  </div>
+
+
+
+
+  <!-- <div class="w-full flex items-center justify-center mt-4">
+    <div class="w-1400px flex flex-col">
+
+      <div class="w-full h-530px mb-4 bg-light-500">
+        <video class="w-full h-full" src=""></video>
+      </div>
+
+      <div class="w-full flex justify-between items-center">
+        <el-button type="primary" :icon="ArrowLeft" circle size="large" />
+
+        <div class="flex-auto flex justify-start items-center">
+          <div class="w-19/100 mx-4 flex flex-col cursor-pointer" v-for="i in data_zy">
+            <div class="w-full flex-none overflow-hidden  rounded-xl">
+              <img :src="i.img" alt="" class="w-full h-full">
+            </div>
+            <div class="p-2">
+              {{  i.title  }}
+            </div>
+          </div>
+        </div>
+
+        <el-button type="primary" :icon="ArrowRight" circle size="large" />      
+      </div>
+
+    </div>
+  </div> -->
+</template>
+  
+  

src/pages/zbkt/wlzb/index.vue

@@ -6,10 +6,7 @@ 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() {
 
-}
 
 const nj = [
   { n: '全部', v: '1' },
@@ -35,7 +32,31 @@ const fc = [
   { n: '下册', v: '' },
 ]
 
-const data = $ref([
+const data_zzzb = $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: '1' },
+  // { img: img_lczs3, title: '走进生肖文化——寅虎卯兔', bfl: 100, desc: '领略生肖传奇，品味传统文化！', nj: '四年级', xk: '美术', ls: '尚老师', tx: img_tx, zt: '1' },
+])
+
+const data_tjzb = $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: '1' },
+  { img: img_lczs3, title: '走进生肖文化——寅虎卯兔', bfl: 100, desc: '领略生肖传奇，品味传统文化！', nj: '四年级', xk: '美术', ls: '尚老师', tx: img_tx, zt: '1' },
+  { 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: '1' },
+  { img: img_lczs3, title: '走进生肖文化——寅虎卯兔', bfl: 100, desc: '领略生肖传奇，品味传统文化！', nj: '四年级', xk: '美术', ls: '尚老师', tx: img_tx, zt: '1' },
+  { 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: '1' },
+  { img: img_lczs3, title: '走进生肖文化——寅虎卯兔', bfl: 100, desc: '领略生肖传奇，品味传统文化！', nj: '四年级', xk: '美术', ls: '尚老师', tx: img_tx, zt: '1' },
+])
+
+const data_phb = $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: '1' },
+  { img: img_lczs3, title: '走进生肖文化——寅虎卯兔', bfl: 100, desc: '领略生肖传奇，品味传统文化！', nj: '四年级', xk: '美术', ls: '尚老师', tx: img_tx, zt: '1' },
+  { 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: '1' },
+  { img: img_lczs3, title: '走进生肖文化——寅虎卯兔', bfl: 100, desc: '领略生肖传奇，品味传统文化！', nj: '四年级', xk: '美术', ls: '尚老师', tx: img_tx, zt: '1' },
   { 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: '1' },
   { img: img_lczs3, title: '走进生肖文化——寅虎卯兔', bfl: 100, desc: '领略生肖传奇，品味传统文化！', nj: '四年级', xk: '美术', ls: '尚老师', tx: img_tx, zt: '1' },
@@ -45,11 +66,22 @@ const data = $ref([
 function hrefTo(href) {
   window.open(href, '_blank')
 }
+
+const router = useRouter()
+function handleTjzbClick() {
+  router.push('/zbkt/wlzb/content')
+}
+
+function handlePhbClick() {
+  router.push('/zbkt/wlzb/content')
+
+}
+
 </script>
 
 <template>
-  <common-header/>
-  <div class="w-full flex items-center justify-center shadow-sm h-60px">
+  <common-header />
+  <div class="w-full flex items-center justify-center shadow-sm h-60px bg-hex-fefefe">
     <div class="w-1400px flex items-center">
       <div class="text-lg text-hex-050026">网络直播</div>
       <el-divider direction="vertical" />
@@ -66,7 +98,7 @@ function hrefTo(href) {
       <div class="text-hex-fff text-5xl">网络直播</div>
       <el-input class="input w-500px h-50px rounded-md overflow-hidden" placeholder="搜索关键字">
         <template #suffix>
-          <div class="w-26px h-26px bg-hex-00A3FF rounded-md flex justify-center items-center">
+          <div class="w-26px h-26px bg-hex-00A3FF rounded-md flex justify-center items-center cursor-pointer">
             <el-icon size="13" color="#fff">
               <IconSearch />
             </el-icon>
@@ -84,7 +116,7 @@ function hrefTo(href) {
           <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>
+              <span>{{  i.n  }}</span>
             </label>
             <div class="border_b my-4"></div>
           </div>
@@ -95,7 +127,7 @@ function hrefTo(href) {
           <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>
+              <span>{{  i.n  }}</span>
             </label>
             <div class="border_b my-4"></div>
           </div>
@@ -105,35 +137,35 @@ function hrefTo(href) {
 
       <div class="text-lg font-bold mt-7 mb-3">正在直播</div>
       <div class="flex flex-wrap justify-between">
-        <div class="w-647px h-155px rounded-xl shadow-lg mb-7 flex" v-for="i in data">
+        <div class="w-647px h-155px rounded-xl shadow-lg mb-7 flex" v-for="i in data_zzzb">
           <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="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>
+                <span class="ml-1">{{  i.bfl  }}</span>
               </div>
             </div>
 
             <div class="text-sm text-hex-949494 py-1">
-              {{ i.desc }}
+              {{  i.desc  }}
             </div>
 
             <div class="text-sm py-1 flex-auto">
-              <span>{{ i.nj }}</span>
+              <span>{{  i.nj  }}</span>
               <span class="mx-2">|</span>
-              <span>{{ i.xk }}</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>
+                <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"
@@ -141,7 +173,7 @@ function hrefTo(href) {
                 <el-icon :color="i.zt ? '#FF0000' : '#949494'">
                   <icon-histogram />
                 </el-icon>
-                <span class="ml-2 "> {{ i.zt ? '直播中' : '未开始' }}</span>
+                <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> -->
@@ -156,12 +188,13 @@ function hrefTo(href) {
         <div class="flex-auto mr-8">
           <div class="text-lg font-bold mt-7 mb-3">推荐直播</div>
           <div class="flex flex-wrap justify-between">
-            <div class="w-318px h-263px rounded-xl shadow-lg mb-7 flex flex-col overflow-hidden" v-for="i in [...data,...data]">
+            <div class="w-318px h-263px rounded-xl shadow-lg mb-7 flex flex-col overflow-hidden cursor-pointer"
+              v-for="i in data_tjzb" @click="handleTjzbClick(i)">
               <div class="w-full flex-none">
                 <img :src="i.img" alt="" class="w-full h-full">
               </div>
               <div class="p-2">
-                {{ i.title }}
+                {{  i.title  }}
               </div>
             </div>
           </div>
@@ -169,21 +202,25 @@ function hrefTo(href) {
 
         <div class="w-320px shadow flex-none p-6">
           <div class="text-lg font-bold mt-1 mb-3">直播课程排行榜</div>
-          <template v-for="(i, index) in [...data,...data,...data]">
-            <div v-if="index < 2" class="w-full h-167px rounded-md mb-4 relative overflow-hidden">
-              <img :src="i.img" alt="" class="w-full h-full ">
+          <template v-for="(i, index) in data_phb">
+            <div v-if="index < 2" class="w-full h-167px  mb-4 relative  cursor-pointer" @click="handlePhbClick(i)">
+              <img :src="i.img" alt="" class="w-full h-full overflow-hidden rounded-md ">
               <div class="p-2 absolute z-2 bottom-0 w-full text-white">
-                {{ i.title }}
+                {{  i.title  }}
               </div>
+              <div class="absolute -top-11px right-20px w-50px h-22px text-white flex_center rounded-sm text-sm"
+                :class="['bg-red-600', 'bg-yellow-400'][index]">Top{{  index + 1  }}</div>
             </div>
 
-            <div v-else class="flex mb-4">
+            <div v-else class="flex mb-4 cursor-pointer" @click="handlePhbClick(i)">
               <div class="w-110px flex-none relative">
                 <img :src="i.img" alt="" class="w-full h-full rounded-sm overflow-hidden">
-                <div class="absolute rounded-sm right-0 top-0 w-20px h-20px bg-hex-6C5DD3 text-white flex_center text-xs">{{index+1}}</div>
+                <div
+                  class="absolute rounded-sm right-0 top-0 w-20px h-20px bg-hex-6C5DD3 text-white flex_center text-xs">
+                  {{  index + 1  }}</div>
               </div>
               <div class="px-1 leading-tight">
-                {{ i.title }}
+                {{  i.title  }}
               </div>
             </div>
           </template>

src/pages/zbkt/ztzb/content.vue

@@ -0,0 +1,80 @@
+<script setup>
+import commonHeader from "@/components/header/index.vue";
+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 { ArrowRight, ArrowLeft } from '@element-plus/icons-vue';
+
+
+const data_zy = $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>
+  <common-header />
+  <div class="w-full flex items-center justify-center shadow h-60px bg-hex-fefefe">
+    <div class="w-1400px flex items-center">
+      <div class="text-lg text-hex-050026">内容</div>
+      <el-divider direction="vertical" />
+      <div class="text-sm">
+        <span class="text-hex-949494">直播课堂</span>
+        <span class="text-hex-949494"> - 专题直播</span>
+        <span> - 内容</span>
+      </div>
+    </div>
+  </div>
+
+  <div class="w-full flex items-center justify-center shadow h-60px bg-hex-fefefe">
+    <div class="w-1400px flex items-center">
+      <div class="text-lg text-hex-050026">信息技术与学科教学的深度融合</div>
+    </div>
+  </div>
+
+
+  <div class="w-full flex items-center justify-center mt-4">
+    <div class="w-1400px flex flex-col">
+
+      <div class="w-full mb-4 bg-light-500">
+        <video class="w-full h-full" controls="controls" controlslist="nodownload" disablePictureInPicture="true"
+          oncontextmenu="return false;" id="myVideo" width="100%"
+          poster="http://www.txhlwxx.com/data/upload/month_202011/202011261403364594_aOVi.png" preload="" loop=""
+          autoplay="false">
+          <source src="http://www.txhlwxx.com/data/upload/month_202012/202012280906053508_JuU2.mp4" type="video/mp4">
+        </video>
+
+      </div>
+
+      <!-- <div class="w-full flex justify-between items-center">
+
+        <el-button type="primary" :icon="ArrowLeft" circle size="large" />
+
+        <div class="flex-auto flex justify-start items-center">
+          <div class="w-19/100 mx-4 flex flex-col cursor-pointer" v-for="i in data_zy">
+            <div class="w-full flex-none overflow-hidden  rounded-xl">
+              <img :src="i.img" alt="" class="w-full h-full">
+            </div>
+            <div class="p-2">
+              {{  i.title  }}
+            </div>
+          </div>
+        </div>
+
+        <el-button type="primary" :icon="ArrowRight" circle size="large" />
+      </div> -->
+
+    </div>
+  </div>
+</template>
+  
+  

src/pages/zbkt/ztzb/index.vue

@@ -20,11 +20,17 @@ const data = $ref([
   { img: img_lczs3, title: '走进生肖文化——寅虎卯兔', bfl: 100, desc: '主讲人（单位）：桐乡市艺术网校', desc1: '直播时间：2022-06-14', nj: '四年级', xk: '美术', ls: '尚老师', tx: img_tx, zt: '' },
   { img: img_lczs3, title: '走进生肖文化——寅虎卯兔', bfl: 100, desc: '主讲人（单位）：桐乡市艺术网校', desc1: '直播时间：2022-06-14', nj: '四年级', xk: '美术', ls: '尚老师', tx: img_tx, zt: '' },
 ])
+
+const router = useRouter()
+
+function handleJyClick(){
+  router.push('/zbkt/ztzb/content')
+}
 </script>
 
 <template>
   <common-header/>
-  <div class="w-full flex items-center justify-center shadow-sm h-60px">
+  <div class="w-full flex items-center justify-center shadow-sm h-60px bg-hex-fefefe">
     <div class="w-1400px flex items-center">
       <div class="text-lg text-hex-050026">专题直播</div>
       <el-divider direction="vertical" />
@@ -40,7 +46,7 @@ const data = $ref([
       <div class="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">
+          <div class="w-26px h-26px bg-hex-00A3FF rounded-md flex justify-center items-center cursor-pointer">
             <el-icon size="13" color="#fff">
               <IconSearch />
             </el-icon>
@@ -48,11 +54,11 @@ const data = $ref([
         </template>
       </el-input>
       <div class="flex text-dark-200 divide-dark-200 divide-x">
-        <div class="px-2">微课</div>
-        <div class="px-2">课件</div>
-        <div class="px-2">教案</div>
-        <div class="px-2">微视频</div>
-        <div class="px-2">网络资源</div>
+        <div class="px-2 cursor-pointer">微课</div>
+        <div class="px-2 cursor-pointer">课件</div>
+        <div class="px-2 cursor-pointer">教案</div>
+        <div class="px-2 cursor-pointer">微视频</div>
+        <div class="px-2 cursor-pointer">网络资源</div>
       </div>
     </div>
   </div>
@@ -98,7 +104,7 @@ const data = $ref([
               </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 class="h-26px leading-26px px-4 bg-gradient-to-l from-green-400 to-blue-500 text-white rounded-14px cursor-pointer" @click="handleJyClick(i)" >
               观看回放</div>
           </div>
 
@@ -107,6 +113,9 @@ const data = $ref([
     </div>
   </div>
 
+<div class="flex justify-end mb-4">
+  <el-pagination background layout="prev, pager, next" :total="1000" />
+</div>
 </template>
 
 <style scoped>

src/router/index.js

@@ -1,115 +1,135 @@
-import {createRouter, createWebHashHistory} from "vue-router";
+import { createRouter, createWebHashHistory } from "vue-router";
 
 export default createRouter({
-    history: createWebHashHistory(),
-    routes: [
-        {
-            path: '',
-            redirect: '/home'
-        },
-        {
-            path: '/home',
-            name: 'home',
-            title: '首页',
-            component: () => import("~/pages/home/index.vue"),
-        },
+	history: createWebHashHistory(),
+	routes: [
+		{
+			path: '',
+			redirect: '/home'
+		},
+		{
+			path: '/home',
+			name: 'home',
+			title: '首页',
+			component: () => import("~/pages/home/index.vue"),
+		},
 
-        {
-            path: '/zhjy',
-            name: 'zhjy',
-            component: () => import("~/pages/zhjy/index.vue"),
-        },
-        {
-            path: '/zhjy/zhjyzxxx',
-            name: "zhjy_zhjyzxxx",
-            component: () => import("~/pages/zhjy/zhjyzxxx/index.vue"),
-        },
-        {
-            path: '/zhjy/zhjyxtbk',
-            name: "zhjy_zhjyxtbk",
-            component: () => import("~/pages/zhjy/zhjyxtbk/index.vue"),
-        },
-        {
-            path: '/zhjy/zhjytbjy',
-            name: "zhjy_zhjytbjy",
-            component: () => import("~/pages/zhjy/zhjytbjy/index.vue"),
-        },
-        {
-            path: '/ysgc',
-            name: 'ysgc',
-            component: () => import("~/pages/ysgc/index.vue"),
-        },
-        {
-            path: '/szmsg',
-            name: 'szmsg',
-            component: () => import("~/pages/szmsg/index.vue"),
-        },
-        {
-            path: '/tskcz',
-            name: 'tskcz',
-            component: () => import('~/pages/szmsg/tskcz/index.vue'),
-        },
-        {
-            path: '/resource',
-            name: 'resource',
-            title: '资源',
-            component: () => import("~/pages/courseResources.vue"),
-        },
-        {
-            path: '/resourceAll',
-            name: 'resourceAll',
-            title: '全部资源',
-            component: () => import("~/pages/courseResourcesAll.vue"),
-        },
-        {
-            path:'/zbkt',
-            title: '直播课堂',
-            children: [
-                {
-                    path: '',
-                    name: 'zbkt',
-                    component: () => import("~/pages/zbkt/index.vue"),
-                },
-                {
-                    path: 'ssys',
-                    children: [
-                        {
-                            path: '',
-                            name: 'ssys',
-                            component: () => import("~/pages/zbkt/ssys/index.vue"),
-                        },
-                    ]
-                },
-                {
-                    path: 'wlzb',
+		{
+			path: '/zhjy',
+			name: 'zhjy',
+			component: () => import("~/pages/zhjy/index.vue"),
+		},
+		{
+			path: '/zhjy/zhjyzxxx',
+			name: "zhjy_zhjyzxxx",
+			component: () => import("~/pages/zhjy/zhjyzxxx/index.vue"),
+		},
+		{
+			path: '/zhjy/zhjyxtbk',
+			name: "zhjy_zhjyxtbk",
+			component: () => import("~/pages/zhjy/zhjyxtbk/index.vue"),
+		},
+		{
+			path: '/zhjy/zhjytbjy',
+			name: "zhjy_zhjytbjy",
+			component: () => import("~/pages/zhjy/zhjytbjy/index.vue"),
+		},
+		{
+			path: '/ysgc',
+			name: 'ysgc',
+			component: () => import("~/pages/ysgc/index.vue"),
+		},
+		{
+			path: '/szmsg',
+			name: 'szmsg',
+			component: () => import("~/pages/szmsg/index.vue"),
+		},
+		{
+			path: '/tskcz',
+			name: 'tskcz',
+			component: () => import('~/pages/szmsg/tskcz/index.vue'),
+		},
+		{
+			path: '/resource',
+			name: 'resource',
+			title: '资源',
+			component: () => import("~/pages/courseResources.vue"),
+		},
+		{
+			path: '/resourceAll',
+			name: 'resourceAll',
+			title: '全部资源',
+			component: () => import("~/pages/courseResourcesAll.vue"),
+		},
+		{
+			path: '/zbkt',
+			title: '直播课堂',
+			children: [
+				{
+					path: '',
+					name: 'zbkt',
+					component: () => import("~/pages/zbkt/index.vue"),
+				},
+				{
+					path: 'ssys',
+					children: [
+						{
+							path: '',
+							name: 'ssys',
+							component: () => import("~/pages/zbkt/ssys/index.vue"),
+						},
+						{
+							path: 'content',
+							name: 'ssys_content',
+							component: () => import("~/pages/zbkt/ssys/content.vue"),
+						},
+					]
+				},
+				{
+					path: 'wlzb',
 
-                    children: [
-                        {
-                            path: '',
-                            name: 'wlzb',
-                            component: () => import("~/pages/zbkt/wlzb/index.vue"),
-                        },
-                    ]
-                },
-                {
-                    path: 'ztzb',
-                    children: [
-                        {
-                            path: '',
-                            name: 'ztzb',
-                            component: () => import("~/pages/zbkt/ztzb/index.vue"),
-                        },
-                    ]
-                }
-            ]
-        },
-        {
-            path: '/resourceChapter',
-            name: 'resourceChapter',
-            title: '课程资源章节',
-            component: () => import("~/pages/courseResourcesChapter.vue"),
-        },
-    ]
+					children: [
+						{
+							path: '',
+							name: 'wlzb',
+							component: () => import("~/pages/zbkt/wlzb/index.vue"),
+						},
+						{
+							path: 'content',
+							name: 'wlzb_content',
+							component: () => import("~/pages/zbkt/wlzb/content.vue"),
+						},
+						{
+							path: 'detail',
+							name: 'wlzb_detail',
+							component: () => import("~/pages/zbkt/wlzb/detail.vue"),
+						},
+					]
+				},
+				{
+					path: 'ztzb',
+					children: [
+						{
+							path: '',
+							name: 'ztzb',
+							component: () => import("~/pages/zbkt/ztzb/index.vue"),
+						},
+						{
+							path: 'content',
+							name: 'ztzb_content',
+							component: () => import("~/pages/zbkt/ztzb/content.vue"),
+						},
+					]
+				}
+			]
+		},
+		{
+			path: '/resourceChapter',
+			name: 'resourceChapter',
+			title: '课程资源章节',
+			component: () => import("~/pages/courseResourcesChapter.vue"),
+		},
+	]
 
 })
 

windi.config.ts

@@ -1,7 +1,7 @@
 import { defineConfig } from 'windicss/helpers'
 
 export default defineConfig({
-  darkMode:'class',
+  darkMode: 'class',
   shortcuts: {
     card: 'rounded-xl bg-light-50 p-3 relative box-border',
     divider: 'w-full h-0 border border-solid border-gray-100 my-2',
@@ -11,7 +11,15 @@ export default defineConfig({
       'w-24px h-24px bg-blue-600 fill-light-100 rounded-2px cursor-pointer mx-4px p-2px box-border',
     flex_center: 'flex justify-center items-center',
     flex_start: 'flex justify-start items-center',
-    area:'flex bg-gray-100 text-gray-600 my-2 p-4 text-sm h-300px overflow-auto',
-    pre:'before:content-["|"] before:w-4px before:h-full before:inline-block before:text-transparent before:mr-6px before:bg-blue-400'
+    area: 'flex bg-gray-100 text-gray-600 my-2 p-4 text-sm h-300px overflow-auto',
+    pre: 'before:content-["|"] before:w-4px before:h-full before:inline-block before:text-transparent before:mr-6px before:bg-blue-400',
+    // _scrollbar: 'scrollbar scrollbar-thumb-gray-900 scrollbar-track-gray-100'
   },
+  plugins: [
+    require('@windicss/plugin-scrollbar'),
+    // ...
+  ],
+  variants: {
+    scrollbar: ['rounded']
+  }
 })