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>
|