Files
device-voice-h5/components/WifiCard.vue
2026-04-11 14:42:14 +08:00

48 lines
1.4 KiB
Vue

<template>
<view class="card wifi-card">
<view class="card-header flex-row-sb">
<view class="title">WiFi配置</view>
<view class="btn-group">
<button class="btn-apple btn-primary btn-mini" @tap="$emit('modify')">修改</button>
</view>
</view>
<view class="wifi-info flex-col-g16 mt-30">
<view class="wifi-item flex-row-sb">
<view class="wifi-details flex-col-g8">
<view class="caption">网络名称</view>
<view class="subtitle">{{ deviceInfo.ssidName }}</view>
</view>
<button class="btn-apple btn-primary btn-mini" @tap="$emit('copy', deviceInfo.ssidName)">复制</button>
</view>
<view class="wifi-item flex-row-sb">
<view class="wifi-details flex-col-g8">
<view class="caption">连接密码</view>
<view class="subtitle">{{ deviceInfo.ssidPwd }}</view>
</view>
<button class="btn-apple btn-primary btn-mini" @tap="$emit('copy', deviceInfo.ssidPwd)">复制</button>
</view>
</view>
</view>
</template>
<script setup>
defineProps({
deviceInfo: { type: Object, default: () => ({}) }
});
defineEmits(['modify', 'copy']);
</script>
<style scoped lang="scss">
.wifi-card {
.wifi-item {
padding: var(--space-md);
background: var(--gray-100);
border-radius: var(--radius-medium);
margin-bottom: var(--space-sm);
&:last-child { margin-bottom: 0; }
.wifi-details { flex: 1; }
}
}
</style>