提交优秀学生页面

ant-design-vue-jeecg/src/config/router.config.js

@@ -604,6 +604,10 @@ export const constantRouterMap = [
   {
     path: '/cms/dailyteach/coursedetails', // 课程详情
     component: () => import('@/views/cms/pages/dailyteach/course/CourseDetails.vue')
+  },
+  {
+    path: '/cms/outstandingStudents', // 优秀学生
+    component: () => import('@/views/cms/pages/outstandingStudents/outstandingStudents.vue')
   }
 
 ]

ant-design-vue-jeecg/src/views/cms/pages/outstandingStudents/outstanding/outstand-header.vue

@@ -0,0 +1,121 @@
+<template>
+  <div>
+    <div class="outstudents">
+      <el-image
+        class="headerimage"
+        src="../../../assets/achievement.png"
+        style="width: 75%; height: 92%"
+      ></el-image>
+      <div class="shallow"></div>
+      <div class="newstitle">
+        <div class="title">{{ titleList.title }}</div>
+        <div class="footer">
+          <router-link to="/">查看详情</router-link>
+          <div class="jiantou">></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      titleList: {
+        id: 1,
+        title: '一个大标题，左侧新闻的大标题，一行两行三行的标题'
+      },
+      url: '../../assets/achievement.png'
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.outstudents {
+  position: absolute;
+  width: 100%;
+  height: 600px;
+  top: 110px;
+  left: 0px;
+  right: 0px;
+  bottom: 0px;
+}
+
+.newstitle {
+  position: absolute;
+  top: 150px;
+  right: 170px;
+  width: 25%;
+  height: 45%;
+  background: #ffffff;
+  z-index: 2;
+  padding: 50px;
+}
+
+.headerimage {
+  //position: absolute;
+  z-index: 1;
+}
+
+.shallow {
+  position: absolute;
+  right: 0px;
+  bottom: 0px;
+  background-position: 0px 0px, 10px 10px;
+  // 控制马赛克格子大小
+  background-size: 6px 6px;
+  background-image: linear-gradient(
+      45deg,
+      #dedfe0 25%,
+      transparent 25%,
+      transparent 75%,
+      #dedfe0 75%,
+      #dedfe0 100%
+    ),
+    linear-gradient(
+      45deg,
+      #dedfe0 25%,
+      white 25%,
+      white 75%,
+      #dedfe0 75%,
+      #dedfe0 100%
+    );
+  width: 90%;
+  height: 60%;
+  z-index: 0;
+}
+
+.jiantou {
+  width: 30px;
+  text-align: center;
+  line-height: 30px;
+  height: 30px;
+  background: #ffa408;
+  border-radius: 50%;
+  color: #ffff;
+  margin-left: 10px;
+}
+
+.title {
+  height: 100px;
+  line-height: 33px;
+  overflow: hidden;
+  font-size: 30px;
+  font-family: PingFang SC-Medium, PingFang SC;
+  font-weight: 500;
+  color: #333333;
+}
+
+.footer {
+  margin-top: 25px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  font-size: 18px;
+  font-family: PingFang SC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #555555;
+}
+</style>

ant-design-vue-jeecg/src/views/cms/pages/outstandingStudents/outstandingStudents.vue

