iopProject

2023-04-12 14:40:19 +08:00
commit 54bc2204dc
133 changed files with 35706 additions and 0 deletions
@@ -0,0 +1,147 @@
+<template>
+    <div class="headerWrap">
+        <el-drawer v-model="drawer" size="80%" direction="ltr" :show-close="false" :before-close="handleDrawer"
+            style="background-color: #1C3F56;" :with-header="false"  >
+            <Drawer />
+        </el-drawer>
+        <div class="left">
+            <div class="left-1">
+                <div class="menu">
+                    <img src="@/assets/1x/1x/source5.png" alt="menu" class="menuicon" @click="openDrawer">
+                </div>
+            <span>{{ $t(i18n.global.t('dashboard.Dashboard')) }}</span>
+            </div>
+            
+            <div class="search" @click="handlesearch">
+                <img src="@/assets/1x/1x/source2.png" alt="找不到图片">
+            </div>
+        </div>
+        <div class="right">
+            <li class="time">{{ $t(i18n.global.t('dashboard.LastUpadated')) }}: {{ props.time }}</li>
+            <li class="show">
+                <span>Show Value</span>
+                <el-switch v-model="value" size="small" style="--el-switch-on-color: #750000" />
+            </li>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+export default {
+    name: "XHeader",
+};
+</script>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import i18n from '@/locales'
+import { getCurrentInstance } from 'vue'
+import Drawer from '@/views/login/modelComponents/Drawer.vue'
+const { proxy } = (getCurrentInstance() as any)
+const value = ref(true)
+const drawer = ref(false)
+const props = defineProps({
+    time: [String, Number]
+})
+const handlesearch = ()=>{
+    proxy.$router.push("/home")
+}
+const handleDrawer = (done: () => void) => {
+    done();
+}
+const openDrawer = () => {
+    drawer.value = true;
+}
+</script>
+
+<style lang="scss" scoped>
+.headerWrap {
+    display: flex;
+    justify-content: space-between;
+    padding-top: 40px;
+    transform: translateY(-20px);
+
+    @media screen and (max-width: 768px){
+        flex-direction: column;
+        .left-1{
+            display: flex;
+            justify-content: space-between;
+            width: 40vw;
+        }
+    }
+    .left {
+        display: flex;
+        @media screen and (max-width: 768px){
+            justify-content: space-between;
+            width: 100vw;
+            align-items:center;
+        }
+.menu{
+    display: none;
+    @media screen and (max-width: 768px){
+        display: block;
+        
+    }
+}
+        span {
+            color: #2B4A60;
+            font-size: 45px;
+            font-weight: 900;
+            @media screen and (max-width: 768px){
+                font-size: 26rem;
+            }
+        }
+
+        .search {
+            background-color: #fff;
+            width: 30px;
+            height: 30px;
+            border-radius: 50%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin-left: 15px;
+            margin-top: 6px;
+            cursor: pointer;
+            img {
+                width: 18px;
+                height: 18px;
+            }
+        }
+    }
+
+    .right {
+        font-size: 20px;
+        @media screen and (max-width: 768px){
+                width: 100vw;
+                margin-top: 10rem;
+            }
+        .time {
+            color: #435F70;
+            @media screen and (max-width: 768px){
+                float: right;
+                font-size: 15rem;
+            }
+        }
+
+        .show {
+            margin-top: 5px;
+            text-align: right;
+            color: #27485E;
+            font-weight: 600;
+            span {
+                margin-right: 15px;
+            }
+
+            :deep(.el-switch__action) {
+                background-color: #E86666;
+            }
+            @media screen and (max-width: 768px){
+                font-size: 15rem;
+                margin-top: 13rem;
+                transform: translateX(200rem);
+            }
+        }
+    }
+}
+</style>