替换为svg

822d38f5 · 郭铭瑶 · e802f534 · 822d38f5 · 822d38f5 · 822d38f5
Commit 822d38f5 authored Sep 04, 2021 by 郭铭瑶 🤘
8 changed files
--- a/src/assets/images/nav1.svg
+++ b/src/assets/images/nav1.svg
+<svg width="22" height="20" viewBox="0 0 22 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.0928956 0.579123C0.256754 0.225959 0.610688 0 1.00001 0H21C21.3893 0 21.7433 0.225959 21.9071 0.579123C22.071 0.932288 22.015 1.34845 21.7636 1.64573L14 10.8261V19C14 19.3466 13.8206 19.6684 13.5257 19.8507C13.2309 20.0329 12.8628 20.0494 12.5528 19.8944L8.5528 17.8944C8.21402 17.725 8.00001 17.3788 8.00001 17V10.8261L0.236443 1.64573C-0.0149541 1.34845 -0.0709627 0.932288 0.0928956 0.579123ZM3.15532 2L9.76358 9.81428C9.91625 9.9948 10 10.2236 10 10.46V16.382L12 17.382V10.46C12 10.2236 12.0838 9.9948 12.2364 9.81428L18.8447 2H3.15532Z" fill="black"/>
+</svg>
--- a/src/assets/images/nav2.svg
+++ b/src/assets/images/nav2.svg
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 22V15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4 15C4 15 5 14 8 14C11 14 13 16 16 16C19 16 20 15 20 15V3C20 3 19 4 16 4C13 4 11 2 8 2C5 2 4 3 4 3V15Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/src/assets/images/nav3.svg
+++ b/src/assets/images/nav3.svg
+<svg width="20" height="22" viewBox="0 0 20 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.800781 2.40017C0.800781 1.51652 1.51712 0.800171 2.40078 0.800171H17.8008C18.6844 0.800171 19.4008 1.51652 19.4008 2.40017V8.80017C19.4008 9.68383 18.6844 10.4002 17.8008 10.4002H6.80039V15.5006H9.80078V14.9998C9.80078 14.1161 10.5171 13.3998 11.4008 13.3998H17.8008C18.6844 13.3998 19.4008 14.1161 19.4008 14.9998V19.5998C19.4008 20.4834 18.6844 21.1998 17.8008 21.1998H11.4008C10.5171 21.1998 9.80078 20.4834 9.80078 19.5998V17.9006H5.60039C4.93765 17.9006 4.40039 17.3633 4.40039 16.7006V10.4002H2.40078C1.51712 10.4002 0.800781 9.68383 0.800781 8.80017V2.40017ZM3.20078 3.20017V8.00017H17.0008V3.20017H3.20078ZM12.2008 15.7998V18.7998H17.0008V15.7998H12.2008Z" fill="currentColor"/>
+</svg>
--- a/src/assets/images/nav4.svg
+++ b/src/assets/images/nav4.svg
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21 16V8.00002C20.9996 7.6493 20.9071 7.30483 20.7315 7.00119C20.556 6.69754 20.3037 6.44539 20 6.27002L13 2.27002C12.696 2.09449 12.3511 2.00208 12 2.00208C11.6489 2.00208 11.304 2.09449 11 2.27002L4 6.27002C3.69626 6.44539 3.44398 6.69754 3.26846 7.00119C3.09294 7.30483 3.00036 7.6493 3 8.00002V16C3.00036 16.3508 3.09294 16.6952 3.26846 16.9989C3.44398 17.3025 3.69626 17.5547 4 17.73L11 21.73C11.304 21.9056 11.6489 21.998 12 21.998C12.3511 21.998 12.696 21.9056 13 21.73L20 17.73C20.3037 17.5547 20.556 17.3025 20.7315 16.9989C20.9071 16.6952 20.9996 16.3508 21 16Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M3.27002 6.95996L12 12.01L20.73 6.95996" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12 22.08V12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/src/assets/images/nav5.svg
+++ b/src/assets/images/nav5.svg
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.74998 0.553345H1.50146C0.94918 0.553345 0.501465 1.00106 0.501465 1.55334V3.80186C0.501465 4.35414 0.94918 4.80186 1.50146 4.80186H3.74998C4.30226 4.80186 4.74998 4.35414 4.74998 3.80186V1.55334C4.74998 1.00106 4.30226 0.553345 3.74998 0.553345Z" fill="currentColor"/>
+<path d="M10.125 0.553345H7.87646C7.32418 0.553345 6.87646 1.00106 6.87646 1.55334V3.80186C6.87646 4.35414 7.32418 4.80186 7.87646 4.80186H10.125C10.6773 4.80186 11.125 4.35414 11.125 3.80186V1.55334C11.125 1.00106 10.6773 0.553345 10.125 0.553345Z" fill="currentColor"/>
+<path d="M7.87646 6.87576H10.125C10.6773 6.87576 11.125 7.32347 11.125 7.87576V10.1243C11.125 10.6766 10.6773 11.1243 10.125 11.1243H7.87646C7.32418 11.1243 6.87646 10.6766 6.87646 10.1243V7.87576C6.87646 7.32347 7.32418 6.87576 7.87646 6.87576Z" fill="currentColor"/>
+<path d="M16.5 0.553345H14.2515C13.6992 0.553345 13.2515 1.00106 13.2515 1.55334V3.80186C13.2515 4.35414 13.6992 4.80186 14.2515 4.80186H16.5C17.0523 4.80186 17.5 4.35414 17.5 3.80186V1.55334C17.5 1.00106 17.0523 0.553345 16.5 0.553345Z" fill="currentColor"/>
+<path d="M14.2515 6.87576H16.5C17.0523 6.87576 17.5 7.32347 17.5 7.87576V10.1243C17.5 10.6766 17.0523 11.1243 16.5 11.1243H14.2515C13.6992 11.1243 13.2515 10.6766 13.2515 10.1243V7.87576C13.2515 7.32347 13.6992 6.87576 14.2515 6.87576Z" fill="currentColor"/>
+<path d="M3.74998 6.87576H1.50146C0.94918 6.87576 0.501465 7.32347 0.501465 7.87576V10.1243C0.501465 10.6766 0.94918 11.1243 1.50146 11.1243H3.74998C4.30226 11.1243 4.74998 10.6766 4.74998 10.1243V7.87576C4.74998 7.32347 4.30226 6.87576 3.74998 6.87576Z" fill="currentColor"/>
+<path d="M7.87646 13.1982H10.125C10.6773 13.1982 11.125 13.6459 11.125 14.1982V16.4467C11.125 16.999 10.6773 17.4467 10.125 17.4467H7.87646C7.32418 17.4467 6.87646 16.999 6.87646 16.4467V14.1982C6.87646 13.6459 7.32418 13.1982 7.87646 13.1982Z" fill="currentColor"/>
+<path d="M16.5 13.1982H14.2515C13.6992 13.1982 13.2515 13.6459 13.2515 14.1982V16.4467C13.2515 16.999 13.6992 17.4467 14.2515 17.4467H16.5C17.0523 17.4467 17.5 16.999 17.5 16.4467V14.1982C17.5 13.6459 17.0523 13.1982 16.5 13.1982Z" fill="currentColor"/>
+<path d="M1.50146 13.1982H3.74998C4.30226 13.1982 4.74998 13.6459 4.74998 14.1982V16.4467C4.74998 16.999 4.30226 17.4467 3.74998 17.4467H1.50146C0.94918 17.4467 0.501465 16.999 0.501465 16.4467V14.1982C0.501465 13.6459 0.94918 13.1982 1.50146 13.1982Z" fill="currentColor"/>
+</svg>
--- a/src/assets/images/reset.svg
+++ b/src/assets/images/reset.svg
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 6.66667C9.05333 6.66667 6.66667 9.05333 6.66667 12C6.66667 14.9467 9.05333 17.3333 12 17.3333C14.9467 17.3333 17.3333 14.9467 17.3333 12C17.3333 9.05333 14.9467 6.66667 12 6.66667ZM2.66667 16H0V21.3333C0 22.8 1.2 24 2.66667 24H8V21.3333H2.66667V16ZM2.66667 2.66667H8V0H2.66667C1.2 0 0 1.2 0 2.66667V8H2.66667V2.66667ZM21.3333 0H16V2.66667H21.3333V8H24V2.66667C24 1.2 22.8 0 21.3333 0ZM21.3333 21.3333H16V24H21.3333C22.8 24 24 22.8 24 21.3333V16H21.3333V21.3333Z" fill="currentColor"/>
+</svg>
--- a/src/view/components/nav-bar.vue
+++ b/src/view/components/nav-bar.vue
@@ -22,12 +22,95 @@
        </template>
      </n-input>
      <div class="align-center">
