From cd52a0e51b6b87ace1376414d94301a0e721678a Mon Sep 17 00:00:00 2001
From: linwe <872216996@qq.com>
Date: Thu, 07 Nov 2024 20:14:53 +0800
Subject: [PATCH] 企业详情

---
 public/images/wrapper-box-bg.png                     |    0 
 src/views/companyInfo/components/centerContainer.vue |   14 ++--
 src/views/layout/index.vue                           |   81 ++++++++++++++++++++++++++
 src/views/companyInfo/index.vue                      |   68 ++++++++++++++++++++++
 src/styles/page/index.scss                           |    1 
 5 files changed, 154 insertions(+), 10 deletions(-)

diff --git a/public/images/wrapper-box-bg.png b/public/images/wrapper-box-bg.png
new file mode 100644
index 0000000..d3f786e
--- /dev/null
+++ b/public/images/wrapper-box-bg.png
Binary files differ
diff --git a/src/styles/page/index.scss b/src/styles/page/index.scss
index a34c74d..28b28d9 100644
--- a/src/styles/page/index.scss
+++ b/src/styles/page/index.scss
@@ -2,6 +2,7 @@
 
   .left-container,
   .right-container {
+    margin-top: 30px;
     display: flex;
     flex-direction: column;
     position: absolute;
diff --git a/src/views/companyInfo/components/centerContainer.vue b/src/views/companyInfo/components/centerContainer.vue
index 11478d1..dbffc36 100644
--- a/src/views/companyInfo/components/centerContainer.vue
+++ b/src/views/companyInfo/components/centerContainer.vue
@@ -59,7 +59,7 @@
     
 <style lang="scss" scoped >
 .center-container {
-    margin: -35px auto;
+    margin: 10px auto;
     color: #fff;
     pointer-events: auto;
 }
@@ -69,27 +69,25 @@
 .center-name {
     font-size: 30px;
     margin: 10px 0;
+    margin-left: 45px;
     font-family: YouSheBiaoTiHei;
+
 }
 
 .button-group {
-    display: flex;
-    justify-content: space-around;
-    align-items: center;
-    margin: -6px 0;
+    margin-top: 26px;
     cursor: pointer;
 
 }
 
 .button-group button {
     width: 120px;
-    height: 40px;
     border: none;
-    border-radius: 20px;
     background-color: transparent;
     color: #fff;
-    font-size: 25px;
+    font-size: 18px;
     font-family: YouSheBiaoTiHei;
+    background-image: url(/images/mode-tab-ac.png);
 }
 
 .center-info {
diff --git a/src/views/companyInfo/index.vue b/src/views/companyInfo/index.vue
index 082acb1..bf2840f 100644
--- a/src/views/companyInfo/index.vue
+++ b/src/views/companyInfo/index.vue
@@ -21,7 +21,7 @@
 <template>
     <div class="container page-container">
         <!-- <left-container></left-container> -->
-        <centerContainer :button-index="buttonIndex" @childEvent="handleChildEvent"></centerContainer> <!-- 修改这里 -->
+        <centerContainer :button-index="buttonIndex" @childEvent="handleChildEvent"></centerContainer>
         <right-container :button-index="buttonIndex"></right-container>
         <main-menu-vue></main-menu-vue>
     </div>
@@ -33,4 +33,70 @@
     width: 100%;
     height: 100%;
 }
+
+.page-container {
+
+    .left-container,
+    .right-container {
+        margin-top: 60px;
+        display: flex;
+        flex-direction: column;
+        position: absolute;
+        top: 0;
+        width: 400px;
+        height: calc(100% - 80px);
+        pointer-events: auto;
+        background: rgba(28, 115, 195, 0.2);
+        margin-right: 40px;
+
+        &>div {
+            display: flex;
+            flex-direction: column;
+
+            .title-box {
+                position: relative;
+                height: 38px;
+                line-height: 38px;
+                background: url(/images/title-box.png) no-repeat center / 100% 100%;
+
+                .title {
+                    margin-left: 30px;
+                    text-align: left;
+                    font-size: 18px;
+                    font-family: Alibaba PuHuiTi;
+                    font-weight: bold;
+                    font-style: italic;
+                    color: transparent;
+                    text-shadow: 0px 2px 8px rgba(5, 28, 55, 0.42);
+                    background-image: linear-gradient(180deg, rgba(14, 197, 236, 0.36) 5%, rgba(49, 190, 255, 0.36) 20%, rgba(255, 255, 255, 1) 40%);
+                    -webkit-background-clip: text;
+                    -webkit-text-fill-color: transparen
+                }
+
+                .title-sub {
+                    position: absolute;
+                    right: 10px;
+                    bottom: 4px;
+                    line-height: 1;
+                }
+            }
+
+            .content-box {
+                display: flex;
+                flex-direction: column;
+                height: calc(100% - 38px);
+            }
+        }
+
+        .chart-box {
+            // background:  rgba(42,64,120,0.68);
+        }
+    }
+
+    .left-container {}
+
+    .right-container {
+        right: 0;
+    }
+}
 </style>
\ No newline at end of file
diff --git a/src/views/layout/index.vue b/src/views/layout/index.vue
index fb8ecac..e9ffbcb 100644
--- a/src/views/layout/index.vue
+++ b/src/views/layout/index.vue
@@ -12,7 +12,7 @@
   <div class="wrapper">
     <map-container ref="MapContainer">
       <template #content>
-        <div v-if="showContent" class="main-content" id="MainContent">
+        <div v-if="showContent" :class="[showSubLayout ? 'main-content-sub' : 'main-content']" id="MainContent">
           <main-search></main-search>
           <main-tool></main-tool>
 
@@ -179,5 +179,84 @@
       bottom: 40px;
     }
   }
+
+
+  .main-content-sub {
+    height: 1080px;
+    background: url(/images/wrapper-box-bg.png) no-repeat center / 100% 100%,
+      url(/images/pro-bg.png) no-repeat center / 100% 100%;
+
+    pointer-events: none;
+
+    .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;
+        flex-direction: column;
+        align-items: center;
+        justify-content: space-between;
+        cursor: pointer;
+
+        .img {
+          width: 16px;
+          height: 16px;
+        }
+
+        span {
+          font-size: 13px;
+        }
+      }
+    }
+
+    .main-container {
+      position: absolute;
+      top: 40px;
+      left: 40px;
+      right: 40px;
+      bottom: 40px;
+    }
+  }
 }
 </style>

--
Gitblit v1.9.3