protocols

components/mapSider.vue

@@ -38,6 +38,14 @@
               <a class=" text-xl" :href="'#'+toc[4]">Education for College Students</a>
             </div>
           </li>
+          <li >
+            <div class=" flex cursor-pointer items-center mt-6">
+              <div
+                class="transition ease-out duration-500 mr-[8px] border-solid border max-w-[15px] max-h-[15px] h-[10vw] w-[10vh] rounded-full border-red-900">
+              </div>
+              <a class=" text-xl" :href="'#'+toc[5]">HANDBOOK OF MICROBIAL MEDIATED TUMOR THERAPY IN SYNTHETIC BIOLOGY</a>
+            </div>
+          </li>
           <img alt="sider" src="https://static.igem.wiki/teams/4713/wiki/sider2.png" />
       </ul>
   

pages/education.vue

@@ -282,6 +282,41 @@
 
                 </div>
             </div>
+
+            <div class="scroll-smooth my-8 flex-grow max-w-5xl px-4 py-10 bg-transparent">
+                <div id="div6" class="xjh scroll-smooth text-xl">
+                    <strong>
+                        <h2>Handbook of Microbial Mediated Tumor Therapy in synthetic Biology</h2>
+                    </strong>
+                    We cooperated with BNUZH-Chin, Pekinghsc, JLU-NBBMS,Tsinghua and Guangxi-U-China, 
+                    compiled the Handbook of Microbial Mediated Tumor Therapy in Synthetic Biology.
+                    <br>
+
+                    <center>
+                        <img src="https://static.igem.wiki/teams/4713/wiki/edu/handbook.jpg" class="w-[50%]" alt="think1" />
+                    </center>
+                    <div class="flex justify-center">
+                        <button @click="()=>{close[4] = false; stopScroll(true)} " type="button" class=" transition-all duration-500 text-white bg-red-700
+                         hover:bg-red-800 focus:outline-none focus:ring-4 focus:ring-red-700 font-medium rounded-full
+                         text-base px-5 py-2.5 text-center mr-2 mb-2">HANDBOOK</button>
+
+                    </div>
+
+                    <div :class="{ 'close': close[4], 'w-[80%] h-[74%] top-[15%] left-[15%]': !large[4], 'top-0 left-0 w-[100%] h-[100%]': large[4] }"
+                        class="z-[101] animate-fade fixed transition-all bg-primary-50 border border-primary-100 shadow-2xl   rounded-lg pt-8 ">
+                        <div class="absolute left-3 flex justify-between w-12 top-2.5">
+                            <span @click="()=>{close[4] = true; stopScroll(false)}"
+                                class="cursor-pointer w-3 h-3 rounded-full bg-rose-400 text-center"></span>
+                            <span @click="()=>{large[4] = !large[4];}" :class="{'bg-green-400': !large[4], 'bg-amber-400': large[4]}"
+                                class="transition cursor-pointer w-3 h-3 rounded-full text-center"></span>
+                        </div>
+                        <span class="absolute left-20 top-1 font-mono text-base">HANDBOOK</span>
+                        <iframe src="https://static.igem.wiki/teams/4713/wiki/edu/handbook4.pdf"
+                            style="width: 100%;height: 100%;"></iframe>
+                    </div>
+
+                </div>
+            </div>
         </div>
     </div>
     <Right />
@@ -295,8 +330,8 @@ import { onMounted, } from 'vue';
 
 
 
-const close = ref([true, true, true, true]);
-const large = ref([false, false,false,false])
+const close = ref([true, true, true, true,true]);
+const large = ref([false, false,false,false,false])
 let map = ref(null)
 const whether = ref([])
 for (let i = 0; i < 15; i++) {

pages/protocols.vue

+<template>
+    <Title>Protocols</Title>
+  
+      <PageTitle />
+  
+      <div class="flex justify-center">
+        <button @click="()=>{close[4] = false; stopScroll(true)} " type="button" class=" transition-all duration-500 text-white bg-red-700
+         hover:bg-red-800 focus:outline-none focus:ring-4 focus:ring-red-700 font-medium rounded-full
+         text-base px-5 py-2.5 text-center mr-2 mb-2">Protocols</button>
+
+    </div>
+
+    <div :class="{ 'close': close[4], 'w-[80%] h-[74%] top-[15%] left-[15%]': !large[4], 'top-0 left-0 w-[100%] h-[100%]': large[4] }"
+        class="z-[101] animate-fade fixed transition-all bg-primary-50 border border-primary-100 shadow-2xl   rounded-lg pt-8 ">
+        <div class="absolute left-3 flex justify-between w-12 top-2.5">
+            <span @click="()=>{close[4] = true; stopScroll(false)}"
+                class="cursor-pointer w-3 h-3 rounded-full bg-rose-400 text-center"></span>
+            <span @click="()=>{large[4] = !large[4];}" :class="{'bg-green-400': !large[4], 'bg-amber-400': large[4]}"
+                class="transition cursor-pointer w-3 h-3 rounded-full text-center"></span>
+        </div>
+        <span class="absolute left-20 top-1 font-mono text-base">Protocols</span>
+        <iframe src="https://static.igem.wiki/teams/4713/wiki/edu/protocols-of-peking-igem-2023.pdf"
+            style="width: 100%;height: 100%;"></iframe>
+    </div>
+  </template>
+  
+  <script setup lang="js">
+  import 'katex/dist/katex.min.css'
+
+const close = ref([true, true, true, true, false]);
+const large = ref([false, false,false,false,true])
+
+
+function stopScroll(x){
+    if(x===true)
+    {
+    document.documentElement.style.overflow='hidden';
+    document.body.style.overflow='hidden';
+    }
+    else{
+
+    document.documentElement.style.overflow='';
+    document.body.style.overflow='';
+
+    }
+    
+}
+  </script>
+    
+  <style scoped>
+  .close {
+    display: none;
+  }
+  </style>
\ No newline at end of file