行政检查通知做成即时通知+历史通知选显卡

2 years ago · 51141f7715
1 changed files with 193 additions and 0 deletions
--- a/src/views/enterprise/enterpriseInspectionNotice.vue
+++ b/src/views/enterprise/enterpriseInspectionNotice.vue
@ -0,0 +1,193 @@
+<template>
+    <div class="home app_content">
+        <!-- 中间 -->
+        <!--        <div class="warp_body">-->
+        <!--            <div class="white-body">-->
+        <!--                <div class="tabs">-->
+        <!--                    <ul>-->
+        <!--                        <li v-for='(item,index) in data.list' @click='check(index)'-->
+        <!--                            :class="{ active: index === data.TabId }">-->
+        <!--                            <span v-if="index === 0"> {{item.title}}</span>-->
+        <!--                            <span v-else-if="index === 1" class="warn-tab"> {{item.title}}</span>-->
+        <!--                        </li>-->
+        <!--                    </ul>-->
+        <!--                </div>-->
+        <!--                <div v-if="data.TabId == 0">-->
+        <!--                    <enterpriseInspectionList isReg="0"></enterpriseInspectionList>-->
+        <!--                </div>-->
+        <!--                <div v-if="data.TabId == 1">-->
+        <!--                    <enterpriseInspectionList isReg="1"></enterpriseInspectionList>-->
+        <!--                </div>-->
+        <!--            </div>-->
+        <!--        </div>-->
+
+        <van-tabs v-model:active="active" sticky>
+            <van-tab v-for="(item, index) in data.list" :title="item.title">
+                <div v-if="data.TabId == 0" style="height: 1000px;">
+                    <enterpriseInspectionList isReg="0"></enterpriseInspectionList>
+                </div>
+                <div v-if="data.TabId == 1">
+                    <enterpriseInspectionList isReg="1"></enterpriseInspectionList>
+                </div>
+            </van-tab>
+        </van-tabs>
+
+        <!-- 底部 -->
+        <div class="shop_footer_body">
+            <footer-nav></footer-nav>
+        </div>
+    </div>
+</template>
+
+<script setup name="Home">
+    import enterpriseInspectionList from './enterpriseInspectionList.vue'
+    import {Tab, Tabs} from 'vant';
+
+    const {useCommon} = $globalStore;
+    //路由参数
+    const router = useRouter();
+    const route = useRoute();
+    const data = reactive({
+        status: 0,
+        TabId: 0,
+        list: [
+            {
+                title: '即时通知',
+                value: '0'
+            },
+            {
+                title: '历史通知',
+                value: '1'
+            },
+        ],
+    });
+
+    const check = (index) => {
+        console.log("点击切换tab", index);
+        data.TabId = index;
+    };
+
+
+    onMounted(() => {
+
+    })
+
+</script>
+
+<style lang="less" scoped>
+    .home {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        overflow: hidden;
+        background-color: #ebf3fb;
+
+        .warp_body {
+            position: relative;
+            background-image: linear-gradient(to bottom, #ebf3fb, transparent);
+        }
+
+        .white-body {
+            margin: 0 3%;
+            width: 94%;
+            height: 99%;
+            background-color: #fff;
+            border-radius: 0.27rem;
+        }
+    }
+
+    .tohome {
+        position: absolute;
+        top: 1.25%;
+        right: 5%;
+        font-size: 0.5rem;
+    }
+
+    .tabs {
+        padding: 3% 3% 0;
+        width: 94%;
+        height: 1.25rem;
+        box-sizing: content-box;
+    }
+
+    .tabs ul {
+        display: flex;
+        width: 100%;
+        height: 100%;
+        font-size: 0.4rem;
+        line-height: 1.25rem;
+        text-align: center;
+        align-content: center;
+        justify-items: center;
+    }
+
+    .tabs ul li {
+        float: left;
+        width: 50%;
+        height: 100%;
+    }
+
+    .tabs ul li span {
+        display: block;
+        width: 100%;
+        height: 100%;
+        color: #4aa1f9;
+        background: url("src/assets/images/tab_bg1_1.png") no-repeat;
+        background-size: 100% 100%;
+    }
+
+    .tabs ul li.active span {
+        background: url("src/assets/images/tab_bg1.png") no-repeat;
+        background-size: 100% 100%;
+        color: #fff;
+    }
+
+    .tabs ul li span.warn-tab {
+        margin-left: -2%;
+        background: url("src/assets/images/tab_bg.png") no-repeat;
+        background-size: 100% 100%;
+    }
+
+    .tabs ul li.active span.warn-tab {
+        background: url("src/assets/images/tab_bg_1.png") no-repeat;
+        background-size: 100% 100%;
+        color: #fff;
+    }
+
+    .tabs ul li span.level1 {
+        background: url("src/assets/images/tab_shine_red.gif") no-repeat !important;
+        background-size: 100% 100% !important;
+        color: #fff !important;
+    }
+
+    .tabs ul li span.level2 {
+        background: url("src/assets/images/tab_shine_org.gif") no-repeat !important;
+        background-size: 100% 100% !important;
+        color: #fff !important;
+    }
+
+    .tabs ul li span.level3 {
+        background: url("src/assets/images/tab_shine_yel.gif") no-repeat !important;
+        background-size: 100% 100% !important;
+        color: #fff !important;
+    }
+
+    .addinfo {
+        position: absolute;
+        bottom: 3%;
+        right: 2%;
+        z-index: 99999;
+        width: 1.5rem;
+        height: 1.5rem;
+        background-color: #1367fe;
+        border-radius: 50%;
+        box-shadow: 0 0 0.27rem #1367fe;
+        color: #fff;
+        font-size: 0.4rem;
+        text-align: center;
+        vertical-align: middle;
+        padding-top: 0.45rem;
+        box-sizing: border-box;
+    }
+
+</style>