diff --git a/ant-design-vue-jeecg/src/views/cms/assets/bg03.png b/ant-design-vue-jeecg/src/views/cms/assets/bg03.png new file mode 100644 index 0000000..9bd682a Binary files /dev/null and b/ant-design-vue-jeecg/src/views/cms/assets/bg03.png differ diff --git a/ant-design-vue-jeecg/src/views/cms/assets/bg04.png b/ant-design-vue-jeecg/src/views/cms/assets/bg04.png new file mode 100644 index 0000000..5710ade Binary files /dev/null and b/ant-design-vue-jeecg/src/views/cms/assets/bg04.png differ diff --git a/ant-design-vue-jeecg/src/views/cms/assets/bg05.png b/ant-design-vue-jeecg/src/views/cms/assets/bg05.png new file mode 100644 index 0000000..6c63101 Binary files /dev/null and b/ant-design-vue-jeecg/src/views/cms/assets/bg05.png differ diff --git a/ant-design-vue-jeecg/src/views/cms/assets/bg06.png b/ant-design-vue-jeecg/src/views/cms/assets/bg06.png new file mode 100644 index 0000000..4e9d14e Binary files /dev/null and b/ant-design-vue-jeecg/src/views/cms/assets/bg06.png differ diff --git a/ant-design-vue-jeecg/src/views/cms/assets/bg07.png b/ant-design-vue-jeecg/src/views/cms/assets/bg07.png new file mode 100644 index 0000000..0a7affb Binary files /dev/null and b/ant-design-vue-jeecg/src/views/cms/assets/bg07.png differ diff --git a/ant-design-vue-jeecg/src/views/cms/assets/bg08.png b/ant-design-vue-jeecg/src/views/cms/assets/bg08.png new file mode 100644 index 0000000..6848cdd Binary files /dev/null and b/ant-design-vue-jeecg/src/views/cms/assets/bg08.png differ diff --git a/ant-design-vue-jeecg/src/views/cms/assets/icon01.png b/ant-design-vue-jeecg/src/views/cms/assets/icon01.png new file mode 100644 index 0000000..66e0b15 Binary files /dev/null and b/ant-design-vue-jeecg/src/views/cms/assets/icon01.png differ diff --git a/ant-design-vue-jeecg/src/views/cms/assets/icon02.png b/ant-design-vue-jeecg/src/views/cms/assets/icon02.png new file mode 100644 index 0000000..222f903 Binary files /dev/null and b/ant-design-vue-jeecg/src/views/cms/assets/icon02.png differ diff --git a/ant-design-vue-jeecg/src/views/cms/assets/icon03.png b/ant-design-vue-jeecg/src/views/cms/assets/icon03.png new file mode 100644 index 0000000..7766141 Binary files /dev/null and b/ant-design-vue-jeecg/src/views/cms/assets/icon03.png differ diff --git a/ant-design-vue-jeecg/src/views/cms/assets/icon04.png b/ant-design-vue-jeecg/src/views/cms/assets/icon04.png new file mode 100644 index 0000000..b21c715 Binary files /dev/null and b/ant-design-vue-jeecg/src/views/cms/assets/icon04.png differ diff --git a/ant-design-vue-jeecg/src/views/cms/assets/icon05.png b/ant-design-vue-jeecg/src/views/cms/assets/icon05.png new file mode 100644 index 0000000..e96f877 Binary files /dev/null and b/ant-design-vue-jeecg/src/views/cms/assets/icon05.png differ diff --git a/ant-design-vue-jeecg/src/views/cms/assets/icon06.png b/ant-design-vue-jeecg/src/views/cms/assets/icon06.png new file mode 100644 index 0000000..85965fe Binary files /dev/null and b/ant-design-vue-jeecg/src/views/cms/assets/icon06.png differ diff --git a/ant-design-vue-jeecg/src/views/cms/assets/icon07.png b/ant-design-vue-jeecg/src/views/cms/assets/icon07.png new file mode 100644 index 0000000..57863ba Binary files /dev/null and b/ant-design-vue-jeecg/src/views/cms/assets/icon07.png differ diff --git a/ant-design-vue-jeecg/src/views/cms/assets/icon08.png b/ant-design-vue-jeecg/src/views/cms/assets/icon08.png new file mode 100644 index 0000000..c82ca17 Binary files /dev/null and b/ant-design-vue-jeecg/src/views/cms/assets/icon08.png differ diff --git a/ant-design-vue-jeecg/src/views/cms/assets/icon09.png b/ant-design-vue-jeecg/src/views/cms/assets/icon09.png new file mode 100644 index 0000000..b56a7d3 Binary files /dev/null and b/ant-design-vue-jeecg/src/views/cms/assets/icon09.png differ diff --git a/ant-design-vue-jeecg/src/views/cms/home.vue b/ant-design-vue-jeecg/src/views/cms/home.vue index 61e20cf..87f84be 100644 --- a/ant-design-vue-jeecg/src/views/cms/home.vue +++ b/ant-design-vue-jeecg/src/views/cms/home.vue @@ -4,7 +4,7 @@
- +
@@ -29,17 +29,199 @@

