b站视频演示效果:
效果图:

完整代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSDN 排行榜</title>
<script src="https://cdn.staticfile.net/vue/2.7.0/vue.min.js"></script>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
margin: 0;
padding: 0;
}
.header {
background-color: #ffffff;
padding: 10px 20px;
display: flex;
align-items: center;
justify-content: space-between;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.header-logo {
display: flex;
align-items: cente