修改游戏详情页面,增加webfont
This commit is contained in:
parent
1365042fe3
commit
83c3a7eba2
@ -1,5 +1,7 @@
|
||||
<style lang="less">
|
||||
@import "style/zanui/index.wxss";
|
||||
@import "style/font.wxss";
|
||||
@import "style/btn.wxss";
|
||||
.container {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
|
@ -20,16 +20,62 @@
|
||||
flex-direction: column;
|
||||
}
|
||||
.top-bar .top-game-title {
|
||||
color: #000;
|
||||
color: #576b95;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
.top-bar .top-game-desc {
|
||||
color: #aaa;
|
||||
color: #777;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
.center-game-info {
|
||||
background-color: #06BF04;
|
||||
.game-introduce-view {
|
||||
padding-bottom: 100rpx;
|
||||
margin-top:10rpx;
|
||||
}
|
||||
.bottom-game-info {
|
||||
background-color: #3283fa;
|
||||
.more-game-info {
|
||||
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>
|
||||
<template>
|
||||
@ -45,12 +91,33 @@
|
||||
<view class="container">
|
||||
<imageSwiper :imageList.sync="imageList" @tapBanner.user="imageTap"></imageSwiper>
|
||||
</view>
|
||||
<view class="center-game-info">
|
||||
center
|
||||
<view class="more-game-info">
|
||||
<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="bottom-game-info">
|
||||
bottom
|
||||
<view class="game-info-cell">
|
||||
<view class="game-info-label">游戏类型</view>
|
||||
<view class="game-info-value">111</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="game-introduce-view">
|
||||
<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>
|
||||
|
||||
<gameBottomBar :config.sync="bottomActionCfg" @bottomMainTap.user="bottomMainTap" @bottomSecondTap.user="bottomSecondTap"/>
|
||||
</template>
|
||||
|
||||
@ -68,11 +135,12 @@
|
||||
data = {
|
||||
id: '',
|
||||
imageList:[],
|
||||
showMore: true,
|
||||
bottomActionCfg: {
|
||||
hide: false,
|
||||
mainBtnIconClass: 'icon-plus',
|
||||
mainBtnTitle: '开始游戏',
|
||||
secondBtnIconClass: 'icon-mk_info',
|
||||
secondBtnIconClass: 'icon-coin-yen',
|
||||
secondBtnTitle: '领取金币'
|
||||
},
|
||||
};
|
||||
@ -90,6 +158,9 @@
|
||||
bottomSecondTap(e) {
|
||||
console.log('bottomSecondTap');
|
||||
},
|
||||
toggleShowMore() {
|
||||
this.showMore = !this.showMore;
|
||||
}
|
||||
};
|
||||
|
||||
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