![]()
![]()
![]()
![]()
//index.html/index.wxml
<view class="indexviewHead">
<swiper class="swiper" indicator-color="rgba(0,0,0,0.30)" indicator-active-color="#fff"
autoplay="true" current="0" current-item-id="0" interval="3000" duration="1000"
circular="true" vertical="false" previous-margin="0px" next-margin="0px"
display-multiple-items="1" bind:change="swiperChange"
bind:animationfinish="animationfinish">
<swiper-item s-for="item in items" item-id="{{itemId}}" class="{{item.className}}">
<image src="{{item.image}}" class="swipImg"></image>
<view class="swipitem">{{item.value}}</view>
</swiper-item>
</swiper>
</view>
<view class="dots">
<block s-for="item,index in items" data-item="{{item}}">
<view class="dot{{index == swiperCurrent ? ' active' : ''}}"></view>
</block>
</view>
<!-- 菜單欄 -->
<view class="channel-container">
<view>
<view class="a">
<view class="em"></view>
<view class="span">遊戲庫</view>
</view>
<view class="a">
<view class="xy"></view>
<view class="span">新遊</view>
</view>
<view class="a">
<view class="phb"></view>
<view class="span">排行榜</view>
</view>
<view class="a">
<view class="zx"></view>
<view class="span">攻略</view>
</view>
<view class="a">
<view class="hj"></view>
<view class="span">資訊</view>
</view>
</view>
</view>
<!-- 列表數據 -->
<view class="rmyx">
<view class="js-ios" style="display: block;">
<view class="m-title">
<view class="span">熱門推薦</view>
<view class="more-link">MORE<i>+</i></view>
<!-- <a class="change-con">換一換</a> -->
</view>
<view class="container-m img-span">
<view class="img-span-ul">
<view class="a" s-for="item,index in gameList">
<image src="{{item.image}}" alt="" />
<view class="span">{{item.name}}</view>
</view>
</view>
</view>
</view>
</view>
<!-- 列表 -->
<view class="zxrd">
<view class="m-title">
<span>最新熱點</span>
<view class="ul">
<view class="li toggle-btn active" data-toggle="strategy"><b class="b">資訊</b></view>
<view class="li toggle-btn" data-toggle="strategy"><b class="b">攻略</b></view>
</view>
</view>
<view class="container-m strategy-content">
<view class="strategy-toggle">
<view class="toggle-li strategy-container">
<view class="strategy-li" s-for="item,index in hotList">
<a class="img-a">
<image src="{{item.image}}" alt="" />
</a>
<view class="strategy-con">
<a class="a">{{item.namr}}</a>
<!-- <p>今天是六一兒童節，《糖果繽紛樂》爲玩家準備了豐富的兒童節禮物，還有豐富的兒童節活動獎勵，有興趣的可以今天來看看，趕緊來參與吧。</p> -->
<view>{{item.title}}<span class="span">|</span>{{item.dates}}</view>
</view>
</view>
<a class="load-more"><span>點擊查看更多</span></a>
</view>
</view>
</view>
</view>
<!-- 發現極好遊戲 -->
<view class="fxhyx">
<view class="js-ios" style="display: block;">
<view class="m-title">
<span>發現好遊戲</span>
<a class="change-con" data-page="0">換一換</a>
</view>
<view class="container-m img-span">
<view class="game-list">
<view class="img-span-ul">
<a class="a" s-for="item,index in goodGameList">
<image src="{{item.image}}" alt="" />
<span class="span">{{item.name}}</span>
</a>
</view>
</view>
</view>
</view>
</view>
<!-- 新手速遞 -->
<view class="xysd">
<view class="js-ios">
<view class="m-title">
<span>新遊速遞</span>
<view class="ul">
<view class="li toggle-btn active" data-toggle="down"><b class="b">網遊</b></view>
<view class="li toggle-btn" data-toggle="down"><b class="b">單機</b></view>
</view>
</view>
<view class="container-m has-bottom">
<view class="down-toggle">
<view class="toggle-li down-container">
<a class="down-li" s-for="item,index in NoviceList">
<view class="img-a">
<image src="{{item.image}}" alt="" />
</view>
<view class="down-con">
<view>{{item.name}}</view>
<span class="span">{{item.title}}</span>
<view class="em">{{item.size}}</view>
</view>
<view class="right-btn"><span class="span">下載</span></view>
</a>
</view>
</view>
<a href="/ios/" class="load-more"><span>點擊查看更多</span></a>
</view>
<!-- -->
</view>
</view>
<!-- APP-->
<view class="container-m">
<a class="app-down">
<image src="https://3g.ali213.net/images/appshare.png" alt="" />
<view class="app-con">
<span class="span">遊俠網APP</span>
<i class="i">遊戲玩家必備的攻略寶典</i>
</view>
<view class="em"><span class="span">下載</span></view>
</a>
</view>
<!-- 遊戲專題 -->
<view class="m-title">
<span class=“span>遊戲專題</span>
<a class="more-link">MORE<i>+</i></a>
</view>
<swiper class="swiper" indicator-color="rgba(0,0,0,0.30)" indicator-active-color="#fff"
autoplay="{{switchAutoPlayStatus}}" current="0" current-item-id="0"
interval="{{autoPlayInterval}}" duration="{{switchDuration}}" circular="true"
vertical="{{switchVerticalStatus}}" previous-margin="0px" next-margin="0px"
display-multiple-items="1" bind:change="swiperChange" bind:animationfinish="animationfinish">
<swiper-item s-for="item in Ztitems" item-id="{{itemId}}" class="{{item.className}}">
<view class="items">
<view class="swiper-slides swiper-slide-prev" data-swiper-slide-index="1">
<a class="big-img">
<image class="bhimg"
src="https://imgs.ali213.net/oday/uploadfile/2020/02/27/2020022763126117.jpg"
alt="" />
</a>
<view class="zt-con">
<a class="zt-left">
<image class="ztBg" src="https://img1.ali213.net/shouyou/cover/d/234237.jpg"
alt="" />
</a>
<view class="zt-middle">
<a class="a">一人之下</a>
<view class="p">《一人之下》同名動漫改編、異能格鬥國潮手遊！</view>
</view>
<a class="circle-score"><span class="span">8.5</span></a>
</view>
</view>
</view>
</swiper-item>
</swiper>
<!-- 指引點 -->
<view class="ztBgdots">
<block s-for="item,index in Ztitems" data-item="{{item}}">
<view class="ztBgdot{{index == swiperCurrent ? ' active' : ''}}"></view>
</block>
</view>
<!-- 遊戲標題便籤 -->
<view class="m-title">
<view class="span">遊戲標籤</view>
<a class="more-link">MORE<i>+</i></a>
</view>
<view class="container-m margin-border">
<view class="btn-container">
<a href="https://m.ali213.net/tag/bt.html" class="btn-li"><span>BT版遊戲</span></a>
<a href="https://m.ali213.net/tag/xiaomi.html" class="btn-li"><span>小米遊戲</span></a>
<a href="https://m.ali213.net/tag/shouyouzhushou.html" class="btn-li"><span>手遊助手</span></a>
<a href="https://m.ali213.net/tag/tengxun.html" class="btn-li"><span>騰訊</span></a>
<a href="https://m.ali213.net/tag/tuilipoan.html" class="btn-li"><span>推理破案</span></a>
<a href="https://m.ali213.net/tag/zdkh.html" class="btn-li"><span>開黑</span></a>
<a href="https://m.ali213.net/tag/shuashuashua.html" class="btn-li"><span>刷刷刷</span></a>
<a href="https://m.ali213.net/tag/gufeng.html" class="btn-li"><span>古風手遊</span></a>
</view>
</view>
<!-- 禮包推薦 -->
<view class="m-title">
<view class="span">禮包推薦</view>
</view>
<!-- 禮包列表 -->
<view class="container-m gifts-con">
<view class="down-container">
<a class="down-li" s-for="item,index in giftbagList">
<view class="img-a">
<image src="{{item.image}}" alt=""/>
</view>
<view class="down-con">
<view>{{item.name}}</view>
<view class="gift-process">
<view class="process" style="width:{{item.title}};color:#fff;">剩餘{{item.title}}</view>
<view class="gift-nums"><span class="spanas" style="color:#fff;"></span></view>
</view>
<view class="gift-info">
<!-- <view class="platform"><span>iOS</span></view> -->
<view class="em">有效期<label class="i">{{item.dates}}</label></view>
</view>
</view>
<view class="right-btn"><span class="span">領取</span></view>
</a>
</view>
<a href="/libao/" class="load-more"><span>點擊查看更多</span></a>
</view>
<!-- 最新遊戲 -->
<view class="m-title">
<span>最新遊戲</span>
<a class="more-link">MORE<i>+</i></a>
</view>
<!-- 最新軟件標籤 -->
<view class="container-m margin-no-border">
<view class="btn-container">
<a class="btn-li"><span class="span">單機遊戲</span></a>
<a class="btn-li"><span class="span">漢化遊戲</span></a>
<a class="btn-li"><span class="span">賽車空戰</span></a>
<a class="btn-li"><span class="span">策略塔防</span></a>
<a class="btn-li"><span class="span">動作射擊</span></a>
<a class="btn-li"><span class="span">益智休閒</span></a>
<a class="btn-li"><span class="span">戀愛養成</span></a>
<a class="btn-li"><span class="span">冒險解謎</span></a>
<a class="btn-li"><span class="span">角色扮演</span></a>
<a class="btn-li"><span class="span">街機格鬥</span></a>
<a class="btn-li"><span class="span">模擬經營</span></a>
<a class="btn-li"><span class="span">音樂遊戲</span></a>
<a class="btn-li"><span class="span">體育競技</span></a>
<a class="btn-li"><span class="span">家庭養成</span></a>
<a class="btn-li"><span class="span">文字教育</span></a>
<a class="btn-li"><span class="span">其他遊戲</span></a>
</view>
</view>
<!-- -->
<view class="container-m img-span">
<view class="img-span-ul">
<a class="a" s-for="item,index in imgsapn">
<image src="{{item.image}}" alt=""/>
<span class="span">{{item.name}}</span>
</a>
</view>
</view>
<!-- 遊戲攻略 -->
<view class="m-title">
<span>遊戲攻略</span>
</view>
<!-- -->
<view class="container-m">
<view class="btn-container toggle-a">
<a class="btn-li active"><span class="span">遊戲攻略</span></a>
<a class="btn-li"><span class="span">關卡攻略</span></a>
<a class="btn-li"><span class="span">軟件綜合</span></a>
<a class="btn-li"><span class="span">遊戲問答</span></a>
</view>
<view class="qiehuanbox">
<view class="news-ul">
<a class="a"><i></i>《無盡靈魂》獸王怎麼打 獸王打法攻略</a>
<a class="a"><i></i>《山海鏡花》SR與SSR靈器哪個更厲害 SR與SSR靈器對比攻略</a>
<a class="a"><i></i>《最強蝸牛》喪屍形態怎麼解鎖 喪屍形態詳解</a>
<a class="a"><i></i>《無盡靈魂》雷霆王怎麼打 雷霆王打法攻略</a>
<a class="a"><i></i>《粉末遊戲》怎麼造火山 造火山方法圖文攻略</a>
<a class="load-more"><span>點擊查看更多</span></a>
</view>
</view>
</view>
<!-- e -->
</view>
//index.css/index.wxss
page {
background: #fff;
}
.indexviewHead {
position: relative;
width: 100%;
height: 380rpx;
margin-top: 30rpx;
}
.swiper {
position: relative;
width: 100%;
height: 380rpx;
}
.swipImg {
position: relative;
width: 100%;
height: 100%;
}
.swipitem {
position: absolute;
bottom: 0rpx;
width: 100%;
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
font-size: 28rpx;
padding: 10rpx 0rpx;
}
/* 輪播提示點 */
.dots {
position: relative;
left: 0;
width: 100%;
margin-top: 30rpx;
right: 0;
display: flex;
bottom: 30rpx;
justify-content: center;
}
.dots .dot {
margin: 0 8rpx;
width: 120rpx;
height: 6rpx;
background: #c9c9c9;
transition: all 0.6s;
}
.dots .dot.active {
width: 180rpx;
background: #ff4417;
}
/* 菜單欄 */
.channel-container {
position: relative;
width: 690rpx;
margin: 15rpx auto 4rpx auto;
clear: both;
overflow: hidden;
padding: 1rpx 0 0;
border-bottom: 1rpx solid #f5f5f5;
}
.channel-container view {
position: relative;
width: 96%;
overflow: hidden;
margin: 0 auto 20rpx auto;
}
.channel-container view .a {
position: relative;
display: block;
width: 16%;
margin: 0 2%;
float: left;
overflow: hidden;
}
.channel-container .a img {
display: block;
width: 100%;
clear: both;
overflow: hidden;
}
.channel-container .a .em {
background: url(https://app.ali213.net/v1/images/new_3gicon.png);
background-position: -30rpx -40rpx;
background-repeat: no-repeat;
width: 120rpx;
height: 128rpx;
position: absolute;
left: 50%;
margin-left: -60rpx;
top: -25rpx;
transform: scale(0.5);
}
.channel-container .a .xy {
background: url(https://app.ali213.net/v1/images/new_3gicon.png);
background-position: -350rpx -40rpx;
background-repeat: no-repeat;
width: 120rpx;
height: 128rpx;
position: absolute;
left: 50%;
margin-left: -60rpx;
top: -25rpx;
transform: scale(0.5);
}
.channel-container .a .phb {
background: url(https://app.ali213.net/v1/images/new_3gicon.png);
background-position: -660rpx -40rpx;
background-repeat: no-repeat;
width: 120rpx;
height: 128rpx;
position: absolute;
left: 50%;
margin-left: -60rpx;
top: -25rpx;
transform: scale(0.5);
}
.channel-container .a .zx {
background: url(https://app.ali213.net/v1/images/new_3gicon.png);
background-position: -1000rpx -40rpx;
background-repeat: no-repeat;
width: 120rpx;
height: 128rpx;
position: absolute;
left: 50%;
margin-left: -60rpx;
top: -25rpx;
transform: scale(0.5);
}
.channel-container .a .hj {
background: url(https://app.ali213.net/v1/images/new_3gicon.png);
background-position: -1310rpx -40rpx;
background-repeat: no-repeat;
width: 120rpx;
height: 128rpx;
position: absolute;
left: 50%;
margin-left: -60rpx;
top: -25rpx;
transform: scale(0.5);
}
.channel-container .a .span {
display: block;
width: 100%;
height: 60rpx;
line-height: 60rpx;
text-align: center;
color: black;
font-size: 29rpx;
clear: both;
overflow: hidden;
margin-top: 62rpx;
}
/* */
.m-title {
width: 690rpx;
margin: 15px auto 30rpx;
height: 40rpx;
line-height: 40rpx;
font-size: 32rpx;
color: #333;
font-weight: bold;
position: relative;
}
.m-title .span {
float: left;
height: 40rpx;
line-height: 40rpx;
}
.m-title .change-con,
.m-title .more-link {
float: right;
height: 40rpx;
line-height: 40rpx;
font-size: 28rpx;
color: #333;
}
.img-span {
overflow: hidden;
border-bottom: 1rpx solid #f5f5f5;
margin-bottom: 35rpx;
}
.container-m {
width: 690rpx;
margin: auto;
overflow: hidden;
}
.img-span-ul:first-child {
display: flex;
}
.img-span-ul {
width: 720rpx;
display: none;
align-items: flex-start;
justify-content: flex-start;
flex-wrap: wrap;
overflow: hidden;
}
.img-span-ul .a {
width: 150rpx;
height: 200rpx;
display: block;
margin-bottom: 40rpx;
margin-right: 30rpx;
}
.img-span-ul .a image {
width: 150rpx;
height: 150rpx;
display: block;
float: left;
border-radius: 25%;
vertical-align: bottom;
}
.img-span-ul .a .span {
display: block;
width: 100%;
height: 50rpx;
line-height: 70rpx;
overflow: hidden;
text-align: center;
clear: both;
color: #333;
font-size: 25rpx;
font-weight: bold;
}
.strategy-content {
padding-bottom: 10rpx;
margin-bottom: 40rpx;
border-bottom: 2rpx solid #f5f5f5;
}
.toggle-li:first-child {
display: block;
}
.toggle-li {
display: none;
overflow: hidden;
}
.strategy-li:first-child {
border-top: 0;
padding-top: 0;
}
.strategy-li {
width: 100%;
height: 160rpx;
padding: 30rpx 0 32rpx;
display: flex;
align-items: center;
justify-content: space-between;
border-top: 2rpx solid #f5f5f5;
}
.strategy-li .img-a {
width: 240rpx;
height: 160rpx;
border-radius: 20rpx;
overflow: hidden;
}
.strategy-li .img-a image {
border-radius: 20rpx;
width: 100%;
height: 100%;
}
.strategy-li .strategy-con {
width: 410rpx;
height: 160rpx;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
}
.strategy-con > .a {
width: 100%;
overflow: hidden;
height: 80rpx;
line-height: 40rpx;
font-size: 30rpx;
color: #333;
margin-bottom: 35rpx;
text-align: left;
}
.strategy-con view {
font-size: 26rpx;
color: #c2c2c2;
}
.strategy-con view .span {
font-size: 26rpx;
color: #c2c2c2;
padding: 0 12rpx;
display: inline-block;
max-width: 180rpx;
height: 40rpx;
line-height: 40rpx;
overflow: hidden;
vertical-align: bottom;
}
.m-title .ul {
position: absolute;
top: -2rpx;
right: 0;
width: 200rpx;
height: 58rpx;
line-height: 58rpx;
background-color: #f1f1f1;
border-radius: 29rpx;
}
.m-title .ul .li {
float: left;
width: 50%;
box-sizing: border-box;
height: 58rpx;
line-height: 58rpx;
text-align: center;
border-radius: 29rpx;
cursor: pointer;
display: table;
vertical-align: middle;
}
.m-title .ul .li.active {
border: solid 2rpx #d5d5d5;
background-color: #fff;
}
.m-title .ul .li .b {
display: table-cell;
vertical-align: middle;
font-size: 26rpx;
color: #696969;
text-align: center;
}
.m-title .ul .li.active .b {
font-size: 28rpx;
color: #333;
}
.m-title .change-con,
.m-title .more-link {
float: right;
height: 40rpx;
line-height: 40rpx;
font-size: 28rpx;
color: #333;
}
.m-title .change-con:after {
content: "";
float: right;
width: 30rpx;
height: 30rpx;
margin: 5rpx 0 0 8rpx;
background: url(https://app.ali213.net/v1/images/change.png) no-repeat;
background-size: 100% 100%;
}
.container-m {
width: 690rpx;
margin: auto;
overflow: hidden;
}
.img-span {
overflow: hidden;
border-bottom: 2rpx solid #f5f5f5;
margin-bottom: 35rpx;
}
.img-span-ul:first-child {
display: flex;
}
.img-span-ul {
width: 720rpx;
display: none;
align-items: flex-start;
justify-content: flex-start;
flex-wrap: wrap;
overflow: hidden;
}
.load-more{
text-align: center;
cursor: pointer;
width: 350rpx;
border-radius: 33rpx;
border: solid 2rpx #dcdcdc;
margin: 40rpx auto;
color: #717171;
font-size: 26rpx;
display: block;
padding: 12rpx 0;
height: auto;
}
.img-span-ul .a {
width: 150rpx;
height: 200rpx;
display: block;
margin-bottom: 40rpx;
margin-right: 30rpx;
}
.img-span-ul .a image {
width: 150rpx;
height: 150rpx;
display: block;
float: left;
border-radius: 25%;
vertical-align: bottom;
}
.img-span-ul .a .span {
display: block;
width: 100%;
height: 70rpx;
line-height: 70rpx;
overflow: hidden;
text-align: center;
clear: both;
color: #333;
font-weight: bold;
}
/* 新手速遞 */
.down-li {
width: 100%;
height: 150rpx;
margin-bottom: 32rpx;
display: flex;
justify-content: flex-start;
align-items: center;
}
.down-li .img-a {
width: 150rpx;
height: 150rpx;
border-radius: 25%;
overflow: hidden;
}
.down-li .img-a image {
width: 100%;
height: 100%;
vertical-align: bottom;
}
.down-li .down-con {
width: 380rpx;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
padding-left: 30rpx;
text-align: left;
}
.down-li .down-con .a,
.down-li .down-con view:first-child {
height: 38rpx;
margin-bottom: 20rpx;
line-height: 38rpx;
display: block;
font-size: 28rpx;
color: #333;
overflow: hidden;
font-weight: bold;
}
.down-li .down-con .span {
display: block;
width: 100%;
line-height: 40rpx;
height: 40rpx;
font-size: 22rpx;
color: #515151;
}
.down-li .down-con .em {
display: block;
width: 100%;
line-height: 40rpx;
height: 40rpx;
font-size: 22rpx;
color: #515151;
}
.down-li .right-btn {
width: 124rpx;
border-radius: 28rpx;
border: solid 2rpx #ff654c;
box-sizing: border-box;
text-align: center;
display: block;
padding: 3rpx 0;
}
.down-li .right-btn .span {
font-size: 26rpx;
color: #ff4c2e;
}
/* APP */
.container-m {
width: 690rpx;
margin: auto;
overflow: hidden;
}
.app-down {
width: 100%;
height: 150rpx;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.app-down image {
width: 150rpx;
height: 150rpx;
border-radius: 25%;
}
.app-down .app-con {
height: 150rpx;
display: flex;
width: 380rpx;
padding-left: 34rpx;
align-items: flex-start;
justify-content: center;
flex-direction: column;
}
.app-down .app-con .span {
font-size: 32rpx;
line-height: 40rpx;
color: #333333;
font-weight: bold;
margin-bottom: 15rpx;
}
.app-down .app-con .i {
font-size: 28rpx;
line-height: 32rpx;
color: #ff6136;
font-weight: bold;
font-style: normal;
}
.app-down .em {
width: 124rpx;
height: 56rpx;
line-height: 56rpx;
border-radius: 28rpx;
border: solid 4rpx #ff654c;
display: inline-block;
text-align: center;
}
.app-down .em .span {
/* display: table-cell; */
/* vertical-align: middle; */
font-size: 26rpx;
color: #ff4c2e;
}
/* 遊戲專題 */
.zt-container {
text-align: center;
margin-bottom: 4rpx;
}
.items {
position: relative;
width: 100%;
text-align: center;
}
.swiper {
margin-left: auto;
margin-right: auto;
position: relative;
overflow: hidden;
text-align: center;
z-index: 1;
}
.zt-container .swiper-slides {
width: 100%;
height: 338rpx;
}
.swiper-slides {
-webkit-flex-shrink: 0;
-ms-flex: 0 0 auto;
flex-shrink: 0;
width: 100%;
height: 100%;
text-align: center;
display: inline-block;
position: relative;
}
.swiper-slides .big-img {
width: 691rpx;
height: 202rpx;
background-color: red;
overflow: hidden;
border-radius: 20rpx;
display: inline-block;
margin-bottom: 36rpx;
}
.items {
position: relative;
width: 100%;
text-align: center;
}
.bhimg {
display: block;
vertical-align: bottom;
width: 100% !important;
height: 350rpx;
}
.zt-con {
width: 100%;
height: 100rpx;
display: flex;
align-items: center;
justify-content: flex-start;
}
.circle-score .span {
font-weight: bold;
font-size: 32rpx;
position: relative;
z-index: 3;
color: #ffffff;
vertical-align: middle;
}
.zt-con .zt-left {
border-radius: 25%;
height: 100rpx;
width: 100rpx;
position: relative;
margin-left: 30rpx;
overflow: hidden;
}
.ztBg {
display: block;
vertical-align: bottom;
width: 100%;
height: 100%;
}
.zt-con .zt-middle {
width: 510rpx;
height: 100rpx;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
padding-left: 27rpx;
text-align: left;
}
.zt-middle .a {
font-size: 32rpx;
line-height: 55rpx;
color: #2a2a2a;
display: block;
width: 100%;
height: 55rpx;
margin-bottom: 10rpx;
font-weight: bold;
}
.zt-middle .p {
font-size: 26rpx;
height: 36rpx;
line-height: 36rpx;
color: #999999;
width: 100%;
overflow: hidden;
}
.circle-score {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 64rpx;
height: 64rpx;
line-height: 64rpx;
text-decoration: none;
background: transparent;
border-radius: 50%;
counter-reset: value var(--gauge-value);
--percentage: calc(var(--gauge-value) / var(--gauge-max-value) * 100%);
background: conic-gradient(#e74c3c var(--percentage), #ffffff 0);
--gauge-max-value: 100;
flex-direction: column;
margin: 0;
color: #ffffff;
background: #e74c3c;
}
.circle-score:before {
position: absolute;
content: "";
display: flex;
justify-content: center;
align-items: center;
width: 85%;
height: 85%;
background: #ff5a39;
border-radius: inherit;
}
.circle-score .i {
font-style: normal;
font-size: 26rpx;
}
/* 輪播提示點 */
.ztBgdots {
position: relative;
left: 0;
width: 100%;
margin-top: 30rpx;
right: 0;
display: flex;
bottom: 30rpx;
justify-content: center;
}
.ztBgdots .ztBgdot {
width: 26rpx;
height: 26rpx;
background-color: #d9d9d9;
border-radius: 13rpx;
opacity: 1;
margin: 0 8rpx !important;
transition: all 0.6s;
}
.ztBgdots .ztBgdot.active {
width: 50rpx;
background-color: #ff5c46;
opacity: 1;
}
.margin-border {
padding: 0 0 10rpx;
border-bottom: 2rpx solid #f5f5f5;
margin-bottom: 40rpx;
}
.btn-container .btn-li {
/* width: 1.58rem; */
/* height: 0.65rem; */
/* border-radius: 0.33rem; */
border: solid 2rpx #bebebe;
box-sizing: border-box;
margin-right: 19rpx;
/* display: table; */
margin-bottom: 25rpx;
display: block;
width: 158rpx;
height: 64rpx;
line-height: 64rpx;
border-radius: 32rpx;
overflow: hidden;
text-align: center;
}
.margin-border {
padding: 0 0 10rpx;
border-bottom: 2rpx solid #f5f5f5;
margin-bottom: 40rpx;
}
.btn-container {
width: 105%;
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: flex-start;
}
/* 禮包 */
.gifts-con {
padding: 0 0 15rpx 0;
margin-bottom: 40rpx;
border-bottom: 2rpx solid #f5f5f5;
}
.down-container {
width: 100%;
overflow: hidden;
}
.down-li .gift-process {
width: 330rpx;
height: 40rpx;
background-color: #eee;
border-radius: 20rpx;
position: relative;
overflow: hidden;
}
.down-li .process {
width: 60%;
height: 40rpx;
color: #fff;
text-align: center;
font-size: 28rpx;
background-color: #ff644f;
border-radius: 20rpx 0 0 20rpx;
}
.down-li .down-con div:first-child {
height: 38rpx;
margin-bottom: 20rpx;
line-height: 38rpx;
display: block;
font-size: 28rpx;
color: #333;
overflow: hidden;
font-weight: bold;
}
.gift-num .spanas {
vertical-align: middle;
display: table-cell;
text-align: center;
z-index: 3;
color: #fff;
}
.gift-nums {
vertical-align: middle;
display: table-cell;
text-align: center;
z-index: 3;
color: #fff;
}
.down-li .gift-info {
height: 35rpx;
width: 100%;
display: flex;
align-items: center;
margin-top: 16rpx;
justify-content: flex-start;
}
.down-li .gift-info .em {
font-size: 22rpx;
color: #515151;
}
.down-li .down-con .em {
display: block;
width: 100%;
line-height: 40rpx;
height: 40rpx;
font-size: 22rpx;
color: #515151;
}
.down-li .gift-info .i {
font-size: 22rpx;
color: #ff644f;
font-style: normal;
margin-left: 8rpx;
}
.btn-container .btn-li {
/* width: 1.58rem; */
/* height: 0.65rem; */
/* border-radius: 0.33rem; */
border: solid 2rpx #bebebe;
box-sizing: border-box;
margin-right: 19rpx;
/* display: table; */
margin-bottom: 25rpx;
display: block;
width: 158rpx;
height:60rpx;
line-height: 60rpx;
border-radius: 32rpx;
overflow: hidden;
text-align: center;
}
.btn-container .btn-li .span {
/* vertical-align: middle; */
/* display: table-cell; */
/* font-size: 0.3rem; */
font-size: 28rpx;
color: #333333;
text-align: center;
}
.margin-no-border:after {
display: block;
width: 690rpx;
content: "";
height:26rpx;
background-image: linear-gradient(180deg,#f5f5f5 0,#fafafa 21%,#fff 100%);
}
.img-span {
overflow: hidden;
border-bottom: 1px solid #f5f5f5;
margin-bottom: 35rpx;
}
.img-span-ul:first-child {
display: flex;
}
.img-span-ul {
width:720rpx;
display: none;
align-items: flex-start;
justify-content: flex-start;
flex-wrap: wrap;
overflow: hidden;
}
.img-span-ul .a {
width:150rpx;
height:200rpx;
display: block;
margin-bottom:40rpx;
margin-right: 30rpx;
}
.img-span-ul .a image {
width:150rpx;
height:150rpx;
display: block;
float: left;
border-radius: 25%;
vertical-align: bottom;
}
.img-span-ul .a .span {
display: block;
width: 100%;
height:70rpx;
line-height:70rpx;
overflow: hidden;
text-align: center;
clear: both;
color: #333;
font-weight: bold;
}
.btn-container {
width: 105%;
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: flex-start;
}
.btn-container .btn-li.active {
background-color: #ffe3db;
border-color: #ff8b6c;
}
.btn-container .btn-li {
/* width: 1.58rem; */
/* height: 0.65rem; */
/* border-radius: 0.33rem; */
border: solid 2rpx #bebebe;
box-sizing: border-box;
margin-right:19rpx;
/* display: table; */
margin-bottom:25rpx;
display: block;
width: 158rpx;
height:64rpx;
line-height:64rpx;
border-radius: 32rpx;
overflow: hidden;
text-align: center;
}
.qiehuanbox .news-ul:first-child {
display: block;
}
.news-ul {
width: 100%;
overflow: hidden;
display: none;
}
.news-ul .a {
height:40rpx;
display: block;
margin: 0 auto 22rpx;
box-sizing: border-box;
padding-left: 28rpx;
position: relative;
width: 100%;
overflow: hidden;
line-height: 40rpx;
font-size: 26rpx;
color: #333333;
text-align: left;
}
.news-ul .a:before {
width: 16rpx;
height:16rpx;
background-image: linear-gradient(-45deg, #000000 0%, #803726 0%, #ff6d4b 0%, #ffc4b8 100%);
border-radius: 4rpx;
position: absolute;
content: "";
left: 0;
top: 12rpx;
}
//組件js
Component({
properties: {
propName: { // 屬性名
type: String, // 類型（必填），目前接受的類型包括：String, Number, Boolean, Object, Array, null（表示任意類型）
value: 'val', // 屬性初始值（必填）
observer: function(newVal, oldVal) {
// 屬性被改變時執行的函數（可選）
}
}
},
data: {// 首頁
items: [
{
className: 'color-a',
image: "https://img1.ali213.net/shouyou/tyxwj/2020/04/17/2020041765828496.jpg",
value: '《決戰平安京》“混戰狹間”2.0版本即將來襲'
}, {
className: 'color-b',
image: "https://img1.ali213.net/shouyou/tyxwj/2020/05/28/2020052862353571.jpg",
value: '每日遊戲精選，每天一款精品遊戲推薦'
}, {
className: 'color-c',
image: "https://img1.ali213.net/shouyou/tyxwj/2020/05/13/2020051363507744.jpg",
value: 'BT版遊戲合集，免費爽玩就完事兒了'
}
],
current: 0,
itemId: 0,
swiperCurrent: 0,
// 列表
gameList: [{
image: "https://img1.ali213.net/shouyou/cover/d/234237.jpg",
name: "一人之下ios版"
},
{
image: "https://img1.ali213.net/shouyou/cover/c/10190083.jpg",
name: "求帶ios版"
}, {
image: "https://img1.ali213.net/shouyou/cover/c/10140679_100.jpg",
name: "濡沫江湖ios版"
}, {
image: "https://img1.ali213.net/shouyou/cover/3/10187699.jpg",
name: "熱血街籃ios版"
}, {
image: "https://img1.ali213.net/shouyou/cover/7/202959_100.jpg",
name: "夢幻西遊ios版"
}, {
image: "https://img1.ali213.net/shouyou/cover/4/10135807_100.jpg",
name: "戰艦世界閃擊戰ios版"
}, {
image: "https://img1.ali213.net/shouyou/cover/b/10131247_100.jpg",
name: "新斗羅大陸ios版"
}, {
image: "https://img1.ali213.net/shouyou/cover/e/10171523_100.jpg",
name: "時空之旅ios版"
},
],
hotList: [{
namr: "《糖果繽紛樂》兒童節福利 分享贏兒童節糖果",
title: "資訊要聞",
dates: "2020-06-01",
image: "https://img1.ali213.net/shouyou/article/8/143527.jpg"
}, {
namr: "向地獄進發《輻射避難所Online》新大型活動即將來襲",
title: "遊戲活動",
dates: "2020-06-01",
image: "https://img1.ali213.net/shouyou/article/e/143525.jpg"
}, {
namr: "《和平精英》福利活動曬夏日穿搭 贏永久時裝",
title: "資訊要聞",
dates: "2020-05-31",
image: "https://img1.ali213.net/shouyou/article/a/143521.jpg"
}, {
namr: "《一夢江湖》六一憶夢遊園活動 大朋友過六一兒童節",
title: "資訊要聞",
dates: "2020-05-31",
image: "https://img1.ali213.net/shouyou/article/6/143519.jpg"
}, {
namr: "《黑潮之上》林友樹親自操刀音樂 和世界接軌的理想之音",
title: "資訊要聞",
dates: "2020-06-01",
image: "https://img1.ali213.net/shouyou/article/3/143517.jpg"
},],
// 好遊戲
goodGameList: [{
name: "登仙斬魔錄ios版",
image: "https://img1.ali213.net/shouyou/cover/b/10189897.jpg"
}, {
name: "櫻桃灣之夏ios版",
image: "https://img1.ali213.net/shouyou/cover/2/10184055_100.jpg"
}, {
name: "女神聯盟2ios版",
image: "https://img1.ali213.net/shouyou/cover/b/10137155_100.jpg"
}, {
name: "女神競技場ios版",
image: "https://img1.ali213.net/shouyou/cover/0/235297.jpg"
}, {
name: "失落城堡ios版",
image: "https://img1.ali213.net/shouyou/cover/b/10131123.jpg"
}, {
name: "富豪闖三國ios版",
image: "https://img1.ali213.net/shouyou/cover/4/10185593.jpg"
}, {
name: "劍與遠征ios版",
image: "https://img1.ali213.net/shouyou/cover/3/10183819_100.jpg"
}, {
name: "心動女友ios版",
image: "https://img1.ali213.net/shouyou/cover/4/10131219_100.jpg"
},],
// 新手速遞
NoviceList: [{
name: "萌萌塔ios版",
image: "https://img1.ali213.net/shouyou/cover/e/10190097.jpg",
title: "類型：角色扮演",
size: "大小：235.28MB "
}, {
name: "奇幻世界英雄ios版",
image: "https://img1.ali213.net/shouyou/cover/9/10198079.jpg",
title: "類型：角色扮演",
size: "大小：184.41MB "
}, {
name: "鬆鬆總動員ios版",
image: "https://img1.ali213.net/shouyou/cover/4/10198169.jpg",
title: "類型：益智休閒",
size: "大小：749.37MB "
}, {
name: "最強蝸牛ios版",
image: "https://img1.ali213.net/shouyou/cover/0/10192369.jpg",
title: "類型：角色扮演",
size: "大小：402.88MB "
}, {
name: "夢色卡司ios版",
image: "https://img1.ali213.net/shouyou/cover/0/10191411.jpg",
title: "類型：音樂遊戲",
size: "大小：1.4GB "
},],
// 遊戲專題
Ztitems: [
{
className: 'color-a',
value: 'A'
}, {
className: 'color-b',
value: 'B'
}, {
className: 'color-c',
value: 'C'
}
],
current: 0,
itemId: 0,
switchIndicateStatus: true,
switchAutoPlayStatus: false,
switchVerticalStatus: false,
switchDuration: 500,
autoPlayInterval: 2000,
giftbagList: [{
image: "https://img1.ali213.net/shouyou/cover/a/220823_100.jpg",
name: "《航海王強者之路》六一兒童節禮包",
title: "92%",
dates: "《2020/07/01",
}, {
image: "https://img1.ali213.net/shouyou/cover/2/205351_100.jpg",
name: "《貓和老鼠》週年慶禮包",
title: "55%",
dates: "《2020/07/01",
}, {
image: "https://img1.ali213.net/shouyou/cover/d/10137477_100.jpg",
name: "《新笑傲江湖》高級大禮包",
title: "62%",
dates: "《2020/07/01",
},],
imgsapn: [{
image: "https://img1.ali213.net/shouyou/cover/b/10198697.jpg",
name: "金榮中國"
},{
image: "https://img1.ali213.net/shouyou/cover/a/10198691.jpg",
name: "睇好網"
},{
image: "https://img1.ali213.net/shouyou/cover/b/10198679.jpg",
name: "托里同城"
},{
image: "https://img1.ali213.net/shouyou/cover/a/10198671.jpg",
name: "第一貨源"
},{
image: "https://img1.ali213.net/shouyou/cover/f/10198653.jpg",
name: "谷歌郵箱"
},{
image: "https://img1.ali213.net/shouyou/cover/3/10198655.jpg",
name: "愛卡卡精選"
},{
image: "https://img1.ali213.net/shouyou/cover/1/10198645.jpg",
name: "廣告家"
},{
image: "https://img1.ali213.net/shouyou/cover/e/10198637.jpg",
name: "一隻"
}]
}, // 私有數據，可用於模版渲染
// 生命週期函數，可以爲函數，或一個在methods段中定義的方法名
attached: function () {},
detached: function () {},
methods: {
onTap: function () {
this.setData({
// 更新屬性和數據的方法與更新頁面數據的方法類似
});
},
/**滑動事件 */
swiperChange(e) {
console.log('swiperChange:', e.detail);
this.setData({
itemId: e.detail.current,
swiperCurrent: e.detail.current
});
},
}
});
