<template>
  <!-- <view class="home">
    <view class="content">
      <Header></Header>
      <view class="home-img">
        <image src="@/static/image/home/home-banner.png" mode="widthFix" />
      </view>
      <view class="home-btn-box">
        <view class="home-btn-item">资产兑换</view>
        <view class="home-btn-item">竞赛</view>
      </view>
      <view class="home-code">
        <view class="home-url">
          <view class="url">http://www.wgt.cool</view>
          <view class="btn">分享链接</view>
        </view>
        <view class="code-img">
          <image src="@/static/image/test/code-img.png" mode="scaleToFill" />
        </view>
      </view>
      <view class="home-title-box">
        <view class="home-title-english">Platformer features</view>
        <view class="home-title-china">平台游戏特色</view>
      </view>
      <view class="home-game-box">
        <view class="game-item" v-for="item in 4" :key="item">
          <view class="border-game">
            <image
              src="@/static/image/home/game-item-img.png"
              mode="scaleToFill"
            />
          </view>
          <view class="game-tag">【主播力荐】</view>
          <view class="game-desc"
            >主播强推网红大v都爱玩快来指尖和主播一起Happy到底！</view
          >
        </view>
      </view>
      <view class="home-title-box">
        <view class="home-title-english">Game Recommendation</view>
        <view class="home-title-china">游戏推荐</view>
      </view>
      <view class="home-swiper">
        <up-swiper
          :list="list5"
          @change="(e) => (current = e.current)"
          :autoplay="false"
          height="320rpx"
        >
          <view class="swiper-item">
            <view class="game-item-index" v-for="item in 3" :key="item">
              <view class="game-icon-name">
                <image
                  src="@/static/image/test/jcc-game.png"
                  mode="scaleToFill"
                />
                <view class="name-star">
                  <view class="name">金铲铲之战</view>
                  <view class="star">
                    <up-rate
                      :count="5"
                      size="14"
                      active-color="#FFD339"
                      inactive-color="#b2b2b2"
                      gutter="0"
                      v-model="star"
                    ></up-rate>
                  </view>
                </view>
              </view>
              <view class="upload-btn">立即下载</view>
            </view>
          </view>
        </up-swiper>
      </view>
    </view>
  </view> -->
</template>
  
  <script setup>
// import { ref, onMounted, reactive } from "vue";
// import Header from "@/components/Header";
// import { useCounterStore } from "@/stores/counter";
// const counter = useCounterStore();
// counter.count++;
// // 自动补全！ ✨
// counter.$patch({ count: counter.count + 1 });
// // 或使用 action 代替
// counter.increment();
// const star = ref(3);
// const count = ref(0);
// const list5 = reactive([1, 2, 3]);
</script>
  
  <style lang="scss" scoped>
