修改

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

@@ -24,26 +24,61 @@
         <!-- <div class="title">活动介绍</div> -->
       </div>
       <div class="activity-content">
-        <div class="title">赛事活动介绍</div>
+        <div class="title"></div>
         <dl>
           <dt><div>活动介绍</div></dt>
-          <dd>采美平台和云进通在跨境物流领域达成战略合作，为广大采美客户提供轻松无忧的跨境体验！</dd>
+          <dd class="desc">
+            <div>
+              “提高免疫力，我有黑科技”ROSS首届抖音任务挑战赛火热来袭，抖音发布符合任务的优质视频，ROSS认证通系统报名参加！
+            </div>
+            <div>
+              欢迎各位美业精英参与抖音话题&nbsp;<b>#ross发烧疗法</b>，分享你提高免疫力的秘籍，线上PK赢——50w+本地KOL网红探店种草！
+            </div>
+          </dd>
           <dt><div>活动时间</div></dt>
-          <dd>2022.10月10日——2022.12月31日</dd>
+          <dd>
+            <div>参赛时间：2022.12.21-2023.01.18</div>
+            <div>领奖时间：2023.02.08-2023.02.15</div>
+          </dd>
           <dt><div>活动奖励</div></dt>
-          <dd>a、一等奖1000元；b、二等奖500元；c、三等奖300元</dd>
-          <dt><div>参与方式</div></dt>
           <dd>
-            第一步：申请认证和上传相关资料可以登录ROSS官方网站或品牌授权的正品认证通入口申请；第二步：通过手机号码、机构
-            名称，注册账号；第三步：通过上传机构门头照片、营业地址等相关信息，进行机构认证；第四步：通过填写设备
-            相关名称、图片、相关购买凭证，进行设备认证。完成后登录上传视频且抖音分享成功即可！
+            <div>一等奖：视频点赞NO.1，50w+本地KOL网红探店种草；</div>
+            <div>二等奖：视频点赞NO.2，30w+本地KOL网红探店种草；</div>
+            <div>三等奖：视频点赞NO.3，10w+本地KOL网红探店种草；</div>
+            <div>参与奖：成功发布三个带ROSS相关素材的视频，2000元导胶一瓶；</div>
+            <div>
+              &lt;点击链接获取素材：<a href="https://zp.caimei365.com/12/ross/docs/1046"
+                >https://zp.caimei365.com/12/ross/docs/1046</a
+              >
+              &gt;
+            </div>
+          </dd>
+          <dt><div>参与方式</div></dt>
+          <dd class="join">
+            <div>
+              第一步：通过抖音个人账号分享原创视频添加话题 #ross发烧疗法，@ROSS柔斯 @采美365（以上条件缺一不可）；
+            </div>
+            <div>第二步：进入ROSS任务挑战赛界面，点击报名参赛并上传视频链接；</div>
           </dd>
           <dt><div>评奖规则</div></dt>
-          <dd>用户登录商城注册成功后，按在规定的时间内完成点赞数最高的评定等级</dd>
-          <dt><div>奖项公布</div></dt>
-          <dd>用户在规定时间内完成后10个工作日将公布排名以及颁发奖品</dd>
+          <dd class="p-rules">
+            <div>1、参赛作品排名评奖以最终点赞量数据为准，截止时间为2023年1月18日17点59分；</div>
+            <div>2、2023年2月8日起颁发奖品，期间以抖音私信、短信发送和电话的形式通知获奖用户领取奖励；</div>
+            <div>3、2023年2月15日前抖音私信无回复者视为自动放弃奖项；</div>
+          </dd>
+          <dt><div>参与规则</div></dt>
+          <dd class="rules">
+            <div>1、作品要求必须原创，画质清晰、内容积极向上，视频时长控制在90s内；</div>
+            <div>2、发布视频带话题“ross发烧疗法”并@ROSS柔斯和@采美365网；</div>
+            <div>3、视频内容不违反抖音平台规则；</div>
+          </dd>
           <dt><div>注意事项</div></dt>
-          <dd>一个抖音账号只能参与一次</dd>
+          <dd class="message">
+            <div>1、参赛对象——全国从事美容行业的门店；</div>
+            <div>2、一到三等奖项以最高点赞量的视频作为统计，每个ID限领一次；</div>
+            <div>3、活动最终解释权归主办方所有；</div>
+            <div>4、如有疑问，可咨询官方客服微信：cmdjt01；</div>
+          </dd>
         </dl>
       </div>
 
