bonus
/
Zlpt_Portal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

更改门户等样式问题

This commit is contained in:
BianLzhaoMin 2024-11-20 11:16:18 +08:00
parent e101f3e1bc
commit e541f212e1
6 changed files with 203 additions and 167 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
components.d.ts vendored
View File

@ -10,11 +10,13 @@ declare module 'vue' {
ElButton: typeof import('element-plus/es')['ElButton'] ElButton: typeof import('element-plus/es')['ElButton']
ElCarousel: typeof import('element-plus/es')['ElCarousel'] ElCarousel: typeof import('element-plus/es')['ElCarousel']
ElCarouselItem: typeof import('element-plus/es')['ElCarouselItem'] ElCarouselItem: typeof import('element-plus/es')['ElCarouselItem']
ElCascader: typeof import('element-plus/es')['ElCascader']
ElCheckbox: typeof import('element-plus/es')['ElCheckbox'] ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
ElCol: typeof import('element-plus/es')['ElCol'] ElCol: typeof import('element-plus/es')['ElCol']
ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider'] ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
ElDatePicker: typeof import('element-plus/es')['ElDatePicker'] ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
ElDialog: typeof import('element-plus/es')['ElDialog'] ElDialog: typeof import('element-plus/es')['ElDialog']
ElEmpty: typeof import('element-plus/es')['ElEmpty']
ElForm: typeof import('element-plus/es')['ElForm'] ElForm: typeof import('element-plus/es')['ElForm']
ElFormItem: typeof import('element-plus/es')['ElFormItem'] ElFormItem: typeof import('element-plus/es')['ElFormItem']
ElIcon: typeof import('element-plus/es')['ElIcon'] ElIcon: typeof import('element-plus/es')['ElIcon']
@ -23,14 +25,18 @@ declare module 'vue' {
ElMenu: typeof import('element-plus/es')['ElMenu'] ElMenu: typeof import('element-plus/es')['ElMenu']
ElMenuItem: typeof import('element-plus/es')['ElMenuItem'] ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
ElOption: typeof import('element-plus/es')['ElOption'] ElOption: typeof import('element-plus/es')['ElOption']
ElPageHeader: typeof import('element-plus/es')['ElPageHeader']
ElPagination: typeof import('element-plus/es')['ElPagination'] ElPagination: typeof import('element-plus/es')['ElPagination']
ElPopconfirm: typeof import('element-plus/es')['ElPopconfirm']
ElProgress: typeof import('element-plus/es')['ElProgress'] ElProgress: typeof import('element-plus/es')['ElProgress']
ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
ElRow: typeof import('element-plus/es')['ElRow'] ElRow: typeof import('element-plus/es')['ElRow']
ElSelect: typeof import('element-plus/es')['ElSelect'] ElSelect: typeof import('element-plus/es')['ElSelect']
ElTable: typeof import('element-plus/es')['ElTable'] ElTable: typeof import('element-plus/es')['ElTable']
ElTableColumn: typeof import('element-plus/es')['ElTableColumn'] ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
ElTag: typeof import('element-plus/es')['ElTag'] ElTag: typeof import('element-plus/es')['ElTag']
ElTimeline: typeof import('element-plus/es')['ElTimeline']
ElTimelineItem: typeof import('element-plus/es')['ElTimelineItem']
ElUpload: typeof import('element-plus/es')['ElUpload'] ElUpload: typeof import('element-plus/es')['ElUpload']
EquipCard: typeof import('./src/components/equipCard.vue')['default'] EquipCard: typeof import('./src/components/equipCard.vue')['default']
EquipDetailTable: typeof import('./src/components/equipDetailTable.vue')['default'] EquipDetailTable: typeof import('./src/components/equipDetailTable.vue')['default']

2
env/.env.dev vendored
View File

@ -7,7 +7,7 @@ VITE_API_URL = '/proxyApi'
# 开发环境接口地址 # 开发环境接口地址
# VITE_proxyTarget = 'http://10.40.92.74:8080' #盛旭 # VITE_proxyTarget = 'http://10.40.92.74:8080' #盛旭
VITE_proxyTarget = 'http://10.40.92.186:8080' # 赵福海 (登录) VITE_proxyTarget = 'http://192.168.2.72:8080' # 赵福海 (登录)
# VITE_proxyTarget = 'http://10.40.92.185:9206' # 赵福海 ( 设备类型) # VITE_proxyTarget = 'http://10.40.92.185:9206' # 赵福海 ( 设备类型)
# VITE_proxyTarget = 'http://10.40.92.16:9502' # 牛 (个人中心 基础信息企业申请认证) # VITE_proxyTarget = 'http://10.40.92.16:9502' # 牛 (个人中心 基础信息企业申请认证)

BIN
src/assets/img/home/机械化装备平台.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

24
src/components/FooterInfo/index.vue
View File

@ -1,6 +1,4 @@
<script setup lang="ts"> <script setup lang="ts"></script>
</script>
<template> <template>
<!-- 公共页脚 --> <!-- 公共页脚 -->
@ -43,18 +41,22 @@
<li>供应商咨询：010-2345-1234</li> <li>供应商咨询：010-2345-1234</li>
<li>采购商咨询：010-2345-1234</li> <li>采购商咨询：010-2345-1234</li>
<li>互联网公司投诉意见：010-2345-1234</li> <li>互联网公司投诉意见：010-2345-1234</li>
<li>工作时间：周一至周五 8:30-12：00 &nbsp;&nbsp;&nbsp;&nbsp; 14：00-17：30</li> <li>
工作时间：周一至周五 8:30-12：00 &nbsp;&nbsp;&nbsp;&nbsp;
14：00-17：30
</li>
</ul> </ul>
</div> </div>
</div> </div>
</template> </template>
<style lang="scss"> <style lang="scss">
.footer-container { .footer-container {
margin-top: 40px; margin-top: 40px;
height: 650px; height: 650px;
border-top: 1px solid #979797; border-top: 1px solid #979797;
background: url('../../assets/img/home/2023_12_01_beijing2/beijing2.png') no-repeat; background: url("../../assets/img/home/2023_12_01_beijing2/beijing2.png")
no-repeat;
background-size: cover; background-size: cover;
.icon-info { .icon-info {
@ -75,8 +77,8 @@
text-align: center; text-align: center;
line-height: 50px; line-height: 50px;
border-radius: 50%; border-radius: 50%;
border: 3px solid #2283FF; border: 3px solid #3cb4a6;
color: #2283FF; color: #3cb4a6;
font-weight: bold; font-weight: bold;
font-size: 22px; font-size: 22px;
} }
@ -91,8 +93,7 @@
justify-content: space-around; justify-content: space-around;
i { i {
color: #8C8C8C; color: #8c8c8c;
} }
i:first-child { i:first-child {
@ -123,6 +124,5 @@
font-weight: bold; font-weight: bold;
} }
} }
}
}
</style> </style>

104
src/layout/header.vue
View File

@ -1,47 +1,47 @@
<script setup lang="ts"> <script setup lang="ts">
import $bus from '@/utils/bus' import $bus from "@/utils/bus";
import { mainStore } from 'store/main' import { mainStore } from "store/main";
import { ElMessage, ElMessageBox } from 'element-plus' import { ElMessage, ElMessageBox } from "element-plus";
const store = mainStore() const store = mainStore();
const route = useRoute() const route = useRoute();
const router = useRouter() const router = useRouter();
// 是否显示退出登录 // 是否显示退出登录
const isShowLogout = computed(() => { const isShowLogout = computed(() => {
return store.token return store.token;
}) });
const placeholderText = ref('请输入关键字') const placeholderText = ref("请输入关键字");
// 退出登录 // 退出登录
const handlerLogout = () => { const handlerLogout = () => {
ElMessageBox.confirm('是否确定退出登录', { ElMessageBox.confirm("是否确定退出登录", {
confirmButtonText: '确定', confirmButtonText: "确定",
cancelButtonText: '取消', cancelButtonText: "取消",
type: 'warning' type: "warning",
}) })
.then(() => { .then(() => {
router.push('/login') router.push("/login");
store.cleanUpToken('') store.cleanUpToken("");
ElMessage({ ElMessage({
type: 'success', type: "success",
message: '已退出登录' message: "已退出登录",
}) });
}) })
.catch(() => { .catch(() => {
ElMessage({ ElMessage({
type: 'info', type: "info",
message: '已取消' message: "已取消",
}) });
}) });
} };
// 搜索查询绑定值 // 搜索查询绑定值
const keywordIptValue = ref('') const keywordIptValue = ref("");
// 输入框 dom // 输入框 dom
const inputRef: any = ref(null) const inputRef: any = ref(null);
// 输入框下方历史搜索记录 // 输入框下方历史搜索记录
// const searchHistoryList = computed(() => { // const searchHistoryList = computed(() => {
@ -51,31 +51,31 @@
// 搜索按钮 // 搜索按钮
const searchKeywordBtn = () => { const searchKeywordBtn = () => {
/* 去除空格 */ /* 去除空格 */
keywordIptValue.value = keywordIptValue.value.replace(/\s*/g, '') keywordIptValue.value = keywordIptValue.value.replace(/\s*/g, "");
store.addHistoryRecord(keywordIptValue.value) store.addHistoryRecord(keywordIptValue.value);
if (route.path == '/equipList') { if (route.path == "/equipList") {
$bus.emit('search', keywordIptValue.value) $bus.emit("search", keywordIptValue.value);
} else { } else {
router.push({ router.push({
name: 'equipList', name: "equipList",
state: { keyWord: keywordIptValue.value } state: { keyWord: keywordIptValue.value },
}) });
}
} }
};
// 点击下方搜索记录时 // 点击下方搜索记录时
const handleHistory = (hisValue: any) => { const handleHistory = (hisValue: any) => {
keywordIptValue.value = hisValue keywordIptValue.value = hisValue;
searchKeywordBtn() searchKeywordBtn();
// inputRef.value.focus() // inputRef.value.focus()
} };
//页面刷新回显模糊搜索词 //页面刷新回显模糊搜索词
$bus.on('callBackText', (val) => { $bus.on("callBackText", (val) => {
nextTick(() => { nextTick(() => {
keywordIptValue.value = val keywordIptValue.value = val;
}) });
}) });
</script> </script>
<template> <template>
@ -85,7 +85,9 @@
<div class="header-box wapper"> <div class="header-box wapper">
<div class="header-item"> <div class="header-item">
<span v-if="!isShowLogout"> <span v-if="!isShowLogout">
<a class="a-border-none" @click="$router.push('/login')">登录</a> <a class="a-border-none" @click="$router.push('/login')"
>登录</a
>
<span style="margin: 0 3px">/</span> <span style="margin: 0 3px">/</span>
<a @click="$router.push('/register')">注册</a> <a @click="$router.push('/register')">注册</a>
</span> </span>
@ -97,11 +99,15 @@
<a @click="$router.push({ name: 'myuser' })">个人中心</a> <a @click="$router.push({ name: 'myuser' })">个人中心</a>
</div> </div>
<div class="header-item"> <div class="header-item">
<img src="../assets/img/home/2023_12_01_beijing2/shoucang.png" alt="" /> <img
src="../assets/img/home/2023_12_01_beijing2/shoucang.png"
alt="" />
<a @click="$router.push('/collect')">收藏夹</a> <a @click="$router.push('/collect')">收藏夹</a>
</div> </div>
<div class="header-item last-item"> <div class="header-item last-item">
<img src="../assets/img/home/2023_12_01_beijing2/shouji.png" alt="" /> <img
src="../assets/img/home/2023_12_01_beijing2/shouji.png"
alt="" />
<a class="a-border-none">手机版</a> <a class="a-border-none">手机版</a>
<!-- 二维码弹框 --> <!-- 二维码弹框 -->
@ -120,7 +126,7 @@
<div class="logo-ipt-container wapper"> <div class="logo-ipt-container wapper">
<img <img
src="@/assets/img/home/2023_12_01_beijing2/logo.png" src="@/assets/img/home//机械化装备平台.png"
alt="首页" alt="首页"
title="首页" title="首页"
@click="$router.push('/home')" /> @click="$router.push('/home')" />
@ -187,7 +193,7 @@
} }
a:hover { a:hover {
color: #2282ff; color: #3cb4a6;
} }
.a-border-none { .a-border-none {
@ -236,7 +242,7 @@
padding: 30px 0; padding: 30px 0;
img { img {
width: 176px; width: 240px;
height: 58px; height: 58px;
cursor: pointer; cursor: pointer;
} }
@ -244,7 +250,7 @@
input { input {
width: 700px; width: 700px;
height: 45px; height: 45px;
border: 1px solid #5ca4ff; border: 1px solid #3cb4a6;
border-radius: 45px; border-radius: 45px;
margin-left: 70px; margin-left: 70px;
line-height: 45px; line-height: 45px;
@ -254,7 +260,7 @@
} }
input:focus { input:focus {
outline: 1px solid #5ca4ff; outline: 1px solid #3cb4a6;
} }
input::-webkit-input-placeholder { input::-webkit-input-placeholder {
@ -265,7 +271,7 @@
height: 39px; height: 39px;
transform: translate(-110px, 4px); transform: translate(-110px, 4px);
border-radius: 39px; border-radius: 39px;
background: linear-gradient(132deg, #6de7ff 0%, #348cff 100%); background: linear-gradient(132deg, #22ab9b 0%, #0d7462 100%);
box-shadow: 0px 2px 4px 0px rgba(20, 175, 255, 0.5); box-shadow: 0px 2px 4px 0px rgba(20, 175, 255, 0.5);
border: none; border: none;
color: #fff; color: #fff;

132
src/views/home/index.vue
View File

@ -1,83 +1,83 @@
<script setup lang="ts"> <script setup lang="ts">
import EquipCard from 'components/equipCard.vue' import EquipCard from "components/equipCard.vue";
import NavMenu from 'components/Navmenu/index.vue' import NavMenu from "components/Navmenu/index.vue";
import { getGoodsClassListApi } from 'http/api/home' import { getGoodsClassListApi } from "http/api/home";
import { mainStore } from 'store/main' import { mainStore } from "store/main";
import { getHotList } from 'http/api/equip' import { getHotList } from "http/api/equip";
import { reactive, ref } from 'vue' import { reactive, ref } from "vue";
import baseData from '@/assets/baseInformation.json' import baseData from "@/assets/baseInformation.json";
const router = useRouter() const router = useRouter();
const leftNavList = ref([]) const leftNavList = ref([]);
const loopList = ref([ const loopList = ref([
'https://zlpt-1259760603.cos.ap-nanjing.myqcloud.com/488bab245180ebf9f1f3d7db5301be4.png', "https://zlpt-1259760603.cos.ap-nanjing.myqcloud.com/488bab245180ebf9f1f3d7db5301be4.png",
'https://hzgyp-prod-1259451974.cos.ap-guangzhou.myqcloud.com/41cd93cefd76c28c967f07ad33b5e6fe1575746850588196864475.jpg', "https://hzgyp-prod-1259451974.cos.ap-guangzhou.myqcloud.com/41cd93cefd76c28c967f07ad33b5e6fe1575746850588196864475.jpg",
'https://hzgyp-prod-1259451974.cos.ap-guangzhou.myqcloud.com/11800b353f4d1332b73f18bf0f2133a31575743878894452736462.jpg', "https://hzgyp-prod-1259451974.cos.ap-guangzhou.myqcloud.com/11800b353f4d1332b73f18bf0f2133a31575743878894452736462.jpg",
'https://hzgyp-prod-1259451974.cos.ap-guangzhou.myqcloud.com/85a09403e4328a37b2686d20b2fe717e20220728085635540.jpg' "https://hzgyp-prod-1259451974.cos.ap-guangzhou.myqcloud.com/85a09403e4328a37b2686d20b2fe717e20220728085635540.jpg",
]) ]);
// 获取商品分类 // 获取商品分类
const getGoodsClassList = async () => { const getGoodsClassList = async () => {
const res = await getGoodsClassListApi() const res = await getGoodsClassListApi();
console.log(res, '商品分类列表') console.log(res, "商品分类列表");
leftNavList.value = res.rows leftNavList.value = res.rows;
} };
getGoodsClassList() getGoodsClassList();
const handlerGoodsDetails = (...arg) => { const handlerGoodsDetails = (...arg) => {
const arr = arg.map((key, index) => { const arr = arg.map((key, index) => {
return { return {
level: index + 1 + '', level: index + 1 + "",
typeId: key.id, typeId: key.id,
typeName: key.name typeName: key.name,
} };
}) });
router.push({ router.push({
name: 'equipList', name: "equipList",
state: { typeTag: arr } state: { typeTag: arr },
}) });
} };
const goInformation = (id) => { const goInformation = (id) => {
router.push({ router.push({
path: `/consultationDetails/${id}` path: `/consultationDetails/${id}`,
}) });
} };
const detailsList = ref([]) const detailsList = ref([]);
const handelInformation = () => { const handelInformation = () => {
detailsList.value = baseData.map((item) => { detailsList.value = baseData.map((item) => {
return { return {
v_title: item.title, v_title: item.title,
v_content_info: '', v_content_info: "",
v_time: `[${item.create_time}]`, v_time: `[${item.create_time}]`,
id: item.id id: item.id,
} };
}) });
} };
handelInformation() handelInformation();
const hotDeviceList: any = ref([]) const hotDeviceList: any = ref([]);
/* 获取热搜装备 */ /* 获取热搜装备 */
const getHotDeviceList = async () => { const getHotDeviceList = async () => {
const res: any = await getHotList({ pageSize: 3 }) const res: any = await getHotList({ pageSize: 3 });
hotDeviceList.value = res.rows hotDeviceList.value = res.rows;
console.log(res, '热搜装备111') console.log(res, "热搜装备111");
} };
getHotDeviceList() getHotDeviceList();
/* 热搜卡片点击跳转至详情页 */ /* 热搜卡片点击跳转至详情页 */
const onClick = (val: any) => { const onClick = (val: any) => {
router.push(`/equipDetail/${val.id}`) router.push(`/equipDetail/${val.id}`);
} };
</script> </script>
<template> <template>
@ -87,7 +87,10 @@
<div class="home-goods"> <div class="home-goods">
<ul class="left-nav"> <ul class="left-nav">
<!-- 左侧机械名称菜单按钮 --> <!-- 左侧机械名称菜单按钮 -->
<li class="item-nav" v-for="item in leftNavList" :key="item.name"> <li
class="item-nav"
v-for="item in leftNavList"
:key="item.name">
{{ item.name }} {{ item.name }}
<ul class="sub-goods"> <ul class="sub-goods">
<!-- 级联框内 类别名称 --> <!-- 级联框内 类别名称 -->
@ -98,7 +101,13 @@
<a <a
v-for="son in child.children" v-for="son in child.children"
:key="son.id" :key="son.id"
@click="handlerGoodsDetails(item, child, son)"> @click="
handlerGoodsDetails(
item,
child,
son
)
">
{{ son.name }} {{ son.name }}
</a> </a>
</span> </span>
@ -111,10 +120,18 @@
<NavMenu /> <NavMenu />
<!-- 轮播图 --> <!-- 轮播图 -->
<div class="swpier-img"> <div class="swpier-img">
<el-carousel :interval="5000" arrow="always" height="437px"> <el-carousel
<el-carousel-item v-for="(item, index) in loopList" :key="index"> :interval="5000"
arrow="always"
height="437px">
<el-carousel-item
v-for="(item, index) in loopList"
:key="index">
<!-- <h3 text="2xl" justify="center">{{ item }}</h3> --> <!-- <h3 text="2xl" justify="center">{{ item }}</h3> -->
<el-image style="width: 100%" :src="item" fit="cover" /> <el-image
style="width: 100%"
:src="item"
fit="cover" />
</el-carousel-item> </el-carousel-item>
</el-carousel> </el-carousel>
</div> </div>
@ -127,12 +144,18 @@
</div> </div>
<ul class="equip-pic"> <ul class="equip-pic">
<li v-for="item in hotDeviceList" :key="item.maId" style="cursor: pointer"> <li
v-for="item in hotDeviceList"
:key="item.maId"
style="cursor: pointer">
<EquipCard <EquipCard
@onClick="onClick" @onClick="onClick"
:company="item.companyName || '安徽博诺斯有限公司'" :company="item.companyName || '安徽博诺斯有限公司'"
:price="item.monthLeasePrice" :price="item.monthLeasePrice"
:tags="[item.maStatusStr || '待租', item.cityStr || '合肥']" :tags="[
item.maStatusStr || '待租',
item.cityStr || '合肥',
]"
:name="item.modelName + item.deviceName" :name="item.modelName + item.deviceName"
:url="item.picUrl" :url="item.picUrl"
:id="item.maId" /> :id="item.maId" />
@ -347,7 +370,7 @@
margin: 0 15px; margin: 0 15px;
&:hover { &:hover {
border-bottom: 1px solid #2282ff; border-bottom: 1px solid #3cb4a6;
cursor: pointer; cursor: pointer;
} }
} }
@ -360,7 +383,8 @@
align-items: center; align-items: center;
.left-bg { .left-bg {
background: url(../../assets/img/home/2023_12_01_beijing2/left_bg.png) no-repeat; background: url(../../assets/img/home/2023_12_01_beijing2/left_bg.png)
no-repeat;
background-size: cover; background-size: cover;
width: 340px; width: 340px;
height: 210px; height: 210px;