init:txwx

package.json

@@ -17,6 +17,7 @@
     "axios": "^0.27.2",
     "echarts": "^5.4.0",
     "echarts-liquidfill": "^3.1.0",
+    "element-plus": "^2.3.1",
     "vue": "^3.2.41",
     "vue-router": "^4.1.5"
   },

pnpm-lock.yaml

@@ -10,6 +10,7 @@ specifiers:
   axios: ^0.27.2
   echarts: ^5.4.0
   echarts-liquidfill: ^3.1.0
+  element-plus: ^2.3.1
   eslint: ^8.25.0
   husky: ^8.0.1
   pnpm: ^7.13.5
@@ -29,6 +30,7 @@ dependencies:
   axios: 0.27.2
   echarts: 5.4.0
   echarts-liquidfill: 3.1.0_echarts@5.4.0
+  element-plus: 2.3.1_vue@3.2.41
   vue: 3.2.41
   vue-router: 4.1.5_vue@3.2.41
 
@@ -187,6 +189,19 @@ packages:
       '@babel/helper-validator-identifier': 7.19.1
       to-fast-properties: 2.0.0
 
+  /@ctrl/tinycolor/3.6.0:
+    resolution: {integrity: sha512-/Z3l6pXthq0JvMYdUFyX9j0MaCltlIn6mfh9jLyQwg5aPKxkyNa0PTHtU1AlFXLNk55ZuAeJRcpvq+tmLfKmaQ==}
+    engines: {node: '>=10'}
+    dev: false
+
+  /@element-plus/icons-vue/2.1.0_vue@3.2.41:
+    resolution: {integrity: sha512-PSBn3elNoanENc1vnCfh+3WA9fimRC7n+fWkf3rE5jvv+aBohNHABC/KAR5KWPecxWxDTVT1ERpRbOMRcOV/vA==}
+    peerDependencies:
+      vue: ^3.2.0
+    dependencies:
+      vue: 3.2.41
+    dev: false
+
   /@esbuild/android-arm/0.15.11:
     resolution: {integrity: sha512-PzMcQLazLBkwDEkrNPi9AbjFt6+3I7HKbiYF2XtWQ7wItrHvEOeO3T8Am434zAozWtVP7lrTue1bEfc2nYWeCA==}
     engines: {node: '>=12'}
@@ -222,6 +237,16 @@ packages:
       - supports-color
     dev: true
 
+  /@floating-ui/core/1.2.4:
+    resolution: {integrity: sha512-SQOeVbMwb1di+mVWWJLpsUTToKfqVNioXys011beCAhyOIFtS+GQoW4EQSneuxzmQKddExDwQ+X0hLl4lJJaSQ==}
+    dev: false
+
+  /@floating-ui/dom/1.2.5:
+    resolution: {integrity: sha512-+sAUfpQ3Frz+VCbPCqj+cZzvEESy3fjSeT/pDWkYCWOBXYNNKZfuVsHuv8/JO2zze8+Eb/Q7a6hZVgzS81fLbQ==}
+    dependencies:
+      '@floating-ui/core': 1.2.4
+    dev: false
+
   /@humanwhocodes/config-array/0.10.7:
     resolution: {integrity: sha512-MDl6D6sBsaV452/QSdX+4CXIjZhIcI0PELsxUjk4U828yd58vk3bTIvk/6w5FY+4hIy9sLW0sfrV7K7Kc++j/w==}
     engines: {node: '>=10.10.0'}
@@ -295,6 +320,10 @@ packages:
       picomatch: 2.3.1
     dev: true
 
+  /@sxzz/popperjs-es/2.11.7:
+    resolution: {integrity: sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ==}
+    dev: false
+
   /@types/json-schema/7.0.11:
     resolution: {integrity: sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==}
     dev: true
@@ -303,6 +332,16 @@ packages:
     resolution: {integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==}
     dev: true
 
+  /@types/lodash-es/4.17.7:
+    resolution: {integrity: sha512-z0ptr6UI10VlU6l5MYhGwS4mC8DZyYer2mCoyysZtSF7p26zOX8UpbrV0YpNYLGS8K4PUFIyEr62IMFFjveSiQ==}
+    dependencies:
+      '@types/lodash': 4.14.191
+    dev: false
+
+  /@types/lodash/4.14.191:
+    resolution: {integrity: sha512-BdZ5BCCvho3EIXw6wUCXHe7rS53AIDPLE+JzwgT+OsJk53oBfbSmZZ7CX4VaRoN78N+TJpFi9QPlfIVNmJYWxQ==}
+    dev: false
+
   /@types/mdast/3.0.10:
     resolution: {integrity: sha512-W864tg/Osz1+9f4lrGTZpCSO5/z4608eUp19tbozkq2HJK6i3z1kT0H9tlADXuYIb1YYOBByU4Jsqkk75q48qA==}
     dependencies:
@@ -704,6 +743,10 @@ packages:
       es-shim-unscopables: 1.0.0
     dev: true
 
+  /async-validator/4.2.5:
+    resolution: {integrity: sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg==}
+    dev: false
+
   /asynckit/0.4.0:
     resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
     dev: false
@@ -878,6 +921,10 @@ packages:
   /csstype/2.6.21:
     resolution: {integrity: sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w==}
 
+  /dayjs/1.11.7:
+    resolution: {integrity: sha512-+Yw9U6YO5TQohxLcIkrXBeY73WP3ejHWVvx8XCk3gxvQDCTEmS48ZrSZCKciI7Bhl/uCMyxYtE9UqRILmFphkQ==}
+    dev: false
+
   /debug/2.6.9:
     resolution: {integrity: sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==}
     peerDependencies:
@@ -992,6 +1039,31 @@ packages:
       zrender: 5.4.0
     dev: false
 
+  /element-plus/2.3.1_vue@3.2.41:
+    resolution: {integrity: sha512-IBS7ic1mRyDXpOreRkredV4ByZSuax5HPb0zNOHm4qwKC4wm927yQv+Is0JbzxPzCW5zWaV4PLy9/Gl3E3v59w==}
+    peerDependencies:
+      vue: ^3.2.0
+    dependencies:
+      '@ctrl/tinycolor': 3.6.0
+      '@element-plus/icons-vue': 2.1.0_vue@3.2.41
+      '@floating-ui/dom': 1.2.5
+      '@popperjs/core': /@sxzz/popperjs-es/2.11.7
+      '@types/lodash': 4.14.191
+      '@types/lodash-es': 4.17.7
+      '@vueuse/core': 9.3.1_vue@3.2.41
+      async-validator: 4.2.5
+      dayjs: 1.11.7
+      escape-html: 1.0.3
+      lodash: 4.17.21
+      lodash-es: 4.17.21
+      lodash-unified: 1.0.3_tknf7errc3xdqocd3ryzzla7vq
+      memoize-one: 6.0.0
+      normalize-wheel-es: 1.2.0
+      vue: 3.2.41
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+    dev: false
+
   /entities/4.4.0:
     resolution: {integrity: sha512-oYp7156SP8LkeGD0GF85ad1X9Ai79WtRsZ2gxJqtBuzH+98YUV6jkHEKlZkMbcrjJjIVJNIDP/3WL9wQkoPbWA==}
     engines: {node: '>=0.12'}
@@ -1258,6 +1330,10 @@ packages:
       esbuild-windows-arm64: 0.15.11
     dev: true
 
+  /escape-html/1.0.3:
+    resolution: {integrity: sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==}
+    dev: false
+
   /escape-string-regexp/1.0.5:
     resolution: {integrity: sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==}
     engines: {node: '>=0.8.0'}
@@ -2161,13 +2237,28 @@ packages:
       p-locate: 5.0.0
     dev: true
 
+  /lodash-es/4.17.21:
+    resolution: {integrity: sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==}
+    dev: false
+
+  /lodash-unified/1.0.3_tknf7errc3xdqocd3ryzzla7vq:
+    resolution: {integrity: sha512-WK9qSozxXOD7ZJQlpSqOT+om2ZfcT4yO+03FuzAHD0wF6S0l0090LRPDx3vhTTLZ8cFKpBn+IOcVXK6qOcIlfQ==}
+    peerDependencies:
+      '@types/lodash-es': '*'
+      lodash: '*'
+      lodash-es: '*'
+    dependencies:
+      '@types/lodash-es': 4.17.7
+      lodash: 4.17.21
+      lodash-es: 4.17.21
+    dev: false
+
   /lodash.merge/4.6.2:
     resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
     dev: true
 
   /lodash/4.17.21:
     resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
-    dev: true
 
   /lru-cache/6.0.0:
     resolution: {integrity: sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==}
