|
|
<template> <div :class=" detail ? 'header_container detail_header' : noFirst ? 'header_container noFirst_header' : 'header_container' " > <div class="header_logo"> <svg version="1.1" @click="toHome()" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" :class="detail || noFirst ? 'logo_img' : 'logo_home'" y="0px" viewBox="0 0 60 60" style="enable-background: new 0 0 60 60" xml:space="preserve" > <g> <g id="LINE_18_"> <polygon class="st0" points="27.23,13.71 27.25,13.73 27.26,13.74 27.28,13.75 27.3,13.76 27.32,13.78 27.33,13.79 27.35,13.81 27.36,13.82 27.38,13.84 27.4,13.85 27.41,13.87 27.43,13.89 27.44,13.9 27.45,13.92 27.47,13.94 27.48,13.96 27.5,13.98 27.51,14 27.52,14.02 27.54,14.04 27.55,14.06 27.56,14.08 27.57,14.11 27.58,14.13 27.6,14.15 27.61,14.18 27.63,14.23 27.65,14.28 27.67,14.33 27.69,14.39 27.7,14.45 27.72,14.51 27.73,14.57 27.75,14.64 27.76,14.71 27.77,14.78 27.78,14.85 27.79,14.92 27.79,15 27.8,15.08 27.8,15.16 27.81,15.24 27.81,15.41 27.8,15.6 27.79,15.79 27.78,15.99 27.76,16.19 27.73,16.41 27.69,16.64 27.66,16.87 27.61,17.11 27.5,17.62 27.37,18.15 27.22,18.72 27.04,19.31 26.84,19.93 26.62,20.57 26.11,21.9 25.54,23.28 24.9,24.69 24.22,26.11 23.51,27.51 22.77,28.89 22.03,30.21 21.26,31.51 20.44,32.84 19.58,34.16 18.69,35.46 17.78,36.71 16.87,37.9 15.97,39 15.53,39.51 15.1,39.99 14.67,40.44 14.26,40.86 13.86,41.24 13.48,41.59 13.29,41.75 13.11,41.9 12.93,42.04 12.76,42.17 12.59,42.3 12.42,42.41 12.26,42.51 12.11,42.61 11.96,42.69 11.88,42.73 11.81,42.77 11.74,42.8 11.67,42.84 11.6,42.87 11.54,42.89 11.47,42.92 11.41,42.94 11.34,42.97 11.28,42.98 11.22,43 11.16,43.02 11.1,43.03 11.05,43.04 10.99,43.05 10.94,43.05 10.91,43.06 10.88,43.06 10.86,43.06 10.83,43.06 10.81,43.06 10.78,43.06 10.76,43.06 10.73,43.06 10.71,43.06 10.68,43.06 10.66,43.05 10.64,43.05 10.61,43.05 10.59,43.04 10.57,43.04 10.55,43.03 10.53,43.03 10.5,43.02 10.48,43.02 10.46,43.01 10.44,43 10.42,42.99 10.4,42.99 10.38,42.98 10.36,42.97 10.35,42.96 10.33,42.95 10.31,42.94 10.29,42.93 10.27,42.92 10.26,42.91 10.24,42.89 10.22,42.88 10.2,42.87 10.19,42.85 10.17,42.84 10.15,42.83 10.14,42.81 10.12,42.79 10.11,42.78 10.09,42.76 10.08,42.75 10.06,42.73 10.05,42.71 10.03,42.69 10.02,42.67 10.01,42.65 9.99,42.63 9.98,42.61 9.97,42.59 9.95,42.57 9.94,42.55 9.93,42.52 9.92,42.5 9.91,42.48 9.9,42.45 9.87,42.4 9.85,42.35 9.83,42.3 9.82,42.24 9.8,42.18 9.78,42.12 9.77,42.06 9.76,41.99 9.74,41.92 9.73,41.85 9.72,41.78 9.72,41.71 9.71,41.63 9.7,41.55 9.7,41.47 9.7,41.39 9.7,41.22 9.7,41.03 9.71,40.84 9.73,40.64 9.75,40.44 9.77,40.22 9.81,40 9.85,39.76 9.89,39.52 10,39.01 10.13,38.48 10.29,37.91 10.47,37.32 10.67,36.7 10.89,36.06 11.39,34.73 11.96,33.35 12.6,31.94 13.28,30.52 13.99,29.12 14.73,27.75 15.48,26.42 16.25,25.12 17.07,23.79 17.93,22.47 18.81,21.17 19.72,19.92 20.63,18.73 21.53,17.63 21.97,17.12 22.41,16.64 22.83,16.19 23.24,15.77 23.64,15.39 24.03,15.04 24.21,14.88 24.39,14.73 24.57,14.59 24.75,14.46 24.92,14.33 25.08,14.22 25.24,14.12 25.4,14.02 25.55,13.94 25.62,13.9 25.69,13.86 25.76,13.83 25.83,13.79 25.9,13.76 25.97,13.74 26.03,13.71 26.1,13.69 26.16,13.67 26.22,13.65 26.28,13.63 26.34,13.62 26.4,13.6 26.46,13.59 26.51,13.58 26.57,13.58 26.59,13.57 26.62,13.57 26.65,13.57 26.67,13.57 26.7,13.57 26.72,13.57 26.75,13.57 26.77,13.57 26.8,13.57 26.82,13.58 26.84,13.58 26.87,13.58 26.89,13.58 26.91,13.59 26.93,13.59 26.96,13.6 26.98,13.6 27,13.61 27.02,13.62 27.04,13.62 27.06,13.63 27.08,13.64 27.1,13.65 27.12,13.65 27.14,13.66 27.16,13.67 27.18,13.68 27.19,13.69 27.21,13.7 " /> </g> <g id="LINE_17_"> <polygon class="st0" points="50.55,42.96 50.54,42.97 50.52,42.98 50.5,42.99 50.48,42.99 50.46,43 50.44,43.01 50.42,43.02 50.4,43.02 50.37,43.03 50.35,43.03 50.33,43.04 50.31,43.04 50.29,43.05 50.26,43.05 50.24,43.05 50.22,43.06 50.19,43.06 50.17,43.06 50.14,43.06 50.12,43.06 50.09,43.06 50.07,43.06 50.04,43.06 50.02,43.06 49.99,43.06 49.96,43.05 49.91,43.05 49.85,43.04 49.8,43.03 49.74,43.02 49.68,43 49.62,42.98 49.56,42.97 49.49,42.94 49.43,42.92 49.36,42.89 49.3,42.87 49.23,42.84 49.16,42.8 49.09,42.77 49.02,42.73 48.94,42.69 48.79,42.61 48.64,42.51 48.48,42.41 48.31,42.3 48.14,42.17 47.97,42.04 47.79,41.9 47.61,41.75 47.42,41.59 47.04,41.24 46.64,40.86 46.23,40.44 45.8,39.99 45.37,39.51 44.93,39 44.03,37.9 43.12,36.71 42.21,35.46 41.32,34.16 40.46,32.84 39.65,31.51 38.87,30.21 38.13,28.89 37.39,27.51 36.68,26.11 36,24.69 35.36,23.28 34.79,21.9 34.28,20.57 34.06,19.93 33.86,19.31 33.68,18.72 33.53,18.15 33.4,17.62 33.29,17.11 33.24,16.87 33.21,16.64 33.17,16.41 33.14,16.19 33.12,15.99 33.11,15.79 33.1,15.6 33.09,15.41 33.09,15.24 33.1,15.16 33.1,15.08 33.11,15 33.11,14.92 33.12,14.85 33.13,14.78 33.14,14.71 33.15,14.64 33.17,14.57 33.18,14.51 33.2,14.45 33.21,14.39 33.23,14.33 33.25,14.28 33.27,14.23 33.29,14.18 33.3,14.15 33.32,14.13 33.33,14.11 33.34,14.08 33.35,14.06 33.36,14.04 33.38,14.02 33.39,14 33.4,13.98 33.42,13.96 33.43,13.94 33.45,13.92 33.46,13.9 33.48,13.89 33.49,13.87 33.51,13.85 33.52,13.84 33.54,13.82 33.55,13.81 33.57,13.79 33.58,13.78 33.6,13.76 33.62,13.75 33.64,13.74 33.65,13.73 33.67,13.71 33.69,13.7 33.71,13.69 33.72,13.68 33.74,13.67 33.76,13.66 33.78,13.65 33.8,13.65 33.82,13.64 33.84,13.63 33.86,13.62 33.88,13.62 33.9,13.61 33.92,13.6 33.94,13.6 33.97,13.59 33.99,13.59 34.01,13.58 34.03,13.58 34.06,13.58 34.08,13.58 34.1,13.57 34.13,13.57 34.15,13.57 34.18,13.57 34.2,13.57 34.23,13.57 34.25,13.57 34.28,13.57 34.31,13.57 34.33,13.58 34.39,13.58 34.44,13.59 34.5,13.6 34.56,13.62 34.62,13.63 34.68,13.65 34.74,13.67 34.8,13.69 34.87,13.71 34.93,13.74 35,13.76 35.07,13.79 35.14,13.83 35.21,13.86 35.28,13.9 35.35,13.94 35.5,14.02 35.66,14.12 35.82,14.22 35.98,14.33 36.15,14.46 36.33,14.59 36.51,14.73 36.69,14.88 36.87,15.04 37.26,15.39 37.66,15.77 38.07,16.19 38.5,16.64 38.93,17.12 39.37,17.63 40.27,18.73 41.18,19.92 42.09,21.17 42.97,22.47 43.83,23.79 44.65,25.12 45.42,26.42 46.17,27.75 46.91,29.12 47.62,30.52 48.3,31.94 48.94,33.35 49.51,34.73 50.01,36.06 50.23,36.7 50.44,37.32 50.61,37.91 50.77,38.48 50.9,39.01 51.01,39.52 51.05,39.76 51.09,40 51.13,40.22 51.15,40.44 51.17,40.64 51.19,40.84 51.2,41.03 51.2,41.22 51.2,41.39 51.2,41.47 51.2,41.55 51.19,41.63 51.18,41.71 51.18,41.78 51.17,41.85 51.16,41.92 51.14,41.99 51.13,42.06 51.12,42.12 51.1,42.18 51.08,42.24 51.07,42.3 51.05,42.35 51.03,42.4 51,42.45 50.99,42.48 50.98,42.5 50.97,42.52 50.96,42.55 50.95,42.57 50.93,42.59 50.92,42.61 50.91,42.63 50.89,42.65 50.88,42.67 50.87,42.69 50.85,42.71 50.84,42.73 50.82,42.75 50.81,42.76 50.79,42.78 50.78,42.79 50.76,42.81 50.75,42.83 50.73,42.84 50.71,42.85 50.7,42.87 50.68,42.88 50.66,42.89 50.65,42.91 50.63,42.92 50.61,42.93 50.59,42.94 50.57,42.95 " /> </g> <g id="LINE_16_"> <polygon class="st0" points="13.57,48.54 13.57,48.52 13.57,48.49 13.57,48.47 13.57,48.45 13.58,48.43 13.58,48.41 13.59,48.39 13.59,48.37 13.6,48.35 13.6,48.32 13.61,48.3 13.62,48.28 13.62,48.26 13.63,48.24 13.64,48.22 13.65,48.2 13.66,48.17 13.67,48.15 13.68,48.13 13.7,48.11 13.71,48.09 13.72,48.07 13.73,48.04 13.75,48.02 13.76,48 13.78,47.98 13.81,47.93 13.85,47.89 13.88,47.85 13.92,47.8 13.97,47.76 14.01,47.71 14.06,47.67 14.11,47.63 14.16,47.58 14.22,47.54 14.27,47.49 14.33,47.45 14.4,47.41 14.46,47.36 14.53,47.32 14.6,47.27 14.75,47.19 14.91,47.1 15.08,47.01 15.26,46.93 15.45,46.84 15.65,46.76 15.86,46.67 16.09,46.59 16.32,46.51 16.81,46.35 17.34,46.19 17.91,46.05 18.51,45.9 19.14,45.77 19.81,45.64 21.21,45.41 22.69,45.22 24.23,45.06 25.8,44.94 27.38,44.86 28.93,44.81 30.45,44.8 31.97,44.81 33.52,44.86 35.1,44.94 36.67,45.06 38.21,45.22 39.69,45.41 41.09,45.64 41.76,45.77 42.39,45.9 42.99,46.05 43.56,46.19 44.09,46.35 44.58,46.51 44.82,46.59 45.04,46.67 45.25,46.76 45.45,46.84 45.64,46.93 45.82,47.01 45.99,47.1 46.15,47.19 46.3,47.27 46.37,47.32 46.44,47.36 46.5,47.41 46.57,47.45 46.63,47.49 46.68,47.54 46.74,47.58 46.79,47.63 46.84,47.67 46.89,47.71 46.93,47.76 46.98,47.8 47.02,47.85 47.05,47.89 47.09,47.93 47.12,47.98 47.14,48 47.15,48.02 47.17,48.04 47.18,48.07 47.19,48.09 47.21,48.11 47.22,48.13 47.23,48.15 47.24,48.17 47.25,48.2 47.26,48.22 47.27,48.24 47.28,48.26 47.28,48.28 47.29,48.3 47.3,48.32 47.3,48.35 47.31,48.37 47.31,48.39 47.32,48.41 47.32,48.43 47.33,48.45 47.33,48.47 47.33,48.49 47.33,48.52 47.33,48.54 47.34,48.56 47.34,48.58 47.34,48.6 47.33,48.62 47.33,48.64 47.33,48.66 47.33,48.68 47.33,48.7 47.32,48.73 47.32,48.75 47.31,48.77 47.31,48.79 47.3,48.81 47.3,48.83 47.29,48.85 47.28,48.88 47.28,48.9 47.27,48.92 47.26,48.94 47.25,48.96 47.24,48.98 47.23,49 47.22,49.03 47.21,49.05 47.19,49.07 47.18,49.09 47.17,49.11 47.15,49.14 47.14,49.16 47.12,49.18 47.09,49.22 47.05,49.27 47.02,49.31 46.98,49.35 46.93,49.4 46.89,49.44 46.84,49.49 46.79,49.53 46.74,49.57 46.68,49.62 46.63,49.66 46.57,49.71 46.5,49.75 46.44,49.8 46.37,49.84 46.3,49.88 46.15,49.97 45.99,50.06 45.82,50.14 45.64,50.23 45.45,50.32 45.25,50.4 45.04,50.48 44.82,50.57 44.58,50.65 44.09,50.81 43.56,50.96 42.99,51.11 42.39,51.25 41.76,51.39 41.09,51.51 39.69,51.74 38.21,51.94 36.67,52.1 35.1,52.21 33.52,52.3 31.97,52.35 30.45,52.36 28.93,52.35 27.38,52.3 25.8,52.21 24.23,52.1 22.69,51.94 21.21,51.74 19.81,51.51 19.14,51.39 18.51,51.25 17.91,51.11 17.34,50.96 16.81,50.81 16.32,50.65 16.09,50.57 15.86,50.48 15.65,50.4 15.45,50.32 15.26,50.23 15.08,50.14 14.91,50.06 14.75,49.97 14.6,49.88 14.53,49.84 14.46,49.8 14.4,49.75 14.33,49.71 14.27,49.66 14.22,49.62 14.16,49.57 14.11,49.53 14.06,49.49 14.01,49.44 13.97,49.4 13.92,49.35 13.88,49.31 13.85,49.27 13.81,49.22 13.78,49.18 13.76,49.16 13.75,49.14 13.73,49.11 13.72,49.09 13.71,49.07 13.7,49.05 13.68,49.03 13.67,49 13.66,48.98 13.65,48.96 13.64,48.94 13.63,48.92 13.62,48.9 13.62,48.88 13.61,48.85 13.6,48.83 13.6,48.81 13.59,48.79 13.59,48.77 13.58,48.75 13.58,48.73 13.57,48.7 13.57,48.68 13.57,48.66 13.57,48.64 13.57,48.62 13.56,48.6 13.56,48.58 13.56,48.56 " /> </g> <g id="CIRCLE_18_"> <path class="st0" d="M49.8,48.58c0-2.24,1.81-4.05,4.05-4.05s4.05,1.81,4.05,4.05s-1.81,4.05-4.05,4.05S49.8,50.82,49.8,48.58 L49.8,48.58z" /> </g> <g id="CIRCLE_17_"> <path class="st0" d="M3,48.58c0-2.24,1.81-4.05,4.05-4.05s4.05,1.81,4.05,4.05s-1.81,4.05-4.05,4.05S3,50.82,3,48.58L3,48.58z" /> </g> <g id="CIRCLE_16_"> <path class="st0" d="M26.4,8.05C26.4,5.81,28.21,4,30.45,4s4.05,1.81,4.05,4.05s-1.81,4.05-4.05,4.05S26.4,10.29,26.4,8.05 L26.4,8.05z" /> </g> </g> </svg> <h1 :class="detail || noFirst ? 'componey_name' : 'componey_name_home'"> 产品梦工厂 </h1> </div> <ul class="tab_group"> <li :class="activeTab == 0 ? 'active' : ''" @click="changeActiveTab(0)"> 首页 </li> <li :class="activeTab == 1 ? 'active' : ''" @click="changeActiveTab(1)"> 关于我们 </li> <li :class="activeTab == 2 ? 'active' : ''" @click="changeActiveTab(2)"> 产品中心 </li> <li :class="activeTab == 3 ? 'active' : ''" @click="changeActiveTab(3)"> 联系我们 </li> </ul> </div></template>
<script setup>import { ref, onMounted } from 'vue'import { useRouter, useRoute } from 'vue-router'const activeTab = ref(0)const router = useRouter()const route = useRoute()const props = defineProps({ detail: { type: Boolean, }, noFirst: { type: Boolean, },})onMounted(() => { const path = route.path if (path == '/product') { activeTab.value = 2 } if (path == '/') { activeTab.value = 0 }})const changeActiveTab = index => { activeTab.value = index if (index == 2) { router.push('/product') } if (index == 1) { router.push('/about') } if (index == 0) { toHome() }}const toHome = () => { router.push('/')}</script>
<style lang="scss" scoped>.header_container { padding: 13px 200px; display: flex; align-items: center; justify-content: space-between; position: fixed; top: 0; left: 0; right: 0; z-index: 999; .header_logo { display: flex; align-items: center; .logo_img { width: 44px; height: 44px; fill: #313131; cursor: pointer; } .logo_home { width: 44px; height: 44px; fill: #f1f1f1; cursor: pointer; } .componey_name { margin-left: 21px; font-size: 28px; font-weight: 500; color: #313131; } .componey_name_home { margin-left: 21px; font-size: 28px; font-weight: 500; color: #f1f1f1; } }
.tab_group { display: flex; align-items: center; justify-content: space-between; font-size: 18px; font-weight: 200; color: #ffffff; & > li { margin-right: 65px; cursor: pointer; &:last-child { margin-right: 0; } } .active { font-weight: 500; } }}.detail_header { position: static; background: #ffffff; .tab_group { color: #000; }}.noFirst_header { background: #ffffff; border-bottom: solid 1px #ededed; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(30px); .tab_group { color: #000; }}</style>
|
