zhangdi
2 weeks ago
parent
0d29cc8e7a
commit
c906d3faf2
6 changed files with 901 additions and 1 deletions
@ -0,0 +1,853 @@ |
||||
<template> |
||||
<view class="container"> |
||||
<!-- Content --> |
||||
<scroll-view |
||||
class="scroll-content" |
||||
scroll-y |
||||
refresher-enabled |
||||
:refresher-triggered="isRefreshing" |
||||
@refresherrefresh="onRefresh" |
||||
@scrolltolower="handleLoadMore" |
||||
lower-threshold="100" |
||||
> |
||||
<view class="content"> |
||||
<!-- 站点码输入区域 --> |
||||
<view class="input-section"> |
||||
<text class="label">站点码:</text> |
||||
<view class="input-wrapper"> |
||||
<input |
||||
class="input" |
||||
type="text" |
||||
placeholder="站点码" |
||||
:value="siteCode" |
||||
@input="handleInput" |
||||
@confirm="handleSearch" |
||||
confirm-type="search" |
||||
/> |
||||
<!-- <view class="scan-btn" @tap="handleScan"> |
||||
<text class="scan-icon">⚏</text> |
||||
</view> --> |
||||
</view> |
||||
</view> |
||||
|
||||
<!-- 空状态 --> |
||||
<view v-if="sites.length === 0" class="empty-state"> |
||||
<view class="empty-icon"> |
||||
<text class="icon-large">⚏</text> |
||||
</view> |
||||
<text class="empty-title">未找到匹配的站点</text> |
||||
<text class="empty-desc">请尝试其他站点码</text> |
||||
</view> |
||||
|
||||
<!-- 站点列表 --> |
||||
<view v-else class="site-list"> |
||||
<view class="list-header"> |
||||
<text class="list-title">{{ |
||||
hasSearched ? "搜索结果" : "全部站点" |
||||
}}</text> |
||||
<view class="site-count">{{ page.total }} 个站点</view> |
||||
</view> |
||||
|
||||
<view v-for="(site,index) in displayedSites" :key="index" class="site-card"> |
||||
<!-- 头部 --> |
||||
<view class="card-header"> |
||||
<view class="card-info"> |
||||
<text class="site-name">{{ site.stationName }}</text> |
||||
<text class="site-code">站点编码: {{ site.stationCode }}</text> |
||||
</view> |
||||
<view class="status-btn" @tap="handleStatusChange(site)"> |
||||
{{ site.stationStatus == "1" ? "闲置" : "占用" }} |
||||
</view> |
||||
</view> |
||||
|
||||
<!-- 详情 --> |
||||
<view class="card-details"> |
||||
<view class="detail-row"> |
||||
<text class="detail-label">站点区域</text> |
||||
<text class="detail-value">{{ site.stationRegion }}</text> |
||||
</view> |
||||
|
||||
<view class="detail-row"> |
||||
<text class="detail-label">站点楼层</text> |
||||
<text class="detail-value">{{ site.stationPosition }}楼</text> |
||||
</view> |
||||
|
||||
<view class="detail-row"> |
||||
<text class="detail-label">作业中心</text> |
||||
<text class="detail-value">{{ site.wcName }}</text> |
||||
</view> |
||||
|
||||
<view class="detail-row"> |
||||
<text class="detail-label">站点状态</text> |
||||
<view |
||||
:class="['status-badge', getStatusClass(site.stationStatus)]" |
||||
> |
||||
<view class="status-dot"> |
||||
<view class="dot-ping"></view> |
||||
<view class="dot-core"></view> |
||||
</view> |
||||
<text class="status-text">{{ |
||||
getStatusLabel(site.stationStatus) |
||||
}}</text> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
|
||||
<!-- 加载中 --> |
||||
<view v-if="isLoading" class="loading"> |
||||
<text class="loading-text">加载中...</text> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</scroll-view> |
||||
|
||||
<!-- 确认对话框 --> |
||||
<view |
||||
v-if="confirmDialog.isOpen" |
||||
class="modal-overlay" |
||||
@tap="cancelStatusChange" |
||||
> |
||||
<view class="modal-content" @tap.stop> |
||||
<text class="modal-title">确认状态变更</text> |
||||
<text class="modal-desc"> |
||||
确认将站点 |
||||
<text class="bold">{{ confirmDialog.siteName }}</text> 的状态从 |
||||
<text |
||||
:class="[ |
||||
'bold', |
||||
confirmDialog.currentStatus === '占用' |
||||
? 'text-red' |
||||
: 'text-green', |
||||
]" |
||||
> |
||||
{{ confirmDialog.currentStatus }} |
||||
</text> |
||||
变更为 |
||||
<text |
||||
:class="[ |
||||
'bold', |
||||
confirmDialog.newStatus === '占用' ? 'text-red' : 'text-green', |
||||
]" |
||||
> |
||||
{{ confirmDialog.newStatus }} |
||||
</text> |
||||
吗？ |
||||
</text> |
||||
<view class="modal-actions"> |
||||
<view class="modal-btn btn-cancel" @tap="cancelStatusChange"> |
||||
取消 |
||||
</view> |
||||
<view class="modal-btn btn-confirm" @tap="confirmStatusChange"> |
||||
确认 |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
data() { |
||||
return { |
||||
siteCode: "", |
||||
sites: [], // 当前显示的站点列表 |
||||
allSites: [], // 缓存所有数据（可选） |
||||
hasSearched: false, |
||||
isLoading: false, |
||||
isRefreshing: false, |
||||
noMoreData: false, // 是否没有更多数据 |
||||
confirmDialog: { |
||||
isOpen: false, |
||||
siteId: null, |
||||
siteName: "", |
||||
currentStatus: "", |
||||
newStatus: "", |
||||
}, |
||||
page: { |
||||
pageSize: 10, |
||||
currentPage: 1, |
||||
total: 0, |
||||
}, |
||||
searchParams: {}, // 搜索参数 |
||||
}; |
||||
}, |
||||
|
||||
computed: { |
||||
displayedSites() { |
||||
return this.sites.slice(0, this.displayCount); |
||||
}, |
||||
}, |
||||
|
||||
mounted() { |
||||
this.initData(); |
||||
}, |
||||
|
||||
methods: { |
||||
// 添加方法 |
||||
onRefresh() { |
||||
this.isRefreshing = true; |
||||
this.loadSites(true).then(() => { |
||||
this.isRefreshing = false; |
||||
}); |
||||
}, |
||||
// 初始化数据 |
||||
initData() { |
||||
this.loadSites(true); |
||||
}, |
||||
// 加载站点数据 |
||||
loadSites(isRefresh = false) { |
||||
if (this.isLoading || (this.noMoreData && !isRefresh)) { |
||||
return; |
||||
} |
||||
|
||||
this.isLoading = true; |
||||
|
||||
if (isRefresh) { |
||||
this.page.currentPage = 1; |
||||
this.sites = []; |
||||
this.noMoreData = false; |
||||
} |
||||
|
||||
this.$u.api |
||||
.getStationList({ |
||||
pageSize: this.page.pageSize, |
||||
currentPage: this.page.currentPage, |
||||
stationCode: this.siteCode ? this.siteCode : null, |
||||
...this.searchParams, |
||||
}) |
||||
.then((res) => { |
||||
const records = res.data?.records || []; |
||||
const total = res.data?.total || 0; |
||||
|
||||
// 处理数据格式 |
||||
const formattedData = records.map((item) => ({ |
||||
id: item.id, |
||||
code: item.stationCode, |
||||
name: item.stationName, |
||||
area: item.wcName || "", |
||||
floor: item.stationPosition || "", |
||||
workCenter: item.wcName || "", |
||||
status: item.stationStatus == "1" ? "occupied" : "available", |
||||
...item, |
||||
})); |
||||
|
||||
if (isRefresh) { |
||||
this.sites = formattedData; |
||||
} else { |
||||
this.sites = [...this.sites, ...formattedData]; |
||||
} |
||||
|
||||
this.page.total = total; |
||||
|
||||
// 判断是否还有更多数据 |
||||
if (this.sites.length >= total) { |
||||
this.noMoreData = true; |
||||
} |
||||
|
||||
this.isLoading = false; |
||||
}) |
||||
.catch((err) => { |
||||
this.isLoading = false; |
||||
uni.showToast({ |
||||
title: "加载失败", |
||||
icon: "error", |
||||
}); |
||||
}); |
||||
}, |
||||
|
||||
// 输入框输入事件 |
||||
handleInput(e) { |
||||
const value = e.detail.value; |
||||
this.siteCode = value; |
||||
}, |
||||
|
||||
// 回车搜索 |
||||
handleSearch() { |
||||
this.page.currentPage = 1; |
||||
this.sites = []; |
||||
this.noMoreData = false; |
||||
this.loadSites(true); |
||||
// 收起键盘 |
||||
uni.hideKeyboard(); |
||||
}, |
||||
|
||||
// 过滤站点 |
||||
filterSites(keyword) { |
||||
const lowerKeyword = keyword.toLowerCase(); |
||||
this.sites = this.allSites.filter( |
||||
(site) => |
||||
site.code.toLowerCase().includes(lowerKeyword) || |
||||
site.name.toLowerCase().includes(lowerKeyword) || |
||||
site.area.toLowerCase().includes(lowerKeyword) |
||||
); |
||||
this.hasSearched = true; |
||||
}, |
||||
|
||||
// 模拟扫描 |
||||
handleScan() { |
||||
// 使用UniApp的扫码API |
||||
uni.scanCode({ |
||||
success: (res) => { |
||||
this.siteCode = res.result; |
||||
this.filterSites(res.result); |
||||
}, |
||||
fail: () => { |
||||
// 扫码失败，使用模拟数据 |
||||
const randomSite = |
||||
this.allSites[Math.floor(Math.random() * this.allSites.length)]; |
||||
this.siteCode = randomSite.code; |
||||
this.sites = this.allSites.filter((s) => s.code === randomSite.code); |
||||
this.hasSearched = true; |
||||
}, |
||||
}); |
||||
}, |
||||
|
||||
// 重置 |
||||
handleReset() { |
||||
this.siteCode = ""; |
||||
this.searchParams = {}; |
||||
this.page.currentPage = 1; |
||||
this.sites = []; |
||||
this.noMoreData = false; |
||||
this.loadSites(true); |
||||
}, |
||||
|
||||
// 关闭页面 |
||||
handleClose() { |
||||
uni.navigateBack(); |
||||
}, |
||||
|
||||
// 懒加载更多 |
||||
handleLoadMore() { |
||||
if (this.isLoading || this.noMoreData) { |
||||
return; |
||||
} |
||||
|
||||
this.page.currentPage += 1; |
||||
this.loadSites(false); |
||||
}, |
||||
|
||||
// 获取状态样式类 |
||||
getStatusClass(status) { |
||||
return status == 1 ? "status-occupied" : "status-available"; |
||||
}, |
||||
|
||||
// 获取状态标签 |
||||
getStatusLabel(status) { |
||||
return status == 0 ? "闲置" : "占用"; |
||||
}, |
||||
|
||||
// 打开状态变更确认对话框 |
||||
handleStatusChange(site) { |
||||
const newStatus = site.stationStatus == 0 ? 1 : 0; |
||||
this.confirmDialog = { |
||||
...site, |
||||
isOpen: true, |
||||
siteName: site.name, |
||||
currentStatus: this.getStatusLabel(site.stationStatus), |
||||
newStatus: this.getStatusLabel(newStatus), |
||||
newStationStatus: newStatus, |
||||
}; |
||||
}, |
||||
|
||||
// 确认状态变更 |
||||
confirmStatusChange() { |
||||
if (this.confirmDialog.siteId !== null) { |
||||
this.confirmDialog.stationStatus = this.confirmDialog.newStationStatus; |
||||
console.log("获取当前列表的数据", this.confirmDialog); |
||||
// 调用接口更新状态 |
||||
this.$u.api |
||||
.stationUpdate(this.confirmDialog) |
||||
.then((res) => { |
||||
// 更新本地数据 |
||||
const index = this.sites.findIndex( |
||||
(s) => s.id == this.confirmDialog.id |
||||
); |
||||
console.log( |
||||
"更新站点状态成功", |
||||
this.confirmDialog.id, |
||||
this.sites, |
||||
index |
||||
); |
||||
if (index !== -1) { |
||||
this.sites[index].stationStatus = |
||||
this.confirmDialog.stationStatus; |
||||
} |
||||
|
||||
uni.showToast({ |
||||
title: "状态更新成功", |
||||
icon: "success", |
||||
}); |
||||
this.cancelStatusChange(); |
||||
}) |
||||
.catch((err) => { |
||||
uni.showToast({ |
||||
title: "状态更新失败", |
||||
icon: "error", |
||||
}); |
||||
this.cancelStatusChange(); |
||||
}); |
||||
} |
||||
|
||||
}, |
||||
|
||||
// 取消确认 |
||||
cancelStatusChange() { |
||||
this.confirmDialog = { |
||||
isOpen: false, |
||||
|
||||
}; |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
|
||||
<style scoped> |
||||
/* 容器 */ |
||||
.container { |
||||
width: 100%; |
||||
height: 100vh; |
||||
background-color: #f7f8fa; |
||||
display: flex; |
||||
flex-direction: column; |
||||
} |
||||
|
||||
/* Header */ |
||||
.header { |
||||
background: linear-gradient(135deg, #4a7de8 0%, #5b8ff9 100%); |
||||
padding: 32rpx; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1); |
||||
} |
||||
|
||||
.header-left { |
||||
display: flex; |
||||
align-items: center; |
||||
gap: 16rpx; |
||||
} |
||||
|
||||
.header-btn { |
||||
width: 72rpx; |
||||
height: 72rpx; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
border-radius: 50%; |
||||
transition: all 0.2s; |
||||
} |
||||
|
||||
.header-btn:active { |
||||
background-color: rgba(255, 255, 255, 0.2); |
||||
transform: scale(0.95); |
||||
} |
||||
|
||||
.icon { |
||||
color: #ffffff; |
||||
font-size: 40rpx; |
||||
font-weight: bold; |
||||
} |
||||
|
||||
.header-title { |
||||
color: #ffffff; |
||||
font-size: 36rpx; |
||||
font-weight: 600; |
||||
} |
||||
|
||||
/* 滚动内容 */ |
||||
.scroll-content { |
||||
flex: 1; |
||||
height: 100%; |
||||
} |
||||
|
||||
.content { |
||||
padding: 32rpx; |
||||
padding-bottom: 60rpx; |
||||
} |
||||
|
||||
/* 输入区域 */ |
||||
.input-section { |
||||
margin-bottom: 48rpx; |
||||
} |
||||
|
||||
.label { |
||||
color: #374151; |
||||
font-size: 28rpx; |
||||
font-weight: 500; |
||||
display: block; |
||||
margin-bottom: 24rpx; |
||||
} |
||||
|
||||
.input-wrapper { |
||||
position: relative; |
||||
display: flex; |
||||
align-items: center; |
||||
} |
||||
|
||||
.input { |
||||
width: 100%; |
||||
padding: 24rpx 32rpx; |
||||
/* padding-right: 100rpx; */ |
||||
background-color: #ffffff; |
||||
border: 2rpx solid #e5e7eb; |
||||
border-radius: 16rpx; |
||||
color: #374151; |
||||
font-size: 28rpx; |
||||
} |
||||
|
||||
.input::placeholder { |
||||
color: #9ca3af; |
||||
} |
||||
|
||||
.scan-btn { |
||||
position: absolute; |
||||
right: 16rpx; |
||||
width: 72rpx; |
||||
height: 72rpx; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
border-radius: 12rpx; |
||||
transition: all 0.2s; |
||||
} |
||||
|
||||
.scan-btn:active { |
||||
background-color: #f3f4f6; |
||||
transform: scale(0.95); |
||||
} |
||||
|
||||
.scan-icon { |
||||
color: #5b8ff9; |
||||
font-size: 40rpx; |
||||
} |
||||
|
||||
/* 空状态 */ |
||||
.empty-state { |
||||
text-align: center; |
||||
padding: 120rpx 0; |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
} |
||||
|
||||
.empty-icon { |
||||
width: 160rpx; |
||||
height: 160rpx; |
||||
background-color: #f3f4f6; |
||||
border-radius: 32rpx; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
margin-bottom: 32rpx; |
||||
} |
||||
|
||||
.icon-large { |
||||
font-size: 80rpx; |
||||
color: #9ca3af; |
||||
} |
||||
|
||||
.empty-title { |
||||
color: #6b7280; |
||||
font-size: 28rpx; |
||||
font-weight: 500; |
||||
margin-bottom: 8rpx; |
||||
} |
||||
|
||||
.empty-desc { |
||||
color: #9ca3af; |
||||
font-size: 24rpx; |
||||
} |
||||
|
||||
/* 站点列表 */ |
||||
.site-list { |
||||
display: flex; |
||||
flex-direction: column; |
||||
gap: 24rpx; |
||||
} |
||||
|
||||
.list-header { |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
margin-bottom: 16rpx; |
||||
} |
||||
|
||||
.list-title { |
||||
color: #374151; |
||||
font-size: 26rpx; |
||||
font-weight: 600; |
||||
} |
||||
|
||||
.site-count { |
||||
background-color: #f3f4f6; |
||||
color: #6b7280; |
||||
font-size: 22rpx; |
||||
padding: 6rpx 20rpx; |
||||
border-radius: 999rpx; |
||||
} |
||||
|
||||
/* 站点卡片 */ |
||||
.site-card { |
||||
background-color: #ffffff; |
||||
border-radius: 20rpx; |
||||
padding: 24rpx; |
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05); |
||||
border: 2rpx solid #e5e7eb; |
||||
} |
||||
|
||||
.card-header { |
||||
display: flex; |
||||
align-items: flex-start; |
||||
justify-content: space-between; |
||||
margin-bottom: 20rpx; |
||||
padding-bottom: 20rpx; |
||||
border-bottom: 2rpx solid #f3f4f6; |
||||
} |
||||
|
||||
.card-info { |
||||
flex: 1; |
||||
padding-right: 20rpx; |
||||
display: flex; |
||||
flex-direction: column; |
||||
} |
||||
|
||||
.site-name { |
||||
color: #111827; |
||||
font-size: 30rpx; |
||||
font-weight: bold; |
||||
margin-bottom: 6rpx; |
||||
} |
||||
|
||||
.site-code { |
||||
color: #6b7280; |
||||
font-size: 22rpx; |
||||
} |
||||
|
||||
.status-btn { |
||||
padding: 10rpx 24rpx; |
||||
border-radius: 10rpx; |
||||
font-size: 22rpx; |
||||
font-weight: 600; |
||||
color: #ffffff; |
||||
white-space: nowrap; |
||||
transition: all 0.2s; |
||||
background-color: #5b8ff9; |
||||
box-shadow: 0 4rpx 12rpx rgba(91, 143, 249, 0.3); |
||||
} |
||||
|
||||
.status-btn:active { |
||||
transform: scale(0.95); |
||||
} |
||||
|
||||
.btn-green { |
||||
background-color: #10b981; |
||||
} |
||||
|
||||
.btn-red { |
||||
background-color: #ef4444; |
||||
} |
||||
|
||||
/* 卡片详情 */ |
||||
.card-details { |
||||
display: flex; |
||||
flex-direction: column; |
||||
gap: 16rpx; |
||||
} |
||||
|
||||
.detail-row { |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
font-size: 26rpx; |
||||
} |
||||
|
||||
.detail-label { |
||||
color: #6b7280; |
||||
} |
||||
|
||||
.detail-value { |
||||
color: #111827; |
||||
font-weight: 500; |
||||
} |
||||
|
||||
/* 状态徽章 */ |
||||
.status-badge { |
||||
display: flex; |
||||
align-items: center; |
||||
gap: 10rpx; |
||||
padding: 8rpx 16rpx; |
||||
border-radius: 999rpx; |
||||
} |
||||
|
||||
.status-occupied { |
||||
background-color: #fef2f2; |
||||
} |
||||
|
||||
.status-available { |
||||
background-color: #f0fdf4; |
||||
} |
||||
|
||||
.status-dot { |
||||
position: relative; |
||||
width: 12rpx; |
||||
height: 12rpx; |
||||
} |
||||
|
||||
.dot-ping { |
||||
position: absolute; |
||||
width: 100%; |
||||
height: 100%; |
||||
border-radius: 50%; |
||||
animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; |
||||
opacity: 0.75; |
||||
} |
||||
|
||||
.dot-core { |
||||
position: relative; |
||||
width: 100%; |
||||
height: 100%; |
||||
border-radius: 50%; |
||||
} |
||||
|
||||
.status-occupied .dot-ping, |
||||
.status-occupied .dot-core { |
||||
background-color: #ef4444; |
||||
} |
||||
|
||||
.status-available .dot-ping, |
||||
.status-available .dot-core { |
||||
background-color: #10b981; |
||||
} |
||||
|
||||
.status-text { |
||||
font-size: 24rpx; |
||||
font-weight: 600; |
||||
} |
||||
|
||||
.status-occupied .status-text { |
||||
color: #b91c1c; |
||||
} |
||||
|
||||
.status-available .status-text { |
||||
color: #15803d; |
||||
} |
||||
|
||||
@keyframes ping { |
||||
75%, |
||||
100% { |
||||
transform: scale(2); |
||||
opacity: 0; |
||||
} |
||||
} |
||||
|
||||
/* 加载中 */ |
||||
.loading { |
||||
text-align: center; |
||||
padding: 32rpx 0; |
||||
} |
||||
|
||||
.loading-text { |
||||
color: #6b7280; |
||||
font-size: 28rpx; |
||||
font-weight: 500; |
||||
} |
||||
|
||||
/* 模态框 */ |
||||
.modal-overlay { |
||||
position: fixed; |
||||
top: 0; |
||||
left: 0; |
||||
right: 0; |
||||
bottom: 0; |
||||
background-color: rgba(0, 0, 0, 0.5); |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
z-index: 9999; |
||||
padding: 32rpx; |
||||
} |
||||
|
||||
.modal-content { |
||||
background-color: #ffffff; |
||||
border-radius: 32rpx; |
||||
padding: 48rpx; |
||||
width: 100%; |
||||
max-width: 600rpx; |
||||
box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.3); |
||||
animation: modal-in 0.2s ease-out; |
||||
} |
||||
|
||||
@keyframes modal-in { |
||||
from { |
||||
opacity: 0; |
||||
transform: scale(0.9); |
||||
} |
||||
to { |
||||
opacity: 1; |
||||
transform: scale(1); |
||||
} |
||||
} |
||||
|
||||
.modal-title { |
||||
color: #111827; |
||||
font-size: 36rpx; |
||||
font-weight: bold; |
||||
margin-bottom: 24rpx; |
||||
display: block; |
||||
} |
||||
|
||||
.modal-desc { |
||||
color: #6b7280; |
||||
font-size: 28rpx; |
||||
line-height: 1.6; |
||||
margin-bottom: 48rpx; |
||||
display: block; |
||||
} |
||||
|
||||
.bold { |
||||
font-weight: bold; |
||||
color: #111827; |
||||
} |
||||
|
||||
.text-red { |
||||
color: #dc2626 !important; |
||||
} |
||||
|
||||
.text-green { |
||||
color: #16a34a !important; |
||||
} |
||||
|
||||
.modal-actions { |
||||
display: flex; |
||||
align-items: center; |
||||
gap: 24rpx; |
||||
} |
||||
|
||||
.modal-btn { |
||||
flex: 1; |
||||
padding: 24rpx 32rpx; |
||||
border-radius: 12rpx; |
||||
font-size: 28rpx; |
||||
font-weight: 600; |
||||
text-align: center; |
||||
transition: all 0.2s; |
||||
} |
||||
|
||||
.modal-btn:active { |
||||
transform: scale(0.95); |
||||
} |
||||
|
||||
.btn-cancel { |
||||
background-color: #f3f4f6; |
||||
color: #374151; |
||||
} |
||||
|
||||
.btn-confirm { |
||||
background-color: #5b8ff9; |
||||
color: #ffffff; |
||||
box-shadow: 0 4rpx 12rpx rgba(91, 143, 249, 0.3); |
||||
} |
||||
</style> |
||||
|
After Width: | Height: | Size: 28 KiB |
Loading…
Reference in new issue