样式兼容支付宝小程序

master
gongfuxiang 2022-04-07 00:51:59 +08:00
parent af2c99a840
commit 0db41fb04e
4 changed files with 38 additions and 18 deletions

View File

@ -1,6 +1,6 @@
<template>
<view>
<view v-if="propData.length > 0" class="data-list">
<view v-if="propData.length > 0" class="icon-nav-list">
<view v-for="(item, index) in propData" :key="index" class="item">
<view class="item-content" :data-value="item.event_value" :data-type="item.event_type" @tap="navigation_event" :style="'background-color:' + (item.bg_color || '#fff')">
<image :src="item.images_url" mode="aspectFit"></image>
@ -29,11 +29,11 @@
};
</script>
<style>
.data-list {
.icon-nav-list {
overflow: hidden;
margin-bottom: 20rpx;
}
.data-list .item {
.icon-nav-list .item {
width: calc(20% - 20rpx);
float: left;
padding: 20rpx 10rpx 0 10rpx;
@ -41,7 +41,7 @@
cursor: pointer;
/* #endif */
}
.item-content {
.icon-nav-list .item .item-content {
border-radius: 50%;
padding: 20rpx;
text-align: center;
@ -51,11 +51,11 @@
-webkit-box-shadow: 0 2px 12px rgb(226 226 226 / 95%);
box-shadow: 0 2px 12px rgb(226 226 226 / 95%);
}
.data-list .item image {
.icon-nav-list .item image {
width: 50rpx !important;
height: 50rpx !important;
}
.data-list .item .title {
.icon-nav-list .item .title {
margin-top: 6rpx;
font-size: 28rpx;
text-align: center;

View File

@ -14,8 +14,8 @@
<image class="icon" :src="common_static_url+'chat-icon.png'" mode="scaleToFill"></image>
<!-- #endif -->
<!-- #ifdef MP-ALIPAY -->
<button open-type="contact">
<contact-button :tnt-inst-id="mini_alipay_tnt_inst_id" :scene="mini_alipay_scene" :alipay-card-no="mini_alipay_openid || ''" :icon="common_static_url+'chat-icon.png'" size="21px*21px" />
<button open-type="contact" class="alipay-contact">
<contact-button :tnt-inst-id="mini_alipay_tnt_inst_id" :scene="mini_alipay_scene" :alipay-card-no="mini_alipay_openid || ''" :icon="common_static_url+'chat-icon.png'" size="40rpx*40rpx" />
<!-- #endif -->
<!-- #ifdef H5 || APP -->
<button type="default" @tap="call_event">
@ -41,8 +41,8 @@
</button>
<!-- #endif -->
<!-- #ifdef MP-ALIPAY -->
<button open-type="contact" :class="common_ent">
<contact-button :tnt-inst-id="mini_alipay_tnt_inst_id" :scene="mini_alipay_scene" :alipay-card-no="mini_alipay_openid || ''" :icon="common_static_url+'online-service-icon.png'" size="21px*21px" />
<button open-type="contact" :class="'alipay-contact '+common_ent">
<contact-button :tnt-inst-id="mini_alipay_tnt_inst_id" :scene="mini_alipay_scene" :alipay-card-no="mini_alipay_openid || ''" :icon="common_static_url+'online-service-icon.png'" size="40rpx*40rpx" />
</button>
<!-- #endif -->
<!-- #ifdef H5 || APP -->
@ -257,12 +257,6 @@
width: 21px !important;
height: 21px !important;
}
/* #ifdef MP-ALIPAY */
.online-service-event-submit contact-button {
line-height: initial;
display: block;
}
/* #endif */
.goods-chat-container button {
padding: 0;
border: 0;
@ -277,5 +271,17 @@
}
.goods-chat-container .text {
margin-top: -10rpx;
}
}
/* #ifdef MP-ALIPAY */
.goods-chat-container .alipay-contact {
margin-top: 10rpx;
}
.goods-chat-container .alipay-contact .text {
margin-top: -5rpx;
}
.online-service-event-submit contact-button {
line-height: initial;
display: block;
}
/* #endif */
</style>

View File

@ -18,7 +18,8 @@
.header-top {
padding-right: 250rpx;
/* #ifdef MP-ALIPAY */
padding-right: 255rpx;
padding-top: 20rpx !important;
padding-right: 20rpx;
/* #endif */
/* #ifdef H5 || APP */
padding-right: 20rpx;
@ -33,6 +34,9 @@
}
.nav-search {
width: calc(100% - 90rpx);
/* #ifdef MP-ALIPAY */
width: 100%;
/* #endif */
}
/**
@ -90,6 +94,9 @@
.tablecode {
background: rgb(255 255 255 / 60%);
padding: 2rpx 20rpx;
/* #ifdef MP-ALIPAY */
margin-top: 15rpx;
/* #endif */
}
/**
@ -101,6 +108,9 @@
/* #ifdef H5 || APP */
height: calc(100vh - 390rpx);
/* #endif */
/* #ifdef MP-ALIPAY */
height: calc(100vh - 400rpx);
/* #endif */
}
/**
@ -185,6 +195,8 @@
top: 0;
right: 0;
line-height: 88rpx;
height: 88rpx;
border: 0;
}
/**

View File

@ -7,9 +7,11 @@
<!-- 顶部 -->
<view v-if="is_single_page == 0" class="header-top padding-horizontal-main" :style="'padding-top:'+(status_bar_height+8)+'px;'">
<!-- 返回 -->
<!-- #ifndef MP-ALIPAY -->
<view class="nav-back dis-inline-block round tc va-m" @tap="top_nav_left_back_event">
<uni-icons type="arrowleft" size="20" color="#fff"></uni-icons>
</view>
<!-- #endif -->
<!-- 搜索 -->
<view class="nav-search fr va-m">
<!-- #ifndef H5 || MP-KUAISHOU -->