880 lines
23 KiB
Vue
880 lines
23 KiB
Vue
<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">
|
||
<view v-for="(item,index) in bottomList" :key="index" @click="clickBall(index)">
|
||
<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>
|
||
<view class="index-content-down">
|
||
长春市朝阳区久泰开运养老服务有限公司
|
||
</view>
|
||
|
||
</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"
|
||
|
||
const emit = defineEmits(['nav']);
|
||
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: '手动录入' },
|
||
]);
|
||
|
||
const clickBall = (index) =>{
|
||
ballTarget.value = index;
|
||
emit("nav",index)
|
||
}
|
||
// 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 {
|
||
height: calc(100% - 100rpx);
|
||
width: calc(100% - 60rpx);
|
||
background-color: rgba(255, 255, 255, 0.8);
|
||
background-image: url('/static/index/leida/bgc.png');
|
||
background-position: 30% 70%;
|
||
border-radius: 50rpx;
|
||
box-shadow: 4rpx 8rpx 16rpx 4rpx rgba(0, 0, 0, 0.3);
|
||
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> |