修改游戏详情页面,增加webfont
This commit is contained in:
parent
1365042fe3
commit
83c3a7eba2
@ -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;
|
||||||
|
@ -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
60
src/style/btn.wxss
Normal 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
408
src/style/font.wxss
Normal file
File diff suppressed because one or more lines are too long
Loading…
x
Reference in New Issue
Block a user