样式优化
This commit is contained in:
parent
2b2afa5de3
commit
d49225746c
|
|
@ -6,13 +6,13 @@
|
|||
|
||||
<div class="code">
|
||||
<img class="text1" src="@/assets/orangeUi/shouyewenzi.svg" alt="" />
|
||||
<img class="sbm" src="../assets/orangeUi/input.svg" alt="" />
|
||||
<img class="sbm" src="@/assets/orangeUi/input.svg" alt="" />
|
||||
<input class="input-code" @wheel="isNotWheel" type="number" v-model="inputCode" />
|
||||
<img class="dl" @click="login" src="@/assets/orangeUi/button.svg" alt="" />
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<img src="../assets/orangeUi/footer_cg.svg" alt="" />
|
||||
<img src="@/assets/orangeUi/footer_cg.svg" alt="" />
|
||||
</div>
|
||||
|
||||
<van-dialog
|
||||
|
|
@ -224,22 +224,37 @@
|
|||
width: 100vw;
|
||||
background: url('@/assets/orangeUi/bj5.svg') no-repeat;
|
||||
background-size: cover;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center; // 垂直居中
|
||||
}
|
||||
|
||||
.hrbun {
|
||||
height: 44vh;
|
||||
width: 100vw;
|
||||
.hrbun {
|
||||
width: 90%;
|
||||
//display: flex;
|
||||
//justify-content: center;
|
||||
//align-items: center;
|
||||
|
||||
img {
|
||||
padding-top: 6vh;
|
||||
width: 90%;
|
||||
}
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.code {
|
||||
width: 90%;
|
||||
height: 270px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px; // 减少组件之间的间距
|
||||
|
||||
.text1 {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.sbm {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.input-code {
|
||||
text-align: center;
|
||||
|
|
@ -251,6 +266,7 @@
|
|||
font-weight: 600;
|
||||
border-radius: 132px;
|
||||
background: rgba(255, 255, 255, 1), rgba(255, 255, 255, 1);
|
||||
//border: 4px solid rgba(141, 35, 40, 0.6);
|
||||
border: 4px solid rgba(237, 75, 54, 0.6);
|
||||
box-shadow:
|
||||
0px 0px 0px rgba(0, 0, 0, 0.1),
|
||||
|
|
@ -261,28 +277,22 @@
|
|||
0px 74px 21px rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
.text1 {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.sbm {
|
||||
width: 90%;
|
||||
margin-top: 2vh;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.dl {
|
||||
width: 50%;
|
||||
margin-top: 2vh;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
width: 100vw;
|
||||
width: 90%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 10px; // 减少与上方组件的间距
|
||||
|
||||
img {
|
||||
padding-top: 3vh;
|
||||
width: 80%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -291,38 +301,28 @@
|
|||
text-align: left;
|
||||
|
||||
span {
|
||||
text-align: left;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
p {
|
||||
text-align: left;
|
||||
text-indent: 20px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
margin: 10px 0;
|
||||
|
||||
em {
|
||||
font-style: normal;
|
||||
text-align: center;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 隐藏Chrome和Firefox的内嵌上下箭头 */
|
||||
/* 隐藏数字输入框的内嵌箭头 */
|
||||
input[type='number']::-webkit-inner-spin-button,
|
||||
input[type='number']::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* 隐藏Firefox的内嵌上下箭头 */
|
||||
input[type='number'] {
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
|
||||
/* 隐藏Edge的内嵌上下箭头 */
|
||||
input[type='number']::-webkit-inner-spin-button,
|
||||
input[type='number']::-moz-inner-spin-button {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,17 +1,16 @@
|
|||
<template>
|
||||
<div class="main-container">
|
||||
<div class="hsd-title">
|
||||
<!-- <img src="@/assets/img1/logo.svg">-->
|
||||
<img src="@/assets/orangeUi/logo.svg" />
|
||||
</div>
|
||||
<div class="head-cg">
|
||||
<!-- <img src="@/assets/img1/cg.svg">-->
|
||||
<img src="@/assets/orangeUi/cg.svg" />
|
||||
</div>
|
||||
<div class="main-content">
|
||||
<div class="main-text">
|
||||
{{ userInfo.userName }}，您已成功报名！<p
|
||||
>感谢您参与本次
|
||||
{{ userInfo.userName }}，您已成功报名！
|
||||
<p>
|
||||
感谢您参与本次
|
||||
<em style="font-style: normal; color: red; font-weight: 700">{{ getUserInfo(userInfo.majorId) }}</em> 学科评卷工作！
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -473,162 +472,100 @@
|
|||
];
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.dialog-close-content {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 0;
|
||||
font-weight: 700;
|
||||
font-size: 30px;
|
||||
//background-color: #42b983;
|
||||
color: #949494;
|
||||
}
|
||||
|
||||
.main-container {
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
background: url('@/assets/orangeUi/bj5.svg') no-repeat;
|
||||
//background: url("@/assets/img1/bj.svg") no-repeat;
|
||||
background-size: 100%;
|
||||
background-size: cover;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.hsd-title {
|
||||
width: 100vw;
|
||||
height: 15vh;
|
||||
padding-top: 5vh;
|
||||
//border: 1px solid red;
|
||||
img {
|
||||
width: 65%;
|
||||
margin-top: 8vh;
|
||||
}
|
||||
.hsd-title {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding-top: 20px; // 调整顶部间距
|
||||
|
||||
img {
|
||||
width: 65%;
|
||||
margin-top: 8vh;
|
||||
}
|
||||
}
|
||||
|
||||
.head-cg {
|
||||
width: 100vw;
|
||||
height: 15vh;
|
||||
//border: 1px solid black;
|
||||
img {
|
||||
margin-top: 5vh;
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
.head-cg {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.main-content {
|
||||
margin-top: 10vh;
|
||||
width: 100vw;
|
||||
height: 10vh;
|
||||
//border: 1px solid orange;
|
||||
color: black;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.main-icon {
|
||||
width: 97vw;
|
||||
height: 20vh;
|
||||
margin: 0 auto;
|
||||
img {
|
||||
width: 90%;
|
||||
margin-top: 5vh;
|
||||
//border: 1px solid green;
|
||||
.main-item {
|
||||
img {
|
||||
width: 50%;
|
||||
margin-top: 15%;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: -5px;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
width: 100vw;
|
||||
height: 20vh;
|
||||
//border: 1px solid blue;
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.grop-by {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
|
||||
p {
|
||||
text-align: center;
|
||||
line-height: 100px;
|
||||
font-size: initial;
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
|
||||
.txz-img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
.main-content {
|
||||
//margin-top: 10vh;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
//border: 5px solid red;
|
||||
background-image: url('@/assets/orangeUi/txz.svg');
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover; /* 修改这里 */
|
||||
z-index: 999;
|
||||
height: 10vh;
|
||||
text-align: center;
|
||||
//border: 1px solid orange;
|
||||
color: black;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
span {
|
||||
width: 30vw;
|
||||
//border: 1px solid red;
|
||||
font-weight: 700;
|
||||
color: #262626;
|
||||
font-size: 20px;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
}
|
||||
.main-icon {
|
||||
width: 97vw;
|
||||
height: 20vh;
|
||||
text-align: center;
|
||||
|
||||
.card-pai {
|
||||
position: absolute;
|
||||
left: 8.5vw;
|
||||
top: 71vh;
|
||||
//font-size: 24px;
|
||||
font-family: 微软雅黑;
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
font-size: 35px;
|
||||
height: 2.5rem;
|
||||
width: 80%;
|
||||
opacity: 1;
|
||||
//color: rgba(141, 35, 40, 0.6);
|
||||
//color: rgba(255, 255, 255, 0.8);
|
||||
color: white;
|
||||
//margin-top: 5vh;
|
||||
|
||||
font-weight: 600;
|
||||
border-radius: 132px;
|
||||
background: rgba(255, 255, 255, 1), rgba(255, 255, 255, 1);
|
||||
border: 4px solid rgba(255, 255, 255, 0.7);
|
||||
box-shadow:
|
||||
0px 0px 0px rgba(0, 0, 0, 0.1),
|
||||
0px 3px 7px rgba(0, 0, 0, 0.1),
|
||||
0px 12px 12px rgba(0, 0, 0, 0.09),
|
||||
0px 27px 16px rgba(0, 0, 0, 0.05),
|
||||
0px 47px 19px rgba(0, 0, 0, 0.01),
|
||||
0px 74px 21px rgba(0, 0, 0, 0);
|
||||
}
|
||||
.main-item {
|
||||
img {
|
||||
width: 50%;
|
||||
margin-top: 15%;
|
||||
}
|
||||
|
||||
.card-tishi {
|
||||
position: absolute;
|
||||
top: 80vh;
|
||||
left: 10vw;
|
||||
text-align: left;
|
||||
width: 80vw;
|
||||
font-size: 18px;
|
||||
color: white;
|
||||
margin: 0 auto;
|
||||
text-indent: 34px;
|
||||
p {
|
||||
margin-top: -5px;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//地图
|
||||
.ditu-img {
|
||||
.footer {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* 弹窗样式 */
|
||||
.dialog-close-content {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: #949494;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* 地图、通行证等弹窗样式 */
|
||||
.ditu-img,
|
||||
.txz-img,
|
||||
.zhixie-img,
|
||||
.xysh-img {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
|
@ -636,42 +573,27 @@
|
|||
height: 100vh;
|
||||
background-color: white;
|
||||
z-index: 999;
|
||||
|
||||
img {
|
||||
padding-top: 30%;
|
||||
}
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
span {
|
||||
position: absolute;
|
||||
left: 80%;
|
||||
right: 20px;
|
||||
top: 20px;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: #262626;
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.zhixie-img {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background-color: white;
|
||||
z-index: 999;
|
||||
|
||||
img {
|
||||
margin-top: 20%;
|
||||
}
|
||||
|
||||
span {
|
||||
position: absolute;
|
||||
left: 80%;
|
||||
font-weight: 700;
|
||||
color: #262626;
|
||||
font-size: 20px;
|
||||
max-width: 90%;
|
||||
max-height: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
/* 校园生活弹窗样式 */
|
||||
.xysh-img1 {
|
||||
background: url('@/assets/orangeUi/xysh1.jpg') no-repeat center center;
|
||||
background-size: cover;
|
||||
|
|
@ -681,47 +603,4 @@
|
|||
background: url('@/assets/orangeUi/xysh2.jpg') no-repeat center center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.xysh-img {
|
||||
//background: url("@/assets/orangeUi/xysh.svg") no-repeat center;
|
||||
////background-size: cover;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: white;
|
||||
//background: url() no-repeat;
|
||||
.card-img {
|
||||
//padding-top: 10%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
span {
|
||||
width: 30vw;
|
||||
//border: 1px solid red;
|
||||
font-weight: 700;
|
||||
color: #262626;
|
||||
font-size: 20px;
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: 0;
|
||||
}
|
||||
// 下一页
|
||||
.em-next {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 10px;
|
||||
/* 将元素向上移动自身高度的一半，以居中对齐 */
|
||||
//transform: translateY(-50%);
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 20px 20px 0 0; /* 创建一个向右的三角形 */
|
||||
border-color: #050505 transparent transparent transparent;
|
||||
transform: rotate(135deg);
|
||||
/* 箭头颜色为红色，其余部分透明 */
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue