This commit is contained in:
张家训
@@ -1,10 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44">
|
||||
<defs>
|
||||
<linearGradient id="fdLogoMinGrad" x1="0" y1="0" x2="1" y2="1">
|
||||
<stop offset="0%" stop-color="#2d8cf0"/>
|
||||
<stop offset="100%" stop-color="#1a5bb8"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect x="0" y="0" width="44" height="44" rx="11" fill="url(#fdLogoMinGrad)"/>
|
||||
<path d="M11 18 L33 12 L28 32 L21 24 L16 28 Z" fill="#ffffff"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 442 B |
@@ -1,11 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="184" height="44" viewBox="0 0 184 44">
|
||||
<defs>
|
||||
<linearGradient id="fdLogoGrad" x1="0" y1="0" x2="1" y2="1">
|
||||
<stop offset="0%" stop-color="#2d8cf0"/>
|
||||
<stop offset="100%" stop-color="#1a5bb8"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect x="2" y="2" width="40" height="40" rx="10" fill="url(#fdLogoGrad)"/>
|
||||
<path d="M12 17 L33 12 L28 32 L21 24 L16 28 Z" fill="#ffffff"/>
|
||||
<text x="54" y="28" font-family="'Helvetica Neue', Arial, 'PingFang SC', sans-serif" font-size="20" font-weight="600" letter-spacing="1" fill="#ffffff">Freedom</text>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 607 B |
@@ -3,35 +3,30 @@
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
padding: 4px 10px;
|
||||
border-radius: 20px;
|
||||
padding: 4px 8px;
|
||||
border-radius: 18px;
|
||||
transition: background .18s;
|
||||
&:hover{
|
||||
background: rgba(79, 110, 247, .08);
|
||||
}
|
||||
// 头像：白色描边 + 主色光晕，悬浮轻微放大
|
||||
// 头像：小尺寸、无描边无光晕，安静融入顶栏
|
||||
.user-avatar{
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
font-size: 16px;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
font-size: 13px;
|
||||
vertical-align: middle;
|
||||
box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(79, 110, 247, .25);
|
||||
transition: transform .15s;
|
||||
}
|
||||
&:hover .user-avatar{
|
||||
transform: scale(1.06);
|
||||
}
|
||||
// 姓名与下拉箭头
|
||||
// 姓名与下拉箭头：常规字重、浅色，视觉减重
|
||||
.user-nick{
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #3d4a66;
|
||||
margin: 0 4px 0 8px;
|
||||
font-weight: 400;
|
||||
color: #515a6e;
|
||||
margin: 0 2px 0 8px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.user-arrow{
|
||||
vertical-align: middle;
|
||||
color: #8090b0;
|
||||
color: #a3b0c9;
|
||||
transition: transform .18s;
|
||||
}
|
||||
&:hover .user-arrow{
|
||||
|
||||
@@ -38,7 +38,7 @@ export default {
|
||||
return {
|
||||
background: 'linear-gradient(135deg, #4f6ef7, #7c5cf0)',
|
||||
color: '#fff',
|
||||
fontWeight: 600
|
||||
fontWeight: 500
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
@@ -1,13 +1,33 @@
|
||||
.main{
|
||||
.logo-con{
|
||||
height: 64px;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
img{
|
||||
height: 44px;
|
||||
width: auto;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
// flex 居中：收起态只剩徽标也自动居中
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
// 渐变徽标：与登录页主色同源，无底色块，直接落在侧栏上
|
||||
.logo-badge{
|
||||
flex: none;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
text-align: center;
|
||||
border-radius: 10px;
|
||||
background: linear-gradient(135deg, #4f6ef7, #7c5cf0);
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
box-shadow: 0 2px 8px rgba(79, 110, 247, .3);
|
||||
}
|
||||
// 文字：深墨色，轻字重间隔，与侧栏浅底协调
|
||||
.logo-name{
|
||||
font-size: 21px;
|
||||
font-weight: 600;
|
||||
letter-spacing: .5px;
|
||||
color: #1f2d50;
|
||||
}
|
||||
}
|
||||
.header-con{
|
||||
|
||||
@@ -2,10 +2,10 @@
|
||||
<Layout style="height: 100%" class="main">
|
||||
<Sider hide-trigger collapsible :width="256" :collapsed-width="64" v-model="collapsed" class="left-sider sider-light" :style="{overflow: 'hidden'}">
|
||||
<side-menu accordion ref="sideMenu" :active-name="$route.name" :collapsed="collapsed" theme="light" @on-select="turnToPage" :menu-list="menuList">
|
||||
<!-- 需要放在菜单上面的内容，如Logo，写在side-menu标签内部，如下 -->
|
||||
<div class="logo-con" style="text-align: center">
|
||||
<img v-show="!collapsed" :src="maxLogo" key="max-logo" />
|
||||
<img v-show="collapsed" :src="minLogo" key="min-logo" />
|
||||
<!-- 纯 CSS logo：渐变徽标 + 文字，不用图片 -->
|
||||
<div class="logo-con">
|
||||
<div class="logo-badge">F</div>
|
||||
<span v-show="!collapsed" class="logo-name">Freedom</span>
|
||||
</div>
|
||||
</side-menu>
|
||||
</Sider>
|
||||
@@ -41,8 +41,6 @@ import Fullscreen from './components/fullscreen'
|
||||
import ErrorStore from './components/error-store'
|
||||
import { mapMutations, mapActions, mapGetters } from 'vuex'
|
||||
import { getNewTagList, getNextRoute, routeEqual } from '@/libs/util'
|
||||
import minLogo from '@/assets/images/logo-min.svg'
|
||||
import maxLogo from '@/assets/images/logo.svg'
|
||||
import './main.less'
|
||||
export default {
|
||||
name: 'Main',
|
||||
@@ -57,8 +55,6 @@ export default {
|
||||
data () {
|
||||
return {
|
||||
collapsed: false,
|
||||
minLogo,
|
||||
maxLogo,
|
||||
isFullscreen: false
|
||||
}
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user