You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

120 lines
2.1 KiB

<template>
<div class="order-panel">
<!-- 订单操作面板组件 -->
<u-popup :show="open" :round="20" closeable @close="close">
<view class="order-panel-body">
<view class="order-panel-title">{{ title }}</view>
<view class="product-info">
<view class="img-box">
<img :src="url" alt="" />
<view class="mask-layer">
{{ $t('page.order.common') + " " + num + " " + $t('page.order.piece') }}
</view>
</view>
</view>
<view class="desc">
{{ desc }}
</view>
<div class="btn">
<u-button @click="definiteExecution()" type="primary" color="#ED762F" shape="circle" :text="$t('page.order.ok')"></u-button>
</div>
</view>
</u-popup>
</div>
</template>
<script>
let src = '/static/product/8.png'
export default {
data() {
return {
src
}
},
props : {
open : {
type : Boolean,
default : false
},
title : {
type : String,
default : ''
},
desc : {
type : String,
default : '',
},
num : {
type : String,
default : 1
},
url : {
type : String,
default : src,
}
},
created() {
},
methods: {
close() {
this.$emit('closePanel');
},
definiteExecution(){
this.$emit('definiteExecution')
}
}
}
</script>
<style lang="scss" scoped>
.order-panel {
.order-panel-body{
min-height: 200px;
.order-panel-title{
font-size: 18px;
height: 45px;
line-height: 45px;
text-align: center;
}
.product-info{
display: flex;
justify-content: center;
.img-box{
position: relative;
width: 200rpx;
img{
width: 100%;
}
.mask-layer{
position: absolute;
bottom: 0;
left: 0;
height: 60rpx;
line-height: 60rpx;
width: 100%;
color: white;
text-align: center;
font-size: 30rpx;
background: rgba(0,0,0,.5);
}
}
}
.desc{
width: 490rpx;
margin: 15px auto;
text-align: center;
font-size: 28rpx;
}
.btn{
padding: 10px;
.u-button{
height: 100rpx;
&::v-deep .u-button__text{
font-size: 30rpx !important;
}
}
}
}
}
</style>