uniapp 首页制作

阿金要当大魔王~~2023-10-11 18:38

uniapp拨打固定的电话

			function Hotline() {
				// 拨打电话
				uni.makePhoneCall({
					phoneNumber: '19969547693'
				})
			}

页面跳转

	//普通跳转
			function homepage() {
				uni.navigateTo({
					url: '/pages/homepage/homepage'
				});
			}

	//二、uni.redirectTo关闭当前页面，跳转到应用内的某个页面。

			uni.redirectTo({
				url: './index/index'
			});


	//三、uni.switchTab跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。

			uni.switchTab({
				url: '/pages/homepage/homepage'
			});

首页页面展示

代码

<template>
	<view class="bg">

		<!-- 搜索地址  title-->
		<div class="title">
			<!-- 一级导航 -->
			<uni-combox :candidates="candidates" placeholder="请选择所在城市" v-model="city" labelWidth="70px"
				style="background-color:(117,17,29); margin: 4px 10px;"></uni-combox>

			<!-- 二级导航 -->
			<p
				style=" margin: 10px; color: white; line-height: 20px; height: 20px; background-color: (117,17,29);padding: 2px;">
				无障碍阅读</p>
		</div>

		<!-- 轮播图 swiper-box-->
		<uni-swiper-dot :info="info">
			<swiper class="swiper-box">
				<swiper-item v-for="(item ,index) in info" :key="index">
					<view class="swiper-box-img">
						{{item.content}}
					</view>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>


		<!-- 常用服务 service-->
		<div class="common">
			<uni-icons type="map-pin" size="30" color="red"></uni-icons>
			<h3>常用服务</h3>
		</div>

		<div style="display: flex;flex-wrap: wrap; justify-content:space-around;">
			<div @click='homepage  ' style="margin: 4px 12px;">
				<image src="../../static/weixiu.png" class="service-img"></image>
				<p class="service-p">我要保修</p>
			</div>
			<div @click='complaint' style="margin: 4px 12px;">
				<image src="../../static/i247.png" class="service-img"></image>
				<p class="service-p">投诉意见</p>
			</div>
			<div @click='Hotline' style="margin: 4px 12px;">
				<image src="../../static/dianhua.png" class="service-img"></image>
				<p class="service-p">服务热线</p>
			</div>
			<div @click='Notice' style="margin: 4px 12px;">
				<image src="../../static/gonggao.png" class="service-img"></image>
				<p class="service-p">通知公告</p>
			</div>

			<div @click='HandleRepairs' style="margin: 4px 12px;">
				<image src="../../static/tousu.png" class="service-img"></image>
				<p class="service-p">导出表单</p>
			</div>
			<div @click='HandlingComplaints' style="margin: 4px 12px;">
				<image src="../../static/faxian.png" class="service-img"></image>
				<p class="service-p">导入表单</p>
			</div>
		</div>

		<!-- 公平 public-nav-->
		<h3><uni-icons type="map-pin" size="30" color="red"></uni-icons>{{listcons.title}}</h3>
		<uni-segmented-control :values="items" @clickItem="onClickItem" styleType="text"
			style="margin-right: 120px; margin-left: 20px;" />
		<view class="public-nav">
			<view>
				<view class="public-view" v-for="item in listcons.items " :key="item">
					<img :src="item.icon" class="public-img" />
					<p class="public-text">{{item.label}}</p>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		setup(_, ctx) {
			const mode = 'round'
			const items = ['报修意见', '通知通告', '导出表单']

			const city = ''
			const candidates = ['北京', '南京', '东京', '武汉', '天津', '上海', '海口']


			const services = {
				title: '常用服务',
				items: [{
						icon: '/static/weixiu.png',
						label: '我要保修',
						url: '/pages/homepage/homepage'
					},
					{
						icon: '/static/i247.png',
						label: '投诉意见',
					},
					{
						icon: '/static/dianhua.png',
						label: '服务热线',
					}, {
						icon: '/static/gonggao.png',
						label: '通知公告',
					}, {
						icon: '/static/tousu.png',
						label: '导出表单',
					}, {
						icon: '/static/faxian.png',
						label: '导入表单',
					}
				],
			}

			function onClickItem(e) {
				if (currents.value !== e.currentIndex) {
					currents.value = e.currentIndex
				}
			}

			const info = [{
					content: ''
				},
				{
					content: ''
				},
				{
					content: ''
				},
			]

			const listcons = {
				title: '公开公正',
				items: [{
					icon: '../../static/微信图片_20230903143138.jpg',
					label: '2023中秋国庆假期盘点 高速公路川流不息,景区景点"人从众",大型商超人气火爆,电影市场红火向好'
				}, {
					icon: '../../static/微信图片_20230903143138.jpg',
					label: '今年中秋、国庆双节并行，超8亿人次出游、国内旅游收入超7500亿元，上涨的热情、刷新的数据，映射出人们对美好生活的期盼，彰显中国经济的活力'
				}, {
					icon: '../../static/微信图片_20230903143138.jpg',
					label: '没想到泼天的富贵要到文具届了，我想说自动铅笔更贵是因为它比普通铅笔改进了技术'
				}, {
					icon: '../../static/微信图片_20230903143138.jpg',
					label: '2023中秋国庆假期盘点 高速公路川流不息,景区景点"人从众",大型商超人气火爆,电影市场红火向好'
				}, {
					icon: '../../static/微信图片_20230903143138.jpg',
					label: '今年中秋、国庆双节并行，超8亿人次出游、国内旅游收入超7500亿元，上涨的热情、刷新的数据，映射出人们对美好生活的期盼，彰显中国经济的活力'
				}, {
					icon: '../../static/微信图片_20230903143138.jpg',
					label: '没想到泼天的富贵要到文具届了，我想说自动铅笔更贵是因为它比普通铅笔改进了技术'
				}, ],
			}


			function homepage() {
				uni.navigateTo({
					url: '/pages/homepage/homepage'
				});
			}


			function complaint() {
				uni.navigateTo({
					url: '/pages/complaint/complaint'
				});
			}


			function Hotline() {
				// 拨打电话
				uni.makePhoneCall({
					// phoneNumber: '19969547693'
					phoneNumber: '18343078388'
				})
			}

			function Notice() {
				uni.navigateTo({
					url: '/pages/Notice/Notice'
				});
			}

			function HandleRepairs() {
				uni.navigateTo({
					url: '/pages/HandleRepairs/HandleRepairs'
				});
			}

			function HandlingComplaints() {
				uni.navigateTo({
					url: '/pages/HandlingComplaints/HandlingComplaints'
				});
			}

			return {
				info,
				mode,
				items,
				onClickItem,
				city,
				candidates,
				complaint,
				homepage,
				Hotline,
				Notice,
				HandleRepairs,
				HandlingComplaints,
				listcons,
				services
			}
		}
	}
