ross活动页面调整

pages/_template/ross/activity/challenge/index.vue

@@ -63,6 +63,7 @@
             <div>1、参赛作品排名评奖以最终点赞量数据为准，截止时间为2023年2月05日17点59分；</div>
             <div>2、2023年2月20日起颁发奖品，期间以抖音私信、短信发送和电话的形式通知获奖用户领取奖励；</div>
             <div>3、2023年2月28日前抖音私信无回复者视为自动放弃奖项；</div>
+            <div>4、活动期间(2月5日前)删除视频、被平台下架、不能正常展示，则视为无效；</div>
           </dd>
           <dt><div>参与规则</div></dt>
           <dd class="rules">
@@ -72,7 +73,7 @@
           </dd>
           <dt><div>注意事项</div></dt>
           <dd class="message">
-            <div>1、参赛对象——全国从事美容行业的门店；</div>
+            <div>1、参赛对象——美业项目公司或机构门店；</div>
             <div>2、一到三等奖项以最高点赞量的视频作为统计，每个ID限领一次；</div>
             <div>3、活动最终解释权归主办方所有；</div>
             <div>4、如有疑问，可咨询官方客服微信：cmdjt01；</div>

pages/_template/ross/index.vue

@@ -7,20 +7,25 @@
       :finished-text="total ? '没有更多了' : ''"
       @load="fetchClubList"
     >
-      <div class="page-top flex flex-col justify-center items-center"></div>
+      <div class="page-top flex flex-col justify-center items-center" @click="toActivity"></div>
       <div class="page-content">
-        <div class="navbar flex items-center flex-col" :style="{ top: offsetTop }">
-          <nuxt-link :to="routePrefix + '/approve/device'" class="link flex items-center flex-col">
-            <span class="icon icon-device"></span>
-            <span class="text">设备认证</span>
-          </nuxt-link>
-          <nuxt-link
-            :to="routePrefix + '/approve/personnel/operate'"
-            class="link flex items-center flex-col md:mt-6 mt-4"
-          >
-            <span class="icon icon-doctor"></span>
-            <span class="text">体疗师认证</span>
+        <div class="navbar-container" :style="{ top: offsetTop }">
+          <nuxt-link :to="routePrefix + '/activity/challenge'">
+            <div class="activity-entry"></div>
           </nuxt-link>
+          <div class="navbar flex items-center flex-col">
+            <nuxt-link :to="routePrefix + '/approve/device'" class="link flex items-center flex-col">
+              <span class="icon icon-device"></span>
+              <span class="text">设备认证</span>
+            </nuxt-link>
+            <nuxt-link
+              :to="routePrefix + '/approve/personnel/operate'"
+              class="link flex items-center flex-col md:mt-6 mt-4"
+            >
+              <span class="icon icon-doctor"></span>
+              <span class="text">体疗师认证</span>
+            </nuxt-link>
+          </div>
         </div>
 
         <div class="filter">
