762 lines
19 KiB
Vue
762 lines
19 KiB
Vue
<template>
|
|
<page-meta><navigation-bar :title="$tt('group.equipment')" title-align="center" background-color="#F1F3F9"
|
|
front-color="#000000" /></page-meta>
|
|
<view class="device-group-wrap">
|
|
<u-sticky zIndex="98" bgColor="#F1F3F9">
|
|
<view class="nav-bar">
|
|
<view v-if="!isSearch" style="margin-right: 20rpx;">
|
|
<u-icon name="search" size="27" @click="isSearch = true"></u-icon>
|
|
</view>
|
|
<view v-else style="width: 100%;">
|
|
<!-- #ifndef APP-NVUE -->
|
|
<u-input :customStyle="{ padding: '17rpx 36rpx', background: '#FFFFFF' }"
|
|
v-model="queryParams.groupName" :placeholder="$tt('group.inputContent')" shape="circle"
|
|
@clear="handleClearSearch" clearable>
|
|
<!-- #endif -->
|
|
<!-- #ifdef APP-NVUE -->
|
|
<u--input :customStyle="{ padding: '17rpx 36rpx', background: '#FFFFFF' }"
|
|
v-model="queryParams.groupName" :placeholder="$tt('group.inputContent')" shape="circle"
|
|
@clear="handleClearSearch" clearable>
|
|
<!-- #endif -->
|
|
<template slot="prefix">
|
|
<u-icon name="search" color="rgb(192, 196, 204)" size="26"
|
|
@click="isSearch = false"></u-icon>
|
|
</template>
|
|
<template slot="suffix">
|
|
<view style="display: flex; flex-direction: row; align-items: center;">
|
|
<span
|
|
style="width: 0px; height: 14px; border: 1px solid #000000; opacity: 0.1;"></span>
|
|
<span style="font-size: 14px; font-weight: 400; color: #3378FE; margin-left: 24rpx;"
|
|
@click="handleSearch">{{$tt('common.search')}}</span>
|
|
</view>
|
|
</template>
|
|
<!-- #ifndef APP-NVUE -->
|
|
</u-input>
|
|
<!-- #endif -->
|
|
<!-- #ifdef APP-NVUE -->
|
|
</u--input>
|
|
<!-- #endif -->
|
|
</view>
|
|
<view class="right-wrap">
|
|
<u-button @click="handleAddGrup()" type="primary" icon="plus"
|
|
:customStyle="{ width: '42rpx', height: '42rpx', padding: 0, borderRadius: '50%', minWidth: 'auto' }"
|
|
shape="circle" size="mini"></u-button>
|
|
</view>
|
|
</view>
|
|
</u-sticky>
|
|
|
|
<view class="card-wrap">
|
|
<view class="item-wrap" v-for="(item, index) in dataList" :key="index">
|
|
<view :style="{margin:(index % 2 === 0 ?'14rpx 14rpx 14rpx 30rpx':'14rpx 30rpx 14rpx 14rpx')}"
|
|
class="card">
|
|
<view class="title" @click="handleEdit(item)">{{item.groupName}}</view>
|
|
<view class="com-wrap">
|
|
<view class="list" v-for="chil in item.deviceShortV0List">
|
|
<view :key="chil.deviceId" class="item">{{chil.deviceName}}</view>
|
|
</view>
|
|
</view>
|
|
<view class="footer">
|
|
<u--text prefixIcon="plus" iconStyle="margin-right: 5px; font-size: 11px; color: #839FFF"
|
|
size="11px" color="#839FFF" :text="$tt('group.add')"
|
|
@click="handleAddDevice(item)"></u--text>
|
|
<u--text margin="0 0 0 12px" prefixIcon="list-dot"
|
|
iconStyle="margin-right: 5px; font-size: 11px; color: #0BD800" size="11px" color="#0BD800"
|
|
:text="$tt('group.detail')" @click="handleEdit(item)"></u--text>
|
|
<u--text margin="0 0 0 12px" prefixIcon="setting"
|
|
iconStyle="margin-right: 5px; font-size: 11px; color: #FF6B35" size="11px" color="#FF6B35"
|
|
:text="'区域控制'" @click="handleAreaControl(item)"></u--text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<u-empty mode="list" :show="total === 0" marginTop="200"></u-empty>
|
|
<u-loadmore :status="status" v-if="total > queryParams.pageSize" marginTop="20"
|
|
:nomoreText="$tt('group.nomore')" />
|
|
|
|
<!-- 区域控制弹窗 -->
|
|
<u-popup :show="showAreaControlPopup" @close="showAreaControlPopup = false" mode="center"
|
|
:customStyle="{ width: '700rpx', borderRadius: '20rpx' }">
|
|
<view class="area-control-popup">
|
|
<view class="popup-header">
|
|
<text class="popup-title">区域控制</text>
|
|
<u-icon name="close" size="20" @click="showAreaControlPopup = false"></u-icon>
|
|
</view>
|
|
<view class="popup-content">
|
|
<view class="group-info">
|
|
<text class="group-name">{{currentGroup.groupName}}</text>
|
|
<text class="device-count">设备数量: {{currentGroup.deviceShortV0List ? currentGroup.deviceShortV0List.length : 0}}</text>
|
|
</view>
|
|
|
|
<!-- 基础设置 -->
|
|
<view class="basic-settings">
|
|
<view class="setting-title">基础设置</view>
|
|
|
|
<!-- 音量控制 -->
|
|
<view class="volume-slider">
|
|
<view class="volume-icon">
|
|
<u-icon name="volume" size="20" color="#2979ff"></u-icon>
|
|
</view>
|
|
<view class="slider-container">
|
|
<u-slider v-model="groupVolume" :min="0" :max="100" :step="1" @change="volumeChange"
|
|
height="4" activeColor="#2979ff" blockSize="18" :showValue="false">
|
|
</u-slider>
|
|
<view class="volume-marks">
|
|
<text>0</text>
|
|
<text>50</text>
|
|
<text>100</text>
|
|
</view>
|
|
</view>
|
|
<view class="volume-value">{{ groupVolume }}%</view>
|
|
</view>
|
|
|
|
<!-- 音频开关 -->
|
|
<view class="audio-switch">
|
|
<text>音频开关</text>
|
|
<u-switch v-model="groupAudioEnabled" @change="audioSwitchChange" size="22"></u-switch>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 音频方案设置 -->
|
|
<view class="audio-scheme">
|
|
<view class="setting-title">音频方案</view>
|
|
<view class="scheme-options">
|
|
<view class="scheme-item" :class="{ active: selectedScheme === 'welcome' }" @click="selectScheme('welcome')">
|
|
<u-icon name="volume" size="24" color="#2979ff"></u-icon>
|
|
<text>欢迎语音</text>
|
|
</view>
|
|
<view class="scheme-item" :class="{ active: selectedScheme === 'alert' }" @click="selectScheme('alert')">
|
|
<u-icon name="bell" size="24" color="#ff9900"></u-icon>
|
|
<text>警报提示</text>
|
|
</view>
|
|
<view class="scheme-item" :class="{ active: selectedScheme === 'background' }" @click="selectScheme('background')">
|
|
<u-icon name="music" size="24" color="#0BD800"></u-icon>
|
|
<text>背景音乐</text>
|
|
</view>
|
|
<view class="scheme-item" :class="{ active: selectedScheme === 'custom' }" @click="selectScheme('custom')">
|
|
<u-icon name="setting" size="24" color="#839FFF"></u-icon>
|
|
<text>自定义</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 自定义音频设置 -->
|
|
<view class="custom-audio" v-if="selectedScheme === 'custom'">
|
|
<view class="custom-form">
|
|
<view class="form-item">
|
|
<text class="label">主持人</text>
|
|
<view class="radio-group">
|
|
<view class="radio-item" :class="{ active: customAudio.per === '0' }" @click="customAudio.per = '0'">
|
|
<text>小美</text>
|
|
</view>
|
|
<view class="radio-item" :class="{ active: customAudio.per === '1' }" @click="customAudio.per = '1'">
|
|
<text>小宇</text>
|
|
</view>
|
|
<view class="radio-item" :class="{ active: customAudio.per === '3' }" @click="customAudio.per = '3'">
|
|
<text>逍遥</text>
|
|
</view>
|
|
<view class="radio-item" :class="{ active: customAudio.per === '4' }" @click="customAudio.per = '4'">
|
|
<text>丫丫</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="form-item">
|
|
<text class="label">合成文本</text>
|
|
<u-input v-model="customAudio.text" type="textarea" placeholder="请输入合成文本" height="80"></u-input>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 控制操作 -->
|
|
<view class="control-actions">
|
|
<view class="setting-title">快速操作</view>
|
|
<view class="action-buttons">
|
|
<view class="action-btn primary" @click="handleControlAction('all_on')">
|
|
<u-icon name="checkmark-circle" color="#fff" size="20"></u-icon>
|
|
<text>全部开启</text>
|
|
</view>
|
|
<view class="action-btn danger" @click="handleControlAction('all_off')">
|
|
<u-icon name="close-circle" color="#fff" size="20"></u-icon>
|
|
<text>全部关闭</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="popup-footer">
|
|
<u-button @click="showAreaControlPopup = false" plain size="small">取消</u-button>
|
|
<u-button type="primary" @click="applySettings" size="small">应用设置</u-button>
|
|
</view>
|
|
</view>
|
|
</u-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { getGroupList } from '@/apis/modules/group';
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
isSearch: true,
|
|
status: 'loadmore', // 加载更多
|
|
dataList: [], // 列表数据
|
|
total: 0, // 总条数
|
|
showAreaControlPopup: false, // 区域控制弹窗显示状态
|
|
currentGroup: {}, // 当前选中的分组
|
|
queryParams: {
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
userId: 0,
|
|
groupName: null,
|
|
showDevice: true,
|
|
},
|
|
groupVolume: 50,
|
|
groupAudioEnabled: true,
|
|
selectedScheme: 'welcome',
|
|
customAudio: {
|
|
per: '0',
|
|
text: ''
|
|
}
|
|
};
|
|
},
|
|
onLoad() {
|
|
this.queryParams.userId = this.profile.userId;
|
|
this.getList();
|
|
},
|
|
onShow() {
|
|
// 接收返回刷新
|
|
uni.$off('re-device-group-list')
|
|
uni.$once('re-device-group-list', (dat) => {
|
|
if (dat) {
|
|
this.dataList = [];
|
|
this.queryParams.pageNum = 1;
|
|
this.getList(); // Http获取列表
|
|
}
|
|
})
|
|
let operate = getApp().globalData.operate;
|
|
if (operate && operate == 'operate') {
|
|
this.getList();
|
|
getApp().globalData.operate = ""; // 置空 operate
|
|
}
|
|
},
|
|
methods: {
|
|
// 获取列表数据
|
|
getList() {
|
|
getGroupList(this.queryParams).then(response => {
|
|
if (this.queryParams.pageNum == 1) {
|
|
this.dataList = response.rows;
|
|
} else {
|
|
this.dataList = this.dataList.concat(response.rows);
|
|
}
|
|
this.total = response.total;
|
|
uni.stopPullDownRefresh();
|
|
});
|
|
},
|
|
// 搜索
|
|
handleSearch(value) {
|
|
this.dataList = [];
|
|
this.queryParams.pageNum = 1;
|
|
this.getList(true);
|
|
},
|
|
handleClearSearch() {
|
|
this.handleSearch();
|
|
},
|
|
// 新增
|
|
handleAddGrup() {
|
|
uni.navigateTo({
|
|
url: '/pagesB/user/deviceGroup/detail'
|
|
});
|
|
},
|
|
// 编辑
|
|
handleEdit(item) {
|
|
uni.navigateTo({
|
|
url: '/pagesB/user/deviceGroup/detail?groupId=' + item.groupId
|
|
});
|
|
},
|
|
// 选择分组设备
|
|
handleAddDevice(item) {
|
|
uni.navigateTo({
|
|
url: '/pagesB/user/deviceGroup/devices?groupId=' + item.groupId + '&groupUserId=' +
|
|
item.userId
|
|
});
|
|
},
|
|
// 区域控制
|
|
handleAreaControl(item) {
|
|
this.currentGroup = item;
|
|
this.showAreaControlPopup = true;
|
|
// 初始化设置值
|
|
this.groupVolume = 50;
|
|
this.groupAudioEnabled = true;
|
|
this.selectedScheme = 'welcome';
|
|
this.customAudio = {
|
|
per: '0',
|
|
text: ''
|
|
};
|
|
},
|
|
// 处理控制操作
|
|
handleControlAction(action) {
|
|
const groupName = this.currentGroup.groupName;
|
|
const deviceCount = this.currentGroup.deviceShortV0List ? this.currentGroup.deviceShortV0List.length : 0;
|
|
|
|
switch(action) {
|
|
case 'all_on':
|
|
uni.showModal({
|
|
title: '确认操作',
|
|
content: `确定要开启分组"${groupName}"中的所有设备吗？`,
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
this.executeControl('all_on');
|
|
}
|
|
}
|
|
});
|
|
break;
|
|
case 'all_off':
|
|
uni.showModal({
|
|
title: '确认操作',
|
|
content: `确定要关闭分组"${groupName}"中的所有设备吗？`,
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
this.executeControl('all_off');
|
|
}
|
|
}
|
|
});
|
|
break;
|
|
}
|
|
},
|
|
// 执行控制操作
|
|
executeControl(action) {
|
|
// 这里可以调用实际的API接口
|
|
uni.showLoading({
|
|
title: '执行中...'
|
|
});
|
|
|
|
// 模拟API调用
|
|
setTimeout(() => {
|
|
uni.hideLoading();
|
|
uni.showToast({
|
|
title: action === 'all_on' ? '已开启所有设备' : '已关闭所有设备',
|
|
icon: 'success'
|
|
});
|
|
}, 1500);
|
|
},
|
|
// 音量变化处理
|
|
volumeChange(value) {
|
|
this.groupVolume = value;
|
|
console.log('音量设置为:', value);
|
|
},
|
|
// 音频开关变化处理
|
|
audioSwitchChange(value) {
|
|
this.groupAudioEnabled = value;
|
|
console.log('音频开关设置为:', value);
|
|
},
|
|
// 选择音频方案
|
|
selectScheme(scheme) {
|
|
this.selectedScheme = scheme;
|
|
console.log('选择音频方案:', scheme);
|
|
},
|
|
// 应用设置
|
|
applySettings() {
|
|
uni.showLoading({
|
|
title: '应用设置中...'
|
|
});
|
|
|
|
// 构建设置数据
|
|
const settings = {
|
|
groupId: this.currentGroup.groupId,
|
|
volume: this.groupVolume,
|
|
audioEnabled: this.groupAudioEnabled,
|
|
scheme: this.selectedScheme,
|
|
customAudio: this.selectedScheme === 'custom' ? this.customAudio : null
|
|
};
|
|
|
|
console.log('应用设置:', settings);
|
|
|
|
// 模拟API调用
|
|
setTimeout(() => {
|
|
uni.hideLoading();
|
|
uni.showToast({
|
|
title: '设置应用成功',
|
|
icon: 'success'
|
|
});
|
|
this.showAreaControlPopup = false;
|
|
}, 1500);
|
|
},
|
|
// 下拉刷新
|
|
onPullDownRefresh() {
|
|
this.dataList = [];
|
|
this.queryParams.pageNum = 1;
|
|
this.getList(); // Http获取列表
|
|
},
|
|
// 上拉加载
|
|
onReachBottom() {
|
|
this.status = 'loading';
|
|
this.queryParams.pageNum = this.queryParams.pageNum + 1;
|
|
if ((this.queryParams.pageNum - 1) * this.queryParams.pageSize > this.total) {
|
|
this.status = 'nomore';
|
|
} else {
|
|
this.getList();
|
|
this.status = 'loading';
|
|
}
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
background: $uni-bg-color-grey;
|
|
}
|
|
</style>
|
|
<style lang="scss" scoped>
|
|
.device-group-wrap {
|
|
padding-bottom: 40rpx;
|
|
|
|
.nav-bar {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 24rpx 30rpx 28rpx;
|
|
height: 84rpx;
|
|
|
|
.right-wrap {
|
|
margin-left: 30rpx;
|
|
|
|
::v-deep .u-icon__icon {
|
|
top: -0.5px !important;
|
|
margin-right: 0 !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.card-wrap {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
align-content: flex-start;
|
|
width: 100%;
|
|
|
|
.item-wrap {
|
|
width: 50%;
|
|
|
|
.card {
|
|
background-color: #fff;
|
|
border-radius: 14rpx;
|
|
|
|
.title {
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #FFFFFF;
|
|
line-height: 21px;
|
|
text-align: left;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
padding: 10rpx 28rpx;
|
|
background: #839FFF;
|
|
border-radius: 14rpx 14rpx 0 0;
|
|
}
|
|
|
|
.com-wrap {
|
|
padding: 24rpx 28rpx;
|
|
height: 76rpx;
|
|
|
|
.list {
|
|
font-size: 26rpx;
|
|
line-height: 40rpx;
|
|
|
|
.item {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.item::before {
|
|
content: '';
|
|
display: inline-block;
|
|
width: 8rpx;
|
|
height: 8rpx;
|
|
border-radius: 50%;
|
|
background-color: #839FFF;
|
|
margin-right: 22rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.footer {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
padding: 0 26rpx 22rpx;
|
|
flex-wrap: wrap;
|
|
gap: 8rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 区域控制弹窗样式
|
|
.area-control-popup {
|
|
background: #fff;
|
|
border-radius: 20rpx;
|
|
overflow: hidden;
|
|
|
|
.popup-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 30rpx;
|
|
border-bottom: 1rpx solid #f0f0f0;
|
|
|
|
.popup-title {
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
color: #333;
|
|
}
|
|
}
|
|
|
|
.popup-content {
|
|
padding: 30rpx;
|
|
|
|
.group-info {
|
|
margin-bottom: 30rpx;
|
|
padding: 20rpx;
|
|
background: #f8f9fa;
|
|
border-radius: 12rpx;
|
|
|
|
.group-name {
|
|
display: block;
|
|
font-size: 28rpx;
|
|
font-weight: 600;
|
|
color: #333;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
.device-count {
|
|
font-size: 24rpx;
|
|
color: #666;
|
|
}
|
|
}
|
|
|
|
.basic-settings {
|
|
margin-bottom: 30rpx;
|
|
|
|
.setting-title {
|
|
font-size: 28rpx;
|
|
font-weight: 600;
|
|
color: #333;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.volume-slider {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 20rpx;
|
|
padding: 16rpx 0;
|
|
|
|
.volume-icon {
|
|
margin-right: 20rpx;
|
|
}
|
|
|
|
.slider-container {
|
|
flex: 1;
|
|
margin-right: 20rpx;
|
|
|
|
.volume-marks {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-top: 10rpx;
|
|
font-size: 22rpx;
|
|
color: #999;
|
|
}
|
|
}
|
|
|
|
.volume-value {
|
|
min-width: 60rpx;
|
|
text-align: right;
|
|
font-size: 24rpx;
|
|
color: #2979ff;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
|
|
.audio-switch {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 20rpx;
|
|
padding: 16rpx 0;
|
|
|
|
text {
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
}
|
|
}
|
|
}
|
|
|
|
.audio-scheme {
|
|
margin-bottom: 30rpx;
|
|
|
|
.setting-title {
|
|
font-size: 28rpx;
|
|
font-weight: 600;
|
|
color: #333;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.scheme-options {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 16rpx;
|
|
margin-bottom: 20rpx;
|
|
|
|
.scheme-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 20rpx 16rpx;
|
|
background: #f8f9fa;
|
|
border-radius: 12rpx;
|
|
border: 2rpx solid transparent;
|
|
transition: all 0.3s;
|
|
|
|
&:active {
|
|
background: #e9ecef;
|
|
border-color: #839FFF;
|
|
}
|
|
|
|
text {
|
|
margin-top: 10rpx;
|
|
font-size: 24rpx;
|
|
color: #333;
|
|
}
|
|
|
|
&.active {
|
|
background: #e8f2ff;
|
|
border-color: #839FFF;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.custom-audio {
|
|
margin-top: 20rpx;
|
|
padding: 20rpx;
|
|
background: #f8f9fa;
|
|
border-radius: 12rpx;
|
|
|
|
.custom-form {
|
|
.form-item {
|
|
margin-bottom: 20rpx;
|
|
|
|
.label {
|
|
display: block;
|
|
font-size: 26rpx;
|
|
font-weight: 600;
|
|
color: #333;
|
|
margin-bottom: 12rpx;
|
|
}
|
|
|
|
.radio-group {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 12rpx;
|
|
|
|
.radio-item {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 12rpx 16rpx;
|
|
background: #fff;
|
|
border-radius: 8rpx;
|
|
border: 2rpx solid transparent;
|
|
transition: all 0.3s;
|
|
|
|
&:active {
|
|
background: #f0f0f0;
|
|
}
|
|
|
|
text {
|
|
font-size: 24rpx;
|
|
color: #333;
|
|
}
|
|
|
|
&.active {
|
|
background: #e8f2ff;
|
|
border-color: #839FFF;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.control-actions {
|
|
margin-bottom: 30rpx;
|
|
|
|
.setting-title {
|
|
font-size: 28rpx;
|
|
font-weight: 600;
|
|
color: #333;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.action-buttons {
|
|
display: flex;
|
|
gap: 16rpx;
|
|
|
|
.action-btn {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 20rpx 16rpx;
|
|
border-radius: 12rpx;
|
|
transition: all 0.3s;
|
|
|
|
text {
|
|
margin-top: 8rpx;
|
|
font-size: 24rpx;
|
|
color: #fff;
|
|
}
|
|
|
|
&.primary {
|
|
background: #0BD800;
|
|
|
|
&:active {
|
|
background: #09b800;
|
|
}
|
|
}
|
|
|
|
&.danger {
|
|
background: #FF6B35;
|
|
|
|
&:active {
|
|
background: #e65a25;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.popup-footer {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 30rpx;
|
|
border-top: 1rpx solid #f0f0f0;
|
|
|
|
.u-button {
|
|
flex: 1;
|
|
margin-right: 20rpx;
|
|
|
|
&:last-child {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |