Przeglądaj źródła

登录框优化

shish 1 rok temu
rodzic
commit
e1982abdd0

+ 1 - 1
hdApp/src/admin/billing/remind.vue

@@ -49,7 +49,7 @@
       toRecharge(){
         let that = this
         uni.showLoading({mask:true})
-        let remark = '开负数订单退款,单号'+this.orderInfo.orderSn
+        let remark = '退款,开负数订单,单号'+this.orderInfo.orderSn
         toManRecharge({amount:this.orderInfo.actPrice,remark:remark,payWay:0,customId:this.orderInfo.customId}).then(res=>{
           uni.hideLoading()
           if(res.code == 1){

+ 232 - 56
mallApp/src/components/wangCg.vue

@@ -1,9 +1,45 @@
 <template>
-  <view class="model" v-if="loginStyle == 0">
-      <view style="color:white;font-size:36upx;margin-top:300upx;margin-bottom:30upx;">首次使用,请先登录</view>
-      <view class="freeApply" @click="login">手机号一键登录</view>
+  <view class="login-overlay" v-if="loginStyle == 0">
+    <view class="login-modal">
+      <!-- 背景装饰 -->
+      <view class="bg-decoration">
+        <view class="circle circle-1"></view>
+        <view class="circle circle-2"></view>
+      </view>
+      
+      <!-- 主要内容 -->
+      <view class="content-wrapper">
+        <!-- 图标区域 -->
+        <view class="icon-section">
+          <view class="login-icon">
+            <text class="icon-text">🔐</text>
+          </view>
+        </view>
+        
+        <!-- 文字区域 -->
+        <view class="text-section">
+          <view class="title">请先登录</view>
+          <view class="subtitle">登录后享受更多功能</view>
+        </view>
+        
+        <!-- 按钮区域 -->
+        <view class="button-section">
+          <view class="login-btn" @click="login">
+            <text class="btn-text">手机号一键登录</text>
+          </view>
+        </view>
+        
+        <!-- 说明文字 -->
+        <view class="notice-section">
+          <text class="notice-text">为了更好提供服务,需要获取您的手机号,如不接受,你可以拒绝使用,点右上角关闭此小程序</text>
+        </view>
+
+
+      </view>
+    </view>
   </view>
 </template>
+
 <script>
 export default {
   props: {
@@ -26,7 +62,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.model {
+.login-overlay {
   position: fixed;
   z-index: 9999;
   top: 0;
@@ -34,64 +70,204 @@ export default {
   width: 100vw;
   height: 100vh;
   background: rgba(0, 0, 0, 0.6);
-  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.login-modal {
+  position: relative;
+  width: 600upx;
+  max-width: 90vw;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border-radius: 24upx;
+  box-shadow: 0 20upx 60upx rgba(0, 0, 0, 0.3);
+  overflow: hidden;
+  animation: modalShow 0.3s ease-out;
+}
+
+@keyframes modalShow {
+  from {
+    opacity: 0;
+    transform: scale(0.8) translateY(50upx);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+// 背景装饰
+.bg-decoration {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
   overflow: hidden;
+  
+  .circle {
+    position: absolute;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.1);
+    animation: float 4s ease-in-out infinite;
+    
+    &.circle-1 {
+      width: 80upx;
+      height: 80upx;
+      top: 20%;
+      right: 10%;
+      animation-delay: 0s;
+    }
+    
+    &.circle-2 {
+      width: 60upx;
+      height: 60upx;
+      bottom: 30%;
+      left: 10%;
+      animation-delay: 2s;
+    }
+  }
+}
+
+@keyframes float {
+  0%, 100% {
+    transform: translateY(0px) rotate(0deg);
+  }
+  50% {
+    transform: translateY(-10px) rotate(90deg);
+  }
+}
+
+.content-wrapper {
+  position: relative;
+  z-index: 2;
   text-align: center;
-  & > .noData_img {
-    width: 318upx;
-    height: 318upx;
-    margin: 100upx auto 0;
+  padding: 60upx 40upx;
+}
+
+// 图标区域
+.icon-section {
+  margin-bottom: 40upx;
+  
+  .login-icon {
+    width: 100upx;
+    height: 100upx;
+    margin: 0 auto;
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    backdrop-filter: blur(10px);
+    border: 2upx solid rgba(255, 255, 255, 0.3);
+    box-shadow: 0 8upx 32upx rgba(0, 0, 0, 0.1);
+    
+    .icon-text {
+      font-size: 50upx;
+    }
   }
-  & > .no_data_text {
-    font-size: 32upx;
-    color: #ffffff;
-    text-align: center;
-    margin: 50upx 0;
-  }
-  & > .freeApply {
-    width: 320upx;
-    height: 110upx;
-    line-height:110upx;
-    background: linear-gradient(90deg, #3385ff, #33b0ff);
-    border-radius:20upx;
-    margin: 0upx auto 0 auto;
-    font-size: 34upx;
-    font-weight:bold;
+}
+
+// 文字区域
+.text-section {
+  margin-bottom: 50upx;
+  
+  .title {
+    font-size: 36upx;
+    font-weight: 600;
     color: #ffffff;
+    margin-bottom: 16upx;
+    text-shadow: 0 2upx 4upx rgba(0, 0, 0, 0.3);
+  }
+  
+  .subtitle {
+    font-size: 28upx;
+    color: rgba(255, 255, 255, 0.9);
+    line-height: 1.4;
+    text-shadow: 0 1upx 2upx rgba(0, 0, 0, 0.2);
+  }
+}
+
+// 按钮区域
+.button-section {
+  margin-bottom: 30upx;
+  
+  .login-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 88upx;
+    background: linear-gradient(135deg, #ff6b6b, #ee5a24);
+    border-radius: 44upx;
+    box-shadow: 0 8upx 24upx rgba(238, 90, 36, 0.4);
+    transition: all 0.3s ease;
+    border: none;
+    cursor: pointer;
+    
+    &:active {
+      transform: translateY(2upx);
+      box-shadow: 0 4upx 12upx rgba(238, 90, 36, 0.4);
+    }
+    
+    .btn-icon {
+      font-size: 32upx;
+      margin-right: 12upx;
+    }
+    
+    .btn-text {
+      font-size: 32upx;
+      font-weight: 600;
+      color: #ffffff;
+      letter-spacing: 1upx;
+    }
+  }
+}
+
+// 说明文字区域
+.notice-section {
+  .notice-text {
+    font-size: 24upx;
+    color: rgba(255, 255, 255, 0.8);
+    line-height: 1.5;
     text-align: center;
+    text-shadow: 0 1upx 2upx rgba(0, 0, 0, 0.2);
+  }
+}
+
+// 响应式适配
+@media (max-width: 750upx) {
+  .login-modal {
+    width: 520upx;
+  }
+  
+  .content-wrapper {
+    padding: 50upx 30upx;
+  }
+  
+  .icon-section .login-icon {
+    width: 80upx;
+    height: 80upx;
+    
+    .icon-text {
+      font-size: 40upx;
+    }
+  }
+  
+  .text-section .title {
+    font-size: 32upx;
+  }
+  
+  .text-section .subtitle {
+    font-size: 26upx;
   }
-  &>.experience{
-    margin-top: 40upx;
-    color: #fff;
-    font-size: 30upx;
-  }
-  &>.experFrame{
-    margin-top: 50upx;
-    height: 50upx;
-    &>view{
-      margin: 0 auto;
-      &>.experInput{
-        height: 70upx;
-        width: 250upx;
-        display: inline-block;
-        vertical-align: middle;
-        border-radius: 8upx;
-        background-color: #fff;
-        border: 1px solid #ccc;
-        color: #666;
-        padding-left: 20upx;
-        box-sizing: border-box;
-        text-align: left;
-      }
-      &>text{
-        display: inline-block;
-        line-height: 70upx;
-        padding: 0 20upx;
-        background-color: #3385FF;
-        vertical-align: middle;
-        font-size: 30upx;
-        margin-left: 20upx;
-      }
+  
+  .button-section .login-btn {
+    height: 80upx;
+    
+    .btn-text {
+      font-size: 30upx;
     }
   }
 }

+ 2 - 2
mallApp/src/pages/home/recent.vue

@@ -9,10 +9,10 @@
         <view class="ghs_list_page flex-col" v-if="!$util.isEmpty(list.data)">
           <view style="background-color:white;margin-bottom:20upx;display: flex;flex-direction: row;justify-content: space-around;">
             <button class="admin-button-com mini-btn blue top-button" @click="">修改密码</button>
-            <button class="admin-button-com mini-btn blue top-button" @click="">改进建议</button>
+            <button class="admin-button-com mini-btn blue top-button" @click="">修改手机号</button>
             <button class="admin-button-com mini-btn blue top-button" @click="">我的地址</button>
             <button class="admin-button-com mini-btn blue top-button" @click="">采购统计</button>
-            <button class="admin-button-com mini-btn blue top-button" @click="logout()">退出登录</button>
+            <button class="admin-button-com mini-btn blue top-button" @click="logout()">退出</button>
           </view>
           <view class="ghs_list_area flex-col justify-end">
               <view class="ghs_box flex-col justify-end" v-for="(item, index) in list.data" :key="item.id">