修改游戏详情页面,增加webfont

This commit is contained in:
zhl 2019-02-18 21:38:20 +08:00
parent 1365042fe3
commit 83c3a7eba2
4 changed files with 552 additions and 11 deletions

View File

@ -1,5 +1,7 @@
<style lang="less"> <style lang="less">
@import "style/zanui/index.wxss"; @import "style/zanui/index.wxss";
@import "style/font.wxss";
@import "style/btn.wxss";
.container { .container {
height: 100%; height: 100%;
display: flex; display: flex;

View File

@ -20,16 +20,62 @@
flex-direction: column; flex-direction: column;
} }
.top-bar .top-game-title { .top-bar .top-game-title {
color: #000; color: #576b95;
font-size: 32rpx;
font-weight: bold;
} }
.top-bar .top-game-desc { .top-bar .top-game-desc {
color: #aaa; color: #777;
font-size: 26rpx;
} }
.center-game-info { .game-introduce-view {
background-color: #06BF04; padding-bottom: 100rpx;
margin-top:10rpx;
} }
.bottom-game-info { .more-game-info {
background-color: #3283fa; border-bottom: 1px solid #eee;
margin-top:10rpx;
}
.game-introduce {
padding: 5rpx 20rpx;
font-size: 26rpx;
}
.game-introduce-more {
padding: 5rpx 20rpx;
font-size: 26rpx;
}
.part-title {
color: #777777;
font-size: 30rpx;
font-weight: bold;
padding: 5rpx 20rpx;
}
.hidden {
display: none;
}
.game-introduce-btn {
color: #777;
font-size: 26rpx;
padding: 2rpx 20rpx;
text-align: right;
margin-bottom: 10rpx;
border-bottom: 1px solid #eee;
}
.game-info-cell {
display: flex;
width: 100%;
margin: 5rpx 20rpx;
}
.game-info-cell .game-info-label {
font-size: 26rpx;
color: #777;
width: 14%;
text-align: right;
}
.game-info-cell .game-info-value {
font-size: 26rpx;
color: #000;
margin-left: 20rpx;
} }
</style> </style>
<template> <template>
@ -45,12 +91,33 @@
<view class="container"> <view class="container">
<imageSwiper :imageList.sync="imageList" @tapBanner.user="imageTap"></imageSwiper> <imageSwiper :imageList.sync="imageList" @tapBanner.user="imageTap"></imageSwiper>
</view> </view>
<view class="center-game-info"> <view class="more-game-info">
center <view class="part-title"><i class="icon-mk_info"></i> 详细信息</view>
<view class="game-info-cell">
<view class="game-info-label">游戏原名</view>
<view class="game-info-value">111</view>
</view>
<view class="game-info-cell">
<view class="game-info-label">游戏类型</view>
<view class="game-info-value">111</view>
</view>
</view> </view>
<view class="bottom-game-info"> <view class="game-introduce-view">
bottom <view class="part-title"><i class="icon-mk_info"></i> 游戏简介</view>
<view class="game-introduce">
《三国志孔明传》是《三国志英杰传》的系列作品,这次最大不同的是,以一代军师——孔明为主角。
</view>
<view class="game-introduce-btn {{ showMore ? 'hidden' : '' }}" @tap="toggleShowMore">
<i class="icon-plus"></i>
显示全部</view>
<view class="game-introduce-more {{ showMore ? '' : 'hidden' }}">
与前作相比游戏整体的表现及游戏困难度上略有不同,除了保有前作的特色外,开场的片头动画及游戏中单挑的动画,皆可以影音播放模式呈现。\n\n游戏系统\n与前作相比《三国志孔明传》的主要改变就是将主角换成了孔明。因此游戏 的第一章便是从三顾茅庐开始总共有15幕包括大小战役47个。游戏在前作基础上有新增了大量宝物并且提供了道具和兵器的收藏功能。游戏在剧情上的大体流程基本上采用《三国演义》为蓝本不过基于游戏的完成性必要在五丈原战役之后就采用了假想剧情在这场战役中玩家可以让孔明诈死以此躲过一劫最终完成复兴汉室的大业。为了尽可能贴近史诗光荣还在游戏设定上做了一些手脚如果玩家在游戏中按照史实制定作战策略便可以事半功倍。\n游戏中还设置了多结局的剧情不同的玩法有着不同的结局也就是说诸葛亮的最后结局是怎么样的全都依靠玩家的玩法。
</view>
<view class="game-introduce-btn {{ showMore ? '' : 'hidden' }}" @tap="toggleShowMore">
<i class="icon-minus"></i>
收起</view>
</view> </view>
<gameBottomBar :config.sync="bottomActionCfg" @bottomMainTap.user="bottomMainTap" @bottomSecondTap.user="bottomSecondTap"/> <gameBottomBar :config.sync="bottomActionCfg" @bottomMainTap.user="bottomMainTap" @bottomSecondTap.user="bottomSecondTap"/>
</template> </template>
@ -68,11 +135,12 @@
data = { data = {
id: '', id: '',
imageList:[], imageList:[],
showMore: true,
bottomActionCfg: { bottomActionCfg: {
hide: false, hide: false,
mainBtnIconClass: 'icon-plus', mainBtnIconClass: 'icon-plus',
mainBtnTitle: '开始游戏', mainBtnTitle: '开始游戏',
secondBtnIconClass: 'icon-mk_info', secondBtnIconClass: 'icon-coin-yen',
secondBtnTitle: '领取金币' secondBtnTitle: '领取金币'
}, },
}; };
@ -90,6 +158,9 @@
bottomSecondTap(e) { bottomSecondTap(e) {
console.log('bottomSecondTap'); console.log('bottomSecondTap');
}, },
toggleShowMore() {
this.showMore = !this.showMore;
}
}; };
onLoad(params) { onLoad(params) {

60
src/style/btn.wxss Normal file
View File

@ -0,0 +1,60 @@
.btn {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: 400;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}
.btn-success {
color: #fff!important;
background-color: #5cb85c!important;
border-color: #4cae4c!important;
}
.btn-default {
color: #333!important;
background-color: #fff;
border-color: #ccc;
}
.btn-primary {
color: #fff;
background-color: #337ab7;
border-color: #2e6da4;
}
.btn-info {
color: #fff;
background-color: #5bc0de;
border-color: #46b8da;
}
.btn-warning {
color: #fff;
background-color: #f0ad4e;
border-color: #eea236;
}
.btn-danger {
color: #fff;
background-color: #d9534f;
border-color: #d43f3a;
}
.btn-default {
color: #333;
background-color: #fff;
border-color: #ccc;
}
.btn.disabled, .btn[disabled], fieldset[disabled] .btn {
cursor: not-allowed;
filter: alpha(opacity=65);
-webkit-box-shadow: none;
box-shadow: none;
opacity: .65;
}

408
src/style/font.wxss Normal file

File diff suppressed because one or more lines are too long