Browse Source

add:carousel

csdn1233 3 months ago
parent
commit
1bbc278b1f

+ 25 - 2
AIart-app/src/app/tab1/tab1.page.html

@@ -43,13 +43,36 @@
     <!-- 首部导航栏部分结束 -->
   </div>
   <!-- 轮播图部分开始 -->
-  <div>
+  <!-- <div>
     <ion-segment-view>
       <img alt="wu" src="../../assets/img/study.png" style="border-radius: 8px;position: relative;margin: 15px;display:flex ;align-items: center;
     justify-content: center;height: 200px;width: 90%;" />
     </ion-segment-view>
-  </div>
+  </div> -->
   <!-- 轮播图部分结束 -->
+  <!-- 创建外部展示容器 -->
+  <div class="banner-container">
+    <!-- 创建图片存储容器 -->
+    <!-- 轮播图圆点 -->
+    <input type="radio" name="radio-set" checked="checked" id="banner-control-1">
+    <a class="banner-nav-a" href="#banner01"></a>
+    <input type="radio" name="radio-set" id="banner-control-2">
+    <a class="banner-nav-a" href="#banner02"></a>
+    <input type="radio" name="radio-set" id="banner-control-3">
+    <a class="banner-nav-a" href="#banner03"></a>
+    <input type="radio" name="radio-set" id="banner-control-4">
+    <a class="banner-nav-a" href="#banner04"></a>
+    <input type="radio" name="radio-set" id="banner-control-5">
+    <a class="banner-nav-a" href="#banner05"></a>
+    <div class="banner-img-container">
+      <img src="../../assets/img/lunbo4.png" alt="">
+      <img src="../../assets/img/lunbo1.png" alt="">
+      <img src="../../assets/img/lunbo2.png" alt="">
+      <img src="../../assets/img/lunbo3.png" alt="">
+      <img src="../../assets/img/study.png" alt="">
+    </div>
+  </div>
+
   <!-- 中部导航栏部分开始 -->
   <div style="display: flex;align-items: center;justify-content: center;margin-bottom: 10px;">
     <div class="ion-activatable ripple-parent rounded-rectangle">

+ 138 - 0
AIart-app/src/app/tab1/tab1.page.scss

@@ -65,4 +65,142 @@
     font-size: 14px;
     font-weight: bold;
     text-align: center;
+}
+
+
+
+/* 自动轮播样式 */
+.banner-container {
+    width: 1200px;
+    height: 200px;
+    /* 轮播图居中 */
+    margin-bottom: 10px;
+    /* 隐藏超出展示容器的内容 */
+    overflow: hidden;
+    position: relative;
+}
+
+.banner-container .banner-img-container {
+    width: 6000px;
+    height: 200px;
+    overflow: hidden;
+    position: absolute;
+    /* 开启弹性盒,让图片横向排列 */
+    display: flex;
+    transition: transform 0.6s ease;
+}
+
+.banner-container .banner-img-container img {
+    width: 400px;
+    height: 200px;
+}
+
+/* 动画关键帧 */
+@keyframes run {
+
+    0%,
+    10% {
+        /* margin-left: 0; */
+        transform: translateX(0);
+    }
+
+    20%,
+    30% {
+        transform: translateX(-400px);
+    }
+
+    40%,
+    50% {
+        transform: translateX(-800px);
+    }
+
+    60%,
+    70% {
+        transform: translateX(-1200px);
+    }
+
+    80%,
+    90% {
+        transform: translateX(-1600px);
+    }
+
+    100% {
+        transform: translateX(0);
+    }
+}
+
+/* 轮播图圆点样式 */
+.banner-container a {
+    width: 18px;
+    height: 8px;
+    background: #898b8e;
+    position: absolute;
+    bottom: 1rem;
+    border-radius: 7px;
+    margin: 0;
+    z-index: 1;
+}
+
+.banner-container input {
+    width: 18px;
+    height: 8px;
+    position: absolute;
+    bottom: 1rem;
+    margin: 0;
+    cursor: pointer;
+    z-index: 2;
+    opacity: 0;
+}
+
+/* 设置导航圆点偏移量(居中布局)*/
+#banner-control-1,
+#banner-control-1+.banner-nav-a {
+    left: 9%;
+}
+
+#banner-control-2,
+#banner-control-2+.banner-nav-a {
+    left: 12%;
+}
+
+#banner-control-3,
+#banner-control-3+.banner-nav-a {
+    left: 15%;
+}
+
+#banner-control-4,
+#banner-control-4+.banner-nav-a {
+    left: 18%;
+}
+
+#banner-control-5,
+#banner-control-5+.banner-nav-a {
+    left: 21%;
+}
+
+/* 设置高亮 */
+/*当 input 被选中时 他的兄弟级a标签高亮展示*/
+input:checked+.banner-nav-a {
+    background-color: #b64d24;
+}
+
+/* 设置轮播图动画 */
+#banner-control-1:checked~.banner-img-container {
+    transform: translateX(0px);
+}
+
+#banner-control-2:checked~.banner-img-container {
+    transform: translateX(-400px);
+}
+
+#banner-control-3:checked~.banner-img-container {
+    transform: translateX(-800px);
+}
+
+#banner-control-4:checked~.banner-img-container {
+    transform: translateX(-1200px);
+}
+
+#banner-control-5:checked~.banner-img-container {
+    transform: translateX(-1600px);
 }

