description-top

idec-teams · Oct 7, 2023 · 21f9a85 · 21f9a85
1 parent 079b91b
commit 21f9a85
Show file tree

Hide file tree

Showing 7 changed files with 143 additions and 61 deletions.
diff --git a/asserts/css/style.css b/asserts/css/style.css
@@ -446,22 +446,30 @@ a:hover {
 /* home-page */
 
 /* 图片层 */
-.image-layer {
+.home-back {
+    z-index: 10;
     position: relative;
-    top: 0;
-    left: 0;
-    width: 100vw;
-    height: 100vh;
-    /* 视窗高度 */
-    z-index: 2;
+    background:  center center / cover no-repeat;
 }
 
-.image-flow {
-    display: flex;
-    flex-direction: column;
-    height: 50vh;
-}
+.home-back path {
+
+    fill: #ffffff;
+    position: relative;
 
+}
+.home-top-img {
+    position: absolute;
+    z-index: 1 ;
+    width: 99vw;
+    height: auto;
+    left: 0rem;
+    top: 0rem;
+    background:  center center / cover no-repeat;
+}
+body.dark-theme .home-back path {
+    fill: #001C28;
+}
 /* 首页 头图 */
 .home-top {
     background: url('./img/bg1.png') center center / cover no-repeat;
@@ -530,11 +538,6 @@ a:hover {
 }
 
 
-/* 概述 头图 */
-.description-top {
-    background: url('./img/bg3.jpg') center center / cover no-repeat;
-    /* 响应式背景图片 */
-}
 
 body.dark-theme .image-layer {
     filter: brightness(0.7);
@@ -650,19 +653,48 @@ body.dark-theme p {
     left: 10rem;
     z-index: 1 !important;
 }
+.image-container{
+    position: relative;
+    width: 100%; 
+    height: auto;
+    /* background-image: url("../img/myoverview.png"); */
+    background-size: cover; 
+    background-position: center; 
+    padding-top: 50%; 
+}
+.text-on-image {
+    position: absolute;
+    top: 50%; /* 调整这些值以将文本放在图片的所需位置 */
+    left: 50%;
+    transform: translate(-50%, -50%); /* 使文本完全居中 */
+    padding-top: 20rem;
+    width: 80%; /* 调整文本容器的宽度 */
+    text-align: center;
+    padding: 20px; /* 添加一些内边距 */
+}
 .image-container {
-    width: 100%; /* 或其他您希望的宽度 */
-    height: 300px; /* 设置一个固定的高度 */
-    overflow: hidden;
     position: relative;
+    width: 100%;
+    height: ; /* 调整为适合您的图片和文本的高度 */
+    background-image: url("../img/myoverview.png");
+    background-size: cover;
+    background-position: center;
+    display: flex;
+    align-items: center; /* 垂直居中 */
+    justify-content: center; /* 水平居中 */
+    padding-top: 60%;
 }
+
+
 .image-container p {
-    /* padding: 800px 600px 700px 300px !important; */
+    margin-top: 0;
+    padding-top: 0;
+    color: wheat !important;
+    font-size: 1.4rem;
 }
-.image-container img {
-    width: 200%;
-    height: auto;
-    object-fit: cover;
+.image-container h2 {
+    padding-top: 10rem;
+    margin-top: 0;
 }
 
 .top-back {

diff --git a/asserts/img/home/home-back.svg b/asserts/img/home/home-back.svg
diff --git a/asserts/img/home/资源 1.png b/asserts/img/home/资源 1.png
diff --git a/asserts/img/home/资源 2.png b/asserts/img/home/资源 2.png
diff --git a/asserts/js/my.js b/asserts/js/my.js
@@ -215,4 +215,12 @@ $(document).ready(function() {
 $(".hover3d").hover3d({
     selector: ".hover3d-child",
     invert: true
+});
+
+window.addEventListener("load", function() {
+    // 获取文本框的高度
+    var textHeight = document.querySelector(".text-on-image").offsetHeight;
+
+    // 将文本框的高度设置为图片容器的高度
+    document.querySelector(".image-container").style.height = textHeight+300+ "px";
 });
diff --git a/index.html b/index.html
@@ -159,14 +159,19 @@
             </ul>
         </div>
     </nav>
-<article class="" id="home">
-
-</article>
-
+    <div style="position: relative;">
+        <svg class="home-back" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3045.36 1630.4">
+            <g id="home">
+                <path
+                    d="M0,0V1630.4H3045.36V0H0ZM2699.36,915.59c-78.27,6.19-95.5,58.56-84.08,132.59-143.51-23.13-238.47,36.9-297.52,158.46-159.4,4.76-222.8,82.83-227.99,205.35-95.61-41.2-157.99-13.05-194.03,70.07-48.17-57.23-77.68-76.8-142.22-78.33-36.37-.86-71.41,15.07-93.67,43.84-16.87,21.8-26.73,50.46-23.9,84.72-40.15-71.68-159.81-57.94-186.49,5.39-33.96-47.97-90.66-72.37-136.96-23.01-13.62-99.74-134.23-117.19-163.06-54.13-31.4-54.02-72.77-57.35-137.63-42.08-76.54-164.93-234.83-150.1-345.76-12.93-21.37-104.14-74.88-194.62-257.1-230.42,70.91-164.5,27.97-268.49-104.29-325.01,175.17-37.78,236.51-148.18,201.31-320.16,110.66-7.51,149.48-76.56,160.08-169.78,53.83,.92,84.33-30.12,101.06-80.04,53.09,60.79,107.38,67.07,163.31-1.62,26.36,30.55,58.89,31.42,97.83,1.62,65.23,68.18,130.45,62.91,195.65-4.04,39.73,38.9,79.91,37.03,120.46,.81,54.86,63.48,110.92,66.72,168.16,10.51,70.43,85.49,141.04,84.31,211.82,1.62,123.27,100.97,241.15,89.03,354.92-8.89,53.46,51.27,98.81,45.59,135.82-18.6,50.53,55.78,150.78,57.4,195.65,9.97,9.97,21.56,51.47,22.1,61.71,0,18,29.64,41.52,51.46,78.69,53.9,12.62,57.03,56.34,88.92,117.5,106.72-11.65,61.73,10.68,98.58,56.05,118.58-11.57,30.21-4.89,57.69,12.67,83.54-144.04,80.56-130.05,177.02-38,281.35Z" />
+            </g>
+        </svg>
+        <img src="./asserts/img/home/资源 1.png" alt="" class="home-top-img">
+    </div>
 
-<!-- JS -->
-<script src="./asserts/js/jquery-3.7.0.js"></script>
-<script src="./asserts/js/bootstrap.bundle.min.js"></script>
-<script src="./asserts/js/my.js"></script>
+    <!-- JS -->
+    <script src="./asserts/js/jquery-3.7.0.js"></script>
+    <script src="./asserts/js/bootstrap.bundle.min.js"></script>
+    <script src="./asserts/js/my.js"></script>
 
-</body>
+</body>
diff --git a/pages/description.html b/pages/description.html
@@ -186,34 +186,65 @@ <h2 class="justify-content-center" style="color:#F29700; display:flex;margin-bot
         </div>
     </div>
 
-    <div class=".image-container">
-        <img id="overview" src="../asserts/img/myoverview.png" alt="overview_bg" class="img-fluid top-back"></img>
-        <h2 id="01" class="module top-text main">Introduction</h2>
-        <!-- p1 -->
-        <p class="en top-text main">
-            Inspired by a unique biological nanomaterial - "electrically conductive
-            pili"（<strong>e-pili</strong>） derived from <em>Geobacter metallireducens</em>. This year,
-            Tongji-China has developed <strong>A High-precision Quantitative Detection System</strong>. This
-            system is designed with features such as swiftness, simplicity, cost-effectiveness and the ability
-            to rapidly respond to various types of testing needs. The implementation of this approach
-            contributes to empowering community-based primary health service organizations, relying on their
-            strengths to help the equitable distribution of health resources and the improvement of residents'
-            health.
-        </p>
-        <p class="cn d-none top-text main">
-            受到一种特殊的生物纳米材料---来源于金属还原地杆菌的导电菌毛的启发，今年，Tongji-China设计了一套基于该高导电菌毛高精度抗体定量检测系统。该系统被设计具有快速，简单，经济且可以快速响应不同种类检测需求等特点，该思路的实现有助于赋能社区基层卫生服务机构，依托其力量，助力健康资源的公平分配和居民健康水平的提升。
-        </p>
-        <!-- p2 -->
-        <p class="en top-text main">
-            In addition, we regarded this material as <strong>a link between electronic information and
-                biological information</strong>. We have further explored the potential value of this material
-            and hope that in the future, it can be more widely utilized in the interdisciplinary field,
-            pioneering more research and application possibilities.
-        </p>
-        <p class="cn d-none top-text main">
-            除此之外，我们还将这种材料视为一种连接电子信息和生物信息的桥梁。我们进一步的挖掘了这种材料的潜在价值并希望在未来其可以被更广泛的用于生物电子交叉领域，开创更多的研究和应用可能性。
-        </p>
+    <!-- <div class=".image-container">
+        <div class="text-on-image">
+            <h2 id="overview" class="module top-text main">Introduction</h2>
+            <!-- p1 -->
+            <!-- <p class="en top-text main">
+                Inspired by a unique biological nanomaterial - "electrically conductive
+                pili"（<strong>e-pili</strong>） derived from <em>Geobacter metallireducens</em>. This year,
+                Tongji-China has developed <strong>A High-precision Quantitative Detection System</strong>. This
+                system is designed with features such as swiftness, simplicity, cost-effectiveness and the ability
+                to rapidly respond to various types of testing needs. The implementation of this approach
+                contributes to empowering community-based primary health service organizations, relying on their
+                strengths to help the equitable distribution of health resources and the improvement of residents'
+                health.
+            </p>
+            <p class="cn d-none top-text main">
+                受到一种特殊的生物纳米材料---来源于金属还原地杆菌的导电菌毛的启发，今年，Tongji-China设计了一套基于该高导电菌毛高精度抗体定量检测系统。该系统被设计具有快速，简单，经济且可以快速响应不同种类检测需求等特点，该思路的实现有助于赋能社区基层卫生服务机构，依托其力量，助力健康资源的公平分配和居民健康水平的提升。
+            </p>
+            <!-- p2 -->
+            <!-- <p class="en top-text main">
+                In addition, we regarded this material as <strong>a link between electronic information and
+                    biological information</strong>. We have further explored the potential value of this material
+                and hope that in the future, it can be more widely utilized in the interdisciplinary field,
+                pioneering more research and application possibilities.
+            </p>
+            <p class="cn d-none top-text main">
+                除此之外，我们还将这种材料视为一种连接电子信息和生物信息的桥梁。我们进一步的挖掘了这种材料的潜在价值并希望在未来其可以被更广泛的用于生物电子交叉领域，开创更多的研究和应用可能性。
+            </p>
+        </div> -->
+    <!-- </div> -->
+    <div class="image-container">
+        <div class="text-on-image">
+            <h2 id="overview">Introduction</h2>
+            <!-- p1 -->
+            <p class="en">
+                Inspired by a unique biological nanomaterial - "electrically conductive
+                pili"（<strong>e-pili</strong>） derived from <em>Geobacter metallireducens</em>. This year,
+                Tongji-China has developed <strong>A High-precision Quantitative Detection System</strong>. This
+                system is designed with features such as swiftness, simplicity, cost-effectiveness and the ability
+                to rapidly respond to various types of testing needs. The implementation of this approach
+                contributes to empowering community-based primary health service organizations, relying on their
+                strengths to help the equitable distribution of health resources and the improvement of residents'
+                health.
+            </p>
+            <p class="cn d-none">
+                受到一种特殊的生物纳米材料---来源于金属还原地杆菌的导电菌毛的启发，今年，Tongji-China设计了一套基于该高导电菌毛高精度抗体定量检测系统。该系统被设计具有快速，简单，经济且可以快速响应不同种类检测需求等特点，该思路的实现有助于赋能社区基层卫生服务机构，依托其力量，助力健康资源的公平分配和居民健康水平的提升。
+            </p>
+            <!-- p2 -->
+            <p class="en">
+                In addition, we regarded this material as <strong>a link between electronic information and
+                    biological information</strong>. We have further explored the potential value of this material
+                and hope that in the future, it can be more widely utilized in the interdisciplinary field,
+                pioneering more research and application possibilities.
+            </p>
+            <p class="cn d-none">
+                除此之外，我们还将这种材料视为一种连接电子信息和生物信息的桥梁。我们进一步的挖掘了这种材料的潜在价值并希望在未来其可以被更广泛的用于生物电子交叉领域，开创更多的研究和应用可能性。
+            </p>
+        </div>
     </div>
+
     <article class="main" id="desciption">
         <div class="container">
             <h2 id="01" class="module">Introduction</h2>