@@ -454,7 +489,8 @@ export default {
 
   .page {
     padding-bottom: 120px;
-    background: #fff;
+    background: url(~assets/theme-images/ross/pc_activity_page_bg.png);
+    background-size:cover;
     .page-top {
       width: 100%;
       height: 530px;
@@ -494,11 +530,11 @@ export default {
         .title {
           font-size: 16px;
           font-weight: bold;
-          color: #282828;
+          color: #FFFFFF;
         }
         .more {
           font-size: 14px;
-          color: #999;
+          color: #FFFFFF;
           cursor: pointer;
 
           &:hover {
@@ -512,7 +548,7 @@ export default {
 
         .title {
           font-size: 40px;
-          color: #333;
+          color: #FFF;
           height: 80px;
           box-sizing: border-box;
           text-align: center;
@@ -524,7 +560,7 @@ export default {
         }
 
         dl {
-          width: 872px;
+          width: 890px;
           margin: 0 auto;
           dt {
             font-size: 30px;
@@ -534,17 +570,54 @@ export default {
             div {
               line-height: 24px;
               display: inline-block;
-              border-bottom: 5px;
-              border-bottom-color: #ffd7c5;
-              border-bottom-style: solid;
+              color:#FFFFFF;
+              position:relative;
+              &:before{
+                content:'';
+                width:117px;
+                height:5px;
+                background: linear-gradient(83deg, #DF1EFC 0%, #14C2ED 50%, #1430FF 100%);
+                position:absolute;
+                bottom:-5px;
+                left:3px;
+              }
             }
           }
           dd {
             font-size: 16px;
-            color: #666666;
+            color: #ffffff;
             text-align: center;
             line-height: 32px;
             margin-bottom: 64px;
+
+            a {
+              color: #f3920d;
+            }
+
+            &.desc {
+              text-align: center;
+            }
+
+            &.join {
+              width: 830px;
+              text-align: left;
+              margin: 0 auto 64px;
+            }
+            &.p-rules {
+              width: 690px;
+              text-align: left;
+              margin: 0 auto 64px;
+            }
+            &.rules {
+              width: 536px;
+              text-align: left;
+              margin: 0 auto 64px;
+            }
+            &.message {
+              width: 476px;
+              text-align: left;
+              margin: 0 auto 64px;
+            }
           }
         }
       }
@@ -594,6 +667,8 @@ export default {
 
   .page {
     padding-bottom: 10vw;
+    background: url(~assets/theme-images/ross/h5_activity_page_bg.png);
+    background-size:cover;
     .page-top {
       width: 100%;
       height: 100vw;
@@ -634,11 +709,11 @@ export default {
         .title {
           font-size: 16px;
           font-weight: bold;
-          color: #282828;
+          color: #fff;
         }
         .more {
           font-size: 14px;
-          color: #999;
+          color: #FFFFFF;
           cursor: pointer;
 
           &:hover {
@@ -653,7 +728,7 @@ export default {
 
         .title {
           font-size: 5vw;
-          color: #333;
+          color: #FFF;
           height: 9vw;
           box-sizing: border-box;
           text-align: center;
@@ -673,17 +748,46 @@ export default {
             div {
               line-height: 3.2vw;
               display: inline-block;
-              border-bottom: 0.8vw;
-              border-bottom-color: #ffd7c5;
-              border-bottom-style: solid;
+              color:#FFFFFF;
+              position:relative;
+              &:before{
+                content:'';
+                width:18.2vw;
+                height:0.8vw;
+                background: linear-gradient(83deg, #DF1EFC 0%, #14C2ED 50%, #1430FF 100%);
+                position:absolute;
+                bottom:-1vw;
+                left:0.5vw;
+              }
             }
           }
           dd {
             font-size: 3.4vw;
-            color: #666666;
+            color: #FFF;
             text-align: center;
             line-height: 5.6vw;
             margin-bottom: 8.8vw;
+
+            a {
+              color: #f3920d;
+            }
+
+            &.desc {
+              text-align: center;
+            }
+
+            &.join {
+              text-align: left;
+            }
+            &.p-rules {
+              text-align: left;
+            }
+            &.rules {
+              text-align: left;
+            }
+            &.message {
+              text-align: left;
+            }
           }
         }
       }