|
@@ -0,0 +1,227 @@
|
|
|
+<script setup lang="ts">
|
|
|
+// import geoblock from './home/geoblock.vue'
|
|
|
+import bar from './txwx/bar.vue'
|
|
|
+import lines from './txwx/lines.vue'
|
|
|
+import geo from '~/assets/img/home/geo.png'
|
|
|
+import under from '~/assets/img/home/under.webp'
|
|
|
+import stu from '~/assets/img/home/stu.webp'
|
|
|
+
|
|
|
+const b1data = $ref([
|
|
|
+ { title: '教师数量', num: '4366', unit: '人' },
|
|
|
+ { title: '学生数量', num: '111', unit: '人' },
|
|
|
+ { title: '学校数量', num: '111', unit: '人' },
|
|
|
+ { title: '名师总数', num: '11', unit: '所' },
|
|
|
+ { title: '上传资源总数', num: '111', unit: '人' },
|
|
|
+ { title: '教师直播次数', num: '111', unit: '次' },
|
|
|
+])
|
|
|
+
|
|
|
+const b3data = $ref([
|
|
|
+ ['桐乡市第十中学', '第一名', '2345人', '1.5W'],
|
|
|
+ ['桐乡市第十中学', '第一名', '2345人', '1.5W'],
|
|
|
+ ['桐乡市第十中学', '第一名', '2345人', '1.5W'],
|
|
|
+ ['桐乡市第十中学桐乡市第十中学桐乡市第十中学桐乡市第十中学', '第一名', '2345人', '1.5W'],
|
|
|
+ ['桐乡市第十中学', '第一名', '2345人', '1.5W'],
|
|
|
+])
|
|
|
+
|
|
|
+const b4data = $ref([
|
|
|
+ ['张大大', '桐乡市第十中学', '第一名', '1.5W'],
|
|
|
+ ['张大大', '桐乡市第十中学', '第一名', '1.5W'],
|
|
|
+ ['张大大', '桐乡市第十中学', '第一名', '1.5W'],
|
|
|
+])
|
|
|
+// const b5data = $ref([
|
|
|
+// ['张大大', '桐乡市第十中学', '第一名', '1.5W'],
|
|
|
+// ['张大大', '桐乡市第十中学', '第一名', '1.5W'],
|
|
|
+// ['张大大', '桐乡市第十中学', '第一名', '1.5W'],
|
|
|
+// ])
|
|
|
+// const b6data = $ref([
|
|
|
+// ['张大大', '桐乡市第十中学', '第一名', '1.5W'],
|
|
|
+// ['张大大', '桐乡市第十中学', '第一名', '1.5W'],
|
|
|
+// ['张大大', '桐乡市第十中学', '第一名', '1.5W'],
|
|
|
+// ])
|
|
|
+const b7data = $ref([
|
|
|
+ ['张大大', '桐乡市第十中学', '第一名', '1.5W'],
|
|
|
+ ['张大大', '桐乡市第十中学', '第一名', '1.5W'],
|
|
|
+ ['张大大', '桐乡市第十中学', '第一名', '1.5W'],
|
|
|
+])
|
|
|
+const b8data = $ref([
|
|
|
+ ['张大大', '桐乡市第十中学', '第一名', '1.5W'],
|
|
|
+ ['张大大', '桐乡市第十中学', '第一名', '1.5W'],
|
|
|
+ ['张大大', '桐乡市第十中学', '第一名', '1.5W'],
|
|
|
+])
|
|
|
+
|
|
|
+const router = useRouter()
|
|
|
+function go(name: string) {
|
|
|
+ router.push({ name })
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<template>
|
|
|
+ <div class="flex flex-col justify-between space-y-4">
|
|
|
+ <div class="h-520px flex justify-between">
|
|
|
+ <div
|
|
|
+ class="border border-hex-0A337E bg-block px-27px py-44px gap-x-33px gap-y-37px w-450px h-full grid grid-rows-3 grid-cols-2"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ v-for="({ title, num, unit }) in b1data" :key="title"
|
|
|
+ class="b1-item flex justify-center space-y-3 items-center flex-col"
|
|
|
+ >
|
|
|
+ <div class="text-30px font-bold text-hex-6ff">
|
|
|
+ {{ num }}<span class="text-20px">{{ unit }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="text-18px font-bold opacity-80">
|
|
|
+ {{ title }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="py-2 px-2 flex_center">
|
|
|
+ <img :src="geo" alt="">
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="w-560px h-full flex flex-col justify-between">
|
|
|
+ <div class="border border-hex-0A337E bg-block p-3 w-full">
|
|
|
+ <div>学校平均积分全市排名</div>
|
|
|
+ <div class="mt-2 mb-4">
|
|
|
+ <img class="h-7px" :src="under">
|
|
|
+ </div>
|
|
|
+ <div class="b-table">
|
|
|
+ <div v-for="(row, i) in b3data" :key="i" class="b-table-row">
|
|
|
+ <div v-for="(col, j) in row" :key="j" class="b-table-cell" :style="`width:${j === 0 ? '55%' : '15%'}`">
|
|
|
+ {{ col }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="border border-hex-0A337E bg-block p-3 w-full">
|
|
|
+ <div>学生积分排名</div>
|
|
|
+ <div class="mt-2 mb-4">
|
|
|
+ <img class="h-7px" :src="under">
|
|
|
+ </div>
|
|
|
+ <div class="b-table">
|
|
|
+ <div v-for="(row, i) in b4data" :key="i" class="b-table-row">
|
|
|
+ <div v-for="(col, j) in row" :key="j" class="b-table-cell" :style="`width:${j === 1 ? '55%' : '15%'}`">
|
|
|
+ {{ col }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="h-430px flex justify-between">
|
|
|
+ <div class="border border-hex-0A337E bg-block p-3 w-630px h-full">
|
|
|
+ <div class="flex">
|
|
|
+ <div>
|
|
|
+ <div>课程浏览点赞统计</div>
|
|
|
+ <div class="mt-2 mb-4">
|
|
|
+ <img class="h-7px" :src="under">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="b-btn flex_center ml-8" @click="go('txwx-detail')">
|
|
|
+ 点击查看详情
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="w-full h-400px">
|
|
|
+ <bar />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="border border-hex-0A337E bg-block p-3 w-630px h-full">
|
|
|
+ <div>用户登录趋势</div>
|
|
|
+ <div class="mt-2 mb-4">
|
|
|
+ <img class="h-7px" :src="under">
|
|
|
+ </div>
|
|
|
+ <div class="w-full h-400px">
|
|
|
+ <lines />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="w-560px h-full flex flex-col justify-between">
|
|
|
+ <div class="border border-hex-0A337E bg-block p-3 w-full h-207px">
|
|
|
+ <div>教师积分排名</div>
|
|
|
+ <div class="mt-2 mb-4">
|
|
|
+ <img class="h-7px" :src="under">
|
|
|
+ </div>
|
|
|
+ <div class="b-table">
|
|
|
+ <div v-for="(row, i) in b7data" :key="i" class="b-table-row">
|
|
|
+ <div v-for="(col, j) in row" :key="j" class="b-table-cell" :style="`width:${j === 1 ? '55%' : '15%'}`">
|
|
|
+ {{ col }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="border border-hex-0A337E bg-block p-3 w-full h-207px">
|
|
|
+ <div>今日访问用户</div>
|
|
|
+ <div class="mt-2 mb-4">
|
|
|
+ <img class="h-7px" :src="under">
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div>
|
|
|
+ <div v-for="(row, i) in b8data" :key="i" class="flex items-center h-42px justify-start text-14px px-18px text-20px">
|
|
|
+ <img :src="stu" alt="" class="h-20px mr-4">
|
|
|
+ <div class="w-100px tracking-1px">
|
|
|
+ {{ row[0] }}
|
|
|
+ </div>
|
|
|
+ <div class="cell flex-auto tracking-1px max-w-400px">
|
|
|
+ {{ row[1] }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<style>
|
|
|
+.b-btn {
|
|
|
+ width: 137px;
|
|
|
+ height: 32px;
|
|
|
+ background: #0d5bf7;
|
|
|
+ border: 1px solid #1bced7;
|
|
|
+ border-radius: 12px;
|
|
|
+ font-size: 14px;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.b1-item {
|
|
|
+ width: 180px;
|
|
|
+ height: 114px;
|
|
|
+ background: linear-gradient(90deg, rgba(0, 224, 219, 0.40) 3%, rgba(79, 248, 247, 0.09) 25%, rgba(102, 255, 255, 0.00) 52%, rgba(78, 248, 247, 0.10) 75%, rgba(0, 224, 219, 0.42));
|
|
|
+ border: 1px solid;
|
|
|
+ border-image: linear-gradient(270deg, #00d2d5, rgba(0, 210, 213, 0.18) 13%, rgba(0, 210, 213, 0.00) 50%, rgba(0, 210, 213, 0.20) 90%, rgba(0, 210, 213, 0.75)) 1 1;
|
|
|
+}
|
|
|
+
|
|
|
+.b-table .b-table-row {
|
|
|
+ width: 100%;
|
|
|
+ height: 42px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: start;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0 20px;
|
|
|
+ font-size: 14px;
|
|
|
+ letter-spacing: .5px;
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+.b-table .b-table-row:nth-child(2n+1) {
|
|
|
+ background: rgba(35, 160, 226, 0.20);
|
|
|
+ border-radius: 24px;
|
|
|
+}
|
|
|
+
|
|
|
+.b-table .b-table-row:nth-child(2n) {
|
|
|
+ background: transparent
|
|
|
+}
|
|
|
+
|
|
|
+.b-table .b-table-cell {
|
|
|
+ padding: 0 5px;
|
|
|
+ /* 超过一行省略号 */
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+}
|
|
|
+
|
|
|
+.cell {
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+}
|
|
|
+</style>
|