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

调整样式适配不同设备

ql_yjt
ting 5 months ago
parent
23c14dbb89
commit
cdf068ee39
4 changed files with 309 additions and 32 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 Download Patch File Download Diff File
  1. BIN
      work/src/assets/bg.png
  2. BIN
      work/src/assets/bg@2x.png
  3. 4
      work/src/assets/main.css
  4. 337
      work/src/views/WorksShowView.vue

BIN
work/src/assets/bg.png
View File

Side by Side

After

Width: 375  |  Height: 727  |  Size: 76 KiB

BIN
work/src/assets/bg@2x.png
View File

Side by Side

After

Width: 750  |  Height: 1454  |  Size: 255 KiB

4
work/src/assets/main.css
View File

@ -0,0 +1,4 @@
body {
font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', miui, 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
}

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

@ -33,6 +33,15 @@ function loadWorks() {
]
}
loadWorks();
//跳转写作业页面
function writeWorks(id){
router.push({
path:'/doWork',
query:{
id:id,
}
})
}
</script>
<template>
@ -51,13 +60,12 @@ loadWorks();
</div>
<div class="work-content">
<div class="work-time">
<span class="deadline">截止时间：</span>
<span class="deadline">{{ work.endData }}</span>
<span class="deadline">截止时间：{{ work.endData }}</span>
<!-- 作业提价状态 -->
<div class="work-status">未提交</div>
</div>
<div class="work-bottem">
<span class="write">写作业</span>
<span class="write" @click="writeWorks(work.id)">写作业</span>
</div>
</div>
</div>
@ -78,7 +86,7 @@ body{
.work-name {
opacity: 1;
/** 文本1 */
font-size: 1.125rem;
font-size: 1.5vw;
font-weight: 700;
letter-spacing: 0px;
color: rgba(53, 56, 112, 1);
@ -96,13 +104,156 @@ body{
/* 如果需要，也可以设置宽度 */
}
.ketangzuoye {
margin-top: 2vh;
margin-left: 2vw;
width: 43%;
}
.book {
float: right;
margin-right: 1vw;
width: 30%;
}
/* 手机 */
@media (min-width: 344px) and (max-width: 768px) {
@media (max-width: 768px) {
.container {
width: 100%;
margin: auto;
}
.works {
/* ../api/ShowApi
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;
}
.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%;
}
.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;
}
.work-name {
opacity: 1;
/** 文本1 */
font-size: 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: 50%;
/* 如果需要，也可以设置宽度 */
}
.work-content {
width: 95%;
height: 35%;
position: absolute;
bottom: 10%;
display: flex;
}
.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; */
}
.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-bottem {
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);
}
}
/* 平板 */
@ -111,6 +262,49 @@ body{
width: 100%;
margin: auto;
}
.works {
/* ../api/ShowApi
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%;
}
.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-name {
opacity: 1;
/** 文本1 */
@ -131,7 +325,68 @@ body{
width: 50%;
/* 如果需要，也可以设置宽度 */
}
.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: 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-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);
}
}
/* 电脑 */
@media (min-width: 1280px) {
@ -139,9 +394,7 @@ body{
width: 27%;
margin: auto;
}
}
.works {
.works {
/* ../api/ShowApi
work\src\assets\bg@3x.png */
background-image: url('../assets/bg@3x.png');
@ -150,22 +403,30 @@ body{
min-height: 100vh;
position: relative;
margin: auto;
background-size: 100% 100%;
}
.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%;
/* 如果需要，也可以设置宽度 */
}
.ketangzuoye {
margin-top: 2vh;
margin-left: 2vw;
width: 43%;
}
.book {
float: right;
margin-right: 1vw;
width: 30%;
}
.work-list {
.work-list {
width: 95%;
display: flex;
justify-content: center;
@ -178,7 +439,7 @@ body{
display: flex;
justify-content: center;
align-items: center;
width: 95%;
width: 97%;
height: 17vh;
opacity: 1;
border-radius: 10px;
@ -196,10 +457,7 @@ body{
border-radius: 10px;
border-radius: 10px;
}
.work-content {
.work-content {
width: 90%;
height: 35%;
position: absolute;
@ -211,24 +469,26 @@ body{
position: absolute;
display: flex;
width: 70%;
bottom: 20%;
bottom: 15%;
}
.deadline {
color: rgba(142, 142, 142, 1);
font-size: 0.875rem;
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% 1%;
padding: 0.5% 2%;
text-align: center;
color: #353870;
font-size: 0.875rem;
font-size: 1rem;
border-radius: 5px;
opacity: 1;
opacity: 2;
margin-left: 5px;
}
@ -261,4 +521,17 @@ body{
line-height: 26.06px;
color: rgba(255, 255, 255, 1);
}
}
.work-list{
margin-top: 12%;
}
</style>
Write Preview
Loading…
Cancel
Save