121 lines
2.5 KiB
Vue
121 lines
2.5 KiB
Vue
<template>
|
|
<view class="s-game-cell" @click="onClick(gData.gameId)">
|
|
<view class="left-part">
|
|
<image
|
|
:src="gData.icon"
|
|
mode="aspectFill"
|
|
></image>
|
|
</view>
|
|
<view class="right-part">
|
|
<view class="title-view">
|
|
<text>{{gData.name}}</text>
|
|
</view>
|
|
<view class="sub-title-view">
|
|
<text>{{gData.subName}}</text>
|
|
</view>
|
|
<view class="tags-view">
|
|
<uni-tag class="game-tag" v-for="tag in gData.tags" :text="tag.name" :inverted="!tag.fill" :type="tag.type"></uni-tag>
|
|
</view>
|
|
<view class="price-view">
|
|
<view class="price">¥{{gData.price}}</view>
|
|
<view class="price-raw">
|
|
<text>¥{{gData.originPrice}}</text>
|
|
<text v-if="gData.priceCountry">({{gData.priceCountry}})</text>
|
|
</view>
|
|
<uni-tag :text="gData.cutOff+'%折扣'" type="error"></uni-tag>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</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: 'GameSmallCell',
|
|
props: ['gData'],
|
|
})
|
|
export default class extends Vue{
|
|
private tagList: string[] = ['t1', 't2']
|
|
|
|
onClick(s: string) {
|
|
console.log('on click: ', s)
|
|
this.$emit("cellClicked", s)
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
.s-game-cell{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
padding: 5px;
|
|
}
|
|
uni-image{
|
|
height: auto;
|
|
}
|
|
.left-part{
|
|
width: 25%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.left-part image {
|
|
width: 25vw;
|
|
--width: 100%;
|
|
height: calc(25vw * 3 / 4);
|
|
}
|
|
.right-part {
|
|
width: 75%;
|
|
margin-left: 5px;
|
|
}
|
|
.title-view{
|
|
font-size: 26rpx;
|
|
}
|
|
.sub-title-view {
|
|
font-size: 22rpx;
|
|
color: #999999;
|
|
}
|
|
.price-view {
|
|
width: 100%;
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
}
|
|
.price-view .price{
|
|
color: red;
|
|
font-size: 28rpx;
|
|
}
|
|
.price-view .price-raw {
|
|
font-size: 18rpx;
|
|
margin: auto;
|
|
}
|
|
.tags-view {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
justify-content: flex-start;
|
|
padding: 5px 0;
|
|
height: 16px;
|
|
}
|
|
.game-tag text {
|
|
padding: 2px 5px!important;
|
|
font-size: 20rpx!important;
|
|
}
|
|
uni-tag {
|
|
margin-right: 5px;
|
|
font-size: 20rpx!important;
|
|
}
|
|
.uni-tag {
|
|
margin-right: 5px;
|
|
}
|
|
</style>
|