个人中心-预警通知列表页面开发

src/assets/css/jyh.scss

@@ -117,11 +117,29 @@
     background: transparent;
 
     li {
-      background: #F3F3F3;
+      //background: #F3F3F3;
+      background: transparent;
     }
 
     .active {
-      background: #ffffff !important;
+      //background: #ffffff !important;
+    }
+  }
+}
+.jyh-tabs-4 {
+  .devui-tabs__nav {
+    background: transparent;
+
+    li {
+      background: transparent;
+      padding: 8px 0;
+      margin-right: 24px;
+    }
+
+    .active {
+      background: transparent !important;
+      border: 0px !important;
+      border-bottom: 2px solid black  !important;
     }
   }
 }
@@ -246,3 +264,11 @@
     text-align: left;
   }
 }
+
+.devui-status:before {
+  margin-right: 12px;
+}
+
+.yellow-status:before {
+  background-color: #FAC20A !important;
+}

src/views/Jyh/PersonalCenter/Detail/EarlyWarning.vue

@@ -1,28 +1,20 @@
 <template>
   <div class="version-info">
-    <Card simple class="jyh-card mt-3">
+    <d-tabs class="jyh-tabs jyh-tabs-2 jyh-tabs-4" type="wrapped" v-model="selectTab">
-      <div class="card-title">预警通知列表</div>
+      <d-tab id="gryj" title="个人预警通知列表"></d-tab>
-      <div class="mb-3">
+      <d-tab id="zzyj" title="组织预警通知列表"></d-tab>
-        <d-table
+    </d-tabs>
-          class="jyh-table jyh-table-2"
+    <EarlyWarningPerson v-if="selectTab==='gryj'"/>
-          :header-bg="true"
+    <EarlyWarningOrganization v-if="selectTab==='zzyj'"/>
-          :data="licenseTableData"
-        >
-          <d-column field="code" header="编号"></d-column>
-          <d-column field="name" header="名称"></d-column>
-          <d-column field="detail" header="描述"></d-column>
-        </d-table>
-      </div>
-    </Card>
   </div>
 </template>
 
 <script setup lang="ts">
 
 import { ref } from 'vue';
-
+import EarlyWarningPerson from './EarlyWarningPerson.vue';
-const licenseTableData = ref([{code: '05822156', name:'MIT License',detail: 'integer'}]);
+import EarlyWarningOrganization from './EarlyWarningOrganization.vue';
-const CopyrightTableData = ref([{code: '05822156',detail: 'integer'}]);
+const selectTab = ref('gryj');
 
 </script>
 

src/views/Jyh/PersonalCenter/Detail/EarlyWarningOrganization.vue

@@ -0,0 +1,47 @@
+<template>
+  <Card simple class="jyh-card mt-3">
+    <div class="card-title">组织预警通知列表</div>
+    <div class="mb-3">
+      <d-table
+        class="jyh-table jyh-table-2"
+        :header-bg="true"
+        :data="licenseTableData"
+      >
+        <d-column field="code" header="时间"></d-column>
+        <d-column field="name" header="标题">
+          <template #default="scope">
+            <a>{{scope.row.name}}</a>
+          </template>
+        </d-column>
+        <d-column field="detail" header="详情"></d-column>
+        <d-column field="level" header="级别">
+          <template #default="scope,text">
+            <d-status v-if="scope.row.level===4" type="error">危险</d-status>
+            <d-status v-if="scope.row.level===3" type="warning">严重</d-status>
+            <d-status v-if="scope.row.level===2" class="yellow-status">一般</d-status>
+            <d-status v-if="scope.row.level===1" type="running">提示</d-status>
+          </template>
+        </d-column>
+      </d-table>
+    </div>
+  </Card>
+</template>
+
+<script setup lang="ts">
+
+import { ref } from 'vue';
+
+const licenseTableData = ref([
+  {code: '05822156', name:'MIT License',detail: 'integer',level: 4},
+  {code: '05822156', name:'MIT License',detail: 'integer',level: 3},
+  {code: '05822156', name:'MIT License',detail: 'integer',level: 2},
+  {code: '05822156', name:'MIT License',detail: 'integer',level: 1},
+]);
+
+</script>
+
+<style scoped lang="scss">
+@import 'devui-theme/styles-var/devui-var.scss';
+
+
+</style>

src/views/Jyh/PersonalCenter/Detail/EarlyWarningPerson.vue

@@ -0,0 +1,47 @@
+<template>
+  <Card simple class="jyh-card mt-3">
+    <div class="card-title">个人预警通知列表</div>
+    <div class="mb-3">
+      <d-table
+        class="jyh-table jyh-table-2"
+        :header-bg="true"
+        :data="licenseTableData"
+      >
+        <d-column field="code" header="时间"></d-column>
+        <d-column field="name" header="标题">
+          <template #default="scope">
+            <a>{{scope.row.name}}</a>
+          </template>
+        </d-column>
+        <d-column field="detail" header="详情"></d-column>
+        <d-column field="level" header="级别">
+          <template #default="scope,text">
+            <d-status v-if="scope.row.level===4" type="error">危险</d-status>
+            <d-status v-if="scope.row.level===3" type="warning">严重</d-status>
+            <d-status v-if="scope.row.level===2" class="yellow-status">一般</d-status>
+            <d-status v-if="scope.row.level===1" type="running">提示</d-status>
+          </template>
+        </d-column>
+      </d-table>
+    </div>
+  </Card>
+</template>
+
+<script setup lang="ts">
+
+import { ref } from 'vue';
+
+const licenseTableData = ref([
+  {code: '05822156', name:'MIT License',detail: 'integer',level: 4},
+  {code: '05822156', name:'MIT License',detail: 'integer',level: 3},
+  {code: '05822156', name:'MIT License',detail: 'integer',level: 2},
+  {code: '05822156', name:'MIT License',detail: 'integer',level: 1},
+]);
+
+</script>
+
+<style scoped lang="scss">
+@import 'devui-theme/styles-var/devui-var.scss';
+
+
+</style>