创新实训——飞讯（十）

leaf_er leaf_er 博客等级 关注
已于 2022-06-08 23:30:59 修改 · 360 阅读
原创 ·
本内容遵循 CC 4.0 BY-SA 版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
uniapp修改原生内置组件的样式 - 不污染全部页面 效果图 原来： 修改后： 核心步骤 目标组件的元素外层加容器，class="box" （名字随意） 在vue的style后面再加一个style scoped <style scoped> .box /deep/ .label-text { font-size: 15px; color: red; font-weight: bold; } </style> 刷新，搞定 完整步骤 找出组件内部的元素的class，方便cs. 阅读详情

目录

工作日志与问卷

一、工作日志

1.1工作日志

1.2创建/修改工作日志

1.3删除日志

二、问卷

2.1设计问卷

 2.2填写问卷

 工作日志与问卷

我负责工作日志和问卷相关的样式设计，与后端数据库的交互交由队长负责。

一、工作日志

1.1工作日志

左边包括时间、编辑与删除按钮，右部分包括标题和详细内容。

部分样式如下，及效果图。

<view class="main">
	<view class="log" v-for="(item,index) in userList" :key="index">
		<view>
			<view class="time">{{item.time}}</view>
			<view class="btn">
				<view class="edit-btn" @tap="editlog(item.id,item.title,item.details)">编辑</view>
				<view class="delete-btn" @tap="deletelog(item.id)">删除</view>
			</view>
			
		</view>
		

		<view class="log-content">
			<view class="title">{{item.title}}</view>
			<view class="details">{{item.details}}</view>
		</view>
	</view>
</view>


.log-content{
	margin-top: 20rpx;
	
	.title{
		padding-left: 10rpx;
		border-left: 3px solid $uni-color-success;
		font-size: 40rpx;
		font-weight: 600;
		
	}
	.details{
		margin-top:10rpx;
		padding-left: 10rpx;
		border-left: 3px dotted $uni-color-success;
		display: flex;
		align-items: center;
		padding-bottom: 20rpx;
		
		font-size: 34rpx;
		margin-right: 20rpx;
		text-indent:2em;
		border-bottom: 1px solid $uni-border-color;
	}
}

1.2创建/修改工作日志

通过右上角添加日志的按钮和每个日志左边的的编辑按钮，会向创建/修改日志传递不同参数，加载时据此展示不同界面：

onLoad:function(e){
	console.log(e);
	this.logid=e.logid;
	this.userid = e.userid;
	if(this.logid > 0){
		this.logTitle=e.logTitle;
		this.logContent=e.logContent;
	}
},

 主界面用uni组件简单布置了标题和内容：

<view class="main" >
	<uni-forms labelPosition="top">
		<uni-forms-item label="标题">
			<uni-easyinput v-model="logTitle" placeholder="请输入标题" />
		</uni-forms-item>
		<uni-forms-item label="内容" >
			<uni-easyinput type="textarea" v-model="logContent" placeholder="请输入内容" />
		</uni-forms-item>
	</uni-forms>
	
	<view class="logconfirm">
		<view class="confirm-btn" @tap="logconfirm">确 定</view>
	</view>
</view>





.main{
	padding-top: 88rpx;
	padding-left: 20rpx;
	padding-right: 20rpx;
	
	
	.logconfirm{
		display: flex;
		justify-content: center;
		width: 100%;
		font-size: 40rpx;
		color:white;
		.confirm-btn{
			padding: 10rpx 20rpx 10rpx 20rpx;
			background-color: $uni-color-success;
			border-radius: 30rpx;
		}
		
	}
}

1.3删除日志

点击删除按钮弹出提示框，点击确认后调用相应函数进行删除。

<view>
	<uni-popup ref="deleteConfirmAsk" type="dialog">
		<uni-popup-dialog type="error" cancelText="取消" confirmText="确认" content="确认删除？" @confirm="deleteConfirm"></uni-popup-dialog>
	</uni-popup>
</view>


deletelog:function(id){
				this.$refs.deleteConfirmAsk.open();
				this.logidToDel=id;
			},

二、问卷

2.1设计问卷

根据项目内对问卷数据的设计，在首行放置了三个按钮点击添加相应题型，并可以增加、删除题目和选项，其中选择题选项至少要有两个，故当选项数量不大于2时，选项的“删除”按钮不出现。

<view class="choose" v-if="item.type!='Input'">
	<view class="title">
		<view class="questionid" v-if="item.type=='Radio'">{{index+1}}(单选)</view>
		<view class="questionid" v-if="item.type=='Checkbox'">{{index+1}}(多选)</view>
		<input placeholder="请输入题目" class="quextiontext"  v-model="item.text"></input>
		<view class="deletequestion" @tap="deletequestion(index)">删除</view>
	</view>
	<view class="options" v-for="(optionitem,optionindex) in item.optionList" :key="optionindex">
		<input :placeholder="'请输入选项'+(optionindex+1)+'描述'" class="optiontext" v-model="optionitem.text"></input>
		<view class="addoption" v-if="optionindex==item.optionList.length-1" @tap="addoption(index)">新增</view>
		<view class="deleteoption" v-if="item.optionList.length>2" @tap="deleteoption(index,optionindex)">删除</view>
	</view>
</view>

 2.2填写问卷

考虑到问卷填写者的便利性，新建一个网页项目用以填写问卷。调用了uniapp的radio、checkbox和textarea组件。

	<view class="content">
		<view class="box-bg">
			<uni-nav-bar shadow left-icon="left" title="问卷填写" />
		</view>
		
		<view class="questionnaireName">
			{{name}}
		</view>
		
		<view v-for="(item,index) in questions" :key="index">
			<view class="choose" v-if="item.type=='Radio'">
				<view class="title">
					<view class="questionid" >{{index+1}}(单选)</view>
					<view class="quextiontext">
						<view>{{item.text}}</view>
					</view>
				</view>
				
				<radio-group @change="radioChange($event,index)">
					<label class="uni-list-cell" v-for="(optionitem,optionindex) in item.options" :key="optionindex" >
						<view>
							<radio :value="optionitem.text"/>
						</view>
						<view>{{optionitem.text}}</view>
					</label>
				</radio-group>
			</view>
			
			<view class="choose" v-if="item.type=='Checkbox'">
				<view class="title">
					<view class="questionid">{{index+1}}(多选)</view>
					<view class="quextiontext">
						<view>{{item.text}}</view>
					</view>
				</view>
				<view class="uni-list">
					<checkbox-group @change="checkboxChange($event,index)">
						<label class="uni-list-cell" v-for="(optionitem,optionindex) in item.options" :key="optionindex">
							<view>
								<checkbox :value="optionitem.text"/>
							</view>
							<view>{{optionitem.text}}</view>
						</label>
					</checkbox-group>
				</view>
			</view>
			
			
			<view class="input" v-if="item.type=='Input'">
				<view class="title">
					<view class="questionid">{{index+1}}(主观)</view>
					<view class="quextiontext">{{item.text}}</view>
				</view>
				<view class="textarea">
					<textarea placeholder="请输入答案" @input="inputChange($event,index)"/>
				</view>
			</view>
			
		</view>
		
		<view class="submit-btn" @tap="confirmQ">
			<view class="text">提交</view>
		</view>
	</view>
radioChange: function(e,index) {
	this.questions[index].answer=[];
	let ans = {
		content:e.detail.value,
	}
	this.questions[index].answer.push(ans);
},
checkboxChange: function(e,index) {
	this.questions[index].answer=[];
	for(let i=0;i<e.detail.value.length;i++){
		let ans = {
			content:e.detail.value[i],
		}
		this.questions[index].answer.push(ans);
	}
},
inputChange:function(e,index){
	this.questions[index].answer=[];
	let ans = {
		content:e.detail.value,
	}
	this.questions[index].answer.push(ans);
},

.questionnaireName{
	font-size: 50rpx;
	padding:10rpx 40rpx 10rpx 40rpx;
	text-align: center;
}

.choose{
	padding: 10rpx 10rpx 20rpx 10rpx;
	border: 2px solid $uni-border-color;
	margin:20rpx 20rpx 10rpx 20rpx;
	.title{
		.questionid{
			text-align: center;
			width:120rpx;
		}
		.quextiontext{
			text-indent:2em;
			margin-left: 20rpx;
		}		
	}
	.options{
		padding-left: 30rpx;
		margin-top: 10rpx;
		display: flex;
		.optionid{
			padding-right: 20rpx;
		}
	}
}
.checkbox-btn{
	justify-content: flex-start;
}
.input{
	padding: 10rpx 10rpx 20rpx 10rpx;
	border: 2px solid $uni-border-color;
	margin:20rpx 20rpx 10rpx 20rpx;
	.title{
		.questionid{
			text-align: center;
			width:120rpx;
		}
		.quextiontext{
			text-indent:2em;
			margin-left: 20rpx;
		}		
	}
	.textarea{
		margin:10rpx 20rpx 0rpx 20rpx;
		padding: 10rpx 10rpx 10rpx 10rpx;
		border: 1px solid $uni-border-color;
	}
	input{
		width:100%;
		border-bottom: 1px solid grey;
	}
}

收录于
项目实训

当前文章被收录于：

项目实训
10 篇文章 1 人学习

项目实训工作记录

订阅专栏 查看详情
标签
#vue.js
【从零搭建到实战运行】基于PX4-1.13与XTDrone的FAST-LIVO2 Gazebo仿真全流程解析 本文详细解析了从零开始搭建基于PX4-1.13飞控、XTDrone仿真框架与Gazebo的FAST-LIVO2无人机仿真平台的全流程。内容涵盖环境配置、Livox雷达插件定制、算法部署与参数调试，旨在帮助开发者快速构建完整的激光-惯性-视觉SLAM仿真环境，并解决集成过程中的常见问题。 阅读详情

相关推荐

CANoe：入门介绍

CANoe网络通信分析：CANoe用户可以在台架上或者车辆中分析ECU和整个系统的多总线通信。Trace窗口：用于列出所有总线活动，例如消息或错误帧。对于每条消息，都可以显示单独的信号值Graphics窗口：用于在时间轴上以图形方式在线显示消息和诊断请求中传输的值，例如rpm或温度值Statistics窗口：用于显示有用的网络和节点统计信息，例如节点和帧级别的总线负载、突发计数器/持续时间、帧和错误的计数器/速率、控制器状态Data窗口：用于显示预选数据，例如数字或条形图数据。

jasonj333 9624

山东大学软件学院创新实训——飞讯（四）

山东大学创新实训第4次记录

weixin_54533613的博客 1915

深圳市-地铁线路和站点名称shp矢量数据（精品）2021年-2030最新arcmap含规划路线.zip

包含2021年所有开通的地铁路线和站点，字段有路线名称和站点名称。还包含2020-2030年规划地铁。wgs84无偏移坐标。下载后直接用

如何将el-form-item 的label 的字体颜色修改为不同的颜色

用element的官方例子举例 比如要在活动名称后面加个括号(必填) 这种，颜色要写成红色， 但是 活动名称 是写在label中的 <el-form-item label="活动名称"> <el-input v-model="form.name"></el-input> </el-form-item> 改成下面这样的 代码如下 <el-form-item > <span slot="label">

c327127960的博客 2万+

小程序表单校验uni-forms正确使用方式及避坑指南

解决小程序上使用uni-forms表单验证的问题，实现即时校验、自定义校验规则、异步校验，满足绝大部分表单校验！

iamlujingtao的博客 2万+

修改element ui中form表单的 label 颜色样式