</script>
<style scoped>
	/* 背景 */
	.bg {
		width: 100%;
		height: 150px;
		background-image: url('/static//QQ截图20230928135008.jpg');
		background-position: center center;
		background-repeat: no-repeat;

	}

	/* 搜索地址 */
	.title {
		display: flex;
		justify-content: space-between;
	}

	.title-p {
		color: antiquewhite;
	}

	/* 轮播图 */
	.swiper-box {
		margin: 10px;
	}

	.swiper-box-img {
		/* 	background-color: aquamarine; */
		width: 100%;
		height: 150px;
		background-image: url('../../static/212592593253b564407bcec.jpg');
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
		color: aqua;
	}

	/* 常用服务 */

	.common {
		width: 120px;
		display: flex;
		/* margin: 20px 0; */
		margin-top: 20px;
	}

	.service-nav {
		display: flex;
		flex-wrap: wrap;
	}

	.service-img {
		width: 25px;
		height: 25px;
		margin-left: 20px;
		margin-top: 5px;
	}

	.service-p {
		margin-left: 10px;
		margin-top: 5px;
	}


	/* 公式公开 */
	.public {
		margin-top: -20px;
	}

	.public-nav {
		display: flex;
		margin-top: 15px;
		height: 22rem;
	}

	.public-view {
		display: flex;
		align-items: center;
	}

	.public-img {
		width: 70px;
		height: 70px;
		margin: 0 20px;
		margin-top: 5px;
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
	}

	.public-text {
		width: 240px;
		font-size: 14px;
		color: #666;
		/* 让文本不换行 */
		white-space: nowrap;
		overflow: hidden;
		/* 超出部分隐藏 */
		text-overflow: ellipsis;
		/* 使用省略号代替超出部分 */
	}

	.example-body {
		padding: 12px;
		background-color: #FFFFFF;
	}

	.result-box {
		text-align: center;
		padding: 20px 0px;
		font-size: 16px;
	}
