<p>{'title':'我想把这些加到home.vue文件中,倒是他之前还有其他样式,怎么新增,请给我具体的代码\n<!-- eslint-disable vue/multi-word-component-names -->\n<template>\n  <div>\n    <div class='Polaris-Stack Polaris-Stack--distributionEqualSpacing Polaris-Stack--alignmentCenter' style='margin-top: 1px;border-bottom: 1px #c1c1c1 solid;padding: 5px;'>\n      <div class='Polaris-Stack__Item'>\n        <div class='Polaris-Stack Polaris-Stack--spacingTight Polaris-Stack--alignmentCenter'>\n          <div class='Polaris-Stack__Item'>\n            <div class='sc-1ibht3l-0 uqRZq'>\n            </div>\n            <div class='sc-1ibht3l-1 hIZedH'>\n              <div class='Polaris-ButtonGroup'>\n                <div class='Polaris-ButtonGroup__Item'>\n                  <router-link to='/' class='Polaris-Button'>\n                    <span class='Polaris-Button__Content'>\n                      <span class='Polaris-Button__Text'>Dashboard</span>\n                    </span>\n                  </router-link>\n                </div>\n                <div class='Polaris-ButtonGroup__Item'>\n                  <router-link to='/zone' class='Polaris-Button'>\n                    <span class='Polaris-Button__Content'>\n                      <span class='Polaris-Button__Text'>Checkout Zones</span>\n                    </span>\n                  </router-link>\n                </div>\n                <div class='Polaris-ButtonGroup__Item'>\n                  <router-link to='/funnel' class='Polaris-Button'>\n                    <span class='Polaris-Button__Content'>\n                      <span class='Polaris-Button__Text'>Funnels</span>\n                    </span>\n                  </router-link>\n                </div>\n                <div class='Polaris-ButtonGroup__Item'>\n                  <router-link to='/help' class='Polaris-Button'>\n                    <span class='Polaris-Button__Content'>\n                      <span class='Polaris-Button__Text'>Help Center</span>\n                    </span>\n                  </router-link>\n                </div>\n                <div class='Polaris-ButtonGroup__Item'>\n                  <div>\n                    <button type='button' id='moreSeting' class='Polaris-Button' tabindex='0' aria-controls='Popover486' aria-owns='Popover486' aria-haspopup='true' aria-expanded='false'>\n                      <span class='Polaris-Button__Content'>\n                        <span class='Polaris-Button__Text'>More</span>\n                        <span class='Polaris-Button__Icon'>\n                          <span class='Polaris-Icon'>\n                            <svg viewBox='0 0 20 20' class='Polaris-Icon__Svg' focusable='false' aria-hidden='true'>\n                              <path d='M5 8l5 5 5-5z' fill-rule='evenodd'></path>\n                            </svg>\n                          </span>\n                        </span>\n                      </span>\n                      <div id='dropdownContent' class='dropdown-content'>\n                        <!-- 这里放下拉列表的内容 -->\n                        <a href='payment.html'>Payment</a>\n                        <a href='facebookPixel.html'>Pixel</a>\n                      </div>\n                    </button>\n                    \n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  // eslint-disable-next-line vue/multi-word-component-names\n  name: 'Home',\n};\n</script>\n\n<style>\n@import '../style.css'; \n</style>\n\n上面的代码是home.vue文件,应该怎么加,从哪里加,要怎么改代码,请给我具体的代码\n<div class='Polaris-Stack Polaris-Stack--distributionEqualSpacing Polaris-Stack--alignmentCenter' style='margin-top: 1px;border-bottom: 1px #c1c1c1 solid;padding: 5px;'>\n\t<div class='Polaris-Stack__Item'>\n\t\t<div class='Polaris-Stack Polaris-Stack--spacingTight Polaris-Stack--alignmentCenter'>\n\t\t\t<div class='Polaris-Stack__Item'>\n\t\t\t\t<div class='sc-1ibht3l-0 uqRZq'></div>\n\t\t\t\t<div class='sc-1ibht3l-1 hIZedH'>\n\t\t\t\t\t<div class='Polaris-ButtonGroup'>\n\t\t\t\t\t\t<div class='Polaris-ButtonGroup__Item'>\n\t\t\t\t\t\t\t<a data-polaris-unstyled='true' class='Polaris-Button' href='index.html'>\n\t\t\t\t\t\t\t\t<span class='Polaris-Button__Content'>\n\t\t\t\t\t\t\t\t\t<span class='Polaris-Button__Text'>Dashboard</span>\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div class='Polaris-ButtonGroup__Item'>\n\t\t\t\t\t\t\t<a data-polaris-unstyled='true' class='Polaris-Button' href='zone.html'>\n\t\t\t\t\t\t\t\t<span class='Polaris-Button__Content'>\n\t\t\t\t\t\t\t\t\t<span class='Polaris-Button__Text'>Checkout Zones</span>\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div class='Polaris-ButtonGroup__Item'>\n\t\t\t\t\t\t\t<a data-polaris-unstyled='true' class='Polaris-Button' href='funnel.html'>\n\t\t\t\t\t\t\t\t<span class='Polaris-Button__Content'>\n\t\t\t\t\t\t\t\t\t<span class='Polaris-Button__Text'>Funnels</span>\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div class='Polaris-ButtonGroup__Item'>\n\t\t\t\t\t\t\t<a data-polaris-unstyled='true' class='Polaris-Button' href='help.html'>\n\t\t\t\t\t\t\t\t<span class='Polaris-Button__Content'>\n\t\t\t\t\t\t\t\t\t<span class='Polaris-Button__Text'>Help Center</span>\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div class='Polaris-ButtonGroup__Item'>\n\t\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t<button type='button' id='moreSeting' class='Polaris-Button' tabindex='0' aria-controls='Popover486' aria-owns='Popover486' aria-haspopup='true' aria-expanded='false'>\n\t\t\t\t\t\t\t\t\t<span class='Polaris-Button__Content'>\n\t\t\t\t\t\t\t\t\t\t<span class='Polaris-Button__Text'>More</span>\n\t\t\t\t\t\t\t\t\t\t<span class='Polaris-Button__Icon'>\n\t\t\t\t\t\t\t\t\t\t\t<span class='Polaris-Icon'>\n\t\t\t\t\t\t\t\t\t\t\t\t<svg viewBox='0 0 20 20' class='Polaris-Icon__Svg' focusable='false' aria-hidden='true'>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<path d='M5 8l5 5 5-5z' fill-rule='evenodd'></path>\n\t\t\t\t\t\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t<div id='dropdownContent' class='dropdown-content'>\n\t\t\t\t\t\t\t\t\t\t<a href='payment.html'>Payment</a>\n\t\t\t\t\t\t\t\t\t\t<a href='facebookPixel.html'>Pixel</a>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<div class='Polaris-Stack__Item'>\n\t\t<div class='Polaris-Stack Polaris-Stack--spacingTight'>\n\t\t\t<div class='Polaris-Stack__Item'>\n\t\t\t\t<div class='sc-1pokqsy-0 dqXEel'>\n\t\t\t\t\t<div tabindex='-1' aria-controls='Popover493' aria-owns='Popover493' aria-haspopup='true' aria-expanded='false'>\n\t\t\t\t\t\t<div class='sc-1pokqsy-1 fQGSrj'>\n\t\t\t\t\t\t\t<div class='Polaris-Stack Polaris-Stack--spacingExtraTight Polaris-Stack--alignmentCenter'>\n\t\t\t\t\t\t\t\t<div class='Polaris-Stack__Item'>\n\t\t\t\t\t\t\t\t\t<p>Status: </p>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div class='Polaris-Stack__Item'>\n\t\t\t\t\t\t\t\t\t<span class='Polaris-Badge Polaris-Badge--statusSuccess'>\n\t\t\t\t\t\t\t\t\t\t<span class='Polaris-VisuallyHidden'>Success</span>Enabled\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div class='Polaris-Stack__Item'>\n\t\t\t\t\t\t\t\t\t<span class='Polaris-Icon Polaris-Icon--colorInkLightest Polaris-Icon--isColored'>\n\t\t\t\t\t\t\t\t\t\t<svg viewBox='0 0 20 20' class='Polaris-Icon__Svg' focusable='false' aria-hidden='true'>\n\t\t\t\t\t\t\t\t\t\t\t<path d='M5 8l5 5 5-5z' fill-rule='evenodd'></path>\n\t\t\t\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class='ynsxbt-0 iqzcmc' style='display: none;'>\n\t\t\t\t\t\t<div class='ynsxbt-1 fHRVPN'>\n\t\t\t\t\t\t\t<div class='Polaris-Card'>\n\t\t\t\t\t\t\t\t<div class='Polaris-Card__Section'>\n\t\t\t\t\t\t\t\t\t<div class='Polaris-Stack Polaris-Stack--distributionEqualSpacing'>\n\t\t\t\t\t\t\t\t\t\t<div class='Polaris-Stack__Item'>\n\t\t\t\t\t\t\t\t\t\t\t<h2 class='Polaris-Heading'>Disable PPFunnels?</h2>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t<div class='Polaris-Stack__Item'>\n\t\t\t\t\t\t\t\t\t\t\t<div class='ynsxbt-2 gYaAIi'>\n\t\t\t\t\t\t\t\t\t\t\t\t<span class='Polaris-Icon Polaris-Icon--colorInkLightest Polaris-Icon--isColored'>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<svg viewBox='0 0 20 20' class='Polaris-Icon__Svg' focusable='false' aria-hidden='true'>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<path d='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' fill-rule='evenodd'></path>\n\t\t\t\t\t\t\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div class='ynsxbt-3 bZoarq'>\n\t\t\t\t\t\t\t\t\t<div class='Polaris-Card'>\n\t\t\t\t\t\t\t\t\t\t<div class='Polaris-Card__Section'>\n\t\t\t\t\t\t\t\t\t\t\t<div class='Polaris-TextContainer'>\n\t\t\t\t\t\t\t\t\t\t\t\t<p>All PPFunnels features will be disabled.</p>\n\t\t\t\t\t\t\t\t\t\t\t\t<p>Checkouts will be processed by Shopify.</p>\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div class='Polaris-Card__Section'>\n\t\t\t\t\t\t\t\t\t<div class='Polaris-Stack Polaris-Stack--distributionTrailing'>\n\t\t\t\t\t\t\t\t\t\t<div class='Polaris-Stack__Item'>\n\t\t\t\t\t\t\t\t\t\t\t<div class='Polaris-ButtonGroup'>\n\t\t\t\t\t\t\t\t\t\t\t\t<div class='Polaris-ButtonGroup__Item'>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<button type='button' class='Polaris-Button'>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class='Polaris-Button__Content'>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class='Polaris-Button__Text'>Cancel</span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t\t<div class='Polaris-ButtonGroup__Item'>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<button type='button' class='Polaris-Button Polaris-Button--destructive'>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class='Polaris-Button__Content'>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class='Polaris-Button__Text'>Disable PPFunnels</span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>内容:要将上面的代码添加到home.vue文件中,可以按照以下步骤进行:</p>
<ol>
<li>打开home.vue文件。2. 找到template标签的开头,添加以下代码:html<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>3. 找到style标签的开头,添加以下代码:css.Polaris-Stack.Polaris-Stack--distributionEqualSpacing.Polaris-Stack--alignmentCenter {  margin-top: 1px;  border-bottom: 1px #c1c1c1 solid;  padding: 5px;}4. 保存文件。</li>
</ol>
<p>这样就将上面的代码添加到home.vue文件中了。请注意,如果你在之前已经有其他样式,可能需要根据需要进行样式的调整和合并</p>

原文地址: https://www.cveoy.top/t/topic/p5mH 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录