我的下载和我的资料两个模块
This commit is contained in:
小张
parent
93bd6c330a
commit
39baaf7ecc
@ -5,10 +5,12 @@
|
||||
<!-- 左侧侧边栏 -->
|
||||
<div class="block_14">
|
||||
<!-- 用户头像和姓名 -->
|
||||
<img
|
||||
<SafeAvatar
|
||||
class="image_7"
|
||||
referrerpolicy="no-referrer"
|
||||
:src="userStore.user?.avatar || 'https://via.placeholder.com/100'"
|
||||
:src="userStore.user?.avatar"
|
||||
:name="userStore.user?.username || '用户'"
|
||||
:size="96"
|
||||
alt="用户头像"
|
||||
/>
|
||||
<span class="text_72">{{ userStore.user?.username || '用户名' }}</span>
|
||||
|
||||
@ -22,7 +24,9 @@
|
||||
<img
|
||||
class="image_8"
|
||||
referrerpolicy="no-referrer"
|
||||
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngc9a739861792bd074fb3af58d5ece46828d647f66e1113746e41e68ae5486135"
|
||||
:src="activeTab === 'courses'
|
||||
? 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng20ffb5f85d4f5f49183f6906fe5a3206b51b978ab1d476e24e95dd05c97e6a09'
|
||||
: 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPngc9a739861792bd074fb3af58d5ece46828d647f66e1113746e41e68ae5486135'"
|
||||
/>
|
||||
<span class="text-group_19">我的课程</span>
|
||||
</div>
|
||||
@ -32,7 +36,9 @@
|
||||
<img
|
||||
class="label_4"
|
||||
referrerpolicy="no-referrer"
|
||||
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng9ef14366fc1741a8ada8db176341d56e43f72cb07685130ee04c0fc0e70b95e9"
|
||||
:src="activeTab === 'homework'
|
||||
? 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPngd613ce692c6eadda66e54ef98f178d5a6ae612d44a02e796570dd834a371e490'
|
||||
: 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng9ef14366fc1741a8ada8db176341d56e43f72cb07685130ee04c0fc0e70b95e9'"
|
||||
/>
|
||||
<span class="text-group_20">我的作业</span>
|
||||
</div>
|
||||
@ -42,7 +48,9 @@
|
||||
<img
|
||||
class="label_5"
|
||||
referrerpolicy="no-referrer"
|
||||
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng4661143d8bce67501f22c432ea5115ddbff845d5f37b8f8c76f349b15de07180"
|
||||
:src="activeTab === 'exam'
|
||||
? 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng5c3e9660c1adc146ed9576ae906d29d0b592f759ddd0c48d7b1ad93f7a8639c5'
|
||||
: 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng4661143d8bce67501f22c432ea5115ddbff845d5f37b8f8c76f349b15de07180'"
|
||||
/>
|
||||
<span class="text-group_21">我的考试</span>
|
||||
</div>
|
||||
@ -52,7 +60,9 @@
|
||||
<img
|
||||
class="label_6"
|
||||
referrerpolicy="no-referrer"
|
||||
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngd1f325e7252c3ebf57f31a81c92eb1c1fd61be28fb49098fb865a27f77a63e31"
|
||||
:src="activeTab === 'practice'
|
||||
? 'https://lanhu-oss-proxy.lanhuapp.com/SketchPng6558c077726c2d2f932ceff91145acab526127fb489bc104b128b6221801f4aa'
|
||||
: 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPngd1f325e7252c3ebf57f31a81c92eb1c1fd61be28fb49098fb865a27f77a63e31'"
|
||||
/>
|
||||
<span class="text-group_22">我的练习</span>
|
||||
</div>
|
||||
@ -62,7 +72,9 @@
|
||||
<img
|
||||
class="thumbnail_40"
|
||||
referrerpolicy="no-referrer"
|
||||
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngd427e1476c90b2d1ad642b921f287910a2d5e51f463a0cad40b98ae1acf9d96a"
|
||||
:src="activeTab === 'activity'
|
||||
? 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng3d2b97401a98315b86af3a5082136c97ba2130259ab48915698eb8c17d8450ff'
|
||||
: 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPngd427e1476c90b2d1ad642b921f287910a2d5e51f463a0cad40b98ae1acf9d96a'"
|
||||
/>
|
||||
<span class="text-group_23">我的活动</span>
|
||||
</div>
|
||||
@ -72,7 +84,9 @@
|
||||
<img
|
||||
class="label_7"
|
||||
referrerpolicy="no-referrer"
|
||||
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngbc201b8b0d2681bdd7653a9816f04ace0187e2d39ea5a9237e930ebd84c036ca"
|
||||
:src="activeTab === 'message'
|
||||
? 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng7fb5ce5c1bb4b41ff636ad31573bda9280b693ecab753c58ffb25f1175e9acaa'
|
||||
: 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPngbc201b8b0d2681bdd7653a9816f04ace0187e2d39ea5a9237e930ebd84c036ca'"
|
||||
/>
|
||||
<span class="text-group_24">我的消息</span>
|
||||
</div>
|
||||
@ -82,7 +96,9 @@
|
||||
<img
|
||||
class="image_9"
|
||||
referrerpolicy="no-referrer"
|
||||
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPnga5b70cfab4c855b4d41d1b706e4f5fa1a4373e446574b97726d5d78d7608d0c6"
|
||||
:src="activeTab === 'materials'
|
||||
? 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng8de06526f5df90cd28c5910bcccf9c69f4e8e2c597cc4be22551c85f9184a36d'
|
||||
: 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPnga5b70cfab4c855b4d41d1b706e4f5fa1a4373e446574b97726d5d78d7608d0c6'"
|
||||
/>
|
||||
<span class="text-group_25">我的资料</span>
|
||||
</div>
|
||||
@ -92,7 +108,9 @@
|
||||
<img
|
||||
class="thumbnail_41"
|
||||
referrerpolicy="no-referrer"
|
||||
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngad1dcee8a35e9a4214d2c43a40efac32d603d0e91d741f88a0cc5aa8aa0c9e4d"
|
||||
:src="activeTab === 'download'
|
||||
? 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPngad1dcee8a35e9a4214d2c43a40efac32d603d0e91d741f88a0cc5aa8aa0c9e4d'
|
||||
: 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPngdb0a3a39327fdf8335003faafcb5e7e485342b4f33448b455f9d3ba5ad9999b0'"
|
||||
/>
|
||||
<span class="text-group_26">我的下载</span>
|
||||
</div>
|
||||
@ -122,7 +140,8 @@
|
||||
<img
|
||||
class="thumbnail_4"
|
||||
referrerpolicy="no-referrer"
|
||||
:src="course.thumbnail"
|
||||
:src="bannerImage"
|
||||
:alt="bannerAlt"
|
||||
/>
|
||||
<span :class="['status-text', course.status]">{{ getStatusText(course.status) }}</span>
|
||||
</div>
|
||||
@ -229,7 +248,11 @@
|
||||
<!-- 作业详情视图 -->
|
||||
<div v-if="showDetailView && detailAssignment">
|
||||
<div class="detail-header">
|
||||
<button @click="backToAssignmentList" class="back-button">← 返回作业列表</button>
|
||||
<div class="breadcrumb-nav">
|
||||
<span class="breadcrumb-item" @click="backToAssignmentList">全部作业</span>
|
||||
<span class="breadcrumb-separator">></span>
|
||||
<span class="breadcrumb-current">作业名称</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group_11">
|
||||
@ -710,9 +733,19 @@
|
||||
<!-- 用户头像 -->
|
||||
<div class="avatar-section">
|
||||
<div class="avatar-container">
|
||||
<img :src="userInfo.avatar" alt="用户头像" class="user-avatar-large" />
|
||||
<SafeAvatar
|
||||
:src="userStore.user?.avatar"
|
||||
:name="userStore.user?.username || userInfo.nickname || '用户'"
|
||||
:size="68"
|
||||
alt="用户头像"
|
||||
class="user-avatar-large"
|
||||
/>
|
||||
<div class="avatar-edit-btn">
|
||||
<i class="icon-edit"></i>
|
||||
<img
|
||||
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngf31d99a65996c8c8ed0d6b2446b4176a30b16838933c10b800a735d092717c57"
|
||||
alt="编辑头像"
|
||||
class="edit-icon"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1127,7 +1160,20 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted, reactive } from 'vue'
|
||||
import { useMessage, NModal, NUpload, NInput, NForm, NFormItem, NButton } from 'naive-ui'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useUserStore } from '@/stores/user'
|
||||
import SafeAvatar from '@/components/common/SafeAvatar.vue'
|
||||
|
||||
const { t, locale } = useI18n()
|
||||
|
||||
// 轮播图根据语言动态切换
|
||||
const bannerImage = computed(() => {
|
||||
return locale.value === 'zh' ? '/banners/banner1.png' : '/banners/banner1-en.png'
|
||||
})
|
||||
|
||||
const bannerAlt = computed(() => {
|
||||
return t('home.banner.alt')
|
||||
})
|
||||
|
||||
// 定义课程接口
|
||||
interface Course {
|
||||
@ -2707,10 +2753,13 @@ onMounted(() => {
|
||||
|
||||
/* 用户头像和姓名 */
|
||||
.image_7 {
|
||||
width: 5vw; /* 调整头像大小 */
|
||||
height: 5vw;
|
||||
width: 5vw !important; /* 调整头像大小，覆盖SafeAvatar的内联样式 */
|
||||
height: 5vw !important;
|
||||
border-radius: 50%;
|
||||
margin: 2.6vh auto 0 auto; /* 居中显示 */
|
||||
}
|
||||
|
||||
.image_7 img {
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
@ -2895,7 +2944,7 @@ onMounted(() => {
|
||||
|
||||
.box_3 {
|
||||
width: 10.42vw; /* 200px转换为vw */
|
||||
height: 7.81vh; /* 150px转换为vh */
|
||||
height: 15.63vh; /* 大幅增加高度到300px转换为vh，让图片展示到外部盒子高度 */
|
||||
position: relative;
|
||||
border-radius: 0.42vw; /* 8px转换为vw */
|
||||
overflow: hidden;
|
||||
@ -3758,14 +3807,14 @@ height: 33px;
|
||||
|
||||
.box_3 {
|
||||
width: 100%;
|
||||
height: 10.42vh; /* 200px转换为vh */
|
||||
height: 18vh; /* 平板端大幅增加高度，让图片展示到外部盒子高度 */
|
||||
}
|
||||
|
||||
/* 调整用户信息区域为横向布局 */
|
||||
.image_7 {
|
||||
margin: 1.04vh 0 0 1.04vw; /* 20px转换 */
|
||||
width: 4.17vw; /* 80px转换为vw */
|
||||
height: 4.17vw;
|
||||
width: 4.17vw !important; /* 80px转换为vw，覆盖SafeAvatar样式 */
|
||||
height: 4.17vw !important;
|
||||
}
|
||||
|
||||
.text_72 {
|
||||
@ -3999,7 +4048,7 @@ height: 33px;
|
||||
}
|
||||
|
||||
.box_3 {
|
||||
height: 9.38vh; /* 180px转换为vh */
|
||||
height: 20vh; /* 手机端大幅增加高度，让图片展示到外部盒子高度 */
|
||||
}
|
||||
}
|
||||
|
||||
@ -4021,6 +4070,27 @@ height: 33px;
|
||||
padding: 0.31vh 0.63vw; /* 6px 12px转换 */
|
||||
}
|
||||
|
||||
/* 平板端面包屑样式 */
|
||||
.breadcrumb-nav {
|
||||
font-size: 1vw; /* 平板端调整字体大小 */
|
||||
}
|
||||
|
||||
.breadcrumb-item {
|
||||
width: 5vw; /* 平板端调整宽度 */
|
||||
font-size: 1vw; /* 平板端调整字体大小 */
|
||||
line-height: 1.3vh; /* 平板端调整行高 */
|
||||
}
|
||||
|
||||
.breadcrumb-current {
|
||||
width: 4.5vw; /* 平板端调整宽度 */
|
||||
font-size: 1vw; /* 平板端调整字体大小 */
|
||||
line-height: 1.3vh; /* 平板端调整行高 */
|
||||
}
|
||||
|
||||
.breadcrumb-separator {
|
||||
margin: 0 0.8vw; /* 平板端调整间距 */
|
||||
}
|
||||
|
||||
.box_2 {
|
||||
padding: 0.63vh 0.63vw; /* 12px转换 */
|
||||
}
|
||||
@ -4040,6 +4110,28 @@ height: 33px;
|
||||
.text_20, .text_21, .text_22 {
|
||||
font-size: 0.63vw; /* 12px转换为vw */
|
||||
}
|
||||
|
||||
/* 手机端面包屑样式 */
|
||||
.breadcrumb-nav {
|
||||
font-size: 3.5vw; /* 手机端调整字体大小 */
|
||||
margin-bottom: 2vh; /* 手机端增加底部间距 */
|
||||
}
|
||||
|
||||
.breadcrumb-item {
|
||||
width: 15vw; /* 手机端调整宽度 */
|
||||
font-size: 3.5vw; /* 手机端调整字体大小 */
|
||||
line-height: 2vh; /* 手机端调整行高 */
|
||||
}
|
||||
|
||||
.breadcrumb-current {
|
||||
width: 13vw; /* 手机端调整宽度 */
|
||||
font-size: 3.5vw; /* 手机端调整字体大小 */
|
||||
line-height: 2vh; /* 手机端调整行高 */
|
||||
}
|
||||
|
||||
.breadcrumb-separator {
|
||||
margin: 0 2vw; /* 手机端调整间距 */
|
||||
}
|
||||
}
|
||||
|
||||
/* 上传作业弹窗样式 */
|
||||
@ -4096,19 +4188,49 @@ height: 33px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #007bff;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
padding: 6px 12px;
|
||||
border-radius: 4px;
|
||||
transition: background-color 0.3s ease;
|
||||
/* 面包屑导航样式 */
|
||||
.breadcrumb-nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 0.73vw; /* 14px转换为vw */
|
||||
color: #666;
|
||||
margin-bottom: 1.04vh; /* 20px转换为vh */
|
||||
}
|
||||
|
||||
.back-button:hover {
|
||||
background-color: #f0f8ff;
|
||||
.breadcrumb-item {
|
||||
width: 3.39vw; /* 65px转换为vw */
|
||||
height: 1.04vh; /* 20px转换为vh */
|
||||
font-family: AppleSystemUIFont, -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
font-size: 0.73vw; /* 14px转换为vw */
|
||||
color: #333333;
|
||||
line-height: 1.04vh; /* 20px转换为vh */
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
cursor: pointer;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.breadcrumb-item:hover {
|
||||
color: #0056b3;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.breadcrumb-separator {
|
||||
margin: 0 0.52vw; /* 10px转换为vw */
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.breadcrumb-current {
|
||||
width: 2.97vw; /* 57px转换为vw */
|
||||
height: 1.04vh; /* 20px转换为vh */
|
||||
font-family: AppleSystemUIFont, -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
font-size: 0.73vw; /* 14px转换为vw */
|
||||
color: #999999;
|
||||
line-height: 1.04vh; /* 20px转换为vh */
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
.description-full-view {
|
||||
@ -5777,20 +5899,23 @@ height: 33px;
|
||||
}
|
||||
|
||||
.user-avatar-large {
|
||||
width: 3.54vw; /* 68px转换为vw */
|
||||
height: 3.54vw; /* 68px转换为vw */
|
||||
width: 3.54vw !important; /* 68px转换为vw，覆盖SafeAvatar样式 */
|
||||
height: 3.54vw !important; /* 68px转换为vw，覆盖SafeAvatar样式 */
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
border: 3px solid #e0e0e0;
|
||||
}
|
||||
|
||||
.user-avatar-large img {
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.avatar-edit-btn {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 1.56vw; /* 30px转换为vw */
|
||||
height: 1.56vw; /* 30px转换为vw */
|
||||
background: #1890ff;
|
||||
width: 1.3vw; /* 25px转换为vw */
|
||||
height: 1.3vw; /* 25px转换为vw */
|
||||
background: #0288D1;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -5800,13 +5925,13 @@ height: 33px;
|
||||
}
|
||||
|
||||
.avatar-edit-btn:hover {
|
||||
background: #40a9ff;
|
||||
background: #0277BD; /* 稍微深一点的蓝色作为悬停效果 */
|
||||
}
|
||||
|
||||
.avatar-edit-btn::before {
|
||||
content: '✏️';
|
||||
color: white;
|
||||
font-size: 0.73vw; /* 14px转换为vw */
|
||||
.avatar-edit-btn .edit-icon {
|
||||
width: 0.57vw; /* 11px转换为vw */
|
||||
height: 0.57vw; /* 11px转换为vw */
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
/* 表单样式 */
|
||||
@ -6463,13 +6588,18 @@ height: 33px;
|
||||
}
|
||||
|
||||
.user-avatar-large {
|
||||
width: 6vw;
|
||||
height: 6vw;
|
||||
width: 6vw !important;
|
||||
height: 6vw !important;
|
||||
}
|
||||
|
||||
.avatar-edit-btn {
|
||||
width: 2.5vw;
|
||||
height: 2.5vw;
|
||||
width: 2.6vw; /* 平板端按比例调整：25px * 1.3 ≈ 32px */
|
||||
height: 2.6vw;
|
||||
}
|
||||
|
||||
.avatar-edit-btn .edit-icon {
|
||||
width: 1.14vw; /* 平板端按比例调整：11px * 1.3 ≈ 14px */
|
||||
height: 1.14vw;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
@ -6620,13 +6750,18 @@ height: 33px;
|
||||
}
|
||||
|
||||
.user-avatar-large {
|
||||
width: 15vw;
|
||||
height: 15vw;
|
||||
width: 15vw !important;
|
||||
height: 15vw !important;
|
||||
}
|
||||
|
||||
.avatar-edit-btn {
|
||||
width: 5vw;
|
||||
height: 5vw;
|
||||
width: 6.5vw; /* 手机端按比例调整：25px * 2.6 ≈ 65px */
|
||||
height: 6.5vw;
|
||||
}
|
||||
|
||||
.avatar-edit-btn .edit-icon {
|
||||
width: 2.86vw; /* 手机端按比例调整：11px * 2.6 ≈ 29px */
|
||||
height: 2.86vw;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user