This commit is contained in:
THK3121 2023-09-13 16:38:50 +08:00
parent d6ed529c56
commit 81f60ba8a1
2 changed files with 153 additions and 126 deletions

View File

@ -27,14 +27,19 @@
</view> </view>
</view> </view>
<view class='mask' catchtouchmove="true" :hidden='popup.show==false' @tap="closePopup"></view> <view class='mask' style="height: 100vh;" catchtouchmove="true" :hidden='popup.show==false' @tap="closePopup">
</view>
</view> </view>
</template> </template>
<script> <script>
import { goShopDetail } from '@/libs/order.js' import {
import { mapGetters } from "vuex"; goShopDetail
} from '@/libs/order.js'
import {
mapGetters
} from "vuex";
export default { export default {
computed: { computed: {
...mapGetters(['viewColor']), ...mapGetters(['viewColor']),
@ -63,6 +68,7 @@
// //
closePopup() { closePopup() {
this.$set(this.popup, 'show', false); this.$set(this.popup, 'show', false);
this.$emit("closes")
}, },
showPopup() { showPopup() {
this.$set(this.popup, 'show', true); this.$set(this.popup, 'show', true);
@ -105,16 +111,20 @@
transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0);
transition: all .3s cubic-bezier(.25, .5, .5, .9); transition: all .3s cubic-bezier(.25, .5, .5, .9);
max-height: 1000rpx; max-height: 1000rpx;
&.on { &.on {
transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
} }
.header { .header {
position: relative; position: relative;
padding: 40rpx 30rpx; padding: 40rpx 30rpx;
.title { .title {
color: #282828; color: #282828;
font-size: 30rpx; font-size: 30rpx;
} }
.iconfont { .iconfont {
color: #8A8A8A; color: #8A8A8A;
font-size: 28rpx; font-size: 28rpx;
@ -122,6 +132,7 @@
top: 0; top: 0;
right: 0; right: 0;
} }
.icon-guanbi5 { .icon-guanbi5 {
right: 20rpx; right: 20rpx;
color: #8a8a8a; color: #8a8a8a;
@ -132,37 +143,48 @@
font-weight: normal; font-weight: normal;
} }
} }
scroll-view { scroll-view {
max-height: 800rpx; max-height: 800rpx;
} }
.main_count { .main_count {
padding: 0 30rpx 30rpx; padding: 0 30rpx 30rpx;
max-height: 800rpx; max-height: 800rpx;
overflow-y: scroll; overflow-y: scroll;
/* #ifndef MP */ /* #ifndef MP */
&.mb90 { &.mb90 {
margin-bottom: 90rpx; margin-bottom: 90rpx;
} }
/* #endif */ /* #endif */
.list { .list {
margin-bottom: 40rpx; margin-bottom: 40rpx;
height: auto; height: auto;
flex-direction: row; flex-direction: row;
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
} }
.pro_list { .pro_list {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
.picture,.image,uni-image{
.picture,
.image,
uni-image {
width: 200rpx; width: 200rpx;
height: 200rpx; height: 200rpx;
border-radius: 16rpx; border-radius: 16rpx;
} }
.info { .info {
margin-left: 30rpx; margin-left: 30rpx;
position: relative; position: relative;
.bottom { .bottom {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -173,6 +195,7 @@
bottom: 10rpx; bottom: 10rpx;
flex-direction: row; flex-direction: row;
} }
.name { .name {
color: #282828; color: #282828;
font-size: 30rpx; font-size: 30rpx;
@ -180,22 +203,25 @@
display: -webkit-box; display: -webkit-box;
width: 460rpx; width: 460rpx;
} }
.price { .price {
color: var(--view-priceColor); color: var(--view-priceColor);
font-size: 26rpx; font-size: 26rpx;
font-weight: bold; font-weight: bold;
flex-direction: row; flex-direction: row;
align-items: flex-end; align-items: flex-end;
text { text {
font-size: 34rpx; font-size: 34rpx;
} }
} }
.buy-btn { .buy-btn {
color: #fff; color: #fff;
background: var(--view-theme); background: var(--view-theme);
border-radius: 26rpx; border-radius: 28.04rpx 28.04rpx 28.04rpx 28.04rpx;
width: 140rpx; width: 154.21rpx;
height: 48rpx; height: 57.83rpx;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;

View File

@ -56,8 +56,7 @@
videoContext: '' videoContext: ''
}; };
}, },
created() { created() {},
},
watch: { watch: {
}, },
@ -102,13 +101,15 @@
height: 710rpx; height: 710rpx;
position: relative; position: relative;
} }
.product-bg swiper { .product-bg swiper {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: relative; position: relative;
} }
.product-bg .slide-image { .product-bg .slide-image {
width: 100%; width: 100vw;
height: 100%; height: 100%;
border-radius: 16rpx; border-radius: 16rpx;
} }