clinic-v2
/
web
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

dev

This commit is contained in:
ChenQiuYu 2025-05-15 10:23:28 +08:00
parent 0c2957ce04
commit 1936df69b7
3 changed files with 51 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/assets/scss/base.scss
View File

@ -17,7 +17,7 @@ $border-color-lighter: #EBEEF5;
$border-color-extra-light: #F2F6FC; $border-color-extra-light: #F2F6FC;
// 背景颜色 // 背景颜色
$background-color-base: #eee; $background-color-base: #F1F5FB;
$background-color-main: #4D6DE4; $background-color-main: #4D6DE4;
// 边框圆角 // 边框圆角

2
src/assets/scss/main.scss
View File

@ -35,7 +35,7 @@ html {
} }
body { body {
background-color: #EEEEEEFF; background-color: base.$background-color-base;
} }
.center-wrapper { .center-wrapper {

72
src/views/LayoutInventory.vue
View File

@ -1,56 +1,82 @@
<template> <template>
<div class="layout-container"> <div class="layout-container">
<Header class="header"/> <Header class="header"/>
<header> <div class="body">
<div class="center-wrapper"> <header style="height: 50px">
<div class="childMenu"> <div class="center-wrapper">
<router-link :to="item.path" class="child-item" v-for="(item,index) in childMenuList" :key="index"> <div class="childMenu">
{{ item.name }} <router-link :to="item.path" class="child-item" v-for="(item,index) in childMenuList" :key="index">
</router-link> {{ item.name }}
</router-link>
</div>
</div> </div>
</div> </header>
</header> <main class="layout-main" style="margin-top: 24px">
<div class="space"></div> <router-view/>
<main class="layout-main"> </main>
<router-view/> </div>
</main>
<div class="space"></div>
<Footer class="footer"/> <Footer class="footer"/>
</div> </div>
</template> </template>
<style scoped lang="scss"> <style scoped lang="scss">
.body{
height: 100%;
padding: 24px;
display: flex;
flex-direction: column;
}
.childMenu { .childMenu {
width: 100%; width: 100%;
height: 60px; height: 50px;
background: #fff; background: #fff;
display: flex; display: flex;
align-items: center; align-items: center;
border-radius: 8px;
.child-item { .child-item {
width: 136px;
display: inline-block; display: inline-block;
color: #151515; color: #151515;
outline: none; outline: none;
text-decoration: none; text-decoration: none;
font-size: 18px; font-size: 18px;
margin-left: 10px; height: 50px;
margin-right: 10px;
height: 35px;
position: relative; position: relative;
line-height: 50px;
text-align: center;
&::before{
content: '';
position: absolute;
right: 0;
top:50%;
display: block;
width: 2px;
height: 16px;
background: #D8D8D8;
border-radius: 1px;
transform: translate(0 ,-50%);
}
&:last-child::before{
display: none;
}
} }
.router-link-active:after { .router-link-active:after {
content: ''; content: '';
display: block; display: block;
width: 100%; width: 80px;
height: 2px; height: 4px;
background-color: #151515; // 下划线颜色 background-color: #4D6DE4; // 下划线颜色
position: absolute; position: absolute;
bottom: -5px; // 调整下划线与文字的距离 bottom: 0; // 调整下划线与文字的距离
left: 0; left: 50%;
transform: translateX(-50%);
} }
} }
a.router-link-active.router-link-exact-active.child-item{
color: #4D6DE4;
}
</style> </style>