change layout of wx

This commit is contained in:
zhl 2021-12-14 11:26:43 +08:00
parent 88f263bce8
commit c66d211649
6 changed files with 50 additions and 27 deletions

View File

@ -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;

View File

@ -54,6 +54,7 @@ export default class extends Vue{
display: flex;
flex-direction: column;
margin: auto;
padding-left: 5px;
}
.right-part {
width: 15%;

View File

@ -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;

View File

@ -58,6 +58,9 @@ export default class extends Vue{
big-img-cell {
width: 100%;
}
.uni-list-item-box {
padding: 0!important;
}
</style>

View File

@ -38,5 +38,7 @@ export default class extends Vue{
</script>
<style>
price-cell {
width: 100%;
}
</style>

View File

@ -44,4 +44,7 @@ export default class extends Vue{
game-small-cell{
width: 100%;
}
.uni-list-item-box {
padding: 0!important;
}
</style>