随访计划及历史随访增加了预警等级

src/views/weibao/App.vue

@@ -7,10 +7,10 @@
   </div>
 </template>
 <script>
-import { loginApp } from '../../api/index.js'
+import { loginApp } from "../../api/index.js";
 export default {
   data() {
-    return {}
+    return {};
   },
   created() {
     // this.loginApp()
@@ -18,19 +18,19 @@ export default {
   methods: {
     async loginApp() {
       const res = await loginApp({
-        loginName: '15620220622', //社工
+        loginName: "15620220622", //社工
         // loginName: '13525112211', //志愿
         // loginName: '13612345678', //政府
         // loginName: '13222222229', //儿童督导
         // loginName: '16601217325', // 主任
-        password: '123456',
-      })
-      console.log(res)
-      sessionStorage.setItem('userInfo', JSON.stringify(res.data))
-      sessionStorage.setItem('x-token', res.data.jwtToken)
+        password: "123456",
+      });
+      console.log(res);
+      sessionStorage.setItem("userInfo", JSON.stringify(res.data));
+      sessionStorage.setItem("x-token", res.data.jwtToken);
     },
   },
-}
+};
 </script>
 <style>
 #app {

src/views/weibao/views/followUp/director.vue

@@ -1,140 +1,166 @@
 <template>
   <div>
-    <van-nav-bar title="关爱服务" @click-left="$router.back()" left-arrow fixed placeholder safe-area-inset-top />
+    <van-nav-bar
+      title="关爱服务"
+      @click-left="$router.back()"
+      left-arrow
+      fixed
+      placeholder
+      safe-area-inset-top
+    />
     <div class="box">
       <van-tabs v-model="active" @change="changeonLoad">
         <van-tab title="随访计划"></van-tab>
         <van-tab title="历史随访"></van-tab>
       </van-tabs>
       <div class="search_bg">
-        <van-search v-if="roleId ==21 || roleId ==11" v-show="active==0" v-model="followUpform.name" shape="round" show-action placeholder="儿童姓名" @search="onSearchPlan">
+        <van-search
+          v-if="roleId == 21 || roleId == 11"
+          v-show="active == 0"
+          v-model="followUpform.name"
+          shape="round"
+          show-action
+          placeholder="儿童姓名"
+          @search="onSearchPlan"
+        >
           <template #action>
             <div @click="onSearchPlan">搜索</div>
           </template>
         </van-search>
-        <van-search v-show="active==1" v-model="historyform.name" shape="round" show-action placeholder="儿童姓名" @search="onSearch">
+        <van-search
+          v-show="active == 1"
+          v-model="historyform.name"
+          shape="round"
+          show-action
+          placeholder="儿童姓名"
+          @search="onSearch"
+        >
           <template #action>
             <div @click="onSearch">搜索</div>
           </template>
         </van-search>
       </div>
     </div>
-    
-    <van-list v-model="loading" :immediate-check="false" :finished="finished" finished-text="没有更多了" @load="onLoad">
-      <plan v-show="active==0" :planList="planList"></plan>
-      <history v-show="active==1" :historyList="historyList"></history>
+
+    <van-list
+      v-model="loading"
+      :immediate-check="false"
+      :finished="finished"
+      finished-text="没有更多了"
+      @load="onLoad"
+    >
+      <plan v-show="active == 0" :planList="planList"></plan>
+      <history v-show="active == 1" :historyList="historyList"></history>
     </van-list>
   </div>
 </template>
 <script>
