显示

src/App.vue

@@ -20,8 +20,9 @@ export default {
   border: none;
   font-size: 16px;
 }
-body {
-  background: #11131b !important;
+html,body,#app {
+  height: 100%;
+  background: #282b39 !important;
 }
 .ant-card-body {
   padding: 15px !important;
@@ -33,4 +34,35 @@ body {
   -khtml-user-select: none; /*低版本浏览器*/
   user-select: none; /*其中 user-select 的参数值 none 表示不能选中文本，而 text 则表示可以选择文本*/
 }
+::-webkit-scrollbar {  /* 滚动条整体部分 */
+      width:5px;
+      margin-right:2px
+  }
+  ::-webkit-scrollbar-button { /* 滚动条两端的按钮 */
+      width:5px;
+      background-color: #807e7e;
+  }
+  ::-webkit-scrollbar:horizontal {
+      height:10px;
+      margin-bottom:2px
+  }
+  ::-webkit-scrollbar-track {  /* 外层轨道 */
+      border-radius: 10px;
+  }
+  ::-webkit-scrollbar-track-piece {  /*内层轨道，滚动条中间部分 */
+      background-color: #333333;
+      border-radius: 10px;
+  }
+  ::-webkit-scrollbar-thumb {  /* 滑块 */
+      width:10px;
+      border-radius: 5px;
+      background: #CBCBCB;
+  }
+  ::-webkit-scrollbar-corner { /* 边角 */
+      width: 10px;
+      background-color: red;
+  }
+  ::-webkit-scrollbar-thumb:hover { /* 鼠标移入滑块 */
+      background: #909090;
+  }
 </style>

src/components/DashBoard.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="dashboard">
+    <h2 style="color: #fff; text-align: center;">Dashboard</h2>
+  </div>
+</template>
+<script>
+import { defineComponent } from "vue";
+export default defineComponent({
+  setup() {
+    return {}
+  },
+});
+</script>

src/components/Layout.vue

@@ -1,11 +1,27 @@
 <template>
-  <a-layout>
-    <a-layout-header
-      class="header header1"
-      style="background: #11131b; padding: 0 10px"
-    >
-      <div class="logo">
-        <img style="width: 65px" src="../assets/logo.png" alt="" />
+  <div class="wrap">
+    <header class="header header1">
+      <div class="d-flex">
+        <div class="logo">
+          <img style="width: 65px" src="../assets/logo.png" alt="" />
+        </div>
+        <a-menu
+          style="background: #11131b"
+          mode="horizontal"
+          v-model:selectedKeys="selectedKey"
+          :style="{ lineHeight: '64px' }"
+        >
+          <a-menu-item key="1" class="menu-item">
+            <template #icon>
+              <AppstoreAddOutlined />
+            </template>
+            Dashboard</a-menu-item
+          >
+          <a-menu-item key="2" class="menu-item"
+            ><template #icon> <AppstoreAddOutlined /> </template
+            >Marketplace</a-menu-item
+          >
+        </a-menu>
       </div>
       <div class="logout">
         <a-button type="primary" pre-icon size="large">
@@ -15,110 +31,178 @@
           logout
         </a-button>
       </div>
-      <a-menu
-        style="background: #11131b"
-        mode="horizontal"
-        v-model:selectedKeys="selectedKey"
-        :style="{ lineHeight: '64px' }"
-      >
-        <a-menu-item key="1" class="menu-item">
-          <template #icon>
-            <AppstoreAddOutlined />
-          </template>
-          Dashboard</a-menu-item
-        >
-        <a-menu-item key="2" class="menu-item"
-          ><template #icon> <AppstoreAddOutlined /> </template
-          >Marketplace</a-menu-item
-        >
-      </a-menu>
-    </a-layout-header>
-    <a-layout-header
-      class="header header2"
-      style="padding: 0 1px; background: #242735"
-    >
-      <div
-        style="background: #242735"
-        mode="horizontal"
-        :style="{
-          lineHeight: '64px',
-          display: 'flex',
-        }"
+    </header>
+    <div v-if="selectedKey[0] === '1'">
+      <DashBoard />
+    </div>
+    <a-layout v-if="selectedKey[0] === '2'">
+      <a-layout-header
+        class="header header2"
+        style="padding: 0 1px; background: #242735"
       >
         <div
