|
@@ -0,0 +1,484 @@
|
|
|
|
|
+<template>
|
|
|
|
|
+ <view class="auto-fertilization-container">
|
|
|
|
|
+ <!-- 顶部导航栏 -->
|
|
|
|
|
+ <view class="nav-bar">
|
|
|
|
|
+ <view class="nav-left">
|
|
|
|
|
+ <text class="back-icon">←</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="nav-center">
|
|
|
|
|
+ <text class="nav-title">自动施肥</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="nav-right">
|
|
|
|
|
+ <text class="nav-icon">⋯</text>
|
|
|
|
|
+ <text class="nav-icon">⚙️</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 内容区域 -->
|
|
|
|
|
+ <view class="content">
|
|
|
|
|
+ <!-- 灌溉模式 -->
|
|
|
|
|
+ <view class="setting-item">
|
|
|
|
|
+ <text class="setting-label">灌溉模式</text>
|
|
|
|
|
+ <view class="radio-group">
|
|
|
|
|
+ <label class="radio-item" :class="{ active: irrigationMode === '定时' }" @click="irrigationMode = '定时'">
|
|
|
|
|
+ <radio value="定时" :checked="irrigationMode === '定时'" color="#14a478" />
|
|
|
|
|
+ <text>定时</text>
|
|
|
|
|
+ </label>
|
|
|
|
|
+ <label class="radio-item" :class="{ active: irrigationMode === '定量' }" @click="irrigationMode = '定量'">
|
|
|
|
|
+ <radio value="定量" :checked="irrigationMode === '定量'" color="#14a478" />
|
|
|
|
|
+ <text>定量</text>
|
|
|
|
|
+ </label>
|
|
|
|
|
+ <label class="radio-item" :class="{ active: irrigationMode === '禁用' }" @click="irrigationMode = '禁用'">
|
|
|
|
|
+ <radio value="禁用" :checked="irrigationMode === '禁用'" color="#14a478" />
|
|
|
|
|
+ <text>禁用</text>
|
|
|
|
|
+ </label>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 配方方式 -->
|
|
|
|
|
+ <view class="setting-item">
|
|
|
|
|
+ <text class="setting-label">配方方式</text>
|
|
|
|
|
+ <view class="radio-group">
|
|
|
|
|
+ <label class="radio-item" :class="{ active: formulaMode === 'PID' }" @click="formulaMode = 'PID'">
|
|
|
|
|
+ <radio value="PID" :checked="formulaMode === 'PID'" color="#14a478" />
|
|
|
|
|
+ <text>PID</text>
|
|
|
|
|
+ </label>
|
|
|
|
|
+ <label class="radio-item" :class="{ active: formulaMode === '水肥比例' }" @click="formulaMode = '水肥比例'">
|
|
|
|
|
+ <radio value="水肥比例" :checked="formulaMode === '水肥比例'" color="#14a478" />
|
|
|
|
|
+ <text>水肥比例</text>
|
|
|
|
|
+ </label>
|
|
|
|
|
+ <label class="radio-item" :class="{ active: formulaMode === '禁用' }" @click="formulaMode = '禁用'">
|
|
|
|
|
+ <radio value="禁用" :checked="formulaMode === '禁用'" color="#14a478" />
|
|
|
|
|
+ <text>禁用</text>
|
|
|
|
|
+ </label>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 轮灌次数 -->
|
|
|
|
|
+ <view class="setting-item">
|
|
|
|
|
+ <text class="setting-label">轮灌次数</text>
|
|
|
|
|
+ <view class="number-input">
|
|
|
|
|
+ <text class="number-btn" @click="decreaseRoundCount">−</text>
|
|
|
|
|
+ <text class="number-value">{{ roundCount }}</text>
|
|
|
|
|
+ <text class="number-btn" @click="increaseRoundCount">+</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 轮灌间隔 -->
|
|
|
|
|
+ <view class="setting-item">
|
|
|
|
|
+ <text class="setting-label">轮灌间隔</text>
|
|
|
|
|
+ <view class="time-input">
|
|
|
|
|
+ <input type="number" v-model="roundInterval" class="time-input-field" />
|
|
|
|
|
+ <text class="time-unit">分钟</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 肥前水 -->
|
|
|
|
|
+ <view class="setting-item">
|
|
|
|
|
+ <text class="setting-label">肥前水</text>
|
|
|
|
|
+ <view class="time-input">
|
|
|
|
|
+ <input type="number" v-model="waterBefore" class="time-input-field" />
|
|
|
|
|
+ <text class="time-unit">分钟</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 肥后水 -->
|
|
|
|
|
+ <view class="setting-item">
|
|
|
|
|
+ <text class="setting-label">肥后水</text>
|
|
|
|
|
+ <view class="time-input">
|
|
|
|
|
+ <input type="number" v-model="waterAfter" class="time-input-field" />
|
|
|
|
|
+ <text class="time-unit">分钟</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 定时轮灌组 -->
|
|
|
|
|
+ <view class="round-groups-section">
|
|
|
|
|
+ <text class="section-title">定时轮灌组</text>
|
|
|
|
|
+ <view class="round-groups-container">
|
|
|
|
|
+ <!-- 左侧轮灌组列表 -->
|
|
|
|
|
+ <view class="round-groups-list">
|
|
|
|
|
+ <view
|
|
|
|
|
+ v-for="i in 7"
|
|
|
|
|
+ :key="i"
|
|
|
|
|
+ class="round-group-item"
|
|
|
|
|
+ :class="{ active: selectedGroup === i }"
|
|
|
|
|
+ @click="selectedGroup = i"
|
|
|
|
|
+ >
|
|
|
|
|
+ <text>{{ i }}组</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 右侧轮灌组详情 -->
|
|
|
|
|
+ <view class="round-group-detail">
|
|
|
|
|
+ <!-- 1组 -->
|
|
|
|
|
+ <view class="group-detail-item" :class="{ active: selectedGroup === 1 }">
|
|
|
|
|
+ <view class="group-header">
|
|
|
|
|
+ <text class="group-title">1组</text>
|
|
|
|
|
+ <text class="group-check" v-if="selectedGroup === 1">✓</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="group-settings">
|
|
|
|
|
+ <view class="setting-row">
|
|
|
|
|
+ <text class="setting-row-label">施肥配方</text>
|
|
|
|
|
+ <input type="text" placeholder="请输入" class="setting-row-input" />
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="setting-row">
|
|
|
|
|
+ <text class="setting-row-label">灌溉时长</text>
|
|
|
|
|
+ <input type="number" v-model="irrigationTime1" class="setting-row-input" />
|
|
|
|
|
+ <text class="setting-row-unit">分钟</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="setting-row">
|
|
|
|
|
+ <text class="setting-row-label">施肥时长</text>
|
|
|
|
|
+ <input type="number" v-model="fertilizationTime1" class="setting-row-input" />
|
|
|
|
|
+ <text class="setting-row-unit">分钟</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 2组 -->
|
|
|
|
|
+ <view class="group-detail-item" :class="{ active: selectedGroup === 2 }">
|
|
|
|
|
+ <view class="group-header">
|
|
|
|
|
+ <text class="group-title">2组</text>
|
|
|
|
|
+ <text class="group-check" v-if="selectedGroup === 2">✓</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="group-settings">
|
|
|
|
|
+ <view class="setting-row">
|
|
|
|
|
+ <text class="setting-row-label">施肥配方</text>
|
|
|
|
|
+ <input type="text" placeholder="请输入" class="setting-row-input" />
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="setting-row">
|
|
|
|
|
+ <text class="setting-row-label">灌溉时长</text>
|
|
|
|
|
+ <input type="number" v-model="irrigationTime2" class="setting-row-input" />
|
|
|
|
|
+ <text class="setting-row-unit">分钟</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="setting-row">
|
|
|
|
|
+ <text class="setting-row-label">施肥时长</text>
|
|
|
|
|
+ <input type="number" v-model="fertilizationTime2" class="setting-row-input" />
|
|
|
|
|
+ <text class="setting-row-unit">分钟</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 底部确定按钮 -->
|
|
|
|
|
+ <view class="confirm-btn-container">
|
|
|
|
|
+ <view class="confirm-btn" @click="confirm">
|
|
|
|
|
+ <text class="confirm-btn-text">确定</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+</template>
|
|
|
|
|
+
|
|
|
|
|
+<script>
|
|
|
|
|
+export default {
|
|
|
|
|
+ data() {
|
|
|
|
|
+ return {
|
|
|
|
|
+ // 灌溉模式
|
|
|
|
|
+ irrigationMode: '定时',
|
|
|
|
|
+ // 配方方式
|
|
|
|
|
+ formulaMode: 'PID',
|
|
|
|
|
+ // 轮灌次数
|
|
|
|
|
+ roundCount: 1,
|
|
|
|
|
+ // 轮灌间隔(分钟)
|
|
|
|
|
+ roundInterval: 0,
|
|
|
|
|
+ // 肥前水(分钟)
|
|
|
|
|
+ waterBefore: 0,
|
|
|
|
|
+ // 肥后水(分钟)
|
|
|
|
|
+ waterAfter: 0,
|
|
|
|
|
+ // 选中的轮灌组
|
|
|
|
|
+ selectedGroup: 1,
|
|
|
|
|
+ // 1组设置
|
|
|
|
|
+ irrigationTime1: 0,
|
|
|
|
|
+ fertilizationTime1: 0,
|
|
|
|
|
+ // 2组设置
|
|
|
|
|
+ irrigationTime2: 0,
|
|
|
|
|
+ fertilizationTime2: 0
|
|
|
|
|
+ };
|
|
|
|
|
+ },
|
|
|
|
|
+ methods: {
|
|
|
|
|
+ // 减少轮灌次数
|
|
|
|
|
+ decreaseRoundCount() {
|
|
|
|
|
+ if (this.roundCount > 1) {
|
|
|
|
|
+ this.roundCount--;
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ // 增加轮灌次数
|
|
|
|
|
+ increaseRoundCount() {
|
|
|
|
|
+ this.roundCount++;
|
|
|
|
|
+ },
|
|
|
|
|
+ // 确认按钮点击事件
|
|
|
|
|
+ confirm() {
|
|
|
|
|
+ // 这里可以添加确认逻辑
|
|
|
|
|
+ console.log('确认设置');
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+};
|
|
|
|
|
+</script>
|
|
|
|
|
+
|
|
|
|
|
+<style scoped lang="scss">
|
|
|
|
|
+.auto-fertilization-container {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ min-height: 100vh;
|
|
|
|
|
+ background: linear-gradient(180deg, #e6f7f2 0%, #f5f5f5 100%);
|
|
|
|
|
+ font-family: 'Source Han Sans CN';
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+/* 顶部导航栏 */
|
|
|
|
|
+.nav-bar {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: space-between;
|
|
|
|
|
+ padding: 20rpx 32rpx;
|
|
|
|
|
+ background: linear-gradient(180deg, #14a478 0%, #0f8a64 100%);
|
|
|
|
|
+ color: #fff;
|
|
|
|
|
+
|
|
|
|
|
+ .nav-left {
|
|
|
|
|
+ .back-icon {
|
|
|
|
|
+ font-size: 32rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .nav-center {
|
|
|
|
|
+ .nav-title {
|
|
|
|
|
+ font-size: 32rpx;
|
|
|
|
|
+ font-weight: 500;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .nav-right {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ gap: 24rpx;
|
|
|
|
|
+
|
|
|
|
|
+ .nav-icon {
|
|
|
|
|
+ font-size: 28rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+/* 内容区域 */
|
|
|
|
|
+.content {
|
|
|
|
|
+ padding: 32rpx;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+/* 设置项 */
|
|
|
|
|
+.setting-item {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: space-between;
|
|
|
|
|
+ padding: 24rpx 0;
|
|
|
|
|
+ border-bottom: 1rpx solid #e8e8e8;
|
|
|
|
|
+
|
|
|
|
|
+ .setting-label {
|
|
|
|
|
+ font-size: 28rpx;
|
|
|
|
|
+ color: #042118;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ /* 单选组 */
|
|
|
|
|
+ .radio-group {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ gap: 32rpx;
|
|
|
|
|
+
|
|
|
|
|
+ .radio-item {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ gap: 8rpx;
|
|
|
|
|
+ font-size: 26rpx;
|
|
|
|
|
+ color: #666;
|
|
|
|
|
+
|
|
|
|
|
+ &.active {
|
|
|
|
|
+ color: #14a478;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ radio {
|
|
|
|
|
+ transform: scale(0.8);
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ /* 数字输入 */
|
|
|
|
|
+ .number-input {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ gap: 16rpx;
|
|
|
|
|
+
|
|
|
|
|
+ .number-btn {
|
|
|
|
|
+ width: 40rpx;
|
|
|
|
|
+ height: 40rpx;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ background: #f5f5f5;
|
|
|
|
|
+ border-radius: 4rpx;
|
|
|
|
|
+ font-size: 28rpx;
|
|
|
|
|
+ color: #666;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .number-value {
|
|
|
|
|
+ min-width: 60rpx;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ font-size: 26rpx;
|
|
|
|
|
+ color: #042118;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ /* 时间输入 */
|
|
|
|
|
+ .time-input {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ gap: 8rpx;
|
|
|
|
|
+
|
|
|
|
|
+ .time-input-field {
|
|
|
|
|
+ width: 100rpx;
|
|
|
|
|
+ height: 52rpx;
|
|
|
|
|
+ padding: 0 16rpx;
|
|
|
|
|
+ font-size: 26rpx;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ border: 1rpx solid #d9d9d9;
|
|
|
|
|
+ border-radius: 8rpx;
|
|
|
|
|
+ color: #042118;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .time-unit {
|
|
|
|
|
+ font-size: 24rpx;
|
|
|
|
|
+ color: #666;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+/* 轮灌组区域 */
|
|
|
|
|
+.round-groups-section {
|
|
|
|
|
+ margin-top: 40rpx;
|
|
|
|
|
+
|
|
|
|
|
+ .section-title {
|
|
|
|
|
+ font-size: 28rpx;
|
|
|
|
|
+ font-weight: 500;
|
|
|
|
|
+ color: #042118;
|
|
|
|
|
+ margin-bottom: 24rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .round-groups-container {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ background: #fff;
|
|
|
|
|
+ border-radius: 12rpx;
|
|
|
|
|
+ box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
|
|
|
|
|
+
|
|
|
|
|
+ /* 左侧轮灌组列表 */
|
|
|
|
|
+ .round-groups-list {
|
|
|
|
|
+ width: 120rpx;
|
|
|
|
|
+ border-right: 1rpx solid #e8e8e8;
|
|
|
|
|
+
|
|
|
|
|
+ .round-group-item {
|
|
|
|
|
+ height: 80rpx;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ font-size: 26rpx;
|
|
|
|
|
+ color: #666;
|
|
|
|
|
+ border-bottom: 1rpx solid #f0f0f0;
|
|
|
|
|
+
|
|
|
|
|
+ &.active {
|
|
|
|
|
+ background: #e6f7f2;
|
|
|
|
|
+ color: #14a478;
|
|
|
|
|
+ font-weight: 500;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ &:last-child {
|
|
|
|
|
+ border-bottom: none;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ /* 右侧轮灌组详情 */
|
|
|
|
|
+ .round-group-detail {
|
|
|
|
|
+ flex: 1;
|
|
|
|
|
+ padding: 24rpx;
|
|
|
|
|
+
|
|
|
|
|
+ .group-detail-item {
|
|
|
|
|
+ display: none;
|
|
|
|
|
+
|
|
|
|
|
+ &.active {
|
|
|
|
|
+ display: block;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .group-header {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: space-between;
|
|
|
|
|
+ margin-bottom: 24rpx;
|
|
|
|
|
+
|
|
|
|
|
+ .group-title {
|
|
|
|
|
+ font-size: 28rpx;
|
|
|
|
|
+ font-weight: 500;
|
|
|
|
|
+ color: #042118;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .group-check {
|
|
|
|
|
+ width: 32rpx;
|
|
|
|
|
+ height: 32rpx;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ background: #14a478;
|
|
|
|
|
+ color: #fff;
|
|
|
|
|
+ border-radius: 50%;
|
|
|
|
|
+ font-size: 20rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .group-settings {
|
|
|
|
|
+ .setting-row {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ margin-bottom: 24rpx;
|
|
|
|
|
+
|
|
|
|
|
+ .setting-row-label {
|
|
|
|
|
+ width: 120rpx;
|
|
|
|
|
+ font-size: 26rpx;
|
|
|
|
|
+ color: #666;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .setting-row-input {
|
|
|
|
|
+ flex: 1;
|
|
|
|
|
+ height: 56rpx;
|
|
|
|
|
+ padding: 0 16rpx;
|
|
|
|
|
+ font-size: 26rpx;
|
|
|
|
|
+ border: 1rpx solid #d9d9d9;
|
|
|
|
|
+ border-radius: 8rpx;
|
|
|
|
|
+ color: #042118;
|
|
|
|
|
+ margin-right: 12rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .setting-row-unit {
|
|
|
|
|
+ font-size: 24rpx;
|
|
|
|
|
+ color: #666;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+/* 底部确定按钮 */
|
|
|
|
|
+.confirm-btn-container {
|
|
|
|
|
+ padding: 32rpx;
|
|
|
|
|
+
|
|
|
|
|
+ .confirm-btn {
|
|
|
|
|
+ height: 88rpx;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ background: #14a478;
|
|
|
|
|
+ border-radius: 12rpx;
|
|
|
|
|
+ box-shadow: 0 4rpx 12rpx rgba(20, 164, 120, 0.3);
|
|
|
|
|
+
|
|
|
|
|
+ .confirm-btn-text {
|
|
|
|
|
+ font-size: 32rpx;
|
|
|
|
|
+ font-weight: 500;
|
|
|
|
|
+ color: #fff;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+</style>
|