|
|
@@ -4,25 +4,23 @@
|
|
|
* @Date:2024-03-20 17:26:35
|
|
|
-->
|
|
|
<template>
|
|
|
- <div class="homePage">
|
|
|
- <navContainer class="homePageNav" :headImg="headImg" :navs="navs">
|
|
|
- <div class="homePageCon">
|
|
|
- <ElScrollbar class="elScrollbar">
|
|
|
- <div class="classTypes">
|
|
|
- <div class="classType" v-for="item in classTypes" :key="item.name" @click="handleRouter(item.url)">
|
|
|
- <img :src="item.img" />
|
|
|
- <div>{{ item.name }}</div>
|
|
|
- </div>
|
|
|
+ <navContainer class="navContainer homePageNav" :headImg="headImg" :navs="navs">
|
|
|
+ <div class="homePage">
|
|
|
+ <ElScrollbar class="elScrollbar">
|
|
|
+ <div class="classTypes">
|
|
|
+ <div class="classType" v-for="item in classTypes" :key="item.name" @click="handleRouter(item.url)">
|
|
|
+ <img :src="item.img" />
|
|
|
+ <div>{{ item.name }}</div>
|
|
|
</div>
|
|
|
- <div class="courseBoard">
|
|
|
- <div class="details">
|
|
|
- <el-empty class="empty" :image="require('@/img/layout/empty1.png')" description="您还没有待上课程哦～" />
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
+ <div class="courseBoard">
|
|
|
+ <div class="details">
|
|
|
+ <el-empty class="empty" :image="require('@/img/layout/empty1.png')" description="您还没有待上课程哦～" />
|
|
|
</div>
|
|
|
- </ElScrollbar>
|
|
|
- </div>
|
|
|
- </navContainer>
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
+ </ElScrollbar>
|
|
|
+ </div>
|
|
|
+ </navContainer>
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
@@ -84,100 +82,96 @@ function handleRouter(url?: string) {
|
|
|
}
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
+.navContainer.homePageNav {
|
|
|
+ &:deep(.navCon) {
|
|
|
+ .navImg {
|
|
|
+ margin-left: 5rem;
|
|
|
+ > img {
|
|
|
+ width: 91px;
|
|
|
+ height: 92px;
|
|
|
+ top: 70%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .nav {
|
|
|
+ font-size: 28px;
|
|
|
+ font-family: AlimamaFangYuanTiVF, AlimamaFangYuanTiVF;
|
|
|
+ &:last-child {
|
|
|
+ margin-right: 30px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
.homePage {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
- .homePageNav {
|
|
|
- &:deep(.navCon) {
|
|
|
- .navImg {
|
|
|
- margin-left: 5rem;
|
|
|
- > img {
|
|
|
- width: 91px;
|
|
|
- height: 92px;
|
|
|
- top: 70%;
|
|
|
- }
|
|
|
- }
|
|
|
- .nav {
|
|
|
- font-size: 28px;
|
|
|
- font-family: AlimamaFangYuanTiVF, AlimamaFangYuanTiVF;
|
|
|
- &:last-child {
|
|
|
- margin-right: 30px;
|
|
|
- }
|
|
|
- }
|
|
|
+ & > :deep(.elScrollbar) {
|
|
|
+ .el-scrollbar__view {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ padding: 5rem 5rem 0;
|
|
|
+ }
|
|
|
+ .el-scrollbar__wrap {
|
|
|
+ overflow-x: hidden;
|
|
|
+ }
|
|
|
+ .el-scrollbar__bar.is-vertical {
|
|
|
+ width: 4px;
|
|
|
+ right: 0;
|
|
|
}
|
|
|
}
|
|
|
- .homePageCon {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- & > :deep(.elScrollbar) {
|
|
|
- .el-scrollbar__view {
|
|
|
- width: 100%;
|
|
|
- display: flex;
|
|
|
- padding: 5rem 5rem 0;
|
|
|
+ .classTypes {
|
|
|
+ flex-grow: 1;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ justify-content: space-between;
|
|
|
+ height: 72.9rem;
|
|
|
+ align-content: space-between;
|
|
|
+ .classType {
|
|
|
+ background: #feffff;
|
|
|
+ box-shadow: 0px 0.2rem 1.4rem 0 #f1e3cc;
|
|
|
+ border-radius: 3.4rem;
|
|
|
+ width: 36rem;
|
|
|
+ height: 35rem;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ flex-direction: column;
|
|
|
+ cursor: pointer;
|
|
|
+ padding: 4.4rem 5.3rem;
|
|
|
+ &:hover {
|
|
|
+ transform: scale(1.02);
|
|
|
+ box-shadow: 0px 0.2rem 1.4rem 0px #e4d7c2;
|
|
|
}
|
|
|
- .el-scrollbar__wrap {
|
|
|
- overflow-x: hidden;
|
|
|
+ > div {
|
|
|
+ margin-top: 1rem;
|
|
|
+ font-family: AlimamaFangYuanTiVF, AlimamaFangYuanTiVF;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 2.8rem;
|
|
|
+ color: #393939;
|
|
|
}
|
|
|
- .el-scrollbar__bar.is-vertical {
|
|
|
- width: 4px;
|
|
|
- right: 0;
|
|
|
+ > img {
|
|
|
+ width: 100%;
|
|
|
}
|
|
|
}
|
|
|
- .classTypes {
|
|
|
- flex-grow: 1;
|
|
|
+ }
|
|
|
+ .courseBoard {
|
|
|
+ flex-shrink: 0;
|
|
|
+ margin-left: 5rem;
|
|
|
+ margin-top: -3.5rem;
|
|
|
+ width: 57.2rem;
|
|
|
+ height: 76.4rem;
|
|
|
+ background: url("@/img/homePage/bg.png") no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ position: relative;
|
|
|
+ .details {
|
|
|
+ width: 100%;
|
|
|
+ position: absolute;
|
|
|
display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- justify-content: space-between;
|
|
|
- height: 72.9rem;
|
|
|
- align-content: space-between;
|
|
|
- .classType {
|
|
|
- background: #feffff;
|
|
|
- box-shadow: 0px 0.2rem 1.4rem 0 #f1e3cc;
|
|
|
- border-radius: 3.4rem;
|
|
|
- width: 36rem;
|
|
|
- height: 35rem;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- flex-direction: column;
|
|
|
- cursor: pointer;
|
|
|
- padding: 4.4rem 5.3rem;
|
|
|
- &:hover {
|
|
|
- transform: scale(1.02);
|
|
|
- box-shadow: 0px 0.2rem 1.4rem 0px #e4d7c2;
|
|
|
- }
|
|
|
- > div {
|
|
|
- margin-top: 1rem;
|
|
|
- font-family: AlimamaFangYuanTiVF, AlimamaFangYuanTiVF;
|
|
|
- font-weight: bold;
|
|
|
- font-size: 2.8rem;
|
|
|
- color: #393939;
|
|
|
- }
|
|
|
- > img {
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .courseBoard {
|
|
|
- flex-shrink: 0;
|
|
|
- margin-left: 5rem;
|
|
|
- margin-top: -3.5rem;
|
|
|
- width: 57.2rem;
|
|
|
- height: 76.4rem;
|
|
|
- background: url("@/img/homePage/bg.png") no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
- position: relative;
|
|
|
- .details {
|
|
|
- width: 100%;
|
|
|
- position: absolute;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- top: 24.8rem;
|
|
|
- :deep(.empty) {
|
|
|
- .el-empty__image {
|
|
|
- width: 36rem;
|
|
|
- }
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ top: 24.8rem;
|
|
|
+ :deep(.empty) {
|
|
|
+ .el-empty__image {
|
|
|
+ width: 36rem;
|
|
|
}
|
|
|
}
|
|
|
}
|
黄琪勇