Преглед на файлове

fix:"优化设备详情页面"

soobin преди 3 месеца
родител
ревизия
9a44436814
променени са 1 файла, в които са добавени 386 реда и са изтрити 224 реда
  1. 386 224
      src/views/device/deviceSet.vue

+ 386 - 224
src/views/device/deviceSet.vue

@@ -1,208 +1,250 @@
 <template>
-  <!-- 设备信息修改 -->
-  <div class="deviceSetPage flex-col">
-    <s-header :name="$t('device.deviceInformation')" :noback="false"></s-header>
-    <van-form @submit="updateDeviceFun">
-      <div class="bd1 flex-col">
-        <div class="bd3 flex-col">
-          <div class="mod1 flex-col">
-            <span class="word2">{{ $t("device.essentialInformation") }}</span>
-            <img class="pic1" referrerpolicy="no-referrer" src="../../assets/line.png" />
-          </div>
-          <div class="mod2 flex-col"></div>
-        </div>
-        <van-field readonly v-model="deviceDetal.clientId" :label="`${$t('device.equipmentCode')}`" placeholder="" />
-        <div class="cust_vantBorder">
-          <van-field required clearable v-model="deviceDetal.name" name="name"
-            :label="`${$t('device.equipmentNameLabel')}`" :placeholder="$t('device.equipmentNamePlaceholder')" :rules="[
-      {
-        required: true,
-        message: $t('device.equipmentNamePlaceholder'),
-      },
-    ]" />
-          <van-field clearable v-model="deviceDetal.selfName" :label="`${$t('device.equipmentRemarksLabel')}`"
-            :placeholder="$t('device.equipmentRemarksPlaceholder')" />
-          <div></div>
-        </div>
-        <van-field readonly v-model="deviceDetal.adminUserName" :label="`${$t('device.affiliatedMerchant')}`" />
-        <van-field readonly v-model="deviceDetal.equimentType" :label="`${$t('device.machineType')}`" placeholder="" />
-        <!-- mg280才有到期时间 -->
-        <template v-if="deviceDetal?.equimentType?.indexOf('mg280') !== -1">
-          <van-field readonly v-model="deviceDetal.lastUseDate" :label="`${$t('device.expirationTime')}`"
-            placeholder="" />
-        </template>
-        <!-- 设备标签 -->
-        <div class="bd9 l-f">
-          <van-field readonly :label="`${$t('device.equipmentLabel')}`" placeholder="">
-            <template #input>
-              <div class="box2 l-flex-RC l-flex-w" v-if="tagsList.arr.length > 0">
-                <div class="word8 o-mr-6 o-p-6 c-radius-2 o-mb-10" v-for="(item, index) in tagsList.arr" :key="index">
-                  {{ item.name }}
-                </div>
-              </div>
-            </template>
-            <template #extra>
-              <div @click="toTagSet" class="ImageText1 flex-col">
-                <div class="box3 flex-row justify-between">
-                  <div class="bd10 flex-col"></div>
-                  <div class="TextGroup1 flex-col">
-                    <span class="word9">{{ $t("device.edit") }}</span>
-                  </div>
-                </div>
-              </div>
-            </template>
-          </van-field>
+  <div class="device-settings">
+    <s-header :name="$t('device.deviceInformation')" :noback="false" />
+
+    <van-form @submit="updateDeviceFun" class="device-settings-form">
+      <!-- 基础信息卡片 -->
+      <div class="settings-card">
+        <div class="card-header">
+          <span class="header-icon"></span>
+          <h3 class="card-title">{{ $t("device.essentialInformation") }}</h3>
         </div>
