转盘小程序是一种互动工具,它通过模拟真实的转盘抽奖或决策体验,为用户提供了一种有趣且公平的选择方式。以下是对转盘小程序的详细介绍:
转盘小程序的应用场景
日常决策:转盘小程序可以帮助用户解决日常生活中的选择困难问题,如决定晚餐吃什么、周末去哪里玩等。
聚会游戏:在聚会或派对中,转盘小程序可以作为互动游戏,增添欢乐气氛。用户可以自定义转盘内容,如真心话大冒险、喝酒游戏等。
企业活动:转盘小程序也常被用于企业年会、新品发布、客户答谢等活动中,作为抽奖或互动环节,提升现场气氛并收集参与者信息。
转盘小程序的特点
用户友好:转盘小程序通常具有直观易用的界面,用户无需编程基础即可快速上手。
高度可定制:用户可以根据自己的需求自定义转盘样式、选项、概率等,满足特定场景下的使用需求。
互动性强:转盘小程序支持分享功能,用户可以将自己制作的转盘分享给朋友或家人,一起享受互动的乐趣。
数据收集:在企业活动中,转盘小程序可以帮助主办方收集参与者信息,为后续营销活动提供数据支持。
功能设计
大转盘组件
拖进一个转盘组件进设计器。
转盘中奖自定义
转盘中奖项通过子表单用户快速自定义
实现代码如下
<template><view class="container container334706"><u-form-item :borderBottom="false" v-if="!showForm && globalData.isshow" class="diygw-col-24 title-clz" labelPosition="top" prop="title"><u-input @blur="listApi" :data-title_like="title" :focus="titleFocus" placeholder="请输入产品标题" v-model="title"></u-input><text @tap="navigateTo" data-type="listApi" :data-title_like="title" class="diy-icon-search" style="color: #363636; font-size: 32rpx"></text></u-form-item><view v-if="!showForm && list.total > 0" class="flex flex-wrap diygw-col-24 flex-direction-column"><view v-for="(item, index) in list.rows" :key="index" class="flex flex-wrap diygw-col-24 flex-direction-column flex4-clz" @tap="navigateTo" data-type="page" data-url="/pages/index" :data-id="item.id" data-redirect="1"><text class="diygw-text-line2 diygw-col-24 text1-clz">{{ item.title }}</text><text v-if="item.remark" class="diygw-text-line3 diygw-col-24 text2-clz">{{ item.remark }}</text><view class="flex flex-wrap diygw-col-24 justify-end items-center flex2-clz"><text @tap.stop="navigateTo" data-type="editFunction" :data-index="index" class="diygw-col-0 text6-clz"> 修改 </text><text @tap.stop="navigateTo" data-type="copyApi" :data-id="item.id" :data-index="index" class="diygw-col-0 text4-clz"> 复制 </text><text @tap.stop="navigateTo" data-type="delApi" :data-id="item.id" :data-index="index" class="diygw-col-0 text13-clz"> 删除 </text></view></view></view><view v-if="!showForm && globalData.isshow && (globalOption.isself || userInfo.username == 'admin')" class="flex flex-wrap diygw-col-24 justify-start diygw-bottom flex3-clz"><view class="flex flex-wrap diygw-col-24 justify-center items-center green flex20-clz" @tap="showForm = true"><text class="flex icon2 diygw-col-0 diy-icon-add"></text><text class="diygw-col-0"> 新增转盘 </text></view></view><view v-if="globalData.isshow && list.code == 200 && list.total == 0" class="flex flex-wrap diygw-col-24 flex-direction-column items-center flex-clz"><image src="/static/zwjl.png" class="image-size diygw-image diygw-col-0" mode="widthFix"></image><text class="diygw-col-0 text-clz"> 未找到任何数据 </text></view><u-form :model="form" :rules="formRules" :errorType="['message', 'toast']" ref="formRef" v-if="showForm" class="flex diygw-form diygw-col-24 form-clz"><view class="flex flex-wrap diygw-col-24 flex-direction-column flex1-clz"><u-form-item class="diygw-col-24" :required="true" label="转盘标题" prop="title"><u-input :focus="formData.titleFocus" placeholder="请输入标题" v-model="form.title"></u-input></u-form-item><u-form-item class="diygw-col-24" label="转盘描述" prop="remark"><u-input maxlength="200" height="60px" class="" placeholder="请输入提示信息" v-model="form.remark" type="textarea"></u-input></u-form-item><view class="flex flex-wrap diygw-col-24"><view class="diygw-col-24" v-for="(configItem, configIndex) in form.config" :key="configIndex"><u-form class="diygw-col-24" :model="form.config[configIndex]" :errorType="['message', 'toast']" ref="configRef" :rules="configItemRules"><view class="flex flex-wrap diygw-col-24 flex-direction-column flex5-clz"><u-form-item class="diygw-col-24" label="奖项" prop="text"><u-input :focus="formData.configItemDatas[configIndex].textFocus" placeholder="请输入奖项" v-model="configItem.text"></u-input></u-form-item><u-form-item class="diygw-col-24" label="中奖率" prop="range"><u-input :focus="formData.configItemDatas[configIndex].rangeFocus" placeholder="请输入提示信息" v-model="configItem.range"></u-input></u-form-item><u-form-item class="diygw-col-24" label="奖项背景色" prop="background"><u-input @tap="formData.configItemDatas[configIndex].showBackground = true" placeholder="请输入奖项背景色,不填写默认生成" v-model="configItem.background"></u-input><text class="diygw-text-lg diy-icon-colorlens" @tap="formData.configItemDatas[configIndex].showBackground = true" :style="{ color: configItem.background }"></text><diy-color-picker v-model="formData.configItemDatas[configIndex].showBackground" :hexcolor="configItem.background" @confirm="changeConfigItemBackground($event, configIndex, configItem)"></diy-color-picker></u-form-item></view></u-form><view class="formconfigtools flex justify-end"><button @tap="upConfigItem" :data-index="configIndex" class="diygw-btn flex-sub radius margin-xs"><text class="button-icon diy-icon-fold"></text> 上移</button><button @tap="downConfigItem" :data-index="configIndex" class="diygw-btn flex-sub radius margin-xs"><text class="button-icon diy-icon-unfold"></text> 下移</button><button @tap="addConfigItem" :data-index="configIndex" class="diygw-btn flex-sub radius margin-xs"><text class="button-icon diy-icon-add"></text> 新增</button><button @tap="delConfigItem" :data-index="configIndex" class="diygw-btn flex-sub radius margin-xs"><text class="button-icon diy-icon-close"></text> 删除</button></view></view></view></view><view class="flex diygw-col-24"><button @tap="showForm = false" class="diygw-btn red radius flex-sub margin-xs button-button-clz">取消</button><button @click="submitForm" class="diygw-btn green radius flex-sub margin-xs button-button-clz">保存</button></view></u-form><view class="clearfix"></view></view>
</template><script>export default {data() {return {//用户全局信息userInfo: {},//页面传参globalOption: {},//自定义全局变量globalData: { isshow: false },listNum: 1,list: {rows: [{id: 0,title: '',remark: '',img: '',userId: 0,createTime: '',updateTime: '',deleteTime: null}],total: 0,code: 0,msg: ''},copy: {code: 200,msg: '复制成功'},del: {code: 200,msg: '删除成功'},titleFocus: false,title: '',showForm: false,formRules: {title: [{trigger: ['change', 'blur'],required: true,message: '标题不能为空'}]},form: {title: '',remark: '',config: []},formData: {titleFocus: false,configItemDatas: []},configItemRules: {},configItemData: {textFocus: false,rangeFocus: false,showBackground: false},configItem: {text: '',range: '',background: ''}};},onShow() {this.setCurrentPage(this);},onLoad(option) {this.setCurrentPage(this);if (option) {this.setData({globalOption: this.getOption(option)});}this.init();},onReady() {this.$refs.formRef?.setRules(this.formRules);this.initConfigData();},methods: {async init() {await this.listApi();await this.initResetform();},// 列表数据 API请求方法async listApi(param) {let thiz = this;param = param || {};//如果请求要重置页面,请配置点击附加参数refresh=1 增加判断如输入框回调param不是对象if (param.refresh || typeof param != 'object') {this.listNum = 1;}//请求地址及请求数据,可以在加载前执行上面增加自己的代码逻辑let http_url = '/game/project/list';let http_data = {pageNum: this.listNum,pageSize: 10,title_like: param.title_like || this.title};let http_header = {};if (!this.globalOption.isself) {http_data.userId = '1';} else {http_data.isself = '1';}let list = await this.$http.post(http_url, http_data, http_header, 'json');let datarows = list.rows;if (http_data.pageNum == 1) {this.list = list;} else if (datarows) {let rows = this.list.rows.concat(datarows);list.rows = rows;this.list = Object.assign(this.list, list);}if (datarows && datarows.length > 0) {this.listNum = this.listNum + 1;}this.globalData.isshow = true;},// 复制数据 API请求方法async copyApi(param) {let thiz = this;param = param || {};//请求地址及请求数据,可以在加载前执行上面增加自己的代码逻辑let http_url = '/game/project/copy';let http_data = {id: param.id || this.item.id || '1',index: param.index || this.index};let http_header = {};let flag = await this.showModal('是否确定复制该数据');if (!flag) {this.showToast('你已取消删');return;}let copy = await this.$http.post(http_url, http_data, http_header, 'json');this.copy = copy;await this.listApi({ refresh: 1 });},// 删除数据 API请求方法async delApi(param) {let thiz = this;param = param || {};//请求地址及请求数据,可以在加载前执行上面增加自己的代码逻辑let http_url = '/game/project/del';let http_data = {id: param.id || this.item.id,index: param.index || this.index};let http_header = {};let flag = await this.showModal('是否确定删除该数据');if (!flag) {this.showToast('你已取消删');return;}let del = await this.$http.post(http_url, http_data, http_header, 'json');this.del = del;if (del.code == 200) {this.list.rows.splice(param.index, 1);this.list.total = this.list.rows.length;this.showToast('删除数据成功');} else {this.showToast('删除数据失败', 'error');}},// 修改数据 自定义方法async editFunction(param) {let thiz = this;let index = param && (param.index || param.index == 0) ? param.index : thiz.index || '';let form = JSON.parse(JSON.stringify(this.list.rows[param.index]));form.config = JSON.parse(form.config);let configItemDatas = [];form.config.forEach((item) => {configItemDatas.push(JSON.parse(JSON.stringify(this.configItemData)));});this.formData.configItemDatas = configItemDatas;this.form = form;this.showForm = true;},//初始化显示子表单数据条数initConfigData() {for (let i = 0; i < 1; i++) {this.form.config.push(JSON.parse(JSON.stringify(this.configItem)));this.formData.configItemDatas.push(JSON.parse(JSON.stringify(this.configItemData)));}this.initConfigValid();},//子表单验证initConfigValid() {this.$nextTick(() => {this.$refs['configRef']?.forEach((subform) => {subform.setRules(this.configItemRules);});});},//上移子表单upConfigItem(evt) {let { index } = evt.currentTarget.dataset;if (index == 0) {this.navigateTo({type: 'tip',tip: '已经是第一个'});return false;}this.form.config[index] = this.form.config.splice(index - 1, 1, this.form.config[index])[0];this.formData.configItemDatas[index] = this.formData.configItemDatas.splice(index - 1, 1, this.formData.configItemDatas[index])[0];this.initConfigValid();},//下移子表单downConfigItem(evt) {let { index } = evt.currentTarget.dataset;if (index == this.form.config.length - 1) {this.navigateTo({type: 'tip',tip: '已经是最后一个'});return false;}this.form.config[index] = this.form.config.splice(index + 1, 1, this.form.config[index])[0];this.formData.configItemDatas[index] = this.formData.configItemDatas.splice(index + 1, 1, this.formData.configItemDatas[index])[0];this.initConfigValid();},//删除子表单delConfigItem(evt) {let { index } = evt.currentTarget.dataset;this.form.config.splice(index, 1);this.formData.configItemDatas.splice(index, 1);this.initConfigValid();},//增加子表单addConfigItem() {this.form.config.push(JSON.parse(JSON.stringify(this.configItem)));this.formData.configItemDatas.push(JSON.parse(JSON.stringify(this.configItemData)));this.initConfigValid();},//验证所有的子表单checkConfigValid() {let flag = true;this.$refs['configRef']?.forEach((subform) => {subform.validate((valid) => {if (!valid) {flag = false;return false;}});});return flag;},changeConfigItemBackground(evt, configIndex, configItem) {let result = evt.hex;configItem.background = result;},initResetform() {this.initform = JSON.stringify(this.form);//如果想给表单默认初始值,其中row为某一行数据也可能是API返回的结果集,然后给到this.form//this.form = this.$tools.changeRowToForm(row,this.form)},resetForm() {this.form = JSON.parse(this.initform);},async submitForm(e) {this.$refs.formRef?.setRules(this.formRules);this.initConfigValid();this.$nextTick(async () => {let configvalid = await this.checkConfigValid();let valid = await this.$refs.formRef.validate();if (valid && configvalid) {//保存数据let param = this.form;let header = {'Content-Type': 'application/json'};let url = '/game/project/add';if (this.form.id) {url = '/game/project/update';}uni.showLoading({title: '正在保存...'});let res = await this.$http.post(url, param, header, 'json');uni.hideLoading();if (res.code == 200) {//更新列表数据this.listNum = 1;this.listApi();if (this.form.id) {this.showToast('更新成功');//关闭表单this.showForm = false;} else {//提示是否继续新增let flag = await this.showModal('是否继续新增');if (flag) {//重置表单this.resetForm();} else {//关闭窗口this.showForm = false;}}} else {this.showModal(res.msg, '提示', false);}} else {console.log('验证失败');}});}},onPullDownRefresh() {// 列表数据 API请求方法this.listNum = 1;this.listApi();uni.stopPullDownRefresh();},onReachBottom() {// 列表数据 API请求方法this.listApi();}};
</script><style lang="scss" scoped>.title-clz {background-color: #ffffff;margin-left: 16rpx;border-bottom-left-radius: 12rpx;overflow: hidden;width: calc(100% - 16rpx - 16rpx) !important;border-top-left-radius: 12rpx;margin-top: 16rpx;border-top-right-radius: 12rpx;border-bottom-right-radius: 12rpx;margin-bottom: 16rpx;margin-right: 16rpx;}.flex4-clz {padding-top: 10rpx;border-bottom-left-radius: 12rpx;padding-left: 10rpx;padding-bottom: 10rpx;border-top-right-radius: 12rpx;margin-right: 20rpx;background-color: #ffffff;margin-left: 20rpx;overflow: hidden;width: calc(100% - 20rpx - 20rpx) !important;border-top-left-radius: 12rpx;margin-top: 10rpx;border-bottom-right-radius: 12rpx;margin-bottom: 10rpx;padding-right: 10rpx;}.text1-clz {padding-top: 10rpx;padding-left: 10rpx;font-size: 28rpx !important;padding-bottom: 10rpx;padding-right: 10rpx;}.text2-clz {padding-top: 10rpx;color: #7c7c7c;padding-left: 10rpx;padding-bottom: 10rpx;padding-right: 10rpx;}.flex2-clz {border-top: 2rpx solid #eee;padding-top: 10rpx;color: #6b6b6b;padding-left: 10rpx;padding-bottom: 10rpx;padding-right: 10rpx;}.text6-clz {border: 2rpx solid #038af2;padding-top: 10rpx;border-bottom-left-radius: 10rpx;color: #038af2;padding-left: 20rpx;padding-bottom: 10rpx;border-top-right-radius: 10rpx;margin-right: 10rpx;background-color: #f0f1ff;margin-left: 10rpx;overflow: hidden;border-top-left-radius: 10rpx;margin-top: 10rpx;border-bottom-right-radius: 10rpx;margin-bottom: 10rpx;padding-right: 20rpx;}.text4-clz {border: 2rpx solid #038af2;padding-top: 10rpx;border-bottom-left-radius: 10rpx;color: #038af2;padding-left: 20rpx;padding-bottom: 10rpx;border-top-right-radius: 10rpx;margin-right: 10rpx;background-color: #f0f1ff;margin-left: 10rpx;overflow: hidden;border-top-left-radius: 10rpx;margin-top: 10rpx;border-bottom-right-radius: 10rpx;margin-bottom: 10rpx;padding-right: 20rpx;}.text13-clz {border: 2rpx solid #ffb08f;padding-top: 10rpx;border-bottom-left-radius: 10rpx;color: #ff592c;padding-left: 20rpx;padding-bottom: 10rpx;border-top-right-radius: 10rpx;margin-right: 10rpx;background-color: #fff4f0;margin-left: 10rpx;overflow: hidden;border-top-left-radius: 10rpx;margin-top: 10rpx;border-bottom-right-radius: 10rpx;margin-bottom: 10rpx;padding-right: 20rpx;}.flex3-clz {padding-top: 16rpx;border-bottom-left-radius: 0rpx;color: #747474;bottom: 0rpx;padding-left: 16rpx;padding-bottom: 16rpx;border-top-right-radius: 20rpx;background-color: #ffffff;overflow: hidden;left: 0rpx;border-top-left-radius: 20rpx;border-bottom-right-radius: 0rpx;padding-right: 16rpx;}.flex20-clz {padding-top: 16rpx;border-bottom-left-radius: 200rpx;overflow: hidden;font-weight: bold;padding-left: 10rpx;font-size: 28rpx !important;padding-bottom: 16rpx;border-top-left-radius: 200rpx;border-top-right-radius: 200rpx;border-bottom-right-radius: 200rpx;padding-right: 10rpx;}.icon2 {font-size: 40rpx;}.flex-clz {padding-top: 20rpx;padding-left: 20rpx;padding-bottom: 20rpx;padding-right: 20rpx;}.image-size {height: 400rpx !important;width: 400rpx !important;}.text-clz {color: #969696;font-size: 28rpx !important;}.form-clz {padding-top: 10rpx;border-bottom-left-radius: 12rpx;padding-left: 10rpx;padding-bottom: 10rpx;border-top-right-radius: 12rpx;margin-right: 20rpx;background-color: #ffffff;margin-left: 20rpx;overflow: hidden;width: calc(100% - 20rpx - 20rpx) !important;border-top-left-radius: 12rpx;margin-top: 10rpx;border-bottom-right-radius: 12rpx;margin-bottom: 10rpx;padding-right: 10rpx;}.flex1-clz {overflow: auto;}.formconfigtools {position: absolute;z-index: 1;right: 30rpx;bottom: 16rpx;}.formconfigtools .diygw-btn {padding: 5px;height: auto;flex: inherit;border-radius: 20px;}.flex5-clz {border: 2rpx solid #eee;padding-top: 10rpx;border-bottom-left-radius: 12rpx;padding-left: 10rpx;padding-bottom: 80rpx;border-top-right-radius: 12rpx;margin-right: 10rpx;margin-left: 10rpx;overflow: hidden;width: calc(100% - 10rpx - 10rpx) !important;border-top-left-radius: 12rpx;margin-top: 10rpx;border-bottom-right-radius: 12rpx;margin-bottom: 10rpx;padding-right: 10rpx;}.button-button-clz {margin: 6rpx !important;}.container334706 {padding-bottom: 160rpx;background-color: #f5f5f5;}
</style>
点击列表传id进转盘页面
首页获取转盘ID
根据用户维护的列表id动态显示出来。
<template><view class="container container334706"><view v-if="isshow" class="flex flex-wrap diygw-col-24 flex-direction-column items-center flex-clz"><view class="diygw-col-24"><diy-lucky-wheel ref="refPrize" width="600rpx" height="600rpx" :blocks="prizeConfig.blocks" :prizes="prizeConfig.prizes" :buttons="prizeConfig.buttons" :defaultStyle="prizeConfig.defaultStyle" :defaultConfig="prizeConfig.defaultConfig" @start="startPrize" @end="endPrize"></diy-lucky-wheel></view><view class="flex flex-wrap diygw-col-24 justify-center flex1-clz"><text @tap="navigateTo" data-type="page" data-url="/pages/records" class="diygw-col-0 more-clz"> 热门转盘 </text><text @tap="navigateTo" data-type="page" data-url="/pages/records" data-isself="1" class="diygw-col-0 text-clz"> 我的转盘 </text></view></view><view class="clearfix"></view></view>
</template><script>export default {data() {return {//用户全局信息userInfo: {},//页面传参globalOption: {},//自定义全局变量globalData: {},dataNum: 1,data: {code: 0,msg: '',data: {id: 0,title: '',config: '',remark: '',userId: 0,createTime: '',updateTime: '',deleteTime: null}},isshow: false,prize: undefined,prizeConfig: {blocks: [{ padding: '0' }],prizes: [{ range: 1, background: '#fea832', fonts: [{ text: '一等奖', top: '20' }], imgs: [{ src: '/static/ps.png', top: '50', width: '50px' }] },{ range: 1, background: '#fedb41', fonts: [{ text: '二等奖', top: '20' }] },{ range: 1, background: '#fea832', fonts: [{ text: '三等奖', top: '20' }] },{ range: 1, background: '#fedb41', fonts: [{ text: '四等奖', top: '20' }] },{ range: 1, background: '#fea832', fonts: [{ text: '五等奖', top: '20' }] },{ range: 1, background: '#fedb41', fonts: [{ text: '谢谢参与', top: '20' }] }],buttons: [{ radius: '40%', background: '#f44b24' },{ radius: '35%', background: '#fea832' },{ radius: '30%', background: '#ffecbf', pointer: true, fonts: [{ text: '开始', top: '-25' }] },{ radius: '30%', pointer: true, fonts: [{ text: '抽奖' }] }],defaultStyle: { gutter: 0, speed: 20, accelerationTime: 2500, decelerationTime: 2500 }}};},onShow() {this.setCurrentPage(this);},onLoad(option) {this.setCurrentPage(this);if (option) {this.setData({globalOption: this.getOption(option)});}this.init();},methods: {async init() {await this.dataApi();await this.isloginFunction();},// 列表数据 API请求方法async dataApi(param) {let thiz = this;param = param || {};//如果请求要重置页面,请配置点击附加参数refresh=1 增加判断如输入框回调param不是对象if (param.refresh || typeof param != 'object') {this.dataNum = 1;}//请求地址及请求数据,可以在加载前执行上面增加自己的代码逻辑let http_url = '/game/api.project/get';let http_data = {pageNum: this.dataNum,pageSize: 10,id: param.id || this.globalOption.id || '1'};let http_header = {};//不是修改,初始化用户信息if (!this.globalOption.id) {this.isshow = true;return;}let data = await this.$http.post(http_url, http_data, http_header, 'json');let datarows = data.rows;if (http_data.pageNum == 1) {this.data = data;} else if (datarows) {let rows = this.data.rows.concat(datarows);data.rows = rows;this.data = Object.assign(this.data, data);}if (datarows && datarows.length > 0) {this.dataNum = this.dataNum + 1;}uni.setNavigationBarTitle({title: data.data.title});let config = JSON.parse(data.data.config);function getRandomColor(index) {let colors = ['#fea832', 'fedb41'];return colors[index % 2];}let prizes = config.map((item, index) => {return { range: item.range ? parseInt(item.range) : 1, background: item.background || getRandomColor(index), fonts: [{ text: item.text, top: '20' }] };});this.prizeConfig.prizes = prizes;this.isshow = true;},// 判断用户是否登录 自定义方法async isloginFunction(param) {let thiz = this;if (!this.$session.getToken()) {//比如未登录,转身到其他页面等this.showToast('请先登录');this.navigateTo({type: 'page',url: 'login'});return;}},// 退出登录 自定义方法async logoutFunction(param) {let thiz = this;this.$session.clearUser();this.navigateTo({type: 'page',url: 'login'});},// 得奖回调 自定义方法async changeZhongjiangFunction(param) {let thiz = this;let prize = param && (param.prize || param.prize == 0) ? param.prize : thiz.prize || '';console.log(JSON.stringify(prize));this.navigateTo({type: 'tip',tip: prize.fonts[0].text});let flag = await this.showModal(prize.fonts[0].text);},//开始startPrize() {this.$refs.refPrize.play();setTimeout(() => {this.$refs.refPrize.stop();}, 3000);},// 停止endPrize(prize) {this.prize = prize;this.navigateTo({ prize: this.prize, type: 'changeZhongjiangFunction' });}},onPullDownRefresh() {// 列表数据 API请求方法this.dataNum = 1;this.dataApi();uni.stopPullDownRefresh();},onReachBottom() {// 列表数据 API请求方法this.dataApi();}};
</script><style lang="scss" scoped>.flex-clz {padding-top: 40rpx;padding-left: 10rpx;padding-bottom: 10rpx;padding-right: 10rpx;}.flex1-clz {margin-left: 10rpx;font-weight: bold;width: calc(100% - 10rpx - 10rpx) !important;font-size: 32rpx !important;margin-top: 30rpx;margin-bottom: 10rpx;margin-right: 10rpx;}.more-clz {padding-top: 10rpx;padding-left: 10rpx;padding-bottom: 10rpx;padding-right: 10rpx;}.text-clz {padding-top: 10rpx;padding-left: 10rpx;padding-bottom: 10rpx;padding-right: 10rpx;}.container334706 {}
</style>