Merge branch 'dashboard' into 'master'

顶栏样式修改-主页布局添加勾选框和发布按钮

See merge request tian-group/skyeye-admin-fe!44

src/layout/components/Header/QRcodePopover.vue

@@ -19,15 +19,17 @@
       </div>
     </template>
     <div class="QR-body">
-      <div>安全管控平台</div>
-      <img src="~@/assets/images/QRcodeExample.png" />
+      <div class="QR-text">安全管控平台</div>
+      <div style="display: flex; flex-direction: row; align-items: center">
+        <img src="@/assets/images/Android.png" style="width: 16px; height: 19px" />
+        <div class="QR-text" style="font-size: 14px; padding-left: 5px">Android客户端</div>
+      </div>
+      <img src="@/assets/images/QRcodeExample.png" style="width: 140px" />
       <el-button
-        class="w-full"
-        style="background-color: rgb(24, 144, 255); border: none"
+        style="width: 102px; background-color: rgb(24, 144, 255); border: none"
         type="primary"
-        round
-        >保存到相册</el-button
-      >
+        >保存到相册
+      </el-button>
     </div>
   </el-popover>
 </template>
@@ -36,7 +38,7 @@
   // import { Download } from '@element-plus/icons-vue';
 </script>
 
-<style scoped>
+<style scoped lang="scss">
   .QR-btn {
     display: flex;
     align-items: center;
@@ -45,8 +47,18 @@
   .QR-body {
     display: flex;
     flex-direction: column;
+    align-items: center;
     justify-content: space-around;
     height: 100%;
     padding: 20px;
+
+    .QR-text {
+      font-weight: 600;
+      font-size: 20px;
+      color: #1890ff;
+      line-height: 28px;
+      text-align: center;
+      font-style: normal;
+    }
   }
 </style>

src/layout/components/Header/index.vue

@@ -100,7 +100,7 @@
       />
     </div>
     <div class="layout-header-right">
-      <div
+      <!-- <div
         v-for="item in iconList"
         :key="item.icon.name"
         v-on="item.eventObject || {}"
@@ -111,17 +111,18 @@
             <component :is="item.icon" />
           </el-icon>
         </el-tooltip>
-      </div>
+      </div> -->
       <!-- 个人中心 -->
       <div class="layout-header-trigger layout-header-trigger-min">
         <el-dropdown trigger="hover" @command="avatarSelect">
           <div class="flex items-center">
-            <h4 class="username">{{ getUsername }}</h4>
-            <el-divider direction="vertical" />
-            <h4 class="mr-1 username">{{ getTenantName }}</h4>
-            <div class="avatar">
+            <!-- <div class="avatar">
               <el-avatar round :src="schoolboy" />
-            </div>
+            </div> -->
+            <img src="@/assets/images/chongqing-icon.png" />
+            <h4 class="username">{{ getUsername }}</h4>
+            <!-- <el-divider direction="vertical" /> -->
+            <!-- <h4 class="mr-1 username">{{ getTenantName }}</h4> -->
           </div>
           <template #dropdown>
             <el-dropdown-menu>
@@ -147,7 +148,9 @@
       </div>
       <!-- 安全管控平台 -->
       <div class="layout-header-trigger layout-header-trigger-min">
-        <a href="/skyeye-world" target="_blank">安全管控平台</a>
+        <el-button style="background-color: #e6f7ff; border: none" type="primary">
+          <a href="/skyeye-world" target="_blank">返回平台</a>
+        </el-button>
       </div>
       <!--切换全屏-->
       <!-- <div class="layout-header-trigger layout-header-trigger-min">
@@ -378,29 +381,29 @@
   };
 
   // 图标列表
