v1.7.5版本移动端页面绘制

components/SimpleOssUpload/index.vue

@@ -34,12 +34,6 @@
         </div>
       </template>
     </div>
-    <!-- <template v-if="videoDialog">
-      <div class="video-dialog">
-        <video :src="currentVideoUrl"></video>
-      </div>
-      <div class="mask"></div>
-    </template> -->
     <SimpleVideoPlayer
       :videoSrc="currentVideoUrl"
       ref="videoPlayer"
@@ -65,7 +59,7 @@ export default {
       videoDialog: true,
       currentVideoUrl: '',
       ossUpload: null,
-      fileList: [{ percentage: 90, name: 'a8b25605e0db0c9be8362c38d4.mp4' }],
+      fileList: [],
     }
   },
   methods: {
@@ -145,35 +139,6 @@ export default {
       cursor: pointer;
     }
 
-    .video-dialog {
-      position: fixed;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      width: 800px;
-      height: 600px;
-      z-index: 11;
-      background: #fff;
-      border-radius: 4px;
-
-      video {
-        display: block;
-        width: 100%;
-        height: 100%;
-      }
-    }
-
-    .mask {
-      position: fixed;
-      left: 0;
-      top: 0;
-      width: 100vw;
-      height: 100vh;
-      background: #000;
-      opacity: 0.5;
-      z-index: 10;
-    }
-
     .file-list {
       line-height: initial;
       margin-top: 16px;
@@ -220,4 +185,70 @@ export default {
     }
   }
 }
+
+@media screen and (max-width: 768px) {
+  .simple-oss-upload {
+    .button {
+      width: 24vw;
+      height: 8.8vw;
+      text-align: center;
+      line-height: 8.8vw;
+      background: #f3920d;
+      color: #fff;
+      border-radius: 0.4vw;
+      font-size: 3.2vw;
+      cursor: pointer;
+    }
+
+    .file-list {
+      line-height: initial;
+      margin-top: 3.2vw;
+      .file {
+        position: relative;
+        margin-bottom: 7.2vw;
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+
+        .name {
+          font-size: 3.2vw;
+          margin-bottom: 3.2vw;
+          margin-right: 22vw;
+          color: #666;
+        }
+        .control {
+          position: absolute;
+          top: 0.2vw;
+          right: 0;
+          span {
+            font-size: 3.2vw;
+            cursor: pointer;
+
+            &.play {
+              color: #1890ff;
+              margin-right: 2.8vw;
+            }
+
+            &.remove {
+              color: #f3920d;
+            }
+          }
+        }
+        .progress {
+          padding-right: 22vw;
+          position: relative;
+          .status {
+            position: absolute;
+            right: 0;
+            top: 50%;
+            transform: translateY(-53%);
+            font-size: 3.2vw;
+            color: #f3920d;
+          }
+        }
+      }
+    }
+  }
+}
 </style>

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

@@ -110,4 +110,69 @@ export default {
     }
   }
 }
+
+@media screen and (max-width: 768px) {
+  .page {
+    padding-bottom: 10vw;
+    .page-top {
+      width: 100%;
+      height: 100vw;
+      background-position: center;
+      background: #ddd;
+    }
+
+    .page-content {
+      width: 85.6vw;
+      margin: 0 auto;
+      margin-top: 3.2vw;
+
+      .content {
+        min-height: 116.3vw;
+        background: #fff5e8;
+      }
+
+      .entry {
+        .title {
+          font-size: 4.2vw;
+          text-align: center;
+          font-weight: bold;
+          color: #282828;
+          margin: 7.2vw 0 4.3vw;
+        }
+
+        .cover {
+          position: relative;
+          width: 85.6vw;
+          height: 34vw;
+          margin: 0 auto;
+          background: pink;
+          cursor: pointer;
+
+          .status {
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 12.8vw;
+            height: 5.6vw;
+            line-height: 5.6vw;
+            border-radius: 0.8vw 0 0.8vw 0;
+            color: #fff;
+            text-align: center;
+            font-size: 3vw;
+
+            &.wait {
+              background: #f94b4b;
+            }
+            &.start {
+              background: #f3920d;
+            }
+            &.end {
+              background: rgba(0, 0, 0, 0.3);
+            }
+          }
+        }
+      }
+    }
+  }
+}
 </style>

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

