style: 替换网站logo为svg矢量图并更新导航栏logo图标

替换了旧的png格式logo为全新设计的svg购物车代码主题logo,同时更新侧边栏和导航栏的logo渲染样式,统一品牌视觉效果
fix/exam-question-access-material-excel-delete-draft
qinzhenpen 3 weeks ago
parent b67cc2d61f
commit b1470e0069

@ -0,0 +1,33 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64">
<defs>
<linearGradient id="lg" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#38bdf8"/>
<stop offset="55%" stop-color="#0ea5e9"/>
<stop offset="100%" stop-color="#0284c7"/>
</linearGradient>
</defs>
<!-- 购物车主体:车身 + 轮子 -->
<g fill="none" stroke="url(#lg)" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round">
<!-- 车把:从左上斜向右下,末端带一个代码尖括号 < -->
<path d="M6 12 L16 12 L22 38 L46 38"/>
<!-- 车篮 -->
<path d="M16 12 L20 30 L48 30"/>
<!-- 车轮 -->
<circle cx="26" cy="46" r="4" fill="url(#lg)" stroke="none"/>
<circle cx="44" cy="46" r="4" fill="url(#lg)" stroke="none"/>
<!-- 底部横杆 -->
<path d="M22 38 L46 38"/>
</g>
<!-- 代码尖括号 </> 叠加在车身上,表达"产品开发" -->
<g fill="none" stroke="#f8fafc" stroke-width="2.8" stroke-linecap="round" stroke-linejoin="round" opacity="0.92">
<!-- 左尖括号 < -->
<path d="M32 18 L26 24 L32 30"/>
<!-- 斜杠 / -->
<path d="M38 17 L34 31"/>
</g>
<!-- 右上角一个小圆点,象征"互联网 / 在线" -->
<circle cx="54" cy="14" r="3" fill="url(#lg)"/>
</svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

@ -46,8 +46,16 @@
<div :class="[role !== 3 ? 'navTitle' : 'TnavTitle']"> <div :class="[role !== 3 ? 'navTitle' : 'TnavTitle']">
<div class="logo-area"> <div class="logo-area">
<svg class="logo-icon" width="28" height="28" viewBox="0 0 24 24" fill="none"> <svg class="logo-icon" width="28" height="28" viewBox="0 0 24 24" fill="none">
<path d="M12 2L2 7l10 5 10-5-10-5z" stroke="#00aaff" stroke-width="1.5" fill="rgba(0,170,255,0.15)"/> <!-- 购物车主体(车身 + 车把)-->
<path d="M2 17l10 5 10-5M2 12l10 5 10-5" stroke="#00aaff" stroke-width="1.5" opacity="0.6"/> <path d="M3 3h2l2.2 12h10.5l2.3-8H6" stroke="#00aaff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="rgba(0,170,255,0.12)"/>
<!-- 代码左尖括号 < 叠加在车身 = 产品开发 -->
<path d="M10 7.5L7.8 10l2.2 2.5" stroke="#00aaff" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" opacity="0.9"/>
<!-- 代码右尖括号 > 叠加在车身 = 产品开发 -->
<path d="M17 7.5L19.2 10l-2.2 2.5" stroke="#00aaff" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" opacity="0.9"/>
<!-- 左车轮 -->
<circle cx="8" cy="18.5" r="1.5" stroke="#00aaff" stroke-width="1.4"/>
<!-- 右车轮 -->
<circle cx="17" cy="18.5" r="1.5" stroke="#00aaff" stroke-width="1.4"/>
</svg> </svg>
<span class="nacber-name" v-if="role !== 3">电商互联网产品开发实训系统</span> <span class="nacber-name" v-if="role !== 3">电商互联网产品开发实训系统</span>
<span class="nacber-name" v-else>互联网产品开发实训系统</span> <span class="nacber-name" v-else>互联网产品开发实训系统</span>
@ -684,10 +692,10 @@ onMounted(() => {
.logo-icon { .logo-icon {
filter: none; filter: none;
path { path, circle {
stroke: #ffffff; stroke: #ffffff;
&:first-child { fill: rgba(255, 255, 255, 0.12); }
} }
path:first-child { fill: rgba(255, 255, 255, 0.12); }
} }
.nacber-name { .nacber-name {

@ -15,7 +15,7 @@
<script setup> <script setup>
import variables from '@/assets/styles/variables.module.scss' import variables from '@/assets/styles/variables.module.scss'
import logo from '@/assets/logo/logo.png' import logo from '@/assets/logo/logo.svg'
import useSettingsStore from '@/store/modules/settings' import useSettingsStore from '@/store/modules/settings'
defineProps({ defineProps({

Loading…
Cancel
Save