3.4. 底部区域

本教程最新版为 2.6,当前版本已放弃维护,请阅读最新版本!

本小节中,我们将一起新建网站的底部,并新建一个自定义指令,来在鼠标经过某些元素时显示一个提示。

新建底部组件

我们先在 src/components/layouts 下新建 TheFooter.vue 文件,复制贴入以下代码:

src/components/layouts/TheFooter.vue

<template>
  <footer class="footer">
    <div class="container">
      <div class="row footer-top">
        <div class="col-sm-5 col-lg-5">
          <p class="padding-top-xsm">{{ description }}</p>

          <div class="text-md">
            <a v-for="item in contacts" :title="item.title" :href="item.link" :style="contactStyle" target="_blank">
              <i :class="`fa fa-${item.icon}`"></i>
            </a>
          </div>

          <br>

          <span v-html="designer"></span>
        </div>

        <div class="col-sm-6 col-lg-6 col-lg-offset-1">...

本文章首发在 LearnKu.com 网站上。

为了保证课程的高品质,我们需要对课程进行收费。付费后 才能观看剩余内容。 购买

上一篇 下一篇
讨论数量: 6