</style>

我的页面展示

代码

<template>
	<view class="bg">
		<p class="boder"></p>
		<h3 class="name">ID : {{name}}</h3>
	</view>
	<view class="">
		<view class="container">


			<uni-section>
				<uni-group mode="card">
					<view class="tuichu">
						<image src="../../static/baoxiu.png" style="width: 20px; height: 20px;margin-right: 20px;">
						</image>
						<h3 @click="gonavigate">服务 </h3>

					</view>
				</uni-group>

				<uni-group title="" mode="card">

					<view class="" style="display: flex; justify-content: space-between;">
						<view class="tuichu">
							<image src="../../static/baoxiu.png" style="width: 20px; height: 20px;margin-right: 20px;">
							</image>
							<h3 @click="gonavigate">收藏 </h3>

						</view>
						<uni-icons type="forward" size="20"></uni-icons>

					</view>
					<uni-list-item :disabled="true" style="margin-top: 10px;"></uni-list-item>
					<view class="" style="display: flex; justify-content: space-between;">
						<view class="tuichu">
							<image src="../../static/baoxiu.png" style="width: 20px; height: 20px;margin-right: 20px;">
							</image>
							<h3 @click="gonavigate">朋友圈 </h3>

						</view>
						<uni-icons type="forward" size="20"></uni-icons>

					</view>
					<uni-list-item :disabled="true" style="margin-top: 10px;"></uni-list-item>
					<view class="" style="display: flex; justify-content: space-between;">
						<view class="tuichu">
							<image src="../../static/baoxiu.png" style="width: 20px; height: 20px;margin-right: 20px;">
							</image>
							<h3 @click="gonavigate">导入 </h3>

						</view>
						<uni-icons type="forward" size="20"></uni-icons>

					</view>
				</uni-group>


				<uni-group mode="card">
					<view class="tuichu">
						<image src="../../static/baoxiu.png" style="width: 20px; height: 20px;margin-right: 20px;">
						</image>
						<h3 @click="gonavigate">退出 </h3>
					</view>
				</uni-group>
			</uni-section>

		</view>
	</view>
</template>
<script>
	export default {
		setup() {
			const name = '周阿狗'


			function gonavigate() {
				uni.showToast({
					title: '退出成功',
					icon: 'none',
				});
				uni.redirectTo({
					url: '../index/index'
				});
			}


			return {
				name,
				gonavigate
			}
		}
	}
</script>
<style>
	.bg {
		width: 100%;
		height: 180px;
		background-image: url('../../static/微信图片_20230903143208.jpg');
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
		display: flex;
	}

	.boder {
		width: 70px;
		height: 70px;
		margin: 40px;
		border-radius: 30px;
		background-image: url('../../static/31wode.png');
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
	}

	.name {
		padding: 60px 0;
		color: aliceblue;
	}

	.tuichu {
		display: flex;
	}
</style>

登录展示