-import { followUpPage, historyFollowUp } from '../../api/index.js'
-import plan from './plan.vue'
-import history from './history.vue'
+import { followUpPage, historyFollowUp } from "../../api/index.js";
+import plan from "./plan.vue";
+import history from "./history.vue";
 export default {
   components: { plan, history },
   data() {
     return {
-      value: '',
+      value: "",
       active: 0,
       loading: false,
       finished: false,
       planList: [],
       historyList: [],
-      roleId:JSON.parse(sessionStorage.getItem('userInfo')).roleIdStr,
+      roleId: JSON.parse(sessionStorage.getItem("userInfo")).roleIdStr,
       followUpform: {
         pageNum: 1,
         pageSize: 20,
-        name: ''
+        name: "",
       },
       historyform: {
         pageNum: 1,
         pageSize: 20,
         isSupervise:
-          JSON.parse(sessionStorage.getItem('userInfo')).roleIdStr == 14
-            ? 2
-            : 1,
-        name: '',
+          JSON.parse(sessionStorage.getItem("userInfo")).roleIdStr == 14 ? 2 : 1,
+        name: "",
       },
-    }
+    };
   },
   activated() {
-    this.loading = true
-    this.followUpPage()
-    this.historyFollowUp()
-    console.log('1')
+    this.loading = true;
+    this.followUpPage();
+    this.historyFollowUp();
+    console.log("1");
   },
   beforeRouteEnter(to, from, next) {
     next((vm) => {
       //  这里的vm指的就是vue实例，可以用来当做this使用
-      console.log(to, 'to')
-      console.log(from, 'from')
-      if (from.name == 'Home') {
-        vm.active = 0
-        vm.followUpform.pageNum = 1
-        vm.historyform.pageNum = 1
+      console.log(to, "to");
+      console.log(from, "from");
+      if (from.name == "Home") {
+        vm.active = 0;
+        vm.followUpform.pageNum = 1;
+        vm.historyform.pageNum = 1;
       }
-    })
+    });
   },
   methods: {
     async followUpPage() {
-      const res = await followUpPage(this.followUpform)
-      this.loading = false
+      const res = await followUpPage(this.followUpform);
+      this.loading = false;
       //   this.$toast(this.followUpform.pageNum)
       if (this.followUpform.pageNum == 1) {
-        this.planList = res.data.records
+        this.planList = res.data.records;
       } else {
-        this.planList = this.planList.concat(res.data.records)
-        console.log(this.planList)
+        this.planList = this.planList.concat(res.data.records);
+        console.log(this.planList);
       }
       if (this.planList.length == res.data.total) {
-        this.finished = true
+        this.finished = true;
       } else {
-        this.finished = false
+        this.finished = false;
       }
     },
     async historyFollowUp() {
-      const res = await historyFollowUp(this.historyform)
-      this.loading = false
+      const res = await historyFollowUp(this.historyform);
+      this.loading = false;
       if (this.historyform.pageNum == 1) {
-        this.historyList = res.data.records
+        this.historyList = res.data.records;
       } else {
-        this.historyList = this.historyList.concat(res.data.records)
+        this.historyList = this.historyList.concat(res.data.records);
       }
       if (this.historyList.length == res.data.total) {
-        this.finished = true
+        this.finished = true;
       } else {
-        this.finished = false
+        this.finished = false;
       }
     },
     onLoad() {
       if (this.active == 0) {
-        this.followUpform.pageNum = this.followUpform.pageNum + 1
-        this.followUpPage()
+        this.followUpform.pageNum = this.followUpform.pageNum + 1;
+        this.followUpPage();
       } else {
-        this.historyform.pageNum = this.historyform.pageNum + 1
-        this.historyFollowUp()
+        this.historyform.pageNum = this.historyform.pageNum + 1;
+        this.historyFollowUp();
       }
     },
     changeonLoad() {
-      this.loading = true
+      this.loading = true;
       if (this.active == 0) {
-        this.followUpform.pageNum = 1
-        this.followUpPage()
+        this.followUpform.pageNum = 1;
+        this.followUpPage();
       } else {
-        this.historyform.pageNum = 1
-        this.historyFollowUp()
+        this.historyform.pageNum = 1;
+        this.historyFollowUp();
       }
     },
     onSearchPlan() {
-      this.followUpform.pageNum = 1
-      this.followUpPage()
+      this.followUpform.pageNum = 1;
+      this.followUpPage();
     },
     onSearch() {
-      this.historyform.pageNum = 1
-      this.historyFollowUp()
+      this.historyform.pageNum = 1;
+      this.historyFollowUp();
     },
   },
