add game info page
This commit is contained in:
zhl
parent
cb6f86ebcd
commit
09aace8190
172
src/components/BigImgCell/index.vue
Normal file
172
src/components/BigImgCell/index.vue
Normal file
@ -0,0 +1,172 @@
|
||||
<!--带缩略图轮播图组件-->
|
||||
<template>
|
||||
<uni-card mode="style" @click="onClick(gData.gameId)">
|
||||
<template v-slot:cover>
|
||||
<view class="custom-cover" @click="onClick(gData.gameId)">
|
||||
<image class="cover-image" mode="aspectFill" :src="gData.cover">
|
||||
</image>
|
||||
<view class="cover-tag">
|
||||
<text class="uni-subtitle uni-white">20%折扣</text>
|
||||
</view>
|
||||
<view class="cover-content">
|
||||
<text class="uni-subtitle uni-white">{{gData.name}} ({{gData.ename}})</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<uni-row class="demo-uni-row">
|
||||
<uni-col :span="24">
|
||||
<view class="demo-uni-col dark tag-list">
|
||||
<uni-tag text="标签" inverted="true" type="warning"></uni-tag>
|
||||
<uni-tag text="标签" inverted="true" type="warning"></uni-tag>
|
||||
</view>
|
||||
</uni-col>
|
||||
</uni-row>
|
||||
<uni-row class="demo-uni-row price-row">
|
||||
<uni-col :span="16">
|
||||
<view class="demo-uni-col dark">
|
||||
<text class="price price-new">$200.0</text>
|
||||
<text class="price price-raw">$200.0</text>
|
||||
<text class="price price-shop">美国</text>
|
||||
</view>
|
||||
</uni-col>
|
||||
<uni-col :span="8">
|
||||
<view class="demo-uni-col dark discount-col">
|
||||
<text class="price price-discount">折扣还剩7天</text>
|
||||
</view>
|
||||
</uni-col>
|
||||
</uni-row>
|
||||
<view slot="actions" class="card-actions">
|
||||
<view class="card-actions-item" @click="actionsClick('分享')">
|
||||
<uni-icons type="pengyouquan" size="18" color="#999"></uni-icons>
|
||||
<text class="card-actions-item-text">分享</text>
|
||||
</view>
|
||||
<view class="card-actions-item" @click="actionsClick('点赞')">
|
||||
<uni-icons type="heart" size="18" color="#999"></uni-icons>
|
||||
<text class="card-actions-item-text">点赞</text>
|
||||
</view>
|
||||
<view class="card-actions-item" @click="actionsClick('评论')">
|
||||
<uni-icons type="chatbubble" size="18" color="#999"></uni-icons>
|
||||
<text class="card-actions-item-text">评论</text>
|
||||
</view>
|
||||
</view>
|
||||
</uni-card>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { Component, Vue } from 'vue-property-decorator'
|
||||
import { IGameInfo } from '@/modules/gameinfo'
|
||||
|
||||
declare module 'vue/types/vue' {
|
||||
interface Vue {
|
||||
gData?: IGameInfo
|
||||
}
|
||||
}
|
||||
|
||||
@Component({
|
||||
name: 'BegImgCell',
|
||||
props: ['gData'],
|
||||
})
|
||||
export default class extends Vue{
|
||||
actionsClick(s: string) {
|
||||
console.log(s)
|
||||
}
|
||||
onClick(s: string) {
|
||||
console.log('on click: ', s)
|
||||
this.$emit("cellClicked", s)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.custom-cover {
|
||||
flex: 1;
|
||||
flex-direction: row;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.custom-cover .cover-image {
|
||||
width: 100%;
|
||||
margin-top: 8px;
|
||||
height: 180px;
|
||||
}
|
||||
.cover-tag {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 0;
|
||||
width: 100px;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding-left: 15px;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
background-image: url("/static/icons/left_tip.png");
|
||||
background-repeat:no-repeat;
|
||||
background-size:auto;
|
||||
}
|
||||
.cover-tag .uni-subtitle {
|
||||
margin-left: 5px;
|
||||
}
|
||||
.tag-list {
|
||||
display: flex;
|
||||
}
|
||||
.tag-list .uni-tag {
|
||||
margin-right: 5px;
|
||||
}
|
||||
.cover-content {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 40px;
|
||||
background-color: rgba($color: #000000, $alpha: 0.4);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding-left: 15px;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.card-actions {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
height: 45px;
|
||||
border-top: 1px #eee solid;
|
||||
}
|
||||
|
||||
.card-actions-item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.card-actions-item-text {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
margin-left: 5px;
|
||||
}
|
||||
.price-row {
|
||||
margin-top: 12px;
|
||||
}
|
||||
.price {
|
||||
margin-right: 5px;
|
||||
color: #999;
|
||||
font-size: 16px;
|
||||
}
|
||||
.price-new {
|
||||
color: red;
|
||||
font-size: 25px;
|
||||
}
|
||||
.price-discount {
|
||||
font-size: 14px;
|
||||
}
|
||||
.discount-col {
|
||||
padding-top: 4px;
|
||||
float: right;
|
||||
}
|
||||
.uni-card__content {
|
||||
padding-top: 5px;
|
||||
}
|
||||
</style>
|
||||
66
src/components/DlcCell/index.vue
Normal file
66
src/components/DlcCell/index.vue
Normal file
@ -0,0 +1,66 @@
|
||||
<template>
|
||||
<view class="dlc-cell">
|
||||
<view class="left-part">
|
||||
<img src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/094a9dc0-50c0-11eb-b680-7980c8a877b8.jpg">
|
||||
</view>
|
||||
<view class="center-part">
|
||||
<text >dlc名字</text>
|
||||
</view>
|
||||
<view class="right-part">
|
||||
<view class="main-price">$100.0</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue } from 'vue-property-decorator'
|
||||
|
||||
declare module 'vue/types/vue' {
|
||||
interface Vue {
|
||||
data?: any
|
||||
}
|
||||
}
|
||||
@Component({
|
||||
name: 'DlcCell',
|
||||
props: ['data'],
|
||||
})
|
||||
export default class extends Vue{
|
||||
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.dlc-cell{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
margin: 5px 0;
|
||||
}
|
||||
.dlc-cell img{
|
||||
max-width: 100px;
|
||||
}
|
||||
.left-part {
|
||||
width: 20%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: auto;
|
||||
}
|
||||
.center-part {
|
||||
width: 70%;
|
||||
font-size: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: auto;
|
||||
}
|
||||
.right-part {
|
||||
width: 10%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: auto;
|
||||
padding: 5px 0;
|
||||
}
|
||||
.main-price {
|
||||
font-size: 18px;
|
||||
color: #dd524d;
|
||||
text-align: right;
|
||||
}
|
||||
</style>
|
||||
91
src/components/PriceCell/index.vue
Normal file
91
src/components/PriceCell/index.vue
Normal file
@ -0,0 +1,91 @@
|
||||
<template>
|
||||
<view class="price-cell">
|
||||
<view class="left-part">
|
||||
<view class="nation">日本</view>
|
||||
<!-- <view class="sub-nation">11</view>-->
|
||||
</view>
|
||||
<view class="center-part">
|
||||
<uni-tag type="error" size="small" text="-60%" class="center-child"></uni-tag>
|
||||
<uni-tag type="success" size="small" text="史低" class="center-child"></uni-tag>
|
||||
<view class="time-rest center-child" >
|
||||
<text >剩余14天</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="right-part">
|
||||
<view class="price-tip">史低100</view>
|
||||
<view class="main-price">$100.0</view>
|
||||
<view class="price-tip">HKD210</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue } from 'vue-property-decorator'
|
||||
|
||||
declare module 'vue/types/vue' {
|
||||
interface Vue {
|
||||
data?: any
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@Component({
|
||||
name: 'PriceCell',
|
||||
props: ['data'],
|
||||
})
|
||||
export default class extends Vue{
|
||||
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.price-cell{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
}
|
||||
.price-cell .left-part{
|
||||
width: 30%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: auto;
|
||||
font-size: 16px;
|
||||
}
|
||||
.price-cell .center-part{
|
||||
width: 45%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
.price-cell .center-part .center-child {
|
||||
margin-right: 5px;
|
||||
}
|
||||
.price-cell .center-part .time-rest{
|
||||
color: #666666;
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
-webkit-transform-origin-x: 0;
|
||||
-webkit-transform: scale(0.80)
|
||||
}
|
||||
.price-cell .right-part{
|
||||
width: 25%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: auto;
|
||||
padding: 5px 0;
|
||||
}
|
||||
.price-cell .right-part .main-price {
|
||||
font-size: 18px;
|
||||
color: #dd524d;
|
||||
text-align: right;
|
||||
}
|
||||
.price-cell .right-part .price-tip {
|
||||
color: #666666;
|
||||
font-size: 12px;
|
||||
-webkit-transform-origin-x: 0;
|
||||
-webkit-transform: scale(0.80);
|
||||
line-height: 10px;
|
||||
text-align: right;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
6
src/modules/gameinfo.ts
Normal file
6
src/modules/gameinfo.ts
Normal file
@ -0,0 +1,6 @@
|
||||
export interface IGameInfo{
|
||||
gameId: string
|
||||
name: string
|
||||
ename: string
|
||||
cover: string
|
||||
}
|
||||
@ -31,7 +31,8 @@
|
||||
"path": "pages/info/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "游戏详情",
|
||||
"enablePullDownRefresh": true
|
||||
"enablePullDownRefresh": true,
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}
|
||||
],
|
||||
|
||||
@ -1,52 +1,8 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<uni-list>
|
||||
<uni-list-item v-for="item in 3" :key="item">
|
||||
<uni-card mode="style" @click="onClick(item)">
|
||||
<template v-slot:cover>
|
||||
<view class="custom-cover" @click="onClick(item)">
|
||||
<image class="cover-image" mode="aspectFill" :src="cover">
|
||||
</image>
|
||||
<view class="cover-tag">
|
||||
<text class="uni-subtitle uni-white">20%折扣</text>
|
||||
</view>
|
||||
<view class="cover-content">
|
||||
<text class="uni-subtitle uni-white">游戏名game name</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<uni-row class="demo-uni-row">
|
||||
<uni-col :span="24">
|
||||
<view class="demo-uni-col dark tag-list">
|
||||
<uni-tag text="标签" inverted="true" type="warning"></uni-tag>
|
||||
<uni-tag text="标签" inverted="true" type="warning"></uni-tag>
|
||||
</view>
|
||||
</uni-col>
|
||||
</uni-row>
|
||||
<uni-row class="demo-uni-row price-row">
|
||||
<uni-col :span="24">
|
||||
<view class="demo-uni-col dark">
|
||||
<text class="price price-new">$200.0</text>
|
||||
<text class="price price-raw">$200.0</text>
|
||||
<text class="price price-shop">美国</text>
|
||||
</view>
|
||||
</uni-col>
|
||||
</uni-row>
|
||||
<view slot="actions" class="card-actions">
|
||||
<view class="card-actions-item" @click="actionsClick('分享')">
|
||||
<uni-icons type="pengyouquan" size="18" color="#999"></uni-icons>
|
||||
<text class="card-actions-item-text">分享</text>
|
||||
</view>
|
||||
<view class="card-actions-item" @click="actionsClick('点赞')">
|
||||
<uni-icons type="heart" size="18" color="#999"></uni-icons>
|
||||
<text class="card-actions-item-text">点赞</text>
|
||||
</view>
|
||||
<view class="card-actions-item" @click="actionsClick('评论')">
|
||||
<uni-icons type="chatbubble" size="18" color="#999"></uni-icons>
|
||||
<text class="card-actions-item-text">评论</text>
|
||||
</view>
|
||||
</view>
|
||||
</uni-card>
|
||||
<uni-list-item v-for="item in games" >
|
||||
<big-img-cell :g-data="item" v-on:cellClicked = 'onClick'></big-img-cell>
|
||||
</uni-list-item>
|
||||
</uni-list>
|
||||
</view>
|
||||
@ -54,27 +10,32 @@
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue } from 'vue-property-decorator'
|
||||
import BigImgCell from '@/components/BigImgCell/index.vue'
|
||||
import { IGameInfo } from '@/modules/gameinfo'
|
||||
|
||||
@Component({
|
||||
name: 'Index',
|
||||
components: {
|
||||
|
||||
BigImgCell
|
||||
}
|
||||
})
|
||||
|
||||
export default class extends Vue{
|
||||
private cover = 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/094a9dc0-50c0-11eb-b680-7980c8a877b8.jpg'
|
||||
private extraIcon = {
|
||||
color: '#4cd964',
|
||||
size: '22',
|
||||
type: 'gear-filled'
|
||||
}
|
||||
|
||||
private games: IGameInfo[] = []
|
||||
|
||||
onLoad() {
|
||||
for (let i = 0; i < 10; i++) {
|
||||
this.games.push({
|
||||
gameId: i + '',
|
||||
cover: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/094a9dc0-50c0-11eb-b680-7980c8a877b8.jpg',
|
||||
name: '测试游戏' + i,
|
||||
ename: 'test game ' + i
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
onClick(e: any) {
|
||||
console.log(e)
|
||||
uni.navigateTo({
|
||||
url: '/pages/info/index',
|
||||
animationType: 'pop-in',
|
||||
@ -94,91 +55,6 @@ export default class extends Vue{
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.custom-cover {
|
||||
flex: 1;
|
||||
flex-direction: row;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.custom-cover .cover-image {
|
||||
width: 100%;
|
||||
margin-top: 8px;
|
||||
height: 180px;
|
||||
}
|
||||
.cover-tag {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 0;
|
||||
width: 100px;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding-left: 15px;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
background-image: url("/static/icons/left_tip.png");
|
||||
background-repeat:no-repeat;
|
||||
background-size:auto;
|
||||
}
|
||||
.cover-tag .uni-subtitle {
|
||||
margin-left: 5px;
|
||||
}
|
||||
.tag-list {
|
||||
display: flex;
|
||||
}
|
||||
.tag-list .uni-tag {
|
||||
margin-right: 5px;
|
||||
}
|
||||
.cover-content {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 40px;
|
||||
background-color: rgba($color: #000000, $alpha: 0.4);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding-left: 15px;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.card-actions {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
height: 45px;
|
||||
border-top: 1px #eee solid;
|
||||
}
|
||||
|
||||
.card-actions-item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.card-actions-item-text {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
margin-left: 5px;
|
||||
}
|
||||
.price-row {
|
||||
margin-top: 12px;
|
||||
}
|
||||
.price {
|
||||
margin-right: 5px;
|
||||
color: #999;
|
||||
font-size: 16px;
|
||||
}
|
||||
.price-new {
|
||||
color: red;
|
||||
font-size: 25px;
|
||||
}
|
||||
.uni-card__content {
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@ -1,22 +1,64 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<navigator class="nav-bar" open-type="navigateBack">
|
||||
<uni-icons type="left" size="30"></uni-icons>
|
||||
</navigator>
|
||||
<!-- 幻灯 -->
|
||||
<image-swiper v-model="imgSwiperData"></image-swiper>
|
||||
<view class="game-info">
|
||||
<uni-title type ="h1" title="游戏中文名"></uni-title>
|
||||
<uni-title type="h2" title="游戏E文名"></uni-title>
|
||||
<view class="tag-list">
|
||||
<uni-tag v-for="tag in tagList" :text="tag" inverted="true" type="error"></uni-tag>
|
||||
</view>
|
||||
<view class="info-content">
|
||||
<text>
|
||||
在本作中关于“口袋妖怪”未来世界的章节将逐渐明了，将是个涉及大地和海洋的壮大的故事。主人公在游戏中必须要去阻止在“红宝石/蓝宝石”中出现的两大势力的阴谋。游戏中将加入可以游玩7大战斗的“BATTLE FRONTIER”。其中包括靠战斗来一决胜负的“BATTLE DOOM”，玩家将靠3匹口袋妖怪进行连战；还有靠运气的“BATTLE TUBE”，是从3个入口中选择其一，最终目标是到达终点的充满挑战的设施。
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="price-list">
|
||||
<view class="price-title">低价排名</view>
|
||||
<uni-list>
|
||||
<uni-list-item v-for="item in priceList" >
|
||||
<price-cell></price-cell>
|
||||
</uni-list-item>
|
||||
<uni-list-item>
|
||||
<text class="more-price-cell">更多商店价格</text>
|
||||
</uni-list-item>
|
||||
</uni-list>
|
||||
</view>
|
||||
<view class="price-list">
|
||||
<view class="price-title">DLC</view>
|
||||
<uni-list>
|
||||
<uni-list-item v-for="item in dlcList" >
|
||||
<dlc-cell></dlc-cell>
|
||||
</uni-list-item>
|
||||
</uni-list>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue } from 'vue-property-decorator'
|
||||
import ImageSwiper from '@/components/ImageSwiper/index.vue'
|
||||
import PriceCell from '@/components/PriceCell/index.vue'
|
||||
import DlcCell from '@/components/DlcCell/index.vue'
|
||||
|
||||
@Component({
|
||||
name: 'GameInfo',
|
||||
components: {
|
||||
ImageSwiper
|
||||
ImageSwiper,
|
||||
PriceCell,
|
||||
DlcCell
|
||||
}
|
||||
})
|
||||
export default class extends Vue{
|
||||
private imgSwiperData: string[] = []
|
||||
private tagList: string[] = ['fc', 'nb']
|
||||
private priceList: string[] = ['1', '2', '3']
|
||||
private dlcList: string[] = ['1', '2', '3']
|
||||
|
||||
onLoad() {
|
||||
this.imgSwiperData = [
|
||||
'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/094a9dc0-50c0-11eb-b680-7980c8a877b8.jpg',
|
||||
@ -30,11 +72,51 @@ export default class extends Vue{
|
||||
uni.setNavigationBarTitle({
|
||||
title: "游戏详情"
|
||||
});
|
||||
}
|
||||
private onClickBack() {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
.game-info{
|
||||
padding: 5px 8px;
|
||||
}
|
||||
.tab-list .uni-tag {
|
||||
margin-right: 5px;
|
||||
}
|
||||
.info-content {
|
||||
font-size: 14px;
|
||||
padding: 5px 0;
|
||||
}
|
||||
.tag-list {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
padding: 5px 0;
|
||||
}
|
||||
.tag-list .uni-tag {
|
||||
margin-right: 5px;
|
||||
}
|
||||
.nav-bar {
|
||||
height: 45px;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
.price-title {
|
||||
padding: 0 8px;
|
||||
}
|
||||
.more-price-cell{
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
height: 40px;
|
||||
vertical-align: middle;
|
||||
line-height: 40px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user