思维网格单独填了备注得显示在上面

src/components/pages/Grid.vue

@@ -1,10 +1,26 @@
 <template>
   <div class="pb_content g_body">
     <div>
-      <el-image class="coin coin1" :src="require('../../assets/grid/coin1.png')" fit="cover"></el-image>
-      <el-image class="coin coin2" :src="require('../../assets/grid/coin2.png')" fit="cover"></el-image>
-      <el-image class="coin coin3" :src="require('../../assets/grid/coin3.png')" fit="cover"></el-image>
-      <el-image class="coin coin4" :src="require('../../assets/grid/coin4.png')" fit="cover"></el-image>
+      <el-image
+        class="coin coin1"
+        :src="require('../../assets/grid/coin1.png')"
+        fit="cover"
+      ></el-image>
+      <el-image
+        class="coin coin2"
+        :src="require('../../assets/grid/coin2.png')"
+        fit="cover"
+      ></el-image>
+      <el-image
+        class="coin coin3"
+        :src="require('../../assets/grid/coin3.png')"
+        fit="cover"
+      ></el-image>
+      <el-image
+        class="coin coin4"
+        :src="require('../../assets/grid/coin4.png')"
+        fit="cover"
+      ></el-image>
     </div>
     <div class="grid_member">
       <!-- <div class="member_imgbox">
@@ -18,7 +34,9 @@
       </div>-->
       <el-button type="text" @click="dialogVisible2 = true">邀请成员</el-button>
       <!-- <el-button type="text">成员</el-button> -->
-      <el-button type="text" v-if="RoomInfo.userid == userid" @click="dismiss">解散房间</el-button>
+      <el-button type="text" v-if="RoomInfo.userid == userid" @click="dismiss"
+        >解散房间</el-button
+      >
     </div>
     <draggable
       element="div"
@@ -29,7 +47,7 @@
       :move="checkMove"
     >
       <div
-        v-for="(item,index) in data"
+        v-for="(item, index) in data"
         :key="index"
         class="g_box"
         @mouseover="pIndex = index"
@@ -40,34 +58,74 @@
         @dragend="handleDragEnd($event, index)"
       >
         <div
-          :class="{'left-popover':index<3,'right-popover':index==3,'top-popover':index>3,'visibleO':pIndex === index && item && (item.video || item.photo)}"
+          :class="{
+            'left-popover': index < 3,
+            'right-popover': index == 3,
+            'top-popover': index > 3,
+            visibleO: pIndex === index && item && (item.video || item.photo),
+          }"
         >
           <div class="pChild" @click="check(index)">
-            <el-image :src="require('../../assets/grid/upload.png')" fit="cover"></el-image>
+            <el-image
+              :src="require('../../assets/grid/upload.png')"
+              fit="cover"
+            ></el-image>
             <span>修改</span>
           </div>
           <div class="pChild" @click="deleteGrid(index)">
-            <el-image :src="require('../../assets/grid/deleteT.png')" fit="cover"></el-image>
+            <el-image
+              :src="require('../../assets/grid/deleteT.png')"
+              fit="cover"
+            ></el-image>
             <span>删除</span>
           </div>
-          <div class="pChild" @click="check(index,2)">
-            <el-image :src="require('../../assets/grid/edit.png')" fit="cover"></el-image>
+          <div class="pChild" @click="check(index, 2)">
+            <el-image
+              :src="require('../../assets/grid/edit.png')"
+              fit="cover"
+            ></el-image>
             <span>添加备注</span>
           </div>
         </div>
+        <div class="rrrrbox" v-if="item && item.remarks && !item.photo && !item.video" @click="check(index, 3)">
+          <div class="Rbox" v-for="(x, y) in item.remarks" :key="y">
+            <div v-if="x.remarks != ''" style="display: flex">
+              <el-image
+                class="Rportal"
+                :src="require('../../assets/grid/portal.png')"
+                fit="cover"
+              ></el-image>
+              <div class="RContent">
+                <div>{{ x.username }}</div>
+                <div>{{ x.remarks }}</div>
+              </div>
+            </div>
+          </div>
+        </div>
         <div
-          v-if="item && item.remarks"
-          :class="{'remark-right-popover':index>11 && index!=15,'remark-left-popover':index==15,'remark-bottom-popover':index<12,'visibleO':pIndex === index && item && item.remarks}"
+          v-else-if="item && item.remarks"
+          :class="{
+            'remark-right-popover': index > 11 && index != 15,
+            'remark-left-popover': index == 15,
+            'remark-bottom-popover': index < 12,
+            visibleO: pIndex === index && item && item.remarks,
+          }"
         >