-        <div class="custom-line"></div>
-        <!-- 广告规则 -->
-        <div v-if="isAdmind" class="bd9 l-f">
-          <van-field readonly :label="`${$t('device.adRule')}`" placeholder="">
-            <template #input>
-              <div class="box2 l-flex-RC l-flex-w" v-if="adRuleList.length > 0">
-                <div class="word8 o-mr-6 o-p-6 c-radius-2 o-mb-5" v-for="(item, index) in adRuleList" :key="index">
-                  {{ item.name }}
-                </div>
-              </div>
-            </template>
-            <template #extra>
-              <div @click="toEditAdRule" class="ImageText1 flex-col">
-                <div class="box3 flex-row justify-between">
-                  <div class="bd10 flex-col"></div>
-                  <div class="TextGroup1 flex-col">
-                    <span class="word9">{{ $t("device.edit") }}</span>
-                  </div>
-                </div>
-              </div>
-            </template>
-          </van-field>
-          <div class="custom-line"></div>
+
+        <van-field
+          readonly
+          v-model="deviceDetal.clientId"
+          :label="$t('device.equipmentCode')"
+          class="form-item"
+        />
+
+        <div class="form-group">
+          <van-field
+            required
+            clearable
+            v-model="deviceDetal.name"
+            name="name"
+            :label="$t('device.equipmentNameLabel')"
+            :placeholder="$t('device.equipmentNamePlaceholder')"
+            :rules="[
+              {
+                required: true,
+                message: $t('device.equipmentNamePlaceholder'),
+              },
+            ]"
+            class="form-item"
+          />
+          <van-field
+            clearable
+            v-model="deviceDetal.selfName"
+            :label="$t('device.equipmentRemarksLabel')"
+            :placeholder="$t('device.equipmentRemarksPlaceholder')"
+            class="form-item"
+          />
         </div>
-        <!-- 优惠券 -->
-        <van-field readonly :label="`${$t('device.coupon')}`" placeholder=""
-          v-if="user.type < 2 && user.ifForeign === '0'">
+      </div>
+
+      <!-- 设备状态卡片 -->
+      <div class="settings-card">
+        <van-field
+          readonly
+          v-model="deviceDetal.adminUserName"
+          :label="$t('device.affiliatedMerchant')"
+          class="form-item"
+        />
+        <van-field
+          readonly
+          v-model="deviceDetal.equimentType"
+          :label="$t('device.machineType')"
+          class="form-item"
+        />
+        <!-- 版本号 -->
+        <van-field
+          readonly
+          v-model="deviceDetal.apkVersion"
+          :label="`${$t('device.versionNo')}`"
+          class="form-item"
+        />
+        <van-field
+          readonly
+          :label="$t('device.equipmentLabel')"
+          class="tag-field"
+        >
           <template #input>
-            <div class="l-flex-RC">
-              <span>{{ couponStatusNameComp }}</span>
-              <van-switch class="o-ml-5" @change="couponStatusChg" v-model="deviceDetal.couponStatus" size="23px"
-                active-value="1" inactive-value="0" />
+            <div class="tag-container" v-if="tagsList.arr.length > 0">
+              <van-tag
+                v-for="(item, index) in tagsList.arr"
+                :key="index"
+                class="tag-item"
+              >
+                {{ item.name }}
+              </van-tag>
             </div>
           </template>
+          <template #extra>
+            <van-button icon="edit" class="edit-btn" @click="toTagSet" />
+          </template>
         </van-field>
