1

lzhe

2024-06-05 dcf9c9e0410fe1186239e3f8d6f7bdc789c08010

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

@@ -1,19 +1,28 @@
<template>
   <el-card shadow="hover" header="关于项目" class="item-background">
      <p>高性能 / 精致 / 优雅。基于Vue3 + Element-Plus 的中后台前端解决方案，如果喜欢就点个星星支持一下。</p>
      <p>
         <a href='https://gitee.com/lolicode/scui' target="_blank">
            <img src='https://gitee.com/lolicode/scui/badge/star.svg?theme=dark' alt='star' style="vertical-align: middle">
         </a>
      </p>
   <el-card shadow="hover" header="信息卡" class="item-background">
      <div class="informationCar">
         <div class="informationCar-info">
            <img src="./img-logo.png">
            <div>
               <div>admin</div>
               <div>admin</div>
            </div>
         </div>
         <img class="car-img" src="./info.76e912c7.png">
      </div>
      <ul>
         <li>中兵航联</li>
         <li>未绑定员工</li>
      </ul>
      <div class="ver">版本号: 93.1.14</div>
   </el-card>
</template>

<script>
   export default {
      title: "关于项目",
      title: "信息卡",
      icon: "el-icon-setting",
      description: "点个星星支持一下",
      description: "员工职位信息、账号信息、系统版本快速查看",
      data() {
         return {
            
@@ -23,5 +32,14 @@
</script>

<style scoped>
   .item-background {position: relative;}
   .item-background p {color: #999;margin-top:10px;line-height: 1.8;}
   .informationCar {display: flex;height: 60px;}
   .car-img {flex: 1;}
   .informationCar-info {width: 150px;display: flex;height: 50px;align-items: center;}
   .informationCar-info img {width: 30px;height:30px;}
   .informationCar-info > div {margin-left: 32px;flex: 1;}
   .informationCar-info > div div:nth-child(1) {margin-bottom: 8px;font-size: 14px;font-weight: bold;}
   ul {list-style: none;margin-bottom: 20px;}
   .ver {position: absolute;bottom: 6px;right: 8px;}
</style>