change layout of wx
This commit is contained in:
parent
88f263bce8
commit
c66d211649
@ -12,28 +12,22 @@
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<uni-row class="demo-uni-row">
|
||||
<uni-col :span="24">
|
||||
<view class="tag-row">
|
||||
<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">
|
||||
</view>
|
||||
<view class="demo-uni-row price-row">
|
||||
<view class="">
|
||||
<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">
|
||||
<view class="discount-col">
|
||||
<text class="price price-discount">折扣还剩7天</text>
|
||||
</view>
|
||||
</uni-col>
|
||||
</uni-row>
|
||||
</view>
|
||||
<view slot="actions" class="card-actions">
|
||||
<view class="card-actions-item" @click="actionsClick('分享')">
|
||||
<uni-icons type="pengyouquan" size="18" color="#999"></uni-icons>
|
||||
@ -96,7 +90,7 @@ export default class extends Vue{
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding-left: 15px;
|
||||
font-size: 14px;
|
||||
font-size: 24rpx;
|
||||
color: #fff;
|
||||
background-image: url("/static/icons/left_tip.png");
|
||||
background-repeat:no-repeat;
|
||||
@ -105,11 +99,15 @@ export default class extends Vue{
|
||||
.cover-tag .uni-subtitle {
|
||||
margin-left: 5px;
|
||||
}
|
||||
.tag-row {
|
||||
display: flex;
|
||||
}
|
||||
.tag-list {
|
||||
display: flex;
|
||||
}
|
||||
.tag-list .uni-tag {
|
||||
margin-right: 5px;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
uni-tag {
|
||||
margin-right: 5px;
|
||||
@ -125,7 +123,7 @@ uni-tag {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding-left: 15px;
|
||||
font-size: 14px;
|
||||
font-size: 26rpx;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@ -145,28 +143,34 @@ uni-tag {
|
||||
}
|
||||
|
||||
.card-actions-item-text {
|
||||
font-size: 12px;
|
||||
font-size: 20rpx;
|
||||
color: #666;
|
||||
margin-left: 5px;
|
||||
}
|
||||
uni-tag {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
.price-row {
|
||||
margin-top: 12px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.price {
|
||||
margin-right: 5px;
|
||||
color: #999;
|
||||
font-size: 16px;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
.price-new {
|
||||
color: red;
|
||||
font-size: 25px;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
.price-raw {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
.price-discount {
|
||||
font-size: 14px;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
.discount-col {
|
||||
padding-top: 4px;
|
||||
float: right;
|
||||
}
|
||||
.uni-card__content {
|
||||
padding-top: 5px;
|
||||
|
@ -54,6 +54,7 @@ export default class extends Vue{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: auto;
|
||||
padding-left: 5px;
|
||||
}
|
||||
.right-part {
|
||||
width: 15%;
|
||||
|
@ -14,11 +14,11 @@
|
||||
<text>游戏英文名</text>
|
||||
</view>
|
||||
<view class="tags-view">
|
||||
<uni-tag v-for="tag in tagList" :text="tag" inverted="true" type="error"></uni-tag>
|
||||
<uni-tag class="game-tag" v-for="tag in tagList" :text="tag" inverted="true" type="error"></uni-tag>
|
||||
</view>
|
||||
<view class="price-view">
|
||||
<view class="price">¥100</view>
|
||||
<view>¥150(日本)</view>
|
||||
<view class="price-raw">¥150(日本)</view>
|
||||
<uni-tag text="25%折扣" type="error"></uni-tag>
|
||||
</view>
|
||||
</view>
|
||||
@ -64,21 +64,27 @@ export default class extends Vue{
|
||||
margin-left: 5px;
|
||||
}
|
||||
.title-view{
|
||||
font-size: 16px;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
.sub-title-view {
|
||||
font-size: 12px;
|
||||
color: #666666;
|
||||
font-size: 22rpx;
|
||||
color: #999999;
|
||||
}
|
||||
.price-view {
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
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: 22rpx;
|
||||
margin: auto;
|
||||
}
|
||||
.tags-view {
|
||||
display: flex;
|
||||
@ -87,8 +93,12 @@ export default class extends Vue{
|
||||
justify-content: flex-start;
|
||||
padding: 5px 0;
|
||||
}
|
||||
.game-tag text {
|
||||
padding: 2px 5px!important;
|
||||
}
|
||||
uni-tag {
|
||||
margin-right: 5px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.uni-tag {
|
||||
margin-right: 5px;
|
||||
|
@ -58,6 +58,9 @@ export default class extends Vue{
|
||||
big-img-cell {
|
||||
width: 100%;
|
||||
}
|
||||
.uni-list-item-box {
|
||||
padding: 0!important;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
@ -38,5 +38,7 @@ export default class extends Vue{
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
price-cell {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
@ -44,4 +44,7 @@ export default class extends Vue{
|
||||
game-small-cell{
|
||||
width: 100%;
|
||||
}
|
||||
.uni-list-item-box {
|
||||
padding: 0!important;
|
||||
}
|
||||
</style>
|
||||
|
Loading…
x
Reference in New Issue
Block a user