-        <div class="cust_vantBorder">
-          <van-field required clearable v-model="deviceDetal.contactName" name="contactName"
-            :label="`${$t('device.nameOfOperatorLabel')}`" :placeholder="$t('device.nameOfOperatorPlaceholder')" :rules="[
-      {
-        required: true,
-        message: $t('device.nameOfOperatorPlaceholder'),
-      },
-    ]" />
-          <van-field required clearable v-model="deviceDetal.contactPhone" name="contactPhone"
-            :label="`${$t('device.operatorTelephoneLabel')}`" :placeholder="$t('device.operatorTelephonePlaceholder')"
-            :rules="[
-      {
-        required: true,
-        message: $t('device.operatorTelephonePlaceholder'),
-      },
-    ]" />
-          <!-- <van-field clearable v-model="deviceDetal.timeRuleId" :label="`${$t('device.advertisingRulesLabel')}:`"
-            :placeholder="$t('device.advertisingRulesPlaceholder')" /> -->
-        </div>
-        <div class="custom-line"></div>
-        <div class="cust_vantBorder">
-          <van-field clearable label-width="32%" v-model="deviceDetal.messageReceiver1"
-            :label="`${$t('device.messageReceiver1')}`"
-            :placeholder="$t('device.equipmentmessageReceiverPlaceholder')" />
-          <van-field clearable label-width="32%" v-model="deviceDetal.messageReceiver2"
-            :label="`${$t('device.messageReceiver2')}`"
-            :placeholder="$t('device.equipmentmessageReceiverPlaceholder')" />
-          <van-field clearable label-width="32%" v-model="deviceDetal.messageReceiver3"
-            :label="`${$t('device.messageReceiver3')}`"
-            :placeholder="$t('device.equipmentmessageReceiverPlaceholder')" />
-        </div>
-        <div class="custom-line"></div>
-        <!-- <div class="cust_vantBorder">
-        </div>
-        <div class="cust_vantBorder">
-        </div> -->
-        <!-- 支付方式 -->
-        <!-- <van-field v-if="user.ifForeign == '0'" colon readonly label-width="18%" :label="`${$t('device.paymentMethod')}`"
-          placeholder="">
+      </div>
+
+      <!-- 标签管理卡片 -->
+      <div class="settings-card">
+        <van-field
+          required
+          clearable
+          class="form-item"
+          v-model="deviceDetal.contactName"
+          name="contactName"
+          :label="`${$t('device.nameOfOperatorLabel')}`"
+          :placeholder="$t('device.nameOfOperatorPlaceholder')"
+          :rules="[
+            {
+              required: true,
+              message: $t('device.nameOfOperatorPlaceholder'),
+            },
+          ]"
+        />
+        <van-field
+          required
+          clearable
+          class="form-item"
+          v-model="deviceDetal.contactPhone"
+          name="contactPhone"
+          :label="`${$t('device.operatorTelephoneLabel')}`"
+          :placeholder="$t('device.operatorTelephonePlaceholder')"
+          :rules="[
+            {
+              required: true,
+              message: $t('device.operatorTelephonePlaceholder'),
+            },
+          ]"
+        />
+        <van-field
+          clearable
+          class="form-item"
+          v-model="deviceDetal.messageReceiver1"
+          :label="`${$t('device.messageReceiver1')}`"
+          :placeholder="$t('device.equipmentmessageReceiverPlaceholder')"
+        />
+        <van-field
+          clearable
+          class="form-item"
+          v-model="deviceDetal.messageReceiver2"
+          :label="`${$t('device.messageReceiver2')}`"
+          :placeholder="$t('device.equipmentmessageReceiverPlaceholder')"
+        />
+        <van-field
+          clearable
+          class="form-item"
+          v-model="deviceDetal.messageReceiver3"
+          :label="`${$t('device.messageReceiver3')}`"
+          :placeholder="$t('device.equipmentmessageReceiverPlaceholder')"
+        />
+      </div>
+
+      <!-- 操作卡片 -->
+      <div class="settings-card" v-if="isAdmind">
+        <van-field readonly :label="$t('device.adRule')" class="tag-field">
           <template #input>
-            <div class="van-cell__value van-field__value radioBox">
-              <van-radio-group v-model="deviceDetal.payType" direction="horizontal">
-                <van-radio name="0" icon-size="18px">{{
-                  $t("device.onlinePayment")
-                }}</van-radio>
-                <van-radio name="1" icon-size="18px">{{
-                  $t("device.offlinePayment")
-                }}</van-radio>
-                <van-radio name="2" icon-size="18px">{{
-                  $t("device.onlineAndOfflinePayment")
-                }}</van-radio>
-              </van-radio-group>
+            <div class="tag-container" v-if="adRuleList.length > 0">
+              <van-tag
+                v-for="(item, index) in adRuleList"
+                :key="index"
+                class="tag-item"
+              >
+                {{ item.name }}
+              </van-tag>
             </div>
           </template>