-          class="tab-item"
-          :class="current_tab === item.id ? 'tab-item-selected' : ''"
-          v-for="item in tabs"
-          :key="item.id"
-          @click="handleTab(item.id)"
-        >
-          <img width="24" :src="item.img" alt="" />
-          <span>{{ item.name }}</span>
-        </div>
-      </div>
-    </a-layout-header>
-    <a-layout style="border-top: 1px solid #3a3f50;">
-      <a-layout-sider width="220" style="background: #242735">
-        <!-- <a-menu
-          mode="inline"
-          v-model:selectedKeys="selectedKeys2"
-          v-model:openKeys="openKeys"
-          :style="{ height: '100%', borderRight: 0, background: '#242735', }"
-        >
-          <a-sub-menu key="sub1">
-            <template #title>
-              <span>
-                <user-outlined />
-                subnav 1
-              </span>
-            </template>
-            <a-menu-item key="1">option1</a-menu-item>
-            <a-menu-item key="2">option2</a-menu-item>
-            <a-menu-item key="3">option3</a-menu-item>
-            <a-menu-item key="4">option4</a-menu-item>
-          </a-sub-menu>
-          <a-sub-menu key="sub2">
-            <template #title>
-              <span>
-                <laptop-outlined />
-                subnav 2
-              </span>
-            </template>
-            <a-menu-item key="5">option5</a-menu-item>
-            <a-menu-item key="6">option6</a-menu-item>
-            <a-menu-item key="7">option7</a-menu-item>
-            <a-menu-item key="8">option8</a-menu-item>
-          </a-sub-menu>
-          <a-sub-menu key="sub3">
-            <template #title>
-              <span>
-                <notification-outlined />
-                subnav 3
-              </span>
-            </template>
-            <a-menu-item key="9">option9</a-menu-item>
-            <a-menu-item key="10">option10</a-menu-item>
-            <a-menu-item key="11">option11</a-menu-item>
-            <a-menu-item key="12">option12</a-menu-item>
-          </a-sub-menu>
-        </a-menu> -->
-      </a-layout-sider>
-      <a-layout
-        style="border-left: 1px solid #3a3f50;"
-      >
-        <a-layout-content
+          style="background: #242735"
+          mode="horizontal"
           :style="{
-            background: '#282b39',
-            padding: '24px',
-            margin: 0,
-            minHeight: '280px',
+            lineHeight: '64px',
+            display: 'flex',
           }"
         >
