PPFunnels Dashboard - Manage Your Checkout Funnels - 常规

<template>
  <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>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
<pre><code>&lt;!-- New Code Snippet --&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 Polaris-Stack--alignmentCenter&quot;&gt;
      &lt;div class=&quot;Polaris-Stack__Item&quot;&gt;
        &lt;div class=&quot;sc-1ibht3l-0 uqRZq&quot;&gt;&lt;/div&gt;
        &lt;div class=&quot;sc-1ibht3l-1 hIZedH&quot;&gt;
          &lt;div class=&quot;Polaris-ButtonGroup&quot;&gt;
            &lt;div class=&quot;Polaris-ButtonGroup__Item&quot;&gt;
              &lt;a data-polaris-unstyled=&quot;true&quot; class=&quot;Polaris-Button&quot; href=&quot;index.html&quot;&gt;
                &lt;span class=&quot;Polaris-Button__Content&quot;&gt;
                  &lt;span class=&quot;Polaris-Button__Text&quot;&gt;Dashboard&lt;/span&gt;
                &lt;/span&gt;
              &lt;/a&gt;
            &lt;/div&gt;
            &lt;div class=&quot;Polaris-ButtonGroup__Item&quot;&gt;
              &lt;a data-polaris-unstyled=&quot;true&quot; class=&quot;Polaris-Button&quot; href=&quot;zone.html&quot;&gt;
                &lt;span class=&quot;Polaris-Button__Content&quot;&gt;
                  &lt;span class=&quot;Polaris-Button__Text&quot;&gt;Checkout Zones&lt;/span&gt;
                &lt;/span&gt;
              &lt;/a&gt;
            &lt;/div&gt;
            &lt;div class=&quot;Polaris-ButtonGroup__Item&quot;&gt;
              &lt;a data-polaris-unstyled=&quot;true&quot; class=&quot;Polaris-Button&quot; href=&quot;funnel.html&quot;&gt;
                &lt;span class=&quot;Polaris-Button__Content&quot;&gt;
                  &lt;span class=&quot;Polaris-Button__Text&quot;&gt;Funnels&lt;/span&gt;
                &lt;/span&gt;
              &lt;/a&gt;
            &lt;/div&gt;
            &lt;div class=&quot;Polaris-ButtonGroup__Item&quot;&gt;
              &lt;a data-polaris-unstyled=&quot;true&quot; class=&quot;Polaris-Button&quot; href=&quot;help.html&quot;&gt;
                &lt;span class=&quot;Polaris-Button__Content&quot;&gt;
                  &lt;span class=&quot;Polaris-Button__Text&quot;&gt;Help Center&lt;/span&gt;
                &lt;/span&gt;
              &lt;/a&gt;
            &lt;/div&gt;
            &lt;div class=&quot;Polaris-ButtonGroup__Item&quot;&gt;
              &lt;div&gt;
                &lt;button type=&quot;button&quot; id=&quot;moreSeting&quot; class=&quot;Polaris-Button&quot; tabindex=&quot;0&quot; aria-controls=&quot;Popover486&quot; aria-owns=&quot;Popover486&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot;&gt;
                  &lt;span class=&quot;Polaris-Button__Content&quot;&gt;
                    &lt;span class=&quot;Polaris-Button__Text&quot;&gt;More&lt;/span&gt;
                    &lt;span class=&quot;Polaris-Button__Icon&quot;&gt;
                      &lt;span class=&quot;Polaris-Icon&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;/span&gt;
                  &lt;/span&gt;
                  &lt;div id=&quot;dropdownContent&quot; class=&quot;dropdown-content&quot;&gt;
                    &lt;a href=&quot;payment.html&quot;&gt;Payment&lt;/a&gt;
                    &lt;a href=&quot;facebookPixel.html&quot;&gt;Pixel&lt;/a&gt;
                  &lt;/div&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 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>