课程体系

全面落实立德树人根本任务，CDIO工程教育理念

- +
+
+
+
+
+ + {{item.text}} +
+
+
+
+
+
+
+ + {{item.title}} +
+
+
+
+ + {{item.title}} +
+
+
+
+
+
+ + {{item.title}} +
+
+
+
+ + {{item.title}} +
+
+ +
+
+ + +
+ +
+
+ + +
+
大{{chineseNumbers[item.date-1]}}开课
+
+ {{item.title}} + 任课老师：{{item.teacher}} +
+
+ +
+ +
+ + +
+
大{{chineseNumbers[item.date-1]}}开课
+
+ {{item.title}} + 任课老师：{{item.teacher}} +
+
+ +
+
+ + +
+
大{{chineseNumbers[item.date-1]}}开课
+
+ {{item.title}} + 任课老师：{{item.teacher}} +
+
+ +
+
+ + +
+
+ +

专业目标

全面落实立德树人根本任务，CDIO工程教育理念

- -
-

毕业要求

-

适应产业与社会变革的国际化应用型人才应具备的能力

+
+
+
+ +
+
+
+
+ +
+
+

专业目标一

+

具有良好的社会与职业道德规范，遵守国内外法律法规，具备担当精神、工匠精神、社会和环境可持续发展意识。

+
+
+
+
+ +
+
+

专业目标二

+

具有扎实的数理知识、专业基础理论和专业技能，具有良好的学科素养和工程开发能力，能有效运用工程知识和技术原理，解决软件工程领域的复杂工程问题。

+
+
+
+
+ +
+
+

专业目标三

+

能够在软件工程相关领域担任项目经理、产品经理、软件架构师、软件开发工程师、软件测试工程师、软件服务咨询师等工作。

+
+
+
+
+ +
+
+

专业目标四

+

创新能力和持续发展能力。在国际化背景下，能够胜任软件工程领域相关的沟通协作、人员组织以及计划管理等工作。

+
+
+
+
+ +
+
+

专业目标五

+

具有良好的社会与职业道德规范，遵守国内外法律法规，具备担当精神、工匠精神、社会和环境可持续发展意识。

+
+
+
+
+ +
+
+
+

毕业要求

+

适应产业与社会变革的国际化应用型人才应具备的能力

+
+
+
+ +
+
+ + +
+
+
+

{{index+1}}

+

{{item.title}}

+

+ + 2023达成度 +

+

{{item.text}}

+
+
+
+ + +
+
+
+

{{index+1}}

+

{{item.title}}

+

2023达成度

+

{{item.text}}