刚开始使用.el-form-item__label，但是使得所有的form下的labal都变色了。 .el-form-item__label{ color:#f56c6c; font-weight:bold; font-size:20px } 我只是想让下图的label变色 但下面也改变了颜色： 查询资料后，加上class=“item”,就能表示其唯一性，只在一个页面起作用 <el-form-item label="收款人姓名：" :label-width="fo

m0_67402774的博客 4006

Vue 中， 修改Iview form表单的默认样式

使用过Iview的应该都知道，iview的样式是锁定了的，不像bootstrap那样可以直接修改，刚开始的时候，使用iview的时候，想修改字体大小和颜色，真的很迷，网上的那些方法也试过，可惜无效 这里我是使用的 vue2 + iview3 比如我现在要修改Iview 的form表单中label标签的字体颜色，默认颜色和class 如下 之前我在网上搜的时候，大多方法都是如下 （...

qq1558456的博客 1万+

山东大学软件学院创新实训——飞讯（十）

山东大学创新实训第十次记录

weixin_54533613的博客 302

创新实训——飞讯（一）

一、项目简介 飞讯是一款为使小型团队作业更加便捷而设计的软件，包括单聊、群聊等功能。本人负责Windows端的开发。 二、第一周工作 采用QT开发，故第一周学习QT相关UI知识，包括可视化UI设计、代码化UI设计以及混合设计的方法；并了解了QT中基本的组件的用途和用法、样式表的写法等。 ............

leaf_er的博客 463

山东大学创新实训进度

进度记录

weixin_54533613的博客 440

山东大学软件学院创新实训——飞讯（八）

山东大学创新实训第8次记录

weixin_54533613的博客 428

山东大学软件学院创新实训——飞讯（一）

山东大学创新实训第一次记录

weixin_54533613的博客 517

创新实训——飞讯（六）

一、创建群聊界面 由于毫无经验，界面是参考教学视频编写的；基本步骤为编写结构、调整样式、编写功能等。 效果和部分代码如下： 设置了一个变量记录已选择的人数，判断所选人数大于0且输入了群名称（群名称长度大于0）后创建按钮才不为灰； <view class="bottom-btn btn1" :class="{notselected:selectedNumber<=0||groupname.length<=0}">创建({{selectedNumber}})</v

leaf_er的博客 251

创新实训——飞讯（二）

一、设计登录、注册界面 利用所学的QT知识，利用可视化设计了一个基础的界面； 由于QT窗口自带一个较为丑陋的边框，为了后续方便设计，调用相关函数去掉边框； //去掉边框 setWindowFlags(Qt::WindowType::FramelessWindowHint); 但是去掉边框后，界面便不可移动等，查询解决方法后，重写了鼠标按压事件和点击事件函数； //计算鼠标与窗口左上角差值 void Login::mousePressEvent(QMouseEvent *even

leaf_er的博客 412

创新实训——飞讯（七）

群聊相关im交互

leaf_er的博客 279

创新实训——飞讯（四）

由于组内人员调动原因，组长找了一个可以实现web、小程序、Android、ios的跨平台运行的框架uni-app，考虑到便利性，移动端的制作很重要，且该框架可以实现较多运行方式，考虑到时间因素和经验因素，故我和组长一起进行移动端的开发。PC端的制作内容会在本章内简单讲述，细节部分不再详谈，并暂停PC端开发，视后续情况再考虑是否继续。 目录 一、界面设计基础完善 1、聊天界面 2、注册界面 二、功能实现 1、登陆后拉取并展示所需数据 （1）拉取数据 （2）展示数据 一、界...

leaf_er的博客 185

创新实训——飞讯（八）

聊天界面

leaf_er的博客 224

山东大学软件学院创新实训——飞讯（六）

山东大学创新实训第6次记录

weixin_54533613的博客 2731

创新实训——飞讯（五）

如（四）中所说，之后为移动端开发相关内容； 目录 一、基础学习 二、编写修改弹框 一、基础学习 对于uni-app相关内容的学习，主要包括函数、组件样式设置等； 二、编写修改弹框 <view class="modify":style="{bottom:-+widHeight+'px'}" :animation="animationData"> <view class="modify-header"> <view class="c

leaf_er的博客 289

创新实训——飞讯（九）

聊天界面的im交互

leaf_er的博客 328

山东大学软件学院创新实训——飞讯（三）

山东大学创新实训第3次记录

weixin_54533613的博客 723
上一篇： 创新实训——飞讯（九）
点赞 0
评论 0
书签 书签 0
leaf_er
leaf_er
博客等级 码龄5年 0粉丝 · 24原创
+ 关注 专栏目录 订阅专栏
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值