底部

whycwx

2022-08-11 d912c2710b4b636aa4e58f95aec989f2acc35711

底部

 src/App.vue

@@ -3,13 +3,16 @@
        <page-headers></page-headers>
        
        <router-view></router-view>

        <page-footer></page-footer>
    </div>
</template>
<script>
import  pageHeaders  from "./components/pageHeaders/pageHeaders.vue";
import  pageHeaders  from "./components/pageHeaders.vue";
import pageFooter from "./components/pageFooter.vue";
export default {
    components:{
        pageHeaders
        pageHeaders,pageFooter
    },
    data() {
        return {

 src/assets/font/demo.css

New file
@@ -0,0 +1,539 @@
/* Logo 字体 */
@font-face {
  font-family: "iconfont logo";
  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
}

.logo {
  font-family: "iconfont logo";
  font-size: 160px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* tabs */
.nav-tabs {
  position: relative;
}

.nav-tabs .nav-more {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 42px;
  line-height: 42px;
  color: #666;
}

#tabs {
  border-bottom: 1px solid #eee;
}

#tabs li {
  cursor: pointer;
  width: 100px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 16px;
  border-bottom: 2px solid transparent;
  position: relative;
  z-index: 1;
  margin-bottom: -1px;
  color: #666;
}


#tabs .active {
  border-bottom-color: #f00;
  color: #222;
}

.tab-container .content {
  display: none;
}

/* 页面布局 */
.main {
  padding: 30px 100px;
  width: 960px;
  margin: 0 auto;
}

.main .logo {
  color: #333;
  text-align: left;
  margin-bottom: 30px;
  line-height: 1;
  height: 110px;
  margin-top: -50px;
  overflow: hidden;
  *zoom: 1;
}

.main .logo a {
  font-size: 160px;
  color: #333;
}

.helps {
  margin-top: 40px;
}

.helps pre {
  padding: 20px;
  margin: 10px 0;
  border: solid 1px #e7e1cd;
  background-color: #fffdef;
  overflow: auto;
}

.icon_lists {
  width: 100% !important;
  overflow: hidden;
  *zoom: 1;
}

.icon_lists li {
  width: 100px;
  margin-bottom: 10px;
  margin-right: 20px;
  text-align: center;
  list-style: none !important;
  cursor: default;
}

.icon_lists li .code-name {
  line-height: 1.2;
}

.icon_lists .icon {
  display: block;
  height: 100px;
  line-height: 100px;
  font-size: 42px;
  margin: 10px auto;
  color: #333;
  -webkit-transition: font-size 0.25s linear, width 0.25s linear;
  -moz-transition: font-size 0.25s linear, width 0.25s linear;
  transition: font-size 0.25s linear, width 0.25s linear;
}

.icon_lists .icon:hover {
  font-size: 100px;
}

.icon_lists .svg-icon {
  /* 通过设置 font-size 来改变图标大小 */
  width: 1em;
  /* 图标和文字相邻时，垂直对齐 */
  vertical-align: -0.15em;
  /* 通过设置 color 来改变 SVG 的颜色/fill */
  fill: currentColor;
  /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
      normalize.css 中也包含这行 */
  overflow: hidden;
}

.icon_lists li .name,
.icon_lists li .code-name {
  color: #666;
}

/* markdown 样式 */
.markdown {
  color: #666;
  font-size: 14px;
  line-height: 1.8;
}

.highlight {
  line-height: 1.5;
}

.markdown img {
  vertical-align: middle;
  max-width: 100%;
}

.markdown h1 {
  color: #404040;
  font-weight: 500;
  line-height: 40px;
  margin-bottom: 24px;
}

.markdown h2,
.markdown h3,
.markdown h4,
.markdown h5,
.markdown h6 {
  color: #404040;
  margin: 1.6em 0 0.6em 0;
  font-weight: 500;
  clear: both;
}

.markdown h1 {
  font-size: 28px;
}

.markdown h2 {
  font-size: 22px;
}

.markdown h3 {
  font-size: 16px;
}

.markdown h4 {
  font-size: 14px;
}

.markdown h5 {
  font-size: 12px;
}

.markdown h6 {
  font-size: 12px;
}

.markdown hr {
  height: 1px;
  border: 0;
  background: #e9e9e9;
  margin: 16px 0;
  clear: both;
}

.markdown p {
  margin: 1em 0;
}

.markdown>p,
.markdown>blockquote,
.markdown>.highlight,
.markdown>ol,
.markdown>ul {
  width: 80%;
}

.markdown ul>li {
  list-style: circle;
}

.markdown>ul li,
.markdown blockquote ul>li {
  margin-left: 20px;
  padding-left: 4px;
}

.markdown>ul li p,
.markdown>ol li p {
  margin: 0.6em 0;
}

.markdown ol>li {
  list-style: decimal;
}

.markdown>ol li,
.markdown blockquote ol>li {
  margin-left: 20px;
  padding-left: 4px;
}

.markdown code {
  margin: 0 3px;
  padding: 0 5px;
  background: #eee;
  border-radius: 3px;
}

.markdown strong,
.markdown b {
  font-weight: 600;
}

.markdown>table {
  border-collapse: collapse;
  border-spacing: 0px;
  empty-cells: show;
  border: 1px solid #e9e9e9;
  width: 95%;
  margin-bottom: 24px;
}

.markdown>table th {
  white-space: nowrap;
  color: #333;
  font-weight: 600;
}

.markdown>table th,
.markdown>table td {
  border: 1px solid #e9e9e9;
  padding: 8px 16px;
  text-align: left;
}

.markdown>table th {
  background: #F7F7F7;
}

.markdown blockquote {
  font-size: 90%;
  color: #999;
  border-left: 4px solid #e9e9e9;
  padding-left: 0.8em;
  margin: 1em 0;
}

.markdown blockquote p {
  margin: 0;
}

.markdown .anchor {
  opacity: 0;
  transition: opacity 0.3s ease;
  margin-left: 8px;
}

.markdown .waiting {
  color: #ccc;
}

.markdown h1:hover .anchor,
.markdown h2:hover .anchor,
.markdown h3:hover .anchor,
.markdown h4:hover .anchor,
.markdown h5:hover .anchor,
.markdown h6:hover .anchor {
  opacity: 1;
  display: inline-block;
}

.markdown>br,
.markdown>p>br {
  clear: both;
}


.hljs {
  display: block;
  background: white;
  padding: 0.5em;
  color: #333333;
  overflow-x: auto;
}

.hljs-comment,
.hljs-meta {
  color: #969896;
}

.hljs-string,
.hljs-variable,
.hljs-template-variable,
.hljs-strong,
.hljs-emphasis,
.hljs-quote {
  color: #df5000;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-type {
  color: #a71d5d;
}

.hljs-literal,
.hljs-symbol,
.hljs-bullet,
.hljs-attribute {
  color: #0086b3;
}

.hljs-section,
.hljs-name {
  color: #63a35c;
}

.hljs-tag {
  color: #333333;
}

.hljs-title,
.hljs-attr,
.hljs-selector-id,
.hljs-selector-class,
.hljs-selector-attr,
.hljs-selector-pseudo {
  color: #795da3;
}

.hljs-addition {
  color: #55a532;
  background-color: #eaffea;
}

.hljs-deletion {
  color: #bd2c00;
  background-color: #ffecec;
}

.hljs-link {
  text-decoration: underline;
}

/* 代码高亮 */
/* PrismJS 1.15.0
https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
/**
 * prism.js default theme for JavaScript, CSS and HTML
 * Based on dabblet (http://dabblet.com)
 * @author Lea Verou
 */
code[class*="language-"],
pre[class*="language-"] {
  color: black;
  background: none;
  text-shadow: 0 1px white;
  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  line-height: 1.5;

  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;

  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}

pre[class*="language-"]::-moz-selection,
pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection,
code[class*="language-"] ::-moz-selection {
  text-shadow: none;
  background: #b3d4fc;
}

pre[class*="language-"]::selection,
pre[class*="language-"] ::selection,
code[class*="language-"]::selection,
code[class*="language-"] ::selection {
  text-shadow: none;
  background: #b3d4fc;
}

@media print {

  code[class*="language-"],
  pre[class*="language-"] {
    text-shadow: none;
  }
}

/* Code blocks */
pre[class*="language-"] {
  padding: 1em;
  margin: .5em 0;
  overflow: auto;
}

:not(pre)>code[class*="language-"],
pre[class*="language-"] {
  background: #f5f2f0;
}

/* Inline code */
:not(pre)>code[class*="language-"] {
  padding: .1em;
  border-radius: .3em;
  white-space: normal;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: slategray;
}

.token.punctuation {
  color: #999;
}

.namespace {
  opacity: .7;
}

.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
  color: #905;
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
  color: #690;
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
  color: #9a6e3a;
  background: hsla(0, 0%, 100%, .5);
}