@@ -2204,6 +2295,10 @@ packages:
     resolution: {integrity: sha512-AW4DRS3QbBayY/jJmD8437V1Gombjf8RSOUCMFBuo5iHi58AGEgVCKQ+ezHkZZDpAQS75hcBMpLqjpJTjtUL7w==}
     dev: true
 
+  /memoize-one/6.0.0:
+    resolution: {integrity: sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==}
+    dev: false
+
   /merge-stream/2.0.0:
     resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==}
     dev: true
@@ -2313,6 +2408,10 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
+  /normalize-wheel-es/1.2.0:
+    resolution: {integrity: sha512-Wj7+EJQ8mSuXr2iWfnujrimU35R2W4FAErEyTmJoJ7ucwTn2hOUSsRehMb5RSYkxXGTM7Y9QpvPmp++w5ftoJw==}
+    dev: false
+
   /npm-run-path/4.0.1:
     resolution: {integrity: sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==}
     engines: {node: '>=8'}

src/App.vue

@@ -8,30 +8,18 @@ function routerReplace(path: string) {
 </script>
 
 <template>
-  <video :src="img_bg" loop autoplay muted class="bg-hex-060d27 w-screen h-screen fixed top-0 left-0 -z-10 blur-sm object-fill" />
-  <div class="w-screen h-screen overflow-hidden bg-hex-00000099 flex flex-col text-white">
-    <header class="w-full bg_img_header pt-6">
-      <div class="w-full flex justify-between text-lg mt-8">
-        <div class="flex">
-          <header-item to="/school">
-            学校
-          </header-item>
-          <header-item to="/teaching">
-            教学
-          </header-item>
-        </div>
-        <div class="w-360px h-12 -mt-8 cursor-pointer" @click="routerReplace('/')" />
-        <div class="flex">
-          <header-item to="/teacher">
-            教师
-          </header-item>
-          <header-item to="/student">
-            学生
-          </header-item>
-        </div>
-      </div>
+  <!-- <video
+        :src="img_bg" loop autoplay muted
+        class="bg-hex-060d27 w-screen h-screen fixed top-0 left-0 -z-10 blur-sm object-fill"
+      /> -->
+  <div class="w-screen h-screen overflow-hidden bg-hex-00000099 flex flex-col text-white bg_img">
+    <header class="w-full bg_img_header h-90px flex_center text-38px">
+      桐乡市互联网学校数据可视化大屏
     </header>
-    <div class="w-full flex-grow px-9 pb-6 overflow-y-auto scrollbar-thin scrollbar-thumb-rounded scrollbar-thumb-hex-fff6 scrollbar-track-transparent">
+
+    <div
+      class="w-full flex-grow px-8 pt-2 pb-2 overflow-y-auto scrollbar-thin scrollbar-thumb-rounded scrollbar-thumb-hex-fff6 scrollbar-track-transparent"
+    >
       <router-view class="h-full" />
     </div>
   </div>
@@ -44,16 +32,18 @@ body {
 }
 
 .bg_img {
-  background-image: url('~/assets/img/bg.png');
+  background-image: url('~/assets/img/txwx/bg.webp');
   background-repeat: no-repeat;
-  background-position: center;
+  /* background-position: center; */
+  background-size: 100%;
 }
 
 .bg_img_header {
-  background-image: url('~/assets/img/header_text.png');
+  background-image: url('~/assets/img/txwx/header.webp');
   background-repeat: no-repeat;
-  background-position: top center;
+  /* background-position: top center; */
   background-origin: content-box;
+  background-size: 100%;
 }
 
 .hovered:hover .switched {

src/pages/txwx.detail.vue

@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import bar from './txwx/bar2.vue'
+import under from '~/assets/img/home/under.webp'
+
+const formInline = $ref({
+  a: '',
+  b: '',
+  c: '',
+  d: '',
+})
+const options = [
+  {
+    value: 'Option1',
+    label: 'Option1',
+  },
+  {
+    value: 'Option2',
+    label: 'Option2',
+  },
+  {
+    value: 'Option3',
+    label: 'Option3',
+  },
+]
+
+const router = useRouter()
+function back() {
+  router.back()
+}
+</script>
+
+<template>
+  <div class="border border-hex-0A337E bg-block p-3 w-full h-full">
+    <div class="flex justify-between">
+      <div>
+        <div>用户登录趋势</div>
+        <div class="mt-2 mb-4">
+          <img class="h-7px" :src="under">
+        </div>
+      </div>
+      <el-button color="transparent" @click="back">
+        返回
+      </el-button>
+    </div>
+
+    <el-form :inline="true" :model="formInline" class="vars">
+      <el-form-item label="学科筛选：">
+        <el-select v-model="formInline.a" placeholder="全部">
+          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="年级筛选：">
+        <el-select v-model="formInline.a" placeholder="全部">
+          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="机构筛选：">
+        <el-select v-model="formInline.a" placeholder="全部">
+          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="资源筛选：">
+        <el-select v-model="formInline.a" placeholder="全部">
+          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+        </el-select>
+      </el-form-item>
+    </el-form>
+
+    <div>
+      <span class="text-18px">总资源数：</span>
+      <span class="text-30px">25.6w</span>
+    </div>
+    <div class="w-full h-760px">
+      <bar />
+    </div>
+  </div>
+</template>
+
+<style>
+.vars {
+  --el-fill-color-blank: #0A41BF37;
+
+}
+
+body{
+  --el-bg-color-overlay: #0A41BF37;
+  --el-fill-color-light: #02133a97;
+}
+</style>

src/pages/txwx.index.vue

@@ -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>

src/pages/txwx/bar.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import * as echarts from 'echarts'
+
+const chartRef = ref()
+onMounted(() => {
+  echarts.init(chartRef.value).setOption({
+    tooltip: {
+      trigger: 'item',
+    },
+    legend: {
+      top: '1%',
+      right: '5%',
+      textStyle: {
+        color: '#ccc',
+      },
+    },
+    grid: {
+      top: '8%',
+      bottom: '80px',
+    },
+    color: ['#7D7CFC', '#0293FD'],
+    dataset: {
+      source: [
+        ['date', '浏览量', '点赞量'],
+        ['名师资源', 1080, 2800],
+        ['名师在线', 2060, 2100],
+        ['直播课程', 2800, 1800],
+        ['家庭教育', 2600, 1800],
+        ['特色课程', 3100, 11000],
+        ['作业辅导', 3000, 1000],
+      ],
+    },
+    xAxis: {
+      type: 'category',
+      axisLine: {
+        show: true,
+
+        lineStyle: {
+          type: 'dashed',
+          color: '#ccc',
+        },
+      },
+    },
+    yAxis: {
+      axisLine: {
+        show: true,
+        lineStyle: {
+          type: 'dashed',
+          color: '#ccc',
+        },
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          type: 'dashed',
+          color: '#ccc',
+        },
+      },
+    },
+    // Declare several bar series, each will be mapped
+    // to a column of dataset.source by default.
+    series: [{ type: 'bar' }, { type: 'bar' }],
+
+  })
+})
+</script>
+
+<template>
+  <div ref="chartRef" class="w-full h-full " />
+</template>

src/pages/txwx/bar2.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import * as echarts from 'echarts'
+
+const chartRef = ref()
+onMounted(() => {
+  echarts.init(chartRef.value).setOption({
+    tooltip: {
+      trigger: 'item',
+    },
+    legend: {
+      top: '1%',
+      right: '5%',
+      textStyle: {
+        color: '#ccc',
+      },
+    },
+    grid: {
+      top: '8%',
+      bottom: '80px',
+    },
+    color: ['#7D7CFC', '#0293FD'],
+    dataset: {
+      source: [
+        ['date', '数量'],
+        ['语文', 1080],
+        ['数学', 2060],
+        ['英语', 2800],
+        ['物理', 2600],
+        ['化学', 3100],
+        ['生物', 3000],
+        ['政治', 3000],
+        ['历史', 3000],
+        ['地理', 3000],
+        ['其他', 3000],
+      ],
+    },
+    xAxis: {
+      type: 'category',
+      axisLine: {
+        show: true,
+
+        lineStyle: {
+          type: 'dashed',
+          color: '#ccc',
+        },
+      },
+    },
+    yAxis: {
+      axisLine: {
+        show: true,
+        lineStyle: {
+          type: 'dashed',
+          color: '#ccc',
+        },
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          type: 'dashed',
+          color: '#ccc',
+        },
+      },
+    },
+    // Declare several bar series, each will be mapped
+    // to a column of dataset.source by default.
+    series: [{ type: 'bar', barWidth: 50 }],
+
+  })
+})
+</script>
+
+<template>
+  <div ref="chartRef" class="w-full h-full " />
+</template>