// .home {
//   position: absolute;
//   top: 0;
//   bottom: 0;
//   right: 0;
//   left: 0;
//   overflow-y: auto;
// }
// .content {
//   display: flex;
//   flex-direction: column;
//   align-items: center;
//   width: 100%;
//   min-height: 100%;
//   padding: 32rpx;
//   padding-top: 116rpx;
//   box-sizing: border-box;
//   background-image: url("@/static/image/home/page-bg.jpg");
//   // background: url('../../static/image/home/page-bg.jpg');
//   background-size: 100%;
//   background-position: 0 0;
//   background-repeat: no-repeat;
//   .home-img {
//     width: 100%;
//     display: flex;
//     justify-content: center;
//     align-items: center;
//     image {
//       width: 100%;
//     }
//   }
//   .home-btn-box {
//     display: flex;
//     justify-content: space-between;
//     align-items: center;
//     width: 100%;
//     .home-btn-item {
//       width: 184rpx;
//       height: 68rpx;
//       background-image: url("@/static/image/home/home-btn.png");
//       background-size: 100% auto;
//       background-repeat: no-repeat;
//       text-align: center;
//       color: #ecb2a8;
//       font-style: italic;
//       font-family: DOUYUFONT-2;
//       font-weight: 400 !important;
//       display: flex;
//       justify-content: center;
//       align-items: center;
//     }
//   }
//   .home-code {
//     margin: 24rpx 0;
//     width: 100%;
//     padding: 20rpx;
//     box-sizing: border-box;
//     display: flex;
//     justify-content: space-between;
//     align-items: center;
//     background-image: url("@/static/image/home/home-border.png");
//     background-position: center;
//     background-size: 100%;
//     background-repeat: no-repeat;
//     .home-url {
//       padding: 0 12rpx;
//       flex: 1;
//       overflow: hidden;
//       .url {
//         font-size: 32rpx;
//         color: #fff;
//         overflow: hidden;
//         text-overflow: ellipsis;
//         white-space: nowrap;
//       }
//       .btn {
//         // width: 254rpx;
//         margin-top: 24rpx;
//         width: 300rpx;
//         height: 70rpx;
//         background-image: url("@/static/image/home/share-btn.png");
//         background-position: center;
//         background-size: 100% 100%;
//         background-repeat: no-repeat;
//         display: flex;
//         justify-content: center;
//         align-items: center;
//         color: #4f2917;
//         font-size: 28rpx;
//         font-weight: 600;
//       }
//     }
//     .code-img {
//       flex-shrink: 0;
//       // background: yellow;
//       width: 160rpx;
//       height: 160rpx;
//       image {
//         width: 100%;
//         height: 100%;
//       }
//     }
//   }
//   .home-title-box {
//     position: relative;
//     font-size: 32rpx;
//     font-weight: 700;
//     .home-title-english {
//       color: #534135;
//       text-transform: uppercase;
//     }
//     .home-title-china {
//       color: #fff;
//       position: absolute;
//       left: 0;
//       right: 0;
//       display: flex;
//       justify-content: center;
//       align-items: center;
//       top: 18rpx;
//     }
//   }
//   .home-game-box {
//     width: 100%;
//     display: grid;
//     grid-template-columns: repeat(2, minmax(0, 1fr));
//     gap: 24rpx;
//     margin-top: 36rpx;
//     margin-bottom: 24rpx;
//     .game-item {
//       display: flex;
//       flex-direction: column;
//       align-items: center;
//       border: 2rpx solid #90645a;
//       background-color: hsla(0, 0%, 100%, 0.1);
//       border-radius: 16rpx;
//       height: 420rpx;
//       padding: 24rpx;
//       box-sizing: border-box;
//       .border-game {
//         width: 180rpx;
//         height: 180rpx;
//         background-image: url("@/static/image/home/game-border.png");
//         background-position: center;
//         background-size: 100% 100%;
//         background-repeat: no-repeat;
//         display: flex;
//         justify-content: center;
//         align-items: center;
//         image {
//           width: 100%;
//           height: 100%;
//         }
//       }
//       .game-tag {
//         font-size: 32rpx;
//         font-weight: 700;
//         color: #bb8a57;
//       }
//       .game-desc {
//         color: #e6b5aa;
//         line-height: 48rpx;
//         text-align: center;
//         font-size: 28rpx;
//       }
//     }
//   }
//   .home-swiper {
//     border: 2rpx solid #90645a;
//     background-color: hsla(0, 0%, 100%, 0.1);
//     border-radius: 16rpx;
//     margin-top: 36rpx;
//     width: 100%;
//     padding: 24rpx;
//     box-sizing: border-box;
//     .swiper-item {
//       .game-item-index {
//         display: flex;
//         justify-content: space-between;
//         align-items: center;
//         margin-bottom: 24rpx;

//         .game-icon-name {
//           display: flex;
//           align-items: center;
//           image {
//             border-radius: 16rpx;
//             height: 88rpx;
//             width: 88rpx;
//             flex-shrink: 0;
//           }
//           .name-star {
//             width: 100%;
//             padding: 0 24rpx;
//             box-sizing: border-box;
//             .name {
//               color: #fff;
//               font-size: 28rpx;
//               margin-bottom: 12rpx;
//             }
//           }
//         }
//         .upload-btn {
//           padding: 12rpx 24rpx;
//           box-sizing: border-box;
//           border-radius: 100rpx;
//           background: linear-gradient(to bottom, #fff1ca, #fac21a);
//           font-size: 28rpx;
//           color: #4c220f;
//         }
//       }
//       .game-item-index:last-child() {
//         margin-bottom: 0;
//       }
//     }
//   }
// }
// ::v-deep .u-swiper {
//   background: none !important;
// }
</style>