uniapp问题界面模板

项目演示

总体代码

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

最后

存在条件编译

uniapp问题界面模板相关推荐

uniapp购物车界面模板
项目演示参考链接 https://blog.csdn.net/pumpkin_truck/article/details/120140769 总体代码 <template><!-- ...
多用途bootstrap后台管理系统模板企业统计管理界面模板
介绍: 基于bootstrap构建,响应式的电子商务后台管理系统ui页面模板. 适用于:电商销售统计.企业统计管理界面模板. 网盘下载地址: http://kekewl.net/yYrcYaCFVAU ...
UI实用素材|登录和个人资料界面模板
在注册的时候通常只遇到一次登录界面,或者至少在相当少的情况下,如果你的应用出于安全考虑涉及到重新登录.同样的,正如我们在之前的一篇文章中所讨论的那样,填写表单并不是一个大多数用户通常认为非常吸引人的活 ...
巧妙布局的APP界面模板，让你的作品更有吸引力
APP界面布局设计是APP设计中非常重要的一环,合理的运用APP界面布局会让APP的界面显得很清晰美观. 巧妙布局的APP界面模板,让你的作品更有吸引力常见的APP界面布局有哪些呢? 1 ①顶部导航 ...
IPAD移动端交互原型通用设计方案、ipad元件库、移动元件库、元件列表、设计元件、交互示例、界面模板、设备模板、手势图标、社交界面、音乐、电商、视图控制器、指示器、指纹解锁、手势解锁、rp元件库
IPAD移动端交互原型通用设计方案.ipad元件库.移动元件库.元件列表.设计元件.交互示例.界面模板.设备模板.手势图标.社交界面.音乐.电商.视图控制器.指示器.指纹解锁.手势解锁.rp元件库.平 ...
HTML5响应式手机模板：电商网站设计——仿淘宝手机app界面模板源码 HTML+CSS+JavaScript...
HTML5响应式手机模板:电商网站设计--仿淘宝手机app界面模板源码 HTML+CSS+JavaScript 手机电商模板手机网站模板企业手机网站模板手机网站模板手机模板响应式手机网站 h ...
信捷触摸屏UI模板XINJIE UI信捷触摸屏界面模板
信捷触摸屏UI模板XINJIE UI信捷触摸屏界面模板 id=594740223989&
婚礼类小程序前端界面模板源码
模板介绍一款通用的婚礼策划,婚纱摄影类小程序前端模板.支持在线预约,婚纱定制等手机微信小程序模板. 图片演示小程序源码下载地址:婚礼类小程序前端界面模板源码-小程序文档类资源-CSDN文库http ...
HTML5响应式苹果IOS风格后台办公界面模板
简介: 一套苹果IOS风格后台办公界面模板分享给大家,HTML5响应式布局,自适应多终端分辨率. 全套36个页面,包含所有所需模板界面,包含登录.表格.表单.提示界面.上传下载等等. 如果打开页面较慢 ...
uniapp订单列表模板的使用，u-tabs-swiper的使用，全屏选项卡
uniapp官方的模板使用:在线效果请看 demo: 代码: <template><view class="shenhe-container"><vi ...

uniapp问题界面模板

项目演示

总体代码

最后

uniapp问题界面模板相关推荐

最新文章

热门文章