716 lines
16 KiB
Vue
716 lines
16 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="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-left">
|
|||
|
|
<view class="">总金额：</view>
|
|||
|
|
<view class="">100.00</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: 25rpx;">
|
|||
|
|
<view class="draw-flex">
|
|||
|
|
<view class="draw-title-gun"></view>
|
|||
|
|
<view class="draw-title-font">物料信息</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="draw-flex" style="margin-top: -10rpx;">
|
|||
|
|
<view class="button-blue" @click="openDrawer(4)">
|
|||
|
|
随行单
|
|||
|
|
</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 cardArray" :key="index">
|
|||
|
|
<view class="swiper-card">
|
|||
|
|
<view class="swiper-card-rightbox">
|
|||
|
|
<view class="vertical-line"></view>
|
|||
|
|
<view class="rightbox-other">
|
|||
|
|
<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="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="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>
|
|||
|
|
<view class="swiper-card-top">
|
|||
|
|
<view class="swiper-card-top-card">
|
|||
|
|
<view class="card-img-father">
|
|||
|
|
<image class="card-img" src="/static/index/guan.png" />
|
|||
|
|
</view>
|
|||
|
|
<view class="card-right">
|
|||
|
|
<view class="card-right-title">
|
|||
|
|
<view class="draw-flex">
|
|||
|
|
<view class="title-gray">
|
|||
|
|
货品名称：
|
|||
|
|
</view>
|
|||
|
|
<view class="title-black">
|
|||
|
|
{{item.name}}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="card-right-other">
|
|||
|
|
<view class="draw-flex" style="width: 35%;">
|
|||
|
|
<view class="title-gray">
|
|||
|
|
货品编码：
|
|||
|
|
</view>
|
|||
|
|
<view class="title-black">
|
|||
|
|
FLYPO01
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="draw-flex" style="width: 35%;">
|
|||
|
|
<view class="title-gray">
|
|||
|
|
规格型号：
|
|||
|
|
</view>
|
|||
|
|
<view class="title-black">
|
|||
|
|
6cm*7cm
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="draw-flex" style="width: 30%;">
|
|||
|
|
<view class="title-gray">
|
|||
|
|
采购单位：
|
|||
|
|
</view>
|
|||
|
|
<view class="title-black">
|
|||
|
|
个
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="card-right-other">
|
|||
|
|
<view class="draw-flex" style="width: 35%;">
|
|||
|
|
<view class="title-gray">
|
|||
|
|
参考单价：
|
|||
|
|
</view>
|
|||
|
|
<view class="title-green">
|
|||
|
|
0.1
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="draw-flex" style="width: 35%;">
|
|||
|
|
<view class="title-gray">
|
|||
|
|
采购单价：
|
|||
|
|
</view>
|
|||
|
|
<view class="title-black">
|
|||
|
|
{{item.price}}
|
|||
|
|
</view>
|
|||
|
|
<image class="title-img" src="/static/index/Warehousing/pen.png" @click="openPen(index)" />
|
|||
|
|
</view>
|
|||
|
|
<view class="draw-flex" style="width: 30%;">
|
|||
|
|
<view class="title-gray">
|
|||
|
|
采购金额：
|
|||
|
|
</view>
|
|||
|
|
<view class="title-black">
|
|||
|
|
10.12
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</scroll-view>
|
|||
|
|
</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 props = defineProps({
|
|||
|
|
openType: {
|
|||
|
|
type: Number,
|
|||
|
|
required: true,
|
|||
|
|
},
|
|||
|
|
valueBack:{
|
|||
|
|
type: Number,
|
|||
|
|
required: true,
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
const cardArray = [
|
|||
|
|
{
|
|||
|
|
name: "引流袋（医用透明）",
|
|||
|
|
price: 0.1
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: "引流袋（医用透明）",
|
|||
|
|
price: 0.1
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: "引流袋（医用透明）",
|
|||
|
|
price: 0.1
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: "引流袋（医用透明）",
|
|||
|
|
price: 0.1
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: "引流袋（医用透明）",
|
|||
|
|
price: 0.1
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: "引流袋（医用透明）",
|
|||
|
|
price: 0.1
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: "引流袋（医用透明）",
|
|||
|
|
price: 0.1
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
]
|
|||
|
|
|
|||
|
|
const stateArray = ['已作废', '未确认', '已确认', '未完结', '待结账', '已结账'];
|
|||
|
|
|
|||
|
|
// 初始化左侧菜单列表
|
|||
|
|
const buttonList = ref([
|
|||
|
|
{ url: '/static/index/Warehousing/sousuo.png', name: '查询' },
|
|||
|
|
{ url: '/static/index/Warehousing/chongzhi.png', name: '重置' },
|
|||
|
|
|
|||
|
|
]);
|
|||
|
|
const emit = defineEmits(['closedetail', 'openDrawer',"openPen"])
|
|||
|
|
const calendarchange = (e : any) => {
|
|||
|
|
stateTarget.value = e.result
|
|||
|
|
}
|
|||
|
|
const closedetail = () => {
|
|||
|
|
emit('closedetail')
|
|||
|
|
}
|
|||
|
|
const openDrawer = (index : number) => {
|
|||
|
|
emit('openDrawer', index)
|
|||
|
|
}
|
|||
|
|
const savePenIndex = ref(0);
|
|||
|
|
const openPen = (index:number) => {
|
|||
|
|
savePenIndex.value = index;
|
|||
|
|
emit("openPen",cardArray[index].price)
|
|||
|
|
}
|
|||
|
|
watch(
|
|||
|
|
() => props.valueBack,
|
|||
|
|
() => {
|
|||
|
|
if(props.valueBack!=-1){
|
|||
|
|
cardArray[savePenIndex.value].price = props.valueBack
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{ immediate: true }
|
|||
|
|
)
|
|||
|
|
</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;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.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;
|
|||
|
|
|
|||
|
|
.button-first {
|
|||
|
|
width: 120rpx;
|
|||
|
|
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;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.button-second {
|
|||
|
|
width: 120rpx;
|
|||
|
|
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: 120rpx;
|
|||
|
|
height: 60rpx;
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
margin-right: 60rpx;
|
|||
|
|
background: linear-gradient(to bottom right, #FF7A95, #FF9D94);
|
|||
|
|
color: #fff;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.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: 950rpx;
|
|||
|
|
width: calc(100% - 80rpx);
|
|||
|
|
margin-left: 40rpx;
|
|||
|
|
border-radius: 40rpx;
|
|||
|
|
border: 2rpx solid #fff;
|
|||
|
|
box-shadow: 4rpx 8rpx 16rpx 4rpx #839fcc;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.swiper-card-once {
|
|||
|
|
margin: 0 0 30rpx 30rpx;
|
|||
|
|
width: 1340rpx;
|
|||
|
|
height: 270rpx;
|
|||
|
|
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;
|
|||
|
|
box-shadow: 5rpx 5rpx 10rpx 0rpx #839fcc;
|
|||
|
|
overflow: hidden;
|
|||
|
|
padding: 0 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;
|
|||
|
|
margin: 25rpx 0;
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
font-weight: 500;
|
|||
|
|
|
|||
|
|
.weight-left {
|
|||
|
|
display: flex;
|
|||
|
|
|
|||
|
|
.blue-number {
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
font-weight: 700;
|
|||
|
|
color: #017DE9;
|
|||
|
|
margin-top: 10rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.weight-right {
|
|||
|
|
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: 0 0 30rpx 30rpx;
|
|||
|
|
width: 1250rpx;
|
|||
|
|
height: 230rpx;
|
|||
|
|
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;
|
|||
|
|
box-shadow: 5rpx 5rpx 10rpx 0rpx #839fcc;
|
|||
|
|
overflow: hidden;
|
|||
|
|
padding: 0 40rpx;
|
|||
|
|
position: relative;
|
|||
|
|
|
|||
|
|
.swiper-card-rightbox {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0;
|
|||
|
|
right: 0;
|
|||
|
|
width: 220rpx;
|
|||
|
|
height: 100%;
|
|||
|
|
background-color: rgb(211, 238, 254);
|
|||
|
|
display: flex;
|
|||
|
|
|
|||
|
|
.vertical-line {
|
|||
|
|
height: 100%;
|
|||
|
|
width: 2rpx;
|
|||
|
|
background: linear-gradient(to bottom,
|
|||
|
|
rgba(255, 255, 255, 0) 0%,
|
|||
|
|
#ffffff 50%,
|
|||
|
|
rgba(255, 255, 255, 0) 100%);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.rightbox-other {
|
|||
|
|
width: 99%;
|
|||
|
|
height: 100%;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
flex-direction: column;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.swiper-card-top {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 270rpx;
|
|||
|
|
|
|||
|
|
.swiper-card-top-card {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
display: flex;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.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: 800rpx;
|
|||
|
|
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;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.button-blue {
|
|||
|
|
width: 140rpx;
|
|||
|
|
height: 60rpx;
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
margin-right: 50rpx;
|
|||
|
|
background: linear-gradient(to bottom right, #00C9FF, #0076FF);
|
|||
|
|
color: #fff;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.boom-other-card {
|
|||
|
|
width: 250rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
margin: 10rpx 0;
|
|||
|
|
|
|||
|
|
.boom-other-img {
|
|||
|
|
width: 30rpx;
|
|||
|
|
height: 30rpx;
|
|||
|
|
margin-left: 30rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.boom-other-font {
|
|||
|
|
margin-left: 5rpx;
|
|||
|
|
font-size: 25rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.boom-other-weight {
|
|||
|
|
font-weight: 700;
|
|||
|
|
margin-left: 5rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.title-img{
|
|||
|
|
width: 30rpx;
|
|||
|
|
height: 30rpx;
|
|||
|
|
margin-left: 20rpx;
|
|||
|
|
}
|
|||
|
|
</style>
|