1

lzhe

2024-06-03 a786409d7f6769f43c107159dd84faf4a2927a9a

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

@@ -1,36 +1,17 @@
<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 +26,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>