uniapp问题界面模板

最新推荐文章于 2024-03-22 11:33:45 发布
最新推荐文章于 2024-03-22 11:33:45 发布
阅读量797 收藏 13
点赞数
分类专栏： uniapp 文章标签： uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45969142/article/details/123178361
版权

项目演示

在这里插入图片描述

总体代码

<template>

	<view>
		<!-- #ifdef MP-WEIXIN -->
		<view class="zhanwei">
		<!-- #endif -->
		<!-- #ifdef H5 -->
		<view class="zhanwei2">
		<!-- #endif -->
			<view style="margin-top: 30rpx;margin-left: 30rpx;">
				<u--text color="#E4FAF9" size=25 text="Hi ~ 您好"></u--text>
				<u--text color="#7A7E83" size=17 text="请选择需要咨询的问题"></u--text>
			</view>
			<!-- 投诉建议 -->
			<view style="margin-left: 570rpx;margin-top: -80rpx;">
				<view class="rectangle">
					<view style="width: 200rpx;margin-left: 50rpx;">
						<u--text color="#E4FAF9" size=18 text="投诉意见"></u--text>
					</view>
					<view style="margin-top: -46rpx;margin-left: 0rpx;">
						<u--image src="/static/icon/complaint.png" width="50rpx" height="50rpx"></u--image>
					</view>
				</view>
			</view>

			<!-- 帮助中心 -->
			<view class="rectangleTwo">
				<view>
					<view style="margin-top: 20rpx;margin-left: 10rpx;">
						<u--text size=17 text="帮助中心"></u--text>
					</view>
					<view style="margin-top: -40rpx;margin-left: 500rpx;">
						<u--text size=15 color="#7A7E83" text="查看全部"></u--text>
					</view>
					<view style="margin-top: -40rpx;margin-left: 640rpx;">
						<image src="/static/icon/brackets.png" style="width: 30rpx;height: 30rpx;"></image>
					</view>
					<view class="line">
						<u-divider lineColor="#007BFE"></u-divider>
					</view>
				</view>
				<view>
					<view style="margin-top: 20rpx;margin-left: 90rpx;">
						<u--text size=15 text="常见问题"></u--text>
					</view>
					<view style="margin-top: -40rpx;margin-left: 640rpx;">
						<image src="/static/icon/brackets.png" style="width: 30rpx;height: 30rpx;"></image>
					</view>
					<view style="margin-top: -40rpx;margin-left: 20rpx;">
						<image src="/static/icon/commonproblem.png" style="width: 50rpx;height: 50rpx;"></image>
					</view>
					<view class="line">
						<u-divider lineColor="#007BFE"></u-divider>
					</view>
				</view>
				<view>
					<view style="margin-top: 20rpx;margin-left: 90rpx;">
						<u--text size=15 text="支付问题"></u--text>
					</view>
					<view style="margin-top: -40rpx;margin-left: 640rpx;">
						<image src="/static/icon/brackets.png" style="width: 30rpx;height: 30rpx;"></image>
					</view>
					<view style="margin-top: -40rpx;margin-left: 20rpx;">
						<image src="/static/icon/payproblem.png" style="width: 50rpx;height: 50rpx;"></image>
					</view>
					<view class="line">
						<u-divider lineColor="#007BFE"></u-divider>
					</view>
				</view>
				<view>
					<view style="margin-top: 20rpx;margin-left: 90rpx;">
						<u--text size=15 text="收货问题"></u--text>
					</view>
					<view style="margin-top: -40rpx;margin-left: 640rpx;">
						<image src="/static/icon/brackets.png" style="width: 30rpx;height: 30rpx;"></image>
					</view>
					<view style="margin-top: -40rpx;margin-left: 20rpx;">
						<image src="/static/icon/pickupproblem.png" style="width: 50rpx;height: 50rpx;"></image>
					</view>
					<view class="line">
						<u-divider lineColor="#007BFE"></u-divider>
					</view>
				</view>
				<view>
					<view style="margin-top: 20rpx;margin-left: 90rpx;">
						<u--text size=15 text="租赁保障"></u--text>
					</view>
					<view style="margin-top: -40rpx;margin-left: 640rpx;">
						<image src="/static/icon/brackets.png" style="width: 30rpx;height: 30rpx;"></image>
					</view>
					<view style="margin-top: -40rpx;margin-left: 20rpx;">
						<image src="/static/icon/safeprotect.png" style="width: 50rpx;height: 50rpx;"></image>
					</view>
					<view class="line">
						<u-divider lineColor="#007BFE"></u-divider>
					</view>
				</view>
			</view>
			<!-- 平台热线客服 -->
			<view class="rectangleThree">
				<view style="margin-top: 30rpx;margin-left: 20rpx;">
					<image src="/static/icon/Hotline.png" style="width: 60rpx;height: 60rpx;"></image>
				</view>
				<view style="margin-top: -60rpx;margin-left: 90rpx;">
					<u--text size=15 text="平台热线客服"></u--text>
				</view>
				<view style="margin-top: -40rpx;margin-left: 270rpx;">
					<image src="/static/icon/brackets.png" style="width: 30rpx;height: 30rpx;"></image>
				</view>
			</view>
			
			<!-- 平台在线客服 -->
			<view class="rectangleFour">
				<view style="margin-top: 30rpx;margin-left: 20rpx;">
					<image src="/static/icon/customerService2.png" style="width: 60rpx;height: 60rpx;"></image>
				</view>
				<view style="margin-top: -60rpx;margin-left: 90rpx;">
					<u--text size=15 text="平台客服路线"></u--text>
				</view>
				<view style="margin-top: -40rpx;margin-left: 270rpx;">
					<image src="/static/icon/brackets.png" style="width: 30rpx;height: 30rpx;"></image>
				</view>
			</view>

			<view style="margin-left: 150rpx;margin-top: 40rpx;">
				<u--text size=13 color="#7A7E83" text="服务时间: 周一至周日 9:00~21:30"></u--text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.zhanwei {
		height: 280rpx; //设置状态栏高度为状态栏的高度
		//状态栏高度的获取方式为：--status-bar-height
		width: 100%;
		background: #2F88FF;
		position: fixed; //固定定位，能够让占位标签始终占据状态栏的部分，背景颜色与导航栏颜色一致，是为了美观
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		z-index: 99;
	}
	.zhanwei2 {
		height: 280rpx; //设置状态栏高度为状态栏的高度
		//状态栏高度的获取方式为：--status-bar-height
		width: 100%;
		background: #2F88FF;
		position: fixed; //固定定位，能够让占位标签始终占据状态栏的部分，背景颜色与导航栏颜色一致，是为了美观
		margin-top: 0rpx;
		left: 50%;
		transform: translateX(-50%);
		z-index: 99;
	}

	.rectangle {
		margin-left: -50rpx;
		width: 200rpx; //给100像素的宽
		height: 50rpx; //给25像素的宽
		border: 1rpx solid #E4FAF9; //给一个边框大小 颜色为
		border-radius: 8rpx; // 圆角的角度
		background: transparent; // 给矩形一个透明的背景色
	}

	.rectangleTwo {
		margin-left: 30rpx;
		margin-top: 60rpx;
		width: 690rpx; //给100像素的宽
		height: 590rpx; //给25像素的宽
		border: 1rpx solid #E4FAF9; //给一个边框大小 颜色为
		border-radius: 8rpx; // 圆角的角度
		background: #FFFFFF; // 给矩形一个透明的背景色
	}
	.line {
		/* 充满整个屏幕 */
		width: 95%;
		margin-left: 20rpx;
		// /* 线的宽度 */
		// height: 2px;
		// /* 实体白线，因为需要贯穿整个屏幕，所以第三个值不需要设置 */
		// border-top: solid white;
	}
	.rectangleThree {
		margin-left: 30rpx;
		margin-top: 40rpx;
		width: 320rpx; //给100像素的宽
		height: 120rpx; //给25像素的宽
		border: 1rpx solid #E4FAF9; //给一个边框大小 颜色为
		border-radius: 8rpx; // 圆角的角度
		background: #FFFFFF; // 给矩形一个透明的背景色
	}
	.rectangleFour {
		margin-left: 400rpx;
		margin-top: -125rpx;
		width: 320rpx; //给100像素的宽
		height: 120rpx; //给25像素的宽
		border: 1rpx solid #E4FAF9; //给一个边框大小 颜色为
		border-radius: 8rpx; // 圆角的角度
		background: #FFFFFF; // 给矩形一个透明的背景色
	}
