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

2 Commits
10c9a621b5 ... 81d0094852

Author SHA1 Message Date
ting 81d0094852 修改作业展示页面标题展示两行，其余为省略号
10 months ago
ting f5bfe50f47 修改作业名字显示两行，多余显示省略号
10 months ago
1 changed files with 218 additions and 81 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats
  1. 283
      work/src/views/WorksShowView.vue

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

@ -78,28 +78,6 @@ body {
margin: 0;
}
.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%;
/* 如果需要，也可以设置宽度 */
padding-top: 4%;
}
.ketangzuoye {
@ -153,6 +131,7 @@ body {
border-radius: 10px;
background-color: rgba(255, 225, 174, 1);
margin-bottom: 3%;
}
.work-item {
@ -167,31 +146,29 @@ body {
}
.work-name {
opacity: 1;
/** 文本1 */
font-size: 4vw;
font-size: 3.6vw;
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%;
/* 如果内容超过两行，省略号显示 */
height: 10vw;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; /* 限制显示两行文本 */
text-overflow: ellipsis;
/* padding-top: 2vw; */
}
.work-content {
width: 95%;
height: 35%;
height: vw;
position: absolute;
bottom: 10%;
bottom: 4%;
display: flex;
}
@ -204,7 +181,7 @@ body {
.deadline {
color: rgba(142, 142, 142, 1);
font-size: 3.6vw;
font-size: 2.5vw;
opacity: 1;
align-items: center;
padding-top: 0.5vw;
@ -213,7 +190,7 @@ body {
}
.work-status {
font-size: 3.8vw;
font-size: 2.5vw;
display: inline-block;
background: rgba(53, 56, 112, 0.1);
padding: 1% 3.5%;
@ -225,7 +202,7 @@ body {
}
.work-status2 {
font-size: 3.8vw;
font-size: 2.5vw;
display: inline-block;
background: #ffe1ae;
padding: 1% 3.5%;
@ -241,7 +218,7 @@ body {
display: flex;
position: absolute;
width: 28%;
height: 70%;
/* height: 70%; */
right: 0;
bottom: 2%;
opacity: 1;
@ -269,8 +246,157 @@ body {
}
}
/* 电脑 */
@media (min-width: 1023px) {
.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;
background-size: 100% 100%;
}
.work-name {
opacity: 1;
font-size: 1.2vw; /* 尝试使用固定像素值 */
font-weight: 700;
color: rgba(53, 56, 112, 1);
text-align: left;
width: 50%;
height: 3vw;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; /* 限制显示两行文本 */
text-overflow: ellipsis;
}
.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: 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: 15%;
}
.deadline {
color: rgba(142, 142, 142, 1);
font-size: 1vw;
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: 1vw;
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: 1vw;
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.5vw;
font-weight: 700;
letter-spacing: 0px;
line-height: 26.06px;
color: rgba(255, 255, 255, 1);
}
}
/* 平板 */
@media (min-width: 768px) and (max-width:1280px) {
@media (min-width: 766px) and (max-width:1023px) {
.container {
width: 100%;
margin: auto;
@ -323,7 +449,7 @@ body {
.work-name {
opacity: 1;
/** 文本1 */
font-size: 1.6rem;
font-size: 2.7vw;
font-weight: 700;
letter-spacing: 0px;
color: rgba(53, 56, 112, 1);
@ -335,17 +461,24 @@ body {
/* 启用 Flexbox 布局 */
align-items: center;
/* 垂直居中 */
height: 30%;
height: 6vw;
/* 设置高度，根据需要调整 */
width: 50%;
/* 如果需要，也可以设置宽度 */
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; /* 限制显示两行文本 */
text-overflow: ellipsis;
padding: 1vw;
}
.work-content {
width: 90%;
height: 35%;
position: absolute;
bottom: 10%;
bottom: 5%;
display: flex;
}
@ -417,18 +550,17 @@ body {
color: rgba(255, 255, 255, 1);
}
}
/* 电脑 */
@media (min-width: 1280px) {
/* 平板 */
@media (min-device-width: 768px) and (max-device-width: 1023px) {
.container {
width: 27%;
width: 100%;
margin: auto;
}
.works {
/* ../api/ShowApi
work\src\assets\bg@3x.png */
background-image: url('../assets/bg@3x.png');
background-image: url('../assets/bg@2x.png');
background-color: #8f98f6;
width: 100%;
min-height: 100vh;
@ -437,26 +569,6 @@ body {
background-size: 100% 100%;
}
.work-name {
opacity: 1;
/** 文本1 */
font-size: 1.4vw;
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: 70%;
}
.work-list {
width: 95%;
display: flex;
@ -489,6 +601,34 @@ body {
border-radius: 10px;
}
.work-name {
opacity: 1;
/** 文本1 */
font-size: 3vw;
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: 7vw;
/* 设置高度，根据需要调整 */
width: 50%;
/* 如果需要，也可以设置宽度 */
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; /* 限制显示两行文本 */
text-overflow: ellipsis;
padding: 1vw;
}
.work-content {
width: 90%;
height: 35%;
@ -501,15 +641,13 @@ body {
position: absolute;
display: flex;
width: 70%;
bottom: 15%;
bottom: 20%;
}
.deadline {
color: rgba(142, 142, 142, 1);
font-size: 14px;
opacity: 1;
align-items: center;
padding-top: 0.2vw;
}
.work-status {
@ -566,7 +704,6 @@ body {
line-height: 26.06px;
color: rgba(255, 255, 255, 1);
}
}
.work-list {

Write Preview
Loading…
Cancel
Save