make some part of page as component
parent
32ec1cf57e
commit
56f1eac7c8
@ -0,0 +1,37 @@
|
||||
<template>
|
||||
<div class="module">
|
||||
<h2 class="title"><el-icon style="vertical-align: -10%"><link-icon /></el-icon>友情链接</h2>
|
||||
<div class="content paragraph">
|
||||
<p v-for="item in friendLinkList"><a :href="item.linkUrl" target="_blank">{{ item.linkName }}</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {Link as LinkIcon} from "@element-plus/icons-vue";
|
||||
import {onMounted, ref} from "vue";
|
||||
import axios from "axios";
|
||||
|
||||
let friendLinkList=ref([
|
||||
{
|
||||
linkId: 1,
|
||||
linkName: 'loading',
|
||||
linkUrl: '#'
|
||||
}
|
||||
])
|
||||
|
||||
const getFriendLinkList=function () {
|
||||
axios.get('friendLink/getFriendLinkList')
|
||||
.then(res => {
|
||||
friendLinkList.value = res.data;
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(()=>{
|
||||
getFriendLinkList()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,43 @@
|
||||
<template>
|
||||
<div class="module">
|
||||
<div class="content paragraph">
|
||||
<el-avatar :size="50" src="/assets/2.png"></el-avatar>
|
||||
<h4>PeterAlbus</h4>
|
||||
<p v-if="info!==''">{{ info }}</p>
|
||||
<el-tooltip class="item" effect="dark" content="发送电子邮件" placement="top">
|
||||
<a href="mailto:wuhongdb@163.com">
|
||||
<i class="fa fa-fw fa-envelope" style="font-size:20px"></i>
|
||||
</a>
|
||||
</el-tooltip>
|
||||
<el-tooltip class="item" effect="dark" content="github" placement="top">
|
||||
<a href="https://github.com/PeterAlbus" target="_blank">
|
||||
<i class="fa fa-fw fa-github" style="font-size:20px"></i>
|
||||
</a>
|
||||
</el-tooltip>
|
||||
<el-tooltip class="item" effect="dark" content="bilibili" placement="top">
|
||||
<a href="https://space.bilibili.com/2003822" target="_blank">
|
||||
<i class="iconfont icon-bilibili-line" style="font-size:20px"></i>
|
||||
</a>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {toRefs} from "vue";
|
||||
|
||||
const props = defineProps({
|
||||
info: {
|
||||
type: String,
|
||||
default() {
|
||||
return ''
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const {info} = toRefs(props);
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
Loading…
Reference in New Issue