+
+
+
+ + + +
+
- +
@@ -71,6 +253,649 @@ export default { date: "2023.01.11", }, ], + chineseNumbers: ['一', '二', '三', '四'], + iconList:[ + { + url:require("./assets/icon01.png"), + text:"专业基础课" + }, + { + url:require("./assets/icon02.png"), + text:"人文社科通识课" + }, + { + url:require("./assets/icon03.png"), + text:"专业核心课" + }, + { + url:require("./assets/icon04.png"), + text:"第二课堂" + }, + { + url:require("./assets/icon05.png"), + text:"数学与自然科学课" + }, + { + url:require("./assets/icon06.png"), + text:"选修课" + }, + { + url:require("./assets/icon07.png"), + text:"实践课" + }, + ], + // 课程体系-右 + courseList:[ + { + date:1, + title:"人机交互设计方法", + teacher:"张三", + url:require("./assets/icon01.png") + }, + { + date:2, + title:"人机交互设计方法", + teacher:"张三", + url:require("./assets/icon05.png") + }, + { + date:3, + title:"人机交互设计方法", + teacher:"张三", + url:require("./assets/icon07.png") + }, + { + date:4, + title:"人机交互设计方法", + teacher:"张三", + url:require("./assets/icon03.png") + }, + { + date:1, + title:"人机交互设计方法", + teacher:"张三", + url:require("./assets/icon01.png") + }, + { + date:2, + title:"人机交互设计方法", + teacher:"张三", + url:require("./assets/icon05.png") + }, + { + date:3, + title:"人机交互设计方法", + teacher:"张三", + url:require("./assets/icon07.png") + }, + { + date:4, + title:"人机交互设计方法", + teacher:"张三", + url:require("./assets/icon03.png") + }, + ], + // 课程体系-左 + courseAllData:[ + { + term:1, + semester01:{ + course01:[ + { + title:"人文社科通识课", + url:require("./assets/icon01.png") + }, + { + title:"第二课堂", + url:require("./assets/icon01.png") + }, + { + title:"选修课", + url:require("./assets/icon01.png") + }, + ], + course02:[ + { + title:"计算机导论", + url:require("./assets/icon01.png") + }, + { + title:"高级编程", + url:require("./assets/icon01.png") + }, + { + title:"数据结构", + url:require("./assets/icon01.png") + }, + { + title:"编程导论", + url:require("./assets/icon01.png") + }, + { + title:"人机交互射击方法", + url:require("./assets/icon01.png") + }, + { + title:"高等数学", + url:require("./assets/icon01.png") + }, + ] + }, + semester02:{ + course01:[ + { + title:"人文社科通识课", + url:require("./assets/icon01.png") + }, + { + title:"第二课堂", + url:require("./assets/icon01.png") + }, + { + title:"选修课", + url:require("./assets/icon01.png") + }, + ], + course02:[ + { + title:"计算机导论", + url:require("./assets/icon01.png") + }, + { + title:"高级编程", + url:require("./assets/icon01.png") + }, + { + title:"数据结构", + url:require("./assets/icon01.png") + }, + { + title:"编程导论", + url:require("./assets/icon01.png") + }, + { + title:"人机交互射击方法", + url:require("./assets/icon01.png") + }, + { + title:"高等数学", + url:require("./assets/icon01.png") + }, + ] + } + }, + { + term:2, + semester01:{ + course01:[ + { + title:"人文社科通识课", + url:require("./assets/icon01.png") + }, + { + title:"第二课堂", + url:require("./assets/icon01.png") + }, + { + title:"选修课", + url:require("./assets/icon01.png") + }, + ], + course02:[ + { + title:"计算机导论", + url:require("./assets/icon01.png") + }, + { + title:"高级编程", + url:require("./assets/icon01.png") + }, + { + title:"数据结构", + url:require("./assets/icon01.png") + }, + { + title:"编程导论", + url:require("./assets/icon01.png") + }, + { + title:"人机交互射击方法", + url:require("./assets/icon01.png") + }, + { + title:"高等数学", + url:require("./assets/icon01.png") + }, + ] + }, + semester02:{ + course01:[ + { + title:"人文社科通识课", + url:require("./assets/icon01.png") + }, + { + title:"第二课堂", + url:require("./assets/icon01.png") + }, + { + title:"选修课", + url:require("./assets/icon01.png") + }, + ], + course02:[ + { + title:"计算机导论", + url:require("./assets/icon01.png") + }, + { + title:"高级编程", + url:require("./assets/icon01.png") + }, + { + title:"数据结构", + url:require("./assets/icon01.png") + }, + { + title:"编程导论", + url:require("./assets/icon01.png") + }, + { + title:"人机交互射击方法", + url:require("./assets/icon01.png") + }, + { + title:"高等数学", + url:require("./assets/icon01.png") + }, + ] + } + }, + { + term:3, + semester01:{ + course01:[ + { + title:"人文社科通识课", + url:require("./assets/icon01.png") + }, + { + title:"第二课堂", + url:require("./assets/icon01.png") + }, + { + title:"选修课", + url:require("./assets/icon01.png") + }, + ], + course02:[ + { + title:"计算机导论", + url:require("./assets/icon01.png") + }, + { + title:"高级编程", + url:require("./assets/icon01.png") + }, + { + title:"数据结构", + url:require("./assets/icon01.png") + }, + { + title:"编程导论", + url:require("./assets/icon01.png") + }, + { + title:"人机交互射击方法", + url:require("./assets/icon01.png") + }, + { + title:"高等数学", + url:require("./assets/icon01.png") + }, + ] + }, + semester02:{ + course01:[ + { + title:"人文社科通识课", + url:require("./assets/icon01.png") + }, + { + title:"第二课堂", + url:require("./assets/icon01.png") + }, + { + title:"选修课", + url:require("./assets/icon01.png") + }, + ], + course02:[ + { + title:"计算机导论", + url:require("./assets/icon01.png") + }, + { + title:"高级编程", + url:require("./assets/icon01.png") + }, + { + title:"数据结构", + url:require("./assets/icon01.png") + }, + { + title:"编程导论", + url:require("./assets/icon01.png") + }, + { + title:"人机交互射击方法", + url:require("./assets/icon01.png") + }, + { + title:"高等数学", + url:require("./assets/icon01.png") + }, + ] + } + }, + { + term:4, + semester01:{ + course01:[ + { + title:"人文社科通识课", + url:require("./assets/icon01.png") + }, + { + title:"第二课堂", + url:require("./assets/icon01.png") + }, + { + title:"选修课", + url:require("./assets/icon01.png") + }, + ], + course02:[ + { + title:"计算机导论", + url:require("./assets/icon01.png") + }, + { + title:"高级编程", + url:require("./assets/icon01.png") + }, + { + title:"数据结构", + url:require("./assets/icon01.png") + }, + { + title:"编程导论", + url:require("./assets/icon01.png") + }, + { + title:"人机交互射击方法", + url:require("./assets/icon01.png") + }, + { + title:"高等数学", + url:require("./assets/icon01.png") + }, + ] + }, + semester02:{ + course01:[ + { + title:"人文社科通识课", + url:require("./assets/icon01.png") + }, + { + title:"第二课堂", + url:require("./assets/icon01.png") + }, + { + title:"选修课", + url:require("./assets/icon01.png") + }, + ], + course02:[ + { + title:"计算机导论", + url:require("./assets/icon01.png") + }, + { + title:"高级编程", + url:require("./assets/icon01.png") + }, + { + title:"数据结构", + url:require("./assets/icon01.png") + }, + { + title:"编程导论", + url:require("./assets/icon01.png") + }, + { + title:"人机交互射击方法", + url:require("./assets/icon01.png") + }, + { + title:"高等数学", + url:require("./assets/icon01.png") + }, + ] + } + } + ], + // 专业目标-左 + option01:{ + legend: { + data: ['学年一', '学年二', '学年三'], + textStyle: { + fontSize: 12 + }, + }, + radar: { + indicator: [ + { name: '专业目标一', max: 100 }, + { name: '专业目标二', max: 100 }, + { name: '专业目标三', max: 100 }, + { name: '专业目标四', max: 100 }, + { name: '专业目标五', max: 100 }], + }, + series: [ + { + name: '学年一', + type: 'radar', + data: [72, 85, 90, 90, 70], + animationCurve: 'easeOutBounce', + itemStyle:{} + }, + { + name: '学年二', + type: 'radar', + data: [90, 90, 90, 90, 90], + animationCurve: 'easeOutBounce' + }, + { + name: '学年三', + type: 'radar', + data: [82, 85, 90, 90, 80], + animationCurve: 'easeOutBounce' + }, + ] + }, + // 毕业要求-左 + option03:{ + legend: { + data: ['实际', '标准'] + }, + radar: { + indicator: [ + { name: '终身学习', max: 100 }, + { name: '工程知识', max: 100 }, + { name: '问题分析', max: 100 }, + { name: '设计/开发解决方案', max: 100 }, + { name: '研究', max: 100 }, + { name: '使用现代工具', max: 100 }, + { name: '工程与社会', max: 100 }, + { name: '环境和可持续发展', max: 100 }, + { name: '职业规范', max: 100 }, + { name: '个人和团队', max: 100 }, + { name: '沟通', max: 100 }, + { name: '项目管理', max: 100 } + ] + }, + series: [ + { + name: '实际', + type: 'radar', + data: [76, 78, 87, 65, 77,84,76, 78, 87, 65, 77,84,], + label: { + show: true, + + }, + animationCurve: 'easeOutBounce' + }, + { + name: '标准', + type: 'radar', + data: [90, 90, 90, 90, 90,90,90, 90, 90, 90, 90,90,], + label: { + show: true + }, + animationCurve: 'easeOutBounce' + } + ] + }, + // 专业目标-右 + option02:{ + series: [ + { + type: 'gauge', + startAngle: -Math.PI / 2, + endAngle: Math.PI * 1.5, + arcLineWidth: 2, + data: [ + { name: 'itemA', value: 0, gradient: ['#00FFF0'] } + ], + axisLabel: { + show: false + }, + axisTick: { + show: false + }, + pointer: { + show: false + }, + dataItemStyle: { + lineCap: 'round' + }, + details: { + show: true, + formatter: '{value}%', + style: { + fill: '#fff', + fontSize: 14 + } + } + } + ] + }, + // 毕业要求-右 + option04:{ + series: [ + { + type: 'gauge', + startAngle: -Math.PI / 2, + endAngle: Math.PI * 1.5, + arcLineWidth: 2, + data: [ + { name: 'itemA', value: 60, gradient: ['#00FFF0'] } + ], + axisLabel: { + show: false + }, + axisTick: { + show: false + }, + pointer: { + show: false + }, + dataItemStyle: { + lineCap: 'round' + }, + details: { + show: true, + formatter: '{value}%', + style: { + fill: '#fff', + fontSize: 14 + } + } + } + ] + }, + // 专业目标列表 + targetList:[ + { + title:"专业目标一", + text:"具有良好的社会与职业道德规范，遵守国内外法律法规，具备担当精神、工匠精神、社会和环境可持续发展意识。", + normalData:90, + actualData:76 + } + ], + targetChartList:[], + // 毕业要求列表 + requireList:[ + { + title:"工程知识", + text:"能够将数学、自然科学、工程基础和专业知识用于解决复杂软件工程问题。" + }, + { + title:"问题分析", + text:"够应用数学、自然科学和工程科学的基本原理，识别、表达、并通过文献研究分析复杂软件..." + }, + { + title:"设计/开发解决方案", + text:"能够设计针对软件工程及其应用领域复杂工程问题的解决方案，设计和开发满足特定需求的..." + }, + { + title:"研究", + text:"能够基于科学原理并采用科学方法对软件工程及其应用领域复杂工程问题进行研究，包括设..." + }, + { + title:"使用现代工具", + text:"能够针对软件工程及其应用领域复杂工程问题，开发、选择与使用恰当的技术、资源、现代..." + }, + { + title:"工程与社会", + text:"能够基于软件工程相关背景知识进行合理分析，评价专业工程实践和复杂工程问题解决方案..." + }, + { + title:"工程知识", + text:"能够将数学、自然科学、工程基础和专业知识用于解决复杂软件工程问题。" + }, + { + title:"问题分析", + text:"够应用数学、自然科学和工程科学的基本原理，识别、表达、并通过文献研究分析复杂软件..." + }, + { + title:"设计/开发解决方案", + text:"能够设计针对软件工程及其应用领域复杂工程问题的解决方案，设计和开发满足特定需求的..." + }, + { + title:"研究", + text:"能够基于科学原理并采用科学方法对软件工程及其应用领域复杂工程问题进行研究，包括设..." + }, + { + title:"使用现代工具", + text:"能够针对软件工程及其应用领域复杂工程问题，开发、选择与使用恰当的技术、资源、现代..." + }, + { + title:"工程与社会", + text:"能够基于软件工程相关背景知识进行合理分析，评价专业工程实践和复杂工程问题解决方案..." + }, + ], obj:{}, url:{ list:"/cms/front/getColumnList", @@ -88,6 +913,8 @@ export default { } ), this.playBySeconds(6)//从第六秒开始 + this.targetChartList = [78,88,95,78,92] + this.option02.series[0].data[0].value = 60 }, methods: { @@ -120,23 +947,24 @@ export default { @import "./assets/reset.css"; .home { text-align: center; + font-family: PingFang SC-Regular, PingFang SC; } .header { background: #2080f7; } .main { - width: 1620px; - margin: 0 auto; + padding:0 100px; + min-width: 1200px; margin-top: -250px; z-index: 99; position: relative; .img { - width: 1073px; + width: 66%; height: 547px; - /*background: #d9d9d9;*/ + background: #d9d9d9; } .lanmu { - width: 519px; + width: 32%; height: 547px; box-sizing: border-box; background: #ffffff; @@ -144,6 +972,7 @@ export default { border-radius: 4px 4px 4px 4px; padding: 50px; .title { + margin-top: 20px; border-bottom: 1px solid #d9d9d9; .l { font-size: 18px; @@ -179,7 +1008,7 @@ export default { } } .title { - margin-top: 20px; + margin-top: 150px; .title1 { font-size: 42px; font-weight: 500; @@ -190,6 +1019,420 @@ export default { font-size: 20px; font-weight: 400; color: #777777; + margin-bottom: 100px; } } + .kctx{ + margin: auto; + &>div{ + display: flex; + justify-content: center; + .kctx-l{ + position: relative; + width: 62%; + height:650px; + background: #F2F6FE; + margin-right: 20px; + .iconDiv{ + width: 30%; + padding-top: 40px; + padding-left: 40px; + display: flex; + flex-wrap: wrap; + justify-content: space-between; + align-content: space-between; + .item{ + width: 50%; + display: flex; + align-items: center; + img{ + width: 26%; + margin-right: 15px; + } + span{ + text-align: left; + width: 8em;overflow: hidden;text-overflow: ellipsis;white-space: nowrap; + color: #0052FF; + font-size: 12px; + line-height: 14px; + } + &:nth-child(even){ + img{ + width: 16.5%; + } + } + } + } + .kctx-main{ + position: absolute; + top: 5%; + right: 25%; + width: 700px; + transform-origin: bottom center; + transform: rotate(30deg); + .kctx-main-item{ + width: 100%; + height: 170px; + display: flex; + justify-content: space-between; + align-items: center; + margin-top: -20px; + &:nth-child(1){ + margin-left: 60px; + } + &:nth-child(3){ + margin-left: -60px; + } + &:nth-child(4){ + margin-left: -120px; + } + .kctx-main-item-l{ + width: 40%; + height: 100%; + background: url("./assets/bg06.png") ; + background-size: 100% 100% ; + background-position: left left; + display: flex; + flex-direction: column; + .kctx-main-item-l-t{ + height: 35%; + display: flex; + padding-left: 35px; + .imgDiv{ + width: 4em; + margin-right: 10px; + display: flex; + flex-direction: column; + align-items: center; + img{ + width: 60%; + } + span{ + color: #0052FF; + transform: scale(0.8); + line-height: 14px; + } + } + } + .kctx-main-item-l-b{ + height: 35%; + display: flex; + padding-left: 20px; + .imgDiv{ + width: 4em; + margin-right: 10px; + display: flex; + flex-direction: column; + align-items: center; + img{ + width: 60%; + } + span{ + color: #0052FF; + transform: scale(0.8); + line-height: 14px; + } + } + } + } + .kctx-main-item-r{ + height: 100%; + width: 60%; + background: url("./assets/bg05.png"); + background-size: 100% 100% ; + background-position: left left; + display: flex; + flex-direction: column; + .kctx-main-item-r-t{ + height: 35%; + display: flex; + padding-left: 40px; + .imgDiv{ + width: 4em; + margin-right: 10px; + display: flex; + flex-direction: column; + align-items: center; + img{ + width: 60%; + } + span{ + color: #0052FF; + transform: scale(0.8); + line-height: 14px; + } + } + } + .kctx-main-item-r-b{ + height: 35%; + display: flex; + padding-left: 20px; + .imgDiv{ + width: 4em; + margin-right: 10px; + display: flex; + flex-direction: column; + align-items: center; + img{ + width: 60%; + } + span{ + color: #0052FF; + transform: scale(0.8); + line-height: 14px; + } + } + } + } + + } + .child01{ + position: absolute; + bottom: -100px;left: 0px; + width: 150px; + transform:rotate(-30deg); + } + .child02{ + position: absolute; + bottom: 0;left: 60px; + width: 100px; + transform:rotate(-30deg); + } + } + + } + .kctx-r{ + width: 24%; + height: 650px; + .my-carousel{ + height: 100%; + &/deep/ .el-carousel__container{ + height: 100%; + } + .my-carousel-item{ + display: flex; + padding-bottom: 80px; + flex-direction: column; + justify-content: space-between; + .item{ + height: 18%; + display: flex; + justify-content: space-around; + align-items: center; + .school-year{ + width: 52px; + height: 52px; + display: flex; + flex-direction: column; + justify-content: center; + border-radius: 50%; + span{ + height: 20px; + text-align: center; + font-size: 14px; + font-weight: 500; + } + } + &:nth-child(n+1){ + background: rgba(242,246,254,0.53); + padding-left: 20px; + .school-year{ + border: 1px solid #0052FF; + color: #0052FF; + } + } + &:nth-child(even){ + background: rgba(255,178,30,0.1); + flex-direction: row-reverse; + .school-year{ + border: 1px solid #FFA408; + color: #FFA408; + } + } + .courseInfo{ + display: flex; + flex-direction: column; + align-items: center; + .coursetitle{ + font-size: 16px; + font-weight: 500; + color: #333333; + margin-bottom: 11px; + } + .teacher{ + font-size: 12px; + font-weight: 400; + color: #555555; + } + } + .my-carousel-img{ + width: 140px; + height:140px; + } + img{ + width: 130px; + height:130px; + margin-top: -36px; + transition: all 0.3s; + } + &:hover{ + img{ + width: 140px; + height:140px; + margin-top: -46px; + } + } + } + } + + } + } + } + + } + .zymb{ + padding-left: 150px; + padding-right: 150px; + &>div{ + display: flex; + align-items: center; + .zymb-l{ + width: 50%; + display: flex; + justify-content: center; + align-items: center; + } + .zymb-r{ + width: 50%; + display: flex; + flex-direction: column; + justify-content: space-between; + .zymb-r-item{ + height: 86px; + display: flex; + align-items: center; + margin-bottom: 48px; + .zymb-item-l{ + background: url("./assets/bg08.png"); + background-size: 120% 120%; + background-position: center; + width: 70px; + height: 70px; + display: flex; + justify-content: center; + align-items: center; + margin-right: 20px; + } + .zymb-item-r{ + p{ + text-align: left; + margin-bottom: 8px; + transition: all 0.3s; + } + .zymb-item-title{ + font-size: 20px; + font-weight: 500; + color: #333; + } + .zymb-item-text{ + font-size: 16px; + color: #555; + } + } + &:hover{ + p.zymb-item-title{ + color: #0052FF; + margin-bottom: 20px; + } + p.zymb-item-text{ + color: #0052FF; + } + } + } + } + } + } + .byyq{ + background: #f6f6f6; + padding-bottom: 160px; + .title{ + margin-top: 20px; + padding-top: 130px; + } + .byyq-chart{ + padding-left: 150px; + padding-right: 150px; + display: flex; + align-items: center; + .byyq-chart-l{ + width: 50%; + display: flex; + justify-content: center; + align-items: center; + } + .byyq-chart-r{ + width: 50%; + height: 650px; + .byyq-carousel{ + display: flex; + justify-content: space-between; + flex-wrap: wrap; + .byyq-chart-r-item{ + width: 28%; + height: 280px; + margin-bottom: 38px; + padding-top: 18px; + background: url("./assets/bg07.png"); + background-size: 100% 100%; + background-repeat: no-repeat; + background-position: center; + &>div{ + box-shadow: 20px 20px 57px 0px rgba(0,0,0,0.08), inset 2px 2px 8px 0px #FFFFFF; + border-radius: 20px 20px 20px 20px; + height: 262px; + display: flex; + align-items: center; + flex-direction: column; + padding-left: 20px; + padding-right: 20px; + p{ + margin-bottom: 0; + } + .byyq-num{ + font-size: 28px; + font-weight: 600; + color: #FFFFFF; + height: 39px; + margin-bottom: 26px; + } + .byyq-title{ + font-size: 16px; + font-weight: 500; + color: #0052FF; + height: 22px; + } + .byyq-year{ + font-size: 10px; + height: 110px; + font-weight: 400; + color: rgba(0,0,0,0.3); + transform: scale(0.8); + } + .byyq-text{ + font-size: 12px; + font-weight: 400; + color: #555555; + overflow: hidden; + height: 51px; + overflow: hidden; + } + } + } + } + } + } + } + /deep/ .el-carousel__indicators.el-carousel__indicators--horizontal{ + background: rgba(242,246,254,0.53); + } \ No newline at end of file