321

package-lock.json

@@ -4890,6 +4890,14 @@
       "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.11.0.tgz",
       "integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA=="
     },
+    "axios": {
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.1.tgz",
+      "integrity": "sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==",
+      "requires": {
+        "follow-redirects": "^1.10.0"
+      }
+    },
     "babel-code-frame": {
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz",
@@ -6070,6 +6078,16 @@
       "integrity": "sha512-FxqpkPPwu1HjuN93Omfm4h8uIanXofW0RxVEW3k5RKx+mJJYSthzNhp32Kzxxy3YAEZ/Dc/EWN1vZRY0+kOhbw==",
       "dev": true
     },
+    "clipboard": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.8.tgz",
+      "integrity": "sha512-Y6WO0unAIQp5bLmk1zdThRhgJt/x3ks6f30s3oE3H1mgIEU33XyQjEf8gsf6DxC7NPX8Y1SsNWjUjL/ywLnnbQ==",
+      "requires": {
+        "good-listener": "^1.2.2",
+        "select": "^1.1.2",
+        "tiny-emitter": "^2.0.0"
+      }
+    },
     "clipboardy": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/clipboardy/-/clipboardy-2.3.0.tgz",
@@ -7181,6 +7199,11 @@
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
       "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk="
     },
+    "delegate": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz",
+      "integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw=="
+    },
     "depd": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
@@ -8415,8 +8438,7 @@
     "follow-redirects": {
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.1.tgz",
-      "integrity": "sha512-HWqDgT7ZEkqRzBvc2s64vSZ/hfOceEol3ac/7tKwzuvEyWx3/4UegXh5oBOIotkGsObyk3xznnSRVADBgWSQVg==",
-      "dev": true
+      "integrity": "sha512-HWqDgT7ZEkqRzBvc2s64vSZ/hfOceEol3ac/7tKwzuvEyWx3/4UegXh5oBOIotkGsObyk3xznnSRVADBgWSQVg=="
     },
     "for-in": {
       "version": "1.0.2",
@@ -8996,6 +9018,14 @@
         "slash": "^2.0.0"
       }
     },
+    "good-listener": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz",
+      "integrity": "sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=",
+      "requires": {
+        "delegate": "^3.1.2"
+      }
+    },
     "graceful-fs": {
       "version": "4.2.6",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.6.tgz",
@@ -13073,6 +13103,11 @@
       "resolved": "https://registry.npmjs.org/seed-random/-/seed-random-2.2.0.tgz",
       "integrity": "sha1-KpsZ4lCoFwmSMaW5mk2vgLf77VQ="
     },
+    "select": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",
+      "integrity": "sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0="
+    },
     "select-hose": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
@@ -15033,6 +15068,14 @@
       "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.12.tgz",
       "integrity": "sha512-uhmLFETqPPNyuLLbsKz6ioJ4q7AZHzD8ZVFNATNyICSZouqP2Sz0rotWQC8UNBF6VGSCs5abnKJoStA6JbCbfg=="
     },
+    "vue-clipboard2": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/vue-clipboard2/-/vue-clipboard2-0.3.1.tgz",
+      "integrity": "sha512-H5S/agEDj0kXjUb5GP2c0hCzIXWRBygaWLN3NEFsaI9I3uWin778SFEMt8QRXiPG+7anyjqWiw2lqcxWUSfkYg==",
+      "requires": {
+        "clipboard": "^2.0.0"
+      }
+    },
     "vue-date-pick": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/vue-date-pick/-/vue-date-pick-1.4.1.tgz",

package.json

@@ -13,6 +13,7 @@
     "@trevoreyre/autocomplete-vue": "^2.2.0",
     "animejs": "^3.2.1",
     "ant-design-vue": "^1.7.5",
+    "axios": "^0.21.1",
     "bip39": "^3.0.4",
     "core-js": "^3.6.5",
     "dexie": "^3.0.3",

src/components/common/Search.vue

+<template>
+
+        <div class='search flex items-center w-full bg-app-dark-2 bg-opacity-30 text-sm px-3 py-1 rounded-3xl border border-app-blue-3 hover:border-app-blue-2'>
+        <div class='search-input flex-grow'>
+            <input type="text" class=" w-full bg-transparent" placeholder="输入项目名称/ID">
+        </div>
+        <app-icon  size="20px" class="flex-grow-0" color="#ffffff" type='search'></app-icon>
+        </div>
+
+</template>
+
+<script lang="ts">
+import Vue,{Component} from 'vue';
+import { Icon } from 'ant-design-vue';
+
+Vue.use(Icon)
+const AppIcon = Icon.createFromIconfontCN({
+  scriptUrl:'/iconfont.js'  // generated by iconfont.cn
+});
+export default Vue.extend({
+  props: {
+
+  },
+  components:{
+    'app-icon':AppIcon as Component
+  }
+});
+</script>
+

