封面更多

src/views/learningpath/LearningPath.vue

@@ -233,7 +233,7 @@
                       ? '2px solid rgba(78, 166, 255, 1)'
                       : '1px solid #C7CBD2',
                   'background-image': 'url(' + item.value.split(',')[0] + ')',
-                  display: index >= 5 ? 'none' : 'flex',
+                  display: index >= 3 ? 'none' : 'flex',
                 }"
                 style="background-size: 100% 100%"
               ></div>
@@ -370,7 +370,7 @@
               </div>
               <div
                 @click="showLearnBgMore"
-                v-if="imgData.length > 5"
+                v-if="imgData.length > 3"
                 class="learnBgItem learnBgMore"
               >
                 查看更多 <img src="../../assets/images/projectadd/go.png" />
@@ -1466,6 +1466,7 @@ export default {
       //   state.imgData = ;
       // }
     });
+    debugger
     const imgData = computed(() => store.state.router_pic);
     //添加权限
     watch(

src/views/projectcenter/ProjectAdd.vue

@@ -1,5 +1,5 @@
 <!---- 创建项目页面 --->
-<template>
+<template xmlns:display="http://www.w3.org/1999/xhtml">
   <div class="projectAdd">
     <div class="header">
       <span class="title"
@@ -73,6 +73,9 @@
                 overflow: hidden;
               "
                 v-for="(src, index) in projectPic"
+                :style="{
+                  display: index >= 3 ? 'none' : 'flex',
+                }"
                 :key="index"
                 @click="() => (projectInfo.picUrl = src.value)"
             >
@@ -87,6 +90,29 @@
                   alt="avatar"
               />
             </div>
+            <div
+                    @click="showLearnBgMore"
+                    v-if="projectPic.length > 3"
+                    style="
+                      width: 100px;
+                      height: 100px;
+                      padding-left: 15px;
+                      border-radius: 5px;
+                      cursor: pointer;
+                      position: relative;
+                      overflow: hidden;
+                      display: flex;
+                      align-items: center;
+                      justify-content: center;
+                      border: 1px solid #c7cbd2;
+                      font-size: 14px;
+                      font-weight: 400;
+                      color: #4ea6ff;
+                      line-height: 36px;
+                    "
+            >
+              查看更多 <img src="../../assets/images/projectadd/go.png"  alt=""/>
+            </div>
           </div>
         </div>
         <div class="name">
@@ -283,6 +309,48 @@
         </a-button>
       </div>
     </div>
+    <!-- 更多背景图 v-model:visible="learnBgMore"  -->
+    <a-modal
+            :closable="sh"
+            centered="true"
+            v-model:visible="learnBgMore"
+            :footer="null"
+            wrapClassName="learnBgMoreModal"
+            :z-index="9999"
+    >
+      <div class="main">
+        <div class="top">
+          <div class="topc">路径图背景</div>
+          <div @click="closeLearnBgMore">
+            <img
+                    style="width: 20px; height: 20px"
+                    src="../../assets/images/basicinfo/close.png"
+            />
+          </div>
+        </div>
+        <div class="imagesBox">
+          <div
+                  @click="chooseImg2(item)"
+                  v-for="item in projectPic"
+                  :key="item.code"
+                  class="learnBgItem"
+                  :style="{
+              border:
+                pathBgId === item.code
+                  ? '2px solid rgba(78, 166, 255, 1)'
+                  : '1px solid #ccc',
+              'background-image': 'url(' + item.value.split(',')[0] + ')',
+            }"
+          >
+            <!-- <img class="im" :src="item.source" /> -->
+          </div>
+        </div>
+        <div class="btn">
+          <button class="samtn btn1" @click="closeLearnBgMore">取消</button>
+          <button class="samtn btn2" @click="closeLearnBgMore">确定</button>
+        </div>
+      </div>
+    </a-modal>
   </div>
 </template>
 <script>
@@ -336,10 +404,10 @@ export default {
       ptojectType: "",
       changeCondition: false,
       clickNum: 0,
-      timeRange: []
+      timeRange: [],
+      learnBgMore: false
     });
 
-
     // 封面图选择
     const handleChangeSelect = (value) => {
       console.log(value);
@@ -534,6 +602,14 @@ export default {
       return current && current < dayjs().subtract(1, 'days').endOf('day')
     };
 
+    //显示更多路径背景弹窗
+    const showLearnBgMore = () => {
+      state.learnBgMore = true;
+    };
+    //关闭更多路径背景弹窗
+    const closeLearnBgMore = () => {
+      state.learnBgMore = false;
+    };
     function calendarChange(date, dateStr, partial) {
       state.datePartial = partial
     }
@@ -550,6 +626,8 @@ export default {
       backPage,
       templateScroll,
       handleChangeSelect,
+      showLearnBgMore,
+      closeLearnBgMore
     };
   },
 };
@@ -870,7 +948,36 @@ export default {
     }
   }
 }
+.imagesBox {
+  display: flex;
+  //  justify-content: space-between;
+  flex-wrap: wrap;
+  padding-left: 51px;
+  padding-right: 39px;
+  margin-top: 20px;
+  height: 350px;
+  overflow-y: auto;
 
+  .learnBgItem {
+    border-radius: 8px;
+    width: 136px;
+    height: 106px;
+    background-size: 100%;
+    background-repeat: no-repeat;
+    margin-bottom: 20px;
+    margin-right: 10px;
+  }
+}
+.btn1 {
+  background-color: #fff;
+  color: #4ea6ff;
+}
+
+.btn2 {
+  background-color: #4ea6ff;
+  color: #fff;
+  margin-left: 16px;
+}
 .treeDropdown {
   // width: 240px !important;
   // border-radius: 5px;