hldy_app/pages/Warehouse/procurecart.vue

1638 lines
34 KiB
Vue
Raw Normal View History

2025-10-21 16:57:03 +08:00
<template>
<view>
<!-- 采购 -->
<view class="box">
<view class="leftr" v-if="shyp">
<scroll-view scroll-y="true" scroll-with-animation :scroll-top="scrolltop" class="scroll-Y"
@scrolltolower="scrolltolower" :lower-threshold="400" @scroll="scrollview">
<view class="boxibigtem" v-for="(v,i) in InvoicingList" :key='i'
:class="{'yujing':Number(v.lowerLimit)>=Number(v.kcsl),'active':shopitem==i}"
@click="shopclick(i,2)">
<view>{{v.materialName}}</view>
<view>规格型号: {{v.specificationModel}}</view>
<view>采购单位 {{v.materialUnits}}</view>
<view>
<view class="carditem" :class="{'hl':v.tagType==1,'yl':v.tagType==2,'bj':v.tagType>2}">
<image src="/static/index/warehouse/procurement/hl.png" mode="aspectFill"
v-if="v.tagType==1"></image>
<image src="/static/index/warehouse/procurement/yl.png" mode="aspectFill"
v-if="v.tagType==2"></image>
<image src="/static/index/warehouse/procurement/bj.png" mode="aspectFill"
v-if="v.tagType>2"></image>
{{v.tagName}}
</view>
<view class="znk">
<image
:src="v.materialImg?serverUrl + v.materialImg : '/static/index/warehouse/procurement/k.png'"
mode="aspectFill"></image>
</view>
<view class="num">
<view>{{v.kcsl}}</view>
<view>库存数量</view>
</view>
</view>
</view>
<view style="height: 23vw;width: 100%;padding:10vw 40vw ;">
<u-loadmore :status="status" />
</view>
</scroll-view>
<shadowview :opacity="opacity"></shadowview>
<view class="mblbg"> </view>
<view class="fxj">
<arrowkeys @movecard="movecard($event,1)" :getblue="getblue" :moveleft="45" />
<text>长春市朝阳区久泰开运养老服务有限公司</text>
</view>
</view>
<view class="lefts" v-if="!shyp">
<scroll-view scroll-y="true" scroll-with-animation :scroll-top="scrolltop" class="scroll-Y"
@scrolltolower="scrolltolower" :lower-threshold="200" @scroll="scrollview">
<view class="boxitem" v-for="(v,i) in InvoicingList" :key='i'
:class="{'yujing':Number(v.lowerLimit)>=Number(v.kcsl),'active':shopitem==i}"
@click="shopclick(i)">
<view>{{v.materialName}}</view>
<view>规格型号: {{v.specificationModel}}</view>
<view>采购单位 {{v.materialUnits}}</view>
<view>库存数量 {{v.kcsl}}</view>
<view>
<view class="carditem" :class="{'hl':v.tagType==1,'yl':v.tagType==2,'bj':v.tagType>2}">
<image src="/static/index/warehouse/procurement/hl.png" mode="aspectFill"
v-if="v.tagType==1"></image>
<image src="/static/index/warehouse/procurement/yl.png" mode="aspectFill"
v-if="v.tagType==2"></image>
<image src="/static/index/warehouse/procurement/bj.png" mode="aspectFill"
v-if="v.tagType>2"></image>
{{v.tagName}}
</view>
<view class="znk">
<image
:src="v.materialImg?serverUrl + v.materialImg : '/static/index/warehouse/procurement/k.png'"
mode="aspectFill"></image>
</view>
</view>
<view class="dbgys">
<view>
<view>采购数量<text>50</text></view>
<view>供应商长春市天林商贸有限公司</view>
</view>
<view :class="v.flag?'act':''">
<image src="/static/index/warehouse/procurement/d.png" mode="aspectFill" v-if="v.flag"></image>
<image src="/static/index/warehouse/procurement/da.png" mode="aspectFill" v-else></image>
</view>
</view>
</view>
<view style="height: 23vw;width: 100%;padding:10vw 40vw ;">
<u-loadmore :status="status" />
</view>
</scroll-view>
<shadowview :opacity="opacity"></shadowview>
<view class="mblbg"> </view>
<view class="fxj">
<arrowkeys @movecard="movecard" :getblue="getblue" :moveleft="45" />
<text>长春市朝阳区久泰开运养老服务有限公司</text>
</view>
</view>
<view class="rights">
<view class="shitem">
<view class="shypk">
<view>生活用品库</view>
<view>
<view class="swsh guodu" :class="shyp?'act':''" @click="switchshyp">
<view class="guodu"></view>
</view>
<text>
{{!shyp?'两列':'三列'}}
</text>
</view>
</view>
<view class="jqry">
<view class="left tp">
<image
:src="cellobj?.fzrHeadPath?serverUrl + cellobj?.fzrHeadPath:'/static/index/warehouse/procurement/jqr.png'"
mode="aspectFill"></image>
</view>
<view class="rigname">
<view>{{cellobj?.fzr}}</view>
<view>
<!-- <text></text>
<text>50</text> -->
<text>{{cellobj?.fzrTel?cellobj?.fzrTel:'-'}}</text>
</view>
</view>
</view>
</view>
<view class="typeitem">
<view class="toptype">
<view v-for="v in ['三','二','一']">{{v+'级分类'}}</view>
</view>
<view class="scroltype">
<scroll-view scroll-y="true" scroll-with-animation :scroll-top="scroll.scrolltop3"
class="scroll-Y">
<view :class="scroll.act3==i?'act':''"
v-for="(v,i) in TreeData[scroll.act1]?.children[scroll.act2]?.children"
@click="typescroll(3,i,v)">
{{v.title}}
</view>
</scroll-view>
<scroll-view scroll-y="true" scroll-with-animation :scroll-top="scroll.scrolltop2"
class="scroll-Y">
<view :class="scroll.act2==i?'act':''" v-for="(v,i) in TreeData[scroll.act1]?.children"
@click="typescroll(2,i,v)">
{{v.title}}
</view>
</scroll-view>
<scroll-view scroll-y="true" scroll-with-animation :scroll-top="scroll.scrolltop1"
class="scroll-Y scrl1">
<view :class="scroll.act1==i?'act':''" v-for="(v,i) in TreeData" @click="typescroll(1,i,v)">
<image :src="serverUrl + v.appCheckIconPath" mode="aspectFill" v-if="scroll.act1==i">
</image>
<image :src="serverUrl + v.appIconPath" mode="aspectFill" v-else></image>
<text>
{{v.title}}
</text>
</view>
</scroll-view>
</view>
<view class="anmikc">
<view v-for="(v,i) in animArray" :key="i" @click="admiclick(i)">
<view>
<image :src="v.imgurl" mode="aspectFill" v-if="anmidex!=i"></image>
<donghua width="2vw" height="2vw" :links="v.url" :playing="i === anmidex"
v-show="i === anmidex" class="donghua" />
</view>
<text>
{{v.name}}
</text>
</view>
</view>
<view class="serchs">
<view class="ipt">
<input type="text" placeholder="物料名称/物料编码/物料简拼" v-model="form.wlParamInfo" />
<image src="/static/index/warehouse/procurement/x.png" mode="aspectFill"
v-if="form.wlParamInfo" @click="search(0)"></image>
</view>
<view @click="search" class="scr">
检索
</view>
</view>
</view>
</view>
</view>
<view class="mengban" v-if="wlxq" @click="qingkong"></view>
<view class="wuliao guodu" :class="wlxq?'':'uncrkcard'">
<view class="name">纸尿裤-拉拉裤纸尿裤-拉拉裤纸尿裤-拉拉裤纸尿裤-拉拉裤</view>
<view class="znk tp">
<image :src=" '/static/index/warehouse/procurement/k.png'" mode="aspectFill"></image>
</view>
<view class="life">
<view>生活用品</view>
<view>照护用品</view>
</view>
<view class="zil">
物料编码: ZHYP044
</view>
<view class="zil">
规格型号: XL800mm*690mm
</view>
<view class="zil">
物料小类: ZHYP044
</view>
<view class="zil">
物料单位:
</view>
<view class="zil">
医保报销:
</view>
<view class="zil">
机构优惠:
</view>
<view class="dibu">
<view>
<text>853</text>
<text>库存数量</text>
</view>
<view>
<text>4000</text>
<text>物料上限 <text class="l"> </text></text>
</view>
<view style="align-items: end;">
<text>4000</text>
<text><text class="f"> </text>物料下限 </text>
</view>
</view>
</view>
<view class="mengban" v-if="cgd" @click="qingkong"></view>
<view class="caigoudan guodu" :class="cgd?'':'uncgd'">
<view class="title">采购单</view>
<scroll-view scroll-y="true" class="cgdscroll">
<view class="cardcd">
<view class="gys">供应商:长春市天林商贸有限公司</view>
<view class="cgdh">
<view>采购单号:A0120251010001</view>
<view>采购人:梁嘉豪 </view>
<view>采购金额<text>1356.82</text></view>
</view>
<view class="boxitem" v-for="(v,i) in InvoicingList" :key='i' >
<view>{{v.materialName}}</view>
<view>规格型号: {{v.specificationModel}}</view>
<view>采购单位 {{v.materialUnits}}</view>
<view>库存数量 {{v.kcsl}}</view>
<view>
<view class="carditem" :class="{'hl':v.tagType==1,'yl':v.tagType==2,'bj':v.tagType>2}">
<image src="/static/index/warehouse/procurement/hl.png" mode="aspectFill"
v-if="v.tagType==1"></image>
<image src="/static/index/warehouse/procurement/yl.png" mode="aspectFill"
v-if="v.tagType==2"></image>
<image src="/static/index/warehouse/procurement/bj.png" mode="aspectFill"
v-if="v.tagType>2"></image>
{{v.tagName}}
</view>
<view class="znk">
<image
:src="v.materialImg?serverUrl + v.materialImg : '/static/index/warehouse/procurement/k.png'"
mode="aspectFill"></image>
</view>
</view>
<view class="dbgys">
<view>
<view>
<view>采购数量<text>50</text></view>
<view>采购金额<text>50</text></view>
</view>
<view>供应商长春市天林商贸有限公司</view>
</view>
</view>
</view>
</view>
</scroll-view>
</view>
</view>
</template>
<script setup lang="ts">
import { ref, onMounted, reactive, onBeforeUnmount, computed, nextTick, defineProps } from 'vue';
import { queryInvoicingList, getMaterialTreeData, queryNuInfoByNuId, updateKfstatus } from './api/lunpan.js'
import { onShow, onLoad, onHide, onPageScroll } from "@dcloudio/uni-app"
import shadowview from './components/ShadowView.vue';
import calculator from './components/calculator.vue';
const navurl = ref('');
const InvoicingList = ref([]);
const TreeData = ref([]);
const cellobj = ref({});
const serverUrl = ref('');
const scrolltop = ref(0)
const shopitem = ref(0)
const getblue = ref(false);
const shyp = ref(false);
const opacity = ref(false);
const wlxq = ref(false);
const cgd = ref(false);
const scrollnum = ref(0);
const scroll = reactive({ scrolltop1: 0, scrolltop2: 0, scrolltop3: 0, act1: -1, act2: -1, act3: -1 });
const form = reactive({
nuId: '',
pageNo: 1,
pageSize: 9,
categoryId: '',
typeId: '',
medicationId: '',
wlParamInfo: ''
})
const switchshyp = () => {
let obj = {
id: cellobj.value.id,
status: shyp.value ? '5' : '2'
}
updateKfstatus(obj).then(res => {
console.log(res)
if (res.success) {
shyp.value = shyp.value ? false : true;
cell();
} else {
uni.showToast({
icon: 'error',
title: res.message
})
}
})
}
const shopclick = (i : number, k : number) => {
if (k == 2) {
let num = Math.ceil((i + 1) / 2)
scrolltop.value = (num - 2) * 270;
shopitem.value = i;
} else {
let num = Math.ceil((i + 1) / 3)
scrolltop.value = (num - 2) * 240;
shopitem.value = i;
}
}
const typescroll = (e : number, i : number, v : object) => {
if (e == 1) {
scroll.act2 = -1;
scroll.act3 = -1;
scroll.scrolltop2 = 0;
scroll.scrolltop3 = 0;
form.categoryId = v?.categoryId;
form.typeId = '';
form.medicationId = '';
if (scroll.act1 == i) {
scroll.act1 = -1;
form.categoryId = '';
form.pageNo = 1;
InvoicingList.value = [];
queryInvo();
return
}
}
if (e == 2) {
scroll.act3 = -1;
scroll.scrolltop3 = 0;
form.categoryId = v?.categoryId;
form.typeId = v?.typeId;
form.medicationId = '';
}
if (e == 3) {
form.categoryId = v?.categoryId;
form.typeId = v?.typeId;
form.medicationId = v?.key;
}
scroll['act' + e] = i;
scroll['scrolltop' + e] = (i - 2) * 50;
form.pageNo = 1;
InvoicingList.value = [];
shopitem.value = 0;
queryInvo();
}
const search = (x : number) => {
if (x === 0) { form.wlParamInfo = '' }
form.pageNo = 1;
InvoicingList.value = [];
queryInvo();
}
onLoad(() => {
form.nuId = uni.getStorageSync('nuId');
serverUrl.value = uni.getStorageSync('serverUrl') + '/sys/common/static/';
getMaterial();
queryInvo();
cell();
})
const qingkong = () => {
anmidex.value = -1;
wlxq.value = false;
cgd.value = false;
}
const cell = () => {
queryNuInfoByNuId(form).then(res => {
cellobj.value = res.result;
shyp.value = res.result.status == 5 ? false : true
})
}
const getMaterial = () => {
getMaterialTreeData().then(res => {
TreeData.value = res.result
})
}
const setout = ref(true)
let times = null;
const status = ref('loadmore')
onPageScroll((e) => {
console.log(e)
})
const scrolltolower = () => {
if (!setout) { return }
status.value = 'loading'
setout.value = false;
form.pageNo++;
queryInvo()
times = setTimeout(() => {
setout.value = true
}, 1000)
}
const scrollview = (e : number) => {
if (e.detail.scrollTop > scrollnum.value) {
opacity.value = true;
setTimeout(() => {
opacity.value = false;
}, 900)
} else {
opacity.value = false;
}
scrollnum.value = e.detail.scrollTop;
}
const queryInvo = () => {
queryInvoicingList(form).then(res => {
res.result.records.forEach((item,i)=>{
item.flag = false
if(i==0){
item.flag = true
}
})
InvoicingList.value.push(...res.result.records);
status.value = res.result.total == InvoicingList.value.length ? 'nomore' : 'loadmore'
})
}
const movecard = (type : number, l : number) => {
if (l == 1) {
switch (type) {
case 0:
// 上
shopitem.value = shopitem.value < 1 ? shopitem.value = 0 : shopitem.value - 2
break;
case 1:
// →
shopitem.value = shopitem.value >= InvoicingList.value.length - 1 ? InvoicingList.value.length - 1 : shopitem.value + 1
break;
case 2:
// 下
shopitem.value = shopitem.value >= InvoicingList.value.length - 2 ? shopitem.value = 0 : shopitem.value + 2
break;
case 3:
shopitem.value = shopitem.value == 0 ? shopitem.value = InvoicingList.value.length - 1 : shopitem.value - 1
// ←
break;
case 4:
// 扫描
break;
case 5:
// 返回
uni.navigateBack({
delta: 1
})
break;
default:
break;
}
shopclick(shopitem.value, 2)
} else {
switch (type) {
case 0:
// 上
shopitem.value = shopitem.value < 2 ? shopitem.value = 0 : shopitem.value - 3
break;
case 1:
// →
shopitem.value = shopitem.value > InvoicingList.value.length ? shopitem.value = 0 : shopitem.value + 1
break;
case 2:
// 下
shopitem.value = shopitem.value > InvoicingList.value.length ? shopitem.value = 0 : shopitem.value + 3
break;
case 3:
shopitem.value = shopitem.value == 0 ? shopitem.value = InvoicingList.value.length : shopitem.value - 1
// ←
break;
case 4:
// 扫描
break;
case 5:
// 返回
uni.navigateBack({
delta: 1
})
break;
default:
break;
}
shopclick(shopitem.value, 0)
}
}
// 通用的生成函数
function genPaths(base, prefix, count, ext = 'png', startIndex = 0, pad = false) {
return Array.from({ length: count }, (_, i) => {
const idx = pad
? String(i + startIndex).padStart(2, '0')
: i + startIndex
return `${base}/${prefix}${idx}.${ext}`
})
}
const anmidex = ref(-1)
const admiclick = (i : number) => {
if (anmidex.value == 2) {
anmidex.value = -1
} else {
anmidex.value = i;
switch (i) {
case 0:
InvoicingList.value[shopitem.value].flag = !InvoicingList.value[shopitem.value].flag;
setTimeout(()=>{
anmidex.value = -1
},1000)
break;
case 1:
cgd.value = true
break;
case 2:
wlxq.value = true
break;
case 3:
break;
case 4:
break;
case 5:
uni.navigateTo({
url:'/pages/Warehouse/procurecart'
})
break;
default:
break;
}
}
}
const animArray = ref([
{
url: genPaths(
'/static/index/warehouse/procurement/store',
'store0',
8, // 张数
'png',
1, // 起始索引为 1
false // 不补零
),
name: '选择/取消',
imgurl: '/static/index/warehouse/procurement/store/store01.png'
},
{
url: genPaths(
'/static/index/warehouse/procurement/procure',
'procure0',
7, // 张数
'png',
1, // 起始索引为 1
false // 不补零
),
name: '采 购',
imgurl: '/static/index/warehouse/procurement/procure/procure01.png'
},
{
url: genPaths(
'/static/index/warehouse/procurement/details',
'details0',
7, // 张数
'png',
1, // 起始索引为 1
false // 不补零
),
name: '物料详情',
imgurl: '/static/index/warehouse/procurement/details/details01.png'
},
{
url: genPaths(
'/static/index/warehouse/procurement/bound',
'bound0',
11, // 张数
'png',
1, // 起始索引为 1
false // 不补零
),
name: '删除',
imgurl: '/static/index/warehouse/procurement/bound/bound01.png'
},
{
url: genPaths(
'/static/index/warehouse/procurement/Cart',
'Cart0',
10, // 张数
'png',
1, // 起始索引为 1
false // 不补零
),
name: '清空',
imgurl: '/static/index/warehouse/procurement/Cart/Cart01.png'
}
])
</script>
<style scoped lang="less">
.uncgd{
bottom: -96vh !important;
}
.caigoudan{
width: 50vw;
height: 95vh;
background: #FFFFFF;
border-radius: 1.6vw;
position: fixed;
z-index: 104;
bottom: 1.5vw;
left: 22vw;
padding:1.5vw 2vw 0;
.cgdscroll{
width: 100%;
height: calc(95vh - 3.5vw);
.cardcd{
>.boxitem {
width: 22vw;
height: 19.3vw;
background: rgba(255, 255, 255, .7);
border-radius: 1.6vw;
margin: 0 1vw 1.2vw 0;
display: inline-block;
padding:1.5vw 2.3vw 2.3vw;
position: relative;
border: 2px solid rgba(187,187,187,0.34);
.dbgys{
width: 100%;
height: 4.3vw;
position: absolute;
left: 0;
bottom: 0vw;
background: rgba(239, 240, 244, 1);
border-radius:0 0 1.6vw 1.6vw;
border: 2px solid rgba(239, 240, 244, 1);
display: flex;
padding: 0.6vw 1.5vw;
justify-content: space-between;
.act{
background: rgba(231, 240, 251, 1) !important;
border: 1px solid rgba(0, 118, 214, 1) !important;
}
>view{
&:nth-child(1){
display: flex;
flex-direction: column;
font-weight: 400;
font-size: 1vw;
color: #888888;
view{
display: flex;
justify-content: space-between;
align-items: center;
}
text{
font-weight: bold;
font-size: 1.4vw;
color: #555555;
}
}
}
}
>view {
.hl {
color: #0385FA;
background: #E7F0FB;
}
.yl {
background: #DCF6F3;
color: #00C6A9;
}
.bj {
background: #E9EBFC;
color: #727BFF;
}
&:nth-child(1) {
font-weight: bold;
font-size: 1.5vw;
color: #333;
white-space: nowrap;
overflow: hidden;
width: 100%;
text-overflow: ellipsis;
}
&:nth-child(2) {
font-weight: 400;
font-size: 1.2vw;
color: #555555;
margin-top: .6vw;
}
&:nth-child(3) ,&:nth-child(4) {
font-weight: 400;
font-size: 1.2vw;
color: #666666;
margin-top: .6vw;
}
&:nth-child(5) {
width: 100%;
height: 7vw;
}
.znk {
width: 8vw;
height: 7vw;
position: absolute;
right: 1vw;
bottom: 4.3vw;
image {
width: 100%;
height: 100%;
}
}
.carditem {
width: 5.8vw;
height: 2.1vw;
border-radius: 1.0vw;
display: flex;
justify-content: center;
align-items: center;
font-weight: 400;
font-size: .9vw;
margin-top: .8vw;
image {
width: 1.4vw;
height: 1.4vw;
}
}
}
}
.cgdh{
width: 100%;
height: 4.3vw;
display: flex;
justify-content: space-between;
align-items: center;
color: #333333;
font-weight: bold;
view{
font-size: 1.1vw;
}
text{
font-size: 1.4vw;
}
}
.gys{
width: 100%;
height: 2vw;
background:rgba(238, 238, 238, 0.5);
text-align: right;
font-weight: 400;
font-size: 1.1vw;
color: #666666;
padding-right: 0.8vw;
line-height: 2vw;
}
}
}
.title{
height: 2vw;
font-weight: 400;
font-size: 1.4vw;
color: #333333;
}
}
.uncrkcard{
right: -26vw !important;
}
.wuliao {
width: 25.2vw;
height: 48.8vw;
background: #FFFFFF;
box-shadow: 0rpx 0rpx 1vw 0rpx rgba(171, 171, 172, 0.29);
border-radius: 1.6vw;
position: fixed;
bottom: 11vw;
right: 1.5vw;
z-index: 103;
padding: 4vw 2.2vw 2vw;
.dibu {
width: 100%;
display: flex;
justify-content: space-between;
margin: 2vw auto 0;
view {
width: 4vw;
height: 80%;
font-weight: 400;
font-size: .9vw;
color: #8F92A1;
display: flex;
flex-direction: column;
margin-left: 2.1vw;
margin-top: -0.2vw;
align-items: center;
.l {
color: rgba(3, 133, 250, 1);
}
.f {
color: rgba(250, 178, 182, 1);
}
>text {
white-space: nowrap;
display: inline-block;
display: flex;
&:nth-child(1) {
font-weight: bold;
font-size: 1.4vw;
color: #555555;
}
&:nth-child(2) {
font-weight: 400;
font-size: .9vw;
color: #8F92A1;
white-space: nowrap;
}
}
}
}
.zil {
font-weight: 400;
font-size: 1.1vw;
color: #777777;
margin-top: .9vw;
}
.life {
width: 60%;
height: 2vw;
margin: 0 auto 3vw;
display: flex;
justify-content: space-around;
view {
width: 5.3vw;
height: 1.8vw;
border-radius: .9vw;
border: 1px solid #D2D2D2;
display: flex;
justify-content: center;
align-items: center;
font-weight: 400;
font-size: .9vw;
color: #555555;
margin-left: .6vw;
}
}
.znk {
width: 16vw;
height: 15vw;
margin: 2vw auto 0;
}
.name {
width: 100%;
font-weight: bold;
font-size: 1.4vw;
color: #212327;
height: 3vw;
line-height: 1.5vw;
}
}
//
.shuru {
width: 20.6vw;
height: 34.5vw;
position: fixed;
bottom: 1.5vw;
right: 1.6vw;
z-index: 103;
}
.mengban {
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
z-index: 100;
background: RGBA(239, 240, 244, 0.55);
}
.tp {
image {
width: 100%;
height: 100%;
}
}
.box {
width: 100vw;
height: 100vh;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
padding: 0vw 1vw 0;
.rights {
width: 27vw;
height: calc(100% - 4vw);
margin-top: 4vw;
.serchs {
width: 27vw;
height: 3.2vw;
background: rgba(255, 255, 255, .5);
border-radius: 1.6vw;
display: flex;
justify-content: space-between;
padding: 0.5vw;
align-items: center;
margin-top: 1.1vw;
.ipt {
display: flex;
align-items: center;
image {
width: 2.2vw;
height: 2.2vw;
margin-left: 0.5vw;
}
input {
width: 18vw;
height: 2.4vw;
font-size: 1.1vw;
padding-left: 1.6vw;
}
}
.scr {
width: 4.2vw;
height: 2.4vw;
background: url('/static/index/warehouse/procurement/sh.png')no-repeat;
background-size: 100% 100%;
border-radius: 1.2vw;
border: 1px solid rgba(0, 155, 252, 1);
font-weight: 400;
font-size: 1vw;
color: #1083F8;
display: flex;
justify-content: center;
align-items: center;
}
}
.anmikc {
width: 100%;
height: 9vw;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
>view {
width: 8.5vw;
height: 3.7vw;
display: flex;
justify-content: center;
align-items: center;
font-weight: 400;
font-size: 1.3vw;
color: #212327;
background: #FFFFFF;
margin: 0.25vw 0;
border-radius: 1.6vw;
&:nth-child(1),&:nth-child(2){
width: 12.5vw;
}
view {
margin-right: .4vw;
image {
width: 2vw;
height: 2vw;
}
.donghua {
margin: 0;
}
}
text {
white-space: nowrap;
}
}
}
.typeitem {
width: 100%;
height: 54vh;
.scroltype {
width: 100%;
height: calc(54vh - 2vw);
display: flex;
justify-content: space-around;
.scroll-Y {
width: 8.5vw;
height: calc(54vh - 2vw);
view {
width: 100%;
height: 3.8vw;
background: rgba(255, 255, 255, .5);
border-radius: 1.9vw;
font-weight: 400;
font-size: 1.3vw;
color: #212327;
display: flex;
justify-content: center;
align-items: center;
padding: 0 0.4vw;
margin-bottom: .8vw;
text-align: center;
text {
white-space: nowrap;
}
>image {
width: 2vw;
height: 2vw;
}
}
.act {
background: rgba(255, 255, 255, 1) !important;
font-weight: 600;
color: #0385FA !important;
}
}
}
.toptype {
width: 100%;
height: 2vw;
display: flex;
justify-content: space-around;
margin: .4vw 0 .4vw 0;
view {
width: 7vw;
height: 1.9vw;
border-radius: 1vw;
display: flex;
justify-content: center;
align-items: center;
font-weight: 400;
font-size: 1.2vw;
color: #333333;
}
}
}
.shitem {
width: 27vw;
height: 10.3vw;
background: #E8E9ED;
border-radius: 1.6vw;
padding: 1.2vw 1.8vw;
.jqry {
width: 100%;
display: flex;
align-items: center;
.left {
width: 5vw;
height: 5vw;
margin-right: .8vw;
border-radius: .3vw;
overflow: hidden;
}
.rigname {
height: 4vw;
display: flex;
flex-direction: column;
justify-content: space-around;
view {
&:nth-child(1) {
font-weight: bold;
font-size: 1.4vw;
color: #212327;
}
&:nth-child(2) {
width: 11vw;
font-weight: 400;
font-size: 1vw;
color: #212327;
display: flex;
justify-content: space-between;
}
}
}
}
.shypk {
width: 100%;
display: flex;
justify-content: space-between;
view {
&:nth-child(1) {
font-weight: bold;
font-size: 1.1vw;
color: #333333;
}
&:nth-child(2) {
display: flex;
flex-direction: column;
align-items: center;
text {
font-weight: 400;
font-size: 1vw;
color: #666666;
}
}
}
}
}
}
.lefts {
width: 70vw;
margin-left: 1vw;
height: calc(100%);
position: relative;
.fxj {
width: 23vw;
height: 22vw;
position: absolute;
left: 0;
bottom: 2vw;
z-index: 11;
border-radius: 1.6vw;
text {
width: 100%;
font-weight: 400;
font-size: .9vw;
color: #999999;
display: flex;
justify-content: center;
position: absolute;
left: 0;
bottom: 0vw;
}
}
.mblbg {
width: 24.5vw;
height: 21vw;
position: absolute;
left: -1vw;
bottom: 0.5vw;
border-radius: 1.6vw;
filter: blur(15rpx);
background: RGBA(239, 240, 244, 1);
z-index: 10;
}
.scroll-Y {
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
.boxitem {
&:nth-child(1),
&:nth-child(2),
&:nth-child(3) {
margin-top: 4vw;
}
}
}
.boxitem {
width: 22vw;
height: 19.3vw;
background: rgba(255, 255, 255, .7);
border-radius: 1.6vw;
margin: 0 1.3vw 1.2vw 0;
border: 2px dashed #fff;
display: inline-block;
padding:1.5vw 2.3vw 2.3vw;
position: relative;
.dbgys{
width: 100%;
height: 4.3vw;
position: absolute;
left: 0;
bottom: 0vw;
background: rgba(239, 240, 244, 1);
border-radius:0 0 1.6vw 1.6vw;
border: 2px solid rgba(239, 240, 244, 1);
display: flex;
padding: 0.6vw 1.5vw;
justify-content: space-between;
.act{
background: rgba(231, 240, 251, 1) !important;
border: 1px solid rgba(0, 118, 214, 1) !important;
}
>view{
&:nth-child(2){
width: 2.2vw;
height: 2.2vw;
display: flex;
justify-content: center;
align-items: center;
background: #EEEEEE;
border-radius: 50%;
border: 1px solid #CBCFD0;
padding: 0 !important;
image{
width: 1.6vw;
height: 1.6vw;
}
}
&:nth-child(1){
display: flex;
flex-direction: column;
font-weight: 400;
font-size: 1vw;
color: #888888;
text{
font-weight: bold;
font-size: 1.4vw;
color: #555555;
}
}
}
}
>view {
.hl {
color: #0385FA;
background: #E7F0FB;
}
.yl {
background: #DCF6F3;
color: #00C6A9;
}
.bj {
background: #E9EBFC;
color: #727BFF;
}
&:nth-child(1) {
font-weight: bold;
font-size: 1.5vw;
color: #333;
white-space: nowrap;
overflow: hidden;
width: 100%;
text-overflow: ellipsis;
}
&:nth-child(2) {
font-weight: 400;
font-size: 1.2vw;
color: #555555;
margin-top: .6vw;
}
&:nth-child(3) ,&:nth-child(4) {
font-weight: 400;
font-size: 1.2vw;
color: #666666;
margin-top: .6vw;
}
&:nth-child(5) {
width: 100%;
height: 7vw;
}
.znk {
width: 8vw;
height: 7vw;
position: absolute;
right: 1vw;
bottom: 4.3vw;
image {
width: 100%;
height: 100%;
}
}
.carditem {
width: 5.8vw;
height: 2.1vw;
border-radius: 1.0vw;
display: flex;
justify-content: center;
align-items: center;
font-weight: 400;
font-size: .9vw;
margin-top: .8vw;
image {
width: 1.4vw;
height: 1.4vw;
}
}
}
}
}
}
.yujing {
border: 2px solid rgba(255, 102, 107, 0.51) !important;
box-shadow: 0 0 8px rgba(255, 102, 107, 0.051) inset;
view {
.num {
view {
&:nth-child(1) {
color: #FF5757 !important;
}
}
}
}
}
.active {
border: 2px dashed #017DE9 !important;
}
.swsh {
width: 2.7vw;
height: 1.5vw;
background: #D6D8DC;
border-radius: .75vw;
border: 1px solid #D6D8DC;
padding: 0.2vw;
box-sizing: border-box;
display: flex;
align-items: center;
>view {
width: 1.1vw;
height: 1.1vw;
background: #FCFCFD;
border-radius: 50%;
}
}
.act {
background: linear-gradient(-69deg, #E1EFFC, #CAE0F9, #D2E9FF) !important;
border: 1px solid rgba(0, 130, 251, 0.34) !important;
padding-left: 1.3vw;
view {
background: #0385FA;
position: absolute;
}
}
// 大图
.guodu {
transition: .4s;
-webkit-transform-style: preserve-3d;
-webkit-overflow-scrolling: touch;
}
.leftr {
width: 70vw;
margin-left: 1vw;
height: calc(100%);
position: relative;
.fxj {
width: 30vw;
height: 16vw;
position: absolute;
left: 1vw;
bottom: 0vw;
z-index: 111;
border-radius: 1.6vw;
text {
width: 76%;
font-weight: 400;
font-size: .9vw;
color: #999999;
display: flex;
justify-content: center;
position: absolute;
left: 0;
bottom: 0vw;
}
}
.mblbg {
width: 35vw;
height: 16vw;
position: absolute;
left: -1vw;
bottom: 0vw;
border-radius: 1.6vw;
filter: blur(15rpx);
background: RGBA(239, 240, 244, 1);
z-index: 10;
}
.scroll-Y {
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
.boxitem {
&:nth-child(1),
&:nth-child(2),
&:nth-child(3) {
margin-top: 4vw;
}
}
}
.boxibigtem {
&:nth-child(1),
&:nth-child(2) {
margin-top: 4vw;
}
}
.boxibigtem {
width: 33.3vw;
height: 21.7vw;
background: rgba(255, 255, 255, .7);
border-radius: 1.6vw;
margin: 0 1.3vw 1.2vw 0;
border: 2px dashed #fff;
display: inline-block;
padding: 2.3vw;
position: relative;
>view {
.hl {
color: #0385FA;
background: #E7F0FB;
}
.yl {
background: #DCF6F3;
color: #00C6A9;
}
.bj {
background: #E9EBFC;
color: #727BFF;
}
&:nth-child(1) {
font-weight: bold;
font-size: 1.5vw;
color: #333;
white-space: nowrap;
overflow: hidden;
width: 100%;
text-overflow: ellipsis;
}
&:nth-child(2) {
font-weight: 400;
font-size: 1.2vw;
color: #555555;
margin-top: .9vw;
}
&:nth-child(3) {
font-weight: 400;
font-size: 1.2vw;
color: #666666;
margin-top: .6vw;
}
>&:nth-child(4) {
width: 100%;
height: 10vw;
position: absolute;
left: 0;
bottom: 0;
}
.num {
position: absolute;
bottom: 2vw;
left: 2.5vw;
display: flex;
flex-direction: column;
justify-content: center;
view {
&:nth-child(1) {
font-weight: bold;
font-size: 2.2vw;
color: #555;
}
&:nth-child(2) {
font-weight: 400;
font-size: 1vw;
color: #999999;
}
}
}
.znk {
width: 12vw;
height: 11.5vw;
position: absolute;
right: 1.5vw;
bottom: 1vw;
image {
width: 100%;
height: 100%;
}
}
.carditem {
width: 5.8vw;
height: 2.1vw;
border-radius: 1.0vw;
display: flex;
justify-content: center;
align-items: center;
font-weight: 400;
font-size: .9vw;
margin-top: .8vw;
image {
width: 1.4vw;
height: 1.4vw;
}
}
}
}
}
</style>
<style>
page {
background: RGBA(239, 240, 244, 1);
}
</style>