This commit is contained in:
龙运模 2024-05-19 15:34:54 +08:00
parent ef313b9399
commit 04a8c08904
3 changed files with 129 additions and 124 deletions

64
App.vue
View File

@ -18,14 +18,14 @@
</script> </script>
<style lang="scss"> <style lang="scss">
/*每个页面公共css */ /* 每个页面公共css */
@import '@/uni_modules/uni-scss/index.scss'; @import '@/uni_modules/uni-scss/index.scss';
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
@import '@/static/customicons.css'; @import '@/static/customicons.css';
@import 'uni.scss'; @import 'uni.scss';
/* #endif */ /* #endif */
// /* 设置整个项目的背景色 */
page { page {
background-color: $uni-bg-color-default !important; background-color: $uni-bg-color-default !important;
color: $uni-text-color-inverse; color: $uni-text-color-inverse;
@ -37,15 +37,15 @@
} }
.page_padding{padding: 14px;} .page_padding{padding: 14px;}
.page_content{padding: 0 12px 10px;} .page_content{padding: 0 12px 10px;}
// /* 内容框 */
.contentboxsty{border-radius: 8px;background: $uni-bg-color-primary;} .contentboxsty{border-radius: 8px;background: $uni-bg-color-primary;}
// /* 没有底部边框 */
.noborbot{border-bottom:none !important} .noborbot{border-bottom:none !important}
.t-icon{background-repeat: no-repeat;} .t-icon{background-repeat: no-repeat;}
.icon22{width: 22px;height: 22px;} .icon22{width: 22px;height: 22px;}
// /* 字体大小 */
.font12{font-size: 12px;} .font12{font-size: 12px;}
.font13{font-size: 13px;} .font13{font-size: 13px;}
.font14{font-size: 14px;} .font14{font-size: 14px;}
@ -57,17 +57,17 @@
.font35{font-size: 35px;} .font35{font-size: 35px;}
.font_bold{font-weight: bold;} .font_bold{font-weight: bold;}
// /* 文字颜色 */
.text_color_black{color: $uni-text-color-default;} .text_color_black{color: $uni-text-color-default;}
.theme_color{color: $uni-text-color-primary } //绿 .theme_color{color: $uni-text-color-primary } //绿
// /* 按钮颜色 */
.but_color{background: $uni-color-primary !important;} .but_color{background: $uni-color-primary !important;}
// /* 布局 */
.flex_layout{display: flex;} .flex_layout{display: flex;}
.flex1{flex: 1;} .flex1{flex: 1;}
.comView{flex: 1;overflow: hidden;} .comView{flex: 1;overflow: hidden;}
//paddind /* paddind */
.padd_rigth5{padding-right: 5px;} .padd_rigth5{padding-right: 5px;}
.padd_bot6{padding-bottom: 6px;} .padd_bot6{padding-bottom: 6px;}
.padd_top12{padding-top:12px;} .padd_top12{padding-top:12px;}
@ -75,12 +75,12 @@
.padd_bot12{padding-bottom: 12px;} .padd_bot12{padding-bottom: 12px;}
.padd_left12{padding-left:12px;} .padd_left12{padding-left:12px;}
.padd12{padding: 12px;} .padd12{padding: 12px;}
//margin /* margin */
.mar_top12{margin-top: 12px;} .mar_top12{margin-top: 12px;}
.mar_bot12{margin-bottom: 12px;} .mar_bot12{margin-bottom: 12px;}
.page_list{margin-bottom: 12px;padding:0 12px;} .page_list{margin-bottom: 12px;padding:0 12px;}
// /* 有详情的列表 */
.detail_list{ .detail_list{
margin-bottom: 12px; margin-bottom: 12px;
.list_top{ .list_top{
@ -132,11 +132,11 @@
.flexBox .detail_list:first-child{ .flexBox .detail_list:first-child{
margin-top: 2px; margin-top: 2px;
} }
// /* 检索固定 */
.headerViewFixed{ .headerViewFixed{
background: $uni-bg-color-default; background: $uni-bg-color-default;
} }
// /* 页面固定按钮 */
.bottom_but{ .bottom_but{
width: 100%; width: 100%;
position: fixed; position: fixed;
@ -147,7 +147,7 @@
height: 80px; height: 80px;
view{width: 50%;text-align: center;margin: 0 20px;border-radius: 19px;background: #DDD;line-height: 38px;height: 38px;margin-top: 6px;} view{width: 50%;text-align: center;margin: 0 20px;border-radius: 19px;background: #DDD;line-height: 38px;height: 38px;margin-top: 6px;}
} }
// /* 底部固定添加按钮 */
.page_bottom_button{ .page_bottom_button{
width: 100%;position: fixed;bottom: 0px;background-color: #060B26;border-top: 1px solid #2E3249;height: 80px; width: 100%;position: fixed;bottom: 0px;background-color: #060B26;border-top: 1px solid #2E3249;height: 80px;
.page_add{display:flex;justify-content:center;align-items: center;margin: 7px 20px;border-radius: 17.5px;background: #1C2755;height: 38px;} .page_add{display:flex;justify-content:center;align-items: center;margin: 7px 20px;border-radius: 17.5px;background: #1C2755;height: 38px;}
@ -160,7 +160,7 @@
font-size: 14px; font-size: 14px;
} }
// /* 圆形进度条 */
.progressBg{ .progressBg{
position: absolute; position: absolute;
left: 2px; left: 2px;
@ -207,7 +207,7 @@
background-image: conic-gradient($uni-color-primary 0%, $uni-color-primary var(--progress), transparent 0); background-image: conic-gradient($uni-color-primary 0%, $uni-color-primary var(--progress), transparent 0);
} }
// /* 选择日期时间颜色的配置 */
.input_date .uni-date-x .uni-date__x-input{ .input_date .uni-date-x .uni-date__x-input{
color: $uni-text-color-tip; color: $uni-text-color-tip;
} }
@ -215,11 +215,41 @@
color: $uni-text-color-inverse; color: $uni-text-color-inverse;
} }
// /* 修改 日期时间选择组件 */
.input_date ::v-deep .uni-date-changed .uni-datetime-picker--btn{ .input_date ::v-deep .uni-date-changed .uni-datetime-picker--btn{
background: $uni-color-primary !important; background: $uni-color-primary !important;
} }
.input_date ::v-deep .uni-calendar-item--checked{ .input_date ::v-deep .uni-calendar-item--checked{
background: $uni-color-primary !important; background: $uni-color-primary !important;
} }
/* 自定义 复选框-背景颜色 */
checkbox.checkbox-custom[checked] .wx-checkbox-input , checkbox.checkbox-custom.checked .uni-checkbox-input{
background-color: $uni-color-primary;
border-color: $uni-color-primary;
color: $uni-text-color-inverse;
}
::v-deep .checkbox_indeterminate::before{
content: '';
position: absolute;
top: 50%;
left: calc(50% - 2px);
z-index: 80;
transform: translate(-50%,-50%);
width: 12px;
height: 2px;
border-radius: 4px;
background: $uni-bg-color-whith;
}
::v-deep .checkbox_indeterminate::after {
content: "";
position: absolute;
top: 0;
left: 0;
z-index: 10;
width: calc(100% - 5px);
height: 100%;
border-radius: 3px;
background-color: $uni-color-primary;
}
</style> </style>

View File

@ -5,14 +5,14 @@
<view class="data_name">头像</view> <view class="data_name">头像</view>
<view class=""> <view class="">
<button class="person_button" open-type="chooseAvatar" @chooseavatar='onChooseAvatar'> <button class="person_button" open-type="chooseAvatar" @chooseavatar='onChooseAvatar'>
<image class="person_logo" :src="avatarUrl"></image> <image class="person_logo" :src="avatarUrl" mode="aspectFill"></image>
</button> </button>
</view> </view>
</view> </view>
<view class="content_box"> <view class="content_box">
<view class="data_name">真实姓名</view> <view class="data_name">真实姓名</view>
<view class=""> <view class="">
> <text class="iconfont icon-gengduo"></text>
</view> </view>
</view> </view>
<view class="content_box noborbot"> <view class="content_box noborbot">
@ -58,7 +58,7 @@
</template> </template>
<script> <script>
const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'; const defaultAvatarUrl = 'https://dm-auto.oss-cn-shanghai.aliyuncs.com/mes_wechat/avatar.png';
export default { export default {
data() { data() {

View File

@ -1,39 +1,31 @@
<template> <template>
<view class="page_padding"> <view class="page_padding checkbox-container">
<!-- <checkbox-group @change="checkboxChange">
<label class="uni-list-cell uni-list-cell-pd" v-for="item in items" :key="item.value">
<view>
<checkbox :value="item.value" :checked="item.checked" />
</view>
<view>{{item.name}}</view>
</label>
</checkbox-group> -->
<view class="contentboxsty" v-for="(item, index) in list" :key="index.id"> <view class="contentboxsty" v-for="(item, index) in list" :key="index.id">
<view class="list_name"> <view class="list_name listItem">
<checkbox-group @change="changeCheckbox"> <checkbox-group @change="changeCheckbox">
<checkbox value="cb" class="checkbox-backgroun-yellow" :value="item.id" :checked="item.checked" style="transform:scale(0.7)" /> <label>
<checkbox class="checkbox-custom" :class="{ 'checkbox_indeterminate': item.indeterminate }" :value="item.id" :checked="item.checked" style="transform:scale(0.6)" />
<text class="font14">{{item.name}}</text>
</label>
</checkbox-group> </checkbox-group>
<!-- <checkbox-group @change="selectPath(e,item)">
<checkbox value="cb" class="checkbox-backgroun-yellow" :value="item.id" :checked="item.checked" style="transform:scale(0.7)" />
</checkbox-group> -->
<!-- <text class="t-icon t-icon-xuanzhong padd_rigth12" @click="selectPath($event.target,item)"></text> -->
{{item.name}}{{item.checked}}
</view> </view>
<view class="list_content" v-for="(i, ind) in item.child" :key="ind"> <view class="list_content listItem padd_bot12" v-for="(i, ind) in item.child" :key="ind">
<view class="content_name"> <view class="content_name">
<checkbox-group @change="selectPath(e,i)"> <checkbox-group @change="selectPath(item,i)">
<checkbox value="cb" class="checkbox-backgroun-yellow" :value="i.id" :checked="i.checked" style="transform:scale(0.7)" /> <label>
<checkbox class="checkbox-custom" :class="{ 'checkbox_indeterminate': i.indeterminate }" :value="i.id" :checked="i.checked" style="transform:scale(0.6)" />
<text class="font14">{{i.name}}</text>
</label>
</checkbox-group> </checkbox-group>
<!-- <text class="t-icon t-icon-xuanzhong padd_rigth5"></text> -->
<text class="">{{i.name}}</text>
</view> </view>
<view class="content_item"> <view class="content_item">
<view class="content_data" v-for="(btn, inx) in i.child" :key="inx"> <view class="content_data" v-for="(btn, inx) in i.child" :key="inx">
<checkbox-group @change="selectPath(e,i)"> <checkbox-group @change="selectPath(item,i,inx)">
<checkbox value="cb" class="checkbox-backgroun-yellow" :value="btn.id" :checked="btn.checked" style="transform:scale(0.7)" /> <label>
<checkbox class="checkbox-custom" :class="{ 'checkbox_indeterminate': btn.indeterminate }" :value="btn.id" :checked="btn.checked" style="transform:scale(0.6)" />
<text class="font14">{{btn.name}}</text>
</label>
</checkbox-group> </checkbox-group>
<!-- <text class="t-icon t-icon-xuanzhong padd_rigth5"></text> -->
<text class="">{{btn.name}}</text>
</view> </view>
</view> </view>
</view> </view>
@ -45,60 +37,61 @@
export default { export default {
data() { data() {
return { return {
items: [{ list:[
value: 'USA', {
name: '美国' id:1,name:'首页',checked:true,indeterminate:true,
child:[
{
id: 2,name:'控制台',checked:true,indeterminate:true,
child:[
{id:121,name:'设备信息',checked:true,},
{id:122,name:'生产加工信息',checked:true,},
{id:123,name:'设备能耗信息',},
],
},
{
id:124,name:'账号信息',
child:[
{id:125,name:'通知设置',},
{id:126,name:'升级角色'},
]
}
],
}, },
{ {
value: 'CHN', id:11,name:'生产工单',
name: '中国', child:[
checked: 'true' {
}, id: 3,name:'待生产工单',
{ child:[
value: 'BRA', {name:'添加工单',id:31},
name: '巴西' {name:'审核工单',id:32},
}, {name:'删除工单',id:33},
{ {name:'撤回工单',id:34},
value: 'JPN', ],
name: '日本' },
}, {
{ id:4,name:'已排产工单',
value: 'ENG', child:[],
name: '英国'
},
{
value: 'FRA',
name: '法国'
}
],
list:[
{name:'首页',checked:true,id:1,child:[{
id: 2,
name:'控制台',
checked:true,
child:[
{id:121,name:'设备信息',},
{id:122,name:'生产加工信息',},
{id:123,name:'生产加工信息',},
{id:124,name:'账号信息',},
{id:125,name:'通知设置',},
{id:126,name:'升级角色'},],
}, },
], ],
}, },
// {name:'',id:11,child:[{ {
// id: 3, id:12,name:'生产排程',
// name:'', child:[
// child:[{name:''}, {
// {name:''}, id: 4,name:'工单排程表',
// {name:''}, child:[
// ], {name:'创建生产计划',id:41},
// }, {name:'修改生产计划',id:42},
// {name:'', {name:'拆分生产计划',id:43},
// child:[], {name:'删除生产计划',id:44},
// }, {name:'创建计划依赖',id:45},
// ], {name:'删除计划依赖',id:46},
// } ],
},
]
}
], ],
arr:[] arr:[]
} }
@ -115,44 +108,26 @@
this.$set(item,'checked',false) this.$set(item,'checked',false)
} }
} }
console.log(items)
},
changeCheckbox(e){
console.log(e)
// var items = this.list,
// values = e.detail.value;
// for (var i = 0, lenI = items.length; i < lenI; ++i) {
// const item = items[i]
// if(values.includes(item.value)){
// this.$set(item,'checked',true)
// }else{
// this.$set(item,'checked',false)
// }
// }
// console.log(items) // console.log(items)
}, },
changeCheckbox(e){
// console.log(e)
},
selectPath(e,item){ selectPath(e,item){
console.log(e,item,222) // console.log(e,item,222)
}, },
} }
} }
</script> </script>
<style> <style scoped lang="scss">
.contentboxsty{padding: 14px 12px;margin-bottom: 12px;} .contentboxsty{padding: 14px 12px;margin-bottom: 12px;}
.list_name{display: flex;align-items: center;padding-bottom: 7px;border-bottom: 1px solid #2D3A6F;} .contentboxsty .listItem:last-child{padding-bottom: 0;}
.list_name{display: flex;align-items: center;padding-bottom: 7px;border-bottom: 1px solid $uni-border-color-primary;}
.content_name{padding:8px 0 ;display: flex;align-items: center;} .content_name{padding:8px 0 ;display: flex;align-items: center;}
.content_item{display: flex;align-items: center;flex-wrap: wrap;} .content_item{display: flex;align-items: center;flex-wrap: wrap;}
.content_data{padding: 4px 15px 4px 0;display: flex;align-items: center;} .content_data{padding: 4px 15px 4px 0;display: flex;align-items: center;}
/* 复选框-背景颜色 */
checkbox.checkbox-backgroun-yellow[checked] .wx-checkbox-input,
checkbox.checkbox-backgroun-yellow.checked .uni-checkbox-input{
background-color: #009688 !important;
border-color: #009688 !important;
color: #ffffff !important;
}
</style> </style>