样式修改

lxf

2025-05-19 45190f969dd8c7d3d2c6e366694f0dadc5ea07e8

 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>