style:隐藏我的路径图加载时蓝色背景

src/views/roadmap/LearnPath.vue

@@ -5,17 +5,11 @@
 				<div class="titleL">
 					<div @click="returnfun" class="text">学习路径图</div>
 					<div class="info" style="margin-right: 14px" v-if="userInfo.jobName">
-            <img
+						<img style="width: 20px; height: 18px; margin-right: 10px" src="../../assets/image/pm.png" />
-              style="width: 20px; height: 18px; margin-right: 10px"
-              src="../../assets/image/pm.png"
-            />
 						<div style="margin-top: 1px">{{ userInfo.jobName }}</div>
 					</div>
 					<div class="info" v-if="userInfo.bandDesc">
-            <img
+						<img style="width: 18px; height: 17px; margin-right: 11px" src="../../assets/image/band.png" />
-              style="width: 18px; height: 17px; margin-right: 11px"
-              src="../../assets/image/band.png"
-            />
 						<div style="margin-top: 2px">{{ userInfo.bandDesc }}</div>
 					</div>
 				</div>
@@ -57,11 +51,7 @@
 					<!--            </template>-->
 					<!--          </el-popover>-->
 				</div>
-        <div
+				<div :style="{ display: showmapdetail ? 'flex' : 'none' }" class="titleR" @click="returnfun">
-          :style="{ display: showmapdetail ? 'flex' : 'none' }"
-          class="titleR"
-          @click="returnfun"
-        >
 					返回列表
 				</div>
 			</div>
@@ -69,51 +59,21 @@
 			<div :style="{ display: !showmapdetail ? 'flex' : 'none' }" class="head">
 				<div style="min-width: 770px; width: 100%">
 					<el-table :data="data" style="width: 100%" @row-click="gofun">
-            <el-table-column
+						<el-table-column prop="img" label="缩略图" #default="scope" align="center" width="255">
-              prop="img"
+							<img :src="scope.row.picUrl" style="width: 230px; height: 155px" />
-              label="缩略图"
-              #default="scope"
-              align="center"
-              width="255"
-            >
-              <img
-                :src="scope.row.picUrl"
-                style="width: 230px; height: 155px"
-              />
 						</el-table-column>
 						<el-table-column align="center" prop="name" label="路径名称" />
-            <el-table-column
+						<el-table-column align="center" prop="introduce" label="路径介绍" #default="scope">
-              align="center"
+							<el-popover placement="top-start" title="路径介绍" trigger="hover" :content="scope.row.remark">
-              prop="introduce"
-              label="路径介绍"
-              #default="scope"
-            >
-              <el-popover
-                placement="top-start"
-                title="路径介绍"
-                trigger="hover"
-                :content="scope.row.remark"
-              >
 								<template #reference>
 									<div>{{ scope.row.remark }}</div>
 								</template>
 							</el-popover>
 						</el-table-column>
 
-            <el-table-column
+						<el-table-column align="center" prop="organizationName" label="归属组织" />
-              align="center"
+						<el-table-column #default="scope" align="center" :width="150" prop="state" label="状态">
-              prop="organizationName"
+							<img :src="
-              label="归属组织"
-            />
-            <el-table-column
-              #default="scope"
-              align="center"
-              :width="150"
-              prop="state"
-              label="状态"
-            >
-              <img
-                :src="
 								scope.row.status === 0
 									? ongoing
 									: scope.row.status === 1
@@ -121,9 +81,7 @@
 										: scope.row.status === -1
 											? nostarted
 											: null
-                "
+							" style="width: 99px; height: 99px" />
-                style="width: 99px; height: 99px"
-              />
 						</el-table-column>
 					</el-table>
 				</div>
@@ -132,10 +90,7 @@
 			<!--      :src="{ 0: nostarted, 1: completed, 2: ongoing }[scope.row.status]"-->
 			<!-- 路径列表-->
 			<!-- 路径详情图 -->
-      <div
+			<div :style="{ display: showmapdetail ? 'flex' : 'none' }" class="mapdetail">
-        :style="{ display: showmapdetail ? 'flex' : 'none' }"
-        class="mapdetail"
-      >
 				<div v-for="(item, i) in detail?.rows" :key="i">
 					<img :src="useImage(`222_0${i + 2}.png`)" />
 				</div>
@@ -199,12 +154,15 @@ async function gofun({ routerId, name: routerName }) {
 			)}`
 		);
 }
-function toUnTask() {}
+function toUnTask() { }
 </script>
 <style lang="scss">
-.modal {
+#app div:nth-child(1) {
+	background: rgba(0, 0, 0, 0) !important;
 }
 
+.modal {}
+
 .modal:after {
 	content: "";
 }
@@ -220,6 +178,7 @@ function toUnTask() {}
 		width: 100%;
 		// flex: 1;
 		margin-top: 43px;
+
 		// background-color: pink;
 		.title {
 			display: flex;