样式修改

lxf

2025-05-19 45190f969dd8c7d3d2c6e366694f0dadc5ea07e8

 src/page/userCenter/listBox.vue

@@ -1,18 +1,38 @@
<template>
    <div class="listBox">
        <div class="list-title contBackground">{{ title }}</div>
    <!-- <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">
      <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>
          <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="">
          <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>
@@ -29,40 +49,38 @@
        listData: {
            type: Array,
            default() {
                return []
            }
        return [];
      },
        },
        status: {
            type: Number,
            default: 0,
        },
    },
    components: {

    },
  components: {},
    data() {
        return {

        }
    return {};
    },
    methods: {
        gotoPath(url) {
            this.$router.push(url);
        }
    }
}
    },
  },
};
</script>

<style lang="scss" scoped>
.listBox {
    .list-title {
        height: 92px;
        width: 100%;
    // width: 100%;
        line-height: 92px;
        padding-left: 33px;
        color: #868D9A;
    color: #868d9a;
    }

  .textColor {
    padding: 1.5rem;
  }
    .list-cont {
        padding-left: 36px;
        padding-right: 40px;
@@ -88,7 +106,6 @@
                        height: 100%;
                    }
                }

            }

            .right {
@@ -102,21 +119,20 @@
                    height: 26px;
                    margin-left: 22px;
                }

            }
        }
    }
}

.yellow {
    color: #F5C421;
  color: #f5c421;
}

.red {
    color: #F6465D
  color: #f6465d;
}

.green {
    color: #2EBD85;
  color: #2ebd85;
}
</style>