From 5c0aee7dc1c9b2fd12860b35bfa8de9639566f3e Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Mon, 11 Nov 2024 18:32:55 +0800
Subject: [PATCH] home页layout

---
 src/views/first/index.vue |  112 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 files changed, 112 insertions(+), 0 deletions(-)

diff --git a/src/views/first/index.vue b/src/views/first/index.vue
new file mode 100644
index 0000000..bd44ac4
--- /dev/null
+++ b/src/views/first/index.vue
@@ -0,0 +1,112 @@
+<!--
+ * @Author: shuishen 1109946754@qq.com
+ * @Date: 2022-08-18 16:18:24
+ * @LastEditors: shuishen 1109946754@qq.com
+ * @LastEditTime: 2024-11-10 20:03:06
+ * @FilePath: \bigScreen\src\views\first\index.vue
+ * @Description: 
+ * 
+ * Copyright (c) 2022 by shuishen 1109946754@qq.com, All Rights Reserved. 
+-->
+<template>
+  <div class="w100 h100 relative">
+    <div class="main-header">
+      <div class="title">吉水化工园区“一园一策一图”VR平台</div>
+
+      <div class="login-out" @click="signOut">
+        <img :src="loginOutBg" class="img" />
+        <span>退出</span>
+      </div>
+    </div>
+
+    <div class="main-container">
+      <!-- 地图区域 -->
+      <router-view key="2"></router-view>
+    </div>
+
+    <main-menu></main-menu>
+  </div>
+</template>
+
+<script setup>
+import mainMenu from './components/mainMenu.vue'
+</script>
+
+<style scoped lang="scss">
+.main-header {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 40px;
+  pointer-events: auto;
+
+  .title {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    margin: auto;
+    width: 640px;
+    height: 40px;
+    font-size: 24px;
+    font-family: YouSheBiaoTiHei;
+    font-weight: 400;
+    color: #eff8fc;
+    line-height: 40px;
+    text-align: center;
+    letter-spacing: 8px;
+    font-weight: bolder;
+    background: linear-gradient(to bottom,
+        #e2eaf0 0%,
+        #aed1f1 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    // opacity: 0.89;
+    // text-shadow: 0px 4px 1px rgba(19, 80, 143, 0.66);
+
+    // background: linear-gradient(0deg, rgba(119, 186, 255, 0.45) 0%, rgba(233, 248, 255, 0.45) 73.3154296875%, rgba(255, 255, 255, 0.45) 100%);
+    // -webkit-background-clip: text;
+    // -webkit-text-fill-color: transparent;
+  }
+
+
+  .login-out {
+    position: absolute;
+    top: 10px;
+    right: 40px;
+    height: 36px;
+    color: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 10px;
+    cursor: pointer;
+
+    .img {
+      width: 16px;
+      height: 16px;
+      margin-right: 5px;
+    }
+
+    span {
+      font-size: 13px;
+    }
+  }
+
+  .login-out:hover {
+    background-color: #3c5e8f;
+    border-radius: 20px;
+
+  }
+}
+
+.main-container {
+  position: absolute;
+  top: 40px;
+  left: 40px;
+  right: 40px;
+  bottom: 40px;
+}
+</style>

--
Gitblit v1.9.3