切换头部svg

2 years ago · 1785d1f178
4 changed files with 189 additions and 14 deletions
--- a/src/components/AboutUs.vue
+++ b/src/components/AboutUs.vue
@ -5,7 +5,7 @@
      line1="专业水下视学设备团队，研发出品,多年的使用经验打磨的好产品，支持定制，想您所想,另外公司有硬件研发团队"
      line2="软件研发团队、结构研发团队、外观研发团队也能帮您研发设计其他产品。"
    />
-    <div class="more_btn">
+    <div class="more_btn" @click="toAboutPage()">
      <span>了解更多</span>
      <span>→</span>
    </div>
@ -16,6 +16,11 @@
 <script setup>
 import HeadLine from '@/components/HeadLine'
 import FourCard from '@/components/FourCard'
+import { useRouter } from 'vue-router'
+const router = useRouter()
+const toAboutPage = () => {
+  router.push('/about')
+}
 </script>

 <style lang="scss" scoped>
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@ -8,12 +8,143 @@
        : 'header_container'
    "
  >
-    <img
-      :src="detail || noFirst ? Logo1 : Logo"
-      alt="logo"
-      class="logo_img"
-      @click="toHome()"
-    />
+    <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)">
        首页
@ -34,8 +165,6 @@
 <script setup>
 import { ref, onMounted } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
-import Logo from '@/static/img/index/2.png'
-import Logo1 from '@/static/img/zhongxin/logo.png'
 const activeTab = ref(0)
 const router = useRouter()
 const route = useRoute()
@ -61,6 +190,9 @@ const changeActiveTab = index => {
  if (index == 2) {
    router.push('/product')
  }
+  if (index == 1) {
+    router.push('/about')
+  }
  if (index == 0) {
    toHome()
  }
@ -72,7 +204,7 @@ const toHome = () => {

 <style lang="scss" scoped>
 .header_container {
-  padding: 23px 200px;
+  padding: 13px 200px;
  display: flex;
  align-items: center;
  justify-content: space-between;
@ -81,11 +213,35 @@ const toHome = () => {
  left: 0;
  right: 0;
  z-index: 999;
-  .logo_img {
-    width: 216px;
-    height: 44px;
-    cursor: pointer;
+  .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;
@ -115,6 +271,8 @@ const toHome = () => {
 .noFirst_header {
  background: #ffffff;
  border-bottom: solid 1px #ededed;
+  background: rgba(255, 255, 255, 0.9);
+  backdrop-filter: blur(30px);
  .tab_group {
    color: #000;
  }
--- a/src/pages/About.vue
+++ b/src/pages/About.vue
@ -0,0 +1,10 @@
+<template>
+  <div class="about_main_container">关于我们</div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped>
+.about_main_container {
+}
+</style>
--- a/src/router/index.js
+++ b/src/router/index.js
@ -1,11 +1,13 @@
 import { createRouter, createWebHashHistory } from 'vue-router'
 const Home = () => import('@/pages')
 const Product = () => import('@/pages/Product')
+const About = () => import('@/pages/About')

 // 配置路由信息
 const routes = [
  { path: '/', component: Home },
  { path: '/product', component: Product },
+  { path: '/about', component: About },
 ]

 const router = createRouter({