团队总榜列表开发

src/modules/team/api.ts

+import httpRequest from '@/utils/axios'
+
+// 获取团队列表
+export function getTeamList() {
+  return httpRequest.get('/api/psp/v1/team/list')
+}

src/modules/team/components/TeamList.vue

+<template>
+  <ul class="list-card">
+    <li v-for="(item, index) in list" :key="index">
+      <div class="team-order">
+        <div class="order">{{ index > 2 ? index + 1 : '' }}</div>
+      </div>
+      <div class="team-info">
+        <div class="title">{{ item.name }}</div>
+        <div class="desc">{{ item.slogan }} | {{ item.members_count }}人</div>
+      </div>
+    </li>
+    <!-- <li>
+      <div class="team-order">
+        <div class="order"></div>
+      </div>
+      <div class="team-info">
+        <div class="title">团队名称1</div>
+        <div class="desc">团队1口号 | 3456人</div>
+      </div>
+    </li>
+    <li>
+      <div class="team-order">
+        <div class="order"></div>
+      </div>
+      <div class="team-info">
+        <div class="title">团队名称1</div>
+        <div class="desc">团队1口号 | 3456人</div>
+      </div>
+    </li>
+    <li>
+      <div class="team-order">
+        <div class="order">4</div>
+      </div>
+      <div class="team-info">
+        <div class="title">团队名称1</div>
+        <div class="desc">团队1口号 | 3456人</div>
+      </div>
+    </li> -->
+  </ul>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { getTeamList } from '../api'
+// interface List {}
+let list = ref<{
+  name: string,
+  slogan: string,
+  members_count: string
+}[]>([])
+function fetchTeamList() {
+  getTeamList().then(res => {
+    list.value = res.data.list.list
+  })
+}
+onMounted(() => {
+  fetchTeamList()
+})
+</script>
+
+<style lang="scss" scoped>
+.list-card{
+  background: #FFFFFF;
+  border-radius: 0.15rem;
+  opacity: 1;
+  li{
+    border-bottom: 0.01rem solid #E4E4E4;
+    padding: 0.35rem 0;
+    display: flex;
+    .team-order{
+      width: 1.8rem;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      .order{
+        position: relative;
+        font-size: 0.4rem;
+        // font-weight: bold;
+        color: #E68626;
+        &::before{
+          content: '';
+          position: absolute;
+          bottom: 0.05rem;
+          left: 50%;
+          opacity: .5;
+          transform: translateX(-50%);
+          background: linear-gradient(270deg, #FFEAE6 0%, #FFFFFF 100%);
+          width: 0.7rem;
+          height: 0.1rem;
+          border-radius: 25%;
+        }
+      }
+    }
+    &:last-child{
+      border: none;
+    }
+    &:nth-child(1){
+      .order{
+        width: 0.54rem;
+        height: 0.6rem;
+        background: url(https://webapp-pub.ezijing.com/project/prp-h5/team-rk1.png);
+        background-size: 100% 100%;
+        &::before{
+          display: none;
+        }
+      }
+    }
+    &:nth-child(2){
+      .order{
+        width: 0.54rem;
+        height: 0.6rem;
+        background: url(https://webapp-pub.ezijing.com/project/prp-h5/team-rk2.png);
+        background-size: 100% 100%;
+        &::before{
+          display: none;
+        }
+      }
+    }
+    &:nth-child(3){
+      .order{
+        width: 0.54rem;
+        height: 0.6rem;
+        background: url(https://webapp-pub.ezijing.com/project/prp-h5/team-rk3.png);
+        background-size: 100% 100%;
+        &::before{
+          display: none;
+        }
+      }
+    }
+    .team-info{
+      .title{
+        font-size: 0.3rem;
+        font-weight: 400;
+        line-height: 100%;
+        color: #4E4E4E;
+      }
+      .desc{
+        font-size: 0.26rem;
+        line-height: 100%;
+        margin-top: .1rem;
+        color: #999999;
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file

src/modules/team/views/Index.vue

-<script setup lang="ts"></script>
 <template>
-  <AppContainer title="团队总榜"></AppContainer>
+  <AppContainer title="团队总榜">
+    <div class="team-handle">
+      <div class="btn-box">
+        <img src="https://webapp-pub.ezijing.com/project/prp-h5/team-h2.png">
+        <div class="b-text">团队创建</div>
+      </div>
+      <div class="btn-box">
+        <img src="https://webapp-pub.ezijing.com/project/prp-h5/team-h1.png">
+        <div class="b-text">我的团队</div>
+      </div>
+    </div>
+    <TeamList></TeamList>
+  </AppContainer>
 </template>
+<script setup lang="ts">
+import TeamList from '../components/TeamList.vue'
+</script>
+<style lang="scss">
+.team-handle{
+  display: flex;
+  padding: 0.46rem 0 0.42rem;
+  justify-content: space-evenly;
+  .btn-box{
+    img{
+      width: 0.73rem;
+      display: block;
+      margin: 0 auto;
+    }
+    .b-text{
+      margin-top: 0.15rem;
+      font-size: 0.28rem;
+      color: #666666;
+      line-height: 100%;
+    }
+    &:nth-child(2){
+      img{
+        width: 0.63rem;
+      }
+    }
+  }
+}
+</style>
+