增加一些页面的动作

src/components/market/ItemDetail.vue

@@ -41,12 +41,12 @@
           </div>
           <div class="statsSection stats-section">
             <div class="tabs tab-bar">
-              <li class="tabItem selected"><span>P2E Info</span></li>
-              <li class="tabItem"><span>Stats</span></li>
-              <li class="tabItem"><span>Fury</span></li>
-              <li class="tabItem"><span>Passive</span></li>
+              <li class="tabItem" @click="selectTab(0)" :class="{'selected': tabIdx === 0}"><span>P2E Info</span></li>
+              <li class="tabItem" @click="selectTab(1)" :class="{'selected': tabIdx === 1}"><span>Stats</span></li>
+              <li class="tabItem" @click="selectTab(2)" :class="{'selected': tabIdx === 2}"><span>Fury</span></li>
+              <li class="tabItem" @click="selectTab(3)" :class="{'selected': tabIdx === 3}"><span>Passive</span></li>
             </div>
-            <div class="panel">
+            <div class="panel" v-if="tabIdx===0">
               <div class="y-auto scrollable">
                 <div class="p2e-panel">
                   <li class="statItem">
@@ -79,6 +79,43 @@
                 </div>
               </div>
             </div>
+            <div class="panel" v-if="tabIdx===1">
+              <div class="y-auto scrollable">
+                <div class="p2e-panel">
+                  <span class="description">The Senior Commander of Delta Force, Steelshot, is a master in sweeping campaigns and conquering enemy's strongholds by his extremly strategic capabilites and advanced technolgy and firepower.</span>
+                  <li class="statItem">
+                    <img class="icon" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGgAAABoCAMAAAAqwkWTAAAAYFBMVEVHcEzs7Oz19fX9/f3u7u729vbf39/p6enu7u7p6end3d3f39/+/v79/f3y8vLy8vL29vb8/Pz+/v7r6+vo6Ojm5uby8vL09PT5+fnw8PDk5OTt7e3d3d3g4ODi4uLa2toksqJhAAAAEHRSTlMAUqrua4PlCjYepc/dwNnuB0EHAAAAAr9JREFUaN7tmImSqjAQRbMvbBIUifv//+WA4rgkhADJ1HtVnHaqprTNze00EgLAysrKysrKP42AFOUZxllOieBDWVyQLks90qarSIIyVT1R7Sg2LS5ojqv3NMeUrNOkWfUNRtKYDcJGWkYnKBFTpp1uhcnHGJLqysZXmqNqyD5Aq4XeFkHkaiANI6+16gZQT6ouekPdPxl8psHs8elv3v3zPj3zUIK4+3bVx6di98ajLpz0733n9WAyujxYOalwt9icaneW0iMLBUd0WjQZn07nCTrXJxsdQFUaQu2R5lonnqvhIfTjr31hrJSHVC4Hheh9oKF4vVxZb0EHC6d9UNobMVS4+zBjobXyDJ3bO0+UOjCltfM40sGFrJZEFlxIY2FtOV2GjtLSeLwoI1CYtZM4go7emLWDTQxHjdl3tImBZZFQU0aIBhlCRRxHhSG0iSLUbAyhwz4GzcEQ2kfirxyZpdscYrA3hYooQgez61AcIfM6onGEzF8GcoqCuWMVm9PpEDwsv96yiGHIcj8CaBueQ2Lbdm+3p+Bh2wbJIryjwrorTsILJfYNZL3dhY3avifmaBcYNLTJr8Pq1IPPLTSsEh1+8E/rcOxS6XiEPda7QFFfnA+xNJwj6j4EQsdAoJFzGpke6wDhXKC+x1kIP8zjjEaw60KOV+Z36sTa1CXhqbPY05F5n3jKdInQeB+8eUouM7mep+i0npLLdVZckkk63faLzTHECJgKhzOUGJx1wJ5eLudJkQowC57czlOgHMyEE+Zvh5HZOt0Nivnambc8k8t3SzhYCCceSsvK9uq+dsbOSCEIQls+JwkHgWi7b9DOLUzZXuUbsjP3InWZssAoB4Hh0GIqhcF1WiX53RPnybcE/1vHR9kI4JGEuEjidcH3nff34pEgLvBePgZBbO7lSwT4A2QSvWwrKysr/yk/EtijebhNnkQAAAAASUVORK5CYII=">
+                    <span class="label">HEALTH</span>
+                    <span class="value">2480</span>
+                  </li>
+                  <li class="statItem">
+                    <img class="icon" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADUAAAA0CAMAAAAdZIDnAAAAb1BMVEVHcEzu7u719fX39/fm5ubm5ubk5OTx8fHu7u7d3d35+fng4ODr6+v4+Pje3t7c3Nz9/f3e3t7o6Ojd3d3l5eX+/v7////e3t77+/vk5OTp6ens7Oz4+Pji4uL29vbv7+/09PTy8vLa2tr+/v7n5+eAPKtiAAAAF3RSTlMAEX7vOlN3BWDuj0v4myy6p8vw2x/IqVppElQAAAEgSURBVEjH5dXbcoMgEIBhQDygVo2p9dyk6Ps/Y1E7iYCTXZnpTfvDeJUv4N5IyP8upDxi8UcV4wUrKm/aYmhUTM+iM6hZt4rjEC2arWl9Uhx6a/Z5oQNqKtQ7GWgoMChuBr0YgwYzhrjep1UEn2QjLwNPult5/q+g+Et11xYS6cGIOaGbVQrO3AWFQW+a/gYi1lulPni9ziBdD79T0Fm9RjxRKD2LyjIK5m42gtB8VAuhVq1l7ytfDyJvjxqB6b1fxoMCaORHDESKXR0QSUSth0SjtjCIGydJl+vJCHuS3O8EMT4hVfVz11LAnze+/nDb4rr8gxQZfFguH/nZwgTmS0ovD0SIYgL3+Q1/2DoEmmeEnGA+ORnNpTiNFuaA/ljfnGtQzScnZTQAAAAASUVORK5CYII=">
+                    <span class="label">DAMAGE</span>
+                    <span class="value">433</span>
+                  </li>
+                  <li class="statItem">
+                    <img class="icon" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAA0CAMAAADypuvZAAAAllBMVEVHcEzb29vt7e3t7e3p6enq6urs7Oz+/v77+/vk5OT+/v7e3t7u7u77+/v29vb4+Pjv7+/////////m5ub////+/v7////+/v729vb+/v7a2trk5OTk5OT9/f3x8fHb29v////o6Ojc3Nzk5OT29vb09PTr6+vx8fH39/fi4uLe3t76+vrg4OD8/Pzl5eXu7u7t7e3a2trB47RCAAAAIHRSTlMA4kdfMRoS/Qcn5dHAs4c33dZh0b5xl+7m9fHk+Kb1thownzIAAAF6SURBVEjH5ZbZcoIwFECzSkDBsovIFHDB1mL1/3+u4FKS2JLra3uY0XHG47kmDhGhP46wg8JPLStzIo9MYA6N2nKgjajZY66sXPBjMT5ZkJU/4HhjUpL5buFGzoPms+EbkziQnYDeBuFB4quWKxAL4iTyrbK0il8nJYkUTBAiafdsXV6NTcvju5YIRJz2jkUNC+PcPnmetgNz0057aemJzjkMZNy4czzuOo7kHBwB+ZGozt4HOYvundIVARyW7hU2BcBZbDRigLNV2bjiaWcLcF40pXEn5k6zbRRmgE6jMTN27EeHm51PlROkc9KAdHYakM6uesohHE3CSmUXjs9Gq5zkmlOF4x26qqqj7phmWx97ro93DJ0utH4gNK41Xb1pTM03EqFbIeS4YfmHDKDTbStWHRvi5O8yoA7DtQysozo1JGTjs0Jdv5pvwXx6rm8X9nprSRA8VWMmPKDzbS37M5YCnW7C3sLXcxn4z+Oy6Gc8R89iTxn6r3wBCX5nMzGHcnoAAAAASUVORK5CYII=">
+                    <span class="label">ATT. SPD.</span>
+                    <span class="value">2.22</span>
+                  </li>
+                  <li class="statItem">
+                    <img class="icon" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGgAAABoBAMAAADvMqiSAAAALVBMVEVHcEzo6Ojp6enp6enp6enp6enq6urq6urp6enp6enp6enp6enp6enq6uro6OjjBeBHAAAADHRSTlMAnknx4TALahvLsod2Q1VDAAADKElEQVRYw+2Wy2sTURTGpwOThHZjFR9QLdWo4KZQWoliLCJUXdQQsL52iSAWVykVcSUpuqkrXxUXRqqgqyoWQVwJkm6Mk0CJIIG5QpqAJp3M3+C980hm5t65j9kVegJN0tzfnG++c+65I0nbsbVjLi/OKIUlcSgLqneFoTgAdVGBsQIA4KkgNAAZYYGXEATWhQRGCiYEzopAUYsBf74IQDM2BGppfnUfHAicz3Cr6ziMVt3NC10HvfjBK/CACwIJPkY+7Ya0fWLeWfFrhMe7FS8EEhwOysAfHA4+xKDaUSa0iEEcAiOfceod+6YuYhCHg9kORtXZDs5jUJktUMEFcuz9R5hAbYy59yO4QI69LxcEBSpfkUA81ToNum1WBRf4mwbdVzdhVZRXqi8e09Ql1Qo6MrK6l6nSNn4fXNCCfR2544V+0tSNwgUAVUX56GbKL2gHBrqXsmYKdEMVWs8OWLdSzMHPcRf0nXpg2Ivaea+DNHURZ52O2iaadJgizbto99JFdGQcc75tUsdKF9JK8OKxYdu7lzRov9YzGR0Zt6bZ3slJl2GNnkBqsy566lm7AgXuQh8v0JvVQyVsB6s5/8IVe8kns1m9FGqMBVUtBZVzDVaz378dmiNoeqpTeONYv29g6lCghx3lWQ5vUcvVZXjNaQyqvIUrrhJG5fw4jIl0N6cn1gIqJB+CccTX1U7UMqwzkAD9ZQy7qE6AlhnQAwJD3RJI3bCBR501igmMcYJ12JKg9wxohgSdYjiuTJKoPYxUh0lQm3GYKSkStRQmVYtRKZmUqgIH4Ozlaz5DVgffwNdQPihV897B5+MTT7wPSKOarsHTHNkkkwxsnER/9TGPzH7rt1ImIJVuvXmPd8VVEWIqKzpVz3b8ZlckKJUd5eNuaGHQjKF0kIGO+RmhWtmRC4JuUFKdk0KkCp4XFAPbUphUwR1/MyXuRMAWNmOH6L5CcUYKcVf//JdfNdtiJzXVhn9UvrY2T5qWCitU3Pr/VPBgMgzsEaTPYKfChnQs5U5FvqsW5tmctUP2ZoJTtUIMJqMZZgY2WAfPZAiImIoJEVNJ27Fl4j9SpRfvmLP57AAAAABJRU5ErkJggg==">
+                    <span class="label">SPEED</span>
+                    <span class="value">1.33</span>
+                  </li>
+                </div>
+              </div>
+            </div>
+            <div class="panel" v-if="tabIdx===2">
+              <div class="y-auto scrollable">
+                <div class="comingsoon">Coming soon...</div>
+              </div>
+            </div>
+            <div class="panel" v-if="tabIdx===3">
+              <div class="y-auto scrollable">
+                <div class="comingsoon">Coming soon...</div>
+              </div>
+            </div>
           </div>
           <div class="priceRow">
             <div class="priceStack">
@@ -105,9 +142,14 @@ import SkinRarityCard from '@/components/market/SkinRarityCard.vue'
   components: { SkinRarityCard, RarityCard, HeroTrophy, HeroClass, HeroLevel }
 })
 export default class extends Vue {
+  tabIdx = 0
   back() {
     this.$router.go(-1)
   }
+
+  selectTab(idx: number) {
+    this.tabIdx = idx
+  }
 }
 </script>
 <style lang="scss" scoped>
@@ -915,5 +957,16 @@ export default class extends Vue {
     margin: 0.125em 0;
   }
 }
+.comingsoon{
+  display: flex;
+  flex: 1 1 0%;
+  -webkit-box-pack: center;
+  justify-content: center;
+  -webkit-box-align: center;
+  align-items: center;
+  font-weight: bold;
+  font-size: 20px;
+  color: rgb(188, 173, 242);
+}
 
 </style>

src/components/market/SearchPanel.vue

@@ -14,11 +14,14 @@
               <div class="arrow">
                 <img
                   class="icon"
+                  alt="icon"
                   src="data:image/svg+xml,%3csvg width='14' height='8' viewBox='0 0 14 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath d='M12.8334 1.08337L7.00008 6.91671L1.16675 1.08337' stroke='white' stroke-linecap='round' stroke-linejoin='round' /%3e %3c/svg%3e"
+                  :class="{'collapsed': !rarityShow}"
+                  @click="rarityShow=!rarityShow"
                 />
               </div>
             </div>
-            <div class="content">
+            <div class="content" :class="{'collapsed': !rarityShow}">
               <div class="row">
                 <filter-item name="Common"></filter-item>
                 <filter-item name="Epic"></filter-item>
@@ -36,10 +39,12 @@
                 <img
                   class="icon"
                   src="data:image/svg+xml,%3csvg width='14' height='8' viewBox='0 0 14 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath d='M12.8334 1.08337L7.00008 6.91671L1.16675 1.08337' stroke='white' stroke-linecap='round' stroke-linejoin='round' /%3e %3c/svg%3e"
+                  :class="{'collapsed': !skinShow}"
+                  @click="skinShow=!skinShow"
                 />
               </div>
             </div>
-            <div class="sc-hKFxyN HRlLM content">
+            <div class="content" :class="{'collapsed': !skinShow}">
               <div class="row">
                 <filter-item name="Normal"></filter-item>
                 <filter-item name="Rare"></filter-item>
@@ -56,10 +61,12 @@
                 <img
                   class="icon"
                   src="data:image/svg+xml,%3csvg width='14' height='8' viewBox='0 0 14 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath d='M12.8334 1.08337L7.00008 6.91671L1.16675 1.08337' stroke='white' stroke-linecap='round' stroke-linejoin='round' /%3e %3c/svg%3e"
+                  :class="{'collapsed': !classShow}"
+                  @click="classShow=!classShow"
                 />
               </div>
             </div>
-            <div class="sc-hKFxyN HRlLM content">
+            <div class="content" :class="{'collapsed': !classShow}">
               <div class="row">
                 <filter-item name="Tank"></filter-item>
                 <filter-item name="Marksman"></filter-item>
@@ -76,10 +83,12 @@
                 <img
                   class="icon"
                   src="data:image/svg+xml,%3csvg width='14' height='8' viewBox='0 0 14 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath d='M12.8334 1.08337L7.00008 6.91671L1.16675 1.08337' stroke='white' stroke-linecap='round' stroke-linejoin='round' /%3e %3c/svg%3e"
+                  :class="{'collapsed': !levelShow}"
+                  @click="levelShow=!levelShow"
                 />
               </div>
             </div>
-            <div class="sc-jSFjdj kJAfpp content">
+            <div class="content" :class="{'collapsed': !levelShow}">
               <range-number-slider></range-number-slider>
             </div>
           </div>
@@ -92,10 +101,12 @@
                 <img
                   class="icon"
                   src="data:image/svg+xml,%3csvg width='14' height='8' viewBox='0 0 14 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath d='M12.8334 1.08337L7.00008 6.91671L1.16675 1.08337' stroke='white' stroke-linecap='round' stroke-linejoin='round' /%3e %3c/svg%3e"
+                  :class="{'collapsed': !trophyShow}"
+                  @click="trophyShow=!trophyShow"
                 />
               </div>
             </div>
-            <div class="sc-jSFjdj kJAfpp content">
+            <div class="content" :class="{'collapsed': !trophyShow}">
               <range-mark-slider></range-mark-slider>
             </div>
           </div>
@@ -108,27 +119,33 @@
                 <img
                   class="icon"
                   src="data:image/svg+xml,%3csvg width='14' height='8' viewBox='0 0 14 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath d='M12.8334 1.08337L7.00008 6.91671L1.16675 1.08337' stroke='white' stroke-linecap='round' stroke-linejoin='round' /%3e %3c/svg%3e"
+                  :class="{'collapsed': !battleShow}"
+                  @click="battleShow=!battleShow"
                 />
               </div>
             </div>
-            <div class="sc-jSFjdj kJAfpp content">
+            <div class="content" :class="{'collapsed': !battleShow}">
               <range-mark-slider></range-mark-slider>
             </div>
           </div>
         </div>
         <div class="one-block">
-          <div class="slider-section">
+          <div class="slider-section no-bottom-line">
             <div class="header">
               <span class="label">PRICE RANGE (WBNB)</span>
               <div class="arrow">
                 <img
                   class="icon"
                   src="data:image/svg+xml,%3csvg width='14' height='8' viewBox='0 0 14 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath d='M12.8334 1.08337L7.00008 6.91671L1.16675 1.08337' stroke='white' stroke-linecap='round' stroke-linejoin='round' /%3e %3c/svg%3e"
+                  :class="{'collapsed': !priceShow}"
+                  @click="priceShow=!priceShow"
                 />
               </div>
             </div>
-            <div class="sc-jSFjdj kJAfpp content">
-              <range-number-slider></range-number-slider>
+            <div class="content range-input" :class="{'collapsed': !priceShow}">
+              <input placeholder="Min" class="input" type="number" value="">
+              &nbsp;-&nbsp;
+              <input placeholder="Max" class="input" type="number" value="1">
             </div>
           </div>
         </div>
@@ -155,7 +172,13 @@ import RangeMarkSlider from '@/components/market/RangeMarkSlider.vue'
   }
 })
 export default class extends Vue {
-
+  rarityShow = true
+  classShow = true
+  skinShow = true
+  trophyShow = true
+  battleShow = true
+  priceShow = true
+  levelShow = true
 }
 </script>
 <style lang="scss" scoped>
@@ -210,6 +233,7 @@ export default class extends Vue {
 .filter-section .header {
   display: flex;
   flex-direction: row;
+  border-bottom: none!important;
 }
 
 .filter-section .header .label {
@@ -246,4 +270,70 @@ export default class extends Vue {
   display: flex;
   flex-direction: column;
 }
+.slider-section {
+  border-bottom: 1px solid #5b3dcb;
+}
+.slider-section.no-bottom-line {
+  border-bottom: none!important;
+}
+.slider-section .header {
+  border-bottom: none!important;
+}
+.slider-section .content {
+  margin-top: 1.5em;
+  transition: all 0.3s;
+}
+
+.slider-section .content.collapsed{
+  opacity: 0;
+  overflow: hidden;
+  height: 0;
+  margin-top: 0;
+}
+.slider-section .header .arrow .icon {
+  transform: rotate(180deg);
+  transition: all 0.3s;
+}
+.slider-section .header .arrow .icon.collapsed{
+  transform: rotate(0deg);
+}
+.slider-section .content.range-input {
+  transition: all 0.3s;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 1.5em;
+  color: #ffffff;
+  font-size: 0.875em;
+  line-height: 1.43;
+  font-weight: bold;
+}
+.slider-section .content .input {
+  padding: 0.5em;
+  border: 0.0625em solid #5b39bc;
+  box-sizing: border-box;
+  border-radius: 0.25em;
+  font-size: inherit;
+  color: inherit;
+  background: transparent;
+  min-width: 7.375em;
+
+  /* Chrome, Safari, Edge, Opera */
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  /* Firefox */
+  &[type='number'] {
+    -moz-appearance: textfield;
+  }
+
+  &:focus {
+    outline: none;
+    border-color: #9a77ff;
+  }
+}
 </style>

src/components/market/SelectSection.vue

@@ -6,10 +6,12 @@
         <img
           class="icon"
           src="data:image/svg+xml,%3csvg width='14' height='8' viewBox='0 0 14 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath d='M12.8334 1.08337L7.00008 6.91671L1.16675 1.08337' stroke='white' stroke-linecap='round' stroke-linejoin='round' /%3e %3c/svg%3e"
+          :class="{'collapsed': !subShow}"
+          @click="subShow=!subShow"
         />
       </div>
     </div>
-    <div class="sc-eCApnc fAVkeA content">
+    <div class="content" :class="{'collapsed': !subShow}">
       <span class="noSelect">{{noSelect}}</span>
       <div class="chooseBtn">
         <button class="general-btn">
@@ -31,6 +33,7 @@ export default class extends Vue {
   @Prop() private name!: string;
   @Prop() private btnName!: string;
   @Prop() private noSelect!: string;
+  subShow = true
 }
 </script>
 <style lang="scss" scoped>

src/components/market/SortSelect.vue

@@ -1,18 +1,16 @@
 <template>
   <div class="">
     <div class="sort-select">
-      <div class="label">None</div>
+      <div class="label">{{itemSelect}}</div>
       <img
         draggable="false"
-        class=""
+        :class="{'iconUp': dropShow}"
         src="data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3crect width='24' height='24' rx='5' fill='%23A346EC' /%3e %3cpath fill-rule='evenodd' clip-rule='evenodd' d='M16.8001 9.59985L12.0001 14.3999L7.20013 9.59985' fill='white' /%3e %3c/svg%3e"
+        @click = "dropShow=!dropShow"
       />
     </div>
-    <div class="sc-dlnjwi dJXsSm dropdown hide">
-      <div class="item">None</div>
-      <div class="item">Latest</div>
-      <div class="item">Cheapest Item</div>
-      <div class="item">Most Expensive</div>
+    <div class="dropdown" :class="{'hide': !dropShow}" >
+      <div class="item" v-for="(v, index) in filters" :key="v" @click="selectItem(index)">{{v}}</div>
     </div>
   </div>
 </template>
@@ -24,7 +22,25 @@ import { Component, Vue } from 'vue-property-decorator'
   components: {
   }
 })
-export default class extends Vue {}
+export default class extends Vue {
+  dropShow = false
+  selectedIndex = 0
+  filters = ['None', 'Latest', 'Cheapest Item', 'Most Expensive']
+
+  toggleMenu() {
+    this.dropShow = !this.dropShow
+  }
+
+  get itemSelect() {
+    return this.filters[this.selectedIndex]
+  }
+
+  selectItem(val: number) {
+    this.selectedIndex = val
+    this.toggleMenu()
+    this.$emit('filter-change', this.itemSelect)
+  }
+}
 </script>
 <style lang="scss" scoped>
 .sort-select {
@@ -86,7 +102,7 @@ export default class extends Vue {}
   -ms-flex-direction: column;
   flex-direction: column;
   cursor: default;
-  z-index: 1;
+  z-index: 10;
   -webkit-transition: all 0.5s;
   transition: all 0.5s;
   margin-top: 0.625em;
@@ -116,7 +132,7 @@ export default class extends Vue {}
 }
 
 .dropdown.hide {
-  max-height: 0px;
+  max-height: 0;
   opacity: 0;
 }
 </style>

src/router/index.ts

@@ -14,7 +14,7 @@ const routes: Array<RouteConfig> = [
   },
   {
     path: '/index.html',
-    name: 'Main',
+    name: 'Main1',
     component: Main
   },
   {