1

c701a547 · lei · 7c606977 · c701a547 · c701a547 · c701a547
Commit c701a547 authored Feb 23, 2023 by lei
9 changed files
--- a/components/SwitchLanguage.vue
+++ b/components/SwitchLanguage.vue
 <template>
-  <div class="">
+  <div class="custom-chose-lang">
    <t-select
      class="language-select"
      :bordered="true"
@@ -37,7 +37,8 @@ const changeLanguage = (v: string) => {
 </script>
 <style lang="less" scoped>
-.language-select {
+.custom-chose-lang {
+  .language-select {
    margin-right: 16px;
    width: 108px;
    display: flex;
@@ -48,5 +49,6 @@ const changeLanguage = (v: string) => {
      font-size: 15px;
      font-family: "bold";
    }
+  }
 }
 </style>
--- a/style/reset.css
+++ b/style/reset.css
@@ -4,7 +4,7 @@ body {
  padding: 0;
  margin: 0;
 }
-html {
+/* html {
  font-size: 14px;
 }
 @media screen and (max-width: 1550px) {
@@ -24,15 +24,7 @@ html {
  .token-page-wrapper {
    flex: 1;
  }
-  .filter-block-wrapper {
-    /* transform: scale(0.8);
-    transform-origin: 0 0;
-    height: 290px; */
-  }
-  /* 右侧 */
  .home-wrapper .right-detail-wrapper {
-    /* transform: scale(0.8);
-    transform-origin: 0 0; */
    width: 320px !important;
    height: calc((100vh - 70px) * 1.25);
    flex: none;
@@ -47,4 +39,7 @@ html {
  }
  .right-body-scroll .right-body {
  }
-}
+  .custom-search-drawer .t-drawer__content-wrapper {
+    zoom: 0.8;
+  }
+} */
--- a/views/CustomComponent/select/index.vue
+++ b/views/CustomComponent/select/index.vue
+<template>
+  <div
+    class="t-select"
+    :style="{ width: width }"
+    v-clickOutside
+    :class="{ 't-select-Selected-class': postionShow }"
+  >
+    <slot name="prefix"></slot>
+    <input type="text" :placeholder="placeholder" readonly :value="selectVal" />
+    <!-- 上下旋转的箭头 -->
+    <span class="ChevronDown-box" ref="ChevronDown">
+      <ChevronDownIcon class="icon" />
+    </span>
+    <transition name="select-fade">
+      <div
+        class="t-position-box"
+        :style="{ maxHeight: positionMaxHeight }"
+        v-show="postionShow"
+      >
+        <li
+          v-for="(item, index) in options"
+          :key="item"
+          class="item-li"
+          @click.stop="change(item, index)"
+          :class="{ active: selectVal === item[filedLabel] }"
+        >
+          <span>{{ item[filedLabel] }}</span>
+        </li>
+      </div>
+    </transition>
+  </div>
+</template>
+<script lang="tsx" setup>
+import { ref } from "@vue/reactivity";
+import { ChevronDownIcon } from "tdesign-icons-vue-next";
+import { nextTick, onMounted } from "vue";
+// props
+const props = defineProps({
+  options: {
+    type: Array,
+    default: () => [],
+  },
+  filedLabel: {
+    type: String,
+    default: "label",
+  },
+  filedValue: {
+    type: String,
+    default: "value",
+  },
+  placeholder: {
+    type: String,
+    default: "请选择",
+  },
+  value: {
+    type: String,
+  },
+  width: {
+    type: String,
+    default: "120px",
+  },
+});
+const emit = defineEmits(["change", "update:value"]);
+const postionShow = ref(false);
+let DefaultLabel = props.options.find(
+  (item: any) => item.value === props.value
+);
+const selectVal = ref(DefaultLabel.label);
+const ChevronDown: any = ref(null);
+const thisEl: any = ref(null);
+// dom元素
+const domCl = ref(null);
+// 下拉菜单最大高度
+const positionMaxHeight = ref("");
+const handler = (e: any) => {
+  if (thisEl.value.contains(e.target)) {
+    if (postionShow.value === true) {
+      postionShow.value = false;
+      if (ChevronDown.value) {
+        ChevronDown.value.children[0].classList.replace(
+          "t-fake-arrow--active",
+          "t-fake-arrow--remove"
+        );
+      }
+    } else {
+      postionShow.value = true;
+      // 给父盒子添加点击后的样式
+      // 给箭头添加旋转样式
+      ChevronDown.value.children[0].classList.remove("t-fake-arrow--remove");
+      ChevronDown.value.children[0].classList.toggle("t-fake-arrow--active");
+    }
+  } else {
+    postionShow.value = false;
+    ChevronDown.value.children[0].classList.replace(
+      "t-fake-arrow--active",
+      "t-fake-arrow--remove"
+    );
+  }
+};
+// 自定义指令
+const vClickOutside = {
+  beforeMount: (el: any) => {
+    thisEl.value = el;
+    // 计算出手机距离屏幕底部的距离，设为maxheight
+    domCl.value = el;
+    document.addEventListener("click", handler);
+  },
+  beforeUnmount: () => {
+    // 注销
+    document.removeEventListener("click", handler);
+  },
+};
+onMounted(() => {
+  nextTick(() => {
+    try {
+      if (domCl.value) {
+        let clientRect = domCl.value.getBoundingClientRect();
+        if (clientRect.height) {
+          positionMaxHeight.value =
+            document.documentElement.clientHeight -
+            clientRect.height -
+            clientRect.top -
+            document.documentElement.clientHeight * 0.08 -
+            24 +
+            "px";
+        }
+      }
+    } catch (e) {
+      console.log(e);
+    }
+  });
+});
+const change = (item, index) => {
+  selectVal.value = item.label;
+  postionShow.value = false;
+  emit("update:value", item[props.filedValue]);
+  emit("change", item[props.filedValue], index);
+};
+</script>
+<style lang="less" scoped>
+@import "@/style/flex.less";
+.t-select {
+  width: 120px;
+  height: 32px;
+  position: relative;
+  .dja();
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  transition: all 0.3s;
+  input {
+    border: none;
+    border-radius: 4px;
+    outline: none;
+    width: 100%;
+    box-sizing: border-box;
+    line-height: inherit;
+    flex: 1;
+    padding: 0;
+    text-align: center;
+    font-size: 12px;
+    background: transparent;
+    color: black;
+  }
+  // 旋转的箭头
+  .ChevronDown-box {
+    font-size: 16px;
+    .icon {
+      width: 18px;
+      height: 18px;
+      color: var(--home-page-color-19);
+      margin-bottom: 2px;
+      margin-right: 8px;
+    }
+    // 旋转样式
+    .t-fake-arrow--active {
+      animation: customAnimation1 400ms;
+      animation-fill-mode: forwards;
+    }
+    @keyframes customAnimation1 {
+      from {
+        transform: rotate(0deg);
+      }
+      to {
+        transform: rotate(180deg);
+      }
+    }
+    //点击恢复转动的样式：
+    .t-fake-arrow--remove {
+      animation: customAnimation2 500ms;
+      animation-fill-mode: forwards;
+    }
+    @keyframes customAnimation2 {
+      from {
+        transform: rotate(180deg);
+      }
+      to {
+        transform: rotate(0deg);
+      }
+    }
+  }
+  .t-position-box {
+    box-sizing: border-box;
+    width: 100%;
+    height: auto;
+    overflow: hidden;
+    position: absolute;
+    top: 40px;
+    box-shadow: 0 2px 16px 0 rgba(0, 0, 0, 0.1);
+    z-index: 1000;
+    background: var(--custom-body-back-color);
+    border-radius: 4px;
+    overflow-y: auto;
+    border: 1px solid var(--home-page-color-19);
+    li {
+      height: 32px;
+      display: flex;
+      align-items: center;
+      font-size: 12px;
+      border-bottom: 1px solid var(--home-page-color-19);
+      color: var(--home-page-color-1);
+      .dja();
+      span {
+        .icon {
+          width: 20px;
+          height: 20px;
+        }
+      }
+    }
+    .active {
+      color: var(--home-page-color-19);
+    }
+  }
+}
+// select选中后的样式
+.t-select-Selected-class {
+  border: 1px solid var(--theme-color20);
+  box-shadow: 0px 0px 5px var(--theme-color20);
+  transition: all 0.3s;
+  .ChevronDown-box {
+    .icon {
+      color: var(--theme-color20) !important;
+    }
+  }
+}
+//内容打开动画
+.select-fade-enter-active {
+  transition: all 0.15s ease-out;
+}
+.select-fade-leave-active {
+  transition: all 0.15s cubic-bezier(1, 0.5, 0.8, 1);
+}
+.select-fade-enter-from,
+.select-fade-leave-to {
+  transform: translateY(-6px);
+  opacity: 0;
+}
+</style>
--- a/views/layout/searchList.vue
+++ b/views/layout/searchList.vue
@@ -8,7 +8,7 @@
        ></TokenAvatar>
      </template>
      <template v-else>
-        <DefaultAvatar :value="item.tn"></DefaultAvatar>
+        <DefaultAvatar :value="item.name"></DefaultAvatar>
      </template>
    </div>
    <div class="token-information">
@@ -68,24 +68,24 @@
 </template>
 <script lang="ts" setup>
-import * as Cache from '@/utils/cache';
+import * as Cache from "@/utils/cache";
-import { StarIcon, StarFilledIcon } from 'tdesign-icons-vue-next';
+import { StarIcon, StarFilledIcon } from "tdesign-icons-vue-next";
-import JumpOther from '/views/token/JumpOther.vue';
+import JumpOther from "/views/token/JumpOther.vue";
-import analysisSvg from '/public/images/svg/table/media.svg';
+import analysisSvg from "/public/images/svg/table/media.svg";
-import KLink from '/public/images/svg/table/k_link.svg';
+import KLink from "/public/images/svg/table/k_link.svg";
-import TokenAvatar from '@/views/token/tokenAvatar.vue';
+import TokenAvatar from "@/views/token/tokenAvatar.vue";
-import DefaultAvatar from '@/views/token/avatar.vue';
+import DefaultAvatar from "@/views/token/avatar.vue";
-import CollectionSvg2 from '/public/images/svg/rightDetail/colection2.svg';
+import CollectionSvg2 from "/public/images/svg/rightDetail/colection2.svg";
-import CollectionSvg3 from '/public/images/svg/rightDetail/collection-yes.svg';
+import CollectionSvg3 from "/public/images/svg/rightDetail/collection-yes.svg";
 import {
  chain_options,
  filterChainObj,
  getSwap,
-} from '@/constants/UnifiedManagementChain';
+} from "@/constants/UnifiedManagementChain";
-import useSwap from '@/hooks/useSwap';
+import useSwap from "@/hooks/useSwap";
 const { ChainObj, getCurSwap, getCurChainImg } = useSwap();
 const chain = useChain();
-ChainObj.value = filterChainObj('value', chain.value);
+ChainObj.value = filterChainObj("value", chain.value);
 const props = withDefaults(
  defineProps<{
    options: any[];
@@ -104,7 +104,7 @@ const goDetail = (row) => {
 };
 const collectData = (item) => {
  let chain_id = item.chainId;
-  let obj = filterChainObj('chain_id', chain_id);
+  let obj = filterChainObj("chain_id", chain_id);
  if (item.isStar) {
    Cache.deleteCollection([
      {
@@ -128,17 +128,17 @@ const onCustomClick = (item: any) => {
 // 监听正负改变颜色
 const monitor = (item) => {
-  if (item[0] === '-') {
+  if (item[0] === "-") {
-    return '#f85260';
+    return "#f85260";
  } else {
-    return '#23ab94';
+    return "#23ab94";
  }
 };
 </script>
 <style lang="less">
-@import '@/style/variables.less';
+@import "@/style/variables.less";
-@import '@/style/flex.less';
+@import "@/style/flex.less";
 .total-token-info {
  position: relative;
  width: 98%;
@@ -171,7 +171,7 @@ const monitor = (item) => {
      width: 70%;
      :nth-child(1) {
        color: @td-search-btn-back-1;
-        font-family: 'Regular';
+        font-family: "Regular";
      }
      :nth-child(2) {
        overflow: hidden;
@@ -182,7 +182,7 @@ const monitor = (item) => {
      }
      & > :not(:first-child) {
        font-weight: bold;
-        font-family: 'Medium';
+        font-family: "Medium";
      }
    }
    .price-and-time {
@@ -193,11 +193,11 @@ const monitor = (item) => {
      .token {
        :nth-child(1) {
          color: @td-search-btn-back-1;
-          font-family: 'Regular';
+          font-family: "Regular";
        }
        :nth-child(2) {
          font-weight: bold;
-          font-family: 'Medium';
+          font-family: "Medium";
        }
      }
      .not_first {

--- a/views/token/CustomTokenList.vue
+++ b/views/token/CustomTokenList.vue
@@ -844,7 +844,7 @@ for (let i = 0; i < arr1.length; i++) {
  .custom-affixed-head {
    position: fixed;
    z-index: 200;
-    height: 90px;
+    height: 114px;
    overflow-y: auto;
    -ms-overflow-style: none;
    overflow: -moz-scrollbars-none;
@@ -901,7 +901,7 @@ for (let i = 0; i < arr1.length; i++) {
              font-size: 14px;
              font-family: "Medium";
              border-bottom: 1px solid var(--new-border-4);
-              padding: 10px 12px;
+              padding: 20px 12px;
              .thead-sort-box {
                .dja();
                cursor: pointer;
@@ -966,7 +966,7 @@ for (let i = 0; i < arr1.length; i++) {
            font-size: 14px;
            font-family: "Medium";
            border-bottom: 1px solid var(--new-border-4);
-            padding: 10px 12px;
+            padding: 20px 12px;
            .thead-sort-box {
              .dja();
              cursor: pointer;
@@ -990,7 +990,7 @@ for (let i = 0; i < arr1.length; i++) {
            border-bottom: 1px solid var(--new-border-3);
            background: var(--new-background-5);
            font-family: "Regular";
-            padding: 10px 12px;
+            padding: 16px 12px;
            .custom-no-list {
              .dja();
              height: 160px;

--- a/views/token/FilterTips.vue
+++ b/views/token/FilterTips.vue
@@ -23,8 +23,8 @@
 </template>
 <script lang="ts" setup>
-import request from '@/utils/request';
+import request from "@/utils/request";
-const swiperType = ref('default');
+const swiperType = ref("default");
 const picList = reactive({
  list: [],
 });
@@ -35,7 +35,7 @@ const goDetail = (item: any) => {
 };
 const getPicList = async () => {
  try {
-    let res: any = await request.get('/v1/picture');
+    let res: any = await request.get("/v1/picture");
    picList.list = res;
    if (picList.list.length == 1) {
      picList.list = picList.list.concat(picList.list);
@@ -49,7 +49,7 @@ const WatchWindow = () => {
  let windowDom = document.documentElement.clientWidth;
  if (windowDom > 1955) {
    // 使用卡片模式
-    swiperType.value = 'card';
+    swiperType.value = "card";
  }
 };
 onMounted(() => {
@@ -61,7 +61,7 @@ onMounted(() => {
 </script>
 <style lang="less">
-@import '@/style/flex.less';
+@import "@/style/flex.less";
 .Advertisement-box {
  flex: 1;
  padding-left: 6px;
@@ -74,7 +74,7 @@ onMounted(() => {
      height: 100%;
      width: 100%;
      .img {
-        height: 349px;
+        height: 314px;
        max-width: 500px;
        border-radius: 12px;
        cursor: pointer;
@@ -97,7 +97,7 @@ onMounted(() => {
        img {
          border-radius: 12px;
          cursor: pointer;
-          height: 349px;
+          height: 314px;
          max-width: 100%;
          min-width: 500px;
        }

--- a/views/token/TokenFilter.vue
+++ b/views/token/TokenFilter.vue
@@ -557,7 +557,7 @@ watch(formData, (v) => {
      .custom-form-item {
        min-height: auto;
        padding: 0;
-        height: 3rem;
+        height: 37px;
        background: var(--td--right-back-color-2);
        .da();
        position: relative;

--- a/views/token/avatar.vue
+++ b/views/token/avatar.vue
 <template>
-  <div class="avatar-icon">
+  <div
+    class="avatar-icon"
+    :style="{
+      width: width,
+      height: height,
+    }"
+  >
    {{ getTokenInitials() }}
  </div>
 </template>
 <script lang="ts" setup>
-const props = defineProps<{
+const props = withDefaults(
+  defineProps<{
    value: string;
-}>();
+    width?: string;
+    height?: string;
+  }>(),
+  {
+    width: "30px",
+    height: "30px",
+  }
+);
 // 获取token首字母
 const getTokenInitials = () => {
  const { value } = props;
  if (value) {
    return value[0];
  }
-  return '';
+  return "";
 };
 </script>
 <style lang="less">
-@import '@/style/flex.less';
+@import "@/style/flex.less";
 .avatar-icon {
-  width: 30px;
-  height: 30px;
  border-radius: 50%;
  background: #5f6e78;
  color: white;
  .dja();
  font-weight: 500;
  font-size: 17px;
-  font-family: 'Medium';
+  font-family: "Medium";
  margin-right: 12px;
 }
 </style>
--- a/views/token/rightDetailHeader.vue
+++ b/views/token/rightDetailHeader.vue
@@ -5,12 +5,21 @@
        <div class="pro-tokeninfo-header">
          <div class="left-token-name">
            <div class="token-name-child">
+              <template v-if="getImg">
                <img :src="getImg" alt="swap" />
+              </template>
+              <template v-else>
+                <AvatarVue
+                  :value="tokenInfo.name"
+                  width="38px"
+                  height="38px"
+                ></AvatarVue>
+              </template>
              <span class="title">{{ tokenInfo.symbol }}</span>
            </div>
            <div class="address-info">
              <span class="address-info-item">
-                <span>{{ $t('TableList.token') }}</span>
+                <span>{{ $t("TableList.token") }}</span>
                <span class="address">：{{ tokenInfo.tokenSub }}</span>
                <span @click="doCopy(tokenInfo.token)">
                  <CopySvg></CopySvg>
@@ -19,7 +28,7 @@
            </div>
            <div class="address-info margin">
              <span class="address-info-item">
-                <span>{{ $t('TableList.pool') }}</span>
+                <span>{{ $t("TableList.pool") }}</span>
                <span class="address">：{{ tokenInfo.tbnameSub }}</span>
                <span @click="doCopy(tokenInfo.n_tb)">
                  <CopySvg></CopySvg>
@@ -66,14 +75,15 @@
 </template>
 <script lang="ts" setup>
-import { defineComponent, computed } from 'vue';
+import { defineComponent, computed } from "vue";
-import { useI18n } from 'vue-i18n';
+import { useI18n } from "vue-i18n";
-import CopySvg from '/public/images/svg/rightDetail/copy.svg';
+import CopySvg from "/public/images/svg/rightDetail/copy.svg";
-import useCopy from '@/hooks/useCopy';
+import useCopy from "@/hooks/useCopy";
-import * as Cache from '@/utils/cache';
+import * as Cache from "@/utils/cache";
-import CollectionSvg2 from '/public/images/svg/rightDetail/colection2.svg';
+import CollectionSvg2 from "/public/images/svg/rightDetail/colection2.svg";
-import CollectionSvg3 from '/public/images/svg/rightDetail/collection-yes.svg';
+import CollectionSvg3 from "/public/images/svg/rightDetail/collection-yes.svg";
-import { parseCoinAmount } from '@/utils/tool';
+import { parseCoinAmount } from "@/utils/tool";
+import AvatarVue from "./avatar.vue";
 const props = defineProps<{
  tokenInfo: any;
  numR24h: string;
@@ -82,7 +92,7 @@ const props = defineProps<{
  tb: string;
  currentPath: string;
 }>();
-const emit = defineEmits(['update:isInCollection']);
+const emit = defineEmits(["update:isInCollection"]);
 const { t } = useI18n();
 // 收藏表格是否更新
 const CollectionCl = CollectionChange();
@@ -91,19 +101,19 @@ const getPrice = () => {
  try {
    const { tokenInfo } = props;
    if (tokenInfo) {
-      if ('up' in tokenInfo) {
+      if ("up" in tokenInfo) {
        let up = parseCoinAmount(tokenInfo.up);
-        if (up.indexOf('{') !== -1) {
+        if (up.indexOf("{") !== -1) {
          up = up.slice(0, up.length - 2);
        }
        return up;
      } else {
-        return '';
+        return "";
      }
    }
  } catch (e) {
    console.log(e);
-    return '';
+    return "";
  }
 };
 const collectData = () => {
@@ -116,24 +126,24 @@ const collectData = () => {
        },
      ]);
    }
-    emit('update:isInCollection', false);
+    emit("update:isInCollection", false);
  } else {
    Cache.setCollection({
      hash: tb,
      symbol: tokenInfo.symbol,
      path: currentPath,
    });
-    emit('update:isInCollection', true);
+    emit("update:isInCollection", true);
  }
  // 通知select中的收藏数据更新
  CollectionCl.value += 1;
 };
 const r24hColor = () => {
  if (props.r24h) {
-    if (props.r24h[0] === '-') {
+    if (props.r24h[0] === "-") {
-      return '#f85260';
+      return "#f85260";
    } else {
-      return '#23ab94';
+      return "#23ab94";
    }
  }
 };
@@ -141,21 +151,21 @@ const getImg = computed(() => {
  const { tokenInfo } = props;
  try {
    if (Object.keys(tokenInfo).length) {
-      if ('chat' in tokenInfo) {
+      if ("chat" in tokenInfo) {
        return tokenInfo.chat.img;
      } else {
-        return '/images/img/default-avatar.png';
+        return "";
      }
    }
  } catch (e) {
    console.log(e);
-    return '/images/img/default-avatar.png';
+    return "";
  }
 });
 </script>
 <style lang="less">
-@import '@/style/flex.less';
+@import "@/style/flex.less";
 .header-token-box {
  margin-top: -1px;
  box-sizing: border-box;
@@ -198,7 +208,7 @@ const getImg = computed(() => {
            overflow-x: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
-            font-family: 'bold';
+            font-family: "bold";
          }
          img {
            width: 38px;
@@ -209,11 +219,14 @@ const getImg = computed(() => {
          :not(:first-child) {
            margin-left: 10px;
          }
+          .avatar-icon {
+            margin-right: 0;
+          }
        }
        .address-info {
          display: flex;
          color: var(--new-color-7);
-          font-family: 'Regular';
+          font-family: "Regular";
          margin-top: 1px;
          .address-info-item {
            font-size: var(--font-size);
@@ -246,7 +259,7 @@ const getImg = computed(() => {
            font-weight: 700;
            font-size: 28px;
            min-height: 50px;
-            font-family: 'bold';
+            font-family: "bold";
            color: var(--td-Search-info-color-1);
          }
          .r24h-cl {
@@ -254,7 +267,7 @@ const getImg = computed(() => {
            font-weight: normal;
            margin-top: -3px;
            text-align: right;
-            font-family: 'Medium';
+            font-family: "Medium";
          }
        }
        .kline-btn {