UNIVPLMDataIntegration/Web/src/views/home/widgets/components/welcome.vue

114 lines
2.5 KiB
Vue
Raw Normal View History

2024-06-15 13:02:35 +08:00
<template>
<el-card shadow="hover" header="欢迎">
<template #header>
<el-icon style="display: inline; vertical-align: middle"> <ele-Promotion /> </el-icon>
<span style=""> 欢迎 </span>
</template>
<div class="welcome">
<div class="logo">
<!-- <img src="/@/assets/logo.png" style="height: 150px;"/> -->
2024-07-14 16:33:14 +08:00
<h2>欢迎使用 {{ themeConfig.globalTitle }}</h2>
2024-06-15 13:02:35 +08:00
</div>
<div class="tips">
<div class="tips-item">
<div class="tips-item-icon">
<el-icon><ele-Menu /></el-icon>
</div>
<div class="tips-item-message">这里是项目控制台你可以点击右上方的自定义按钮来添加移除或者移动部件</div>
</div>
<div class="tips-item">
<div class="tips-item-icon">
<el-icon><ele-Promotion /></el-icon>
</div>
<div class="tips-item-message">在提高前端算力减少带宽请求和代码执行力上多次优化并且持续着</div>
</div>
<div class="tips-item">
<div class="tips-item-icon">
<el-icon><ele-MilkTea /></el-icon>
</div>
<div class="tips-item-message">让开发更简单更通用更流行</div>
</div>
</div>
<div class="actions">
<el-button type="primary" icon="ele-Guide" size="large" @click="godoc">文档教程</el-button>
</div>
</div>
</el-card>
</template>
<script lang="ts">
2024-07-14 16:33:14 +08:00
import { storeToRefs } from 'pinia';
import { useThemeConfig } from '/@/stores/themeConfig';
const storesThemeConfig = useThemeConfig();
const { themeConfig } = storeToRefs(storesThemeConfig);
2024-06-15 13:02:35 +08:00
export default {
title: '欢迎',
icon: 'ele-Present',
description: '项目特色以及文档链接',
};
</script>
<script setup lang="ts" name="welcome">
const godoc = () => {
window.open('http://101.43.53.74:5050/');
2024-06-15 13:02:35 +08:00
};
</script>
<style scoped>
.welcome .logo {
text-align: center;
}
.welcome .logo img {
vertical-align: bottom;
width: 100px;
height: 100px;
margin-bottom: 20px;
}
.welcome .logo h2 {
font-size: 30px;
font-weight: normal;
display: flex;
align-items: center;
justify-content: center;
}
.tips {
margin-top: 20px;
padding: 0 40px;
}
.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: var(--el-color-primary);
background: rgba(180, 180, 180, 0.1);
}
.tips-item-message {
flex: 1;
font-size: 14px;
}
.actions {
text-align: center;
margin: 40px 0 20px 0;
}
</style>