-  const iconList = [
-    // {
-    //   icon: SearchOutlined,
-    //   tips: '搜索',
-    //   eventObject: {
-    //     click: () => openAppSearch(),
-    //   },
-    // },
-    // {
-    //   icon: GithubOutlined,
-    //   tips: 'github',
-    //   eventObject: {
-    //     click: () => window.open('https://github.com/jekip/naive-ui-admin'),
-    //   },
-    // },
-    // {
-    //   icon: LockOutlined,
-    //   tips: '锁屏',
-    //   eventObject: {
-    //     click: () => useLockscreen.setLock(true),
-    //   },
-    // },
-  ];
+  // const iconList = [
+  // {
+  //   icon: SearchOutlined,
+  //   tips: '搜索',
+  //   eventObject: {
+  //     click: () => openAppSearch(),
+  //   },
+  // },
+  // {
+  //   icon: GithubOutlined,
+  //   tips: 'github',
+  //   eventObject: {
+  //     click: () => window.open('https://github.com/jekip/naive-ui-admin'),
+  //   },
+  // },
+  // {
+  //   icon: LockOutlined,
+  //   tips: '锁屏',
+  //   eventObject: {
+  //     click: () => useLockscreen.setLock(true),
+  //   },
+  // },
+  // ];
 
   //头像下拉菜单
   const avatarSelect = (command) => {
@@ -487,6 +490,17 @@
       align-items: center;
       padding-right: 20px;
 
+      .username {
+        padding: 0px 10px;
+        font-family: PingFangSC, PingFang SC;
+        font-weight: 400;
+        font-size: 14px;
+        color: rgba(0, 0, 0, 0.65);
+        line-height: 22px;
+        text-align: left;
+        font-style: normal;
+      }
+
       .avatar {
         display: flex;
         align-items: center;

src/views/page-config/PageConfig.vue

@@ -1,12 +1,19 @@
 <template>
   <div class="flex flex-col page-config-content">
     <el-card shadow="never">
-      <div style="display: flex">
+      <div style="display: flex; justify-content: space-between">
         <el-input v-model="searchCom" class="search-btn w-50" placeholder="搜索公司主页">
           <template #suffix>
             <el-icon @click="searchPageConfig" @keyup.enter="searchPageConfig"><Search /></el-icon>
           </template>
         </el-input>
+        <el-button
+          style="width: 102px; background-color: rgb(24, 144, 255); border: none"
+          type="primary"
+          @click="broadcast"
+        >
+          主页发布
+        </el-button>
       </div>
     </el-card>
     <el-card shadow="never" class="flex-1" style="margin-top: 8px">
@@ -16,12 +23,20 @@
 </template>
 <script lang="ts" setup>
   import { ref } from 'vue';
+  import { ElMessage } from 'element-plus';
   import { Search } from '@element-plus/icons-vue';
   import PageMain from './component/PageMain.vue';
 
   const searchCom = ref('');
 
   const searchPageConfig = () => {};
+
+  const broadcast = () => {
+    ElMessage({
+      message: '发布已勾选的主页',
+      type: 'success',
+    });
+  };
 </script>
 
 <style lang="scss" sctep>

src/views/page-config/component/PageMain.vue

@@ -28,14 +28,15 @@
         </div>
 
         <div class="pic-word">
-          <img src="~@/assets/icons/file.png" alt="" />
+          <el-checkbox @change="toSend(item.id, $event)" />
+          <img src="~@/assets/icons/file.png" alt="" style="margin-left: 5px" />
           <div class="pic-name">{{ item.name }}</div>
           <img
             v-show="item.id === IconId"
             src="~@/assets/icons/del.png"
             alt=""
+            style="margin-left: 20px"
             @click.stop="deleteItem(item)"
-            class="del-icon"
           />
         </div>
       </div> </div
@@ -96,6 +97,17 @@
     });
   };
 
+  let sendId = new Set();
+  const toSend = (id, v) => {
+    if (v) {
+      sendId.add(id);
+    } else {
+      if (sendId.has(id)) {
+        sendId.delete(id);
+      }
+    }
+  };
+
   const deleteItem = (item) => {
     // 处理删除逻辑
     delCompanyLayout(item.id).then(() => {
@@ -196,10 +208,10 @@
   }
 
   .pic-word {
-    position: relative;
     display: flex;
-    padding-left: 16px;
-    padding-top: 13px;
+    flex-direction: row;
+    align-items: center;
+    padding: 5px 15px;
   }
   .pic-name {
     margin-left: 8px;
@@ -207,9 +219,9 @@
     font-size: 12px;
   }
 
-  .del-icon {
-    position: absolute;
-    right: 17px;
-    bottom: 3px;
-  }
+  // .del-icon {
+  //   position: absolute;
+  //   right: 17px;
+  //   bottom: 3px;
+  // }
 </style>