feat: perf style

miniprogram/pages/index/index.js

@@ -15,7 +15,8 @@ Page({
     userInfo: {},
     hasUserInfo: false,
     isloading: true,
-    isOldVersion: false
+    isOldVersion: false,
+    isShowBottom:true
   },
   getUserInfoBtn: function (info) {
     wx.showLoading({
@@ -105,7 +106,8 @@ Page({
         console.log('res jump', res)
         // 通过 eventChannel 向被打开页面传送数据
         res.eventChannel.emit('setHomePageData', {
-          userInfo: thisBack.data.userInfo
+          userInfo: thisBack.data.userInfo,
+          isShowBottom: thisBack.data.isShowBottom
         })
       }
     })
@@ -123,7 +125,8 @@ Page({
       userName: authorPageConfig.userName,
       designPlaceholder: authorPageConfig.designPlaceholder,
       isOldVersion: authorPageConfig.isOldVersion,
-      joinTitle: authorPageConfig.joinTitle
+      joinTitle: authorPageConfig.joinTitle,
+      isShowBottom: authorPageConfig.isShowBottom
     })
     // this.jumpTohome()
     // 页面创建时执行

miniprogram/pages/index/index.wxml

 <view class="container">
-  <view class="title">{{title}}</view>
+  <view class="title"></view>
+  <view class="text-magic" data-word="{{title}}">
+    {{title}}
+    <view class="white">
+    </view>
+  </view>
   <view class="user-image-box">
     <view wx:if="{{isOldVersion}}">
       <image class="user-image" src="{{userImageUrl}}"></image>
@@ -9,16 +14,15 @@
       <button class="avatar-wrapper" style="background: transparent;" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
         <image class="avatar" class="user-image" src="{{userImageUrl}}"></image>
       </button>
-      <view style="display: flex;width:100%">
-        <view style="width: 30%;text-align: right;">
+      <view style="display: flex;width:100%;text-align: center;">
+        <!-- <view style="width: 30%;text-align: right;">
           {{userPrefix}}
-        </view>
-        <view style="width: 50%;text-align: center;">
-          <input type="nickname" class="weui-input" value="{{userName}}" bindinput="bindKeyInput"
-          placeholder-style="color: #07c160" 
-          style="width: 100%;border-bottom: 1px solid #ffffff;" placeholder="{{designPlaceholder}}" />
+        </view> -->
+        <view style="width:100%;text-align: center;">
+          <input type="nickname" class="weui-input" value="{{userName}}" bindinput="bindKeyInput" placeholder-style="color: #fff" style="width: 100%;border-bottom: 1px solid #ffffff;" placeholder="{{designPlaceholder}}" />
         </view>
       </view>
+      <!-- <l-avatar style="height: 300px;color:#ffffff" text="{{userName}}" placement="bottom" src="{{userImageUrl}}" /> -->
     </view>
 
   </view>

miniprogram/pages/index/index.wxss

 /**index.wxss**/
 
 page {
-  padding-top: 54rpx;
-  background: #05b3ec;
-  color: #fff;
+  /* background: #00416A;  */
+  background: -webkit-linear-gradient(to top, #E4E5E6, #00416A);  
+  background: linear-gradient(to bottom, rgb(119, 119, 119), #076585);
   /* fallback for old browsers */
-  background: -webkit-linear-gradient(to top, #fff, #076585);
+  /* background: -webkit-linear-gradient(to top, #fff, #076585); */
   /* Chrome 10-25, Safari 5.1-6 */
-  background: linear-gradient(to top, #fff, #076585);
+  /* background: linear-gradient(to top, rgb(255, 255, 255), #076585); */
   /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
 
+  background-image: url('https://yongma16.xyz/staticFile/common/img/scene.png');
+  background-repeat: no-repeat;
+  background-size: cover;
   padding-bottom: 60rpx;
 }
-
+.l-avatar-text{
+  color:#ffffff !important;
+}
 
 .login-container{
   position: absolute;
@@ -46,10 +51,12 @@ page {
   width: 100px;
   height: 100px;
   border-radius: 50%;
+  border: 2px solid #fff;
 }
 
 .title {
   font-family: PingFang SC;
+  margin-top:50px;
   font-weight: 500;
   font-size: 22px;
   margin-bottom: 40rpx;
@@ -142,7 +149,7 @@ page {
   text-align: center;
   font-size: 12px;
   font-weight: bold;
-  color: #076585;
+  color: #ffffff;
 }
 
 
@@ -179,19 +186,19 @@ page {
   left: 0%;
   top: 0%;
   animation: rotate-one 1.15s linear infinite;
-  border-bottom: 3px solid #ffffff;
+  border-bottom: 3px solid #fff;
 }
 .loader-child:nth-of-type(2) {
   right: 0%;
   top: 0%;
   animation: rotate-two 1.15s linear infinite;
-  border-right: 3px solid #ffffff;
+  border-right: 3px solid #fff;
 }
 .loader-child:nth-of-type(3) {
   right: 0%;
   bottom: 0%;
   animation: rotate-three 1.15s linear infinite;
-  border-top: 3px solid #ffffff;
+  border-top: 3px solid #fff;
 }
 @keyframes rotate-one {
   0% {
@@ -218,4 +225,118 @@ page {
   100% {
     transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
   }
-}
\ No newline at end of file
+}
+
+/* 底层 */
+.text-magic{
+	position: relative;
+	transform:scale(2.4);
+  font-size: 10px;
+  text-align: center;
+	color:#fff;
+}
+/* 扫描线条黑色 顶层*/
+.white{
+	position: relative;
+	left:0px;
+  width:100%;
+  text-align: center;
+	height: 1px;
+	background: rgba(255,255,255,.8);
+	z-index: 4;
+	animation: whiteMove 2s ease-out infinite;
+}
+@keyframes whiteMove{
+	8%{
+		top:-10px;
+	}
+	14%{
+		top:-5px;
+  }
+  18%{
+    top:-2px;
+  }
+	20%{
+		top:-8px;
+	}
+	32%{
+		top:-3px;
+  }
+  60%{
+  top:-5px;
+  }
+  80%{
+    top:-8px;
+    }
+	99%{
+		top:-1px;
+	}
+}
+/* 红色阴影左移0.5px 第二层*/
+.text-magic::before{
+	position: absolute;
+	/* 文字内容传递 */
+  content: attr(data-word);
+  width: 100%;
+	top:0;
+	left:1px;
+	height:36px;
+	color:rgba(255,255,255,.9);
+	z-index: 6;
+	/* 羽化 */
+	filter: contrast(200%);
+	text-shadow: 1px 0 0 rgba(255,255,255,.3);
+	overflow: hidden;
+	animation: redShadow 2s ease-in infinite;
+}
+@keyframes redShadow{
+	20%{
+		height: 32px;
+	}
+	60%{
+		height:6px;
+	}
+	100%{
+		height: 42px;
+	}
+}
+/* 左移错位-3px 第三层*/
+.text-magic::after {
+    content: attr(data-word);
+    position: absolute;
+    top: 0;
+    left: -0.5px;
+    height: 36px;
+    color: rgba(255, 255, 255, 0.5);
+    overflow: hidden;
+    z-index: 3;
+    /* background: rgba(0, 0, 0, 0.9); */
+    animation: redHeight 2s ease-out infinite;
+    filter: contrast(200%);
+    text-shadow: -1px 0 0 rgba(255,255,255,.3);
+    mix-blend-mode: darken;
+}
+
+@keyframes redHeight {
+    20% {
+        height: 42px;
+    }
+    35% {
+        height: 12px;
+    }
+    50% {
+        height: 40px;
+    }
+    60% {
+        height: 20px;
+    }
+    70% {
+        height: 34px;
+    }
+    80% {
+        height: 22px;
+    }
+    100% {
+        height: 0px;
+    }
+}