# 这是html

<navigation-bar title="布零布零" back="{{false}}" color="black" background="#FCE4EC"></navigation-bar>
<t-notice-bar visible="true" marquee="{{marquee}}" prefix-icon="sound" theme="success" content="布零布零欢迎您! 完全开源的虚拟财产交易平台!"></t-notice-bar>
<scroll-view scroll-y="true" style="height: 70vh;">
  <view class="container1">
    <view class="container2">
      <t-swiper autoplay="true" duration="500" interval="3000" list="{{swiperList}}" navigation="{{ { type: 'dots-bar' } }}" style="width: 700rpx;" />
    </view>
    <view class="container3">
      <t-grid class="block" column="{{4}}" class="grid1" hover="true">
        <t-grid-item text="租赁业务" image="{{image_prefix}}/images/出租.png" bind:click="handleItemClick" data-value="rent" />
        <t-grid-item text="买卖业务" image="{{image_prefix}}/images/sell.png" bind:click="handleItemClick" data-value="sell" />
        <t-grid-item text="业务介绍" image="{{image_prefix}}/images/业务介绍.png"  bind:click="handleIntroduction" />
        <t-grid-item text="联系作者" image="{{image_prefix}}/images/pig.png" bind:click="contactAuthor" />
      </t-grid>
    </view>
  </view>
  <view class="container4">
    <t-grid class="block" column="{{4}}" class="grid2" hover="true">
      <t-grid-item text="天涯明月刀" image="{{image_prefix}}/images/天涯明月刀.png" bind:click="game_select" data-game_name="tymyd" />
      <t-grid-item text="敬请期待" image="{{image_prefix}}/images/英雄联盟.png" />
      <t-grid-item text="敬请期待" image="{{image_prefix}}/images/永杰无间.png" />
      <t-grid-item text="敬请期待" image="{{image_prefix}}/images/无畏契约.png" />
      <t-grid-item text="敬请期待" image="{{image_prefix}}/images/逆战.png" />
      <t-grid-item text="敬请期待" image="{{image_prefix}}/images/命运方舟.png" />
      <t-grid-item text="敬请期待" image="{{image_prefix}}/images/地下城与勇士.png" />
      <t-grid-item text="更多游戏" image="{{image_prefix}}/images/搜索.png" />
    </t-grid>
  </view>
  <view class="container5">
    <view class=" container6">
      <text style="font-weight: 800; ">没有任何费用 完全自由开源 均可免费使用</text>
      <text style="font-size: smaller; color: rgb(224, 132, 78);">交易自由•信息共享•免费使用</text>
      <view class="container7">
        <t-tabs show-bottom-line="false" defaultValue="{{0}}" bind:change="onTabsChange" bind:click="onTabsClick" t-class="custom-tabs" t-class-content="custom-panel">
          <t-tab-panel label="虚拟财产租赁" value="0" style="{{tabPanelstyle}}" icon="app">
            <view class="container8">
              <t-cell title="个人租赁" description="玩家可以将自己的虚拟财产出租给其他玩家，作为一种获得额外收益的方式。通过本平台，出租过程变得简单快捷。" align="middle" image="{{image_prefix}}/images/多卖商品.png" hover bordered="{{false}}" />
              <!-- <t-cell title="平台代租" description="为了提供更多便利，租租侠还提供代租服务。租方只需提供出租信息，我们将帮助您完成剩余的租赁过程，包括匹配租客、处理交易等。每单租赁业务仅收取交易价值每单仅收取交易额10%的协助,最低20元,最高200元。" align="middle" image="{{image_prefix}}/images/我的店铺.png" hover bordered="{{false}}" /> -->
            </view>
          </t-tab-panel>
          <t-tab-panel label="虚拟财产买卖" value="1" style="{{tabPanelstyle}}" icon="system-3">
            <view class="container8">
              <t-cell title="自主上架" description="玩家可以自行上架自己的虚拟财产，并提供联系方式。这一过程完全由卖家掌控，保障了交易的灵活性和自主性。" align="middle" image="{{image_prefix}}/images/卖家中心.png" hover bordered="{{false}}" />
              <t-cell title="直接沟通" description="买家可以通过平台提供的联系方式直接与卖家沟通，自行商讨购买细节，使得交易过程更加直接和个性化。" align="middle" image="{{image_prefix}}/images/问题.png" hover bordered="{{false}}" />
              <!-- <t-cell title="交易协助" description="为了确保交易的安全与顺利,我们也提供专业的交易中介服务。通过平台进行交易不仅可以减少风险,还能享受到我们专业的交易保障。每单仅收取交易额2%的费用,最低20元,最高200元。" align="middle" image="{{image_prefix}}/images/帮助.png" hover bordered="{{false}}" /> -->
            </view>
          </t-tab-panel>
        </t-tabs>
      </view>
    </view>
  </view>
  <view style="width: 100%;height: calc(env(safe-area-inset-bottom) / 5);"></view>
</scroll-view>
<t-action-sheet id="t-action-sheet" bind:selected="handleSelected" />
<t-dialog visible="{{dialogVisible}}" title="备注来意" confirm-btn="{{ confirmBtn }}" bind:confirm="closeDialog" style="height: 500rpx">
  <view slot="content">
    <t-cell title="作者WX" description="bzl841">
      <t-icon name="file-copy" data-value="bzl841" bind:click="copyText" slot="note" />
    </t-cell>
    <t-cell title="QQ群聊" description="1047133241">
      <t-icon name="file-copy" data-value="1047133241" bind:click="copyText" slot="note" />
    </t-cell>
  </view>
</t-dialog>
<footbar></footbar>


/**index.wxss**/
page {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #F9EBEA;
}


.container1 {
  display: flex; 
  flex-direction: column;
  align-items: center;
  justify-content: center;
}



.grid1 {
  width: 700rpx;
  border-radius: 0 0 20rpx 20rpx;
  overflow: hidden;
}


.block {
  display: block;
  margin-bottom: 32rpx;
}


.container4 {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20rpx;
}


.grid2 {
  width: 700rpx;
  border-radius: 20rpx;
  overflow: hidden;
}


.t-grid-item__content {
  padding: 15rpx !important;
}


.t-cell__description {
  font-size: 25rpx !important;
  font-weight: 600;
}


.t-cell__title-text {
  font-weight: 700;
  color: coral !important;
}


.container5 {
  width: 700rpx;
  background-color: whitesmoke;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 20rpx 25rpx 0 25rpx;
  border-radius: 20rpx;
}


.container6 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 25rpx;
}


.container7 {
  display: flex;
  flex-direction: column;
  margin-top: 15rpx;
}


.container8 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}


.black-dot {
  font-weight: 10;
}



.t-cell--middle {
  border-radius: 15rpx;
  padding: 15rpx;
}
.t-swiper-host {
  border-radius: 20rpx 20rpx 0 0 !important;
}
这是 本地 截图

这是线上的