src/components/home/Banner.vue

 <template>
   <div class="home-banner relative">
-    <div class="mt-6 flex justify-center flex-grow-0" :class="{ 'mb-8': !showBtn }">
-      <img class="logo w-60 h-40 transform scale-100" src="@/assets/home/banner-img.png" alt="">
+    <div class="pt-5">
+      <img class="w-48 object-fill mx-auto" src="@/assets/home/banner-img.png" alt="">
     </div>
-    <div v-if="!canAttend && showBtn" ref="imgbtn" class="fixed top-1/2 right-1 z-50 imgbtn" :style="{ top: top, right: right }" @click="attendActivity">
+    <div v-if="!canAttend " ref="imgbtn" class="fixed top-1/2 right-1 z-50 imgbtn" :style="{ top: top, right: right }" @click="attendActivity">
       <img class="w-16 h-16" src="@/assets/home/a-btn.png" alt="">
     </div>
     <!-- <template v-if="!scrollHide"> -->
     <div
-      v-if="showBtn"
+    
       class="header-box w-full h-auto pb-12 flex flex-col items-center justify-center"
       :class="{ 'opacity-0': scrollHide }"
-      :style="{ 'height': showBtn ? 'auto' : '' }"
       >
       <button
         v-if="canAttend"
@@ -26,13 +25,8 @@
       </div>
     </div>
     <!-- </template> -->
-    <div v-if="showBtn" class="mt-3 w-full px-6 absolute bottom-0">
-      <div class='search flex items-center w-full bg-app-dark-2 bg-opacity-30 text-sm px-3 py-1 rounded-3xl border border-app-blue-3 hover:border-app-blue-2'>
-        <div class='search-input flex-grow'>
-          <input type="text" class=" w-full bg-transparent" placeholder="输入项目名称/ID">
-        </div>
-        <app-icon  size="20px" class="flex-grow-0" color="#ffffff" type='search'></app-icon>
-      </div>
+    <div class="mt-3 w-full px-6 absolute bottom-0">
+      <app-search></app-search>
     </div>
   </div>
 </template>
@@ -40,19 +34,17 @@
 <script lang="ts">
 import Vue from 'vue'
 import Timebox from '@/components/Timebox.vue'
