1057 lines
25 KiB
Vue
1057 lines
25 KiB
Vue
<!-- 拣货按钮 -->
|
||
<template>
|
||
<view class="draw-all">
|
||
<view class="draw-contain">
|
||
<!-- 解决margin重叠问题 -->
|
||
<view class="draw-title">
|
||
<view class="draw-flex">
|
||
<view class="draw-title-gun"></view>
|
||
<view class="draw-title-font">采购单</view>
|
||
</view>
|
||
<view class="draw-title-money">
|
||
<view class="draw-title-mon-left">总金额：</view>
|
||
<view class="draw-title-mon-right">921.50</view>
|
||
</view>
|
||
<!-- <view :class="openType ? `title-button`:`title-button-red`">
|
||
{{stateArray[openType]}}
|
||
</view> -->
|
||
</view>
|
||
<view class="swiper-card-once">
|
||
<view class="swiper-card-top">
|
||
<view class="swiper-card-top-card">
|
||
<view class="swiper-card-top-card-weight">
|
||
<view class="weight-left">
|
||
<view class="">采购单号：</view>
|
||
<view class="" style="font-weight: 700;">A0120250301001</view>
|
||
</view>
|
||
<view class="weight-right">
|
||
<view class="draw-flex">
|
||
<!-- <view class="button-first" @click="openDrawer(0)">
|
||
入库单
|
||
</view>
|
||
<view class="button-second" @click="openDrawer(1)">
|
||
挂账单
|
||
</view>
|
||
<view class="button-third" @click="openDrawer(2)">
|
||
销账单
|
||
</view> -->
|
||
<view class="button-blue" style="margin-left: 80rpx;" @click="openDrawer(3)">
|
||
拣货
|
||
</view>
|
||
<view class="button-blue" @click="openDrawer(4)">
|
||
随行单
|
||
</view>
|
||
<!-- <view class="button-blue" style="width: 160rpx;">
|
||
批量拣货
|
||
</view> -->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- <view class="weight-boom"> -->
|
||
<view class="swiper-card-top-card-noral">
|
||
<view class="swiper-all-flex">
|
||
<view class="swiper-gray">
|
||
采购人：
|
||
</view>
|
||
<view class="swiper-black">
|
||
王法
|
||
</view>
|
||
</view>
|
||
<view class="swiper-all-flex" style="width: 55%;">
|
||
<view class="swiper-gray">
|
||
采购日期：
|
||
</view>
|
||
<view class="swiper-black">
|
||
2025.03.02
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="swiper-card-top-card-noral" style="margin-top: 15rpx;">
|
||
<view class="swiper-all-flex">
|
||
<view class="swiper-gray">
|
||
付款方式：
|
||
</view>
|
||
<view class="swiper-black">
|
||
月结
|
||
</view>
|
||
</view>
|
||
<view class="swiper-all-flex" style="width: 55%;">
|
||
<view class="swiper-gray">
|
||
供应商：
|
||
</view>
|
||
<view class="swiper-black">
|
||
宽城区珂爱个人卫生用品店
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- </view> -->
|
||
</view>
|
||
</view>
|
||
<view class="draw-title" style="margin-top: 0rpx;">
|
||
<view class="draw-flex">
|
||
<view class="draw-title-gun"></view>
|
||
<view class="draw-title-font">物料信息</view>
|
||
</view>
|
||
<view class="draw-flex">
|
||
<view class="draw-target" :style="targetTab===0?{background:`#fff`}:{}" @click="targetTab=0;sliceArray()">
|
||
<view class="bad-circle-right" v-if="targetTab===0"></view>
|
||
<view class="bad-circle-left" v-if="targetTab===0"></view>
|
||
<view class="kuai-blue"></view>
|
||
<view class="kuai-font">全部</view>
|
||
</view>
|
||
<view class="draw-target" :style="targetTab===1?{background:`#fff`}:{}" @click="targetTab=1;sliceArray()">
|
||
<view class="bad-circle-right" v-if="targetTab===1"></view>
|
||
<view class="bad-circle-left" v-if="targetTab===1"></view>
|
||
<view class="kuai-pouple"></view>
|
||
<view class="kuai-font">待入库</view>
|
||
</view>
|
||
<view class="draw-target" :style="targetTab===2?{background:`#fff`}:{}" @click="targetTab=2;sliceArray()">
|
||
<view class="bad-circle-right" v-if="targetTab===2"></view>
|
||
<view class="bad-circle-left" v-if="targetTab===2"></view>
|
||
|
||
<view class="kuai-green"></view>
|
||
<view class="kuai-font">已入库</view>
|
||
</view>
|
||
<view class="draw-target" style="margin-right: 120rpx;" :style="targetTab===3?{background:`#fff`}:{}" @click="targetTab=3;sliceArray()">
|
||
<view class="bad-circle-right" v-if="targetTab===3"></view>
|
||
<view class="bad-circle-left" v-if="targetTab===3"></view>
|
||
<view class="kuai-orange"></view>
|
||
<view class="kuai-font">销账</view>
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
<view class="scroll-view">
|
||
<scroll-view scroll-y style="height: 93%;margin-top: 2%;" :show-scrollbar="false">
|
||
<view class="swiper-flex">
|
||
<view v-for="(item,index) in relArray" :key="index" @click="clickIndex(index)">
|
||
<view class="swiper-card" :style="
|
||
item.type === 1
|
||
? {
|
||
// backgroundColor: '#00D6A9',
|
||
background: '#00D6A9 url(/static/index/warehouseCard/bgcgreengreen.png) center/cover'
|
||
}
|
||
: item.type === 2
|
||
? {
|
||
// backgroundColor: '#BD9AF8',
|
||
background: '#FF6699 url(/static/index/warehouseCard/bgcorange.png) center/cover'
|
||
}
|
||
: {}
|
||
">
|
||
<view class="card-button" :style="item.type === 1
|
||
? { background: 'linear-gradient(to right, #E2FFFF, #83EBDC, #E2FFFF)' }
|
||
: item.type === 2
|
||
? { background: 'linear-gradient(to right, #FFFFFF , #FFCCC3, #FFE6FF )' }
|
||
: {}">
|
||
<view class="boom-other-card">
|
||
<image class="boom-other-img" src="/static/index/Warehousing/goku.png" />
|
||
<view class="boom-other-font">入库数量</view>
|
||
<view class="boom-other-weight">10</view>
|
||
</view>
|
||
<view class="white-shu"></view>
|
||
<view class="boom-other-card">
|
||
<image class="boom-other-img" src="/static/index/Warehousing/guazhang.png" />
|
||
<view class="boom-other-font">挂账数量</view>
|
||
<view class="boom-other-weight">0</view>
|
||
</view>
|
||
<view class="white-shu"></view>
|
||
<view class="boom-other-card">
|
||
<image class="boom-other-img" src="/static/index/Warehousing/hexiao.png" />
|
||
<view class="boom-other-font">销账数量</view>
|
||
<view class="boom-other-weight">0</view>
|
||
</view>
|
||
</view>
|
||
<view class="swiper-card-title">
|
||
<view class="swiper-card-img" v-if="!saveIndex.includes(index)">
|
||
<view class="swiper-card-font-font">✓</view>
|
||
</view>
|
||
<view class="swiper-card-img-target" v-if="saveIndex.includes(index)">
|
||
<view class="swiper-card-font-font">✓</view>
|
||
</view>
|
||
<!-- <image class="swiper-card-img" src="/static/index/leftjiao.png" /> -->
|
||
<view class="swiper-card-title-name">
|
||
<view class="swiper-card-font">
|
||
采购数量：
|
||
</view>
|
||
<view class="swiper-card-weight">
|
||
10
|
||
</view>
|
||
<view class="swiper-card-shu">
|
||
|
|
||
</view>
|
||
<view class="swiper-card-font">
|
||
总金额：
|
||
</view>
|
||
<view class="swiper-card-weight">
|
||
1150
|
||
</view>
|
||
</view>
|
||
<view class="swiper-right-title">
|
||
<!-- <view class="swiper-title-font">{{item.name}}</view> -->
|
||
<view class="swiper-title-font-button" v-if="item.type!==2">
|
||
{{ item.type === 0
|
||
? '待入库'
|
||
: item.type === 1
|
||
? '已入库'
|
||
: '' }}
|
||
</view>
|
||
<view class="swiper-title-font-button" style="margin-right: 45rpx;margin-left: 5rpx;" v-if="item.type===2">
|
||
销账
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view style="display: flex;">
|
||
<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`" />
|
||
</view>
|
||
|
||
</view>
|
||
<view class="swiper-card-right">
|
||
|
||
<view class="swiper-font" style="margin-top: 30rpx;">
|
||
<view class="swiper-font-left">
|
||
物料名称:
|
||
</view>
|
||
<view class="swiper-font-right">
|
||
胃管(进口)
|
||
</view>
|
||
</view>
|
||
<view class="swiper-font" style="margin-top: 10rpx;">
|
||
<view class="swiper-font-left">
|
||
规格型号:
|
||
</view>
|
||
<view class="swiper-font-right">
|
||
CH/FR15,100cm
|
||
</view>
|
||
</view>
|
||
<view class="swiper-font" style="margin-top: 10rpx;">
|
||
<view class="swiper-font-left">
|
||
物料编码:
|
||
</view>
|
||
<view class="swiper-font-right">
|
||
QXYP016
|
||
</view>
|
||
</view>
|
||
<view class="swiper-font" style="margin-top: 10rpx;">
|
||
<view class="swiper-font-left">
|
||
采购单位:
|
||
</view>
|
||
<view class="swiper-font-right">
|
||
根
|
||
</view>
|
||
</view>
|
||
<view class="swiper-font" style="margin-top: 10rpx;">
|
||
<view class="swiper-font-left">
|
||
采购单价:
|
||
</view>
|
||
<view class="swiper-font-right" style="margin-right: 20rpx;">
|
||
115.00
|
||
</view>
|
||
<view class="swiper-font-left">
|
||
到货单价:
|
||
</view>
|
||
<view class="swiper-font-right">
|
||
115.00
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
<!-- <view class="draw-title" style="margin-top: 35rpx;margin-bottom: 10rpx;">
|
||
<view class="draw-flex">
|
||
<view class="draw-title-gun"></view>
|
||
<view class="draw-title-font">{{openType?`备注`:`作废原因`}}</view>
|
||
<view v-if="!openType" class="draw-red">*</view>
|
||
</view>
|
||
</view>
|
||
<view class="down-note">
|
||
<textarea class="down-note-title-input" v-model="note" maxlength="300" placeholder-style="color:#999"
|
||
:placeholder="openType?`请输入备注`:`不予采购`" />
|
||
<text class="char-count">{{ note.length }}/300</text>
|
||
</view> -->
|
||
|
||
<!-- <view class="button-card">
|
||
|
||
</view> -->
|
||
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, onMounted, onBeforeUnmount, computed, nextTick, defineProps, defineEmits, watch } from 'vue';
|
||
const note = ref("");
|
||
const calendarShow = ref(false);
|
||
const stateTarget = ref("");
|
||
|
||
const targetTab = ref(0);
|
||
const stateArray = ['已作废', '未确认', '已确认', '未完结', '待结账', '已结账'];
|
||
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
|
||
},
|
||
])
|
||
onMounted(()=>{
|
||
relArray.value = JSON.parse(JSON.stringify(cardsArray.value))
|
||
})
|
||
// 初始化左侧菜单列表
|
||
const buttonList = ref([
|
||
{ url: '/static/index/Warehousing/sousuo.png', name: '查询' },
|
||
{ url: '/static/index/Warehousing/chongzhi.png', name: '重置' },
|
||
|
||
]);
|
||
const emit = defineEmits(['closedetail', 'openDrawer'])
|
||
const calendarchange = (e : any) => {
|
||
stateTarget.value = e.result
|
||
}
|
||
const closedetail = () => {
|
||
emit('closedetail')
|
||
}
|
||
const openDrawer = (index : number) => {
|
||
emit('openDrawer', index)
|
||
}
|
||
const saveIndex = ref([])
|
||
const clickIndex = (index : number) => {
|
||
if (saveIndex.value.includes(index)) { // 1. 判断是否已存在
|
||
// 2. 如果存在，则移除：使用 filter 返回一个不包含该 index 的新数组
|
||
saveIndex.value = saveIndex.value.filter(item => item !== index); // :contentReference[oaicite:0]{index=0}
|
||
} else {
|
||
// 3. 如果不存在，则添加
|
||
saveIndex.value.push(index); // :contentReference[oaicite:1]{index=1}
|
||
}
|
||
};
|
||
const relArray = ref([]);
|
||
const sliceArray = () =>{
|
||
relArray.value = [];
|
||
if(!targetTab.value){
|
||
relArray.value = JSON.parse(JSON.stringify(cardsArray.value))
|
||
}else{
|
||
cardsArray.value.forEach((element:any)=>{
|
||
if(element.type===targetTab.value-1){
|
||
relArray.value.push(element);
|
||
}
|
||
})
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.draw-all {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
background-color: #fff;
|
||
border-top-left-radius: 80rpx;
|
||
border-bottom-left-radius: 80rpx;
|
||
overflow: hidden;
|
||
|
||
.draw-flex {
|
||
display: flex;
|
||
|
||
.button-first {
|
||
width: 140rpx;
|
||
height: 60rpx;
|
||
border-radius: 20rpx;
|
||
margin-right: 15rpx;
|
||
background: linear-gradient(to bottom right, #00C3AC, #28CFB3);
|
||
color: #fff;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin-left: 80rpx;
|
||
}
|
||
|
||
.button-second {
|
||
width: 140rpx;
|
||
height: 60rpx;
|
||
border-radius: 20rpx;
|
||
margin-right: 15rpx;
|
||
background: linear-gradient(to bottom right, #869AF3, #8296E9);
|
||
color: #fff;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.button-third {
|
||
width: 140rpx;
|
||
height: 60rpx;
|
||
border-radius: 20rpx;
|
||
margin-right: 15rpx;
|
||
background: linear-gradient(to bottom right, #FF9D94, #FF7A95);
|
||
color: #fff;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.button-blue {
|
||
width: 140rpx;
|
||
height: 60rpx;
|
||
border-radius: 20rpx;
|
||
margin-right: 15rpx;
|
||
background: linear-gradient(to bottom right, #00C9FF, #0076FF);
|
||
color: #fff;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
}
|
||
|
||
.draw-contain {
|
||
width: 100%;
|
||
height: calc(100vh);
|
||
background-image: url("/static/index/fanpink.png");
|
||
background-repeat: no-repeat;
|
||
background-attachment: fixed;
|
||
background-size: cover;
|
||
}
|
||
}
|
||
|
||
.swiper-gray {
|
||
color: #596278;
|
||
}
|
||
|
||
.draw-title {
|
||
width: 100%;
|
||
height: 60rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-top: 80rpx;
|
||
margin-left: 20rpx;
|
||
|
||
.draw-flex {
|
||
display: flex;
|
||
|
||
|
||
}
|
||
|
||
.draw-title-gun {
|
||
margin-left: 20rpx;
|
||
margin-right: 20rpx;
|
||
width: 13rpx;
|
||
height: 40rpx;
|
||
background: linear-gradient(to bottom, #04BCED, #0160CE);
|
||
border-radius: 10rpx;
|
||
}
|
||
|
||
.draw-title-font {
|
||
font-size: 35rpx;
|
||
font-weight: 700;
|
||
margin-top: -3rpx;
|
||
}
|
||
|
||
.draw-title-blue {
|
||
height: 50rpx;
|
||
width: 120rpx;
|
||
margin-right: 50rpx;
|
||
background: linear-gradient(to right bottom, #00c9ff, #0076ff);
|
||
color: #fff;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 10rpx;
|
||
border: 1rpx solid #fff;
|
||
}
|
||
}
|
||
|
||
.scroll-view {
|
||
height: 1000rpx;
|
||
width: calc(100% - 80rpx);
|
||
margin-left: 40rpx;
|
||
border-radius: 40rpx;
|
||
border: 2rpx solid #fff;
|
||
box-shadow: 4rpx 8rpx 16rpx 4rpx #839fcc;
|
||
overflow: hidden;
|
||
background-color: #fff;
|
||
// z-index: 999;
|
||
}
|
||
|
||
.swiper-card-once {
|
||
margin: 0 0 30rpx 30rpx;
|
||
width: 1340rpx;
|
||
height: 240rpx;
|
||
border: 2rpx solid #fff;
|
||
border-radius: 30rpx;
|
||
// background: url("/static/index/blueMountain.png") center/cover, rgba(255, 255, 255, 0.5);
|
||
// background-blend-mode: screen;
|
||
// isolation: isolate;
|
||
background: rgba(255, 255, 255, 0.5);
|
||
box-shadow: 5rpx 5rpx 10rpx 0rpx #839fcc;
|
||
overflow: hidden;
|
||
// padding: 0 40rpx;
|
||
padding-left: 40rpx;
|
||
|
||
.swiper-card-top {
|
||
width: 100%;
|
||
height: 270rpx;
|
||
display: flex;
|
||
|
||
.swiper-card-top-card {
|
||
width: 100%;
|
||
height: 100%;
|
||
|
||
.swiper-card-top-card-weight {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
font-size: 30rpx;
|
||
font-weight: 500;
|
||
|
||
.weight-left {
|
||
display: flex;
|
||
margin: 25rpx 0;
|
||
|
||
.blue-number {
|
||
font-size: 32rpx;
|
||
font-weight: 700;
|
||
color: #017DE9;
|
||
margin-top: 10rpx;
|
||
}
|
||
}
|
||
|
||
.weight-right {
|
||
width: 400rpx;
|
||
height: 90rpx;
|
||
background-image: url("/static/index/caigoubgc.png");
|
||
background-repeat: repeat;
|
||
background-position: top left;
|
||
background-size: 880rpx 90rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
// color: #FF6000;
|
||
// font-weight: 500;
|
||
// font-size: 30rpx;
|
||
}
|
||
}
|
||
|
||
.weight-boom {
|
||
width: 1270rpx;
|
||
margin-left: -10rpx;
|
||
height: 140rpx;
|
||
background-color: rgba(131, 159, 204, 0.2);
|
||
border: 2rpx solid #fff;
|
||
box-shadow: 5rpx 5rpx 10rpx 0rpx #839fcc;
|
||
border-radius: 25rpx;
|
||
}
|
||
|
||
.swiper-card-top-card-noral {
|
||
margin-left: 50rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-top: 30rpx;
|
||
font-size: 25rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.swiper-flex {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
margin-left: 0rpx;
|
||
|
||
|
||
|
||
.swiper-card {
|
||
margin: 20rpx 0 0 20rpx;
|
||
width: 625rpx;
|
||
height: 345rpx;
|
||
// border: 2rpx solid #fff;
|
||
border-radius: 30rpx;
|
||
background: rgb(134,154,243) url("/static/index/warehouseCard/bgcblueblue.png") center/cover;
|
||
box-shadow: 2rpx 2rpx 4rpx 0rpx rgba(0, 0, 0, 0.3);
|
||
display: flex;
|
||
flex-direction: column;
|
||
position: relative;
|
||
overflow: hidden;
|
||
|
||
.swiper-card-left {
|
||
height: 100%;
|
||
width: 400rpx;
|
||
|
||
.swiper-card-left-white {
|
||
margin: 0rpx 0 20rpx 30rpx;
|
||
margin-top: -15rpx;
|
||
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;
|
||
|
||
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
.index-right-button-blue {
|
||
height: 50rpx;
|
||
width: 100rpx;
|
||
background: linear-gradient(to right bottom, #00c9ff, #0076ff);
|
||
color: #fff;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 10rpx;
|
||
border: 1rpx solid #fff;
|
||
}
|
||
|
||
.swiper-all-flex {
|
||
display: flex;
|
||
}
|
||
|
||
.card-img-father {
|
||
height: 100%;
|
||
width: 230rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.card-img {
|
||
margin-top: -15rpx;
|
||
// 图片切的有问题
|
||
width: 70%;
|
||
height: 70%;
|
||
}
|
||
}
|
||
|
||
.card-right {
|
||
width: calc(100% - 230rpx);
|
||
height: 100%;
|
||
|
||
.card-right-title {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-weight: 700;
|
||
margin: 30rpx 0;
|
||
|
||
.title-gray {
|
||
color: #596278;
|
||
font-size: 30rpx;
|
||
}
|
||
|
||
.title-black {
|
||
font-size: 30rpx;
|
||
}
|
||
}
|
||
|
||
.card-right-other {
|
||
margin-top: 20rpx;
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: 25rpx;
|
||
|
||
.title-gray {
|
||
color: #596278;
|
||
}
|
||
|
||
.title-green {
|
||
color: #647900;
|
||
}
|
||
|
||
.title-red {
|
||
color: #FF4A27;
|
||
}
|
||
}
|
||
}
|
||
|
||
.swiper-button-white {
|
||
background: linear-gradient(to bottom, #D5E0F8, #ECF6FF);
|
||
border: 2rpx solid #fff;
|
||
border-radius: 20rpx;
|
||
width: 200rpx;
|
||
height: 80rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin: 0 10rpx;
|
||
margin-right: 40rpx;
|
||
}
|
||
|
||
.swiper-button-blue {
|
||
background: linear-gradient(to bottom, #00C9FF, #0076FF);
|
||
border: 2rpx solid #fff;
|
||
border-radius: 20rpx;
|
||
width: 200rpx;
|
||
height: 80rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin: 0 10rpx;
|
||
color: #fff;
|
||
|
||
}
|
||
|
||
.button-card {
|
||
margin-top: 30rpx;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
.down-note {
|
||
width: 100%;
|
||
overflow: hidden;
|
||
height: 170rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
position: relative;
|
||
margin-top: -10rpx;
|
||
}
|
||
|
||
.down-note-title-input {
|
||
width: calc(100% - 100rpx);
|
||
margin-left: 40rpx;
|
||
height: 120rpx;
|
||
font-size: 27rpx;
|
||
border: 2rpx #a0adc8 solid;
|
||
padding: 15rpx 0 15rpx 20rpx;
|
||
background-color: rgba(234, 243, 254, 0.6);
|
||
border-radius: 30rpx;
|
||
}
|
||
|
||
.char-count {
|
||
position: absolute;
|
||
bottom: 30rpx;
|
||
right: 70rpx;
|
||
color: #999;
|
||
font-size: 25rpx;
|
||
}
|
||
|
||
.title-button {
|
||
height: 50rpx;
|
||
width: 120rpx;
|
||
margin-right: 50rpx;
|
||
border: 2rpx solid #fff;
|
||
border-radius: 15rpx;
|
||
background: #00AEFF;
|
||
color: #fff;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.title-button-red {
|
||
height: 50rpx;
|
||
width: 120rpx;
|
||
margin-right: 50rpx;
|
||
border: 2rpx solid #fff;
|
||
border-radius: 15rpx;
|
||
background: linear-gradient(to bottom, #FF8251, #F52E2C);
|
||
color: #fff;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.draw-red {
|
||
color: red;
|
||
font-size: 40rpx;
|
||
margin-top: -10rpx;
|
||
}
|
||
|
||
.draw-title-money {
|
||
display: flex;
|
||
|
||
.draw-title-mon-left {
|
||
font-size: 34rpx;
|
||
}
|
||
|
||
.draw-title-mon-right {
|
||
font-size: 34rpx;
|
||
font-weight: 700;
|
||
margin-right: 50rpx;
|
||
}
|
||
}
|
||
|
||
.kuai-blue {
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
border-radius: 5rpx;
|
||
background-color: #0091FF;
|
||
margin-top: 2rpx;
|
||
}
|
||
.kuai-pouple {
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
border-radius: 5rpx;
|
||
background-color: rgb(134,154,243);
|
||
margin-top: 2rpx;
|
||
}
|
||
.kuai-orange {
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
border-radius: 5rpx;
|
||
background-color: #FF6699 ;
|
||
margin-top: 2rpx;
|
||
// margin-right: 20rpx;
|
||
}
|
||
|
||
.kuai-green {
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
border-radius: 5rpx;
|
||
background-color: #00C3AC;
|
||
margin-top: 2rpx;
|
||
// margin-right: 20rpx;
|
||
}
|
||
|
||
.kuai-font {
|
||
margin-left: 10rpx;
|
||
|
||
// margin-right: 20rpx;
|
||
}
|
||
|
||
.swiper-card-title {
|
||
width: 100%;
|
||
height: 50rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.swiper-card-img {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
background: url('/static/index/leftjiao.png') no-repeat center center fixed;
|
||
background-size: cover;
|
||
|
||
.swiper-card-font-font {
|
||
color: #fff;
|
||
font-size: 30rpx;
|
||
font-weight: 900;
|
||
margin-top: 10rpx;
|
||
margin-left: 10rpx;
|
||
}
|
||
}
|
||
|
||
.swiper-card-img-target {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
background: url('/static/index/leftbluejiao.png') no-repeat center center fixed;
|
||
background-size: cover;
|
||
|
||
.swiper-card-font-font {
|
||
color: #fff;
|
||
font-size: 30rpx;
|
||
font-weight: 900;
|
||
margin-top: 10rpx;
|
||
margin-left: 10rpx;
|
||
}
|
||
}
|
||
|
||
.swiper-card-title-name {
|
||
display: flex;
|
||
|
||
// width: 100%;
|
||
margin-top: 20rpx;
|
||
margin-right: 20rpx;
|
||
// margin-left: 30rpx;
|
||
|
||
.swiper-card-font {}
|
||
|
||
.swiper-card-weight {
|
||
font-weight: 500;
|
||
}
|
||
|
||
.swiper-card-shu {
|
||
color: #999;
|
||
margin: 0 20rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.swiper-title-font-button {
|
||
color: #fff;
|
||
border-radius: 10rpx;
|
||
|
||
margin-right: 30rpx;
|
||
margin-top: 15rpx;
|
||
font-size: 28rpx;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.swiper-font {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
|
||
.swiper-font-left {
|
||
font-size: 23rpx;
|
||
}
|
||
|
||
.swiper-font-right {
|
||
font-size: 23rpx;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
|
||
.card-button {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
height: 60rpx;
|
||
width: 100%;
|
||
background: linear-gradient(to right, #E1EFFF, #CEE5FF, #EDF5FF);
|
||
}
|
||
|
||
.boom-other-card {
|
||
width: 250rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
// background-color: #fff;
|
||
.boom-other-img {
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
margin-left: 20rpx;
|
||
// margin-top: -5rpx;
|
||
}
|
||
|
||
.boom-other-font {
|
||
margin-left: 5rpx;
|
||
font-size: 25rpx;
|
||
}
|
||
|
||
.boom-other-weight {
|
||
font-weight: 700;
|
||
margin-left: 15rpx;
|
||
}
|
||
}
|
||
|
||
.draw-target {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 180rpx;
|
||
height: 75rpx;
|
||
// background-color: #fff;
|
||
margin-top: -15rpx;
|
||
// border-radius: 15rpx;
|
||
border-top-right-radius: 15rpx;
|
||
border-top-left-radius: 15rpx;
|
||
margin-right: 20rpx;
|
||
position: relative;
|
||
|
||
}
|
||
|
||
.bad-circle-right {
|
||
position: absolute;
|
||
bottom: 0rpx;
|
||
right: -19rpx;
|
||
width: 20rpx;
|
||
height: 20rpx;
|
||
background-color: #fff;
|
||
-webkit-mask-image: radial-gradient(circle farthest-side at 100% 0, transparent calc(100% - 1rpx), black 100%);
|
||
mask-image: radial-gradient(circle farthest-side at 100% 0, transparent calc(100% - 1px), black 100%);
|
||
}
|
||
.bad-circle-left{
|
||
position: absolute;
|
||
bottom: 0rpx;
|
||
left: -19rpx;
|
||
width: 20rpx;
|
||
height: 20rpx;
|
||
background-color: #fff;
|
||
|
||
/* 保持原来的 mask 定义 */
|
||
-webkit-mask-image: radial-gradient(circle farthest-side at 100% 0, transparent calc(100% - 1rpx), black 100%);
|
||
mask-image: radial-gradient(circle farthest-side at 100% 0, transparent calc(100% - 1px), black 100%);
|
||
|
||
/* 水平翻转 */
|
||
transform: scaleX(-1);
|
||
}
|
||
</style> |