+ 3 - 0
AIart-app/src/app/tab1/tab1.page.ts

@@ -34,4 +34,7 @@ export class Tab1Page {
   goToInterestSearch() {
     this.router.navigate(['/tabs/interest-search'])
   }
+
+
+
 }

BIN
AIart-app/src/assets/img/banner1.jpg


BIN
AIart-app/src/assets/img/banner2.jpg


BIN
AIart-app/src/assets/img/banner3.jpeg


BIN
AIart-app/src/assets/img/banner4.png


BIN
AIart-app/src/assets/img/lunbo1.png


BIN
AIart-app/src/assets/img/lunbo2.png


BIN
AIart-app/src/assets/img/lunbo3.png


BIN
AIart-app/src/assets/img/lunbo4.png


BIN
AIart-app/src/assets/img/next.png


BIN
AIart-app/src/assets/img/prev.png


+ 108 - 1
AIart-prod/communitySharing.md

@@ -408,4 +408,111 @@ participant "评论表" as 评论数据库
 
 用户在作品展示页面加载所有作品,系统从数据库获取数据并展示。
 用户可以浏览作品详情,进行点赞和评论操作。
-系统在用户进行互动后,更新相应的数据,并评估哪些作品是热门作品。
+系统在用户进行互动后,更新相应的数据,并评估哪些作品是热门作品。
+
+
+```plantuml
+@startuml
+class University {
+    - String name
+    + void manageColleges()
+}
+
+class College {
+    - String collegeName
+    + void manageDepartments()
+    + void manageClasses()
+}
+
+class Department {
+    - String departmentName
+    + void arrangeTeachers()
+}
+
+class Teacher {
+    - String teacherName
+    - int teacherId
+    + void teachCourses()
+    + void assignTeachingTasks()
+}
+
+class Student {
+    - String studentName
+    - int studentId
+    + void selectCourses()
+    + void attendClasses()
+}
+
+class UndergraduateStudent extends Student {
+    - String major
+}
+
+class GraduateStudent extends Student {
+    - String researchDirection
+}
+
+class Course {
+    - String courseName
+    - int courseId
+    + void setCourseContent()
+}
+
+class TeachingTask {
+    - int taskId
+    + void setTaskDetails()
+}
+
+University "1" *-- "n" College
+College "1" *-- "n" Department
+College "1" *-- "n" Class
+Department "1" *-- "n" Teacher
+Student "1" <|-- "n" UndergraduateStudent
+Student "1" <|-- "n" GraduateStudent
+Teacher "1" *-- "n" TeachingTask
+Teacher "1" *-- "n" Course
+Student "n" *-- "m" Course
+@enduml
+```
+
+
+```plantuml
+@startuml
+title 大学教务管理系统选课顺序图
+
+actor Student as s
+participant Undergraduate as ug
+participant Graduate as gr
+participant Class as c
+participant College as col
+participant TeachingAndResearchOffice as tro
+participant Teacher as t
+participant Course as co
+participant TeachingTask as tt
+
+s -> ug: 是本科生\n请求选课
+s -> gr: 是研究生\n请求选课
+
+ug -> c: 查询可选课程
+gr -> c: 查询可选课程
+
+c -> col: 传递课程查询请求
+col -> tro: 请求获取授课教师及课程信息
+tro -> t: 查询授课教师\n获取课程信息
+t -> tt: 查看教学任务相关课程
+tt -> co: 获取课程详情
+
+co -> c: 返回课程详情
+c -> ug: 返回可选课程信息
+c -> gr: 返回可选课程信息
+
+ug -> co: 选择课程
+gr -> co: 选择课程
+
+co -> tt: 记录选课信息
+tt -> t: 通知教师选课情况
+t -> tro: 反馈选课情况至教研室
+tro -> col: 反馈至学院
+col -> c: 班级内更新选课状态
+c -> ug: 确认选课成功
+c -> gr: 确认选课成功
+@enduml