Skip to content
Snippets Groups Projects
Commit 96b378b1 authored by Junduo Zheng's avatar Junduo Zheng
Browse files

Merge branch 'zjd' into 'main' 

index

See merge request !126
parents c02a5651 7c20add1
No related branches found
No related tags found
1 merge request!126index
Pipeline #301859 passed
Stage: deploy
Hide whitespace changes
Inline Side-by-side
Showing
with 203 additions and 104 deletions
pages/index.vue
+ 203
− 104
View file @ 96b378b1
......@@ -39,10 +39,9 @@
<h5 class="Pancreatic text-center mx-auto pt-[6vh] text-3xl lg:text-5xl font-semibold">Ranking 6th in China, 4th in the US</h5>
</div>
<div class=" h-screen relative" id="Current Treatment1" style="background: url(https://static.igem.wiki/teams/4713/wiki/index/background2.png) center center / cover">
<img class="iFlash mx-auto pt-[5vh] max-h-[40vh]" src="https://static.igem.wiki/teams/4713/wiki/description4.jpg" alt="Current Treatment" style="height: 60%;">
<div class="wordfrom60">
<h5 class="text-center max-w-lg mx-auto pt-[4vh] text-3xl lg:text-5xl font-bold">Current Treatment</h5>
<h5 class="text-center max-w-[85vw] mx-auto pt-[3vh] text-1xl lg:text-2xl">Unfortunately, conventional treatment methods have shown limited efficacy in combatting pancreatic cancer due to the complex anatomical surroundings of the pancreas and immune escape.</h5>
<div class="pt-[20vh]">
<h5 class="wordfrom20 text-center max-w-lg mx-auto text-3xl lg:text-5xl font-bold">Current Treatment</h5>
<h5 class="wordfrom20 text-center max-w-[80vw] mx-auto pt-[8vh] text-1xl lg:text-3xl">Unfortunately, conventional treatment methods have shown limited efficacy in combatting pancreatic cancer due to the complex anatomical surroundings of the pancreas and immune escape.</h5>
</div>
<div class="tFlash absolute" style="display: grid; grid-template-columns: 1fr 1fr; align-items: center; bottom:0%">
<img class="iFlash mx-auto md:ml-[30%] lg:ml-[60%]" src="https://static.igem.wiki/teams/4713/wiki/index/che.png" alt="radiotherapy" style="width: 35%;">
......@@ -51,7 +50,7 @@
<h5 class="tflashs text-center max-w-md mx-auto pt-[4vh] text-1xl lg:text-2xl">many hollow organs are located around the pancreas, which makes it not suitable for the development of radiotherapy</h5>
</div>
</div>
<!-- <center><img class="Rotate" src="https://static.igem.wiki/teams/4713/wiki/description6.png" alt="Figure test" style="width: 30%"/></center> -->
</div>
<div class=" h-screen" id="Current Treatment2" style="display: grid; grid-template-rows: 33% 33% 33%; align-items: center;background: url(https://static.igem.wiki/teams/4713/wiki/index/background2.png) center center / cover">
<div id="chemotherapy" class="tFlash pt-[5vh]" style="display: grid; grid-template-columns: 1fr 1fr ; align-items: center">
......@@ -83,95 +82,123 @@
<img class="iFlash absolute wordfrom" src="https://static.igem.wiki/teams/4713/wiki/index/immune1.png" alt="immunotherapy" style="width: 25%; top: 30%; left:35%">
<img class="iFlash absolute" src="https://static.igem.wiki/teams/4713/wiki//index/cancer-shield.png" alt="pancreatic cancer" style="width: 45%; top: 15%; left:55%">
</div>
<div class="h-screen relative" id="Our Project1" style="background: url(https://static.igem.wiki/teams/4713/wiki/index/background2.png) center center / cover; display: flex; flex-direction: column; align-items: center; justify-content: center;">
<div class="absolute cloud text-center max-w-sm mx-auto pt-10 pb-[10vh]" style="font-family: 'Consolas', sans-serif; font-size: 20px; max-width: 1100px; top: 5%">
People are calling for new therapies to replace or assist the current treatments. Within 10 years, new technologies such as genetic therapy, CAR-T and RNA therapy have been rapidly developed. Meanwhile, bacterial therapy has also been introduced as a potential alternative.
</div>
<!-- <br>
<br>
<br> -->
<div class="absolute cloud text-center max-w-base mx-auto pt-10" style="max-width: 800px; top:30%">
<span class="typewriter text-4xl border-r-black" style="font-family: 'Consolas', sans-serif; font-size: 30px;"></span>
<div class="absolute cloud text-center max-w-sm mx-auto pt-10 pb-[10vh]" style="font-family: 'Consolas', sans-serif; font-size: 30px; max-width: 1100px; top: 5%">
People are calling for new therapies to replace or assist the current treatments. Within 10 years, new technologies such as genetic therapy, CAR-T and RNA therapy have been rapidly developed. Meanwhile, bacterial therapy has also been introduced as a potential alternative.
</div>
<div class="absolute cloud text-center max-w-base mx-auto pt-10" style="max-width: 800px; top:50%">
<span class="typewriter text-4xl border-r-black" style="font-family: 'Consolas', sans-serif; font-size: 30px;"></span>
</div>
</div>
<div class="h-screen relative" id="Our Project_1" style="background: url(https://static.igem.wiki/teams/4713/wiki/index/background2.png) center center / cover; display: flex; flex-direction: column; align-items: center; justify-content: center;">
<div class="absolute image-container" style="display: flex; justify-content: center; align-items: center; top:10%">
<img src="https://static.igem.wiki/teams/4713/wiki//index/bacteria.png" alt="pancreatic cancer" style="width: 30%; margin-top: 20px;" class="left-flash">
<img src="https://static.igem.wiki/teams/4713/wiki//index/cancer-live.png" alt="pancreatic cancer" style="width: 30%; margin-top: 20px;" class="wordFlashb z-10">
<img src="https://static.igem.wiki/teams/4713/wiki//index/cancer-dead.png" alt="pancreatic cancer" style="width: 30%; margin-top: 20px; position: absolute; top: 0; left: 50%;" class="wordFlashd">
</div>
</div>
<div class="h-screen" id="Our Project2" style="background: url(https://static.igem.wiki/teams/4713/wiki/index/background2.png) center center / cover;">
<h2 class="wordfrom text-center mx-auto pt-[15vh] lg:text-5xl text-3xl font-bold">Our Project</h2>
<div class="wordfrom cloud text-center mx-auto pt-[10vh]" style="display: grid; grid-template-columns: 50% 50%; align-items: start; grid-column-gap: -20px; max-width: 2000px;">
<div style="">
<strong><p class="lg:text-3xl text-2xl">Targeting</p></strong>
<br>
<br>
<p class="lg:text-2xl text-1xl">Tumour Micro-environment</p>
<br>
<br>
<p class="lg:text-2xl text-1xl">Stable in tumour tissues compared to antigen</p>
</div>
<div style="">
<strong><p class="lg:text-3xl text-2xl">Function</p></strong>
<br>
<br>
<p class="lg:text-2xl text-1xl">ARG capsules</p>
<br>
<br>
<p class="lg:text-2xl text-1xl">Detectable by medical ultrasonic, can cooperate with ultrasonic treatment and causing less harm</p>
</div>
</div>
</div>
</div>
<div class=" h-screen" id="Our Project3" style="background: url(https://static.igem.wiki/teams/4713/wiki/index/background2.png) center center / cover">
<h2 class="wordfrom text-center mx-auto pt-10 font-bold" style="font-size: 40px;">Concerns and Solutions</h2>
<div class="wordfrom text-center mx-auto pt-[8vh]" style="display: grid; grid-template-columns: 33% 33% 33%; align-items: center; grid-column-gap: 0px; font-size: 18px; max-width: 2000px;">
<div class="card mx-auto">
<div class="card-inner">
<div class="card-front">
<strong><p style="margin: 0;">Effectiveness of Targeting</p></strong>
</div>
<div class="card-back">
Effectiveness of Targeting
<br>
<br>
We designed a hybrid promoter functioning as an AND-gate
<br>
<br>
Concerning both high lactate and hypoxicity
<br>
<br>
Lower load compared to traditional AND-gate
</div>
</div>
<br>
<br>
<div class="absolute image-container" style="display: flex; justify-content: center; align-items: center; top:50%">
<img src="https://static.igem.wiki/teams/4713/wiki//index/bacteria.png" alt="pancreatic cancer" style="width: 20%; margin-top: 20px;" class="left-flash">
<img src="https://static.igem.wiki/teams/4713/wiki//index/cancer-dead.png" alt="pancreatic cancer" style="width: 20%; margin-top: 20px;">
</div>
<div class="card mx-auto">
<div class="card-inner">
<div class="card-front">
<strong><p style="margin: 0;">Intravenous safety</p></strong>
</div>
<div class="card-back">
Intravenous safety
<br>
<br>
We introduced controllable enveloping concept and designed an MCM model to imitate.
<br>
<br>
Wet lab solution
<br>
<br>
Dry lab imitation
<br>
<br>
A safe strain
</div>
</div>
</div>
<div class="h-screen" id="Our Project2" style="background: url(https://static.igem.wiki/teams/4713/wiki/index/background2.png) center center / cover; display: flex; flex-direction: column; justify-content: center; align-items: center;">
<h2 class="wordfrom text-center mx-auto pt-10" style="font-size: 40px;">Our Project</h2>
<div class="wordfrom cloud text-center mx-auto pt-[8vh]" style="display: grid; grid-template-columns: 50% 50%; align-items: start; grid-column-gap: -20px; font-size: 18px; max-width: 2000px;">
<div style="">
<strong><p style="margin: 0;">Targeting</p ></strong>
<br>
<br>
Tumour Micro-environment
<br>
<br>
Stable in tumour tissues compared to antigen
</div>
<div style="">
<strong><p style="margin: 0;">Function</p ></strong>
<br>
<br>
ARG capsules
<br>
<br>
Detectable by medical ultrasonic, can cooperate with ultrasonic treatment and causing less harm
</div>
<div class="card mx-auto">
<div class="card-inner">
<div class="card-front">
<strong><p style="margin: 0;">Social Concerns</p></strong>
</div>
</div>
<div class=" h-screen" id="Our Project3" style="background: url(https://static.igem.wiki/teams/4713/wiki/index/background2.png) center center / cover">
<h2 class="wordfrom text-center mx-auto pt-10" style="font-size: 40px;">Concerns and Solutions</h2>
<div class="wordfrom cloud text-center mx-auto pt-[8vh]" style="display: grid; grid-template-columns: 33% 33% 33%; align-items: start; grid-column-gap: 0px; font-size: 18px; max-width: 2000px;">
<div style="">
<strong><p style="margin: 0;">Effectiveness of Targeting</p ></strong>
<br>
<br>
We designed a hybrid promoter functioning as an AND-gate
<br>
<br>
Concerning both high lactate and hypoxicity
<br>
<br>
Lower load compared to traditional AND-gate
</div>
<div style="">
<strong><p style="margin: 0;">Intravenous safety</p ></strong>
<br>
<br>
We introduced controllable enveloping concept and designed an MCM model to imitate.
<br>
<br>
Wet lab solution
<br>
<br>
Dry lab imitation
<br>
<br>
A safe strain
</div>
<div style="">
<strong><p style="margin: 0;">Social Concerns</p ></strong>
<br>
<br>
We launched abundant human practices and educations.
<br>
<br>
Professional opinions
<br>
<br>
Patients' experiences
<br>
<br>
Middle school and College education
</div>
</div>
<div class="card-back">
Social Concerns
<br>
<br>
We launched abundant human practices and educations.
<br>
<br>
Professional opinions
<br>
<br>
Patients' experiences
<br>
<br>
Middle school and College education
</div>
<!-- <center><img class="hover:scale-110 cursor-pointer transition duration-150 ease-in-out" @click="$router.push('/description')" src="https://static.igem.wiki/teams/4713/wiki/description6.png" alt="Figure test" style="width: 30%"/></center> -->
</div>
</div>
</div>
</div>
</div>
</template>
......@@ -243,6 +270,54 @@
.mainBox li.active {
opacity: 1;
}
.card {
width: 28vw;
height: 70vh;
perspective: 1000px;
}
.card-inner {
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: transform 0.5s, box-shadow 0.5s;
border-radius: 20px;
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
}
.card:hover .card-inner {
transform: rotateY(180deg);
}
.card-front,
.card-back {
width: 100%;
height: 100%;
position: absolute;
backface-visibility: hidden;
border-radius: 20px;
background-image: url('https://static.igem.wiki/teams/4713/wiki//index/bacteria.png');
}
.card-front {
background-color: #f2f2f2;
display: flex;
justify-content: center;
align-items: center;
}
.card-back {
background-color: #e0e0e0;
display: flex;
justify-content: center;
align-items: center;
transform: rotateY(180deg);
}
</style>
<script setup lang="js">
......@@ -265,10 +340,32 @@ onMounted(() => {
}});
})
let flashb = gsap.utils.toArray('.wordFlashb')
flashb.forEach(a=>{
gsap.fromTo(a, {opacity: 1}, {delay: 0.6, duration: 1.5, opacity: 0, y: () => {return -0.2 * window.screen.height},
scrollTrigger: {
trigger: a,
// markers: true,
start: "-30% 70%",
toggleActions: "restart none none reset"
}});
})
let flashd = gsap.utils.toArray('.wordFlashd')
flashd.forEach(a=>{
gsap.from(a, {opacity: 0, delay: 0.6, duration: 1, opacity: 0,
scrollTrigger: {
trigger: a,
// markers: true,
start: "-30% 70%",
toggleActions: "restart none none reset"
}});
})
let pan = gsap.utils.toArray('.Pancreatic')
let begin = document.getElementById('Pancreatic Cancer2');
pan.forEach(a=>{
gsap.fromTo(a, {opacity: 0}, {duration: 0.5, opacity: 1, y: () => {return -0.2 * window.screen.height},
gsap.fromTo(a, {opacity: 0}, {duration: 0.5, opacity: 1, y: () => {return -0.2 * window.screen.height},
scrollTrigger: {
trigger: begin,
// markers: true,
......@@ -287,24 +384,14 @@ onMounted(() => {
toggleActions: "play none none reverse"
}});
})
let wordfrom60 = gsap.utils.toArray(".wordfrom60")
wordfrom60.forEach(a=>{
gsap.from(a, {opacity: 0, y: () => {return 0.2 * window.screen.height}, duration: 0.5,
scrollTrigger: {
trigger: a,
// markers: true,
start: "-60% 80%",
toggleActions: "play none none reverse"
}});
})
let leftFlash = gsap.utils.toArray(".left-flash")
leftFlash.forEach(a=>{
gsap.from(a, {opacity: 0, x: () => {return -0.5 * window.screen.width}, duration: 0.5,
let wordfrom20 = gsap.utils.toArray(".wordfrom20")
wordfrom20.forEach(a=>{
gsap.from(a, {opacity: 0, y: () => {return 0.2 * window.screen.height}, duration: 0.5,
scrollTrigger: {
trigger: a,
// markers: true,
start: "-40% 70%",
start: "-20% 70%",
toggleActions: "play none none reverse"
}});
})
......@@ -323,6 +410,18 @@ onMounted(() => {
}})
})
let leftFlash = gsap.utils.toArray(".left-flash")
leftFlash.forEach(a=>{
gsap.from(a, {opacity: 0, x: () => {return -0.5 * window.screen.width}, duration: 0.5,
scrollTrigger: {
trigger: a,
// markers: true,
start: "-40% 70%",
toggleActions: "play none none reset"
}});
})
var counterElement = document.getElementById('counter');
var targetValue = 12;
var currentValue = 0;
......@@ -399,4 +498,4 @@ onMounted(() => {
})
</script>
\ No newline at end of file
</script>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment