donghanyang
/
Link_Homework_Vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

样式修改

test
lenghui 5 months ago
parent
bea6a44eb5
commit
3256a11ce1
1 changed files with 380 additions and 369 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 749
      work/src/views/WorksShowView.vue

749
work/src/views/WorksShowView.vue
View File

@ -2,8 +2,8 @@
import { ref } from 'vue'; import { ref } from 'vue';
import ShowApi from '../api/ShowApi'; import ShowApi from '../api/ShowApi';
import { format } from 'date-fns'; import { format } from 'date-fns';
import {useRouter} from "vue-router";
import {ElMessage} from "element-plus";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
const router = useRouter() const router = useRouter()
@ -22,14 +22,14 @@ function loadWorks() {
} }
loadWorks(); loadWorks();
//跳转写作业页面 //跳转写作业页面
function writeWorks(id,sub){
if(sub >= 3){
ElMessage.error('每个作业可提交3次，您已提交3次。')
}else{
router.push({
path:`/doWork/${id}/${sub}`
})
}
function writeWorks(id, sub) {
if (sub >= 3) {
ElMessage.error('每个作业可提交3次，您已提交3次。')
} else {
router.push({
path: `/doWork/${id}/${sub}`
})
}
} }
</script> </script>
@ -50,12 +50,12 @@ function writeWorks(id,sub){
</div> </div>
<div class="work-content"> <div class="work-content">
<div class="work-time"> <div class="work-time">
<span class="deadline">截止时间：{{ work.endData }}</span>
<!-- 作业提价状态 -->
<div v-if="work.submit == 0" class="work-status">未提交</div>
<div v-else class="work-status2">已提交</div>
<span class="deadline">截止时间：{{ work.endData }}</span>
<!-- 作业提价状态 -->
<div v-if="work.submit == 0" class="work-status">未提交</div>
<div v-else class="work-status2">已提交</div>
</div> </div>
<div class="work-bottem" @click="writeWorks(work.groupId,work.submit)">
<div class="work-bottem" @click="writeWorks(work.groupId, work.submit)">
<span class="write">写作业</span> <span class="write">写作业</span>
</div> </div>
</div> </div>
@ -68,32 +68,37 @@ function writeWorks(id,sub){
<style scoped> <style scoped>
.container { .container {
width: 27%; /* 假设桌面布局的容器宽度为 80% */
margin: 0 auto; /* 居中对齐 */
width: 27%;
/* 假设桌面布局的容器宽度为 80% */
margin: 0 auto;
/* 居中对齐 */
} }
body{
body {
margin: 0; margin: 0;
} }
.work-name { .work-name {
opacity: 1;
/** 文本1 */
font-size: 1.5vw;
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%;
/* 如果需要，也可以设置宽度 */
}
opacity: 1;
/** 文本1 */
font-size: 1.5vw;
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%;
/* 如果需要，也可以设置宽度 */
padding-top: 4%;
}
.ketangzuoye { .ketangzuoye {
@ -115,49 +120,51 @@ body{
width: 100%; width: 100%;
margin: auto; margin: auto;
} }
.works { .works {
/* ../api/ShowApi
/* ../api/ShowApi
work\src\assets\bg@3x.png */ work\src\assets\bg@3x.png */
background-image: url('../assets/bg.png');
background-size: 100% 100%;
background-color: #8f98f6;
width: 100%;
min-height: 100vh;
position: relative;
margin: auto;
}
background-image: url('../assets/bg.png');
background-size: 100% 100%;
background-color: #8f98f6;
width: 100%;
min-height: 100vh;
position: relative;
margin: auto;
}
.work-list {
width: 95%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin: auto;
}
.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: 97%;
height: 16vh;
opacity: 1;
border-radius: 10px;
background-color: rgba(255, 225, 174, 1);
margin-bottom: 3%;
}
.list {
display: flex;
justify-content: center;
align-items: center;
width: 97%;
height: 16vh;
opacity: 1;
border-radius: 10px;
background-color: rgba(255, 225, 174, 1);
margin-bottom: 3%;
}
.work-item {
.work-item {
width: 87%;
height: 63%;
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;
}
width: 87%;
height: 63%;
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-name { .work-name {
opacity: 1; opacity: 1;
/** 文本1 */ /** 文本1 */
@ -180,84 +187,85 @@ body{
} }
.work-content { .work-content {
width: 95%;
height: 35%;
position: absolute;
bottom: 10%;
display: flex;
}
width: 95%;
height: 35%;
position: absolute;
bottom: 10%;
display: flex;
}
.work-time {
position: absolute;
display: flex;
width: 70%;
bottom: 12%;
}
.work-time {
position: absolute;
display: flex;
width: 70%;
bottom: 12%;
}
.deadline {
color: rgba(142, 142, 142, 1);
font-size: 3.6vw;
opacity: 1;
align-items: center;
padding-top: 0.5vw;
/* 水平居中 */
/* justify-content: center; */
}
.deadline {
color: rgba(142, 142, 142, 1);
font-size: 3.6vw;
opacity: 1;
align-items: center;
padding-top: 0.5vw;
/* 水平居中 */
/* justify-content: center; */
}
.work-status {
font-size: 3.8vw;
display: inline-block;
background: rgba(53, 56, 112, 0.1);
padding: 1% 3.5%;
text-align: center;
color: #353870;
border-radius: 5px;
opacity: 2;
margin-left: 5px;
}
.work-status2 {
font-size: 3.8vw;
display: inline-block;
background: #ffe1ae;
padding: 1% 3.5%;
text-align: center;
color: #353870;
border-radius: 5px;
opacity: 2;
margin-left: 5px;
}
.work-bottem {
cursor: pointer;
display: flex;
position: absolute;
width: 28%;
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;
/* 确保文本在其容器内居中 */
}
.work-status {
font-size: 3.8vw;
display: inline-block;
background: rgba(53, 56, 112, 0.1);
padding: 1% 3.5%;
text-align: center;
color: #353870;
border-radius: 5px;
opacity: 2;
margin-left: 5px;
}
.write {
opacity: 1;
/** 文本1 */
padding: auto;
font-size: 18px;
font-weight: 700;
letter-spacing: 0px;
line-height: 26.06px;
color: rgba(255, 255, 255, 1);
}
.work-status2 {
font-size: 3.8vw;
display: inline-block;
background: #ffe1ae;
padding: 1% 3.5%;
text-align: center;
color: #353870;
border-radius: 5px;
opacity: 2;
margin-left: 5px;
}
.work-bottem {
cursor: pointer;
display: flex;
position: absolute;
width: 28%;
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: 18px;
font-weight: 700;
letter-spacing: 0px;
line-height: 26.06px;
color: rgba(255, 255, 255, 1);
}
} }
/* 平板 */ /* 平板 */
@ -266,49 +274,51 @@ body{
width: 100%; width: 100%;
margin: auto; margin: auto;
} }
.works { .works {
/* ../api/ShowApi
/* ../api/ShowApi
work\src\assets\bg@3x.png */ work\src\assets\bg@3x.png */
background-image: url('../assets/bg@2x.png');
background-color: #8f98f6;
width: 100%;
min-height: 100vh;
position: relative;
margin: auto;
background-size: 100% 100%;
}
background-image: url('../assets/bg@2x.png');
background-color: #8f98f6;
width: 100%;
min-height: 100vh;
position: relative;
margin: auto;
background-size: 100% 100%;
}
.work-list { .work-list {
width: 95%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin: auto;
}
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: 97%;
height: 17vh;
opacity: 1;
border-radius: 10px;
background-color: rgba(255, 225, 174, 1);
margin-bottom: 3%;
}
.list {
display: flex;
justify-content: center;
align-items: center;
width: 97%;
height: 17vh;
opacity: 1;
border-radius: 10px;
background-color: rgba(255, 225, 174, 1);
margin-bottom: 3%;
}
.work-item {
.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;
}
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-name { .work-name {
opacity: 1; opacity: 1;
/** 文本1 */ /** 文本1 */
@ -329,99 +339,104 @@ body{
width: 50%; width: 50%;
/* 如果需要，也可以设置宽度 */ /* 如果需要，也可以设置宽度 */
} }
.work-content { .work-content {
width: 90%;
height: 35%;
position: absolute;
bottom: 10%;
display: flex;
}
width: 90%;
height: 35%;
position: absolute;
bottom: 10%;
display: flex;
}
.work-time {
position: absolute;
display: flex;
width: 70%;
bottom: 20%;
}
.work-time {
position: absolute;
display: flex;
width: 70%;
bottom: 20%;
}
.deadline {
color: rgba(142, 142, 142, 1);
font-size: 14px;
opacity: 1;
}
.deadline {
color: rgba(142, 142, 142, 1);
font-size: 14px;
opacity: 1;
}
.work-status {
display: inline-block;
background: rgba(53, 56, 112, 0.1);
padding: 0.5% 2%;
text-align: center;
color: #353870;
font-size: 1rem;
border-radius: 5px;
opacity: 2;
margin-left: 5px;
}
.work-status2 {
display: inline-block;
background: #ffe1ae;
padding: 0.5% 2%;
text-align: center;
color: #353870;
font-size: 1rem;
border-radius: 5px;
opacity: 2;
margin-left: 5px;
}
.work-bottem {
cursor: pointer;
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;
/* 确保文本在其容器内居中 */
}
.work-status {
display: inline-block;
background: rgba(53, 56, 112, 0.1);
padding: 0.5% 2%;
text-align: center;
color: #353870;
font-size: 1rem;
border-radius: 5px;
opacity: 2;
margin-left: 5px;
}
.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);
}
.work-status2 {
display: inline-block;
background: #ffe1ae;
padding: 0.5% 2%;
text-align: center;
color: #353870;
font-size: 1rem;
border-radius: 5px;
opacity: 2;
margin-left: 5px;
}
.work-bottem {
cursor: pointer;
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);
}
} }
/* 电脑 */
/* 电脑 */
@media (min-width: 1280px) { @media (min-width: 1280px) {
.container { .container {
width: 27%; width: 27%;
margin: auto; margin: auto;
} }
.works { .works {
/* ../api/ShowApi
/* ../api/ShowApi
work\src\assets\bg@3x.png */ 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;
background-size: 100% 100%;
}
.work-name {
background-image: url('../assets/bg@3x.png');
background-color: #8f98f6;
width: 100%;
min-height: 100vh;
position: relative;
margin: auto;
background-size: 100% 100%;
}
.work-name {
opacity: 1; opacity: 1;
/** 文本1 */ /** 文本1 */
font-size: 1.4vw; font-size: 1.4vw;
@ -442,122 +457,118 @@ body{
} }
.work-list { .work-list {
width: 95%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin: auto;
}
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: 97%;
height: 17vh;
opacity: 1;
border-radius: 10px;
background-color: rgba(255, 225, 174, 1);
margin-bottom: 3%;
}
.list {
display: flex;
justify-content: center;
align-items: center;
width: 97%;
height: 17vh;
opacity: 1;
border-radius: 10px;
background-color: rgba(255, 225, 174, 1);
margin-bottom: 3%;
}
.work-item {
.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;
}
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 { .work-content {
width: 90%;
height: 35%;
position: absolute;
bottom: 10%;
display: flex;
}
width: 90%;
height: 35%;
position: absolute;
bottom: 10%;
display: flex;
}
.work-time {
position: absolute;
display: flex;
width: 70%;
bottom: 15%;
}
.work-time {
position: absolute;
display: flex;
width: 70%;
bottom: 15%;
}
.deadline {
color: rgba(142, 142, 142, 1);
font-size: 14px;
opacity: 1;
align-items: center;
padding-top: 0.2vw;
}
.deadline {
color: rgba(142, 142, 142, 1);
font-size: 14px;
opacity: 1;
align-items: center;
padding-top: 0.2vw;
}
.work-status {
display: inline-block;
background: rgba(53, 56, 112, 0.1);
padding: 0.5% 2%;
text-align: center;
color: #353870;
font-size: 1rem;
border-radius: 5px;
opacity: 2;
margin-left: 5px;
}
.work-status2 {
display: inline-block;
background: #ffe1ae;
padding: 0.5% 2%;
text-align: center;
color: #353870;
font-size: 1rem;
border-radius: 5px;
opacity: 2;
margin-left: 5px;
}
.work-bottem {
cursor: pointer;
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;
/* 确保文本在其容器内居中 */
}
.work-status {
display: inline-block;
background: rgba(53, 56, 112, 0.1);
padding: 0.5% 2%;
text-align: center;
color: #353870;
font-size: 1rem;
border-radius: 5px;
opacity: 2;
margin-left: 5px;
}
.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);
}
.work-status2 {
display: inline-block;
background: #ffe1ae;
padding: 0.5% 2%;
text-align: center;
color: #353870;
font-size: 1rem;
border-radius: 5px;
opacity: 2;
margin-left: 5px;
}
.work-bottem {
cursor: pointer;
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);
}
} }
.work-list{
.work-list {
margin-top: 12%; margin-top: 12%;
} }
</style> </style>
Write Preview
Loading…
Cancel
Save