-}
+};
 </script>
 <style lang="scss" scoped>
 .van-list {
@@ -148,4 +174,4 @@ export default {
   width: 100%;
   z-index: 9999;
 }
-</style>
+</style>

src/views/weibao/views/followUp/history.vue

@@ -1,14 +1,47 @@
 <template>
-  <div :class="roleIdStr==14 || roleIdStr==21|| roleIdStr==11?'mt':''">
-    <div class="list" v-for="item in historyList" :key="item.id" @click="$router.push({path:'/followUp/details',query:{id:item.id}})">
+  <div :class="roleIdStr == 14 || roleIdStr == 21 || roleIdStr == 11 ? 'mt' : ''">
+    <div
+      class="list"
+      v-for="item in historyList"
+      :key="item.id"
+      @click="$router.push({ path: '/followUp/details', query: { id: item.id } })"
+    >
+      <!-- 头像区域 -->
       <div class="img">
-        <img class="tx" :src="item.url?item.url:require('../../assets/tx.png')" alt="">
-        <img v-if="item.followNum == 0" class="warning" src="../../assets/warning.png" alt="">
+        <img
+          class="tx"
+          :src="item.url ? getpics(item.url) : require('../../assets/tx.png')"
+          alt="头像"
+        />
+        <img
+          v-if="item.followNum == 0"
+          class="warning"
+          src="../../assets/warning.png"
+          alt="警告"
+        />
       </div>
+
+      <!-- 信息区域 -->
       <div class="text">
-        <p class="title">{{item.name}}-{{item.sex}}-{{item.age}}<span class="mes">{{item.childTypeName}}</span></p>
-        <p class="num">随访时间：{{item.followDate}}</p>
-        <p class="num adress">居住地址：{{item.address}}</p>
+        <!-- 标题+预警级别容器 -->
+        <div class="title-wrapper">
+          <p class="title">
+            {{ item.name }}-{{ item.sex }}-{{ item.age }}
+            <span class="mes">{{ item.childTypeName }}</span>
+          </p>
+
+          <!-- 预警级别标签 -->
+          <div
+            v-if="item.warningLevel > 0"
+            class="warning-level"
+            :class="getWarningClass(item.warningLevel)"
+          >
+            {{ getWarningText(item.warningLevel) }}
+          </div>
+        </div>
+
+        <p class="num">随访时间：{{ item.followDate }}</p>
+        <p class="num adress">居住地址：{{ item.address }}</p>
       </div>
     </div>
   </div>
@@ -16,89 +49,246 @@
 
 <script>
 export default {
-  props: ['historyList'],
+  name: "HistoryList",
+  props: {
+    historyList: {
+      type: Array,
+      default: () => [],
+    },
+  },
   data() {
     return {
-      bgimg: require('../../assets/newsbg.png'),
-      roleIdStr: JSON.parse(sessionStorage.getItem('userInfo')).roleIdStr,
-    }
+      bgimg: require("../../assets/newsbg.png"),
+      roleIdStr: JSON.parse(sessionStorage.getItem("userInfo") || "{}")?.roleIdStr || "",
+    };
   },
   methods: {
     getpics(item) {
-      if (!item) return this.bgimg
-      var url = ''
-      var arr = item.split(',')
-      arr.forEach((item) => {
-        if (item.indexOf('.jpg') || item.indexOf('.png')) {
-         url = arr[0].replace('/cgpimage/', '/cgpimage/240x240/')
-          return
+      if (!item) return this.bgimg;
+      let url = "";
+      const arr = item.split(",");
+      // 修复逻辑：indexOf返回-1表示不存在，需要取反
+      arr.some((imgItem) => {
+        if (imgItem.indexOf(".jpg") !== -1 || imgItem.indexOf(".png") !== -1) {
+          url = imgItem.replace("/cgpimage/", "/cgpimage/240x240/");
+          return true; // 终止遍历
         }
-      })
-      return url
+        return false;
+      });
+      return url || this.bgimg; // 兜底
+    },
+    // 获取预警级别文本（兼容数字/字符串类型）
+    getWarningText(level) {
+      const levelNum = Number(level);
+      const levelMap = {
+        1: "蓝色预警",
+        2: "黄色预警",
+        3: "橙色预警",
+        4: "红色预警",
+      };
+      return levelMap[levelNum] || "";
+    },
+    // 获取预警级别样式类
+    getWarningClass(level) {
+      const levelNum = Number(level);
+      if ([1, 2, 3, 4].includes(levelNum)) {
+        return `level-${levelNum}`;
+      }
+      return "level-default";
     },
   },
-}
+};
 </script>
+
 <style lang="scss" scoped>
+// 基础样式
 .mt {
   margin-top: 100px;
 }
