Merge branch 'master' of http://www.beijingsoft.cn:9090/r/smart-web

lzhe

2024-06-06 a2441175073f8b09a7eff29effd7e3e617de2f7d

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

@@ -1,59 +1,122 @@
<!--
 * @Author: lzhe lzhe@example.com
 * @Date: 2024-04-16 15:22:46
 * @LastEditors: lzhe lzhe@example.com
 * @LastEditTime: 2024-06-06 16:17:02
 * @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>
   <el-card shadow="hover" header="公告">
      <div class="announcement">
         <div v-if="noticeList.length != 0" v-for="item in noticeList" class="mesg">
            <div>
               <span>{{item.categoryName}}</span>
               <span @click="showDialog(item)">{{item.title}}</span>
            </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>
            <span>{{item.updateTime}}</span>
         </div>
         <div class="actions">
            <el-button type="primary" icon="el-icon-check" size="large" @click="godoc">文档</el-button>
         </div>
         <div v-if="noticeList.length == 0">暂无内容</div>
      </div>
   </el-card>
   <el-dialog title="查看" v-model="visible" :width="600" destroy-on-close>
      <el-form :model="viewNoticeForm" :disabled="mode=='show'" ref="dialogForm" label-width="80px" label-position="center">
         <el-row>
            <el-col :span="24">
               <el-form-item label="通知标题">
                  <span>{{viewNoticeForm.title}}</span>
               </el-form-item>
            </el-col>
            <el-col :span="12">
               <el-form-item label="通知类型">
                  <span>{{viewNoticeForm.categoryName}}</span>
               </el-form-item>
            </el-col>
            <el-col :span="12">
               <el-form-item label="通知时间">
                  <span>{{viewNoticeForm.updateTime}}</span>
               </el-form-item>
            </el-col>
            <el-col :span="24">
               <el-form-item label="通知内容">
                  <div v-html="viewNoticeForm.content"></div>
               </el-form-item>
            </el-col>
         </el-row>
      </el-form>
   </el-dialog>
</template>

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

            viewNoticeForm: {
               title: "",
               categoryName: "",
               updateTime: "",
               content: ""
            },
            mode: "show",
            visible: false,
            noticeList: []
         }
      },
      mounted() {
         this.showDetail();
      },
      methods: {
         godoc(){
            window.open("https://lolicode.gitee.io/scui-doc/")
         showDialog(item) {
            this.$HTTP.get(`/api/blade-notify/notice/detail?id=${item.id}`).then(res=> {
               if(res.code == 200) {
                  this.visible = true;
                  this.viewNoticeForm = res.data;
               }
            })
         },
         showDetail(){
            this.$HTTP.get("/api/blade-notify/notice/page?current=1&size=-1").then(res=> {
               if(res.code == 200) {
                  this.noticeList = res.data.records;
               }
            })
         }
      }
   }
</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;
   }
   .mesg {
      display: flex;
      justify-content: space-between;
      margin-bottom: 12px;
   }
   .mesg > div {
      padding-left: 12px;
   }
   .mesg > div span:nth-child(1) {
      margin-right: 12px;
      padding: 0 10px;
      border: 1px solid #94c4f6;
      background-color: #e5ecf4;
   }
   .mesg > div span:nth-child(2) {
      font-weight: bold;
      cursor: pointer;
      font-size: 14px;
   }
   .mesg > span {
      padding-right: 12px;
   }
</style>