开始设计布局

This commit is contained in:
Kane 2023-03-04 00:09:25 +08:00
parent ce33d04694
commit 04e7a8cd5b
2 changed files with 49 additions and 22 deletions

View File

@ -5,10 +5,9 @@ html {
} }
body { body {
width: 100vw; /* width: 100vw;
height: 100vh; height: 100vh; */
padding: 0px; padding: 0px;
margin: 0px; margin: 0px;
overflow: hidden; overflow: hidden;
} }

View File

@ -9,7 +9,13 @@
--> -->
<template> <template>
<div class="view-wrapper"> <div class="view-wrapper">
<span>对标先进&nbsp;比学赶超</span> <!-- <div class="left-wrapper"></div> -->
<div class="center-wrapper">
<span class="slogan">对标先进&nbsp;比学赶超</span>
</div>
<div class="right-wrapper">
</div>
</div> </div>
</template> </template>
@ -44,30 +50,52 @@ export default {
<style scoped lang="scss"> <style scoped lang="scss">
.view-wrapper { .view-wrapper {
box-sizing: border-box; box-sizing: border-box;
min-height: 600px;
height: 100vh; height: 100vh;
min-width: 1280px;
width: 100vw; width: 100vw;
border: 1px solid red; padding: 5mm;
} display: flex;
justify-content: end;
align-items: stretch;
span { .slogan {
margin: 0px; margin: 0px;
display: block; padding-top: 15px;
display: block;
text-align: center;
font: { font: {
family: "FZ-ZHUOHEI"; family: "FZ-ZHUOHEI";
weight: 100; weight: 100;
size: 70px; size: 70px;
}
color: $color-bg-05;
text-shadow: #feebb1 0px 0px,
#feebb1 5px 0px,
#feebb1 -5px -0px,
#feebb1 -0px -5px,
#feebb1 -4px -4px,
#feebb1 4px 4px,
#feebb1 4px -4px,
#feebb1 -4px 4px;
} }
color: $color-bg-05; div {
text-shadow: #feebb1 0px 0px, border: 1px solid red;
#feebb1 5px 0px, box-sizing: border-box;
#feebb1 -5px -0px, }
#feebb1 -0px -5px, }
#feebb1 -4px -4px,
#feebb1 4px 4px, .center-wrapper {
#feebb1 4px -4px, width: 50%;
#feebb1 -4px 4px; // margin-left: auto;
}
.right-wrapper {
min-width: 400px;
width: 25%;
} }
</style> </style>
<style lang="scss"> <style lang="scss">