hldy_app/component/Initialization/index.vue

881 lines
23 KiB
Vue
Raw Normal View History

2025-06-16 17:32:23 +08:00
<template>
<view class="index-content-other" v-show="isShow" :style="transition?{opacity: `1`}:{opacity: `0`}">
<view class="index-content-right">
<view class="index-content-title">
<view class="shu"></view>
<view class="shu-font">
护理机构A
</view>
</view>
<view style="position: relative;">
<image class="big-photo" src="@/static/index/topright/scan/all.png"></image>
<view class="big-text">
<view style="margin-bottom: 20rpx;">
恭喜您已成功添加
<text style="color: #00A3FF;">
护理机构A
</text>
现在您可以通过下面
</view>
<view class="">
三种方式为机构进行初始化操作:
</view>
</view>
</view>
<view class="button-father">
2025-06-19 17:04:05 +08:00
<view v-for="(item,index) in bottomList" :key="index" @click="clickBall(index)">
2025-06-16 17:32:23 +08:00
<view class="ball-father">
<view :class="ballTarget == index? `ball-bgc-target` : `ball-bgc`">
<image class="ball-img" :src="ballTarget == index?item.targetUrl:item.url"></image>
</view>
{{item.name}}
</view>
</view>
</view>
<!-- 解决margin重叠问题 -->
<!-- <view class="index-right-height"></view>
<view class="index-right-title">
<view class="index-right-name">
货品名称
</view>
<input class="index-right-input" placeholder="请输入货品名称" />
<view class="index-right-name">
货品编码
</view>
<input class="index-right-input" placeholder="请输入货品编码" />
<view class="index-right-name">
拼音检索
</view>
<input class="index-right-input" placeholder="请输入货品拼音" />
<view class="index-right-button-all">
<view class="first-bgc">
<image class="bgc-img" src="/static/index/Warehousing/firstbutton.png" />
</view>
<view class="second-bgc">
<image class="bgc-img" src="/static/index/Warehousing/secondbutton.png" />
</view>
<view :class="!isWarning? `third-bgc`:`bgc-white`" @click="isWarning=!isWarning">
<view class="red-pao" v-show="!isWarning">
{{ 99 + `+` }}
</view>
<image class="bgc-img" src="/static/index/Warehousing/thirdbutton.png" />
</view>
<view class="fourth-bgc" @click="clickgoshop">
<image class="fourth-bgc-img" src="/static/index/Warehousing/fourthbutton.png" />
<view class="fourth-bgc-font">
请购单
</view>
</view>
<view v-for="(item,index) in buttonList" :key="index">
<view class="index-right-button">
<image class="index-right-button-img" :src="item.url" />
<view class="index-right-button-font">
{{item.name}}
</view>
</view>
</view>
</view>
</view>
<view class="swiper-contain">
<scroll-view scroll-y style="height: 98%;" :show-scrollbar="false">
<view class="swiper-flex">
<view v-for="(item,index) in cardsArray" :key="index">
<view class="swiper-card" :style="
item.type === 1
? {
// backgroundColor: '#00D6A9',
background: '#00D6A9 url(/static/index/warehouseCard/bgcgreen.png) center/cover'
}
: item.type === 2
? {
// backgroundColor: '#BD9AF8',
background: '#BD9AF8 url(/static/index/warehouseCard/bgcpouple.png) center/cover'
}
: {}
">
<view class="swiper-card-left">
<view class="swiper-card-left-white">
<image :class="item.type === 0
? 'swiper-card-left-white-img-first'
: item.type === 1
? 'swiper-card-left-white-img-second'
: 'swiper-card-left-white-img-third'" :src="`/static/index/project3.png`" @click="opendetail" />
</view>
</view>
<view class="swiper-card-right">
<view class="swiper-right-title">
<view class="swiper-title-font">{{item.name}}</view>
<view class="swiper-title-font-button">
{{ item.type === 0
? '护理类'
: item.type === 1
? '医疗类'
: '行政类' }}
</view>
</view>
<view class="swiper-heng"></view>
<view class="swiper-font">
规格型号800mm*690mm
</view>
<view class="swiper-double">
<view class="swiper-littlefont">
采购单位
</view>
<view class="swiper-littlefont" style="margin-left: 10rpx;" v-show="isWarning">
库存
<view style="color: rgb(18,169,51);"></view>
1000
</view>
</view>
<view class="swiper-double">
<view class="swiper-littlefont">
库存数量
<view class="blackfont">
50
</view>
</view>
<view class="swiper-littlefont" style="margin-left: 10rpx;" v-show="isWarning">
库存
<view style="color: rgb(248,122,85);"></view>
5
</view>
</view>
<view class="swiper-left-buttons">
<view :class="item.type === 0
? 'swiper-left-button-blue'
: item.type === 1
? 'swiper-left-button-green'
: 'swiper-left-button-pouple'" @click="openBuy">
请购
</view>
<view class="swiper-left-button" @click="clickgoback">
出入库
</view>
</view>
</view>
</view>
</view>
</view>
<view class="bug-bottom"></view>
</scroll-view>
</view> -->
</view>
2025-07-14 17:26:40 +08:00
<!-- <view class="index-content-down">
2025-06-16 17:32:23 +08:00
长春市朝阳区久泰开运养老服务有限公司
2025-07-14 17:26:40 +08:00
</view> -->
2025-06-16 17:32:23 +08:00
</view>
<!-- 详情的的弹出层 -->
<!-- <view v-show="detailisopen && isShow" class="popup-detail" @click="detailisopen=false">
<view class="popup-detail-content" :style="{ opacity: detailisopacity ? 1 : 0 }" @click.stop>
<info @qinggou="openBuy" @churuku="clickgoback" />
</view>
</view> -->
<!-- 请购的的弹出层 -->
<!-- <view v-show="plsBuyIsopen && isShow" class="popup-detail-plsbuy" @click="plsBuyIsopen=false">
<view class="popup-detail-content-plsbuy" :style="{ opacity: plsBuyisopacity ? 1 : 0 }" @click.stop>
<plsbuy :saveIndex="saveIndex" :changeNumber="changeNumber" @closeIt="plsBuyIsopen=false" @openRight="openRight" @closeRight="closeRight" />
</view>
<view v-show="rightCalShow" class="popup-detail-content-calculator" :style="{ opacity: plsBuyisopacity ? 1 : 0 }" @click.stop>
<calculator :doOnce="doOnce" :translateNumber="translateNumber" @right="rightOk" />
</view>
</view> -->
<!-- 请购的的弹出层 -->
<!-- <view v-show="plsBuyIsopen && isShow" class="popup-detail-calculator" @click="plsBuyIsopen=false">
<view class="popup-detail-content-calculator" :style="{ opacity: plsBuyisopacity ? 1 : 0 }" @click.stop>
<calculator @closeIt="plsBuyIsopen=false" />
</view>
</view> -->
<!-- 悬浮球点击后打开的抽屉 -->
<!-- <Drawer ref="drawer">
<shoppingCar />
</Drawer>
<Drawer ref="draweranther" :widNumber="45" style="z-index: 9999;">
<shoppingCarSmall />
</Drawer> -->
<!-- 请购单点击后打开的抽屉 -->
<!-- <Drawer ref="goshopdrawer">
<goplsbuy @opendetail="draweranther.openDrawer()" />
</Drawer> -->
<!-- 出入库点击后打开的抽屉 -->
<!-- <Drawer ref="gobackdrawer" :widNumber="45">
<gobackhouse />
</Drawer> -->
<!-- 悬浮球 -->
<!-- <ball :isShow="isShow && !detailisopen && !plsBuyIsopen" @click="clickBall" /> -->
</template>
<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, computed, nextTick, defineProps, watch } from 'vue';
// import Drawer from "@/component/public/Drawer.vue"
// import shoppingCar from "@/component/storeroom/drawer/shoppingCar/index.vue"
// import shoppingCarSmall from "@/component/storeroom/drawer/shoppingCarSmall/index.vue"
// import gobackhouse from "@/component/storeroom/drawer/gobackhouse/index.vue"
// import goplsbuy from "@/component/storeroom/drawer/plsbuy/index.vue"
// import ball from "@/component/storeroom/components/ball.vue";
// import info from "@/component/storeroom/components/info.vue"
// import plsbuy from "@/component/storeroom/components/plsbuy.vue"
// import calculator from "@/component/storeroom/components/calculator.vue"
2025-06-19 17:04:05 +08:00
const emit = defineEmits(['nav']);
2025-06-16 17:32:23 +08:00
const props = defineProps({
isShow: {
type: Boolean,
required: true,
},
});
// 使用watch监听isShow变化
const transition = ref(true);
const ballTarget = ref(-1);
// 下方气泡
const bottomList = ref([
{ url: '/static/index/topright/scan/00.png', targetUrl: '/static/index/topright/scan/01.png', name: '雷达扫描' },
{ url: '/static/index/topright/scan/10.png', targetUrl: '/static/index/topright/scan/11.png', name: '扫码添加' },
{ url: '/static/index/topright/scan/20.png', targetUrl: '/static/index/topright/scan/21.png', name: '手动录入' },
]);
2025-06-19 17:04:05 +08:00
const clickBall = (index) =>{
ballTarget.value = index;
emit("nav",index)
}
2025-06-16 17:32:23 +08:00
// const draweranther = ref(null)
// const drawer = ref(null);
// const gobackdrawer = ref(null);
// const goshopdrawer = ref(null);
// const cardsArray = ref([
// {
// name: "纸尿裤-拉拉裤",
// type: 0
// },
// {
// name: "纸尿裤-拉拉裤",
// type: 0
// },
// {
// name: "纸尿裤-拉拉裤",
// type: 0
// },
// {
// name: "纸尿裤-拉拉裤",
// type: 0
// },
// {
// name: "胃管(进口)",
// type: 1
// },
// {
// name: "胃管(进口)",
// type: 1
// },
// {
// name: "胃管(进口)",
// type: 1
// },
// {
// name: "胃管(进口)",
// type: 1
// },
// {
// name: "洗护用品",
// type: 2
// },
// {
// name: "洗护用品",
// type: 2
// },
// {
// name: "洗护用品",
// type: 2
// },
// {
// name: "洗护用品",
// type: 2
// },
// {
// name: "洗护用品",
// type: 2
// },
// {
// name: "洗护用品",
// type: 2
// },
// ])
watch(
() => props.isShow,
(newVal, oldVal) => {
// 当旧值为false新值为true时延迟0.2秒调用方法
if (!oldVal && newVal) {
transition.value = false;
setTimeout(() => {
transition.value = true;
}, 50)
}
}
)
// 表格弹窗
// const detailisopen = ref(false);
// const detailisopacity = ref(false);
// 请购弹窗
// const plsBuyIsopen = ref(false);
// const plsBuyisopacity = ref(false);
// const isWarning = ref(false);
// 初始化左侧菜单列表
// const buttonList = ref([
// // { url: '/static/index/Warehousing/zuoce.png', name: '请购单' },
// { url: '/static/index/Warehousing/sousuo.png', name: '查询' },
// { url: '/static/index/Warehousing/chongzhi.png', name: '重置' },
// ]);
// const opendetail = () => {
// detailisopen.value = true;
// detailisopacity.value = false;
// setTimeout(() => {
// detailisopacity.value = true
// }, 100)
// }
// const openBuy = () => {
// detailisopen.value=false
// plsBuyIsopen.value = true;
// plsBuyisopacity.value = false;
// setTimeout(() => {
// plsBuyisopacity.value = true
// }, 100)
// }
// const clickBall = () => {
// drawer.value.openDrawer();
// }
// const clickgoshop = () => {
// goshopdrawer.value.openDrawer();
// }
// const clickgoback = () => {
// detailisopen.value=false
// gobackdrawer.value.openDrawer();
// }
// 记录序列号
// const saveIndex = ref(-1);
// // 传递数字
// const translateNumber = ref(0);
// //右侧计算器显示
// const rightCalShow = ref(false);
// const doOnce = ref(0);
// const openRight = (number:number,index:number) =>{
// saveIndex.value = index;
// translateNumber.value = number;
// rightCalShow.value = true;
// doOnce.value++
// }
// const closeRight = () =>{
// saveIndex.value = -1;
// translateNumber.value = 0;
// rightCalShow.value = false;
// }
// const changeNumber = ref(0);
// const rightOk = (num:number) =>{
// rightCalShow.value = false;
// changeNumber.value = num;
// }
</script>
<style scoped lang="less">
.index-content-other {
width: calc(100% - 170rpx);
height: 100%;
transition: opacity 1s ease;
}
.index-content-down {
width: calc(100% - 60rpx);
height: 100rpx;
display: flex;
justify-content: flex-end;
align-items: center;
}
.index-content-right {
2025-07-14 17:26:40 +08:00
// height: calc(100% - 100rpx);
height: calc(100% - 30rpx);
2025-06-16 17:32:23 +08:00
width: calc(100% - 60rpx);
background-color: rgba(255, 255, 255, 0.8);
2025-06-19 17:04:05 +08:00
background-image: url('/static/index/leida/bgc.png');
background-position: 30% 70%;
2025-06-16 17:32:23 +08:00
border-radius: 50rpx;
2025-07-14 17:26:40 +08:00
// box-shadow: 4rpx 8rpx 16rpx 4rpx rgba(0, 0, 0, 0.3);
2025-06-16 17:32:23 +08:00
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
position: relative;
.index-content-title {
position: absolute;
top: 60rpx;
left: 60rpx;
display: flex;
align-items: center;
.shu {
width: 20rpx;
height: 50rpx;
background: linear-gradient(to right, #0052C2, #00B4FF);
border-radius: 20rpx;
margin-right: 30rpx;
}
.shu-font {
color: #415273;
font-size: 35rpx;
}
}
}
.big-photo {
width: 1200rpx;
height: 800rpx;
}
.big-text {
position: absolute;
bottom: 120rpx;
left: 50%;
transform: translateX(-50%);
width: 800rpx;
display: flex;
flex-direction: column;
align-items: center;
color: #415273;
}
.button-father{
display: flex;
width: 800rpx;
justify-content: space-between;
margin-bottom: 200rpx;
.ball-father{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.ball-bgc{
width: 130rpx;
height: 130rpx;
background-color: #E3E6F1;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
margin-bottom: 15rpx;
}
.ball-bgc-target{
width: 130rpx;
height: 130rpx;
background: linear-gradient(to bottom,#00C9FF,#0076FF);
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
margin-bottom: 15rpx;
}
.ball-img{
width: 80rpx;
height: 80rpx;
}
}
// .swiper-contain {
// width: 100%;
// margin-left: 10rpx;
// // width: calc(100% - 60rpx);
// height: calc(100% - 140rpx);
// .swiper-flex {
// display: flex;
// flex-wrap: wrap;
// .swiper-card {
// margin: 20rpx 0 0 20rpx;
// width: 666rpx;
// height: 345rpx;
// // border: 2rpx solid #fff;
// border-radius: 30rpx;
// background: #01ADF9 url("/static/index/warehouseCard/bgcblue.png") center/cover;
// box-shadow: 2rpx 2rpx 4rpx 0rpx rgba(0, 0, 0, 0.3);
// display: flex;
// .swiper-card-left {
// height: 100%;
// width: 400rpx;
// .swiper-card-left-white {
// margin: 27rpx 0 20rpx 30rpx;
// width: 200rpx;
// height: 280rpx;
// // background-color: rgba(255, 255, 255, 0.3);
// display: flex;
// border-radius: 30rpx;
// justify-content: center;
// align-items: center;
// .swiper-card-left-white-img-first {
// width: 200rpx;
// height: 200rpx;
// box-shadow: 2rpx 2rpx 4rpx 2rpx rgba(1, 178, 255, 0.2);
// border-radius: 20rpx;
// }
// .swiper-card-left-white-img-second {
// width: 200rpx;
// height: 200rpx;
// box-shadow: 2rpx 2rpx 4rpx 2rpx rgba(11, 206, 184, 0.2);
// border-radius: 20rpx;
// }
// .swiper-card-left-white-img-third {
// width: 200rpx;
// height: 200rpx;
// box-shadow: 2rpx 2rpx 4rpx 2rpx rgba(188, 163, 246, 0.2);
// border-radius: 20rpx;
// }
// }
// }
// .swiper-card-right {
// height: 100%;
// width: 600rpx;
// .swiper-right-title {
// margin-top: 35rpx;
// width: 100%;
// display: flex;
// justify-content: space-between;
// .swiper-title-font {
// font-weight: 700;
// font-size: 30rpx;
// }
// .swiper-title-font-button {
// color: #fff;
// border-radius: 10rpx;
// margin-right: 25rpx;
// margin-top: -20rpx;
// font-size: 25rpx;
// font-weight: 700;
// }
// .swiper-title-mark {
// background-color: rgb(214, 212, 245);
// color: #19233B;
// padding: 5rpx 25rpx;
// font-size: 30rpx;
// border-radius: 25rpx;
// margin-right: 20rpx;
// }
// }
// }
// }
// }
// }
// .swiper-heng {
// width: 90rpx;
// height: 10rpx;
// border-radius: 30rpx;
// margin-bottom: 0rpx;
// }
// .swiper-font {
// color: #596278;
// font-size: 26rpx;
// margin-top: 15rpx;
// display: flex;
// }
// .swiper-littlefont {
// color: #596278;
// font-size: 26rpx;
// margin-top: 15rpx;
// display: flex;
// width: 50%;
// }
// .popup-detail {
// position: fixed;
// top: 0;
// left: 0;
// right: 0;
// bottom: 0;
// display: flex;
// justify-content: center;
// align-items: center;
// backdrop-filter: blur(1rpx);
// background-color: rgba(89, 109, 154, 0.4);
// /* 添加毛玻璃效果 */
// z-index: 999;
// .popup-detail-content {
// display: flex;
// width: 1500rpx;
// height: 900rpx;
// background: url("/static/index/lightbgcnew.png") center/cover, rgba(255, 255, 255, 0.5);
// background-blend-mode: screen;
// border: 2rpx solid #fff;
// /* 使用 screen 混合模式,让图像与白色混合变淡 */
// border-radius: 30rpx;
// box-shadow: 10rpx 10rpx 20rpx rgba(0, 0, 0, 0.1);
// transition: opacity 0.4s ease;
// }
// }
// .popup-detail-plsbuy {
// position: fixed;
// top: 0;
// left: 0;
// right: 0;
// bottom: 0;
// backdrop-filter: blur(1rpx);
// background-color: rgba(89, 109, 154, 0.4);
// /* 添加毛玻璃效果 */
// z-index: 999;
// overflow: hidden;
// .popup-detail-content-plsbuy {
// position: absolute;
// left: 350rpx;
// top: 310rpx;
// display: flex;
// width: 1200rpx;
// height: 850rpx;
// // background: url("/static/index/pink.png") center/cover;
// background-color: #fff;
// // background: url("/static/index/pink.png") center/cover;
// // background-blend-mode: screen;
// border: 2rpx solid #fff;
// /* 使用 screen 混合模式,让图像与白色混合变淡 */
// border-radius: 30rpx;
// box-shadow: 10rpx 10rpx 20rpx rgba(0, 0, 0, 0.1);
// transition: opacity 0.4s ease;
// }
// .popup-detail-content-calculator {
// position: absolute;
// right: 160rpx;
// top: 310rpx;
// display: flex;
// width: 600rpx;
// height: 850rpx;
// background-color: #fff;
// // background: url("/static/index/pink.png") center/cover, rgba(255, 255, 255, 1);
// // background-blend-mode: screen;
// border: 2rpx solid #fff;
// /* 使用 screen 混合模式,让图像与白色混合变淡 */
// border-radius: 30rpx;
// box-shadow: 10rpx 10rpx 20rpx rgba(0, 0, 0, 0.1);
// transition: opacity 0.4s ease;
// overflow: hidden;
// }
// }
// .popup-detail-calculator {
// position: fixed;
// top: 0;
// left: 0;
// right: 0;
// bottom: 0;
// // backdrop-filter: blur(1rpx);
// // background-color: rgba(89, 109, 154, 0.4);
// /* 添加毛玻璃效果 */
// z-index: 999;
// .popup-detail-content-calculator {
// position: absolute;
// right: 150rpx;
// top: 310rpx;
// display: flex;
// width: 600rpx;
// height: 850rpx;
// background: url("/static/index/lightbgcnew.png") center/cover, rgba(255, 255, 255, 0.5);
// background-blend-mode: screen;
// border: 2rpx solid #fff;
// /* 使用 screen 混合模式,让图像与白色混合变淡 */
// border-radius: 30rpx;
// box-shadow: 10rpx 10rpx 20rpx rgba(0, 0, 0, 0.1);
// transition: opacity 0.4s ease;
// }
// }
// .blackfont {
// font-weight: 600;
// color: red;
// }
// .swiper-left-buttons {
// display: flex;
// margin-top: 20rpx;
// .swiper-left-button {
// display: flex;
// justify-content: center;
// align-items: center;
// width: 140rpx;
// height: 60rpx;
// border-radius: 20rpx;
// background: linear-gradient(to bottom, #D5E0F8, #ECF6FF);
// border: 1rpx #fff solid;
// color: #364464;
// box-shadow: 2rpx 2rpx 4rpx 0rpx rgba(0, 0, 0, 0.3);
// }
// .swiper-left-button-blue {
// display: flex;
// justify-content: center;
// align-items: center;
// width: 140rpx;
// height: 60rpx;
// border-radius: 20rpx;
// background: linear-gradient(to right bottom, #00c9ff, #0076ff);
// color: #fff;
// border: 1rpx #fff solid;
// margin-right: 20rpx;
// box-shadow: 2rpx 2rpx 4rpx 0rpx rgba(0, 0, 0, 0.3);
// }
// .swiper-left-button-green {
// display: flex;
// justify-content: center;
// align-items: center;
// width: 140rpx;
// height: 60rpx;
// border-radius: 20rpx;
// background: linear-gradient(to right bottom, #00D6A9, #19BCD4);
// color: #fff;
// border: 1rpx #fff solid;
// margin-right: 20rpx;
// box-shadow: 2rpx 2rpx 4rpx 0rpx rgba(0, 0, 0, 0.3);
// }
// .swiper-left-button-pouple {
// display: flex;
// justify-content: center;
// align-items: center;
// width: 140rpx;
// height: 60rpx;
// border-radius: 20rpx;
// background: linear-gradient(to right bottom, #AA55E1, #BD9AF8);
// color: #fff;
// border: 1rpx #fff solid;
// margin-right: 20rpx;
// box-shadow: 2rpx 2rpx 4rpx 0rpx rgba(0, 0, 0, 0.3);
// }
// }
// .bgc-img {
// width: 50rpx;
// height: 50rpx;
// }
// .first-bgc {
// width: 80rpx;
// height: 80rpx;
// display: flex;
// justify-content: center;
// align-items: center;
// background: linear-gradient(to right top, #fda64b, #ffcc80);
// border-radius: 20rpx;
// border: 2rpx #fff solid;
// margin-right: 10rpx;
// }
// .second-bgc {
// width: 80rpx;
// height: 80rpx;
// display: flex;
// justify-content: center;
// align-items: center;
// background: linear-gradient(to right top, #ffcc80, #fcb398);
// border-radius: 20rpx;
// border: 2rpx #fff solid;
// margin-right: 10rpx;
// }
// .third-bgc {
// width: 80rpx;
// height: 80rpx;
// display: flex;
// justify-content: center;
// align-items: center;
// background: linear-gradient(to right top, #869af3, #98abff);
// border-radius: 20rpx;
// border: 2rpx #fff solid;
// margin-right: 10rpx;
// position: relative;
// }
// .bgc-white {
// width: 80rpx;
// height: 80rpx;
// display: flex;
// justify-content: center;
// align-items: center;
// background-color: rgba(255, 255, 255, 0.3);
// border-radius: 20rpx;
// border: 2rpx #fff solid;
// margin-right: 10rpx;
// position: relative;
// }
// .fourth-bgc {
// width: 170rpx;
// height: 80rpx;
// display: flex;
// justify-content: center;
// align-items: center;
// background: linear-gradient(to right top, #869af3, #98abff);
// border-radius: 20rpx;
// border: 2rpx #fff solid;
// margin-right: 10rpx;
// .fourth-bgc-img {
// width: 30rpx;
// height: 40rpx;
// margin: 0 10rpx;
// ;
// }
// .fourth-bgc-font {
// color: #fff;
// margin-right: 10rpx;
// }
// }
// .swiper-double {
// width: 90%;
// display: flex;
// }
// .red-pao {
// position: absolute;
// top: -10rpx;
// right: -10rpx;
// padding: 3rpx 10rpx;
// background-color: #FF4C4E;
// color: #fff;
// font-size: 20rpx;
// border-radius: 20rpx;
// z-index: 101;
// }
// .bug-bottom {
// height: 30rpx;
// }
</style>