deepChartVueApp/pages/start/select/select.vue

<template>
  <view class="login-container">
    <!-- 顶部标题 -->
    <view class="title-section">
      <text class="main-title">DeepChart</text>
    </view>
    <view class="subtitle-section">
      <text class="subtitle">您的股市随身顾问</text>
    </view>

    <!-- 手机卡片样式 -->
    <view class="phone-card"> </view>

    <!-- 登录注册按钮 -->
    <view class="button-group">
      <button class="login-button" @click="toLogin">登录</button>
      <button class="register-button" @click="toRegistration">注册</button>
    </view>

    <footerBar class="static-footer" :type="type"></footerBar>

  </view>
</template>

<script setup>


import footerBar from '../../../components/footerBar-cn'
import { ref, reactive, toRefs, watch } from 'vue'

const type = ref('member')




function toRegistration() {
  uni.navigateTo({
    url: "/pages/start/Registration/Registration",
  });
}

function toLogin() {
  uni.navigateTo({
    url: "/pages/start/login/login",
  });
}
</script>

<style scoped>
.login-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* justify-content: space-between; */
  padding: 40rpx;
  height: 100vh;
  background-color: #ffffff;
}

.title-section {
  text-align: center;
  margin-top: 120rpx;

  margin-bottom: 20rpx;
}

.main-title {
  text-align: center;
  font-size: 64rpx;
  font-weight: 300;
  color: #000000;
  margin-bottom: 10rpx;
}
.subtitle-section {
  margin-bottom: 100rpx;
}
.subtitle {
  /* font-weight: bold; */
  font-size: 32rpx;
  color: #333333;
}

.phone-card {
  background-image: url("/static/select.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  /* background-position: center; */
  /* min-width: 300rpx; */
  min-width: 420rpx;
  min-height: 786rpx;
  width: 420rpx;
  height: 786rpx;
  border-radius: 40rpx;
  padding: 40rpx;
  box-shadow: 0 20rpx 40rpx rgba(0, 0, 0, 0.3);
  position: relative;
  overflow: hidden;
}

.button-group {
  display: flex;
  gap: 40rpx;
  margin: 80rpx 0;
  width: 100%;
  max-width: 600rpx;
}

.login-button {
  flex: 1;
  background-color: #f5f5f5;
  color: #000000;
  border-radius: 60rpx;
  font-size: 32rpx;
  padding: 20rpx;
}

.register-button {
  flex: 1;
  background-color: #000000;
  color: #ffffff;
  border-radius: 60rpx;
  font-size: 32rpx;
  padding: 20rpx;
}

.bottom-nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  height: 100rpx;
  background-color: #ffffff;
  position: fixed;
  bottom: 0;
  left: 0;
  border-top: 1rpx solid #e5e5e5;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10rpx;
}

.nav-item.active .nav-icon {
  transform: scale(1.2);
}

.nav-icon {
  width: 40rpx;
  height: 40rpx;
  margin-bottom: 10rpx;
}

.nav-text {
  font-size: 24rpx;
  color: #666666;
}

.nav-item.active .nav-text {
  color: #000000;
}

.static-footer {
	position: fixed;
	bottom: 0;
}
</style>