diff --git a/src/views/Rank.vue b/src/views/Rank.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ba3609493a6568abaf22bc4f82441672aff96fcc
--- /dev/null
+++ b/src/views/Rank.vue
@@ -0,0 +1,113 @@
+<template>
+    <div class="wrapper">
+        <div class="content" v-for="item in topListData" :key="item.id" @click="clickList(item)">
+            <div class="left">
+                <h3 class="title">{{ item.name }}</h3>
+                <img class="cover" :src="item.coverImgUrl" alt="">
+            </div>
+            <div class="right">
+                <div class="font"><span class="front"><span>1</span>{{one.first}}</span><span class="back">——{{one.second}}</span></div>
+                <div class="font"><span class="front"><span>2</span>{{two.first}}</span><span class="back">——{{two.second}}</span></div>
+                <div class="font"><span class="front"><span>3</span>{{three.first}}</span><span class="back">——{{three.second}}</span></div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import axios from 'axios'
+export default {
+    data() {
+        return{
+            topListData: [],
+            one: {},
+            two: {},
+            three: {}
+        }
+    },
+    created() {
+        this.getTopListDetail();
+    },
+    methods: {
+        getTopList() {
+            axios.get("/api/toplist","")
+            .then(res => {
+                console.log(res.data)
+            })
+            .catch(err => {
+                console.error(err); 
+            })
+        },
+        getTopListDetail() {
+            axios.get("/api/toplist/detail","")
+            .then(res => {
+                console.log(res.data.list[0].tracks[0])
+                console.log(res.data.list)
+                this.topListData = res.data.list
+                this.one = res.data.list[0].tracks[0]
+                this.two = res.data.list[1].tracks[1]
+                this.three = res.data.list[2].tracks[2]
+            })
+            .catch(err => {
+                console.error(err); 
+            })
+        },
+        clickList(item) {
+            const id = item.id;
+            this.$router.push({
+                name: "Info",
+                params: {id}
+            })
+        }
+    },
+    mounted() {
+
+    }
+}
+</script>
+
+<style scoped>
+.title{
+    width: 100px;
+    margin: 10px 0 0 0;
+}
+.content{
+    margin: 15px;
+    display: flex;
+    flex-direction: row;
+    background: rgba(230, 230, 230, 0.3);
+    border-radius: 20px;
+}
+.left{
+    width: 120px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.right{
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    align-items: flex-start;
+    margin-bottom: 20px;
+    margin-left: 20px;
+}
+.font{
+    width: 220px;
+    display: flex;
+    padding: 10px 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.cover{
+    width: 100px;
+    height: 100px;
+    border-radius: 15px;
+    margin: 10px;
+}
+</style>
\ No newline at end of file