qiubinghui
/
zhywpt-sp
Obserwuj 1
Gwiazdka 0
Forkuj 0
Kod Problemy 0 Pull Requests 0 Wydania 0 Wiki Aktywność
Przeglądaj źródła

2023年7月21日09:39:19

yxb
wq 1 rok temu
rodzic
7e75bfc8a0
commit
4059ebb4d9
2 zmienionych plików z 508 dodań i 536 usunięć
Widok podzielony Pokaż statystyki zmian
  1. 296
    337
      login/login.vue
  2. 212
    199
      subpackage/orders/interestsList.vue

+ 296
- 337
login/login.vue Wyświetl plik

@@ -1,351 +1,310 @@
<!-- 密码登录 -->
<template>
<view class="login-main as-gravity-center as-layout-vertical">
<image :src="`${$imgUrl}login/logo.png`" class="logo"></image>
<view class="title">九州ETC</view>
<view class="form">
<view class="form-input">
<view> +86</view>
<image :src="`${$imgUrl}common/arror_down_black.png`" class="arror" />
<input
class="input"
v-model="state.username"
focus
placeholder="请输入手机号"
placeholder-class="form-placeholder"
type="number"
maxlength="11"
/>
</view>
<view class="form-input" v-if="state.loginType === 'pwd'">
<input
class="input"
v-model="state.password"
type="text"
placeholder="请输入密码"
placeholder-class="form-placeholder"
:password="state.isPwdType ? true : false"
/>
<image
:src="`${$imgUrl}login/${
<view class="login-main as-gravity-center as-layout-vertical">
<image :src="`${$imgUrl}login/logo.png`" class="logo"></image>
<view class="title">九州ETC</view>
<view class="form">
<view class="form-input">
<view> +86</view>
<image :src="`${$imgUrl}common/arror_down_black.png`" class="arror" />
<input class="input" v-model="state.username" focus placeholder="请输入手机号"
placeholder-class="form-placeholder" type="number" maxlength="11" />
</view>
<view class="form-input" v-if="state.loginType === 'pwd'">
<input class="input" v-model="state.password" type="text" placeholder="请输入密码"
placeholder-class="form-placeholder" :password="state.isPwdType ? true : false" />
<image :src="`${$imgUrl}login/${
state.isPwdType ? 'icon_eye_close' : 'icon_eye_open'
}.png`"
class="eye"
@click="state.isPwdType = !state.isPwdType"
></image>
</view>
<view class="form-input" v-if="state.loginType === 'code'">
<input
class="input"
v-model="state.code"
placeholder="请输入验证码"
placeholder-class="form-placeholder"
maxlength="6"
type="number"
/>
<verification-code
:bg="false"
:mobile="state.username"
></verification-code>
</view>
</view>

<view class="btn">
<submit-button title="登录" @submit="doLogin"></submit-button>
</view>

<view class="agreement">
<checkbox-group @change="checkboxChange" class="group">
<checkbox
:checked="state.checked"
color="#00B38B"
size="30"
icon-size="30"
label-size="24"
style="transform:scale(0.85)"
>
</checkbox>
<label>我已阅读并同意</label>
</checkbox-group>
<!-- <view class="txt-grey">我已阅读并同意</view> -->
<view class="txt-green" @click="toRead"
>《平台用户服务隐私协议》</view
>
</view>

<view class="btns as-layout-horizontal">
<view
class="as-layout-vertical as-gravity-center"
@click="navTo('/login/register-step1')"
>
<view class="bg blue as-gravity-center">
<image :src="`${$imgUrl}login/icon_register.png`" class="img" />
</view>
<view class="label">注册账号</view>
</view>

<view
class="as-layout-vertical as-gravity-center"
@click="
}.png`" class="eye" @click="state.isPwdType = !state.isPwdType"></image>
</view>
<view class="form-input" v-if="state.loginType === 'code'">
<input class="input" v-model="state.code" placeholder="请输入验证码" placeholder-class="form-placeholder"
maxlength="6" type="number" />
<verification-code :bg="false" :mobile="state.username"></verification-code>
</view>
</view>

