shop4.3.57/components/page-component/goods/u-open-pic.vue

<template>
    <view class="u-attr">
       
        <u-popup v-model="newValue" mode="center"  :safeAreaInsetBottom="true" @close="close">
        <view class="u-content" >
            <view class='u-header main-between'>
				<view>开箱展示</view>
				 <view @click="close"><image class="bd-icon" src="../../../static/image/icon/clear.png"></image></view>
			</view>
            <view class="u-body dir-top-nowrap cross-center">
              <!--  <image class="u-img" :src="img"></image>
                <text class="u-text">申请获取您绑定的手机号</text> -->
               <swiper
                    class="swiper"
                    
                    v-bind:indicator-dots="picList.length>1"
                    circular
                    @change='bannerChange'
                    indicator-color="rgba(255,255,255,.3)"
                    indicator-active-color="#30353c"
                >
                 
                
                    <swiper-item v-for="(item, index) in picList" v-bind:key="index">
                        <view class="swiper-img"
                              @click="clickImage(index)" v-bind:style="{backgroundImage: 'url(' + item.pic_url + ')'}">
                			
                
                        </view>
                    </swiper-item>
                </swiper>
				<view class="bd-subtitle">左右滑动查看开箱展示</view>
            </view>
        </view>
		  
        </u-popup>
    </view>
</template>

<script>
    import uPopup from '../../basic-component/u-popup/u-popup.vue';
    import appPrice from "../goods/app-price.vue";
    import appMemberMark from "../app-member-mark/app-member-mark.vue";

    export default {
        name: "u-open-pic",
        props: {
			newValue:{
				type:Boolean,
				default:true
			},
			picList:{
				type:Array,
				default(){
                    return []
                }
			}
        },
        data() {
            return {
              
            }
        },
        methods: {
			close: function() {
			    this.$emit('closeOpenPic', false);
			},
        },
        components: {
            uPopup,
            appPrice,
            appMemberMark
        },
        computed: {
           
        },
        watch: {
          
        }
    }
</script>

<style scoped lang="scss">
    .u-model {
        width: 750upx;
    }
    .u-top {
        margin: 0 24upx;
        border-bottom: 1upx solid #e2e2e2;
        height: 140upx;
    }
    .u-close-image {
        width: 54upx;
        height: 78upx;
        padding: 24upx 0 24rpx 24rpx;
        margin-left: 24rpx;
    }
    .bd-close-image {
        width: 30upx;
        height: 30upx;
    }
    .u-pic {
        width: 200rpx;
        height: 200rpx;
        padding: 4upx;
        border-radius: 8rpx;
        position: relative;
        top: -64upx;
        background-color: #ffffff;
    }
    .u-img {
        width: 192rpx;
        height: 192rpx;
        background-color: #ffffff;
    }
    .u-info {
        width: 424upx;
        height: 136upx;
        padding: 45upx 0 0 24upx;
    }
    .u-scroll-view {
        width: 100%;
        max-height: calc(80vh - 154upx);
    }
    .u-attr-group {
        margin:24upx 32upx 0 32upx;
        border-bottom: 1upx solid #e2e2e2;
    }
    .u-number {
        height: 124upx;
        margin: 0 32upx;
    }
    .u-group-name {
        margin-bottom: 20upx;
    }
    .u-group-item {
        padding: 15upx 24upx;
        border-radius: 8upx;
        margin:0 20upx 20upx 0;
        font-size: 26upx;
    }
    .u-checked {
        color: #ffffff;
    }
    .u-unchecked {
        background-color: #f2f2f2;
        color: #353535;
    }
    .u-attr_num_0 {
        background-color: #f7f7f7;
        color: #cdcdcd;
    }
    .u-stock {
        font-size: 24upx;
        color: #999999;
    }
    .u-price {
        margin-right: 12upx;
    }
    .u-input {
        width: 88upx;
        height: 60upx;
        background-color: #f7f7f7;
        font-size: 20upx;
        color: #353535;
        text-align: center;
    }
    .u-input-box {
        width: 218upx;
    }
    .u-number-btn {
        height: 60upx;
        width: 60upx;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-position: center;
    }
    .u-number-btn:first-child {
        margin-right: 5upx;
    }
    .u-number-btn:last-child {
        margin-left: 5upx;
    }
    .u-reduced-1 {
        background-image: url("../../../static/image/icon/can-be-reduced.png");
    }
    .u-reduced-0 {
        background-image: url("../../../static/image/cart/can-be-reduced.png");
    }
    .u-added-1 {
        background-image: url("../../../static/image/cart/can-be-added.png");
    }
    .u-text {
        font-size: 26upx;
        color: #666666;
    }
    .u-bottom {
        height: 110upx;
    }
    .u-btn {
        text-align: center;
        line-height: 110upx;
    }
    .u-btn-color {
        color: #ffffff;
    }
	.service_title{  
		padding-top: 10px;
		margin:14px 10px 10px; 
		font-weight: 700;
		font-size: 13px;
	}
	.service_item{
		margin:14px 10px 0px; 
		font-size:26rpx;
		color:#666;
		display:flex;
		justify-content: space-between;
	}
	.service_value{
		display:flex;
		flex-wrap: wrap;
		padding:0px 10px;
	}
	.service_block{
		min-width:46%;
		height: 28px;
		line-height:26px;
		border: 1px solid #f5f5f5;
		border-radius: 16px;
		text-align:center;
		margin-right: 10px;
		margin-top: 10px;
		font-size: 12px;
		background-color: #f5f5f5;
		position: relative;
	}
	.service_block_active{
		color:#f21c1c;
		border:1px solid #f21c1c;
	}
	.swiper {
	    height: #{500rpx};
	width: #{500rpx};
	    .swiper-img {
	        width: 100%;
	        height: #{500rpx};
	        background-size: cover;
	        background-repeat: no-repeat;
	        background-position: center;
	        position: relative;
	    }
	}
	.u-content {
	    background-color: #ffffff;
	}
	
	.u-header {
	   padding: 5upx;
	    border-bottom: 1upx solid #eeeeee;
	    color: #353535;
	    font-size: 28upx;
	}
	.u-img {
	    width: 88upx;
	    height: 88upx;
	    text-align: center;
	    margin: 32upx 0 40upx;
	}
	.u-body {
	    padding: 0 24upx;
	
	}
	.u-text {
	    margin-bottom: 40upx;
	    font-size: 26upx;
	    color: #666666;
	}
	.bd-icon {
	    width: 40upx;
	    height: 40upx;
	}
	.bd-subtitle{
		padding: 5upx;
		font-size: 24upx;
		line-height: 44upx;
		color: #999999;
	}
</style>