-        <img src="@images/nav1.png" />
-        <img src="@images/nav2.png" />
-        <img src="@images/nav3.png" />
+        <n-icon class="btn" size=".12rem">
+          <svg
+            width="22"
+            height="20"
+            viewBox="0 0 22 20"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              d="M0.0928956 0.579123C0.256754 0.225959 0.610688 0 1.00001 0H21C21.3893 0 21.7433 0.225959 21.9071 0.579123C22.071 0.932288 22.015 1.34845 21.7636 1.64573L14 10.8261V19C14 19.3466 13.8206 19.6684 13.5257 19.8507C13.2309 20.0329 12.8628 20.0494 12.5528 19.8944L8.5528 17.8944C8.21402 17.725 8.00001 17.3788 8.00001 17V10.8261L0.236443 1.64573C-0.0149541 1.34845 -0.0709627 0.932288 0.0928956 0.579123ZM3.15532 2L9.76358 9.81428C9.91625 9.9948 10 10.2236 10 10.46V16.382L12 17.382V10.46C12 10.2236 12.0838 9.9948 12.2364 9.81428L18.8447 2H3.15532Z"
+              fill="currentColor"
+            />
+          </svg>
+        </n-icon>
+        <n-icon class="btn" size=".12rem">
+          <svg
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M4 22V15"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+            <path
+              d="M4 15C4 15 5 14 8 14C11 14 13 16 16 16C19 16 20 15 20 15V3C20 3 19 4 16 4C13 4 11 2 8 2C5 2 4 3 4 3V15Z"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </svg>
+        </n-icon>
+        <n-icon class="btn" size=".12rem">
+          <svg
+            width="20"
+            height="22"
+            viewBox="0 0 20 22"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              d="M0.800781 2.40017C0.800781 1.51652 1.51712 0.800171 2.40078 0.800171H17.8008C18.6844 0.800171 19.4008 1.51652 19.4008 2.40017V8.80017C19.4008 9.68383 18.6844 10.4002 17.8008 10.4002H6.80039V15.5006H9.80078V14.9998C9.80078 14.1161 10.5171 13.3998 11.4008 13.3998H17.8008C18.6844 13.3998 19.4008 14.1161 19.4008 14.9998V19.5998C19.4008 20.4834 18.6844 21.1998 17.8008 21.1998H11.4008C10.5171 21.1998 9.80078 20.4834 9.80078 19.5998V17.9006H5.60039C4.93765 17.9006 4.40039 17.3633 4.40039 16.7006V10.4002H2.40078C1.51712 10.4002 0.800781 9.68383 0.800781 8.80017V2.40017ZM3.20078 3.20017V8.00017H17.0008V3.20017H3.20078ZM12.2008 15.7998V18.7998H17.0008V15.7998H12.2008Z"
+              fill="currentColor"
+            />
+          </svg>
+        </n-icon>
        <n-dropdown :options="options" show-arrow>
          <div class="align-center">
-            <img src="@images/nav4.png" />
+            <n-icon class="btn" size=".12rem" style="margin-right: 0">
+              <svg
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M21 16V8.00002C20.9996 7.6493 20.9071 7.30483 20.7315 7.00119C20.556 6.69754 20.3037 6.44539 20 6.27002L13 2.27002C12.696 2.09449 12.3511 2.00208 12 2.00208C11.6489 2.00208 11.304 2.09449 11 2.27002L4 6.27002C3.69626 6.44539 3.44398 6.69754 3.26846 7.00119C3.09294 7.30483 3.00036 7.6493 3 8.00002V16C3.00036 16.3508 3.09294 16.6952 3.26846 16.9989C3.44398 17.3025 3.69626 17.5547 4 17.73L11 21.73C11.304 21.9056 11.6489 21.998 12 21.998C12.3511 21.998 12.696 21.9056 13 21.73L20 17.73C20.3037 17.5547 20.556 17.3025 20.7315 16.9989C20.9071 16.6952 20.9996 16.3508 21 16Z"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+                <path
+                  d="M3.27002 6.95996L12 12.01L20.73 6.95996"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+                <path
+                  d="M12 22.08V12"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+              </svg>
+            </n-icon>
            <n-icon size=".1rem">
              <svg
                xmlns="http://www.w3.org/2000/svg"
@@ -45,7 +128,55 @@
      </div>
      <b>|</b>
      <div class="align-center menu-btn">
-        <img src="@images/nav5.png" />
+        <n-icon
+          size=".12rem"
+          style="margin-right: 0.05rem; margin-bottom: 0.01rem"
+        >
+          <svg
+            width="18"
+            height="18"
+            viewBox="0 0 18 18"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M3.74998 0.553345H1.50146C0.94918 0.553345 0.501465 1.00106 0.501465 1.55334V3.80186C0.501465 4.35414 0.94918 4.80186 1.50146 4.80186H3.74998C4.30226 4.80186 4.74998 4.35414 4.74998 3.80186V1.55334C4.74998 1.00106 4.30226 0.553345 3.74998 0.553345Z"
+              fill="currentColor"
+            />
+            <path
+              d="M10.125 0.553345H7.87646C7.32418 0.553345 6.87646 1.00106 6.87646 1.55334V3.80186C6.87646 4.35414 7.32418 4.80186 7.87646 4.80186H10.125C10.6773 4.80186 11.125 4.35414 11.125 3.80186V1.55334C11.125 1.00106 10.6773 0.553345 10.125 0.553345Z"
+              fill="currentColor"
+            />
+            <path
+              d="M7.87646 6.87576H10.125C10.6773 6.87576 11.125 7.32347 11.125 7.87576V10.1243C11.125 10.6766 10.6773 11.1243 10.125 11.1243H7.87646C7.32418 11.1243 6.87646 10.6766 6.87646 10.1243V7.87576C6.87646 7.32347 7.32418 6.87576 7.87646 6.87576Z"
+              fill="currentColor"
+            />
+            <path
+              d="M16.5 0.553345H14.2515C13.6992 0.553345 13.2515 1.00106 13.2515 1.55334V3.80186C13.2515 4.35414 13.6992 4.80186 14.2515 4.80186H16.5C17.0523 4.80186 17.5 4.35414 17.5 3.80186V1.55334C17.5 1.00106 17.0523 0.553345 16.5 0.553345Z"
+              fill="currentColor"
+            />
+            <path
+              d="M14.2515 6.87576H16.5C17.0523 6.87576 17.5 7.32347 17.5 7.87576V10.1243C17.5 10.6766 17.0523 11.1243 16.5 11.1243H14.2515C13.6992 11.1243 13.2515 10.6766 13.2515 10.1243V7.87576C13.2515 7.32347 13.6992 6.87576 14.2515 6.87576Z"
+              fill="currentColor"
+            />
+            <path
+              d="M3.74998 6.87576H1.50146C0.94918 6.87576 0.501465 7.32347 0.501465 7.87576V10.1243C0.501465 10.6766 0.94918 11.1243 1.50146 11.1243H3.74998C4.30226 11.1243 4.74998 10.6766 4.74998 10.1243V7.87576C4.74998 7.32347 4.30226 6.87576 3.74998 6.87576Z"
+              fill="currentColor"
+            />
+            <path
+              d="M7.87646 13.1982H10.125C10.6773 13.1982 11.125 13.6459 11.125 14.1982V16.4467C11.125 16.999 10.6773 17.4467 10.125 17.4467H7.87646C7.32418 17.4467 6.87646 16.999 6.87646 16.4467V14.1982C6.87646 13.6459 7.32418 13.1982 7.87646 13.1982Z"
+              fill="currentColor"
+            />
+            <path
+              d="M16.5 13.1982H14.2515C13.6992 13.1982 13.2515 13.6459 13.2515 14.1982V16.4467C13.2515 16.999 13.6992 17.4467 14.2515 17.4467H16.5C17.0523 17.4467 17.5 16.999 17.5 16.4467V14.1982C17.5 13.6459 17.0523 13.1982 16.5 13.1982Z"
+              fill="currentColor"
+            />
+            <path
+              d="M1.50146 13.1982H3.74998C4.30226 13.1982 4.74998 13.6459 4.74998 14.1982V16.4467C4.74998 16.999 4.30226 17.4467 3.74998 17.4467H1.50146C0.94918 17.4467 0.501465 16.999 0.501465 16.4467V14.1982C0.501465 13.6459 0.94918 13.1982 1.50146 13.1982Z"
+              fill="currentColor"
+            />
+          </svg>
+        </n-icon>
        选择菜单
      </div>
    </div>