-          <Main />
-        </a-layout-content>
+          <div
+            class="tab-item"
+            :class="current_tab === item.id ? 'tab-item-selected' : ''"
+            v-for="item in tabs"
+            :key="item.id"
+            @click="handleTab(item.id)"
+          >
+            <img width="24" :src="item.img" alt="" />
+            <span>{{ item.name }}</span>
+          </div>
+        </div>
+      </a-layout-header>
+      <a-layout style="border-top: 1px solid #3a3f50">
+        <a-layout-sider class="slider" width="220" style="background: #242735">
+          <h2 class="slider-title">
+            <div>
+              <span
+                style="
+                  display: inline-block;
+                  margin: 0 10px;
+                  font-size: 20px;
+                  color: #fff;
+                "
+                >Filter</span
+              >
+              <span style="font-size: 15px; color: #046cfc">Reset</span>
+            </div>
+            <div style="color: #6b7185">
+              <img width="16" src="../assets/heart-full.png" alt="" />
+            </div>
+          </h2>
+          <a-menu
+            mode="inline"
+            theme="dark"
+            :inline-collapsed="collapsed"
+            v-model:openKeys="openKeys"
+            v-model:selectedKeys="selectedKeys"
+          >
+            <a-sub-menu key="sub1">
+              <template #title>
+                <div style="display: flex; justify-content: space-between">
+                  <p>Class</p>
+                  <p
+                    v-if="selected_btn.length"
+                    style="
+                      display: flex;
+                      width: 20px;
+                      height: 20px;
+                      font-weight: 500;
+                      font-size: 12px;
+                      line-height: 20px;
+                      padding: 2px;
+                      background: #3082f2;
+                      border-radius: 50%;
+                      justify-content: center;
+                      align-items: center;
+                      position: relative;
+                      top: 8px;
+                    "
+                  >
+                    {{ selected_btn.length }}
+                  </p>
+                </div>
+              </template>
+              <!-- <a-menu-item key="5"> -->
+              <div class="menu-btn">
+                <a-button
+                  :class="selected_btn.includes(1) ? 'ant-btn-selected' : ''"
+                  @click="handleMenuBtn(1)"
+                  >Beast</a-button
+                >
+                <a-button
+                  :class="selected_btn.includes(2) ? 'ant-btn-selected' : ''"
+                  @click="handleMenuBtn(2)"
+                  >Aquatic</a-button
+                >
+                <a-button
+                  :class="selected_btn.includes(3) ? 'ant-btn-selected' : ''"
+                  @click="handleMenuBtn(3)"
+                  >Plant</a-button
+                >
+              </div>
+              <div class="menu-btn">
+                <a-button
+                  :class="selected_btn.includes(4) ? 'ant-btn-selected' : ''"
+                  @click="handleMenuBtn(4)"
+                  >Bug</a-button
+                >
+                <a-button
+                  :class="selected_btn.includes(5) ? 'ant-btn-selected' : ''"
+                  @click="handleMenuBtn(5)"
+                  >Bird</a-button
+                >
+                <a-button
+                  :class="selected_btn.includes(6) ? 'ant-btn-selected' : ''"
+                  @click="handleMenuBtn(6)"
+                  >Reptile</a-button
+                >
+                <a-button
+                  :class="selected_btn.includes(7) ? 'ant-btn-selected' : ''"
+                  @click="handleMenuBtn(7)"
+                  >Mech</a-button
+                >
+                <a-button
+                  :class="selected_btn.includes(8) ? 'ant-btn-selected' : ''"
+                  @click="handleMenuBtn(8)"
+                  >Dawn</a-button
+                >
+                <a-button
+                  :class="selected_btn.includes(9) ? 'ant-btn-selected' : ''"
+                  @click="handleMenuBtn(9)"
+                  >Dusk</a-button
+                >
+              </div>
+              <!-- </a-menu-item> -->
+              <!-- <a-menu-item key="6">Option 6</a-menu-item>
+            <a-menu-item key="7">Option 7</a-menu-item>
+            <a-menu-item key="8">Option 8</a-menu-item> -->
+            </a-sub-menu>
+            <a-sub-menu key="sub2">
+              <template #title>Parts</template>
+              <div style="margin: 10px">
+                <a-input
+                  placeholder="Search parts and abilities"
+                  v-model:value="parts"
+                >
+                  <template #prefix>
+                    <SearchOutlined :style="{ color: '#fff' }" />
+                  </template>
+                </a-input>
+              </div>
+            </a-sub-menu>
+            <a-sub-menu key="sub3">
+              <template #title>Purity </template>
+              <div style="margin: 10px">
+                <a-slider id="test" :min="0" :max="20" />
+              </div>
+            </a-sub-menu>
+          </a-menu>
+        </a-layout-sider>
+        <a-layout style="border-left: 1px solid #3a3f50">
+          <a-layout-content
+            :style="{
+              background: '#282b39',
+              padding: '24px',
+              margin: 0,
+              minHeight: '280px',
+            }"
+          >
+            <Main />
+          </a-layout-content>
+        </a-layout>
       </a-layout>
     </a-layout>