@@ -104,8 +109,8 @@ export default {
   computed: {
     ...mapGetters(['screenWidth', 'isPc']),
     offsetTop() {
-      if (this.scrollTop <= window.innerHeight / 2) return '240px'
-      return 240 + this.scrollTop - window.innerHeight / 2 + 'px'
+      if (this.scrollTop <= window.innerHeight / 2) return '10px'
+      return 10 + this.scrollTop - window.innerHeight / 2 + 'px'
     },
   },
   mounted() {
@@ -114,9 +119,15 @@ export default {
     })
   },
   beforeDestroy() {
-    window.removeEventListener('scroll', () => {})
+    window.removeEventListener('scroll', () => {
+      this.scrollTop = document.documentElement.scrollTop
+    })
   },
   methods: {
+    // 抖音挑战赛
+    toActivity() {
+      this.$router.push(`${this.routePrefix}/activity/challenge`)
+    },
     // 从缓存中获取数据
     initFromCache(cacheData) {
       const data = objectCover(this, cacheData)
@@ -165,9 +176,11 @@ export default {
       background-color: #fff;
       .page-top {
         height: 530px;
-        background-image: fetch('pc-banner-club');
+        // background-image: fetch('pc-banner-club');
+        background-image: url(~assets/theme-images/ross/pc-banner-club.png);
         background-size: cover;
         background-position: center;
+        cursor: pointer;
       }
       .page-content {
         position: relative;
@@ -207,63 +220,78 @@ export default {
           }
         }
 
-        .navbar {
+        .navbar-container {
           position: absolute;
           top: 240px;
-          right: -168px;
-          width: 120px;
-          border-radius: 16px;
-          background: #fff;
-          box-shadow: 0px 6px 20px rgba(40, 40, 40, 0.1);
-          padding: 24px 0;
-          box-sizing: border-box;
-          z-index: 2;
-          .link {
-            &:hover {
-              .icon {
-                &.icon-device {
-                  background: url(~assets/theme-images/ross/pc-nav-entry-device-active.png) no-repeat center center,
-                    linear-gradient(180deg, #ffba63 0%, #f3920d 100%);
-                  background-size: 48px, 100%;
+          right: -180px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          flex-direction: column;
+
+          .activity-entry {
+            width: 168px;
+            height: 168px;
+            background: url(~assets/theme-images/ross/pc-icon-entry.png) no-repeat center;
+            background-size: 168px;
+            margin-bottom: 16px;
+          }
+
+          .navbar {
+            width: 120px;
+            border-radius: 16px;
+            background: #fff;
+            box-shadow: 0px 6px 20px rgba(40, 40, 40, 0.1);
+            padding: 24px 0;
+            box-sizing: border-box;
+            z-index: 2;
+            .link {
+              &:hover {
+                .icon {
+                  &.icon-device {
+                    background: url(~assets/theme-images/ross/pc-nav-entry-device-active.png) no-repeat center center,
+                      linear-gradient(180deg, #ffba63 0%, #f3920d 100%);
+                    background-size: 48px, 100%;
+                  }
+                  &.icon-doctor {
+                    background: url(~assets/theme-images/ross/pc-nav-entry-doctor-active.png) no-repeat center center,
+                      linear-gradient(180deg, #ffba63 0%, #f3920d 100%);
+                    background-size: 48px, 100%;
+                  }
                 }
-                &.icon-doctor {
-                  background: url(~assets/theme-images/ross/pc-nav-entry-doctor-active.png) no-repeat center center,
-                    linear-gradient(180deg, #ffba63 0%, #f3920d 100%);
-                  background-size: 48px, 100%;
+                .text {
+                  color: fetch('color');
                 }
               }
-              .text {
-                color: fetch('color');
+
+              span {
+                display: block;
               }
-            }
 
-            span {
-              display: block;
-            }
+              .icon {
+                width: 72px;
+                height: 72px;
+                // background: linear-gradient(180deg, #ffba63 0%, #f3920d 100%);
+                background-color: #f6f6f7;
+                border-radius: 12px;
 
-            .icon {
-              width: 72px;
-              height: 72px;
-              // background: linear-gradient(180deg, #ffba63 0%, #f3920d 100%);
-              background-color: #f6f6f7;
-              border-radius: 12px;
+                &.icon-device {
+                  background: url(~assets/theme-images/ross/pc-nav-entry-device.png) no-repeat center center #f6f6f7;
+                  background-size: 48px;
+                }
 
-              &.icon-device {
-                background: url(~assets/theme-images/ross/pc-nav-entry-device.png) no-repeat center center #f6f6f7;
-                background-size: 48px;
+                &.icon-doctor {
+                  background: url(~assets/theme-images/ross/pc-nav-entry-doctor.png) no-repeat center center #f6f6f7;
+                  background-size: 48px;
+                }
               }
 
-              &.icon-doctor {
-                background: url(~assets/theme-images/ross/pc-nav-entry-doctor.png) no-repeat center center #f6f6f7;
-                background-size: 48px;
+              .text {
+                font-size: 16px;
+                color: #404040;
+                margin-top: 8px;
               }
             }
-
-            .text {
-              font-size: 16px;
-              color: #404040;
-              margin-top: 8px;
-            }
           }
         }
 
@@ -366,7 +394,8 @@ export default {
     @include useTheme() {
       .page-top {
         height: 100vw;
-        background: fetch('h5-banner-club');
+        // background: fetch('h5-banner-club');
+        background-image: url(~assets/theme-images/ross/h5-banner-club.png);
         background-size: 100vw 100vw !important;
 
         .logo {
@@ -397,61 +426,77 @@ export default {
           padding: 6.4vw 3.2vw 12.8vw;
         }
 
-        .navbar {
+        .navbar-container {
           position: fixed;
           top: 50% !important;
           right: 3.2vw;
           left: unset !important;
-          width: 14vw;
-          border-radius: 1.6vw;
-          background: #fff;
-          box-shadow: 0px 0.6vw 2vw rgba(40, 40, 40, 0.1);
-          padding: 2.8vw 0;
-          box-sizing: border-box;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          flex-direction: column;
           z-index: 2;
-          span {
-            display: block;
+
+          .activity-entry {
+            width: 23.6vw;
+            height: 23.6vw;
+            background: url(~assets/theme-images/ross/pc-icon-entry.png) no-repeat center;
+            background-size: 23.6vw;
+            margin-bottom: 1.6vw;
           }
 
-          .icon {
-            position: relative;
-            width: 7.2vw;
-            height: 7.2vw;
-            border-radius: 1.2vw;
-            background: linear-gradient(180deg, #ffba63 0%, #f3920d 100%);
+          .navbar {
+            width: 14vw;
+            border-radius: 1.6vw;
+            background: #fff;
+            box-shadow: 0px 0.6vw 2vw rgba(40, 40, 40, 0.1);
+            padding: 2.8vw 0;
+            box-sizing: border-box;
 
-            &.icon-device,
-            &.icon-doctor {
-              &::after {
-                content: '';
-                display: block;
-                width: 4.8vw;
-                height: 4.8vw;
-                position: absolute;
-                left: 50%;
-                top: 50%;
-                transform: translate(-50%, -50%);
-                background-size: 4.8vw !important;
-              }
+            span {
+              display: block;
             }
 
-            &.icon-device {
-              &::after {
-                background: url(~assets/theme-images/ross/pc-nav-entry-device-active.png) no-repeat center;
+            .icon {
+              position: relative;
+              width: 7.2vw;
+              height: 7.2vw;
+              border-radius: 1.2vw;
+              background: linear-gradient(180deg, #ffba63 0%, #f3920d 100%);
+
+              &.icon-device,
+              &.icon-doctor {
+                &::after {
+                  content: '';
+                  display: block;
+                  width: 4.8vw;
+                  height: 4.8vw;
+                  position: absolute;
+                  left: 50%;
+                  top: 50%;
+                  transform: translate(-50%, -50%);
+                  background-size: 4.8vw !important;
+                }
               }
-            }
 
-            &.icon-doctor {
-              &::after {
-                background: url(~assets/theme-images/ross/pc-nav-entry-doctor-active.png) no-repeat center;
+              &.icon-device {
+                &::after {
+                  background: url(~assets/theme-images/ross/pc-nav-entry-device-active.png) no-repeat center;
+                }
+              }
+
+              &.icon-doctor {
+                &::after {
+                  background: url(~assets/theme-images/ross/pc-nav-entry-doctor-active.png) no-repeat center;
+                }
               }
             }
-          }
 
-          .text {
-            font-size: 2.4vw;
-            color: #f3920d;
-            margin-top: 1.2vw;
+            .text {
+              font-size: 2.4vw;
+              color: #f3920d;
+              margin-top: 1.2vw;
+            }
           }
         }
       }