@@ -367,4 +367,230 @@ export default {
     }
   }
 }
+
+@media screen and (max-width: 768px) {
+  .page {
+    background: #fff;
+    .page-top {
+      width: 100%;
+      height: 100vw;
+      background-position: center;
+      background: #ddd;
+    }
+
+    .page-content {
+      width: 93.6vw;
+      margin: 0 auto;
+      padding-bottom: 6.5vw;
+
+      .control {
+        display: flex;
+        align-items: center;
+        padding: 6.4vw 0 7.2vw;
+        .publish {
+          display: none;
+        }
+
+        .search {
+          flex: 1;
+          flex-shrink: 0;
+          .el-input {
+            height: 9.6vw;
+            font-size: 3.4vw;
+            .el-input__icon {
+              font-size: 5.6vw;
+              line-height: 9.6vw;
+              margin-left: 12px;
+            }
+
+            ::v-deep {
+              & > .el-input__inner {
+                height: 9.6vw;
+                padding-left: 55px;
+              }
+            }
+          }
+        }
+      }
+
+      .video-content {
+        .title {
+          font-size: 3.4vw;
+          color: #282828;
+          font-weight: bold;
+          margin: 0 0 4vw;
+        }
+
+        .video-list {
+          &::after {
+            content: '';
+            display: block;
+            clear: both;
+          }
+
+          .video {
+            float: left;
+            width: 45.6vw;
+            height: 56.4vw;
+            background: #fff;
+            box-sizing: border-box;
+            border: 0.1vw solid #efefef;
+            margin: 0 2.4vw 2.4vw 0;
+            transition: all 0.4s;
+
+            &:nth-child(2n) {
+              margin-right: 0;
+            }
+
+            .cover {
+              width: 100%;
+              height: 31.3vw;
+              position: relative;
+
+              img {
+                display: block;
+                width: 100%;
+                height: 100%;
+              }
+
+              &::after {
+                content: '';
+                display: block;
+                position: absolute;
+                left: 0;
+                top: 0;
+                z-index: 1;
+                width: 100%;
+                height: 100%;
+                background: #000;
+                opacity: 0;
+                transition: opacity 0.2s;
+              }
+
+              .play {
+                position: absolute;
+                z-index: 2;
+                width: 48px;
+                height: 48px;
+                background: url(~assets/theme-images/common/pc-icon-play.png)
+                  no-repeat center;
+                background-size: 48px;
+                left: 50%;
+                top: 50%;
+                transform: translate(-50%, -50%);
+                opacity: 0;
+                transition: opacity 0.2s;
+                cursor: pointer;
+              }
+
+              .name {
+                color: #fff;
+                font-size: 3vw;
+                text-align: center;
+                width: 100%;
+                line-height: 6.4vw;
+                @include ellipsis(1);
+                box-sizing: border-box;
+                padding: 0 1.2vw;
+                position: absolute;
+                left: 0;
+                bottom: 0;
+                background: rgba(0, 0, 0, 0.5);
+              }
+
+              .rank {
+                position: absolute;
+                left: 2.4vw;
+                top: 0;
+                width: 7.2vw;
+                height: 7.5vw;
+                background: url(~assets/theme-images/ross/h5-rank.png) no-repeat
+                  center;
+                background-size: 7.2vw;
+                text-align: center;
+                box-sizing: border-box;
+                padding-top: 1.9vw;
+                font-weight: bold;
+                color: #fff;
+                font-size: 2.1vw;
+
+                &.rank-01 {
+                  background-image: url(~assets/theme-images/ross/h5-rank-01.png);
+                }
+                &.rank-02 {
+                  background-image: url(~assets/theme-images/ross/h5-rank-02.png);
+                }
+                &.rank-03 {
+                  background-image: url(~assets/theme-images/ross/h5-rank-03.png);
+                }
+              }
+            }
+
+            .info {
+              padding: 2.4vw;
+              .club-name {
+                font-size: 3.4vw;
+                color: #282828;
+                @include ellipsis(1);
+              }
+              .mobile {
+                font-size: 3vw;
+                color: #666;
+                margin-top: 1.6vw;
+              }
+            }
+
+            .foot {
+              color: #999999;
+              font-size: 2.6vw;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+              margin: 0 2.4vw;
+              border-top: 0.1vw solid #efefef;
+              padding-top: 2.3vw;
+
+              .date,
+              .praise,
+              .pv {
+                flex-shrink: 0;
+                line-height: 3.6vw;
+              }
+
+              .praise,
+              .pv {
+                position: relative;
+                padding-left: 4.4vw;
+
+                &::after {
+                  content: '';
+                  display: block;
+                  width: 3.6vw;
+                  height: 3.6vw;
+                  background: url(~assets/theme-images/common/icon-praise.png)
+                    no-repeat center;
+                  background-size: 3.6vw;
+                  position: absolute;
+                  left: 0;
+                  top: 50%;
+                  transform: translateY(-50%);
+                }
+              }
+
+              .pv {
+                &::after {
+                  background-image: url(~assets/theme-images/common/icon-pv.png);
+                }
+              }
+
+              .date {
+                margin-right: 5.5vw;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
 </style>

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

@@ -7,10 +7,8 @@
     <div class="page-content">
       <div class="title">温馨提示：</div>
       <div class="content">
-        视频发布成功后，您可去首页查看您的视频排名，同时，平台会在1-2个工作日内将您的视频上传至抖音平台，您
-        可在1-2个工日后，通过抖音平台搜索“ROSS”抖音账号或“视频标题”找到该视频，再将该视频通过抖音分享
-        方式分享给更多的好友来帮您点赞获得排名。如1-2工日后，您在抖音平台未找到自己发布的视频，可电话咨询客
-        服，电话：<span>0755-85885625</span>
+        视频发布成功后，您可去首页查看您的视频排名，同时，平台会在1-2个工作日内将您的视频上传至抖音平台。上传成功后，平台会以短信的形式，将抖音口令发送到您的手机上，您可复制该抖音口令在抖音平台打开视频或直接在抖音平台搜索“ROSS”抖音账号或“视频标题”找到自己的视频，再将视频通过抖音分享方式分享给更多的好友来帮您点赞获得排名。如1-2工日后，您还未收到抖音口令或在抖音平台找不到自己发布的视频，可致电客服咨询，电话：
+        <a href="tel:0755-85885625">0755-85885625</a>
       </div>
     </div>
   </div>
@@ -57,7 +55,48 @@ export default {
       color: #999999;
       text-align: justify;
 
-      span {
+      a {
+        color: #f3920d;
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .page-top {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    padding: 20.4vw 0 12.6vw;
+    .icon-submit-succsss {
+      width: 12vw;
+      height: 12vw;
+      background: url(~assets/theme-images/common/pc-icon-submit-success.png)
+        no-repeat center;
+      background-size: 12vw;
+    }
+
+    .tip {
+      font-size: 4.2vw;
+      font-weight: bold;
+      color: #1890ff;
+    }
+  }
+
+  .page-content {
+    width: 88.4vw;
+    margin: 0 auto;
+    font-size: 3vw;
+    line-height: 2;
+    .title {
+      color: #666666;
+      margin-bottom: 2.4vw;
+    }
+    .content {
+      color: #999999;
+      text-align: justify;
+
+      a {
         color: #f3920d;
       }
     }

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

@@ -159,4 +159,57 @@ export default {
     }
   }
 }
+
+@media screen and (max-width: 768px) {
+  ::v-deep {
+    .el-form-item__label {
+      font-size: 3.4vw;
+      line-height: 4.6vw;
+    }
+  }
+
+  .page {
+    background: #fff;
+    padding: 8vw 0;
+    .page-content {
+      width: 85.6vw;
+      margin: 0 auto;
+
+      .tip {
+        margin: 20vw 0 12vw;
+        font-size: 3vw;
+        line-height: 1.8;
+        .title {
+          color: #666666;
+          margin-bottom: 8px;
+        }
+        .content {
+          color: #999999;
+        }
+      }
+
+      .control {
+        .button {
+          width: 85.6vw;
+          height: 12vw;
+          margin: 0 auto;
+          cursor: pointer;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          font-size: 3.6vw;
+          &.cancel {
+            border: 0.1vw solid #c2c2c2;
+            color: #666666;
+          }
+          &.publish {
+            background: #f3920d;
+            color: #fff;
+            margin-top: 3.2vw;
+          }
+        }
+      }
+    }
+  }
+}
 </style>