tabbar

pages.json

@@ -257,31 +257,36 @@
   },
   "tabBar": {
     "color": "#B4C9DA",
-    "selectedColor": "#FBB434",
-    "height": "220px",
+    "selectedColor": "#fc5b20",
     "list": [
       {
         "pagePath": "pages/index/index",
-        "iconPath": "/static/img/tabBar1.png",
-        "selectedIconPath": "/static/img/tabBar1_s.png",
+        "iconPath": "/static/img/home.png",
+        "selectedIconPath": "/static/img/home_a.png",
         "text": "首页"
       },
       {
         "pagePath": "pages/shoppingMall/shoppingMall",
-        "iconPath": "/static/img/tabBar2.png",
-        "selectedIconPath": "/static/img/tabBar2_s.png",
+        "iconPath": "/static/img/shop.png",
+        "selectedIconPath": "/static/img/shop_a.png",
         "text": "商城"
       },
+      {
+        "pagePath": "pages/drawCardsList/drawCardsList",
+        "iconPath": "/static/img/cc.png",
+        "selectedIconPath": "/static/img/cc.png",
+        "text": "抽卡机"
+      },
       {
         "pagePath": "pages/knapsackTab/knapsack",
-        "iconPath": "/static/img/tabBar3.png",
-        "selectedIconPath": "/static/img/tabBar3_s.png",
+        "iconPath": "/static/img/bag.png",
+        "selectedIconPath": "/static/img/bag_a.png",
         "text": "背包"
       },
       {
         "pagePath": "pages/mine/mine",
-        "iconPath": "/static/img/tabBar4.png",
-        "selectedIconPath": "/static/img/tabBar4_s.png",
+        "iconPath": "/static/img/mine.png",
+        "selectedIconPath": "/static/img/mine_a.png",
         "text": "我的"
       }
     ]

pages/index/index.bk.vue

@@ -0,0 +1,390 @@
+<template>
+  <view class="container">
+    <image class="headImg" mode="aspectFill" :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/homeHead.jpeg'" />
+    <view class="headBarrage">
+      <view class="barrage-container">
+        <view v-for="(item, index) in barrageData" :key="index" class="barrage-item" :style="item.style">
+          {{ item.text }}
+        </view>
+      </view>
+    </view>
+
+    <view class="tabs">
+      <!--     <view class="tab">
+        <image :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/Frame3.png'" alt="" />
+        <span>全部</span>
+      </view> -->
+      <view class="tab" @click="$navigateTo('/pages/excellentValue/excellentValue')">
+        <image :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/Frame4.png'" alt="" />
+        <span>超值挑战</span>
+      </view>
+      <view class="tab" @click="$navigateTo('/pages/task/index')">
+        <image :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/Frame2.png'" alt="" />
+        <span>任务大厅</span>
+      </view>
+      <view class="tab" @click="$navigateTo('/pages/index2/index')">
+        <image :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/Frame1.png'" alt="" />
+        <span>VIP福利</span>
+      </view>
+    </view>
+    <view class="buttons">
+      <view class="left">
+        <image :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/button3.png'" @click="toInvite" />
+      </view>
+      <view class="right">
+        <image :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/button1.png'" @click="showQRcode" />
+        <image
+          :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/button2.png'"
+          @click="$navigateTo('/pages/raffle/raffle')"
+        />
+      </view>
+    </view>
+    <view class="list-title">- 热门推荐 -</view>
+    <view class="list">
+      <view class="ka" v-for="(item, index) in kaList" @click="drawCard(item)">
+        <view class="top">
+          <image mode="aspectFit" :src="item.icon" />
+        </view>
+        <view class="ka-info">
+          <view class="ka-name">{{ item.name }}</view>
+          <view class="row">
+            <uni-tag :text="item.tags" inverted type="default"></uni-tag>
+            <view class="money">¥{{ item.price }}</view>
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <uni-popup class="popup" ref="popup" type="center">
+      <image
+        class="qrcodeImg"
+        :show-menu-by-longpress="true"
+        :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/QRcode.png'"
+        mode="widthFix"
+      />
+    </uni-popup>
+  </view>
+</template>
+
+<script>
+import { messageListApi } from '@/api/common.js'
+import { raffleListApi } from '@/api/drawCard.js'
+
+export default {
+  data() {
+    return {
+      timer: null,
+      kaList: [],
+      messageList: [],
+      barrageData: [],
+      barrageIndex: 0,
+      timeOut: null,
+      interval: null,
+      params: {
+        limit: 20,
+        page: 1,
+      },
+      total: null,
+      containerWidth: 0,
+      usedTops: [],
+    }
+  },
+  onLoad(query) {
+    if (query.inviteId) {
+      getApp().globalData.inviteId = query.inviteId
+    } else {
+      const scene = decodeURIComponent(query.scene)
+      let inviteId = scene.split('=')[1]
+      console.log(inviteId, 'inviteId')
+      getApp().globalData.inviteId = inviteId
+    }
+    console.log(this.$refs)
+  },
+  onShow() {
+    this.getMessage()
+    this.getHot()
+    this.interval = setInterval(() => {
+      console.log('重复获取消息')
+      this.barrageIndex = 0
+      this.getMessage()
+      // let num = this.params.page * this.params.limit
+      // if (this.total == null || this.total > num) {
+      // 	console.log('获取消息接口')
+      // 	// this.params.page += 1
+      // 	this.barrageIndex = 0
+      // 	this.getMessage()
+      // }
+    }, 60000)
+    setTimeout(() => {
+      this.launchBarrage()
+    }, 2000)
+  },
+  onHide() {
+    clearInterval(this.interval)
+    clearInterval(this.timer)
+  },
+  methods: {
+    showQRcode() {
+      this.$refs.popup.open()
+    },
+    drawCard(value) {
+      let url = ''
+      if (value.type == 1) {
+        url = '/pages/drawCard_infinite/drawCard_infinite'
+      } else if (value.type == 2) {
+        url = '/pages/drawCard_last/drawCard_last'
+      } else if (value.type == 3) {
+        url = '/pages/drawCard_fullSet/drawCard_fullSet'
+      } else if (value.type == 4) {
+        url = '/pages/drawCard_box/drawCard_box'
+      } else if (value.type == 5) {
+        url = '/pages/drawCard_first/drawCard_first'
+      }
+      this.$navigateTo(url, {
+        id: value.id,
+      })
+    },
+    getHot() {
+      let params = {
+        limit: 999,
+        page: 1,
+        isHot: true,
+      }
+      raffleListApi(params).then(res => {
+        this.kaList = res.data.list
+      })
+    },
+    getMessage() {
+      messageListApi(this.params).then(res => {
+        this.messageList = res.data.list
+        this.total = res.data.total
+        this.initBarrage()
+      })
+    },
+    launchBarrage() {
+      if (this.timer) {
+        clearInterval(this.timer)
+      }
+      this.timer = setInterval(() => {
+        this.barrageData.forEach((barrage, index) => {
+          if (!barrage.tag) {
+            barrage.tag = true
+            barrage.right = -400
+            barrage.top = this.randomTop()
+            barrage.style = `display: block; top: ${barrage.top}px; right: ${barrage.right}px;`
+          } else {
+            barrage.right = parseInt(barrage.right) + 2
+            barrage.style = `display: block; top: ${barrage.top}px; right: ${barrage.right}px;`
+          }
+        })
+      }, 20)
+    },
+    // 初始化弹幕
+    initBarrage() {
+      // console.log(this.barrageIndex, 'this.barrageIndex')
+      if (this.messageList.length > 0) {
+        this.timeOut = setTimeout(() => {
+          let barrage = {
+            text: this.messageList[this.barrageIndex].content,
+          }
+          this.$set(barrage, 'right', -400)
+          this.$set(barrage, 'top', this.randomTop())
+          this.$set(barrage, 'tag', false)
+          this.barrageData.push(barrage)
+
+          this.barrageIndex += 1
+          clearTimeout(this.timeOut)
+          if (this.barrageIndex > this.messageList.length - 1) {
+            this.barrageIndex = 0
+          } else {
+            this.initBarrage()
+          }
+        }, 1000)
+      }
+    },
+    // 发送弹幕
+    sendingBarrage() {
+      let messageList = this.messageList
+    },
+    randomTop() {
+      // return Math.floor(Math.random() * 150)
+
+      // 往前5个不重复top值
+      let top = 0
+      this.usedTops.push(top)
+      do {
+        top = Math.floor(Math.random() * 6) * 30 // 生成0, 30, 60, 90, 120的随机值
+      } while (this.usedTops.slice(-4).includes(top))
+
+      this.usedTops.push(top)
+
+      return top
+    },
+
+    toInvite() {
+      wx.navigateTo({
+        url: '/pages/invite/invite',
+      })
+    },
+  },
+}
+</script>
+
+<style scoped lang="scss">
+.barrage-container {
+  width: 100%;
+  height: 180px;
+  position: relative;
+  overflow: hidden;
+  background-color: rgba(0, 0, 0, 0.2);
+  /* 背景色，可根据需要调整 */
+}
+
+.barrage-item {
+  color: #fff;
+  padding: 5px 10px;
+  font-size: 14px;
+  line-height: 30px;
+  position: absolute;
+  white-space: nowrap;
+  display: none;
+  border-radius: 15px;
+  background-color: rgba(0, 0, 0, 0.3);
+}
+
+.container {
+  /* padding: 20px; */
+  font-size: 14px;
+  line-height: 24px;
+}
+
+.headImg {
+  height: 180px;
+  width: 100%;
+}
+
+.headBarrage {
+  height: 180px;
+  width: 100%;
+  position: absolute;
+  top: 0;
+}
+
+.tabs {
+  display: flex;
+  justify-content: space-around;
+  margin-top: 10px;
+
+  > .tab {
+    width: 20%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    > image {
+      width: 40px;
+      height: 40px;
+    }
+  }
+}
+
+.buttons {
+  margin-top: 5px;
+  padding: 10px;
+  display: flex;
+  justify-content: space-between;
+
+  > .left {
+    width: calc(50vw - 15px);
+    height: 40vw;
+
+    image {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  > .right {
+    width: calc(50vw - 15px);
+    height: 40vw;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+
+    image {
+      width: 100%;
+      height: calc(50% - 5px);
+    }
+  }
+}
+
+.list-title {
+  font-size: 16px;
+  font-weight: 600;
+  text-align: center;
+  padding: 10px;
+}
+
+.list {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-gap: 10px;
+  padding: 10px;
+
+  .ka {
+    width: calc(50vw - 15px);
+    box-shadow: 0px 2px 8px 2px rgba(0, 0, 0, 0.1);
+    border-radius: 10px;
+    // height: 60vw;
+
+    .top {
+      // height: 60vw;
+      background: linear-gradient(180deg, #faf1a7 0%, #ffe456 100%);
+      text-align: center;
+      display: flex;
+      justify-content: center;
+
+      image {
+        width: 35vw;
+        height: 50vw;
+      }
+    }
+
+    .ka-info {
+      padding: 10px;
+
+      .ka-name {
+        font-size: 15px;
+        font-weight: 600;
+      }
+
+      .row {
+        margin-top: 5px;
+        display: flex;
+        justify-content: space-between;
+
+        .money {
+          font-size: 16px;
+          font-weight: 600;
+          color: #ff2c43;
+        }
+      }
+    }
+  }
+}
+
+.bullet {
+  height: 30px;
+  line-height: 30px;
+  padding: 0 10px;
+  border-radius: 15px;
+  background-color: rgba(0, 0, 0, 0.3);
+  color: #fff;
+}
+.qrcodeImg {
+  width: 70vw;
+  border-radius: 5px;
+}
+</style>

pages/index/index.vue

@@ -1,229 +1,168 @@
-<template>
-  <view class="container">
-    <image class="headImg" mode="aspectFill" :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/homeHead.jpeg'" />
-    <view class="headBarrage">
-      <view class="barrage-container">
-        <view v-for="(item, index) in barrageData" :key="index" class="barrage-item" :style="item.style">
-          {{ item.text }}
-        </view>
-      </view>
-    </view>
-
-    <view class="tabs">
-      <!--     <view class="tab">
-        <image :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/Frame3.png'" alt="" />
-        <span>全部</span>
-      </view> -->
-      <view class="tab" @click="$navigateTo('/pages/excellentValue/excellentValue')">
-        <image :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/Frame4.png'" alt="" />
-        <span>超值挑战</span>
-      </view>
-      <view class="tab" @click="$navigateTo('/pages/task/index')">
-        <image :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/Frame2.png'" alt="" />
-        <span>任务大厅</span>
-      </view>
-      <view class="tab" @click="$navigateTo('/pages/index2/index')">
-        <image :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/Frame1.png'" alt="" />
-        <span>VIP福利</span>
-      </view>
-    </view>
-    <view class="buttons">
-      <view class="left">
-        <image :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/button3.png'" @click="toInvite" />
-      </view>
-      <view class="right">
-        <image :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/button1.png'" @click="showQRcode" />
-        <image
-          :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/button2.png'"
-          @click="$navigateTo('/pages/raffle/raffle')"
+<template style="background-color: red">
+  <div
+    style="
+      background-image: url(https://file.rongcyl.cn/festatic/bkm/bg_i.png);
+      background-repeat: no-repeat;
+      background-position: center center;
+      background-size: contain;
+      background-color: #000;
+    "
+  >
+    <img src="https://file.rongcyl.cn/festatic/bkm/banner.png" class="w-full" style="height: 400rpx" />
+    <div
+      style="
+        background: rgba(0, 0, 0, 0.85);
+        background-image: url(https://file.rongcyl.cn/festatic/bkm/box.png);
+        background-size: cover;
+      "
+    >
+      <div class="flex justify-between">
+        <img src="https://file.rongcyl.cn/festatic/bkm/activity.png" class="area" />
+        <img
+          src="https://file.rongcyl.cn/festatic/bkm/task.png"
+          class="area"
+          @click="$navigateTo('/pages/task/index')"
         />
-      </view>
-    </view>
-    <view class="list-title">- 热门推荐 -</view>
-    <view class="list">
-      <view class="ka" v-for="(item, index) in kaList" @click="drawCard(item)">
-        <view class="top">
-          <image mode="aspectFit" :src="item.icon" />
-        </view>
-        <view class="ka-info">
-          <view class="ka-name">{{ item.name }}</view>
-          <view class="row">
-            <uni-tag :text="item.tags" inverted type="default"></uni-tag>
-            <view class="money">¥{{ item.price }}</view>
-          </view>
-        </view>
-      </view>
-    </view>
-
-    <uni-popup class="popup" ref="popup" type="center">
-      <image
-        class="qrcodeImg"
-        :show-menu-by-longpress="true"
-        :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/QRcode.png'"
-        mode="widthFix"
-      />
-    </uni-popup>
-  </view>
+        <img
+          src="https://file.rongcyl.cn/festatic/bkm/invite.png"
+          class="area"
+          @click="$navigateTo('/pages/invite/invite')"
+        />
+      </div>
+
+      <div class="flex justify-between m-2 co">
+        <img src="https://file.rongcyl.cn/festatic/bkm/center.png" class="center" />
+        <div class="clicks flex-1 overflow-scroll flex flex-nowrap">
+          <div class="ml-2 mt-2 inline-block relative" v-for="c in click" :key="c">
+            <img src="https://file.rongcyl.cn/festatic/bkm/click.png" />
+            <div class="absolute top-4 left-0 text-center right-0">
+              <div class="bold fs12">闯关9-2</div>
+              <div class="fs11 text-zinc-600">闯关9-2</div>
+            </div>
+          </div>
+        </div>
+        <img src="https://file.rongcyl.cn/festatic/bkm/more.png" class="more" />
+      </div>
+
+      <div class="flex justify-between m-2">
+        <img src="https://file.rongcyl.cn/festatic/bkm/c1.png" class="c" />
+        <img src="https://file.rongcyl.cn/festatic/bkm/c2.png" class="c" />
+        <img src="https://file.rongcyl.cn/festatic/bkm/c3.png" class="c" />
+        <img src="https://file.rongcyl.cn/festatic/bkm/c4.png" class="c" />
+      </div>
+
+      <div class="tabs">
+        <div class="tab" :class="{ active: type == 0 }" @click="type = 0">全部</div>
+        <div class="tab" :class="{ active: type == 5 }" @click="type = 5">FIRST赏</div>
+        <div class="tab" :class="{ active: type == 2 }" @click="type = 2">LAST赏</div>
+
+        <div class="tab" :class="{ active: type == 3 }" @click="type = 3">全套赏</div>
+        <div class="tab" :class="{ active: type == 1 }" @click="type = 1">无限赏</div>
+        <!-- <div class="tab" :class="{ active: type == 4 }" @click="type = 4">抽盒机</div> -->
+      </div>
+
+      <div class="cards">
+        <div class="card relative" v-for="(item, i) in list" @click="$navigateTo('/pages/first2/index')" :key="i">
+          <img
+            :src="`https://file.rongcyl.cn/festatic/bkm/tags/${item.type}.png`"
+            class="absolute top-0 left-0"
+            style="width: 62px; height: 24px"
+          />
+          <img :src="item.icon" />
+          <div class="mt-1">{{ item.name }}</div>
+          <div class="flex justify-between" style="font-size: 13px; margin-top: 12rpx">
+            <div
+              style="
+                border-radius: 3px;
+                height: 20px;
+                line-height: 20px;
+                text-align: center;
+                background: #fc5b20;
+                color: #fff;
+                padding: 0 8rpx;
+              "
+            >
+              创意热销
+            </div>
+            <div>
+              <span style="font-size: 14px; margin-right: 4px; color: #fc5b20" class="bold">{{ item.totalNum }}</span>
+              <span style="color: #666666">销量</span>
+            </div>
+          </div>
+          <div style="color: #fc5b20; margin-top: 12rpx">
+            <span class="fs14">￥</span>
+            <span class="bold fs16">{{ item.price }}</span>
+          </div>
+        </div>
+      </div>
+      <div class="p">
+        <img src="https://file.rongcyl.cn/festatic/bkm/p.png" />
+        <div class="absolute text-white bottom-2 fs11 text-center left-0 right-0">3333</div>
+      </div>
+    </div>
+    <!-- <div
+      class="fixed left-0 right-0 bottom-0 pb-1 bg-black flex justify-around items-center fs13"
+      style="color: #b4c9da; height: 80px"
+    >
+      <div class="text-center">
+        <img src="https://file.rongcyl.cn/festatic/bkm/index2tabs/home_a.png" class="w-7 h-7" />
+        <div style="color: #fc5b20">首页</div>
+      </div>
+      <div class="text-center">
+        <img src="https://file.rongcyl.cn/festatic/bkm/index2tabs/shop.png" class="w-7 h-7" />
+        <div>商城</div>
+      </div>
+      <div class="text-center">
+        <img src="https://file.rongcyl.cn/festatic/bkm/index2tabs/cc.png" class="w-8 h-8" />
+        <div>抽卡机</div>
+      </div>
+      <div class="text-center">
+        <img src="https://file.rongcyl.cn/festatic/bkm/index2tabs/bag.png" class="w-7 h-7" />
+        <div>背包</div>
+      </div>
+      <div class="text-center">
+        <img src="https://file.rongcyl.cn/festatic/bkm/index2tabs/mine.png" class="w-7 h-7" />
+        <div>我的</div>
+      </div>
+    </div> -->
+  </div>
 </template>
 
 <script>
-import { messageListApi } from '@/api/common.js'
-import { raffleListApi } from '@/api/drawCard.js'
+import { raffleListApi } from '@/api/drawCard'
 
 export default {
   data() {
     return {
-      timer: null,
-      kaList: [],
-      messageList: [],
-      barrageData: [],
-      barrageIndex: 0,
-      timeOut: null,
-      interval: null,
-      params: {
-        limit: 20,
-        page: 1,
-      },
-      total: null,
-      containerWidth: 0,
-      usedTops: [],
+      click: 6,
+      list: [],
+      type: 0,
     }
   },
-  onLoad(query) {
-    if (query.inviteId) {
-      getApp().globalData.inviteId = query.inviteId
-    } else {
-      const scene = decodeURIComponent(query.scene)
-      let inviteId = scene.split('=')[1]
-      console.log(inviteId, 'inviteId')
-      getApp().globalData.inviteId = inviteId
-    }
-    console.log(this.$refs)
-  },
-  onShow() {
-    this.getMessage()
-    this.getHot()
-    this.interval = setInterval(() => {
-      console.log('重复获取消息')
-      this.barrageIndex = 0
-      this.getMessage()
-      // let num = this.params.page * this.params.limit
-      // if (this.total == null || this.total > num) {
-      // 	console.log('获取消息接口')
-      // 	// this.params.page += 1
-      // 	this.barrageIndex = 0
-      // 	this.getMessage()
-      // }
-    }, 60000)
-    setTimeout(() => {
-      this.launchBarrage()
-    }, 2000)
+  created() {
+    this.getList()
   },
-  onHide() {
-    clearInterval(this.interval)
-    clearInterval(this.timer)
+  watch: {
+    type() {
+      this.getList()
+    },
   },
+
   methods: {
-    showQRcode() {
-      this.$refs.popup.open()
-    },
-    drawCard(value) {
-      let url = ''
-      if (value.type == 1) {
-        url = '/pages/drawCard_infinite/drawCard_infinite'
-      } else if (value.type == 2) {
-        url = '/pages/drawCard_last/drawCard_last'
-      } else if (value.type == 3) {
-        url = '/pages/drawCard_fullSet/drawCard_fullSet'
-      } else if (value.type == 4) {
-        url = '/pages/drawCard_box/drawCard_box'
-      } else if (value.type == 5) {
-        url = '/pages/drawCard_first/drawCard_first'
-      }
-      this.$navigateTo(url, {
-        id: value.id,
-      })
-    },
-    getHot() {
+    getList() {
       let params = {
         limit: 999,
         page: 1,
-        isHot: true,
+        type: this.type || '',
       }
       raffleListApi(params).then(res => {
-        this.kaList = res.data.list
-      })
-    },
-    getMessage() {
-      messageListApi(this.params).then(res => {
-        this.messageList = res.data.list
-        this.total = res.data.total
-        this.initBarrage()
-      })
-    },
-    launchBarrage() {
-      if (this.timer) {
-        clearInterval(this.timer)
-      }
-      this.timer = setInterval(() => {
-        this.barrageData.forEach((barrage, index) => {
-          if (!barrage.tag) {
-            barrage.tag = true
-            barrage.right = -400
-            barrage.top = this.randomTop()
-            barrage.style = `display: block; top: ${barrage.top}px; right: ${barrage.right}px;`
-          } else {
-            barrage.right = parseInt(barrage.right) + 2
-            barrage.style = `display: block; top: ${barrage.top}px; right: ${barrage.right}px;`
-          }
-        })
-      }, 20)
-    },
-    // 初始化弹幕
-    initBarrage() {
-      // console.log(this.barrageIndex, 'this.barrageIndex')
-      if (this.messageList.length > 0) {
-        this.timeOut = setTimeout(() => {
-          let barrage = {
-            text: this.messageList[this.barrageIndex].content,
-          }
-          this.$set(barrage, 'right', -400)
-          this.$set(barrage, 'top', this.randomTop())
-          this.$set(barrage, 'tag', false)
-          this.barrageData.push(barrage)
-
-          this.barrageIndex += 1
-          clearTimeout(this.timeOut)
-          if (this.barrageIndex > this.messageList.length - 1) {
-            this.barrageIndex = 0
-          } else {
-            this.initBarrage()
+        let list = res.data.list
+        for (var i = 0; i < list.length; i++) {
+          if (list[i].subType) {
+            list[i].subType = list[i].subType.split(',')
           }
-        }, 1000)
-      }
-    },
-    // 发送弹幕
-    sendingBarrage() {
-      let messageList = this.messageList
-    },
-    randomTop() {
-      // return Math.floor(Math.random() * 150)
-
-      // 往前5个不重复top值
-      let top = 0
-      this.usedTops.push(top)
-      do {
-        top = Math.floor(Math.random() * 6) * 30 // 生成0, 30, 60, 90, 120的随机值
-      } while (this.usedTops.slice(-4).includes(top))
-
-      this.usedTops.push(top)
-
-      return top
-    },
-
-    toInvite() {
-      wx.navigateTo({
-        url: '/pages/invite/invite',
+        }
+        this.list = list
       })
     },
   },
@@ -231,160 +170,87 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.barrage-container {
-  width: 100%;
-  height: 180px;
-  position: relative;
-  overflow: hidden;
-  background-color: rgba(0, 0, 0, 0.2);
-  /* 背景色，可根据需要调整 */
+.area {
+  width: 168px;
+  height: 88px;
 }
 
-.barrage-item {
-  color: #fff;
-  padding: 5px 10px;
-  font-size: 14px;
-  line-height: 30px;
-  position: absolute;
-  white-space: nowrap;
-  display: none;
-  border-radius: 15px;
-  background-color: rgba(0, 0, 0, 0.3);
+.c {
+  width: 82px;
+  height: 47px;
 }
 
-.container {
-  /* padding: 20px; */
-  font-size: 14px;
-  line-height: 24px;
+.center {
+  width: 38px;
+  height: 98px;
 }
 
-.headImg {
-  height: 180px;
-  width: 100%;
-}
+.clicks {
+  height: 98px;
+  background-image: linear-gradient(to bottom, #ffaea6, #ff654c);
 
-.headBarrage {
-  height: 180px;
-  width: 100%;
-  position: absolute;
-  top: 0;
+  img {
+    height: 82px;
+    width: 82px;
+  }
 }
 
-.tabs {
-  display: flex;
-  justify-content: space-around;
-  margin-top: 10px;
+.more {
+  width: 28px;
+  height: 98px;
+}
 
-  > .tab {
-    width: 20%;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
+.p {
+  position: fixed;
+  bottom: 120px;
+  right: 20px;
 
-    > image {
-      width: 40px;
-      height: 40px;
-    }
+  img {
+    width: 50px;
+    height: 50px;
   }
 }
 
-.buttons {
-  margin-top: 5px;
-  padding: 10px;
+.tabs {
   display: flex;
-  justify-content: space-between;
-
-  > .left {
-    width: calc(50vw - 15px);
-    height: 40vw;
-
-    image {
-      width: 100%;
-      height: 100%;
-    }
-  }
+  justify-content: space-around;
 
-  > .right {
-    width: calc(50vw - 15px);
-    height: 40vw;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    align-items: center;
+  .tab {
+    font-size: 16px;
+    font-weight: 400;
+    color: #fff;
+    padding: 10px 0;
 
-    image {
-      width: 100%;
-      height: calc(50% - 5px);
+    &.active {
+      font-weight: 600;
+      border-bottom: 2px solid #fc5b20;
+      color: #fc5b20;
     }
   }
 }
 
-.list-title {
-  font-size: 16px;
-  font-weight: 600;
-  text-align: center;
-  padding: 10px;
-}
-
-.list {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  grid-gap: 10px;
-  padding: 10px;
-
-  .ka {
-    width: calc(50vw - 15px);
-    box-shadow: 0px 2px 8px 2px rgba(0, 0, 0, 0.1);
+.cards {
+  margin-top: 20px;
+  display: flex;
+  justify-content: space-between;
+  padding: 0 20rpx;
+  flex-wrap: wrap;
+
+  .card {
+    box-sizing: border-box;
+    width: 344rpx;
+    // height: 500rpx;
+    background: #fff;
     border-radius: 10px;
-    // height: 60vw;
-
-    .top {
-      // height: 60vw;
-      background: linear-gradient(180deg, #faf1a7 0%, #ffe456 100%);
-      text-align: center;
-      display: flex;
-      justify-content: center;
-
-      image {
-        width: 35vw;
-        height: 50vw;
-      }
-    }
-
-    .ka-info {
-      padding: 10px;
-
-      .ka-name {
-        font-size: 15px;
-        font-weight: 600;
-      }
-
-      .row {
-        margin-top: 5px;
-        display: flex;
-        justify-content: space-between;
-
-        .money {
-          font-size: 16px;
-          font-weight: 600;
-          color: #ff2c43;
-        }
-      }
+    margin-bottom: 20rpx;
+    padding: 20rpx;
+    padding-bottom: 12rpx;
+
+    img {
+      width: 308rpx;
+      height: 308rpx;
+      border-radius: 8px;
     }
   }
 }
-
-.bullet {
-  height: 30px;
-  line-height: 30px;
-  padding: 0 10px;
-  border-radius: 15px;
-  background-color: rgba(0, 0, 0, 0.3);
-  color: #fff;
-}
-.qrcodeImg {
-  width: 70vw;
-  border-radius: 5px;
-}
 </style>