ting
5 months ago
8 changed files with 315 additions and 1 deletions
-
13work/package-lock.json
-
1work/package.json
-
9work/src/api/ShowApi.js
-
14work/src/api/index.js
-
BINwork/src/assets/bg@3x.png
-
6work/src/router/index.js
-
264work/src/views/WorksShowView.vue
-
9work/vite.config.js
@ -0,0 +1,9 @@ |
|||||
|
import service from "." |
||||
|
|
||||
|
const ShowApi = { |
||||
|
//获取作业列表
|
||||
|
getWorks(){ |
||||
|
return service.post('/homework_client/gethomeworklist') |
||||
|
}, |
||||
|
} |
||||
|
export default ShowApi; |
||||
@ -0,0 +1,14 @@ |
|||||
|
import axios from "axios"; |
||||
|
|
||||
|
const service = axios.create({ |
||||
|
baseURL: '/api', |
||||
|
}); |
||||
|
|
||||
|
|
||||
|
//Axios的响应拦截器..
|
||||
|
service.interceptors.response.use(resp => { |
||||
|
return resp.data; |
||||
|
}, error => { |
||||
|
return Promise.reject(error); |
||||
|
}); |
||||
|
export default service; |
||||
|
After Width: 1125 | Height: 2181 | Size: 522 KiB |
@ -0,0 +1,264 @@ |
|||||
|
<script setup> |
||||
|
import { ref } from 'vue'; |
||||
|
import ShowApi from '../api/ShowApi'; |
||||
|
import { format } from 'date-fns'; |
||||
|
|
||||
|
|
||||
|
//作业展示列表 |
||||
|
const works = ref([]); |
||||
|
function loadWorks() { |
||||
|
// ShowApi.getWorks().then(result => { |
||||
|
// works.value = result.data; |
||||
|
// console.log("+++++++++++", works.value); |
||||
|
// works.value.forEach(work => { |
||||
|
// let date = work.endData; |
||||
|
// console.log(date); |
||||
|
// work.endData = format(new Date(date), 'yyyy-MM-dd'); |
||||
|
// }); |
||||
|
|
||||
|
// console.log("后", works.value); |
||||
|
|
||||
|
// }) |
||||
|
works.value = [ |
||||
|
{ |
||||
|
id:1, |
||||
|
name:"作业一", |
||||
|
endData:"2024-09-10" |
||||
|
}, |
||||
|
{ |
||||
|
id:2, |
||||
|
name:"作业二", |
||||
|
endData:"2024-09-10" |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
loadWorks(); |
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<div class="container"> |
||||
|
<div class="works"> |
||||
|
<div class="work-header"> |
||||
|
<img class="ketangzuoye" src="http://39.101.133.168:8857/LiveActivity/img/ketangzuoye.cc888815.png"> |
||||
|
<img class="book" |
||||
|
src="https://img.js.design/assets/img/65f9235904fb00a3ea731672.png#dcda48ae8da37daeccd6583d45c7790b"> |
||||
|
</div> |
||||
|
<div class="work-list"> |
||||
|
<div class="list" v-for="work in works"> |
||||
|
<div class="work-item"> |
||||
|
<div class="work-name"> |
||||
|
{{ work.name }} |
||||
|
</div> |
||||
|
<div class="work-content"> |
||||
|
<div class="work-time"> |
||||
|
<span class="deadline">截止时间：</span> |
||||
|
<span class="deadline">{{ work.endData }}</span> |
||||
|
<!-- 作业提价状态 --> |
||||
|
<div class="work-status">未提交</div> |
||||
|
</div> |
||||
|
<div class="work-bottem"> |
||||
|
<span class="write">写作业</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<style scoped> |
||||
|
.container { |
||||
|
width: 27%; /* 假设桌面布局的容器宽度为 80% */ |
||||
|
margin: 0 auto; /* 居中对齐 */ |
||||
|
} |
||||
|
body{ |
||||
|
margin: 0; |
||||
|
} |
||||
|
.work-name { |
||||
|
opacity: 1; |
||||
|
/** 文本1 */ |
||||
|
font-size: 1.125rem; |
||||
|
font-weight: 700; |
||||
|
letter-spacing: 0px; |
||||
|
color: rgba(53, 56, 112, 1); |
||||
|
text-align: left; |
||||
|
/*左对齐*/ |
||||
|
vertical-align: top; |
||||
|
/* 这个属性在 Flex 容器中不起作用，将被移除 */ |
||||
|
display: flex; |
||||
|
/* 启用 Flexbox 布局 */ |
||||
|
align-items: center; |
||||
|
/* 垂直居中 */ |
||||
|
height: 30%; |
||||
|
/* 设置高度，根据需要调整 */ |
||||
|
width: 50%; |
||||
|
/* 如果需要，也可以设置宽度 */ |
||||
|
} |
||||
|
|
||||
|
/* 手机 */ |
||||
|
@media (min-width: 344px) and (max-width: 768px) { |
||||
|
.container { |
||||
|
width: 100%; |
||||
|
margin: auto; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
/* 平板 */ |
||||
|
@media (min-width: 768px) and (max-width:1280px) { |
||||
|
.container { |
||||
|
width: 100%; |
||||
|
margin: auto; |
||||
|
} |
||||
|
.work-name { |
||||
|
opacity: 1; |
||||
|
/** 文本1 */ |
||||
|
font-size: 1.875rem; |
||||
|
font-weight: 700; |
||||
|
letter-spacing: 0px; |
||||
|
color: rgba(53, 56, 112, 1); |
||||
|
text-align: left; |
||||
|
/*左对齐*/ |
||||
|
vertical-align: top; |
||||
|
/* 这个属性在 Flex 容器中不起作用，将被移除 */ |
||||
|
display: flex; |
||||
|
/* 启用 Flexbox 布局 */ |
||||
|
align-items: center; |
||||
|
/* 垂直居中 */ |
||||
|
height: 30%; |
||||
|
/* 设置高度，根据需要调整 */ |
||||
|
width: 50%; |
||||
|
/* 如果需要，也可以设置宽度 */ |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
/* 电脑 */ |
||||
|
@media (min-width: 1280px) { |
||||
|
.container { |
||||
|
width: 27%; |
||||
|
margin: auto; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
.works { |
||||
|
/* ../api/ShowApi |
||||
|
work\src\assets\bg@3x.png */ |
||||
|
background-image: url('../assets/bg@3x.png'); |
||||
|
background-color: #8f98f6; |
||||
|
width: 100%; |
||||
|
min-height: 100vh; |
||||
|
position: relative; |
||||
|
margin: auto; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.ketangzuoye { |
||||
|
margin-top: 2vh; |
||||
|
margin-left: 2vw; |
||||
|
width: 43%; |
||||
|
} |
||||
|
|
||||
|
.book { |
||||
|
float: right; |
||||
|
margin-right: 1vw; |
||||
|
width: 30%; |
||||
|
} |
||||
|
|
||||
|
.work-list { |
||||
|
width: 95%; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
flex-direction: column; |
||||
|
margin: auto; |
||||
|
} |
||||
|
|
||||
|
.list { |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
width: 95%; |
||||
|
height: 17vh; |
||||
|
opacity: 1; |
||||
|
border-radius: 10px; |
||||
|
background-color: rgba(255, 225, 174, 1); |
||||
|
margin-bottom: 3%; |
||||
|
} |
||||
|
|
||||
|
.work-item { |
||||
|
|
||||
|
width: 90%; |
||||
|
height: 70%; |
||||
|
padding: 10px; |
||||
|
position: relative; |
||||
|
background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(250, 245, 235, 1) 100%); |
||||
|
border-radius: 10px; |
||||
|
border-radius: 10px; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
.work-content { |
||||
|
width: 90%; |
||||
|
height: 35%; |
||||
|
position: absolute; |
||||
|
bottom: 10%; |
||||
|
display: flex; |
||||
|
} |
||||
|
|
||||
|
.work-time { |
||||
|
position: absolute; |
||||
|
display: flex; |
||||
|
width: 70%; |
||||
|
bottom: 20%; |
||||
|
} |
||||
|
|
||||
|
.deadline { |
||||
|
color: rgba(142, 142, 142, 1); |
||||
|
font-size: 0.875rem; |
||||
|
opacity: 1; |
||||
|
} |
||||
|
|
||||
|
.work-status { |
||||
|
display: inline-block; |
||||
|
background: rgba(53, 56, 112, 0.1); |
||||
|
padding: 0.5% 1%; |
||||
|
text-align: center; |
||||
|
color: #353870; |
||||
|
font-size: 0.875rem; |
||||
|
border-radius: 5px; |
||||
|
opacity: 1; |
||||
|
margin-left: 5px; |
||||
|
} |
||||
|
|
||||
|
.work-bottem { |
||||
|
display: flex; |
||||
|
position: absolute; |
||||
|
width: 25%; |
||||
|
height: 70%; |
||||
|
right: 0%; |
||||
|
bottom: 2%; |
||||
|
opacity: 1; |
||||
|
border-radius: 50px; |
||||
|
background: linear-gradient(270deg, rgba(4, 15, 179, 1) 0%, rgba(120, 89, 255, 1) 100%); |
||||
|
border: 1px solid #a5e0f3; |
||||
|
justify-content: center; |
||||
|
/* 水平居中 */ |
||||
|
align-items: center; |
||||
|
/* 垂直居中 */ |
||||
|
text-align: center; |
||||
|
/* 确保文本在其容器内居中 */ |
||||
|
} |
||||
|
|
||||
|
.write { |
||||
|
opacity: 1; |
||||
|
/** 文本1 */ |
||||
|
padding: auto; |
||||
|
font-size: 1.125rem; |
||||
|
font-weight: 700; |
||||
|
letter-spacing: 0px; |
||||
|
line-height: 26.06px; |
||||
|
color: rgba(255, 255, 255, 1); |
||||
|
} |
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue