Vue.js 中 home.vue 文件添加代码：导航栏和状态显示

<p>{
&quot;title&quot;: &quot;Vue.js 中 home.vue 文件添加代码：导航栏和状态显示&quot;,
&quot;description&quot;: &quot;本示例介绍如何在 Vue.js 项目的 home.vue 文件中添加导航栏和状态显示代码，并解释代码结构和功能。&quot;,
&quot;keywords&quot;: &quot;Vue.js, home.vue, 导航栏, 状态显示, 代码示例&quot;,
&quot;content&quot;: &quot;<!-- eslint-disable vue/multi-word-component-names -->
<template></p>
  <div>
    <div class="Polaris-Stack Polaris-Stack--distributionEqualSpacing Polaris-Stack--alignmentCenter" style="margin-top: 1px;border-bottom: 1px #c1c1c1 solid;padding: 5px;">
      <div class="Polaris-Stack__Item">
        <div class="Polaris-Stack Polaris-Stack--spacingTight Polaris-Stack--alignmentCenter">
          <div class="Polaris-Stack__Item">
            <div class="sc-1ibht3l-0 uqRZq">
            </div>
            <div class="sc-1ibht3l-1 hIZedH">
              <div class="Polaris-ButtonGroup">
                <div class="Polaris-ButtonGroup__Item">
                  <router-link to="/" class="Polaris-Button">
                    <span class="Polaris-Button__Content">
                      <span class="Polaris-Button__Text">Dashboard</span>
                    </span>
                  </router-link>
                </div>
                <div class="Polaris-ButtonGroup__Item">
                  <router-link to="/zone" class="Polaris-Button">
                    <span class="Polaris-Button__Content">
                      <span class="Polaris-Button__Text">Checkout Zones</span>
                    </span>
                  </router-link>
                </div>
                <div class="Polaris-ButtonGroup__Item">
                  <router-link to="/funnel" class="Polaris-Button">
                    <span class="Polaris-Button__Content">
                      <span class="Polaris-Button__Text">Funnels</span>
                    </span>
                  </router-link>
                </div>
                <div class="Polaris-ButtonGroup__Item">
                  <router-link to="/help" class="Polaris-Button">
                    <span class="Polaris-Button__Content">
                      <span class="Polaris-Button__Text">Help Center</span>
                    </span>
                  </router-link>
                </div>
                <div class="Polaris-ButtonGroup__Item">
                  <div>
                    <button type="button" id="moreSeting" class="Polaris-Button" tabindex="0" aria-controls="Popover486" aria-owns="Popover486" aria-haspopup="true" aria-expanded="false">
                      <span class="Polaris-Button__Content">
                        <span class="Polaris-Button__Text">More</span>
                        <span class="Polaris-Button__Icon">
                          <span class="Polaris-Icon">
                            <svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
                              <path d="M5 8l5 5 5-5z" fill-rule="evenodd"></path>
                            </svg>
                          </span>
                        </span>
                      </span>
                      <div id="dropdownContent" class="dropdown-content">
                        <!-- 这里放下拉列表的内容 -->
                        <a href="payment.html">Payment</a>
                        <a href="facebookPixel.html">Pixel</a>
                      </div>
                    </button>
<pre><code>              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;Polaris-Stack Polaris-Stack--distributionEqualSpacing Polaris-Stack--alignmentCenter&quot; style=&quot;margin-top: 1px;border-bottom: 1px #c1c1c1 solid;padding: 5px;&quot;&gt;
  &lt;div class=&quot;Polaris-Stack__Item&quot;&gt;
    &lt;div class=&quot;Polaris-Stack Polaris-Stack--spacingTight&quot;&gt;
      &lt;div class=&quot;Polaris-Stack__Item&quot;&gt;
        &lt;div class=&quot;sc-1pokqsy-0 dqXEel&quot;&gt;
          &lt;div tabindex=&quot;-1&quot; aria-controls=&quot;Popover493&quot; aria-owns=&quot;Popover493&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot;&gt;
            &lt;div class=&quot;sc-1pokqsy-1 fQGSrj&quot;&gt;
              &lt;div class=&quot;Polaris-Stack Polaris-Stack--spacingExtraTight Polaris-Stack--alignmentCenter&quot;&gt;
                &lt;div class=&quot;Polaris-Stack__Item&quot;&gt;
                  &lt;p&gt;Status: &lt;/p&gt;
                &lt;/div&gt;
                &lt;div class=&quot;Polaris-Stack__Item&quot;&gt;
                  &lt;span class=&quot;Polaris-Badge Polaris-Badge--statusSuccess&quot;&gt;
                    &lt;span class=&quot;Polaris-VisuallyHidden&quot;&gt;Success&lt;/span&gt;Enabled
                  &lt;/span&gt;
                &lt;/div&gt;
                &lt;div class=&quot;Polaris-Stack__Item&quot;&gt;
                  &lt;span class=&quot;Polaris-Icon Polaris-Icon--colorInkLightest Polaris-Icon--isColored&quot;&gt;
                    &lt;svg viewBox=&quot;0 0 20 20&quot; class=&quot;Polaris-Icon__Svg&quot; focusable=&quot;false&quot; aria-hidden=&quot;true&quot;&gt;
                      &lt;path d=&quot;M5 8l5 5 5-5z&quot; fill-rule=&quot;evenodd&quot;&gt;&lt;/path&gt;
                    &lt;/svg&gt;
                  &lt;/span&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class=&quot;ynsxbt-0 iqzcmc&quot; style=&quot;display: none;&quot;&gt;
            &lt;div class=&quot;ynsxbt-1 fHRVPN&quot;&gt;
              &lt;div class=&quot;Polaris-Card&quot;&gt;
                &lt;div class=&quot;Polaris-Card__Section&quot;&gt;
                  &lt;div class=&quot;Polaris-Stack Polaris-Stack--distributionEqualSpacing&quot;&gt;
                    &lt;div class=&quot;Polaris-Stack__Item&quot;&gt;
                      &lt;h2 class=&quot;Polaris-Heading&quot;&gt;Disable PPFunnels?&lt;/h2&gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;Polaris-Stack__Item&quot;&gt;
                      &lt;div class=&quot;ynsxbt-2 gYaAIi&quot;&gt;
                        &lt;span class=&quot;Polaris-Icon Polaris-Icon--colorInkLightest Polaris-Icon--isColored&quot;&gt;
                          &lt;svg viewBox=&quot;0 0 20 20&quot; class=&quot;Polaris-Icon__Svg&quot; focusable=&quot;false&quot; aria-hidden=&quot;true&quot;&gt;
                            &lt;path d=&quot;M11.414 10l6.293-6.293a.999.999 0 1 0-1.414-1.414L10 8.586 3.707 2.293a.999.999 0 1 0-1.414 1.414L8.586 10l-6.293 6.293a.999.999 0 1 0 1.414 1.414L10 11.414l6.293 6.293a.997.997 0 0 0 1.414 0 .999.999 0 0 0 0-1.414L11.414 10z&quot; fill-rule=&quot;evenodd&quot;&gt;&lt;/path&gt;
                          &lt;/svg&gt;
                        &lt;/span&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class=&quot;ynsxbt-3 bZoarq&quot;&gt;
                  &lt;div class=&quot;Polaris-Card&quot;&gt;
                    &lt;div class=&quot;Polaris-Card__Section&quot;&gt;
                      &lt;div class=&quot;Polaris-TextContainer&quot;&gt;
                        &lt;p&gt;All PPFunnels features will be disabled.&lt;/p&gt;
                        &lt;p&gt;Checkouts will be processed by Shopify.&lt;/p&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class=&quot;Polaris-Card__Section&quot;&gt;
                  &lt;div class=&quot;Polaris-Stack Polaris-Stack--distributionTrailing&quot;&gt;
                    &lt;div class=&quot;Polaris-Stack__Item&quot;&gt;
                      &lt;div class=&quot;Polaris-ButtonGroup&quot;&gt;
                        &lt;div class=&quot;Polaris-ButtonGroup__Item&quot;&gt;
                          &lt;button type=&quot;button&quot; class=&quot;Polaris-Button&quot;&gt;
                            &lt;span class=&quot;Polaris-Button__Content&quot;&gt;
                              &lt;span class=&quot;Polaris-Button__Text&quot;&gt;Cancel&lt;/span&gt;
                            &lt;/span&gt;
                          &lt;/button&gt;
                        &lt;/div&gt;
                        &lt;div class=&quot;Polaris-ButtonGroup__Item&quot;&gt;
                          &lt;button type=&quot;button&quot; class=&quot;Polaris-Button Polaris-Button--destructive&quot;&gt;
                            &lt;span class=&quot;Polaris-Button__Content&quot;&gt;
                              &lt;span class=&quot;Polaris-Button__Text&quot;&gt;Disable PPFunnels&lt;/span&gt;
                            &lt;/span&gt;
                          &lt;/button&gt;
                        &lt;/div&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>
  </div>
</template>
<script>
  export default {
    // eslint-disable-next-line vue/multi-word-component-names
    name: 'Home',
  };
</script>
<style>
  @import '../style.css'; 
</style>