代码提交

pages/login/guid.vue

@@ -0,0 +1,125 @@
+<!--
+    @name: 登录引导页
+    @author: kahu4
+    @date: 2023-11-08 16:20
+    @description：index
+    @update: 2023-11-08 16:20
+-->
+<script setup>
+import { useRouter } from "@/hooks/useRouter";
+import { loginMethods } from "@/pages/login/index.data";
+
+const {goBack, push} = useRouter()
+
+function toLogin(loginMethod) {
+  if (loginMethod.type === 0) {
+    // 微信登录
+    console.log('微信登录')
+  } else {
+    push({url: '/pages/login/index', animationType: 'slide-in-right'}, {data: {...loginMethod}})
+  }
+}
+</script>
+
+<template>
+  <view class="login-guid">
+    <uv-navbar
+        :fixed="false"
+        title="登录"
+        left-arrow
+        @leftClick="goBack"
+    />
+    <view class="main-box flex flex-jc__center">
+      <image
+          class="logo"
+          src="@/static/icon/logo.png"
+      />
+    </view>
+
+    <view class="button-group">
+      <template
+          v-for="(loginMethod) in loginMethods"
+          :key="loginMethod.type"
+      >
+        <view
+            :class="`button animation-button ${loginMethod.classNames.join(' ')}`"
+            @click="toLogin(loginMethod)"
+        >
+          <image
+              class="icon"
+              :src="loginMethod.icon"
+          />
+          {{ loginMethod.label }}
+        </view>
+      </template>
+
+    </view>
+
+    <view class="tips-row">
+      为了给您提供更好的服务 我们需要您的授权哦~
+    </view>
+  </view>
+
+</template>
+
+<style
+    scoped
+    lang="scss"
+>
+.login-guid {
+  width: 100%;
+  height: 100vh;
+  background: $white-color;
+
+  .main-box {
+    width: 100%;
+    top: 300rpx;
+    position: absolute;
+
+    .logo {
+      width: 255rpx;
+      height: 96rpx;
+    }
+  }
+
+  .button-group {
+    @include usePadding(50, 0);
+    width: 100%;
+    font-size: 28rpx;
+    position: absolute;
+    bottom: 20%;
+
+    .button {
+      width: 100%;
+      margin-bottom: 30rpx;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 88rpx;
+
+      .icon {
+        width: 40rpx;
+        height: 40rpx;
+        margin-right: 20rpx;
+
+      }
+    }
+
+    .white-button {
+      background: $white-color;
+      border: 1rpx solid #333;
+      color: #333;
+    }
+  }
+
+  .tips-row {
+    position: absolute;
+    bottom: 5%;
+    left: 0;
+    width: 100%;
+    color: $tips-color;
+    font-size: 24rpx;
+    text-align: center;
+  }
+}
+</style>