点赞/评论/个人主页功能完善

src/components/Ranking/Ranking.vue

@@ -0,0 +1,99 @@
+<template>
+    <div style="display:flex;flex-direction:row;flex-wrap: nowrap">
+        <div style="display: flex;flex-direction:column;flex-wrap: nowrap">
+            <div class="PageHeader">
+                <br/>
+                <el-page-header  @back="goBack" style="justify-content: center;">
+                    <div slot="title" style="font-size:23px;font-weight: 600;"></div>
+                    <div slot="content" style="font-size:23px;font-weight: 600;">
+                        HelloGitHub (2023)年语言排行榜
+                    </div>
+                </el-page-header>
+            </div>
+            <div class="PageContent" style="display: flex;flex-direction: column;flex-wrap: nowrap">
+                <el-card class="box-card">
+                    <div style="display: flex;flex-direction: row;flex-wrap: nowrap;justify-content: space-between">
+                        <el-select v-model="selectedValue" style="width: 7vw">
+                            <el-option label="编程语言" value="1"></el-option>
+                            <el-option label="服务器" value="2"></el-option>
+                            <el-option label="数据库" value="3"></el-option>
+                        </el-select>
+                        <el-image fit="fill" :src="require('@/assets/svg/logo-tiobe.svg')" style="width:8vw;height: 4vh;display: flex;flex-direction: row;justify-content: flex-end"></el-image>
+                        <el-select v-model="selectedValueByYear" style="width: 7vw">
+                            <el-option label="2023" value="2023"></el-option>
+                            <el-option label="2022" value="2022"></el-option>
+                        </el-select>
+                    </div>
+                </el-card>
+                <el-card class="box-card" style="margin-top: 20px">
+                    <el-table
+                        :data="tableData"
+                        style="width: 100%">
+                        <el-table-column
+                            prop="date"
+                            label="日期"
+                            width="180">
+                        </el-table-column>
+                        <el-table-column
+                            prop="name"
+                            label="姓名"
+                            width="180">
+                        </el-table-column>
+                        <el-table-column
+                            prop="address"
+                            label="地址">
+                        </el-table-column>
+                    </el-table>
+                </el-card>
+            </div>
+        </div>
+        <RightTools></RightTools>
+    </div>
+
+</template>
+
+<script>
+import RightTools from "@/components/Home/RightTools.vue";
+
+export default {
+    name: "RankingComponent",
+    components: {RightTools},
+    data(){
+        return{
+            selectedValue:'1',
+            selectedValueByYear:'2023',
+            tableData: [{
+                date: '2016-05-02',
+                name: '王小虎',
+                address: '上海市普陀区金沙江路 1518 弄'
+            }, {
+                date: '2016-05-04',
+                name: '王小虎',
+                address: '上海市普陀区金沙江路 1517 弄'
+            }, {
+                date: '2016-05-01',
+                name: '王小虎',
+                address: '上海市普陀区金沙江路 1519 弄'
+            }, {
+                date: '2016-05-03',
+                name: '王小虎',
+                address: '上海市普陀区金沙江路 1516 弄'
+            }]
+        }
+    },
+    methods: {
+        goBack() {
+            window.history.go(-1);
+        }
+    }
+}
+</script>
+
+<style scoped lang="scss">
+::v-deep .el-page-header__left{
+  left:-150px;
+}
+.el-card{
+    border: none;
+}
+</style>