|
|
@@ -1,308 +1,27 @@
|
|
|
+<!--
|
|
|
+ 花店后台新增商品成功页
|
|
|
+ 谁用:hdApp 管理端创建花束后跳转
|
|
|
+ 解决问题:提示添加成功,并提供返回入口
|
|
|
+-->
|
|
|
<template>
|
|
|
<view class="app-content">
|
|
|
<view class="billing_box_bg">
|
|
|
- <view class="top-view"> </view>
|
|
|
+ <view class="top-view"></view>
|
|
|
<view class="result-view">
|
|
|
- <view class="iconfont iconchenggong"></view>
|
|
|
- <view class="result-title">添加成功</view>
|
|
|
- <button class="admin-button-com middle blue" style="width:20vw;" @click="goBack">返回</button>
|
|
|
- <view class="form-container">
|
|
|
- <form>
|
|
|
- <view class="module-com input-line-wrap">
|
|
|
-
|
|
|
- <tui-list-cell class="line-cell" :hover="false">
|
|
|
- <view class="tui-title">名称</view>
|
|
|
- <view>{{ goodsName }}</view>
|
|
|
- </tui-list-cell>
|
|
|
-
|
|
|
- <tui-list-cell class="line-cell" :hover="false">
|
|
|
- <view class="tui-title">数量</view>
|
|
|
- <input v-model="form.num" placeholder-class="phcolor" class="tui-input" name="num" @focus="form.num=''" placeholder="填写数量" maxlength="50" type="number" />
|
|
|
- </tui-list-cell>
|
|
|
-
|
|
|
- <tui-list-cell class="line-cell" :hover="false" :arrow="false" >
|
|
|
- <view class="tui-title">单价</view>
|
|
|
- <input type="digit" @focus="goodsPrice=''" style="width:260upx;" v-model="goodsPrice" placeholder-class="tui-placeholder" placeholder="填写金额" />
|
|
|
- <text style="color:#3385FF;font-weight:bold;">合计 ¥<text>{{orderTotalPrice}}</text></text>
|
|
|
- </tui-list-cell>
|
|
|
-
|
|
|
- <tui-list-cell class="line-cell" :hover="false" :arrow="false">
|
|
|
- <view class="tui-title">收款方式</view>
|
|
|
- <button @click="form.hasPay = 4" class="admin-button-com middle" :class="form.hasPay == 4 ? 'blue' : 'default'">余额</button>
|
|
|
- <button @click="form.hasPay = 0" class="admin-button-com middle" :class="form.hasPay == 0 ? 'blue' : 'default'" style="margin-left:6upx;">扫码</button>
|
|
|
- <button @tap="form.hasPay = 1" class="admin-button-com middle" :class="form.hasPay == 1 ? 'blue' : 'default'" style="margin-left:6upx;">线下</button>
|
|
|
- <button @tap="form.hasPay = 2" class="admin-button-com middle" :class="form.hasPay == 2 ? 'blue' : 'default'" style="margin-left:6upx;">挂账</button>
|
|
|
- </tui-list-cell>
|
|
|
-
|
|
|
- <tui-list-cell class="line-cell" :arrow="true" v-if="form.hasPay == 1">
|
|
|
- <view class="tui-title">线下渠道</view>
|
|
|
- <picker mode="selector" :value="form.payWay" :range="payWayList" range-key="name" @change="payWayChange" class="tui-input" >
|
|
|
- <input v-model="form.payWay" name="payWay" type="text" hidden />
|
|
|
- <view style="padding:6upx 0 6upx 0;">{{payWayList[payWayindex].name}}</view>
|
|
|
- </picker>
|
|
|
- </tui-list-cell>
|
|
|
-
|
|
|
- <tui-list-cell class="line-cell" :hover="false">
|
|
|
- <view class="tui-title">配送方式</view>
|
|
|
- <button @tap="setSendType(0)" class="admin-button-com middle" :class="form.sendType == 0 ? 'blue' : 'default'">送货</button>
|
|
|
- <button @tap="setSendType(1)" class="admin-button-com middle" :class="form.sendType == 1 ? 'blue' : 'default'" style="margin-left:6upx;">自取</button>
|
|
|
- <button @click="setSendType(2)" class="admin-button-com middle" :class="form.sendType == 2 ? 'blue' : 'default'" style="margin-left:6upx;">跑腿</button>
|
|
|
- <button @click="setSendType(3)" class="admin-button-com middle" :class="form.sendType == 3 ? 'blue' : 'default'" style="margin-left:6upx;">物流</button>
|
|
|
- </tui-list-cell>
|
|
|
-
|
|
|
- <tui-list-cell class="line-cell" :hover="false" :arrow="true">
|
|
|
- <view class="tui-title" v-if="form.sendType == 1">取花日期</view>
|
|
|
- <view class="tui-title" v-else>配送日期</view>
|
|
|
- <view class="uni-input" v-if="form.reachDate==''" @click="bindReachDateChange">
|
|
|
- <view style="width:410upx;font-size:32upx;color:#CCCCCC;">今天</view>
|
|
|
- </view>
|
|
|
- <view class="uni-input" @click="bindReachDateChange">
|
|
|
- <view style="width:410upx;font-size:32upx;">{{form.reachDate}}</view>
|
|
|
- </view>
|
|
|
- </tui-list-cell>
|
|
|
-
|
|
|
- <tui-list-cell class="line-cell" :hover="false" :arrow="true">
|
|
|
- <view class="tui-title" v-if="form.sendType == 1">取花时间</view>
|
|
|
- <view class="tui-title" v-else>配送时间</view>
|
|
|
- <view class="uni-input" style="width:450upx;font-size:32upx;" @click="openTimePopup">{{form.reachPeriod}}</view>
|
|
|
- </tui-list-cell>
|
|
|
-
|
|
|
- <tui-list-cell class="line-cell" :hover="false">
|
|
|
- <view class="tui-title">备注内容</view>
|
|
|
- <input v-model="form.remark" placeholder-class="phcolor" class="tui-input" placeholder-style="color:#ccc" name="remark" placeholder="选填" />
|
|
|
- </tui-list-cell>
|
|
|
-
|
|
|
- <tui-list-cell class="line-cell" :hover="false">
|
|
|
- <view class="tui-title">客户</view>
|
|
|
- <view>快捷开单</view>
|
|
|
- </tui-list-cell>
|
|
|
-
|
|
|
- <tui-list-cell class="line-cell" :hover="false">
|
|
|
- <view class="tui-title">制作</view>
|
|
|
- <button @tap="form.needWork = 1" class="admin-button-com middle" :class="form.needWork == 1 ? 'blue' : 'default'">需要</button>
|
|
|
- <button @tap="form.needWork = 0" class="admin-button-com middle" :class="form.needWork == 0 ? 'blue' : 'default'" style="margin-left:30upx;">不要</button>
|
|
|
- </tui-list-cell>
|
|
|
-
|
|
|
- <tui-list-cell class="line-cell" :hover="false" :arrow="false">
|
|
|
- <view class="tui-title">打印小票</view>
|
|
|
- <button @tap="form.needPrint = 2" class="admin-button-com middle" :class="form.needPrint == 2? 'blue' : 'default'">不打</button>
|
|
|
- <button @click="form.needPrint = 1" class="admin-button-com middle" :class="form.needPrint == 1 ? 'blue' : 'default'" style="margin-left:30upx;">打印</button>
|
|
|
- </tui-list-cell>
|
|
|
-
|
|
|
- </view>
|
|
|
- </form>
|
|
|
- <view class="button-group">
|
|
|
- <button class="admin-button-com big default" @click="goBack" style="width:200upx;">取消</button>
|
|
|
- <button class="admin-button-com big blue" @click="confirmOrder" style="width:200upx;margin-left:50upx;">确认</button>
|
|
|
+ <view class="iconfont iconchenggong"></view>
|
|
|
+ <view class="result-title">添加成功</view>
|
|
|
+ <button class="admin-button-com middle blue" style="width:20vw;" @click="goBack">返回</button>
|
|
|
</view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- 配送时间选择弹框 -->
|
|
|
- <uni-popup ref="timePopup" type="bottom" background-color="#fff">
|
|
|
- <view class="time-picker-popup">
|
|
|
- <view class="popup-header">
|
|
|
- <text class="popup-title">选择配送时间</text>
|
|
|
- <text class="popup-close" @click="closeTimePopup">×</text>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="time-sections">
|
|
|
- <!-- 小时选择 -->
|
|
|
- <view class="time-section">
|
|
|
- <view class="section-title">小时</view>
|
|
|
- <view class="hours-wrapper">
|
|
|
- <scroll-view
|
|
|
- scroll-y="true"
|
|
|
- class="hours-scroll"
|
|
|
- enhanced="true"
|
|
|
- show-scrollbar="true"
|
|
|
- >
|
|
|
- <view class="hours-buttons">
|
|
|
- <button
|
|
|
- v-for="(hour, index) in timeOptions[0]"
|
|
|
- :key="index"
|
|
|
- class="time-button"
|
|
|
- :class="{ active: selectedHour == hour }"
|
|
|
- @click="selectedHour = hour"
|
|
|
- >{{ hour }}</button>
|
|
|
- </view>
|
|
|
- </scroll-view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- 分钟选择 -->
|
|
|
- <view class="time-section">
|
|
|
- <view class="section-title">分钟</view>
|
|
|
- <view class="minutes-wrapper">
|
|
|
- <scroll-view
|
|
|
- scroll-y="true"
|
|
|
- class="minutes-scroll"
|
|
|
- enhanced="true"
|
|
|
- show-scrollbar="true"
|
|
|
- >
|
|
|
- <view class="minutes-buttons">
|
|
|
- <button
|
|
|
- v-for="(minute, index) in timeOptions[1]"
|
|
|
- :key="index"
|
|
|
- class="time-button"
|
|
|
- :class="{ active: selectedMinute == minute }"
|
|
|
- @click="selectedMinute = minute"
|
|
|
- >{{ minute }}</button>
|
|
|
- </view>
|
|
|
- </scroll-view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- 操作按钮 -->
|
|
|
- <view class="popup-footer">
|
|
|
- <button class="footer-button default" @click="closeTimePopup">取消</button>
|
|
|
- <button class="footer-button blue" @click="confirmTime">确认</button>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </uni-popup>
|
|
|
-
|
|
|
- <!-- 配送日期选择器蒙板 -->
|
|
|
- <view v-if="reachDatePickerShow" class="date-picker-mask" @click="reachDatePickerShow = false"></view>
|
|
|
-
|
|
|
- <mx-date-picker :show="reachDatePickerShow" format="yyyy-mm-dd" type="date" :value="reachDatePickerValue" :show-tips="true" @confirm="confirmReachDatePicker" @cancel="reachDatePickerShow = false" />
|
|
|
</view>
|
|
|
</template>
|
|
|
<script>
|
|
|
-import TuiListCell from "@/components/plugin/list-cell";
|
|
|
-import { createOrder } from "@/api/order";
|
|
|
-import { mapGetters } from "vuex";
|
|
|
-import MxDatePicker from '@/components/mx-datepicker/mx-datepicker.vue';
|
|
|
-
|
|
|
export default {
|
|
|
name: "result",
|
|
|
- components: {
|
|
|
- TuiListCell,
|
|
|
- MxDatePicker
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- form: {
|
|
|
- hasPay: 4,
|
|
|
- payWay: 0,
|
|
|
- num: 1,
|
|
|
- sendType: 0,
|
|
|
- reachDate: '',
|
|
|
- reachPeriod: "12:00",
|
|
|
- remark: '',
|
|
|
- needWork:1,
|
|
|
- needPrint:2
|
|
|
- },
|
|
|
- goodsPrice: '',
|
|
|
- payWayindex: 0,
|
|
|
- payWayList: [
|
|
|
- {name: "线下微信", id: 0},
|
|
|
- {name: "线下支付宝", id: 1},
|
|
|
- {name: "现金", id: 4},
|
|
|
- {name: "银行卡", id: 5}
|
|
|
- ],
|
|
|
- timeOptions: [
|
|
|
- ['00', '01', '02','03','04','05','06','07','08','09','10','11','12','13', '14','15','16','17','18','19','20','21','22','23'],
|
|
|
- ['00', '05', '10','15','20','25','30','35','40','45','50','55']
|
|
|
- ],
|
|
|
- goodsName:'',
|
|
|
- goodsId:0,
|
|
|
- selectedHour: '12', // 选中的小时
|
|
|
- selectedMinute: '00', // 选中的分钟
|
|
|
- reachDatePickerShow: false,
|
|
|
- reachDatePickerValue: ''
|
|
|
- };
|
|
|
- },
|
|
|
- computed: {
|
|
|
- ...mapGetters(["getLoginInfo", "getMyShopInfo"]),
|
|
|
- orderTotalPrice() {
|
|
|
- let price = 0;
|
|
|
- if (Number(this.goodsPrice) > 0 && Number(this.form.num) > 0) {
|
|
|
- price = Number(this.goodsPrice) * Number(this.form.num);
|
|
|
- price = parseFloat(price.toFixed(2));
|
|
|
- }
|
|
|
- return price;
|
|
|
- }
|
|
|
- },
|
|
|
- onLoad(options) {
|
|
|
- this.goodsName = options.name?options.name:''
|
|
|
- this.goodsId = options.id?options.id:0
|
|
|
- },
|
|
|
methods: {
|
|
|
- init() {
|
|
|
-
|
|
|
- },
|
|
|
- setSendType (type) {
|
|
|
- this.form.sendType = type
|
|
|
- },
|
|
|
+ // 返回上一页,关闭当前成功提示
|
|
|
goBack() {
|
|
|
uni.navigateBack({})
|
|
|
- },
|
|
|
- confirmOrder() {
|
|
|
- let product = [{productId:this.goodsId,bigNum:this.form.num,smallNum:null,property:0,num:this.form.num,unitType:0,unitPrice:this.goodsPrice}]
|
|
|
- let json = JSON.stringify(product)
|
|
|
- let customId = this.getMyShopInfo && Number(this.getMyShopInfo.defaultCustomId)>0 ? this.getMyShopInfo.defaultCustomId : 0
|
|
|
- if(Number(customId)<=0){
|
|
|
- this.$msg('请设置快捷开单的客户')
|
|
|
- return false
|
|
|
- }
|
|
|
- //dealPrice=1 表示花束卖的价跟原价不一致,也要强制提交
|
|
|
- let params = {...this.form,modifyPrice: this.orderTotalPrice,version:3,orderType:1,product:json,customId:customId,dealPrice:1};
|
|
|
-
|
|
|
- this.$util.confirmModal({content:'确认提交'},() => {
|
|
|
- uni.showLoading({mask:true})
|
|
|
- createOrder(params).then((res) => {
|
|
|
- uni.hideLoading()
|
|
|
- if(res.code == 1){
|
|
|
- const {data: { id, orderSn,actPrice }} = res;
|
|
|
- if(this.form.hasPay == 0){
|
|
|
- this.$util.pageTo({ url: '/admin/billing/toPay',type:2,query: {orderId:id,orderSn:orderSn,actPrice:actPrice}})
|
|
|
- }else{
|
|
|
- this.$util.pageTo({ url: '/admin/billing/result?orderId='+id,type:2})
|
|
|
- }
|
|
|
- }
|
|
|
- })
|
|
|
- })
|
|
|
- },
|
|
|
- payWayChange(e) {
|
|
|
- let index = e.detail.value;
|
|
|
- this.payWayindex = index;
|
|
|
- this.form.payWay = this.payWayList[index].id;
|
|
|
- },
|
|
|
- selTimeFn(e) {
|
|
|
- this.form.reachDate = e.detail.value;
|
|
|
- },
|
|
|
- bindReachDateChange(){
|
|
|
- this.reachDatePickerShow = true
|
|
|
- this.reachDatePickerValue = this.form.reachDate
|
|
|
- },
|
|
|
- confirmReachDatePicker(e) {
|
|
|
- this.form.reachDate = e.value
|
|
|
- this.reachDatePickerShow = false
|
|
|
- },
|
|
|
- bindTimeChange(event) {
|
|
|
- let val = event.detail.value;
|
|
|
- let before = Number(val[0]);
|
|
|
- let after = Number(val[1]);
|
|
|
- let timeOptions = this.timeOptions;
|
|
|
- this.form.reachPeriod = timeOptions[0][before]+':'+timeOptions[1][after];
|
|
|
- },
|
|
|
- openTimePopup() {
|
|
|
- // 初始化为当前选中的时间
|
|
|
- const [hour, minute] = this.form.reachPeriod.split(':')
|
|
|
- this.selectedHour = hour
|
|
|
- this.selectedMinute = minute
|
|
|
- this.$refs.timePopup.open()
|
|
|
- },
|
|
|
- // 关闭时间选择弹框
|
|
|
- closeTimePopup() {
|
|
|
- this.$refs.timePopup.close()
|
|
|
- },
|
|
|
- // 确认时间选择
|
|
|
- confirmTime() {
|
|
|
- this.form.reachPeriod = `${this.selectedHour}:${this.selectedMinute}`
|
|
|
- this.closeTimePopup()
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
@@ -321,7 +40,7 @@ export default {
|
|
|
left: 0;
|
|
|
width: 100%;
|
|
|
height: 299upx;
|
|
|
- background: #3385ff;
|
|
|
+ background: #09C567;
|
|
|
border-radius: 0upx 0upx 83upx 83upx;
|
|
|
}
|
|
|
.result-view {
|
|
|
@@ -342,213 +61,6 @@ export default {
|
|
|
margin: 10upx 0 10upx;
|
|
|
font-size: 32upx;
|
|
|
}
|
|
|
- .form-container {
|
|
|
- width: 100%;
|
|
|
- .line-cell {
|
|
|
- .tui-title {
|
|
|
- width: 210upx;
|
|
|
- color: $fontColor2;
|
|
|
- }
|
|
|
- .tui-input {
|
|
|
- width: calc(100% - 210upx);
|
|
|
- font-size: 28upx;
|
|
|
- }
|
|
|
- .phcolor {
|
|
|
- color: #ccc;
|
|
|
- }
|
|
|
- }
|
|
|
- .button-group {
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- margin-top: 40upx;
|
|
|
- padding: 0 30upx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-/* 时间选择弹窗样式 */
|
|
|
-.time-picker-popup {
|
|
|
- width: 100%;
|
|
|
- background: #fff;
|
|
|
- border-radius: 20upx 20upx 0 0;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- max-height: 94vh;
|
|
|
- padding: 0 0 120upx 0;
|
|
|
-}
|
|
|
-
|
|
|
-.popup-header {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- margin-bottom: 0;
|
|
|
- padding: 30upx 20upx 20upx 20upx;
|
|
|
- border-bottom: 2upx solid #f0f2f6;
|
|
|
- flex-shrink: 0;
|
|
|
-}
|
|
|
-
|
|
|
-.popup-title {
|
|
|
- font-size: 36upx;
|
|
|
- color: #333;
|
|
|
- font-weight: bold;
|
|
|
-}
|
|
|
-
|
|
|
-.popup-close {
|
|
|
- font-size: 48upx;
|
|
|
- color: #999;
|
|
|
- line-height: 1;
|
|
|
- cursor: pointer;
|
|
|
-}
|
|
|
-
|
|
|
-.time-sections {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- gap: 20upx;
|
|
|
- margin-bottom: 0;
|
|
|
- flex: 1;
|
|
|
- padding: 20upx 20upx 0 20upx;
|
|
|
- overflow: hidden;
|
|
|
-}
|
|
|
-
|
|
|
-.time-section {
|
|
|
- flex: 1;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- min-height: 200upx;
|
|
|
-
|
|
|
- .section-title {
|
|
|
- font-size: 28upx;
|
|
|
- color: #333;
|
|
|
- font-weight: 600;
|
|
|
- margin-bottom: 12upx;
|
|
|
- text-align: left;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.hours-wrapper {
|
|
|
- width: 100%;
|
|
|
- flex: 1;
|
|
|
- background: #f8f9fa;
|
|
|
- border: 2upx solid #e9ecef;
|
|
|
- border-radius: 8upx;
|
|
|
- position: relative;
|
|
|
- overflow: hidden;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- min-height: 150upx;
|
|
|
-}
|
|
|
-
|
|
|
-.minutes-wrapper {
|
|
|
- width: 100%;
|
|
|
- flex: 1;
|
|
|
- background: #f8f9fa;
|
|
|
- border: 2upx solid #e9ecef;
|
|
|
- border-radius: 8upx;
|
|
|
- position: relative;
|
|
|
- overflow: hidden;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- min-height: 150upx;
|
|
|
-}
|
|
|
-
|
|
|
-.hours-scroll,
|
|
|
-.minutes-scroll {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- padding: 8upx;
|
|
|
- box-sizing: border-box;
|
|
|
-}
|
|
|
-
|
|
|
-.hours-buttons,
|
|
|
-.minutes-buttons {
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- gap: 8upx;
|
|
|
- justify-content: flex-start;
|
|
|
-}
|
|
|
-
|
|
|
-.time-button {
|
|
|
- width: calc(25% - 6upx);
|
|
|
- height: 73upx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- background: #ffffff;
|
|
|
- border: 2upx solid #e9ecef;
|
|
|
- border-radius: 6upx;
|
|
|
- font-size: 26upx;
|
|
|
- color: #666;
|
|
|
- box-sizing: border-box;
|
|
|
- transition: all 0.2s;
|
|
|
- flex-shrink: 0;
|
|
|
-
|
|
|
- &.active {
|
|
|
- background: #3385FF;
|
|
|
- border-color: #3385FF;
|
|
|
- color: #fff;
|
|
|
- font-weight: 500;
|
|
|
- }
|
|
|
-
|
|
|
- &:active {
|
|
|
- background: #e8f5ff;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.popup-footer {
|
|
|
- display: flex;
|
|
|
- gap: 12upx;
|
|
|
- padding: 15upx 20upx 20upx 20upx;
|
|
|
- border-top: 2upx solid #f0f2f6;
|
|
|
- flex-shrink: 0;
|
|
|
-
|
|
|
- .footer-button {
|
|
|
- flex: 1;
|
|
|
- height: 93upx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- border: none;
|
|
|
- border-radius: 8upx;
|
|
|
- font-size: 28upx;
|
|
|
- font-weight: 500;
|
|
|
- transition: all 0.2s;
|
|
|
-
|
|
|
- &.default {
|
|
|
- background: #f5f5f5;
|
|
|
- color: #666;
|
|
|
- }
|
|
|
-
|
|
|
- &.blue {
|
|
|
- background: #3385FF;
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
-
|
|
|
- &:active {
|
|
|
- opacity: 0.8;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-/* 日期选择器蒙板 */
|
|
|
-.date-picker-mask {
|
|
|
- position: fixed;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- bottom: 0;
|
|
|
- background-color: rgba(0, 0, 0, 0.5);
|
|
|
- z-index: 98;
|
|
|
- animation: fadeIn 0.3s ease-in-out;
|
|
|
-}
|
|
|
-
|
|
|
-@keyframes fadeIn {
|
|
|
- from {
|
|
|
- opacity: 0;
|
|
|
- }
|
|
|
- to {
|
|
|
- opacity: 1;
|
|
|
}
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|