123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788 |
- <template>
- <view class="flex-col justify-start page">
- <cu-custom isBack="true" bgColor="#000000">
- <view slot="content" style="color: #FFFFFF">报警设置</view>
- </cu-custom>
- <!-- <time-slot-->
- <!-- ref="timeslot"-->
- <!-- :title="'选择时间段'"-->
- <!-- @confirm="confirmTime">-->
- <!-- </time-slot>-->
- <view class="flex-col justify-start section">
- <view class="flex-col section_2 space-y-32">
- <view class="flex-col">
- <text class="self-start font_1 text_2">心率异常提醒</text>
- <view class="flex-col section_6 view space-y-10">
- <view class="flex-row justify-between self-start equal-division">
- <view class="flex-row items-end space-x-4 items-center">
- <switch :checked="switchFrom.sign_sms_switch" color="#1E09DE" style="transform:scale(0.7)" @change="switchTzSms"/>
- <text class="font_2">短信</text>
- </view>
- <view class="flex-row items-end space-x-4 items-center">
- <switch :checked="switchFrom.sign_voice_switch" color="#1E09DE" style="transform:scale(0.7)" @change="switchTzVoice"/>
- <text class="font_2">电话</text>
- </view>
- <view class="flex-row items-end space-x-4 items-center">
- <switch :checked="switchFrom.sign_horn_switch" color="#1E09DE" style="transform:scale(0.7)" @change="switchTzHorn"/>
- <text class="font_2">喇叭</text>
- </view>
- </view>
- <view class="flex-col">
- <view class="flex-row justify-between items-center list-item">
- <text class="font_2 text_3">心率过速提醒值</text>
- <view class="flex-row items-center group_3 space-x-6">
- <picker @change="pickerChange" :range="sleepWornList.rh_highList" data-target="1">
- <view class="uni-input">
- <text class="font_3">{{ sleepWorn.rh_high }}</text>
- <text class="font_4">次/分钟</text>
- <text class="icon-right text-white"></text>
- </view>
- </picker>
- </view>
- </view>
- <view class="flex-row justify-between items-center list-item">
- <text class="font_2 text_3">心率过缓提醒值</text>
- <view class="flex-row items-center group_3 space-x-6">
- <picker @change="pickerChange" :range="sleepWornList.rh_lowList" data-target="2">
- <view class="uni-input">
- <text class="font_3">{{ sleepWorn.rh_low }}</text>
- <text class="font_4">次/分钟</text>
- <text class="icon-right text-white"></text>
- </view>
- </picker>
- </view>
- </view>
- </view>
- </view>
- </view>
- <view class="flex-col group_5 space-y-14">
- <text class="self-start font_1">呼吸率异常提醒</text>
- <view class="flex-col section_6 space-y-10">
- <view class="flex-row justify-between self-start equal-division">
- <view class="flex-row items-end space-x-4 items-center">
- <switch :checked="switchFrom.sign_sms_switch" color="#1E09DE" style="transform:scale(0.7)" @change="switchTzSms" />
- <text class="font_2">短信</text>
- </view>
- <view class="flex-row items-end space-x-4 items-center">
- <switch :checked="switchFrom.sign_voice_switch" color="#1E09DE" style="transform:scale(0.7)" @change="switchTzVoice"/>
- <text class="font_2">电话</text>
- </view>
- <view class="flex-row items-end space-x-4 items-center">
- <switch :checked="switchFrom.sign_horn_switch" color="#1E09DE" style="transform:scale(0.7)" @change="switchTzHorn"/>
- <text class="font_2">喇叭</text>
- </view>
- </view>
- <view class="flex-col">
- <view class="flex-row justify-between items-center list-item">
- <text class="font_2 text_3">呼吸率过速提醒值</text>
- <view class="flex-row items-center space-x-6">
- <picker @change="pickerChange" :range="sleepWornList.hx_highList" data-target="3">
- <view class="uni-input">
- <text class="font_3">{{ sleepWorn.hx_high }}</text>
- <text class="font_4">次/分钟</text>
- <text class="icon-right text-white"></text>
- </view>
- </picker>
- </view>
- </view>
- <view class="flex-row justify-between items-center list-item">
- <text class="font_2 text_3">呼吸率过缓提醒值</text>
- <view class="flex-row items-center space-x-6">
- <picker @change="pickerChange" :range="sleepWornList.hx_lowList" data-target="4">
- <view class="uni-input">
- <text class="font_3">{{ sleepWorn.hx_low }}</text>
- <text class="font_4">次/分钟</text>
- <text class="icon-right text-white"></text>
- </view>
- </picker>
- </view>
- </view>
- </view>
- </view>
- </view>
- <view class="flex-col group_5">
- <view class="flex-row items-center group_6 space-x-30">
- <text class="font_1">离床预警提醒</text>
- <text class="font_5 text_4">注:离床预警生效需要用户在床超过1小时。</text>
- </view>
- <view class="flex-col section_7 space-y-24">
- <!-- <view class="flex-row justify-between self-start equal-division">-->
- <!-- <view class="flex-row items-end space-x-4 items-center">-->
- <!-- <switch :checked="switchFrom.falling_bed" color="#1E09DE" style="transform:scale(0.7)" @change="switchFallingBed" />-->
- <!-- <text class="font_2">坠床预警</text>-->
- <!-- </view>-->
- <!-- </view>-->
- <view class="flex-row justify-between self-start equal-division">
- <view class="flex-row items-end space-x-4 items-center">
- <switch :checked="switchFrom.out_of_bed_sms_switch" color="#1E09DE" style="transform:scale(0.7)" @change="switchOutSms" />
- <text class="font_2">短信</text>
- </view>
- <view class="flex-row items-end space-x-4 items-center">
- <switch :checked="switchFrom.out_of_bed_voice_switch" color="#1E09DE" style="transform:scale(0.7)" @change="switchOutVoice" />
- <text class="font_2">电话</text>
- </view>
- <view class="flex-row items-end space-x-4 items-center">
- <switch :checked="switchFrom.out_of_bed_horn_switch" color="#1E09DE" style="transform:scale(0.7)" @change="switchOutHorn"/>
- <text class="font_2">喇叭</text>
- </view>
- </view>
- <view class="flex-col group_7">
- <view class="flex-row justify-between items-center group_8">
- <text class="font_2 text_3">离床预警区间</text>
- <view class="action">
- <picker mode="time" :value="sleepWorn.leave_start" start="00:00" end="23:59" @change="timeChange" data-target="leave_start">
- <view class="uni-input font_3">
- {{ sleepWorn.leave_start }}
- </view>
- </picker>
- </view>
- <text class="font_3">~</text>
- <view class="action">
- <picker mode="time" :value="sleepWorn.leave_end" start="00:00" end="23:59" @change="timeChange" data-target="leave_end">
- <view class="uni-input font_3">
- {{ sleepWorn.leave_end }}
- </view>
- </picker>
- </view>
- </view>
- <view class="flex-row justify-between items-center group_10">
- <text class="font_2 text_3">离床未归提醒</text>
- <view class="flex-row items-center group_11 space-x-8">
- <picker @change="pickerChange" :range="sleepWornList.leave_durationList" data-target="5">
- <view class="uni-input">
- <text class="font_3">{{sleepWorn.leave_duration }}</text>
- <text class="font_4">分钟</text>
- <text class="icon-right text-white"></text>
- </view>
- </picker>
- </view>
- </view>
- </view>
- </view>
- </view>
- <view class="flex-col group_5 space-y-14">
- <text class="self-start font_1">紧急求助开关</text>
- <view class="flex-col justify-start items-start section_8">
- <view class="flex-row space-x-6">
- <view class="flex-row items-center equal-division-item space-x-4">
- <switch :checked="switchFrom.sos_sms_switch" color="#1E09DE" style="transform:scale(0.7)" @change="switchSosSms" />
- <text class="font_2">短信</text>
- </view>
- <view class="flex-row items-center equal-division-item space-x-4">
- <switch :checked="switchFrom.sos_voice_switch" color="#1E09DE" style="transform:scale(0.7)" @change="switchSosVoice" />
- <text class="font_2">电话</text>
- </view>
- <view class="flex-row items-end space-x-4 items-center">
- <switch :checked="switchFrom.sos_horn_switch" color="#1E09DE" style="transform:scale(0.7)" @change="switchSosHorn"/>
- <text class="font_2">喇叭</text>
- </view>
- </view>
- </view>
- </view>
- <view class="flex-col group_5 space-y-20">
- <view class="flex-col space-y-12">
- <text class="self-start font_1 text_5">语音短信提示手机号码设置</text>
- <view class="flex-col space-y-4">
- <text class="font_5 text_6">
- 注:设置提醒手机号需注册“守护之影”小程序,前往“我的”-“购买套餐”中领取短信语言套餐包,才能发送短信语音提醒。
- </text>
- <view class="flex-col section_9">
- <view class="flex-row justify-center items-center list-item space-x-6" @click="handleShareClick">
- <image class="image_9" src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/649415135a7e3f0310661c1e/649415b654fe0000116ae544/16878800827365047681.png"/>
- <text class="font_2">添加推送亲友</text>
- </view>
- </view>
- </view>
- </view>
- <view class="flex-col justify-start items-center self-center button">
- <text class="text_9" @click="saveSleepWarn">保存设置</text>
- </view>
- </view>
- </view>
- </view>
- <view class="cu-modal" :class="updateShow?'show':''">
- <view class="cu-dialog">
- <view class="cu-bar bg-white justify-end">
- <view style="color: black" class="content">编辑昵称</view>
- <view class="action" @tap="updateShow=false">
- <text class="cuIcon-close text-red"></text>
- </view>
- </view>
- <view class="">
- <form>
- <view class="cu-form-group solid-bottom">
- <view class="title">昵称</view>
- <input type="text" v-model="userInfo.nickname" class="text-left" placeholder="请输入昵称"/>
- </view>
- <view class="cu-form-group">
- <view class="text-df text-gray">设置昵称,以便播报,6字以内</view>
- </view>
- </form>
- </view>
- <view class="cu-bar bg-white justify-end">
- <view class="action">
- <button class="cu-btn bg-green margin-left" @tap="updateNickName">确定</button>
- </view>
- </view>
- </view>
- </view>
- </view>
- </template>
- <script>
- import { mapActions } from 'vuex'
- import Storage from '@/utils/storage'
- import * as API_SLEEP_REPORT from '@/api/sleep_report'
- import * as API_MEMBER_WARN_SWITCH from '@/api/member_warn_switch'
- export default {
- data() {
- return {
- title: 'picker',
- index: 0,
- sleepWorn : {
- rh_high: 110,
- rh_low: 60,
- hx_high: 30,
- hx_low: 10,
- leave_start: '22:00',
- leave_end: '06:00',
- leave_duration: 30,
- sn: ''
- },
- sleepWornList: {
- rh_highList: [],
- rh_lowList: [],
- hx_highList: [],
- hx_lowList: [],
- leave_durationList: []
- },
- switchFrom: {
- sign_sms_switch: false,
- sign_voice_switch: false,
- sign_horn_switch: false,
- out_of_bed_sms_switch: false,
- out_of_bed_voice_switch: false,
- out_of_bed_horn_switch: false,
- sos_sms_switch: false,
- sos_voice_switch: false,
- sos_horn_switch: false
- // falling_bed: false
- },
- userInfo: null,
- updateShow: false
- }
- },
- onLoad(options) {
- const { imei } = options
- this.sleepWorn.sn = imei
- console.log('imei===', imei)
- this.API_getWartResult()
- this.setWarn()
- this.userInfo = Storage.getItem('userInfo')
- if (this.userInfo) {
- this.API_getSwitch()
- this.switchFrom.member_union_id = this.userInfo.union_id
- if (this.userInfo.nickname.length > 6 || this.userInfo.mobile === this.userInfo.nickname || this.userInfo.nickname === '微信用户') {
- const _this = this
- uni.showModal({
- title: '提示',
- content: "您还未设置昵称,是否设置呢?",
- confirmText: "确定",
- showCancel: true,
- success: function(res) {
- if (res.confirm) {
- _this.updateShow = true
- }
- }
- })
- }
- }
- },
- methods: {
- // handleInput() {
- // this.$refs.inputDialog.open()
- // },
- // confirmTime(val) {
- // console.log(val)
- // },
- API_getWartResult() {
- const _this = this
- API_SLEEP_REPORT.getWarnResult(this.sleepWorn.sn).then(res => {
- if (res.data !== null) {
- res.data.leave_start = res.data.leave_start.substring(0, 5)
- res.data.leave_end = res.data.leave_end.substring(0, 5)
- _this.sleepWorn = res.data
- }
- })
- },
- API_getSwitch() {
- const _this = this
- API_MEMBER_WARN_SWITCH.getByMemberUnionId(this.userInfo.union_id).then(res => {
- if (res) {
- _this.switchFrom = res
- }
- })
- },
- setWarn() {
- this.sleepWornList.rh_highList = Array.from(Array(71).keys(), n => n + 1 + 89)
- this.sleepWornList.rh_lowList = Array.from(Array(31).keys(), n => n + 1 + 29)
- this.sleepWornList.hx_highList = Array.from(Array(21).keys(), n => n + 1 + 19)
- this.sleepWornList.hx_lowList = Array.from(Array(8).keys(), n => n + 1 + 4)
- this.sleepWornList.leave_durationList = Array.from(Array(51).keys(), n => n + 1 + 9)
- },
- pickerChange(e) {
- const index = e.detail.value
- switch (e.mp.target.dataset.target) {
- case '1':
- this.sleepWorn.rh_high = this.sleepWornList.rh_highList[index]
- break
- case '2':
- this.sleepWorn.rh_low = this.sleepWornList.rh_lowList[index]
- break
- case '3':
- this.sleepWorn.hx_high = this.sleepWornList.hx_highList[index]
- break
- case '4':
- this.sleepWorn.hx_low = this.sleepWornList.hx_lowList[index]
- break
- case '5':
- this.sleepWorn.leave_duration = this.sleepWornList.leave_durationList[index]
- break
- default:
- break
- }
- },
- timeChange(e) {
- switch (e.mp.target.dataset.target) {
- case 'leave_start':
- this.sleepWorn.leave_start = e.detail.value
- break
- case 'leave_end':
- this.sleepWorn.leave_end = e.detail.value
- break
- default:
- break
- }
- },
- saveSleepWarn() {
- const _this = this
- uni.showModal({
- title: '提示',
- content: "确定要提交设置吗?",
- confirmText: "确定",
- showCancel: true,
- success: function(res) {
- if (res.confirm) {
- API_SLEEP_REPORT.pushSleepWarn(_this.sleepWorn).then(res => {
- uni.showToast({
- title:"保存成功"
- })
- })
- if (_this.switchFrom.id) {
- // 修改
- API_MEMBER_WARN_SWITCH.edit(_this.switchFrom, _this.switchFrom.id)
- } else {
- // 新增
- API_MEMBER_WARN_SWITCH.add(_this.switchFrom)
- }
- }
- }
- })
- },
- switchTzSms(e) {
- this.switchFrom.sign_sms_switch = e.detail.value
- },
- switchTzVoice(e) {
- this.switchFrom.sign_voice_switch = e.detail.value
- },
- switchTzHorn(e) {
- this.switchFrom.sign_horn_switch = e.detail.value
- },
- switchFallingBed(e) {
- this.switchFrom.falling_bed = e.detail.value
- console.log(this.switchFrom.falling_bed)
- },
- switchOutSms(e) {
- this.switchFrom.out_of_bed_sms_switch = e.detail.value
- },
- switchOutVoice(e) {
- this.switchFrom.out_of_bed_voice_switch = e.detail.value
- },
- switchOutHorn(e) {
- this.switchFrom.out_of_bed_horn_switch = e.detail.value
- },
- switchSosSms(e) {
- this.switchFrom.sos_sms_switch = e.detail.value
- },
- switchSosVoice(e) {
- this.switchFrom.sos_voice_switch = e.detail.value
- },
- switchSosHorn(e) {
- this.switchFrom.sos_horn_switch = e.detail.value
- },
- updateNickName() {
- if (this.userInfo.nickname === '') {
- uni.showToast({
- title: '请输入昵称',
- icon: 'none'
- })
- return
- }
- if (this.nickname.length > 6) {
- uni.showToast({title: '昵称长度不能超过6个', icon: 'none', duration: 3000})
- return
- }
- this.updateShow = false
- const _this = this
- this.saveUserInfo({nickname: this.userInfo.nickname}).then(() => {
- uni.showToast({
- title: '修改成功',
- icon: 'none'
- })
- this.$store.dispatch('getUserDataAction').then((res)=>{
- _this.userInfo = res
- })
- })
- },
- handleShareClick() {
- uni.navigateTo({
- url: '/pages/user/shareUser/index'
- })
- },
- ...mapActions({
- saveUserInfo: 'saveUserInfoAction'
- })
- }
- }
- </script>
- <style lang="scss" scoped>
- .page {
- background-color: #000000;
- width: 100%;
- overflow-y: auto;
- overflow-x: hidden;
- height: 100%;
- background-image: url('http://wdklmall.oss-cn-shenzhen.aliyuncs.com/mallgoods/goods/3C62AD507C8345D49AEB2AAD8F7584BB.png');
- background-repeat: no-repeat;
- background-size: cover ;
- background-attachment: fixed ;
- background-position: center center;
- .section {
- .section_2 {
- padding-bottom: 1.25rem;
- background-image: linear-gradient(180deg, rgba(103, 103, 226, 0.95) 0%, rgba(12, 117, 246, 0.61) 100%);
- backdrop-filter: blur(0.19rem);
- height: 100%;
- .font_1 {
- font-size: 1.13rem;
- font-family: PingFangSC;
- line-height: 1.03rem;
- color: #ffffff;
- }
- .text_2 {
- margin-left: 1.25rem;
- margin-top: 1.38rem;
- }
- .section_6 {
- padding: 0.94rem 0.63rem 0.13rem;
- background-color: #ffffff33;
- border-radius: 1rem;
- }
- .view {
- margin: 0.88rem 1.25rem 0;
- }
- .space-y-10 {
- & > view:not(:first-child),
- & > text:not(:first-child),
- & > image:not(:first-child) {
- margin-top: 0.63rem;
- }
- }
- .group_5 {
- padding: 0 1.25rem;
- .group_6 {
- padding-bottom: 0.88rem;
- .text_4 {
- line-height: 0.59rem;
- }
- }
- .space-x-30 {
- & > view:not(:first-child),
- & > text:not(:first-child),
- & > image:not(:first-child) {
- margin-left: 0.3rem;
- }
- }
- .section_7 {
- padding: 0.94rem 0.63rem 0;
- background-color: #ffffff33;
- border-radius: 1rem;
- .group_7 {
- border-bottom: solid 0.063rem #ffffff1a;
- .group_8 {
- padding-bottom: 0.88rem;
- border-bottom: solid 0.063rem #ffffff1a;
- .group_9 {
- margin-right: 0.19rem;
- }
- .space-x-20 {
- & > view:not(:first-child),
- & > text:not(:first-child),
- & > image:not(:first-child) {
- margin-left: 1.25rem;
- }
- }
- }
- .group_10 {
- padding: 0.88rem 0;
- .group_11 {
- margin-right: 0.19rem;
- }
- }
- }
- }
- .space-y-24 {
- & > view:not(:first-child),
- & > text:not(:first-child),
- & > image:not(:first-child) {
- margin-top: 1.5rem;
- }
- }
- .section_8 {
- padding: 0.63rem 0;
- background-color: #ffffff33;
- border-radius: 1rem;
- }
- .space-y-12 {
- & > view:not(:first-child),
- & > text:not(:first-child),
- & > image:not(:first-child) {
- margin-top: 0.75rem;
- }
- .text_5 {
- line-height: 1.06rem;
- }
- .space-y-4 {
- & > view:not(:first-child),
- & > text:not(:first-child),
- & > image:not(:first-child) {
- margin-top: 0.55rem;
- }
- .text_6 {
- line-height: 0.75rem;
- }
- .section_9 {
- padding: 0 0.63rem;
- background-color: #ffffff33;
- border-radius: 1rem;
- }
- }
- }
- .font_5 {
- font-size: 0.63rem;
- font-family: PingFangSC;
- color: red;
- }
- .space-x-8 {
- & > view:not(:first-child),
- & > text:not(:first-child),
- & > image:not(:first-child) {
- margin-left: 0.5rem;
- }
- .text_7 {
- color: #ffffff80;
- }
- .image_8 {
- width: 1.13rem;
- height: 1.13rem;
- }
- }
- .button {
- padding: 0.5rem 0;
- background-image: linear-gradient(90deg, #5611f780 0%, #1e1ef7f2 100%);
- border-radius: 1rem;
- width: 8.69rem;
- .text_9 {
- color: #ffffff;
- font-size: 1rem;
- font-family: PingFangSC;
- line-height: 0.94rem;
- }
- }
- }
- .space-y-14 {
- & > view:not(:first-child),
- & > text:not(:first-child),
- & > image:not(:first-child) {
- margin-top: 0.88rem;
- }
- }
- .equal-division {
- width: 12.5rem;
- }
- .font_2 {
- font-size: 0.88rem;
- font-family: PingFangSC;
- line-height: 0.81rem;
- color: #ffffff;
- }
- .text_3 {
- opacity: 0.8;
- }
- .font_3 {
- font-size: 1.13rem;
- font-family: PingFangSC;
- line-height: 0.81rem;
- color: #ffffff;
- }
- .image_7 {
- width: 0.38rem;
- height: 0.69rem;
- }
- .font_4 {
- font-size: 0.75rem;
- font-family: PingFangSC;
- line-height: 0.69rem;
- color: #ffffff;
- }
- .space-x-6 {
- & > view:not(:first-child),
- & > text:not(:first-child),
- & > image:not(:first-child) {
- margin-left: 0.38rem;
- }
- .equal-division-item {
- padding: 0.25rem 0.63rem;
- width: 6.84rem;
- }
- }
- .space-x-4 {
- & > view:not(:first-child),
- & > text:not(:first-child),
- & > image:not(:first-child) {
- margin-left: 0.25rem;
- }
- }
- .space-y-20 {
- & > view:not(:first-child),
- & > text:not(:first-child),
- & > image:not(:first-child) {
- margin-top: 1.25rem;
- }
- }
- .list-item {
- padding: 0.88rem 0;
- border-bottom: solid 0.063rem #ffffff1a;
- .group_3 {
- margin-right: 0.19rem;
- }
- .text_8 {
- line-height: 0.78rem;
- }
- .image_9 {
- width: 0.88rem;
- height: 0.88rem;
- }
- }
- }
- .space-y-32 {
- & > view:not(:first-child),
- & > text:not(:first-child),
- & > image:not(:first-child) {
- margin-top: 2rem;
- }
- }
- }
- }
- @mixin flex {
- /* #ifndef APP-NVUE */
- display: flex;
- /* #endif */
- flex-direction: row;
- }
- @mixin height {
- /* #ifndef APP-NVUE */
- height: 100%;
- /* #endif */
- /* #ifdef APP-NVUE */
- flex: 1;
- /* #endif */
- }
- .box {
- @include flex;
- }
- .button {
- @include flex;
- align-items: center;
- justify-content: center;
- flex: 1;
- height: 35px;
- margin: 0 5px;
- border-radius: 5px;
- }
- .text {
- font-size: 12px;
- color: #333;
- }
- </style>
|