test
<template>
<view class="content">
<view class="position-group">
<!-- 一级循环 -->
<view class="pronames_one" v-for="(item,index) in positionlist" :key="index"
:class="item.oneliststare?'oneshow':'onehide'">
<view class="pronames-one-label" @click="onelist(index)">
<view class="pronames-one-option" @click.stop="oneListSe(item)">
<label :class="item.isOneSele?'cuIcon-round':'cuIcon-roundcheckfill'"></label>
<text>{{item.onename}}</text>
</view>
<label :class="item.oneliststare?'cuIcon-fold':'cuIcon-unfold'"></label>
</view>
<!-- 二级循环 -->
<view class="pronames_two" v-for="(item2,index2) in item.positiontwo" :key="index2"
:class="item2.twoliststare?'twoshow':'twohide'">
<view class="pronames-two-label" @click="twolist(index,index2)">
<view class="pronames-two-option" @click.stop="twoListSe(item,item2)">
<label :class="item2.isTwoSele?'cuIcon-round':'cuIcon-roundcheckfill'"></label>
<text>{{item2.twoname}}</text>
</view>
<label :class="item2.twoliststare?'cuIcon-fold':'cuIcon-unfold'"></label>
</view>
<view class="pronames_three">
<!-- 三级循环 -->
<view class="pronames_three-label" v-for="(item3,index3) in item2.positionthree" :key="index3"
@click="threeListSe(item,item2,item3)">
<label :class="item3.isThreeSele?'cuIcon-round':'cuIcon-roundcheckfill'"></label>
<text>{{item3.threename}}</text>
</view>
</view>
</view>
</view>
</view>
<view class="foot-utn">
<button type="primary" @click="getlocation">获取经纬度</button>
<button type="primary" @click="submit">确认选择</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
positionlist: [{
id: 0,
onename: "销售|客服|市场",
oneliststare: false, // 是否展开二级
isOneSele: false, // 当前第一级是否全部选中
isOneTain: false, // 当前第一级是否有选中的
positiontwo: [{
twoid: 0,
twoname: "销售业务",
twoliststare: false, // 是否展开三级
isTwoSele: false, // 当前第二级是否全部选中
isTwoTain: false, // 当前第二级是否有选中的
positionthree: [{
trheeid: 0,
threename: "销售代表",
isThreeSele: false, // 当前第三级是否选中
}, {
trheeid: 0,
threename: "客户代表",
isThreeSele: false
}, {
trheeid: 0,
threename: "销售顾问",
isThreeSele: false
}]
}, {
twoid: 1,
twoname: "销售管理",
twoliststare: false,
isTwoSele: false,
isTwoTain: false,
positionthree: [{
trheeid: 0,
threename: "销售主管",
isThreeSele: false
}, {
trheeid: 0,
threename: "销售经理",
isThreeSele: false
}, {
trheeid: 0,
threename: "销售总监",
isThreeSele: false
}]
}]
}, {
id: 1,
onename: "IT|互联网|通信",
oneliststare: false,
isOneSele: false,
isOneTain: false, // 是否有选中的
positiontwo: [{
twoid: 0,
twoname: "软件/互联网开发/系统集成",
twoliststare: false,
isTwoSele: false,
isTwoTain: false,
positionthree: [{
trheeid: 0,
threename: "软件工程师",
isThreeSele: false
}, {
trheeid: 1,
threename: "软件研发工程师",
isThreeSele: false
}, {
trheeid: 2,
threename: "高级软件工程师",
isThreeSele: false
}]
}, {
twoid: 1,
twoname: "互联网产品/运营管理",
twoliststare: false,
isTwoSele: false,
isTwoTain: false,
positionthree: [{
trheeid: 0,
threename: "网店客服",
isThreeSele: false
}, {
trheeid: 1,
threename: "网店运营",
isThreeSele: false
}, {
trheeid: 2,
threename: "网店管理员",
isThreeSele: false
}]
}]
}]
}
},
onLoad() {},
methods: {
// 获取地图定位
getlocation() {
console.log(111111111111);
// return
let system = uni.getSystemInfoSync();
if(system.platform == "android") {
console.log("android");
var context = plus.android.importClass("android.content.Context");
var locationManager = plus.android.importClass("android.location.LocationManager");
var main = plus.android.runtimeMainActivity();
var mainSvr = main.getSystemService(context.LOCATION_SERVICE);
if (!mainSvr.isProviderEnabled(locationManager.GPS_PROVIDER)) {
uni.showModal({
title: '提示',
content: '请打开定位服务功能',
showCancel: false, // 不显示取消按钮
success() {
if (!mainSvr.isProviderEnabled(locationManager.GPS_PROVIDER)) {
var Intent = plus.android.importClass('android.content.Intent');
var Settings = plus.android.importClass('android.provider.Settings');
var intent = new Intent(Settings.ACTION_LOCATION_SOURCE_SETTINGS);
main.startActivity(intent); // 打开系统设置GPS服务页面
} else {
console.log('GPS功能已开启');
}
}
});
}
} else if(system.platform == "ios") {
console.log("ios");
var cllocationManger = plus.ios.import("CLLocationManager");
var enable = cllocationManger.locationServicesEnabled();
var status = cllocationManger.authorizationStatus();
plus.ios.deleteObject(cllocationManger);
if (enable && status != 2) {
console.log("手机系统的定位已经打开");
} else {
console.log("手机系统的定位没有打开");
uni.showModal({
title: '提示',
content: '请打开定位服务功能',
showCancel: false, // 不显示取消按钮
success() {
var UIApplication = plus.ios.import("UIApplication");
var application2 = UIApplication.sharedApplication();
var NSURL2 = plus.ios.import("NSURL");
// var setting2 = NSURL2.URLWithString("prefs:root=LOCATION_SERVICES");
// var setting2 = NSURL2.URLWithString("App-Prefs:root=LOCATION_SERVICES");
// var setting2 = NSURL2.URLWithString("app-settings");
var setting2 = NSURL2.URLWithString("App-Prefs:root=Privacy&path=LOCATION");
// var setting2 = NSURL2.URLWithString("App-Prefs:root=Privacy&path=LOCATION_SERVICES");
application2.openURL(setting2);
plus.ios.deleteObject(setting2);
plus.ios.deleteObject(NSURL2);
plus.ios.deleteObject(application2);
}
});
}
} else {
console.log("其他");
}
var that = this
uni.getLocation({
type: 'gcj02', //国测局
geocode: 'true',
success: function(res) {
console.log('当前位置的经度：' + res.longitude);
console.log('当前位置的纬度：' + res.latitude);
console.log('当前位置：' + JSON.stringify(res));
// 创建地图坐标对象
var point = new plus.maps.Point(res.longitude, res.latitude);
//静态方法，反向地理编码
plus.maps.Map.reverseGeocode(point, {}, (event) => {
var address = event.address; // 转换后的地理位置
that.locationaddress = address // 重新赋值
}, function(e) {
console.log("失败回调", e);
});
// 赋值经纬度,从而得到当前位置
that.latitude = res.latitude
that.longitude = res.longitude
// 地图上显示所在图标开始
let arr = [{
id: 0,
longitude: res.longitude,
latitude: res.latitude,
name: "所在位置"
},
{
id: 1,
latitude: 36.647,
longitude: 114.550,
name: "所在位置"
}
]
let markers = []
for (var i = 0; i < arr.length; i++) {
markers = markers.concat({
id: arr[i].id,
latitude: arr[i].latitude, //纬度
longitude: arr[i].longitude, //经度
callout: { //自定义标记点上方的气泡窗口 点击有效
content: arr[i].name, //文本
color: '#ffaa00', //文字颜色
fontSize: 18, //文本大小
borderRadius: 8, //边框圆角
bgColor: '#00c16f', //背景颜色
display: 'ALWAYS', //常显
},
label: { //标签备注
content: '',
bgColor: 'red'
},
iconPath: '/static/dingwei.png', // 显示的图标
width: 50,
height: 50,
position: { //控件位置
left: 0,
top: 0,
width: 0,
height: 0
}
})
}
that.markers = markers; // markers就是地图选点一样的功能,显示小坐标
// 地图上显示所在图标结束
that.controls = [{
id: 1,
position: { //控件在地图的位置
left: 15,
top: 15,
width: 10,
height: 10
},
iconPath: '/static/定位.png'
}]
that.circles = [{ //在地图上显示圆
latitude: res.latitude,
longitude: res.longitude,
fillColor: "#3BBAFD29", //填充颜色（透明度）
color: "#3BBAFD", //描边的颜色
radius: 160, //半径
strokeWidth: 2 //描边的宽度
},
{ //在地图上显示圆
latitude: 36.647,
longitude: 114.550,
fillColor: "#3BBAFD29", //填充颜色
color: "#3BBAFD", //描边的颜色
radius: 100, //半径
strokeWidth: 2 //描边的宽度
},
]
},
// 定位失败
fail: function(err) {
uni.showToast({
title: err,
icon: 'none'
});
}
})
},
onelist(index) {
let positionlist = this.positionlist;
// 展开收起一级列表 start
if (positionlist[index]['oneliststare'] == false) {
positionlist[index]['oneliststare'] = true;
} else {
positionlist[index]['oneliststare'] = false;
}
// 展开收起一级列表 end
},
twolist(index, index2) {
let positionlist = this.positionlist;
let positiontwo = this.positionlist[index].positiontwo[index2]['twoliststare'];
console.log(positiontwo)
// 展开收起二级列表 start
if (positiontwo == false) {
this.positionlist[index].positiontwo[index2]['twoliststare'] = true;
} else {
this.positionlist[index].positiontwo[index2]['twoliststare'] = false;
}
// 展开收起二级列表 end
},
oneListSe(item) {
item.isOneSele = !item.isOneSele
item.positiontwo.forEach(i => {
i.isTwoSele = item.isOneSele
i.isTwoTain = item.isOneSele
i.positionthree.forEach(j => {
j.isThreeSele = i.isTwoSele
})
})
// 下级是否有选中的
let yis = item.positiontwo.some(i => i.isTwoSele)
item.isOneTain = yis
// console.log(item.isOneTain);
},
twoListSe(item, item2) {
item2.isTwoSele = !item2.isTwoSele
item2.positionthree.forEach(i => {
i.isThreeSele = item2.isTwoSele
})
let ers = item2.positionthree.some(i => i.isThreeSele) // 第三层是否有选中的
item2.isTwoTain = ers
let yi = item.positiontwo.some(i => !i.isTwoSele)
let yis = item.positiontwo.some(i => i.isTwoTain)
item.isOneSele = !yi
item.isOneTain = yis
// console.log(item.isOneTain);
// console.log(item2.isTwoTain);
},
threeListSe(item, item2, item3) {
item3.isThreeSele = !item3.isThreeSele
let er = item2.positionthree.some(i => !i.isThreeSele) // 第三层是否有未选中的
let ers = item2.positionthree.some(i => i.isThreeSele) // 第三层是否有选中的
item2.isTwoSele = !er
item2.isTwoTain = ers
let yi = item.positiontwo.some(i => !i.isTwoSele) // 第二层是否有未选中的
let yis = item.positiontwo.some(i => i.isTwoTain) // 第二层是否有选中的
item.isOneSele = !yi
item.isOneTain = yis
// console.log(item.isOneTain);
// console.log(item2.isTwoTain);
},
//确认选择
submit() {
let sie = this.positionlist.filter(i => i.isOneSele || i.isOneTain)
let data = JSON.parse(JSON.stringify(sie))
let sieo = data.map(i => {
let tie = i.positiontwo.filter(j => j.isTwoSele || j.isTwoTain)
let tis = JSON.parse(JSON.stringify(tie))
let tieo = tis.map(o => {
o.positionthree = o.positionthree.map(e => {
return {
isThreeSele: e.isThreeSele,
threename: e.threename
}
})
console.log(o.positionthree);
return {
positionthree: o.positionthree,
archiveId: o.archiveId,
archiveName: o.archiveName,
isTwoSele: o.isTwoSele,
isTwoTain: o.isTwoTain,
twoname: o.twoname
}
})
tieo.forEach(s => {
s.positionthree = s.positionthree.filter(c => c.isThreeSele)
})
return {
positiontwo: tieo,
boxId: i.id,
boxNo: i.boxNo,
lockbarNo: i.lockbarNo,
isOneSele: i.isOneSele,
isOneTain: i.isOneTain,
onename: i.onename
}
})
sieo.forEach(i => {
i.positiontwo = i.positiontwo.filter(i => i.isTwoTain)
})
console.log(sieo)
// const back = 'pages/readFlow/entityForm/entityForm'
// const pages = getCurrentPages();
// const pge = pages.find(i => i.route == back)
// pge.$vm.receiveBoxlist(sieo)
// uni.navigateBack()
}
}
}
</script>
<style>
page {
/* background: #fff; */
}
.position-group {
width: 100%;
height: auto;
padding-bottom: 200rpx;
}
/* 一级 */
.pronames_one {
width: 100%;
height: auto;
}
.pronames-one-label {
width: 100%;
height: 120rpx;
line-height: 120rpx;
background: #fff;
box-sizing: border-box;
padding: 0px 3%;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
background-color: aliceblue;
}
.pronames-one-label text {
font-size: 15px;
color: #2ebbfe;
}
.pronames-one-label label {
color: #aaa;
transition: all 0.5s;
}
/* 二级 */
.pronames_two {
width: 100%;
height: auto;
transition: all 0.5s;
}
.pronames-two-label {
width: 100%;
height: 100rpx;
line-height: 100rpx;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
padding: 0px 3%;
background-color: #f7f7f7;
}
.pronames-two-label text {
font-size: 15px;
color: #333;
}
.pronames-two-label label {
color: #aaa;
transition: all 0.5s;
}
.pronames-two-option label {
padding-left: 37px;
}
/* 三级 */
.pronames_three {
width: 100%;
height: auto;
}
.pronames_three-label {
width: 100%;
height: 90rpx;
padding: 0 3%;
line-height: 90rpx;
display: flex;
flex-direction: row;
align-items: center;
background-color: #fff;
}
.pronames_three-label label {
width: 10%;
height: 90rpx;
line-height: 90rpx;
display: block;
color: #D5D5D5;
}
.pronames_three-label text {
width: 90%;
font-size: 15px;
padding-left: 10px;
color: #868686;
}
/* 展开收起效果 start */
.oneshow {}
.oneshow .pronames_two {
display: block;
}
.onehide {}
.onehide .pronames_two {
display: none;
}
/* 展开收起效果 end */
.twoshow {}
.twoshow .pronames_three {
display: block;
}
.twohide {}
.twohide .pronames_three {
display: none;
}
.onehide:not(:last-child) {
border-bottom: 1px #eaeaea solid;
}
.twohide:not(:last-child) {
border-bottom: 1px #eaeaea solid;
}
.cuIcon-fold {
width: 34rpx;
height: 34rpx;
background-image: url('../../static/user5.png');
background-repeat: no-repeat;
background-size: 100%;
transform: rotate(-90deg);
transition-property: transform;
transition-duration: 0.3s;
}
.cuIcon-unfold {
width: 34rpx;
height: 34rpx;
background-image: url('../../static/user5.png');
background-repeat: no-repeat;
background-size: 100%;
transform: rotate(90deg);
transition-property: transform;
transition-duration: 0.3s;
}
.cuIcon-round {
background-image: url('../../static/kai.png'); /* 选中 */
background-repeat: no-repeat;
background-size: 46rpx;
padding-left: 54rpx;
background-position: left center;
}
.cuIcon-roundcheckfill {
background-image: url('../../static/guan.png'); /* 未选中 */
background-repeat: no-repeat;
background-size: 46rpx;
padding-left: 54rpx;
background-position: left center;
}
</style>test1
<template>
<view class="content">
<view class="position-group">
<!-- 一级循环 -->
<view class="pronames_one" v-for="(item,index) in positionlist" :key="index"
:class="item.oneliststare?'oneshow':'onehide'">
<view class="pronames-one-label" @click="onelist(index)">
<view class="" @click.stop="oneListSe(item)">
<label :class="item.isOneSele?'cuIcon-round':'cuIcon-roundcheckfill'"></label>
<text>{{item.onename}}</text>
</view>
<label :class="item.oneliststare?'cuIcon-fold':'cuIcon-unfold'"></label>
</view>
<!-- 二级循环 -->
<view class="pronames_two" v-for="(item2,index2) in item.positiontwo" :key="index2"
:class="item2.twoliststare?'twoshow':'twohide'">
<view class="pronames-two-label" @click="twolist(index,index2)">
<view class="" @click.stop="twoListSe(item,item2)">
<label :class="item2.isTwoSele?'cuIcon-round':'cuIcon-roundcheckfill'"></label>
<text>{{item2.twoname}}</text>
</view>
<label :class="item2.twoliststare?'cuIcon-fold':'cuIcon-unfold'"></label>
</view>
<view class="pronames_three">
<!-- 三级循环 -->
<view class="pronames_three-label" v-for="(item3,index3) in item2.positionthree" :key="index3"
@click="threeListSe(item,item2,item3)">
<label :class="item3.isThreeSele?'cuIcon-round':'cuIcon-roundcheckfill'"></label>
<text>{{item3.threename}}</text>
</view>
</view>
</view>
</view>
</view>
<view class="foot-utn">
<button type="primary" @click="submit">确认选择</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
positionSele: true,
positionlist: [{
id: 0,
onename: "销售|客服|市场",
oneliststare: false, // 是否展开二级
isOneSele: false, // 当前第一级是否全部选中
isOneTain: false, // 当前第一级是否有选中的
positiontwo: [{
twoid: 0,
twoname: "销售业务",
twoliststare: false, // 是否展开三级
isTwoSele: false, // 当前第二级是否全部选中
isTwoTain: false, // 当前第二级是否有选中的
positionthree: [{
trheeid: 0,
threename: "销售代表",
twoselestare: false,
isThreeSele: false, // 当前第三级是否选中
}, {
trheeid: 0,
threename: "客户代表",
twoselestare: false,
isThreeSele: false
}, {
trheeid: 0,
threename: "销售顾问",
twoselestare: false,
isThreeSele: false
}]
}, {
twoid: 1,
twoname: "销售管理",
twoliststare: false,
isTwoSele: false,
isTwoTain: false,
positionthree: [{
trheeid: 0,
threename: "销售主管",
twoselestare: false,
isThreeSele: false
}, {
trheeid: 0,
threename: "销售经理",
twoselestare: false,
isThreeSele: false
}, {
trheeid: 0,
threename: "销售总监",
twoselestare: false,
isThreeSele: false
}]
}]
}, {
id: 1,
onename: "IT|互联网|通信",
oneliststare: false,
isOneSele: false,
isOneTain: false, // 是否有选中的
positiontwo: [{
twoid: 0,
twoname: "软件/互联网开发/系统集成",
twoliststare: false,
isTwoSele: false,
isTwoTain: false,
positionthree: [{
trheeid: 0,
threename: "软件工程师",
twoselestare: false,
isThreeSele: false
}, {
trheeid: 1,
threename: "软件研发工程师",
twoselestare: false,
isThreeSele: false
}, {
trheeid: 2,
threename: "高级软件工程师",
twoselestare: false,
isThreeSele: false
}]
}, {
twoid: 1,
twoname: "互联网产品/运营管理",
twoliststare: false,
isTwoSele: false,
isTwoTain: false,
positionthree: [{
trheeid: 0,
threename: "网店客服",
twoselestare: false,
isThreeSele: false
}, {
trheeid: 1,
threename: "网店运营",
twoselestare: false,
isThreeSele: false
}, {
trheeid: 2,
threename: "网店管理员",
twoselestare: false,
isThreeSele: false
}]
}]
}]
}
},
onLoad() {},
methods: {
onelist(index) {
let positionlist = this.positionlist;
// 展开收起一级列表 start
if (positionlist[index]['oneliststare'] == false) {
positionlist[index]['oneliststare'] = true;
} else {
positionlist[index]['oneliststare'] = false;
}
// 展开收起一级列表 end
},
twolist(index, index2) {
let positionlist = this.positionlist;
let positiontwo = this.positionlist[index].positiontwo[index2]['twoliststare'];
console.log(positiontwo)
// 展开收起二级列表 start
if (positiontwo == false) {
this.positionlist[index].positiontwo[index2]['twoliststare'] = true;
} else {
this.positionlist[index].positiontwo[index2]['twoliststare'] = false;
}
// 展开收起二级列表 end
},
oneListSe(item) {
item.isOneSele = !item.isOneSele
item.positiontwo.forEach(i=>{
i.isTwoSele = item.isOneSele
i.isTwoTain = item.isOneSele
i.positionthree.forEach(j=>{
j.isThreeSele = i.isTwoSele
})
})
// 下级是否有选中的
let yis = item.positiontwo.some(i=>i.isTwoSele)
item.isOneTain=yis
// console.log(item.isOneTain);
},
twoListSe(item, item2) {
item2.isTwoSele = !item2.isTwoSele
item2.positionthree.forEach(i=>{
i.isThreeSele = item2.isTwoSele
})
let ers = item2.positionthree.some(i=>i.isThreeSele) // 第三层是否有选中的
item2.isTwoTain=ers
let yi = item.positiontwo.some(i=>!i.isTwoSele)
let yis = item.positiontwo.some(i=>i.isTwoTain)
item.isOneSele=!yi
item.isOneTain=yis
// console.log(item.isOneTain);
// console.log(item2.isTwoTain);
},
threeListSe(item, item2, item3) {
item3.isThreeSele = !item3.isThreeSele
let er = item2.positionthree.some(i=>!i.isThreeSele) // 第三层是否有未选中的
let ers = item2.positionthree.some(i=>i.isThreeSele) // 第三层是否有选中的
item2.isTwoSele=!er
item2.isTwoTain=ers
let yi = item.positiontwo.some(i=>!i.isTwoSele) // 第二层是否有未选中的
let yis = item.positiontwo.some(i=>i.isTwoTain) // 第二层是否有选中的
item.isOneSele=!yi
item.isOneTain=yis
// console.log(item.isOneTain);
// console.log(item2.isTwoTain);
},
//确认选择
submit() {
let sie = this.positionlist.filter(i=>i.isOneSele||i.isOneTain)
let data = JSON.parse(JSON.stringify(sie))
let sieo = data.map(i=>{
let tie = i.positiontwo.filter(j=>j.isTwoSele||j.isTwoTain)
let tis = JSON.parse(JSON.stringify(tie))
let tieo=tis.map(o=>{
o.positionthree=o.positionthree.map(e=>{
return {
isThreeSele:e.isThreeSele,
threename:e.threename
}
})
console.log(o.positionthree);
return{
positionthree:o.positionthree,
archiveId:o.archiveId,
archiveName:o.archiveName,
isTwoSele:o.isTwoSele,
isTwoTain:o.isTwoTain,
twoname:o.twoname
}
})
tieo.forEach(s=>{
s.positionthree=s.positionthree.filter(c=>c.isThreeSele)
})
return{
positiontwo:tieo,
boxId:i.id,
boxNo:i.boxNo,
lockbarNo:i.lockbarNo,
isOneSele:i.isOneSele,
isOneTain:i.isOneTain,
onename:i.onename
}
})
sieo.forEach(i=>{
i.positiontwo=i.positiontwo.filter(i=>i.isTwoTain)
})
console.log(sieo)
// const back = 'pages/readFlow/entityForm/entityForm'
// const pages = getCurrentPages();
// const pge = pages.find(i => i.route == back)
// pge.$vm.receiveBoxlist(sieo)
// uni.navigateBack()
}
}
}
</script>
<style>
page {
background: #fff;
}
.position-group {
width: 100%;
height: auto;
}
/* 一级 */
.pronames_one {
width: 100%;
height: auto;
}
.pronames-one-label {
width: 100%;
height: 110rpx;
line-height: 110rpx;
background: #fff;
box-sizing: border-box;
padding: 0px 3%;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
border-bottom: 1px #eaeaea solid;
}
.pronames-one-label text {
font-size: 15px;
color: #2ebbfe;
}
.pronames-one-label label {
color: #aaa;
font-size: 20px;
transition: all 0.5s;
}
/* 二级 */
.pronames_two {
width: 100%;
height: auto;
transition: all 0.5s;
}
.pronames-two-label {
width: 100%;
height: 110rpx;
line-height: 110rpx;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
padding: 0px 3%;
border-bottom: 1px #eee solid;
}
.pronames-two-label text {
font-size: 15px;
color: #333;
}
.pronames-two-label label {
color: #aaa;
font-size: 20px;
transition: all 0.5s;
}
/* 三级 */
.pronames_three {
width: 100%;
height: auto;
}
.pronames_three-label {
width: 97%;
margin-left: 3%;
height: 100rpx;
line-height: 100rpx;
display: flex;
flex-direction: row;
border-bottom: 1px #f1f1f1 solid;
align-items: center;
}
.pronames_three-label label {
width: 10%;
height: 90rpx;
line-height: 90rpx;
display: block;
color: #D5D5D5;
font-size: 20px;
}
.pronames_three-label text {
width: 90%;
font-size: 15px;
color: #868686;
}
/* 展开收起效果 start */
.oneshow {}
.oneshow .pronames_two {
display: block;
}
.onehide {}
.onehide .pronames_two {
display: none;
}
/* 展开收起效果 end */
.twoshow {}
.twoshow .pronames_three {
display: block;
}
.twohide {}
.twohide .pronames_three {
display: none;
}
.cuIcon-fold {
width: 34rpx;
height: 34rpx;
background-image: url('../../static/user5.png');
background-repeat: no-repeat;
background-size: 100%;
transform: rotate(-90deg);
transition-property: transform;
transition-duration: 0.3s;
}
.cuIcon-unfold {
width: 34rpx;
height: 34rpx;
background-image: url('../../static/user5.png');
background-repeat: no-repeat;
background-size: 100%;
transform: rotate(90deg);
transition-property: transform;
transition-duration: 0.3s;
}
.cuIcon-round {
background-image: url('../../static/kai.png');
background-repeat: no-repeat;
background-size: 34rpx;
padding-left: 54rpx;
background-position: left center;
}
.cuIcon-roundcheckfill {
background-image: url('../../static/guan.png');
background-repeat: no-repeat;
background-size: 34rpx;
padding-left: 54rpx;
background-position: left center;
}
</style>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
