1001 lines
20 KiB
Vue
1001 lines
20 KiB
Vue
<template>
|
||
<view class="all-view">
|
||
<view class="title-back" :style="{height:`${uni.getStorageSync('moveHeight')+40}px`}">
|
||
<view class="left-father" @click="goBack">
|
||
<image class="back-img" src="https://www.focusnu.com/media/directive/index/left.png" />
|
||
<view style="font-size: 30rpx;">采购单详情</view>
|
||
</view>
|
||
</view>
|
||
<view :style="{height:`${uni.getStorageSync('moveHeight') + 40}px`}"></view>
|
||
<view class="detail-view">
|
||
<view class="buylist-text">
|
||
<view class="buylist-title">
|
||
<image class="buylist-img"
|
||
src="https://www.focusnu.com/media/directive/index/buylisticon/buypaper.png" />
|
||
<view class="buylist-weight">
|
||
采购单
|
||
</view>
|
||
</view>
|
||
<view class="buylist-tags">
|
||
采购中
|
||
</view>
|
||
</view>
|
||
<view class="card-middle">
|
||
|
||
</view>
|
||
<view class="buylist-contant">
|
||
<view>
|
||
<view class="buylist-number">
|
||
<view class="gray-circle"></view>
|
||
<view class="buylist-number-text">
|
||
采购单号：
|
||
<text>
|
||
101C20251121006
|
||
</text>
|
||
</view>
|
||
</view>
|
||
<view class="buylist-number">
|
||
<view class="gray-circle"></view>
|
||
<view class="buylist-number-text">
|
||
采购日期：
|
||
<text>
|
||
2025-10-12
|
||
</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="card-top-right">
|
||
<view class="">
|
||
<text class="card-money">
|
||
￥
|
||
</text>
|
||
|
||
<text class="card-price">
|
||
25
|
||
</text>
|
||
|
||
</view>
|
||
<view class="card-price-ex">
|
||
订单金额
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="buylist-text">
|
||
<view class="buylist-title">
|
||
<image class="company-img"
|
||
src="https://www.focusnu.com/media/directive/index/buylisticon/company.png" />
|
||
<view class="buylist-weight">
|
||
机构信息
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="card-middle">
|
||
|
||
</view>
|
||
<view class="message-mt">
|
||
<view class="buylist-number">
|
||
<view class="gray-circle"></view>
|
||
<view class="buylist-show">
|
||
机构名称：
|
||
<text>
|
||
吉林省久泰健康产业有限公司
|
||
</text>
|
||
</view>
|
||
</view>
|
||
<view class="buylist-number">
|
||
<view class="gray-circle"></view>
|
||
<view class="buylist-show-two">
|
||
收货地址：
|
||
<view class="buylist-show-relative">
|
||
吉林省长春市朝阳区开运街41号吉 省长春市朝阳区开运街41号
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="buylist-number" style="margin-top: 60rpx;">
|
||
<view class="gray-circle"></view>
|
||
<view class="buylist-show">
|
||
<view class="special-text">
|
||
联系人：
|
||
</view>
|
||
|
||
<text>
|
||
张某
|
||
</text>
|
||
</view>
|
||
</view>
|
||
<view class="buylist-number">
|
||
<view class="gray-circle"></view>
|
||
<view class="buylist-show">
|
||
<view class="special-text">
|
||
电话：
|
||
</view>
|
||
|
||
<text>
|
||
13845337753
|
||
</text>
|
||
<image class="company-img" style="margin-left: 20rpx;"
|
||
src="https://www.focusnu.com/media/directive/index/buylisticon/takephone.png" />
|
||
</view>
|
||
</view>
|
||
<view class="buylist-text">
|
||
<view class="buylist-title">
|
||
<image class="company-img"
|
||
src="https://www.focusnu.com/media/directive/index/buylisticon/saleshop.png" />
|
||
<view class="buylist-weight">
|
||
供应商信息
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="card-middle">
|
||
|
||
</view>
|
||
<view class="buylist-number">
|
||
<view class="gray-circle"></view>
|
||
<view class="buylist-show">
|
||
<view class="special-text">
|
||
供应商：
|
||
</view>
|
||
|
||
<text>
|
||
吉林天林商贸有限公司
|
||
</text>
|
||
</view>
|
||
</view>
|
||
<view class="buylist-number">
|
||
<view class="gray-circle"></view>
|
||
<view class="buylist-show">
|
||
<view class="special-text">
|
||
联系人：
|
||
</view>
|
||
|
||
<text>
|
||
吕婧文
|
||
</text>
|
||
</view>
|
||
</view>
|
||
<view class="buylist-number">
|
||
<view class="gray-circle"></view>
|
||
<view class="buylist-show">
|
||
<view class="special-text">
|
||
电话：
|
||
</view>
|
||
|
||
<text>
|
||
13356856633
|
||
</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="card-view" v-for="(item,index) in [0,0,0,0,0]" :key="index">
|
||
<view class="card-text">
|
||
<view class="card-title">
|
||
纸尿裤-拉拉裤纸尿裤
|
||
</view>
|
||
|
||
<view class="card-number">
|
||
<view class="card-number-text">
|
||
采购数量
|
||
</view>
|
||
<view class="number">
|
||
168
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="card-middle">
|
||
|
||
</view>
|
||
<view class="buylist-number" style="margin-top: 35rpx;margin-left: 50rpx;">
|
||
<view class="buylist-show">
|
||
规格型号：
|
||
<text>
|
||
800mm*680mm
|
||
</text>
|
||
</view>
|
||
</view>
|
||
<view class="buylist-number" style="margin-left: 50rpx;">
|
||
<view class="buylist-show">
|
||
品牌型号：
|
||
<text>
|
||
品牌型号名称
|
||
</text>
|
||
</view>
|
||
</view>
|
||
<view class="buylist-number" style="margin-left: 50rpx;">
|
||
<view class="buylist-show-two">
|
||
生产厂家：
|
||
<view class="buylist-show-relative" style="width: 440rpx;">
|
||
吉林省长春市朝阳区开运街41号吉 省长春市朝阳区开运街41号
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="card-middle special-middle">
|
||
|
||
</view>
|
||
<view class="cardruler-view">
|
||
<view class="cardruler-father">
|
||
<view class="cardruler-one">
|
||
<view class="one-up">
|
||
<text class="one-up-mark">
|
||
￥
|
||
</text>
|
||
<text class="one-up-money">
|
||
0.32
|
||
</text>
|
||
</view>
|
||
<view class="one-down">
|
||
采购价格
|
||
</view>
|
||
</view>
|
||
<view class="cardruler-one">
|
||
<view class="one-up">
|
||
<view class="one-up-pian">
|
||
片
|
||
</view>
|
||
</view>
|
||
<view class="one-down">
|
||
采购单位
|
||
</view>
|
||
</view>
|
||
<view class="cardruler-one">
|
||
<view class="one-up">
|
||
<text class="one-up-mark">
|
||
￥
|
||
</text>
|
||
<text class="one-up-money">
|
||
{{ djflagnumber }}
|
||
</text>
|
||
<image class="phone-img" @click="djflagclick()"
|
||
src="https://www.focusnu.com/media/directive/index/buylisticon/edit.png" />
|
||
</view>
|
||
<view class="one-down">
|
||
销售价格
|
||
</view>
|
||
</view>
|
||
<view class="cardruler-one">
|
||
<view class="one-up">
|
||
<view class="one-up-pian">
|
||
{{ relqita }}
|
||
</view>
|
||
<image class="phone-img" @click=" dwflagclick()"
|
||
src="https://www.focusnu.com/media/directive/index/buylisticon/edit.png" />
|
||
</view>
|
||
<view class="one-down">
|
||
销售单位
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="card-middle">
|
||
|
||
</view>
|
||
<view class="cardruler-father">
|
||
<view class="cardruler-one">
|
||
<view class="one-up">
|
||
<text class="one-up-number">
|
||
350
|
||
</text>
|
||
</view>
|
||
<view class="one-down">
|
||
入库数量
|
||
</view>
|
||
</view>
|
||
<view class="cardruler-one">
|
||
<view class="one-up">
|
||
<text class="one-up-number">
|
||
10
|
||
</text>
|
||
</view>
|
||
<view class="one-down">
|
||
挂账数量
|
||
</view>
|
||
</view>
|
||
<view class="cardruler-one">
|
||
<view class="one-up">
|
||
<text class="one-up-number">
|
||
40
|
||
</text>
|
||
</view>
|
||
<view class="one-down">
|
||
销账数量
|
||
</view>
|
||
</view>
|
||
<view class="cardruler-one">
|
||
<view class="one-up">
|
||
<text class="one-up-mark">
|
||
￥
|
||
</text>
|
||
<text class="one-up-money">
|
||
0.56
|
||
</text>
|
||
</view>
|
||
<view class="one-down">
|
||
销售金额
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="card-view-finally">
|
||
|
||
</view>
|
||
<view class="bottom-button-view">
|
||
<view class="button-back" @click="goBack">
|
||
返回
|
||
</view>
|
||
<view class="button-right" @click="listisok">
|
||
确认
|
||
</view>
|
||
</view>
|
||
<view class="tanchuc guodu"
|
||
:style="{height:dwflag?(Math.ceil(list.length / 2)>4?'862rpx':(Math.ceil(list.length / 2)*100 + 462)+'rpx'):'0 !important'}">
|
||
<view class="tittop">
|
||
<text></text>
|
||
<view>销售单位</view>
|
||
</view>
|
||
<scroll-view scroll-y="true" class="scrollxhdw" :show-scrollbar="false"
|
||
:style="Math.ceil(list.length / 2)>4?'height:400rpx':'height:'+ (Math.ceil(list.length / 2)*100)+'rpx'">
|
||
<view class="xhdw">
|
||
<view v-for="(v,i) in list " :key='i' :class="i==dwact?'act':''" @click="dwact = i;qita = v.text">
|
||
{{v.text}}
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
|
||
<view class="qit" style="width: 518rpx;">
|
||
<text>其它</text>
|
||
<view style="width: 430rpx;">
|
||
<input type="text" v-model="qita" @blur="blur">
|
||
</view>
|
||
</view>
|
||
<view class="botrn" style="position: relative;">
|
||
<view @click="dwflag = false">取消</view>
|
||
<view @click="queding('dw')">确定</view>
|
||
</view>
|
||
</view>
|
||
<view class="tanchuc guodu" :style="{height:djflag?'962rpx !important':'0 !important'}">
|
||
<view class="tittop">
|
||
<text></text>
|
||
<view>销售单价</view>
|
||
</view>
|
||
<view class="calculator-father">
|
||
<view v-for="(item,index) in calculatorArray" :key="index">
|
||
<view class="calculator-kuai" style="font-size: 33rpx;" v-if="item==`AE`"
|
||
@click="clickKuai(item,index)" hover-class="btn-active">
|
||
<image src="https://www.focusnu.com/media/xcx/gys_wl_del.png" mode="aspectFill"></image>
|
||
</view>
|
||
<view class="calculator-kuai" v-else @click="clickKuai(item,index)" hover-class="btn-active">
|
||
{{item}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="qit">
|
||
<text>单价</text>
|
||
<view>
|
||
<input type="text" v-model="stringShow" disabled maxlength="6">
|
||
</view>
|
||
</view>
|
||
<view class="botrn" style="position: relative;">
|
||
<view @click="djflag = false">取消</view>
|
||
<view @click="queding('dj')">确定</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<tanchuang :show="tanchuangopne" @back="tanchuangopne=false" @right="tanchuangopne=false">
|
||
<template #font>
|
||
<view class="right-font">请仔细确认随货同行单内容，一经确认将无法更改，届时平台将自动发送随货同行单至护理机构，确认生成随货同行单吗？</view>
|
||
</template>
|
||
</tanchuang>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { reactive, ref, nextTick } from 'vue';
|
||
import { onLoad, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'
|
||
import { getDictItems } from './api.js'
|
||
import tanchuang from '@/compontent/public/tanchuang.vue'
|
||
|
||
onLoad((options : Record<string, string | undefined>) => {
|
||
const id = options?.id
|
||
console.log('接收到的id', id)
|
||
gettimearr()
|
||
})
|
||
const list = ref([])
|
||
const dwflag = ref(false);
|
||
const djflag = ref(false);
|
||
const calculatorArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, ".", 0, "AE"];
|
||
|
||
const gettimearr = () => {
|
||
getDictItems({ dictCode: 'xcx_gys_wldw' }).then(res => {
|
||
list.value = res
|
||
// console.log("看看", list.value)
|
||
})
|
||
}
|
||
|
||
const dwact = ref(-1)
|
||
const blur = () => {
|
||
let a = list.value.find(item => item.text == qita.value)
|
||
if (a) {
|
||
list.value.forEach((v, i) => {
|
||
if (v.text == qita.value) {
|
||
dwact.value = i
|
||
}
|
||
})
|
||
} else {
|
||
dwact.value = -1
|
||
}
|
||
}
|
||
const relqita = ref("片")
|
||
const qita = ref("片");
|
||
|
||
const djflagnumber = ref(`0.56`)
|
||
const queding = (e) => {
|
||
console.log("e", e)
|
||
if(e===`dw`){
|
||
relqita.value = qita.value;
|
||
dwflag.value = false
|
||
}else{
|
||
djflagnumber.value = stringShow.value
|
||
djflag.value = false
|
||
}
|
||
}
|
||
const stringShow = ref("");
|
||
const relNumber = ref(0);
|
||
const isZero = ref(false);
|
||
const clickKuai = (item : any, index : number) => {
|
||
if (item == "AE") {
|
||
stringShow.value = stringShow.value.slice(0, -1)
|
||
return
|
||
}
|
||
if (stringShow.value.length > 10) { return }
|
||
let a = stringShow.value.indexOf('.')
|
||
if (item == "." && stringShow.value.length == 0) {
|
||
return
|
||
}
|
||
if (item == "." && a > -1) {
|
||
return
|
||
}
|
||
stringShow.value += item
|
||
stringShow.value = stringShow.value.replace(/^(\d+)\.(\d{0,2}).*/, '$1.$2')
|
||
stringShow.value = formatStr(stringShow.value)
|
||
|
||
}
|
||
function formatStr(val) {
|
||
if (!val) return ''
|
||
if (val.length >= 2) {
|
||
if (val[0] === '0') {
|
||
if (val[1] === '.') {
|
||
return val
|
||
}
|
||
else if (!isNaN(val[1])) {
|
||
return val.replace(/^0+/, '')
|
||
}
|
||
}
|
||
}
|
||
return val
|
||
}
|
||
const djflagclick = () => {
|
||
stringShow.value = djflagnumber.value
|
||
djflag.value=true
|
||
}
|
||
|
||
const dwflagclick = () => {
|
||
qita.value = relqita.value;
|
||
dwact.value = -1
|
||
dwflag.value=true
|
||
}
|
||
const goBack = () => {
|
||
uni.navigateBack()
|
||
}
|
||
const tanchuangopne = ref(false)
|
||
const listisok = () => {
|
||
tanchuangopne.value = true
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
.all-view {
|
||
width: 100vw;
|
||
min-height: 100vh;
|
||
background-color: #F5F5F7;
|
||
}
|
||
|
||
.title-back {
|
||
background-color: #fff;
|
||
width: 100%;
|
||
height: 70rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-end;
|
||
padding-bottom: 20rpx;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: 9999;
|
||
|
||
.left-father {
|
||
display: flex;
|
||
align-items: center;
|
||
z-index: 1;
|
||
|
||
.back-img {
|
||
width: 45rpx;
|
||
height: 40rpx;
|
||
margin-left: 40rpx;
|
||
margin-right: 15rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.detail-view {
|
||
background-color: white;
|
||
min-height: 925rpx;
|
||
margin-left: 4%;
|
||
width: 92%;
|
||
margin-top: 35rpx;
|
||
border-radius: 40rpx;
|
||
|
||
.buylist-text {
|
||
width: 100%;
|
||
height: 100rpx;
|
||
position: relative;
|
||
|
||
.buylist-title {
|
||
display: flex;
|
||
padding-top: 45rpx;
|
||
align-items: center;
|
||
|
||
.buylist-img {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
margin-left: 40rpx;
|
||
}
|
||
|
||
.buylist-weight {
|
||
font-weight: 600;
|
||
margin-left: 20rpx;
|
||
font-size: 31rpx;
|
||
}
|
||
}
|
||
|
||
.buylist-tags {
|
||
position: absolute;
|
||
right: 25rpx;
|
||
bottom: 10rpx;
|
||
width: 120rpx;
|
||
height: 50rpx;
|
||
border: 2rpx red solid;
|
||
border-radius: 15rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-size: 27rpx;
|
||
border-color: #0074E1;
|
||
color: #0074E1;
|
||
}
|
||
}
|
||
}
|
||
|
||
.card-view {
|
||
background-color: white;
|
||
min-height: 680rpx;
|
||
margin-left: 4%;
|
||
width: 92%;
|
||
margin-top: 20rpx;
|
||
border-radius: 40rpx;
|
||
}
|
||
|
||
.card-middle {
|
||
margin-top: 8rpx;
|
||
background-color: #f9f9f9;
|
||
height: 2rpx;
|
||
width: 90%;
|
||
margin-left: 5%;
|
||
}
|
||
|
||
.buylist-contant {
|
||
width: 100%;
|
||
height: 100rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.gray-circle {
|
||
background-color: #999999;
|
||
width: 10rpx;
|
||
height: 10rpx;
|
||
border-radius: 50%;
|
||
margin-left: 50rpx;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.buylist-number {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-top: 15rpx;
|
||
}
|
||
|
||
.buylist-number-text {
|
||
font-size: 32rpx;
|
||
}
|
||
|
||
.card-top-right {
|
||
text-align: center;
|
||
margin-right: 30rpx;
|
||
margin-top: 10rpx;
|
||
|
||
.card-money {
|
||
font-weight: 600;
|
||
font-size: 34rpx;
|
||
}
|
||
|
||
.card-price {
|
||
font-weight: 600;
|
||
font-size: 40rpx;
|
||
margin-left: -10rpx;
|
||
}
|
||
|
||
.card-price-ex {
|
||
font-size: 24rpx;
|
||
color: black;
|
||
margin-top: 5rpx;
|
||
}
|
||
}
|
||
|
||
.message-mt {
|
||
padding-top: 15rpx;
|
||
}
|
||
|
||
.buylist-show {
|
||
font-size: 31rpx;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
width: 85%;
|
||
display: flex;
|
||
}
|
||
|
||
.buylist-show-two {
|
||
font-size: 31rpx;
|
||
position: relative;
|
||
|
||
.buylist-show-relative {
|
||
position: absolute;
|
||
left: 155rpx;
|
||
top: 0;
|
||
width: 420rpx;
|
||
overflow: hidden;
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 2;
|
||
}
|
||
}
|
||
|
||
.special-text {
|
||
width: 157rpx;
|
||
text-align: right;
|
||
}
|
||
|
||
.company-img {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
margin-left: 40rpx;
|
||
margin-top: 5rpx;
|
||
}
|
||
|
||
.card-view-finally {
|
||
height: 150rpx;
|
||
}
|
||
|
||
.card-text {
|
||
height: 100rpx;
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.card-title {
|
||
font-size: 40rpx;
|
||
font-weight: 600;
|
||
margin-left: 40rpx;
|
||
margin-top: 40rpx;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
width: 60%;
|
||
}
|
||
|
||
.card-number {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-top: 25rpx;
|
||
|
||
.card-number-text {
|
||
color: #888888;
|
||
font-size: 22rpx;
|
||
margin-right: 20rpx;
|
||
margin-top: 10rpx;
|
||
|
||
}
|
||
|
||
.number {
|
||
font-size: 40rpx;
|
||
font-weight: 600;
|
||
margin-right: 40rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.bottom-button-view {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
height: 150rpx;
|
||
width: 100%;
|
||
background-color: #fff;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-size: 34rpx;
|
||
|
||
.button-back {
|
||
margin-top: -30rpx;
|
||
height: 53%;
|
||
width: 200rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
border-radius: 30rpx;
|
||
color: #5F676F;
|
||
background-color: #E2EFFA;
|
||
}
|
||
|
||
.button-right {
|
||
margin-top: -30rpx;
|
||
margin-left: 30rpx;
|
||
height: 53%;
|
||
width: 200rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
border-radius: 30rpx;
|
||
color: #fff;
|
||
background-color: #57A8FA;
|
||
}
|
||
}
|
||
|
||
.special-middle {
|
||
margin-top: 67rpx;
|
||
}
|
||
|
||
.cardruler-view {
|
||
width: 100%;
|
||
padding: 0 35rpx;
|
||
height: 300rpx;
|
||
|
||
.cardruler-father {
|
||
display: flex;
|
||
width: 100%;
|
||
height: 50%;
|
||
|
||
.cardruler-one {
|
||
width: 25%;
|
||
height: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
|
||
.one-up {
|
||
height: 53rpx;
|
||
position: relative;
|
||
|
||
.one-up-mark {
|
||
font-size: 30rpx;
|
||
}
|
||
|
||
.one-up-money {
|
||
font-size: 40rpx;
|
||
font-weight: 600;
|
||
margin-left: -9rpx;
|
||
}
|
||
|
||
.one-up-number {
|
||
font-size: 40rpx;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.one-up-pian {
|
||
font-weight: 600;
|
||
font-size: 30rpx;
|
||
margin-top: 6rpx;
|
||
// background-color: red;
|
||
}
|
||
|
||
.phone-img {
|
||
position: absolute;
|
||
right: -40rpx;
|
||
top: 10rpx;
|
||
width: 35rpx;
|
||
height: 35rpx;
|
||
}
|
||
}
|
||
|
||
.one-down {
|
||
margin-top: 5rpx;
|
||
color: #4f4f4f;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.tanchuc {
|
||
width: 100%;
|
||
height: 0;
|
||
background: #FFFFFF;
|
||
border-radius: 40rpx 40rpx 0 0;
|
||
position: fixed;
|
||
bottom: 0;
|
||
z-index: 111;
|
||
overflow: hidden;
|
||
|
||
.calculator-father {
|
||
width: 450rpx;
|
||
height: 500rpx;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: space-between;
|
||
margin: 10rpx auto;
|
||
|
||
view {
|
||
width: 130rpx;
|
||
height: 111rpx;
|
||
background: #F1F4F9;
|
||
border-radius: 20rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-weight: 400;
|
||
font-size: 43rpx;
|
||
color: #727B87;
|
||
border: 1px solid #F1F4F9;
|
||
|
||
image {
|
||
width: 44rpx;
|
||
height: 44rpx;
|
||
}
|
||
}
|
||
|
||
.btn-active {
|
||
background: linear-gradient(to bottom, #019cef, #0084fa);
|
||
color: #fff;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
|
||
.qit {
|
||
width: 466rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin: 20rpx auto;
|
||
|
||
view {
|
||
width: 355rpx;
|
||
height: 81rpx;
|
||
border-radius: 20rpx;
|
||
border: 1px solid #A9B1C0;
|
||
|
||
input {
|
||
width: 100%;
|
||
height: 100%;
|
||
padding: 0 20rpx;
|
||
color: #727B87;
|
||
font-size: 40rpx;
|
||
}
|
||
}
|
||
|
||
text {
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #555555;
|
||
}
|
||
}
|
||
|
||
.scrollxhdw {
|
||
width: 540rpx;
|
||
margin: 10rpx auto;
|
||
|
||
}
|
||
|
||
.xhdw {
|
||
width: 540rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
flex-wrap: wrap;
|
||
|
||
|
||
view {
|
||
width: 261rpx;
|
||
height: 82rpx;
|
||
background: #F1F4F9;
|
||
border-radius: 20rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #555555;
|
||
margin-top: 17rpx;
|
||
border: 1px solid #F1F4F9;
|
||
}
|
||
|
||
.act {
|
||
background: #ECF5FF;
|
||
border: 1px solid #1083F8;
|
||
}
|
||
}
|
||
|
||
.tittop {
|
||
width: 100%;
|
||
padding: 60rpx 60rpx 40rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
view {
|
||
font-weight: 400;
|
||
font-size: 30rpx;
|
||
color: #333333;
|
||
}
|
||
|
||
text {
|
||
width: 15rpx;
|
||
height: 33rpx;
|
||
background: #1083F8;
|
||
border-radius: 7rpx;
|
||
margin-right: 30rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.botrn {
|
||
width: 100%;
|
||
height: 140rpx;
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
background: #fff;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
view {
|
||
width: 205rpx;
|
||
height: 78rpx;
|
||
border-radius: 30rpx;
|
||
margin: 0 20rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-size: 32rpx;
|
||
|
||
&:nth-child(1) {
|
||
background: #E1F0FF;
|
||
border: 1px solid rgba(36, 155, 251, 0.51);
|
||
color: #222222;
|
||
}
|
||
|
||
&:nth-child(2) {
|
||
background: linear-gradient(-90deg, #288DFD, #21A4FA);
|
||
color: #FFFFFF;
|
||
}
|
||
}
|
||
}
|
||
|
||
.guodu {
|
||
transition: .4s;
|
||
-webkit-transform-style: preserve-3d;
|
||
-webkit-overflow-scrolling: touch;
|
||
}
|
||
.right-font{
|
||
line-height: 40rpx;
|
||
text-indent: 2em;
|
||
}
|
||
</style> |