[更新]基础框架,登录流程

pages/shortVideo/index.wxss

@@ -0,0 +1,123 @@
+
+/**
+ *  Web唐明明
+ *  匆匆数载恍如梦，岁月迢迢华发增。
+ *  碌碌无为枉半生，一朝惊醒万事空。
+ */
+
+
+ page{
+    /* background: #0e0c1a; */
+}
+
+.videoSwiper{
+    width: 100%;
+    height: 80%;
+    background: #eee;
+}
+
+.videos-content{
+    position: relative;
+    height: 100vh;
+}
+
+/* 视频信息 */
+.video-info{
+    position: absolute;
+    bottom: 50rpx;
+    left: 30rpx;
+    width: calc(100% - 218rpx);
+}
+
+.video-user,
+.video-title{
+    color: white;
+    text-shadow: 0 3rpx 3rpx rgba(0, 0, 0, .3);
+}
+
+.video-user{
+    font-weight: bold;
+    padding-bottom: 10rpx;
+    font-size: 38rpx;
+}
+
+.video-title{
+    font-size: 28rpx;
+    line-height: 40rpx;
+}
+
+/* 视频工具栏 */
+.video-tool{
+    position: absolute;
+    right: 30rpx;
+    bottom: 50rpx;
+}
+
+.video-tool-item{
+    margin-top: 40rpx;
+    text-align: center;
+}
+
+.video-tool-item:first-child{
+    margin-top: 0;
+}
+
+.video-tool-cover{
+    width: 98rpx;
+    height: 98rpx;
+    border-radius: 50%;
+    vertical-align: top;
+    border:solid 4rpx rgba(255, 255, 255, .2);
+    box-sizing: border-box;
+}
+
+.video-tool-icon{
+    width: 48rpx;
+    vertical-align: top;
+}
+
+.video-tool-number{
+    font-size: 26rpx;
+    line-height: 50rpx;
+    color: white;
+}
+
+/* 黑胶唱片 */
+.video-tool-vinyl{
+    width: 98rpx;
+    height: 98rpx;
+    position: relative;
+}
+
+.video-tool-vinyl.rotate{
+    animation: rotate 10s linear infinite;
+}
+
+@keyframes rotate{
+    0%{
+        transform: rotate(0deg);
+    }
+    100%{
+        transform: rotate(360deg);
+    }
+}
+
+.video-tool-vinyl-cover,
+.video-tool-vinyl-back{
+    position: absolute;
+}
+
+.video-tool-vinyl-back{
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+
+.video-tool-vinyl-cover{
+    width: 50%;
+    height: 50%;
+    left: 25%;
+    top: 25%;
+    border-radius: 50%;
+}