代码

 <template>
 	<view class="t-login">
 		<image class="img-a" src="https://zhoukaiwen.com/img/loginImg/2.png"></image>
 		<image class="img-b" src="https://zhoukaiwen.com/img/loginImg/3.png"></image>
 		<view class="t-b">中通数智科技</view>
 		<view class="t-b2">吉林省中通数智科技有限公司</view>
 		<form class="cl">
 			<view class="t-a">
 				<image src="https://zhoukaiwen.com/img/loginImg/sj.png"></image>
 				<view class="line"></view>
 				<input placeholder="输入手机号" class="login-content_input" v-model="username" name="username" />
 				<!-- <input type="number" name="username" placeholder="请输入手机号" maxlength="11" v-model="username" /> -->
 			</view>
 			<view class="t-a">
 				<image src="https://zhoukaiwen.com/img/loginImg/yz.png"></image>
 				<view class="line"></view>
 				<input placeholder="请输入密码" class="login-content_input" v-model="password" :password="password" />
 				<!-- <input type="number" name="code" maxlength="6" placeholder="请输入密码"  v-model="password" :password="password"  /> -->
 			</view>
 			<view class="rememberMe">




 				<view class="rememberMe-text">记住我</view>
 			</view>

 			<button @tap="dengLu()">登 录</button>
 		</form>

 	</view>
 </template>

 <script lang="ts">
	import { ref } from 'vue'
	export default {

		setup() {
			const username = ref<String>('test000')
			const password = ref<String>('test123456')
			const rememberMe = ref<Boolean>(true)

			function dengLu() {
				uni.switchTab({
					url: '/pages/home/home'
				});
			}

			return {
				username,
				password,
				rememberMe,
				dengLu
			}

		}
	}
 </script>


 <style scoped>
 	.login-content {
 		width: 100%;
 		text-align: center;
 		position: fixed;
 	}

 	/* 标题 */
 	.login-title {
 		margin-top: 180px;
 		font-size: 40px;
 		font-weight: bold;
 		margin-bottom: 50px;

 	}

 	.login-content_input {
 		width: 80%;
 		height: 40px;
 		background: #F8F8F8;
 		border-radius: 25px;
 		text-align: left;
 		padding: 10px;
 		box-sizing: border-box;
 		font-size: 15px;
 		margin: 0 10%;
 	}

 	/* 手机号  密码 */
 	.iphone,
 	.password {
 		position: relative;
 		margin-bottom: 60px;

 	}

 	/* 记住我 */
 	.rememberMe {
 		right: 15%;
 		position: fixed;
 		display: flex;
 		margin-top: 2px;
 	}

 	/* 按钮 */
 	.login-btn {
 		/* margin: 0 20%;
		width: 58%;
		height: 50px;
		background: #004d00;
		border-radius: 5px;
		color: #fff;
		font-size: 25px;
		text-align: center;
		line-height: 50px;
		position: fixed;
		bottom: 60px; */
 		position: fixed;
 		border-radius: 10px;
 		top: 80%;
 		left: 0;
 		right: 0;
 		bottom: 15%;
 		margin: 0 auto;
 		text-align: center;
 		width: 200px;
 		background-color: #006400;
 		color: white;
 		line-height: 34px;
 		font-size: 1rem;
 	}

 	.img-a {
 		position: absolute;
 		width: 100%;
 		top: -150rpx;
 		right: 0;
 	}

 	.img-b {
 		position: absolute;
 		width: 50%;
 		bottom: 0;
 		left: -50rpx;
 		/* margin-bottom: -200rpx; */
 	}

 	.t-login {
 		width: 650rpx;
 		margin: 0 auto;
 		font-size: 28rpx;
 		color: #000;
 	}

 	.t-login button {
 		margin: 64px 0;
 		font-size: 28rpx;
 		background: #5677fc;
 		color: #fff;
 		height: 90rpx;
 		line-height: 90rpx;
 		border-radius: 50rpx;
 		box-shadow: 0 5px 7px 0 rgba(86, 119, 252, 0.2);
 	}

 	.t-login input {
 		padding: 0 20rpx 0 120rpx;
 		height: 90rpx;
 		line-height: 90rpx;
 		margin-bottom: 50rpx;
 		background: #f8f7fc;
 		border: 1px solid #e9e9e9;
 		font-size: 28rpx;
 		border-radius: 50rpx;
 	}

 	.t-login .t-a {
 		position: relative;
 	}

 	.t-login .t-a image {
 		width: 40rpx;
 		height: 40rpx;
 		position: absolute;
 		left: 80rpx;
 		top: 28rpx;
 		/* border-right: 2rpx solid #dedede; */
 		margin-right: 20rpx;
 	}

 	.t-login .t-a .line {
 		width: 2rpx;
 		height: 40rpx;
 		background-color: #dedede;
 		position: absolute;
 		top: 28rpx;
 		left: 130rpx;
 	}

 	.t-login .t-b {
 		text-align: left;
 		font-size: 46rpx;
 		color: #000;
 		padding: 300rpx 0 30rpx 0;
 		font-weight: bold;
 	}

 	.t-login .t-b2 {
 		text-align: left;
 		font-size: 32rpx;
 		color: #aaaaaa;
 		padding: 0rpx 0 120rpx 0;
 	}

 	.t-login .t-c {
 		position: absolute;
 		right: 22rpx;
 		top: 22rpx;
 		background: #5677fc;
 		color: #fff;
 		font-size: 24rpx;
 		border-radius: 50rpx;
 		height: 50rpx;
 		line-height: 50rpx;
 		padding: 0 25rpx;
 	}

 	.t-login .t-d {
 		text-align: center;
 		color: #999;
 		margin: 80rpx 0;
 	}

 	.t-login .t-e {
 		text-align: center;
 		width: 250rpx;
 		margin: 80rpx auto 0;
 	}

 	.t-login .t-g {
 		float: left;
 		width: 50%;
 	}

 	.t-login .t-e image {
 		width: 50rpx;
 		height: 50rpx;
 	}

 	.t-login .t-f {
 		text-align: center;
 		margin: 200rpx 0 0 0;
 		color: #666;
 	}

 	.t-login .t-f text {
 		margin-left: 20rpx;
 		color: #aaaaaa;
 		font-size: 27rpx;
 	}

 	.t-login .uni-input-placeholder {
 		color: #000;
 	}

 	.cl {
 		zoom: 1;
 	}

 	.cl:after {
 		clear: both;
 		display: block;
 		visibility: hidden;
 		height: 0;
 		content: '\20';
 	}

 	.rememberMe {
 		right: 15%;
 		position: fixed;
 		display: flex;
 	}

 	.ada {
 		margin-top: 20px;
 	}

 	.rememberMe-text {
 		line-height: 30px;
 	}
 </style>
