uniapp——签到、登录

原创

已于 2022-10-07 22:32:05 修改 · 1.9k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app

于 2022-10-06 00:52:43 首次发布

本文详细介绍了如何使用uni-app框架构建签到和登录界面，包括完整的CSS和JS代码示例，直接复制粘贴即可在项目中实现相应功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、签到界面

包括css和js的所有代码，复制粘贴代码即可看到效果：

代码如下：

<template>
	<view class="container">
		<view class="head-back" />

		<view class="head-contain">
			<view class="head-integral">
				<text class="point-title">我的积分</text>
				<text class="point">2022</text>
			</view>
			<view class="bt-sign">
				立即签到
			</view>
			<view class="bt-shopping">
				积分商城
			</view>
		</view>

		<view class="middle-contain">
			<text class="text-day">{
  
  {dayNum}}天</text>
			<text class="text-point">5积分</text>
			<view class="view-week">
				<block v-for="(item, index) in weekList" :key="index">
					<view class="block-contain">
						<view class="radio-circle" :class="[item.isSign? 'background1':'background2']">
							<image class="radio-circle-img" src="../../static/right.png"></image>
						</view>
						<text class="week-name">{
  
  {item.weekName}}</text>
					</view>
				</block>
			</view>
		</view>

		<view class="title-context">
			积分任务
		</view>

		<view class="bottom-contain">
			<image class="img_head" src="../../static/share_me.png"></image>
			<view class="view-boom">
				<text class="title-boom">分享活动，邀请好友换积分</text>
				<text class="small-text">好友参与活动您可获得积分</text>
			</view>
			<view class="bt-mall">
				分享
			</view>
		</view>

		<view class="bottom-contain">
			<image class="img_head" src="../../static/cer_me.png"></image>
			<view class="view-boom">
				<text class="title-boom">完善个人信息</text>
				<text class="small-text">补充个人信息可获得积分</text>
			</view>
			<view class="bt-mall">
				开始
			</view>
		</view>

		<view class="bottom-contain">
			<image class="img_head" src="../../static/good_me.png"></image>
			<view class="view-boom">
				<text class="title-boom">为