</style>

最后

存在条件编译

专注学习java
关注
  • 0
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
uni-app开发微信小程序个人中心页面适用头条/百度/支付宝小程序
qq_16800845的博客
03-02 7716
<template> <view class="container"> <view class="user-section"> <image class="bg" src="/static/user-bg.jpg"></image> <view cl...
uniapp 启动界面模板
08-28
uniapp 启动界面模板
uniapp小程序答题（详情看本人文章标题为：uniapp答题考试框架总结）
03-05
主要是针对答题开发以及接口封装， uniapp接口封装框架、以及答题模板（详情看本人文章标题为：uniapp答题考试框架总结） 喜欢的话可以给个关注给个赞 作者开发不易 给个关注给个赞吧 我会继续努力分享资源的。我也只是一个小白 大神勿喷
uniapp实现答题模板
04-08
基于uniapp实现的答题模板，适用于线上手机答题业务的小伙伴们，支持单选、多选、判断等题型，实现倒计时提示等功能，欢迎有需要的伙伴们下载，使用中遇到问题可以共同探讨！！！
uniapp—答题页面
最新发布
战场战魁
03-22 454
https://gitee.com/remaining-zheng/uniapp_1
uniApp和微信小程序好看的我的页面（有源码）
code袁的博客
02-11 4109
uniApp和微信小程序好看的我的页面（有源码）
uni-app 10.3个人设置页开发（三）操作菜单
ab的博客
09-05 288
主页面代码 user-base.nvue <template> <view class="page"> <!-- 导航栏 --> <free-nav-bar showBack :showRight="true" bgColor="bg-white"> <free-icon-button slot="right"><text class="iconfont font-md" @click="openAction">&.
uni-app实战仿微信app开发
03-08
适用人群具有Html+Css+JavaScript基础，有一定的Vue.js基础，挑战高薪职位课程概述本季度为uni-app + egg.js 实战仿微信app和小程序全栈开发，开启纯nvue原生渲染，大大提高性能。一次开发，同时搞定Android、iOS和小程序端等。课程大纲见以下图！
uni-app商城（十）个人中心
R·ZORO的博客
06-01 2179
【代码】uni-app商城（十）个人中心。
uniapp个人中心界面模板
热门推荐
weixin_45969142的博客
02-28 1万+
项目介绍 总体代码 <template> <view class="wrapper"> <!-- 个人资料 --> <!-- <view class="profile"> <view class="meta"> --> <!-- <image class="avatar" src="http://static.botue.com/ugo/uploads/monkey.png"></im
米签---个人中心页面功能（uniapp)
weixin_47667133的博客
12-11 5113
在onLoad生命周期接受传参，未登录的话在获取信息失败（401）方法里通过uni.redirectTo()重定向至登录页 onLoad(options) { if (options.auth) { this.auth = options.auth console.log(this.auth) } this.getUserCenter() } 个人用户 显示头像用户名信息，如果已经实名，显示手机号未实名显示绑定手机号，点击绑定手机号，去绑定。(code为小程序专.
uniapp模板--主页
06-06
uni-app页面含轮播，flex布局，饼状图，折线图，应用swiper的等
仿手机充值界面
06-01
类似手机充值效果选择一个项目相应的钱有变化，有加减功能
基于uni-app框架的登录模板
02-21
基于uni-app框架的登录模板
绑定手机号-VUE模板 UNIAPP模板 布局、样式、JS分离
04-22
请先绑定手机号 请输入电话号码 请输入验证码 发送验证码 立即登录 绑定手机号-VUE模板-UNIAPP模板 VUE模板 UNIAPP模板 布局、样式、JS分离
uni-app 7个人中心页开发
ab的博客
08-28 4485
my.nvue 内容如下 <template> <view class="page"> <free-nav-bar bgColor="bg-white"> <free-icon-button slot="right"><text class="iconfont font-md">&#xe6ed;</text></free-icon-button> </free-nav-bar> .
uni-app个人中心页开发
Aurora_1970s的博客
11-08 4763
``uni-app```个人中心页开发 1.拍照，选择图片 user.vue： <template> <view> <view class="takephoto" @click="takephoto">拍照</view> <image v-for="(item,index) of imglist" :src="item" :key="index"></image> </view> </template&gt
uniapp——图片下加文字，卡片，阴影，图标--文字--箭头（个人中心）
wy313622821的博客
12-03 1万+
图片下加文字 卡片 阴影
uniapp登录界面模板
11-04
在Uniapp中，我们可以使用不同的组件和模板来设计登录界面。 首先，我们可以使用`<uni-app>`标签来创建一个Uniapp应用，然后在页面中使用`<view>`标签来布局登录界面的各个元素。可以使用`<text>`标签来显示文本...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值