src/pages/txwx/lines.vue

@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import * as echarts from 'echarts'
+
+const chartRef = ref()
+onMounted(() => {
+  echarts.init(chartRef.value).setOption({
+    // title: {
+    //   text: '结对帮扶情况',
+    //   textStyle: {
+    //     color: '#fff',
+    //   },
+    // },
+    tooltip: {
+      trigger: 'item',
+    },
+    legend: {
+      top: '1%',
+      right: '5%',
+      textStyle: {
+        color: '#ccc',
+      },
+    },
+    grid: {
+      top: '8%',
+      bottom: '80px',
+    },
+    color: ['#3E74FF', '#DC4F4E', '#3DB87B'],
+    // dataset: {
+    //   source: [
+    //     ['date', '全景课堂', '资源包', '自由结对'],
+    //     ['12-11', 15, 8, 11],
+    //     ['12-11', 32, 18, 23],
+    //     ['12-11', 45, 24, 33],
+    //     ['12-11', 101, 67, 86],
+    //     ['12-11', 122, 83, 64],
+    //     ['12-11', 162, 95, 60],
+    //     ['12-11', 201, 122, 147],
+    //   ],
+    // },
+    xAxis: {
+      type: 'category',
+      // axisLabel: { interval: 0, rotate: -20 },
+      axisLine: {
+        show: true,
+        lineStyle: {
+          type: 'dashed',
+          color: '#ccc',
+        },
+      },
+      boundaryGap: false,
+      data: ['12-11', '12-11', '12-11', '12-11', '12-11', '12-11', '12-11', '12-11'],
+    },
+    yAxis: {
+      type: 'value',
+      // interval: 10,
+      axisLine: {
+        show: true,
+        lineStyle: {
+          type: 'dashed',
+          color: '#ccc',
+        },
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          type: 'dashed',
+          color: '#ccc',
+        },
+      },
+    },
+    series: [
+      { type: 'line', name: '总用户', smooth: true, symbolSize: 12, itemStyle: { borderWidth: 2 }, lineStyle: { width: 6 }, data: [42, 46, 51, 53, 57, 61, 73, 71, 81], areaStyle: { opacity: 0.2 } },
+      { type: 'line', name: '教师', smooth: true, symbolSize: 12, itemStyle: { borderWidth: 2 }, lineStyle: { width: 6 }, data: [14, 26, 39, 43, 55, 57, 61, 69, 63], areaStyle: { opacity: 0.2 } },
+      { type: 'line', name: '学生', smooth: true, symbolSize: 12, itemStyle: { borderWidth: 2 }, lineStyle: { width: 6 }, data: [19, 23, 28, 32, 37, 42, 44, 51, 66], areaStyle: { opacity: 0.2 } },
+    ],
+
+  })
+})
+</script>
+
+<template>
+  <div ref="chartRef" class="w-full h-full " />
+</template>

