195 lines
5.0 KiB
Vue
195 lines
5.0 KiB
Vue
<template>
|
||
<view class="wrap">
|
||
<!-- 吸顶 -->
|
||
<u-sticky offset-top="0" customNavHeight="0">
|
||
<!-- 顶部 -->
|
||
<uititle title="报价单"></uititle>
|
||
</u-sticky>
|
||
<view class="layout layout-goods">
|
||
<view class="goods-title">商品1：螺纹钢</view>
|
||
<view class="goods-box m-top-20 clear">
|
||
<!-- 百分比，hundred-100%,half-50%,third-33.33%,fourth-25%,fifth-20% -->
|
||
<view class="goods-item half flex flex-wrap fl">
|
||
<view class="lb">直径D mm：</view>
|
||
<view class="vl flex-1">12mm</view>
|
||
</view>
|
||
<view class="goods-item half flex flex-wrap fl">
|
||
<view class="lb">执行标准：</view>
|
||
<view class="vl flex-1">GB/T1499.2</view>
|
||
</view>
|
||
<view class="goods-item half flex flex-wrap fl">
|
||
<view class="lb">单件长度：</view>
|
||
<view class="vl flex-1">6000定尺 mm</view>
|
||
</view>
|
||
<view class="goods-item half flex flex-wrap fl">
|
||
<view class="lb">材质：</view>
|
||
<view class="vl flex-1">HRB355</view>
|
||
</view>
|
||
<view class="goods-item half flex flex-wrap fl">
|
||
<view class="lb">计价形式：</view>
|
||
<view class="vl flex-1">过磅</view>
|
||
</view>
|
||
<view class="goods-item half flex flex-wrap fl">
|
||
<view class="lb">采购数量：</view>
|
||
<view class="vl flex-1">100吨</view>
|
||
</view>
|
||
<view class="goods-item half flex flex-wrap fl">
|
||
<view class="lb">交货时限： </view>
|
||
<view class="vl flex-1">2024-05-11</view>
|
||
</view>
|
||
<view class="goods-item hundred flex flex-wrap fl">
|
||
<view class="lb">交货服务：</view>
|
||
<view class="vl flex-1">供货方送至交货地点</view>
|
||
</view>
|
||
<view class="goods-item hundred flex flex-wrap fl">
|
||
<view class="lb">交货地点：</view>
|
||
<view class="vl flex-1">广西壮族自治区-贵港市-覃塘区-大圩</view>
|
||
</view>
|
||
</view>
|
||
<view class="flex justify-between align-center m-top-20">
|
||
<view class="group flex align-center" style="width: 48%;">
|
||
<view class="lb m-right-20">报价单价:</view>
|
||
<view class="vl flex-1">
|
||
<u--input
|
||
placeholder="请输入内容"
|
||
border="surround"
|
||
v-model="value"
|
||
suffixIcon="元"
|
||
suffixIconStyle="font-size: 26rpx;color: #909399"
|
||
@change="change"
|
||
></u--input>
|
||
</view>
|
||
</view>
|
||
<view class="group flex align-center" style="width: 48%;">
|
||
<view class="lb m-right-20">小计金额:</view>
|
||
<view class="vl flex-1">
|
||
<u--input
|
||
placeholder="请输入内容"
|
||
border="surround"
|
||
v-model="value"
|
||
suffixIcon="元"
|
||
suffixIconStyle="font-size: 26rpx;color: #909399"
|
||
@change="change"
|
||
></u--input>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="layout layout-publish bg-white">
|
||
<view class="group flex align-center">
|
||
<view class="lb need strong m-right-20">货款总价:</view>
|
||
<view class="vl flex-1">
|
||
<u--input
|
||
placeholder="请输入内容"
|
||
border="surround"
|
||
v-model="value"
|
||
suffixIcon="元"
|
||
suffixIconStyle="font-size: 26rpx;color: #909399"
|
||
@change="change"
|
||
></u--input>
|
||
</view>
|
||
</view>
|
||
<view class="group flex align-center m-top-30">
|
||
<view class="lb need strong m-right-20">人民币大写:</view>
|
||
<view class="vl flex-1">
|
||
<u--input
|
||
placeholder="请输入内容"
|
||
border="surround"
|
||
v-model="value"
|
||
suffixIcon="元"
|
||
suffixIconStyle="font-size: 26rpx;color: #909399"
|
||
@change="change"
|
||
></u--input>
|
||
</view>
|
||
</view>
|
||
<u--text text="温馨提示：贷款总价由各个商品报价加起来" size="24rpx" color="#777" margin="30rpx 0"></u--text>
|
||
</view>
|
||
<u-button class="public-btn m-top-30" text="提交报价"></u-button>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import uititle from '@/components/common/title'
|
||
export default {
|
||
components: {
|
||
uititle,
|
||
},
|
||
data() {
|
||
return {
|
||
// 输入框自定义样式
|
||
inputStyle: {
|
||
borderRadius: 0,
|
||
},
|
||
value: '', // 模拟值
|
||
};
|
||
},
|
||
methods: {
|
||
handTag(val) {
|
||
val.checked = !val.checked
|
||
},
|
||
},
|
||
onLoad() {
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page {
|
||
background: #ffffff;
|
||
}
|
||
.goods-title {
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
line-height: 40rpx;
|
||
color: #101010;
|
||
}
|
||
.layout-goods {
|
||
margin: 20rpx 30rpx;
|
||
padding: 30rpx 0;
|
||
font-size: 28rpx;
|
||
line-height: 32rpx;
|
||
color: #626262;
|
||
border-bottom: 1px solid #f2f2f2;
|
||
.goods-item {
|
||
padding: 18rpx 0;
|
||
}
|
||
}
|
||
.public-btn {
|
||
width: 80%;
|
||
margin-top: 60rpx;
|
||
color: #ffffff;
|
||
background: #A92924;
|
||
}
|
||
.layout-publish {
|
||
margin: 20rpx 30rpx;
|
||
padding: 50rpx 30rpx;
|
||
border-radius: 18rpx;
|
||
}
|
||
.group .lb {
|
||
position: relative;
|
||
font-size: 28rpx;
|
||
line-height: 40rpx;
|
||
color: #A92924;
|
||
}
|
||
.group .strong {
|
||
width: 160rpx;
|
||
font-weight: 600;
|
||
color: #101010;
|
||
}
|
||
.lbx {
|
||
font-size: 24rpx;
|
||
color: #999999;
|
||
}
|
||
.need::before {
|
||
position: absolute;
|
||
left: -16rpx;
|
||
top: 50%;
|
||
z-index: 9;
|
||
margin-top: -12rpx;
|
||
content: '*';
|
||
color: #A92924;
|
||
font-size: 32rpx;
|
||
line-height: 1;
|
||
}
|
||
</style> |