相关推荐
fakaifa11 小时前
CRMEB Pro版v3.1源码全开源+PC端+Uniapp前端+搭建教程
前端·小程序·uni-app·php·源码下载
转角羊儿11 小时前
uni-app请求方法封装⑦
uni-app
java知路12 小时前
uniapp h5实现录音
uni-app
haodanzj14 小时前
在uniapp中封装请求接口 （带刷新token）
前端·javascript·uni-app
空&白14 小时前
uniapp h5地址前端重定向跳转
前端·uni-app
工业互联网专业14 小时前
Python毕业设计选题：基于Django+uniapp的公司订餐系统小程序
vue.js·python·小程序·django·uni-app·源码·课程设计
家里有只小肥猫15 小时前
关于vue生命周期
uni-app·uniapp
不法15 小时前
uniapp 跨域前端代理
前端·uni-app
堕落年代15 小时前
在uniapp当中隐藏掉默认tabbar并且使用自己的tabbar
前端·javascript·uni-app
多客软件佳佳17 小时前
校园交友系统的设计与实现（开源版+三端交付+搭建+售后）
小程序·前端框架·uni-app·开源·php·交友
热门推荐
01玄机平台应急响应—webshell查杀02Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总04新版微信小程序获取用户手机号05文件或文件夹名称中有空格如何批量去除06组基轨迹建模 GBTM的介绍与实现（Stata 或 R）07【TC3xx芯片】TC3xx芯片电源管理系统PMS详解08优化手机性能，解决卡顿问题：关闭这3个微信开关，释放内存空间09基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测10【Flutter】基于 GetX 实现 Dio 的生命周期自动化