-          <div class="Rbox" v-for="(x,y) in item.remarks" :key="y">
-            <div v-if="x.remarks!=''" style="display:flex">
-              <el-image class="Rportal" :src="require('../../assets/grid/portal.png')" fit="cover"></el-image>
+          <div class="Rbox" v-for="(x, y) in item.remarks" :key="y">
+            <div v-if="x.remarks != ''" style="display: flex">
+              <el-image
+                class="Rportal"
+                :src="require('../../assets/grid/portal.png')"
+                fit="cover"
+              ></el-image>
               <div class="RContent">
-                <div>{{x.username}}</div>
-                <div>{{x.remarks}}</div>
+                <div>{{ x.username }}</div>
+                <div>{{ x.remarks }}</div>
               </div>
             </div>
-            <div v-else-if="x.remarks==''&& y==0">{{x.username}}暂无备注</div>
+            <div v-else-if="x.remarks == '' && y == 0">
+              {{ x.username }}暂无备注
+            </div>
           </div>
         </div>
         <el-image
@@ -83,14 +141,14 @@
           ref="videoPlayer"
           :playsinline="true"
           :options="item.video"
-          style="width: 85%;"
+          style="width: 85%"
         ></video-player>
         <el-image
           v-else
           class="add_img"
           :src="require('../../assets/grid/add.png')"
           fit="cover"
-          @click="check(index,3)"
+          @click="check(index, 3)"
         ></el-image>
       </div>
     </draggable>
@@ -107,12 +165,16 @@
       </div>
       <div>
         <div class="upload_box" v-show="!file.userid || file.userid == userid">
-          <el-image class="list_img" :src="require('../../assets/grid/list.png')" fit="cover"></el-image>
+          <el-image
+            class="list_img"
+            :src="require('../../assets/grid/list.png')"
+            fit="cover"
+          ></el-image>
           <div class="upload_content">
             <div
               @click="addEvent($event)"
-              @mouseover="file.photo ? deleteVisible1 = true:''"
-              @mouseleave="file.photo ? deleteVisible1 = false:''"
+              @mouseover="file.photo ? (deleteVisible1 = true) : ''"
+              @mouseleave="file.photo ? (deleteVisible1 = false) : ''"
             >
               <el-image
                 class="delete_img"
@@ -123,7 +185,11 @@
               ></el-image>
               <el-image
                 class="upload_img"
-                :src="file.photo ? file.photo : require('../../assets/grid/image.png')"
+                :src="
+                  file.photo
+                    ? file.photo
+                    : require('../../assets/grid/image.png')
+                "
                 fit="cover"
               ></el-image>
               <input
@@ -135,10 +201,10 @@
               />
             </div>
             <div
-              style="margin-left: 20px;"
+              style="margin-left: 20px"
               @click="addEvent($event)"
-              @mouseover="file.video ? deleteVisible2 = true:''"
-              @mouseleave="file.video ? deleteVisible2 = false:''"
+              @mouseover="file.video ? (deleteVisible2 = true) : ''"
+              @mouseleave="file.video ? (deleteVisible2 = false) : ''"
             >
               <el-image
                 class="delete_img"
@@ -149,7 +215,11 @@
               ></el-image>
               <el-image
                 class="upload_img"
-                :src="file.video ? require('../../assets/grid/videoH.png') : require('../../assets/grid/video.png')"
+                :src="
+                  file.video
+                    ? require('../../assets/grid/videoH.png')
+                    : require('../../assets/grid/video.png')
+                "
                 fit="cover"
               ></el-image>
               <input
@@ -175,7 +245,9 @@
         </div>
       </div>
       <span slot="footer" class="dialog-footer">
-        <el-button class="close" @click="addGrid()" type="primary">确定</el-button>
+        <el-button class="close" @click="addGrid()" type="primary"
+          >确定</el-button
+        >
       </span>
     </el-dialog>
     <el-dialog
@@ -191,7 +263,9 @@
       </div>
       <div>
         <div class="invite_box">
-          <div class="invite_title" ref="inviteT">{{userinfo ? this.userinfo.name: "用户"}}邀请您参加思维网格</div>
+          <div class="invite_title" ref="inviteT">
+            {{ userinfo ? this.userinfo.name : "用户" }}邀请您参加思维网格
+          </div>
           <div class="line"></div>
           <div class="invite_link">
             <div ref="invite1">复制链接加入房间：</div>
