提交 1cd1fd0d 编写于 作者: M m0_74163447

修改界面

上级 3abab024
<template>
<view class="main">
<view class="modify">
<image class="modify-icon" src="/static/my/main/modify-icon.png"></image>
</view>
......@@ -50,14 +49,14 @@
<script>
export default {
data () {
return {
nickname:'王二蛋',
schoolName:'福州大学',
teamName:'must go',
point:'1250',
}
}
data () {
return {
nickname:'王二蛋',
schoolName:'福州大学',
teamName:'must go',
point:'1250'
}
}
}
</script>
......@@ -74,10 +73,10 @@
}
.modify-icon{
margin-top: 30rpx;
margin-left: 84%;
width: 100rpx;
height: 100rpx;
margin-top: 50rpx;
margin-left: 85%;
width: 70rpx;
height: 70rpx;
}
.info{
......@@ -90,9 +89,9 @@
.head-portrait {
margin-top: 50rpx;
margin-left: 20%;
width: 150rpx;
height: 150rpx;
margin-left: 15%;
width: 200rpx;
height: 200rpx;
border-radius: 50%;
background-size:100% 100%;
background-image:url("/static/my/main/head-portrait.png") ;
......@@ -103,19 +102,19 @@
width: 250rpx;
height: 50rpx;
font-size: 30rpx;
font-size: 60rpx;
text-align: left;
float: right;
margin-top: 100rpx;
margin-right: 150rpx;
margin-right: 100rpx;
}
.info2{
border-radius: 20rpx;
background-color: #FFFFFF;
width:65%;
width:75%;
height: 60%;
margin-top: 20px;
margin-top: 50px;
margin-left: auto;
margin-right: auto;
}
......@@ -126,8 +125,8 @@
}
.school-icon{
width: 50rpx;
height: 50rpx;
width: 70rpx;
height: 70rpx;
margin-top: 50rpx;
margin-left: 50rpx;
background-size:100% 100%;
......@@ -137,11 +136,11 @@
}
.school-name{
width: 300rpx;
height: 50rpx;
margin-top: 50rpx;
margin-right: 50rpx;
font-size: 30rpx;
width: 320rpx;
height: 30rpx;
margin-top: 60rpx;
margin-right: 55rpx;
font-size: 35rpx;
text-align: left;
float: right;
}
......@@ -151,8 +150,8 @@
}
.team-icon{
width: 50rpx;
height: 50rpx;
width: 70rpx;
height: 70rpx;
margin-top: 50rpx;
margin-left: 50rpx;
background-size:100% 100%;
......@@ -162,11 +161,11 @@
}
.team-name{
width: 300rpx;
height: 50rpx;
margin-top: 50rpx;
margin-right: 50rpx;
font-size: 30rpx;
width: 320rpx;
height: 30rpx;
margin-top: 60rpx;
margin-right: 55rpx;
font-size: 35rpx;
text-align: left;
float: right;
}
......@@ -176,8 +175,8 @@
}
.point-icon{
width: 50rpx;
height: 50rpx;
width: 70rpx;
height: 70rpx;
margin-top: 50rpx;
margin-left: 50rpx;
background-size:100% 100%;
......@@ -187,17 +186,18 @@
}
.point-num{
width: 300rpx;
height: 50rpx;
margin-top: 50rpx;
margin-right: 50rpx;
font-size: 30rpx;
width: 320rpx;
height: 30rpx;
margin-top: 60rpx;
margin-right: 55rpx;
font-size: 35rpx;
text-align: left;
float: right;
}
.func{
width:65%;
width:75%;
margin-top: 30rpx;
margin-left: auto;
margin-right: auto;
display: flex;
......@@ -207,13 +207,13 @@
}
.my-post{
width:150rpx;
width:200rpx;
height: 250rpx;
}
.my-post-icon{
width: 70rpx;
height: 70rpx;
width: 100rpx;
height: 100rpx;
margin-top: 50rpx;
margin-left: auto;
margin-right: auto;
......@@ -223,13 +223,13 @@
}
.running-record{
width:150rpx;
width:200rpx;
height: 250rpx;
}
.running-record-icon{
width: 70rpx;
height: 70rpx;
width: 100rpx;
height: 100rpx;
margin-top: 50rpx;
margin-left: auto;
margin-right: auto;
......@@ -239,13 +239,13 @@
}
.setting{
width:150rpx;
width:200rpx;
height: 250rpx;
}
.setting-icon{
width: 70rpx;
height: 70rpx;
width: 100rpx;
height: 100rpx;
margin-top: 50rpx;
margin-left: auto;
margin-right: auto;
......@@ -255,13 +255,13 @@
}
.reset-password{
width:150rpx;
width:200rpx;
height: 250rpx;
}
.reset-password-icon{
width: 70rpx;
height: 70rpx;
width: 100rpx;
height: 100rpx;
margin-top: 50rpx;
margin-left: auto;
margin-right: auto;
......
......@@ -9,19 +9,19 @@
<view class="info">
<veiw class="nickname">
<span>用户名:</span>
<input type="text" :value="nickname" :valplaceholder='请输入用户名'></input>
<input type="text" :value="nickname" placeholder="请输入用户名"></input>
</veiw>
<veiw class="school">
<span>&emsp;校:</span>
<select-lay class="seclectSchool" :value="school" slabel="type" svalue="typeid" placeholder="请选择学校" :options="allSchool" @selectitem="selectitem"></select-lay>
<select-lay class="seclect-school" slabel="type" :value="school" svalue="typeid" placeholder="请选择学校" :options="allSchool" @selectitem="selectitem"></select-lay>
</veiw>
<veiw class="tel">
<span>手机号:</span>
<input type="number" :value="tel" :vaplaceholder='请输入手机号'></input>
<input type="number" :value="tel" placeholder="请输入手机号"></input>
</veiw>
<veiw class="gender">
<span>&emsp;别:</span>
<radio-group @change="change">
<radio-group>
<label>
<radio :value="'0'" checked="checked" />
<radio :value="'1'" />
......@@ -40,8 +40,8 @@
data() {
return {
schoolChannelid:'',
school:'',
nickname:'王二蛋',
school:'福州大学',
tel:'15305986885',
allSchool: [{
type: '福州大学',
......@@ -105,7 +105,7 @@
width: 70rpx;
height: 70rpx;
margin-top: 50rpx;
margin-left: 50rpx;
margin-left: 20rpx;
background-size:100% 100%;
background-image:url("/static/my/exit-icon.png");
background-repeat:no-repeat;
......@@ -151,6 +151,9 @@
width: 100%;
border-bottom: 1px solid #ccc;
}
.seclect-school{
width: 73%;
}
.tel{
height: 15%;
......@@ -176,6 +179,7 @@
color: #FFFFFF;
width:70%;
height: 85rpx;
line-height: 85rpx;
margin-top: 100rpx;
margin-left: auto;
margin-right: auto;
......
......@@ -67,18 +67,20 @@
width: 70rpx;
height: 70rpx;
margin-top: 50rpx;
margin-left: 50rpx;
margin-left: 20rpx;
background-size:100% 100%;
background-image:url("/static/my/exit-icon.png");
background-repeat:no-repeat;
}
.content{
font-size: 25rpx;
width:70%;
margin-top: 50%;
margin-left: auto;
margin-right: auto;
}
.password{
font-size: 25rpx;
margin-top: 50rpx;
height: 15%;
display: flex;
......@@ -95,6 +97,7 @@
color: #FFFFFF;
width:70%;
height: 85rpx;
line-height: 85rpx;
margin-top: 100rpx;
margin-left: auto;
margin-right: auto;
......
......@@ -180,6 +180,7 @@
color: #FFFFFF;
width:70%;
height: 85rpx;
line-height: 85rpx;
margin-top: 50rpx;
margin-left: auto;
margin-right: auto;
......
## 1.3.8(2022-01-18)
修复了一些小问题,应该...没问题了吧。。。
## 1.3.7(2022-01-14)
修复了个bug,该bug导致:手机端使用时,当获取焦点方式展开列表,列表无法滑动
## 1.3.6(2021-09-22)
修改了插件部分内部元素,防止该组件在app端时,滑动穿透。
## 1.3.5(2021-09-22)
【禁用组件】提示更明显了。新增了【正在搜索...】提示。添加了事件修饰.stop ,不知道是否能解决有事件穿透行为的bug。ps:我还没遇到这个问题,烦!
## 1.3.4(2021-09-10)
修改插件为uni_modules目录结构
{
"id": "select-lay",
"dcloudext": {
"category": [
"前端组件",
"通用组件"
],
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "插件不采集任何数据",
"permissions": "无"
},
"npmurl": ""
},
"displayName": "select-lay",
"version": "1.3.8",
"description": "简单的下拉选择插件",
"keywords": [
"select",
"下拉",
"选择"
],
"repository": "",
"engines": {
"HBuilderX": "^3.0.7"
},
"uni_modules": {
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"Vue": {
"vue2": "y",
"vue3": "u"
},
"App": {
"app-vue": "y",
"app-nvue": "n"
},
"H5-mobile": {
"Safari": "y",
"Android Browser": "y",
"微信浏览器(Android)": "y",
"QQ浏览器(Android)": "y"
},
"H5-pc": {
"Chrome": "y",
"IE": "u",
"Edge": "u",
"Firefox": "y",
"Safari": "y"
},
"小程序": {
"微信": "y",
"阿里": "y",
"百度": "y",
"字节跳动": "y",
"QQ": "y"
},
"快应用": {
"华为": "u",
"联盟": "u"
}
}
}
}
}
## 插件使用方法:
`<select-lay :value="tval" name="name" :options="datalist" @selectitem="selectitem"></select-lay>`
## 配置参数:
属性名|类型|默认值|说明
:--:|:--:|:--:|-
value|String|""|默认展示的value值
name|String|""|input的字段名
zindex|Number|""|层级,默认999,防止多个组件一起使用时下拉栏穿透
slabel|String|label|自定义列表中键值对关系,参考示例
svalue|String|value|自定义列表中键值对关系,该值对应value,参考示例
placeholder|String|请选择|无选项时展示的文字
showplaceholder|Boolean|true|下拉时是否展示请选择按钮
options|Array|无|数据列表
disabled|Boolean|false|是否禁用
## 事件:
事件名|说明|返回值
:--:|:--:|-
@selectitem|点击项目触发的事件|参数 (索引,具体项目)
## 说明:
此插件依赖scss,请务必安装!!!
## 示例:
```
<template>
<view class="content">
<form @submit="formSubmit">
<view class="item">通用写法:</view>
<select-lay :zindex="1211" :value="tval" name="name" placeholder="请选择项目" :options="datalist"
@selectitem="selectitem">
</select-lay>
<view style="height:40rpx"></view>
<view class="item">禁用组件:</view>
<select-lay :zindex="1111" :value="tval2" name="name2" placeholder="请选择项目2" :options="datalist2"
:disabled="true">
</select-lay>
<view style="height:40rpx"></view>
<view class="item">自定义数据索引对象:</view>
<select-lay :value="tval3" name="name3" slabel="myname" svalue="myvalue" placeholder="请选择项目3"
:options="datalist3" @selectitem="selectitem3">
</select-lay>
<view style="height:40rpx"></view>
<view class="item">取消下拉默认展示的提醒按钮</view>
<select-lay :value="tval4" name="name4" placeholder="请选择项目4" :showplaceholder="false" :options="datalist4" @selectitem="selectitem4">
</select-lay>
<button class="btn" form-type="submit">Submit</button>
</form>
</view>
</template>
<script>
export default {
data() {
return {
//模拟数据列表
datalist: [],
//模拟初始数据
tval: "value2",
//模拟数据列表
datalist2: [],
//模拟初始数据
tval2: "2value1",
//模拟数据列表
datalist3: [],
//模拟初始数据
tval3: "myvalue1",
//模拟数据列表
datalist4: [],
//模拟初始数据
tval4: "4value1"
}
},
onReady() {
this.datalist = [{
label: "label1",
value: "value1"
},
{
label: "label2",
value: "value2"
},
{
label: "label3",
value: "value3"
}
];
this.datalist2 = [{
label: "2label1",
value: "2value1"
},
{
label: "2label2",
value: "2value2"
},
{
label: "2label3",
value: "2value3"
}
];
this.datalist3 = [{
myname: "我是myname1",
myvalue: "myvalue1"
},
{
myname: "我是myname2",
myvalue: "myvalue2"
},
{
myname: "我是myname3",
myvalue: "myvalue3"
},
{
myname: "我是myname4",
myvalue: "myvalue4"
}
];
this.datalist4 = [{
label: "4label1",
value: "4value1"
},
{
label: "4label2",
value: "4value2"
},
{
label: "4label3",
value: "4value3"
}
];
},
methods: {
formSubmit(e) {
console.log('form发生了submit事件,携带数据为:' + JSON.stringify(e.detail.value))
},
selectitem(index, item) {
console.log(item)
if (index >= 0) {
this.tval = item.value;
} else {
this.tval = ""
}
},
selectitem3(index, item) {
console.log(item)
if (index >= 0) {
this.tval3 = item.myvalue;
} else {
this.tval3 = ""
}
},
selectitem4(index, item) {
console.log(item)
if (index >= 0) {
this.tval4 = item.value;
} else {
this.tval4 = ""
}
}
}
}
</script>
```
\ No newline at end of file
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册