.token.atrule,
.token.attr-value,
.token.keyword {
  color: #07a;
}

.token.function,
.token.class-name {
  color: #DD4A68;
}

.token.regex,
.token.important,
.token.variable {
  color: #e90;
}

.token.important,
.token.bold {
  font-weight: bold;
}

.token.italic {
  font-style: italic;
}

.token.entity {
  cursor: help;
}

 src/assets/font/demo_index.html

New file
@@ -0,0 +1,326 @@
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>iconfont Demo</title>
  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i2/O1CN01ZyAlrn1MwaMhqz36G_!!6000000001499-73-tps-64-64.ico" type="image/x-icon"/>
  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01EYTRnJ297D6vehehJ_!!6000000008020-55-tps-64-64.svg"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
  <style>
    .main .logo {
      margin-top: 0;
      height: auto;
    }

    .main .logo a {
      display: flex;
      align-items: center;
    }

    .main .logo .sub-title {
      margin-left: 0.5em;
      font-size: 22px;
      color: #fff;
      background: linear-gradient(-45deg, #3967FF, #B500FE);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  </style>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
      
    </a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=3582864" target="_blank" class="nav-more">查看项目</a>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon iconfont">&#xe6db;</span>
                <div class="name">邮箱</div>
                <div class="code-name">&amp;#xe6db;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe697;</span>
                <div class="name">邮箱1</div>
                <div class="code-name">&amp;#xe697;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe600;</span>
                <div class="name">微信</div>
                <div class="code-name">&amp;#xe600;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62a;</span>
                <div class="name">电话</div>
                <div class="code-name">&amp;#xe62a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60f;</span>
                <div class="name">互联网 IT</div>
                <div class="code-name">&amp;#xe60f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe882;</span>
                <div class="name">QQ</div>
                <div class="code-name">&amp;#xe882;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'iconfont';
  src: url('iconfont.woff2?t=1660210015206') format('woff2'),
       url('iconfont.woff?t=1660210015206') format('woff'),
       url('iconfont.ttf?t=1660210015206') format('truetype');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon iconfont icon-youxiang"></span>
            <div class="name">
              邮箱
            </div>
            <div class="code-name">.icon-youxiang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-youxiang1"></span>
            <div class="name">
              邮箱1
            </div>
            <div class="code-name">.icon-youxiang1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-weixin"></span>
            <div class="name">
              微信
            </div>
            <div class="code-name">.icon-weixin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dianhua"></span>
            <div class="name">
              电话
            </div>
            <div class="code-name">.icon-dianhua
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-hulianwangIT"></span>
            <div class="name">
              互联网 IT
            </div>
            <div class="code-name">.icon-hulianwangIT
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-QQ"></span>
            <div class="name">
              QQ
            </div>
            <div class="code-name">.icon-QQ
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-youxiang"></use>
                </svg>
                <div class="name">邮箱</div>
                <div class="code-name">#icon-youxiang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-youxiang1"></use>
                </svg>
                <div class="name">邮箱1</div>
                <div class="code-name">#icon-youxiang1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-weixin"></use>
                </svg>
                <div class="name">微信</div>
                <div class="code-name">#icon-weixin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dianhua"></use>
                </svg>
                <div class="name">电话</div>
                <div class="code-name">#icon-dianhua</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-hulianwangIT"></use>
                </svg>
                <div class="name">互联网 IT</div>
                <div class="code-name">#icon-hulianwangIT</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-QQ"></use>
                </svg>
                <div class="name">QQ</div>
                <div class="code-name">#icon-QQ</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>

 src/assets/font/iconfont.css

New file
@@ -0,0 +1,39 @@
@font-face {
  font-family: "iconfont"; /* Project id 3582864 */
  src: url('iconfont.woff2?t=1660210015206') format('woff2'),
       url('iconfont.woff?t=1660210015206') format('woff'),
       url('iconfont.ttf?t=1660210015206') format('truetype');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-youxiang:before {
  content: "\e6db";
}

.icon-youxiang1:before {
  content: "\e697";
}

.icon-weixin:before {
  content: "\e600";
}

.icon-dianhua:before {
  content: "\e62a";
}

.icon-hulianwangIT:before {
  content: "\e60f";
}

.icon-QQ:before {
  content: "\e882";
}


 src/assets/font/iconfont.js

New file
@@ -0,0 +1 @@
!function(t){var e,l,n,i,o,a='<svg><symbol id="icon-youxiang" viewBox="0 0 1024 1024"><path d="M896 128a85.333333 85.333333 0 0 1 85.333333 85.333333v597.333334a85.333333 85.333333 0 0 1-85.333333 85.333333H128a85.333333 85.333333 0 0 1-85.333333-85.333333V213.333333a85.333333 85.333333 0 0 1 85.333333-85.333333h768z m13.312 154.666667a32 32 0 0 0-43.690667-11.733334l-353.493333 204.074667-353.194667-203.904-3.925333-1.92a32 32 0 0 0-28.074667 57.344l368.768 212.949333a32 32 0 0 0 36.224-1.962666l365.653334-211.114667 3.626666-2.432a32 32 0 0 0 8.106667-41.301333z"  ></path></symbol><symbol id="icon-youxiang1" viewBox="0 0 1024 1024"><path d="M184.32 163.84h655.36a122.88 122.88 0 0 1 122.88 122.88v450.56a122.88 122.88 0 0 1-122.88 122.88H184.32a122.88 122.88 0 0 1-122.88-122.88V286.72a122.88 122.88 0 0 1 122.88-122.88z" fill="#131415" ></path><path d="M847.0528 299.90912a30.72 30.72 0 0 1 28.83584 54.1696l-2.62144 1.37216-347.05408 163.84a30.72 30.72 0 0 1-22.97856 1.3312l-3.15392-1.29024L150.81472 355.7376a30.72 30.72 0 0 1 23.32672-56.77056l2.72384 1.1264 336.1792 157.47072 334.00832-157.65504z" fill="#FFFFFF" ></path></symbol><symbol id="icon-weixin" viewBox="0 0 1024 1024"><path d="M664.250054 368.541681c10.015098 0 19.892049 0.732687 29.67281 1.795902-26.647917-122.810047-159.358451-214.077703-310.826188-214.077703-169.353083 0-308.085774 114.232694-308.085774 259.274068 0 83.708494 46.165436 152.460344 123.281791 205.78483l-30.80868 91.730191 107.688651-53.455469c38.558178 7.53665 69.459978 15.308661 107.924012 15.308661 9.66308 0 19.230993-0.470721 28.752858-1.225921-6.025227-20.36584-9.521864-41.723264-9.521864-63.862493C402.328693 476.632491 517.908058 368.541681 664.250054 368.541681zM498.62897 285.87389c23.200398 0 38.557154 15.120372 38.557154 38.061874 0 22.846334-15.356756 38.156018-38.557154 38.156018-23.107277 0-46.260603-15.309684-46.260603-38.156018C452.368366 300.994262 475.522716 285.87389 498.62897 285.87389zM283.016307 362.090758c-23.107277 0-46.402843-15.309684-46.402843-38.156018 0-22.941502 23.295566-38.061874 46.402843-38.061874 23.081695 0 38.46301 15.120372 38.46301 38.061874C321.479317 346.782098 306.098002 362.090758 283.016307 362.090758zM945.448458 606.151333c0-121.888048-123.258255-221.236753-261.683954-221.236753-146.57838 0-262.015505 99.348706-262.015505 221.236753 0 122.06508 115.437126 221.200938 262.015505 221.200938 30.66644 0 61.617359-7.609305 92.423993-15.262612l84.513836 45.786813-23.178909-76.17082C899.379213 735.776599 945.448458 674.90216 945.448458 606.151333zM598.803483 567.994292c-15.332197 0-30.807656-15.096836-30.807656-30.501688 0-15.190981 15.47546-30.477129 30.807656-30.477129 23.295566 0 38.558178 15.286148 38.558178 30.477129C637.361661 552.897456 622.099049 567.994292 598.803483 567.994292zM768.25071 567.994292c-15.213493 0-30.594809-15.096836-30.594809-30.501688 0-15.190981 15.381315-30.477129 30.594809-30.477129 23.107277 0 38.558178 15.286148 38.558178 30.477129C806.808888 552.897456 791.357987 567.994292 768.25071 567.994292z"  ></path></symbol><symbol id="icon-dianhua" viewBox="0 0 1026 1024"><path d="M704.512 387.072q21.504 25.6 46.08 52.224 20.48 23.552 45.568 52.224t51.712 58.368q33.792 38.912 55.808 69.632t34.816 56.32 17.408 47.104 4.608 43.008l0 66.56q0 30.72-10.24 55.296t-28.16 42.496-40.96 27.648-48.64 9.728l-631.808 0q-27.648 0-52.736-9.216t-44.032-26.112-30.208-40.448-11.264-53.248l0-78.848q0-24.576 4.608-47.104t16.896-47.104 33.792-52.736 54.272-61.952q26.624-28.672 54.784-57.856t50.688-52.736q26.624-27.648 51.2-53.248l375.808 0zM512 775.168q26.624 0 50.176-10.24t40.96-27.648 27.648-41.472 10.24-50.688-10.24-50.176-27.648-40.96-40.96-27.648-50.176-10.24-50.688 10.24-41.472 27.648-27.648 40.96-10.24 50.176 10.24 50.688 27.648 41.472 41.472 27.648 50.688 10.24zM1025.024 263.168l0 64.512q0 26.624-18.944 45.056t-45.568 18.432l-128 0q-26.624 0-45.056-18.432t-18.432-45.056l0-64.512-513.024 0 0 64.512q0 26.624-18.432 45.056t-45.056 18.432l-128 0q-26.624 0-45.568-18.432t-18.944-45.056l0-64.512 0-2.048q0-12.288 6.144-20.992t15.36-15.872 20.48-12.8 22.528-12.8q11.264-6.144 50.688-27.136t99.328-43.52 136.192-39.936 162.304-17.408q98.304 0 175.616 17.408t134.144 39.936 91.136 43.52 46.592 27.136q12.288 7.168 23.552 12.8t20.48 12.8 14.848 15.872 5.632 20.992l0 2.048z"  ></path></symbol><symbol id="icon-hulianwangIT" viewBox="0 0 1024 1024"><path d="M512 1024c-161.28 0-287.744-224.768-287.744-512S350.72 0 512 0s288.256 224.768 288.256 512c-0.512 287.232-126.976 512-288.256 512z m0-960c-121.344 0-223.744 205.312-223.744 448s102.4 448 223.744 448c121.344 0 224.256-205.312 224.256-448S633.344 64 512 64z" fill="#333333" ></path><path d="M512 1024c-152.576 0-295.936-67.072-393.728-184.832l-23.04-27.648 30.72-19.456c96.768-61.952 237.568-97.28 386.048-97.28 148.992 0 289.792 35.328 386.048 97.28l30.72 19.456-23.04 27.648c-97.792 117.76-241.152 184.832-393.728 184.832z m-318.464-197.12c83.968 84.992 198.144 133.12 318.464 133.12s234.496-48.128 318.464-133.12c-84.48-43.52-198.144-68.096-318.464-68.096s-233.984 24.576-318.464 68.096zM512 345.6c-154.624 0-298.496-37.888-395.264-103.424l-28.672-19.456 20.992-27.136C207.36 71.168 353.792 0 512 0c158.208 0 304.64 71.168 402.432 195.584l20.992 27.136-28.672 19.456c-96.256 65.536-240.128 103.424-394.752 103.424zM183.296 207.872C268.288 254.976 386.048 281.6 512 281.6s243.712-26.624 328.704-73.728c-84.48-91.648-202.752-143.872-328.704-143.872S267.776 116.224 183.296 207.872z" fill="#333333" ></path><path d="M136.192 861.184l-17.92-21.504C41.984 747.52 0 631.296 0 512c0-115.712 37.888-225.28 109.568-316.416l18.432-23.552 24.576 16.896C239.104 247.808 370.176 281.6 512 281.6s272.896-33.792 359.424-92.16l24.576-16.896 18.432 23.552C986.112 286.72 1024 396.288 1024 512c0 119.296-41.984 235.52-118.272 327.168l-17.92 21.504-23.552-15.36c-86.528-55.296-214.528-87.04-351.744-87.04-137.216 0-265.216 31.744-351.744 87.04l-24.576 15.872z m375.808-166.4c136.704 0 266.24 29.696 360.96 82.432 56.32-76.288 87.04-169.472 87.04-265.216 0-91.648-27.136-178.688-78.848-253.44-95.744 55.808-228.352 87.04-369.152 87.04s-273.408-31.232-369.152-87.04C91.136 333.312 64 420.352 64 512c0 95.232 30.72 188.416 87.04 265.216 94.72-52.736 224.256-82.432 360.96-82.432z" fill="#333333" ></path><path d="M479.744 31.744h64v960H479.744z" fill="#333333" ></path><path d="M32.256 479.744h960v64H32.256z" fill="#333333" ></path></symbol><symbol id="icon-QQ" viewBox="0 0 1024 1024"><path d="M824.8 613.2c-16-51.4-34.4-94.6-62.7-165.3C766.5 262.2 689.3 112 511.5 112 331.7 112 256.2 265.2 261 447.9c-28.4 70.8-46.7 113.7-62.7 165.3-34 109.5-23 154.8-14.6 155.8 18 2.2 70.1-82.4 70.1-82.4 0 49 25.2 112.9 79.8 159-26.4 8.1-85.7 29.9-71.6 53.8 11.4 19.3 196.2 12.3 249.5 6.3 53.3 6 238.1 13 249.5-6.3 14.1-23.8-45.3-45.7-71.6-53.8 54.6-46.2 79.8-110.1 79.8-159 0 0 52.1 84.6 70.1 82.4 8.5-1.1 19.5-46.4-14.5-155.8z"  ></path></symbol></svg>',c=(c=document.getElementsByTagName("script"))[c.length-1].getAttribute("data-injectcss"),d=function(t,e){e.parentNode.insertBefore(t,e)};if(c&&!t.__iconfont__svg__cssinject__){t.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(t){console&&console.log(t)}}function s(){o||(o=!0,n())}function h(){try{i.documentElement.doScroll("left")}catch(t){return void setTimeout(h,50)}s()}e=function(){var t,e=document.createElement("div");e.innerHTML=a,a=null,(e=e.getElementsByTagName("svg")[0])&&(e.setAttribute("aria-hidden","true"),e.style.position="absolute",e.style.width=0,e.style.height=0,e.style.overflow="hidden",e=e,(t=document.body).firstChild?d(e,t.firstChild):t.appendChild(e))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(e,0):(l=function(){document.removeEventListener("DOMContentLoaded",l,!1),e()},document.addEventListener("DOMContentLoaded",l,!1)):document.attachEvent&&(n=e,i=t.document,o=!1,h(),i.onreadystatechange=function(){"complete"==i.readyState&&(i.onreadystatechange=null,s())})}(window);

 src/assets/font/iconfont.json

New file
@@ -0,0 +1,51 @@
{
  "id": "3582864",
  "name": "源畅科技门户",
  "font_family": "iconfont",
  "css_prefix_text": "icon-",
  "description": "",
  "glyphs": [
    {
      "icon_id": "15994140",
      "name": "邮箱",
      "font_class": "youxiang",
      "unicode": "e6db",
      "unicode_decimal": 59099
    },
    {
      "icon_id": "18371370",
      "name": "邮箱1",
      "font_class": "youxiang1",
      "unicode": "e697",
      "unicode_decimal": 59031
    },
    {
      "icon_id": "77156",
      "name": "微信",
      "font_class": "weixin",
      "unicode": "e600",
      "unicode_decimal": 58880
    },
    {
      "icon_id": "1163350",
      "name": "电话",
      "font_class": "dianhua",
      "unicode": "e62a",
      "unicode_decimal": 58922
    },
    {
      "icon_id": "4838218",
      "name": "互联网 IT",
      "font_class": "hulianwangIT",
      "unicode": "e60f",
      "unicode_decimal": 58895
    },
    {
      "icon_id": "4936984",
      "name": "QQ",
      "font_class": "QQ",
      "unicode": "e882",
      "unicode_decimal": 59522
    }
  ]
}

 src/assets/font/iconfont.ttf

Binary files differ

 src/assets/font/iconfont.woff

Binary files differ

 src/assets/font/iconfont.woff2

Binary files differ

 src/assets/img/cood.png

 src/components/pageFooter.vue

New file
@@ -0,0 +1,114 @@
<template>
    <div>
        <div class="footer_box">
            <div class="callInfo_box">
                <p>联系信息</p>
                <div class="line_box">
                    <div class="line_crude"></div>
                </div>
                <div><p class="title_list"><i class="el-icon-map-location"></i>&nbsp;<span>地址：武汉市东西湖区惠安大道768号中原印务城2幢1—3层</span> </p></div>
                <div><p class="title_list"><i class="iconfont icon-dianhua"></i>&nbsp;<span>电话：027—83495340 </span> </p></div>
                <div><p class="title_list"><i class="iconfont icon-youxiang"></i>&nbsp;<span>邮箱：whycmarket@whycst.com </span> </p></div>
                <div><p class="title_list"><i class="el-icon-postcard"></i>&nbsp;<span>邮政编码：430000</span> </p></div>
                <div><p class="title_list"><i class="iconfont icon-hulianwangIT"></i>&nbsp;<span>门户：http://www.whycst.com/aboutus.asp</span> </p></div>
            </div>
            <div class="product_box">
                <p>产品系列</p>
                <div class="line_box">
                    <div class="line_crude"></div>
                </div>
                <p class="title_list">蓄电池放电容量测试仪</p>
                <p class="title_list">无线蓄电池容量监测系统</p>
                <p class="title_list">蓄电池组充放电设备</p>
                <p class="title_list">蓄电池智能充电设备</p>
                <p class="title_list">智能单体电池组活化仪</p>
                <p class="title_list">蓄电池单体充电器</p>
                <p class="title_list">交流假负载</p>
            </div>
            <div class="cood_box">
                <p>扫描二维码</p>
                <div class="line_box">
                    <div class="line_crude"></div>
                </div>
                <div class="cood_img">
                    <img src="@/assets/img/cood.png" alt="二维码">
                </div>
            </div>
            <div class="link_box">
                <p>友情链接</p>
                <div class="line_box">
                    <div class="line_crude"></div>
                </div>
            </div>
        </div>
        <div class="icp_box">
            <p class="info_title title_list">Copyright © 2020  武汉源畅科技有限公司. 备案号：<span class="icp_icon">鄂ICP备08102214号</span></p>
            <p class="info_img"><i class="iconfont icon-youxiang"></i><i class="iconfont icon-weixin"></i><i class="iconfont icon-QQ"></i></p>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            
        }
    },
    mounted() {
        
    },
    methods: {
        
    },
}
</script>
<style lang="less">
    .footer_box{
        padding: 20px 150px 0px 150px;
        display: flex;
        justify-content: space-between;
        background-color: #3f3f3f;
        color: #ffffff;
        
        .line_box{
            position: relative;
            width: 100%;
            height: 1px;
            background-color: #ffffff;
            .line_crude{
                position:absolute;
                left:0;
                top:-1px;
                width: 50%;
                height:3px;
                background-color: #ffffff;
            }

        }
        .cood_img{
            margin-top:10px
        }
    }
    .title_list{
        font-size: 12px;
        padding: 5px 0;
        color: #ffffff;
    }
    .icp_box{
        padding: 0px 150px;
        background-color: #333333;
        display: flex;
        justify-content: space-between;
        .info_img{
            color: #ffffff;
            font-size: 16px;
            text-align: right;
            i{
                margin: 0 5px;
            }
        }
    }
    .icp_icon{
        color: #4bbab3;
    }
</style>

 src/components/pageHeaders.vue

 src/main.js

@@ -3,7 +3,7 @@

import App from './App.vue'
import router from './router'

import './assets/font/iconfont.css';
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'