提交

src/views/activity-record/detail-swiper.tsx

@@ -34,113 +34,118 @@ export default defineComponent({
 
     return () => (
       <>
-        <div class={styles.progItemList}>
-          <Swiper
-            class="topSwiper"
-            style={{
-              '--swiper-navigation-color': '#fff',
-              '--swiper-pagination-color': '#fff'
-            }}
-            modules={modules}
-            space-between={10}
-            pagination={true}
-            thumbs={{ swiper: thumbsSwiper.value }}>
-            {props.item.attachmentUrl.map((i: any, index: number) => (
-              <SwiperSlide class="slide">
-                <div
-                  class={styles.photo}
-                  onClick={() => {
-                    emit('showImageToas', {
-                      imagePreview: props.item.attachmentUrl,
-                      imageShow: true,
-                      startPosition: index
-                    });
-                    // forms.imagePreview = item.attachmentUrl;
-                    // forms.imageShow = true;
-                    // forms.startPosition = index;
-                  }}>
-                  {checkFile(i, 'image') ? (
-                    <Image src={i + '@base@tag=imgScale'} fit="cover" />
-                  ) : (
-                    <div class={styles.videoWErap}>
-                      <Image src={palyBtn} class={styles.palyBtn}></Image>
-                      <video
-                        style={{ backgroundColor: '#F8F8F8' }}
-                        poster={iconVideoDefault}
-                        src={i + '#t=1,4'}
-                      />
-                    </div>
-                  )}
-
-                  {props.item.attachmentUrl.length > 4 && index === 3 ? (
-                    <div class={styles.photoMore}>
-                      +{props.item.attachmentUrl.length - 4}
-                    </div>
-                  ) : (
-                    ''
-                  )}
-                </div>
-              </SwiperSlide>
-            ))}
-          </Swiper>
-          <div class={styles.thumbsWrap}>
-            <div
-              class={styles.thumbsMore}
-              onClick={() => {
-                emit('showImageToas', {
-                  imagePreview: props.item.attachmentUrl,
-                  imageShow: true,
-                  startPosition: 0
-                });
-              }}>
-              <p>全</p>
-              <p>部</p>
-
-              <Image class={styles.arrayIcon} src={arrayIcon}></Image>
-            </div>
+        {props.item.attachmentUrl.length > 0 ? (
+          <div class={styles.progItemList}>
             <Swiper
-              class="thumbs-swiper"
+              class="topSwiper"
+              style={{
+                '--swiper-navigation-color': '#fff',
+                '--swiper-pagination-color': '#fff'
+              }}
               modules={modules}
               space-between={10}
-              slides-per-view={4}
-              watch-slides-progress={true}
-              freeMode={true}
-              onSwiper={setThumbsSwiper}>
-              {props.item.attachmentUrl.map(
-                (i: any, index: number) =>
-                  index <= 3 && (
-                    <SwiperSlide class="slide">
-                      <div class={styles.photo}>
-                        {checkFile(i, 'image') ? (
-                          <Image
-                            src={i + '@base@tag=imgScale&w=120'}
-                            fit="cover"
-                          />
-                        ) : (
-                          <div class={styles.videoSmallWErap}>
-                            <Image src={palyBtn} class={styles.playBtn}></Image>
-                            <video
-                              style={{ backgroundColor: '#F8F8F8' }}
-                              poster={iconVideoDefault}
-                              src={i + '#t=1,4'}
-                            />
-                          </div>
-                        )}
+              pagination={true}
+              thumbs={{ swiper: thumbsSwiper.value }}>
+              {props.item.attachmentUrl.map((i: any, index: number) => (
+                <SwiperSlide class="slide">
+                  <div
+                    class={styles.photo}
+                    onClick={() => {
+                      emit('showImageToas', {
+                        imagePreview: props.item.attachmentUrl,
+                        imageShow: true,
+                        startPosition: index
+                      });
+                      // forms.imagePreview = item.attachmentUrl;
+                      // forms.imageShow = true;
+                      // forms.startPosition = index;
+                    }}>
+                    {checkFile(i, 'image') ? (
+                      <Image src={i + '@base@tag=imgScale'} fit="cover" />
+                    ) : (
+                      <div class={styles.videoWErap}>
+                        <Image src={palyBtn} class={styles.palyBtn}></Image>
+                        <video
+                          style={{ backgroundColor: '#F8F8F8' }}
+                          poster={iconVideoDefault}
+                          src={i + '#t=1,4'}
+                        />
+                      </div>
+                    )}
 
-                        {props.item.attachmentUrl.length > 4 && index === 3 ? (
-                          <div class={styles.photoMore}>
-                            +{props.item.attachmentUrl.length - 4}
-                          </div>
-                        ) : (
-                          ''
-                        )}
+                    {props.item.attachmentUrl.length > 4 && index === 3 ? (
+                      <div class={styles.photoMore}>
+                        +{props.item.attachmentUrl.length - 4}
                       </div>
-                    </SwiperSlide>
-                  )
-              )}
+                    ) : (
+                      ''
+                    )}
+                  </div>
+                </SwiperSlide>
+              ))}
             </Swiper>
+            <div class={styles.thumbsWrap}>
+              <div
+                class={styles.thumbsMore}
+                onClick={() => {
+                  emit('showImageToas', {
+                    imagePreview: props.item.attachmentUrl,
+                    imageShow: true,
+                    startPosition: 0
+                  });
+                }}>
+                <p>全</p>
+                <p>部</p>
+
+                <Image class={styles.arrayIcon} src={arrayIcon}></Image>
+              </div>
+              <Swiper
+                class="thumbs-swiper"
+                modules={modules}
+                space-between={10}
+                slides-per-view={4}
+                watch-slides-progress={true}
+                freeMode={true}
+                onSwiper={setThumbsSwiper}>
+                {props.item.attachmentUrl.map(
+                  (i: any, index: number) =>
+                    index <= 3 && (
+                      <SwiperSlide class="slide">
+                        <div class={styles.photo}>
+                          {checkFile(i, 'image') ? (
+                            <Image
+                              src={i + '@base@tag=imgScale&w=120'}
+                              fit="cover"
+                            />
+                          ) : (
+                            <div class={styles.videoSmallWErap}>
+                              <Image
+                                src={palyBtn}
+                                class={styles.playBtn}></Image>
+                              <video
+                                style={{ backgroundColor: '#F8F8F8' }}
+                                poster={iconVideoDefault}
+                                src={i + '#t=1,4'}
+                              />
+                            </div>
+                          )}
+
+                          {props.item.attachmentUrl.length > 4 &&
+                          index === 3 ? (
+                            <div class={styles.photoMore}>
+                              +{props.item.attachmentUrl.length - 4}
+                            </div>
+                          ) : (
+                            ''
+                          )}
+                        </div>
+                      </SwiperSlide>
+                    )
+                )}
+              </Swiper>
+            </div>
           </div>
-        </div>
+        ) : null}
       </>
     );
   }

src/views/activity-record/detail.module.less

@@ -2,6 +2,7 @@
   // height: 100vh;
   // overflow: hidden;
   background-color: #b7f3d4;
+
   .detailTop {
     background: url('./images/detailBG.png') no-repeat;
     background-size: 375px 346px;
@@ -28,7 +29,7 @@
       }
     }
     .wall {
-      height: 48px;
+      height: 68px;
     }
     .jiemuIcon {
       margin-top: 15px;
@@ -45,7 +46,7 @@
       margin-top: 11px;
       text-align: center;
       line-height: 29px;
-      font-weight: 600;
+      font-weight: 500;
       color: #ffffff;
       font-size: 14px;
       margin-bottom: 43px;
@@ -90,9 +91,10 @@
         line-height: 25px;
         text-align: center;
         margin-top: 12px;
+        font-weight: 600;
       }
       .headerTimes {
-        width: 186px;
+        width: 192px;
         height: 26px;
         background: linear-gradient(90deg, #edfff1 0%, #def9ff 100%);
         border-radius: 13px;
@@ -101,6 +103,7 @@
         line-height: 26px;
         font-weight: 600;
         color: #1b93ff;
+        font-size: 13px;
       }
     }
   }
