purchase-let/pages/login/login.vue

<template>
	<view>
		<view class="login-box">
      <image class="logo" src="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/35adb202404271727457954.png"></image>
      <view class="tips">欢迎登录里海商户采购平台</view>
      <block v-if="true">
        <view class="btn">
          <up-button color="#20B128" size="large"><up-icon name="weixin-fill" color="#fff" size="28"></up-icon>微信登录</up-button>
        </view>
        <view class="btn">
          <up-button color="#ECFFEE" size="large"><text style="color: #20B128;">使用短信验证登录</text></up-button>
        </view>
      </block>
      <view class="agreement">
        <image v-if="true" src="@/static/icon/n-check.png"></image>
        <image v-else src="@/static/icon/check.png"></image>
        <view>
          我已同意<text>《用户协议》</text>与<text>《隐私政策》</text>
        </view>
      </view>
    </view>
	</view>
</template>

<script setup>
import useUserStore from "@/store/user.js"

const userStore = useUserStore(); //使用pinia进行状态管理



</script>

<style lang="scss">
page{
  background-color: #fff;
}
.login-box{
  width: 700rpx;
  height: 88vh;
  margin: 0 auto;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 10vh;
  position: relative;
  
  .logo{
    height: 152rpx;
    width: 152rpx;
  }
  
  .tips{
    color: #444444;
    font-size: 28rpx;
    margin: 30rpx 0;
  }
  
  .btn{
    width: 600rpx;
    margin-top: 40rpx;
    font-size: 32rpx !important;
  }
  
  .agreement{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    color: #444;
    image{
      width: 40rpx;
      height: 40rpx;
      margin-right: 10rpx;
    }
  }
}
</style>