src/router/index.ts

@@ -12,9 +12,19 @@ const router = createRouter({
     {
       path: '/',
       name: 'home',
-      component: () => import('~/pages/index.vue'),
+      component: () => import('~/pages/txwx.index.vue'),
     },
     {
+      path: '/txwx-detail',
+      name: 'txwx-detail',
+      component: () => import('~/pages/txwx.detail.vue'),
+    },
+    // {
+    //   path: '/',
+    //   name: 'home',
+    //   component: () => import('~/pages/index.vue'),
+    // },
+    {
       path: '/school',
       name: 'school',
       component: () => import('~/pages/school.vue'),

vite.config.ts

@@ -6,6 +6,7 @@ import AutoImport from 'unplugin-auto-import/vite'
 import Components from 'unplugin-vue-components/vite'
 import Icons from 'unplugin-icons/vite'
 import IconsResolver from 'unplugin-icons/resolver'
+import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -42,7 +43,7 @@ export default defineConfig({
         'src/store',
         'src/utils',
       ],
-      resolvers: [],
+      resolvers: [ElementPlusResolver()],
       vueTemplate: true,
       eslintrc: {
         enabled: true,
@@ -58,7 +59,7 @@ export default defineConfig({
       extensions: ['vue', 'md'],
       // allow auto import and register components used in markdown
       include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
-      resolvers: [IconsResolver()],
+      resolvers: [IconsResolver(), ElementPlusResolver()],
     }),
     Icons({
       compiler: 'vue3',