de-net/src/view/popup/tabbar-page/more/index.vue

<template>
  <div class="more-page">
    <div class="more-list">
      <div
        class="cell"
        v-for="(item, index) in moreTabList"
        :key="index"
        @click="moreItemHandle(item)"
      >
        <img class="icon" :src="item.icon" />
        <div class="info-wrapper">
          <div class="left">
            {{ item.label }}
          </div>
          <div class="right">
            <img
              class="icon"
              :src="require('@/assets/svg/icon-cell-arrow-right.svg')"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";

let moreTabList = ref([
  {
    icon: require("@/assets/svg/icon-website.svg"),
    label: "Official Website",
    href: "https://denet.me",
  },
  {
    icon: require("@/assets/svg/icon-twitter.svg"),
    label: "Twitter",
    href: "https://twitter.com/denet2022",
  },
  {
    icon: require("@/assets/svg/icon-discord.svg"),
    label: "Discord",
    href: "https://discord.gg/wZSz9p8ddG",
  },
  {
      icon: require("@/assets/svg/icon-telegram.svg"),
      label: "Telegram",
      href: 'https://t.me/denetpro'
  }
]);

const moreItemHandle = (params) => {
  window.open(params.href);
};
</script>

<style scoped lang="scss">
.more-page {
  background: #f6f6f6;
  width: 100%;
  height: 100%;
  overflow: auto;
  margin-top: 1px;

  .more-list {
    background: #fff;
    margin-top: 10px;

    .cell {
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 56px;
      box-sizing: border-box;
      padding: 0 16px;

      .icon {
        width: 40px;
        height: 40px;
        border-radius: 50%;
      }

      .info-wrapper {
        flex: 1;
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-sizing: border-box;
        margin-left: 13px;

        .left {
          font-size: 14px;
          .time {
            color: #b0b0b0;
          }
        }

        .right {
          display: flex;
          align-items: center;
          cursor: pointer;

          .icon {
            width: 18px;
            height: 24px;
          }
        }
      }
    }
  }
}
</style>