1

lzhe

2024-06-05 dcf9c9e0410fe1186239e3f8d6f7bdc789c08010

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

@@ -1,36 +1,25 @@
<!--
 * @Author: lzhe lzhe@example.com
 * @Date: 2024-04-16 15:22:46
 * @LastEditors: lzhe lzhe@example.com
 * @LastEditTime: 2024-06-05 11:36:56
 * @FilePath: /src/views/home/widgets/components/welcome.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
   <el-card shadow="hover" header="欢迎">
      <div class="welcome">
         <div class="logo">
            <img src="img/logo.png">
            <h2>欢迎体验 SCUI</h2>
         </div>
         <div class="tips">
            <div class="tips-item">
               <div class="tips-item-icon"><el-icon><el-icon-menu/></el-icon></div>
               <div class="tips-item-message">这里是项目控制台，你可以点击右上方的“自定义”按钮来添加移除或者移动部件。</div>
            </div>
            <div class="tips-item">
               <div class="tips-item-icon"><el-icon><el-icon-promotion/></el-icon></div>
               <div class="tips-item-message">在提高前端算力、减少带宽请求和代码执行力上多次优化，并且持续着。</div>
            </div>
            <div class="tips-item">
               <div class="tips-item-icon"><el-icon><el-icon-milk-tea/></el-icon></div>
               <div class="tips-item-message">项目目的：让前端工作更快乐</div>
            </div>
         </div>
         <div class="actions">
            <el-button type="primary" icon="el-icon-check" size="large" @click="godoc">文档</el-button>
         </div>
   <el-card shadow="hover" header="公告">
      <div class="announcement">
         <!-- <img src="./quesheng.bd026700.png"> -->
         <div>暂无内容</div>
      </div>
   </el-card>
</template>

<script>
   export default {
      title: "欢迎",
      icon: "el-icon-present",
      description: "项目特色以及文档链接",
      title: "公告",
      icon: "el-icon-setting",
      description: "系统内通知、公告通知快速查看",
      data() {
         return {

@@ -45,15 +34,12 @@
</script>

<style scoped>
   .welcome {}
   .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;}
   .announcement {
      text-align: center;
   }
   .announcement img {
      text-align: center;
      width:150px;
      height:150px;
   }
</style>