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']
ElCarousel: typeof import('element-plus/es')['ElCarousel']
ElCarouselItem: typeof import('element-plus/es')['ElCarouselItem']
ElCascader: typeof import('element-plus/es')['ElCascader']
ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
ElCol: typeof import('element-plus/es')['ElCol']
ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
ElDialog: typeof import('element-plus/es')['ElDialog']
ElEmpty: typeof import('element-plus/es')['ElEmpty']
ElForm: typeof import('element-plus/es')['ElForm']
ElFormItem: typeof import('element-plus/es')['ElFormItem']
ElIcon: typeof import('element-plus/es')['ElIcon']
@ -23,14 +25,18 @@ declare module 'vue' {
ElMenu: typeof import('element-plus/es')['ElMenu']
ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
ElOption: typeof import('element-plus/es')['ElOption']
ElPageHeader: typeof import('element-plus/es')['ElPageHeader']
ElPagination: typeof import('element-plus/es')['ElPagination']
ElPopconfirm: typeof import('element-plus/es')['ElPopconfirm']
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']
ElSelect: typeof import('element-plus/es')['ElSelect']
ElTable: typeof import('element-plus/es')['ElTable']
ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
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']
EquipCard: typeof import('./src/components/equipCard.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.186:8080' # 赵福海 (登录)
VITE_proxyTarget = 'http://192.168.2.72:8080' # 赵福海 (登录)
# VITE_proxyTarget = 'http://10.40.92.185:9206' # 赵福海 ( 设备类型)
# 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

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

@ -1,6 +1,4 @@
<script setup lang="ts">
</script>
<script setup lang="ts"></script>
<template>
<!-- 公共页脚 -->
@ -43,86 +41,88 @@
<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>
</div>
</div>
</template>
<style lang="scss">
.footer-container {
margin-top: 40px;
height: 650px;
border-top: 1px solid #979797;
background: url('../../assets/img/home/2023_12_01_beijing2/beijing2.png') no-repeat;
background-size: cover;
.footer-container {
margin-top: 40px;
height: 650px;
border-top: 1px solid #979797;
background: url("../../assets/img/home/2023_12_01_beijing2/beijing2.png")
no-repeat;
background-size: cover;
.icon-info {
height: 100px;
margin-top: 30px;
display: flex;
justify-content: space-around;
li {
.icon-info {
height: 100px;
margin-top: 30px;
display: flex;
align-items: center;
justify-content: space-around;
span:first-child {
display: block;
width: 50px;
height: 50px;
text-align: center;
line-height: 50px;
border-radius: 50%;
border: 3px solid #2283FF;
color: #2283FF;
font-weight: bold;
font-size: 22px;
}
span:last-child {
display: block;
height: 50px;
margin-left: 15px;
li {
height: 100px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
i {
color: #8C8C8C;
span:first-child {
display: block;
width: 50px;
height: 50px;
text-align: center;
line-height: 50px;
border-radius: 50%;
border: 3px solid #3cb4a6;
color: #3cb4a6;
font-weight: bold;
font-size: 22px;
}
i:first-child {
font-weight: bold;
font-size: 18px;
color: #333;
span:last-child {
display: block;
height: 50px;
margin-left: 15px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
i {
color: #8c8c8c;
}
i:first-child {
font-weight: bold;
font-size: 18px;
color: #333;
}
}
}
}
}
.mobile-info {
margin-top: 30px;
text-align: center;
.mobile-info {
margin-top: 30px;
text-align: center;
li {
padding: 20px 0;
}
li {
padding: 20px 0;
}
li:first-child {
padding: 30px 0;
font-size: 20px;
font-weight: bold;
letter-spacing: 1px;
}
li:first-child {
padding: 30px 0;
font-size: 20px;
font-weight: bold;
letter-spacing: 1px;
}
li:last-child {
font-weight: bold;
li:last-child {
font-weight: bold;
}
}
}
}
</style>
</style>

104
src/layout/header.vue
View File

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

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

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