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>

    <!-- 底部导航栏 -->
    <!-- <view class="bottom-nav">
      <navigator url="/pages/index/index" class="nav-item">
        <image
          class="nav-icon"
          src="/static/images/home.png"
          mode="aspectFill"
        ></image>
        <text class="nav-text">首页</text>
      </navigator>
      <navigator url="/pages/index/index" class="nav-item">
        <image
          class="nav-icon"
          src="/static/images/chart.png"
          mode="aspectFill"
        ></image>
        <text class="nav-text">行情</text>
      </navigator>
      <navigator url="/pages/index/index" class="nav-item active">
        <image
          class="nav-icon"
          src="/static/images/logo.png"
          mode="aspectFill"
        ></image>
        <text class="nav-text">DeepMate</text>
      </navigator>
      <navigator url="/pages/index/index" class="nav-item">
        <image
          class="nav-icon"
          src="/static/images/explore.png"
          mode="aspectFill"
        ></image>
        <text class="nav-text">深度探索</text>
      </navigator>
      <navigator url="/pages/index/index" class="nav-item">
        <image
          class="nav-icon"
          src="/static/images/profile.png"
          mode="aspectFill"
        ></image>
        <text class="nav-text">我的</text>
      </navigator>
    </view> -->
  </view>
</template>

<script setup>
function toRegistration() {
  uni.navigateTo({
    url: "/pages/Registration/Registration",
  });
}

function toLogin() {
  uni.navigateTo({
    url: "/pages/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: 800;
  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/20251021-132531.jpg");
  background-size: 100% 100%;
  background-position: center;
  min-width: 400rpx;
  min-height: 700rpx;
  width: 400rpx;
  height: 700rpx;
  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;
}
</style>