@@ -176,14 +307,17 @@ watch(
      cursor pointer
      font-size .11rem
      white-space nowrap
-      img
-        margin-right .05rem
-    img
-      width .12rem
-      height @width
+      &:hover
+        color $red
+    .btn
      cursor pointer
      margin 0 .08rem
-      &.icon
+      padding .04rem
+      border-radius .02rem
+      &:hover
+        color $red
+        background $light-red
+    .icon
      width .12rem
      height @width
      margin-left -0.02rem

--- a/src/view/main.vue
+++ b/src/view/main.vue
@@ -2,7 +2,20 @@
  <NavBar @focus="showTag = false" @blur="showTag = true" />
  <BasicInfo :visible="showTag" />
  <div class="reset">
-    <img src="@images/reset.png" />
+    <n-icon class="icon" size=".14rem">
+      <svg
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M12 6.66667C9.05333 6.66667 6.66667 9.05333 6.66667 12C6.66667 14.9467 9.05333 17.3333 12 17.3333C14.9467 17.3333 17.3333 14.9467 17.3333 12C17.3333 9.05333 14.9467 6.66667 12 6.66667ZM2.66667 16H0V21.3333C0 22.8 1.2 24 2.66667 24H8V21.3333H2.66667V16ZM2.66667 2.66667H8V0H2.66667C1.2 0 0 1.2 0 2.66667V8H2.66667V2.66667ZM21.3333 0H16V2.66667H21.3333V8H24V2.66667C24 1.2 22.8 0 21.3333 0ZM21.3333 21.3333H16V24H21.3333C22.8 24 24 22.8 24 21.3333V16H21.3333V21.3333Z"
+          fill="currentColor"
+        />
+      </svg>
+    </n-icon>
  </div>
  <InforModal class="info-modal" />
  <listModal class="list-modal" />
@@ -31,12 +44,8 @@ const showTag = ref(true)
  $center()
  cursor pointer
  &:hover
-    >img
-      transform scale(1.2)
-  >img
-    width .14rem
-    height @width
-    transition transform .3s ease-in-out
+    .icon
+      color $red
 .info-modal
  position fixed
  top 0