+
+// 列表项样式（卡片化优化）
 .list {
   display: flex;
-  align-items: center;
-  margin-bottom: 26px;
+  align-items: flex-start;
+  margin: 0 16px 20px;
+  padding: 24px;
+  background-color: #fff;
+  border-radius: 16px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+  transition: box-shadow 0.2s ease;
+  cursor: pointer; // 点击态提示
+
+  &:hover {
+    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
+  }
+
+  // 头像区域优化
   .img {
+    position: relative;
     .tx {
-      width: 100px;
-      height: 100px;
+      width: 96px;
+      height: 96px;
       border-radius: 50%;
+      object-fit: cover;
+      border: 3px solid #f8f9fa;
+    }
+    .warning {
+      width: 28px;
+      height: 28px;
+      position: absolute;
+      top: -8px;
+      right: -8px;
+      animation: pulse 1.5s ease infinite alternate;
+    }
+    @keyframes pulse {
+      0% {
+        opacity: 0.7;
+        transform: scale(0.95);
+      }
+      100% {
+        opacity: 1;
+        transform: scale(1.05);
+      }
     }
   }
+
+  // 文本信息区域
   .text {
     text-align: left;
-    margin-left: 26px;
-    width: calc(100% - 116px);
-    .title {
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      font-size: 30px;
-    }
-    .adress {
+    margin-left: 24px;
+    width: calc(100% - 120px);
+
+    // 标题+预警级别容器
+    .title-wrapper {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 16px;
       width: 100%;
+    }
+
+    // 标题样式优化
+    .title {
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
-      display: block !important;
+      font-size: 32px;
+      margin: 0;
+      color: #1d2129;
+      font-weight: 500;
+      max-width: calc(100% - 120px);
+      line-height: 1.4;
     }
+
     .mes {
       font-size: 26px;
-      margin-left: 10px;
+      margin-left: 12px;
+      color: #666c78;
+      font-weight: 400;
+      background-color: #f2f3f5;
+      padding: 2px 8px;
+      border-radius: 4px;
+    }
+
+    // 预警级别标签样式
+    .warning-level {
+      padding: 6px 16px;
+      border-radius: 24px;
+      font-size: 22px;
+      color: #fff;
+      font-weight: 500;
+      display: inline-block;
+      min-width: 90px;
+      text-align: center;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    }
+
+    // 各级别颜色
+    .level-1 {
+      background-color: #1890ff;
+    }
+    .level-2 {
+      background-color: #faad14;
+      color: #1d2129 !important;
+    }
+    .level-3 {
+      background-color: #fa8c16;
+    }
+    .level-4 {
+      background-color: #f5222d;
     }
+    .level-default {
+      background-color: #8c8c8c;
+    }
+
     .zero {
-      color: #ff3b30;
+      color: #f5222d;
+      font-weight: 600;
+      font-size: 26px;
     }
+
     .num {
-      font-size: 24px;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      .van-button {
-        border-radius: 8px;
+      font-size: 25px;
+      color: #4e5969;
+      margin-bottom: 12px !important;
+
+      &.adress {
+        // 最多显示2行
+        display: -webkit-box !important;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        line-height: 1.4;
+        min-height: 67px; /* 24px字体 * 1.4行高 * 2行 ≈ 67px */
       }
     }
 
     p {
       margin: 0;
-      margin-bottom: 16px;
       font-size: 26px;
+      color: #4e5969;
     }
   }
-  .van-button {
-    width: 160px;
-    background-color: #1677ff;
-    color: #fff;
-    font-size: 24px;
+}
+
+// 移动端适配
+@media (max-width: 750px) {
+  .list {
+    padding: 20px 16px;
+    margin: 0 12px 16px;
+
+    .img .tx {
+      width: 88px;
+      height: 88px;
+    }
+
+    .text {
+      margin-left: 20px;
+      width: calc(100% - 108px);
+
+      .title {
+        font-size: 29px;
+        max-width: calc(100% - 100px);
+      }
+
+      .mes {
+        font-size: 24px;
+      }
+
+      .warning-level {
+        font-size: 20px;
+        padding: 4px 12px;
+        min-width: 80px;
+      }
+
+      .num {
+        font-size: 24px;
+        &.adress {
+          min-height: 62px; /* 22px字体 * 1.4行高 * 2行 ≈ 62px */
+        }
+      }
+    }
   }
 }
 </style>

src/views/weibao/views/followUp/plan.vue

@@ -1,15 +1,51 @@
 <template>
-  <div :class="roleIdStr==21 || roleIdStr==11?'mt':''">
+  <div :class="roleIdStr == 21 || roleIdStr == 11 ? 'mt' : ''">
     <div class="list" v-for="item in planList" :key="item.id">
+      <!-- 头像区域 -->
       <div class="img">
-        <img class="tx" :src="item.photoImgUrl?item.photoImgUrl:require('../../assets/tx.png')" alt="">
-        <img v-if="item.followNum == 0" class="warning" src="../../assets/warning.png" alt="">
+        <img
+          class="tx"
+          :src="item.photoImgUrl ? item.photoImgUrl : require('../../assets/tx.png')"
+          alt="头像"
+        />
+        <img
+          v-if="item.followNum == 0"
+          class="warning"
+          src="../../assets/warning.png"
+          alt="警告"
+        />
       </div>
+
+      <!-- 信息区域 -->
       <div class="text">
-        <p class="title">{{item.name}}-{{item.sex}}-{{item.age}}<span class="mes">{{item.childTypeName}}</span></p>
+        <!-- 标题+预警级别容器 -->
+        <div class="title-wrapper">
+          <p class="title">
+            {{ item.name }}-{{ item.sex }}-{{ item.age }}
+            <span class="mes">{{ item.childTypeName }}</span>
+          </p>
+
+          <!-- 预警级别标签 -->
+          <div
+            v-if="item.warningLevel > 0"
+            class="warning-level"
+            :class="getWarningClass(item.warningLevel)"
+          >
+            {{ getWarningText(item.warningLevel) }}
+          </div>
+        </div>
+
         <div class="num">
-          <div>本月随访次数：<span :class="item.followNum == 0?'zero':''">{{item.followNum}}</span></div>
-          <van-button size="mini" @click="$router.push({path:'/followUp/record',query:{id:item.id}})">开始随访</van-button>
+          <div>
+            本月随访次数：<span :class="item.followNum == 0 ? 'zero' : ''">{{
+              item.followNum
+            }}</span>
+          </div>
+          <van-button
+            size="mini"
+            @click="$router.push({ path: '/followUp/record', query: { id: item.id } })"
+            >开始随访</van-button
+          >
         </div>
       </div>
     </div>
@@ -18,82 +54,234 @@
 
 <script>
 export default {
-  props: ['planList'],
+  name: "PlanList",
+  props: {
+    planList: {
+      type: Array,
+      default: () => [],
+    },
+  },
   data() {
     return {
-      roleIdStr: JSON.parse(sessionStorage.getItem('userInfo')).roleIdStr,
-    }
+      roleIdStr: JSON.parse(sessionStorage.getItem("userInfo") || "{}")?.roleIdStr || "",
+    };
   },
-}
+  methods: {
+    getWarningText(level) {
+      const levelNum = Number(level);
+      const levelMap = {
+        1: "蓝色预警",
+        2: "黄色预警",
+        3: "橙色预警",
+        4: "红色预警",
+      };
+      return levelMap[levelNum] || "";
+    },
+    // 获取预警级别样式类
+    getWarningClass(level) {
+      const levelNum = Number(level);
+      if ([1, 2, 3, 4].includes(levelNum)) {
+        return `level-${levelNum}`;
+      }
+      return "level-default";
+    },
+  },
+};
 </script>
+
 <style lang="scss" scoped>
 .mt {
   margin-top: 100px;
 }
+
 .list {
   display: flex;
-  align-items: center;
-  margin-bottom: 26px;
+  align-items: flex-start;
+  margin: 0 16px 20px;
+  padding: 24px;
+  background-color: #fff;
+  border-radius: 16px; // 更大圆角，更现代
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); // 更柔和的阴影
+  transition: box-shadow 0.2s ease; // hover动效
+
+  &:hover {
+    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08); // 悬浮提升质感
+  }
+
+  // 头像区域
   .img {
     position: relative;
     .tx {
-      width: 100px;
-      height: 100px;
+      width: 96px;
+      height: 96px;
       border-radius: 50%;
+      object-fit: cover;
+      border: 3px solid #f8f9fa; // 更细腻的边框
     }
     .warning {
-      width: 30px;
-      height: 30px;
+      width: 29px;
+      height: 29px;
       position: absolute;
-      top: -10px;
-      right: -10px;
-      animation: heart 1s ease infinite;
+      top: -8px;
+      right: -8px;
+      animation: pulse 1.2s ease infinite alternate; // 更柔和的呼吸动画
     }
-    @keyframes heart {
+    @keyframes pulse {
       0% {
-        opacity: 0;
+        opacity: 0.7;
+        transform: scale(0.9);
       }
       100% {
         opacity: 1;
+        transform: scale(1.07);
       }
     }
   }
+
+  // 文本信息区域
   .text {
     text-align: left;
-    margin-left: 26px;
-    width: calc(100% - 125px);
+    margin-left: 24px;
+    width: calc(100% - 120px);
+
+    // 标题+预警级别容器
+    .title-wrapper {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 20px;
+      width: 100%;
+    }
+
+    // 标题样式优化
     .title {
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
-      font-size: 30px;
+      font-size: 32px;
+      margin: 0;
+      color: #1d2129;
+      font-weight: 500;
+      max-width: calc(100% - 120px);
+      line-height: 1.4;
     }
+
     .mes {
       font-size: 26px;
-      margin-left: 10px;
+      margin-left: 12px;
+      color: #666c78;
+      font-weight: 400;
+      background-color: #f2f3f5;
+      padding: 2px 8px;
+      border-radius: 4px; // 小标签样式
+    }
+
+    // 预警级别标签样式优化
+    .warning-level {
+      padding: 6px 16px;
+      border-radius: 24px; // 更圆润的胶囊样式
+      font-size: 22px;
+      color: #fff;
+      font-weight: 500;
+      display: inline-block;
+      min-width: 90px;
+      text-align: center;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); // 标签阴影提升层次感
+    }
+
+    // 各级别颜色优化（更舒适的色调）
+    .level-1 {
+      background-color: #1890ff; // 更柔和的蓝色
     }
+    .level-2 {
+      background-color: #faad14; // 更暖的黄色
+      color: #1d2129 !important;
+    }
+    .level-3 {
+      background-color: #fa8c16; // 更柔和的橙色
+    }
+    .level-4 {
+      background-color: #f5222d; // 更舒适的红色
+    }
+    .level-default {
+      background-color: #8c8c8c; // 中性灰色
+    }
+
+    // 随访次数样式优化
     .zero {
-      color: #ff3b30;
+      color: #f5222d;
+      font-weight: 600;
+      font-size: 26px; // 突出显示0次
     }
+
     .num {
-      font-size: 24px;
+      font-size: 25px;
       display: flex;
       justify-content: space-between;
       align-items: center;
-      .van-button {
-        border-radius: 8px;
-      }
-    }
-    p {
-      margin: 0;
-      margin-bottom: 16px;
+      color: #4e5969;
+      padding-top: 12px;
+      border-top: 1px solid #f2f3f5; // 分割线提升结构感
     }
   }
   .van-button {
     width: 160px;
-    background-color: #1677ff;
+    background-color: #1890ff; // 统一蓝色系
     color: #fff;
     font-size: 24px;
+    border: none;
+    height: 52px;
+    line-height: 52px;
+    border-radius: 12px; // 更大圆角
+    box-shadow: 0 4px 8px rgba(24, 144, 255, 0.2); // 按钮渐变阴影
+    transition: background-color 0.2s ease;
+
+    &:active {
+      background-color: #096dd9; // 更深的点击态
+    }
+  }
+}
+
+// 移动端适配优化
+@media (max-width: 750px) {
+  .list {
+    padding: 20px 16px;
+    margin: 0 12px 16px;
+
+    .img .tx {
+      width: 88px;
+      height: 88px;
+    }
+
+    .text {
+      margin-left: 20px;
+      width: calc(100% - 108px);
+
+      .title {
+        font-size: 29px;
+        max-width: calc(100% - 100px);
+      }
+
+      .mes {
+        font-size: 24px;
+      }
+
+      .warning-level {
+        font-size: 20px;
+        padding: 4px 12px;
+        min-width: 80px;
+      }
+
+      .num {
+        font-size: 24px;
+
+        .van-button {
+          width: 140px;
+          height: 48px;
+          font-size: 22px;
+        }
+      }
+    }
   }
 }
 </style>