<template>
|
<!-- 表单数据 -->
|
<view class="the-form-data">
|
<view class="formData">
|
<view class="formData-row">
|
<view class="formData-row_input">
|
<text>字段标题</text>
|
<u--input
|
placeholder="请输入内容"
|
border="surround"
|
v-model="value"
|
@change="change"
|
></u--input>
|
</view>
|
<view class="formData-row_input">
|
<text>字段标题</text>
|
<u--input
|
placeholder="请输入内容"
|
border="surround"
|
v-model="value"
|
@change="change"
|
></u--input>
|
</view>
|
</view>
|
<view class="formData-row">
|
<view class="formData-row_input">
|
<text>字段标题</text>
|
<u--input
|
placeholder="请输入内容"
|
border="surround"
|
v-model="value"
|
@change="change"
|
></u--input>
|
</view>
|
<view class="formData-row_input">
|
<text>字段标题</text>
|
<u--input
|
placeholder="请输入内容"
|
border="surround"
|
v-model="value"
|
@change="change"
|
></u--input>
|
</view>
|
</view>
|
<view class="formData-row">
|
<view class="formData-row_textarea">
|
<text>字段标题</text>
|
<u--textarea height="130" v-model="value1" placeholder="请输入内容" ></u--textarea>
|
</view>
|
</view>
|
</view>
|
<view class="dataTable">
|
<uni-table border stripe emptyText="暂无更多数据">
|
<!-- 表格数据行 -->
|
<uni-tr>
|
<uni-th align="center">字段标题</uni-th>
|
<uni-th align="center">字段标题</uni-th>
|
</uni-tr>
|
<uni-tr>
|
<uni-td align="center">字段标题</uni-td>
|
<uni-td align="center">字段标题</uni-td>
|
</uni-tr>
|
<uni-tr>
|
<uni-th align="center">字段标题</uni-th>
|
<uni-th align="center">字段标题</uni-th>
|
</uni-tr>
|
<uni-tr>
|
<uni-td align="center">字段标题</uni-td>
|
<uni-td align="center">字段标题</uni-td>
|
</uni-tr>
|
<uni-tr>
|
<uni-th align="center">字段标题</uni-th>
|
<uni-th align="center">字段标题</uni-th>
|
</uni-tr>
|
<uni-tr>
|
<uni-td align="center">字段标题</uni-td>
|
<uni-td align="center">字段标题</uni-td>
|
</uni-tr>
|
</uni-table>
|
</view>
|
|
<!-- 菜单栏 -->
|
<popup-menu @menuShow="menushow" ref="menuRef"></popup-menu>
|
</view>
|
</template>
|
|
<script>
|
import popupMenu from '@/components/common/popup-menu/popup-menu.vue';
|
export default {
|
data() {
|
return {
|
value:'',
|
value1:'',
|
model1: {
|
userInfo: {
|
name: ''
|
}
|
},
|
menuShow:false
|
};
|
},
|
onShow(){
|
if(this.menuShow == true){
|
this.$refs.menuRef.menuClick()
|
}
|
},
|
// 点击导航栏菜单后
|
onNavigationBarButtonTap(e) {
|
// console.log(e);
|
this.$refs.menuRef.menuClick()
|
},
|
components:{
|
popupMenu
|
},
|
methods:{
|
menushow(e){
|
this.menuShow = e
|
}
|
}
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.the-form-data {
|
// 表单
|
.formData{
|
width:91%;
|
margin:vww(16) auto 0;
|
.formData-row{
|
margin-top:vww(16);
|
display:flex;
|
justify-content: space-between;
|
.formData-row_input{
|
width:47%;
|
.u-input{
|
margin-top:vww(10);
|
}
|
text{
|
font-size:vww(13);
|
}
|
}
|
.formData-row_textarea{
|
width:100%;
|
.u-textarea{
|
margin-top:vww(10);
|
}
|
text{
|
font-size: vww(13);
|
}
|
}
|
}
|
}
|
// 表格
|
.dataTable{
|
width:91%;
|
margin:vww(48) auto 0;
|
.uni-table{
|
.uni-table-tr{
|
.uni-table-th{
|
background-color: #F5F5F5;
|
font-size:vww(13);
|
color:#111111;
|
font-weight: 500;
|
}
|
.uni-table-td{
|
background-color: #FFFFFF;
|
font-size:vww(13);
|
color:#111111;
|
}
|
}
|
}
|
}
|
|
|
|
|
// 表单
|
// .u-form{
|
// .u-form-item{
|
// .u-form-item__body{
|
// .u-form-item__body__left{
|
// .u-form-item__body__left__content{
|
// .u-form-item__body__left__content__label{
|
|
// }
|
// }
|
// }
|
// .u-form-item__body__right{
|
// .u-form-item__body__right__content{
|
// .u-form-item__body__right__content__slot{
|
// .u-input {
|
// .u-input__content{
|
// .u-input__content__field-wrapper{
|
|
// }
|
// }
|
// }
|
// }
|
// }
|
// }
|
// }
|
// }
|
// }
|
|
|
}
|
</style>
|
