97 lines
1.9 KiB
Vue
97 lines
1.9 KiB
Vue
<template>
|
||
<a-card :bordered="true" title="欢迎">
|
||
<div class="welcome">
|
||
<div class="logo">
|
||
<img src="/favicon.ico" alt="logo">
|
||
<h2>VueAdmin</h2>
|
||
</div>
|
||
<div class="tips">
|
||
<div class="tips-item">
|
||
<div class="tips-item-icon"><MenuOutlined /></div>
|
||
<div class="tips-item-message">这里是项目控制台，你可以点击右上方的"自定义"按钮来添加移除或者移动部件。</div>
|
||
</div>
|
||
<div class="tips-item">
|
||
<div class="tips-item-icon"><RocketOutlined /></div>
|
||
<div class="tips-item-message">在提高前端算力、减少带宽请求和代码执行力上多次优化，并且持续着。</div>
|
||
</div>
|
||
<div class="tips-item">
|
||
<div class="tips-item-icon"><CoffeeOutlined /></div>
|
||
<div class="tips-item-message">项目目的：让前端工作更快乐</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a-card>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { MenuOutlined, RocketOutlined, CoffeeOutlined } from '@ant-design/icons-vue'
|
||
|
||
// 定义组件名称
|
||
defineOptions({
|
||
name: 'WelcomeWidget',
|
||
})
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.welcome {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
}
|
||
|
||
.welcome .logo {
|
||
text-align: center;
|
||
padding: 0 40px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
|
||
img {
|
||
width: 100px;
|
||
height: 100px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
h2 {
|
||
font-size: 30px;
|
||
font-weight: normal;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin: 0;
|
||
}
|
||
}
|
||
|
||
.tips {
|
||
padding: 0 40px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.tips-item {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 7.5px 0;
|
||
}
|
||
|
||
.tips-item-icon {
|
||
width: 40px;
|
||
height: 40px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 50%;
|
||
font-size: 18px;
|
||
margin-right: 20px;
|
||
color: #1890ff;
|
||
background: rgba(24, 144, 255, 0.1);
|
||
}
|
||
|
||
.tips-item-message {
|
||
flex: 1;
|
||
font-size: 14px;
|
||
}
|
||
</style>
|