style(settings): add 1px border to wd-input in radioConfig.vue
This commit is contained in:
176
src/components/settings/radioConfig.vue
Normal file
176
src/components/settings/radioConfig.vue
Normal 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>
|
||||
Reference in New Issue
Block a user