zhangchao/Road_roller
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(settings): add 1px border to wd-input in radioConfig.vue

Browse Source
This commit is contained in:
Ironsp
2026-09-02 14:18:23 +08:00
parent ab908b9315
commit 14b661a3ac
1 changed files with 176 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

176
src/components/settings/radioConfig.vue Normal file
View File

@@ -0,0 +1,176 @@
<script setup lang="ts">
const gaa = ref('1Hz')
const hpd = ref('1Hz')
const vtg = ref('1Hz')
const elevationRms = ref('1.00000')
const horizontalRms = ref('1.00000')
const radioEnabled = ref(false)
const dataEnabled = ref(true)
const dataChannel = ref('qxwz5dk')
const dataTransType = ref('TCP')
</script>
<template>
<view class="radio-card">
<!-- 频率 -->
<view class="section">
<text class="section-title">
频率
</text>
<view class="form-row">
<view class="form-item">
<text class="form-label">
GAA:
</text>
<wd-input v-model="gaa" placeholder="1Hz" />
</view>
<view class="form-item">
<text class="form-label">
HPD:
</text>
<wd-input v-model="hpd" placeholder="1Hz" />
</view>
<view class="form-item">
<text class="form-label">
VTG:
</text>
<wd-input v-model="vtg" placeholder="1Hz" />
</view>
</view>
</view>
<!-- 精度 -->
<view class="section">
<text class="section-title">
精度
</text>
<view class="form-row">
<view class="form-item">
<text class="form-label">
高程:
</text>
<view class="input-with-unit">
<wd-input v-model="elevationRms" placeholder="1.00000" />
<text class="unit">
m RMS
</text>
</view>
</view>
<view class="form-item">
<text class="form-label">
水平:
</text>
<view class="input-with-unit">
<wd-input v-model="horizontalRms" placeholder="1.00000" />
<text class="unit">
m RMS
</text>
</view>
</view>
</view>
</view>
<!-- 差分 -->
<view class="section">
<text class="section-title">
差分
</text>
<view class="form-row">
<view class="checkbox-group">
<wd-checkbox v-model="radioEnabled" shape="square">
电台
</wd-checkbox>
<wd-checkbox v-model="dataEnabled" shape="square">
数据
</wd-checkbox>
</view>
<wd-input v-model="dataChannel" placeholder="qxwz5dk" />
</view>
</view>
<!-- 数据发送 -->
<view class="section">
<text class="section-title">
数据发送
</text>
<view class="form-row">
<wd-checkbox v-model="dataEnabled" shape="square">
数据
</wd-checkbox>
<wd-input v-model="dataTransType" placeholder="TCP" />
</view>
</view>
</view>
</template>
<style scoped>
.radio-card {
background-color: #ffffff;
border-radius: 12px;
padding: 16px;
}
.section {
margin-bottom: 20px;
}
.section:last-child {
margin-bottom: 0;
}
.section-title {
font-size: 18px;
font-weight: bold;
color: #333;
margin-bottom: 12px;
display: block;
}
.form-row {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.form-item {
display: flex;
align-items: center;
gap: 8px;
}
.form-label {
font-size: 18px;
color: #333;
white-space: nowrap;
}
.input-with-unit {
display: flex;
align-items: center;
gap: 8px;
}
.unit {
font-size: 14px;
color: #999;
white-space: nowrap;
}
.checkbox-group {
display: flex;
gap: 16px;
}
/* 给 wd-input 添加 1px 边框 */
wd-input {
border: 1px solid #d9d9d9;
border-radius: 6px;
padding: 6px 8px;
box-sizing: border-box;
display: inline-block;
}
</style>