-  </a-layout>
+  </div>
 </template>
 <script>
 import {
@@ -127,9 +211,11 @@ import {
   // NotificationOutlined,
   LogoutOutlined,
   AppstoreAddOutlined,
+  SearchOutlined,
 } from "@ant-design/icons-vue";
-import { defineComponent, ref, watch } from "vue";
+import { defineComponent, ref, unref, watch } from "vue";
 import Main from "./Main.vue";
+import DashBoard from "./DashBoard.vue";
 export default defineComponent({
   components: {
     // UserOutlined,
@@ -137,13 +223,16 @@ export default defineComponent({
     // NotificationOutlined,
     LogoutOutlined,
     AppstoreAddOutlined,
+    SearchOutlined,
     Main,
+    DashBoard,
   },
 
   setup() {
     const tabs = ref([]);
     const current_tab = ref(1);
-    const selectedKey = ref(['1'])
+    const selected_btn = ref([]);
+    const selectedKey = ref(["2"]);
     tabs.value = [
       { id: 1, name: "Axies", img: require("../assets/tabs/tab-axie.png") },
       { id: 2, name: "Land", img: require("../assets/tabs/tab-land.png") },
@@ -152,48 +241,99 @@ export default defineComponent({
     ];
 
     // 监听menu
-    
-      watch(
-        () => selectedKey.value,
-        (v) => {
-          console.log(`v`, v)
-        }
-      );
+
+    watch(
+      () => selectedKey.value,
+      (v) => {
+        console.log(`v`, v);
+      }
+    );
     function handleTab(id) {
       current_tab.value = id;
     }
+    function handleMenuBtn(id) {
+      if (!unref(selected_btn).includes(id)) {
+        selected_btn.value.push(id);
+      } else {
+        selected_btn.value.splice(
+          selected_btn.value.findIndex((item) => item === id),
+          1
+        );
+      }
+    }
     return {
       tabs,
       current_tab,
+      selected_btn,
       selectedKey,
       selectedKeys2: ref(["1"]),
       collapsed: ref(false),
       openKeys: ref(["sub1"]),
       handleTab,
+      handleMenuBtn,
     };
   },
 });
 </script>
 <style>
+.wrap {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+/* ------- header ------ */
+.d-flex {
+  display: flex;
+}
 .header .logo {
-  float: left;
   width: 120px;
-  /* height: 31px; */
-  /* margin: 16px 24px 16px 0; */
-  /* background: rgba(255, 255, 255, 0.3); */
+  display: flex;
+  align-items: center;
 }
 .header .logout {
-  float: right;
   width: 120px;
-  /* height: 31px;
-  margin: 16px 24px 16px 0;
-  background: rgba(255, 255, 255, 0.3); */
+  display: flex;
+  align-items: center;
+}
+.header1 {
+  display: flex;
+  justify-content: space-between;
+  background: #11131b;
+  padding: 0 10px;
+}
+
+.header1 .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item:hover::after,
+.header1
+  .ant-menu-horizontal:not(.ant-menu-dark)
+  > .ant-menu-submenu:hover::after,
+.header1
+  .ant-menu-horizontal:not(.ant-menu-dark)
+  > .ant-menu-item-active::after,
+.header1
+  .ant-menu-horizontal:not(.ant-menu-dark)
+  > .ant-menu-submenu-active::after,
+.header1 .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item-open::after,
+.header1
+  .ant-menu-horizontal:not(.ant-menu-dark)
+  > .ant-menu-submenu-open::after,
+.header1
+  .ant-menu-horizontal:not(.ant-menu-dark)
+  > .ant-menu-item-selected::after,
+.header1
+  .ant-menu-horizontal:not(.ant-menu-dark)
+  > .ant-menu-submenu-selected::after {
+  border: #242735 !important;
+  background: #242735 !important;
+}
+
+.header1 .ant-menu-item-selected {
+  background: #242735 !important;
 }
+
 .ant-menu-horizontal {
   color: #fff !important;
   border-bottom: none !important;
 }
-
 .tab-item {
   width: 100px;
   height: 64px;
@@ -222,38 +362,55 @@ export default defineComponent({
   color: #fff !important;
 }
 
-.header1 .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item:hover::after,
-.header1
-  .ant-menu-horizontal:not(.ant-menu-dark)
-  > .ant-menu-submenu:hover::after,
-.header1
-  .ant-menu-horizontal:not(.ant-menu-dark)
-  > .ant-menu-item-active::after,
-.header1
-  .ant-menu-horizontal:not(.ant-menu-dark)
-  > .ant-menu-submenu-active::after,
-.header1 .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item-open::after,
-.header1
-  .ant-menu-horizontal:not(.ant-menu-dark)
-  > .ant-menu-submenu-open::after,
-.header1
-  .ant-menu-horizontal:not(.ant-menu-dark)
-  > .ant-menu-item-selected::after,
-.header1
-  .ant-menu-horizontal:not(.ant-menu-dark)
-  > .ant-menu-submenu-selected::after {
-  border: #242735 !important;
-  background: #242735 !important;
+/* -------------- header end ---------------------------- */
+
+/* -------------- slider ----------------------------- */
+.slider-title {
+  padding: 20px 15px;
+  display: flex;
+  justify-content: space-between;
+  border-bottom: 1px solid #3a3f50 !important;
 }
 
-.header1 .ant-menu-item-selected {
+.ant-menu.ant-menu-dark,
+.ant-menu-dark .ant-menu-sub,
+.ant-menu.ant-menu-dark .ant-menu-sub {
   background: #242735 !important;
 }
 
-/* .header .logo {
-  float: right;
-  margin: 16px 0 16px 24px;
-} */
+/* .ant-menu-dark.ant-menu-inline .ant-menu-item,*/
+.ant-menu-dark.ant-menu-inline .ant-menu-submenu-title {
+  border-bottom: 1px solid #3a3f50 !important;
+}
+
+.menu-btn .ant-btn {
+  margin: 5px !important;
+  color: #fff !important;
+  background: #3a3f50 !important;
+  border: none !important;
+}
+.menu-btn .ant-btn:hover {
+  background-color: #6b7185 !important;
+  color: #fff !important;
+}
+.menu-btn .ant-btn-selected {
+  background-color: #046cfc !important;
+}
+
+.slider .ant-input-affix-wrapper,
+.slider .ant-input {
+  /* padding: 0; */
+  background: #11131b;
+  border: 1px solid #3a3f50;
+  color: #fff;
+  border-radius: 4px;
+}
+
+.ant-tooltip-arrow-content,
+.ant-tooltip-inner {
+  background: #046cfc !important;
+}
+/* -------------- slider end ----------------------------- */
 
 .site-layout-background {
   background: #fff;

src/components/Main.vue

@@ -1,13 +1,22 @@
 <template>
   <div class="main">
     <div style="display: flex; justify-content: space-between; color: #fff">
-      <p style="font-size: 1.8rem">4389 Axies</p>
-      <div>
+      <p>
+        <span style="font-size: 1.8rem">4389 Axies</span>
+        <img
+          style="vertical-align: super; margin-left: 5px"
+          width="18"
+          src="../assets/heart.png"
+          alt=""
+        />
+        <!-- <img style="vertical-align: super; margin-left: 5px;" width="18" src="../assets/heart-full-red.png" alt=""> -->
+      </p>
+      <div class="action">
         <a-select
           dropdownClassName="select-dropdown"
           v-model:value="value"
           label-in-value
-          style="width: 120px"
+          style="width: 150px"
           :options="options"
           @change="handleChange"
         >
@@ -18,12 +27,12 @@
           style="margin-left: 10px; border-right: none !important"
         >
           <template #icon>
-            <LogoutOutlined :style="{ color: '#fff' }" />
+            <UnorderedListOutlined :style="{ color: '#fff' }" />
           </template>
         </a-button>
         <a-button pre-icon size="mini">
           <template #icon>
-            <LogoutOutlined :style="{ color: '#fff' }" />
+            <UnorderedListOutlined :style="{ color: '#fff' }" />
           </template>
         </a-button>
       </div>
@@ -36,32 +45,66 @@
           :key="item"
           style="margin: 5px 0"
         >
-          <a-card
-            style="
-              background-color: #282b39;
-              border: 1px solid #363b4b;
-              color: #fff;
-            "
-          >
+          <a-card class="card-item">
             <a-tag color="#6cc000">#60</a-tag>
             <a-tag color="#fe4c52">ORIGIN</a-tag>
-            <p>card content</p>
-            <p>card content</p>
+            <div style="margin: 5px 0 0 2px; font-size: 12px;">Axie #8584101</div>
+            <small style="color: #6b6665;">Breed count:2</small>
             <div style="width: 80%; margin: 0 auto">
               <img style="width: 100%" src="../assets/logo.png" alt="" />
             </div>
-            <p>card content</p>
+            <div style="height: 35px;line-height: 35px; text-align: center;">
+            <span style="font-size: 20px;">Ξ 0.016</span>
+            <span style="display: inline-block; margin-left: 5px; font-size: 14px;color: #a1a69a;">$54</span>
+            </div>
           </a-card>
         </a-col>
       </a-row>
+      <!-- 分页 -->
+      <div
+        class="Pagination"
+        style="display: flex; justify-content: space-around"
+      >
+        <div style="display: flex">
+          <a-button
+            pre-icon
+            size="large"
+            style="width: 65px"
+            @click="handleSub"
+          >
+            <template #icon>
+              <ArrowLeftOutlined :style="{ color: '#fff' }" />
+            </template>
+          </a-button>
+          <div class="page-center">
+            <p>Page</p>
+            <a-input v-model:value="page" @keyup.enter="handleInputEnter" />
+            <p>Of 16,279</p>
+          </div>
+          <a-button
+            pre-icon
+            size="large"
+            style="width: 65px"
+            @click="handleAdd"
+          >
+            <template #icon>
+              <ArrowRightOutlined :style="{ color: '#fff' }" />
+            </template>
+          </a-button>
+        </div>
+      </div>
     </div>
   </div>
 </template>
 <script>
-import { LogoutOutlined } from "@ant-design/icons-vue";
+import {
+  UnorderedListOutlined,
+  ArrowLeftOutlined,
+  ArrowRightOutlined,
+} from "@ant-design/icons-vue";
 import { defineComponent, ref } from "vue";
 export default defineComponent({
-  components: { LogoutOutlined },
+  components: { UnorderedListOutlined, ArrowLeftOutlined, ArrowRightOutlined },
   setup() {
     const options = ref([
       {
@@ -86,10 +129,35 @@ export default defineComponent({
       },
     ]);
     const value = ref({
-        value: "Lowest ID",
-        label: "Lowest ID",
-      });
-    return { value, options };
+      value: "Lowest ID",
+      label: "Lowest ID",
+    });
+    const page = ref(1);
+    function handleAdd() {
+      page.value = page.value + 1;
+      console.log(`page.value`, page.value);
+    }
+    function handleSub() {
+      if (page.value > 1) {
+        page.value = page.value - 1;
+      }
+      console.log(`page.value`, page.value);
+    }
+    function handleInputEnter() {
+      console.log(`page.value`, page.value);
+    }
+    function handleChange(e) {
+      console.log(`e`, e);
+    }
+    return {
+      page,
+      value,
+      options,
+      handleChange,
+      handleAdd,
+      handleSub,
+      handleInputEnter,
+    };
   },
 });
 </script>
@@ -122,4 +190,35 @@ export default defineComponent({
   background: #242735 !important;
   border: 1px solid #6b7185 !important;
 }
+.card-item {
+  background-color: #282b39 !important;
+  border: 1px solid #363b4b !important;
+  box-shadow: 0px 3px 8px 0px rgba(58, 63, 80, 0.3) !important;
+  color: #fff !important;
+}
+.card-item:hover {
+  border: 1px solid #11131b !important;
+  box-shadow: 0px 3px 8px 0px rgba(17, 19, 27, 0.3) !important;
+}
+
+.page-center {
+  margin: 0 10px;
+  display: flex;
+  height: 40px;
+  line-height: 40px;
+  color: #fff;
+}
+.page-center p {
+  margin: 0 5px;
+}
+
+.page-center .ant-input {
+  width: 60px;
+  background: #11131b;
+  border: 1px solid #3a3f50;
+  color: #fff;
+  text-align: center;
+  border-radius: 4px;
+  font-size: 16px;
+}
 </style>