-        </van-field> -->
-        <!-- 新支付方式,暂时没用屏蔽掉,后续再添加 -->
-        <!-- <van-field v-model="paymentValue" is-link readonly :label="`${$t('device.paymentMethod')}`" placeholder="选择支付方式"
-          @click="showPayment = true" />
-        <van-popup v-model:show="showPayment" round position="bottom">
-          <van-picker :columns="paymentColumns" @cancel="showPayment = false" @confirm="onConfirm" />
-        </van-popup> -->
-        <!-- 通信通道 -->
-        <template v-if="isAdmind">
-          <van-field readonly :label="`${$t('device.communiChannel')}`" placeholder="">
-            <template #input>
-              <div class="van-cell__value van-field__value radioBox">
-                <van-radio-group v-model="deviceDetal.channel" direction="horizontal">
-                  <van-radio name="1" icon-size="16px">{{
-      $t("device.tweets")
-    }}</van-radio>
-                  <van-radio name="2" icon-size="16px">{{
-        $t("device.mq")
-      }}</van-radio>
-                </van-radio-group>
-              </div>
-            </template>
-          </van-field>
-        </template>
-        <!-- 花型种类 -->
-        <template v-if="isAdmind && (machineType === '0' || machineType === '1')">
-          <van-field v-model="deviceDetal.flowers" is-link readonly
-            :label="machineType === '1' ? '口味种类' : $t('device.flowerType')"
-            :placeholder="machineType === '1' ? '选择口味种类' : '选择花型种类'" @click="clickFlowerPicker" />
-        </template>
-        <!-- 版本号 -->
-        <van-field readonly v-model="deviceDetal.apkVersion" :label="`${$t('device.versionNo')}`" placeholder="" />
-        <!-- url -->
-        <div v-if="isAdmind">
-          <van-field center clearable class="input1" v-model="deviceDetal.url" :label="$t('device.url')"
-            :placeholder="$t('device.urlPlace')">
-            <template #button>
-              <van-button class="updateBtn" @click="updateUrlClk" type="primary">&nbsp;&nbsp;{{ $t("device.update")
-                }}&nbsp;&nbsp;</van-button>
-            </template>
-          </van-field>
-        </div>
-        <div class="l-flex-center o-mtb-30">
-          <van-button round type="primary" class="info7" native-type="submit">{{
-      $t("device.submitAndPushDeviceUpdates") }}</van-button>
-        </div>
+          <template #extra>
+            <van-button icon="edit" class="edit-btn" @click="toEditAdRule" />
+          </template>
+        </van-field>
+
+        <van-field
+          v-if="machineType === '0' || machineType === '1'"
+          v-model="deviceDetal.flowers"
+          is-link
+          readonly
+          :label="machineType === '1' ? '口味种类' : $t('device.flowerType')"
+          :placeholder="machineType === '1' ? '选择口味种类' : '选择花型种类'"
+          @click="clickFlowerPicker"
+          class="form-item"
+        />
+
+        <van-field
+          readonly
+          :label="$t('device.communiChannel')"
+          class="form-item"
+        >
+          <template #input>
+            <van-radio-group
+              v-model="deviceDetal.channel"
+              direction="horizontal"
+            >
+              <van-radio name="1" icon-size="16px">{{
+                $t("device.tweets")
+              }}</van-radio>
+              <van-radio name="2" icon-size="16px">{{
+                $t("device.mq")
+              }}</van-radio>
+            </van-radio-group>
+          </template>
+        </van-field>
+
+        <van-field
+          v-model="deviceDetal.url"
+          center
+          clearable
+          class="form-item"
+          :label="$t('device.url')"
+          :placeholder="$t('device.urlPlace')"
+        >
+          <template #button>
+            <van-button size="small" type="primary" @click="updateUrlClk">{{
+              $t("device.update")
+            }}</van-button>
+          </template>
+        </van-field>
+      </div>
+
+      <!-- 操作按钮 -->
+      <div class="action-container">
+        <van-button
+          round
+          type="primary"
+          native-type="submit"
+          class="submit-btn"
+        >
+          {{ $t("device.submitAndPushDeviceUpdates") }}
+        </van-button>
       </div>
     </van-form>
     <!-- 地区弹窗 -->
-    <kCascader @getareaname="getAreaName" :selectId="deviceDetal.areaId" @areapopfinish="areaPopFinish"
-      ref="kCascaderRef">
+    <kCascader
+      @getareaname="getAreaName"
+      :selectId="deviceDetal.areaId"
+      @areapopfinish="areaPopFinish"
+      ref="kCascaderRef"
+    >
     </kCascader>
     <!-- 更新弹窗 -->
-    <kDialog :dialogTitle="$t('user.logOutTips')" :cancelBtnTxt="$t('user.cancelLog')"
-      :confirmBtnTxt="$t('user.confirmLog')" ref="kDialogRef" :dialogContent="$t('device.sureUpdate')"
-      @confirmclk="confirmClk">
+    <kDialog
+      :dialogTitle="$t('user.logOutTips')"
+      :cancelBtnTxt="$t('user.cancelLog')"
+      :confirmBtnTxt="$t('user.confirmLog')"
+      ref="kDialogRef"
+      :dialogContent="$t('device.sureUpdate')"
+      @confirmclk="confirmClk"
+    >
     </kDialog>
     <!-- 花型种类 -->
     <van-popup v-model:show="showFlowerPicker" round position="bottom">
