From 45190f969dd8c7d3d2c6e366694f0dadc5ea07e8 Mon Sep 17 00:00:00 2001
From: lxf <1371462558@qq.com>
Date: Mon, 19 May 2025 16:43:12 +0800
Subject: [PATCH] 样式修改

---
 src/page/userCenter/listBox.vue |  202 +++++++++++++++++++++++++++-----------------------
 1 files changed, 109 insertions(+), 93 deletions(-)

diff --git a/src/page/userCenter/listBox.vue b/src/page/userCenter/listBox.vue
index c148a57..3830208 100644
--- a/src/page/userCenter/listBox.vue
+++ b/src/page/userCenter/listBox.vue
@@ -1,122 +1,138 @@
 <template>
-    <div class="listBox">
-        <div class="list-title contBackground">{{ title }}</div>
-        <ul class="list-cont">
-            <li v-for="(item, index) in listData" :key="index" @click="gotoPath(item.url)" class="textColor">
-                <div class="left">
-                    <div class="imgBox"><img :src="item.icon" alt=""></div>
-                    <span>{{ item.name }}</span>
-                </div>
-                <div class="right">
-                    <span :class="{ 'red': status == 0 || status == 3, 'yellow': status == 1, 'green': status == 2 }"
-                        v-if="item.url == '/certificationCenter'">{{
-                            status == 0 ? $t('未认证') :
-                            status == 1 ? $t('审核中') : status == 2 ? $t('已认证') : status == 3 ? $t('审核未通过') : '' }}</span>
-                    <img src="@/assets/image/userCenter/more.png" alt="">
-                </div>
-            </li>
-        </ul>
-    </div>
+  <div class="listBox">
+    <!-- <div class="list-title contBackground">{{ title }}</div> -->
+    <ul class="list-cont">
+      <li
+        v-for="(item, index) in listData"
+        :key="index"
+        @click="gotoPath(item.url)"
+        class="textColor"
+      >
+        <div class="left">
+          <div class="imgBox"><img :src="item.icon" alt="" /></div>
+          <span>{{ item.name }}</span>
+        </div>
+        <div class="right">
+          <span
+            :class="{
+              red: status == 0 || status == 3,
+              yellow: status == 1,
+              green: status == 2,
+            }"
+            v-if="item.url == '/certificationCenter'"
+            >{{
+              status == 0
+                ? $t("未认证")
+                : status == 1
+                ? $t("审核中")
+                : status == 2
+                ? $t("已认证")
+                : status == 3
+                ? $t("审核未通过")
+                : ""
+            }}</span
+          >
+          <img src="@/assets/image/userCenter/more.png" alt="" />
+        </div>
+      </li>
+    </ul>
+  </div>
 </template>
 
 <script>
 export default {
-    props: {
-        title: {
-            type: String,
-            default: "",
-        },
-        listData: {
-            type: Array,
-            default() {
-                return []
-            }
-        },
-        status: {
-            type: Number,
-            default: 0,
-        },
+  props: {
+    title: {
+      type: String,
+      default: "",
     },
-    components: {
-
+    listData: {
+      type: Array,
+      default() {
+        return [];
+      },
     },
-    data() {
-        return {
-
-        }
+    status: {
+      type: Number,
+      default: 0,
     },
-    methods: {
-        gotoPath(url) {
-            this.$router.push(url);
-        }
-    }
-}
+  },
+  components: {},
+  data() {
+    return {};
+  },
+  methods: {
+    gotoPath(url) {
+      this.$router.push(url);
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
 .listBox {
-    .list-title {
-        height: 92px;
-        width: 100%;
-        line-height: 92px;
-        padding-left: 33px;
-        color: #868D9A;
-    }
+  .list-title {
+    height: 92px;
+    // width: 100%;
+    line-height: 92px;
+    padding-left: 33px;
+    color: #868d9a;
+  }
+  .textColor {
+    padding: 1.5rem;
+  }
+  .list-cont {
+    padding-left: 36px;
+    padding-right: 40px;
 
-    .list-cont {
-        padding-left: 36px;
-        padding-right: 40px;
+    li {
+      display: flex;
+      justify-content: space-between;
+      height: 100px;
+      align-items: center;
 
-        li {
-            display: flex;
-            justify-content: space-between;
-            height: 100px;
-            align-items: center;
+      .left {
+        display: flex;
+        justify-content: center;
+        align-items: center;
 
-            .left {
-                display: flex;
-                justify-content: center;
-                align-items: center;
+        .imgBox {
+          width: 44px;
+          height: 44px;
+          margin-right: 22px;
 
-                .imgBox {
-                    width: 44px;
-                    height: 44px;
-                    margin-right: 22px;
-
-                    img {
-                        width: 100%;
-                        height: 100%;
-                    }
-                }
-
-            }
-
-            .right {
-                display: flex;
-                justify-content: center;
-                align-items: center;
-                font-size: 30px;
-
-                img {
-                    width: 26px;
-                    height: 26px;
-                    margin-left: 22px;
-                }
-
-            }
+          img {
+            width: 100%;
+            height: 100%;
+          }
         }
+      }
+
+      .right {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 30px;
+
+        img {
+          width: 26px;
+          height: 26px;
+          margin-left: 22px;
+        }
+      }
     }
+  }
 }
 
 .yellow {
-    color: #F5C421;
+  color: #f5c421;
 }
 
 .red {
-    color: #F6465D
+  color: #f6465d;
 }
 
 .green {
-    color: #2EBD85;
+  color: #2ebd85;
 }
 </style>

--
Gitblit v1.9.3