Files
XiaoLingHou_web/components/SelectProductionMethod/SelectProductionMethod.vue
2023-12-29 00:08:10 +08:00

93 lines
1.9 KiB
Vue

<template>
<u-popup
style="position: absolute"
:show="isViewLetter"
@close="close"
:closeable="true"
mode="center"
customStyle="border-radius: 40rpx;"
>
<view class="content-main">
<view class="content-title"> 请选择制作方式 </view>
<view
class="content-item"
v-for="(item ,index) in productionType"
:key="item.id"
>
<view class="content-item-button" @click="$emit('selectPlan', item)">
{{ item.title }}
</view>
<view class="content-item-explain">
{{ item.explain }}
<text style="color: #ce7a2c" v-if="item.price">{{ item.price }}</text
>{{ item.price ? "元/次" : "" }}
</view>
</view>
</view>
</u-popup>
</template>
<script>
export default {
name: "SelectProductionMethod",
created() {
this.productionType = this.$store.productionType;
console.log(this.productionType, "111111111111111");
},
data() {
return {
isViewLetter: true,
productionType: false,
};
},
methods: {
close() {
this.$emit("close");
},
},
};
</script>
<style lang="scss">
.content-main {
width: 600rpx;
height: 654rpx;
box-sizing: border-box;
padding: 30rpx;
display: flex;
flex-direction: column;
align-items: center;
}
.content-title {
width: 238rpx;
height: 45rpx;
font-size: 34rpx;
font-weight: bold;
margin-bottom: 30rpx;
}
.content-item-button {
margin-top: 40rpx;
flex: 1;
background: linear-gradient(to bottom right, #e8b648, #e08745);
height: 80rpx;
width: 500rpx;
font-size: 34rpx;
border-radius: 20rpx;
color: white;
display: flex;
align-items: center;
justify-content: center;
}
.content-item-explain {
width: 100%;
font-size: 26rpx;
font-family: OPPOSans Regular-Regular, OPPOSans Regular;
font-weight: 400;
color: #111111;
text-align: center;
margin-top: 10rpx;
}
</style>