-      <van-picker v-model="selectedFlower" :columns="flowerColumns" @cancel="showFlowerPicker = false"
-        @confirm="onFlowerConfirm" />
+      <van-picker
+        v-model="selectedFlower"
+        :columns="flowerColumns"
+        @cancel="showFlowerPicker = false"
+        @confirm="onFlowerConfirm"
+      />
     </van-popup>
   </div>
 </template>
@@ -232,7 +274,6 @@ import {
 import { showFailToast, showSuccessToast, showToast, closeToast } from "vant";
 import { useI18n } from "vue-i18n";
 import dateUtil from "@/utils/dateUtil";
-import { styleUrl } from "../../common/js/utils";
 
 export default {
   name: "deviceSet",
@@ -283,23 +324,23 @@ export default {
     // 是否管理员
     const isAdmind = ref(false);
     // 设备类型
-    const machineType = ref('0');
+    const machineType = ref("0");
 
     const paymentColumns = [
       {
         text: t("device.onlinePayment"),
-        value: 0
+        value: 0,
       },
       {
         text: t("device.offlinePayment"),
-        value: 1
+        value: 1,
       },
       {
         text: t("device.onlineAndOfflinePayment"),
-        value: 2
-      }
+        value: 2,
+      },
     ];
-    const paymentValue = ref('');
+    const paymentValue = ref("");
     const showPayment = ref(false);
     const onConfirm = ({ selectedOptions }) => {
       paymentValue.value = selectedOptions[0].text;
@@ -309,7 +350,6 @@ export default {
     // 初始化页面获取列表
     onMounted(async () => {
       // 加载样式
-      styleUrl('deviceSet');
       // 从标签设置回来
       // let tagList = sessionStorage.getItem("tagList") || "[]";
       // tagsList.arr = JSON.parse(tagList);
@@ -359,12 +399,8 @@ export default {
             getDetail(data.data.timeRuleId);
           }
         }
-        if (data.data.machineType === '1') {
-          machineType.value = '1';
-        } else if (data.data.machineType === '2') {
-          machineType.value = '1';
-        }
-        if (machineType.value == '0' || machineType.value == '1') {
+        machineType.value = data.data.machineType;
+        if (machineType.value == "0" || machineType.value == "1") {
           selectedFlower.value = [deviceDetal.value.flowers];
           getFlowerNumber(machineType.value);
         }
@@ -391,7 +427,7 @@ export default {
           areaId: item.areaId,
           contactName: item.contactName,
           contactPhone: item.contactPhone,
-          flowers: user.type <= 1 ? item.flowers : '',
+          flowers: user.type <= 1 ? item.flowers : "",
           operationalName: item.operationalName,
           operationalPhone: item.operationalPhone,
           timeRuleId: item.timeRuleId,
@@ -399,7 +435,7 @@ export default {
           messageReceiver1: item.messageReceiver1,
           messageReceiver2: item.messageReceiver2,
           messageReceiver3: item.messageReceiver3,
-          payType: item.payType
+          payType: item.payType,
         };
       })[0];
       // console.log(params);
@@ -418,7 +454,7 @@ export default {
         // 设备名称重复
         showToast(t("device.existsFailed"));
       } else {
-        showFailToast(t("device.editFailed"))
+        showFailToast(t("device.editFailed"));
       }
     };
 
@@ -432,11 +468,11 @@ export default {
     const getFlowerNumber = async (machineType) => {
       const { data } = await getGoodsNumber({ machineType: machineType });
       if (data.code === "00000") {
-        data.data.forEach(item => {
-          flowerColumns.push({ text: item, value: item + "" })
+        data.data.forEach((item) => {
+          flowerColumns.push({ text: item, value: item + "" });
         });
       }
-    }
+    };
     //确认选择
     const onFlowerConfirm = ({ selectedOptions }) => {
       showFlowerPicker.value = false;
@@ -444,9 +480,9 @@ export default {
       showToast({
         message: "提示:\n修改花型后需要重新设置价格",
         duration: 3000,
-        forbidClick: true
-      })
-    }
+        forbidClick: true,
+      });
+    };
 
     // 点击去到编辑标签页
     const toTagSet = () => {
@@ -519,15 +555,18 @@ export default {
     const toEditAdRule = () => {
       router.push({
         path: "/editAdRule",
-        query: { deviceId: route.query.deviceId, adRuleList: JSON.stringify(adRuleList.value) },
+        query: {
+          deviceId: route.query.deviceId,
+          adRuleList: JSON.stringify(adRuleList.value),
+        },
       });
     };
     const clickFlowerPicker = () => {
-
       const toast = showToast({
         duration: 0,
         forbidClick: true,
-        message: '提示:\n请确认PLC版本支持修改的花型,避免出现程序错乱,导致客诉!!!倒计时 5 S',
+        message:
+          "提示:\n请确认PLC版本支持修改的花型,避免出现程序错乱,导致客诉!!!倒计时 5 S",
       });
 
       let second = 5;
@@ -548,7 +587,7 @@ export default {
       //   forbidClick: true
       // })
       // showFlowerPicker.value = true;
-    }
+    };
     return {
       deviceDetal,
       updateDeviceFun,
@@ -579,20 +618,143 @@ export default {
       showFlowerPicker,
       selectedFlower,
       onFlowerConfirm,
-      clickFlowerPicker
+      clickFlowerPicker,
     };
   },
 };
 </script>
 <style lang="less" scoped>
-@import "../../common/style/common";
-@import "../../styles/deviceSet/index.less";
-
-.custom-line {
-  height: 1px;
-  background-color: #ebedf0;
-  /* 设置线条颜色 */
-  // margin-bottom: 10px; /* 根据需要调整线条与上方内容的间距 */
-  margin: 0 15px;
+@primary-color: #4d6add;
+@card-bg: #ffffff;
+@text-primary: #2d3436;
+@border-color: #e4e7ec;
+
+.device-settings {
+  // padding: 16px;
+  background: #f8fafb;
+  min-height: 100vh;
+}
+
+.device-settings-form {
+  height: calc(100% - 50px);
+  overflow: auto;
+  overflow-x: hidden;
+}
+
+.settings-card {
+  background: @card-bg;
+  border-radius: 12px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
+  margin: 15px;
+
+  .card-header {
+    display: flex;
+    align-items: center;
+    margin-bottom: 16px;
+    padding-bottom: 12px;
+    border-bottom: 1px solid @border-color;
+
+    .header-icon {
+      width: 3px;
+      height: 16px;
+      background: @primary-color;
+      margin-right: 8px;
+      border-radius: 2px;
+    }
+
+    .card-title {
+      font-size: 15px;
+      color: @text-primary;
+      margin: 0;
+    }
+  }
+}
+
+.form-item {
+  padding: 15px;
+
+  :deep(.van-field__label) {
+    width: 120px;
+    color: #666;
+    font-size: 13px;
+  }
+
+  :deep(.van-field__control) {
+    color: @text-primary;
+    font-weight: 500;
+  }
+}
+
+.status-group {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 12px;
+}
+
+.tag-field {
+  padding: 12px 0;
+
+  :deep(.van-field__label) {
+    width: 120px;
+    color: #666;
+  }
+
+  :deep(.van-field__control) {
+    color: @text-primary;
+    font-weight: 500;
+  }
+
+  .tag-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+
+  .tag-item {
+    background: rgba(@primary-color, 0.1);
+    color: @primary-color;
+    padding: 4px 8px;
+    border-radius: 4px;
+    font-size: 12px;
+  }
+
+  .edit-btn {
+    color: @primary-color;
+    border: none;
+
+    // padding: 4px;
+  }
+  :deep(.van-button) {
+    height: auto !important;
+  }
+}
+
+.action-container {
+  text-align: center;
+  padding: 24px 0;
+
+  .submit-btn {
+    width: 80%;
+    max-width: 400px;
+    font-size: 16px;
+    height: 44px;
+    box-shadow: 0 4px 12px rgba(77, 194, 148, 0.2);
+  }
+}
+
+@media (max-width: 480px) {
+  .settings-card {
+    padding: 12px;
+    border-radius: 8px;
+  }
+
+  .form-item {
+    padding: 8px 0;
+  }
+
+  .submit-btn {
+    width: 100%;
+    font-size: 14px;
+  }
 }
 </style>