@@ -199,9 +273,11 @@
           </div>
           <div class="invite_num" ref="invite3">
             房间号：
-            <span>{{RoomInfo.num}}</span>
+            <span>{{ RoomInfo.num }}</span>
+          </div>
+          <div class="invite_num" ref="invite4">
+            复制房间号信息，打开思维网格输入即可加入。
           </div>
-          <div class="invite_num" ref="invite4">复制房间号信息，打开思维网格输入即可加入。</div>
         </div>
       </div>
       <span slot="footer" class="dialog-footer">
@@ -210,7 +286,8 @@
           @click="copy"
           type="primary"
           :data-clipboard-text="copyText"
-        >一键复制信息</el-button>
+          >一键复制信息</el-button
+        >
       </span>
     </el-dialog>
     <el-dialog
@@ -226,11 +303,20 @@
       </div>
       <div class="addRoom_box">
         <div>
-          <el-input v-model="goNum" placeholder="请输入要加入的房间号"></el-input>
-          <div class="room_b">备注：输入房间号点击加入房间或点击创建房间直接创建房间</div>
+          <el-input
+            v-model="goNum"
+            placeholder="请输入要加入的房间号"
+          ></el-input>
+          <div class="room_b">
+            备注：输入房间号点击加入房间或点击创建房间直接创建房间
+          </div>
           <div class="room_btn">
-            <el-button class="roomBtn" type="primary" @click="goRoom(goNum)">加入房间</el-button>
-            <el-button class="roomBtn" type="primary" @click="checkNum">创建房间</el-button>
+            <el-button class="roomBtn" type="primary" @click="goRoom(goNum)"
+              >加入房间</el-button
+            >
+            <el-button class="roomBtn" type="primary" @click="checkNum"
+              >创建房间</el-button
+            >
           </div>
         </div>
       </div>
@@ -244,7 +330,7 @@
           :text-inside="true"
           :stroke-width="20"
           :percentage="progress"
-          style="width:80%"
+          style="width: 80%"
         ></el-progress>
       </div>
     </div>
@@ -514,7 +600,7 @@ export default {
     },
     addGrid() {
       if (!this.file.userid || this.file.userid == this.userid) {
-        if (!this.file.video && !this.file.photo && this.remarks == '') {
+        if (!this.file.video && !this.file.photo && this.remarks == "") {
           this.$message.error("至少上传一个视频、一张图片或者备注");
           return;
         }
@@ -523,7 +609,7 @@ export default {
         }
         if (this.file.photo) {
           this.data[this.gIndex].photo = this.file.photo;
-        } else if(this.file.video){
+        } else if (this.file.video) {
           // this.playerOptions.sources[0].src = ""
           var video = JSON.parse(JSON.stringify(this.playerOptions));
           video.sources[0].src = this.file.video;
@@ -748,7 +834,6 @@ export default {
             // this.data = JSON.parse(res.data[0][0].data);
             // this.dialogVisible3 = false;
             // this.dialogVisible2 = true;
-            debugger
             this.getMindNetwork(res.data[0][0].id, this.userinfo.userid);
             // this.data.splice(0,1)
             // this.updateRoomData()
@@ -802,7 +887,9 @@ export default {
             // this.data = JSON.parse(res.data[0][0].data);
             // this.dialogVisible3 = false;
             // this.dialogVisible2 = true;
+
             this.getMindNetwork(res.data[0][0].id, this.userinfo.userid);
+
             // this.timer = setInterval(() => {
             //   this.selectRoom2(uid);
             // }, 5000);
@@ -887,7 +974,7 @@ export default {
       };
       return _data;
     },
-    mindInfo2(id, type, content, navid, userid, roomid, moveIndex,moveData) {
+    mindInfo2(id, type, content, navid, userid, roomid, moveIndex, moveData) {
       var _data = {
         "us.mindNetwork": [
           {
@@ -1521,4 +1608,16 @@ export default {
   opacity: 0;
   visibility: hidden;
 }
+
+.rrrrbox {
+  width: 95%;
+  height: 95%;
+  background: #fff;
+  padding: 10px 20px;
+  box-sizing: border-box;
+  border-radius: 5px;
+  position: absolute;
+  z-index: 999;
+  overflow: auto;
+}
 </style>