update

src/modules/student/contest/components/Book.vue

@@ -17,7 +17,7 @@ function fetchInfo() {
     list = res.data.items
   })
 }
-watchEffect(() => {
+onMounted(() => {
   fetchInfo()
 })
 
@@ -37,7 +37,6 @@ let show = $ref(false)
 function handleView(row: ExperimentBookType) {
   currentRaw = row
   currentRawUrl = row.url ? (JSON.parse(row.url)?.url as string) : ''
-  console.log(row, 'row')
   show = true
 }
 // 关闭
@@ -51,14 +50,15 @@ function handleClose() {
   <template v-else>
     <Preview :url="file.url"></Preview>
   </template> -->
-  <div v-if="list.length">
-    <ul class="book-list">
+  <template v-if="list.length">
+    <ul class="book-list" v-if="list.length != 1">
       <li v-for="item in list" :key="item.id" @click="handleView(item)">
         <el-icon><Document /></el-icon>
         <p>{{ item.name }}</p>
       </li>
     </ul>
-  </div>
+    <Preview :url="list[0] ? JSON.parse(list[0].url)?.url : ''" v-else></Preview>
+  </template>
   <el-empty description="暂无数据" v-else />
   <!-- 预览 -->
   <div class="book-preview" v-if="show && currentRaw">

src/modules/student/contest/views/Lab.vue

@@ -116,6 +116,11 @@ const competitionUrl = computed(() => {
   const url = item?.url || ''
   return url.includes('?') ? `${url}&token=${cookies.get('TGC')}` : `${url}?token=${cookies.get('TGC')}`
 })
+
+let isHeadShow = $ref(true)
+const handleShowHead = function () {
+  isHeadShow = !isHeadShow
+}
 </script>
 
 <template>
@@ -125,7 +130,8 @@ const competitionUrl = computed(() => {
         <h1>{{ competition?.name }}</h1>
         <el-tabs type="border-card">
           <el-tab-pane label="实训指导" lazy>
-            <Book :competition_id="id" :key="resizeKey"></Book>
+            <!-- <Book :competition_id="id" :key="resizeKey"></Book> -->
+            <Book :competition_id="id"></Book>
           </el-tab-pane>
           <el-tab-pane label="操作视频" lazy>
             <Video :competition_id="id"></Video>
@@ -140,7 +146,7 @@ const competitionUrl = computed(() => {
       </div>
     </template>
     <template #right>
-      <AppCard>
+      <AppCard v-if="isHeadShow">
         <el-row justify="space-between">
           <el-button type="primary" :icon="HomeFilled" @click="handleBackHome">返回首页</el-button>
           <div>
@@ -149,6 +155,24 @@ const competitionUrl = computed(() => {
         </el-row>
       </AppCard>
       <div class="lab-box">
+        <div class="close-btn" @click="handleShowHead">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 86" aria-hidden="true" width="16" height="66">
+            <g fill="none" fill-rule="evenodd">
+              <path
+                class="path-wapper"
+                d="M0 0l14.12 8.825A4 4 0 0116 12.217v61.566a4 4 0 01-1.88 3.392L0 86V0z"
+                fill="#f8f9fa"
+              ></path>
+              <path
+                class="path-arrow"
+                style="transform: rotate(180deg); transform-origin: center"
+                d="M10.758 48.766a.778.778 0 000-1.127L6.996 43l3.762-4.639a.778.778 0 000-1.127.85.85 0 00-1.172 0l-4.344 5.202a.78.78 0 000 1.128l4.344 5.202a.85.85 0 001.172 0z"
+                fill="#8D9EA7"
+                fill-rule="nonzero"
+              ></path>
+            </g>
+          </svg>
+        </div>
         <iframe :src="competitionUrl" :key="iframeKey" frameborder="0" class="iframe" ref="iframeRef"></iframe>
       </div>
     </template>
@@ -156,6 +180,14 @@ const competitionUrl = computed(() => {
 </template>
 
 <style lang="scss" scoped>
+.close-btn {
+  cursor: pointer;
+  position: absolute;
+  top: -40px;
+  right: 45px;
+  transform: rotate(270deg);
+  transform-origin: center;
+}
 .lab-left {
   display: flex;
   flex-direction: column;