346 lines
7.6 KiB
Vue
346 lines
7.6 KiB
Vue
<template>
|
||
<section>
|
||
<common>
|
||
<template #main>
|
||
<el-card shadow="none" style="border-radius: 14px">
|
||
<div class="title">
|
||
<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/img14.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 ? 'm³' : state.data.priceSpec === 2 ? '间' : state.data.priceSpec === 3 ? '㎡' : ''
|
||
}}/{{ state.data.timeSpec === 1 ? '天' : state.data.timeSpec === 2 ? '月' : state.data.timeSpec === 3 ? '年' : '' }}
|
||
</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>
|
||
</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 { warehouseDetail } from '@/apis/warehouseLogistics.js';
|
||
|
||
const route = useRoute();
|
||
const router = useRouter();
|
||
|
||
const state = reactive({
|
||
query: {},
|
||
data: {},
|
||
});
|
||
|
||
const toBack = (level) => {
|
||
router.go(level);
|
||
};
|
||
|
||
const queryDetail = () => {
|
||
warehouseDetail(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>
|