Compare commits
2 Commits
d7fbd3d720
...
434d455940
| Author | SHA1 | Date | |
|---|---|---|---|
| 434d455940 | |||
| c0f5c237ba |
Binary file not shown.
|
Before Width: | Height: | Size: 3.5 MiB After Width: | Height: | Size: 3.5 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 586 KiB After Width: | Height: | Size: 584 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 42 KiB After Width: | Height: | Size: 52 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 183 KiB After Width: | Height: | Size: 186 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 89 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 196 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 462 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 64 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 117 KiB |
@ -406,6 +406,24 @@ export const constantRoutes = [
|
||||
name: 'detailsMain',
|
||||
meta: { title: '详情页' },
|
||||
},
|
||||
{
|
||||
path: '/sub-operation-service/packaging/details1',
|
||||
component: () => import('@/views/packaging/details1.vue'),
|
||||
name: 'detailsMain1',
|
||||
meta: { title: '详情页' },
|
||||
},
|
||||
{
|
||||
path: '/sub-operation-service/packaging/details2',
|
||||
component: () => import('@/views/packaging/details2.vue'),
|
||||
name: 'detailsMain2',
|
||||
meta: { title: '详情页' },
|
||||
},
|
||||
{
|
||||
path: '/sub-operation-service/packaging/apply',
|
||||
component: () => import('@/views/packaging/apply.vue'),
|
||||
name: 'apply',
|
||||
meta: { title: '申请分拣' },
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
@ -463,6 +481,18 @@ export const constantRoutes = [
|
||||
name: 'logistics-detail',
|
||||
meta: { title: '物流详情' },
|
||||
},
|
||||
{
|
||||
path: '/sub-operation-service/logistics-shipping',
|
||||
component: () => import('@/views/warehouseLogistics/logistics/shipping.vue'),
|
||||
name: 'logistics-shipping',
|
||||
meta: { title: '在线寄货' },
|
||||
},
|
||||
{
|
||||
path: '/sub-operation-service/logistics-match',
|
||||
component: () => import('@/views/warehouseLogistics/logistics/match.vue'),
|
||||
name: 'logistics-match',
|
||||
meta: { title: '匹配' },
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
|
||||
@ -49,14 +49,14 @@ const router = useRouter();
|
||||
const leftMenu = reactive([
|
||||
{
|
||||
name: 'inspection',
|
||||
title: '农事咨询',
|
||||
title: '农事资讯',
|
||||
icon: 'menu1.png',
|
||||
path: '',
|
||||
isOpen: false,
|
||||
children: [
|
||||
{
|
||||
name: 'farmPolicy',
|
||||
title: '农业政策',
|
||||
title: '农业政策资讯',
|
||||
icon: 'menu1.png',
|
||||
path: '/sub-operation-service/farmService/consult/policy',
|
||||
},
|
||||
|
||||
329
sub-operation-service/src/views/packaging/apply.vue
Normal file
329
sub-operation-service/src/views/packaging/apply.vue
Normal file
@ -0,0 +1,329 @@
|
||||
<template>
|
||||
<Common>
|
||||
<template #main>
|
||||
<div class="max-w-7xl mx-auto p-4">
|
||||
<div class="title" @click="toBack(-1)">分拣 > <span style="color: rgba(37, 191, 130, 1)">申请分拣</span></div>
|
||||
<img src="@/assets/images/warehouseLogistics/img25.png" fit="cover" class="storage-image" @click="toLink" />
|
||||
<!-- <div class="flex items-center mb-4">
|
||||
<h2 class="text-green-500 text-lg font-bold">{{ route.data[2] == '绿色' ? '分拣' : '包装' }} · 查看详情</h2>
|
||||
</div>
|
||||
<div class="flex items-center mb-8">
|
||||
<div class="flex items-center mr-4">
|
||||
<img :src="getAssetsFile(`${route.imageUrl}`)" fit="cover" class="rounded-lg shadow image-box" />
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h3 class="text-xl font-bold mb-2">{{ route.title }}</h3>
|
||||
<p class="text-gray-600 mb-2">{{ route.description }}</p>
|
||||
<div class="flex items-center space-x-2 text-green-500 text-sm">
|
||||
<div class="bac">{{ route.data[0] }}</div>
|
||||
<div class="bac">{{ route.data[1] }}</div>
|
||||
<div class="bac">{{ route.data[2] }}</div>
|
||||
</div>
|
||||
<p class="mt-2 text-gray-700">联系人：李涛</p>
|
||||
<p class="mt-2 text-gray-700">联系电话：13888569833</p>
|
||||
<p class="mt-2 text-gray-700">
|
||||
<el-icon><Location /></el-icon> {{ route.location }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="text-gray-500 text-sm flex items-center">
|
||||
<div>
|
||||
<span style="color: #999999">报价：</span>
|
||||
<span class="ml-2 text-green-500 font-bold">￥{{ route.price }}/m</span>
|
||||
</div>
|
||||
<div>
|
||||
<el-button size="large" type="primary" @click="goDei"
|
||||
><el-icon class="el-icon--right"><ChatLineRound /></el-icon>
|
||||
留下信息
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-6">
|
||||
<h3 class="text-lg font-bold mb-4" style="margin-top: 30px">产品详细介绍</h3>
|
||||
<div class="bg-white p-4 rounded-lg shadow-sm">
|
||||
<p style="text-align: left" class="mb-4 text-gray-700">{{ route.description }} 目前暂无介绍哦~</p>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</template>
|
||||
</Common>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Common from './components/common.vue';
|
||||
import { getAssetsFile } from '@/utils';
|
||||
import { ref, reactive, watch } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const dialogVisible = ref(false);
|
||||
const formRef = ref(null);
|
||||
|
||||
const form = reactive({
|
||||
quantity: '',
|
||||
title: '',
|
||||
phone: '',
|
||||
name: '',
|
||||
});
|
||||
|
||||
const toBack = (level) => {
|
||||
router.go(level);
|
||||
};
|
||||
|
||||
const diotext = ref('');
|
||||
const diodescription = ref('');
|
||||
|
||||
const goDei = (data) => {
|
||||
// diodescription.value = data.description;
|
||||
// diotext.value = data.title;
|
||||
dialogVisible.value = true;
|
||||
};
|
||||
|
||||
const handleSubmit = () => {
|
||||
formRef.value.validate((valid) => {
|
||||
if (valid) {
|
||||
console.log('提交数据:', form);
|
||||
dialogVisible.value = false;
|
||||
}
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/* 根据需要添加样式，这里仅提供基础样式 */
|
||||
// 基础颜色配置
|
||||
$primary-color: #25bf82; // 主色调
|
||||
$text-dark: #25bf82; // 深色文字
|
||||
$text-regular: #606266; // 常规文字
|
||||
$border-color: #dcdfe6; // 边框颜色
|
||||
|
||||
// 弹窗整体样式
|
||||
:deep(.custom-inquiry-dialog) {
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
|
||||
.el-dialog__header {
|
||||
padding: 20px;
|
||||
border-bottom: 1px solid #f2f6fc;
|
||||
.el-dialog__title {
|
||||
font-size: 18px;
|
||||
color: $text-dark;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.el-dialog__body {
|
||||
padding: 20px 28px;
|
||||
}
|
||||
|
||||
.el-form-item__label {
|
||||
color: $text-regular;
|
||||
font-size: 14px;
|
||||
padding-bottom: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.info-section {
|
||||
padding: 0px 50px;
|
||||
margin-bottom: 24px;
|
||||
.info-item {
|
||||
margin-bottom: 12px;
|
||||
.label {
|
||||
color: $text-regular;
|
||||
margin-right: 8px;
|
||||
font-size: 20px;
|
||||
}
|
||||
.value {
|
||||
color: $text-dark;
|
||||
font-weight: 500;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 输入框样式覆盖
|
||||
:deep(.el-input) {
|
||||
.el-input__inner {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border-radius: 4px;
|
||||
&:focus {
|
||||
border-color: $primary-color;
|
||||
}
|
||||
}
|
||||
.el-input__suffix {
|
||||
color: $text-regular;
|
||||
right: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
// 下拉菜单样式
|
||||
:deep(.custom-select-dropdown) {
|
||||
.el-select-dropdown__item {
|
||||
color: $text-regular;
|
||||
&.selected {
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 按钮组样式
|
||||
.dialog-footer {
|
||||
text-align: right;
|
||||
.el-button {
|
||||
padding: 10px 24px;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.cancel-btn {
|
||||
color: $text-regular;
|
||||
&:hover {
|
||||
color: $primary-color;
|
||||
border-color: $primary-color;
|
||||
}
|
||||
}
|
||||
.submit-btn {
|
||||
color: #fff;
|
||||
background: $primary-color;
|
||||
&:hover {
|
||||
background: mix($primary-color, #fff, 85%);
|
||||
}
|
||||
}
|
||||
}
|
||||
.bac {
|
||||
background: rgba(37, 191, 130, 0.1);
|
||||
border: 1px solid rgba(37, 191, 130, 0.5);
|
||||
border-radius: 8px;
|
||||
padding: 2px 5px;
|
||||
}
|
||||
|
||||
.image-box {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.text-gray-500 {
|
||||
height: 300px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: start !important;
|
||||
font-size: 20px !important;
|
||||
color: #000000 !important;
|
||||
padding-top: 30px;
|
||||
}
|
||||
|
||||
.text-gray-600 {
|
||||
font-size: 20px;
|
||||
color: #000000 !important;
|
||||
}
|
||||
|
||||
.flex-1 {
|
||||
width: 47%;
|
||||
height: 300px;
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.max-w-7xl {
|
||||
max-width: 80rem;
|
||||
background-color: #fff;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.title {
|
||||
text-align: left;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mx-auto {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.p-4 {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.items-center {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mb-4 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.mr-4 {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.text-green-500 {
|
||||
color: #25bf82;
|
||||
}
|
||||
|
||||
.text-lg {
|
||||
font-size: 1.125rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.font-bold {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.rounded-lg {
|
||||
border-radius: 0.5rem;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.shadow {
|
||||
box-shadow:
|
||||
0 4px 6px -1px rgba(0, 0, 0, 0.1),
|
||||
0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.text-xl {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.text-gray-600 {
|
||||
color: #757575;
|
||||
}
|
||||
|
||||
.text-gray-700 {
|
||||
color: #000000;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.text-sm {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.space-x-2 {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.bg-green-500 {
|
||||
background-color: #4caf50;
|
||||
}
|
||||
|
||||
.py-2 {
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.px-4 {
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.mt-4 {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
</style>
|
||||
@ -1,55 +1,14 @@
|
||||
<template>
|
||||
<el-dialog v-model="dialogVisible" :close-on-click-modal="false" custom-class="custom-inquiry-dialog" width="450px">
|
||||
<div class="info-section">
|
||||
<div class="info-item">
|
||||
<span class="label">首选商家：</span>
|
||||
<span class="value">{{ route.description }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="label">选择服务：</span>
|
||||
<span class="value">{{ route.title }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-form ref="formRef" :model="form" label-position="top">
|
||||
<el-form-item label="需求量：" prop="quantity" :rules="[{ required: true, message: '请输入重量' }]">
|
||||
<el-input v-model="form.quantity" placeholder="请输入重量（kg）">
|
||||
<template #suffix>kg</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="您的称呼：" prop="name" :rules="[{ required: true, message: '请输入您的称呼' }]">
|
||||
<el-input v-model="form.name" placeholder="请输入您的称呼" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item
|
||||
label="您的电话："
|
||||
prop="phone"
|
||||
:rules="[
|
||||
{ required: true, message: '请输入电话' },
|
||||
{ pattern: /^1[3-9]\d{9}$/, message: '手机号格式错误' },
|
||||
]"
|
||||
>
|
||||
<el-input v-model="form.phone" placeholder="请输入电话号码" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button class="cancel-btn" @click="dialogVisible = false">取消</el-button>
|
||||
<el-button class="submit-btn" type="primary" @click="handleSubmit">发送询价</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
<Common>
|
||||
<template #main>
|
||||
<div class="max-w-7xl mx-auto p-4">
|
||||
<div class="flex items-center mb-4">
|
||||
<div class="title" @click="toBack(-1)">分拣 > <span style="color: rgba(37, 191, 130, 1)">查看详情</span></div>
|
||||
<img src="@/assets/images/warehouseLogistics/img24.png" fit="cover" class="storage-image" @click="toLink" />
|
||||
<!-- <div class="flex items-center mb-4">
|
||||
<h2 class="text-green-500 text-lg font-bold">{{ route.data[2] == '绿色' ? '分拣' : '包装' }} · 查看详情</h2>
|
||||
</div>
|
||||
<div class="flex items-center mb-8">
|
||||
<div class="flex items-center mr-4">
|
||||
<!-- 占位符图片，实际使用时替换为真实图片 -->
|
||||
<img :src="getAssetsFile(`${route.imageUrl}`)" fit="cover" class="rounded-lg shadow image-box" />
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
@ -84,7 +43,7 @@
|
||||
<div class="bg-white p-4 rounded-lg shadow-sm">
|
||||
<p style="text-align: left" class="mb-4 text-gray-700">{{ route.description }} 目前暂无介绍哦~</p>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</template>
|
||||
</Common>
|
||||
@ -94,8 +53,9 @@
|
||||
import Common from './components/common.vue';
|
||||
import { getAssetsFile } from '@/utils';
|
||||
import { ref, reactive, watch } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
const route = useRoute().query;
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const dialogVisible = ref(false);
|
||||
const formRef = ref(null);
|
||||
|
||||
@ -106,6 +66,10 @@ const form = reactive({
|
||||
name: '',
|
||||
});
|
||||
|
||||
const toBack = (level) => {
|
||||
router.go(level);
|
||||
};
|
||||
|
||||
const diotext = ref('');
|
||||
const diodescription = ref('');
|
||||
|
||||
@ -268,6 +232,12 @@ $border-color: #dcdfe6; // 边框颜色
|
||||
background-color: #fff;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.title {
|
||||
text-align: left;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mx-auto {
|
||||
margin-left: auto;
|
||||
|
||||
329
sub-operation-service/src/views/packaging/details1.vue
Normal file
329
sub-operation-service/src/views/packaging/details1.vue
Normal file
@ -0,0 +1,329 @@
|
||||
<template>
|
||||
<Common>
|
||||
<template #main>
|
||||
<div class="max-w-7xl mx-auto p-4">
|
||||
<div class="title" @click="toBack(-1)">包装 > <span style="color: rgba(37, 191, 130, 1)">查看详情</span></div>
|
||||
<img src="@/assets/images/warehouseLogistics/img26.png" fit="cover" class="storage-image" @click="toLink" />
|
||||
<!-- <div class="flex items-center mb-4">
|
||||
<h2 class="text-green-500 text-lg font-bold">{{ route.data[2] == '绿色' ? '分拣' : '包装' }} · 查看详情</h2>
|
||||
</div>
|
||||
<div class="flex items-center mb-8">
|
||||
<div class="flex items-center mr-4">
|
||||
<img :src="getAssetsFile(`${route.imageUrl}`)" fit="cover" class="rounded-lg shadow image-box" />
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h3 class="text-xl font-bold mb-2">{{ route.title }}</h3>
|
||||
<p class="text-gray-600 mb-2">{{ route.description }}</p>
|
||||
<div class="flex items-center space-x-2 text-green-500 text-sm">
|
||||
<div class="bac">{{ route.data[0] }}</div>
|
||||
<div class="bac">{{ route.data[1] }}</div>
|
||||
<div class="bac">{{ route.data[2] }}</div>
|
||||
</div>
|
||||
<p class="mt-2 text-gray-700">联系人：李涛</p>
|
||||
<p class="mt-2 text-gray-700">联系电话：13888569833</p>
|
||||
<p class="mt-2 text-gray-700">
|
||||
<el-icon><Location /></el-icon> {{ route.location }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="text-gray-500 text-sm flex items-center">
|
||||
<div>
|
||||
<span style="color: #999999">报价：</span>
|
||||
<span class="ml-2 text-green-500 font-bold">￥{{ route.price }}/m</span>
|
||||
</div>
|
||||
<div>
|
||||
<el-button size="large" type="primary" @click="goDei"
|
||||
><el-icon class="el-icon--right"><ChatLineRound /></el-icon>
|
||||
留下信息
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-6">
|
||||
<h3 class="text-lg font-bold mb-4" style="margin-top: 30px">产品详细介绍</h3>
|
||||
<div class="bg-white p-4 rounded-lg shadow-sm">
|
||||
<p style="text-align: left" class="mb-4 text-gray-700">{{ route.description }} 目前暂无介绍哦~</p>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</template>
|
||||
</Common>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Common from './components/common.vue';
|
||||
import { getAssetsFile } from '@/utils';
|
||||
import { ref, reactive, watch } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const dialogVisible = ref(false);
|
||||
const formRef = ref(null);
|
||||
|
||||
const form = reactive({
|
||||
quantity: '',
|
||||
title: '',
|
||||
phone: '',
|
||||
name: '',
|
||||
});
|
||||
|
||||
const toBack = (level) => {
|
||||
router.go(level);
|
||||
};
|
||||
|
||||
const diotext = ref('');
|
||||
const diodescription = ref('');
|
||||
|
||||
const goDei = (data) => {
|
||||
// diodescription.value = data.description;
|
||||
// diotext.value = data.title;
|
||||
dialogVisible.value = true;
|
||||
};
|
||||
|
||||
const handleSubmit = () => {
|
||||
formRef.value.validate((valid) => {
|
||||
if (valid) {
|
||||
console.log('提交数据:', form);
|
||||
dialogVisible.value = false;
|
||||
}
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/* 根据需要添加样式，这里仅提供基础样式 */
|
||||
// 基础颜色配置
|
||||
$primary-color: #25bf82; // 主色调
|
||||
$text-dark: #25bf82; // 深色文字
|
||||
$text-regular: #606266; // 常规文字
|
||||
$border-color: #dcdfe6; // 边框颜色
|
||||
|
||||
// 弹窗整体样式
|
||||
:deep(.custom-inquiry-dialog) {
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
|
||||
.el-dialog__header {
|
||||
padding: 20px;
|
||||
border-bottom: 1px solid #f2f6fc;
|
||||
.el-dialog__title {
|
||||
font-size: 18px;
|
||||
color: $text-dark;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.el-dialog__body {
|
||||
padding: 20px 28px;
|
||||
}
|
||||
|
||||
.el-form-item__label {
|
||||
color: $text-regular;
|
||||
font-size: 14px;
|
||||
padding-bottom: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.info-section {
|
||||
padding: 0px 50px;
|
||||
margin-bottom: 24px;
|
||||
.info-item {
|
||||
margin-bottom: 12px;
|
||||
.label {
|
||||
color: $text-regular;
|
||||
margin-right: 8px;
|
||||
font-size: 20px;
|
||||
}
|
||||
.value {
|
||||
color: $text-dark;
|
||||
font-weight: 500;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 输入框样式覆盖
|
||||
:deep(.el-input) {
|
||||
.el-input__inner {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border-radius: 4px;
|
||||
&:focus {
|
||||
border-color: $primary-color;
|
||||
}
|
||||
}
|
||||
.el-input__suffix {
|
||||
color: $text-regular;
|
||||
right: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
// 下拉菜单样式
|
||||
:deep(.custom-select-dropdown) {
|
||||
.el-select-dropdown__item {
|
||||
color: $text-regular;
|
||||
&.selected {
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 按钮组样式
|
||||
.dialog-footer {
|
||||
text-align: right;
|
||||
.el-button {
|
||||
padding: 10px 24px;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.cancel-btn {
|
||||
color: $text-regular;
|
||||
&:hover {
|
||||
color: $primary-color;
|
||||
border-color: $primary-color;
|
||||
}
|
||||
}
|
||||
.submit-btn {
|
||||
color: #fff;
|
||||
background: $primary-color;
|
||||
&:hover {
|
||||
background: mix($primary-color, #fff, 85%);
|
||||
}
|
||||
}
|
||||
}
|
||||
.bac {
|
||||
background: rgba(37, 191, 130, 0.1);
|
||||
border: 1px solid rgba(37, 191, 130, 0.5);
|
||||
border-radius: 8px;
|
||||
padding: 2px 5px;
|
||||
}
|
||||
|
||||
.image-box {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.text-gray-500 {
|
||||
height: 300px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: start !important;
|
||||
font-size: 20px !important;
|
||||
color: #000000 !important;
|
||||
padding-top: 30px;
|
||||
}
|
||||
|
||||
.text-gray-600 {
|
||||
font-size: 20px;
|
||||
color: #000000 !important;
|
||||
}
|
||||
|
||||
.flex-1 {
|
||||
width: 47%;
|
||||
height: 300px;
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.max-w-7xl {
|
||||
max-width: 80rem;
|
||||
background-color: #fff;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.title {
|
||||
text-align: left;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mx-auto {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.p-4 {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.items-center {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mb-4 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.mr-4 {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.text-green-500 {
|
||||
color: #25bf82;
|
||||
}
|
||||
|
||||
.text-lg {
|
||||
font-size: 1.125rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.font-bold {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.rounded-lg {
|
||||
border-radius: 0.5rem;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.shadow {
|
||||
box-shadow:
|
||||
0 4px 6px -1px rgba(0, 0, 0, 0.1),
|
||||
0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.text-xl {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.text-gray-600 {
|
||||
color: #757575;
|
||||
}
|
||||
|
||||
.text-gray-700 {
|
||||
color: #000000;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.text-sm {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.space-x-2 {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.bg-green-500 {
|
||||
background-color: #4caf50;
|
||||
}
|
||||
|
||||
.py-2 {
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.px-4 {
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.mt-4 {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
</style>
|
||||
329
sub-operation-service/src/views/packaging/details2.vue
Normal file
329
sub-operation-service/src/views/packaging/details2.vue
Normal file
@ -0,0 +1,329 @@
|
||||
<template>
|
||||
<Common>
|
||||
<template #main>
|
||||
<div class="max-w-7xl mx-auto p-4">
|
||||
<div class="title" @click="toBack(-1)">包装 > <span style="color: rgba(37, 191, 130, 1)">申请包装</span></div>
|
||||
<img src="@/assets/images/warehouseLogistics/img27.png" fit="cover" class="storage-image" @click="toLink" />
|
||||
<!-- <div class="flex items-center mb-4">
|
||||
<h2 class="text-green-500 text-lg font-bold">{{ route.data[2] == '绿色' ? '分拣' : '包装' }} · 查看详情</h2>
|
||||
</div>
|
||||
<div class="flex items-center mb-8">
|
||||
<div class="flex items-center mr-4">
|
||||
<img :src="getAssetsFile(`${route.imageUrl}`)" fit="cover" class="rounded-lg shadow image-box" />
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h3 class="text-xl font-bold mb-2">{{ route.title }}</h3>
|
||||
<p class="text-gray-600 mb-2">{{ route.description }}</p>
|
||||
<div class="flex items-center space-x-2 text-green-500 text-sm">
|
||||
<div class="bac">{{ route.data[0] }}</div>
|
||||
<div class="bac">{{ route.data[1] }}</div>
|
||||
<div class="bac">{{ route.data[2] }}</div>
|
||||
</div>
|
||||
<p class="mt-2 text-gray-700">联系人：李涛</p>
|
||||
<p class="mt-2 text-gray-700">联系电话：13888569833</p>
|
||||
<p class="mt-2 text-gray-700">
|
||||
<el-icon><Location /></el-icon> {{ route.location }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="text-gray-500 text-sm flex items-center">
|
||||
<div>
|
||||
<span style="color: #999999">报价：</span>
|
||||
<span class="ml-2 text-green-500 font-bold">￥{{ route.price }}/m</span>
|
||||
</div>
|
||||
<div>
|
||||
<el-button size="large" type="primary" @click="goDei"
|
||||
><el-icon class="el-icon--right"><ChatLineRound /></el-icon>
|
||||
留下信息
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-6">
|
||||
<h3 class="text-lg font-bold mb-4" style="margin-top: 30px">产品详细介绍</h3>
|
||||
<div class="bg-white p-4 rounded-lg shadow-sm">
|
||||
<p style="text-align: left" class="mb-4 text-gray-700">{{ route.description }} 目前暂无介绍哦~</p>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</template>
|
||||
</Common>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Common from './components/common.vue';
|
||||
import { getAssetsFile } from '@/utils';
|
||||
import { ref, reactive, watch } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const dialogVisible = ref(false);
|
||||
const formRef = ref(null);
|
||||
|
||||
const form = reactive({
|
||||
quantity: '',
|
||||
title: '',
|
||||
phone: '',
|
||||
name: '',
|
||||
});
|
||||
|
||||
const toBack = (level) => {
|
||||
router.go(level);
|
||||
};
|
||||
|
||||
const diotext = ref('');
|
||||
const diodescription = ref('');
|
||||
|
||||
const goDei = (data) => {
|
||||
// diodescription.value = data.description;
|
||||
// diotext.value = data.title;
|
||||
dialogVisible.value = true;
|
||||
};
|
||||
|
||||
const handleSubmit = () => {
|
||||
formRef.value.validate((valid) => {
|
||||
if (valid) {
|
||||
console.log('提交数据:', form);
|
||||
dialogVisible.value = false;
|
||||
}
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/* 根据需要添加样式，这里仅提供基础样式 */
|
||||
// 基础颜色配置
|
||||
$primary-color: #25bf82; // 主色调
|
||||
$text-dark: #25bf82; // 深色文字
|
||||
$text-regular: #606266; // 常规文字
|
||||
$border-color: #dcdfe6; // 边框颜色
|
||||
|
||||
// 弹窗整体样式
|
||||
:deep(.custom-inquiry-dialog) {
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
|
||||
.el-dialog__header {
|
||||
padding: 20px;
|
||||
border-bottom: 1px solid #f2f6fc;
|
||||
.el-dialog__title {
|
||||
font-size: 18px;
|
||||
color: $text-dark;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.el-dialog__body {
|
||||
padding: 20px 28px;
|
||||
}
|
||||
|
||||
.el-form-item__label {
|
||||
color: $text-regular;
|
||||
font-size: 14px;
|
||||
padding-bottom: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.info-section {
|
||||
padding: 0px 50px;
|
||||
margin-bottom: 24px;
|
||||
.info-item {
|
||||
margin-bottom: 12px;
|
||||
.label {
|
||||
color: $text-regular;
|
||||
margin-right: 8px;
|
||||
font-size: 20px;
|
||||
}
|
||||
.value {
|
||||
color: $text-dark;
|
||||
font-weight: 500;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 输入框样式覆盖
|
||||
:deep(.el-input) {
|
||||
.el-input__inner {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border-radius: 4px;
|
||||
&:focus {
|
||||
border-color: $primary-color;
|
||||
}
|
||||
}
|
||||
.el-input__suffix {
|
||||
color: $text-regular;
|
||||
right: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
// 下拉菜单样式
|
||||
:deep(.custom-select-dropdown) {
|
||||
.el-select-dropdown__item {
|
||||
color: $text-regular;
|
||||
&.selected {
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 按钮组样式
|
||||
.dialog-footer {
|
||||
text-align: right;
|
||||
.el-button {
|
||||
padding: 10px 24px;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.cancel-btn {
|
||||
color: $text-regular;
|
||||
&:hover {
|
||||
color: $primary-color;
|
||||
border-color: $primary-color;
|
||||
}
|
||||
}
|
||||
.submit-btn {
|
||||
color: #fff;
|
||||
background: $primary-color;
|
||||
&:hover {
|
||||
background: mix($primary-color, #fff, 85%);
|
||||
}
|
||||
}
|
||||
}
|
||||
.bac {
|
||||
background: rgba(37, 191, 130, 0.1);
|
||||
border: 1px solid rgba(37, 191, 130, 0.5);
|
||||
border-radius: 8px;
|
||||
padding: 2px 5px;
|
||||
}
|
||||
|
||||
.image-box {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.text-gray-500 {
|
||||
height: 300px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: start !important;
|
||||
font-size: 20px !important;
|
||||
color: #000000 !important;
|
||||
padding-top: 30px;
|
||||
}
|
||||
|
||||
.text-gray-600 {
|
||||
font-size: 20px;
|
||||
color: #000000 !important;
|
||||
}
|
||||
|
||||
.flex-1 {
|
||||
width: 47%;
|
||||
height: 300px;
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.max-w-7xl {
|
||||
max-width: 80rem;
|
||||
background-color: #fff;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.title {
|
||||
text-align: left;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mx-auto {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.p-4 {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.items-center {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mb-4 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.mr-4 {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.text-green-500 {
|
||||
color: #25bf82;
|
||||
}
|
||||
|
||||
.text-lg {
|
||||
font-size: 1.125rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.font-bold {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.rounded-lg {
|
||||
border-radius: 0.5rem;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.shadow {
|
||||
box-shadow:
|
||||
0 4px 6px -1px rgba(0, 0, 0, 0.1),
|
||||
0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.text-xl {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.text-gray-600 {
|
||||
color: #757575;
|
||||
}
|
||||
|
||||
.text-gray-700 {
|
||||
color: #000000;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.text-sm {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.space-x-2 {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.bg-green-500 {
|
||||
background-color: #4caf50;
|
||||
}
|
||||
|
||||
.py-2 {
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.px-4 {
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.mt-4 {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
</style>
|
||||
@ -97,7 +97,7 @@
|
||||
<el-card class="storage-card" shadow="hover" body-style="padding: 0">
|
||||
<div class="storage-content">
|
||||
<div class="storage-content-top">
|
||||
<img src="@/assets/images/warehouseLogistics/img4.png" fit="cover" class="storage-image storage-image1" />
|
||||
<img src="@/assets/images/warehouseLogistics/img4.png" fit="cover" class="storage-image storage-image1" @click="toLink" />
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
@ -161,7 +161,7 @@
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div style="position: fixed; left: 50%; bottom: 7%">
|
||||
<el-button style="padding: 10px 100px" size="large" type="primary">发布包装{{ currentTab0 === 0 ? '服务' : '需求' }}</el-button>
|
||||
<el-button style="padding: 10px 50px" size="large" type="primary" @click="applicationPackaging">发布需求</el-button>
|
||||
</div>
|
||||
<page-pagination :total="5" @current-change="currentChange" />
|
||||
</template>
|
||||
@ -179,9 +179,10 @@ import Common from './components/common.vue';
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
const tab0 = reactive(['包装服务', '包装需求']);
|
||||
// const tab0 = reactive(['包装服务', '包装需求']);
|
||||
const tab0 = reactive(['包装服务']);
|
||||
const tab1 = reactive(['全部', '熟料容器', '金属容器', '纸类容器']);
|
||||
const tab2 = reactive(['全部', '塑料袋', '塑料瓶', '塑料桶', '塑料盒']);
|
||||
const tab2 = reactive(['全部', '塑料框', '纸箱', '泡沫箱', '冰瓶']);
|
||||
const tab3 = reactive(['水产', '其他类']);
|
||||
const state = reactive({
|
||||
menus: warehouseLogisticsRoutes[0].children,
|
||||
@ -271,8 +272,13 @@ const currentChange = (current) => {
|
||||
const toLink = (row) => {
|
||||
row.data = ['高品质', '杀菌灭毒', '绿色'];
|
||||
router.push({
|
||||
path: '/sub-operation-service/packaging/details',
|
||||
query: row,
|
||||
path: '/sub-operation-service/packaging/details1',
|
||||
// query: row,
|
||||
});
|
||||
};
|
||||
const applicationPackaging = () => {
|
||||
router.push({
|
||||
path: '/sub-operation-service/packaging/details2',
|
||||
});
|
||||
};
|
||||
</script>
|
||||
@ -457,6 +463,7 @@ $border-color: #dcdfe6; // 边框颜色
|
||||
height: auto;
|
||||
border-radius: 0;
|
||||
object-fit: cover;
|
||||
cursor: pointer;
|
||||
}
|
||||
.storage-info {
|
||||
padding-right: 50px;
|
||||
|
||||
@ -97,7 +97,7 @@
|
||||
<el-card class="storage-card" shadow="hover" body-style="padding: 0">
|
||||
<div class="storage-content">
|
||||
<div class="storage-content-top">
|
||||
<img src="@/assets/images/warehouseLogistics/img1.png" fit="cover" class="storage-image storage-image1" />
|
||||
<img src="@/assets/images/warehouseLogistics/img1.png" fit="cover" class="storage-image storage-image1" @click="toLink" />
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
@ -106,7 +106,7 @@
|
||||
<el-card class="storage-card" shadow="hover" body-style="padding: 0">
|
||||
<div class="storage-content">
|
||||
<div class="storage-content-top">
|
||||
<img src="@/assets/images/warehouseLogistics/img2.png" fit="cover" class="storage-image storage-image1" />
|
||||
<img src="@/assets/images/warehouseLogistics/img2.png" fit="cover" class="storage-image storage-image1" @click="toLink" />
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
@ -163,7 +163,7 @@
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div style="position: fixed; left: 50%; bottom: 7%">
|
||||
<el-button style="padding: 10px 100px" size="large" type="primary">发布分拣{{ currentTab0 === 0 ? '服务' : '需求' }}</el-button>
|
||||
<el-button style="padding: 10px 50px" size="large" type="primary" @click="handleApply">发布需求</el-button>
|
||||
</div>
|
||||
<page-pagination :total="5" @current-change="currentChange" />
|
||||
</template>
|
||||
@ -181,7 +181,8 @@ import Common from './components/common.vue';
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
const tab0 = reactive(['分拣服务', '分拣需求']);
|
||||
// const tab0 = reactive(['分拣服务', '分拣需求']);
|
||||
const tab0 = reactive(['分拣服务']);
|
||||
const tab1 = reactive(['全部', '人工分拣', '自动化分拣']);
|
||||
const tab2 = reactive(['全部', '已完成', '分拣中', '已接单', '待接单']);
|
||||
const tab3 = reactive(['水产', '其他类']);
|
||||
@ -277,6 +278,11 @@ const toLink = (row) => {
|
||||
query: row,
|
||||
});
|
||||
};
|
||||
const handleApply = () => {
|
||||
router.push({
|
||||
path: '/sub-operation-service/packaging/apply',
|
||||
});
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
// 基础颜色配置
|
||||
@ -459,6 +465,7 @@ $border-color: #dcdfe6; // 边框颜色
|
||||
height: auto;
|
||||
border-radius: 0;
|
||||
object-fit: cover;
|
||||
cursor: pointer;
|
||||
}
|
||||
.storage-info {
|
||||
padding-right: 50px;
|
||||
|
||||
@ -94,7 +94,7 @@
|
||||
</el-card>
|
||||
</el-col>
|
||||
<div style="position: fixed; left: 50%; bottom: 7%">
|
||||
<el-button style="padding: 10px 50px" size="large" type="primary">在线寄货</el-button>
|
||||
<el-button style="padding: 10px 50px" size="large" type="primary" @click="shippingGoods">在线寄货</el-button>
|
||||
</div>
|
||||
<!-- <el-pagination
|
||||
:size="'large'"
|
||||
@ -232,6 +232,12 @@ const toLink = (row) => {
|
||||
});
|
||||
};
|
||||
|
||||
const shippingGoods = () => {
|
||||
router.push({
|
||||
name: 'logistics-shipping',
|
||||
});
|
||||
};
|
||||
|
||||
const contact = (id) => {
|
||||
for (let i in state.data) {
|
||||
if (state.data[i].id === id) {
|
||||
|
||||
@ -0,0 +1,353 @@
|
||||
<template>
|
||||
<section>
|
||||
<common>
|
||||
<template #main>
|
||||
<el-card shadow="none" style="border-radius: 14px">
|
||||
<div class="title">
|
||||
<span @click="toBack(-2)">物流</span>
|
||||
<span class="mx-10"> > </span>
|
||||
<span @click="toBack(-1)">在线寄货</span>
|
||||
<span class="mx-10"> > </span>
|
||||
<span style="color: rgba(37, 191, 130, 1)">平台匹配资源</span>
|
||||
</div>
|
||||
<div class="max-w-7xl mx-auto p-4">
|
||||
<img src="@/assets/images/warehouseLogistics/img22.png" fit="cover" class="storage-image" @click="toLink" />
|
||||
<!-- <div class="flex items-center mb-8">
|
||||
<div class="flex items-center mr-4">
|
||||
<img :src="state.data.imgPath" fit="cover" class="rounded-lg shadow image-box" />
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h3 class="text-xl font-bold mb-2">{{ state.data.name }}</h3>
|
||||
<div class="text-gray-600 mb-2">
|
||||
<span>{{ state.data.parentTitle }}</span>
|
||||
<img :src="getAssetsFile('images/warehouseLogistics/认证.png')" alt="" style="width: 20px; margin: 0 5px" />
|
||||
<img :src="getAssetsFile('images/warehouseLogistics/优先级.png')" alt="" style="width: 20px" />
|
||||
</div>
|
||||
<div class="storage-tags">
|
||||
<el-tag
|
||||
v-for="(tags, indexT) in state.data.tag"
|
||||
:key="indexT"
|
||||
effect="plain"
|
||||
round
|
||||
style="background-color: rgba(37, 191, 130, 0.2); color: #25bf82"
|
||||
>
|
||||
{{ tags }}
|
||||
</el-tag>
|
||||
</div>
|
||||
<p class="mt-2 text-gray-700">联系人：{{ state.data.contactName }}</p>
|
||||
<p class="mt-2 text-gray-700">联系电话：{{ state.data.contactPhone }}</p>
|
||||
<p class="mt-2 text-gray-700">
|
||||
<el-icon><Location /></el-icon> {{ state.data.address }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="text-gray-500 text-sm flex items-center" style="text-align: right">
|
||||
<div>
|
||||
<span style="color: #999999">报价：</span>
|
||||
<span class="ml-2 text-green-500 font-bold">
|
||||
¥{{ state.data.price }}/{{
|
||||
state.data.priceSpec === 1 ? 'kg' : state.data.priceSpec === 2 ? '件' : state.data.priceSpec === 3 ? 'm³' : ''
|
||||
}}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<el-button size="large" type="primary" @click="goDei">
|
||||
<el-icon class="el-icon--right"><ChatLineRound /></el-icon>
|
||||
留下信息
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-6">
|
||||
<h3 class="text-lg font-bold mb-4" style="margin-top: 30px">产品详细介绍</h3>
|
||||
<div class="bg-white p-4 rounded-lg shadow-sm">
|
||||
<p style="text-align: left" class="mb-4 text-gray-700" v-html="state.data.content ? state.data.content : '暂无介绍内容'"></p>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card shadow="none" style="border-radius: 14px; margin-top: 20px">
|
||||
<div class="max-w-7xl mx-auto p-4" style="padding: 0">
|
||||
<img src="@/assets/images/warehouseLogistics/img23.png" fit="cover" class="storage-image" />
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
</common>
|
||||
</section>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, reactive, watch, onMounted } from 'vue';
|
||||
import { getAssetsFile } from '@/utils';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import Common from '../components/common.vue';
|
||||
import { logisticDetail } from '@/apis/warehouseLogistics.js';
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
const state = reactive({
|
||||
query: {},
|
||||
data: {},
|
||||
});
|
||||
|
||||
const toBack = (level) => {
|
||||
router.go(level);
|
||||
};
|
||||
|
||||
const queryDetail = () => {
|
||||
logisticDetail(state.query.id).then((res) => {
|
||||
if (res.code === 200) {
|
||||
state.data = res.data;
|
||||
for (let i in state.data) {
|
||||
state.data[i].tag = state.data[i].tags.split(',');
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
state.query.id = route.query.id;
|
||||
// queryDetail();
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.title {
|
||||
text-align: left;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
}
|
||||
/* 根据需要添加样式，这里仅提供基础样式 */
|
||||
// 基础颜色配置
|
||||
$primary-color: #25bf82; // 主色调
|
||||
$text-dark: #25bf82; // 深色文字
|
||||
$text-regular: #606266; // 常规文字
|
||||
$border-color: #dcdfe6; // 边框颜色
|
||||
|
||||
// 弹窗整体样式
|
||||
:deep(.custom-inquiry-dialog) {
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
|
||||
.el-dialog__header {
|
||||
padding: 20px;
|
||||
border-bottom: 1px solid #f2f6fc;
|
||||
.el-dialog__title {
|
||||
font-size: 18px;
|
||||
color: $text-dark;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.el-dialog__body {
|
||||
padding: 20px 28px;
|
||||
}
|
||||
|
||||
.el-form-item__label {
|
||||
color: $text-regular;
|
||||
font-size: 14px;
|
||||
padding-bottom: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.info-section {
|
||||
padding: 0px 50px;
|
||||
margin-bottom: 24px;
|
||||
.info-item {
|
||||
margin-bottom: 12px;
|
||||
.label {
|
||||
color: $text-regular;
|
||||
margin-right: 8px;
|
||||
font-size: 20px;
|
||||
}
|
||||
.value {
|
||||
color: $text-dark;
|
||||
font-weight: 500;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 输入框样式覆盖
|
||||
:deep(.el-input) {
|
||||
.el-input__inner {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border-radius: 4px;
|
||||
&:focus {
|
||||
border-color: $primary-color;
|
||||
}
|
||||
}
|
||||
.el-input__suffix {
|
||||
color: $text-regular;
|
||||
right: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
// 下拉菜单样式
|
||||
:deep(.custom-select-dropdown) {
|
||||
.el-select-dropdown__item {
|
||||
color: $text-regular;
|
||||
&.selected {
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 按钮组样式
|
||||
.dialog-footer {
|
||||
text-align: right;
|
||||
.el-button {
|
||||
padding: 10px 24px;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.cancel-btn {
|
||||
color: $text-regular;
|
||||
&:hover {
|
||||
color: $primary-color;
|
||||
border-color: $primary-color;
|
||||
}
|
||||
}
|
||||
.submit-btn {
|
||||
color: #fff;
|
||||
background: $primary-color;
|
||||
&:hover {
|
||||
background: mix($primary-color, #fff, 85%);
|
||||
}
|
||||
}
|
||||
}
|
||||
.bac {
|
||||
background: rgba(37, 191, 130, 0.1);
|
||||
border: 1px solid rgba(37, 191, 130, 0.5);
|
||||
border-radius: 8px;
|
||||
padding: 2px 5px;
|
||||
}
|
||||
|
||||
.image-box {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.text-gray-500 {
|
||||
height: 300px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: start !important;
|
||||
font-size: 20px !important;
|
||||
color: #000000 !important;
|
||||
padding-top: 30px;
|
||||
}
|
||||
|
||||
.text-gray-600 {
|
||||
font-size: 20px;
|
||||
color: #000000 !important;
|
||||
}
|
||||
|
||||
.flex-1 {
|
||||
width: 40%;
|
||||
height: 300px;
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.max-w-7xl {
|
||||
max-width: 80rem;
|
||||
background-color: #fff;
|
||||
border-radius: 10px;
|
||||
.storage-image {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.mx-auto {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.p-4 {
|
||||
padding: 1rem;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.items-center {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mb-4 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.mr-4 {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.text-green-500 {
|
||||
color: #25bf82;
|
||||
}
|
||||
|
||||
.text-lg {
|
||||
font-size: 1.125rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.font-bold {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.rounded-lg {
|
||||
border-radius: 0.5rem;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.shadow {
|
||||
box-shadow:
|
||||
0 4px 6px -1px rgba(0, 0, 0, 0.1),
|
||||
0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.text-xl {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.text-gray-600 {
|
||||
color: #757575;
|
||||
}
|
||||
|
||||
.text-gray-700 {
|
||||
color: #000000;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.text-sm {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.space-x-2 {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.bg-green-500 {
|
||||
background-color: #4caf50;
|
||||
}
|
||||
|
||||
.py-2 {
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.px-4 {
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.mt-4 {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,356 @@
|
||||
<template>
|
||||
<section>
|
||||
<common>
|
||||
<template #main>
|
||||
<el-card shadow="none" style="border-radius: 14px">
|
||||
<div class="title" @click="toBack(-1)">
|
||||
<el-icon><ArrowLeftBold /></el-icon>物流 · <span style="color: rgba(37, 191, 130, 1)">在线寄货</span>
|
||||
</div>
|
||||
<!-- <div class="max-w-7xl mx-auto p-4">
|
||||
<img src="@/assets/images/warehouseLogistics/img21.png" fit="cover" class="storage-image" @click="toLink" />
|
||||
<div class="flex items-center mb-8">
|
||||
<div class="flex items-center mr-4">
|
||||
<img :src="state.data.imgPath" fit="cover" class="rounded-lg shadow image-box" />
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h3 class="text-xl font-bold mb-2">{{ state.data.name }}</h3>
|
||||
<div class="text-gray-600 mb-2">
|
||||
<span>{{ state.data.parentTitle }}</span>
|
||||
<img :src="getAssetsFile('images/warehouseLogistics/认证.png')" alt="" style="width: 20px; margin: 0 5px" />
|
||||
<img :src="getAssetsFile('images/warehouseLogistics/优先级.png')" alt="" style="width: 20px" />
|
||||
</div>
|
||||
<div class="storage-tags">
|
||||
<el-tag
|
||||
v-for="(tags, indexT) in state.data.tag"
|
||||
:key="indexT"
|
||||
effect="plain"
|
||||
round
|
||||
style="background-color: rgba(37, 191, 130, 0.2); color: #25bf82"
|
||||
>
|
||||
{{ tags }}
|
||||
</el-tag>
|
||||
</div>
|
||||
<p class="mt-2 text-gray-700">联系人：{{ state.data.contactName }}</p>
|
||||
<p class="mt-2 text-gray-700">联系电话：{{ state.data.contactPhone }}</p>
|
||||
<p class="mt-2 text-gray-700">
|
||||
<el-icon><Location /></el-icon> {{ state.data.address }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="text-gray-500 text-sm flex items-center" style="text-align: right">
|
||||
<div>
|
||||
<span style="color: #999999">报价：</span>
|
||||
<span class="ml-2 text-green-500 font-bold">
|
||||
¥{{ state.data.price }}/{{
|
||||
state.data.priceSpec === 1 ? 'kg' : state.data.priceSpec === 2 ? '件' : state.data.priceSpec === 3 ? 'm³' : ''
|
||||
}}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<el-button size="large" type="primary" @click="goDei">
|
||||
<el-icon class="el-icon--right"><ChatLineRound /></el-icon>
|
||||
留下信息
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-6">
|
||||
<h3 class="text-lg font-bold mb-4" style="margin-top: 30px">产品详细介绍</h3>
|
||||
<div class="bg-white p-4 rounded-lg shadow-sm">
|
||||
<p style="text-align: left" class="mb-4 text-gray-700" v-html="state.data.content ? state.data.content : '暂无介绍内容'"></p>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="max-w-7xl mx-auto p-4">
|
||||
<img src="@/assets/images/warehouseLogistics/img21.png" fit="cover" class="storage-image" />
|
||||
<div>
|
||||
<el-button style="padding: 10px 40px" size="default" type="primary" @click="application">提交</el-button>
|
||||
<el-button style="padding: 10px 40px" size="default" type="plain">取消</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
</common>
|
||||
</section>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, reactive, watch, onMounted } from 'vue';
|
||||
import { getAssetsFile } from '@/utils';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import Common from '../components/common.vue';
|
||||
import { logisticDetail } from '@/apis/warehouseLogistics.js';
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
const state = reactive({
|
||||
query: {},
|
||||
data: {},
|
||||
});
|
||||
|
||||
const application = () => {
|
||||
router.push({
|
||||
name: 'logistics-match',
|
||||
});
|
||||
};
|
||||
|
||||
const toBack = (level) => {
|
||||
router.go(level);
|
||||
};
|
||||
|
||||
const queryDetail = () => {
|
||||
logisticDetail(state.query.id).then((res) => {
|
||||
if (res.code === 200) {
|
||||
state.data = res.data;
|
||||
for (let i in state.data) {
|
||||
state.data[i].tag = state.data[i].tags.split(',');
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
state.query.id = route.query.id;
|
||||
// queryDetail();
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.title {
|
||||
text-align: left;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
}
|
||||
/* 根据需要添加样式，这里仅提供基础样式 */
|
||||
// 基础颜色配置
|
||||
$primary-color: #25bf82; // 主色调
|
||||
$text-dark: #25bf82; // 深色文字
|
||||
$text-regular: #606266; // 常规文字
|
||||
$border-color: #dcdfe6; // 边框颜色
|
||||
|
||||
// 弹窗整体样式
|
||||
:deep(.custom-inquiry-dialog) {
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
|
||||
.el-dialog__header {
|
||||
padding: 20px;
|
||||
border-bottom: 1px solid #f2f6fc;
|
||||
.el-dialog__title {
|
||||
font-size: 18px;
|
||||
color: $text-dark;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.el-dialog__body {
|
||||
padding: 20px 28px;
|
||||
}
|
||||
|
||||
.el-form-item__label {
|
||||
color: $text-regular;
|
||||
font-size: 14px;
|
||||
padding-bottom: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.info-section {
|
||||
padding: 0px 50px;
|
||||
margin-bottom: 24px;
|
||||
.info-item {
|
||||
margin-bottom: 12px;
|
||||
.label {
|
||||
color: $text-regular;
|
||||
margin-right: 8px;
|
||||
font-size: 20px;
|
||||
}
|
||||
.value {
|
||||
color: $text-dark;
|
||||
font-weight: 500;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 输入框样式覆盖
|
||||
:deep(.el-input) {
|
||||
.el-input__inner {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border-radius: 4px;
|
||||
&:focus {
|
||||
border-color: $primary-color;
|
||||
}
|
||||
}
|
||||
.el-input__suffix {
|
||||
color: $text-regular;
|
||||
right: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
// 下拉菜单样式
|
||||
:deep(.custom-select-dropdown) {
|
||||
.el-select-dropdown__item {
|
||||
color: $text-regular;
|
||||
&.selected {
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 按钮组样式
|
||||
.dialog-footer {
|
||||
text-align: right;
|
||||
.el-button {
|
||||
padding: 10px 24px;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.cancel-btn {
|
||||
color: $text-regular;
|
||||
&:hover {
|
||||
color: $primary-color;
|
||||
border-color: $primary-color;
|
||||
}
|
||||
}
|
||||
.submit-btn {
|
||||
color: #fff;
|
||||
background: $primary-color;
|
||||
&:hover {
|
||||
background: mix($primary-color, #fff, 85%);
|
||||
}
|
||||
}
|
||||
}
|
||||
.bac {
|
||||
background: rgba(37, 191, 130, 0.1);
|
||||
border: 1px solid rgba(37, 191, 130, 0.5);
|
||||
border-radius: 8px;
|
||||
padding: 2px 5px;
|
||||
}
|
||||
|
||||
.image-box {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.text-gray-500 {
|
||||
height: 300px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: start !important;
|
||||
font-size: 20px !important;
|
||||
color: #000000 !important;
|
||||
padding-top: 30px;
|
||||
}
|
||||
|
||||
.text-gray-600 {
|
||||
font-size: 20px;
|
||||
color: #000000 !important;
|
||||
}
|
||||
|
||||
.flex-1 {
|
||||
width: 40%;
|
||||
height: 300px;
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.max-w-7xl {
|
||||
max-width: 80rem;
|
||||
background-color: #fff;
|
||||
border-radius: 10px;
|
||||
.storage-image {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.mx-auto {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.p-4 {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.items-center {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mb-4 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.mr-4 {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.text-green-500 {
|
||||
color: #25bf82;
|
||||
}
|
||||
|
||||
.text-lg {
|
||||
font-size: 1.125rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.font-bold {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.rounded-lg {
|
||||
border-radius: 0.5rem;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.shadow {
|
||||
box-shadow:
|
||||
0 4px 6px -1px rgba(0, 0, 0, 0.1),
|
||||
0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.text-xl {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.text-gray-600 {
|
||||
color: #757575;
|
||||
}
|
||||
|
||||
.text-gray-700 {
|
||||
color: #000000;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.text-sm {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.space-x-2 {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.bg-green-500 {
|
||||
background-color: #4caf50;
|
||||
}
|
||||
|
||||
.py-2 {
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.px-4 {
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.mt-4 {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
</style>
|
||||
@ -66,7 +66,7 @@
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card shadow="none" style="border-radius: 14px; margin-top: 20px">
|
||||
<div class="max-w-7xl mx-auto p-4">
|
||||
<div class="max-w-7xl mx-auto p-4" style="padding: 0">
|
||||
<img src="@/assets/images/warehouseLogistics/img16.png" fit="cover" class="storage-image" />
|
||||
</div>
|
||||
</el-card>
|
||||
@ -269,6 +269,7 @@ $border-color: #dcdfe6; // 边框颜色
|
||||
|
||||
.p-4 {
|
||||
padding: 1rem;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.flex {
|
||||
|
||||
@ -65,7 +65,7 @@
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card shadow="none" style="border-radius: 14px; margin-top: 20px">
|
||||
<div class="max-w-7xl mx-auto p-4">
|
||||
<div class="max-w-7xl mx-auto p-4" style="padding-top: 0">
|
||||
<img src="@/assets/images/warehouseLogistics/img18.png" fit="cover" class="storage-image" />
|
||||
<div>
|
||||
<el-button style="padding: 10px 40px" size="default" type="primary" @click="application">提交</el-button>
|
||||
@ -278,6 +278,7 @@ $border-color: #dcdfe6; // 边框颜色
|
||||
|
||||
.p-4 {
|
||||
padding: 1rem;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.flex {
|
||||
|
||||
@ -8,8 +8,26 @@
|
||||
<span class="mx-10"> > </span>
|
||||
<span style="color: rgba(37, 191, 130, 1)">查看详情</span>
|
||||
</div>
|
||||
<div class="max-w-7xl mx-auto p-4">
|
||||
<img src="@/assets/images/warehouseLogistics/img14.png" fit="cover" class="storage-image" @click="toLink" />
|
||||
<div class="max-w-7xl mx-auto p-4" style="padding-bottom: 0">
|
||||
<div style="width: 100%; position: relative">
|
||||
<img src="@/assets/images/warehouseLogistics/img14.png" fit="cover" class="storage-image" @click="toLink" />
|
||||
<el-button
|
||||
type="primary"
|
||||
style="
|
||||
width: 250px;
|
||||
height: 80px;
|
||||
background-color: rgba(37, 191, 130, 0);
|
||||
border: none;
|
||||
position: absolute;
|
||||
top: 9%;
|
||||
left: 35%;
|
||||
z-index: 999;
|
||||
"
|
||||
@click="dialogVisible = true"
|
||||
>
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<!-- <div class="flex items-center mb-8">
|
||||
<div class="flex items-center mr-4">
|
||||
<img :src="state.data.imgPath" fit="cover" class="rounded-lg shadow image-box" />
|
||||
@ -65,6 +83,17 @@
|
||||
</el-card>
|
||||
</template>
|
||||
</common>
|
||||
<el-dialog v-model="dialogVisible" title="立即预约" width="1000" :before-close="handleClose" center>
|
||||
<!-- <h3>立即预约</h3> -->
|
||||
<img src="@/assets/images/warehouseLogistics/img28.png" fit="cover" class="storage-image" @click="toLink" />
|
||||
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="dialogVisible = false"> 提交 </el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</section>
|
||||
</template>
|
||||
<script setup>
|
||||
@ -81,6 +110,7 @@ const state = reactive({
|
||||
query: {},
|
||||
data: {},
|
||||
});
|
||||
const dialogVisible = ref(false);
|
||||
|
||||
const toBack = (level) => {
|
||||
router.go(level);
|
||||
@ -188,7 +218,7 @@ $border-color: #dcdfe6; // 边框颜色
|
||||
|
||||
// 按钮组样式
|
||||
.dialog-footer {
|
||||
text-align: right;
|
||||
text-align: center;
|
||||
.el-button {
|
||||
padding: 10px 24px;
|
||||
border-radius: 4px;
|
||||
|
||||
@ -70,7 +70,7 @@
|
||||
</el-card>
|
||||
</el-col>
|
||||
<div style="position: fixed; left: 50%; bottom: 7%">
|
||||
<el-button v-if="currentTab0 === 0" style="padding: 10px 100px" size="large" type="primary" @click="application">申请仓储</el-button>
|
||||
<el-button v-if="currentTab0 === 0" style="padding: 10px 50px" size="large" type="primary" @click="application">发布需求</el-button>
|
||||
</div>
|
||||
<!-- <el-pagination
|
||||
:size="'large'"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user