-import AppIcon from '@/components/common/Icon.vue'
 
 export default Vue.extend({
   components: {
     Timebox,
-    AppIcon,
-
+     'app-search':()=>import('@/components/common/Search.vue')
   },
   name: 'HomeBanner',
   data() {
     return {
       voteType: 1,
-      canAttend: false,
+      canAttend: true,
       clientWidth: 0,
       clientHeight: 0,
       top: '50%',

src/components/home/RankList.vue

 <template>
-  <div v-show="isShow" class="pt-7">
-    <div class="rank-list relative w-full px-4">
+  <div v-show="isShow" >
+    <div class=" relative  w-11/12  mx-auto ">
       <div class="rank-title absolute left-1/2 -top-4 transform -translate-x-1/2">
         <p class="text-center text-lg leading-10">排行榜</p>
       </div>
-      <div class="lines border border-app-blue-3 border-solid rounded-lg" style="background: rgb(25, 2, 92)" ref="lines">
+      <div class="lines  border border-app-blue-3 border-solid rounded-lg" style="background: rgb(25, 2, 92)" ref="lines">
         <div class="overflow-y-scroll h-full" @scroll="scrollEvent">
           <div class="rank-lines h-full px-3 flex flex-col items-center">
             <template v-if="ranklist.length > 0" class="">
@@ -18,7 +18,6 @@
             </div>
           </div>
         </div>
-        
       </div>
     </div>
   </div>
@@ -27,14 +26,15 @@
 <script lang="ts">
 import Cardtwo from '@/components/Card_two.vue'
 import Vue from 'vue'
-import {TimelineLite, Power2} from 'gsap'
+import {TimelineLite, Power3} from 'gsap'
 export default Vue.extend({
   components: { Cardtwo },
   name: 'RankList',
   data() {
     return {
       anima: null as any,
-      scrollArr: [] as any[]
+      scrollArr: [] as any[],
+      directionUp:false
     }
   },
   props: {
@@ -48,35 +48,30 @@ export default Vue.extend({
   },
   methods: {
     scrollEvent(e: any) {
-      // const scrollTop = e.target.scrollTop
-      // const line = this.$refs.lines as any
-      // if (scrollTop > 320) {
-      //   this.$emit('scrollEvent', true)
-      //   line.style.height = 'calc(100vh - 220px)'
-      // } else {
-      //   this.$emit('scrollEvent', false)
-      //   line.style.height = 'calc(100vh - 400px)'
-      // }
+
       let poisition = e.target.scrollTop
       this.scrollArr.push(poisition)
       let l = this.scrollArr.slice(-2)
-      if(e.target.scrollTop > 120 && l[0]<l[1]){        
+      if(poisition > 90 && l[0]<l[1]){    
+        this.directionUp = false    
         this.anima.play()
-      }else if(e.target.scrollTop <= 320 && l[0]>l[1]){
+      }else if(poisition <= 120 && l[0]>l[1]){
+        this.directionUp = true
         this.anima.reverse()
       } 
     },
-    initialGASP() {
+     initialGASP() {
       const {lines} = this.$refs
       const top = this.$parent.$refs.banner as any
       const topBox = top.$el
       const img = topBox.querySelector('.logo') as any
       const header = topBox.querySelector('.header-box') as any
-      this.anima = new TimelineLite()
-      this.anima.to(lines,0.3,{css:{height:"calc(100vh - 220px)"},ease:Power2.easeInOut, delay: 0.5})
-      this.anima.to(img,0.2,{css:{transform: 'scale(0.7)', transformOrigin: '50% 50%'},ease:Power2.easeInOut, delay: 0.1})
-      this.anima.to(header,0.2,{css:{transform: 'scale(0)', transformOrigin: '50% 0'},ease:Power2.easeInOut, delay: 0.1})
-      this.anima.to(topBox,0.2,{css:{height:"205px"},ease:Power2.easeInOut}, '-=0.3')
+      this.anima = new TimelineLite({duration:0.1,ease:Power3.easeInOut})
+      this.anima.to(lines,{css:{height:"calc(100vh - 220px)"}})
+      this.anima.to(topBox,{css:{height:"205px"}})
+      this.anima.to(header,{css:{transform: 'scale(0)', transformOrigin: '50% 0'}})
+      this.anima.to(img,{css:{transform: 'scale(0.7)', transformOrigin: '50% 50%'}})
+    
       this.anima.pause()
     }
   },

src/service/index.ts

+import axios,{ AxiosInstance } from "axios";
+
+class AppService {
+    // private baseUrl:string
+    private service:AxiosInstance
+    constructor(){
+      this.service = axios.create({
+          baseURL:this.getBaseUrl(),
+          timeout: 15000,
+      })
+    }
+    private getBaseUrl(){
+       return  process.env == 'devlelop'?"123":"321"
+    }
+}
\ No newline at end of file

src/service/index.vue

-接口的统一出口文件
\ No newline at end of file

src/views/Square.vue

 <template>
   <div class="flex flex-col">
     <div class=" h-260px bg-squareBanner bg-center bg-cover bg-transparent  bg-opacity-10 relative" ref="topBox">
+      <div class="flex flex-col justify-center items-center py-12" ref="textBox">
+        <img src="@/assets/squareBanner-text.png" alt="">
+      </div>
       <div class='w-full  absolute bottom-3 '>
           <div class=' w-11/12 mx-auto h-10  text-white'>
-              <div class='search flex items-center w-full bg-app-dark-2 bg-opacity-30 text-sm px-3 py-1 rounded-3xl border border-app-blue-3 hover:border-app-blue-2'>
-                <div class='search-input flex-grow'>
-                  <input type="text" class=" w-full bg-transparent" placeholder="输入项目名称/ID">
-                </div>
-                <app-icon  size="20px" class="flex-grow-0" color="#ffffff" type='search'></app-icon>
-              </div>
+                <app-search></app-search>
           </div>
       </div>
     </div>
@@ -50,10 +48,12 @@ export default Vue.extend({
     };
   },
   mounted(){
-    const {topBox,botBox} = this.$refs
+    const {topBox,botBox,textBox} = this.$refs
     this.anima = new TimelineLite()
     this.anima.to(botBox,0,{css:{height:"calc(100vh - 190px)"},ease:Power2.easeInOut})
-    this.anima.to(topBox,0.6,{css:{height:"110px"},ease:Power2.easeInOut,delay:0.1})
+    this.anima.to(textBox,0.1,{opacity:0,ease:Power2.easeInOut})
+    this.anima.to(topBox,0.6,{css:{height:"110px"},ease:Power2.easeInOut,delay:0.1},'>-0.3')
+    
     this.anima.pause()
  
   }, 
@@ -61,6 +61,7 @@ export default Vue.extend({
     'app-icon':()=>import('@/components/common/Icon.vue'),
     'app-card':()=>import('@/components/Card.vue'),
     'app-card2':()=>import('@/components/Card_two.vue'),
+    'app-search':()=>import('@/components/common/Search.vue')
   },
   methods:{
     doFilter(){

tailwind.config.js

@@ -805,6 +805,7 @@ module.exports = {
       '9/12': '75%',
       '10/12': '83.333333%',
       '11/12': '91.666667%',
+      '11.5/12':'95.833333%',
       full: '100%',
       screen: '100vw',
       min: 'min-content',