Skip to content

Commit

Permalink
descriptionover
Browse files Browse the repository at this point in the history
  • Loading branch information
@qingmo729
qingmo729 committed Oct 7, 2023
1 parent 21f9a85 commit 49d71f7
Show file tree
Hide file tree
Showing 5 changed files with 152 additions and 65 deletions.
84 changes: 53 additions & 31 deletions asserts/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -560,10 +560,10 @@ h6 {
}

h2 {
font-size: 5rem;
font-size: 3.5rem;
letter-spacing: 2px;
padding-top: 10rem;
padding-bottom: 3rem;
padding-bottom: 1rem;
}

.long-title {
Expand All @@ -577,25 +577,27 @@ body.dark-theme h2 {
/* #26B5A4 */
p {
font-family: "UniversLTStd", "汉仪旗黑", 'Times New Roman', Times, serif;
font-size: 2.5rem;
font-size: 1.8rem;
word-spacing: 1px;
padding: 3rem;
color: #08766c;
font-weight: 300;
line-height:150%;
}

strong {
font-weight: 600;
font-size: 2.6rem;
font-weight: 450;
font-size: 1.8rem;
color: #001C28;
font-family:UniversLTStd ;
}

body.dark-theme strong {
color: #e2fff5;
}

em {
font-size: 2.5rem;
font-size: 1.8rem;
font-style: italic;
color: #114261;
}
Expand Down Expand Up @@ -655,12 +657,13 @@ body.dark-theme p {
}
.image-container{
position: relative;
width: 100%;
width: 100vw;
height: auto;
/* background-image: url("../img/myoverview.png"); */
background-size: cover;
background-position: center;
padding-top: 50%;
transform: translateX(250px);
}
.text-on-image {
position: absolute;
Expand All @@ -671,11 +674,11 @@ body.dark-theme p {
width: 80%; /* 调整文本容器的宽度 */
text-align: center;
padding: 20px; /* 添加一些内边距 */
padding-left: 40px;
}
.image-container {
position: relative;
width: 100%;
height: ; /* 调整为适合您的图片和文本的高度 */
background-image: url("../img/myoverview.png");
background-size: cover;
background-position: center;
Expand All @@ -690,11 +693,19 @@ body.dark-theme p {
margin-top: 0;
padding-top: 0;
color: wheat !important;
font-size: 1.4rem;
}
font-size: 1.6rem;
transform: translateX(-140px);
}
.image-container strong {
color:white;
}
.image-container em {
color:#A5F9F7;
}
.image-container h2 {
padding-top: 10rem;
margin-top: 0;
transform: translateX(-100px);
}

.top-back {
Expand All @@ -707,20 +718,44 @@ body.dark-theme p {
z-index: 10 !important;
color:#f1f1f1
}

#Introduction-m {
display: none;
}
@media screen and (max-width: 750px) {

.main-img {
padding-left: 20px;
padding-right: 0px;
}

#Introduction-m {
display: block;
}
.img-back {
display: none;
}

.image-container h2 {
transform: translateX(-100px);
}
.image-container p {
transform: translateX(-100px);
}
.image-container {
transform: translateX(-20px);
display: none;
}
.text-on-image {
transform: translateX(-100px);
}
}
.container {
max-width: 100vw !important;
}
.row {
max-width: 100vw !important;
}
main {
max-width: 100vw !important;
}

.sidenav-bg {

background-position: center;
Expand Down Expand Up @@ -752,17 +787,11 @@ body.dark-theme p {

.toptransparent {
transition: all 0.7s;
background-color: transparent;
background-color: #307675;
box-shadow: 0px 0px 26px 0px rgba(0, 0, 0, 0.7);
display: block;
}

.toptransparent .circle-SVG,
.toptransparent .sidenav-logo,
.toptransparent .sidenav-a,
.toptransparent h2,
.toptransparent a {
display: none !important;
}

.toptransparent-scrolled {
background-color: #307675;
Expand Down Expand Up @@ -805,7 +834,7 @@ div {
padding-left: 65px;
padding-right: 20px;
margin-left: 20px;
font-family: 'Times New Roman', 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif !important;
font-family:"UniverLTStd", 'Times New Roman', 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif !important;
}

.sidenav a:first-child {
Expand Down Expand Up @@ -1558,15 +1587,8 @@ item .d-none {
justify-items: center;
}

strong {
font-size: 2.3rem;
padding-top: 2rem;
margin-top: 1rem;
}

span .strong {
font-style: italic;
}


/* Media Queries */
@media screen and (max-width: 750px) {
Expand Down
Binary file added asserts/img/home/词云.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added asserts/img/notebook/figure_8.26.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
65 changes: 33 additions & 32 deletions pages/description.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -190,7 +190,7 @@ <h2 class="justify-content-center" style="color:#F29700; display:flex;margin-bot
<div class="text-on-image">
<h2 id="overview" class="module top-text main">Introduction</h2>
<!-- p1 -->
<!-- <p class="en top-text main">
<!-- <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
Expand All @@ -204,7 +204,7 @@ <h2 id="overview" class="module top-text main">Introduction</h2>
受到一种特殊的生物纳米材料---来源于金属还原地杆菌的导电菌毛的启发，今年，Tongji-China设计了一套基于该高导电菌毛高精度抗体定量检测系统。该系统被设计具有快速，简单，经济且可以快速响应不同种类检测需求等特点，该思路的实现有助于赋能社区基层卫生服务机构，依托其力量，助力健康资源的公平分配和居民健康水平的提升。
</p>
<!-- p2 -->
<!-- <p class="en top-text main">
<!-- <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,
Expand All @@ -216,8 +216,8 @@ <h2 id="overview" class="module top-text main">Introduction</h2>
</div> -->
<!-- </div> -->
<div class="image-container">
<div class="text-on-image">
<h2 id="overview">Introduction</h2>
<div class="text-on-image main">
<h2 id="overview main">Introduction</h2>
<!-- p1 -->
<p class="en">
Inspired by a unique biological nanomaterial - "electrically conductive
Expand All @@ -244,35 +244,36 @@ <h2 id="overview">Introduction</h2>
</p>
</div>
</div>

<article class="main" id="desciption">
<div class="container">
<h2 id="01" class="module">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 id="Introduction-m">
<h2 id="01" class="module">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>
<h2 id="02" class="module">Why E-pili?</h2>
<!-- p1 -->
<p class="en">
Expand Down Expand Up @@ -302,7 +303,7 @@ <h2 id="02" class="module">Why E-pili?</h2>
</div>
</article>
<!-- figure 1 -->
<div style="position: relative;">
<div style="position: relative;" class="row">
<img src="../asserts/img/description/figure_1.png" alt="" class="img-fluid main-img"
style="position: relative; z-index:10;transform: translateX(-7rem);">
<img src="../asserts/img/description/figure_1_b.png" alt="" class="img-back">
Expand Down
Loading

0 comments on commit 49d71f7

Please sign in to comment.