@@ -0,0 +1,243 @@
+<template>
+  <div>
+    <Header></Header>
+    <outstandheader></outstandheader>
+    <div class="outstand">
+      <div class="studentsSchool">
+        <div class="top">
+          <div class="studentdname">在校生</div>
+          <router-link class="jiantou" to="/">></router-link>
+        </div>
+        <div class="studentbox">
+          <div v-for="item in studentList" :key="item.id" class="box">
+            <el-image class="studentimage" :src="item.url" />
+            <div class="studenttext">{{ item.studenttext }}</div>
+          </div>
+        </div>
+      </div>
+      <div class="graduateSchool">
+        <div class="top">
+          <div class="graduatename">毕业生</div>
+          <router-link class="jiantou" to="/">></router-link>
+        </div>
+        <div class="graduatebox">
+          <div v-for="item in graduatList" :key="item.id" class="box1">
+            <el-image
+              class="graduatimage"
+              :src="item.url"
+              style="width: 60%; height: 60%"
+            />
+            <div class="graduattext">{{ item.graduattitle }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <FooterView></FooterView>
+  </div>
+</template>
+
+<script>
+import outstandheader from './outstanding/outstand-header.vue'
+// import { ref } from 'vue'
+import FooterView from '../../../cms/components/FooterView.vue'
+import Header from '../../../cms/components/HeaderView.vue'
+export default {
+  components: { FooterView, Header, outstandheader },
+  data() {
+    return {
+      studentList: [
+        {
+          id: 1,
+          studenttext: '李斯同学获得什么什么什么奖',
+          url: require('../../assets/achievement.png')
+        },
+        {
+          id: 2,
+          studenttext: '李斯同学获得什么什么什么奖',
+          url: require('../../assets/achievement.png')
+        },
+        {
+          id: 3,
+          studenttext: '李斯同学获得什么什么什么奖',
+          url: require('../../assets/achievement.png')
+        },
+        {
+          id: 4,
+          studenttext: '李斯同学获得什么什么什么奖',
+          url: require('../../assets/achievement.png')
+        }
+      ],
+      graduatList: [
+        {
+          id: 1,
+          graduattitle: '一个标题一个标题一个标题一个标题一个标题一个标题',
+          url: require('../../assets/achievement.png')
+        },
+        {
+          id: 2,
+          graduattitle: '一个标题一个标题一个标题一个标题一个标题一个标题',
+          url: require('../../assets/achievement.png')
+        },
+        {
+          id: 3,
+          graduattitle: '一个标题一个标题一个标题一个标题一个标题一个标题',
+          url: require('../../assets/achievement.png')
+        },
+        {
+          id: 4,
+          graduattitle: '一个标题一个标题一个标题一个标题一个标题一个标题',
+          url: require('../../assets/achievement.png')
+        },
+        {
+          id: 4,
+          graduattitle: '一个标题一个标题一个标题一个标题一个标题一个标题',
+          url: require('../../assets/achievement.png')
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+@import '../../assets/reset.css';
+.header {
+  width: 100%;
+  height: 356px;
+  background-image: url('../../assets/bg02.png');
+  background-size: 100%;
+  // background-repeat: no-repeat;
+}
+.outstand {
+  padding: 50px 100px;
+  margin-top: 300px;
+  position: relative;
+}
+
+.top {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.jiantou {
+  width: 50px;
+  text-align: center;
+  line-height: 50px;
+  height: 50px;
+  background: #ffa408;
+  border-radius: 50%;
+  color: #ffff;
+}
+
+.studentsSchool {
+  margin: 50px 0;
+}
+
+.graduatename,
+.studentdname {
+  font-size: 70px;
+  font-family: PingFang SC-Semibold, PingFang SC;
+  color: #333333;
+}
+
+.graduatetop {
+  width: 100%;
+  height: 100px;
+  position: absolute;
+  top: 600px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.studenttext {
+  margin-top: 20px;
+  font-size: 20px;
+  font-family: PingFang SC-Medium, PingFang SC;
+  font-weight: 500;
+  color: #333333;
+}
+
+.studentbox {
+  display: flex;
+  margin-top: 50px;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.graduatebox {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.box {
+  width: 22%;
+}
+
+.box1 {
+  padding: 20px;
+  width: 20%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: auto;
+}
+
+.box1:nth-child(odd) {
+  margin-bottom: 70px;
+}
+
+.box1:nth-child(even) {
+  margin-top: 70px;
+}
+
+.studentimage {
+  height: 290px;
+  display: flex;
+  justify-content: center;
+}
+
+.graduateSchool {
+  height: 500px;
+  margin: 150px 0;
+  background-position: 0px 0px, 10px 10px;
+  // 控制马赛克格子大小
+  background-size: 6px 6px;
+  background-image: linear-gradient(
+      45deg,
+      #dedfe0 25%,
+      transparent 25%,
+      transparent 75%,
+      #dedfe0 75%,
+      #dedfe0 100%
+    ),
+    linear-gradient(
+      45deg,
+      #dedfe0 25%,
+      white 25%,
+      white 75%,
+      #dedfe0 75%,
+      #dedfe0 100%
+    );
+  // padding-top: 100px;
+}
+
+.graduattext {
+  border-left: 1px solid #000000;
+  padding: 10px 10px;
+  width: 50%;
+  height: 90px;
+  line-height: 20px;
+  overflow: hidden;
+  margin-left: 5%;
+  font-size: 16px;
+  font-family: PingFang SC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #333333;
+}
+</style>