swipe

package.json

@@ -18,7 +18,9 @@
     "element-plus": "^2.3.2",
     "pinia": "^2.0.34",
     "sass": "^1.62.0",
+    "swiper": "^9.2.3",
     "vue": "^3.2.47",
+    "vue-awesome-swiper": "^5.0.1",
     "vue-router": "^4.0.13"
   },
   "devDependencies": {

pnpm-lock.yaml

@@ -20,6 +20,7 @@ specifiers:
   pnpm: ^8.1.0
   sass: ^1.62.0
   simple-git-hooks: ^2.8.1
+  swiper: ^9.2.3
   taze: ^0.9.1
   typescript: ^5.0.2
   unplugin-auto-import: ^0.15.2
@@ -30,6 +31,7 @@ specifiers:
   vite-plugin-windicss: ^1.8.10
   vitest: ^0.29.8
   vue: ^3.2.47
+  vue-awesome-swiper: ^5.0.1
   vue-router: ^4.0.13
   vue-tsc: ^1.2.0
   windicss: ^3.5.6
@@ -40,7 +42,9 @@ dependencies:
   element-plus: 2.3.3_vue@3.2.47
   pinia: 2.0.34_dtjfskxukdxv24psui2m5c75zy
   sass: 1.62.0
+  swiper: 9.2.3
   vue: 3.2.47
+  vue-awesome-swiper: 5.0.1_swiper@9.2.3+vue@3.2.47
   vue-router: 4.0.13_vue@3.2.47
 
 devDependencies:
@@ -5012,6 +5016,10 @@ packages:
     resolution: {integrity: sha512-XkD+zwiqXHikFZm4AX/7JSCXA98U5Db4AFd5XUg/+9UNtnH75+Z9KxtpYiJZx36mUDVOwH83pl7yvCer6ewM3w==}
     dev: true
 
+  /ssr-window/4.0.2:
+    resolution: {integrity: sha512-ISv/Ch+ig7SOtw7G2+qkwfVASzazUnvlDTwypdLoPoySv+6MqlOV10VwPSE6EWkGjhW50lUmghPmpYZXMu/+AQ==}
+    dev: false
+
   /ssri/9.0.1:
     resolution: {integrity: sha512-o57Wcn66jMQvfHG1FlYbWeZWW/dHZhJXjpIcTfXldXEk5nz5lStPo3mK0OJQfGR3RbZUlbISexbljkJzuEj/8Q==}
     engines: {node: ^12.13.0 || ^14.15.0 || >=16.0.0}
@@ -5149,6 +5157,13 @@ packages:
     engines: {node: '>= 0.4'}
     dev: true
 
+  /swiper/9.2.3:
+    resolution: {integrity: sha512-hxqcjIsYPP1fv+KIXPqGywl6ik8RBp0y0i9+TOIh55ca6SpZ5FrgNJ4QXPhsl6mlSBMEYPmh5zOKtZpI8zpWeQ==}
+    engines: {node: '>= 4.7.0'}
+    dependencies:
+      ssr-window: 4.0.2
+    dev: false
+
   /symbol-tree/3.2.4:
     resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}
     dev: true
@@ -5704,6 +5719,16 @@ packages:
       - terser
     dev: true
 
+  /vue-awesome-swiper/5.0.1_swiper@9.2.3+vue@3.2.47:
+    resolution: {integrity: sha512-mWjFJzUqA4lG+DmsmibvMpoiBnl+IH2SSeiiQ3i5M0t1y9FknTxnGT0DsMb2YdJLgjYMEK3sYOWzqgLnZMH8Lg==}
+    peerDependencies:
+      swiper: ^7.0.0  || ^8.0.0
+      vue: 3.x
+    dependencies:
+      swiper: 9.2.3
+      vue: 3.2.47
+    dev: false
+
   /vue-demi/0.13.11_vue@3.2.47:
     resolution: {integrity: sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==}
     engines: {node: '>=12'}

src/pages/ksfx/stu_wdsj.vue

@@ -0,0 +1,167 @@
+<template>
+  <div class="stu_stfx">
+    <div class="w-1200px h-600px m-auto flex flex-row justify-between">
+      <div class="w-188px h-full" style="background-color: #fff;">
+        <leftSiderStu />
+      </div>
+
+      <div class="w-1012px p-4 blueBg">
+
+        <swiper :modules="modules" :pagination="{ clickable: true }">
+          <swiper-slide>Slide 1</swiper-slide>
+          <swiper-slide>Slide 2</swiper-slide>
+          <swiper-slide>Slide 3</swiper-slide>
+        </swiper>
+
+
+
+
+
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useRouter } from "vue-router";
+import { skeletonProps } from 'element-plus';
+const router = useRouter();
+
+
+
+import SwiperClass, { Pagination } from 'Swiper'
+import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
+
+  // import swiper module styles
+import 'swiper/css'
+import 'swiper/css/pagination'
+
+const modules = [Pagination];
+
+
+
+
+
+let normal_subject = $ref("");
+
+let subject_list = [{
+  value: '1',
+  label: '语文'
+}, {
+  value: '2',
+  label: '数学'
+}]
+
+const tableData = [
+  {
+   xk: '语文',
+    tm: '1',
+    lx: '选择题',
+    nd: '5',
+    df: '12',
+    grdf: '12',
+
+    gr: '23%',
+    bj: '23%',
+    nj: '23%',
+    ztks:'23%',
+  },
+  {
+   xk: '语文',
+    tm: '1',
+    lx: '选择题',
+    nd: '5',
+    df: '12',
+    grdf: '12',
+
+    gr: '23%',
+    bj: '23%',
+    nj: '23%',
+    ztks:'23%',
+  },
+  {
+   xk: '语文',
+    tm: '1',
+    lx: '选择题',
+    nd: '5',
+    df: '12',
+    grdf: '12',
+
+    gr: '23%',
+    bj: '23%',
+    nj: '23%',
+    ztks:'23%',
+  },
+  {
+   xk: '语文',
+    tm: '1',
+    lx: '选择题',
+    nd: '5',
+    df: '12',
+    grdf: '12',
+
+    gr: '23%',
+    bj: '23%',
+    nj: '23%',
+    ztks:'23%',
+  },
+  {
+   xk: '语文',
+    tm: '1',
+    lx: '选择题',
+    nd: '5',
+    df: '12',
+    grdf: '12',
+
+    gr: '23%',
+    bj: '23%',
+    nj: '23%',
+    ztks:'23%',
+  },
+  {
+   xk: '语文',
+    tm: '1',
+    lx: '选择题',
+    nd: '5',
+    df: '12',
+    grdf: '12',
+
+    gr: '23%',
+    bj: '23%',
+    nj: '23%',
+    ztks:'23%',
+  },
+  {
+   xk: '语文',
+    tm: '1',
+    lx: '选择题',
+    nd: '5',
+    df: '12',
+    grdf: '12',
+
+    gr: '23%',
+    bj: '23%',
+    nj: '23%',
+    ztks:'23%',
+  },
+]
+</script>
+
+<style scoped>
+@import '@/styles/ksfx.css';
+
+.singleT {
+  flex: 1;
+  font-size: 16px;
+  line-height: 74px;
+  width: fit-content;
+  text-align: center;
+  background: #003eee;
+}
+.secFullWidth{
+  flex: 1;
+  width: fit-content;
+}
+
+</style>