ibsp-fg-page 4.0.2

package/src/views/builtins/message/MobileIndex.vue

@@ -0,0 +1,309 @@
+<script setup>
+import { onMounted } from 'vue'
+import { emitGlobalEvent } from '@/models/useGlobalEvents';
+import svgData from './mobile/svgData';
+
+import 'element-plus/dist/index.css'
+
+import { logout } from '@/api/ibsp-bg-user'
+const props = defineProps(['app', 'loaded', 'created'])
+const userInfo = props.app?.userInfo
+const switchAccount = () => {
+  // 切换账号逻辑
+  console.log('切换账号');
+};
+
+const logoutClick = async () => {
+  const res = await logout(userInfo.token)
+  if (res.code !== 20000) {
+    return
+  }
+  emitGlobalEvent('loginExpired')
+};
+
+const init = () => {
+  window.ibspLoading4x?.hide?.()
+}
+
+const dataList = [
+  {
+    messageType: 1,
+    messageTitle: '停机公告',
+    messageConetent: '全网站维护公告',
+    messageCount: 1,
+    createTime: ''
+  },
+  {
+    messageType: 2,
+    messageTitle: '版本更新',
+    messageConetent: '版本更新公告',
+    messageCount: 11,
+    createTime: ''
+  },
+  {
+    messageType: 3,
+    messageTitle: '样品检测提醒',
+    messageConetent: '传感器及线路集成模块 (HYF-010)，已在C栋新能源',
+    messageCount: 101,
+    createTime: ''
+  }
+]
+
+
+onMounted(() => {
+  init()
+  props?.loaded()
+})
+props?.created()
+</script>
+
+<template>
+  <div class="mobile-message">
+    <div class="message-list-wra">
+      <div class="message-list"
+           :key="index"
+           v-for="(item, index) in dataList" >
+        <div class="message-list-icon">
+          <i v-html="svgData[item.messageType]"></i>
+        </div>
+        <div class="message-list-content">
+          <div class="message-list-content-title">
+            <span>{{item.messageTitle}}</span><span class="message-date">15:36</span>
+          </div>
+          <div class="message-list-content-info"><div class="content">{{ item.messageConetent }}</div><div class="count"><span class="message-count">{{ item.messageCount > 99 ? '99+' : item.messageCount }}</span></div></div>
+        </div>
+      </div>
+    </div>
+
+  </div>
+</template>
+<style lang="scss" scoped>
+.mobile-message {
+  width: 100%;
+  height: 100%;
+  padding: 12px;
+  .message-list-wra {
+    border-radius: 8px;
+    overflow: hidden;
+    .message-list {
+      border-bottom: 1px solid #EBEDF0;
+      background-color: #FFF;
+      padding:16px;
+      display: flex;
+      width: 100%;
+      .message-list-icon {
+        font-size: 40px;
+        width: 40px;
+        height: 40px;
+        margin-right: 10px;
+      }
+      .message-list-content {
+        width: calc(100% - 58px);
+        margin-right: 8px;
+        .message-list-content-title {
+          display: flex;
+          justify-content: space-between;
+          margin-bottom: 4px;
+          font-weight: 500;
+          font-size: 14px;
+          color: #1D2129;
+          height: 20px;
+          line-height: 20px;
+          text-align: left;
+          font-style: normal;
+          text-transform: none;
+          .message-date {
+            font-weight: 400;
+            font-size: 12px;
+            color: #86909C;
+            line-height: 16px;
+            text-align: right;
+            font-style: normal;
+            text-transform: none;
+          }
+        }
+        .message-list-content-info {
+          display: flex;
+          justify-content: space-between;
+          height: 16px;
+          line-height: 16px;
+          font-weight: 400;
+          font-size: 13px;
+          color: #86909C;
+          text-align: left;
+          font-style: normal;
+          text-transform: none;
+          .content {
+            flex-grow: 1; /* 允许增长填充剩余空间 */
+            flex-shrink: 1; /* 允许缩小 */
+            overflow: hidden;
+            text-overflow: ellipsis; /* 超出部分显示省略号 */
+            white-space: nowrap; /* 不换行 */
+          }
+          .count {
+            flex-shrink: 0; /* 不允许缩小 */
+            text-align: right; /* 靠右显示 */
+          }
+          .message-count {
+            padding: 0 6px;
+            border-radius: 16px 16px 16px 16px;
+            background-color: #F53F3F;
+            font-weight: 500;
+            font-size: 10px;
+            color: #FFFFFF;
+            height: 16px;
+            text-align: center;
+            font-style: normal;
+            text-transform: none;
+            border: 1px solid #fff;
+            box-sizing: border-box;
+            width: fit-content;
+
+          }
+        }
+      }
+    }
+    .profile-section {
+      background: url('../../../icons/svg/logo.svg') no-repeat;
+      background-position-x: right;
+      padding: 12px 0 28px 20px;
+      display: flex;
+      .avatar {
+        width: 48px;
+        height: 48px;
+        border-radius: 50%;
+        background-color: #1989FA;
+        display: flex;
+        align-items: center;
+        font-size: 6px;
+        font-weight: bold;
+        color: #fff;
+        margin-right: 4px;
+        .avatar-name {
+          width: 48px;
+          font-size: 14px;
+          line-height: 28px;
+          color: #FFFFFF;
+          font-weight: 400;
+          text-transform: uppercase;
+          text-align: center;
+        }
+      }
+      .user-info {
+        margin-left: 12px;
+        .user-name {
+          font-weight: 500;
+          font-size: 18px;
+          color: #1D2129;
+          line-height: 25px;
+          text-align: left;
+          font-style: normal;
+          text-transform: none;
+          margin-right: 8px;
+        }
+        .department-icon {
+          line-height: 13px;
+          width: 13px;
+          height: 13px;
+        }
+        .user-department {
+          background: linear-gradient( 90deg, #FFE1C5 0%, #FFF6ED 50%, #FFE1C5 100%);
+          border-radius: 4px 4px 4px 4px;
+          font-weight: 500;
+          font-size: 12px;
+          color: #6E3F1F;
+          height: 20px;
+          line-height: 20px;
+          text-align: left;
+          font-style: normal;
+          text-transform: none;
+          padding: 4px 6px;
+        }
+        .user-post {
+          height: 22px;
+          line-height: 22px;
+          font-weight: 400;
+          font-size: 14px;
+          color: #86909C;
+          text-align: left;
+          font-style: normal;
+          text-transform: none;
+        }
+      }
+    }
+
+    .menu-section {
+      .menu-section-list {
+        background-color: #fff;
+        border-radius: 8px;
+        margin: 0 12px 12px 12px;
+        padding: 0 12px;
+        .menu-section-list-item {
+          display: flex;
+          align-items: center;
+          height: 54px;
+          line-height: 44px;
+          .menu-section-list-item-icon {
+            width: 22px;
+            height: 22px;
+            line-height: 22px;
+            margin-right: 8px;
+          }
+          .menu-section-list-item-title {
+            font-weight: 400;
+            font-size: 15px;
+            color: #1D2129;
+            text-align: left;
+            font-style: normal;
+            text-transform: none;
+          }
+          .menu-section-list-item-right-icon {
+            margin-left: auto;
+            height: 16px;
+            width: 16px;
+            color: #C9CDD4;
+          }
+          .menu-section-list-item-right-icon-last {
+            height: 16px;
+            width: 16px;
+            color: #C9CDD4;
+          }
+          .menu-section-list-item-version {
+            margin-left: auto;
+            font-weight: 400;
+            font-size: 15px;
+            color: #86909C;
+            text-align: left;
+            font-style: normal;
+            text-transform: none;
+            padding-right: 8px;
+          }
+        }
+      }
+    }
+
+    .action-section {
+      display: flex;
+      flex-direction: column;
+      .action-button {
+        border: none;
+        margin: 0 12px 12px 12px;
+        background: #FFFFFF;
+        border-radius: 6px;
+        height: 48px;
+        font-weight: 400;
+        font-size: 15px;
+        color: #1D2129;
+        text-align: center;
+        font-style: normal;
+        text-transform: none;
+      }
+      /* 按钮被点击时的样式 */
+      .action-button:active {
+        background-color: #eee;
+      }
+    }
+  }
+
+}
+</style>

package/src/views/builtins/message/mobile/svgData.js

@@ -0,0 +1,28 @@
+// 停机公告1，版本更新2，检测提醒3
+export default {
+  1: `<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="20" cy="20" r="20" fill="#A8B4D1"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.3112 24.9967C14.228 24.8785 14.1556 24.7715 14.0947 24.6789H11.9C11.4654 24.6789 11.0467 24.5085 10.7366 24.2022C10.4261 23.8955 10.25 23.4777 10.25 23.04V16.8933C10.25 16.4556 10.4261 16.0378 10.7366 15.7312C11.0467 15.4249 11.4654 15.2544 11.9 15.2544H14.0983C14.1593 15.1634 14.2315 15.0583 14.3145 14.9423C14.5989 14.5449 15.0142 14.0129 15.5373 13.4779C16.5561 12.4359 18.1139 11.25 20 11.25C20.4142 11.25 20.75 11.5858 20.75 12V28C20.75 28.4142 20.4142 28.75 20 28.75C18.109 28.75 16.55 27.5418 15.533 26.4843C15.0102 25.9408 14.5952 25.4003 14.3112 24.9967Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M25.2494 11.5823L24.396 11.0609L23.3533 12.7676L24.2067 13.289C26.4889 14.6832 27.9999 17.1702 27.9999 20C27.9999 22.8743 26.441 25.3959 24.0983 26.7768L23.2368 27.2846L24.2524 29.0075L25.1139 28.4998C28.0343 26.7784 29.9999 23.6191 29.9999 20C29.9999 16.437 28.0944 13.3204 25.2494 11.5823ZM24.2623 15.2508L23.5131 14.5885L22.1885 16.087L22.9377 16.7493C23.1664 16.9514 23.3728 17.1765 23.5537 17.4207C24.1067 18.1703 24.4025 19.0728 24.4 19.9974V20C24.4 20.9611 24.0906 21.8456 23.5679 22.5606C23.3837 22.812 23.1726 23.0433 22.9379 23.2506L22.1885 23.9127L23.5127 25.4116L24.2621 24.7495C24.604 24.4474 24.9124 24.1097 25.1816 23.7421L25.1822 23.7414C25.9479 22.6941 26.3997 21.3987 26.4 20.0014V20H25.4L26.4 20.0027L26.4 20.0014C26.4033 18.6457 25.9692 17.3256 25.1624 16.2325L25.1615 16.2313C24.8971 15.8741 24.5957 15.5455 24.2623 15.2508ZM23.5679 22.5606L23.5682 22.5602L24.3749 23.1511L23.5677 22.5609L23.5679 22.5606ZM23.5537 17.4207L23.5532 17.4201L24.3578 16.8263L23.5541 17.4213L23.5537 17.4207Z" fill="white" fill-opacity="0.5"/>
+</svg>
+  `,
+  2: `<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="20" cy="20" r="20" fill="#3384F5"/>
+<path d="M21.6104 16.2462L20.9545 17.6412C20.9545 17.6412 20.3616 18.9912 22.2752 18.7212L27.6433 17.5287C27.6433 17.5287 28.8697 17.2137 28.3261 16.2102L25.4017 11.3186C25.4017 11.3186 24.5033 10.5086 23.8834 11.4716L23.2365 12.8666C23.2365 12.8666 13.3359 9.1001 11 18.9507C11 18.9507 13.6054 13.2986 21.6104 16.2462Z" fill="white"/>
+<path d="M18.4075 23.5677L19.0319 22.1232C19.0319 22.1232 19.58 20.7012 17.6843 21.0432L12.3342 22.3932C12.3342 22.3932 11.1168 22.7397 11.6873 23.7432L14.751 28.6933C14.751 28.6933 15.6494 29.5033 16.2603 28.4908L16.8712 27.0463C16.8712 27.0463 26.8932 30.6733 29 20.5122C28.9685 20.5437 26.5068 26.4028 18.4075 23.5677Z" fill="white" fill-opacity="0.6"/>
+</svg>
+    `,
+  3: `<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="20" cy="20" r="20" fill="#FFA455"/>
+<g clip-path="url(#clip0_507_8975)">
+<path d="M26.4682 18.6513V24.0053L28.4837 25.9731V26.934H11.4692V25.9731L13.4847 24.0053V18.6513C13.4847 17.1564 13.9534 15.837 14.8909 14.693C15.8283 13.5489 17.0157 12.8091 18.4531 12.4735V11.8329C18.4531 11.4058 18.6016 11.0549 18.8984 10.7804C19.1953 10.5058 19.5546 10.3685 19.9765 10.3685C20.3983 10.3685 20.7498 10.5058 21.0311 10.7804C21.3123 11.0549 21.4529 11.4058 21.4529 11.8329V12.4735C22.9216 12.8091 24.1246 13.5489 25.062 14.693C25.9995 15.837 26.4682 17.1564 26.4682 18.6513ZM19.953 29.8627C19.4218 29.8627 18.9609 29.6721 18.5703 29.2907C18.1797 28.9094 17.9844 28.4594 17.9844 27.9408H21.9685C21.9685 28.1848 21.9216 28.4289 21.8279 28.673C21.5467 29.3136 21.0623 29.695 20.3749 29.817C20.2499 29.8475 20.1093 29.8627 19.953 29.8627Z" fill="white"/>
+</g>
+<path d="M15.0314 11.4451C14.0002 12.2158 13.1721 13.1792 12.5472 14.3353C11.9222 15.4913 11.5785 16.7277 11.516 18.0443H9.50049C9.56298 16.4387 9.96139 14.9294 10.6957 13.5164C11.43 12.1034 12.4065 10.9313 13.6252 10L15.0314 11.4451ZM28.4367 18.0443C28.3742 16.7277 28.0226 15.4913 27.3821 14.3353C26.7415 13.1792 25.9056 12.2158 24.8744 11.4451L26.3274 10C27.5461 10.9313 28.5148 12.1034 29.2335 13.5164C29.9522 14.9294 30.3584 16.4387 30.4521 18.0443H28.4367Z" fill="white" fill-opacity="0.5"/>
+<defs>
+<clipPath id="clip0_507_8975">
+<rect width="21" height="19.7688" fill="white" transform="translate(9.5 10.2312)"/>
+</clipPath>
+</defs>
+</svg>
+  `
+}