@@ -140,8 +143,8 @@
           background-image: linear-gradient(270deg, #f2ffe6, #def9ff),
             linear-gradient(180deg, #bef6e9, #c1e3f7);
           width: 311px;
-          min-height: 151px;
-          margin: 15px auto 20px;
+          // min-height: 151px;
+          margin: 15px auto 16px;
           border-radius: 16px;
           z-index: 200;
           padding: 10px 10px 15px;
@@ -216,10 +219,12 @@
             .content {
               font-size: 14px;
               font-weight: 600;
+
               color: #131415;
               span {
                 color: #13a9ff;
                 margin-left: 12px;
+                white-space: nowrap;
               }
             }
           }
@@ -228,12 +233,18 @@
           min-height: 237px;
           width: 311px;
           margin: 0 auto 20px;
+          background-clip: padding-box;
+          border: 2px solid transparent;
+          background-clip: padding-box, border-box;
+          background-origin: padding-box, border-box;
           background-image: linear-gradient(270deg, #dcf3ff, #effae5),
             linear-gradient(180deg, #bef6e9, #c1e3f7);
           border-radius: 10px;
           overflow: hidden;
           .videoWErap {
             position: relative;
+            width: 308px;
+            height: 175px;
             .palyBtn {
               width: 46px !important;
               height: 46px !important;
@@ -274,30 +285,39 @@
               height: 4px;
               border-radius: 2px;
             }
+            .slide {
+              border-radius: 10px 10px 0 0;
+              overflow: hidden;
+            }
             .topSwiper {
-              width: 311px;
+              width: 308px;
               height: 175px;
 
               .van-image {
-                width: 311px;
-                height: 175px;
+                border-radius: 10px 10px 0 0;
+
+                overflow: hidden;
               }
               video {
-                width: 311px;
-                height: 175px;
+                border-radius: 10px 10px 0 0;
+
+                overflow: hidden;
               }
             }
 
             .thumbs-swiper {
               .slide {
-                width: 70px;
+                width: 74px;
                 height: 44px;
                 img {
                   display: block;
-
+                  width: 66px;
+                  height: 42px;
                   object-fit: cover !important;
                 }
                 video {
+                  width: 66px;
+                  height: 42px;
                 }
               }
             }
@@ -311,7 +331,6 @@
               .slide {
                 width: 74px;
                 height: 46px;
-                background: #ffffff;
                 border-radius: 4px;
                 overflow: hidden;
                 background-clip: padding-box;
@@ -326,7 +345,11 @@
                   );
 
                 &:not(.swiper-slide-thumb-active) {
-                  background-image: linear-gradient(225deg, #fff, #fff),
+                  background-image: linear-gradient(
+                      225deg,
+                      transparent,
+                      transparent
+                    ),
                     linear-gradient(225deg, transparent, transparent);
                 }
               }
@@ -516,9 +539,6 @@
     //     margin-left: 7px;
     //   }
 
-    :global {
-    }
-
     video {
       width: inherit;
       height: inherit;

src/views/activity-record/detail.tsx

@@ -190,7 +190,8 @@ export default defineComponent({
         html2canvas(container, {
           allowTaint: true,
           useCORS: true,
-          backgroundColor: null
+          backgroundColor: null,
+          foreignObjectRendering: true
         })
           .then(async canvas => {
             const url = canvas.toDataURL('image/png');
@@ -206,7 +207,7 @@ export default defineComponent({
     const showImageToas = (obj: any) => {
       forms.imagePreview = obj.imagePreview;
       forms.imageShow = obj.imageShow;
-      forms.startPosition = obj.index;
+      forms.startPosition = obj.startPosition;
       console.log(forms.imagePreview, 'showImageToas', obj);
     };
     const onShare = () => {
@@ -318,13 +319,15 @@ export default defineComponent({
         </MHeader> */}
         <div
           class={styles.detailTop}
-          style={{ 'padding-top': state.navBarHeight + 'px' }}>
+          style={{
+            '--bar-height': state.navBarHeight + 'px'
+          }}>
           {browser().isApp ? (
             <>
               {' '}
               <div
                 class={styles.fixWrap}
-                style={{ top: state.navBarHeight + 30 + 'px' }}>
+                style={{ top: state.navBarHeight + 20 + 'px' }}>
                 <div class={styles.fixWrapLeft}>
                   <Image
                     src={backIcon}
@@ -615,7 +618,7 @@ export default defineComponent({
                       : schoolIcon
                   }></Image>
                 <div class={styles.schoolName}>
-                  {forms.headerDetail?.cooperationOrganName || '武汉小学'}
+                  {forms.headerDetail?.cooperationOrganName || '--'}
                 </div>
                 <div class={styles.shareName}>{forms.headerDetail.name}</div>
                 <div class={styles.codeQr}>

src/views/activity-record/operation.tsx

@@ -706,7 +706,7 @@ export default defineComponent({
             <h2 class={styles.popupTitle}>删除节目</h2>
             <div class={styles.popupContent}>
               <p class={styles.tipContent}>
-                删除<span>《节目{forms.deleteIndex + 1}》</span>
+                删除<span>《节目{toChinesNum(forms.deleteIndex + 1)}》</span>
                 ，删除后内容不可恢复
               </p>
             </div>