<div class="mod_copyright"> <p class="mod_copyright_links"> 关于我们 | 联系我们 | 联系客服 | 商家入驻 | 营销中心 | 手机品优购 | 友情链接 | 销售联盟 | 品优购社区 | 品优购公益 | English Site | Contact U </p> <p class="mod_copyright_info"> 地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn <br> 京ICP备08001421号京公网安备110108007702 </p> </div>将代码改为组件形式

以下是将代码改为组件形式的示例：

<template>
  <div class="copyright">
    <p class="links">
      关于我们 | 联系我们 | 联系客服 | 商家入驻 | 营销中心 | 手机品优购 | 友情链接 | 销售联盟 | 品优购社区 | 品优购公益 | English Site | Contact Us
    </p>
    <p class="info">
      地址：{{ address }} 邮编：{{ zipCode }} 电话：{{ phone }} 传真：{{ fax }} 邮箱: {{ email }} <br> {{ icpCode }}{{ safetyCode }}
    </p>
  </div>
</template>

<script>
export default {
  name: 'Copyright',
  data() {
    return {
      address: '北京市昌平区建材城西路金燕龙办公楼一层',
      zipCode: '100096',
      phone: '400-618-4000',
      fax: '010-82935100',
      email: 'zhanghj+itcast.cn',
      icpCode: '京ICP备08001421号',
      safetyCode: '京公网安备110108007702',
    };
  },
};
</script>

<style scoped>
.links {
  margin-bottom: 10px;
}
.info {
  font-size: 12px;
  line-height: 18px;
  color: #666;
}
</style>

在这个示例中，我们将原先的 HTML 代码转换成了一个 Vue 组件。组件的名称为 `Copyright`，包含两个 `p` 标签：

- `links` 标签用于显示一系列链接；
- `info` 标签用于显示公司的地址、电话、传真、邮箱等信息。

组件的 CSS 样式使用了 scoped 属性，这样可以避免与其他组件的样式冲突。组件的数据通过 data 属性进行管理，可以方便地进行修改和维护。