网站备案图标及编号（[vue]提供一种网站底部备案号样式代码）
导读：演示 vue组件型（可直接用）...
演示
vue组件型（可直接用）
组件代码：copyright-icp.vue
<template> <div class="icp">{{`© ${year} ${author} `}}<a href="http://beian.miit.gov.cn/" target="_blank">{{ record }}</a></div> </template> <script setup> let year = new Date().getFullYear(); // 一般都是最新的一年 let author = alsoeasy; // 作者名 let record = 湘ICP备2023xxxxxx号; // 备案号 </script> <style> .icp { position: absolute; bottom: 0px; padding: 10px 0; width: 100%; text-align: center; color: gray; } .icp > a { color: gray; text-decoration: none; } .icp > a:hover { color: aqua; text-decoration: none; } </style>直接在页面中调用（注意这里是setup写法）
<script setup> import CopyrightIcp from @/components/copyright-icp.vue; </script> <template> <router-view /> <!-- 配置备案号 --> <CopyrightIcp></CopyrightIcp> </template>html代码型
注意如果要设置为绝对定位 ，记得设为bfc或者添加占位块 ，防止阻挡问题
<html> <style> .icp { /* position: absolute; bottom: 0px; */ padding: 10px 0; width: 100%; height: 36px; text-align: center; color: gray; z-index: 1000; } .icp > a { color: gray; text-decoration: none; } .icp > a:hover { color: aqua; text-decoration: none; } </style> <body> <div>这里是内容部分</div> <div class="icp">© 2023 alsoeasy <a href="http://beian.miit.gov.cn/" target="_blank"> 湘ICP备2023xxxxxx号</a></div> </body> </html>创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！