<view class="btn">
<submit-button title="登录" @submit="doLogin"></submit-button>
</view>

<view class="agreement">
<checkbox-group @change="checkboxChange" class="group">
<checkbox :checked="state.checked" color="#00B38B" size="30" icon-size="30" label-size="24"
style="transform:scale(0.85)">
</checkbox>
<label>我已阅读并同意</label>
</checkbox-group>
<!-- <view class="txt-grey">我已阅读并同意</view> -->
<view class="txt-green" @click="toRead">《平台用户服务隐私协议》</view>
</view>

<view class="btns as-layout-horizontal">
<view class="as-layout-vertical as-gravity-center" @click="navTo('/login/register-step1')">
<view class="bg blue as-gravity-center">
<image :src="`${$imgUrl}login/icon_register.png`" class="img" />
</view>
<view class="label">注册账号</view>
</view>

<view class="as-layout-vertical as-gravity-center" @click="
state.loginType === 'pwd'
? (state.loginType = 'code')
: (state.loginType = 'pwd')
"
>
<view class="bg orange as-gravity-center">
<image :src="`${$imgUrl}login/icon_code.png`" class="img" />
</view>
<view class="label">{{
">
<view class="bg orange as-gravity-center">
<image :src="`${$imgUrl}login/icon_code.png`" class="img" />
</view>
<view class="label">{{
state.loginType === "pwd" ? "验证码登录" : "密码登录"
}}</view>
</view>

<view
class="as-layout-vertical as-gravity-center"
@click="navTo('/login/forget-pwd-step1')"
>
<view class="bg purple as-gravity-center">
<image :src="`${$imgUrl}login/icon_pwd.png`" class="img" />
</view>
<view class="label">忘记密码</view>
</view>
</view>
</view>
</view>

<view class="as-layout-vertical as-gravity-center" @click="navTo('/login/forget-pwd-step1')">
<view class="bg purple as-gravity-center">
<image :src="`${$imgUrl}login/icon_pwd.png`" class="img" />
</view>
<view class="label">忘记密码</view>
</view>
</view>
</view>
</template>

<script setup lang="ts">
import { reactive } from "vue";
import { checkStr, msg, navTo } from "@/utils/utils";
import { onLoad, onUnload } from "@dcloudio/uni-app";
import { login, loginCode, loginTime } from "@/utils/network/api.js";
import { request } from "@/utils/network/request.js";
import { stringToJson } from "@/utils/network/encryption";
import { useUserStore } from "@/stores/user";
import { setItem } from "@/utils/storage";
const userStore = useUserStore();
const { fetchToken } = userStore;
const state = reactive({
checked: false, //是否勾选协议
isPwdType: true, //是不是密码类型
loginType: "pwd", //pwd-密码登录 code-验证码登录
username: "", //用户名
password: "", //密码
code: "", //验证码
});
onLoad(() => {
uni.$on("login", (data) => {
state.username = data.phone;
});
});
onUnload(() => {
uni.$off("login");
});
const checkboxChange = (e) => {
console.log(e);
state.checked = !state.checked;
};
// 去协议页面
const toRead=()=>{
navTo("/login/agreement")
}
/* 登录 */
const doLogin = () => {
if (!state.username) {
msg("请输入手机号！");
return;
}
if (state.loginType === "pwd" && !state.password) {
msg("请输入密码！");
return;
}
if (state.loginType === "code" && !state.code) {
msg("请输入验证码！");
return;
}
if (!checkStr(state.username, "mobile")) {
msg("请输入正确的手机号！");
return;
}
if (!state.checked) {
msg("请勾选我已阅读并同意《平台用户服务隐私协议》");
return;
}
//判断是验证码登录，还是账号密码登录
if (state.loginType === "code") {
reqLogin(loginCode, {
mobile: state.username,
code: state.code,
loginTime: loginTime,
});
} else {
reqLogin(login, {
mobile: state.username,
password: state.password,
loginTime: loginTime,
});
}
};
/* 执行登录 */
const reqLogin = (code:string, data:object) => {
console.log(code,data);
const options = {
type: 2,
data: data,
method: "POST",
showLoading: true,
};
request(code, options).then((res) => {
const result = stringToJson(res.bizContent);
console.log(result);
console.log(typeof(result));
fetchToken(result.code).then((data:any) => {
console.log("登录",data);
subscribeMessages();
msg("登录成功！");
uni.$emit("refreshOrder");
uni.navigateBack();
});
});
};
// 订阅消息
const subscribeMessages=()=>{
uni.requestSubscribeMessage({
tmplIds: ['aNr4T2JEtaLtR9dihM2w3NAznz4bFMkutVZCbaSTjxg'],
success (res) {
console.log("订阅消息",res)
}
})
}
import { reactive } from "vue";
import { checkStr, msg, navTo } from "@/utils/utils";
import { onLoad, onUnload } from "@dcloudio/uni-app";
import { login, loginCode, loginTime } from "@/utils/network/api.js";
import { request } from "@/utils/network/request.js";
import { stringToJson } from "@/utils/network/encryption";
import { useUserStore } from "@/stores/user";
import { setItem } from "@/utils/storage";
const userStore = useUserStore();
const { fetchToken } = userStore;
const state = reactive({
checked: false, //是否勾选协议
isPwdType: true, //是不是密码类型
loginType: "pwd", //pwd-密码登录 code-验证码登录
username: "", //用户名
password: "", //密码
code: "", //验证码
});
onLoad(() => {
uni.$on("login", (data) => {
state.username = data.phone;
});
});
onUnload(() => {
uni.$off("login");
});
const checkboxChange = (e) => {
console.log(e);
state.checked = !state.checked;
};
// 去协议页面
const toRead = () => {
navTo("/login/agreement")
}
/* 登录 */
const doLogin = () => {
if (!state.username) {
msg("请输入手机号！");
return;
}
if (state.loginType === "pwd" && !state.password) {
msg("请输入密码！");
return;
}
if (state.loginType === "code" && !state.code) {
msg("请输入验证码！");
return;
}
if (!checkStr(state.username, "mobile")) {
msg("请输入正确的手机号！");
return;
}
if (!state.checked) {
msg("请勾选我已阅读并同意《平台用户服务隐私协议》");
return;
}
//判断是验证码登录，还是账号密码登录
if (state.loginType === "code") {
reqLogin(loginCode, {
mobile: state.username,
code: state.code,
loginTime: loginTime,
});
} else {
reqLogin(login, {
mobile: state.username,
password: state.password,
loginTime: loginTime,
});
}
};
/* 执行登录 */
const reqLogin = (code : string, data : object) => {
console.log(code, data);
const options = {
type: 2,
data: data,
method: "POST",
showLoading: true,
};
request(code, options).then((res) => {
const result = stringToJson(res.bizContent);
console.log(result);
console.log(typeof (result));
fetchToken(result.code).then((data : any) => {
console.log("登录", data);
subscribeMessages();
msg("登录成功！");
uni.$emit("refreshOrder");
uni.navigateBack();
});
});
};
// 订阅消息
const subscribeMessages = () => {
uni.requestSubscribeMessage({
tmplIds: ['aNr4T2JEtaLtR9dihM2w3NAznz4bFMkutVZCbaSTjxg'],
success(res) {
console.log("订阅消息", res)
}
})
}
</script>

<style lang="scss" scoped>
.login-main {
border-top: 1rpx solid #dcdcdc;
padding: 22rpx 30rpx 140rpx;

.logo {
width: 260rpx;
height: 160rpx;
}
.group{
display: flex;
align-items: center;
}
.title {
font-size: 46rpx;
color: #333333;
margin-top: 30rpx;
font-weight: 600;
}

.form {
width: 100%;
margin-top: 100rpx;

.form-input {
display: flex;
flex-direction: row;
align-items: center;
height: 90rpx;
border-bottom: 1rpx solid #dcdcdc;
padding: 0rpx 12rpx;
color: #333333;

&:last-child {
margin-top: 50rpx;
}

.input {
flex: 1;
padding-right: 48rpx;
font-size: 28rpx;
font-family: Microsoft YaHei;
}

.arror {
width: 28rpx;
height: 25rpx;
margin-left: 16rpx;
margin-right: 40rpx;
}

.eye {
width: 48rpx;
height: 48rpx;
}
}

.form-placeholder {
color: #999999;
}
}

.btn {
width: 100%;
margin: 120rpx 40rpx 50rpx;
}

.agreement {
font-size: 24rpx;
display: flex;
align-items: center;

.txt-grey {
color: #666666;
}

.txt-green {
color: #00b38b;
}

:deep(.u-checkbox) {
margin-right: -20rpx;
}
}

.btns {
width: 100%;
margin-top: 125rpx;
justify-content: space-around;
padding: 0px 8rpx;

.bg {
width: 80rpx;
height: 80rpx;
border-radius: 50%;

.img {
width: 48rpx;
height: 48rpx;
}
}

.blue {
background-color: #1d9cff;
}

.orange {
background-color: #feb654;
}

.purple {
background-color: #8060ff;
}

.label {
font-size: 26rpx;
color: #333333;
margin-top: 30rpx;
}
}
}
</style>
.login-main {
border-top: 1rpx solid #dcdcdc;
padding: 22rpx 30rpx 140rpx;

.logo {
width: 260rpx;
height: 160rpx;
}

.group {
display: flex;
align-items: center;
}

.title {
font-size: 46rpx;
color: #333333;
margin-top: 30rpx;
font-weight: 600;
}

.form {
width: 100%;
margin-top: 100rpx;

.form-input {
display: flex;
flex-direction: row;
align-items: center;
height: 90rpx;
border-bottom: 1rpx solid #dcdcdc;
padding: 0rpx 12rpx;
color: #333333;

&:last-child {
margin-top: 50rpx;
}

.input {
flex: 1;
padding-right: 48rpx;
font-size: 28rpx;
font-family: Microsoft YaHei;
}

.arror {
width: 28rpx;
height: 25rpx;
margin-left: 16rpx;
margin-right: 40rpx;
}

.eye {
width: 48rpx;
height: 48rpx;
}
}

.form-placeholder {
color: #999999;
}
}

.btn {
width: 100%;
margin: 120rpx 40rpx 50rpx;
}

.agreement {
font-size: 24rpx;
display: flex;
align-items: center;

.txt-grey {
color: #666666;
}

.txt-green {
color: #00b38b;
}

:deep(.u-checkbox) {
margin-right: -20rpx;
}
}

.btns {
width: 100%;
margin-top: 125rpx;
justify-content: space-around;
padding: 0px 8rpx;

.bg {
width: 80rpx;
height: 80rpx;
border-radius: 50%;

.img {
width: 48rpx;
height: 48rpx;
}
}

.blue {
background-color: #1d9cff;
}

.orange {
background-color: #feb654;
}

.purple {
background-color: #8060ff;
}

.label {
font-size: 26rpx;
color: #333333;
margin-top: 30rpx;
}
}
}
</style>

+ 212
- 199
subpackage/orders/interestsList.vue Wyświetl plik

@@ -4,22 +4,24 @@
<view class="title">
<view>
<view v-if='item.children' style="display: inline-block;">
<image :class="item.isShow?'imageChange':'imageDefault'" @click="changeIsShow(index)" src="../../static/image/icon-back.png" alt="" srcset=""></image>
<image :class="item.isShow?'imageChange':'imageDefault'" @click="changeIsShow(index)"
src="../../static/image/icon-back.png" alt="" srcset=""></image>
</view>
<text><text>{{item.productName}}</text>&nbsp;&nbsp;<text>¥{{item.discountPrice * 0.01}}</text></text>
</view>
<checkbox-group @change='getValue(index)'>
<label >
<checkbox :value="index" />
<checkbox-group @change='getValue(index)'>
<label>
<checkbox :value="index" />
</label>
</checkbox-group>
</view>
<view v-if="item.isShow" class="children" v-for="(itemChild,index) in item.children" :key='index'>
<view><text>{{itemChild.productName}}</text>&nbsp;&nbsp;<text>{{itemChild.discountPrice * 0.01}}</text></view>
<view><text>{{itemChild.productName}}</text>&nbsp;&nbsp;<text>{{itemChild.discountPrice * 0.01}}</text>
</view>
</view>
</view>
<button type="default" class="button" @click="savaHandle()">
开通服务
开通服务
</button>
</view>
</template>
@@ -35,241 +37,252 @@
import navBar from "@/components/nav-bar/nav-bar2.vue";
import navBgCar from "./components/nav-bg-car4";
import { setItem } from "@/utils/storage";
import { msg} from "@/utils/utils";
import { msg } from "@/utils/utils";
import {
checkOrderStatus,
orderPay,
wechatAppID,
wechatPayConfigId,
wechatSecret,
checkOrderStatus,
orderPay,
wechatAppID,
wechatPayConfigId,
wechatSecret,
} from "@/utils/network/api";
const imgURL = `${fileURL}image/`;
const state = reactive({
openid: "",
orderId: "",
id: "",
clientFee: "",
list:[], //权益数据
choiceValue:[], //选择的权益数据的下标
choiceValueComplete:[] //选择的权益数据的具体数据
list: [], //权益数据
choiceValue: [], //选择的权益数据的下标
choiceValueComplete: [] //选择的权益数据的具体数据
})
onLoad((option: any) => {
onLoad((option : any) => {
getList(option.orderId);
getOpenID();
state.orderId = option.orderId;
state.clientFee = option.clientFee;
state.id = option.id;
console.log("option",option)
console.log("option", option)
})
const getList = (id) => {
const options = {
type: 2,
data: {"orderId": id},
data: { "orderId": id },
method: 'POST',
showLoading: true,
}
request(queryInterestsList, options).then((res) => {
const data=stringToJson(res.bizContent);
for(var i=0;i<data.data.length;i++){
data.data[i]['isShow']=false;
const data = stringToJson(res.bizContent);
for (var i = 0; i < data.data.length; i++) {
data.data[i]['isShow'] = false;
}
state.list=data.data
console.log("222",state.list)
state.list = data.data
console.log("222", state.list)
})
}
const change=(e)=> {
const change = (e) => {
console.log(e);
}
//获取微信小程序openid
const getOpenID = () => {
uni.login({
provider: "weixin",
success: function (e) {
console.log(e);
uni.request({
url: `https://api.weixin.qq.com/sns/jscode2session?appid=${wechatAppID}&secret=${wechatSecret}&js_code=${e.code}&grant_type=authorization_code`,
success: (res: any) => {
state.openid = res.data.openid;
setItem("QYorder", state);
console.log(res);
},
fail: (err: any) => {
uni.showToast({
title: "网络异常，请重试！" + err.errcode,
icon: "error",
duration: 500,
});
return;
},
});
},
});
uni.login({
provider: "weixin",
success: function (e) {
console.log(e);
uni.request({
url: `https://api.weixin.qq.com/sns/jscode2session?appid=${wechatAppID}&secret=${wechatSecret}&js_code=${e.code}&grant_type=authorization_code`,
success: (res : any) => {
state.openid = res.data.openid;
setItem("QYorder", state);
console.log(res);
},
fail: (err : any) => {
uni.showToast({
title: "网络异常，请重试！" + err.errcode,
icon: "error",
duration: 500,
});
return;
},
});
},
});
};
const savaHandle = () => {
state.choiceValueComplete=[];
for(var i=0;i<state.choiceValue.length;i++){
state.choiceValueComplete = [];
for (var i = 0; i < state.choiceValue.length; i++) {
state.choiceValueComplete.push(state.list[state.choiceValue[i]])
}
let items = encodeURIComponent(JSON.stringify(state.choiceValueComplete));
console.log("state.choiceValueComplete",state.choiceValueComplete)
console.log("openid*******", state.openid);
//如果获取openId成功
if (state.openid) {
var data = {
orderId: state.orderId,
subOpenId: state.openid,
};
const options = {
type: 2,
data: data,
method: "POST",
showLoading: true,
};
request(etcQYAction, options).then((res) => {
const data = stringToJson(res.bizContent);
if (data.userState === "UNAUTHORIZED") {
uni.navigateToMiniProgram({
appId: "wxbcad394b3d99dac9",
path: "pages/route/index",
extraData: {
appid: "wxcb1388c809fe25a9",
sub_appid: "wx008c60533388527a",
mch_id: "1500877591",
sub_mch_id: "1622652848",
nonce_str: data.nonceStr,
sign_type: "HMAC-SHA256",
trade_scene: "HIGHWAY",
plate_number: data.plateNumber,
sub_openid: data.subOpenId,
sign: data.sign,
},
success(res) {
console.log(res);
},
complete(res) {
console.log(res);
},
fail(res) {
console.log(res);
// 未成功跳转到车主小程序
},
});
} else if (data.userState === "NORMAL") {
msg("已开通车主服务");
uni.navigateTo({
url: `/subpackage/orders/product-detail?orderId=${state.orderId}&&clientFee=${state.clientFee}&&id=${state.id}&&data=${items}`,
});
} else if (data.userState === "PAUSED") {
msg("已暂停车主服务");
return;
} else if (data.userState === "OVERDUE") {
msg("用户已开通车主服务，但欠费状态。提示用户还款，请跳转到车主服务");
return;
}
});
} else {
//如果获取openId失败
uni.showToast({
title: "网络异常，请重试！",
icon: "none",
duration: 1000,
});
return;
}
console.log("state.choiceValueComplete", state.choiceValueComplete)
console.log("openid*******", state.openid);
//如果获取openId成功
if (state.openid) {
var data = {
orderId: state.orderId,
subOpenId: state.openid,
};
const options = {
type: 2,
data: data,
method: "POST",
showLoading: true,
};
request(etcQYAction, options).then((res) => {
const data = stringToJson(res.bizContent);
if (data.userState === "UNAUTHORIZED") {
uni.navigateToMiniProgram({
appId: "wxbcad394b3d99dac9",
path: "pages/route/index",
extraData: {
appid: "wxcb1388c809fe25a9",
sub_appid: "wx008c60533388527a",
mch_id: "1500877591",
sub_mch_id: "1622652848",
nonce_str: data.nonceStr,
sign_type: "HMAC-SHA256",
trade_scene: "HIGHWAY",
plate_number: data.plateNumber,
sub_openid: data.subOpenId,
sign: data.sign,
},
success(res) {
console.log(res);
},
complete(res) {
console.log(res);
},
fail(res) {
console.log(res);
// 未成功跳转到车主小程序
},
});
} else if (data.userState === "NORMAL") {
msg("已开通车主服务");
uni.navigateTo({
url: `/subpackage/orders/product-detail?orderId=${state.orderId}&&clientFee=${state.clientFee}&&id=${state.id}&&data=${items}`,
});
} else if (data.userState === "PAUSED") {
msg("已暂停车主服务");
return;
} else if (data.userState === "OVERDUE") {
msg("用户已开通车主服务，但欠费状态。提示用户还款，请跳转到车主服务");
return;
}
});
} else {
//如果获取openId失败
uni.showToast({
title: "网络异常，请重试！",
icon: "none",
duration: 1000,
});
return;
}
};
const changeIsShow = (index) =>{
console.log(index,state.list[index]['isShow'],!state.list[index]['isShow'])
state.list[index]['isShow']=!state.list[index]['isShow']
console.log("state.list",state.list)
const changeIsShow = (index) => {
console.log(index, state.list[index]['isShow'], !state.list[index]['isShow'])
state.list[index]['isShow'] = !state.list[index]['isShow']
console.log("state.list", state.list)
}
const getValue=(value)=>{
if(state.choiceValue.length==0){
const getValue = (value) => {
if (state.choiceValue.length == 0) {
console.log("第一次")
state.choiceValue.push(value)
console.log("state.choiceValue",state.choiceValue)
}else{
console.log("state.choiceValue", state.choiceValue)
} else {
var index = state.choiceValue.indexOf(value);
if(index>-1){//大于0 代表存在，
state.choiceValue.splice(index,1);//存在就删除
}else{
state.choiceValue.push(value)
}
console.log("state.choiceValue",state.choiceValue)
if (index > -1) {//大于0 代表存在，
state.choiceValue.splice(index, 1);//存在就删除
} else {
state.choiceValue.push(value)
}
console.log("state.choiceValue", state.choiceValue)
}
}
</script>

<style scoped lang="scss">
.content{
width: 100%;
height: 100vh;
}
.button {
height: 80rpx;
background: linear-gradient(-90deg, #43a1e0 0%, #13e7c1 100%);
border-radius: 40rpx;
font-size: 32rpx;
font-weight: 400;
color: #ffffff;
line-height: 80rpx;
margin: 20rpx;
}
.imageDefault{
height: 40rpx;
width: 40rpx;
transform: rotate(270deg);
margin-right: 12rpx;
color: white;
}
.imageChange{
height: 40rpx;
width: 40rpx;
transform: rotate(90deg);
margin-right: 12rpx;
color: white;
}
.item{
width: 90%;
margin: 10rpx auto;
background-color: rgb(41, 199, 207);
// height: 150rpx;
border-radius: 20rpx;
padding: 20rpx;
box-sizing: border-box;
color: white;
font-size: 32rpx;
}
.item>.title{
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.title>checkbox-group{
// float: right;
}
.children{
margin-left: 50rpx;
margin-top: 16rpx;
}
.children>view{
height: 50rpx;
line-height: 50rpx;
}
.show{
display: inline-block;
}
.hide{
display: none;
}
checkbox{
transform:scale(0.8);
}
.content {
width: 100%;
height: 100vh;
}

.button {
height: 80rpx;
background: linear-gradient(-90deg, #43a1e0 0%, #13e7c1 100%);
border-radius: 40rpx;
font-size: 32rpx;
font-weight: 400;
color: #ffffff;
line-height: 80rpx;
margin: 20rpx;
}

.imageDefault {
height: 40rpx;
width: 40rpx;
transform: rotate(270deg);
margin-right: 12rpx;
color: white;
}

.imageChange {
height: 40rpx;
width: 40rpx;
transform: rotate(90deg);
margin-right: 12rpx;
color: white;
}

.item {
width: 90%;
margin: 10rpx auto;
background-color: rgb(41, 199, 207);
// height: 150rpx;
border-radius: 20rpx;
padding: 20rpx;
box-sizing: border-box;
color: white;
font-size: 32rpx;

}

.item>.title {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}

.title>checkbox-group {
// float: right;
}

.children {
margin-left: 50rpx;
margin-top: 16rpx;
}

.children>view {
height: 50rpx;
line-height: 50rpx;
}

.show {
display: inline-block;
}

.hide {
display: none;
}

checkbox {
transform: scale(0.8);
}
</style>

Napisz Podgląd
Ładowanie…
Anuluj
Zapisz