演示
vue组件型（可直接用）
组件代码：copyright-icp.vue
<template><divclass="icp">{{`© ${year} ${author} `}}<ahref="http://beian.miit.gov.cn/"target="_blank">{{ record }}</a></div></template><scriptsetup>let year =newDate().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写法）
<scriptsetup>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><divclass="icp">© 2023 alsoeasy <ahref="http://beian.miit.gov.cn/"target="_blank"> 湘ICP备2023xxxxxx号</a></div></body></html>
本文转载自: https://blog.csdn.net/yiself/article/details/129405421
版权归原作者 Also_easy 所有， 如有侵权，请联系我们删除。
版权归原作者 Also_easy 所有， 如有侵权，请联系我们删除。