<view class="shade" v-show="!open">
　　<view class="priceImg">
	<image class="close-btu" @click="goToPage('6')" v-show="!open" src="../../static/close-icon.png"></image>//點選按鈕後關閉彈窗
	<image class="copypage" src="../../static/price-img.png"></image>//顯示的彈窗圖片
　　</view>
</view>

<view class="bottom-area" @click="goToPage('6')">　　　　//給這張圖片一個點選事件，點選開啟彈窗
　　<view class="botton-inner-area">
　　　　<image src="../../static/index/img7.png" mode=""></image>
　　　　<text>列印價格</text>
　　</view>
</view>	

data() {
　　return {
	open:true　　//設定開啟和關閉的按鈕，然後取反就完成了
　　}
},

//設定列印價格表
	.box-re {
		width: 100%;　　　　//我在最外層加的大盒子，相當於父盒子，彈窗和父盒子要平級，才可以，不能包括在裡面，不然會沒有效果
		height: 100%;
		position: relative;　　//設定定位，使用這個之後，z-index層級設定，會無效
	}
	.shade {　　　　　　　　　　　//灰色的遮罩層
		width: 100%;
		height: 100%;
		background-color: #000000;
		position: fixed;
		top: 0;
		left: 0;
		background: rgba(0,0,0,0.8)　　　//最好使用RGB，如果使用opacity的話會沒有那個效果
	}
	.priceImg {　　　　　　//包括彈窗裡的內容
		width: 100%;
		height: 100%;
		position: absolute;
		top: 11%;
		left: 10%;
	}
	.close-btu {　　　　　　　　//設定按鈕的大小
		width: 45upx;
		height: 45upx;
		position: absolute;
		top: -6%;
		right: 19%;
	}
	.copypage {　　　　　　　　//設定彈窗圖片的大小
		width: 80%;
		height: 84%;
	}