Browse Source

fix: 消毒页布局调整

master
guoapeng 2 weeks ago
parent
commit
4016199e77
  1. 2
      src/components/home/Environment.vue
  2. 4
      src/components/home/HomeFormula.vue
  3. 5
      src/layouts/default.vue
  4. 19
      src/views/home/index.vue

2
src/components/home/Environment.vue

@ -132,6 +132,6 @@ onMounted(() => {
} }
} }
.odd { .odd {
background: rgba(139, 190, 239, 0.2);
background: rgba(139, 190, 239, 0.1);
} }
</style> </style>

4
src/components/home/HomeFormula.vue

@ -30,6 +30,10 @@ watchEffect(() => {
<style lang="scss" scoped> <style lang="scss" scoped>
.home-right-title{ .home-right-title{
background: #fff;
width: 90%;
border-radius: 10px;
margin: 10px auto;
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
font-size: 1.5rem; font-size: 1.5rem;

5
src/layouts/default.vue

@ -205,7 +205,7 @@ const toggleLanguage = () => {
.main { .main {
box-sizing: border-box; box-sizing: border-box;
height: 100%; height: 100%;
background: #fff;
background: #FAFAFA;
.header { .header {
height: 50px; height: 50px;
width: 100%; width: 100%;
@ -223,6 +223,7 @@ const toggleLanguage = () => {
} }
.header { .header {
color: #393F46; color: #393F46;
box-shadow: 0px 1px 5px 0px rgba(9, 39, 62, 0.15);
.logo { .logo {
height: 22px; height: 22px;
@ -287,7 +288,7 @@ const toggleLanguage = () => {
} }
.container { .container {
height: calc(100% - 100px); height: calc(100% - 100px);
background: #F6F6F6;
background: #fff;
} }
} }
.aside { .aside {

19
src/views/home/index.vue

@ -131,12 +131,14 @@ const nowLiquid = computed(() => {
<style lang="scss" scoped> <style lang="scss" scoped>
$input-height: 3rem; $input-height: 3rem;
.home{ .home{
min-height: $main-container-height;
width: 100%;
height: 100%;
} }
.home-grid-container { .home-grid-container {
width: 100%;
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
gap: 0.5rem;
gap: 20px;
} }
.home-merged-cell { .home-merged-cell {
grid-column: 1 / 2; grid-column: 1 / 2;
@ -146,16 +148,16 @@ const nowLiquid = computed(() => {
display: grid; display: grid;
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, auto); grid-template-rows: repeat(2, auto);
gap:.5rem;
gap: 20px;
.card { .card {
text-align: center; text-align: center;
height: 41.5vh;
height: 40vh;
width: 30.5vw; width: 30.5vw;
border: 1px solid rgb(225, 225, 225); border: 1px solid rgb(225, 225, 225);
position: relative; position: relative;
border-radius: 10px 10px 10px 10px; border-radius: 10px 10px 10px 10px;
background: #FFFFFF; background: #FFFFFF;
background: $gradient-color;
background: linear-gradient(180deg, rgba(147, 203, 255,1) -190%, #FFFFFF 24%);
.title-line{ .title-line{
height: 1vw; height: 1vw;
background-color: #b3d9ff; background-color: #b3d9ff;
@ -188,10 +190,11 @@ const nowLiquid = computed(() => {
} }
.home-right{ .home-right{
width: 36vw;
background: $gradient-color;
width: 32.8vw;
background: linear-gradient(180deg, rgba(147, 203, 255,1) -190%, #FFFFFF 24%);
position: relative; position: relative;
border-radius: 10px
border-radius: 10px;
box-shadow: 0 1px 5px 0 rgba(9, 39, 62, 0.15);
} }
.el-button { .el-button {
background-color: #2892F3 !important; background-color: #2892F3 !important;

Loading…
Cancel
Save